From 31eacf380f25c4f95e9cb48f943499cf0ca634a2 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Wed, 21 Jan 2026 17:01:44 -0600
Subject: [PATCH] mostrar equipos

---
 .../ActivosMantenimiento/Equipos.tsx          |  61 +++++-----
 .../ActivosMantenimiento/MesasDisponibles.tsx |  29 +++--
 app/Components/Equipos/tableequipos.tsx       | 107 ++++++++----------
 tsconfig.json                                 |   2 +-
 4 files changed, 100 insertions(+), 99 deletions(-)

diff --git a/app/Components/ActivosMantenimiento/Equipos.tsx b/app/Components/ActivosMantenimiento/Equipos.tsx
index 53aa0e7..a3c8eff 100644
--- a/app/Components/ActivosMantenimiento/Equipos.tsx
+++ b/app/Components/ActivosMantenimiento/Equipos.tsx
@@ -1,67 +1,66 @@
 "use client";
-import { useState } from "react";
+
+import { useEffect, useState } from "react";
 
 function Equipos() {
   const [cuenta, setCuenta] = useState("");
-  const [tiempo, setTiempo] = useState("");
+  const [equipoId, setEquipoId] = useState("");
+  const [equipos, setEquipos] = useState<any[]>([]);
   const [mensaje, setMensaje] = useState("");
 
+  useEffect(() => {
+    fetch("http://localhost:3000/equipo")
+      .then((res) => res.json())
+      .then((data) => setEquipos(data))
+      .catch(() => setMensaje("Error al cargar equipos"));
+  }, []);
+
   const handleBuscar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!cuenta) {
-      setMensaje("Ingresa un número de cuenta antes de buscar");
+      setMensaje("Ingresa un número de cuenta");
       return;
     }
-    setMensaje(`Buscando información del No. de cuenta: ${cuenta}`);
+    setMensaje(`Buscando cuenta: ${cuenta}`);
   };
 
   const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (!tiempo) {
-      setMensaje("Selecciona un equipo antes de asignar");
+    if (!equipoId) {
+      setMensaje("Selecciona un equipo");
       return;
     }
-    setMensaje(`Equipo asignado con tiempo: ${tiempo} minutos`);
+    setMensaje(`Equipo ${equipoId} asignado`);
   };
 
   return (
     <div className="containerForm">
-      {/* Formulario Buscar */}
+      {/* Buscar */}
       <form onSubmit={handleBuscar} className="groupInput">
-        <label className="label">No. de cuenta:</label>
+        <label>No. de cuenta:</label>
         <input
           type="text"
           value={cuenta}
           onChange={(e) => setCuenta(e.target.value)}
-          placeholder="Ingresa el número de cuenta"
         />
-        <button className="button buttonSearch" type="submit">
-          Buscar
-        </button>
+        <button type="submit">Buscar</button>
       </form>
 
-      {/* Formulario Asignar */}
-      <form
-        onSubmit={handleAsignar}
-        className="groupInput"
-        style={{ marginTop: "20px" }}
-      >
-        <label className="label">Equipos disponibles:</label>
-        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+      {/* Asignar */}
+      <form onSubmit={handleAsignar} className="groupInput">
+        <label>Equipos disponibles:</label>
+        <select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
           <option value="">-- Selecciona un equipo --</option>
-          <option value="15">1</option>
-          <option value="30">2</option>
-          <option value="45">3</option>
-          <option value="60">4</option>
-          <option value="90">5</option>
-          <option value="120">6</option>
+          {equipos.map((eq) => (
+            <option key={eq.id_equipo} value={eq.id_equipo}>
+              {eq.nombre_equipo} - {eq.ubicacion}
+            </option>
+          ))}
         </select>
-        <button className="button buttonSearch" type="submit">
-          Asignar
-        </button>
+        <button type="submit">Asignar</button>
       </form>
 
-      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
+      {mensaje && <p>{mensaje}</p>}
     </div>
   );
 }
diff --git a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
index a4f041c..b20d1e4 100644
--- a/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
+++ b/app/Components/ActivosMantenimiento/MesasDisponibles.tsx
@@ -3,8 +3,13 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
 
+interface Mesa{
+    mesas:string,
+    activo:boolean,
+}
+
 export default function MesasDisponibles() {
-  const [mesas, setMesas] = useState([]);
+  const [mesas, setMesas] = useState<Mesa[]>();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -35,15 +40,19 @@ export default function MesasDisponibles() {
                 <th>Activo</th>
               </tr>
             </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>{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>
           </table>
         )}
diff --git a/app/Components/Equipos/tableequipos.tsx b/app/Components/Equipos/tableequipos.tsx
index a5811ce..70b0c95 100644
--- a/app/Components/Equipos/tableequipos.tsx
+++ b/app/Components/Equipos/tableequipos.tsx
@@ -1,60 +1,53 @@
-export default async function TableEquipos() {
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function TableEquipos() {
+  const [equipos, setEquipos] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    console.log("LLAMANDO API EQUIPO");
+
+    fetch("http://localhost:5000/equipo")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log("EQUIPOS:", data);
+        setEquipos(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("ERROR API:", err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <p>Cargando equipos...</p>;
+  }
+
   return (
-    <section className="containerSection">
-      <div>
-        <table>
-          <thead>
-            <tr style={{ fontSize: "15px" }}>
-              <th>Ubicación</th>
-              <th>Nombre</th>
-              <th>Plataforma</th>
-              <th>Área</th>
-              <th>Activo</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>
-    </section>
+    <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>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   );
 }
-//IO
diff --git a/tsconfig.json b/tsconfig.json
index 74f6560..e7ff3a2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {