mesas activas

app/Components/ActivosMantenimiento/MesasDisponibles.tsx

@@ -1,30 +1,53 @@
-export default async function MesasDisponibles() {
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function MesasDisponibles() {
+  const [mesas, setMesas] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    obtenerMesas();
+  }, []);
+
+  const obtenerMesas = async () => {
+    try {
+      const response = await axios.get("http://localhost:5000/mesa/all");
+      setMesas(response.data);
+    } catch (error) {
+      console.error("Error al obtener mesas:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <section className="containerSection">
       <div>
-        <table>
-          <thead>
-            <tr style={{ fontSize: "15px" }}>
-              <th>Mesa</th>
-              <th>Activo</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>
+        {loading ? (
+          <p>Cargando mesas...</p>
+        ) : (
+          <table>
+            <thead>
+              <tr style={{ fontSize: "15px" }}>
+                <th>Mesa</th>
+                <th>Activo</th>
               </tr>
-            ))} */}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+               {mesas.map((mesa) => (
+    <tr key={mesa.mesas}>
+      <td>Mesa {mesa.mesas}</td>
+      <td className={mesa.activo ? "activo" : "inactivo"}>
+        {mesa.activo ? "Sí" : "No"}
+      </td>
+    </tr>
+  ))}
+            </tbody>
+          </table>
+        )}
       </div>
     </section>
   );
 }
-//IO