modified pregunta7 to use axios

src/components/Equipo_Computo/Pregunta7.tsx

@@ -1,28 +1,100 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
 import "./pregunta7.css";
 
+interface AntiguedadItem {
+  antiguedad: string;
+  total: number;
+  porcentaje?: string;
+}
+
+interface RespuestaAntiguedad {
+  impresion: AntiguedadItem[];
+  digitalizacion: AntiguedadItem[];
+}
+
 export default function Pregunta7() {
   const [datos, setDatos] = useState([
-    { nombre: "Impresión", valores: ["", "", "", ""] },
-    { nombre: "Digitalización", valores: ["", "", "", ""] },
+    { nombre: "Impresión", valores: ["0.00", "0.00", "0.00", "0.00"] },
+    { nombre: "Digitalización", valores: ["0.00", "0.00", "0.00", "0.00"] },
   ]);
 
-  // Función para calcular total de cada fila en Pregunta 7
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+
   const calcularTotal = (valores: string[]) =>
     valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
 
+  useEffect(() => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    axios
+      .get(`${api_url}/equipos/reporte/contar_perifericos_antiguedad`, {
+        headers,
+      })
+      .then((res) => {
+        const data: RespuestaAntiguedad = res.data;
+
+        const orden = [
+          "MENORES DE 2",
+          "ENTRE 2 Y 3",
+          "ENTRE 4 Y 5",
+          "MAYOR A 6",
+        ];
+
+        const nuevaTabla = [
+          { nombre: "Impresión", totales: [0, 0, 0, 0] },
+          { nombre: "Digitalización", totales: [0, 0, 0, 0] },
+        ];
+
+        if (Array.isArray(data.impresion)) {
+          data.impresion.forEach((item) => {
+            const antig = item.antiguedad.toUpperCase().trim();
+            const i = orden.indexOf(antig);
+            if (i !== -1) nuevaTabla[0].totales[i] = Number(item.total) || 0;
+          });
+        }
+
+        if (Array.isArray(data.digitalizacion)) {
+          data.digitalizacion.forEach((item) => {
+            const antig = item.antiguedad.toUpperCase().trim();
+            const i = orden.indexOf(antig);
+            if (i !== -1) nuevaTabla[1].totales[i] = Number(item.total) || 0;
+          });
+        }
+
+        const tablaConPorcentajes = nuevaTabla.map((fila) => {
+          const totalFila = fila.totales.reduce((a, b) => a + b, 0);
+
+          let valores = ["0", "0", "0", "0"];
+
+          if (totalFila > 0) {
+            valores = fila.totales.map((v) =>
+              ((v / totalFila) * 100).toFixed(2)
+            );
+          }
+
+          return { nombre: fila.nombre, valores };
+        });
+
+        setDatos(tablaConPorcentajes);
+      })
+      .catch((err) => {
+        console.error("Error cargando datos:", err);
+      });
+  }, []);
+
   return (
     <div className="contenedor-pregunta">
-      {/* Pregunta 7 */}
       <div className="contenedor-censo">
         Censo de equipos periféricos - Estado del equipo periférico (impresión y
         digitalización.)
       </div>
 
       <div className="pregunta-cuadro">
-        Antiguedad que tienen los equipos
-        periféricos del área universitaria.
+        Antigüedad que tienen los equipos periféricos del área universitaria.
       </div>
 
       <div className="tabla-contenedor">
@@ -40,21 +112,20 @@ export default function Pregunta7() {
           <tbody>
             {datos.map((fila, filaIndex) => {
               const total = calcularTotal(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}
-                          disabled             
-                        />
+                        <input type="number" value={valor} disabled />
                         <span className="porcentaje">%</span>
                       </div>
                     </td>
                   ))}
+
                   <td
                     className={`total-celda ${
                       total > 100 ? "total-error" : ""

src/components/Perifericos/Pregunta1EP.tsx

@@ -102,13 +102,6 @@ export default function Pregunta1EP() {
       });
   }, []);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEquipos({
-      ...equipos,
-      [e.target.name]: e.target.value,
-    });
-  };
-
   return (
     <div className="container">
       <div className="contenedor-censo">