From b273003366e1b6295d095da63bad16a62fce349f Mon Sep 17 00:00:00 2001
From: Esteban <exteban16@gmail.com>
Date: Mon, 2 Feb 2026 19:01:02 -0600
Subject: [PATCH] Meter tyoe logic for projects in concentrators page

---
 src/pages/concentrators/ConcentratorsPage.tsx | 26 +++++++--
 .../concentrators/ConcentratorsSidebar.tsx    | 57 +++++++++++-------
 src/pages/concentrators/useConcentrators.ts   | 58 ++++++++++++++++++-
 3 files changed, 111 insertions(+), 30 deletions(-)

diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx
index e61021f..ff85954 100644
--- a/src/pages/concentrators/ConcentratorsPage.tsx
+++ b/src/pages/concentrators/ConcentratorsPage.tsx
@@ -170,6 +170,15 @@ export default function ConcentratorsPage() {
           projects={c.projectsData}
           onRefresh={c.loadConcentrators}
           refreshDisabled={c.loadingProjects}
+          meterTypes={c.meterTypes}
+          selectedMeterTypeId={c.selectedMeterTypeId}
+          onSelectMeterTypeId={(id: string) => {
+            c.setSelectedMeterTypeId(id);
+            c.setSelectedProject("");
+            setActiveConcentrator(null);
+            setSearch("");
+          }}
+          loadingMeterTypes={c.loadingMeterTypes}
         />
       </aside>
 
@@ -181,7 +190,9 @@ export default function ConcentratorsPage() {
           <div>
             <h1 className="text-2xl font-bold">Concentrator Management</h1>
             <p className="text-sm text-blue-100">
-              {c.selectedProject
+              {c.projectsData.length === 0 && c.selectedMeterTypeId
+                ? `No hay proyectos disponibles con el filtro seleccionado`
+                : c.selectedProject
                 ? `Proyecto: ${c.selectedProject} • Tipo: ${c.sampleViewLabel}`
                 : "Selecciona un proyecto desde el panel izquierdo"}
             </p>
@@ -190,7 +201,7 @@ export default function ConcentratorsPage() {
           <div className="flex gap-3">
             <button
               onClick={openCreateModal}
-              disabled={c.allProjects.length === 0}
+              disabled={c.allProjects.length === 0 || c.projectsData.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
@@ -214,6 +225,7 @@ export default function ConcentratorsPage() {
 
             <button
               onClick={c.loadConcentrators}
+              disabled={c.projectsData.length === 0}
               className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg disabled:opacity-60"
             >
               <RefreshCcw size={16} /> Actualizar
@@ -222,11 +234,11 @@ export default function ConcentratorsPage() {
         </div>
 
         <input
-          className="bg-white rounded-lg shadow px-4 py-2 text-sm"
+          className="bg-white rounded-lg shadow px-4 py-2 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
           placeholder="Buscar concentrador..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          disabled={!c.selectedProject}
+          disabled={!c.selectedProject || c.projectsData.length === 0}
         />
 
         <div className={!c.selectedProject ? "opacity-60 pointer-events-none" : ""}>
@@ -236,7 +248,11 @@ export default function ConcentratorsPage() {
             activeRowId={activeConcentrator?.id}
             onRowClick={(row) => setActiveConcentrator(row)}
             emptyMessage={
-              !c.selectedProject
+              c.projectsData.length === 0 && c.selectedMeterTypeId
+                ? `No hay proyectos con el tipo de toma seleccionado (${
+                    c.meterTypes.find((mt) => mt.id === c.selectedMeterTypeId)?.name ?? "desconocido"
+                  }) que tengan concentradores.`
+                : !c.selectedProject
                 ? "Selecciona un proyecto para ver los concentradores."
                 : c.loadingConcentrators
                 ? "Cargando concentradores..."
diff --git a/src/pages/concentrators/ConcentratorsSidebar.tsx b/src/pages/concentrators/ConcentratorsSidebar.tsx
index 694f256..e956e2d 100644
--- a/src/pages/concentrators/ConcentratorsSidebar.tsx
+++ b/src/pages/concentrators/ConcentratorsSidebar.tsx
@@ -1,7 +1,8 @@
 // src/pages/concentrators/ConcentratorsSidebar.tsx
 import { useMemo } from "react";
-import { ChevronDown, Check, RefreshCcw } from "lucide-react";
+import { Check, RefreshCcw } from "lucide-react";
 import type { ProjectCard, SampleView } from "./ConcentratorsPage";
+import type { MeterType } from "../../api/meterTypes";
 
 type Props = {
   loadingProjects: boolean;
@@ -23,6 +24,11 @@ type Props = {
 
   onRefresh: () => void;
   refreshDisabled: boolean;
+
+  meterTypes: MeterType[];
+  selectedMeterTypeId: string;
+  onSelectMeterTypeId: (id: string) => void;
+  loadingMeterTypes: boolean;
 };
 
 export default function ConcentratorsSidebar({
@@ -30,13 +36,16 @@ export default function ConcentratorsSidebar({
   sampleView,
   sampleViewLabel,
   typesMenuOpen,
-  setTypesMenuOpen,
   onChangeSampleView,
   selectedProject,
   onSelectProject,
   projects,
   onRefresh,
   refreshDisabled,
+  meterTypes,
+  selectedMeterTypeId,
+  onSelectMeterTypeId,
+  loadingMeterTypes,
 }: Props) {
   const options = useMemo(
     () =>
@@ -76,24 +85,7 @@ export default function ConcentratorsSidebar({
         </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">
@@ -124,15 +116,36 @@ export default function ConcentratorsSidebar({
         )}
       </div>
 
+      <div className="mt-3">
+        <label className="block text-xs font-semibold text-gray-700 mb-1.5">
+          Filtrar por Tipo de Toma
+        </label>
+        <select
+          value={selectedMeterTypeId}
+          onChange={(e) => onSelectMeterTypeId(e.target.value)}
+          disabled={loadingMeterTypes}
+          className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          <option value="">Todos los tipos de toma</option>
+          {meterTypes.map((type) => (
+            <option key={type.id} value={type.id}>
+              {type.name}
+            </option>
+          ))}
+        </select>
+      </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">
-            {sampleView === "GENERAL" 
-              ? "No projects available. Please contact your administrator."
-              : `No projects with ${sampleViewLabel} concentrators found.`
+            {selectedMeterTypeId 
+              ? `No hay proyectos con el tipo de toma seleccionado y concentradores ${sampleViewLabel}.`
+              : sampleView === "GENERAL" 
+              ? "No hay proyectos con concentradores disponibles."
+              : `No hay proyectos con concentradores ${sampleViewLabel}.`
             }
           </div>
         ) : (
diff --git a/src/pages/concentrators/useConcentrators.ts b/src/pages/concentrators/useConcentrators.ts
index a138c48..a6775fe 100644
--- a/src/pages/concentrators/useConcentrators.ts
+++ b/src/pages/concentrators/useConcentrators.ts
@@ -5,6 +5,7 @@ import {
   type ConcentratorType,
 } from "../../api/concentrators";
 import { fetchProjects, type Project } from "../../api/projects";
+import { fetchMeterTypes, type MeterType } from "../../api/meterTypes";
 import type { ProjectCard, SampleView } from "./ConcentratorsPage";
 
 type User = {
@@ -17,10 +18,14 @@ export function useConcentrators(currentUser: User) {
 
   const [loadingProjects, setLoadingProjects] = useState(true);
   const [loadingConcentrators, setLoadingConcentrators] = useState(true);
+  const [loadingMeterTypes, setLoadingMeterTypes] = useState(true);
 
   const [projects, setProjects] = useState<Project[]>([]);
   const [allProjects, setAllProjects] = useState<string[]>([]);
   const [selectedProject, setSelectedProject] = useState("");
+  
+  const [meterTypes, setMeterTypes] = useState<MeterType[]>([]);
+  const [selectedMeterTypeId, setSelectedMeterTypeId] = useState<string>("");
 
   const [concentrators, setConcentrators] = useState<Concentrator[]>([]);
   const [filteredConcentrators, setFilteredConcentrators] = useState<
@@ -54,6 +59,19 @@ export function useConcentrators(currentUser: User) {
     [allProjects, currentUser.role, currentUser.project]
   );
 
+  const loadMeterTypes = async () => {
+    setLoadingMeterTypes(true);
+    try {
+      const meterTypesData = await fetchMeterTypes();
+      setMeterTypes(meterTypesData);
+    } catch (err) {
+      console.error("Error loading meter types:", err);
+      setMeterTypes([]);
+    } finally {
+      setLoadingMeterTypes(false);
+    }
+  };
+
   const loadProjects = async () => {
     setLoadingProjects(true);
     try {
@@ -92,8 +110,8 @@ export function useConcentrators(currentUser: User) {
     }
   };
 
-  // init - load projects and concentrators
   useEffect(() => {
+    loadMeterTypes();
     loadProjects();
     loadConcentrators();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,7 +181,21 @@ export function useConcentrators(currentUser: User) {
     const baseContact = "Operaciones";
     const baseLastSync = "Hace 1 h";
 
-    return visibleProjects.map((projectId) => ({
+    let filteredProjects = visibleProjects;
+
+    filteredProjects = filteredProjects.filter((projectId) => {
+      const count = counts[projectId] ?? 0;
+      return count > 0;
+    });
+
+    if (selectedMeterTypeId) {
+      filteredProjects = filteredProjects.filter((projectId) => {
+        const project = projects.find((p) => p.id === projectId);
+        return project?.meterTypeId === selectedMeterTypeId;
+      });
+    }
+
+    return filteredProjects.map((projectId) => ({
       id: projectId,
       name: projectNameMap[projectId] ?? projectId,
       region: baseRegion,
@@ -174,12 +206,27 @@ export function useConcentrators(currentUser: User) {
       contact: baseContact,
       status: "ACTIVO" as const,
     }));
-  }, [concentrators, visibleProjects, projects, isGeneral, sampleView]);
+  }, [concentrators, visibleProjects, projects, isGeneral, sampleView, selectedMeterTypeId]);
 
   const projectsData: ProjectCard[] = useMemo(() => {
     return projectsDataGeneral;
   }, [projectsDataGeneral]);
 
+  useEffect(() => {
+    if (projectsData.length > 0) {
+      const firstProject = projectsData[0];
+      const currentProjectExists = projectsData.find((p) => p.id === selectedProject);
+
+      if (!selectedProject || !currentProjectExists) {
+        setSelectedProject(firstProject.id);
+      }
+    } else {
+      if (selectedProject) {
+        setSelectedProject("");
+      }
+    }
+  }, [projectsData]);
+
   return {
     // view
     sampleView,
@@ -190,6 +237,7 @@ export function useConcentrators(currentUser: User) {
     // loading
     loadingProjects,
     loadingConcentrators,
+    loadingMeterTypes,
 
     // projects
     allProjects,
@@ -198,6 +246,10 @@ export function useConcentrators(currentUser: User) {
     selectedProject,
     setSelectedProject,
 
+    meterTypes,
+    selectedMeterTypeId,
+    setSelectedMeterTypeId,
+
     // data
     concentrators,
     setConcentrators,