110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import axios from "axios";
|
|
import Cookies from "js-cookie";
|
|
import "./pregunta10.css";
|
|
import ToggleButton from "../Toggle/ToggleButton";
|
|
|
|
export default function Pregunta10() {
|
|
const [garantia, setGarantia] = useState({
|
|
escritorio: "",
|
|
portatil: "",
|
|
altoRendimiento: "",
|
|
});
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const cargarDatos = async (baja: boolean) => {
|
|
const token = Cookies.get("token");
|
|
if (!token) {
|
|
console.error("Token no encontrado");
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
|
|
|
|
axios
|
|
.post<number[]>(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/garantia`,
|
|
body,
|
|
{
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
}
|
|
)
|
|
.then((res) => {
|
|
const [escritorio, portatil, altoRendimiento] = res.data;
|
|
|
|
setGarantia({
|
|
escritorio: escritorio?.toString() || "0",
|
|
portatil: portatil?.toString() || "0",
|
|
altoRendimiento: altoRendimiento?.toString() || "0",
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error al cargar datos de garantía", err);
|
|
setGarantia({ escritorio: "0", portatil: "0", altoRendimiento: "0" });
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
cargarDatos(false);
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <div className="pregunta-cuadro">Cargando datos de garantía...</div>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="pregunta-cuadro">
|
|
Equipos de cómputo que tienen garantía de proveedor.
|
|
<ToggleButton
|
|
onChange={(estado) => {
|
|
cargarDatos(estado);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="tabla-contenedor">
|
|
<table className="tabla">
|
|
<thead>
|
|
<tr>
|
|
<th className="azul-marino">Computadoras de Escritorio</th>
|
|
<th className="azul-marino">Computadoras Portátiles</th>
|
|
<th className="azul-marino">Alto Rendimiento</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div className="input-contenedor input-sp">
|
|
<input type="number" value={garantia.escritorio} readOnly />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="input-contenedor input-sp">
|
|
<input type="number" value={garantia.portatil} readOnly />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="input-contenedor input-sp">
|
|
<input
|
|
type="number"
|
|
value={garantia.altoRendimiento}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|