added filter

app/(private)/Monitor/MachineTableActive.tsx

@@ -12,11 +12,12 @@ type Equipo = {
   id_equipo: number;
   nombre_equipo: string;
   ubicacion: string;
-  activo: { data: number[] };
-  plataforma: { nombre: string };
-  areaUbicacion: { area: string };
+  plataforma: string;
+  area: string;
+  ocupado:boolean;
 };
 
+
 export default function MachineTableActive() {
   const [machines, setMachines] = useState<Equipo[]>([]);
   const [areas, setAreas] = useState<AreaUbicacion[]>([]);
@@ -49,7 +50,7 @@ export default function MachineTableActive() {
     selectedArea === "Todo"
       ? machines
       : machines.filter(
-          (machine) => machine.areaUbicacion.area === selectedArea,
+          (machine) => machine.area === selectedArea,
         );
 
   if (loading) return <p>Cargando equipos...</p>;
@@ -89,14 +90,14 @@ export default function MachineTableActive() {
 
         <tbody>
           {filteredMachines.map((machine) => (
-            <tr key={machine.id_equipo}>
+            <tr key={machine.id_equipo}  className={!machine.ocupado ? '':styles.ocupado}>
               <td>{machine.ubicacion}</td>
               <td>{machine.nombre_equipo}</td>
-              <td className={styles[machine.plataforma.nombre]}>
-                {machine.plataforma.nombre}
+              <td className={styles[machine.plataforma]}>
+                {machine.plataforma}
               </td>
-              <td>{machine.areaUbicacion.area}</td>
-              <td>{machine.activo.data[0] === 1 ? "Sí" : "No"}</td>
+              <td>{machine.area}</td>
+              <td>{!machine.ocupado ? "Sí" : "No"}</td>
             </tr>
           ))}
         </tbody>

app/(private)/Monitor/Page.module.css

@@ -17,6 +17,7 @@
 }
 
 .ocupado {
+  background-color: rgb(173, 233, 253);
   color: red;
   font-weight: bold;
 }