From e06941fd02495a4c6ee420d24efc899f386d6c39 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 2 Feb 2026 01:58:30 -0600
Subject: [PATCH] prueba columns

---
 src/api/meters.ts                       |  30 +++++
 src/pages/meters/MeterPage.tsx          |  11 ++
 src/pages/meters/MetersModal.tsx        | 142 ++++++++++++++++++++++++
 src/pages/meters/MetersTable.tsx        | 139 +++++++++++++++--------
 water-api/src/services/meter.service.ts |   4 +-
 5 files changed, 278 insertions(+), 48 deletions(-)

diff --git a/src/api/meters.ts b/src/api/meters.ts
index 9f4d706..6816722 100644
--- a/src/api/meters.ts
+++ b/src/api/meters.ts
@@ -53,6 +53,21 @@ export interface Meter {
   concentratorSerial?: string;
   projectId?: string;
   projectName?: string;
+  
+  protocol?: string | null;
+  mac?: string | null;
+  gateway?: string | null;
+  voltage?: number | null;
+  voltageRtu?: number | null;
+  voltageStatus?: string | null;
+  signal?: number | null;
+  leakageStatus?: string | null;
+  burstStatus?: string | null;
+  currentFlow?: number | null;
+  totalFlowReverse?: number | null;
+  manufacturer?: string | null;
+  latitude?: number | null;
+  longitude?: number | null;
 }
 
 /**
@@ -67,6 +82,21 @@ export interface MeterInput {
   type?: string;
   status?: string;
   installationDate?: string;
+  
+  protocol?: string;
+  mac?: string;
+  gateway?: string;
+  voltage?: number;
+  voltageRtu?: number;
+  voltageStatus?: string;
+  signal?: number;
+  leakageStatus?: string;
+  burstStatus?: string;
+  currentFlow?: number;
+  totalFlowReverse?: number;
+  manufacturer?: string;
+  latitude?: number;
+  longitude?: number;
 }
 
 /**
diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index 4c2ff33..358cf86 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -182,6 +182,16 @@ export default function MetersPage({
       type: activeMeter.type,
       status: activeMeter.status,
       installationDate: activeMeter.installationDate ?? "",
+      protocol: activeMeter.protocol ?? undefined,
+      voltage: activeMeter.voltage ?? undefined,
+      signal: activeMeter.signal ?? undefined,
+      leakageStatus: activeMeter.leakageStatus ?? undefined,
+      burstStatus: activeMeter.burstStatus ?? undefined,
+      currentFlow: activeMeter.currentFlow ?? undefined,
+      totalFlowReverse: activeMeter.totalFlowReverse ?? undefined,
+      manufacturer: activeMeter.manufacturer ?? undefined,
+      latitude: activeMeter.latitude ?? undefined,
+      longitude: activeMeter.longitude ?? undefined,
     });
     setErrors({});
     setShowModal(true);
@@ -311,6 +321,7 @@ export default function MetersPage({
       {showModal && (
         <MetersModal
           editingId={editingId}
+          selectedProject={m.selectedProject}
           form={form}
           setForm={setForm}
           errors={errors}
diff --git a/src/pages/meters/MetersModal.tsx b/src/pages/meters/MetersModal.tsx
index 32e460b..2ffd8e4 100644
--- a/src/pages/meters/MetersModal.tsx
+++ b/src/pages/meters/MetersModal.tsx
@@ -5,6 +5,7 @@ import { fetchConcentrators, type Concentrator } from "../../api/concentrators";
 
 type Props = {
   editingId: string | null;
+  selectedProject?: string;
 
   form: MeterInput;
   setForm: React.Dispatch<React.SetStateAction<MeterInput>>;
@@ -18,6 +19,7 @@ type Props = {
 
 export default function MetersModal({
   editingId,
+  selectedProject,
   form,
   setForm,
   errors,
@@ -28,6 +30,7 @@ export default function MetersModal({
   const title = editingId ? "Editar Medidor" : "Agregar Medidor";
   const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
   const [loadingConcentrators, setLoadingConcentrators] = useState(true);
+  const isPruebaProject = selectedProject === "PRUEBA";
 
   // Load concentrators for the dropdown
   useEffect(() => {
@@ -187,6 +190,145 @@ export default function MetersModal({
           </div>
         </div>
 
+        {isPruebaProject && (
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+              Información Técnica (Proyecto PRUEBA)
+            </h3>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Protocol</label>
+                <input
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: LoRaWAN"
+                  value={form.protocol ?? ""}
+                  onChange={(e) => setForm({ ...form, protocol: e.target.value || undefined })}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Voltage (V)</label>
+                <input
+                  type="number"
+                  step="0.01"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: 3.6"
+                  value={form.voltage ?? ""}
+                  onChange={(e) => setForm({ ...form, voltage: e.target.value ? parseFloat(e.target.value) : undefined })}
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Signal (dBm)</label>
+                <input
+                  type="number"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: -85"
+                  value={form.signal ?? ""}
+                  onChange={(e) => setForm({ ...form, signal: e.target.value ? parseInt(e.target.value) : undefined })}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Current Flow</label>
+                <input
+                  type="number"
+                  step="0.0001"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: 12.5"
+                  value={form.currentFlow ?? ""}
+                  onChange={(e) => setForm({ ...form, currentFlow: e.target.value ? parseFloat(e.target.value) : undefined })}
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Total Flow Reverse</label>
+                <input
+                  type="number"
+                  step="0.0001"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: 0.0"
+                  value={form.totalFlowReverse ?? ""}
+                  onChange={(e) => setForm({ ...form, totalFlowReverse: e.target.value ? parseFloat(e.target.value) : undefined })}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Leakage Status</label>
+                <select
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  value={form.leakageStatus ?? ""}
+                  onChange={(e) => setForm({ ...form, leakageStatus: e.target.value || undefined })}
+                >
+                  <option value="">Selecciona...</option>
+                  <option value="OK">OK</option>
+                  <option value="WARNING">Warning</option>
+                  <option value="ALERT">Alert</option>
+                  <option value="CRITICAL">Critical</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Burst Status</label>
+                <select
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  value={form.burstStatus ?? ""}
+                  onChange={(e) => setForm({ ...form, burstStatus: e.target.value || undefined })}
+                >
+                  <option value="">Selecciona...</option>
+                  <option value="OK">OK</option>
+                  <option value="WARNING">Warning</option>
+                  <option value="ALERT">Alert</option>
+                  <option value="CRITICAL">Critical</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Manufacturer</label>
+                <input
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: Kamstrup"
+                  value={form.manufacturer ?? ""}
+                  onChange={(e) => setForm({ ...form, manufacturer: e.target.value || undefined })}
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Latitude</label>
+                <input
+                  type="number"
+                  step="0.00000001"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: 20.659698"
+                  value={form.latitude ?? ""}
+                  onChange={(e) => setForm({ ...form, latitude: e.target.value ? parseFloat(e.target.value) : undefined })}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm text-gray-600 mb-1">Longitude</label>
+                <input
+                  type="number"
+                  step="0.00000001"
+                  className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="ej: -103.349609"
+                  value={form.longitude ?? ""}
+                  onChange={(e) => setForm({ ...form, longitude: e.target.value ? parseFloat(e.target.value) : undefined })}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* ACTIONS */}
         <div className="flex justify-end gap-2 pt-3 border-t">
           <button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
diff --git a/src/pages/meters/MetersTable.tsx b/src/pages/meters/MetersTable.tsx
index b837fd7..7fdd5b8 100644
--- a/src/pages/meters/MetersTable.tsx
+++ b/src/pages/meters/MetersTable.tsx
@@ -30,58 +30,103 @@ export default function MetersTable({
     GRANDES: "Grandes consumidores",
   };
 
+  const isPruebaProject = selectedProject === "PRUEBA";
+
+  const defaultColumns = [
+    { title: "Serial", field: "serialNumber", render: (r: Meter) => r.serialNumber || "-" },
+    { title: "Meter ID", field: "meterId", render: (r: Meter) => r.meterId || "-" },
+    { title: "Nombre", field: "name", render: (r: Meter) => r.name || "-" },
+    { title: "Ubicación", field: "location", render: (r: Meter) => r.location || "-" },
+    {
+      title: "Tipo",
+      field: "type",
+      render: (r: Meter) => {
+        const typeLabels: Record<string, string> = {
+          LORA: "LoRa",
+          LORAWAN: "LoRaWAN",
+          GRANDES: "Grandes Consumidores",
+        };
+        const typeColors: Record<string, string> = {
+          LORA: "text-green-600 border-green-600",
+          LORAWAN: "text-purple-600 border-purple-600",
+          GRANDES: "text-orange-600 border-orange-600",
+        };
+        const type = r.type || "LORA";
+        return (
+          <span
+            className={`px-3 py-1 rounded-full text-xs font-semibold border ${typeColors[type] || "text-gray-600 border-gray-600"}`}
+          >
+            {typeLabels[type] || type}
+          </span>
+        );
+      },
+    },
+    {
+      title: "Estado",
+      field: "status",
+      render: (r: Meter) => (
+        <span
+          className={`px-3 py-1 rounded-full text-xs font-semibold border ${
+            r.status === "ACTIVE"
+              ? "text-blue-600 border-blue-600"
+              : "text-red-600 border-red-600"
+          }`}
+        >
+          {r.status || "-"}
+        </span>
+      ),
+    },
+    { title: "Concentrador", field: "concentratorName", render: (r: Meter) => r.concentratorName || "-" },
+    { title: "Última Lectura", field: "lastReadingValue", render: (r: Meter) => r.lastReadingValue != null ? Number(r.lastReadingValue).toFixed(2) : "-" },
+  ];
+
+  const pruebaColumns = [
+    { title: "Meters No.", field: "meterId", render: (r: Meter) => r.meterId || r.serialNumber || "-" },
+    { title: "Name", field: "name", render: (r: Meter) => r.name || "-" },
+    { title: "Protocol", field: "protocol", render: (r: Meter) => r.protocol || "-" },
+    {
+      title: "Status",
+      field: "status",
+      render: (r: Meter) => (
+        <span
+          className={`px-3 py-1 rounded-full text-xs font-semibold border ${
+            r.status === "ACTIVE"
+              ? "text-blue-600 border-blue-600"
+              : "text-red-600 border-red-600"
+          }`}
+        >
+          {r.status || "-"}
+        </span>
+      ),
+    },
+    { title: "Total Flow", field: "lastReadingValue", render: (r: Meter) => r.lastReadingValue != null ? Number(r.lastReadingValue).toFixed(2) : "-" },
+    { 
+      title: "Last Contact", 
+      field: "lastReadingAt", 
+      render: (r: Meter) => r.lastReadingAt ? new Date(r.lastReadingAt).toLocaleString('es-MX', { 
+        year: 'numeric', 
+        month: '2-digit', 
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      }) : "-" 
+    },
+    { title: "Voltage", field: "voltage", render: (r: Meter) => r.voltage != null ? `${Number(r.voltage).toFixed(2)} V` : "-" },
+    { title: "Signal", field: "signal", render: (r: Meter) => r.signal != null ? `${r.signal} dBm` : "-" },
+    { title: "Leakage Status", field: "leakageStatus", render: (r: Meter) => r.leakageStatus || "-" },
+    { title: "Burst Status", field: "burstStatus", render: (r: Meter) => r.burstStatus || "-" },
+    { title: "Current Flow", field: "currentFlow", render: (r: Meter) => r.currentFlow != null ? Number(r.currentFlow).toFixed(4) : "-" },
+    { title: "Total Flow Reverse", field: "totalFlowReverse", render: (r: Meter) => r.totalFlowReverse != null ? Number(r.totalFlowReverse).toFixed(4) : "-" },
+  ];
+
+  const columns = isPruebaProject ? pruebaColumns : defaultColumns;
+
   return (
     <div className={disabled ? "opacity-60 pointer-events-none" : ""}>
       <MaterialTable
         title="Meters"
         isLoading={isLoading}
-        columns={[
-          { title: "Serial", field: "serialNumber", render: (r: Meter) => r.serialNumber || "-" },
-          { title: "Meter ID", field: "meterId", render: (r: Meter) => r.meterId || "-" },
-          { title: "Nombre", field: "name", render: (r: Meter) => r.name || "-" },
-          { title: "Ubicación", field: "location", render: (r: Meter) => r.location || "-" },
-          {
-            title: "Tipo",
-            field: "type",
-            render: (r: Meter) => {
-              const typeLabels: Record<string, string> = {
-                LORA: "LoRa",
-                LORAWAN: "LoRaWAN",
-                GRANDES: "Grandes Consumidores",
-              };
-              const typeColors: Record<string, string> = {
-                LORA: "text-green-600 border-green-600",
-                LORAWAN: "text-purple-600 border-purple-600",
-                GRANDES: "text-orange-600 border-orange-600",
-              };
-              const type = r.type || "LORA";
-              return (
-                <span
-                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${typeColors[type] || "text-gray-600 border-gray-600"}`}
-                >
-                  {typeLabels[type] || type}
-                </span>
-              );
-            },
-          },
-          {
-            title: "Estado",
-            field: "status",
-            render: (r: Meter) => (
-              <span
-                className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                  r.status === "ACTIVE"
-                    ? "text-blue-600 border-blue-600"
-                    : "text-red-600 border-red-600"
-                }`}
-              >
-                {r.status || "-"}
-              </span>
-            ),
-          },
-          { title: "Concentrador", field: "concentratorName", render: (r: Meter) => r.concentratorName || "-" },
-          { title: "Última Lectura", field: "lastReadingValue", render: (r: Meter) => r.lastReadingValue != null ? Number(r.lastReadingValue).toFixed(2) : "-" },
-        ]}
+        columns={columns}
         data={disabled ? [] : data}
         onRowClick={(_, rowData) => onRowClick(rowData as Meter)}
         options={{
diff --git a/water-api/src/services/meter.service.ts b/water-api/src/services/meter.service.ts
index 68a28dd..9a0583b 100644
--- a/water-api/src/services/meter.service.ts
+++ b/water-api/src/services/meter.service.ts
@@ -292,7 +292,9 @@ export async function getAll(
       m.status, m.last_reading_value, m.last_reading_at, m.installation_date,
       m.created_at, m.updated_at,
       c.name as concentrator_name, c.serial_number as concentrator_serial,
-      c.project_id, p.name as project_name
+      c.project_id, p.name as project_name,
+      m.protocol, m.voltage, m.signal, m.leakage_status, m.burst_status,
+      m.current_flow, m.total_flow_reverse, m.manufacturer, m.latitude, m.longitude
     FROM meters m
     JOIN concentrators c ON m.concentrator_id = c.id
     JOIN projects p ON c.project_id = p.id