From 079d0dc60e805b04757cd2dfc1d5469e8b845c92 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Thu, 20 Nov 2025 15:29:14 -0600
Subject: [PATCH] get digitalizacion and impressions

---
 src/components/Equipo_Computo/Pregunta3.tsx |   4 +-
 src/components/Perifericos/Pregunta2EP.tsx  | 123 +++++++++++------
 src/components/Perifericos/Pregunta5EP.tsx  | 139 +++++++++++++-------
 3 files changed, 181 insertions(+), 85 deletions(-)

diff --git a/src/components/Equipo_Computo/Pregunta3.tsx b/src/components/Equipo_Computo/Pregunta3.tsx
index d419a47..3dd8a8a 100644
--- a/src/components/Equipo_Computo/Pregunta3.tsx
+++ b/src/components/Equipo_Computo/Pregunta3.tsx
@@ -143,11 +143,9 @@ export default function Pregunta3_2() {
     <div className={styles.scanView_P3}>
       <div className={styles.container_P3}>
         <div className={styles.header_P3}>
-          <h1 className={styles.titulo}>PREGUNTA 3 (2/5)</h1>
           <p className={styles.texto}>
-            3. Desglose la cantidad de población beneficiada por plataforma y tipo de procesador: *
+            Cantidad de población beneficiada por plataforma y tipo de procesador:
           </p>
-          <p className={styles.subtexto}>Presione cada pestaña para ingresar la información.</p>
         </div>
 
         <div className={styles.mainContent_P3}>
diff --git a/src/components/Perifericos/Pregunta2EP.tsx b/src/components/Perifericos/Pregunta2EP.tsx
index a85743b..599eac6 100644
--- a/src/components/Perifericos/Pregunta2EP.tsx
+++ b/src/components/Perifericos/Pregunta2EP.tsx
@@ -1,6 +1,8 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import styles from "./pregunta2EP.module.scss";
+import axios from "axios";
+import Cookies from "js-cookie";
 
 interface EquiposPoblacion {
   alumnos: string;
@@ -13,35 +15,87 @@ interface EquiposPoblacion {
 
 export default function Pregunta2EP() {
   const [equipos, setEquipos] = useState<EquiposPoblacion>({
-    alumnos: "35",
-    profesores: "43",
+    alumnos: "0",
+    profesores: "0",
     tecnicosAcademicos: "",
     investigadores: "",
-    administrativos: "302",
-    total: "380",
+    administrativos: "0",
+    total: "0",
   });
 
-  // Listo para conectar al backend
-  useEffect(() => {
-    /*
-    fetch("https://tu-api-backend.com/api/equipos-poblacion")
-      .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((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
+  useEffect(() => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    axios
+      .get(`${api_url}/equipos/reporte/contar_periferico_tipoUso/impresoras`, {
+        headers,
+      })
+      .then((res) => {
+        const data = res.data;
+
+        // Valores por defecto
+        const valores = {
+          alumnos: "0",
+          profesores: "0",
+          tecnicosAcademicos: "0",
+          investigadores: "0",
+          administrativos: "0",
+          total: "0",
+        };
+
+        data.forEach((item: any) => {
+          const uso = item.uso.toUpperCase().trim();
+          const total = item.total ?? "0";
+
+          switch (uso) {
+            case "ALUMNO":
+            case "ALUMNOS":
+              valores.alumnos = total;
+              break;
+
+            case "PROFESOR":
+            case "PROFESORES":
+              valores.profesores = total;
+              break;
+
+            case "TÉCNICO ACADEMICO":
+            case "TÉCNICO ACADÉMICO":
+              valores.tecnicosAcademicos = total;
+              break;
+
+            case "INVESTIGADOR":
+            case "INVESTIGADORES":
+              valores.investigadores = total;
+              break;
+
+            case "ADMINISTRATIVO":
+            case "ADMINISTRATIVOS":
+              valores.administrativos = total;
+              break;
+          }
+        });
+
+        // Calcular total general
+        valores.total = String(
+          Number(valores.alumnos) +
+            Number(valores.profesores) +
+            Number(valores.tecnicosAcademicos) +
+            Number(valores.investigadores) +
+            Number(valores.administrativos)
+        );
+
+        setEquipos(valores);
+      })
+      .catch((err) => {
+        console.error("Error:", err);
+      });
+  }, []);
 
   return (
     <div className={styles.container_P2}>
-
       <div className="pregunta-cuadro">
         Equipos de impresión de acuerdo con la población universitaria.
       </div>
@@ -54,20 +108,18 @@ export default function Pregunta2EP() {
             id="alumnos"
             name="alumnos"
             value={equipos.alumnos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="profesores">
-            Profesores
-          </label>
+          <label htmlFor="profesores">Profesores</label>
           <input
             type="text"
             id="profesores"
             name="profesores"
             value={equipos.profesores}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -78,33 +130,29 @@ export default function Pregunta2EP() {
             id="tecnicosAcademicos"
             name="tecnicosAcademicos"
             value={equipos.tecnicosAcademicos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="investigadores">
-            Investigadores
-          </label>
+          <label htmlFor="investigadores">Investigadores</label>
           <input
             type="text"
             id="investigadores"
             name="investigadores"
             value={equipos.investigadores}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="administrativos">
-            Administrativos 
-          </label>
+          <label htmlFor="administrativos">Administrativos</label>
           <input
             type="text"
             id="administrativos"
             name="administrativos"
             value={equipos.administrativos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -115,10 +163,11 @@ export default function Pregunta2EP() {
             id="total"
             name="total"
             value={equipos.total}
-            onChange={handleChange}
+            disabled
           />
         </div>
       </div>
     </div>
   );
 }
+//IO
diff --git a/src/components/Perifericos/Pregunta5EP.tsx b/src/components/Perifericos/Pregunta5EP.tsx
index f97b647..b20e9af 100644
--- a/src/components/Perifericos/Pregunta5EP.tsx
+++ b/src/components/Perifericos/Pregunta5EP.tsx
@@ -2,6 +2,8 @@
 import "./pregunta5EP.scss";
 import styles from "./pregunta2EP.module.scss";
 import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import axios from "axios";
 
 interface EquiposPoblacion {
   alumnos: string;
@@ -13,41 +15,94 @@ interface EquiposPoblacion {
 }
 
 export default function Pregunta5EP() {
-    const [equipos, setEquipos] = useState<EquiposPoblacion>({
-      alumnos: "35",
-      profesores: "43",
-      tecnicosAcademicos: "",
-      investigadores: "",
-      administrativos: "302",
-      total: "380",
-    });
-  
-    // Listo para conectar al backend
-    useEffect(() => {
-      /*
-      fetch("https://tu-api-backend.com/api/equipos-poblacion")
-        .then((res) => res.json())
-        .then((data) => setEquipos(data))
-        .catch((err) => console.error("Error al obtener datos:", err));
-      */
-    }, []);
-  
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const { name, value } = e.target;
-      setEquipos((prev) => ({
-        ...prev,
-        [name]: value,
-      }));
-    };
+  const [equipos, setEquipos] = useState<EquiposPoblacion>({
+    alumnos: "0",
+    profesores: "0",
+    tecnicosAcademicos: "0",
+    investigadores: "0",
+    administrativos: "0",
+    total: "0",
+  });
+
+  const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+  useEffect(() => {
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    axios
+      .get(`${api_url}/equipos/reporte/contar_periferico_tipoUso/dijtales`, {
+        headers,
+      })
+      .then((res) => {
+        const data = res.data;
+
+        // Valores por defecto
+        const valores = {
+          alumnos: "0",
+          profesores: "0",
+          tecnicosAcademicos: "0",
+          investigadores: "0",
+          administrativos: "0",
+          total: "0",
+        };
+
+        data.forEach((item: any) => {
+          const uso = item.uso.toUpperCase().trim();
+          const total = item.total ?? "0";
+
+          switch (uso) {
+            case "ALUMNO":
+            case "ALUMNOS":
+              valores.alumnos = total;
+              break;
+
+            case "PROFESOR":
+            case "PROFESORES":
+              valores.profesores = total;
+              break;
+
+            case "TÉCNICO ACADEMICO":
+            case "TÉCNICO ACADÉMICO":
+              valores.tecnicosAcademicos = total;
+              break;
+
+            case "INVESTIGADOR":
+            case "INVESTIGADORES":
+              valores.investigadores = total;
+              break;
+
+            case "ADMINISTRATIVO":
+            case "ADMINISTRATIVOS":
+              valores.administrativos = total;
+              break;
+          }
+        });
+
+        // Calcular total general
+        valores.total = String(
+          Number(valores.alumnos) +
+            Number(valores.profesores) +
+            Number(valores.tecnicosAcademicos) +
+            Number(valores.investigadores) +
+            Number(valores.administrativos)
+        );
+
+        setEquipos(valores);
+      })
+      .catch((err) => {
+        console.error("Error:", err);
+      });
+  }, []);
+
   return (
     <div className="container">
-
       <div className="pregunta-cuadro">
-        Número de equipos de digitalización de acuerdo con la
-        población universitaria.
+        Número de equipos de digitalización de acuerdo con la población
+        universitaria.
       </div>
 
-            <div className={styles.row_P2}>
+      <div className={styles.row_P2}>
         <div className={styles.item_P2}>
           <label htmlFor="alumnos">Alumnos</label>
           <input
@@ -55,20 +110,18 @@ export default function Pregunta5EP() {
             id="alumnos"
             name="alumnos"
             value={equipos.alumnos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="profesores">
-            Profesores
-          </label>
+          <label htmlFor="profesores">Profesores</label>
           <input
             type="text"
             id="profesores"
             name="profesores"
             value={equipos.profesores}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -79,33 +132,29 @@ export default function Pregunta5EP() {
             id="tecnicosAcademicos"
             name="tecnicosAcademicos"
             value={equipos.tecnicosAcademicos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="investigadores">
-            Investigadores
-          </label>
+          <label htmlFor="investigadores">Investigadores</label>
           <input
             type="text"
             id="investigadores"
             name="investigadores"
             value={equipos.investigadores}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
         <div className={styles.item_P2}>
-          <label htmlFor="administrativos">
-            Administrativos 
-          </label>
+          <label htmlFor="administrativos">Administrativos</label>
           <input
             type="text"
             id="administrativos"
             name="administrativos"
             value={equipos.administrativos}
-            onChange={handleChange}
+            disabled
           />
         </div>
 
@@ -116,7 +165,7 @@ export default function Pregunta5EP() {
             id="total"
             name="total"
             value={equipos.total}
-            onChange={handleChange}
+            disabled
           />
         </div>
       </div>