Refactor concentrators: dividido en hook, sidebar, tabla y modal

src/pages/concentrators/ConcentratorsModal.tsx

@@ -0,0 +1,384 @@
+// src/pages/concentrators/ConcentratorsModal.tsx
+import type React from "react";
+import type { Concentrator } from "../../api/concentrators";
+import type { GatewayData } from "./ConcentratorsPage";
+
+type Props = {
+  editingSerial: string | null;
+
+  form: Omit<Concentrator, "id">;
+  setForm: React.Dispatch<React.SetStateAction<Omit<Concentrator, "id">>>;
+
+  gatewayForm: GatewayData;
+  setGatewayForm: React.Dispatch<React.SetStateAction<GatewayData>>;
+
+  errors: Record<string, boolean>;
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+
+  toDatetimeLocalValue: (value?: string) => string;
+  fromDatetimeLocalValue: (value: string) => string;
+
+  onClose: () => void;
+  onSave: () => void | Promise<void>;
+};
+
+export default function ConcentratorsModal({
+  editingSerial,
+  form,
+  setForm,
+  gatewayForm,
+  setGatewayForm,
+  errors,
+  setErrors,
+  toDatetimeLocalValue,
+  fromDatetimeLocalValue,
+  onClose,
+  onSave,
+}: Props) {
+  const title = editingSerial ? "Edit Concentrator" : "Add Concentrator";
+
+  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">
+            Concentrator 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 bg-gray-50"
+                placeholder="Area Name"
+                value={form["Area Name"] ?? ""}
+                disabled
+              />
+              <p className="text-xs text-gray-400 mt-1">
+                El proyecto seleccionado define el Area Name.
+              </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 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>
+          </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["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>
+
+            <div>
+              <select
+                className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                value={form["Device Status"]}
+                onChange={(e) =>
+                  setForm({
+                    ...form,
+                    "Device Status": e.target.value as any,
+                  })
+                }
+              >
+                <option value="ACTIVE">ACTIVE</option>
+                <option value="INACTIVE">INACTIVE</option>
+              </select>
+            </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["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>
+
+            <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" : ""
+                }`}
+                value={(form["Installed Time"] ?? "").slice(0, 10)}
+                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>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <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" : ""
+                }`}
+                value={toDatetimeLocalValue(form["Device Time"])}
+                onChange={(e) => {
+                  setForm({
+                    ...form,
+                    "Device Time": fromDatetimeLocalValue(e.target.value),
+                  });
+                  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>
+
+            <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" : ""
+                }`}
+                value={toDatetimeLocalValue(form["Communication Time"])}
+                onChange={(e) => {
+                  setForm({
+                    ...form,
+                    "Communication Time": fromDatetimeLocalValue(e.target.value),
+                  });
+                  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>
+
+          <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>
+        </div>
+
+        {/* GATEWAY */}
+        <div className="space-y-3 pt-4">
+          <h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
+            Gateway 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["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>
+
+            <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>
+          </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["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>
+
+            <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",
+                  })
+                }
+              >
+                <option value="Indoor">Indoor</option>
+                <option value="Outdoor">Outdoor</option>
+              </select>
+            </div>
+          </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>
+        </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>
+  );
+}

src/pages/concentrators/ConcentratorsSidebar.tsx

@@ -0,0 +1,232 @@
+// src/pages/concentrators/ConcentratorsSidebar.tsx
+import { useMemo } from "react";
+import { ChevronDown, Check, RefreshCcw } from "lucide-react";
+import type { ProjectCard, SampleView } from "./ConcentratorsPage";
+
+type Props = {
+  loadingProjects: boolean;
+
+  sampleView: SampleView;
+  sampleViewLabel: string;
+
+  // ✅ ahora lo controla el Page
+  typesMenuOpen: boolean;
+  setTypesMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+  onChangeSampleView: (next: SampleView) => void;
+
+  selectedProject: string;
+  onSelectProject: (name: string) => void;
+
+  // ✅ el Page manda projects={c.projectsData}
+  projects: ProjectCard[];
+
+  onRefresh: () => void;
+  refreshDisabled: boolean;
+};
+
+export default function ConcentratorsSidebar({
+  loadingProjects,
+  sampleView,
+  sampleViewLabel,
+  typesMenuOpen,
+  setTypesMenuOpen,
+  onChangeSampleView,
+  selectedProject,
+  onSelectProject,
+  projects,
+  onRefresh,
+  refreshDisabled,
+}: Props) {
+  const options = useMemo(
+    () =>
+      [
+        { key: "GENERAL", label: "General" },
+        { key: "LORA", label: "LoRa" },
+        { key: "LORAWAN", label: "LoRaWAN" },
+        { key: "GRANDES", label: "Grandes consumidores" },
+      ] as Array<{ key: SampleView; label: string }>,
+    []
+  );
+
+  return (
+    <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">{sampleViewLabel}</span>
+            {" • "}
+            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={onRefresh}
+          disabled={loadingProjects || refreshDisabled}
+          title="Actualizar"
+        >
+          <RefreshCcw size={14} />
+        </button>
+      </div>
+
+      {/* Tipos de tomas (dropdown) */}
+      <div className="mt-4 relative">
+        <button
+          type="button"
+          onClick={() => setTypesMenuOpen((v) => !v)}
+          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"
+        >
+          <span className="flex items-center gap-2">
+            Tipos de tomas
+            <span className="text-xs font-semibold text-gray-500">
+              ({sampleViewLabel})
+            </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">
+            {options.map((opt) => {
+              const active = sampleView === opt.key;
+              return (
+                <button
+                  key={opt.key}
+                  type="button"
+                  onClick={() => onChangeSampleView(opt.key)}
+                  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 && sampleView === "GENERAL" ? (
+          <div className="text-sm text-gray-500">Loading projects...</div>
+        ) : projects.length === 0 ? (
+          <div className="text-sm text-gray-500">
+            No projects available. Please contact your administrator.
+          </div>
+        ) : (
+          projects.map((p) => {
+            const active = p.name === selectedProject;
+
+            return (
+              <div
+                key={p.name}
+                onClick={() => onSelectProject(p.name)}
+                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">Concentradores</span>
+                    <span className="font-medium text-gray-800">
+                      {p.concentrators}
+                    </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) => {
+                      e.stopPropagation();
+                      onSelectProject(p.name);
+                    }}
+                  >
+                    {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>
+  );
+}

src/pages/concentrators/ConcentratorsTable.tsx

@@ -0,0 +1,86 @@
+// src/pages/concentrators/ConcentratorsTable.tsx
+import MaterialTable from "@material-table/core";
+import type { Concentrator } from "../../api/concentrators";
+
+type Props = {
+  isLoading: boolean;          // ✅ ahora se llama así (como en Page)
+  data: Concentrator[];
+  activeRowId?: string;
+  onRowClick: (row: Concentrator) => void;
+  emptyMessage: string;        // ✅ mensaje ya viene resuelto desde Page
+};
+
+export default function ConcentratorsTable({
+  isLoading,
+  data,
+  activeRowId,
+  onRowClick,
+  emptyMessage,
+}: Props) {
+  return (
+    <MaterialTable
+      title="Concentrators"
+      isLoading={isLoading}
+      columns={[
+        {
+          title: "Device Name",
+          field: "Device Name",
+          render: (rowData: any) => rowData["Device Name"] || "-",
+        },
+        {
+          title: "Device S/N",
+          field: "Device S/N",
+          render: (rowData: any) => rowData["Device S/N"] || "-",
+        },
+        {
+          title: "Device Status",
+          field: "Device Status",
+          render: (rowData: any) => (
+            <span
+              className={`px-3 py-1 rounded-full text-xs font-semibold border ${
+                rowData["Device Status"] === "ACTIVE"
+                  ? "text-blue-600 border-blue-600"
+                  : "text-red-600 border-red-600"
+              }`}
+            >
+              {rowData["Device Status"] || "-"}
+            </span>
+          ),
+        },
+        {
+          title: "Operator",
+          field: "Operator",
+          render: (rowData: any) => rowData["Operator"] || "-",
+        },
+        {
+          title: "Area Name",
+          field: "Area Name",
+          render: (rowData: any) => rowData["Area Name"] || "-",
+        },
+        {
+          title: "Installed Time",
+          field: "Installed Time",
+          type: "date",
+          render: (rowData: any) => rowData["Installed Time"] || "-",
+        },
+      ]}
+      data={data}
+      onRowClick={(_, rowData) => onRowClick(rowData as Concentrator)}
+      options={{
+        actionsColumnIndex: -1,
+        search: false,
+        paging: true,
+        sorting: true,
+        rowStyle: (rowData) => ({
+          backgroundColor:
+            activeRowId === (rowData as Concentrator).id
+              ? "#EEF2FF"
+              : "#FFFFFF",
+        }),
+      }}
+      localization={{
+        body: { emptyDataSourceMessage: emptyMessage },
+      }}
+    />
+  );
+}

src/pages/concentrators/useConcentrators.ts

@@ -0,0 +1,255 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  fetchConcentrators,
+  type Concentrator,
+} from "../../api/concentrators";
+import type { ProjectCard, SampleView } from "./ConcentratorsPage";
+
+type User = {
+  role: "SUPER_ADMIN" | "USER";
+  project?: string;
+};
+
+export function useConcentrators(currentUser: User) {
+  const [sampleView, setSampleView] = useState<SampleView>("GENERAL");
+
+  const [loadingProjects, setLoadingProjects] = useState(true);
+  const [loadingConcentrators, setLoadingConcentrators] = useState(true);
+
+  const [allProjects, setAllProjects] = useState<string[]>([]);
+  const [selectedProject, setSelectedProject] = useState("");
+
+  const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
+  const [filteredConcentrators, setFilteredConcentrators] = useState<
+    Concentrator[]
+  >([]);
+
+  const isGeneral = sampleView === "GENERAL";
+
+  const sampleViewLabel = useMemo(() => {
+    switch (sampleView) {
+      case "GENERAL":
+        return "General";
+      case "LORA":
+        return "LoRa";
+      case "LORAWAN":
+        return "LoRaWAN";
+      case "GRANDES":
+        return "Grandes consumidores";
+      default:
+        return "General";
+    }
+  }, [sampleView]);
+
+  const visibleProjects = useMemo(
+    () =>
+      currentUser.role === "SUPER_ADMIN"
+        ? allProjects
+        : currentUser.project
+        ? [currentUser.project]
+        : [],
+    [allProjects, currentUser.role, currentUser.project]
+  );
+
+  const loadConcentrators = async () => {
+    if (!isGeneral) return;
+
+    setLoadingConcentrators(true);
+    setLoadingProjects(true);
+
+    try {
+      const raw = await fetchConcentrators();
+
+      const normalized = raw.map((c: any) => {
+        const preferredName =
+          c["Device Alias"] ||
+          c["Device Label"] ||
+          c["Device Display Name"] ||
+          c.deviceName ||
+          c.name ||
+          c["Device Name"] ||
+          "";
+
+        return {
+          ...c,
+          "Device Name": preferredName,
+        };
+      });
+
+      const projectsArray = [
+        ...new Set(normalized.map((r: any) => r["Area Name"])),
+      ].filter(Boolean) as string[];
+
+      setAllProjects(projectsArray);
+      setConcentrators(normalized);
+
+      setSelectedProject((prev) => {
+        if (prev) return prev;
+        if (currentUser.role !== "SUPER_ADMIN" && currentUser.project) {
+          return currentUser.project;
+        }
+        return projectsArray[0] ?? "";
+      });
+    } catch (err) {
+      console.error("Error loading concentrators:", err);
+      setAllProjects([]);
+      setConcentrators([]);
+      setSelectedProject("");
+    } finally {
+      setLoadingConcentrators(false);
+      setLoadingProjects(false);
+    }
+  };
+
+  // init
+  useEffect(() => {
+    loadConcentrators();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // view changes
+  useEffect(() => {
+    if (isGeneral) {
+      loadConcentrators();
+    } else {
+      setLoadingProjects(false);
+      setLoadingConcentrators(false);
+      setSelectedProject("");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sampleView]);
+
+  // auto select single visible project
+  useEffect(() => {
+    if (!isGeneral) return;
+    if (!selectedProject && visibleProjects.length === 1) {
+      setSelectedProject(visibleProjects[0]);
+    }
+  }, [visibleProjects, selectedProject, isGeneral]);
+
+  // filter by project
+  useEffect(() => {
+    if (!isGeneral) {
+      setFilteredConcentrators([]);
+      return;
+    }
+
+    if (selectedProject) {
+      setFilteredConcentrators(
+        concentrators.filter((c) => c["Area Name"] === selectedProject)
+      );
+    } else {
+      setFilteredConcentrators(concentrators);
+    }
+  }, [selectedProject, concentrators, isGeneral]);
+
+  // sidebar cards (general)
+  const projectsDataGeneral: ProjectCard[] = useMemo(() => {
+    const counts = concentrators.reduce<Record<string, number>>((acc, c) => {
+      const area = c["Area Name"] ?? "SIN PROYECTO";
+      acc[area] = (acc[area] ?? 0) + 1;
+      return acc;
+    }, {});
+
+    const baseRegion = "Baja California";
+    const baseContact = "Operaciones";
+    const baseLastSync = "Hace 1 h";
+
+    return visibleProjects.map((name) => ({
+      name,
+      region: baseRegion,
+      projects: 1,
+      concentrators: counts[name] ?? 0,
+      activeAlerts: 0,
+      lastSync: baseLastSync,
+      contact: baseContact,
+      status: "ACTIVO",
+    }));
+  }, [concentrators, visibleProjects]);
+
+  // sidebar cards (mock)
+  const projectsDataMock: Record<Exclude<SampleView, "GENERAL">, ProjectCard[]> =
+    useMemo(
+      () => ({
+        LORA: [
+          {
+            name: "LoRa - Zona Centro",
+            region: "Baja California",
+            projects: 1,
+            concentrators: 12,
+            activeAlerts: 1,
+            lastSync: "Hace 15 min",
+            contact: "Operaciones",
+            status: "ACTIVO",
+          },
+          {
+            name: "LoRa - Zona Este",
+            region: "Baja California",
+            projects: 1,
+            concentrators: 8,
+            activeAlerts: 0,
+            lastSync: "Hace 40 min",
+            contact: "Operaciones",
+            status: "ACTIVO",
+          },
+        ],
+        LORAWAN: [
+          {
+            name: "LoRaWAN - Industrial",
+            region: "Baja California",
+            projects: 1,
+            concentrators: 5,
+            activeAlerts: 0,
+            lastSync: "Hace 1 h",
+            contact: "Operaciones",
+            status: "ACTIVO",
+          },
+        ],
+        GRANDES: [
+          {
+            name: "Grandes - Convenios",
+            region: "Baja California",
+            projects: 1,
+            concentrators: 3,
+            activeAlerts: 0,
+            lastSync: "Hace 2 h",
+            contact: "Operaciones",
+            status: "ACTIVO",
+          },
+        ],
+      }),
+      []
+    );
+
+  const projectsData: ProjectCard[] = useMemo(() => {
+    if (isGeneral) return projectsDataGeneral;
+    return projectsDataMock[sampleView as Exclude<SampleView, "GENERAL">];
+  }, [isGeneral, projectsDataGeneral, projectsDataMock, sampleView]);
+
+  return {
+    // view
+    sampleView,
+    setSampleView,
+    sampleViewLabel,
+    isGeneral,
+
+    // loading
+    loadingProjects,
+    loadingConcentrators,
+
+    // projects
+    allProjects,
+    visibleProjects,
+    projectsData,
+    selectedProject,
+    setSelectedProject,
+
+    // data
+    concentrators,
+    setConcentrators,
+    filteredConcentrators,
+
+    // actions
+    loadConcentrators,
+  };
+}