From 16f1f684992eebe268736c5e0e28e67eb1c194e8 Mon Sep 17 00:00:00 2001
From: Marlene-Angel <139193696+Marlene-Angel@users.noreply.github.com>
Date: Wed, 14 Jan 2026 12:32:23 -0800
Subject: [PATCH] Refactor meters: dividido en hook, sidebar, tabla y modal

---
 src/pages/meters/MeterPage.tsx     | 910 ++++++-----------------------
 src/pages/meters/MetersModal.tsx   | 269 +++++++++
 src/pages/meters/MetersSidebar.tsx | 293 ++++++++++
 src/pages/meters/MetersTable.tsx   |  67 +++
 src/pages/meters/useMeters.ts      |  94 +++
 5 files changed, 917 insertions(+), 716 deletions(-)
 create mode 100644 src/pages/meters/MetersModal.tsx
 create mode 100644 src/pages/meters/MetersSidebar.tsx
 create mode 100644 src/pages/meters/MetersTable.tsx
 create mode 100644 src/pages/meters/useMeters.ts

diff --git a/src/pages/meters/MeterPage.tsx b/src/pages/meters/MeterPage.tsx
index daef8f9..69d22c1 100644
--- a/src/pages/meters/MeterPage.tsx
+++ b/src/pages/meters/MeterPage.tsx
@@ -1,16 +1,17 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Plus, Trash2, Pencil, RefreshCcw } from "lucide-react";
-import MaterialTable from "@material-table/core";
-import {
-  fetchMeters,
-  createMeter,
-  updateMeter,
-  deleteMeter,
-  type Meter,
-} from "../../api/meters";
-import ConfirmModal from "../../components/layout/common/ConfirmModal"; // ✅ NUEVO
+import type { Meter } from "../../api/meters";
+import { createMeter, deleteMeter, updateMeter } from "../../api/meters";
+import ConfirmModal from "../../components/layout/common/ConfirmModal";
 
-interface DeviceData {
+import { useMeters } from "./useMeters";
+import MetersSidebar from "./MetersSidebar";
+import MetersTable from "./MetersTable";
+import MetersModal from "./MetersModal";
+
+/* ================= TYPES (exportables para otros componentes) ================= */
+
+export interface DeviceData {
   "Device ID": number;
   "Device EUI": string;
   "Join EUI": string;
@@ -18,12 +19,12 @@ interface DeviceData {
   meterId?: string;
 }
 
-type ProjectStatus = "ACTIVO" | "INACTIVO";
+export type ProjectStatus = "ACTIVO" | "INACTIVO";
 
-type ProjectCard = {
+export type ProjectCard = {
   name: string;
   region: string;
-  projects: number; // placeholder
+  projects: number;
   meters: number;
   activeAlerts: number;
   lastSync: string;
@@ -31,141 +32,137 @@ type ProjectCard = {
   status: ProjectStatus;
 };
 
+export type TakeType = "GENERAL" | "LORA" | "LORAWAN" | "GRANDES";
+
+/* ================= MOCKS (sin backend) ================= */
+
+const MOCK_PROJECTS_BY_TYPE: Record<
+  Exclude<TakeType, "GENERAL">,
+  Array<{ name: string; meters?: number }>
+> = {
+  LORA: [
+    { name: "LoRa - Demo 01", meters: 12 },
+    { name: "LoRa - Demo 02", meters: 7 },
+  ],
+  LORAWAN: [{ name: "LoRaWAN - Demo 01", meters: 4 }],
+  GRANDES: [{ name: "Grandes - Demo 01", meters: 2 }],
+};
+
 /* ================= COMPONENT ================= */
-export default function MeterManagement({
+
+export default function MetersPage({
   selectedProject: initialProject,
 }: { selectedProject?: string } = {}) {
-  const [allProjects, setAllProjects] = useState<string[]>([]);
-  const [loadingProjects, setLoadingProjects] = useState(true);
+  const m = useMeters({ initialProject });
 
-  const [selectedProject, setSelectedProject] = useState(initialProject || "");
+  // UI state
+  const [takeType, setTakeType] = useState<TakeType>("GENERAL");
+  const isMockMode = takeType !== "GENERAL";
 
-  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("");
 
-  const [projectQuery, setProjectQuery] = useState("");
-
   const [showModal, setShowModal] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
 
-  // ✅ NUEVO: confirm modal delete
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
-  const emptyMeter: Omit<Meter, "id"> = {
-    createdAt: new Date().toISOString(),
-    updatedAt: new Date().toISOString(),
-    areaName: "",
-    accountNumber: null,
-    userName: null,
-    userAddress: null,
-    meterSerialNumber: "",
-    meterName: "",
-    meterStatus: "Installed",
-    protocolType: "",
-    priceNo: null,
-    priceName: null,
-    dmaPartition: null,
-    supplyTypes: "",
-    deviceId: "",
-    deviceName: "",
-    deviceType: "",
-    usageAnalysisType: "",
-    installedTime: new Date().toISOString(),
-  };
+  const emptyMeter: Omit<Meter, "id"> = useMemo(
+    () => ({
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      areaName: "",
+      accountNumber: null,
+      userName: null,
+      userAddress: null,
+      meterSerialNumber: "",
+      meterName: "",
+      meterStatus: "Installed",
+      protocolType: "",
+      priceNo: null,
+      priceName: null,
+      dmaPartition: null,
+      supplyTypes: "",
+      deviceId: "",
+      deviceName: "",
+      deviceType: "",
+      usageAnalysisType: "",
+      installedTime: new Date().toISOString(),
+    }),
+    []
+  );
 
-  const emptyDeviceData: DeviceData = {
-    "Device ID": 0,
-    "Device EUI": "",
-    "Join EUI": "",
-    AppKey: "",
-  };
+  const emptyDeviceData: DeviceData = useMemo(
+    () => ({
+      "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 }>({});
-
-  /* ================= LOAD ================= */
-  const loadMeters = async () => {
-    setLoadingMeters(true);
-    setLoadingProjects(true);
-    try {
-      const data = await fetchMeters();
-
-      const projectsArray = [...new Set(data.map((r) => r.areaName))]
-        .filter(Boolean) as string[];
-
-      setAllProjects(projectsArray);
-      setMeters(data);
-
-      // ✅ FIX: si no hay proyecto seleccionado, autoselecciona el primero disponible
-      setSelectedProject((prev) => {
-        if (prev) return prev;
-        if (initialProject) return initialProject;
-        return projectsArray[0] ?? "";
-      });
-    } catch (error) {
-      console.error("Error loading meters:", error);
-      setAllProjects([]);
-      setMeters([]);
-    } finally {
-      setLoadingMeters(false);
-      setLoadingProjects(false);
-    }
-  };
-
-  useEffect(() => {
-    loadMeters();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    if (initialProject) setSelectedProject(initialProject);
-  }, [initialProject]);
-
-  // Filtrado por proyecto
-  useEffect(() => {
-    if (!selectedProject) {
-      setFilteredMeters([]);
-      return;
-    }
-    setFilteredMeters(meters.filter((m) => m.areaName === selectedProject));
-  }, [selectedProject, meters]);
-
-  /* ================= SIDEBAR PROJECT CARDS (ALWAYS OPEN) ================= */
-  const projectsData: ProjectCard[] = useMemo(() => {
-    const counts = meters.reduce<Record<string, number>>((acc, m) => {
-      const area = m.areaName ?? "SIN PROYECTO";
-      acc[area] = (acc[area] ?? 0) + 1;
-      return acc;
-    }, {});
+  const [errors, setErrors] = useState<Record<string, boolean>>({});
 
+  // Projects cards (real)
+  const projectsDataReal: ProjectCard[] = useMemo(() => {
     const baseRegion = "Baja California";
     const baseContact = "Operaciones";
     const baseLastSync = "Hace 1 h";
 
-    return allProjects.map((name) => ({
+    return m.allProjects.map((name) => ({
       name,
       region: baseRegion,
       projects: 1,
-      meters: counts[name] ?? 0,
+      meters: m.projectsCounts[name] ?? 0,
       activeAlerts: 0,
       lastSync: baseLastSync,
       contact: baseContact,
       status: "ACTIVO",
     }));
-  }, [meters, allProjects]);
+  }, [m.allProjects, m.projectsCounts]);
 
-  const filteredProjects = useMemo(() => {
-    const q = projectQuery.trim().toLowerCase();
-    if (!q) return projectsData;
-    return projectsData.filter((p) => p.name.toLowerCase().includes(q));
-  }, [projectQuery, projectsData]);
+  // Projects cards (mock)
+  const projectsDataMock: ProjectCard[] = useMemo(() => {
+    const baseRegion = "Baja California";
+    const baseContact = "Operaciones";
+    const baseLastSync = "Hace 1 h";
 
-  /* ================= DEVICE CONFIG MOCK ================= */
+    const mocks = MOCK_PROJECTS_BY_TYPE[takeType as Exclude<TakeType, "GENERAL">] ?? [];
+    return mocks.map((x) => ({
+      name: x.name,
+      region: baseRegion,
+      projects: 1,
+      meters: x.meters ?? 0,
+      activeAlerts: 0,
+      lastSync: baseLastSync,
+      contact: baseContact,
+      status: "ACTIVO",
+    }));
+  }, [takeType]);
+
+  const sidebarProjects = isMockMode ? projectsDataMock : projectsDataReal;
+
+  // Search filtered
+  const searchFiltered = useMemo(() => {
+    if (isMockMode) return [];
+    const q = search.trim().toLowerCase();
+    if (!q) return m.filteredMeters;
+
+    return m.filteredMeters.filter((x) => {
+      return (
+        (x.meterName ?? "").toLowerCase().includes(q) ||
+        (x.meterSerialNumber ?? "").toLowerCase().includes(q) ||
+        (x.deviceId ?? "").toLowerCase().includes(q) ||
+        (x.areaName ?? "").toLowerCase().includes(q)
+      );
+    });
+  }, [isMockMode, search, m.filteredMeters]);
+
+  // Device config mock
   const createOrUpdateDevice = async (deviceData: DeviceData): Promise<void> => {
     return new Promise((resolve) => {
       setTimeout(() => {
@@ -175,45 +172,43 @@ export default function MeterManagement({
     });
   };
 
-  /* ================= VALIDATION ================= */
+  // Validation
   const validateForm = (): boolean => {
-    const newErrors: { [key: string]: boolean } = {};
+    const next: Record<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.protocolType.trim()) newErrors["protocolType"] = true;
+    if (!form.meterName.trim()) next["meterName"] = true;
+    if (!form.meterSerialNumber.trim()) next["meterSerialNumber"] = true;
+    if (!form.areaName.trim()) next["areaName"] = true;
+    if (!form.deviceName.trim()) next["deviceName"] = true;
+    if (!form.protocolType.trim()) next["protocolType"] = 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;
+    if (!deviceForm["Device ID"] || deviceForm["Device ID"] === 0) next["Device ID"] = true;
+    if (!deviceForm["Device EUI"].trim()) next["Device EUI"] = true;
+    if (!deviceForm["Join EUI"].trim()) next["Join EUI"] = true;
+    if (!deviceForm["AppKey"].trim()) next["AppKey"] = true;
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+    setErrors(next);
+    return Object.keys(next).length === 0;
   };
 
-  /* ================= CRUD ================= */
+  // CRUD
   const handleSave = async () => {
+    if (isMockMode) return;
     if (!validateForm()) return;
 
     try {
       let savedMeter: Meter;
 
       if (editingId) {
-        const meterToUpdate = meters.find((m) => m.id === editingId);
+        const meterToUpdate = m.meters.find((x) => x.id === editingId);
         if (!meterToUpdate) throw new Error("Meter to update not found");
 
         const updatedMeter = await updateMeter(editingId, form);
-        setMeters((prev) =>
-          prev.map((m) => (m.id === editingId ? updatedMeter : m))
-        );
+        m.setMeters((prev) => prev.map((x) => (x.id === editingId ? updatedMeter : x)));
         savedMeter = updatedMeter;
       } else {
         const newMeter = await createMeter(form);
-        setMeters((prev) => [...prev, newMeter]);
+        m.setMeters((prev) => [...prev, newMeter]);
         savedMeter = newMeter;
       }
 
@@ -234,227 +229,67 @@ export default function MeterManagement({
     } catch (error) {
       console.error("Error saving meter:", error);
       alert(
-        `Error saving meter: ${
-          error instanceof Error ? error.message : "Please try again."
-        }`
-
-        
+        `Error saving meter: ${error instanceof Error ? error.message : "Please try again."}`
       );
-
     }
-
   };
 
-  // ✅ MISMA lógica de delete, solo sin window.confirm
   const handleDelete = async () => {
+    if (isMockMode) return;
     if (!activeMeter) return;
 
     try {
       await deleteMeter(activeMeter.id);
-      setMeters((prev) => prev.filter((m) => m.id !== activeMeter.id));
+      m.setMeters((prev) => prev.filter((x) => x.id !== activeMeter.id));
       setActiveMeter(null);
     } catch (error) {
       console.error("Error deleting meter:", error);
       alert(
-        `Error deleting meter: ${
-          error instanceof Error ? error.message : "Please try again."
-        }`
+        `Error deleting meter: ${error instanceof Error ? error.message : "Please try again."}`
       );
     }
   };
 
   const handleRefresh = () => {
-    loadMeters();
+    m.loadMeters();
     setActiveMeter(null);
   };
 
-  /* ================= SEARCH (CLIENT) ================= */
-  const searchFiltered = filteredMeters.filter((m) => {
-    const q = search.trim().toLowerCase();
-    if (!q) return true;
+  const resetSelection = () => {
+    setActiveMeter(null);
+    setSearch("");
+  };
 
-    return (
-      (m.meterName ?? "").toLowerCase().includes(q) ||
-      (m.meterSerialNumber ?? "").toLowerCase().includes(q) ||
-      (m.deviceId ?? "").toLowerCase().includes(q) ||
-      (m.areaName ?? "").toLowerCase().includes(q)
-    );
-  });
-
-  /* ================= UI ================= */
   return (
     <div className="flex gap-6 p-6 w-full bg-gray-100">
       {/* SIDEBAR */}
-      <aside className="w-[420px] shrink-0">
-        <div className="bg-white rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
-          {/* Header */}
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <p className="text-sm text-gray-500">Proyectos</p>
-              <p className="text-xs text-gray-400">
-                Seleccionado:{" "}
-                <span className="font-semibold">{selectedProject || "—"}</span>
-              </p>
-            </div>
-
-            <button
-              type="button"
-              className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow hover:bg-blue-700 transition disabled:opacity-60"
-              onClick={handleRefresh}
-              disabled={loadingProjects}
-              title="Actualizar"
-            >
-              <RefreshCcw size={14} />
-            </button>
-          </div>
-
-          {/* Search */}
-          <div className="mt-4">
-            <input
-              value={projectQuery}
-              onChange={(e) => setProjectQuery(e.target.value)}
-              placeholder="Buscar proyecto…"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200"
-              disabled={loadingProjects}
-            />
-          </div>
-
-          {/* List */}
-          <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
-            {loadingProjects ? (
-              <div className="text-sm text-gray-500">Loading projects...</div>
-            ) : allProjects.length === 0 ? (
-              <div className="text-sm text-gray-500">
-                No projects available. Please contact your administrator.
-              </div>
-            ) : filteredProjects.length === 0 ? (
-              <div className="text-sm text-gray-500 text-center py-10">
-                No se encontraron proyectos.
-              </div>
-            ) : (
-              filteredProjects.map((p) => {
-                const active = p.name === selectedProject;
-
-                return (
-                  <div
-                    key={p.name}
-                    // ✅ FIX: también selecciona proyecto al dar clic en la tarjeta
-                    onClick={() => {
-                      setSelectedProject(p.name);
-                      setActiveMeter(null);
-                      setSearch("");
-                    }}
-                    className={[
-                      "rounded-xl border p-4 transition cursor-pointer",
-                      active
-                        ? "border-blue-600 bg-blue-50/40"
-                        : "border-gray-200 bg-white hover:bg-gray-50",
-                    ].join(" ")}
-                  >
-                    <div className="flex items-start justify-between gap-3">
-                      <div>
-                        <p className="text-sm font-semibold text-gray-800">
-                          {p.name}
-                        </p>
-                        <p className="text-xs text-gray-500">{p.region}</p>
-                      </div>
-
-                      <span
-                        className={[
-                          "text-xs font-semibold px-2 py-1 rounded-full",
-                          p.status === "ACTIVO"
-                            ? "bg-green-100 text-green-700"
-                            : "bg-gray-200 text-gray-700",
-                        ].join(" ")}
-                      >
-                        {p.status}
-                      </span>
-                    </div>
-
-                    <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
-                      <div className="flex justify-between gap-2">
-                        <span className="text-gray-500">Subproyectos</span>
-                        <span className="font-medium text-gray-800">
-                          {p.projects}
-                        </span>
-                      </div>
-
-                      <div className="flex justify-between gap-2">
-                        <span className="text-gray-500">Medidores</span>
-                        <span className="font-medium text-gray-800">
-                          {p.meters}
-                        </span>
-                      </div>
-
-                      <div className="flex justify-between gap-2">
-                        <span className="text-gray-500">Alertas activas</span>
-                        <span className="font-medium text-gray-800">
-                          {p.activeAlerts}
-                        </span>
-                      </div>
-
-                      <div className="flex justify-between gap-2">
-                        <span className="text-gray-500">Última sync</span>
-                        <span className="font-medium text-gray-800">
-                          {p.lastSync}
-                        </span>
-                      </div>
-
-                      <div className="col-span-2 flex justify-between gap-2">
-                        <span className="text-gray-500">Responsable</span>
-                        <span className="font-medium text-gray-800">
-                          {p.contact}
-                        </span>
-                      </div>
-                    </div>
-
-                    <div className="mt-4 flex items-center justify-end gap-2">
-                      <button
-                        type="button"
-                        className={[
-                          "rounded-lg px-3 py-2 text-sm font-semibold shadow transition",
-                          active
-                            ? "bg-blue-600 text-white hover:bg-blue-700"
-                            : "bg-gray-900 text-white hover:bg-gray-800",
-                        ].join(" ")}
-                        onClick={(e) => {
-                          // ✅ evita doble click (card + button)
-                          e.stopPropagation();
-                          setSelectedProject(p.name);
-                          setActiveMeter(null);
-                          setSearch("");
-                        }}
-                      >
-                        {active ? "Seleccionado" : "Seleccionar"}
-                      </button>
-                    </div>
-                  </div>
-                );
-              })
-            )}
-          </div>
-
-          <div className="pt-3 border-t text-xs text-gray-500">
-            Nota: region/alertas/última sync están en modo demostración hasta
-            integrar backend.
-          </div>
-        </div>
-      </aside>
+      <MetersSidebar
+        loadingProjects={m.loadingProjects}
+        takeType={takeType}
+        setTakeType={setTakeType}
+        selectedProject={m.selectedProject}
+        setSelectedProject={m.setSelectedProject}
+        isMockMode={isMockMode}
+        projects={sidebarProjects}
+        onRefresh={handleRefresh}
+        refreshDisabled={false}
+        allProjects={m.allProjects}
+        onResetSelection={resetSelection}
+      />
 
       {/* MAIN */}
       <main className="flex-1 flex flex-col gap-6 min-w-0">
-        {/* HEADER */}
         <div
           className="rounded-xl shadow p-6 text-white flex justify-between items-center"
-          style={{
-            background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)",
-          }}
+          style={{ background: "linear-gradient(135deg, #4c5f9e, #2a355d, #566bb8)" }}
         >
           <div>
             <h1 className="text-2xl font-bold">Meter Management</h1>
             <p className="text-sm text-blue-100">
-              {selectedProject
-                ? `Proyecto: ${selectedProject}`
+              {isMockMode
+                ? `Modo demo (${takeType}) - backend pendiente`
+                : m.selectedProject
+                ? `Proyecto: ${m.selectedProject}`
                 : "Selecciona un proyecto desde el panel izquierdo"}
             </p>
           </div>
@@ -462,8 +297,10 @@ export default function MeterManagement({
           <div className="flex gap-3">
             <button
               onClick={() => {
+                if (isMockMode) return;
+
                 const base = { ...emptyMeter };
-                if (selectedProject) base.areaName = selectedProject;
+                if (m.selectedProject) base.areaName = m.selectedProject;
 
                 setForm(base);
                 setDeviceForm(emptyDeviceData);
@@ -471,7 +308,7 @@ export default function MeterManagement({
                 setEditingId(null);
                 setShowModal(true);
               }}
-              disabled={!selectedProject || allProjects.length === 0}
+              disabled={isMockMode || !m.selectedProject || m.allProjects.length === 0}
               className="flex items-center gap-2 px-4 py-2 bg-white text-[#4c5f9e] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
             >
               <Plus size={16} /> Agregar
@@ -479,7 +316,9 @@ export default function MeterManagement({
 
             <button
               onClick={() => {
+                if (isMockMode) return;
                 if (!activeMeter) return;
+
                 setEditingId(activeMeter.id);
                 setForm({
                   createdAt: activeMeter.createdAt,
@@ -506,16 +345,18 @@ export default function MeterManagement({
                 setErrors({});
                 setShowModal(true);
               }}
-              disabled={!activeMeter}
+              disabled={isMockMode || !activeMeter}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
               <Pencil size={16} /> Editar
             </button>
 
-            {/* ✅ CAMBIO: antes llamaba handleDelete, ahora abre modal */}
             <button
-              onClick={() => setConfirmOpen(true)}
-              disabled={!activeMeter}
+              onClick={() => {
+                if (isMockMode) return;
+                setConfirmOpen(true);
+              }}
+              disabled={isMockMode || !activeMeter}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
               <Trash2 size={16} /> Eliminar
@@ -530,94 +371,23 @@ export default function MeterManagement({
           </div>
         </div>
 
-        {/* SEARCH */}
         <input
           className="bg-white rounded-lg shadow px-4 py-2 text-sm"
           placeholder="Search by meter name, serial number, device ID, or area..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          disabled={!selectedProject}
+          disabled={isMockMode || !m.selectedProject}
         />
 
-        {/* TABLE */}
-        <div className={!selectedProject ? "opacity-60 pointer-events-none" : ""}>
-          <MaterialTable
-            title="Meters"
-            isLoading={loadingMeters}
-            columns={[
-              {
-                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={searchFiltered}
-            onRowClick={(_, rowData) => setActiveMeter(rowData as Meter)}
-            options={{
-              actionsColumnIndex: -1,
-              search: false,
-              paging: true,
-              sorting: true,
-              rowStyle: (rowData) => ({
-                backgroundColor:
-                  activeMeter?.id === (rowData as Meter).id
-                    ? "#EEF2FF"
-                    : "#FFFFFF",
-              }),
-            }}
-            localization={{
-              body: {
-                emptyDataSourceMessage: !selectedProject
-                  ? "Select a project to view meters."
-                  : loadingMeters
-                  ? "Loading meters..."
-                  : "No meters found. Click 'Add' to create your first meter.",
-              },
-            }}
-          />
-        </div>
+        <MetersTable
+          data={searchFiltered}
+          isLoading={m.loadingMeters}
+          isMockMode={isMockMode}
+          selectedProject={m.selectedProject}
+          activeMeter={activeMeter}
+          onRowClick={(row) => setActiveMeter(row)}
+        />
 
-        {/* ✅ NUEVO: ConfirmModal para borrar */}
         <ConfirmModal
           open={confirmOpen}
           title="Eliminar medidor"
@@ -641,315 +411,23 @@ export default function MeterManagement({
         />
       </main>
 
-      {/* MODAL */}
       {showModal && (
-        <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>
-
-            {/* ✅ FORMULARIO (REINTEGRADO) */}
-            <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["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 ${
-                      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>
-
-              <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"
-                    placeholder="Device ID (optional)"
-                    value={form.deviceId ?? ""}
-                    onChange={(e) =>
-                      setForm({ ...form, deviceId: e.target.value || "" })
-                    }
-                  />
-                </div>
-              </div>
-
-              <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>
-
-            <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="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"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleSave}
-                className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
-              >
-                Save
-              </button>
-            </div>
-          </div>
-        </div>
+        <MetersModal
+          editingId={editingId}
+          form={form}
+          setForm={setForm}
+          deviceForm={deviceForm}
+          setDeviceForm={setDeviceForm}
+          errors={errors}
+          setErrors={setErrors}
+          onClose={() => {
+            setShowModal(false);
+            setDeviceForm(emptyDeviceData);
+            setErrors({});
+          }}
+          onSave={handleSave}
+        />
       )}
     </div>
   );
 }
-
diff --git a/src/pages/meters/MetersModal.tsx b/src/pages/meters/MetersModal.tsx
new file mode 100644
index 0000000..55f0f55
--- /dev/null
+++ b/src/pages/meters/MetersModal.tsx
@@ -0,0 +1,269 @@
+import type React from "react";
+import type { Meter } from "../../api/meters";
+import type { DeviceData } from "./MeterPage";
+
+type Props = {
+  editingId: string | null;
+
+  form: Omit<Meter, "id">;
+  setForm: React.Dispatch<React.SetStateAction<Omit<Meter, "id">>>;
+
+  deviceForm: DeviceData;
+  setDeviceForm: React.Dispatch<React.SetStateAction<DeviceData>>;
+
+  errors: Record<string, boolean>;
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+
+  onClose: () => void;
+  onSave: () => void | Promise<void>;
+};
+
+export default function MetersModal({
+  editingId,
+  form,
+  setForm,
+  deviceForm,
+  setDeviceForm,
+  errors,
+  setErrors,
+  onClose,
+  onSave,
+}: Props) {
+  const title = editingId ? "Edit Meter" : "Add Meter";
+
+  return (
+    <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">{title}</h2>
+
+        {/* FORM */}
+        <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["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 ${
+                  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>
+
+          <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"
+                placeholder="Device ID (optional)"
+                value={form.deviceId ?? ""}
+                onChange={(e) => setForm({ ...form, deviceId: e.target.value || "" })}
+              />
+            </div>
+          </div>
+
+          <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>
+
+        {/* DEVICE CONFIG */}
+        <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>
+
+        {/* ACTIONS */}
+        <div className="flex justify-end gap-2 pt-3 border-t">
+          <button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
+            Cancel
+          </button>
+          <button
+            onClick={onSave}
+            className="bg-[#4c5f9e] text-white px-4 py-2 rounded hover:bg-[#3d4d7e]"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/meters/MetersSidebar.tsx b/src/pages/meters/MetersSidebar.tsx
new file mode 100644
index 0000000..ae5b352
--- /dev/null
+++ b/src/pages/meters/MetersSidebar.tsx
@@ -0,0 +1,293 @@
+// src/pages/meters/MetersSidebar.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ChevronDown, RefreshCcw, Check } from "lucide-react";
+import type React from "react";
+import type { ProjectCard, TakeType } from "./MeterPage";
+
+type Props = {
+  loadingProjects: boolean;
+
+  takeType: TakeType;
+  setTakeType: (t: TakeType) => void;
+
+  selectedProject: string;
+  setSelectedProject: React.Dispatch<React.SetStateAction<string>>;
+
+  isMockMode: boolean;
+  projects: ProjectCard[];
+
+  onRefresh: () => void;
+  refreshDisabled?: boolean;
+
+  allProjects: string[];
+  onResetSelection?: () => void;
+};
+
+type TakeTypeOption = { key: TakeType; label: string };
+
+const TAKE_TYPE_OPTIONS: TakeTypeOption[] = [
+  { key: "GENERAL", label: "General" },
+  { key: "LORA", label: "LoRa" },
+  { key: "LORAWAN", label: "LoRaWAN" },
+  { key: "GRANDES", label: "Grandes consumidores" },
+];
+
+export default function MetersSidebar({
+  loadingProjects,
+  takeType,
+  setTakeType,
+  selectedProject,
+  setSelectedProject,
+  isMockMode,
+  projects,
+  onRefresh,
+  refreshDisabled,
+  allProjects,
+  onResetSelection,
+}: Props) {
+  const [typesMenuOpen, setTypesMenuOpen] = useState(false);
+
+  // para detectar click fuera (igual a tu implementación)
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const onClickOutside = (e: MouseEvent) => {
+      if (!menuRef.current) return;
+      if (!menuRef.current.contains(e.target as Node)) {
+        setTypesMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  const takeTypeLabel = useMemo(
+    () => TAKE_TYPE_OPTIONS.find((o) => o.key === takeType)?.label ?? "General",
+    [takeType]
+  );
+
+  return (
+    <aside className="w-[420px] shrink-0">
+      <div className="bg-white rounded-xl shadow p-4 flex flex-col h-[calc(100vh-48px)]">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="text-sm text-gray-500">Proyectos</p>
+            <p className="text-xs text-gray-400">
+              Tipo: <span className="font-semibold">{takeTypeLabel}</span>
+              {" • "}
+              Seleccionado:{" "}
+              <span className="font-semibold">
+                {selectedProject || (isMockMode ? "— (modo demo)" : "—")}
+              </span>
+            </p>
+          </div>
+
+          <button
+            type="button"
+            className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow hover:bg-blue-700 transition disabled:opacity-60"
+            onClick={onRefresh}
+            disabled={loadingProjects || !!refreshDisabled}
+            title="Actualizar"
+          >
+            <RefreshCcw size={14} />
+          </button>
+        </div>
+
+        {/* ✅ Tipos de tomas (dropdown) — mismo UI que Concentrators */}
+        <div className="mt-4 relative" ref={menuRef}>
+          <button
+            type="button"
+            onClick={() => setTypesMenuOpen((v) => !v)}
+            disabled={loadingProjects}
+            className="w-full inline-flex items-center justify-between rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60"
+          >
+            <span className="flex items-center gap-2">
+              Tipos de tomas
+              <span className="text-xs font-semibold text-gray-500">
+                ({takeTypeLabel})
+              </span>
+            </span>
+
+            <ChevronDown
+              size={16}
+              className={`${typesMenuOpen ? "rotate-180" : ""} transition`}
+            />
+          </button>
+
+          {typesMenuOpen && (
+            <div className="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden">
+              {TAKE_TYPE_OPTIONS.map((opt) => {
+                const active = takeType === opt.key;
+
+                return (
+                  <button
+                    key={opt.key}
+                    type="button"
+                    onClick={() => {
+                      setTakeType(opt.key);
+                      setTypesMenuOpen(false);
+
+                      // Reset selection/search desde el parent
+                      onResetSelection?.();
+
+                      if (opt.key !== "GENERAL") {
+                        // mock mode -> limpia selección real
+                        setSelectedProject("");
+                      } else {
+                        // vuelve a GENERAL -> autoselecciona real si no hay
+                        setSelectedProject((prev) => prev || allProjects[0] || "");
+                      }
+                    }}
+                    className={[
+                      "w-full px-3 py-2 text-left text-sm flex items-center justify-between hover:bg-gray-50",
+                      active ? "bg-blue-50/60" : "bg-white",
+                    ].join(" ")}
+                  >
+                    <span
+                      className={`font-semibold ${
+                        active ? "text-blue-700" : "text-gray-700"
+                      }`}
+                    >
+                      {opt.label}
+                    </span>
+
+                    {active && <Check size={16} className="text-blue-700" />}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* List */}
+        <div className="mt-4 overflow-y-auto flex-1 space-y-3 pr-1">
+          {loadingProjects ? (
+            <div className="text-sm text-gray-500">Loading projects...</div>
+          ) : projects.length === 0 ? (
+            <div className="text-sm text-gray-500 text-center py-10">
+              {isMockMode
+                ? "No hay datos demo para este tipo."
+                : "No se encontraron proyectos."}
+            </div>
+          ) : (
+            projects.map((p) => {
+              const active = !isMockMode && p.name === selectedProject;
+
+              return (
+                <div
+                  key={p.name}
+                  onClick={() => {
+                    if (isMockMode) return;
+                    setSelectedProject(p.name);
+                    onResetSelection?.();
+                  }}
+                  className={[
+                    "rounded-xl border p-4 transition cursor-pointer",
+                    active
+                      ? "border-blue-600 bg-blue-50/40"
+                      : "border-gray-200 bg-white hover:bg-gray-50",
+                    isMockMode ? "opacity-90" : "",
+                  ].join(" ")}
+                  title={
+                    isMockMode
+                      ? "Modo demo: estas tarjetas son mocks"
+                      : "Seleccionar proyecto"
+                  }
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="text-sm font-semibold text-gray-800">
+                        {p.name}
+                      </p>
+                      <p className="text-xs text-gray-500">{p.region}</p>
+                    </div>
+
+                    <span
+                      className={[
+                        "text-xs font-semibold px-2 py-1 rounded-full",
+                        p.status === "ACTIVO"
+                          ? "bg-green-100 text-green-700"
+                          : "bg-gray-200 text-gray-700",
+                      ].join(" ")}
+                    >
+                      {p.status}
+                    </span>
+                  </div>
+
+                  <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
+                    <div className="flex justify-between gap-2">
+                      <span className="text-gray-500">Subproyectos</span>
+                      <span className="font-medium text-gray-800">
+                        {p.projects}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between gap-2">
+                      <span className="text-gray-500">Medidores</span>
+                      <span className="font-medium text-gray-800">
+                        {p.meters}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between gap-2">
+                      <span className="text-gray-500">Alertas activas</span>
+                      <span className="font-medium text-gray-800">
+                        {p.activeAlerts}
+                      </span>
+                    </div>
+
+                    <div className="flex justify-between gap-2">
+                      <span className="text-gray-500">Última sync</span>
+                      <span className="font-medium text-gray-800">
+                        {p.lastSync}
+                      </span>
+                    </div>
+
+                    <div className="col-span-2 flex justify-between gap-2">
+                      <span className="text-gray-500">Responsable</span>
+                      <span className="font-medium text-gray-800">
+                        {p.contact}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="mt-4 flex items-center justify-end gap-2">
+                    <button
+                      type="button"
+                      className={[
+                        "rounded-lg px-3 py-2 text-sm font-semibold shadow transition",
+                        active
+                          ? "bg-blue-600 text-white hover:bg-blue-700"
+                          : "bg-gray-900 text-white hover:bg-gray-800",
+                        isMockMode ? "opacity-50 cursor-not-allowed" : "",
+                      ].join(" ")}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (isMockMode) return;
+                        setSelectedProject(p.name);
+                        onResetSelection?.();
+                      }}
+                      disabled={isMockMode}
+                    >
+                      {isMockMode
+                        ? "Demo"
+                        : active
+                        ? "Seleccionado"
+                        : "Seleccionar"}
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        <div className="pt-3 border-t text-xs text-gray-500">
+          Nota: region/alertas/última sync están en modo demostración hasta
+          integrar backend.
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/src/pages/meters/MetersTable.tsx b/src/pages/meters/MetersTable.tsx
new file mode 100644
index 0000000..9c5ea82
--- /dev/null
+++ b/src/pages/meters/MetersTable.tsx
@@ -0,0 +1,67 @@
+import MaterialTable from "@material-table/core";
+import type { Meter } from "../../api/meters";
+
+type Props = {
+  data: Meter[];
+  isLoading: boolean;
+
+  isMockMode: boolean;
+  selectedProject: string;
+
+  activeMeter: Meter | null;
+  onRowClick: (row: Meter) => void;
+};
+
+export default function MetersTable({
+  data,
+  isLoading,
+  isMockMode,
+  selectedProject,
+  activeMeter,
+  onRowClick,
+}: Props) {
+  const disabled = isMockMode || !selectedProject;
+
+  return (
+    <div className={disabled ? "opacity-60 pointer-events-none" : ""}>
+      <MaterialTable
+        title="Meters"
+        isLoading={isLoading}
+        columns={[
+          { title: "Area Name", field: "areaName", render: (r: any) => r.areaName || "-" },
+          { title: "Account Number", field: "accountNumber", render: (r: any) => r.accountNumber || "-" },
+          { title: "User Name", field: "userName", render: (r: any) => r.userName || "-" },
+          { title: "User Address", field: "userAddress", render: (r: any) => r.userAddress || "-" },
+          { title: "Meter S/N", field: "meterSerialNumber", render: (r: any) => r.meterSerialNumber || "-" },
+          { title: "Meter Name", field: "meterName", render: (r: any) => r.meterName || "-" },
+          { title: "Protocol Type", field: "protocolType", render: (r: any) => r.protocolType || "-" },
+          { title: "Device ID", field: "deviceId", render: (r: any) => r.deviceId || "-" },
+          { title: "Device Name", field: "deviceName", render: (r: any) => r.deviceName || "-" },
+        ]}
+        data={disabled ? [] : data}
+        onRowClick={(_, rowData) => onRowClick(rowData as Meter)}
+        options={{
+          actionsColumnIndex: -1,
+          search: false,
+          paging: true,
+          sorting: true,
+          rowStyle: (rowData) => ({
+            backgroundColor:
+              activeMeter?.id === (rowData as Meter).id ? "#EEF2FF" : "#FFFFFF",
+          }),
+        }}
+        localization={{
+          body: {
+            emptyDataSourceMessage: isMockMode
+              ? "Modo demo: selecciona 'General' para ver datos reales."
+              : !selectedProject
+              ? "Select a project to view meters."
+              : isLoading
+              ? "Loading meters..."
+              : "No meters found. Click 'Add' to create your first meter.",
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/meters/useMeters.ts b/src/pages/meters/useMeters.ts
new file mode 100644
index 0000000..6ab8641
--- /dev/null
+++ b/src/pages/meters/useMeters.ts
@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from "react";
+import { fetchMeters, type Meter } from "../../api/meters";
+
+type UseMetersArgs = {
+  initialProject?: string;
+};
+
+export function useMeters({ initialProject }: UseMetersArgs) {
+  const [allProjects, setAllProjects] = useState<string[]>([]);
+  const [loadingProjects, setLoadingProjects] = useState(true);
+
+  const [selectedProject, setSelectedProject] = useState(initialProject || "");
+
+  const [meters, setMeters] = useState<Meter[]>([]);
+  const [filteredMeters, setFilteredMeters] = useState<Meter[]>([]);
+  const [loadingMeters, setLoadingMeters] = useState(true);
+
+  const loadMeters = async () => {
+    setLoadingMeters(true);
+    setLoadingProjects(true);
+
+    try {
+      const data = await fetchMeters();
+
+      const projectsArray = [...new Set(data.map((r) => r.areaName))]
+        .filter(Boolean) as string[];
+
+      setAllProjects(projectsArray);
+      setMeters(data);
+
+      setSelectedProject((prev) => {
+        if (prev) return prev;
+        if (initialProject) return initialProject;
+        return projectsArray[0] ?? "";
+      });
+    } catch (error) {
+      console.error("Error loading meters:", error);
+      setAllProjects([]);
+      setMeters([]);
+      setSelectedProject("");
+    } finally {
+      setLoadingMeters(false);
+      setLoadingProjects(false);
+    }
+  };
+
+  // init
+  useEffect(() => {
+    loadMeters();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // keep selectedProject synced if parent changes initialProject
+  useEffect(() => {
+    if (initialProject) setSelectedProject(initialProject);
+  }, [initialProject]);
+
+  // filter by project
+  useEffect(() => {
+    if (!selectedProject) {
+      setFilteredMeters([]);
+      return;
+    }
+    setFilteredMeters(meters.filter((m) => m.areaName === selectedProject));
+  }, [selectedProject, meters]);
+
+  const projectsCounts = useMemo(() => {
+    return meters.reduce<Record<string, number>>((acc, m) => {
+      const area = m.areaName ?? "SIN PROYECTO";
+      acc[area] = (acc[area] ?? 0) + 1;
+      return acc;
+    }, {});
+  }, [meters]);
+
+  return {
+    // loading
+    loadingProjects,
+    loadingMeters,
+
+    // projects
+    allProjects,
+    projectsCounts,
+    selectedProject,
+    setSelectedProject,
+
+    // data
+    meters,
+    setMeters,
+    filteredMeters,
+
+    // actions
+    loadMeters,
+  };
+}