From db2dd0f97e637c9e4071422b08d9b9a6a9b3b25a Mon Sep 17 00:00:00 2001 From: jls846 Date: Wed, 19 Nov 2025 18:24:38 -0600 Subject: [PATCH] Conexion a APIS con Preguntas --- package-lock.json | 17 +- .../(Administrador)/equipoComputo/page.tsx | 8 +- src/components/Equipo_Computo/Pregunta2.tsx | 146 ++++----- src/components/Equipo_Computo/Pregunta3.tsx | 290 +++++++----------- src/components/Equipo_Computo/Pregunta9.tsx | 209 +++++++------ src/components/Equipo_Computo/pregunta10.css | 109 +++++++ src/components/Equipo_Computo/pregunta10.tsx | 106 +++++++ 7 files changed, 526 insertions(+), 359 deletions(-) create mode 100644 src/components/Equipo_Computo/pregunta10.css create mode 100644 src/components/Equipo_Computo/pregunta10.tsx diff --git a/package-lock.json b/package-lock.json index 25b4aa4..135923a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,7 +61,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1633,7 +1632,6 @@ "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1694,7 +1692,6 @@ "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.4", "@typescript-eslint/types": "8.46.4", @@ -2236,7 +2233,6 @@ "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.3.tgz", "integrity": "sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==", "license": "MIT", - "peer": true, "dependencies": { "ts-custom-error": "^3.2.1" }, @@ -2260,7 +2256,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2660,7 +2655,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -2878,8 +2872,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/cwise-compiler": { "version": "1.1.3", @@ -3306,7 +3299,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3492,7 +3484,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5711,7 +5702,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -5721,7 +5711,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -6026,7 +6015,6 @@ "integrity": "sha512-Dqh7SiYcaFtdv5Wvku6QgS5IGPm281L+ZtVD1U2FJa7Q0EFRlq8Z3sjYtz6gYObsYThUOz9ArwFqPZx+1azILQ==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -6561,7 +6549,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -6764,7 +6751,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7069,7 +7055,6 @@ "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/app/(Administrador)/equipoComputo/page.tsx b/src/app/(Administrador)/equipoComputo/page.tsx index e0bbf0f..5562df0 100644 --- a/src/app/(Administrador)/equipoComputo/page.tsx +++ b/src/app/(Administrador)/equipoComputo/page.tsx @@ -7,6 +7,7 @@ import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1"; import Pregunta3 from "@/components/Equipo_Computo/Pregunta3"; import Pregunta7EP from "@/components/Perifericos/Pregunta7EP"; import Pregunta9 from "@/components/Equipo_Computo/Pregunta9"; +import Pregunta10 from "@/components/Equipo_Computo/pregunta10"; import "../../styles/layout/reporte.scss"; type PreguntaKey = @@ -14,7 +15,8 @@ type PreguntaKey = | "pregunta2" | "pregunta3" | "pregunta7EP" - | "pregunta9"; + | "pregunta9" + | "pregunta10"; const LABELS: Record = { pregunta1: "Perfil de Usuario", @@ -22,6 +24,7 @@ const LABELS: Record = { pregunta3: "Plataforma y tipo procesador", pregunta7EP: "Laboratorios", pregunta9: "Generales", + pregunta10: "Garantía de Proveedor", }; // Mapeo de fondo por pregunta (puedes personalizarlo) @@ -31,6 +34,7 @@ const TAB_BACKGROUNDS: Record = { pregunta3: "bg-gray", pregunta7EP: "bg-gray", pregunta9: "bg-blue", + pregunta10: "bg-blue", }; export default function Page() { @@ -48,6 +52,8 @@ export default function Page() { return ; case "pregunta9": return ; + case "pregunta10": + return ; default: return (
diff --git a/src/components/Equipo_Computo/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx index 4c3a474..5414df3 100644 --- a/src/components/Equipo_Computo/Pregunta2.tsx +++ b/src/components/Equipo_Computo/Pregunta2.tsx @@ -1,8 +1,9 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; +import axios from "axios"; import styles from "./pregunta2.module.scss"; - +import Cookies from "js-cookie"; type OsEntry = { os: string; count: number; @@ -18,57 +19,6 @@ type PlatformKey = type PlatformData = Record; -const MOCK_DATA: PlatformData = { - "pc-desktop": [ - { os: "Windows 11", count: 408 }, - { os: "Windows 10", count: 1171 }, - { os: "Windows 7/8", count: 177 }, - { os: "Windows XP/Vista", count: 43 }, - { os: "Linux", count: 45 }, - { os: "Total", count: 1844, isTotal: true }, - ], - "apple-desktop": [ - { os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 }, - { - os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)", - count: 180, - }, - { os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 }, - { os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 }, - { os: "Total", count: 480, isTotal: true }, - ], - "pc-laptop": [ - { os: "Windows 11", count: 40 }, - { os: "Windows 10", count: 171 }, - { os: "Windows 7/8", count: 17 }, - { os: "Windows XP/Vista", count: 3 }, - { os: "Linux", count: 5 }, - { os: "Total", count: 236, isTotal: true }, - ], - "apple-laptop": [ - { os: "Mac OS X (13 - Ventura, 14 - Sonoma)", count: 205 }, - { - os: "Mac OS X (Mojave, Catalina, 11 - Big Sur, 12 - Monterrey)", - count: 180, - }, - { os: "Mac OS X (Yosemite, El Capitan, Sierra, High Sierra)", count: 95 }, - { os: "Mac OS X (Snow Leopard, Mountain Lion, Mavericks)", count: 6 }, - { os: "Total", count: 480, isTotal: true }, - ], - servers: [ - { - os: "Linux (CentOS, Fedora, Ubuntu, Red Hat Enterprise, entre otros)", - count: 120, - }, - { os: "Unix (AIX, Mac OS Server, Solaris, etc.)", count: 80 }, - { os: "Windows Server 2022/2023", count: 50 }, - { os: "Windows Server 2016/2019", count: 80 }, - { os: "Windows Server 2008/2012", count: 50 }, - { os: "Windows Server 2000/2003", count: 12 }, - { os: "Total", count: 392, isTotal: true }, - ], -}; - const PLATFORM_LABELS: Record = { "pc-desktop": "Computadoras de escritorio Plataforma PC", "apple-desktop": "Computadoras de escritorio Plataforma Apple", @@ -76,23 +26,65 @@ const PLATFORM_LABELS: Record = { "apple-laptop": "Computadoras portátiles Plataforma Apple", servers: "Servidores de alto rendimiento", }; +interface RawOsEntry { + sistema_operativo: string; + total: string; +} +// ✔ Función profesional para transformar tu JSON a OsEntry[] +function transformPlatform(raw: RawOsEntry[]): OsEntry[] { + const rows: OsEntry[] = raw.map((item) => ({ + os: item.sistema_operativo, + count: Number(item.total), // Convierte string a número + })); -export default function Pregunta1() { + const total = rows.reduce((acc, r) => acc + r.count, 0); + + rows.push({ + os: "Total", + count: total, + isTotal: true, + }); + + return rows; +} + +export default function Pregunta2() { const [activeTab, setActiveTab] = useState("pc-desktop"); + const [data, setData] = useState(null); - const currentData = MOCK_DATA[activeTab]; + // ✔ GET AXIOS PROFESIONAL + useEffect(() => { + const token = Cookies.get("token"); + const headers = {Authorization: `Bearer ${token}`}; + axios + .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_sistemasOperativos",{headers}) // ← TU API AQUI + .then((res) => { + const json = res.data; // Tu JSON con 5 arreglos + + const formatted: PlatformData = { + "pc-desktop": transformPlatform(json[0]), + "apple-desktop": transformPlatform(json[1]), + "pc-laptop": transformPlatform(json[2]), + "apple-laptop": transformPlatform(json[3]), + servers: transformPlatform(json[4]), + }; + + setData(formatted); + }) + .catch((err) => console.error("Error cargando datos", err)); + }, []); + + if (!data) return
Cargando datos...
; + + const currentData = data[activeTab]; return (
-
- Censo de equipos periféricos - Equipo de digitalización -
+
+ Censo de equipos — Sistemas Operativos +
-
- 5. Indique el número de equipos de digitalización de acuerdo con la - población universitaria al que se destina su uso primordialmente. -
Presione cada pestaña para ver la información de las plataformas.
@@ -107,28 +99,26 @@ export default function Pregunta1() { activeTab === key ? styles.active_P1 : "" }`} onClick={() => setActiveTab(key as PlatformKey)} - aria-selected={activeTab === key} > {label} ))}
- {/* Data Table */} -
- {currentData.map((item, index) => ( -
-
{item.os}
-
{item.count}
-
- ))} -
- + {/* Tabla */} +
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
diff --git a/src/components/Equipo_Computo/Pregunta3.tsx b/src/components/Equipo_Computo/Pregunta3.tsx index e57a9c2..d419a47 100644 --- a/src/components/Equipo_Computo/Pregunta3.tsx +++ b/src/components/Equipo_Computo/Pregunta3.tsx @@ -1,6 +1,8 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; +import axios from "axios"; +import Cookies from "js-cookie"; import styles from "./pregunta3.module.scss"; type ProcessorEntry = { @@ -23,161 +25,6 @@ type PlatformKey = type PlatformData = Record; -// Datos: solo "apple-desktop" tiene información en este caso -const MOCK_DATA: PlatformData = { - "pc-desktop": [], - "apple-desktop": [ - { - tipo: "Core Ultra (i3, i5, i7) Serie 2", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "0", - }, - { - tipo: "Core Ultra (i3, i5, i7) Serie 1", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "0", - }, - { - tipo: "Familia M4", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "2", - total: "2", - }, - { - tipo: "Familia M3", - alumnos: "", - profesores: "1", - tecnicos: "", - investigadores: "", - administrativos: "1", - total: "2", - }, - { - tipo: "Familia M2", - alumnos: "", - profesores: "2", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "2", - }, - { - tipo: "Familia M1", - alumnos: "51", - profesores: "1", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "52", - }, - { - tipo: "i9 o equivalentes (13a generación en adelante)", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "0", - }, - { - tipo: "i7 o equivalentes (13a generación en adelante)", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "0", - }, - { - tipo: "i7 o equivalentes (12a generación en adelante)", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "1", - total: "1", - }, - { - tipo: "i5 o equivalentes (13a generación en adelante)", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "1", - total: "1", - }, - { - tipo: "i5 o equivalentes (12a generación en adelante)", - alumnos: "11", - profesores: "1", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "12", - }, - { - tipo: "i3 o equivalentes (13a generación en adelante)", - alumnos: "175", - profesores: "5", - tecnicos: "", - investigadores: "", - administrativos: "26", - total: "206", - }, - { - tipo: "i3 o equivalentes (12a generación en adelante)", - alumnos: "", - profesores: "", - tecnicos: "", - investigadores: "", - administrativos: "1", - total: "1", - }, - { - tipo: "i3 o equivalentes (11a generación en adelante)", - alumnos: "", - profesores: "2", - tecnicos: "", - investigadores: "", - administrativos: "", - total: "2", - }, - { - tipo: "Core2 Mac, Quad Core o anteriores", - alumnos: "12", - profesores: "3", - tecnicos: "3", - investigadores: "", - administrativos: "3", - total: "21", - }, - { - tipo: "Total", - alumnos: "249", - profesores: "14", - tecnicos: "3", - investigadores: "0", - administrativos: "37", - total: "303", - isTotal: true, - }, - ], - "pc-laptop": [], - "apple-laptop": [], - servers: [], -}; - const PLATFORM_LABELS: Record = { "pc-desktop": "Computadoras de escritorio Plataforma PC", "apple-desktop": "Computadoras de escritorio Plataforma Apple", @@ -186,10 +33,111 @@ const PLATFORM_LABELS: Record = { servers: "Alto rendimiento Servidores", }; -export default function Pregunta3_2() { - const [activeTab, setActiveTab] = useState("apple-desktop"); +// Mapeo de "uso" del JSON a campos en ProcessorEntry +const USO_TO_FIELD: Record> = { + ALUMNO: "alumnos", + PROFESOR: "profesores", + "TÉCNICO ACADEMICO": "tecnicos", + INVESTIGADOR: "investigadores", + ADMINISTRATIVO: "administrativos", +}; - const currentData = MOCK_DATA[activeTab]; +// Transforma un array plano del tipo [{procesador, uso, total}] en ProcessorEntry[] +function transformProcessorData(rawArray: { procesador: string; uso: string; total: string }[]): ProcessorEntry[] { + const map = new Map(); + + for (const item of rawArray) { + const { procesador, uso, total } = item; + if (!map.has(procesador)) { + map.set(procesador, { + tipo: procesador, + alumnos: "0", + profesores: "0", + tecnicos: "0", + investigadores: "0", + administrativos: "0", + total: "0", + }); + } + + const entry = map.get(procesador)!; + const field = USO_TO_FIELD[uso]; + if (field) { + entry[field] = total; + } + } + + // Convertimos a array y calculamos el total por fila + const rows = Array.from(map.values()).map((entry) => { + const totalNum = + parseInt(entry.alumnos || "0") + + parseInt(entry.profesores || "0") + + parseInt(entry.tecnicos || "0") + + parseInt(entry.investigadores || "0") + + parseInt(entry.administrativos || "0"); + return { + ...entry, + total: totalNum.toString(), + }; + }); + + // Calculamos los totales generales + const grandTotal: ProcessorEntry = { + tipo: "Total", + alumnos: rows.reduce((sum, r) => sum + parseInt(r.alumnos || "0"), 0).toString(), + profesores: rows.reduce((sum, r) => sum + parseInt(r.profesores || "0"), 0).toString(), + tecnicos: rows.reduce((sum, r) => sum + parseInt(r.tecnicos || "0"), 0).toString(), + investigadores: rows.reduce((sum, r) => sum + parseInt(r.investigadores || "0"), 0).toString(), + administrativos: rows.reduce((sum, r) => sum + parseInt(r.administrativos || "0"), 0).toString(), + total: rows.reduce((sum, r) => sum + parseInt(r.total || "0"), 0).toString(), + isTotal: true, + }; + + return [...rows, grandTotal]; +} + +export default function Pregunta3_2() { + const [activeTab, setActiveTab] = useState("pc-desktop"); + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const token = Cookies.get("token"); + if (!token) { + console.error("Token no encontrado"); + setLoading(false); + return; + } + + const headers = { Authorization: `Bearer ${token}` }; + axios + .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_procesador", { headers }) + .then((res) => { + const json = res.data; // array de 5 arreglos + + const formatted: PlatformData = { + "pc-desktop": transformProcessorData(json[0] || []), + "apple-desktop": transformProcessorData(json[1] || []), + "pc-laptop": transformProcessorData(json[2] || []), + "apple-laptop": transformProcessorData(json[3] || []), + servers: transformProcessorData(json[4] || []), + }; + + setData(formatted); + }) + .catch((err) => { + console.error("Error cargando datos de procesadores", err); + }) + .finally(() => { + setLoading(false); + }); + }, []); + + if (loading) return
Cargando datos...
; + + if (!data) return
Error al cargar los datos.
; + + const currentData = data[activeTab]; return (
@@ -199,21 +147,16 @@ export default function Pregunta3_2() {

3. Desglose la cantidad de población beneficiada por plataforma y tipo de procesador: *

-

- Presione cada pestaña para ingresar la información. -

+

Presione cada pestaña para ingresar la información.

- {/* Contenido principal con pestañas a la izquierda */}
- {/* Pestañas verticales (izquierda) */} + {/* Pestañas verticales */}
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
- {/* Contenido de la tabla (derecha) */} + {/* Contenido */}
{currentData.length > 0 ? ( <> @@ -231,10 +174,7 @@ export default function Pregunta3_2() { - {activeTab.includes("apple") - ? "Plataforma Apple" - : "Plataforma PC"}{" "} -
+ {activeTab.includes("apple") ? "Plataforma Apple" : "Plataforma PC"}
Tipo de procesador @@ -256,9 +196,7 @@ export default function Pregunta3_2() { {currentData.map((item, index) => ( {item.tipo} @@ -318,8 +256,6 @@ export default function Pregunta3_2() { )}
- - ); diff --git a/src/components/Equipo_Computo/Pregunta9.tsx b/src/components/Equipo_Computo/Pregunta9.tsx index f08ec42..e8ae649 100644 --- a/src/components/Equipo_Computo/Pregunta9.tsx +++ b/src/components/Equipo_Computo/Pregunta9.tsx @@ -1,12 +1,27 @@ "use client"; -import React, { useState } from "react"; + +import React, { useState, useEffect } from "react"; +import Cookies from "js-cookie"; +import axios from "axios"; import "./pregunta9.css"; +type AntiguedadItem = { + antiguedad: string | null; + total: string; + porcentaje: string; // lo ignoramos +}; + +type ApiResponse = { + escritorios: AntiguedadItem[]; + portatiles: AntiguedadItem[]; + altoRendimiento: AntiguedadItem[]; +}; + export default function Pregunta9() { const [datos, setDatos] = useState([ - { nombre: "Computadoras de Escritorio", valores: ["", "", "", ""] }, - { nombre: "Computadoras Portátiles", valores: ["", "", "", ""] }, - { nombre: "Alto Rendimiento", valores: ["", "", "", ""] }, + { nombre: "Computadoras de Escritorio", valores: ["0.00", "0.00", "0.00", "0.00","0.00"] }, + { nombre: "Computadoras Portátiles", valores: ["0.00", "0.00", "0.00", "0.00","0.00"] }, + { nombre: "Alto Rendimiento", valores: ["0.00", "0.00", "0.00", "0.00","0.00"] }, ]); const [garantia, setGarantia] = useState({ @@ -15,66 +30,141 @@ export default function Pregunta9() { altoRendimiento: "", }); - // Función para actualizar datos de Pregunta 9 - const handleChange = (filaIndex: number, colIndex: number, value: string) => { - const nuevosDatos = [...datos]; - nuevosDatos[filaIndex].valores[colIndex] = value; - setDatos(nuevosDatos); + const [loading, setLoading] = useState(true); + + // Transforma los datos del backend al formato de 4 columnas con % calculados + const transformarDatos = (items: AntiguedadItem[]): string[] => { + + let menores2 = 0; + let entre2_3 = 0; + let entre4_6 = 0; + + let mayores6 = 0; + let notfound = 0; + + for (const item of items) { + const total = Number(item.total) || 0; + + switch (item.antiguedad) { + case "MENOR A 2": + menores2 += total; + break; + case "ENTRE 2 Y 3": + entre2_3 += total; + break; + case "ENTRE 4 Y 5": + entre4_6 += total; + break; + case "MAYORES DE 6": + mayores6 += total; + break; + // Cualquier otro valor (aunque no debería haber) lo meteríamos en mayores6 + default:notfound += total; break; + } + } + + const totalEquipo = menores2 + mayores6+ entre2_3 + entre4_6 + notfound; + + if (totalEquipo === 0) { + return ["0.00", "0.00", "0.00", "0.00","0.00"]; + } + + const pct = (valor: number) => ((valor / totalEquipo) * 100).toFixed(2); + + // [Menor a 2, Entre 2-3, Entre 4-5, Mayor a 6] + return [pct(menores2), pct(entre2_3), pct(entre4_6), pct(mayores6),pct(notfound)]; }; - // Función para calcular total de cada fila en Pregunta 9 - const calcularTotal = (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; + } + + axios + .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_antiguedad", { + headers: { Authorization: `Bearer ${token}` }, + }) + .then((res) => { + const { escritorios, portatiles, altoRendimiento } = res.data; + + setDatos([ + { + nombre: "Computadoras de Escritorio", + valores: transformarDatos(escritorios), + }, + { + nombre: "Computadoras Portátiles", + valores: transformarDatos(portatiles), + }, + { + nombre: "Alto Rendimiento", + valores: transformarDatos(altoRendimiento), + }, + ]); + }) + .catch((err) => { + console.error("Error al cargar datos de antigüedad", err); + }) + .finally(() => { + setLoading(false); + }); + }, []); + + const calcularTotalFila = (valores: string[]) => + valores.reduce((sum, val) => sum + parseFloat(val), 0); + + if (loading) { + return
Cargando datos...
; + } return (
-
+ {/* Pregunta intro (servidores) */} +
Indique cuantos servidores son utilizados en ambientes productivos y si en ellos se almacenan datos personales.
- {/* Pregunta 9 */} + {/* Pregunta 9: Antigüedad */}
- Calcule porcentualmente (%) la antiguedad que tienen los equipos de - cómputo del área universitaria. + Calcule porcentualmente (%) la antigüedad que tienen los equipos de cómputo del área universitaria.
- + + - {datos.map((fila, filaIndex) => { - const total = calcularTotal(fila.valores); + {datos.map((fila, idx) => { + const total = calcularTotalFila(fila.valores); return ( - + - {fila.valores.map((valor, colIndex) => ( - ))} - @@ -84,62 +174,7 @@ export default function Pregunta9() {
% Antiguedad de los equipos% Antigüedad de los equipos Menor a 2 años Entre 2 y 3 años Entre 4 y 5 años Mayor a 6 añosNo registrados Total
{fila.nombre} + {fila.valores.map((valor, colIdx) => ( +
- handleChange(filaIndex, colIndex, e.target.value) - } + readOnly /> %
100 ? "total-error" : "" - }`} - > + 100.1 ? "total-error" : ""}`}> {total.toFixed(2)}%
- {/* Pregunta 10 */} -
- ¿Cuántos equipos de cómputo tienen garantía de proveedor?. -
- -
- - - - - - - - - - - - - - - -
Computadoras de Escritorio (247)Computadoras Portátiles (767)Alto Rendimiento (17)
-
- - setGarantia({ ...garantia, escritorio: e.target.value }) - } - /> -
- 		-
- - setGarantia({ ...garantia, portatil: e.target.value }) - } - /> -
- 		-
- - setGarantia({ - ...garantia, - altoRendimiento: e.target.value, - }) - } - /> -
-
-
+
); -} +} \ No newline at end of file diff --git a/src/components/Equipo_Computo/pregunta10.css b/src/components/Equipo_Computo/pregunta10.css new file mode 100644 index 0000000..2b6c086 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta10.css @@ -0,0 +1,109 @@ +/* === Cuadro de la pregunta === */ +.pregunta-cuadro { + border-left: 6px solid #001f3f; + padding: 15px; + border-radius: 8px; + font-size: 16px; + margin-bottom: 25px; +} + +/* === Contenedor de tabla === */ +.tabla-contenedor { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow-x: auto; +} + +/* === Estilos de la tabla === */ +.tabla { + width: 100%; + border-collapse: collapse; + text-align: center; + color: black; +} + +.tabla th, +.tabla td { + border: 1px solid #ddd; + padding: 12px; +} + +.tabla th { + background-color: #002855; + color: white; + font-weight: 600; + font-size: 15px; +} + +.tabla td { + font-size: 14px; +} + +/* === Colores personalizados === */ +.azul-marino { + background-color: #002855 !important; + color: white !important; +} + +.rosa-fuerte { + background-color: #dc1557 !important; + color: white !important; +} + +/* === Input === */ +.input-contenedor { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.input-contenedor input { + width: 40%; + padding: 6px; + border: 2px solid #002855; + border-radius: 6px; + font-size: 14px; + color: #333; + text-align: center; + outline: none; + background-color: #e8e2e2; + box-sizing: border-box; +} + +.input-contenedor input::-webkit-inner-spin-button, +.input-contenedor input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Focus del input */ +.input-contenedor input:focus { + border-color: #001f3f; + box-shadow: 0 0 6px rgba(0, 47, 95, 0.3); +} + +/* Placeholder */ +.input-contenedor input::placeholder { + color: #bbb; +} + +/* Para celdas del total */ +.total-celda { + font-weight: bold; + color: #002855; + background-color: #eef2f6; +} + +/* Error de total */ +.total-error { + background-color: #ffcccc; + color: #a80000; +} + +/* Ajuste especial para inputs */ +.input-sp input { + width: 38%; +} diff --git a/src/components/Equipo_Computo/pregunta10.tsx b/src/components/Equipo_Computo/pregunta10.tsx new file mode 100644 index 0000000..2862b27 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta10.tsx @@ -0,0 +1,106 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import Cookies from "js-cookie"; +import "./pregunta10.css"; + +export default function Pregunta10() { + const [garantia, setGarantia] = useState({ + escritorio: "", + portatil: "", + altoRendimiento: "", + }); + + const [loading, setLoading] = useState(true); + + useEffect(() => { + const token = Cookies.get("token"); + if (!token) { + console.error("Token no encontrado"); + setLoading(false); + return; + } + + axios + .get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/garantia", { + 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); + // Opcional: establecer valores por defecto en caso de error + setGarantia({ escritorio: "0", portatil: "0", altoRendimiento: "0" }); + }) + .finally(() => { + setLoading(false); + }); + }, []); + + if (loading) { + return ( +
+ Cargando datos de garantía... +
+ ); + } + + return ( + <> +
+ ¿Cuántos equipos de cómputo tienen garantía de proveedor? +
+ +
+ + + + + + + + + + + + + + + +
Computadoras de Escritorio (247)Computadoras Portátiles (767)Alto Rendimiento (17)
+
+ +
+ 		+
+ +
+ 		+
+ +
+
+
+ + ); +} \ No newline at end of file