added filter

app/(private)/Monitor/MachineTable.tsx

@@ -3,48 +3,61 @@
 import { useEffect, useState } from "react";
 import styles from "./Page.module.css";
 
+type AreaUbicacion = {
+  id_area_ubicacion: number;
+  area: string;
+};
+
 type Equipo = {
   id_equipo: number;
   nombre_equipo: string;
   ubicacion: string;
-  activo: {
-    data: number[];
-  };
-  plataforma: {
-    nombre: string;
-  };
-  areaUbicacion: {
-    area: string;
-  };
+  activo: { data: number[] };
+  plataforma: { nombre: string };
+  areaUbicacion: { area: string };
 };
 
 export default function MachineTable() {
   const [machines, setMachines] = useState<Equipo[]>([]);
+  const [areas, setAreas] = useState<AreaUbicacion[]>([]);
+  const [selectedArea, setSelectedArea] = useState("Todo");
   const [loading, setLoading] = useState(true);
 
   const fetchMachines = async () => {
-    try {
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/equipo/disable`,
-        { cache: "no-store" },
-      );
-      const data = await res.json();
-      setMachines(data);
-    } catch (error) {
-      console.error("Error al cargar equipos", error);
-    } finally {
-      setLoading(false);
-    }
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/equipo/disable`,
+      { cache: "no-store" },
+    );
+    setMachines(await res.json());
+    setLoading(false);
+  };
+
+  const fetchAreas = async () => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/area-ubicacion`,
+      { cache: "no-store" },
+    );
+    setAreas(await res.json());
   };
 
   useEffect(() => {
     fetchMachines();
+    fetchAreas();
   }, []);
 
   if (loading) {
     return <p>Cargando equipos...</p>;
   }
 
+  const filteredMachines =
+    selectedArea === "Todo"
+      ? machines
+      : machines.filter(
+          (machine) => machine.areaUbicacion.area === selectedArea,
+        );
+
+  if (loading) return <p>Cargando equipos...</p>;
+
   return (
     <div className={styles.tableContainer}>
       <table className={styles.machineTable}>
@@ -56,24 +69,40 @@ export default function MachineTable() {
             <th>Área</th>
             <th>Disponible</th>
           </tr>
+          <tr style={{ position: "relative", zIndex: "0" }}>
+            <th />
+            <th />
+            <th />
+            <th>
+              <select
+                style={{ minWidth: "50px" }}
+                value={selectedArea}
+                onChange={(e) => setSelectedArea(e.target.value)}
+              >
+                <option value="Todo">Todo</option>
+                {areas.map((area) => (
+                  <option key={area.id_area_ubicacion} value={area.area}>
+                    {area.area}
+                  </option>
+                ))}
+              </select>
+            </th>
+            <th />
+          </tr>
         </thead>
 
         <tbody>
-          {machines.map((machine) => {
-            const disponible = machine.activo.data[0] === 1;
-
-            return (
-              <tr key={machine.id_equipo}>
-                <td>{machine.ubicacion}</td>
-                <td>{machine.nombre_equipo}</td>
-                <td className={styles[machine.plataforma.nombre]}>
-                  {machine.plataforma.nombre}
-                </td>
-                <td>{machine.areaUbicacion.area}</td>
-                <td>{disponible ? "Sí" : "No"}</td>
-              </tr>
-            );
-          })}
+          {filteredMachines.map((machine) => (
+            <tr key={machine.id_equipo}>
+              <td>{machine.ubicacion}</td>
+              <td>{machine.nombre_equipo}</td>
+              <td className={styles[machine.plataforma.nombre]}>
+                {machine.plataforma.nombre}
+              </td>
+              <td>{machine.areaUbicacion.area}</td>
+              <td>{machine.activo.data[0] === 1 ? "Sí" : "No"}</td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>

app/(private)/Monitor/MachineTableActive.tsx

@@ -3,77 +3,102 @@
 import { useEffect, useState } from "react";
 import styles from "./Page.module.css";
 
+type AreaUbicacion = {
+  id_area_ubicacion: number;
+  area: string;
+};
+
 type Equipo = {
   id_equipo: number;
   nombre_equipo: string;
   ubicacion: string;
-  activo: {
-    data: number[];
-  };
-  plataforma: {
-    nombre: string;
-  };
-  areaUbicacion: {
-    area: string;
-  };
+  activo: { data: number[] };
+  plataforma: { nombre: string };
+  areaUbicacion: { area: string };
 };
 
 export default function MachineTableActive() {
   const [machines, setMachines] = useState<Equipo[]>([]);
+  const [areas, setAreas] = useState<AreaUbicacion[]>([]);
+  const [selectedArea, setSelectedArea] = useState("Todo");
   const [loading, setLoading] = useState(true);
 
   const fetchMachines = async () => {
-    try {
-      const res = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}/equipo/active`,
-        { cache: "no-store" },
-      );
-      const data = await res.json();
-      setMachines(data);
-    } catch (error) {
-      console.error("Error al cargar equipos", error);
-    } finally {
-      setLoading(false);
-    }
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/equipo/active`,
+      { cache: "no-store" },
+    );
+    setMachines(await res.json());
+    setLoading(false);
+  };
+
+  const fetchAreas = async () => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/area-ubicacion`,
+      { cache: "no-store" },
+    );
+    setAreas(await res.json());
   };
 
   useEffect(() => {
     fetchMachines();
+    fetchAreas();
   }, []);
 
-  if (loading) {
-    return <p>Cargando equipos...</p>;
-  }
+  const filteredMachines =
+    selectedArea === "Todo"
+      ? machines
+      : machines.filter(
+          (machine) => machine.areaUbicacion.area === selectedArea,
+        );
+
+  if (loading) return <p>Cargando equipos...</p>;
 
   return (
     <div className={styles.tableContainer}>
       <table className={styles.machineTable}>
         <thead>
-          <tr style={{ fontSize: "15px" }}>
+          <tr>
             <th>Ubicación</th>
             <th>Nombre Equipo</th>
             <th>Plataforma</th>
             <th>Área</th>
             <th>Disponible</th>
           </tr>
+          <tr style={{position:"relative", zIndex:"0"}}>
+            <th />
+            <th />
+            <th />
+            <th>
+              <select
+                style={{ minWidth: "50px" }}
+                value={selectedArea}
+                onChange={(e) => setSelectedArea(e.target.value)}
+              >
+                <option value="Todo">Todo</option>
+                {areas.map((area) => (
+                  <option key={area.id_area_ubicacion} value={area.area}>
+                    {area.area}
+                  </option>
+                ))}
+              </select>
+            </th>
+            <th />
+          </tr>
         </thead>
 
         <tbody>
-          {machines.map((machine) => {
-            const disponible = machine.activo.data[0] === 1;
-
-            return (
-              <tr key={machine.id_equipo}>
-                <td>{machine.ubicacion}</td>
-                <td>{machine.nombre_equipo}</td>
-                <td className={styles[machine.plataforma.nombre]}>
-                  {machine.plataforma.nombre}
-                </td>
-                <td>{machine.areaUbicacion.area}</td>
-                <td>{disponible ? "Sí" : "No"}</td>
-              </tr>
-            );
-          })}
+          {filteredMachines.map((machine) => (
+            <tr key={machine.id_equipo}>
+              <td>{machine.ubicacion}</td>
+              <td>{machine.nombre_equipo}</td>
+              <td className={styles[machine.plataforma.nombre]}>
+                {machine.plataforma.nombre}
+              </td>
+              <td>{machine.areaUbicacion.area}</td>
+              <td>{machine.activo.data[0] === 1 ? "Sí" : "No"}</td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>