Conexi API con pregutna1

src/components/Equipo_Computo/Pregunta1.tsx

@@ -1,128 +1,188 @@
 "use client";
-import React, { useState } from "react";
+
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
 import "./pregunta1.1.css";
 
+type RawEntry = {
+  uso: string;
+  categoria: string;
+  total: string;
+};
+
+// Índices para columnas
+const USO_INDEX: Record<string, number> = {
+  ALUMNO: 0,
+  PROFESOR: 1,
+  "TÉCNICO ACADEMICO": 2,
+  INVESTIGADOR: 3,
+  ADMINISTRATIVO: 4,
+};
+
+// Mapeo categoría → tabla + sistema operativo
+const CATEGORIA_MAP: Record<string, { tabla: number; so: string }> = {
+  "ESCRITORIO PC": { tabla: 0, so: "Windows" },
+  "ESCRITORIO MAC OS": { tabla: 0, so: "Mac OS" },
+  "ESCRITORIO LINUX": { tabla: 0, so: "Linux" },
+  "PORTÁTILES WINDOWS": { tabla: 2, so: "Windows" },
+  "PORTÁTILES MAC OS": { tabla: 2, so: "Mac OS" },
+  "TABLETA IPAD OS": { tabla: 1, so: "Mac OS" },
+  "SERVIDOR": { tabla: 3, so: "Linux" },
+};
+
+const TITULOS_TABLAS = [
+  "Computadoras de escritorio",
+  "Tabletas",
+  "Computadoras portátiles",
+  "Alto rendimiento",
+];
+
+const SISTEMAS_OPERATIVOS = ["Windows", "Linux", "Mac OS"];
+
 export default function Pregunta1() {
-  const [datos, setDatos] = useState([
-    { nombre: "Windows", valores: ["", "", "", "", ""] },
-    { nombre: "Linux", valores: ["", "", "", "", ""] },
-    { nombre: "Mac OS", valores: ["", "", "", "", ""] },
-    { nombre: "Total", valores: ["", "", "", "", ""] },
-  ]);
+  // Estado: 4 tablas × 3 SO × 5 columnas
+  const [tablas, setTablas] = useState<number[][][]>(
+    Array.from({ length: 4 }, () =>
+      Array.from({ length: 3 }, () => Array(5).fill(0))
+    )
+  );
 
-  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
-    const nuevosDatos = [...datos];
-    nuevosDatos[filaIndex].valores[colIndex] = value;
-    setDatos(nuevosDatos);
-  };
+  const [loading, setLoading] = useState(true);
 
-  const calcularTotalFila = (valores: string[]) =>
-    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
+  useEffect(() => {
+    const token = Cookies.get("token");
+    if (!token) {
+      console.error("Token no encontrado");
+      setLoading(false);
+      return;
+    }
 
-  const calcularTotalesColumnas = () => {
-    const numColumnas = datos[0].valores.length;
-    const totales = Array(numColumnas).fill(0);
-    datos.slice(0, -1).forEach((fila) => {
-      fila.valores.forEach((valor, colIndex) => {
-        totales[colIndex] += Number(valor) || 0;
+    axios
+      .get<RawEntry[]>(
+        "https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_tipoUso",
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        }
+      )
+      .then((res) => {
+        const nuevaTablas = Array.from({ length: 4 }, () =>
+          Array.from({ length: 3 }, () => Array(5).fill(0))
+        );
+
+        for (const item of res.data) {
+          const categoria = item.categoria.trim(); // ⚠️ elimina espacios basura
+          const mapping = CATEGORIA_MAP[categoria];
+          if (!mapping) continue;
+
+          const { tabla, so } = mapping;
+          const soIndex = SISTEMAS_OPERATIVOS.indexOf(so);
+          if (soIndex === -1) continue;
+
+          const usoIndex = USO_INDEX[item.uso];
+          if (usoIndex === undefined) continue;
+
+          const total = parseInt(item.total) || 0;
+          nuevaTablas[tabla][soIndex][usoIndex] = total;
+        }
+
+        setTablas(nuevaTablas);
+      })
+      .catch((err) => {
+        console.error("Error al cargar datos", err);
+      })
+      .finally(() => {
+        setLoading(false);
       });
-    });
-    return totales;
-  };
+  }, []);
 
-  const totalesColumnas = calcularTotalesColumnas();
+  if (loading) {
+    return (
+      <div className="contenedor-pregunta">
+        <div className="contenedor-censo">Censo de equipos de cómputo</div>
+        <div className="pregunta-cuadro">Cargando datos...</div>
+      </div>
+    );
+  }
 
-  // Títulos de las tablas
-  const tablas = [
-    "Computadoras de escritorio",
-    "Tabletas",
-    "Computadoras portátiles",
-    "Alto rendimiento",
-  ];
+  // Renderizar una tabla
+  const renderTabla = (tablaIndex: number) => {
+    const datosSO = tablas[tablaIndex];
+
+    const totalesColumnas = Array(5).fill(0);
+    for (let soIndex = 0; soIndex < 3; soIndex++) {
+      for (let col = 0; col < 5; col++) {
+        totalesColumnas[col] += datosSO[soIndex][col];
+      }
+    }
+
+    const totalGeneral = totalesColumnas.reduce((a, b) => a + b, 0);
+
+    return (
+      <div className="tabla-contenedor" key={tablaIndex}>
+        <table className="tabla">
+          <thead>
+            <tr>
+              <th className="azul-marino">{TITULOS_TABLAS[tablaIndex]}</th>
+              <th className="rosa-fuerte">Alumnos</th>
+              <th className="rosa-fuerte">Profesores</th>
+              <th className="rosa-fuerte">Técnicos Académicos</th>
+              <th className="rosa-fuerte">Investigadores</th>
+              <th className="rosa-fuerte">Administrativos</th>
+              <th className="azul-marino">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {SISTEMAS_OPERATIVOS.map((so, soIndex) => {
+              const valores = datosSO[soIndex];
+              const totalFila = valores.reduce((a, b) => a + b, 0);
 
-  // Función para renderizar una tabla
-  const renderTabla = (titulo: string) => (
-    <div className="tabla-contenedor">
-      <table className="tabla">
-        <thead>
-          <tr>
-            <th className="azul-marino">{titulo}</th>
-            <th className="rosa-fuerte">Alumnos</th>
-            <th className="rosa-fuerte">Profesores</th>
-            <th className="rosa-fuerte">Técnicos Académicos</th>
-            <th className="rosa-fuerte">Investigadores</th>
-            <th className="rosa-fuerte">Administrativos</th>
-            <th className="azul-marino">Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          {datos.map((fila, filaIndex) => {
-            if (fila.nombre === "Total") {
-              const totalGeneral = calcularTotalFila(
-                totalesColumnas.map(String)
-              );
               return (
-                <tr key={filaIndex} className="fila-total">
-                  <td className="negrita">{fila.nombre}</td>
-                  {totalesColumnas.map((colTotal, i) => (
-                    <td key={i}>{colTotal}</td>
+                <tr key={so}>
+                  <td>{so}</td>
+                  {valores.map((valor, colIndex) => (
+                    <td key={colIndex}>
+                      <div className="input-contenedor">
+                        <input type="number" value={valor} readOnly />
+                      </div>
+                    </td>
                   ))}
-                  <td className="negrita">{totalGeneral}</td>
+                  <td>{totalFila}</td>
                 </tr>
               );
-            }
+            })}
 
-            const totalFila = calcularTotalFila(fila.valores);
-            return (
-              <tr key={filaIndex}>
-                <td>{fila.nombre}</td>
-                {fila.valores.map((valor, colIndex) => (
-                  <td key={colIndex}>
-                    <div className="input-contenedor">
-                      <input
-                        type="number"
-                        value={valor}
-                        onChange={(e) =>
-                          handleChange(filaIndex, colIndex, e.target.value)
-                        }
-                      />
-                    </div>
-                  </td>
-                ))}
-                <td
-                  className={`total-celda ${
-                    totalFila > 100 ? "total-error" : ""
-                  }`}
-                >
-                  {totalFila}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
+            <tr className="fila-total">
+              <td className="negrita">Total</td>
+              {totalesColumnas.map((t, i) => (
+                <td key={i}>{t}</td>
+              ))}
+              <td className="negrita">{totalGeneral}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    );
+  };
 
   return (
     <div className="contenedor-pregunta">
       <div className="contenedor-censo">Censo de equipos de cómputo</div>
 
       <div className="pregunta-cuadro">
-        1. Desglose en cada renglón, el número de equipos de cómputo dedicado por cada categoría
-        enlistada, de acuerdo con el perfil de usuario al que se destina su uso primordialmente. *
+        1. Desglose en cada renglón, el número de equipos de cómputo dedicado
+        por cada categoría enlistada, de acuerdo con el perfil de usuario al que
+        se destina su uso primordialmente. *
       </div>
 
-      {/* FILA SUPERIOR */}
       <div className="contenedor-tablas">
-        {renderTabla(tablas[0])}
-        {renderTabla(tablas[1])}
+        {renderTabla(0)}
+        {renderTabla(1)}
       </div>
 
-      {/* FILA INFERIOR */}
       <div className="contenedor-tablas">
-        {renderTabla(tablas[2])}
-        {renderTabla(tablas[3])}
+        {renderTabla(2)}
+        {renderTabla(3)}
       </div>
     </div>
   );

tsconfig.json

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {