diff --git a/src/app/(Administrador)/pregunta2/page.tsx b/src/app/(Administrador)/pregunta2/page.tsx new file mode 100644 index 0000000..b2443a7 --- /dev/null +++ b/src/app/(Administrador)/pregunta2/page.tsx @@ -0,0 +1,150 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import './pregunta2.scss'; + +// Tipos +type OsEntry = { + os: string; + count: string; // o number si la API devuelve números + isTotal?: boolean; +}; + +type PlatformData = { + [key: string]: OsEntry[]; +}; + +// === DATOS TEMPORALES (mock) === +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: '144', isTotal: true }, + ], + 'apple-laptop': [ + { os: 'Mac OS X(13 - Ventura, 14 - Sonoma)', count: '39' }, + { os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '23' }, + { os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '0' }, + { os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '9' }, + { os: 'Total', count: '71', isTotal: true }, + ], + 'servers': [ + { os: 'Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)', count: '21' }, + { os: 'Unix (AIX,MAC OS Server,Solaris,entre otros)', count: '2' }, + { os: 'Windows Server 2022/2023', count: '6' }, + { os: 'Windows Server 2016/2019', count: '3' }, + { os: 'Windows Server 2008/2012', count: '3' }, + { os: 'Windows Server 2000/2003', count: '2' }, + { os: 'Total', count: '37', isTotal: true }, + ], +}; + +const API_ENDPOINT = '/api/platform-stats'; // ← ¡Reemplaza esto cuando sepas la URL real! + +const Page = () => { + const [activeTab, setActiveTab] = useState('pc-desktop'); + const [data, setData] = useState(MOCK_DATA); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + // === DESCOMENTA ESTO CUANDO TENGAS LA API === + // const response = await fetch(API_ENDPOINT); + // if (!response.ok) throw new Error('Error al cargar estadísticas'); + // const apiData: PlatformData = await response.json(); + // setData(apiData); + // setLoading(false); + + // === POR AHORA: usa datos simulados (y simula un retraso si quieres) === + // await new Promise(resolve => setTimeout(resolve, 300)); + setData(MOCK_DATA); + setLoading(false); + } catch (err) { + console.error('Error al cargar datos:', err); + setError('No se pudieron cargar las estadísticas. Usando datos temporales.'); + setData(MOCK_DATA); // fallback en caso de error + setLoading(false); + } + }; + + fetchData(); + }, []); + + const currentData = data[activeTab] || []; + + // Si quisieras mostrar un estado de carga (opcional) + // if (loading) return

Cargando...

; + // if (error) console.warn(error); // o muestra un toast, etc. + + return ( +
+
+

Estadísticas de Plataformas

+
+ +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+
+ {Object.entries({ + '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', + }).map(([key, label]) => ( +
setActiveTab(key)} + > + {label} +
+ ))} +
+ +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default Page; diff --git a/src/app/(Administrador)/pregunta2/pregunta2.scss b/src/app/(Administrador)/pregunta2/pregunta2.scss new file mode 100644 index 0000000..dff448f --- /dev/null +++ b/src/app/(Administrador)/pregunta2/pregunta2.scss @@ -0,0 +1,166 @@ +.dashboardContainer { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + min-height: 100vh; + background-color: #f4f4f4; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + background-color: #ffffff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 10; + + h2 { + margin: 0; + font-size: 1.5rem; + color: #0056b3; + } +} + +.scanView { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding: 20px; + width: 100%; + height: 100%; + + .container { + 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 { + padding: 16px 20px; + background: #f7f7f7; + border-bottom: 1px solid #e0e0e0; + font-size: 15px; + color: #0056b3; + text-align: center; + font-weight: 500; + display: block; + box-shadow: none; + position: static; + } + + .main-content { + display: flex; + min-height: 420px; + } + + .tabs { + width: 230px; + background-color: #fafafa; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + + .tab { + padding: 18px 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; + } + + .tab:hover { + background-color: #f0f0f0; + color: #000; + } + + .tab.active { + background-color: #fff; + border-left: 4px solid #0056b3; + border-right: none; + border-bottom: 1px solid #0056b3; + color: #0056b3; + font-weight: 600; + } + + .data-table-wrapper { + flex: 1; + padding: 20px; + } + + .data-table { + width: 100%; + } + + .data-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: #f9f9f9; + transition: background 0.2s ease; + } + + .data-row:hover { + background: #f1f1f1; + } + + .os-name { + flex: 1; + font-size: 15px; + color: #333; + } + + .count-box { + background: #ffffff; + border: 1px solid #0056b3; + padding: 6px 14px; + font-weight: 600; + font-size: 15px; + text-align: center; + min-width: 70px; + } + + .total-row { + background: #eaf4ff; + font-weight: bold; + + .count-box { + color:#0056b3; + } + } +} + +/* ======== RESPONSIVE ======== */ +@media (max-width: 700px) { + .scanView .main-content { + flex-direction: column; + } + + .scanView .tabs { + flex-direction: row; + width: 100%; + } + + .scanView .tab { + flex: 1; + padding: 14px 0; + text-align: center; + font-size: 13px; + } +} \ No newline at end of file diff --git a/src/app/(Administrador)/pregunta7/page.tsx b/src/app/(Administrador)/pregunta7/page.tsx index 47f372a..b9ab73e 100644 --- a/src/app/(Administrador)/pregunta7/page.tsx +++ b/src/app/(Administrador)/pregunta7/page.tsx @@ -1,7 +1,7 @@ -'use client'; +"use client"; -import React, { useState, useEffect } from 'react'; -import '../../styles/layout/pregunta7.scss'; +import React, { useState, useEffect } from "react"; +import "../../styles/layout/pregunta7.scss"; interface Dato { nombre: string; @@ -68,7 +68,9 @@ const Page: React.FC = () => { setCurrentPage(1); }; - const handleRecordsPerPageChange = (e: React.ChangeEvent) => { + const handleRecordsPerPageChange = ( + e: React.ChangeEvent + ) => { setRecordsPerPage(Number(e.target.value)); setCurrentPage(1); }; @@ -97,24 +99,31 @@ const Page: React.FC = () => { - - @@ -134,24 +143,26 @@ const Page: React.FC = () => { onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))} disabled={currentPage === 1} > - {'<'} + {"<"} {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( ))} diff --git a/src/app/(Administrador)/pregunta7/pregunta7.css b/src/app/(Administrador)/pregunta7/pregunta7.css new file mode 100644 index 0000000..664490e --- /dev/null +++ b/src/app/(Administrador)/pregunta7/pregunta7.css @@ -0,0 +1,134 @@ +.contenedor-pregunta { + padding: 20px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9fafc; +} + +.contenedor-censo{ +background-color: #001f3f; +color: white; +} + + +.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/app/(Administrador)/pregunta9/page.tsx b/src/app/(Administrador)/pregunta9/page.tsx new file mode 100644 index 0000000..5b2ecdf --- /dev/null +++ b/src/app/(Administrador)/pregunta9/page.tsx @@ -0,0 +1,142 @@ +"use client"; +import React, { useState } from "react"; +import "./pregunta9.css"; + +export default function Pregunta9() { + + const [datos, setDatos] = useState([ + { nombre: "Computadoras de Escritorio", valores: ["", "", "", ""] }, + { nombre: "Computadoras Portátiles", valores: ["", "", "", ""] }, + { nombre: "Alto Rendimiento", valores: ["", "", "", ""] }, + ]); + + + const [garantia, setGarantia] = useState({ + escritorio: "", + portatil: "", + altoRendimiento: "", + }); + + // Función para actualizar datos de Pregunta 9 + const handleChange = (filaIndex: number, colIndex: number, value: string) => { + const nuevosDatos = [...datos]; + nuevosDatos[filaIndex].valores[colIndex] = value; + setDatos(nuevosDatos); + }; + + // Función para calcular total de cada fila en Pregunta 9 + const calcularTotal = (valores: string[]) => + valores.reduce((acc, val) => acc + (Number(val) || 0), 0); + + return ( +
+ {/* Pregunta 9 */} + + +
+ 9. Calcule porcentualmente (%) la antigüedad que tienen los equipos de + cómputo del área universitaria. * +
+ +
+
handleSort('nombre')} style={{ cursor: 'pointer' }}> + handleSort("nombre")} + style={{ cursor: "pointer" }} + > Nombre del laboratorio o aula - {sortColumn === 'nombre' && sortAsc && ascendente} - {sortColumn === 'nombre' && !sortAsc && descendente} - {sortColumn !== 'nombre' && ( - <> - + {sortColumn === "nombre" && sortAsc && ( + ascendente )} + {sortColumn === "nombre" && !sortAsc && ( + descendente + )} + {sortColumn !== "nombre" && <>} handleSort('cantidad')} style={{ cursor: 'pointer' }}> + handleSort("cantidad")} + style={{ cursor: "pointer" }} + > Cantidad - {sortColumn === 'cantidad' && sortAsc && ascendente} - {sortColumn === 'cantidad' && !sortAsc && descendente} - {sortColumn !== 'cantidad' && ( - <> - - + {sortColumn === "cantidad" && sortAsc && ( + ascendente )} + {sortColumn === "cantidad" && !sortAsc && ( + descendente + )} + {sortColumn !== "cantidad" && <>}
+ + + + + + + + + + + + {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)}% +
+ + + {/* Pregunta 10 */} +
+ 10. ¿Cuántos equipos de cómputo tienen garantía de proveedor?. * +
+ +
+ + + + + + + + + + + + + + + +
Computadoras de Escritorio (247)Computadoras Portátiles (767)Alto Rendimiento (17)
+
+ + setGarantia({ ...garantia, escritorio: e.target.value }) + } + /> +
+ 		+
+ + setGarantia({ ...garantia, portatil: e.target.value }) + } + /> +
+ 		+
+ + setGarantia({ ...garantia, altoRendimiento: e.target.value }) + } + /> +
+
+
+ + ); +} diff --git a/src/app/(Administrador)/pregunta9/pregunta9.css b/src/app/(Administrador)/pregunta9/pregunta9.css new file mode 100644 index 0000000..bf92392 --- /dev/null +++ b/src/app/(Administrador)/pregunta9/pregunta9.css @@ -0,0 +1,134 @@ +.contenedor-pregunta { + padding: 20px; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #f9fafc; +} + + +.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; +} + + +.input-sp input { + width: 38%; + padding: 6px 6px 6px 6px; +}