diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index a6d4fe3..544fb42 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -204,24 +204,24 @@ export default function Home({ {/* Título + Selector */}
{/* ✅ Título + logo a la derecha */} -
-
-

- Sistema de Tomas de Agua -

-

- Monitorea, administra y controla tus operaciones en un solo lugar. -

-
+
+
+

+ Sistema de Tomas de Agua +

+

+ Monitorea, administra y controla tus operaciones en un solo lugar. +

+
- {/* ✅ Logo con z-index bajo para NO tapar menús */} - Gestión de Recursos Hídricos -
+ {/* ✅ Logo con z-index bajo para NO tapar menús */} + Gestión de Recursos Hídricos +
{/* Cards de Secciones */}
@@ -238,9 +238,11 @@ export default function Home({ Alertas
-
+
setPage("projects")} + > - Mantenimiento + Proyectos
@@ -270,15 +272,15 @@ export default function Home({
{showOrganisms && ( -
- {/* Overlay */} -
{ - setShowOrganisms(false); - setOrganismQuery(""); - }} - /> +
+ {/* Overlay */} +
{ + setShowOrganisms(false); + setOrganismQuery(""); + }} + /> {/* Panel */}
diff --git a/src/pages/consumption/ConsumptionPage.tsx b/src/pages/consumption/ConsumptionPage.tsx index 373ca03..cf32148 100644 --- a/src/pages/consumption/ConsumptionPage.tsx +++ b/src/pages/consumption/ConsumptionPage.tsx @@ -100,6 +100,29 @@ export default function ConsumptionPage() { ); }, [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 => { if (!dateStr) return "—"; const date = new Date(dateStr); @@ -182,7 +205,7 @@ export default function ConsumptionPage() { @@ -275,20 +268,21 @@ export default function MetersPage({
setSearch(e.target.value)} - disabled={isMockMode || !m.selectedProject} + disabled={!m.selectedProject} /> setActiveMeter(row)} + takeType={takeType} /> - {selectedProject || (isMockMode ? "— (modo demo)" : "—")} + {selectedProject || "—"}

@@ -128,15 +128,10 @@ export default function MetersSidebar({ setTakeType(opt.key); setTypesMenuOpen(false); - // Reset selection/search desde el parent onResetSelection?.(); - if (opt.key !== "GENERAL") { - // mock mode -> limpia selección real - setSelectedProject(""); - } else { - // vuelve a GENERAL -> autoselecciona real si no hay - setSelectedProject((prev) => prev || allProjects[0] || ""); + if (!selectedProject && allProjects.length > 0) { + setSelectedProject(allProjects[0]); } }} className={[ @@ -163,12 +158,10 @@ export default function MetersSidebar({ {/* List */}
{loadingProjects ? ( -
Loading projects...
+
Cargando proyectos...
) : projects.length === 0 ? (
- {isMockMode - ? "No hay datos demo para este tipo." - : "No se encontraron proyectos."} + No se encontraron proyectos.
) : ( projects.map((p) => { diff --git a/src/pages/meters/MetersTable.tsx b/src/pages/meters/MetersTable.tsx index b10b0c4..b837fd7 100644 --- a/src/pages/meters/MetersTable.tsx +++ b/src/pages/meters/MetersTable.tsx @@ -1,13 +1,13 @@ import MaterialTable from "@material-table/core"; import type { Meter } from "../../api/meters"; +import type { TakeType } from "./MeterPage"; -type Props = { +export type MetersTableProps = { data: Meter[]; isLoading: boolean; - isMockMode: boolean; selectedProject: string; - + takeType: TakeType; activeMeter: Meter | null; onRowClick: (row: Meter) => void; }; @@ -17,10 +17,18 @@ export default function MetersTable({ isLoading, isMockMode, selectedProject, + takeType, activeMeter, onRowClick, -}: Props) { +}: MetersTableProps) { const disabled = isMockMode || !selectedProject; + + const typeLabels: Record = { + GENERAL: "todos los tipos", + LORA: "LoRa", + LORAWAN: "LoRaWAN", + GRANDES: "Grandes consumidores", + }; return (
@@ -80,7 +88,17 @@ export default function MetersTable({ actionsColumnIndex: -1, search: false, paging: true, + pageSize: 10, + pageSizeOptions: [10, 20, 50], sorting: true, + maxBodyHeight: "calc(100vh - 400px)", + headerStyle: { + position: "sticky", + top: 0, + backgroundColor: "#fff", + zIndex: 10, + fontWeight: 600, + }, rowStyle: (rowData) => ({ backgroundColor: activeMeter?.id === (rowData as Meter).id ? "#EEF2FF" : "#FFFFFF", @@ -91,10 +109,12 @@ export default function MetersTable({ emptyDataSourceMessage: isMockMode ? "Modo demo: selecciona 'General' para ver datos reales." : !selectedProject - ? "Select a project to view meters." + ? "Selecciona un proyecto para ver medidores." : isLoading - ? "Loading meters..." - : "No meters found. Click 'Add' to create your first meter.", + ? "Cargando medidores..." + : 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.", }, }} />