62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { envConfig } from "@/app/lib/config";
|
|
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(`${envConfig.apiUrl}/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 (
|
|
<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>
|
|
</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>
|
|
);
|
|
}
|