added axios to pregunta 4

src/app/(Administrador)/perifericos/page.tsx

@@ -14,8 +14,8 @@ type PreguntaKey =
   | "pregunta7";
 
 const LABELS: Record<PreguntaKey, string> = {
-  pregunta1: "Impresion",
-  pregunta4: "Digitalizacion",
+  pregunta1: "Impresoras",
+  pregunta4: "Digitales",
   pregunta7: "Antiguedad",
 };
 

src/components/Equipo_Computo/Pregunta1.tsx

@@ -71,7 +71,7 @@ export default function Pregunta1() {
         );
 
         for (const item of res.data) {
-          const categoria = item.categoria.trim(); // ⚠️ elimina espacios basura
+          const categoria = item.categoria.trim();
           const mapping = CATEGORIA_MAP[categoria];
           if (!mapping) continue;
 

src/components/Equipo_Computo/pregunta10.tsx

@@ -63,9 +63,9 @@ export default function Pregunta10() {
         <table className="tabla">
           <thead>
             <tr>
-              <th className="azul-marino">Computadoras de Escritorio (247)</th>
-              <th className="azul-marino">Computadoras Portátiles (767)</th>
-              <th className="azul-marino">Alto Rendimiento (17)</th>
+              <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>

src/components/Equipo_Computo/pregunta7.css

@@ -10,18 +10,16 @@
   margin-bottom: 25px;
   border-radius: 4px;
 }
- 
 
 .pregunta-cuadro {
   background-color: #fff;
-  border-left: 6px solid #001f3f;
+  border-left: 10px solid #001f3f;
   padding: 15px;
   border-radius: 8px;
   font-size: 16px;
   margin-bottom: 25px;
 }
 
-
 .tabla-contenedor {
   background: white;
   padding: 20px;

src/components/Perifericos/Pregunta4EP.tsx

@@ -1,40 +1,73 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import "@/app/styles/layout/pregunta4EP.scss";
+import Cookies from "js-cookie";
+import axios from "axios";
 
 interface EquiposDigitalizacion {
   digitalizadorCamaPlana: string;
-  digitalizador3d: string;
+  d3D: string;
   digitalizadorAlimentador: string;
   digitalizadorGranVolumen: string;
 }
 
 export default function Pregunta4EP() {
   const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
-    digitalizadorCamaPlana: "27",
-    digitalizador3d: "",
-    digitalizadorAlimentador: "108",
-    digitalizadorGranVolumen: "1",
+    digitalizadorCamaPlana: "0",
+    d3D: "0",
+    digitalizadorAlimentador: "0",
+    digitalizadorGranVolumen: "0",
   });
 
-  // 🔹 Preparado para conectar con el backend
-  useEffect(() => {
-    // Cuando tengas la API, descomenta y reemplaza la URL:
-    /*
-    fetch("https://tu-api-backend.com/api/equipos-digitalizacion")
-      .then((res) => res.json())
-      .then((data) => setEquipos(data))
-      .catch((err) => console.error("Error al obtener datos:", err));
-    */
-  }, []);
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setEquipos({
-      ...equipos,
-      [name]: value,
-    });
-  };
+  useEffect(() => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+    axios
+      .get(`${api_url}/equipos/reporte/equipos_impesion_group/dijitales`, {
+        headers,
+      })
+      .then((res) => {
+        const data = res.data;
+
+        const valores = {
+          digitalizadorCamaPlana: "0",
+          d3D: "0",
+          digitalizadorAlimentador: "0",
+          digitalizadorGranVolumen: "0",
+        };
+
+        data.forEach((item: any) => {
+          const periferico = item.periferico.toUpperCase().trim();
+          const total = item.total ?? "0";
+
+          switch (periferico) {
+            case "DIGITALIZADOR DE CAMA PLANA PARA OFICINA":
+              valores.digitalizadorCamaPlana = total;
+              break;
+
+            case "3D":
+              valores.d3D = total;
+              break;
+
+            case "DIGITALIZADOR CON ALIMENTADOR DE HOJAS PARA OFICINA":
+              valores.digitalizadorAlimentador = total;
+              break;
+
+            case "DIGITALIZADOR DE GRAN VOLUMEN":
+              valores.digitalizadorGranVolumen = total;
+              break;
+          }
+        });
+
+        setEquipos(valores);
+      })
+
+      .catch((err) => {
+        console.error("Error:", err);
+      });
+  }, []);
 
   return (
     <div className="container">
@@ -56,7 +89,7 @@ export default function Pregunta4EP() {
             id="digitalizadorCamaPlana"
             name="digitalizadorCamaPlana"
             value={equipos.digitalizadorCamaPlana}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -66,8 +99,8 @@ export default function Pregunta4EP() {
             type="text"
             id="digitalizador3d"
             name="digitalizador3d"
-            value={equipos.digitalizador3d}
-            onChange={handleChange}
+            value={equipos.d3D}
+            disabled
           />
         </div>
 
@@ -80,7 +113,7 @@ export default function Pregunta4EP() {
             id="digitalizadorAlimentador"
             name="digitalizadorAlimentador"
             value={equipos.digitalizadorAlimentador}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -93,7 +126,7 @@ export default function Pregunta4EP() {
             id="digitalizadorGranVolumen"
             name="digitalizadorGranVolumen"
             value={equipos.digitalizadorGranVolumen}
-            onChange={handleChange}
+            disabled
           />
         </div>
       </div>

src/components/Perifericos/Pregunta5EP.tsx

@@ -37,7 +37,6 @@ export default function Pregunta5EP() {
       .then((res) => {
         const data = res.data;
 
-        // Valores por defecto
         const valores = {
           alumnos: "0",
           profesores: "0",