help carlos

app/Components/ActivosMantenimiento/Equipos.tsx

@@ -9,7 +9,7 @@ function Equipos() {
   const [mensaje, setMensaje] = useState("");
 
   useEffect(() => {
-    fetch("http://localhost:3000/equipo")
+    fetch("http://localhost:5000/equipo")
       .then((res) => res.json())
       .then((data) => setEquipos(data))
       .catch(() => setMensaje("Error al cargar equipos"));

app/Components/ActivosMantenimiento/MesasDisponibles.tsx

@@ -3,9 +3,9 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 
-interface Mesa{
-    mesas:string,
-    activo:boolean,
+interface Mesa {
+  idMesa: number;
+  activo: boolean;
 }
 
 export default function MesasDisponibles() {
@@ -18,7 +18,7 @@ export default function MesasDisponibles() {
 
   const obtenerMesas = async () => {
     try {
-      const response = await axios.get("http://localhost:5000/mesa/all");
+      const response = await axios.get("http://localhost:5000/mesa");
       setMesas(response.data);
     } catch (error) {
       console.error("Error al obtener mesas:", error);
@@ -29,7 +29,13 @@ export default function MesasDisponibles() {
 
   return (
     <section className="containerSection">
-      <div>
+      <div
+        style={{
+          overflow: "auto",
+          height: "430px",
+          scrollbarColor: "#2563eb white",
+        }}
+      >
         {loading ? (
           <p>Cargando mesas...</p>
         ) : (
@@ -40,19 +46,16 @@ export default function MesasDisponibles() {
                 <th>Activo</th>
               </tr>
             </thead>
-            <tbody>{mesas && (
-
-              
-              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>
+              {mesas &&
+                mesas.map((Mesa, index) => (
+                  <tr key={index}>
+                    <td>Mesa {Mesa.idMesa}</td>
+                    <td className={Mesa.activo ? "activo" : "inactivo"}>
+                      {Mesa.activo ? "Sí" : "No"}
+                    </td>
+                  </tr>
+                ))}
             </tbody>
           </table>
         )}

app/Components/Equipos/tableequipos.tsx

@@ -27,27 +27,35 @@ export default function TableEquipos() {
   }
 
   return (
-    <table style={{ width: "100%", borderCollapse: "collapse" }}>
-      <thead>
-        <tr>
-          <th>Ubicación</th>
-          <th>Nombre</th>
-          <th>Plataforma</th>
-          <th>Área</th>
-          <th>Activo</th>
-        </tr>
-      </thead>
-      <tbody>
-        {equipos.map((eq) => (
-          <tr key={eq.id_equipo}>
-            <td>{eq.ubicacion}</td>
-            <td>{eq.nombre_equipo}</td>
-            <td>{eq.plataforma?.nombre || eq.id_plataforma}</td>
-            <td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
-            <td>{eq.activo ? "Sí" : "No"}</td>
+    <div
+      style={{
+        overflow: "auto",
+        height: "430px",
+        scrollbarColor: "#2563eb white",
+      }}
+    >
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <thead>
+          <tr>
+            <th>Ubicación</th>
+            <th>Nombre</th>
+            <th>Plataforma</th>
+            <th>Área</th>
+            <th>Activo</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {equipos.map((eq) => (
+            <tr key={eq.id_equipo}>
+              <td>{eq.ubicacion}</td>
+              <td>{eq.nombre_equipo}</td>
+              <td>{eq.plataforma?.nombre || eq.id_plataforma}</td>
+              <td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
+              <td>{eq.activo ? "Sí" : "No"}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }