added monitor

app/(private)/Monitor/MachineTable.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "./Page.module.css";
+
+type Equipo = {
+  id_equipo: number;
+  nombre_equipo: string;
+  ubicacion: string;
+  activo: {
+    data: number[];
+  };
+  plataforma: {
+    nombre: string;
+  };
+  areaUbicacion: {
+    area: string;
+  };
+};
+
+export default function MachineTable() {
+  const [machines, setMachines] = useState<Equipo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchMachines = async () => {
+    try {
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipo`,
+        { cache: "no-store" }
+      );
+      const data = await res.json();
+      setMachines(data);
+    } catch (error) {
+      console.error("Error al cargar equipos", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMachines();
+  }, []);
+
+  if (loading) {
+    return <p>Cargando equipos...</p>;
+  }
+
+  return (
+    <div className={styles.tableContainer}>
+      <table className={styles.machineTable}>
+        <thead>
+          <tr style={{ fontSize: "15px" }}>
+            <th>Ubicación</th>
+            <th>Nombre Equipo</th>
+            <th>Plataforma</th>
+            <th>Área</th>
+            <th>Disponible</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>{machine.plataforma.nombre}</td>
+                <td>{machine.areaUbicacion.area}</td>
+                <td
+                >
+                  {disponible ? "Sí" : "No"}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

app/(private)/Monitor/page.tsx

@@ -1,75 +1,23 @@
+import MachineTable from "./MachineTable";
 import styles from "./Page.module.css";
 
 export default async function Page(props: {
-  searchParams?: Promise<{
-    numAcount: string;
-  }>;
+  searchParams?: Promise<{ numAcount: string }>;
 }) {
   const params = await props.searchParams;
-  const numAcount = params?.numAcount ? params.numAcount : null;
+  const numAcount = params?.numAcount ?? null;
 
   return (
     <section className="containerSection">
-      <h2 className="title"> MONITOR DE MÁQUINAS DISPONIBLES </h2>
+      <h2 className="title">MONITOR DE MÁQUINAS DISPONIBLES</h2>
 
       <div className={styles.actions}>
-        <button className={styles.resetButton}>Actualizar informacion</button>
+        <button className={styles.resetButton}>
+          Actualizar información
+        </button>
       </div>
 
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr style={{fontSize:"15px"}}>
-              <th>Ubicación</th>
-              <th>Nombre Equipo</th>
-              <th>Plataforma</th>
-              <th>Área</th>
-              <th>Disponible</th>
-            </tr>
-            <tr>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>pcnet1</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>mostrar todos</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>windows</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>mostrar Todo</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>si</option>
-                </select>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {/* {machines.map((machine, index) => (
-              <tr key={index}>
-                <td>{machine.ubicacion}</td>
-                <td>{machine.nombre}</td>
-                <td>{machine.plataforma}</td>
-                <td>{machine.area}</td>
-                <td className={machine.disponible ? "disponible" : ""}>
-                  {machine.disponible ? "si" : "no"}
-                </td>
-              </tr>
-            ))} */}
-          </tbody>
-        </table>
-      </div>
+      <MachineTable />
     </section>
   );
 }
-//IO

app/Components/CheckBoxMesa.tsx

@@ -9,7 +9,7 @@ export default function CheckBoxMesa({
 }: {
   numAcount?: string | null;
 }) {
-  const [modo, setModo] = useState<"Equipo" | "Cuenta" | null>(null);
+  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>(null);
 
   return (
     <>
@@ -18,11 +18,11 @@ export default function CheckBoxMesa({
           <input
             type="radio"
             name="modo"
-            checked={modo === "Equipo"}
-            onChange={() => setModo("Equipo")}
+            checked={modo === "Mesa"}
+            onChange={() => setModo("Mesa")}
           />
           <span className="radio-ui"></span>
-          <span className="radio-text">Equipo</span>
+          <span className="radio-text">Mesa</span>
         </label>
 
         <label className="radio-card">
@@ -38,7 +38,7 @@ export default function CheckBoxMesa({
       </div>
 
       {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
-      {modo === "Equipo" && <SearchBoxEquipo />}
+      {modo === "Mesa" && <SearchBoxEquipo />}
     </>
   );
 }