diff --git a/src/app/(Administrador)/pregunta1/page.tsx b/src/app/(Administrador)/pregunta1/page.tsx index 9f6eea1..af62fd0 100644 --- a/src/app/(Administrador)/pregunta1/page.tsx +++ b/src/app/(Administrador)/pregunta1/page.tsx @@ -1,15 +1,125 @@ -"use client" -import React from "react"; -import Pregunta1 from "@/components/Preguanta1"; -import Pregunta2 from "@/components/Pregunta2"; +"use client"; -export default function Page(){ - return( - <> -

Reporte General de Preguntas

- - - +import { useState } from "react"; +import "../../styles/layout/pregunta1.scss"; + +type OsEntry = { + os: string; + count: number; + isTotal?: boolean; +}; + +type PlatformKey = + | "pc-desktop" + | "apple-desktop" + | "pc-laptop" + | "apple-laptop" + | "servers"; + +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", + "pc-laptop": "Computadoras portátiles Plataforma PC", + "apple-laptop": "Computadoras portátiles Plataforma Apple", + servers: "Servidores de alto rendimiento", +}; + +export default function Pregunta1() { + const [activeTab, setActiveTab] = useState("pc-desktop"); + + const currentData = MOCK_DATA[activeTab]; + + return ( +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+ {/* Tabs */} +
+ {Object.entries(PLATFORM_LABELS).map(([key, label]) => ( + + ))} +
+ + {/* Data Table */} +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
); - -} \ No newline at end of file +} diff --git a/src/app/(Administrador)/pregunta9/pregunta9.css b/src/app/(Administrador)/pregunta9/pregunta1.css similarity index 100% rename from src/app/(Administrador)/pregunta9/pregunta9.css rename to src/app/(Administrador)/pregunta9/pregunta1.css diff --git a/src/app/(Administrador)/reporte/page.tsx b/src/app/(Administrador)/reporte/page.tsx index c651acd..523f2e6 100644 --- a/src/app/(Administrador)/reporte/page.tsx +++ b/src/app/(Administrador)/reporte/page.tsx @@ -1,82 +1,151 @@ "use client"; -import React, { useState } from "react"; -import Pregunta1 from "@/components/Preguanta1"; // Asegúrate que el nombre del archivo sea correcto -import Pregunta2 from "@/components/Pregunta2"; -import Pregunta9 from "@/components/Pregunta9"; +import { useState } from "react"; +import Pregunta1 from "@/components/Equipo_Computo/Pregunta1"; +import Pregunta1_1 from "@/components/Equipo_Computo/Pregunta1_1"; +import Pregunta2 from "@/components/Equipo_Computo/Pregunta2"; +import Pregunta2_1 from "@/components/Equipo_Computo/Pregunta2_1"; +import Pregunta3 from "@/components/Equipo_Computo/Pregunta3"; +import Pregunta3_1 from "@/components/Equipo_Computo/Pregunta3_1"; +import Pregunta3_2 from "@/components/Equipo_Computo/Pregunta3_2"; +import Pregunta3_3 from "@/components/Equipo_Computo/Pregunta3_3"; +import Pregunta3_4 from "@/components/Equipo_Computo/Pregunta3_4"; +import Pregunta3_5 from "@/components/Equipo_Computo/Pregunta3_5"; +import Pregunta7 from "@/components/Equipo_Computo/Pregunta7"; +import Pregunta1EP from "@/components/Perifericos/Pregunta1EP"; +import Pregunta2EP from "@/components/Perifericos/Pregunta2EP"; +import Pregunta4EP from "@/components/Perifericos/Pregunta4EP"; +import Pregunta7EP from "@/components/Perifericos/Pregunta7EP"; +import Pregunta9 from "@/components/Equipo_Computo/Pregunta9"; import "../../styles/layout/reporte.scss"; +type PreguntaKey = + | "pregunta1_1" + | "pregunta1" + | "pregunta1EP" + | "pregunta2" + | "pregunta2_1" + | "pregunta2EP" + | "pregunta3" + | "pregunta3_1" + | "pregunta3_2" + | "pregunta3_3" + | "pregunta3_4" + | "pregunta3_5" + | "pregunta4EP" + | "pregunta7" + | "pregunta7EP" + | "pregunta9"; + +const LABELS: Record = { + pregunta1_1: "Pregunta 1.1 ", + pregunta1: "Pregunta 1", + pregunta1EP: "Pregunta 1 EP", + pregunta2: "Pregunta 2", + pregunta2_1: "Pregunta 2.1", + pregunta2EP: "Pregunta 2 EP", + pregunta3: "Pregunta 3", + pregunta3_1: "Pregunta 3.1", + pregunta3_2: "Pregunta 3.2", + pregunta3_3: "Pregunta 3.3", + pregunta3_4: "Pregunta 3.4", + pregunta3_5: "Pregunta 3.5", + pregunta4EP: "Pregunta 4 EP", + pregunta7: "Pregunta 7", + pregunta7EP: "Pregunta 7 EP", + pregunta9: "Pregunta 9", +}; + +// Mapeo de fondo por pregunta (puedes personalizarlo) +const TAB_BACKGROUNDS: Record = { + pregunta1: "bg-blue", + pregunta1_1: "bg-gray", + pregunta1EP: "bg-gray", + pregunta2: "bg-gray", + pregunta2_1: "bg-gray", + pregunta2EP: "bg-gray", + pregunta3: "bg-gray", + pregunta3_1: "bg-gray", + pregunta3_2: "bg-gray", + pregunta3_3: "bg-gray", + pregunta3_4: "bg-gray", + pregunta3_5: "bg-gray", + pregunta4EP: "bg-gray", + pregunta7: "bg-gray", + pregunta7EP: "bg-gray", + pregunta9: "bg-blue", +}; + export default function Reporte() { - const [isOpen1, setIsOpen1] = useState(true); - const [isOpen2, setIsOpen2] = useState(true); - const [isOpen9, setIsOpen9] = useState(true); + const [activeTab, setActiveTab] = useState("pregunta1"); + + const renderPregunta = () => { + switch (activeTab) { + case "pregunta1_1": + return ; + case "pregunta1": + return ; + case "pregunta1EP": + return ; + case "pregunta2": + return ; + case "pregunta2_1": + return ; + case "pregunta2EP": + return ; + case "pregunta3": + return ; + case "pregunta3_1": + return ; + case "pregunta3_2": + return ; + case "pregunta3_3": + return ; + case "pregunta3_4": + return ; + case "pregunta3_5": + return ; + case "pregunta4EP": + return ; + case "pregunta7": + return ; + case "pregunta7EP": + return ; + case "pregunta9": + return ; + default: + return ( +
+ Contenido no disponible aún. +
+ ); + } + }; + + const currentBgClass = TAB_BACKGROUNDS[activeTab] || "bg-gray"; return ( -
-
- {/* Pregunta 1 */} -
-
- +
+ +
+ + +
+
+ {Object.entries(LABELS).map(([key, label]) => ( + + ))}
-
- -
-
- - {/* Pregunta 2 */} -
-
- -
-
- -
-
- - {/* Pregunta 9 */} -
-
- -
-
- +
+ {renderPregunta()}
diff --git a/src/app/styles/layout/__editar.scss b/src/app/styles/layout/__editar.scss deleted file mode 100644 index ed6daec..0000000 --- a/src/app/styles/layout/__editar.scss +++ /dev/null @@ -1,11 +0,0 @@ -.editar{ - - max-width: 1000px; - display: flex; - gap: 20px; -} - -.columna{ - display: flex ; - flex-direction: column; -} \ No newline at end of file diff --git a/src/app/styles/layout/pregunta2EP.scss b/src/app/styles/layout/pregunta2EP.scss deleted file mode 100644 index 342a28f..0000000 --- a/src/app/styles/layout/pregunta2EP.scss +++ /dev/null @@ -1,63 +0,0 @@ - -.container { - max-width: 1000px; - margin: 2% 10% 20% 10%; - background: white; - padding: 20px; - border: 1px solid #ddd; - border-radius: 6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); -} - -.header { - font-weight: bold; - margin-bottom: 20px; - padding-bottom: 10px; - border-bottom: 1px solid #eee; - font-size: 14px; -} - -.row { - display: flex; - gap: 10px; - align-items: flex-start; - flex-wrap: wrap; -} - -.item { - flex: 1; - min-width: 140px; -} - -label { - display: block; - margin-bottom: 5px; - font-size: 14px; - color: #333; -} - -input[type="text"] { - width: 100%; - padding: 8px; - border: 1px solid #ccc; - border-radius: 4px; - background-color: #f0f5ff; - font-size: 14px; - box-sizing: border-box; -} - -/* Estilos para los íconos de ayuda */ -.help-icon { - color: #007bff; - font-size: 12px; - cursor: help; - margin-left: 3px; -} - -/* Responsivo */ -@media (max-width: 768px) { - .row { - flex-direction: column; - gap: 10px; - } -} diff --git a/src/app/styles/layout/reporte.scss b/src/app/styles/layout/reporte.scss index ee6730b..f4841ab 100644 --- a/src/app/styles/layout/reporte.scss +++ b/src/app/styles/layout/reporte.scss @@ -1,75 +1,183 @@ -.accordion-content { - max-height: 0; - overflow: hidden; - transition: max-height 0.4s ease, opacity 0.4s ease; - opacity: 0; -} - -.accordion-content.open { - max-height: 1000px; /* Ajusta si tienes más contenido */ - opacity: 1; -} -.accordion-header-wrapper { +.scanView_reporte { padding: 20px; -} - -.accordion-header { - background-color: #f5f5f5; - border:none; width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background-color: #f5f5f5; - border-left: 6px solid #001f3f; - padding: 15px; - border-radius: 8px; - font-size: 16px; - cursor: pointer; - text-align: left; - transition: background-color 0.2s ease; + box-sizing: border-box; - &:hover { - background-color: #f0f2f5; - } - - .toggle-icon { - font-size: 14px; - color: #666; - transition: transform 0.3s ease; - display: inline-block; - width: 20px; - text-align: center; - } - - .toggle-icon.open { - transform: rotate(180deg); - } -} -.reporte-page { - .reporte-container { - padding: 40px; - background-color: #f9fafc; - } - - .titulo-reporte { - text-align: center; - font-size: 28px; - font-weight: bold; - color: #002855; - margin-bottom: 40px; - } - - .reporte-contenido { + .container_reporte { + width: calc(100% - 2%); + max-width: 1000px; + margin: 0 auto; + background: #fff; + border-radius: 10px; + + overflow: hidden; display: flex; flex-direction: column; - gap: 40px; } - .bloque-pregunta { - background-color: white; - border-radius: 12px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); - padding: 25px; + .header_reporte { + padding: 16px 20px; + background: #f8f9fa; + border-bottom: 1px solid #e0e0e0; + font-size: 15px; + color: #333; + text-align: center; + font-weight: 600; + letter-spacing: -0.2px; + } + + .main-content_reporte { + display: flex; + flex-direction: column; + min-height: 420px; + } + +.tabs_reporte { + display: flex; + border-bottom: 1px solid #ddd; + background: #f5f5f7; + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: #ccc transparent; + + &::-webkit-scrollbar { + height: 6px; + } + &::-webkit-scrollbar-thumb { + background: #ccc; + border-radius: 4px; } } + +.tab_reporte { + padding: 12px 22px; + font-size: 14px; + font-weight: 500; + color: #555; + background: #fff; + border: 1px solid #ddd; + border-bottom: none; + border-radius: 10px 10px 0 0; /* como Example 3 */ + cursor: pointer; + white-space: nowrap; + transition: all 0.25s ease; + margin-right: 4px; + position: relative; + + &:hover { + background: #f4f4f4; + border-color: #bbb; + } + + &.active { + background: #fff; + color: #9c27b0; /* tu color morado */ + border-color: #9c27b0; /* borde morado */ + font-weight: 600; + box-shadow: + 0 -2px 6px rgba(0,0,0,0.05), + inset 0 -3px 0 #fff; /* simula borde inferior */ + z-index: 5; + } +} + +/* ============================ + CONTENIDO DEL TAB + ============================ */ + +.data-table_reporte { + padding: 20px; + background-color: #f5f5f7; + + border: none; + min-height: 300px; + animation: fadein 0.2s ease; +} + +@keyframes fadein { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } +} + + // ✅ Contenido del tab con fondo igual al tab activo + .data-table_reporte { + flex: 1; + padding: 20px; + min-height: 0;// Separador entre tabs y contenido + + // Aplicamos fondo azul cuando el tab activo es "pregunta1", "pregunta2", etc. + // Puedes personalizar esto según necesites + + + + } + + .data-row_reporte { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: #f9f9f9; + border-radius: 6px; + margin-bottom: 8px; + transition: background 0.2s ease, transform 0.15s ease; + } + + .data-row_reporte:hover { + background: #f1f1f1; + transform: translateY(-1px); + } + + .os-name_reporte { + flex: 1; + font-size: 15px; + color: #333; + word-break: break-word; + } + + .count-box_reporte { + background: #ffffff; + border: 1px solid #0056b3; + color: #0056b3; + padding: 6px 14px; + font-weight: 600; + font-size: 15px; + text-align: center; + min-width: 70px; + border-radius: 6px; + } + + .total-row_reporte { + background: #eaf4ff !important; + font-weight: bold; + box-shadow: inset 0 1px 0 rgba(0, 86, 179, 0.15); + + + + + } +} + +/* ======== RESPONSIVE ======== */ +@media (max-width: 768px) { + .scanView_reporte .container_reporte { + width: calc(100% - 16px); + max-width: none; + border-radius: 12px; + } + + .scanView_reporte .tabs_reporte { + padding: 0; + gap: 0; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + justify-content: flex-start; + } + + .scanView_reporte .tab_reporte { + min-width: 120px; + padding: 10px 16px; + font-size: 13px; + border-radius: 10px 10px 0 0; + } +} \ No newline at end of file diff --git a/src/components/Equipo_Computo/Pregunta1.tsx b/src/components/Equipo_Computo/Pregunta1.tsx new file mode 100644 index 0000000..56819d6 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta1.tsx @@ -0,0 +1,129 @@ +"use client"; + +import { useState } from "react"; +import styles from "./pregunta1.module.scss"; + +type OsEntry = { + os: string; + count: number; + isTotal?: boolean; +}; + +type PlatformKey = + | "pc-desktop" + | "apple-desktop" + | "pc-laptop" + | "apple-laptop" + | "servers"; + +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", + "pc-laptop": "Computadoras portátiles Plataforma PC", + "apple-laptop": "Computadoras portátiles Plataforma Apple", + servers: "Servidores de alto rendimiento", +}; + +export default function Pregunta1() { + const [activeTab, setActiveTab] = useState("pc-desktop"); + + const currentData = MOCK_DATA[activeTab]; + + return ( +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+ {/* Tabs */} +
+ {Object.entries(PLATFORM_LABELS).map(([key, label]) => ( + + ))} +
+ + {/* Data Table */} +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta1_1.tsx b/src/components/Equipo_Computo/Pregunta1_1.tsx new file mode 100644 index 0000000..d16b1c3 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta1_1.tsx @@ -0,0 +1,242 @@ +"use client"; +import "./pregunta1_1.module.scss" + +export default function Pregunta1_1() { + return ( +
+
+

Censo Equipos de computo

+

+ Desglosa en cada renglon el número de equipos de cómputo dedicado por + cada categoría enlistada, de acuerdo con el perfil del usuario al que + se destina su uso primordialmente. +

+ +
+ + {/* ===================== */} + {/* 1. COMPUTADORAS DE ESCRITORIO */} + {/* ===================== */} +
+ + + + + + + + + + + + + + + + {/* Windows */} + + + + + + + + + + + {/* Linux */} + + + + + + + + + + + {/* Mac OS */} + + + + + + + + + + + {/* Totales */} + + + + + + + + + + + +
Computadoras de escritorioAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Windows10
Linux10
Mac OS10
Total101010101010
+
+ + {/* ===================== */} + {/* 2. COMPUTADORAS PORTÁTILES */} + {/* ===================== */} +
+ + + + + + + + + + + + + + + + {/* Windows */} + + + + + + + + + + + {/* Chromebook */} + + + + + + + + + + + {/* Mac OS */} + + + + + + + + + + + {/* Totales */} + + + + + + + +
Computadoras portátilesAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Windows10
Chromebook10
Mac OS10
Total101010101010
+
+ + {/* ===================== */} + {/* 3. TABLETAS */} + {/* ===================== */} +
+ + + + + + + + + + + + + + + + {/* Android */} + + + + + + + + + + + {/* iPad IOS */} + + + + + + + + + + + {/* Totales */} + + + + + + + +
TabletasAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Android10
iPad iOS10
Total101010101010
+
+ + {/* ===================== */} + {/* 4. ALTO RENDIMIENTO */} + {/* ===================== */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Alto RendimientoAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Servidores10
Total101010101010
+
+ +
+
+
+ ); +} diff --git a/src/components/Pregunta2.tsx b/src/components/Equipo_Computo/Pregunta2.tsx similarity index 100% rename from src/components/Pregunta2.tsx rename to src/components/Equipo_Computo/Pregunta2.tsx diff --git a/src/components/Equipo_Computo/Pregunta2_1.tsx b/src/components/Equipo_Computo/Pregunta2_1.tsx new file mode 100644 index 0000000..1e15cd9 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta2_1.tsx @@ -0,0 +1,59 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta2_1.module.scss"; // 👈 Importamos los estilos + +export default function Pregunta2() { + return ( +
+
+

PREGUNTA 2

+ +
+

+ Indique el número de equipos de impresión de acuerdo con la + población universitaria al que se destina su uso primordialmente. +

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + ← Volver a Pregunta 1 + + + + Ir a Pregunta 3 → + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3.tsx b/src/components/Equipo_Computo/Pregunta3.tsx new file mode 100644 index 0000000..27e6f21 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3.tsx @@ -0,0 +1,366 @@ +"use client"; + +import React, { useState } from "react"; +import Link from "next/link"; +import "./pregunta3.css"; + +export default function Pregunta3() { + const [activeTab, setActiveTab] = useState(0); + + const tabs = [ + "Computadoras de escritorio Plataforma PC", + "Computadoras de escritorio Plataforma Apple", + "Computadoras portátiles Plataforma PC", + "Computadoras portátiles Plataforma Apple", + "Alto rendimiento Servidores", + ]; + + // === DATOS DE CADA TABLA === + const data = [ + // === 1. PC Escritorio === + { + color: "#16a34a", + headerColor: "#15803d", + rows: [ + { + tipo: "Core i9 / Ryzen 9", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Core i7 / Ryzen 7", + alumnos: "15", + profesores: "8", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "23", + }, + { + tipo: "Core i5 / Ryzen 5", + alumnos: "10", + profesores: "5", + tecnicos: "", + investigadores: "", + administrativos: "2", + total: "17", + }, + ], + total: { + alumnos: "25", + profesores: "13", + tecnicos: "0", + investigadores: "0", + administrativos: "2", + total: "40", + }, + }, + // === 2. Apple Escritorio === + { + color: "#a855f7", + headerColor: "#7e22ce", + rows: [ + { + tipo: "Familia M3", + alumnos: "10", + profesores: "2", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "12", + }, + { + tipo: "Familia M2", + alumnos: "5", + profesores: "3", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "8", + }, + ], + total: { + alumnos: "15", + profesores: "5", + tecnicos: "0", + investigadores: "0", + administrativos: "0", + total: "20", + }, + }, + // === 3. PC Portátiles === + { + color: "#22c55e", + headerColor: "#15803d", + rows: [ + { + tipo: "Core i5 (12a generación)", + alumnos: "12", + profesores: "5", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "17", + }, + { + tipo: "Core i7 (13a generación)", + alumnos: "6", + profesores: "4", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "11", + }, + ], + total: { + alumnos: "18", + profesores: "9", + tecnicos: "0", + investigadores: "0", + administrativos: "1", + total: "28", + }, + }, + // === 4. Apple Portátiles === + { + color: "#9333ea", + headerColor: "#7e22ce", + rows: [ + { + tipo: "Familia M2", + alumnos: "35", + profesores: "3", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "38", + }, + { + tipo: "Familia M1", + alumnos: "", + profesores: "5", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "6", + }, + { + tipo: "i5 o equivalentes (12a generación en adelante)", + alumnos: "", + profesores: "14", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "14", + }, + ], + total: { + alumnos: "35", + profesores: "31", + tecnicos: "0", + investigadores: "0", + administrativos: "5", + total: "71", + }, + }, + // === 5. Servidores === + { + color: "#2563eb", + headerColor: "#1e40af", + rows: [ + { + tipo: "Xeon E3, E5, E7", + alumnos: "19", + profesores: "", + tecnicos: "", + investigadores: "16", + administrativos: "", + total: "35", + }, + { + tipo: "Xeon Bronce, Plata, Oro 6a generación", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + { + tipo: "Xeon Phi", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + ], + total: { + alumnos: "19", + profesores: "0", + tecnicos: "0", + investigadores: "16", + administrativos: "2", + total: "37", + }, + }, + ]; + + return ( +
+
+

PREGUNTA 3 (1/5 - 5/5)

+ +
+

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

+

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

+ + {/* === PESTAÑAS === */} +
+ {tabs.map((tab, index) => ( +
setActiveTab(index)} + > + {tab} +
+ ))} +
+ + {/* === TABLA === */} +
+ + + + + + + + + + + + + + + + + {data[activeTab].rows.map((item, i) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Tipo de procesador + + Población Beneficiada + + Total +
AlumnosProfesoresTécnicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {data[activeTab].total.total}
+ + +
+
+ +
+ + ← Volver al inicio + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3_1.tsx b/src/components/Equipo_Computo/Pregunta3_1.tsx new file mode 100644 index 0000000..abaedfb --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3_1.tsx @@ -0,0 +1,248 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta3_1.css"; + +export default function pregunta3_1() { + const data = [ + { + 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: "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: "15", + profesores: "16", + tecnicos: "", + investigadores: "", + administrativos: "52", + total: "97", + }, + { + tipo: "i7 o equivalentes (12a generación en adelante)", + alumnos: "29", + profesores: "16", + tecnicos: "", + investigadores: "", + administrativos: "52", + total: "97", + }, + { + tipo: "i5 o equivalentes (13a generación en adelante)", + alumnos: "107", + profesores: "3", + tecnicos: "", + investigadores: "", + administrativos: "8", + total: "118", + }, + { + tipo: "i5 o equivalentes (12a generación en adelante)", + alumnos: "250", + profesores: "59", + tecnicos: "3", + investigadores: "", + administrativos: "904", + total: "1216", + }, + { + tipo: "i3 o equivalentes (13a generación en adelante)", + alumnos: "3", + profesores: "1", + tecnicos: "", + investigadores: "", + administrativos: "12", + total: "16", + }, + { + tipo: "i3 o equivalentes (12a generación en adelante)", + alumnos: "36", + profesores: "19", + tecnicos: "2", + investigadores: "", + administrativos: "78", + total: "137", + }, + { + tipo: "i3 o equivalentes (11a generación en adelante)", + alumnos: "264", + profesores: "66", + tecnicos: "", + investigadores: "", + administrativos: "410", + total: "740", + }, + { + tipo: "Pentium Gold", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + { + tipo: "Pentium Serie J, G", + alumnos: "2", + profesores: "3", + tecnicos: "", + investigadores: "", + administrativos: "3", + total: "8", + }, + { + tipo: "Celeron Dual Core, Pentium Dual Core o anteriores", + alumnos: "25", + profesores: "40", + tecnicos: "", + investigadores: "", + administrativos: "56", + total: "121", + }, + ]; + + const total = { + alumnos: "774", + profesores: "227", + tecnicos: "5", + investigadores: "0", + administrativos: "838", + total: "1844", + }; + + return ( +
+
+

PREGUNTA 3 (1/5)

+ +
+

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

+

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

+ + {/* Pestañas */} +
+
+ Computadoras de escritorio Plataforma PC +
+
+ Computadoras de escritorio Plataforma Apple +
+
+ Computadoras portátiles Plataforma PC +
+
+ Computadoras portátiles Plataforma Apple +
+
Alto rendimiento Servidores
+
+ + {/* Tabla */} +
+ + + + + + + + + + + + + + + + + {data.map((item, i) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Plataforma PC
Tipo de procesador + 		+ Población Beneficiada + + Total +
AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {total.total}
+ +
+
+ +
+ + Pregunta 3 (2/5) → + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3_2.tsx b/src/components/Equipo_Computo/Pregunta3_2.tsx new file mode 100644 index 0000000..1fb4fe1 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3_2.tsx @@ -0,0 +1,270 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta3_2.css"; + +export default function Pregunta3_2() { + const data = [ + { + 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", + }, + ]; + + const total = { + alumnos: "249", + profesores: "14", + tecnicos: "3", + investigadores: "0", + administrativos: "37", + total: "303", + }; + + return ( +
+
+

PREGUNTA 3 (2/5)

+ +
+

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

+

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

+ + {/* === PESTAÑAS === */} +
+
+ Computadoras de escritorio Plataforma PC +
+
+ Computadoras de escritorio Plataforma Apple +
+
+ Computadoras portátiles Plataforma PC +
+
+ Computadoras portátiles Plataforma Apple +
+
Alto rendimiento Servidores
+
+ + {/* === TABLA === */} +
+ + + + + + + + + + + + + + + + + {data.map((item, index) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Plataforma Apple
Tipo de procesador + 		+ Población Beneficiada + + Total +
AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {total.total}
+ +
+
+ +
+ + Pregunta 3 (3/5) → + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3_3.tsx b/src/components/Equipo_Computo/Pregunta3_3.tsx new file mode 100644 index 0000000..96acfef --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3_3.tsx @@ -0,0 +1,271 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta3_3.css"; + +export default function Pregunta3_3() { + const data = [ + { + 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: "i9 o equivalentes (13a generación en adelante)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "i7 o equivalentes (12a generación en adelante)", + alumnos: "16", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "27", + total: "43", + }, + { + tipo: "i7 o equivalentes (11a generación)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + { + tipo: "i5 o equivalentes (13a generación en adelante)", + alumnos: "", + profesores: "1", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "2", + }, + { + tipo: "i5 o equivalentes (12a generación en adelante)", + alumnos: "146", + profesores: "34", + tecnicos: "", + investigadores: "", + administrativos: "42", + total: "222", + }, + { + tipo: "i5 o equivalentes (11a generación en adelante)", + alumnos: "", + profesores: "2", + tecnicos: "", + investigadores: "", + administrativos: "15", + total: "19", + }, + { + tipo: "i3 o equivalentes (13a generación en adelante)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "12", + total: "12", + }, + { + tipo: "i3 o equivalentes (12a generación en adelante)", + alumnos: "", + profesores: "8", + tecnicos: "", + investigadores: "", + administrativos: "23", + total: "31", + }, + { + tipo: "i3 o equivalentes (11a generación en adelante)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Pentium Dual Core o anteriores", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Celeron (equivalente 2018 hasta la fecha)", + alumnos: "299", + profesores: "8", + tecnicos: "", + investigadores: "", + administrativos: "4", + total: "311", + }, + { + tipo: "Celeron anteriores", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Core2 Duo, Quad Core, Pentium Dual Core o anteriores", + alumnos: "4", + profesores: "4", + tecnicos: "", + investigadores: "", + administrativos: "3", + total: "11", + }, + ]; + + const total = { + alumnos: "445", + profesores: "132", + tecnicos: "0", + investigadores: "0", + administrativos: "139", + total: "716", + }; + + return ( +
+
+

PREGUNTA 3 (3/5)

+ +
+

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

+

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

+ + {/* === PESTAÑAS === */} +
+
+ Computadoras de escritorio Plataforma PC +
+
+ Computadoras de escritorio Plataforma Apple +
+
+ Computadoras portátiles Plataforma PC +
+
+ Computadoras portátiles Plataforma Apple +
+
Alto rendimiento Servidores
+
+ + {/* === TABLA === */} +
+ + + + + + + + + + + + + + + + + + {data.map((item, index) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Plataforma PC
Tipo de procesador + 		+ Población Beneficiada + + Total +
AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {total.total}
+ +
+
+ +
+ + Pregunta 3 (4/5) → + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3_4.tsx b/src/components/Equipo_Computo/Pregunta3_4.tsx new file mode 100644 index 0000000..c968b82 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3_4.tsx @@ -0,0 +1,257 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta3_4.css"; + +export default function Pregunta3_4() { + const data = [ + { + 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: "", + total: "0", + }, + { + tipo: "Familia M3", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Familia M2", + alumnos: "35", + profesores: "3", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "38", + }, + { + tipo: "Familia M1", + alumnos: "", + profesores: "5", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "6", + }, + { + 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: "", + total: "0", + }, + { + tipo: "i7 o equivalentes (11a generación en adelante)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "i5 o equivalentes (13a generación en adelante)", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "i5 o equivalentes (12a generación en adelante)", + alumnos: "", + profesores: "14", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "14", + }, + { + tipo: "i5 o equivalentes (11a generación en adelante)", + alumnos: "", + profesores: "9", + tecnicos: "", + investigadores: "", + administrativos: "4", + total: "13", + }, + { + tipo: "Core2 Mac, Quad Core o anteriores", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + ]; + + const total = { + alumnos: "35", + profesores: "31", + tecnicos: "0", + investigadores: "0", + administrativos: "5", + total: "71", + }; + + return ( +
+

PREGUNTA 3 (4/5)

+ +
+

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

+ + Presione cada pestaña para ingresar la información. + +
+ + {/* === PESTAÑAS === */} +
+ + + + + +
+ + {/* === TABLA === */} +
+ + + + + + + + + + + + + + + + + + {data.map((item, index) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Plataforma Apple
Tipo de procesador + 		+ Población Beneficiada + + Total +
AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {total.total}
+ + +
+ +
+ + Pregunta 3 (5/5) → + +
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta3_5.tsx b/src/components/Equipo_Computo/Pregunta3_5.tsx new file mode 100644 index 0000000..ab38528 --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta3_5.tsx @@ -0,0 +1,209 @@ +"use client"; + +import React from "react"; +import Link from "next/link"; +import "./pregunta3_5.css"; + +export default function Pregunta3_5() { + const data = [ + { + tipo: "Xeon 6", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Xeon Bronce, Plata, Oro 3a generación", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Xeon Bronce, Plata, Oro 4a generación", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Xeon Bronce, Plata, Oro 5a generación", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + { + tipo: "Xeon Bronce, Plata, Oro 6a generación", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + { + tipo: "Xeon E3, E5, E7", + alumnos: "19", + profesores: "", + tecnicos: "", + investigadores: "16", + administrativos: "", + total: "35", + }, + { + tipo: "Xeon Phi", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "1", + total: "1", + }, + { + tipo: "Xeon o anteriores", + alumnos: "", + profesores: "", + tecnicos: "", + investigadores: "", + administrativos: "", + total: "0", + }, + ]; + + const total = { + alumnos: "19", + profesores: "0", + tecnicos: "0", + investigadores: "16", + administrativos: "2", + total: "37", + }; + + return ( +
+
+

PREGUNTA 3 (5/5)

+ +
+

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

+

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

+ + {/* === PESTAÑAS === */} +
+
+ Computadoras de escritorio Plataforma PC +
+
+ Computadoras de escritorio Plataforma Apple +
+
+ Computadoras portátiles Plataforma PC +
+
+ Computadoras portátiles Plataforma Apple +
+
Alto rendimiento Servidores
+
+ + {/* === TABLA === */} +
+ + + + + + + + + + + + + + + + + + {data.map((item, index) => ( + + + + + + + + + + ))} + + + + + + + + + + +
+ Servidores
Tipo de procesador + 		+ Población Beneficiada + + Total +
AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativos
{item.tipo} + + + + + + + + + + {item.total}
Total + + + + + + + + + + {total.total}
+ + +
+
+ +
+ + ← Volver al inicio + +
+
+
+ ); +} diff --git a/src/components/Equipo_Computo/Pregunta7.tsx b/src/components/Equipo_Computo/Pregunta7.tsx new file mode 100644 index 0000000..b0b176d --- /dev/null +++ b/src/components/Equipo_Computo/Pregunta7.tsx @@ -0,0 +1,89 @@ +"use client"; +import React, { useState } from "react"; +import "./pregunta7.css"; + +export default function Pregunta7() { + const [datos, setDatos] = useState([ + { nombre: "Impresión", valores: ["", "", "", ""] }, + { nombre: "Digitalización", valores: ["", "", "", ""] }, + ]); + + const [garantia, setGarantia] = useState({ + escritorio: "", + portatil: "", + altoRendimiento: "", + }); + + // Función para actualizar datos de Pregunta 7 + const handleChange = (filaIndex: number, colIndex: number, value: string) => { + const nuevosDatos = [...datos]; + nuevosDatos[filaIndex].valores[colIndex] = value; + setDatos(nuevosDatos); + }; + + // Función para calcular total de cada fila en Pregunta 7 + const calcularTotal = (valores: string[]) => + valores.reduce((acc, val) => acc + (Number(val) || 0), 0); + + return ( +
+ {/* Pregunta 7 */} +
+ Censo de equipos periféricos - Estado del equipo periférico (impresión y + digitalización.) +
+ +
+ 7. Calcule porcentualmente (%) la antiguedad que tienen los equipos + periféricos del área universitaria. * (Requerido en el caso de contar + con Equipo de impresión o digitalización.) +
+ +
+ + + + + + + + + + + + + {datos.map((fila, filaIndex) => { + const total = calcularTotal(fila.valores); + return ( + + + {fila.valores.map((valor, colIndex) => ( + + ))} + + + ); + })} + +
% Antiguedad de los equiposMenor a 2 añosEntre 2 y 3 añosEntre 4 y 5 añosMayor a 6 añosTotal
{fila.nombre} +
+ + handleChange(filaIndex, colIndex, e.target.value) + } + /> + % +
+ 		100 ? "total-error" : "" + }`} + > + {total.toFixed(2)}% +
+
+
+ ); +} diff --git a/src/components/Pregunta9.tsx b/src/components/Equipo_Computo/Pregunta9.tsx similarity index 100% rename from src/components/Pregunta9.tsx rename to src/components/Equipo_Computo/Pregunta9.tsx diff --git a/src/components/Equipo_Computo/pregunta1.module.scss b/src/components/Equipo_Computo/pregunta1.module.scss new file mode 100644 index 0000000..34b9b12 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta1.module.scss @@ -0,0 +1,137 @@ +.dashboardContainer_P1 { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + min-height: 100vh; + background-color: #f4f4f4; +} + +.scanView_P1 { + padding: 20px; + width: 100%; + display: flex; + justify-content: center; + + .container_P1 { + width: 100%; + max-width: 900px; + background: #fff; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); + overflow: hidden; + display: flex; + flex-direction: column; + border: 1px solid #ddd; + } + + .header_P1 { + padding: 16px 20px; + background: #f7f7f7; + border-bottom: 1px solid #e0e0e0; + font-size: 15px; + color: #0056b3; + text-align: center; + font-weight: 500; + } + + .main-content_P1 { + display: flex; + min-height: 420px; + } + + .tabs_P1 { + width: 230px; + background-color: #fafafa; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + + .tab_P1 { + padding: 12px 16px; + cursor: pointer; + border-right: 1px solid #e0e0e0; + color: #555; + transition: all 0.3s ease; + border-left: 4px solid transparent; + font-size: 15px; + font-weight: 500; + background: none; + border: none; + text-align: left; + } + + .tab_P1:hover { + background-color: #f0f0f0; + color: #000; + } + + .active_P1 { + background-color: #fff; + border-left: 4px solid #0056b3; + border-right: none; + border-bottom: 1px solid #0056b3; + color: #0056b3; + font-weight: 600; + } + + .data-table-wrapper_P1 { + flex: 1; + padding: 20px; + } + + .data-table_P1 { + width: 100%; + } + + .data-row_P1 { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: #f9f9f9; + transition: background 0.2s ease; + } + + .data-row_P1:hover { + background: #f1f1f1; + } + + .os-name_P1 { + flex: 1; + font-size: 15px; + color: #333; + } + + .count-box_P1 { + background: #ffffff; + border: 1px solid #0056b3; + padding: 6px 14px; + font-weight: 600; + font-size: 15px; + text-align: center; + min-width: 70px; + } + + .total-row_P1 { + background: #eaf4ff; + font-weight: bold; + + .count-box_P1 { + color: #0056b3; + } + } +} + +@media (max-width: 700px) { + .scanView_P1 .tabs_P1 { + width: 160px; + } + + .scanView_P1 .tab_P1 { + font-size: 12px; + padding: 10px 12px; + text-align: left; + } +} diff --git a/src/app/styles/layout/pregunta1.scss b/src/components/Equipo_Computo/pregunta1_1.module.scss similarity index 82% rename from src/app/styles/layout/pregunta1.scss rename to src/components/Equipo_Computo/pregunta1_1.module.scss index 35dea0b..676f3b6 100644 --- a/src/app/styles/layout/pregunta1.scss +++ b/src/components/Equipo_Computo/pregunta1_1.module.scss @@ -50,18 +50,18 @@ } .tab { - padding: auto 16px; - cursor: pointer; - border-right: 1px solid #e0e0e0; - color: #555; - transition: all 0.3s ease; - border-left: 4px solid transparent; - font-size: 15px; - font-weight: 500; - background: none; - border: none; - text-align: left; - } + padding: 12px 16px; /* ← CORREGIDO: "auto" no es válido */ + cursor: pointer; + border-right: 1px solid #e0e0e0; + color: #555; + transition: all 0.3s ease; + border-left: 4px solid transparent; + font-size: 15px; + font-weight: 500; + background: none; + border: none; + text-align: left; +} .tab:hover { background-color: #f0f0f0; @@ -127,18 +127,13 @@ /* ======== RESPONSIVE ======== */ @media (max-width: 700px) { - .scanView .main-content { - flex-direction: column; - } - .scanView .tabs { - flex-direction: row; - width: 100%; + width: 160px; } .scanView .tab { - flex: 1; - text-align: center; - font-size: 13px; + font-size: 12px; + padding: 10px 12px; + text-align: left; } } \ No newline at end of file diff --git a/src/components/pregunta2.scss b/src/components/Equipo_Computo/pregunta2.scss similarity index 98% rename from src/components/pregunta2.scss rename to src/components/Equipo_Computo/pregunta2.scss index 3ea9a3c..7c9f318 100644 --- a/src/components/pregunta2.scss +++ b/src/components/Equipo_Computo/pregunta2.scss @@ -93,7 +93,6 @@ background-color: #fff; border-left: 4px solid #0056b3; border-right: none; - border-bottom: 1px solid #0056b3; color: #0056b3; font-weight: 600; } diff --git a/src/components/Equipo_Computo/pregunta2_1.module.scss b/src/components/Equipo_Computo/pregunta2_1.module.scss new file mode 100644 index 0000000..151c7db --- /dev/null +++ b/src/components/Equipo_Computo/pregunta2_1.module.scss @@ -0,0 +1,166 @@ +/* Contenedor principal del reporte */ +.reporte-layout { + display: flex; + flex-wrap: wrap; + gap: 50px; + padding: 20px; + max-width: 1400px; + margin: 0 20px; + + @media (max-width: 768px) { + flex-direction: column; + align-items: center; + } +} + +/* Panel izquierdo */ +.panel-izquierdo { + flex: 1; + min-width: 300px; + + @media (max-width: 768px) { + width: 100%; + max-width: 500px; + } +} + +/* Panel derecho */ +.panel-derecho { + width: 320px; + min-width: 280px; + + @media (max-width: 768px) { + width: 100%; + max-width: 500px; + } +} + +.titulo-reporte { + font-weight: bold; + font-size: 24px; + text-align: center; + margin-bottom: 15px; + color: #0056b3; +} + +/* Buscador */ +.formBuscar { + display: flex; + gap: 10px; + margin-bottom: 20px; + align-items: center; + flex-wrap: wrap; + + input { + padding: 8px 12px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 16px; + flex: 1; + min-width: 200px; + } + + button { + background-color: #0056b3; + color: white; + border: none; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + + &:hover { + background-color: #0056b3; + } + } +} + +/* Tabla de reporte */ +.tabla-rec { + border: 2px solid #0056b3; + border-radius: 10px; + padding: 15px; + background-color: #f9f9f9; + min-height: 400px; + width: 100%; + box-sizing: border-box; +} + +/* Filtro */ +.filtro-rec { + border: 2px solid #0056b3; + border-radius: 10px; + padding: 15px; + background-color: #f9f9f9; + font-family: Arial, sans-serif; + width: 100%; + box-sizing: border-box; + + .titulo-rec { + font-weight: bold; + margin-top: 0; + margin-bottom: 10px; + color: #0056b3; + } + + label { + display: block; + margin-top: 12px; + font-weight: bold; + font-size: 14px; + } + + select { + width: 100%; + padding: 8px; + margin-top: 4px; + border: 1px solid #0056b3; + border-radius: 5px; + font-size: 14px; + } +} + +/* Botones del filtro */ +.botones-filtro { + display: flex; + gap: 10px; + margin-top: 20px; + + .aplicar, + .limpiar { + flex: 1; + padding: 8px; + border: none; + border-radius: 4px; + color: white; + font-size: 14px; + cursor: pointer; + } + + .aplicar { + background-color: #0056b3; + } + + .limpiar { + background-color: #ffb700; + color: #0056b3; + font-weight: bold; + } +} + +/* Botón descargar */ +.boton-descargar { + margin-top: 25px; + padding: 10px 20px; + font-size: 16px; + border: none; + background-color: #0056b3; + color: white; + border-radius: 4px; + cursor: pointer; + width: 100%; + + @media (max-width: 768px) { + max-width: 500px; + } +} diff --git a/src/components/Equipo_Computo/pregunta3.css b/src/components/Equipo_Computo/pregunta3.css new file mode 100644 index 0000000..1c0a843 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3.css @@ -0,0 +1,167 @@ +/* === CONTENEDOR GENERAL === */ +.pregunta-page { + display: flex; + justify-content: center; + padding: 2rem; +} + +.pregunta-container { + width: 100%; + max-width: 1100px; +} + +.pregunta-titulo { + text-align: center; + color: #1e3a8a; + margin-bottom: 1.2rem; + font-size: 1.6rem; + font-weight: 700; +} + +.pregunta-texto { + font-size: 1rem; + font-weight: 500; + margin-bottom: 0.5rem; +} + +.pregunta-subtexto { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 1rem; +} + +/* === PESTAÑAS === */ +.tab-container { + display: flex; + overflow-x: auto; + border-bottom: 2px solid #e5e7eb; + margin-bottom: 1.5rem; +} + +.tab { + padding: 0.8rem 1.2rem; + cursor: pointer; + white-space: nowrap; + font-weight: 500; + border-radius: 8px 8px 0 0; + transition: all 0.2s ease; + margin-right: 0.25rem; +} + +.tab.active { + font-weight: 600; + background-color: #f3f4f6; +} + +.tab.inactive { + color: #6b7280; + background-color: #ffffff; +} + +.tab.inactive:hover { + background-color: #f9fafb; +} + +/* === TABLA === */ +.tabla-container { + overflow-x: auto; + position: relative; +} + +.tabla { + width: 100%; + border-collapse: collapse; + min-width: 950px; + font-size: 0.85rem; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); +} + +.tabla th { + padding: 0.7rem 0.5rem; + text-align: center; + color: white; + font-weight: 600; + border: 1px solid #d1d5db; +} + +.tabla .sub-header { + background-color: #9ca3af; +} + +.tabla td { + border: 1px solid #e5e7eb; + text-align: center; + vertical-align: middle; +} + +.tabla tr:hover td { + background-color: #f9fafb; +} + +.tipo-procesador { + text-align: left; + font-weight: 500; + padding: 0.6rem 0.5rem; + background-color: #f9fafb; + color: #374151; +} + +.tabla input[type="text"] { + width: 100%; + padding: 0.45rem 0.3rem; + border: none; + background-color: #f3f4f6; + text-align: center; + box-sizing: border-box; + color: #374151; +} + +.total-celda { + font-weight: 600; + color: #111827; + background-color: #eef2ff; +} + +.fila-total td { + background-color: #e0e7ff; + font-weight: 700; +} + +/* === BOTONES === */ +.boton-consultar { + margin-top: 1rem; + background-color: #10b981; + color: white; + padding: 0.6rem 1.2rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3); + transition: background-color 0.2s; + float: right; +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-contenedor { + margin-top: 4rem; + text-align: right; +} + +.boton.volver { + background-color: #2563eb; + color: white; + padding: 0.7rem 1.4rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); + transition: background-color 0.2s; +} + +.boton.volver:hover { + background-color: #1d4ed8; +} diff --git a/src/components/Equipo_Computo/pregunta3_1.css b/src/components/Equipo_Computo/pregunta3_1.css new file mode 100644 index 0000000..59fba05 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3_1.css @@ -0,0 +1,171 @@ +/* === CONTENEDOR GENERAL === */ +.pregunta-page { + display: flex; + justify-content: center; + padding: 2rem 0; +} + +.pregunta-container { + width: 90%; + max-width: 1100px; + background-color: white; + padding: 1.5rem; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +/* === TITULOS === */ +.pregunta-titulo { + text-align: center; + color: #0a2d6e; + margin-bottom: 1rem; + font-size: 1.6rem; + font-weight: 700; +} + +.pregunta-texto { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.2rem; + color: #1f2937; +} + +.pregunta-subtexto { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 1rem; +} + +/* === PESTAÑAS === */ +.tab-container { + display: flex; + border-bottom: 3px solid #d1d5db; + margin-bottom: 1rem; +} + +.tab { + padding: 0.6rem 1rem; + cursor: pointer; + font-weight: 600; + border-radius: 8px 8px 0 0; + margin-right: 0.25rem; + font-size: 0.9rem; +} + +.tab.active { + color: #1e40af; + border: 2px solid #1e40af; + border-bottom: none; + background-color: #f3f4f6; +} + +.tab.inactive { + color: #6b7280; + background-color: #fff; +} + +/* === TABLA === */ +.tabla-wrapper { + overflow-x: auto; + display: flex; + justify-content: center; +} + +.tabla-pc { + border-collapse: collapse; + width: 95%; + text-align: center; + font-size: 0.83rem; +} + +.tabla-pc th, +.tabla-pc td { + border: 1px solid #d1d5db; + padding: 0.4rem; +} + +.header-procesador, +.header-total { + background-color: #3b82f6; + color: white; + font-weight: 700; +} + +.header-poblacion { + background-color: #9333ea; + color: white; + font-weight: 700; +} + +.tabla-pc th { + text-align: center; +} + +.tipo-procesador { + text-align: left; + background-color: #f9fafb; + font-weight: 600; + padding-left: 0.5rem; +} + +.tabla-pc input { + width: 60px; + text-align: center; + border: none; + background-color: #f3f4f6; + border-radius: 4px; + padding: 0.2rem; + font-size: 0.8rem; + color: #111827; +} + +.total-celda { + background-color: #e0f2fe; + font-weight: 600; + color: #1e3a8a; +} + +.fila-total td { + background-color: #bfdbfe; + font-weight: 700; +} + +.fila-total .total-celda { + background-color: #93c5fd; +} + +/* === BOTONES === */ +.boton-consultar { + margin-top: 1rem; + background-color: #10b981; + color: white; + padding: 0.5rem 1rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + float: right; + box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3); +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-contenedor { + text-align: right; + margin-top: 4rem; +} + +.boton.siguiente { + background-color: #2563eb; + color: white; + padding: 0.6rem 1.2rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; +} + +.boton.siguiente:hover { + background-color: #1e3a8a; +} diff --git a/src/components/Equipo_Computo/pregunta3_2.css b/src/components/Equipo_Computo/pregunta3_2.css new file mode 100644 index 0000000..20173f9 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3_2.css @@ -0,0 +1,170 @@ +/* === ESTILOS PREGUNTA 3 (2/5) - Plataforma Apple === */ + +.pregunta-titulo { + text-align: center; + color: #7e22ce; + margin-bottom: 1.2rem; + font-size: 1.5rem; + font-weight: 700; +} + +.pregunta-texto { + font-size: 1rem; + font-weight: 500; + margin-bottom: 0.5rem; +} + +.pregunta-subtexto { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 1rem; +} + +/* === PESTAÑAS === */ +.tab-container { + display: flex; + overflow-x: auto; + border-bottom: 2px solid #e5e7eb; + margin-bottom: 1.5rem; +} + +.tab { + padding: 0.8rem 1.2rem; + cursor: pointer; + white-space: nowrap; + font-weight: 500; + border-radius: 8px 8px 0 0; + transition: all 0.2s ease; + margin-right: 0.25rem; +} + +.tab.active { + color: #7e22ce; + border-bottom: 3px solid #7e22ce; + background-color: #f3f4f6; +} + +.tab.inactive { + color: #6b7280; + background-color: #ffffff; +} + +.tab.inactive:hover { + color: #7e22ce; + background-color: #f9fafb; +} + +/* === TABLA === */ +.tabla-apple-container { + overflow-x: auto; + margin-bottom: 2rem; + position: relative; +} + +.tabla-apple { + width: 100%; + border-collapse: collapse; + min-width: 950px; + font-size: 0.85rem; +} + +.tabla-apple th { + padding: 0.7rem 0.5rem; + text-align: center; + color: white; + font-weight: 600; + border: 1px solid #d1d5db; +} + +.tabla-apple .header-procesador, +.tabla-apple .header-total { + background-color: #9333ea; +} + +.tabla-apple .header-poblacion { + background-color: #7e22ce; +} + +.tabla-apple .sub-header { + background-color: #a855f7; + color: white; +} + +.tabla-apple td { + border: 1px solid #e5e7eb; + text-align: center; + vertical-align: middle; +} + +.tabla-apple .tipo-procesador { + text-align: left; + font-weight: 500; + padding: 0.6rem 0.5rem; + background-color: #faf5ff; + color: #4b5563; +} + +.tabla-apple input[type="text"] { + width: 100%; + padding: 0.45rem 0.3rem; + border: none; + background-color: #f3f4f6; + text-align: center; + box-sizing: border-box; + color: #374151; +} + +.tabla-apple .total-celda { + background-color: #f3e8ff; + font-weight: 600; + color: #7e22ce; +} + +.tabla-apple .fila-total td { + background-color: #e9d5ff; + font-weight: 700; +} + +.tabla-apple .fila-total .total-celda { + background-color: #d8b4fe; +} + +/* === BOTONES === */ +.boton-consultar { + position: absolute; + bottom: -3.5rem; + right: 0; + background-color: #10b981; + color: white; + padding: 0.6rem 1.2rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3); + transition: background-color 0.2s; +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-contenedor { + margin-top: 5rem; + text-align: right; +} + +.boton.siguiente { + background-color: #9333ea; + color: white; + padding: 0.7rem 1.4rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + box-shadow: 0 2px 5px rgba(147, 51, 234, 0.3); + transition: background-color 0.2s; +} + +.boton.siguiente:hover { + background-color: #7e22ce; +} diff --git a/src/components/Equipo_Computo/pregunta3_3.css b/src/components/Equipo_Computo/pregunta3_3.css new file mode 100644 index 0000000..663c736 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3_3.css @@ -0,0 +1,170 @@ +/* === ESTILOS PREGUNTA 3 (3/5) - Portátiles Plataforma PC === */ + +.pregunta-titulo { + text-align: center; + color: #dc2626; + margin-bottom: 1.2rem; + font-size: 1.5rem; + font-weight: 700; +} + +.pregunta-texto { + font-size: 1rem; + font-weight: 500; + margin-bottom: 0.5rem; +} + +.pregunta-subtexto { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 1rem; +} + +/* === PESTAÑAS === */ +.tab-container { + display: flex; + overflow-x: auto; + border-bottom: 2px solid #e5e7eb; + margin-bottom: 1.5rem; +} + +.tab { + padding: 0.8rem 1.2rem; + cursor: pointer; + white-space: nowrap; + font-weight: 500; + border-radius: 8px 8px 0 0; + transition: all 0.2s ease; + margin-right: 0.25rem; +} + +.tab.active { + color: #dc2626; + border-bottom: 3px solid #dc2626; + background-color: #fef2f2; +} + +.tab.inactive { + color: #6b7280; + background-color: #ffffff; +} + +.tab.inactive:hover { + color: #dc2626; + background-color: #f9fafb; +} + +/* === TABLA === */ +.tabla-pc-container { + overflow-x: auto; + margin-bottom: 2rem; + position: relative; +} + +.tabla-pc { + width: 100%; + border-collapse: collapse; + min-width: 950px; + font-size: 0.85rem; +} + +.tabla-pc th { + padding: 0.7rem 0.5rem; + text-align: center; + color: white; + font-weight: 600; + border: 1px solid #d1d5db; +} + +.tabla-pc .header-procesador, +.tabla-pc .header-total { + background-color: #b91c1c; +} + +.tabla-pc .header-poblacion { + background-color: #dc2626; +} + +.tabla-pc .sub-header { + background-color: #ef4444; + color: white; +} + +.tabla-pc td { + border: 1px solid #e5e7eb; + text-align: center; + vertical-align: middle; +} + +.tabla-pc .tipo-procesador { + text-align: left; + font-weight: 500; + padding: 0.6rem 0.5rem; + background-color: #fef2f2; + color: #4b5563; +} + +.tabla-pc input[type="text"] { + width: 100%; + padding: 0.45rem 0.3rem; + border: none; + background-color: #f3f4f6; + text-align: center; + box-sizing: border-box; + color: #374151; +} + +.tabla-pc .total-celda { + background-color: #fee2e2; + font-weight: 600; + color: #b91c1c; +} + +.tabla-pc .fila-total td { + background-color: #fecaca; + font-weight: 700; +} + +.tabla-pc .fila-total .total-celda { + background-color: #fca5a5; +} + +/* === BOTONES === */ +.boton-consultar { + position: absolute; + bottom: -3.5rem; + right: 0; + background-color: #10b981; + color: white; + padding: 0.6rem 1.2rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3); + transition: background-color 0.2s; +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-contenedor { + margin-top: 5rem; + text-align: right; +} + +.boton.siguiente { + background-color: #b91c1c; + color: white; + padding: 0.7rem 1.4rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + box-shadow: 0 2px 5px rgba(220, 38, 38, 0.3); + transition: background-color 0.2s; +} + +.boton.siguiente:hover { + background-color: #dc2626; +} diff --git a/src/components/Equipo_Computo/pregunta3_4.css b/src/components/Equipo_Computo/pregunta3_4.css new file mode 100644 index 0000000..1f94b1f --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3_4.css @@ -0,0 +1,166 @@ +/* === CONTENEDOR GENERAL === */ +.pregunta3-container { + max-width: 1100px; + margin: 2rem auto; + padding: 2rem; + background: #fff; + border-radius: 16px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + font-family: "Inter", sans-serif; +} + +.pregunta3-titulo { + text-align: left; + font-size: 1.3rem; + font-weight: 700; + color: #6d28d9; + margin-bottom: 1rem; +} + +.pregunta3-descripcion p { + font-size: 1rem; + margin-bottom: 0.3rem; +} + +.subtexto { + font-size: 0.9rem; + color: #6b7280; +} + +/* === TABS === */ +.tabs { + display: flex; + flex-wrap: wrap; + margin: 1rem 0 1.5rem; + border-bottom: 2px solid #e5e7eb; +} + +.tab { + padding: 0.8rem 1.1rem; + font-size: 0.9rem; + border: none; + cursor: pointer; + background: #fff; + color: #6b7280; + transition: all 0.2s ease; + border-radius: 8px 8px 0 0; + margin-right: 0.25rem; +} + +.tab.active { + background: #f3f4f6; + color: #7e22ce; + border-bottom: 3px solid #9333ea; +} + +.tab.inactive:hover { + background: #f9fafb; + color: #9333ea; +} + +/* === TABLA === */ +.tabla-wrapper { + overflow-x: auto; + position: relative; + margin-bottom: 2.5rem; +} + +.tabla-pregunta3 { + width: 100%; + border-collapse: collapse; + min-width: 950px; + font-size: 0.85rem; +} + +.tabla-pregunta3 th, +.tabla-pregunta3 td { + border: 1px solid #e5e7eb; + text-align: center; + padding: 0.5rem; +} + +.header-procesador, +.header-total { + background-color: #9333ea; + color: #fff; + font-weight: 600; +} + +.header-poblacion { + background-color: #7e22ce; + color: #fff; + font-weight: 600; +} + +.tabla-pregunta3 th { + padding: 0.7rem; +} + +.tabla-pregunta3 input { + width: 100%; + padding: 0.4rem; + border: none; + background-color: #f3f4f6; + text-align: center; + font-size: 0.85rem; +} + +.tipo-procesador { + text-align: left; + background-color: #faf5ff; + font-weight: 500; + color: #4b5563; +} + +.celda-total { + background-color: #f3e8ff; + font-weight: 600; + color: #6b21a8; +} + +.fila-total td { + background-color: #e9d5ff; + font-weight: 700; +} + +.fila-total .celda-total.final { + background-color: #d8b4fe; +} + +/* === BOTONES === */ +.boton-consultar { + position: absolute; + bottom: -3rem; + right: 0; + background-color: #10b981; + color: white; + padding: 0.6rem 1.1rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + transition: all 0.2s; +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-siguiente { + text-align: right; + margin-top: 4rem; +} + +.next { + background-color: #9333ea; + color: white; + padding: 0.7rem 1.4rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + transition: 0.2s; +} + +.next:hover { + background-color: #7e22ce; +} diff --git a/src/components/Equipo_Computo/pregunta3_5.css b/src/components/Equipo_Computo/pregunta3_5.css new file mode 100644 index 0000000..efbc42d --- /dev/null +++ b/src/components/Equipo_Computo/pregunta3_5.css @@ -0,0 +1,201 @@ +/* === ESTILOS PREGUNTA 3 (5/5) - Alto Rendimiento Servidores === */ + +.pregunta-page { + display: flex; + justify-content: center; + padding: 2rem 1rem; + background-color: #f9fafb; +} + +.pregunta-container { + width: 100%; + max-width: 1100px; + background-color: #ffffff; + border-radius: 12px; + padding: 2rem 2.5rem; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); +} + +.pregunta-titulo { + text-align: center; + color: #2563eb; + margin-bottom: 1.5rem; + font-size: 1.6rem; + font-weight: 700; + border-bottom: 3px solid #2563eb; + display: inline-block; + padding-bottom: 0.3rem; +} + +.pregunta-texto { + font-size: 1rem; + font-weight: 500; + margin-bottom: 0.5rem; + color: #1f2937; +} + +.pregunta-subtexto { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 1.2rem; +} + +/* === PESTAÑAS === */ +.tab-container { + display: flex; + overflow-x: auto; + border-bottom: 2px solid #e5e7eb; + margin-bottom: 1.5rem; +} + +.tab { + padding: 0.8rem 1.2rem; + cursor: pointer; + white-space: nowrap; + font-weight: 500; + border-radius: 8px 8px 0 0; + transition: all 0.2s ease; + margin-right: 0.25rem; +} + +.tab.active { + color: #2563eb; + border-bottom: 3px solid #2563eb; + background-color: #f3f4f6; + box-shadow: inset 0 -2px 4px rgba(37, 99, 235, 0.1); +} + +.tab.inactive { + color: #6b7280; + background-color: #ffffff; +} + +.tab.inactive:hover { + color: #2563eb; + background-color: #f9fafb; +} + +/* === TABLA === */ +.tabla-servidores-container { + overflow-x: auto; + margin-bottom: 3rem; + position: relative; +} + +.tabla-servidores { + width: 100%; + border-collapse: collapse; + min-width: 950px; + font-size: 0.85rem; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08); +} + +.tabla-servidores th { + padding: 0.7rem 0.5rem; + text-align: center; + color: white; + font-weight: 600; + border: 1px solid #d1d5db; +} + +.tabla-servidores .header-procesador, +.tabla-servidores .header-total { + background-color: #2563eb; +} + +.tabla-servidores .header-poblacion { + background-color: #1e40af; +} + +.tabla-servidores .sub-header { + background-color: #3b82f6; + color: white; +} + +.tabla-servidores td { + border: 1px solid #e5e7eb; + text-align: center; + vertical-align: middle; + background-color: #ffffff; + transition: background-color 0.2s; +} + +.tabla-fila:hover td { + background-color: #f3f4f6; +} + +.tabla-servidores .tipo-procesador { + text-align: left; + font-weight: 500; + padding: 0.6rem 0.7rem; + background-color: #eff6ff; + color: #374151; +} + +.tabla-servidores input[type="text"] { + width: 100%; + padding: 0.45rem 0.3rem; + border: none; + background-color: #f9fafb; + text-align: center; + color: #374151; + border-radius: 4px; + font-weight: 500; +} + +.tabla-servidores .total-celda { + background-color: #dbeafe; + font-weight: 600; + color: #1d4ed8; +} + +.tabla-servidores .fila-total td { + background-color: #bfdbfe; + font-weight: 700; +} + +.tabla-servidores .fila-total .total-celda { + background-color: #93c5fd; +} + +/* === BOTONES === */ +.boton-consultar { + position: absolute; + bottom: -3.5rem; + right: 0; + background-color: #10b981; + color: white; + padding: 0.6rem 1.2rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + cursor: pointer; + box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3); + transition: background-color 0.2s; +} + +.boton-consultar:hover { + background-color: #059669; +} + +.boton-contenedor { + margin-top: 5rem; + text-align: right; +} + +.boton.volver { + background-color: #2563eb; + color: white; + padding: 0.7rem 1.4rem; + border-radius: 8px; + text-decoration: none; + font-weight: 500; + box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3); + transition: background-color 0.2s; +} + +.boton.volver:hover { + background-color: #1d4ed8; +} diff --git a/src/components/Equipo_Computo/pregunta7.css b/src/components/Equipo_Computo/pregunta7.css new file mode 100644 index 0000000..e749651 --- /dev/null +++ b/src/components/Equipo_Computo/pregunta7.css @@ -0,0 +1,137 @@ +.contenedor-pregunta { + padding: 20px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9fafc; +} + +.contenedor-censo{ + background-color: #002855; + color: white; + padding: 15px; + font-size: 16px; + margin-bottom: 25px; +} + + +.pregunta-cuadro { + background-color: #f5f5f5; + border-left: 6px solid #001f3f; + 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; +} + +/* Tabla */ +.tabla { + width: 100%; + border-collapse: collapse; + text-align: center; + color: black; +} + +.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: #002855; + 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: 40%; + padding: 6px 25px 6px 6px; + border: 2px solid #002855; + 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: #002855; + background-color: #eef2f6; +} + +/* Total > 100% */ +.total-error { + background-color: #ffcccc; + color: #a80000; +} + diff --git a/src/components/pregunta9.css b/src/components/Equipo_Computo/pregunta9.css similarity index 100% rename from src/components/pregunta9.css rename to src/components/Equipo_Computo/pregunta9.css diff --git a/src/components/Perifericos/Pregunta1EP.tsx b/src/components/Perifericos/Pregunta1EP.tsx new file mode 100644 index 0000000..b71141c --- /dev/null +++ b/src/components/Perifericos/Pregunta1EP.tsx @@ -0,0 +1,162 @@ +"use client"; +import React, { useState, useEffect } from "react"; +import "./pregunta1EP.module.scss"; + +interface EquiposImpresion { + inyeccionTinta: string; + laserPequenaBN: string; + matrizPuntos: string; + laserAltoVolumenBN: string; + laserPequenaColor: string; + multifuncionales: string; + laserAltoVolumenColor: string; + impresora3D: string; + plotter: string; +} + +export default function Pregunta1EP() { + const [equipos, setEquipos] = useState({ + inyeccionTinta: "7", + laserPequenaBN: "186", + matrizPuntos: "", + laserAltoVolumenBN: "28", + laserPequenaColor: "20", + multifuncionales: "108", + laserAltoVolumenColor: "18", + impresora3D: "2", + plotter: "11", + }); + + // 🔹 Preparado para conectar con API del backend + useEffect(() => { + // Cuando te den la API, descomenta y edita la URL 👇 + /* + fetch("https://tu-api-backend.com/api/equipos-impresion") + .then((res) => res.json()) + .then((data) => setEquipos(data)) + .catch((err) => console.error("Error al obtener datos:", err)); + */ + }, []); + + const handleChange = (e: React.ChangeEvent) => { + setEquipos({ + ...equipos, + [e.target.name]: e.target.value, + }); + }; + + return ( +
+
+ 1. Desglose el número de equipos de impresión con que cuenta el área + universitaria. +
+ +
+ {/* Columna 1 */} +
+ + +
+ +
+ + +
+ +
+ + +
+ + {/* Columna 2 */} +
+ + +
+ +
+ + +
+ +
+ + +
+ + {/* Columna 3 */} +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ ); +} diff --git a/src/components/Perifericos/Pregunta2EP.tsx b/src/components/Perifericos/Pregunta2EP.tsx new file mode 100644 index 0000000..4a6df47 --- /dev/null +++ b/src/components/Perifericos/Pregunta2EP.tsx @@ -0,0 +1,124 @@ +"use client"; +import React, { useState, useEffect } from "react"; +import styles from "./pregunta2EP.module.scss"; + +interface EquiposPoblacion { + alumnos: string; + profesores: string; + tecnicosAcademicos: string; + investigadores: string; + administrativos: string; + total: string; +} + +export default function Pregunta2EP() { + const [equipos, setEquipos] = useState({ + 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) => { + const { name, value } = e.target; + setEquipos((prev) => ({ + ...prev, + [name]: value, + })); + }; + + return ( +
+
+ * + (Requerido en el caso de contar con Equipo de impresión) +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ ); +} diff --git a/src/components/Perifericos/Pregunta4EP.tsx b/src/components/Perifericos/Pregunta4EP.tsx new file mode 100644 index 0000000..264e99e --- /dev/null +++ b/src/components/Perifericos/Pregunta4EP.tsx @@ -0,0 +1,98 @@ +"use client"; +import React, { useState, useEffect } from "react"; +import "../../app/styles/layout/pregunta4EP.scss"; + +interface EquiposDigitalizacion { + digitalizadorCamaPlana: string; + digitalizador3d: string; + digitalizadorAlimentador: string; + digitalizadorGranVolumen: string; +} + +export default function Pregunta4EP() { + const [equipos, setEquipos] = useState({ + digitalizadorCamaPlana: "27", + digitalizador3d: "", + digitalizadorAlimentador: "108", + digitalizadorGranVolumen: "1", + }); + + // 🔹 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 handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setEquipos({ + ...equipos, + [name]: value, + }); + }; + + return ( +
+
+ Censo de equipos periféricos - Equipo de digitalización +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ ); +} diff --git a/src/components/Perifericos/Pregunta7EP.tsx b/src/components/Perifericos/Pregunta7EP.tsx new file mode 100644 index 0000000..5901232 --- /dev/null +++ b/src/components/Perifericos/Pregunta7EP.tsx @@ -0,0 +1,164 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import "../../app/styles/layout/pregunta7.scss"; + +interface Dato { + nombre: string; + cantidad: number; +} + +const datosSimulados: Dato[] = [ + { nombre: "AULA DE ROBÓTICA 101", cantidad: 18 }, + { nombre: "LAB DE QUÍMICA 201", cantidad: 25 }, + { nombre: "LAB DE FÍSICA 202", cantidad: 30 }, + { nombre: "LAB DE PROGRAMACIÓN 301", cantidad: 40 }, + { nombre: "AULA DE DISEÑO 102", cantidad: 22 }, + { nombre: "LAB ELECTRÓNICA 204", cantidad: 35 }, + { nombre: "LAB COMPUTACIÓN 305", cantidad: 28 }, + { nombre: "AULA INTERACTIVA 106", cantidad: 15 }, + { nombre: "LAB DE INNOVACIÓN 307", cantidad: 33 }, + { nombre: "SALA DE CONFERENCIAS A", cantidad: 12 }, + { nombre: "LAB DE MECATRÓNICA 308", cantidad: 45 }, + { nombre: "LAB DE INTELIGENCIA ARTIFICIAL 309", cantidad: 38 }, + { nombre: "LAB DE REDES 310", cantidad: 27 }, + { nombre: "SALA MULTIMEDIA B", cantidad: 20 }, + { nombre: "LAB DE BIOLOGÍA 205", cantidad: 26 }, + { nombre: "LAB DE MECÁNICA 210", cantidad: 32 }, + { nombre: "AULA DE INGLÉS 110", cantidad: 19 }, + { nombre: "SALA DE DOCENTES", cantidad: 14 }, + { nombre: "LAB DE BIG DATA 311", cantidad: 36 }, + { nombre: "LAB DE CIBERSEGURIDAD 312", cantidad: 29 }, +]; + +export default function Pregunta7EP() { + const [data, setData] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [recordsPerPage, setRecordsPerPage] = useState(10); + const [sortColumn, setSortColumn] = useState(null); + const [sortAsc, setSortAsc] = useState(true); + + useEffect(() => { + setData(datosSimulados); + }, []); + + const sortedData = React.useMemo(() => { + if (!sortColumn) return data; + return [...data].sort((a, b) => { + if (a[sortColumn] < b[sortColumn]) return sortAsc ? -1 : 1; + if (a[sortColumn] > b[sortColumn]) return sortAsc ? 1 : -1; + return 0; + }); + }, [data, sortColumn, sortAsc]); + + const paginatedData = React.useMemo(() => { + const start = (currentPage - 1) * recordsPerPage; + return sortedData.slice(start, start + recordsPerPage); + }, [sortedData, currentPage, recordsPerPage]); + + const totalPages = Math.ceil(sortedData.length / recordsPerPage); + + const handleSort = (column: keyof Dato) => { + if (sortColumn === column) { + setSortAsc(!sortAsc); + } else { + setSortColumn(column); + setSortAsc(true); + } + setCurrentPage(1); + }; + + const handleRecordsPerPageChange = ( + e: React.ChangeEvent + ) => { + setRecordsPerPage(Number(e.target.value)); + setCurrentPage(1); + }; + + const startItem = (currentPage - 1) * recordsPerPage + 1; + const endItem = Math.min(startItem + recordsPerPage - 1, sortedData.length); + + return ( +
+
+
+ Mostrar + + registros +
+
+ Mostrando {startItem} al {endItem} de {sortedData.length} resultados +
+
+ +
+ + + + + + + + + + + {paginatedData.map((item, index) => ( + + + + + ))} + +
handleSort("nombre")}> + Nombre del laboratorio o aula + {sortColumn === "nombre" && ( + orden + )} + handleSort("cantidad")}> + Cantidad + {sortColumn === "cantidad" && ( + orden + )} +
{item.nombre}{item.cantidad}
+
+ +
+ + + {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( + + ))} + + +
+
+ ); +} diff --git a/src/components/Perifericos/pregunta1EP.module.scss b/src/components/Perifericos/pregunta1EP.module.scss new file mode 100644 index 0000000..8e0df57 --- /dev/null +++ b/src/components/Perifericos/pregunta1EP.module.scss @@ -0,0 +1,135 @@ +.dashboardContainer_P1 { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + min-height: 100vh; + background-color: #f4f4f4; +} + +.scanView_P1 { + padding: 20px; + width: 100%; + + .container_P1 { + width: 100%; + max-width: 900px; + background: #fff; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); + overflow: hidden; + display: flex; + flex-direction: column; + border: 1px solid #ddd; + } + + .header_P1 { + padding: 16px 20px; + background: #f7f7f7; + border-bottom: 1px solid #e0e0e0; + font-size: 15px; + color: #0056b3; + text-align: center; + font-weight: 500; + } + + .main-content_P1 { + display: flex; + min-height: 420px; + } + + .tabs_P1 { + width: 230px; + background-color: #fafafa; + display: flex; + flex-direction: column; + justify-content: space-evenly; + } + + .tab_P1 { + padding: 12px 16px; + cursor: pointer; + border-right: 1px solid #e0e0e0; + color: #555; + transition: all 0.3s ease; + border-left: 4px solid transparent; + font-size: 15px; + font-weight: 500; + background: none; + border: none; + text-align: left; + } + + .tab_P1:hover { + background-color: #f0f0f0; + color: #000; + } + + .active_P1 { + background-color: #fff; + border-left: 4px solid #0056b3; + border-right: none; + border-bottom: 1px solid #0056b3; + color: #0056b3; + font-weight: 600; + } + + .data-table-wrapper_P1 { + flex: 1; + padding: 20px; + } + + .data-table_P1 { + width: 100%; + } + + .data-row_P1 { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: #f9f9f9; + transition: background 0.2s ease; + } + + .data-row_P1:hover { + background: #f1f1f1; + } + + .os-name_P1 { + flex: 1; + font-size: 15px; + color: #333; + } + + .count-box_P1 { + background: #ffffff; + border: 1px solid #0056b3; + padding: 6px 14px; + font-weight: 600; + font-size: 15px; + text-align: center; + min-width: 70px; + } + + .total-row_P1 { + background: #eaf4ff; + font-weight: bold; + + .count-box_P1 { + color: #0056b3; + } + } +} + +@media (max-width: 700px) { + .scanView_P1 .tabs_P1 { + width: 160px; + } + + .scanView_P1 .tab_P1 { + font-size: 12px; + padding: 10px 12px; + text-align: left; + } +} diff --git a/src/components/Perifericos/pregunta2EP.module.scss b/src/components/Perifericos/pregunta2EP.module.scss new file mode 100644 index 0000000..85ac844 --- /dev/null +++ b/src/components/Perifericos/pregunta2EP.module.scss @@ -0,0 +1,66 @@ +.container_P2 { + max-width: 1000px; + margin: 2% 10% 20% 10%; + background: white; + padding: 20px; + border: 1px solid #ddd; + border-radius: 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + + label { + display: block; + margin-bottom: 5px; + font-size: 14px; + color: #333; + } + + input[type="text"] { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 4px; + background-color: #f0f5ff; + font-size: 14px; + box-sizing: border-box; + } + + .helpIcon_P2 { + color: #007bff; + font-size: 12px; + cursor: help; + margin-left: 3px; + } +} + +.header_P2 { + font-weight: bold; + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #eee; + font-size: 14px; + + .required_P2 { + color: #d9534f; + font-weight: normal; + } +} + +.row_P2 { + display: flex; + gap: 10px; + align-items: flex-start; + flex-wrap: wrap; +} + +.item_P2 { + flex: 1; + min-width: 140px; +} + +/* Responsivo */ +@media (max-width: 768px) { + .row_P2 { + flex-direction: column; + gap: 10px; + } +} diff --git a/src/components/Preguanta1.tsx b/src/components/Preguanta1.tsx deleted file mode 100644 index d529a79..0000000 --- a/src/components/Preguanta1.tsx +++ /dev/null @@ -1,116 +0,0 @@ -"use client"; - -import { useState } from "react"; -import "../app/styles/layout/pregunta1.scss"; - -type OsEntry = { - os: string; - count: string; - isTotal?: boolean; -}; - -const MOCK_DATA = { - "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 }, // corregido - ], - "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,entre otros)", 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 }, // corregido también - ], -}; - -const PLATFORM_LABELS: Record = { - "pc-desktop": "Computadoras de escritorio Plataforma PC", - "apple-desktop": "Computadoras de escritorio Plataforma Apple", - "pc-laptop": "Computadoras portátiles Plataforma PC", - "apple-laptop": "Computadoras portátiles Plataforma Apple", - servers: "Servidores de alto rendimiento", -}; - -const Pregunta1 = () => { - const [activeTab, setActiveTab] = - useState("pc-desktop"); - const currentData = MOCK_DATA[activeTab]; - - return ( -
-
-
- Presione cada pestaña para ver la información de las plataformas. -
- -
-
- {Object.entries(PLATFORM_LABELS).map(([key, label]) => ( - - ))} -
- -
-
- {currentData.map((item, index) => ( -
-
{item.os}
-
{item.count}
-
- ))} -
-
-
-
-
- ); -}; - -export default Pregunta1;