diff --git a/src/app/(Administrador)/pregunta7.1/page.tsx b/src/app/(Administrador)/pregunta7.1/page.tsx new file mode 100644 index 0000000..b9ab73e --- /dev/null +++ b/src/app/(Administrador)/pregunta7.1/page.tsx @@ -0,0 +1,172 @@ +"use client"; + +import React, { useState, useEffect } from "react"; +import "../../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 }, +]; + +const Page: React.FC = () => { + 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")} + style={{ cursor: "pointer" }} + > + Nombre del laboratorio o aula + {sortColumn === "nombre" && sortAsc && ( + ascendente + )} + {sortColumn === "nombre" && !sortAsc && ( + descendente + )} + {sortColumn !== "nombre" && <>} + handleSort("cantidad")} + style={{ cursor: "pointer" }} + > + Cantidad + {sortColumn === "cantidad" && sortAsc && ( + ascendente + )} + {sortColumn === "cantidad" && !sortAsc && ( + descendente + )} + {sortColumn !== "cantidad" && <>} +
{item.nombre}{item.cantidad}
+
+ +
+ + + {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( + + ))} + + +
+
+ ); +}; + +export default Page; diff --git a/src/app/(Administrador)/pregunta7.1/pregunta7.css b/src/app/(Administrador)/pregunta7.1/pregunta7.css new file mode 100644 index 0000000..664490e --- /dev/null +++ b/src/app/(Administrador)/pregunta7.1/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)/pregunta7/page.tsx b/src/app/(Administrador)/pregunta7/page.tsx index b9ab73e..b0b176d 100644 --- a/src/app/(Administrador)/pregunta7/page.tsx +++ b/src/app/(Administrador)/pregunta7/page.tsx @@ -1,172 +1,89 @@ "use client"; +import React, { useState } from "react"; +import "./pregunta7.css"; -import React, { useState, useEffect } from "react"; -import "../../styles/layout/pregunta7.scss"; +export default function Pregunta7() { + const [datos, setDatos] = useState([ + { nombre: "Impresión", valores: ["", "", "", ""] }, + { nombre: "Digitalización", valores: ["", "", "", ""] }, + ]); -interface Dato { - nombre: string; - cantidad: number; -} + const [garantia, setGarantia] = useState({ + escritorio: "", + portatil: "", + altoRendimiento: "", + }); -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 }, -]; - -const Page: React.FC = () => { - 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); + // 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); }; - 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); + // 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 ( -
-
-
- Mostrar - - registros -
-
- Mostrando {startItem} al {endItem} de {sortedData.length} resultados -
+
+ {/* 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.) +
+ +
+
- - + + + + + + - {paginatedData.map((item, index) => ( - - - - - ))} + {datos.map((fila, filaIndex) => { + const total = calcularTotal(fila.valores); + return ( + + + {fila.valores.map((valor, colIndex) => ( + + ))} + + + ); + })}
handleSort("nombre")} - style={{ cursor: "pointer" }} - > - Nombre del laboratorio o aula - {sortColumn === "nombre" && sortAsc && ( - ascendente - )} - {sortColumn === "nombre" && !sortAsc && ( - descendente - )} - {sortColumn !== "nombre" && <>} - handleSort("cantidad")} - style={{ cursor: "pointer" }} - > - Cantidad - {sortColumn === "cantidad" && sortAsc && ( - ascendente - )} - {sortColumn === "cantidad" && !sortAsc && ( - descendente - )} - {sortColumn !== "cantidad" && <>} - % Antiguedad de los equiposMenor a 2 añosEntre 2 y 3 añosEntre 4 y 5 añosMayor a 6 añosTotal
{item.nombre}{item.cantidad}
{fila.nombre} +
+ + handleChange(filaIndex, colIndex, e.target.value) + } + /> + % +
+
100 ? "total-error" : "" + }`} + > + {total.toFixed(2)}% +
- -
- - - {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( - - ))} - - -
); -}; - -export default Page; +} diff --git a/src/app/(Administrador)/pregunta7/pregunta7.css b/src/app/(Administrador)/pregunta7/pregunta7.css index 664490e..e749651 100644 --- a/src/app/(Administrador)/pregunta7/pregunta7.css +++ b/src/app/(Administrador)/pregunta7/pregunta7.css @@ -5,8 +5,11 @@ } .contenedor-censo{ -background-color: #001f3f; -color: white; + background-color: #002855; + color: white; + padding: 15px; + font-size: 16px; + margin-bottom: 25px; }