diff --git a/public/arrow_down.png b/public/arrow_down.png new file mode 100644 index 0000000..f3b44fb Binary files /dev/null and b/public/arrow_down.png differ diff --git a/public/arrow_down.svg b/public/arrow_down.svg new file mode 100644 index 0000000..791c928 --- /dev/null +++ b/public/arrow_down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/arrow_up.png b/public/arrow_up.png new file mode 100644 index 0000000..294e2a0 Binary files /dev/null and b/public/arrow_up.png differ diff --git a/public/arrow_up.svg b/public/arrow_up.svg new file mode 100644 index 0000000..162023c --- /dev/null +++ b/public/arrow_up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/(Administrador)/pregunta1/page.tsx b/src/app/(Administrador)/pregunta1/page.tsx new file mode 100644 index 0000000..6174012 --- /dev/null +++ b/src/app/(Administrador)/pregunta1/page.tsx @@ -0,0 +1,150 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import '../../styles/layout/pregunta1.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: '205' }, + { os: 'Mac OS X(Mojave,Catalina,11 - Big Sur, 12 - Monterrey)', count: '180' }, + { os: 'Mac OS X(Yosemite,El Capitan,Sierra,High Sierra)', count: '95' }, + { os: 'Mac OS X(Snow Leopard,Mountain Lion,Mavericks)', count: '6' }, + { os: 'Total', count: '480', isTotal: true }, + ], + 'servers': [ + { os: 'Linux (CentOs,Fedora,Ubuntu,Red Hat Enterprise,entre otros)', count: '120' }, + { os: 'Unix (AIX,MAC OS Server,Solaris,entre otros)', count: '80' }, + { os: 'Windows Server 2022/2023', count: '50' }, + { os: 'Windows Server 2016/2019', count: '80' }, + { os: 'Windows Server 2008/2012', count: '50' }, + { os: 'Windows Server 2000/2003', count: '12' }, + { os: 'Total', count: '250', isTotal: true }, + ], +}; + +const API_ENDPOINT = '/api/platform-stats'; // ← ¡Reemplaza esto cuando sepas la URL real! + +const Page = () => { + const [activeTab, setActiveTab] = useState('pc-desktop'); + const [data, setData] = useState(MOCK_DATA); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + // === DESCOMENTA ESTO CUANDO TENGAS LA API === + // const response = await fetch(API_ENDPOINT); + // if (!response.ok) throw new Error('Error al cargar estadísticas'); + // const apiData: PlatformData = await response.json(); + // setData(apiData); + // setLoading(false); + + // === POR AHORA: usa datos simulados (y simula un retraso si quieres) === + // await new Promise(resolve => setTimeout(resolve, 300)); + setData(MOCK_DATA); + setLoading(false); + } catch (err) { + console.error('Error al cargar datos:', err); + setError('No se pudieron cargar las estadísticas. Usando datos temporales.'); + setData(MOCK_DATA); // fallback en caso de error + setLoading(false); + } + }; + + fetchData(); + }, []); + + const currentData = data[activeTab] || []; + + // Si quisieras mostrar un estado de carga (opcional) + // if (loading) return

Cargando...

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

Estadísticas de Plataformas

+
+ +
+
+
+ Presione cada pestaña para ver la información de las plataformas. +
+ +
+
+ {Object.entries({ + 'pc-desktop': 'Computadoras de escritorio Plataforma PC', + 'apple-desktop': 'Computadoras de escritorio Plataforma Apple', + 'pc-laptop': 'Computadoras portatiles Plataforma PC', + 'apple-laptop': 'Computadoras portatiles Plataforma Apple', + 'servers': 'Servidores de alto rendimiento', + }).map(([key, label]) => ( +
setActiveTab(key)} + > + {label} +
+ ))} +
+ +
+
+ {currentData.map((item, index) => ( +
+
{item.os}
+
{item.count}
+
+ ))} +
+
+
+
+
+
+ ); +}; + +export default Page; \ No newline at end of file diff --git a/src/app/(Administrador)/pregunta7/page.tsx b/src/app/(Administrador)/pregunta7/page.tsx new file mode 100644 index 0000000..47f372a --- /dev/null +++ b/src/app/(Administrador)/pregunta7/page.tsx @@ -0,0 +1,161 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import '../../styles/layout/pregunta7.scss'; + +interface Dato { + nombre: string; + cantidad: number; +} + +const datosSimulados: Dato[] = [ + { nombre: "AULA DE ROBÓTICA 101", cantidad: 18 }, + { nombre: "LAB DE QUÍMICA 201", cantidad: 25 }, + { nombre: "LAB DE FÍSICA 202", cantidad: 30 }, + { nombre: "LAB DE PROGRAMACIÓN 301", cantidad: 40 }, + { nombre: "AULA DE DISEÑO 102", cantidad: 22 }, + { nombre: "LAB ELECTRÓNICA 204", cantidad: 35 }, + { nombre: "LAB COMPUTACIÓN 305", cantidad: 28 }, + { nombre: "AULA INTERACTIVA 106", cantidad: 15 }, + { nombre: "LAB DE INNOVACIÓN 307", cantidad: 33 }, + { nombre: "SALA DE CONFERENCIAS A", cantidad: 12 }, + { nombre: "LAB DE MECATRÓNICA 308", cantidad: 45 }, + { nombre: "LAB DE INTELIGENCIA ARTIFICIAL 309", cantidad: 38 }, + { nombre: "LAB DE REDES 310", cantidad: 27 }, + { nombre: "SALA MULTIMEDIA B", cantidad: 20 }, + { nombre: "LAB DE BIOLOGÍA 205", cantidad: 26 }, + { nombre: "LAB DE MECÁNICA 210", cantidad: 32 }, + { nombre: "AULA DE INGLÉS 110", cantidad: 19 }, + { nombre: "SALA DE DOCENTES", cantidad: 14 }, + { nombre: "LAB DE BIG DATA 311", cantidad: 36 }, + { nombre: "LAB DE CIBERSEGURIDAD 312", cantidad: 29 }, +]; + +const Page: React.FC = () => { + const [data, setData] = useState([]); + const [currentPage, setCurrentPage] = useState(1); + const [recordsPerPage, setRecordsPerPage] = useState(10); + const [sortColumn, setSortColumn] = useState(null); + const [sortAsc, setSortAsc] = useState(true); + + useEffect(() => { + setData(datosSimulados); + }, []); + + const sortedData = React.useMemo(() => { + if (!sortColumn) return data; + return [...data].sort((a, b) => { + if (a[sortColumn] < b[sortColumn]) return sortAsc ? -1 : 1; + if (a[sortColumn] > b[sortColumn]) return sortAsc ? 1 : -1; + return 0; + }); + }, [data, sortColumn, sortAsc]); + + const paginatedData = React.useMemo(() => { + const start = (currentPage - 1) * recordsPerPage; + return sortedData.slice(start, start + recordsPerPage); + }, [sortedData, currentPage, recordsPerPage]); + + const totalPages = Math.ceil(sortedData.length / recordsPerPage); + + const handleSort = (column: keyof Dato) => { + if (sortColumn === column) { + setSortAsc(!sortAsc); + } else { + setSortColumn(column); + setSortAsc(true); + } + setCurrentPage(1); + }; + + const handleRecordsPerPageChange = (e: React.ChangeEvent) => { + setRecordsPerPage(Number(e.target.value)); + setCurrentPage(1); + }; + + const startItem = (currentPage - 1) * recordsPerPage + 1; + const endItem = Math.min(startItem + recordsPerPage - 1, sortedData.length); + + return ( +
+
+
+ Mostrar + + registros +
+
+ Mostrando {startItem} al {endItem} de {sortedData.length} resultados +
+
+ +
+ + + + + + + + + {paginatedData.map((item, index) => ( + + + + + ))} + +
handleSort('nombre')} style={{ cursor: 'pointer' }}> + Nombre del laboratorio o aula + {sortColumn === 'nombre' && sortAsc && ascendente} + {sortColumn === 'nombre' && !sortAsc && descendente} + {sortColumn !== 'nombre' && ( + <> + + )} + handleSort('cantidad')} style={{ cursor: 'pointer' }}> + Cantidad + {sortColumn === 'cantidad' && sortAsc && ascendente} + {sortColumn === 'cantidad' && !sortAsc && descendente} + {sortColumn !== 'cantidad' && ( + <> + + + )} +
{item.nombre}{item.cantidad}
+
+ +
+ + + {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => ( + + ))} + + +
+
+ ); +}; + +export default Page; diff --git a/src/app/styles/layout/pregunta1.scss b/src/app/styles/layout/pregunta1.scss new file mode 100644 index 0000000..dff448f --- /dev/null +++ b/src/app/styles/layout/pregunta1.scss @@ -0,0 +1,166 @@ +.dashboardContainer { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + min-height: 100vh; + background-color: #f4f4f4; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + background-color: #ffffff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 10; + + h2 { + margin: 0; + font-size: 1.5rem; + color: #0056b3; + } +} + +.scanView { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding: 20px; + width: 100%; + height: 100%; + + .container { + width: 100%; + max-width: 900px; + background: #fff; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); + overflow: hidden; + display: flex; + flex-direction: column; + border: 1px solid #ddd; + } + + .header { + padding: 16px 20px; + background: #f7f7f7; + border-bottom: 1px solid #e0e0e0; + font-size: 15px; + color: #0056b3; + text-align: center; + font-weight: 500; + display: block; + box-shadow: none; + position: static; + } + + .main-content { + display: flex; + min-height: 420px; + } + + .tabs { + width: 230px; + background-color: #fafafa; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + + .tab { + padding: 18px 16px; + cursor: pointer; + border-right: 1px solid #e0e0e0; + color: #555; + transition: all 0.3s ease; + border-left: 4px solid transparent; + font-size: 15px; + font-weight: 500; + } + + .tab:hover { + background-color: #f0f0f0; + color: #000; + } + + .tab.active { + background-color: #fff; + border-left: 4px solid #0056b3; + border-right: none; + border-bottom: 1px solid #0056b3; + color: #0056b3; + font-weight: 600; + } + + .data-table-wrapper { + flex: 1; + padding: 20px; + } + + .data-table { + width: 100%; + } + + .data-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: #f9f9f9; + transition: background 0.2s ease; + } + + .data-row:hover { + background: #f1f1f1; + } + + .os-name { + flex: 1; + font-size: 15px; + color: #333; + } + + .count-box { + background: #ffffff; + border: 1px solid #0056b3; + padding: 6px 14px; + font-weight: 600; + font-size: 15px; + text-align: center; + min-width: 70px; + } + + .total-row { + background: #eaf4ff; + font-weight: bold; + + .count-box { + color:#0056b3; + } + } +} + +/* ======== RESPONSIVE ======== */ +@media (max-width: 700px) { + .scanView .main-content { + flex-direction: column; + } + + .scanView .tabs { + flex-direction: row; + width: 100%; + } + + .scanView .tab { + flex: 1; + padding: 14px 0; + text-align: center; + font-size: 13px; + } +} \ No newline at end of file diff --git a/src/app/styles/layout/pregunta7.scss b/src/app/styles/layout/pregunta7.scss new file mode 100644 index 0000000..c1bd3d8 --- /dev/null +++ b/src/app/styles/layout/pregunta7.scss @@ -0,0 +1,119 @@ +.container { + max-width: 100%; + margin: 10px 10%; +} + +.controls { + display: flex; + flex-wrap: wrap; + border-radius: 4px 4px 0 0; + justify-content: space-between; + align-items: center; + gap: 10px; + padding: 12px 16px; + background-color: #fff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); +} + +.show-records { + display: flex; + align-items: center; + gap: 8px; + font-size: 15px; + + select { + padding: 6px 10px; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 14px; + background-color: #fafafa; + } +} + +.results-info { + font-size: 14px; + color: #555; +} + +.table-container { + background-color: #fff; + border-radius:0 0 4px 4px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); + overflow: hidden; +} + +table { + width: 100%; + border-collapse: collapse; +} + +thead th { + background-color: #0056b3; + color: #fff; + text-align: left; + padding: 14px; + font-size: 15px; + font-weight: 600; + cursor: pointer; + user-select: none; + transition: background-color 0.3s; + + + + &:hover { + background-color: #0056b3; + } +} + +tbody td { + padding: 12px 14px; + border-bottom: 1px solid #f0f0f0; + font-size: 15px; +} + +tr:nth-child(even) { + background-color: #fafafa; +} + +.pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + padding: 14px; + margin-top: 15px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); + + button { + border: 1px solid #ccc; + background-color: #fff; + color: #333; + padding: 6px 12px; + border-radius: 5px; + font-size: 14px; + cursor: pointer; + transition: all 0.2s; + + &:hover { + background-color: #ede9fe; + border-color: #0056b3; + color: #0056b3; + } + + &.active { + background-color:#0056b3; + color: #fff; + border-color: #0056b3; + font-weight: 600; + } + } +} + +@media (max-width: 768px) { + .controls { + flex-direction: column; + align-items: flex-start; + } +} \ No newline at end of file diff --git a/src/components/AgregarEquipo.tsx b/src/components/AgregarEquipo.tsx index faf6d36..9e94c70 100644 --- a/src/components/AgregarEquipo.tsx +++ b/src/components/AgregarEquipo.tsx @@ -21,18 +21,20 @@ export default function Page() { const [formData, setFormData] = useState({ inventario: "", serie: "", - marca: "", + lugar: "", + fechaFactura: new Date(), + antiguedad: "0 años", modelo: "", - tipoEquipo: "", estado: "", + adscripcion: "", + tipoEquipo: "", sistemaOperativo: "", procesador: "", tipoUso: "", - observaciones: "", - adscripcion: "", - lugar: "", - responsable: "", + marca: "", tipoPeriferico: "", + isImpresora: , + observaciones: "", }); useEffect(() => { @@ -233,6 +235,8 @@ export default function Page() { setFormData({ inventario: "", serie: "", + fechaFactura: new Date(), + antiguedad: "", marca: "", modelo: "", tipoEquipo: "", @@ -243,7 +247,7 @@ export default function Page() { observaciones: "", adscripcion: "", lugar: "", - responsable: "", + isImpresora:"", tipoPeriferico: "", }); } catch (err) {