added show table in monitor

app/(private)/Monitor/TableTable.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import styles from "./Page.module.css";
+import axios from "axios";
+
+type Mesa = {
+  id_mesa: number;
+  ocupado: number;
+};
+
+export default function TableTable() {
+  const [mesas, setMesas] = useState<Mesa[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const fetchMesas = async () => {
+    try {
+      const res = await axios.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/mesa/uso`
+      );
+
+      setMesas(res.data);
+    } catch (error) {
+      console.error("Error cargando mesas:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchMesas();
+  }, []);
+
+  if (loading) {
+    return <p>Cargando mesas...</p>;
+  }
+
+  return (
+    <div className={styles.tableContainer}>
+      <table className={styles.machineTable}>
+        <thead>
+          <tr>
+            <th>ID Mesa</th>
+            <th>Disponible</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {mesas.map((mesa) => (
+            <tr key={mesa.id_mesa} className={!mesa.ocupado ? '' : styles.ocupado}>
+              <td>{mesa.id_mesa}</td>
+              <td>
+                {mesa.ocupado === 1 ? "No" : "Si"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

app/(private)/Monitor/page.tsx

@@ -4,6 +4,7 @@ import styles from "./Page.module.css";
 import MachineTableActive from "./MachineTableActive";
 import DSC from "./DSC";
 import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable";
+import TableTable from "./TableTable";
 
 export default async function Page(props: {
   searchParams?: Promise<{ numAcount: string; key: string }>;
@@ -14,7 +15,7 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      <h2 className="title">MONITOR DE MÁQUINAS</h2>
+      <h2 className="title">MONITOR</h2>
 
       <div className={styles.actions}>
         <button className={styles.resetButton}>Actualizar información</button>
@@ -23,8 +24,8 @@ export default async function Page(props: {
         defaultView={key}
         options={[
           {
-            key: "active",
-            label: "Disponibles",
+            key: "Equipos",
+            label: "Equipos",
             content: (
               <>
                 <MachineTableActive />
@@ -32,11 +33,11 @@ export default async function Page(props: {
             ),
           },
           {
-            key: "disable",
-            label: "No Disponibles",
+            key: "Mesas",
+            label: "Mesas",
             content: (
               <>
-                <MachineTable />
+                <TableTable />
               </>
             ),
           },