tring to create

This commit is contained in:
2025-11-06 19:06:24 -06:00
9 changed files with 609 additions and 7 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 235 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M480-360 280-560h400L480-360Z"/></svg>

After

Width:  |  Height:  |  Size: 154 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="m280-400 200-200 200 200H280Z"/></svg>

After

Width:  |  Height:  |  Size: 154 B

+150
View File
@@ -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<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 portatiles Plataforma PC',
'apple-laptop': 'Computadoras portatiles 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;
+161
View File
@@ -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<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;
+166
View File
@@ -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;
}
}
+119
View File
@@ -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;
}
}
+11 -7
View File
@@ -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) {