Meter changes

2026-01-29 18:10:37 -06:00
parent 33b072436d
commit b5ea12dd27
5 changed files with 119 additions and 80 deletions
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -204,24 +204,24 @@ export default function Home({
      {/* Título + Selector */}
      <div className="flex flex-col gap-3">
        {/* ✅ Título + logo a la derecha */}
-<div className="relative flex items-start justify-between gap-6">
-  <div className="relative z-10">
-    <h1 className="text-3xl font-bold text-gray-800">
-      Sistema de Tomas de Agua
-    </h1>
-    <p className="text-gray-600 mt-2">
-      Monitorea, administra y controla tus operaciones en un solo lugar.
-    </p>
-  </div>
+        <div className="relative flex items-start justify-between gap-6">
+          <div className="relative z-10">
+            <h1 className="text-3xl font-bold text-gray-800">
+              Sistema de Tomas de Agua
+            </h1>
+            <p className="text-gray-600 mt-2">
+              Monitorea, administra y controla tus operaciones en un solo lugar.
+            </p>
+          </div>

-  {/* ✅ Logo con z-index bajo para NO tapar menús */}
-  <img
-    src={grhWatermark}
-    alt="Gestión de Recursos Hídricos"
-    className="relative z-0 h-10 w-auto opacity-80 select-none pointer-events-none shrink-0"
-    draggable={false}
-  />
-</div>
+          {/* ✅ Logo con z-index bajo para NO tapar menús */}
+          <img
+            src={grhWatermark}
+            alt="Gestión de Recursos Hídricos"
+            className="relative z-0 h-16 w-auto opacity-80 select-none pointer-events-none shrink-0"
+            draggable={false}
+          />
+        </div>

        {/* Cards de Secciones */}
        <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>
          </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" />
-            <span className="font-semibold text-gray-700">Mantenimiento</span>
+            <span className="font-semibold text-gray-700">Proyectos</span>
          </div>

          <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>

          {showOrganisms && (
-  <div className="fixed inset-0 z-30">
-    {/* Overlay */}
-    <div
-      className="absolute inset-0 bg-black/40"
-      onClick={() => {
-        setShowOrganisms(false);
-        setOrganismQuery("");
-      }}
-    />
+            <div className="fixed inset-0 z-30">
+              {/* Overlay */}
+              <div
+                className="absolute inset-0 bg-black/40"
+                onClick={() => {
+                  setShowOrganisms(false);
+                  setOrganismQuery("");
+                }}
+              />

              {/* Panel */}
              <div className="absolute right-0 top-0 h-full w-full sm:w-[520px] bg-white shadow-2xl flex flex-col">
--- 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() {
            <button
              onClick={exportToCSV}
              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} />
              Exportar
@@ -214,6 +237,13 @@ export default function ConsumptionPage() {
            loading={loadingSummary}
            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
            icon={<Clock />}
            label="Última Lectura"
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -36,7 +36,6 @@ export default function MetersPage({

  // UI state
  const [takeType, setTakeType] = useState<TakeType>("GENERAL");
-  const isMockMode = takeType !== "GENERAL";

  const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
  const [search, setSearch] = useState("");
@@ -85,15 +84,19 @@ export default function MetersPage({
    }));
  }, [m.allProjects, m.projectsCounts]);

-  const sidebarProjects = isMockMode ? [] : projectsDataReal;
+  const sidebarProjects = projectsDataReal;

-  // Search filtered meters
  const searchFiltered = useMemo(() => {
-    if (isMockMode) return [];
-    const q = search.trim().toLowerCase();
-    if (!q) return m.filteredMeters;
+    let filtered = 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 (
        (x.name ?? "").toLowerCase().includes(q) ||
        (x.serialNumber ?? "").toLowerCase().includes(q) ||
@@ -101,7 +104,7 @@ export default function MetersPage({
        (x.concentratorName ?? "").toLowerCase().includes(q)
      );
    });
-  }, [isMockMode, search, m.filteredMeters]);
+  }, [takeType, search, m.filteredMeters]);

  // Validation
  const validateForm = (): boolean => {
@@ -117,7 +120,6 @@ export default function MetersPage({

  // CRUD handlers
  const handleSave = async () => {
-    if (isMockMode) return;
    if (!validateForm()) return;

    try {
@@ -143,7 +145,6 @@ export default function MetersPage({
  };

  const handleDelete = async () => {
-    if (isMockMode) return;
    if (!activeMeter) return;

    try {
@@ -169,7 +170,7 @@ export default function MetersPage({
  };

  const openEditModal = () => {
-    if (isMockMode || !activeMeter) return;
+    if (!activeMeter) return;

    setEditingId(activeMeter.id);
    setForm({
@@ -187,8 +188,6 @@ export default function MetersPage({
  };

  const openCreateModal = () => {
-    if (isMockMode) return;
-
    setForm(emptyForm);
    setErrors({});
    setEditingId(null);
@@ -204,7 +203,7 @@ export default function MetersPage({
        setTakeType={setTakeType}
        selectedProject={m.selectedProject}
        setSelectedProject={m.setSelectedProject}
-        isMockMode={isMockMode}
+        isMockMode={false}
        projects={sidebarProjects}
        onRefresh={handleRefresh}
        refreshDisabled={false}
@@ -221,10 +220,8 @@ export default function MetersPage({
          <div>
            <h1 className="text-2xl font-bold">Meter Management</h1>
            <p className="text-sm text-blue-100">
-              {isMockMode
-                ? `Modo demo (${takeType}) - backend pendiente`
-                : m.selectedProject
-                ? `Proyecto: ${m.selectedProject}`
+              {m.selectedProject
+                ? `Proyecto: ${m.selectedProject}${takeType !== "GENERAL" ? ` • Tipo: ${takeType}` : ""}`
                : "Selecciona un proyecto desde el panel izquierdo"}
            </p>
          </div>
@@ -232,15 +229,14 @@ export default function MetersPage({
          <div className="flex gap-3">
            <button
              onClick={openCreateModal}
-              disabled={isMockMode || 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"
+              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 hover:bg-gray-50"
            >
              <Plus size={16} /> Agregar
            </button>

            <button
              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"
            >
              <Upload size={16} /> Carga Masiva
@@ -248,19 +244,16 @@ export default function MetersPage({

            <button
              onClick={openEditModal}
-              disabled={isMockMode || !activeMeter}
-              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
+              disabled={!activeMeter}
+              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
            </button>

            <button
-              onClick={() => {
-                if (isMockMode) return;
-                setConfirmOpen(true);
-              }}
-              disabled={isMockMode || !activeMeter}
-              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
+              onClick={() => setConfirmOpen(true)}
+              disabled={!activeMeter}
+              className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60 hover:bg-red-500/20"
            >
              <Trash2 size={16} /> Eliminar
            </button>
@@ -275,20 +268,21 @@ export default function MetersPage({
        </div>

        <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..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
-          disabled={isMockMode || !m.selectedProject}
+          disabled={!m.selectedProject}
        />

        <MetersTable
          data={searchFiltered}
          isLoading={m.loadingMeters}
-          isMockMode={isMockMode}
+          isMockMode={false}
          selectedProject={m.selectedProject}
          activeMeter={activeMeter}
          onRowClick={(row) => setActiveMeter(row)}
+          takeType={takeType}
        />

        <ConfirmModal
--- a/src/pages/meters/MetersSidebar.tsx
+++ b/src/pages/meters/MetersSidebar.tsx
@@ -78,7 +78,7 @@ export default function MetersSidebar({
              {" • "}
              Seleccionado:{" "}
              <span className="font-semibold">
-                {selectedProject || (isMockMode ? "— (modo demo)" : "—")}
+                {selectedProject || "—"}
              </span>
            </p>
          </div>
@@ -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 */}
        <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
          {loadingProjects ? (
-            <div className="text-sm text-gray-500">Loading projects...</div>
+            <div className="text-sm text-gray-500">Cargando proyectos...</div>
          ) : projects.length === 0 ? (
            <div className="text-sm text-gray-500 text-center py-10">
-              {isMockMode
-                ? "No hay datos demo para este tipo."
-                : "No se encontraron proyectos."}
+              No se encontraron proyectos.
            </div>
          ) : (
            projects.map((p) => {
--- 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<TakeType, string> = {
+    GENERAL: "todos los tipos",
+    LORA: "LoRa",
+    LORAWAN: "LoRaWAN",
+    GRANDES: "Grandes consumidores",
+  };

  return (
    <div className={disabled ? "opacity-60 pointer-events-none" : ""}>
@@ -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.",
          },
        }}
      />