diff --git a/src/app/(Administrador)/pregunta1.1/page.tsx b/src/app/(Administrador)/pregunta1.1/page.tsx index ec4d475..610a596 100644 --- a/src/app/(Administrador)/pregunta1.1/page.tsx +++ b/src/app/(Administrador)/pregunta1.1/page.tsx @@ -1,278 +1,129 @@ "use client"; -import { useState } from "react"; +import React, { useState } from "react"; +import "./pregunta1.1.css"; + +export default function Pregunta1() { + const [datos, setDatos] = useState([ + { nombre: "Windows", valores: ["", "", "", "", ""] }, + { nombre: "Linux", valores: ["", "", "", "", ""] }, + { nombre: "Mac OS", valores: ["", "", "", "", ""] }, + { nombre: "Total", valores: ["", "", "", "", ""] }, + ]); + + const handleChange = (filaIndex: number, colIndex: number, value: string) => { + const nuevosDatos = [...datos]; + nuevosDatos[filaIndex].valores[colIndex] = value; + setDatos(nuevosDatos); + }; + + const calcularTotalFila = (valores: string[]) => + valores.reduce((acc, val) => acc + (Number(val) || 0), 0); + + const calcularTotalesColumnas = () => { + const numColumnas = datos[0].valores.length; + const totales = Array(numColumnas).fill(0); + datos.slice(0, -1).forEach((fila) => { + fila.valores.forEach((valor, colIndex) => { + totales[colIndex] += Number(valor) || 0; + }); + }); + return totales; + }; + + const totalesColumnas = calcularTotalesColumnas(); + + // Títulos de las tablas + const tablas = [ + "Computadoras de escritorio", + "Tabletas", + "Computadoras portátiles", + "Alto rendimiento", + ]; + + // Función para renderizar una tabla + const renderTabla = (titulo: string) => ( +
+ + + + + + + + + + + + + + {datos.map((fila, filaIndex) => { + if (fila.nombre === "Total") { + const totalGeneral = calcularTotalFila( + totalesColumnas.map(String) + ); + return ( + + + {totalesColumnas.map((colTotal, i) => ( + + ))} + + + ); + } + + const totalFila = calcularTotalFila(fila.valores); + return ( + + + {fila.valores.map((valor, colIndex) => ( + + ))} + + + ); + })} + +
{titulo}AlumnosProfesoresTécnicos AcadémicosInvestigadoresAdministrativosTotal
{fila.nombre}{colTotal}{totalGeneral}
{fila.nombre} +
+ + handleChange(filaIndex, colIndex, e.target.value) + } + /> +
+ 		100 ? "total-error" : "" + }`} + > + {totalFila} +
+
+ ); -export default async function Page() { return ( -
-
-

Censo Equipos de computo

-

- Desglosa en cada renglon. el numero de equipos de computo dedicado por - cada categoria enlistada, de acuerdo con el perfil del usuario al que - se destina su uso primordialmente -

+
+
Censo de equipos de cómputo
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {" "} - - - - - - -
Computadoras de escritorioAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Windows - - - - - - - - - - 10
Linux - - - - - - - - - - 10
Mac OS - - - - - - - - - - 10
Total10 10 10 10 1010
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Computadoras portatilesAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Windows - - - - - - - - - - 10
Chromebook - - - - - - - - - - 10
Mac OS - - - - - - - - - - 10
Total10 10 10 10 1010
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TabletasAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Andriod - - - - - - - - - - 10
IPad IOS - - - - - - - - - - 10
Total10 10 10 10 1010
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Alto RendimientoAlumnosProfesoresTecnicos AcademicosInvestigadoresAdministrativosTotal
Servidores - - - - - - - - - - 10
Total10 10 10 10 1010
-
-
+
+ 1. Desglose en cada renglón, el número de equipos de cómputo dedicado por cada categoría + enlistada, de acuerdo con el perfil de usuario al que se destina su uso primordialmente. *
-
+ + {/* FILA SUPERIOR */} +
+ {renderTabla(tablas[0])} + {renderTabla(tablas[1])} +
+ + {/* FILA INFERIOR */} +
+ {renderTabla(tablas[2])} + {renderTabla(tablas[3])} +
+ ); } diff --git a/src/app/(Administrador)/pregunta1.1/pregunta1.1.css b/src/app/(Administrador)/pregunta1.1/pregunta1.1.css new file mode 100644 index 0000000..62bfe3e --- /dev/null +++ b/src/app/(Administrador)/pregunta1.1/pregunta1.1.css @@ -0,0 +1,149 @@ +.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: 20px; + 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; + width: 100%; /* ocupa todo el ancho del contenedor */ + table-layout: fixed; +} + +.tabla th, +.tabla td { + border: 1px solid #ddd; + padding: 12px; + +} + +.tabla th { + color: white; + font-weight: 600; + font-size: 15px; +} + +.tabla td { + font-size: 14px; +} + +/* Colores personalizados */ +.azul-marino { + background-color: #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; +} + +.contenedor-tablas { + display: flex; + gap: 20px; + flex-wrap: wrap; +} + +.tabla-contenedor { + flex: 1; + min-width: 300px; +}