added credenciales and comented
This commit is contained in:
Generated
+16
-1
@@ -61,6 +61,7 @@
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@@ -1632,6 +1633,7 @@
|
||||
"integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
@@ -1692,6 +1694,7 @@
|
||||
"integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.46.4",
|
||||
"@typescript-eslint/types": "8.46.4",
|
||||
@@ -2233,6 +2236,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.3.tgz",
|
||||
"integrity": "sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ts-custom-error": "^3.2.1"
|
||||
},
|
||||
@@ -2256,6 +2260,7 @@
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -2655,6 +2660,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.25",
|
||||
"caniuse-lite": "^1.0.30001754",
|
||||
@@ -2872,7 +2878,8 @@
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/cwise-compiler": {
|
||||
"version": "1.1.3",
|
||||
@@ -3299,6 +3306,7 @@
|
||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@@ -3484,6 +3492,7 @@
|
||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@rtsao/scc": "^1.1.0",
|
||||
"array-includes": "^3.1.9",
|
||||
@@ -5702,6 +5711,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -5711,6 +5721,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@@ -6015,6 +6026,7 @@
|
||||
"integrity": "sha512-Dqh7SiYcaFtdv5Wvku6QgS5IGPm281L+ZtVD1U2FJa7Q0EFRlq8Z3sjYtz6gYObsYThUOz9ArwFqPZx+1azILQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^4.0.0",
|
||||
"immutable": "^5.0.2",
|
||||
@@ -6549,6 +6561,7 @@
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -6751,6 +6764,7 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -7055,6 +7069,7 @@
|
||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
type OsEntry = {
|
||||
os: string;
|
||||
count: number;
|
||||
isTotal?: boolean;
|
||||
};
|
||||
|
||||
type PlatformKey =
|
||||
| "pc-desktop"
|
||||
| "apple-desktop"
|
||||
| "pc-laptop"
|
||||
| "apple-laptop"
|
||||
| "servers";
|
||||
|
||||
type PlatformData = Record<PlatformKey, OsEntry[]>;
|
||||
|
||||
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<PlatformKey, string> = {
|
||||
"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<PlatformKey>("pc-desktop");
|
||||
|
||||
const currentData = MOCK_DATA[activeTab];
|
||||
|
||||
return (
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
{/* Tabs */}
|
||||
<div className="tabs">
|
||||
{Object.entries(PLATFORM_LABELS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(key as PlatformKey)}
|
||||
aria-selected={activeTab === key}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? "total-row" : ""}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta1EP.scss";
|
||||
|
||||
interface EquiposImpresion {
|
||||
inyeccionTinta: string;
|
||||
laserPequenaBN: string;
|
||||
matrizPuntos: string;
|
||||
laserAltoVolumenBN: string;
|
||||
laserPequenaColor: string;
|
||||
multifuncionales: string;
|
||||
laserAltoVolumenColor: string;
|
||||
impresora3D: string;
|
||||
plotter: string;
|
||||
}
|
||||
|
||||
export default function Pregunta1EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposImpresion>({
|
||||
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<HTMLInputElement>) => {
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
1. Desglose el número de equipos de impresión con que cuenta el área
|
||||
universitaria.
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
{/* Columna 1 */}
|
||||
<div className="item">
|
||||
<label htmlFor="inyeccionTinta">Inyección de tinta</label>
|
||||
<input
|
||||
type="text"
|
||||
id="inyeccionTinta"
|
||||
name="inyeccionTinta"
|
||||
value={equipos.inyeccionTinta}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaBN">Láser pequeña B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaBN"
|
||||
name="laserPequenaBN"
|
||||
value={equipos.laserPequenaBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="matrizPuntos">Matriz de puntos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="matrizPuntos"
|
||||
name="matrizPuntos"
|
||||
value={equipos.matrizPuntos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 2 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenBN">Láser de alto volumen B/N</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenBN"
|
||||
name="laserAltoVolumenBN"
|
||||
value={equipos.laserAltoVolumenBN}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="laserPequenaColor">Láser pequeña Color</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserPequenaColor"
|
||||
name="laserPequenaColor"
|
||||
value={equipos.laserPequenaColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="multifuncionales">Multifuncionales</label>
|
||||
<input
|
||||
type="text"
|
||||
id="multifuncionales"
|
||||
name="multifuncionales"
|
||||
value={equipos.multifuncionales}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Columna 3 */}
|
||||
<div className="item">
|
||||
<label htmlFor="laserAltoVolumenColor">
|
||||
Láser de alto volumen Color
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="laserAltoVolumenColor"
|
||||
name="laserAltoVolumenColor"
|
||||
value={equipos.laserAltoVolumenColor}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="impresora3D">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="impresora3D"
|
||||
name="impresora3D"
|
||||
value={equipos.impresora3D}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="plotter">Plotter</label>
|
||||
<input
|
||||
type="text"
|
||||
id="plotter"
|
||||
name="plotter"
|
||||
value={equipos.plotter}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
"use client";
|
||||
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) => (
|
||||
<div className="tabla-contenedor">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">{titulo}</th>
|
||||
<th className="rosa-fuerte">Alumnos</th>
|
||||
<th className="rosa-fuerte">Profesores</th>
|
||||
<th className="rosa-fuerte">Técnicos Académicos</th>
|
||||
<th className="rosa-fuerte">Investigadores</th>
|
||||
<th className="rosa-fuerte">Administrativos</th>
|
||||
<th className="azul-marino">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{datos.map((fila, filaIndex) => {
|
||||
if (fila.nombre === "Total") {
|
||||
const totalGeneral = calcularTotalFila(
|
||||
totalesColumnas.map(String)
|
||||
);
|
||||
return (
|
||||
<tr key={filaIndex} className="fila-total">
|
||||
<td className="negrita">{fila.nombre}</td>
|
||||
{totalesColumnas.map((colTotal, i) => (
|
||||
<td key={i}>{colTotal}</td>
|
||||
))}
|
||||
<td className="negrita">{totalGeneral}</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
const totalFila = calcularTotalFila(fila.valores);
|
||||
return (
|
||||
<tr key={filaIndex}>
|
||||
<td>{fila.nombre}</td>
|
||||
{fila.valores.map((valor, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
<div className="input-contenedor">
|
||||
<input
|
||||
type="number"
|
||||
value={valor}
|
||||
onChange={(e) =>
|
||||
handleChange(filaIndex, colIndex, e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`total-celda ${
|
||||
totalFila > 100 ? "total-error" : ""
|
||||
}`}
|
||||
>
|
||||
{totalFila}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="contenedor-pregunta">
|
||||
<div className="contenedor-censo">Censo de equipos de cómputo</div>
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
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. *
|
||||
</div>
|
||||
|
||||
{/* FILA SUPERIOR */}
|
||||
<div className="contenedor-tablas">
|
||||
{renderTabla(tablas[0])}
|
||||
{renderTabla(tablas[1])}
|
||||
</div>
|
||||
|
||||
{/* FILA INFERIOR */}
|
||||
<div className="contenedor-tablas">
|
||||
{renderTabla(tablas[2])}
|
||||
{renderTabla(tablas[3])}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
.contenedor-pregunta {
|
||||
padding: 20px;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.contenedor-censo{
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
||||
.pregunta-cuadro {
|
||||
background-color: #f5f5f5;
|
||||
border-left: 10px 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;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
/* Tabla */
|
||||
.tabla {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
color: black;
|
||||
width: 100%; /* ocupa todo el ancho del contenedor */
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.tabla th,
|
||||
.tabla td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 12px;
|
||||
|
||||
}
|
||||
|
||||
.tabla th {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tabla td {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Colores personalizados */
|
||||
.azul-marino {
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input-contenedor input {
|
||||
width: 100%;
|
||||
padding: 6px 25px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor input::-webkit-inner-spin-button,
|
||||
.input-contenedor input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Focus del input */
|
||||
.input-contenedor input:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
/* Placeholder gris claro */
|
||||
.input-contenedor input::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor .porcentaje {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Celda del total */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
/* Total > 100% */
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
.contenedor-tablas {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tabla-contenedor {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page1.css"; // Importamos los estilos
|
||||
|
||||
export default function Pregunta1() {
|
||||
return (
|
||||
<main className="pregunta-page pregunta1">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 1</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
1. Desglose el número de equipos de impresión con que cuenta el área
|
||||
universitaria.
|
||||
</p>
|
||||
|
||||
<div className="pregunta-grid">
|
||||
<div>
|
||||
<label>Inyección de tinta</label>
|
||||
<input value="7" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser pequeña B/N</label>
|
||||
<input value="186" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser de alto volumen B/N</label>
|
||||
<input value="28" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser de alto volumen Color</label>
|
||||
<input value="18" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Láser pequeña Color</label>
|
||||
<input value="20" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Multifuncionales</label>
|
||||
<input value="108" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Matriz de puntos</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>3D</label>
|
||||
<input value="2" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Plotter</label>
|
||||
<input value="11" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta2" className="boton siguiente">
|
||||
Ir a Pregunta 2 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
/* === ESTILOS GENERALES === */
|
||||
.pregunta-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom, #ebf4ff, #ffffff);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* === CONTENEDOR === */
|
||||
.pregunta-container {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
/* === TÍTULO === */
|
||||
.pregunta-titulo {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #1e40af;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* === TEXTO === */
|
||||
.pregunta-texto {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* === GRID DE INPUTS === */
|
||||
.pregunta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.pregunta-grid label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.pregunta-grid input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
background-color: #f9fafb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pregunta-grid input:focus {
|
||||
border-color: #2563eb;
|
||||
outline: none;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
/* === BOTONES === */
|
||||
.boton-contenedor {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.boton {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 3px 8px rgba(37, 99, 235, 0.25);
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #1e3a8a;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
"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<string>("pc-desktop");
|
||||
const [data, setData] = useState<PlatformData>(MOCK_DATA);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(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 <div className="dashboardContainer"><p>Cargando...</p></div>;
|
||||
// if (error) console.warn(error); // o muestra un toast, etc.
|
||||
|
||||
return (
|
||||
<div className="dashboardContainer">
|
||||
<div className="header">
|
||||
<h2>Estadísticas de Plataformas</h2>
|
||||
</div>
|
||||
|
||||
<div className="scanView">
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Presione cada pestaña para ver la información de las plataformas.
|
||||
</div>
|
||||
|
||||
<div className="main-content">
|
||||
<div className="tabs">
|
||||
{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]) => (
|
||||
<div
|
||||
key={key}
|
||||
className={`tab ${activeTab === key ? "active" : ""}`}
|
||||
onClick={() => setActiveTab(key)}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="data-table-wrapper">
|
||||
<div className="data-table">
|
||||
{currentData.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`data-row ${item.isTotal ? "total-row" : ""}`}
|
||||
>
|
||||
<div className="os-name">{item.os}</div>
|
||||
<div className="count-box">{item.count}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
@@ -1,164 +0,0 @@
|
||||
.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;
|
||||
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;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta2EP.scss";
|
||||
|
||||
interface EquiposPoblacion {
|
||||
alumnos: string;
|
||||
profesores: string;
|
||||
tecnicosAcademicos: string;
|
||||
investigadores: string;
|
||||
administrativos: string;
|
||||
total: string;
|
||||
}
|
||||
|
||||
export default function Pregunta2EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposPoblacion>({
|
||||
alumnos: "35",
|
||||
profesores: "43",
|
||||
tecnicosAcademicos: "",
|
||||
investigadores: "",
|
||||
administrativos: "302",
|
||||
total: "380",
|
||||
});
|
||||
|
||||
// 🔹 Preparado para conectarse al backend
|
||||
useEffect(() => {
|
||||
// Cuando tengas la API, descomenta esta parte 👇 y reemplaza la URL:
|
||||
/*
|
||||
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<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
<span style={{ color: "#d9534f", fontWeight: "normal" }}>*</span>{" "}
|
||||
<small>(Requerido en el caso de contar con Equipo de impresión)</small>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="item">
|
||||
<label htmlFor="alumnos">Alumnos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="alumnos"
|
||||
name="alumnos"
|
||||
value={equipos.alumnos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="profesores">
|
||||
Profesores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="profesores"
|
||||
name="profesores"
|
||||
value={equipos.profesores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="tecnicosAcademicos">Técnicos Académicos</label>
|
||||
<input
|
||||
type="text"
|
||||
id="tecnicosAcademicos"
|
||||
name="tecnicosAcademicos"
|
||||
value={equipos.tecnicosAcademicos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="investigadores">
|
||||
Investigadores <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="investigadores"
|
||||
name="investigadores"
|
||||
value={equipos.investigadores}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="administrativos">
|
||||
Administrativos <span className="help-icon">?</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="administrativos"
|
||||
name="administrativos"
|
||||
value={equipos.administrativos}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="total">Total</label>
|
||||
<input
|
||||
type="text"
|
||||
id="total"
|
||||
name="total"
|
||||
value={equipos.total}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page2.css"; // 👈 Importamos los estilos
|
||||
|
||||
export default function Pregunta2() {
|
||||
return (
|
||||
<main className="pregunta-page pregunta2">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 2</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
Indique el número de equipos de impresión de acuerdo con la
|
||||
población universitaria al que se destina su uso primordialmente.
|
||||
</p>
|
||||
|
||||
<div className="pregunta-grid">
|
||||
<div>
|
||||
<label>Alumnos</label>
|
||||
<input value="35" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Profesores</label>
|
||||
<input value="43" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Técnicos Académicos</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Investigadores</label>
|
||||
<input value="" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Administrativos</label>
|
||||
<input value="302" readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label>Total</label>
|
||||
<input value="380" readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-grupo">
|
||||
<Link href="/pregunta1" className="boton anterior">
|
||||
← Volver a Pregunta 1
|
||||
</Link>
|
||||
|
||||
<Link href="#" className="boton siguiente">
|
||||
Ir a Pregunta 3 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
.pregunta-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom, #eef2ff, #ffffff);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
.pregunta-container {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.pregunta-titulo {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #4338ca;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pregunta-texto {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.pregunta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.pregunta-grid label {
|
||||
display: block;
|
||||
color: #4b5563;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.pregunta-grid input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
background-color: #f9fafb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pregunta-grid input:focus {
|
||||
border-color: #6366f1;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.boton-grupo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.boton {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
.boton.anterior {
|
||||
background-color: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.anterior:hover {
|
||||
background-color: #374151;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.boton.siguiente {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.boton.siguiente:hover {
|
||||
background-color: #312e81;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@@ -1,366 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.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 (
|
||||
<main className="pregunta-page">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5 - 5/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
{tabs.map((tab, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`tab ${activeTab === index ? "active" : "inactive"}`}
|
||||
style={
|
||||
activeTab === index
|
||||
? {
|
||||
borderBottomColor: data[index].color,
|
||||
color: data[index].color,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
onClick={() => setActiveTab(index)}
|
||||
>
|
||||
{tab}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-container">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="header-procesador"
|
||||
style={{ backgroundColor: data[activeTab].color }}
|
||||
>
|
||||
Tipo de procesador
|
||||
</th>
|
||||
<th
|
||||
colSpan={5}
|
||||
className="header-poblacion"
|
||||
style={{ backgroundColor: data[activeTab].headerColor }}
|
||||
>
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th
|
||||
rowSpan={2}
|
||||
className="header-total"
|
||||
style={{ backgroundColor: data[activeTab].color }}
|
||||
>
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data[activeTab].rows.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.alumnos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.profesores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.tecnicos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.investigadores}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={data[activeTab].total.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{data[activeTab].total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/" className="boton volver">
|
||||
← Volver al inicio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,248 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.1.css";
|
||||
|
||||
export default function Pregunta3() {
|
||||
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 (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (1/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* Pestañas */}
|
||||
<div className="tab-container">
|
||||
<div className="tab active">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* Tabla */}
|
||||
<div className="tabla-wrapper">
|
||||
<table className="tabla-pc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma PC <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Técnicos Académicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={item.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3.2" className="boton siguiente">
|
||||
Pregunta 3 (2/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,270 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.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 (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (2/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab active">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-apple-container">
|
||||
<table className="tabla-apple">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma Apple <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3.3" className="boton siguiente">
|
||||
Pregunta 3 (3/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,271 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.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 (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (3/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab active">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-pc-container">
|
||||
<table className="tabla-pc">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma PC <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/pregunta3.4" className="boton siguiente">
|
||||
Pregunta 3 (4/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,170 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,257 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.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 (
|
||||
<main className="pregunta3-container">
|
||||
<h1 className="pregunta3-titulo">PREGUNTA 3 (4/5)</h1>
|
||||
|
||||
<div className="pregunta3-descripcion">
|
||||
<p>
|
||||
<strong>3.</strong> Desglose la cantidad de población beneficiada por
|
||||
plataforma y tipo de procesador:
|
||||
</p>
|
||||
<span className="subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tabs">
|
||||
<button className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</button>
|
||||
<button className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</button>
|
||||
<button className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</button>
|
||||
<button className="tab active">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</button>
|
||||
<button className="tab inactive">Alto rendimiento Servidores</button>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-wrapper">
|
||||
<table className="tabla-pregunta3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Plataforma Apple <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Alumnos</th>
|
||||
<th>Profesores</th>
|
||||
<th>Técnicos Académicos</th>
|
||||
<th>Investigadores</th>
|
||||
<th>Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="celda-total">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td>Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="celda-total final">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="boton-siguiente">
|
||||
<Link href="/pregunta3.5" className="next">
|
||||
Pregunta 3 (5/5) →
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,166 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "./page3.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 (
|
||||
<main className="pregunta-page pregunta3">
|
||||
<div className="pregunta-container">
|
||||
<h1 className="pregunta-titulo">PREGUNTA 3 (5/5)</h1>
|
||||
|
||||
<section className="pregunta-seccion">
|
||||
<p className="pregunta-texto">
|
||||
3. Desglose la cantidad de población beneficiada por plataforma y
|
||||
tipo de procesador: *
|
||||
</p>
|
||||
<p className="pregunta-subtexto">
|
||||
Presione cada pestaña para ingresar la información.
|
||||
</p>
|
||||
|
||||
{/* === PESTAÑAS === */}
|
||||
<div className="tab-container">
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras de escritorio Plataforma Apple
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma PC
|
||||
</div>
|
||||
<div className="tab inactive">
|
||||
Computadoras portátiles Plataforma Apple
|
||||
</div>
|
||||
<div className="tab active">Alto rendimiento Servidores</div>
|
||||
</div>
|
||||
|
||||
{/* === TABLA === */}
|
||||
<div className="tabla-servidores-container">
|
||||
<table className="tabla-servidores">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowSpan={2} className="header-procesador">
|
||||
Servidores <br /> Tipo de procesador
|
||||
</th>
|
||||
<th colSpan={5} className="header-poblacion">
|
||||
Población Beneficiada
|
||||
</th>
|
||||
<th rowSpan={2} className="header-total">
|
||||
Total
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="sub-header">Alumnos</th>
|
||||
<th className="sub-header">Profesores</th>
|
||||
<th className="sub-header">Técnicos Académicos</th>
|
||||
<th className="sub-header">Investigadores</th>
|
||||
<th className="sub-header">Administrativos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr key={index} className="tabla-fila">
|
||||
<td className="tipo-procesador">{item.tipo}</td>
|
||||
<td>
|
||||
<input type="text" value={item.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={item.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
value={item.administrativos}
|
||||
readOnly
|
||||
/>
|
||||
</td>
|
||||
<td className="total-celda">{item.total}</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="fila-total">
|
||||
<td className="tipo-procesador">Total</td>
|
||||
<td>
|
||||
<input type="text" value={total.alumnos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.profesores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.tecnicos} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.investigadores} readOnly />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" value={total.administrativos} readOnly />
|
||||
</td>
|
||||
<td className="total-celda final-total">{total.total}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button className="boton-consultar">
|
||||
Consultar las equivalencias de procesadores
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="boton-contenedor">
|
||||
<Link href="/" className="boton volver">
|
||||
← Volver al inicio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
/* === 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;
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../styles/layout/pregunta4EP.scss";
|
||||
|
||||
interface EquiposDigitalizacion {
|
||||
digitalizadorCamaPlana: string;
|
||||
digitalizador3d: string;
|
||||
digitalizadorAlimentador: string;
|
||||
digitalizadorGranVolumen: string;
|
||||
}
|
||||
|
||||
export default function Pregunta4EPPage() {
|
||||
const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
|
||||
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<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setEquipos({
|
||||
...equipos,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
|
||||
<div className="contenedor-censo">
|
||||
Censo de equipos periféricos - Equipo de digitalización
|
||||
</div>
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
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.)
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorCamaPlana">
|
||||
Digitalizador de cama plana para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorCamaPlana"
|
||||
name="digitalizadorCamaPlana"
|
||||
value={equipos.digitalizadorCamaPlana}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizador3d">3D</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizador3d"
|
||||
name="digitalizador3d"
|
||||
value={equipos.digitalizador3d}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorAlimentador">
|
||||
Digitalizador con alimentador de hojas para oficina
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorAlimentador"
|
||||
name="digitalizadorAlimentador"
|
||||
value={equipos.digitalizadorAlimentador}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="digitalizadorGranVolumen">
|
||||
Digitalizador de gran volumen
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="digitalizadorGranVolumen"
|
||||
name="digitalizadorGranVolumen"
|
||||
value={equipos.digitalizadorGranVolumen}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
"use client";
|
||||
import "../../styles/layout/pregunta5EP.scss";
|
||||
|
||||
export default function Pregunta5EP() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="header">
|
||||
Indique el número de equipos de digitalización de acuerdo con la
|
||||
población universitaria al que se destina su uso primordialmente.
|
||||
<span>*</span>
|
||||
<small> (Requerido en el caso de contar con Equipo de digitalización)</small>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<div className="item">
|
||||
<label htmlFor="alumnos-digital">Alumnos</label>
|
||||
<input type="text" id="alumnos-digital" defaultValue="11" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="profesores-digital">
|
||||
Profesores
|
||||
</label>
|
||||
<input type="text" id="profesores-digital" defaultValue="24" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="tecnicos-academicos-digital">
|
||||
Técnicos Académicos
|
||||
</label>
|
||||
<input type="text" id="tecnicos-academicos-digital" defaultValue="" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="investigadores-digital">
|
||||
Investigadores
|
||||
</label>
|
||||
<input type="text" id="investigadores-digital" defaultValue="" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="administrativos-digital">
|
||||
Administrativos
|
||||
</label>
|
||||
<input type="text" id="administrativos-digital" defaultValue="101" />
|
||||
</div>
|
||||
|
||||
<div className="item">
|
||||
<label htmlFor="total-digital">Total</label>
|
||||
<input type="text" id="total-digital" defaultValue="136" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
"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 (
|
||||
<div className="contenedor-pregunta">
|
||||
{/* Pregunta 7 */}
|
||||
<div className="contenedor-censo">
|
||||
Censo de equipos periféricos - Estado del equipo periférico (impresión y
|
||||
digitalización.)
|
||||
</div>
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
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.)
|
||||
</div>
|
||||
|
||||
<div className="tabla-contenedor">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">% Antiguedad de los equipos</th>
|
||||
<th className="rosa-fuerte">Menor a 2 años</th>
|
||||
<th className="rosa-fuerte">Entre 2 y 3 años</th>
|
||||
<th className="rosa-fuerte">Entre 4 y 5 años</th>
|
||||
<th className="rosa-fuerte">Mayor a 6 años</th>
|
||||
<th className="azul-marino">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{datos.map((fila, filaIndex) => {
|
||||
const total = calcularTotal(fila.valores);
|
||||
return (
|
||||
<tr key={filaIndex}>
|
||||
<td>{fila.nombre}</td>
|
||||
{fila.valores.map((valor, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
<div className="input-contenedor">
|
||||
<input
|
||||
type="number"
|
||||
value={valor}
|
||||
onChange={(e) =>
|
||||
handleChange(filaIndex, colIndex, e.target.value)
|
||||
}
|
||||
/>
|
||||
<span className="porcentaje">%</span>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`total-celda ${
|
||||
total > 100 ? "total-error" : ""
|
||||
}`}
|
||||
>
|
||||
{total.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
.contenedor-pregunta {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.contenedor-censo{
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.pregunta-cuadro {
|
||||
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: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input-contenedor input {
|
||||
width: 40%;
|
||||
padding: 6px 6px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor input::-webkit-inner-spin-button,
|
||||
.input-contenedor input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Focus del input */
|
||||
.input-contenedor input:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
/* Placeholder gris claro */
|
||||
.input-contenedor input::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor .porcentaje {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Celda del total */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
/* Total > 100% */
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
"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<Dato[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
const [recordsPerPage, setRecordsPerPage] = useState<number>(10);
|
||||
const [sortColumn, setSortColumn] = useState<keyof Dato | null>(null);
|
||||
const [sortAsc, setSortAsc] = useState<boolean>(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<HTMLSelectElement>
|
||||
) => {
|
||||
setRecordsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
const startItem = (currentPage - 1) * recordsPerPage + 1;
|
||||
const endItem = Math.min(startItem + recordsPerPage - 1, sortedData.length);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="controls">
|
||||
<div className="show-records">
|
||||
Mostrar
|
||||
<select value={recordsPerPage} onChange={handleRecordsPerPageChange}>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={25}>25</option>
|
||||
</select>
|
||||
registros
|
||||
</div>
|
||||
<div className="results-info">
|
||||
Mostrando {startItem} al {endItem} de {sortedData.length} resultados
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
onClick={() => handleSort("nombre")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
Nombre del laboratorio o aula
|
||||
{sortColumn === "nombre" && sortAsc && (
|
||||
<img src="/arrow_up.svg" alt="ascendente" />
|
||||
)}
|
||||
{sortColumn === "nombre" && !sortAsc && (
|
||||
<img src="/arrow_down.svg" alt="descendente" />
|
||||
)}
|
||||
{sortColumn !== "nombre" && <></>}
|
||||
</th>
|
||||
<th
|
||||
onClick={() => handleSort("cantidad")}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
Cantidad
|
||||
{sortColumn === "cantidad" && sortAsc && (
|
||||
<img src="/arrow_up.svg" alt="ascendente" />
|
||||
)}
|
||||
{sortColumn === "cantidad" && !sortAsc && (
|
||||
<img src="/arrow_down.svg" alt="descendente" />
|
||||
)}
|
||||
{sortColumn !== "cantidad" && <></>}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{paginatedData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.nombre}</td>
|
||||
<td>{item.cantidad}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={page === currentPage ? "active" : ""}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
@@ -1,132 +0,0 @@
|
||||
.contenedor-pregunta {
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.contenedor-censo{
|
||||
background-color: #003e79;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.pregunta-cuadro {
|
||||
border-left: 10px 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: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input-contenedor input {
|
||||
width: 40%;
|
||||
padding: 6px 6px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor input::-webkit-inner-spin-button,
|
||||
.input-contenedor input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Focus del input */
|
||||
.input-contenedor input:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
/* Placeholder gris claro */
|
||||
.input-contenedor input::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor .porcentaje {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Celda del total */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
/* Total > 100% */
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
"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 (
|
||||
<div className="contenedor-pregunta">
|
||||
{/* Pregunta 9 */}
|
||||
|
||||
|
||||
<div className="pregunta-cuadro">
|
||||
9. Calcule porcentualmente (%) la antigüedad que tienen los equipos de
|
||||
cómputo del área universitaria. *
|
||||
</div>
|
||||
|
||||
<div className="tabla-contenedor">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">% Antiguedad de los equipos</th>
|
||||
<th className="rosa-fuerte">Menor a 2 años</th>
|
||||
<th className="rosa-fuerte">Entre 2 y 3 años</th>
|
||||
<th className="rosa-fuerte">Entre 4 y 5 años</th>
|
||||
<th className="rosa-fuerte">Mayor a 6 años</th>
|
||||
<th className="azul-marino">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{datos.map((fila, filaIndex) => {
|
||||
const total = calcularTotal(fila.valores);
|
||||
return (
|
||||
<tr key={filaIndex}>
|
||||
<td>{fila.nombre}</td>
|
||||
{fila.valores.map((valor, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
<div className="input-contenedor">
|
||||
<input
|
||||
type="number"
|
||||
value={valor}
|
||||
onChange={(e) =>
|
||||
handleChange(filaIndex, colIndex, e.target.value)
|
||||
}
|
||||
/>
|
||||
<span className="porcentaje">%</span>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`total-celda ${
|
||||
total > 100 ? "total-error" : ""
|
||||
}`}
|
||||
>
|
||||
{total.toFixed(2)}%
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pregunta 10 */}
|
||||
<div className="pregunta-cuadro" style={{ marginTop: "30px" }}>
|
||||
10. ¿Cuántos equipos de cómputo tienen garantía de proveedor?. *
|
||||
</div>
|
||||
|
||||
<div className="tabla-contenedor">
|
||||
<table className="tabla">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="azul-marino">Computadoras de Escritorio (247)</th>
|
||||
<th className="azul-marino">Computadoras Portátiles (767)</th>
|
||||
<th className="azul-marino">Alto Rendimiento (17)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="input-contenedor input-sp">
|
||||
<input
|
||||
type="number"
|
||||
value={garantia.escritorio}
|
||||
onChange={(e) =>
|
||||
setGarantia({ ...garantia, escritorio: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="input-contenedor input-sp">
|
||||
<input
|
||||
type="number"
|
||||
value={garantia.portatil}
|
||||
onChange={(e) =>
|
||||
setGarantia({ ...garantia, portatil: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="input-contenedor input-sp">
|
||||
<input
|
||||
type="number"
|
||||
value={garantia.altoRendimiento}
|
||||
onChange={(e) =>
|
||||
setGarantia({ ...garantia, altoRendimiento: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
.contenedor-pregunta {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
|
||||
.pregunta-cuadro {
|
||||
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: #003e79;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rosa-fuerte {
|
||||
background-color: #dc1557;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Contenedor input */
|
||||
.input-contenedor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.input-contenedor input {
|
||||
width: 40%;
|
||||
padding: 6px 6px 6px 6px;
|
||||
border: 2px solid #003e79;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
background-color: rgb(232, 226, 226);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor input::-webkit-inner-spin-button,
|
||||
.input-contenedor input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Focus del input */
|
||||
.input-contenedor input:focus {
|
||||
border-color: #001f3f;
|
||||
box-shadow: 0 0 6px rgba(0, 47, 95, 0.3);
|
||||
}
|
||||
|
||||
/* Placeholder gris claro */
|
||||
.input-contenedor input::placeholder {
|
||||
color: #bbb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.input-contenedor .porcentaje {
|
||||
position: absolute;
|
||||
|
||||
right: 8px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Celda del total */
|
||||
.total-celda {
|
||||
font-weight: bold;
|
||||
color: #003e79;
|
||||
background-color: #eef2f6;
|
||||
}
|
||||
|
||||
/* Total > 100% */
|
||||
.total-error {
|
||||
background-color: #ffcccc;
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
|
||||
.input-sp input {
|
||||
width: 38%;
|
||||
padding: 6px 6px 6px 6px;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import "./reporte.css";
|
||||
import axios from "axios";
|
||||
import Pregunta9 from "../pregunta9/page";
|
||||
export default function Page() {
|
||||
const [report, setReport] = useState();
|
||||
|
||||
async function Report() {
|
||||
const res = await axios.get("https");
|
||||
setReport(res.data);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="reporte-layout">
|
||||
{/* Panel izquierdo: título, buscador y tabla */}
|
||||
<div className="panel-izquierdo">
|
||||
<div className="titulo-reporte">
|
||||
<p>REPORTE</p>
|
||||
</div>
|
||||
|
||||
<form action="/buscar" method="get">
|
||||
<input type="text" name="q" placeholder="Buscar equipo" />
|
||||
<button type="submit">Buscar</button>
|
||||
</form>
|
||||
|
||||
<div className="tabla-rec">
|
||||
{/* Aquí irá tu tabla real */}
|
||||
<p>Tabla de equipos...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Panel derecho: filtros + botón descargar */}
|
||||
<div className="panel-derecho">
|
||||
<div className="filtro-rec">
|
||||
<form className="editar">
|
||||
<p className="titulo-rec">Filtro</p>
|
||||
<div className="linea"></div>
|
||||
|
||||
<label htmlFor="adscripcion">Adscripción</label>
|
||||
<select id="adscripcion">
|
||||
<option value="">Seleccione la adscripción</option>
|
||||
<option value="informatica">CEDETEC</option>
|
||||
<option value="administracion">Administración</option>
|
||||
<option value="biblioteca">Biblioteca</option>
|
||||
<option value="direccion">Dirección</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="estado">Estado</label>
|
||||
<select id="estado">
|
||||
<option value="">Seleccione el estado del equipo</option>
|
||||
<option value="activo">Activo</option>
|
||||
<option value="mantenimiento">En Mantenimiento</option>
|
||||
<option value="baja">Dado de Baja</option>
|
||||
<option value="reparacion">En Reparación</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="tipo">Tipo de Equipo</label>
|
||||
<select id="tipo">
|
||||
<option value="">Seleccione el tipo de equipo</option>
|
||||
<option value="cpu">CPU</option>
|
||||
<option value="laptop">Laptop</option>
|
||||
<option value="monitor">Monitor</option>
|
||||
<option value="impresora">Impresora</option>
|
||||
<option value="servidor">Servidor</option>
|
||||
</select>
|
||||
|
||||
<label htmlFor="antiguedad">Antigüedad</label>
|
||||
<select id="antiguedad">
|
||||
<option value="">Seleccione la antigüedad del equipo</option>
|
||||
<option value="menos1">Menos de 1 año</option>
|
||||
<option value="1-3">1 a 3 años</option>
|
||||
<option value="3-5">3 a 5 años</option>
|
||||
<option value="mas5">Más de 5 años</option>
|
||||
</select>
|
||||
<Pregunta9/>
|
||||
<div className="botones-filtro">
|
||||
<button type="reset" className="limpiar">
|
||||
Limpiar filtros
|
||||
</button>
|
||||
<button type="submit" className="aplicar">
|
||||
Aplicar filtros
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button className="boton-descargar">Descargar</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
/* Contenedor principal del reporte */
|
||||
.reporte-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
padding: 20px;
|
||||
max-width: 1400px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/* Panel izquierdo: contenedor + tabla */
|
||||
.panel-izquierdo {
|
||||
flex: 1;
|
||||
min-width: 300px; /* evita que se colapse demasiado en móviles */
|
||||
}
|
||||
|
||||
/* Panel derecho: filtro */
|
||||
.panel-derecho {
|
||||
width: 320px; /* ancho fijo razonable para filtros */
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.titulo-reporte {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* Buscador */
|
||||
form[action="/buscar"] {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
form[action="/buscar"] input {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
form[action="/buscar"] button {
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
form[action="/buscar"] button: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;
|
||||
}
|
||||
|
||||
.filtro-rec .titulo-rec {
|
||||
font-weight: bold;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.filtro-rec label {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filtro-rec 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;
|
||||
}
|
||||
|
||||
.botones-filtro .aplicar,
|
||||
.botones-filtro .limpiar {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.botones-filtro .aplicar {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.botones-filtro .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%;
|
||||
}
|
||||
|
||||
/* Responsive: en pantallas pequeñas (iPad portrait, etc.) */
|
||||
@media (max-width: 768px) {
|
||||
.reporte-layout {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panel-derecho {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.panel-izquierdo {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.boton-descargar {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import { SO_POR_EQUIPO } from "@/data/so_por_equipo";
|
||||
import { PROCESADORES_POR_EQUIPO } from "@/data/procesadores";
|
||||
import { useRouter } from "next/navigation";
|
||||
import "../app/styles/layout/agregarEquipo.scss";
|
||||
interface FormData {
|
||||
interface FormData {
|
||||
inventario: string;
|
||||
serie: string;
|
||||
lugar: string;
|
||||
@@ -25,8 +25,8 @@ import "../app/styles/layout/agregarEquipo.scss";
|
||||
id_uso: number;
|
||||
id_marca: number;
|
||||
id_periferico: number;
|
||||
id_laboratorio: number | null; // ✅ ahora acepta null
|
||||
id_proyecto: number | null; // ✅ ahora acepta null
|
||||
id_laboratorio: number | null;
|
||||
id_proyecto: number | null;
|
||||
isImpresora: boolean;
|
||||
}
|
||||
export default function Page() {
|
||||
@@ -70,7 +70,6 @@ export default function Page() {
|
||||
}
|
||||
}, [inventario]);
|
||||
|
||||
|
||||
// Interfaces
|
||||
interface TipoUso {
|
||||
id_uso: number;
|
||||
@@ -190,7 +189,7 @@ export default function Page() {
|
||||
}
|
||||
};
|
||||
fetchProcesador();
|
||||
}, []); // Ya no depende de tiposEquipo (si la API los da todos juntos)
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPerifericos = async () => {
|
||||
@@ -203,7 +202,12 @@ export default function Page() {
|
||||
const response = await axios.get(`${api_url}/equipos/perifericos`, {
|
||||
headers,
|
||||
});
|
||||
setPerifericos(response.data);
|
||||
|
||||
const ordenados = response.data.sort((a: any, b: any) =>
|
||||
a.periferico.localeCompare(b.periferico)
|
||||
);
|
||||
|
||||
setPerifericos(ordenados);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error("No se pudieron cargar los periféricos");
|
||||
@@ -265,18 +269,18 @@ export default function Page() {
|
||||
setFormData((prev) => {
|
||||
let newValue: string | number | null | boolean = value;
|
||||
|
||||
if (field.startsWith("id_")) {
|
||||
if (value === "" || value === 0) {
|
||||
// Para campos opcionales, usamos null en lugar de 0
|
||||
if (field === "id_laboratorio" || field === "id_proyecto") {
|
||||
newValue = null;
|
||||
} else {
|
||||
newValue = 0;
|
||||
}
|
||||
} else {
|
||||
newValue = Number(value);
|
||||
}
|
||||
}
|
||||
if (field.startsWith("id_")) {
|
||||
if (value === "" || value === 0) {
|
||||
// Para campos opcionales, usamos null en lugar de 0
|
||||
if (field === "id_laboratorio" || field === "id_proyecto") {
|
||||
newValue = null;
|
||||
} else {
|
||||
newValue = 0;
|
||||
}
|
||||
} else {
|
||||
newValue = Number(value);
|
||||
}
|
||||
}
|
||||
if (field === "id_tipo_equipo") {
|
||||
const idTipoEquipo = Number(value);
|
||||
const tipoSeleccionado = tiposEquipo.find(
|
||||
@@ -380,8 +384,15 @@ if (field.startsWith("id_")) {
|
||||
await axios.post(`${api_url}/equipos/crear`, dataToSend, { headers });
|
||||
toast.success("Equipo guardado correctamente");
|
||||
router.push("/escaner");
|
||||
} catch (err) {
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
|
||||
if (err.response && err.response.status === 400) {
|
||||
const mensaje = err.response.data?.message || "El equipo ya 1existe";
|
||||
toast.error(mensaje);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.error("Error al guardar el equipo");
|
||||
}
|
||||
};
|
||||
@@ -605,7 +616,6 @@ if (field.startsWith("id_")) {
|
||||
<div className="formGroup">
|
||||
<label>Laboratorio</label>
|
||||
<select
|
||||
|
||||
value={formData.id_laboratorio ?? ""}
|
||||
onChange={(e) =>
|
||||
handleInputChange("id_laboratorio", e.target.value)
|
||||
@@ -673,3 +683,4 @@ if (field.startsWith("id_")) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -378,6 +378,7 @@ export default function Editar() {
|
||||
lugar: formData.lugar,
|
||||
id_sistema_operativo: formData.id_sistema_operativo,
|
||||
id_tipo_uso: formData.id_uso,
|
||||
id_periferico:formData.id_periferico,
|
||||
serie: formData.serie,
|
||||
modelo: formData.modelo,
|
||||
id_marca: formData.id_marca,
|
||||
@@ -389,7 +390,7 @@ export default function Editar() {
|
||||
headers,
|
||||
});
|
||||
toast.success("Equipo actualizado correctamente");
|
||||
router.push("/escaner");
|
||||
// router.push("/escaner");
|
||||
} catch (error) {
|
||||
console.error("Error al guardar:", error);
|
||||
toast.error("Hubo un error al guardar el equipo.");
|
||||
|
||||
@@ -14,6 +14,7 @@ interface EquiposImpresion {
|
||||
laserAltoVolumenColor: string;
|
||||
impresora3D: string;
|
||||
plotter: string;
|
||||
// credencial: string;
|
||||
}
|
||||
|
||||
export default function Pregunta1EP() {
|
||||
@@ -27,6 +28,7 @@ export default function Pregunta1EP() {
|
||||
laserAltoVolumenColor: "0",
|
||||
impresora3D: "0",
|
||||
plotter: "0",
|
||||
// credencial: "0",
|
||||
});
|
||||
|
||||
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
||||
@@ -52,6 +54,7 @@ export default function Pregunta1EP() {
|
||||
laserAltoVolumenColor: "0",
|
||||
impresora3D: "0",
|
||||
plotter: "0",
|
||||
// credencial: "0",
|
||||
};
|
||||
|
||||
data.forEach((item: any) => {
|
||||
@@ -89,6 +92,9 @@ export default function Pregunta1EP() {
|
||||
case "3D":
|
||||
valores.impresora3D = total;
|
||||
break;
|
||||
// case "IMPRESORA CREDENCIALES":
|
||||
// valores.credencial = total;
|
||||
// break;
|
||||
case "PLOTTER":
|
||||
valores.plotter = total;
|
||||
break;
|
||||
@@ -213,6 +219,15 @@ export default function Pregunta1EP() {
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="item">
|
||||
<label>Credencial</label>
|
||||
<input
|
||||
type="text"
|
||||
value={equipos.credencial}
|
||||
disabled
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user