diff --git a/src/components/Equipo_Computo/Pregunta1.tsx b/src/components/Equipo_Computo/Pregunta1.tsx index 20e5a6d..86510f6 100644 --- a/src/components/Equipo_Computo/Pregunta1.tsx +++ b/src/components/Equipo_Computo/Pregunta1.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import axios from "axios"; import Cookies from "js-cookie"; -import "./pregunta1.1.css"; +import style from "./pregunta1_1.module.scss"; type RawEntry = { uso: string; @@ -11,7 +11,6 @@ type RawEntry = { total: string; }; -// Índices para columnas const USO_INDEX: Record = { ALUMNO: 0, PROFESOR: 1, @@ -20,7 +19,6 @@ const USO_INDEX: Record = { ADMINISTRATIVO: 4, }; -// Mapeo categoría → tabla + sistema operativo const CATEGORIA_MAP: Record = { "ESCRITORIO PC": { tabla: 0, so: "Windows" }, "ESCRITORIO MAC OS": { tabla: 0, so: "Mac OS" }, @@ -28,7 +26,7 @@ const CATEGORIA_MAP: Record = { "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" }, + SERVIDOR: { tabla: 3, so: "Linux" }, }; const TITULOS_TABLAS = [ @@ -41,7 +39,6 @@ const TITULOS_TABLAS = [ const SISTEMAS_OPERATIVOS = ["Windows", "Linux", "Mac OS"]; export default function Pregunta1() { - // Estado: 4 tablas × 3 SO × 5 columnas const [tablas, setTablas] = useState( Array.from({ length: 4 }, () => Array.from({ length: 3 }, () => Array(5).fill(0)) @@ -61,9 +58,7 @@ export default function Pregunta1() { axios .get( `${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_tipoUso`, - { - headers: { Authorization: `Bearer ${token}` }, - } + { headers: { Authorization: `Bearer ${token}` } } ) .then((res) => { const nuevaTablas = Array.from({ length: 4 }, () => @@ -88,24 +83,10 @@ export default function Pregunta1() { setTablas(nuevaTablas); }) - .catch((err) => { - console.error("Error al cargar datos", err); - }) - .finally(() => { - setLoading(false); - }); + .catch((err) => console.error("Error al cargar datos", err)) + .finally(() => setLoading(false)); }, []); - if (loading) { - return ( -
-
Censo de equipos de cómputo
-
Cargando datos...
-
- ); - } - - // Renderizar una tabla const renderTabla = (tablaIndex: number) => { const datosSO = tablas[tablaIndex]; @@ -119,19 +100,22 @@ export default function Pregunta1() { const totalGeneral = totalesColumnas.reduce((a, b) => a + b, 0); return ( -
- +
+
- - - - - - - + + + + + + + + {SISTEMAS_OPERATIVOS.map((so, soIndex) => { const valores = datosSO[soIndex]; @@ -142,22 +126,22 @@ export default function Pregunta1() { {valores.map((valor, colIndex) => ( ))} - + ); })} - - + + {totalesColumnas.map((t, i) => ( ))} - +
{TITULOS_TABLAS[tablaIndex]}AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativosTotal + {TITULOS_TABLAS[tablaIndex]} + AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativosTotal
{so} -
+
{totalFila}{totalFila}
Total
Total{t}{totalGeneral}{totalGeneral}
@@ -165,21 +149,29 @@ export default function Pregunta1() { ); }; - return ( -
-
Censo de equipos de cómputo
+ if (loading) { + return ( +
+
Censo de equipos
+
Cargando datos...
+
+ ); + } -
- Número de equipos de cómputo - por cada categoría enlistada, de acuerdo con el perfil de usuario. + return ( +
+
Censo de equipos de cómputo
+ +
+ Número de equipos de cómputo por cada categoría y perfil de usuario.
-
+
{renderTabla(0)} {renderTabla(1)}
-
+
{renderTabla(2)} {renderTabla(3)}
diff --git a/src/components/Equipo_Computo/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx index ced4338..e4ed372 100644 --- a/src/components/Equipo_Computo/Pregunta2.tsx +++ b/src/components/Equipo_Computo/Pregunta2.tsx @@ -4,6 +4,7 @@ import { useState, useEffect } from "react"; import axios from "axios"; import styles from "./pregunta2.module.scss"; import Cookies from "js-cookie"; +import style from "styled-jsx/style"; type OsEntry = { os: string; count: number; @@ -79,11 +80,13 @@ export default function Pregunta2() { const currentData = data[activeTab]; return ( -
-
-
- Censo de equipos — Sistemas Operativos -
+
+
Censo de equipos de cómputo - Sitema Operativo
+ +
+ Número de equipos de cómputo por cada categoría y perfil de usuario. +
+
{/* Tabs */} diff --git a/src/components/Equipo_Computo/Pregunta3.tsx b/src/components/Equipo_Computo/Pregunta3.tsx index f683d92..0faffcf 100644 --- a/src/components/Equipo_Computo/Pregunta3.tsx +++ b/src/components/Equipo_Computo/Pregunta3.tsx @@ -140,13 +140,13 @@ export default function Pregunta3_2() { const currentData = data[activeTab]; return ( -
-
-
-

- Cantidad de población beneficiada por plataforma y tipo de procesador: -

-
+
+
Censo de equipos de cómputo - Plataforma y tipo procesador
+ +
+ Cantidad de población beneficiada por plataforma y tipo de procesador. +
+
{/* Pestañas verticales */} diff --git a/src/components/Equipo_Computo/pregunta1.1.css b/src/components/Equipo_Computo/pregunta1.1.css deleted file mode 100644 index 693ec9a..0000000 --- a/src/components/Equipo_Computo/pregunta1.1.css +++ /dev/null @@ -1,144 +0,0 @@ - -.contenedor-censo{ - background-color: #003e79; - color: white; - padding: 15px; - font-size: 20px; - margin-bottom: 25px; -} - - -.pregunta-cuadro { - background-color: #f5f5f5; - border-left: 6px solid #003e79; - padding: 15px; - border-radius: 8px; - font-size: 16px; - margin-bottom: 25px; -} - - -.tabla-contenedor { - background: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - overflow-x: auto; - min-width: 700px; -} - -/* Tabla */ -.tabla { - width: 100%; - border-collapse: collapse; - text-align: center; - color: black; - width: 100%; /* ocupa todo el ancho del contenedor */ - table-layout: fixed; -} - -.tabla th, -.tabla td { - border: 1px solid #ddd; - padding: 12px; - -} - -.tabla th { - color: white; - font-weight: 600; - font-size: 15px; -} - -.tabla td { - font-size: 14px; -} - -/* Colores personalizados */ -.azul-marino { - background-color: #003e79; - color: white; -} - -.rosa-fuerte { - background-color: #dc1557; - color: white; -} - -/* Contenedor input */ -.input-contenedor { - position: relative; - display: flex; - justify-content: center; - align-items: center; - height: 100%; -} - -/* Input */ -.input-contenedor input { - width: 100%; - padding: 6px 25px 6px 6px; - border: 2px solid #003e79; - border-radius: 6px; - font-size: 14px; - color: #333; - text-align: center; - outline: none; - background-color: rgb(232, 226, 226); - 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 gris claro */ -.input-contenedor input::placeholder { - color: #bbb; - opacity: 1; -} - - -.input-contenedor .porcentaje { - position: absolute; - right: 8px; - color: #555; - font-weight: bold; - pointer-events: none; - font-size: 14px; - top: 50%; - transform: translateY(-50%); -} - -/* Celda del total */ -.total-celda { - font-weight: bold; - color: #003e79; - background-color: #eef2f6; -} - -/* Total > 100% */ -.total-error { - background-color: #ffcccc; - color: #a80000; -} - -.contenedor-tablas { - display: flex; - gap: 10px; - flex-wrap: wrap; - margin-bottom: 10px; -} - -.tabla-contenedor { - flex: 1; -} diff --git a/src/components/Equipo_Computo/pregunta1_1.module.scss b/src/components/Equipo_Computo/pregunta1_1.module.scss new file mode 100644 index 0000000..ae25a1e --- /dev/null +++ b/src/components/Equipo_Computo/pregunta1_1.module.scss @@ -0,0 +1,129 @@ +.contenedor-censo { + color: #fff; + background-color: #003e79; + border-radius: 4px; + margin-bottom: 15px; + padding: 15px; + font-size: 16px; +} + +.pregunta-cuadro { + background-color: #fff; + border-left: 6px solid #003e79; + border-radius: 8px; + margin-bottom: 25px; + padding: 15px; + font-size: 16px; +} + +.tabla-contenedor { + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + overflow-x: auto; + min-width: 700px; + flex: 1; +} + +.tabla { + width: 100%; + border-collapse: collapse; + text-align: center; + color: black; + table-layout: fixed; + + th, td { + border: 1px solid #ddd; + padding: 12px; + } + + th { + color: white; + font-weight: 600; + font-size: 15px; + } + + td { + font-size: 14px; + } +} + +/* Colores personalizados */ +.azul-marino { + background-color: #003e79; + color: white; +} + +.rosa-fuerte { + background-color: #dc1557; + color: white; +} + +/* Contenedor input */ +.input-contenedor { + position: relative; + display: flex; + justify-content: center; + align-items: center; + + input { + width: 100%; + padding: 6px 25px 6px 6px; + border: 2px solid #003e79; + border-radius: 6px; + font-size: 14px; + color: #333; + text-align: center; + outline: none; + background-color: rgb(232, 226, 226); + box-sizing: border-box; + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + &:focus { + border-color: #001f3f; + box-shadow: 0 0 6px rgba(0, 47, 95, 0.3); + } + + &::placeholder { + color: #bbb; + opacity: 1; + } + } + + .porcentaje { + position: absolute; + right: 8px; + color: #555; + font-weight: bold; + font-size: 14px; + pointer-events: none; + top: 50%; + transform: translateY(-50%); + } +} + +/* Celdas especiales */ +.total-celda { + font-weight: bold; + color: #003e79; + background-color: #eef2f6; +} + +.total-error { + background-color: #ffcccc; + color: #a80000; +} + +/* Contenedor de tablas */ +.contenedor-tablas { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 10px; +} diff --git a/src/components/Equipo_Computo/pregunta2.module.scss b/src/components/Equipo_Computo/pregunta2.module.scss index 128c77e..028f1fd 100644 --- a/src/components/Equipo_Computo/pregunta2.module.scss +++ b/src/components/Equipo_Computo/pregunta2.module.scss @@ -3,9 +3,29 @@ flex-direction: column; padding: 0; margin: 0; - min-height: 100vh; background-color: #f4f4f4; } +.scanView_P1 { + padding: 20px; + width: 100%; +} +.contenedor-censo_p1 { + color: #fff; + background-color: #003e79; + border-radius: 4px; + margin-bottom: 15px; + padding: 15px; + font-size: 16px; +} + +.pregunta-cuadro_p1 { + background-color: #fff; + border-left: 6px solid #003e79; + border-radius: 8px; + padding: 15px; + font-size: 16px; +} + .scanView_P1 { padding: 20px; @@ -36,7 +56,6 @@ .main-content_P1 { display: flex; - min-height: 420px; } .tabs_P1 { @@ -110,6 +129,7 @@ font-weight: 600; font-size: 15px; text-align: center; + border-radius: 5px; min-width: 70px; } diff --git a/src/components/Equipo_Computo/pregunta3.module.scss b/src/components/Equipo_Computo/pregunta3.module.scss index d4cc6c4..b5c3440 100644 --- a/src/components/Equipo_Computo/pregunta3.module.scss +++ b/src/components/Equipo_Computo/pregunta3.module.scss @@ -1,8 +1,26 @@ +.contenedor-censo_P3 { + color: #fff; + background-color: #003e79; + border-radius: 4px; + margin-bottom: 15px; + padding: 15px; + font-size: 16px; +} + +.pregunta-cuadro_P3 { + background-color: #fff; + border-left: 6px solid #003e79; + border-radius: 8px; + padding: 15px; + font-size: 16px; + margin-bottom: 15px; +} + .scanView_P3 { padding: 20px; width: 100%; - display: flex; - justify-content: center; + background-color: white; + border-radius: 10px; .container_P3 { width: 100%; @@ -15,30 +33,7 @@ flex-direction: column; } - .header_P3 { - padding: 16px 20px; - background: #f7f7f7; - border-bottom: 1px solid #e0e0e0; - text-align: center; - - .titulo { - margin: 0 0 8px; - font-size: 20px; - color: #0056b3; - } - - .texto { - margin: 0 0 6px; - font-size: 16px; - font-weight: 500; - } - - .subtexto { - margin: 0; - font-size: 14px; - color: #666; - } - } + .mainContent_P3 { display: flex;