From 014ac19a4b7d4f3594cc8c78d90676953509c256 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Sat, 20 Dec 2025 17:15:02 -0600
Subject: [PATCH 1/7] New concentrators fields

---
 src/api/concentrators.ts                      | 35 +++++++++++
 src/pages/concentrators/ConcentratorsPage.tsx | 59 +++++++++++++++++++
 2 files changed, 94 insertions(+)

diff --git a/src/api/concentrators.ts b/src/api/concentrators.ts
index 5f8034a..2ca4261 100644
--- a/src/api/concentrators.ts
+++ b/src/api/concentrators.ts
@@ -19,6 +19,11 @@ export interface ConcentratorRecord {
     "Installed Time": string;
     "Communication Time": string;
     "Instruction Manual": string;
+    "Gateway ID": number;
+    "Gateway EUI": string;
+    "Gateway Name": string;
+    "Gateway Description": string;
+    "Antenna Placement": string;
   };
 }
 
@@ -41,6 +46,11 @@ export interface Concentrator {
   "Installed Time": string;
   "Communication Time": string;
   "Instruction Manual": string;
+  "Gateway ID": number;
+  "Gateway EUI": string;
+  "Gateway Name": string;
+  "Gateway Description": string;
+  "Antenna Placement": string;
 }
 
 export const fetchConcentrators = async (): Promise<Concentrator[]> => {
@@ -67,6 +77,11 @@ export const fetchConcentrators = async (): Promise<Concentrator[]> => {
       "Installed Time": r.fields["Installed Time"] || "",
       "Communication Time": r.fields["Communication Time"] || "",
       "Instruction Manual": r.fields["Instruction Manual"] || "",
+      "Gateway ID": r.fields["Gateway ID"] || 0,
+      "Gateway EUI": r.fields["Gateway EUI"] || "",
+      "Gateway Name": r.fields["Gateway Name"] || "",
+      "Gateway Description": r.fields["Gateway Description"] || "",
+      "Antenna Placement": r.fields["Antenna Placement"] || "Indoor",
     }));
   } catch (error) {
     console.error("Error fetching concentrators:", error);
@@ -92,6 +107,11 @@ export const createConcentrator = async (
           "Installed Time": concentratorData["Installed Time"],
           "Communication Time": concentratorData["Communication Time"],
           "Instruction Manual": concentratorData["Instruction Manual"],
+          "Gateway ID": concentratorData["Gateway ID"],
+          "Gateway EUI": concentratorData["Gateway EUI"],
+          "Gateway Name": concentratorData["Gateway Name"],
+          "Gateway Description": concentratorData["Gateway Description"],
+          "Antenna Placement": concentratorData["Antenna Placement"],
         },
       }),
     });
@@ -118,6 +138,11 @@ export const createConcentrator = async (
       "Installed Time": createdRecord.fields["Installed Time"] || concentratorData["Installed Time"],
       "Communication Time": createdRecord.fields["Communication Time"] || concentratorData["Communication Time"],
       "Instruction Manual": createdRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
+      "Gateway ID": createdRecord.fields["Gateway ID"] || concentratorData["Gateway ID"],
+      "Gateway EUI": createdRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"],
+      "Gateway Name": createdRecord.fields["Gateway Name"] || concentratorData["Gateway Name"],
+      "Gateway Description": createdRecord.fields["Gateway Description"] || concentratorData["Gateway Description"],
+      "Antenna Placement": createdRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"],
     };
   } catch (error) {
     console.error("Error creating concentrator:", error);
@@ -145,6 +170,11 @@ export const updateConcentrator = async (
           "Installed Time": concentratorData["Installed Time"],
           "Communication Time": concentratorData["Communication Time"],
           "Instruction Manual": concentratorData["Instruction Manual"],
+          "Gateway ID": concentratorData["Gateway ID"],
+          "Gateway EUI": concentratorData["Gateway EUI"],
+          "Gateway Name": concentratorData["Gateway Name"],
+          "Gateway Description": concentratorData["Gateway Description"],
+          "Antenna Placement": concentratorData["Antenna Placement"],
         },
       }),
     });
@@ -175,6 +205,11 @@ export const updateConcentrator = async (
       "Installed Time": updatedRecord.fields["Installed Time"] || concentratorData["Installed Time"],
       "Communication Time": updatedRecord.fields["Communication Time"] || concentratorData["Communication Time"],
       "Instruction Manual": updatedRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
+      "Gateway ID": updatedRecord.fields["Gateway ID"] || concentratorData["Gateway ID"],
+      "Gateway EUI": updatedRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"],
+      "Gateway Name": updatedRecord.fields["Gateway Name"] || concentratorData["Gateway Name"],
+      "Gateway Description": updatedRecord.fields["Gateway Description"] || concentratorData["Gateway Description"],
+      "Antenna Placement": updatedRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"],
     };
   } catch (error) {
     console.error("Error updating concentrator:", error);
diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index 1755a8d..1d83863 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -99,6 +99,11 @@ export default function ConcentratorsPage() {
     "Installed Time": new Date().toISOString().slice(0, 10),
     "Communication Time": new Date().toISOString(),
     "Instruction Manual": "",
+    "Gateway ID": 0,
+    "Gateway EUI": "",
+    "Gateway Name": "",
+    "Gateway Description": "",
+    "Antenna Placement": "Indoor",
   });
 
   const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
@@ -241,6 +246,11 @@ export default function ConcentratorsPage() {
                   "Installed Time": activeConcentrator["Installed Time"],
                   "Communication Time": activeConcentrator["Communication Time"],
                   "Instruction Manual": activeConcentrator["Instruction Manual"],
+                  "Gateway ID": activeConcentrator["Gateway ID"],
+                  "Gateway EUI": activeConcentrator["Gateway EUI"],
+                  "Gateway Name": activeConcentrator["Gateway Name"],
+                  "Gateway Description": activeConcentrator["Gateway Description"],
+                  "Antenna Placement": activeConcentrator["Antenna Placement"],
                 });
                 setShowModal(true);
               }}
@@ -415,6 +425,55 @@ export default function ConcentratorsPage() {
       })
     }
   />
+
+  <input
+    type="number"
+    className="w-full border px-3 py-2 rounded"
+    placeholder="Gateway ID"
+    value={form["Gateway ID"]}
+    onChange={(e) =>
+      setForm({ ...form, "Gateway ID": parseInt(e.target.value) || 0 })
+    }
+  />
+
+  <input
+    className="w-full border px-3 py-2 rounded"
+    placeholder="Gateway EUI"
+    value={form["Gateway EUI"]}
+    onChange={(e) =>
+      setForm({ ...form, "Gateway EUI": e.target.value })
+    }
+  />
+
+  <input
+    className="w-full border px-3 py-2 rounded"
+    placeholder="Gateway Name"
+    value={form["Gateway Name"]}
+    onChange={(e) =>
+      setForm({ ...form, "Gateway Name": e.target.value })
+    }
+  />
+
+  <textarea
+    className="w-full border px-3 py-2 rounded"
+    placeholder="Gateway Description"
+    value={form["Gateway Description"]}
+    onChange={(e) =>
+      setForm({ ...form, "Gateway Description": e.target.value })
+    }
+    rows={3}
+  />
+
+  <select
+    className="w-full border px-3 py-2 rounded"
+    value={form["Antenna Placement"]}
+    onChange={(e) =>
+      setForm({ ...form, "Antenna Placement": e.target.value })
+    }
+  >
+    <option value="Indoor">Indoor</option>
+    <option value="Outdoor">Outdoor</option>
+  </select>
 </div>
 
 

From a5fa0cfa6469002c2deecee1719d26859857b2ad Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Sat, 20 Dec 2025 19:45:27 -0600
Subject: [PATCH 2/7] Concentrators create and edit form logic with TTS mock
 data

---
 src/api/concentrators.ts                      |  35 --
 src/pages/concentrators/ConcentratorsPage.tsx | 479 +++++++++++++-----
 2 files changed, 350 insertions(+), 164 deletions(-)

diff --git a/src/api/concentrators.ts b/src/api/concentrators.ts
index 2ca4261..5f8034a 100644
--- a/src/api/concentrators.ts
+++ b/src/api/concentrators.ts
@@ -19,11 +19,6 @@ export interface ConcentratorRecord {
     "Installed Time": string;
     "Communication Time": string;
     "Instruction Manual": string;
-    "Gateway ID": number;
-    "Gateway EUI": string;
-    "Gateway Name": string;
-    "Gateway Description": string;
-    "Antenna Placement": string;
   };
 }
 
@@ -46,11 +41,6 @@ export interface Concentrator {
   "Installed Time": string;
   "Communication Time": string;
   "Instruction Manual": string;
-  "Gateway ID": number;
-  "Gateway EUI": string;
-  "Gateway Name": string;
-  "Gateway Description": string;
-  "Antenna Placement": string;
 }
 
 export const fetchConcentrators = async (): Promise<Concentrator[]> => {
@@ -77,11 +67,6 @@ export const fetchConcentrators = async (): Promise<Concentrator[]> => {
       "Installed Time": r.fields["Installed Time"] || "",
       "Communication Time": r.fields["Communication Time"] || "",
       "Instruction Manual": r.fields["Instruction Manual"] || "",
-      "Gateway ID": r.fields["Gateway ID"] || 0,
-      "Gateway EUI": r.fields["Gateway EUI"] || "",
-      "Gateway Name": r.fields["Gateway Name"] || "",
-      "Gateway Description": r.fields["Gateway Description"] || "",
-      "Antenna Placement": r.fields["Antenna Placement"] || "Indoor",
     }));
   } catch (error) {
     console.error("Error fetching concentrators:", error);
@@ -107,11 +92,6 @@ export const createConcentrator = async (
           "Installed Time": concentratorData["Installed Time"],
           "Communication Time": concentratorData["Communication Time"],
           "Instruction Manual": concentratorData["Instruction Manual"],
-          "Gateway ID": concentratorData["Gateway ID"],
-          "Gateway EUI": concentratorData["Gateway EUI"],
-          "Gateway Name": concentratorData["Gateway Name"],
-          "Gateway Description": concentratorData["Gateway Description"],
-          "Antenna Placement": concentratorData["Antenna Placement"],
         },
       }),
     });
@@ -138,11 +118,6 @@ export const createConcentrator = async (
       "Installed Time": createdRecord.fields["Installed Time"] || concentratorData["Installed Time"],
       "Communication Time": createdRecord.fields["Communication Time"] || concentratorData["Communication Time"],
       "Instruction Manual": createdRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
-      "Gateway ID": createdRecord.fields["Gateway ID"] || concentratorData["Gateway ID"],
-      "Gateway EUI": createdRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"],
-      "Gateway Name": createdRecord.fields["Gateway Name"] || concentratorData["Gateway Name"],
-      "Gateway Description": createdRecord.fields["Gateway Description"] || concentratorData["Gateway Description"],
-      "Antenna Placement": createdRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"],
     };
   } catch (error) {
     console.error("Error creating concentrator:", error);
@@ -170,11 +145,6 @@ export const updateConcentrator = async (
           "Installed Time": concentratorData["Installed Time"],
           "Communication Time": concentratorData["Communication Time"],
           "Instruction Manual": concentratorData["Instruction Manual"],
-          "Gateway ID": concentratorData["Gateway ID"],
-          "Gateway EUI": concentratorData["Gateway EUI"],
-          "Gateway Name": concentratorData["Gateway Name"],
-          "Gateway Description": concentratorData["Gateway Description"],
-          "Antenna Placement": concentratorData["Antenna Placement"],
         },
       }),
     });
@@ -205,11 +175,6 @@ export const updateConcentrator = async (
       "Installed Time": updatedRecord.fields["Installed Time"] || concentratorData["Installed Time"],
       "Communication Time": updatedRecord.fields["Communication Time"] || concentratorData["Communication Time"],
       "Instruction Manual": updatedRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"],
-      "Gateway ID": updatedRecord.fields["Gateway ID"] || concentratorData["Gateway ID"],
-      "Gateway EUI": updatedRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"],
-      "Gateway Name": updatedRecord.fields["Gateway Name"] || concentratorData["Gateway Name"],
-      "Gateway Description": updatedRecord.fields["Gateway Description"] || concentratorData["Gateway Description"],
-      "Antenna Placement": updatedRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"],
     };
   } catch (error) {
     console.error("Error updating concentrator:", error);
diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index 1d83863..0734845 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -18,6 +18,15 @@ interface User {
   project?: string; // asignado si no es superadmin
 }
 
+interface GatewayData {
+  "Gateway ID": number;
+  "Gateway EUI": string;
+  "Gateway Name": string;
+  "Gateway Description": string;
+  "Antenna Placement": "Indoor" | "Outdoor";
+  concentratorId?: string;
+}
+
 /* ================= COMPONENT ================= */
 export default function ConcentratorsPage() {
   // Simulación de usuario actual
@@ -99,6 +108,9 @@ export default function ConcentratorsPage() {
     "Installed Time": new Date().toISOString().slice(0, 10),
     "Communication Time": new Date().toISOString(),
     "Instruction Manual": "",
+  });
+
+  const getEmptyGatewayData = (): GatewayData => ({
     "Gateway ID": 0,
     "Gateway EUI": "",
     "Gateway Name": "",
@@ -107,10 +119,51 @@ export default function ConcentratorsPage() {
   });
 
   const [form, setForm] = useState<Omit<Concentrator, "id">>(getEmptyConcentrator());
+  const [gatewayForm, setGatewayForm] = useState<GatewayData>(getEmptyGatewayData());
+  const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
 
   /* ================= CRUD ================= */
+  const createOrUpdateGateway = async (gatewayData: GatewayData): Promise<void> => {
+  //await fetch('/api/gateways', { method: 'POST', body: JSON.stringify(gatewayData) })
+    
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        console.log('Gateway data that would be sent to API:', gatewayData);
+        resolve();
+      }, 500);
+    });
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: { [key: string]: boolean } = {};
+
+    if (!form["Device Name"].trim()) newErrors["Device Name"] = true;
+    if (!form["Device S/N"].trim()) newErrors["Device S/N"] = true;
+    if (!form["Operator"].trim()) newErrors["Operator"] = true;
+    if (!form["Instruction Manual"].trim()) newErrors["Instruction Manual"] = true;
+    if (!form["Installed Time"]) newErrors["Installed Time"] = true;
+    if (!form["Device Time"]) newErrors["Device Time"] = true;
+    if (!form["Communication Time"]) newErrors["Communication Time"] = true;
+
+    if (!gatewayForm["Gateway ID"] || gatewayForm["Gateway ID"] === 0) {
+      newErrors["Gateway ID"] = true;
+    }
+    if (!gatewayForm["Gateway EUI"].trim()) newErrors["Gateway EUI"] = true;
+    if (!gatewayForm["Gateway Name"].trim()) newErrors["Gateway Name"] = true;
+    if (!gatewayForm["Gateway Description"].trim()) newErrors["Gateway Description"] = true;
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
   const handleSave = async () => {
+    if (!validateForm()) {
+      return;
+    }
+
     try {
+      let savedConcentrator: Concentrator;
+
       if (editingSerial) {
         const concentratorToUpdate = concentrators.find(c => c["Device S/N"] === editingSerial);
         if (!concentratorToUpdate) {
@@ -123,13 +176,30 @@ export default function ConcentratorsPage() {
             c.id === concentratorToUpdate.id ? updatedConcentrator : c
           )
         );
+        savedConcentrator = updatedConcentrator;
       } else {
         const newConcentrator = await createConcentrator(form);
         setConcentrators((prev) => [...prev, newConcentrator]);
+        savedConcentrator = newConcentrator;
       }
+
+      try {
+        const gatewayDataWithRef = {
+          ...gatewayForm,
+          concentratorId: savedConcentrator.id,
+        };
+        await createOrUpdateGateway(gatewayDataWithRef);
+        console.log('Gateway data saved successfully');
+      } catch (gatewayError) {
+        console.error('Error saving gateway data:', gatewayError);
+        alert('Concentrator saved, but there was an error saving gateway data.');
+      }
+
       setShowModal(false);
       setEditingSerial(null);
       setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
+      setGatewayForm(getEmptyGatewayData());
+      setErrors({});
       setActiveConcentrator(null);
     } catch (error) {
       console.error('Error saving concentrator:', error);
@@ -223,6 +293,8 @@ export default function ConcentratorsPage() {
             <button
               onClick={() => {
                 setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
+                setGatewayForm(getEmptyGatewayData());
+                setErrors({});
                 setEditingSerial(null);
                 setShowModal(true);
               }}
@@ -246,12 +318,9 @@ export default function ConcentratorsPage() {
                   "Installed Time": activeConcentrator["Installed Time"],
                   "Communication Time": activeConcentrator["Communication Time"],
                   "Instruction Manual": activeConcentrator["Instruction Manual"],
-                  "Gateway ID": activeConcentrator["Gateway ID"],
-                  "Gateway EUI": activeConcentrator["Gateway EUI"],
-                  "Gateway Name": activeConcentrator["Gateway Name"],
-                  "Gateway Description": activeConcentrator["Gateway Description"],
-                  "Antenna Placement": activeConcentrator["Antenna Placement"],
                 });
+                setGatewayForm(getEmptyGatewayData());
+                setErrors({});
                 setShowModal(true);
               }}
               disabled={!activeConcentrator}
@@ -337,151 +406,303 @@ export default function ConcentratorsPage() {
 
       {/* MODAL */}
       {showModal && (
-        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
-          <div className="bg-white rounded-xl p-6 w-96 space-y-3">
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl p-6 w-[600px] max-h-[90vh] overflow-y-auto space-y-4">
             <h2 className="text-lg font-semibold">
               {editingSerial ? "Edit Concentrator" : "Add Concentrator"}
             </h2>
 
             <div className="space-y-3">
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Device Name"
-    value={form["Device Name"]}
-    onChange={(e) =>
-      setForm({ ...form, "Device Name": e.target.value })
-    }
-  />
+              <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+                Concentrator Information
+              </h3>
+              
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Device Name"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Device Name *"
+                  value={form["Device Name"]}
+                  onChange={(e) => {
+                    setForm({ ...form, "Device Name": e.target.value });
+                    if (errors["Device Name"]) {
+                      setErrors({ ...errors, "Device Name": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Device Name"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Device S/N"
-    value={form["Device S/N"]}
-    onChange={(e) =>
-      setForm({ ...form, "Device S/N": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Device S/N"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Device S/N *"
+                  value={form["Device S/N"]}
+                  onChange={(e) => {
+                    setForm({ ...form, "Device S/N": e.target.value });
+                    if (errors["Device S/N"]) {
+                      setErrors({ ...errors, "Device S/N": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Device S/N"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Operator"
-    value={form["Operator"]}
-    onChange={(e) =>
-      setForm({ ...form, "Operator": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Operator"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Operator *"
+                  value={form["Operator"]}
+                  onChange={(e) => {
+                    setForm({ ...form, "Operator": e.target.value });
+                    if (errors["Operator"]) {
+                      setErrors({ ...errors, "Operator": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Operator"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Instruction Manual"
-    value={form["Instruction Manual"]}
-    onChange={(e) =>
-      setForm({ ...form, "Instruction Manual": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Instruction Manual"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Instruction Manual *"
+                  value={form["Instruction Manual"]}
+                  onChange={(e) => {
+                    setForm({ ...form, "Instruction Manual": e.target.value });
+                    if (errors["Instruction Manual"]) {
+                      setErrors({ ...errors, "Instruction Manual": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Instruction Manual"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <button
-    onClick={() =>
-      setForm({
-        ...form,
-        "Device Status":
-          form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
-      })
-    }
-    className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
-  >
-    Device Status: {form["Device Status"]}
-  </button>
+              <button
+                onClick={() =>
+                  setForm({
+                    ...form,
+                    "Device Status":
+                      form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
+                  })
+                }
+                className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
+              >
+                Device Status: {form["Device Status"]} *
+              </button>
 
-  <input
-    type="date"
-    className="w-full border px-3 py-2 rounded"
-    value={form["Installed Time"]}
-    onChange={(e) =>
-      setForm({ ...form, "Installed Time": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  type="date"
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Installed Time"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Installed Time *"
+                  value={form["Installed Time"]}
+                  onChange={(e) => {
+                    setForm({ ...form, "Installed Time": e.target.value });
+                    if (errors["Installed Time"]) {
+                      setErrors({ ...errors, "Installed Time": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Installed Time"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    type="datetime-local"
-    className="w-full border px-3 py-2 rounded"
-    value={form["Device Time"].slice(0, 16)}
-    onChange={(e) =>
-      setForm({
-        ...form,
-        "Device Time": new Date(e.target.value).toISOString(),
-      })
-    }
-  />
+              <div>
+                <input
+                  type="datetime-local"
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Device Time"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Device Time *"
+                  value={form["Device Time"].slice(0, 16)}
+                  onChange={(e) => {
+                    setForm({
+                      ...form,
+                      "Device Time": new Date(e.target.value).toISOString(),
+                    });
+                    if (errors["Device Time"]) {
+                      setErrors({ ...errors, "Device Time": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Device Time"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    type="datetime-local"
-    className="w-full border px-3 py-2 rounded"
-    value={form["Communication Time"].slice(0, 16)}
-    onChange={(e) =>
-      setForm({
-        ...form,
-        "Communication Time": new Date(e.target.value).toISOString(),
-      })
-    }
-  />
+              <div>
+                <input
+                  type="datetime-local"
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Communication Time"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Communication Time *"
+                  value={form["Communication Time"].slice(0, 16)}
+                  onChange={(e) => {
+                    setForm({
+                      ...form,
+                      "Communication Time": new Date(e.target.value).toISOString(),
+                    });
+                    if (errors["Communication Time"]) {
+                      setErrors({ ...errors, "Communication Time": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Communication Time"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
+            </div>
 
-  <input
-    type="number"
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Gateway ID"
-    value={form["Gateway ID"]}
-    onChange={(e) =>
-      setForm({ ...form, "Gateway ID": parseInt(e.target.value) || 0 })
-    }
-  />
+            <div className="space-y-3 pt-4">
+              <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+                Gateway Information
+              </h3>
 
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Gateway EUI"
-    value={form["Gateway EUI"]}
-    onChange={(e) =>
-      setForm({ ...form, "Gateway EUI": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  type="number"
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Gateway ID"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Gateway ID *"
+                  value={gatewayForm["Gateway ID"] || ""}
+                  onChange={(e) => {
+                    setGatewayForm({
+                      ...gatewayForm,
+                      "Gateway ID": parseInt(e.target.value) || 0,
+                    });
+                    if (errors["Gateway ID"]) {
+                      setErrors({ ...errors, "Gateway ID": false });
+                    }
+                  }}
+                  required
+                  min="1"
+                />
+                {errors["Gateway ID"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <input
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Gateway Name"
-    value={form["Gateway Name"]}
-    onChange={(e) =>
-      setForm({ ...form, "Gateway Name": e.target.value })
-    }
-  />
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Gateway EUI"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Gateway EUI *"
+                  value={gatewayForm["Gateway EUI"]}
+                  onChange={(e) => {
+                    setGatewayForm({ ...gatewayForm, "Gateway EUI": e.target.value });
+                    if (errors["Gateway EUI"]) {
+                      setErrors({ ...errors, "Gateway EUI": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Gateway EUI"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <textarea
-    className="w-full border px-3 py-2 rounded"
-    placeholder="Gateway Description"
-    value={form["Gateway Description"]}
-    onChange={(e) =>
-      setForm({ ...form, "Gateway Description": e.target.value })
-    }
-    rows={3}
-  />
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Gateway Name"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Gateway Name *"
+                  value={gatewayForm["Gateway Name"]}
+                  onChange={(e) => {
+                    setGatewayForm({ ...gatewayForm, "Gateway Name": e.target.value });
+                    if (errors["Gateway Name"]) {
+                      setErrors({ ...errors, "Gateway Name": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Gateway Name"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
-  <select
-    className="w-full border px-3 py-2 rounded"
-    value={form["Antenna Placement"]}
-    onChange={(e) =>
-      setForm({ ...form, "Antenna Placement": e.target.value })
-    }
-  >
-    <option value="Indoor">Indoor</option>
-    <option value="Outdoor">Outdoor</option>
-  </select>
-</div>
+              <div>
+                <input
+                  className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                    errors["Gateway Description"] ? "border-red-500" : ""
+                  }`}
+                  placeholder="Gateway Description *"
+                  value={gatewayForm["Gateway Description"]}
+                  onChange={(e) => {
+                    setGatewayForm({
+                      ...gatewayForm,
+                      "Gateway Description": e.target.value,
+                    });
+                    if (errors["Gateway Description"]) {
+                      setErrors({ ...errors, "Gateway Description": false });
+                    }
+                  }}
+                  required
+                />
+                {errors["Gateway Description"] && (
+                  <p className="text-red-500 text-xs mt-1">This field is required</p>
+                )}
+              </div>
 
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={gatewayForm["Antenna Placement"]}
+                onChange={(e) =>
+                  setGatewayForm({
+                    ...gatewayForm,
+                    "Antenna Placement": e.target.value as "Indoor" | "Outdoor",
+                  })
+                }
+                required
+              >
+                <option value="Indoor">Indoor</option>
+                <option value="Outdoor">Outdoor</option>
+              </select>
+            </div>
 
-            <div className="flex justify-end gap-2 pt-3">
-              <button onClick={() => setShowModal(false)}>Cancel</button>
+            <div className="flex justify-end gap-2 pt-3 border-t">
+              <button
+                onClick={() => {
+                  setShowModal(false);
+                  setGatewayForm(getEmptyGatewayData());
+                  setErrors({});
+                }}
+                className="px-4 py-2 rounded hover:bg-gray-100"
+              >
+                Cancel
+              </button>
               <button
                 onClick={handleSave}
-                className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
+                className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
               >
                 Save
               </button>

From 820e14463cd709a270ae073509dfad22c14d40ae Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 22 Dec 2025 00:19:09 -0600
Subject: [PATCH 3/7] Meter edit and create logic form & concentrators project
 select option

---
 src/pages/concentrators/ConcentratorsPage.tsx |  21 +-
 src/pages/meters/MeterPage.tsx                | 626 +++++++++++++-----
 2 files changed, 454 insertions(+), 193 deletions(-)

diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index 0734845..af0284c 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-import { fetchProjectNames } from "../../api/projects";
 import {
   fetchConcentrators,
   createConcentrator,
@@ -40,22 +39,6 @@ export default function ConcentratorsPage() {
   const [loadingProjects, setLoadingProjects] = useState(true);
   const [loadingConcentrators, setLoadingConcentrators] = useState(true);
 
-  useEffect(() => {
-    const loadProjects = async () => {
-      try {
-        const projects = await fetchProjectNames();
-        setAllProjects(projects);
-      } catch (error) {
-        console.error('Error loading projects:', error);
-        setAllProjects([]);
-      } finally {
-        setLoadingProjects(false);
-      }
-    };
-
-    loadProjects();
-  }, []);
-
   // Proyectos visibles según el usuario
   const visibleProjects = useMemo(() =>
     currentUser.role === "SUPER_ADMIN"
@@ -79,12 +62,16 @@ export default function ConcentratorsPage() {
     setLoadingConcentrators(true);
     try {
       const data = await fetchConcentrators();
+      const projectsArray = data.map((record) => record["Area Name"]);
+      setAllProjects(projectsArray);
       setConcentrators(data);
     } catch (error) {
       console.error("Error loading concentrators:", error);
+      setAllProjects([]);
       setConcentrators([]);
     } finally {
       setLoadingConcentrators(false);
+      setLoadingProjects(false);
     }
   };
 
diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index 3223e31..b380e67 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -18,6 +18,14 @@ interface User {
   project?: string; // asignado si no es superadmin
 }
 
+interface DeviceData {
+  "Device ID": number;
+  "Device EUI": string;
+  "Join EUI": string;
+  "AppKey": string;
+  meterId?: string;
+}
+
 /* ================= COMPONENT ================= */
 export default function MeterManagement() {
   // Simulación de usuario actual
@@ -94,7 +102,16 @@ export default function MeterManagement() {
     installedTime: new Date().toISOString(),
   };
 
+  const emptyDeviceData: DeviceData = {
+    "Device ID": 0,
+    "Device EUI": "",
+    "Join EUI": "",
+    "AppKey": "",
+  };
+
   const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
+  const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
+  const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
 
   const loadMeters = async () => {
     setLoadingMeters(true);
@@ -113,8 +130,49 @@ export default function MeterManagement() {
     loadMeters();
   }, []);
 
+  const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
+    //await fetch('/api/devices', { method: 'POST', body: JSON.stringify(deviceData) })
+    
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        console.log('Device data that would be sent to API:', deviceData);
+        resolve();
+      }, 500);
+    });
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: { [key: string]: boolean } = {};
+
+    if (!form.meterName.trim()) newErrors["meterName"] = true;
+    if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
+    if (!form.areaName.trim()) newErrors["areaName"] = true;
+    if (!form.deviceName.trim()) newErrors["deviceName"] = true;
+    if (!form.deviceType.trim()) newErrors["deviceType"] = true;
+    if (!form.protocolType.trim()) newErrors["protocolType"] = true;
+    if (!form.supplyTypes.trim()) newErrors["supplyTypes"] = true;
+    if (!form.usageAnalysisType.trim()) newErrors["usageAnalysisType"] = true;
+    if (!form.installedTime) newErrors["installedTime"] = true;
+
+    if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
+      newErrors["Device ID"] = true;
+    }
+    if (!deviceForm["Device EUI"].trim()) newErrors["Device EUI"] = true;
+    if (!deviceForm["Join EUI"].trim()) newErrors["Join EUI"] = true;
+    if (!deviceForm["AppKey"].trim()) newErrors["AppKey"] = true;
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
   const handleSave = async () => {
+    if (!validateForm()) {
+      return;
+    }
+
     try {
+      let savedMeter: Meter;
+
       if (editingId) {
         const meterToUpdate = meters.find(m => m.id === editingId);
         if (!meterToUpdate) {
@@ -127,13 +185,30 @@ export default function MeterManagement() {
             m.id === editingId ? updatedMeter : m
           )
         );
+        savedMeter = updatedMeter;
       } else {
         const newMeter = await createMeter(form);
         setMeters((prev) => [...prev, newMeter]);
+        savedMeter = newMeter;
       }
+
+      try {
+        const deviceDataWithRef = {
+          ...deviceForm,
+          meterId: savedMeter.id,
+        };
+        await createOrUpdateDevice(deviceDataWithRef);
+        console.log('Device data saved successfully');
+      } catch (deviceError) {
+        console.error('Error saving device data:', deviceError);
+        alert('Meter saved, but there was an error saving device data.');
+      }
+
       setShowModal(false);
       setEditingId(null);
       setForm(emptyMeter);
+      setDeviceForm(emptyDeviceData);
+      setErrors({});
       setActiveMeter(null);
     } catch (error) {
       console.error('Error saving meter:', error);
@@ -236,6 +311,8 @@ export default function MeterManagement() {
             <button
               onClick={() => {
                 setForm(emptyMeter);
+                setDeviceForm(emptyDeviceData);
+                setErrors({});
                 setEditingId(null);
                 setShowModal(true);
               }}
@@ -270,6 +347,8 @@ export default function MeterManagement() {
                   usageAnalysisType: activeMeter.usageAnalysisType,
                   installedTime: activeMeter.installedTime,
                 });
+                setDeviceForm(emptyDeviceData);
+                setErrors({});
                 setShowModal(true);
               }}
               disabled={!activeMeter}
@@ -359,193 +438,388 @@ export default function MeterManagement() {
 
       {/* MODAL */}
 {showModal && (
-  <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
-    <div className="bg-white rounded-xl p-6 w-96 max-h-[80vh] overflow-y-auto space-y-3">
+  <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+    <div className="bg-white rounded-xl p-6 w-[700px] max-h-[90vh] overflow-y-auto space-y-4">
       <h2 className="text-lg font-semibold">
         {editingId ? "Edit Meter" : "Add Meter"}
       </h2>
 
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Meter Name"
-          value={form.meterName}
-          onChange={(e) => setForm({ ...form, meterName: e.target.value })}
-        />
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+          Meter Information
+        </h3>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["meterName"] ? "border-red-500" : ""
+              }`}
+              placeholder="Meter Name *"
+              value={form.meterName}
+              onChange={(e) => {
+                setForm({ ...form, meterName: e.target.value });
+                if (errors["meterName"]) {
+                  setErrors({ ...errors, "meterName": false });
+                }
+              }}
+              required
+            />
+            {errors["meterName"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["meterSerialNumber"] ? "border-red-500" : ""
+              }`}
+              placeholder="Meter Serial Number *"
+              value={form.meterSerialNumber}
+              onChange={(e) => {
+                setForm({ ...form, meterSerialNumber: e.target.value });
+                if (errors["meterSerialNumber"]) {
+                  setErrors({ ...errors, "meterSerialNumber": false });
+                }
+              }}
+              required
+            />
+            {errors["meterSerialNumber"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <input
+            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors["areaName"] ? "border-red-500" : ""
+            }`}
+            placeholder="Area Name *"
+            value={form.areaName}
+            onChange={(e) => {
+              setForm({ ...form, areaName: e.target.value });
+              if (errors["areaName"]) {
+                setErrors({ ...errors, "areaName": false });
+              }
+            }}
+            required
+          />
+          {errors["areaName"] && (
+            <p className="text-red-500 text-xs mt-1">This field is required</p>
+          )}
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["deviceName"] ? "border-red-500" : ""
+              }`}
+              placeholder="Device Name *"
+              value={form.deviceName}
+              onChange={(e) => {
+                setForm({ ...form, deviceName: e.target.value });
+                if (errors["deviceName"]) {
+                  setErrors({ ...errors, "deviceName": false });
+                }
+              }}
+              required
+            />
+            {errors["deviceName"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["deviceType"] ? "border-red-500" : ""
+              }`}
+              placeholder="Device Type *"
+              value={form.deviceType}
+              onChange={(e) => {
+                setForm({ ...form, deviceType: e.target.value });
+                if (errors["deviceType"]) {
+                  setErrors({ ...errors, "deviceType": false });
+                }
+              }}
+              required
+            />
+            {errors["deviceType"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <select
+            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            value={form.meterStatus}
+            onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
+          >
+            <option value="Installed">Installed</option>
+            <option value="Uninstalled">Uninstalled</option>
+            <option value="Maintenance">Maintenance</option>
+          </select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["protocolType"] ? "border-red-500" : ""
+              }`}
+              placeholder="Protocol Type *"
+              value={form.protocolType}
+              onChange={(e) => {
+                setForm({ ...form, protocolType: e.target.value });
+                if (errors["protocolType"]) {
+                  setErrors({ ...errors, "protocolType": false });
+                }
+              }}
+              required
+            />
+            {errors["protocolType"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["supplyTypes"] ? "border-red-500" : ""
+              }`}
+              placeholder="Supply Types *"
+              value={form.supplyTypes}
+              onChange={(e) => {
+                setForm({ ...form, supplyTypes: e.target.value });
+                if (errors["supplyTypes"]) {
+                  setErrors({ ...errors, "supplyTypes": false });
+                }
+              }}
+              required
+            />
+            {errors["supplyTypes"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <input
+            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors["usageAnalysisType"] ? "border-red-500" : ""
+            }`}
+            placeholder="Usage Analysis Type *"
+            value={form.usageAnalysisType}
+            onChange={(e) => {
+              setForm({ ...form, usageAnalysisType: e.target.value });
+              if (errors["usageAnalysisType"]) {
+                setErrors({ ...errors, "usageAnalysisType": false });
+              }
+            }}
+            required
+          />
+          {errors["usageAnalysisType"] && (
+            <p className="text-red-500 text-xs mt-1">This field is required</p>
+          )}
+        </div>
+
+        <div>
+          <input
+            type="datetime-local"
+            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors["installedTime"] ? "border-red-500" : ""
+            }`}
+            placeholder="Installed Time *"
+            value={
+              form.installedTime
+                ? new Date(form.installedTime).toISOString().slice(0, 16)
+                : ""
+            }
+            onChange={(e) => {
+              setForm({ ...form, installedTime: new Date(e.target.value).toISOString() });
+              if (errors["installedTime"]) {
+                setErrors({ ...errors, "installedTime": false });
+              }
+            }}
+            required
+          />
+          {errors["installedTime"] && (
+            <p className="text-red-500 text-xs mt-1">This field is required</p>
+          )}
+        </div>
+
+        <div className="pt-2 border-t">
+          <p className="text-xs text-gray-500 mb-2">Optional Fields</p>
+          
+          <div className="grid grid-cols-2 gap-3">
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Account Number (optional)"
+              value={form.accountNumber ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, accountNumber: e.target.value || null })
+              }
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="User Name (optional)"
+              value={form.userName ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, userName: e.target.value || null })
+              }
+            />
+          </div>
+
+          <input
+            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent mt-3"
+            placeholder="User Address (optional)"
+            value={form.userAddress ?? ""}
+            onChange={(e) =>
+              setForm({ ...form, userAddress: e.target.value || null })
+            }
+          />
+
+          <div className="grid grid-cols-3 gap-3 mt-3">
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Price No. (optional)"
+              value={form.priceNo ?? ""}
+              onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Price Name (optional)"
+              value={form.priceName ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, priceName: e.target.value || null })
+              }
+            />
+
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="DMA Partition (optional)"
+              value={form.dmaPartition ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, dmaPartition: e.target.value || null })
+              }
+            />
+          </div>
+        </div>
       </div>
 
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Meter Serial Number"
-          value={form.meterSerialNumber}
-          onChange={(e) =>
-            setForm({ ...form, meterSerialNumber: e.target.value })
-          }
-        />
+      <div className="space-y-3 pt-4">
+        <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+          Device Configuration
+        </h3>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              type="number"
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["Device ID"] ? "border-red-500" : ""
+              }`}
+              placeholder="Device ID *"
+              value={deviceForm["Device ID"] || ""}
+              onChange={(e) => {
+                setDeviceForm({
+                  ...deviceForm,
+                  "Device ID": parseInt(e.target.value) || 0,
+                });
+                if (errors["Device ID"]) {
+                  setErrors({ ...errors, "Device ID": false });
+                }
+              }}
+              required
+              min="1"
+            />
+            {errors["Device ID"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["Device EUI"] ? "border-red-500" : ""
+              }`}
+              placeholder="Device EUI *"
+              value={deviceForm["Device EUI"]}
+              onChange={(e) => {
+                setDeviceForm({ ...deviceForm, "Device EUI": e.target.value });
+                if (errors["Device EUI"]) {
+                  setErrors({ ...errors, "Device EUI": false });
+                }
+              }}
+              required
+            />
+            {errors["Device EUI"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <input
+            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors["Join EUI"] ? "border-red-500" : ""
+            }`}
+            placeholder="Join EUI *"
+            value={deviceForm["Join EUI"]}
+            onChange={(e) => {
+              setDeviceForm({ ...deviceForm, "Join EUI": e.target.value });
+              if (errors["Join EUI"]) {
+                setErrors({ ...errors, "Join EUI": false });
+              }
+            }}
+            required
+          />
+          {errors["Join EUI"] && (
+            <p className="text-red-500 text-xs mt-1">This field is required</p>
+          )}
+        </div>
+
+        <div>
+          <input
+            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+              errors["AppKey"] ? "border-red-500" : ""
+            }`}
+            placeholder="AppKey *"
+            value={deviceForm["AppKey"]}
+            onChange={(e) => {
+              setDeviceForm({ ...deviceForm, "AppKey": e.target.value });
+              if (errors["AppKey"]) {
+                setErrors({ ...errors, "AppKey": false });
+              }
+            }}
+            required
+          />
+          {errors["AppKey"] && (
+            <p className="text-red-500 text-xs mt-1">This field is required</p>
+          )}
+        </div>
       </div>
 
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Area Name"
-          value={form.areaName}
-          onChange={(e) => setForm({ ...form, areaName: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Device ID"
-          value={form.deviceId}
-          onChange={(e) => setForm({ ...form, deviceId: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Device Name"
-          value={form.deviceName}
-          onChange={(e) => setForm({ ...form, deviceName: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Device Type"
-          value={form.deviceType}
-          onChange={(e) => setForm({ ...form, deviceType: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <select
-          className="w-full border px-3 py-2 rounded"
-          value={form.meterStatus}
-          onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
+      <div className="flex justify-end gap-2 pt-3 border-t">
+        <button
+          onClick={() => {
+            setShowModal(false);
+            setDeviceForm(emptyDeviceData);
+            setErrors({});
+          }}
+          className="px-4 py-2 rounded hover:bg-gray-100"
         >
-          <option value="Installed">Meter Status: Installed</option>
-          <option value="Uninstalled">Meter Status: Uninstalled</option>
-          <option value="Maintenance">Meter Status: Maintenance</option>
-        </select>
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Protocol Type"
-          value={form.protocolType}
-          onChange={(e) => setForm({ ...form, protocolType: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Supply Types"
-          value={form.supplyTypes}
-          onChange={(e) => setForm({ ...form, supplyTypes: e.target.value })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Usage Analysis Type"
-          value={form.usageAnalysisType}
-          onChange={(e) =>
-            setForm({ ...form, usageAnalysisType: e.target.value })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Account Number (optional)"
-          value={form.accountNumber ?? ""}
-          onChange={(e) =>
-            setForm({ ...form, accountNumber: e.target.value || null })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="User Name (optional)"
-          value={form.userName ?? ""}
-          onChange={(e) =>
-            setForm({ ...form, userName: e.target.value || null })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="User Address (optional)"
-          value={form.userAddress ?? ""}
-          onChange={(e) =>
-            setForm({ ...form, userAddress: e.target.value || null })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Price No. (optional)"
-          value={form.priceNo ?? ""}
-          onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="Price Name (optional)"
-          value={form.priceName ?? ""}
-          onChange={(e) =>
-            setForm({ ...form, priceName: e.target.value || null })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          className="w-full border px-3 py-2 rounded"
-          placeholder="DMA Partition (optional)"
-          value={form.dmaPartition ?? ""}
-          onChange={(e) =>
-            setForm({ ...form, dmaPartition: e.target.value || null })
-          }
-        />
-      </div>
-
-      <div className="space-y-1">
-        <input
-          type="datetime-local"
-          className="w-full border px-3 py-2 rounded"
-          value={
-            form.installedTime
-              ? new Date(form.installedTime).toISOString().slice(0, 16)
-              : ""
-          }
-          onChange={(e) =>
-            setForm({ ...form, installedTime: new Date(e.target.value).toISOString() })
-          }
-        />
-      </div>
-
-      <div className="flex justify-end gap-2 pt-3">
-        <button onClick={() => setShowModal(false)}>Cancel</button>
+          Cancel
+        </button>
         <button
           onClick={handleSave}
-          className="bg-[#4c5f9e] text-white px-4 py-2 rounded"
+          className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
         >
           Save
         </button>

From 5a82a717d8eaff52731b387e84854f55eb911119 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 22 Dec 2025 01:16:15 -0600
Subject: [PATCH 4/7] Meters project selection logic fix

---
 src/api/meters.ts                             |  82 ++--
 src/pages/concentrators/ConcentratorsPage.tsx |   2 +-
 src/pages/meters/MeterPage.tsx                | 425 ++++++------------
 3 files changed, 186 insertions(+), 323 deletions(-)

diff --git a/src/api/meters.ts b/src/api/meters.ts
index 29b3468..b5f880b 100644
--- a/src/api/meters.ts
+++ b/src/api/meters.ts
@@ -64,10 +64,11 @@ export interface Meter {
 }
 
 export const fetchMeters = async (): Promise<Meter[]> => {
+  const pageSize = 9999;
   try {
-    const response = await fetch(METERS_API_URL, {
+    const response = await fetch(`${METERS_API_URL}?pageSize=${pageSize}`, {
       method: "GET",
-      headers: getAuthHeaders(),
+      headers: getAuthHeaders()
     });
 
     if (!response.ok) {
@@ -97,7 +98,6 @@ export const fetchMeters = async (): Promise<Meter[]> => {
       usageAnalysisType: r.fields["Usage Analysis Type"] || "",
       installedTime: r.fields["Installed Time"] || "",
     }));
-    console.log ("ans", ans);
 
     return ans;
   } catch (error) {
@@ -139,7 +139,9 @@ export const createMeter = async (
     });
 
     if (!response.ok) {
-      throw new Error(`Failed to create meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to create meter: ${response.status} ${response.statusText}`
+      );
     }
 
     const data = await response.json();
@@ -154,22 +156,32 @@ export const createMeter = async (
       createdAt: createdRecord.fields.CreatedAt || meterData.createdAt,
       updatedAt: createdRecord.fields.UpdatedAt || meterData.updatedAt,
       areaName: createdRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber: createdRecord.fields["Account Number"] || meterData.accountNumber,
+      accountNumber:
+        createdRecord.fields["Account Number"] || meterData.accountNumber,
       userName: createdRecord.fields["User Name"] || meterData.userName,
-      userAddress: createdRecord.fields["User Address"] || meterData.userAddress,
-      meterSerialNumber: createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
+      userAddress:
+        createdRecord.fields["User Address"] || meterData.userAddress,
+      meterSerialNumber:
+        createdRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
       meterName: createdRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus: createdRecord.fields["Meter Status"] || meterData.meterStatus,
-      protocolType: createdRecord.fields["Protocol Type"] || meterData.protocolType,
+      meterStatus:
+        createdRecord.fields["Meter Status"] || meterData.meterStatus,
+      protocolType:
+        createdRecord.fields["Protocol Type"] || meterData.protocolType,
       priceNo: createdRecord.fields["Price No."] || meterData.priceNo,
       priceName: createdRecord.fields["Price Name"] || meterData.priceName,
-      dmaPartition: createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      supplyTypes: createdRecord.fields["Supply Types"] || meterData.supplyTypes,
+      dmaPartition:
+        createdRecord.fields["DMA Partition"] || meterData.dmaPartition,
+      supplyTypes:
+        createdRecord.fields["Supply Types"] || meterData.supplyTypes,
       deviceId: createdRecord.fields["Device ID"] || meterData.deviceId,
       deviceName: createdRecord.fields["Device Name"] || meterData.deviceName,
       deviceType: createdRecord.fields["Device Type"] || meterData.deviceType,
-      usageAnalysisType: createdRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
-      installedTime: createdRecord.fields["Installed Time"] || meterData.installedTime,
+      usageAnalysisType:
+        createdRecord.fields["Usage Analysis Type"] ||
+        meterData.usageAnalysisType,
+      installedTime:
+        createdRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error creating meter:", error);
@@ -214,9 +226,13 @@ export const updateMeter = async (
     if (!response.ok) {
       if (response.status === 400) {
         const errorData = await response.json();
-        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
+        throw new Error(
+          `Bad Request: ${errorData.msg || "Invalid data provided"}`
+        );
       }
-      throw new Error(`Failed to update meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to update meter: ${response.status} ${response.statusText}`
+      );
     }
 
     const data = await response.json();
@@ -231,22 +247,32 @@ export const updateMeter = async (
       createdAt: updatedRecord.fields.CreatedAt || meterData.createdAt,
       updatedAt: updatedRecord.fields.UpdatedAt || meterData.updatedAt,
       areaName: updatedRecord.fields["Area Name"] || meterData.areaName,
-      accountNumber: updatedRecord.fields["Account Number"] || meterData.accountNumber,
+      accountNumber:
+        updatedRecord.fields["Account Number"] || meterData.accountNumber,
       userName: updatedRecord.fields["User Name"] || meterData.userName,
-      userAddress: updatedRecord.fields["User Address"] || meterData.userAddress,
-      meterSerialNumber: updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
+      userAddress:
+        updatedRecord.fields["User Address"] || meterData.userAddress,
+      meterSerialNumber:
+        updatedRecord.fields["Meter S/N"] || meterData.meterSerialNumber,
       meterName: updatedRecord.fields["Meter Name"] || meterData.meterName,
-      meterStatus: updatedRecord.fields["Meter Status"] || meterData.meterStatus,
-      protocolType: updatedRecord.fields["Protocol Type"] || meterData.protocolType,
+      meterStatus:
+        updatedRecord.fields["Meter Status"] || meterData.meterStatus,
+      protocolType:
+        updatedRecord.fields["Protocol Type"] || meterData.protocolType,
       priceNo: updatedRecord.fields["Price No."] || meterData.priceNo,
       priceName: updatedRecord.fields["Price Name"] || meterData.priceName,
-      dmaPartition: updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
-      supplyTypes: updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
+      dmaPartition:
+        updatedRecord.fields["DMA Partition"] || meterData.dmaPartition,
+      supplyTypes:
+        updatedRecord.fields["Supply Types"] || meterData.supplyTypes,
       deviceId: updatedRecord.fields["Device ID"] || meterData.deviceId,
       deviceName: updatedRecord.fields["Device Name"] || meterData.deviceName,
       deviceType: updatedRecord.fields["Device Type"] || meterData.deviceType,
-      usageAnalysisType: updatedRecord.fields["Usage Analysis Type"] || meterData.usageAnalysisType,
-      installedTime: updatedRecord.fields["Installed Time"] || meterData.installedTime,
+      usageAnalysisType:
+        updatedRecord.fields["Usage Analysis Type"] ||
+        meterData.usageAnalysisType,
+      installedTime:
+        updatedRecord.fields["Installed Time"] || meterData.installedTime,
     };
   } catch (error) {
     console.error("Error updating meter:", error);
@@ -267,9 +293,13 @@ export const deleteMeter = async (id: string): Promise<void> => {
     if (!response.ok) {
       if (response.status === 400) {
         const errorData = await response.json();
-        throw new Error(`Bad Request: ${errorData.msg || "Invalid data provided"}`);
+        throw new Error(
+          `Bad Request: ${errorData.msg || "Invalid data provided"}`
+        );
       }
-      throw new Error(`Failed to delete meter: ${response.status} ${response.statusText}`);
+      throw new Error(
+        `Failed to delete meter: ${response.status} ${response.statusText}`
+      );
     }
   } catch (error) {
     console.error("Error deleting meter:", error);
diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index af0284c..5b00b18 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -62,7 +62,7 @@ export default function ConcentratorsPage() {
     setLoadingConcentrators(true);
     try {
       const data = await fetchConcentrators();
-      const projectsArray = data.map((record) => record["Area Name"]);
+      const projectsArray = [...new Set(data.map((record) => record["Area Name"]))];
       setAllProjects(projectsArray);
       setConcentrators(data);
     } catch (error) {
diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index b380e67..1454bad 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -1,7 +1,6 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
 import MaterialTable from "@material-table/core";
-import { fetchProjectNames } from "../../api/projects";
 import {
   fetchMeters,
   createMeter,
@@ -10,14 +9,6 @@ import {
   type Meter,
 } from "../../api/meters";
 
-/* ================= TYPES ================= */
-
-interface User {
-  name: string;
-  role: "SUPER_ADMIN" | "USER";
-  project?: string; // asignado si no es superadmin
-}
-
 interface DeviceData {
   "Device ID": number;
   "Device EUI": string;
@@ -28,51 +19,14 @@ interface DeviceData {
 
 /* ================= COMPONENT ================= */
 export default function MeterManagement() {
-  // Simulación de usuario actual
-  const currentUser: User = {
-    name: "Admin GRH",
-    role: "SUPER_ADMIN", // cambiar a USER para probar otro caso
-    project: "CESPT",
-  };
-
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
 
-  // Proyectos visibles según el usuario
-  const visibleProjects = useMemo(() =>
-    currentUser.role === "SUPER_ADMIN"
-      ? allProjects
-      : currentUser.project
-      ? [currentUser.project]
-      : [],
-    [allProjects, currentUser.role, currentUser.project]
-  );
 
   const [selectedProject, setSelectedProject] = useState("");
 
-  useEffect(() => {
-    const loadProjects = async () => {
-      try {
-        const projects = await fetchProjectNames();
-        setAllProjects(projects);
-      } catch (error) {
-        console.error('Error loading projects:', error);
-        setAllProjects([]);
-      } finally {
-        setLoadingProjects(false);
-      }
-    };
-
-    loadProjects();
-  }, []);
-
-  useEffect(() => {
-    if (visibleProjects.length > 0 && !selectedProject) {
-      setSelectedProject(visibleProjects[0]);
-    }
-  }, [visibleProjects, selectedProject]);
-
   const [meters, setMeters] = useState<Meter[]>([]);
+  const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
   const [loadingMeters, setLoadingMeters] = useState(true);
   const [activeMeter, setActiveMeter] = useState<Meter | null>(null);
   const [search, setSearch] = useState("");
@@ -109,6 +63,15 @@ export default function MeterManagement() {
     "AppKey": "",
   };
 
+  useEffect(() => {
+    if (selectedProject) {
+      const filtered = meters.filter((meter) => meter.areaName === selectedProject);
+      setFilteredMeters(filtered);
+    } else {
+      setFilteredMeters(meters);
+    }
+  }, [selectedProject, meters]);
+
   const [form, setForm] = useState<Omit<Meter, "id">>(emptyMeter);
   const [deviceForm, setDeviceForm] = useState<DeviceData>(emptyDeviceData);
   const [errors, setErrors] = useState<{ [key: string]: boolean }>({});
@@ -117,12 +80,16 @@ export default function MeterManagement() {
     setLoadingMeters(true);
     try {
       const data = await fetchMeters();
+      const projectsArray = [...new Set(data.map((record) => record["areaName"]))];
+      setAllProjects(projectsArray);
       setMeters(data);
     } catch (error) {
       console.error("Error loading meters:", error);
+      setAllProjects([]);
       setMeters([]);
     } finally {
       setLoadingMeters(false);
+      setLoadingProjects(false);
     }
   };
 
@@ -144,16 +111,14 @@ export default function MeterManagement() {
   const validateForm = (): boolean => {
     const newErrors: { [key: string]: boolean } = {};
 
+    // Required fields
     if (!form.meterName.trim()) newErrors["meterName"] = true;
     if (!form.meterSerialNumber.trim()) newErrors["meterSerialNumber"] = true;
     if (!form.areaName.trim()) newErrors["areaName"] = true;
     if (!form.deviceName.trim()) newErrors["deviceName"] = true;
-    if (!form.deviceType.trim()) newErrors["deviceType"] = true;
     if (!form.protocolType.trim()) newErrors["protocolType"] = true;
-    if (!form.supplyTypes.trim()) newErrors["supplyTypes"] = true;
-    if (!form.usageAnalysisType.trim()) newErrors["usageAnalysisType"] = true;
-    if (!form.installedTime) newErrors["installedTime"] = true;
 
+    // Device Configuration - Required
     if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) {
       newErrors["Device ID"] = true;
     }
@@ -248,15 +213,6 @@ export default function MeterManagement() {
     setActiveMeter(null);
   };
 
-  /* ================= FILTER ================= */
-  const filtered = meters.filter(
-    (m) =>
-      (m.meterName.toLowerCase().includes(search.toLowerCase()) ||
-        m.meterSerialNumber.toLowerCase().includes(search.toLowerCase()) ||
-        m.deviceId.toLowerCase().includes(search.toLowerCase()) ||
-        m.areaName.toLowerCase().includes(search.toLowerCase()))
-  );
-
   /* ================= UI ================= */
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
@@ -270,22 +226,25 @@ export default function MeterManagement() {
           value={selectedProject}
           onChange={(e) => setSelectedProject(e.target.value)}
           className="w-full border px-3 py-2 rounded"
-          disabled={loadingProjects || visibleProjects.length === 0}
+          disabled={loadingProjects || allProjects.length === 0}
         >
           {loadingProjects ? (
             <option>Loading projects...</option>
-          ) : visibleProjects.length === 0 ? (
+          ) : meters.length === 0 ? (
             <option>No projects available</option>
           ) : (
-            visibleProjects.map((proj) => (
-              <option key={proj} value={proj}>
-                {proj}
-              </option>
-            ))
+            <>
+              <option value="">Select a project</option>
+              {allProjects.map((proj) => (
+                <option key={proj} value={proj}>
+                  {proj}
+                </option>
+              ))}
+            </>
           )}
         </select>
 
-        {visibleProjects.length === 0 && !loadingProjects && (
+        {allProjects.length === 0 && !loadingProjects && (
           <p className="text-sm text-gray-500 mt-2">
             No projects available. Please contact your administrator.
           </p>
@@ -316,7 +275,7 @@ export default function MeterManagement() {
                 setEditingId(null);
                 setShowModal(true);
               }}
-              disabled={!selectedProject || visibleProjects.length === 0}
+              disabled={!selectedProject || 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"
             >
               <Plus size={16} /> Add
@@ -387,32 +346,17 @@ export default function MeterManagement() {
           title="Meters"
           isLoading={loadingMeters}
           columns={[
-            { title: "Meter Name", field: "meterName" },
-            { title: "Serial Number", field: "meterSerialNumber" },
-            { title: "Area", field: "areaName" },
-            { title: "Device ID", field: "deviceId" },
-            { title: "Device Name", field: "deviceName" },
-            {
-              title: "Status",
-              field: "meterStatus",
-              render: (rowData) => (
-                <span
-                  className={`px-3 py-1 rounded-full text-xs font-semibold border ${
-                    rowData.meterStatus === "Installed"
-                      ? "text-green-600 border-green-600"
-                      : "text-gray-600 border-gray-600"
-                  }`}
-                >
-                  {rowData.meterStatus}
-                </span>
-              ),
-            },
-            { title: "Protocol", field: "protocolType" },
-            { title: "Device Type", field: "deviceType" },
-            { title: "Created At", field: "createdAt", type: "datetime" },
-            { title: "Updated At", field: "updatedAt", type: "datetime" },
+            { title: "Area Name", field: "areaName", render: (rowData) => rowData.areaName || "-" },
+            { title: "Account Number", field: "accountNumber", render: (rowData) => rowData.accountNumber || "-" },
+            { title: "User Name", field: "userName", render: (rowData) => rowData.userName || "-" },
+            { title: "User Address", field: "userAddress", render: (rowData) => rowData.userAddress || "-" },
+            { title: "Meter S/N", field: "meterSerialNumber", render: (rowData) => rowData.meterSerialNumber || "-" },
+            { title: "Meter Name", field: "meterName", render: (rowData) => rowData.meterName || "-" },
+            { title: "Protocol Type", field: "protocolType", render: (rowData) => rowData.protocolType || "-" },
+            { title: "Device ID", field: "deviceId", render: (rowData) => rowData.deviceId || "-" },
+            { title: "Device Name", field: "deviceName", render: (rowData) => rowData.deviceName || "-" },
           ]}
-          data={filtered}
+          data={filteredMeters}
           onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
           options={{
             actionsColumnIndex: -1,
@@ -450,6 +394,83 @@ export default function MeterManagement() {
         </h3>
 
         <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["areaName"] ? "border-red-500" : ""
+              }`}
+              placeholder="Area Name *"
+              value={form.areaName}
+              onChange={(e) => {
+                setForm({ ...form, areaName: e.target.value });
+                if (errors["areaName"]) {
+                  setErrors({ ...errors, "areaName": false });
+                }
+              }}
+              required
+            />
+            {errors["areaName"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Account Number (optional)"
+              value={form.accountNumber ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, accountNumber: e.target.value || null })
+              }
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="User Name (optional)"
+              value={form.userName ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, userName: e.target.value || null })
+              }
+            />
+          </div>
+
+          <div>
+            <input
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="User Address (optional)"
+              value={form.userAddress ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, userAddress: e.target.value || null })
+              }
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <input
+              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+                errors["meterSerialNumber"] ? "border-red-500" : ""
+              }`}
+              placeholder="Meter S/N *"
+              value={form.meterSerialNumber}
+              onChange={(e) => {
+                setForm({ ...form, meterSerialNumber: e.target.value });
+                if (errors["meterSerialNumber"]) {
+                  setErrors({ ...errors, "meterSerialNumber": false });
+                }
+              }}
+              required
+            />
+            {errors["meterSerialNumber"] && (
+              <p className="text-red-500 text-xs mt-1">This field is required</p>
+            )}
+          </div>
+
           <div>
             <input
               className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
@@ -469,100 +490,6 @@ export default function MeterManagement() {
               <p className="text-red-500 text-xs mt-1">This field is required</p>
             )}
           </div>
-
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["meterSerialNumber"] ? "border-red-500" : ""
-              }`}
-              placeholder="Meter Serial Number *"
-              value={form.meterSerialNumber}
-              onChange={(e) => {
-                setForm({ ...form, meterSerialNumber: e.target.value });
-                if (errors["meterSerialNumber"]) {
-                  setErrors({ ...errors, "meterSerialNumber": false });
-                }
-              }}
-              required
-            />
-            {errors["meterSerialNumber"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
-          </div>
-        </div>
-
-        <div>
-          <input
-            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-              errors["areaName"] ? "border-red-500" : ""
-            }`}
-            placeholder="Area Name *"
-            value={form.areaName}
-            onChange={(e) => {
-              setForm({ ...form, areaName: e.target.value });
-              if (errors["areaName"]) {
-                setErrors({ ...errors, "areaName": false });
-              }
-            }}
-            required
-          />
-          {errors["areaName"] && (
-            <p className="text-red-500 text-xs mt-1">This field is required</p>
-          )}
-        </div>
-
-        <div className="grid grid-cols-2 gap-3">
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["deviceName"] ? "border-red-500" : ""
-              }`}
-              placeholder="Device Name *"
-              value={form.deviceName}
-              onChange={(e) => {
-                setForm({ ...form, deviceName: e.target.value });
-                if (errors["deviceName"]) {
-                  setErrors({ ...errors, "deviceName": false });
-                }
-              }}
-              required
-            />
-            {errors["deviceName"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
-          </div>
-
-          <div>
-            <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["deviceType"] ? "border-red-500" : ""
-              }`}
-              placeholder="Device Type *"
-              value={form.deviceType}
-              onChange={(e) => {
-                setForm({ ...form, deviceType: e.target.value });
-                if (errors["deviceType"]) {
-                  setErrors({ ...errors, "deviceType": false });
-                }
-              }}
-              required
-            />
-            {errors["deviceType"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
-          </div>
-        </div>
-
-        <div>
-          <select
-            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            value={form.meterStatus}
-            onChange={(e) => setForm({ ...form, meterStatus: e.target.value })}
-          >
-            <option value="Installed">Installed</option>
-            <option value="Uninstalled">Uninstalled</option>
-            <option value="Maintenance">Maintenance</option>
-          </select>
         </div>
 
         <div className="grid grid-cols-2 gap-3">
@@ -588,129 +515,35 @@ export default function MeterManagement() {
 
           <div>
             <input
-              className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-                errors["supplyTypes"] ? "border-red-500" : ""
-              }`}
-              placeholder="Supply Types *"
-              value={form.supplyTypes}
-              onChange={(e) => {
-                setForm({ ...form, supplyTypes: e.target.value });
-                if (errors["supplyTypes"]) {
-                  setErrors({ ...errors, "supplyTypes": false });
-                }
-              }}
-              required
+              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Device ID (optional)"
+              value={form.deviceId ?? ""}
+              onChange={(e) =>
+                setForm({ ...form, deviceId: e.target.value || "" })
+              }
             />
-            {errors["supplyTypes"] && (
-              <p className="text-red-500 text-xs mt-1">This field is required</p>
-            )}
           </div>
         </div>
 
         <div>
           <input
             className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-              errors["usageAnalysisType"] ? "border-red-500" : ""
+              errors["deviceName"] ? "border-red-500" : ""
             }`}
-            placeholder="Usage Analysis Type *"
-            value={form.usageAnalysisType}
+            placeholder="Device Name *"
+            value={form.deviceName}
             onChange={(e) => {
-              setForm({ ...form, usageAnalysisType: e.target.value });
-              if (errors["usageAnalysisType"]) {
-                setErrors({ ...errors, "usageAnalysisType": false });
+              setForm({ ...form, deviceName: e.target.value });
+              if (errors["deviceName"]) {
+                setErrors({ ...errors, "deviceName": false });
               }
             }}
             required
           />
-          {errors["usageAnalysisType"] && (
+          {errors["deviceName"] && (
             <p className="text-red-500 text-xs mt-1">This field is required</p>
           )}
         </div>
-
-        <div>
-          <input
-            type="datetime-local"
-            className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
-              errors["installedTime"] ? "border-red-500" : ""
-            }`}
-            placeholder="Installed Time *"
-            value={
-              form.installedTime
-                ? new Date(form.installedTime).toISOString().slice(0, 16)
-                : ""
-            }
-            onChange={(e) => {
-              setForm({ ...form, installedTime: new Date(e.target.value).toISOString() });
-              if (errors["installedTime"]) {
-                setErrors({ ...errors, "installedTime": false });
-              }
-            }}
-            required
-          />
-          {errors["installedTime"] && (
-            <p className="text-red-500 text-xs mt-1">This field is required</p>
-          )}
-        </div>
-
-        <div className="pt-2 border-t">
-          <p className="text-xs text-gray-500 mb-2">Optional Fields</p>
-          
-          <div className="grid grid-cols-2 gap-3">
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Account Number (optional)"
-              value={form.accountNumber ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, accountNumber: e.target.value || null })
-              }
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="User Name (optional)"
-              value={form.userName ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, userName: e.target.value || null })
-              }
-            />
-          </div>
-
-          <input
-            className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent mt-3"
-            placeholder="User Address (optional)"
-            value={form.userAddress ?? ""}
-            onChange={(e) =>
-              setForm({ ...form, userAddress: e.target.value || null })
-            }
-          />
-
-          <div className="grid grid-cols-3 gap-3 mt-3">
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Price No. (optional)"
-              value={form.priceNo ?? ""}
-              onChange={(e) => setForm({ ...form, priceNo: e.target.value || null })}
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="Price Name (optional)"
-              value={form.priceName ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, priceName: e.target.value || null })
-              }
-            />
-
-            <input
-              className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              placeholder="DMA Partition (optional)"
-              value={form.dmaPartition ?? ""}
-              onChange={(e) =>
-                setForm({ ...form, dmaPartition: e.target.value || null })
-              }
-            />
-          </div>
-        </div>
       </div>
 
       <div className="space-y-3 pt-4">

From b9d7eab9db8af3fca459718c8a5f4207c1fbe266 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 22 Dec 2025 01:20:33 -0600
Subject: [PATCH 5/7] concentrators logic

---
 src/pages/concentrators/ConcentratorsPage.tsx | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index 5b00b18..4e45f4a 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -51,12 +51,18 @@ export default function ConcentratorsPage() {
 
   const [selectedProject, setSelectedProject] = useState("");
   const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
+  const [filteredConcentrators, setFilteredConcentrators] = useState<Concentrator[]>([]);
 
   useEffect(() => {
-    if (visibleProjects.length > 0 && !selectedProject) {
-      setSelectedProject(visibleProjects[0]);
+    if (selectedProject) {
+      const filtered = concentrators.filter(
+        (c) => c["Area Name"] === selectedProject
+      );
+      setFilteredConcentrators(filtered);
+    } else {
+      setFilteredConcentrators(concentrators);
     }
-  }, [visibleProjects, selectedProject]);
+  }, [selectedProject, concentrators]);
 
   const loadConcentrators = async () => {
     setLoadingConcentrators(true);
@@ -221,12 +227,10 @@ export default function ConcentratorsPage() {
     }
   };
 
-  /* ================= FILTER ================= */
-  const filtered = concentrators.filter(
+  const searchFiltered = filteredConcentrators.filter(
     (c) =>
-      (c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
-        c["Device S/N"].toLowerCase().includes(search.toLowerCase())) &&
-      c["Area Name"] === selectedProject
+      c["Device Name"].toLowerCase().includes(search.toLowerCase()) ||
+      c["Device S/N"].toLowerCase().includes(search.toLowerCase())
   );
 
   /* ================= UI ================= */
@@ -249,11 +253,14 @@ export default function ConcentratorsPage() {
           ) : visibleProjects.length === 0 ? (
             <option>No projects available</option>
           ) : (
-            visibleProjects.map((proj) => (
-              <option key={proj} value={proj}>
-                {proj}
-              </option>
-            ))
+            <>
+              <option value="">Select a project</option>
+              {visibleProjects.map((proj) => (
+                <option key={proj} value={proj}>
+                  {proj}
+                </option>
+              ))}
+            </>
           )}
         </select>
 
@@ -279,6 +286,7 @@ export default function ConcentratorsPage() {
           <div className="flex gap-3">
             <button
               onClick={() => {
+                if (!selectedProject) return;
                 setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject });
                 setGatewayForm(getEmptyGatewayData());
                 setErrors({});
@@ -346,8 +354,8 @@ export default function ConcentratorsPage() {
           title="Concentrators"
           isLoading={loadingConcentrators}
           columns={[
-            { title: "Device Name", field: "Device Name" },
-            { title: "Device S/N", field: "Device S/N" },
+            { title: "Device Name", field: "Device Name", render: (rowData) => rowData["Device Name"] || "-" },
+            { title: "Device S/N", field: "Device S/N", render: (rowData) => rowData["Device S/N"] || "-" },
             {
               title: "Device Status",
               field: "Device Status",
@@ -359,15 +367,15 @@ export default function ConcentratorsPage() {
                       : "text-red-600 border-red-600"
                   }`}
                 >
-                  {rowData["Device Status"]}
+                  {rowData["Device Status"] || "-"}
                 </span>
               ),
             },
-            { title: "Operator", field: "Operator" },
-            { title: "Area Name", field: "Area Name" },
-            { title: "Installed Time", field: "Installed Time", type: "date" },
+            { title: "Operator", field: "Operator", render: (rowData) => rowData["Operator"] || "-" },
+            { title: "Area Name", field: "Area Name", render: (rowData) => rowData["Area Name"] || "-" },
+            { title: "Installed Time", field: "Installed Time", type: "date", render: (rowData) => rowData["Installed Time"] || "-" },
           ]}
-          data={filtered}
+          data={searchFiltered}
           onRowClick={(_, rowData) => setActiveConcentrator(rowData as Concentrator)}
           options={{
             actionsColumnIndex: -1,

From ee35944c44114d9d232ced637a3eaee0bc1ff904 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 22 Dec 2025 01:31:13 -0600
Subject: [PATCH 6/7] Dashboard navigate to meters from Tomas card

---
 src/App.tsx        |  2 +-
 src/pages/Home.tsx | 85 ++++++++++++++++++++++++++++++++++++----------
 2 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 183cf0d..22cf5e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,7 +34,7 @@ export default function App() {
         return <RolesPage />;
       case "home":
       default:
-        return <Home />;
+        return <Home setPage={setPage} />;
     }
   };
 
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 887b3a5..36fee34 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,7 +1,16 @@
 import { Cpu, Settings, BarChart3, Bell } from "lucide-react";
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+} from "recharts";
+import { Page } from "../App";
 
-export default function Home() {
+export default function Home({ setPage }: { setPage: (page: Page) => void }) {
   // Datos de ejemplo para empresas
   const companies = [
     { name: "Empresa A", tomas: 12, alerts: 2, consumption: 320 },
@@ -18,19 +27,45 @@ export default function Home() {
 
   // Historial tipo Google
   const history = [
-    { user: "GRH", action: "Creó un nuevo medidor", target: "SN001", time: "Hace 5 minutos" },
-    { user: "CESPT", action: "Actualizó concentrador", target: "Planta 1", time: "Hace 20 minutos" },
-    { user: "GRH", action: "Eliminó un usuario", target: "Juan Pérez", time: "Hace 1 hora" },
-    { user: "CESPT", action: "Creó un payload", target: "Payload 12", time: "Hace 2 horas" },
-    { user: "GRH", action: "Actualizó medidor", target: "SN002", time: "Hace 3 horas" },
+    {
+      user: "GRH",
+      action: "Creó un nuevo medidor",
+      target: "SN001",
+      time: "Hace 5 minutos",
+    },
+    {
+      user: "CESPT",
+      action: "Actualizó concentrador",
+      target: "Planta 1",
+      time: "Hace 20 minutos",
+    },
+    {
+      user: "GRH",
+      action: "Eliminó un usuario",
+      target: "Juan Pérez",
+      time: "Hace 1 hora",
+    },
+    {
+      user: "CESPT",
+      action: "Creó un payload",
+      target: "Payload 12",
+      time: "Hace 2 horas",
+    },
+    {
+      user: "GRH",
+      action: "Actualizó medidor",
+      target: "SN002",
+      time: "Hace 3 horas",
+    },
   ];
 
   return (
     <div className="flex flex-col p-6 gap-8 w-full">
-
       {/* Título */}
       <div>
-        <h1 className="text-3xl font-bold text-gray-800">Sistema de Tomas de Agua</h1>
+        <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>
@@ -38,7 +73,10 @@ export default function Home() {
 
       {/* Cards de Secciones */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition">
+        <div
+          className="bg-white rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 transition"
+          onClick={() => setPage("meters")}
+        >
           <Cpu size={40} className="text-blue-600" />
           <span className="font-semibold text-gray-700">Tomas</span>
         </div>
@@ -64,8 +102,14 @@ export default function Home() {
             className="bg-white rounded-xl shadow p-4 flex flex-col gap-1"
           >
             <span className="text-gray-500 text-sm">{c.name}</span>
-            <span className="text-2xl font-bold text-gray-800">{c.tomas} Tomas</span>
-            <span className={`text-sm font-medium ${c.alerts > 0 ? "text-red-500" : "text-green-500"}`}>
+            <span className="text-2xl font-bold text-gray-800">
+              {c.tomas} Tomas
+            </span>
+            <span
+              className={`text-sm font-medium ${
+                c.alerts > 0 ? "text-red-500" : "text-green-500"
+              }`}
+            >
               {c.alerts} Alertas
             </span>
           </div>
@@ -74,10 +118,15 @@ export default function Home() {
 
       {/* Gráfica de consumo */}
       <div className="bg-white rounded-xl shadow p-6">
-        <h2 className="text-lg font-semibold mb-4">Consumo de Agua por Empresa</h2>
+        <h2 className="text-lg font-semibold mb-4">
+          Consumo de Agua por Empresa
+        </h2>
         <div className="h-60">
           <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={companies} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
+            <BarChart
+              data={companies}
+              margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+            >
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="name" />
               <YAxis />
@@ -97,7 +146,8 @@ export default function Home() {
               <span className="text-gray-400 mt-1">•</span>
               <div className="flex-1">
                 <p className="text-sm text-gray-700">
-                  <span className="font-semibold">{h.user}</span> {h.action} <span className="font-medium">{h.target}</span>
+                  <span className="font-semibold">{h.user}</span> {h.action}{" "}
+                  <span className="font-medium">{h.target}</span>
                 </p>
                 <p className="text-xs text-gray-400">{h.time}</p>
               </div>
@@ -112,13 +162,14 @@ export default function Home() {
         <ul className="divide-y divide-gray-200">
           {alerts.map((a, i) => (
             <li key={i} className="py-2 flex justify-between">
-              <span>{a.company} - {a.type}</span>
+              <span>
+                {a.company} - {a.type}
+              </span>
               <span className="text-red-500 font-medium">{a.time}</span>
             </li>
           ))}
         </ul>
       </div>
-
     </div>
   );
 }

From bbc86bb2d88b569ca5bf91ba3aa180aa316703f9 Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 22 Dec 2025 15:40:29 -0600
Subject: [PATCH 7/7] Dashboard logic

---
 src/App.tsx                    | 13 +++++++---
 src/pages/Home.tsx             | 47 +++++++++++++++++++++++++++++++---
 src/pages/meters/MeterPage.tsx | 10 ++++++--
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 22cf5e0..c6d2faf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,13 +19,20 @@ export type Page =
 
 export default function App() {
   const [page, setPage] = useState<Page>("home");
+  const [subPage, setSubPage] = useState<string>("default");
+  const [selectedProject, setSelectedProject] = useState<string>("");
+
+  const navigateToMetersWithProject = (projectName: string) => {
+    setSelectedProject(projectName);
+    setPage("meters");
+  };
 
   const renderPage = () => {
     switch (page) {
       case "projects":
         return <ProjectsPage />;
       case "meters":
-        return <MetersPage />;
+        return <MetersPage selectedProject={selectedProject} />;
       case "concentrators":
         return <ConcentratorsPage />;
       case "users":
@@ -34,7 +41,7 @@ export default function App() {
         return <RolesPage />;
       case "home":
       default:
-        return <Home setPage={setPage} />;
+        return <Home setPage={setPage} navigateToMetersWithProject={navigateToMetersWithProject} />;
     }
   };
 
@@ -42,7 +49,7 @@ export default function App() {
     <div className="flex h-screen">
       <Sidebar setPage={setPage} />
       <div className="flex-1 flex flex-col">
-        <TopMenu />
+        <TopMenu page={page} subPage={subPage} setSubPage={setSubPage} />
         <main className="flex-1 overflow-auto">
           {renderPage()}
         </main>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 36fee34..fd5780c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,4 +1,5 @@
 import { Cpu, Settings, BarChart3, Bell } from "lucide-react";
+import { useEffect, useState } from "react";
 import {
   BarChart,
   Bar,
@@ -8,9 +9,42 @@ import {
   ResponsiveContainer,
   CartesianGrid,
 } from "recharts";
+import { fetchMeters, Meter } from "../api/meters";
 import { Page } from "../App";
 
-export default function Home({ setPage }: { setPage: (page: Page) => void }) {
+export default function Home({ 
+  setPage, 
+  navigateToMetersWithProject 
+}: { 
+  setPage: (page: Page) => void;
+  navigateToMetersWithProject: (projectName: string) => void;
+}) {
+  const [allProjects, setAllProjects] = useState<string[]>([]);
+  const [meters, setMeters] = useState<Meter[]>([]);
+  
+
+  const loadMeters = async () => {
+    const data = await fetchMeters();
+    setMeters(data);
+    const projectsArray = [...new Set(data.map((record: Meter) => record["areaName"]))];
+    setAllProjects(projectsArray);
+  }
+  useEffect(() => {
+    loadMeters();
+  }, []);
+
+  const chartData = allProjects.map((projectName) => ({
+    name: projectName,
+    meterCount: meters.filter((meter) => meter.areaName === projectName).length,
+  }));
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleBarClick = (data: any) => {
+    if (data.activeLabel) {
+      navigateToMetersWithProject(data.activeLabel);
+    }
+  };
+
   // Datos de ejemplo para empresas
   const companies = [
     { name: "Empresa A", tomas: 12, alerts: 2, consumption: 320 },
@@ -119,19 +153,24 @@ export default function Home({ setPage }: { setPage: (page: Page) => void }) {
       {/* Gráfica de consumo */}
       <div className="bg-white rounded-xl shadow p-6">
         <h2 className="text-lg font-semibold mb-4">
-          Consumo de Agua por Empresa
+          Número de Medidores por Proyecto
         </h2>
         <div className="h-60">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart
-              data={companies}
+              data={chartData}
               margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+              onClick={handleBarClick}
             >
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="name" />
               <YAxis />
               <Tooltip />
-              <Bar dataKey="consumption" fill="#4c5f9e" />
+              <Bar 
+                dataKey="meterCount" 
+                fill="#4c5f9e" 
+                cursor="pointer"
+              />
             </BarChart>
           </ResponsiveContainer>
         </div>
diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index 1454bad..80c0e54 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -18,12 +18,12 @@ interface DeviceData {
 }
 
 /* ================= COMPONENT ================= */
-export default function MeterManagement() {
+export default function MeterManagement({ selectedProject: initialProject }: { selectedProject?: string } = {}) {
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [loadingProjects, setLoadingProjects] = useState(true);
 
 
-  const [selectedProject, setSelectedProject] = useState("");
+  const [selectedProject, setSelectedProject] = useState(initialProject || "");
 
   const [meters, setMeters] = useState<Meter[]>([]);
   const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
@@ -97,6 +97,12 @@ export default function MeterManagement() {
     loadMeters();
   }, []);
 
+  useEffect(() => {
+    if (initialProject) {
+      setSelectedProject(initialProject);
+    }
+  }, [initialProject]);
+
   const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
     //await fetch('/api/devices', { method: 'POST', body: JSON.stringify(deviceData) })