consultoria-as/GRH
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Meter changes

Browse Source
This commit is contained in:
Esteban
2026-01-29 18:10:37 -06:00
parent 33b072436d
commit b5ea12dd27
5 changed files with 119 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/Home.tsx
View File

@@ -204,24 +204,24 @@ export default function Home({
{/* Título + Selector */} {/* Título + Selector */}
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
{/* ✅ Título + logo a la derecha */} {/* ✅ Título + logo a la derecha */}
<div className="relative flex items-start justify-between gap-6"> <div className="relative flex items-start justify-between gap-6">
<div className="relative z-10"> <div className="relative z-10">
<h1 className="text-3xl font-bold text-gray-800"> <h1 className="text-3xl font-bold text-gray-800">
Sistema de Tomas de Agua Sistema de Tomas de Agua
</h1> </h1>
<p className="text-gray-600 mt-2"> <p className="text-gray-600 mt-2">
Monitorea, administra y controla tus operaciones en un solo lugar. Monitorea, administra y controla tus operaciones en un solo lugar.
</p> </p>
</div> </div>
{/* ✅ Logo con z-index bajo para NO tapar menús */} {/* ✅ Logo con z-index bajo para NO tapar menús */}
<img <img
src={grhWatermark} src={grhWatermark}
alt="Gestión de Recursos Hídricos" alt="Gestión de Recursos Hídricos"
className="relative z-0 h-10 w-auto opacity-80 select-none pointer-events-none shrink-0" className="relative z-0 h-16 w-auto opacity-80 select-none pointer-events-none shrink-0"
draggable={false} draggable={false}
/> />
</div> </div>
{/* Cards de Secciones */} {/* Cards de Secciones */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
@@ -238,9 +238,11 @@ export default function Home({
<span className="font-semibold text-gray-700">Alertas</span> <span className="font-semibold text-gray-700">Alertas</span>
</div> </div>
<div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 transition"> <div className="cursor-pointer bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 transition"
onClick={() => setPage("projects")}
>
<Settings size={40} className="text-yellow-600" /> <Settings size={40} className="text-yellow-600" />
<span className="font-semibold text-gray-700">Mantenimiento</span> <span className="font-semibold text-gray-700">Proyectos</span>
</div> </div>
<div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 transition"> <div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 transition">
@@ -270,15 +272,15 @@ export default function Home({
</div> </div>
{showOrganisms && ( {showOrganisms && (
<div className="fixed inset-0 z-30"> <div className="fixed inset-0 z-30">
{/* Overlay */} {/* Overlay */}
<div <div
className="absolute inset-0 bg-black/40" className="absolute inset-0 bg-black/40"
onClick={() => { onClick={() => {
setShowOrganisms(false); setShowOrganisms(false);
setOrganismQuery(""); setOrganismQuery("");
}} }}
/> />
{/* Panel */} {/* Panel */}
<div className="absolute right-0 top-0 h-full w-full sm:w-[520px] bg-white shadow-2xl flex flex-col"> <div className="absolute right-0 top-0 h-full w-full sm:w-[520px] bg-white shadow-2xl flex flex-col">

32
src/pages/consumption/ConsumptionPage.tsx
View File

@@ -100,6 +100,29 @@ export default function ConsumptionPage() {
); );
}, [readings, search]); }, [readings, search]);
const currentMonthAverage = useMemo(() => {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth();
const currentMonthReadings = readings.filter((r) => {
if (!r.receivedAt) return false;
const readingDate = new Date(r.receivedAt);
return (
readingDate.getFullYear() === currentYear &&
readingDate.getMonth() === currentMonth
);
});
if (currentMonthReadings.length === 0) return 0;
const sum = currentMonthReadings.reduce(
(acc, r) => acc + Number(r.readingValue),
0
);
return sum / currentMonthReadings.length;
}, [readings]);
const formatDate = (dateStr: string | null): string => { const formatDate = (dateStr: string | null): string => {
if (!dateStr) return "—"; if (!dateStr) return "—";
const date = new Date(dateStr); const date = new Date(dateStr);
@@ -182,7 +205,7 @@ export default function ConsumptionPage() {
<button <button
onClick={exportToCSV} onClick={exportToCSV}
disabled={filteredReadings.length === 0} disabled={filteredReadings.length === 0}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-sm shadow-blue-500/25 disabled:opacity-50 disabled:cursor-not-allowed" className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-linear-to-r from-blue-600 to-indigo-600 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-sm shadow-blue-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
> >
<Download size={16} /> <Download size={16} />
Exportar Exportar
@@ -214,6 +237,13 @@ export default function ConsumptionPage() {
loading={loadingSummary} loading={loadingSummary}
gradient="from-violet-500 to-purple-600" gradient="from-violet-500 to-purple-600"
/> />
<StatCard
icon={<Droplets />}
label="Consumo Acumulado"
value={`${currentMonthAverage.toFixed(1)} m³`}
loading={loadingReadings}
gradient="from-red-500 to-red-600"
/>
<StatCard <StatCard
icon={<Clock />} icon={<Clock />}
label="Última Lectura" label="Última Lectura"

58
src/pages/meters/MeterPage.tsx
View File

@@ -36,7 +36,6 @@ export default function MetersPage({
// UI state // UI state
const [takeType, setTakeType] = useState<TakeType>("GENERAL"); const [takeType, setTakeType] = useState<TakeType>("GENERAL");
const isMockMode = takeType !== "GENERAL";
const [activeMeter, setActiveMeter] = useState<Meter | null>(null); const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@@ -85,15 +84,19 @@ export default function MetersPage({
})); }));
}, [m.allProjects, m.projectsCounts]); }, [m.allProjects, m.projectsCounts]);
const sidebarProjects = isMockMode ? [] : projectsDataReal; const sidebarProjects = projectsDataReal;
// Search filtered meters
const searchFiltered = useMemo(() => { const searchFiltered = useMemo(() => {
if (isMockMode) return []; let filtered = m.filteredMeters;
const q = search.trim().toLowerCase();
if (!q) return m.filteredMeters;
return m.filteredMeters.filter((x) => { if (takeType !== "GENERAL") {
filtered = filtered.filter((meter) => meter.type === takeType);
}
const q = search.trim().toLowerCase();
if (!q) return filtered;
return filtered.filter((x) => {
return ( return (
(x.name ?? "").toLowerCase().includes(q) || (x.name ?? "").toLowerCase().includes(q) ||
(x.serialNumber ?? "").toLowerCase().includes(q) || (x.serialNumber ?? "").toLowerCase().includes(q) ||
@@ -101,7 +104,7 @@ export default function MetersPage({
(x.concentratorName ?? "").toLowerCase().includes(q) (x.concentratorName ?? "").toLowerCase().includes(q)
); );
}); });
}, [isMockMode, search, m.filteredMeters]); }, [takeType, search, m.filteredMeters]);
// Validation // Validation
const validateForm = (): boolean => { const validateForm = (): boolean => {
@@ -117,7 +120,6 @@ export default function MetersPage({
// CRUD handlers // CRUD handlers
const handleSave = async () => { const handleSave = async () => {
if (isMockMode) return;
if (!validateForm()) return; if (!validateForm()) return;
try { try {
@@ -143,7 +145,6 @@ export default function MetersPage({
}; };
const handleDelete = async () => { const handleDelete = async () => {
if (isMockMode) return;
if (!activeMeter) return; if (!activeMeter) return;
try { try {
@@ -169,7 +170,7 @@ export default function MetersPage({
}; };
const openEditModal = () => { const openEditModal = () => {
if (isMockMode || !activeMeter) return; if (!activeMeter) return;
setEditingId(activeMeter.id); setEditingId(activeMeter.id);
setForm({ setForm({
@@ -187,8 +188,6 @@ export default function MetersPage({
}; };
const openCreateModal = () => { const openCreateModal = () => {
if (isMockMode) return;
setForm(emptyForm); setForm(emptyForm);
setErrors({}); setErrors({});
setEditingId(null); setEditingId(null);
@@ -204,7 +203,7 @@ export default function MetersPage({
setTakeType={setTakeType} setTakeType={setTakeType}
selectedProject={m.selectedProject} selectedProject={m.selectedProject}
setSelectedProject={m.setSelectedProject} setSelectedProject={m.setSelectedProject}
isMockMode={isMockMode} isMockMode={false}
projects={sidebarProjects} projects={sidebarProjects}
onRefresh={handleRefresh} onRefresh={handleRefresh}
refreshDisabled={false} refreshDisabled={false}
@@ -221,10 +220,8 @@ export default function MetersPage({
<div> <div>
<h1 className="text-2xl font-bold">Meter Management</h1> <h1 className="text-2xl font-bold">Meter Management</h1>
<p className="text-sm text-blue-100"> <p className="text-sm text-blue-100">
{isMockMode {m.selectedProject
? `Modo demo (${takeType}) - backend pendiente` ? `Proyecto: ${m.selectedProject}${takeType !== "GENERAL" ? ` • Tipo: ${takeType}` : ""}`
: m.selectedProject
? `Proyecto: ${m.selectedProject}`
: "Selecciona un proyecto desde el panel izquierdo"} : "Selecciona un proyecto desde el panel izquierdo"}
</p> </p>
</div> </div>
@@ -232,15 +229,14 @@ export default function MetersPage({
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
onClick={openCreateModal} onClick={openCreateModal}
disabled={isMockMode || m.allProjects.length === 0} disabled={m.allProjects.length === 0}
className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
> >
<Plus size={16} /> Agregar <Plus size={16} /> Agregar
</button> </button>
<button <button
onClick={() => setShowBulkUpload(true)} onClick={() => setShowBulkUpload(true)}
disabled={isMockMode}
className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-green-600" className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-green-600"
> >
<Upload size={16} /> Carga Masiva <Upload size={16} /> Carga Masiva
@@ -248,19 +244,16 @@ export default function MetersPage({
<button <button
onClick={openEditModal} onClick={openEditModal}
disabled={isMockMode || !activeMeter} disabled={!activeMeter}
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60" className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60 hover:bg-white/10"
> >
<Pencil size={16} /> Editar <Pencil size={16} /> Editar
</button> </button>
<button <button
onClick={() => { onClick={() => setConfirmOpen(true)}
if (isMockMode) return; disabled={!activeMeter}
setConfirmOpen(true); className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60 hover:bg-red-500/20"
}}
disabled={isMockMode || !activeMeter}
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
> >
<Trash2 size={16} /> Eliminar <Trash2 size={16} /> Eliminar
</button> </button>
@@ -275,20 +268,21 @@ export default function MetersPage({
</div> </div>
<input <input
className="bg-white rounded-lg shadow px-4 py-2 text-sm" className="bg-white rounded-lg shadow px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Buscar por nombre, serial, ubicación o concentrador..." placeholder="Buscar por nombre, serial, ubicación o concentrador..."
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
disabled={isMockMode || !m.selectedProject} disabled={!m.selectedProject}
/> />
<MetersTable <MetersTable
data={searchFiltered} data={searchFiltered}
isLoading={m.loadingMeters} isLoading={m.loadingMeters}
isMockMode={isMockMode} isMockMode={false}
selectedProject={m.selectedProject} selectedProject={m.selectedProject}
activeMeter={activeMeter} activeMeter={activeMeter}
onRowClick={(row) => setActiveMeter(row)} onRowClick={(row) => setActiveMeter(row)}
takeType={takeType}
/> />
<ConfirmModal <ConfirmModal

17
src/pages/meters/MetersSidebar.tsx
View File

@@ -78,7 +78,7 @@ export default function MetersSidebar({
{" • "} {" • "}
Seleccionado:{" "} Seleccionado:{" "}
<span className="font-semibold"> <span className="font-semibold">
{selectedProject || (isMockMode ? "— (modo demo)" : "—")} {selectedProject || "—"}
</span> </span>
</p> </p>
</div> </div>
@@ -128,15 +128,10 @@ export default function MetersSidebar({
setTakeType(opt.key); setTakeType(opt.key);
setTypesMenuOpen(false); setTypesMenuOpen(false);
// Reset selection/search desde el parent
onResetSelection?.(); onResetSelection?.();
if (opt.key !== "GENERAL") { if (!selectedProject && allProjects.length > 0) {
// mock mode -> limpia selección real setSelectedProject(allProjects[0]);
setSelectedProject("");
} else {
// vuelve a GENERAL -> autoselecciona real si no hay
setSelectedProject((prev) => prev || allProjects[0] || "");
} }
}} }}
className={[ className={[
@@ -163,12 +158,10 @@ export default function MetersSidebar({
{/* List */} {/* List */}
<div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1"> <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
{loadingProjects ? ( {loadingProjects ? (
<div className="text-sm text-gray-500">Loading projects...</div> <div className="text-sm text-gray-500">Cargando proyectos...</div>
) : projects.length === 0 ? ( ) : projects.length === 0 ? (
<div className="text-sm text-gray-500 text-center py-10"> <div className="text-sm text-gray-500 text-center py-10">
{isMockMode No se encontraron proyectos.
? "No hay datos demo para este tipo."
: "No se encontraron proyectos."}
</div> </div>
) : ( ) : (
projects.map((p) => { projects.map((p) => {

34
src/pages/meters/MetersTable.tsx
View File

@@ -1,13 +1,13 @@
import MaterialTable from "@material-table/core"; import MaterialTable from "@material-table/core";
import type { Meter } from "../../api/meters"; import type { Meter } from "../../api/meters";
import type { TakeType } from "./MeterPage";
type Props = { export type MetersTableProps = {
data: Meter[]; data: Meter[];
isLoading: boolean; isLoading: boolean;
isMockMode: boolean; isMockMode: boolean;
selectedProject: string; selectedProject: string;
takeType: TakeType;
activeMeter: Meter | null; activeMeter: Meter | null;
onRowClick: (row: Meter) => void; onRowClick: (row: Meter) => void;
}; };
@@ -17,10 +17,18 @@ export default function MetersTable({
isLoading, isLoading,
isMockMode, isMockMode,
selectedProject, selectedProject,
takeType,
activeMeter, activeMeter,
onRowClick, onRowClick,
}: Props) { }: MetersTableProps) {
const disabled = isMockMode || !selectedProject; const disabled = isMockMode || !selectedProject;
const typeLabels: Record<TakeType, string> = {
GENERAL: "todos los tipos",
LORA: "LoRa",
LORAWAN: "LoRaWAN",
GRANDES: "Grandes consumidores",
};
return ( return (
<div className={disabled ? "opacity-60 pointer-events-none" : ""}> <div className={disabled ? "opacity-60 pointer-events-none" : ""}>
@@ -80,7 +88,17 @@ export default function MetersTable({
actionsColumnIndex: -1, actionsColumnIndex: -1,
search: false, search: false,
paging: true, paging: true,
pageSize: 10,
pageSizeOptions: [10, 20, 50],
sorting: true, sorting: true,
maxBodyHeight: "calc(100vh - 400px)",
headerStyle: {
position: "sticky",
top: 0,
backgroundColor: "#fff",
zIndex: 10,
fontWeight: 600,
},
rowStyle: (rowData) => ({ rowStyle: (rowData) => ({
backgroundColor: backgroundColor:
activeMeter?.id === (rowData as Meter).id ? "#EEF2FF" : "#FFFFFF", activeMeter?.id === (rowData as Meter).id ? "#EEF2FF" : "#FFFFFF",
@@ -91,10 +109,12 @@ export default function MetersTable({
emptyDataSourceMessage: isMockMode emptyDataSourceMessage: isMockMode
? "Modo demo: selecciona 'General' para ver datos reales." ? "Modo demo: selecciona 'General' para ver datos reales."
: !selectedProject : !selectedProject
? "Select a project to view meters." ? "Selecciona un proyecto para ver medidores."
: isLoading : isLoading
? "Loading meters..." ? "Cargando medidores..."
: "No meters found. Click 'Add' to create your first meter.", : takeType !== "GENERAL"
? `No se encontraron medidores de tipo ${typeLabels[takeType]} en este proyecto.`
: "No se encontraron medidores. Haz clic en 'Agregar' para crear tu primer medidor.",
}, },
}} }}
/> />