CIDWA/front-Censo
13
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

added pregunta 8 and edited styles

Browse Source
This commit is contained in:
Lino
2025-11-21 11:29:47 -06:00
parent 1f4bdf5b97
commit 4833c24571
8 changed files with 216 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(Administrador)/equipoComputo/page.tsx
+7 -1
View File
@@ -7,6 +7,7 @@ import Pregunta3 from "@/components/Equipo_Computo/Pregunta3";
import Pregunta7EP from "@/components/Perifericos/Pregunta7EP";
import Pregunta9 from "@/components/Equipo_Computo/Pregunta9";
import "../../styles/layout/reporte.scss";
import Pregunta8 from "@/components/Perifericos/Pregunta8";
type PreguntaKey =
| "pregunta1"
@@ -44,7 +45,12 @@ export default function Page() {
case "pregunta3":
return <Pregunta3 />;
case "pregunta7EP":
return <Pregunta7EP />;
return (
<>
<Pregunta7EP />
<Pregunta8 />
</>
);
case "pregunta9":
return <Pregunta9 />;
default:
src/app/styles/layout/BarNavigation.scss
+2 -2
View File
@@ -21,7 +21,7 @@
cursor: pointer;
width: auto;
transition: background-color 0.3s ease;
font-size: 1.5rem;
font-size: 1rem;
}
.menuToggle {
@@ -88,7 +88,7 @@
align-items: center;
justify-content: center;
color: #383838;
font-size: 2rem;
font-size: 1.5rem;
}
.links {
src/app/styles/layout/BarNavigationAdmin.scss
+2 -2
View File
@@ -21,7 +21,7 @@
cursor: pointer;
width: auto;
transition: background-color 0.3s ease;
font-size: 1.5rem;
font-size: 1rem;
}
.menuToggle {
@@ -88,7 +88,7 @@
align-items: center;
justify-content: center;
color: #383838;
font-size: 2rem;
font-size: 1.5rem;
}
.links {
src/app/styles/layout/reporte.scss
+2 -1
View File
@@ -88,11 +88,12 @@
.data-table_reporte {
display: flex;
flex-direction: column;
gap: 10px;
gap: 20px;
justify-content: center;
padding: 20px;
background-color: #f5f5f7;
text-align: center;
border: none;
min-height: 300px;
animation: fadein 0.2s ease;
src/components/Equipo_Computo/Pregunta1.tsx
+2 -3
View File
@@ -170,9 +170,8 @@ export default function Pregunta1() {
<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. *
Número de equipos de cómputo
por cada categoría enlistada, de acuerdo con el perfil de usuario.
</div>
<div className="contenedor-tablas">
src/components/Equipo_Computo/Pregunta2.tsx
+2 -6
View File
@@ -57,9 +57,9 @@ export default function Pregunta2() {
const token = Cookies.get("token");
const headers = {Authorization: `Bearer ${token}`};
axios
.get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_sistemasOperativos",{headers}) // ← TU API AQUI
.get("https://venus.acatlan.unam.mx/censo_test/equipos/reporte/tipoEquipos_sistemasOperativos",{headers})
.then((res) => {
const json = res.data; // Tu JSON con 5 arreglos
const json = res.data;
const formatted: PlatformData = {
"pc-desktop": transformPlatform(json[0]),
@@ -85,10 +85,6 @@ export default function Pregunta2() {
Censo de equipos — Sistemas Operativos
</div>
<div className={styles.header_P1}>
Presione cada pestaña para ver la información de las plataformas.
</div>
<div className={styles["main-content_P1"]}>
{/* Tabs */}
<div className={styles.tabs_P1}>
src/components/Perifericos/Pregunta7EP.tsx
+32 -26
View File
@@ -1,6 +1,8 @@
"use client";
import React, { useState, useEffect } from "react";
import axios from "axios";
import Cookies from "js-cookie";
import "../../app/styles/layout/pregunta7.scss";
interface Dato {
@@ -8,29 +10,6 @@ interface Dato {
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 },
];
export default function Pregunta7EP() {
const [data, setData] = useState<Dato[]>([]);
const [currentPage, setCurrentPage] = useState<number>(1);
@@ -38,8 +17,25 @@ export default function Pregunta7EP() {
const [sortColumn, setSortColumn] = useState<keyof Dato | null>(null);
const [sortAsc, setSortAsc] = useState<boolean>(true);
const api_url = process.env.NEXT_PUBLIC_API_URL;
useEffect(() => {
setData(datosSimulados);
const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };
axios
.get(`${api_url}/equipos/reporte/contar_laboratorio`, { headers })
.then((res) => {
const formato: Dato[] = res.data.map((item: any) => ({
nombre: item.laboratorio || "SIN NOMBRE",
cantidad: item.total || 0,
}));
setData(formato);
})
.catch((err) => {
console.error("Error cargando datos:", err);
});
}, []);
const sortedData = React.useMemo(() => {
@@ -80,6 +76,10 @@ export default function Pregunta7EP() {
return (
<div className="container">
<div className="pregunta-cuadro">
Numero de laboratorios.
</div>
<div className="controls">
<div className="show-records">
Mostrar
@@ -99,7 +99,10 @@ export default function Pregunta7EP() {
<table>
<thead>
<tr>
<th onClick={() => handleSort("nombre")}>
<th
onClick={() => handleSort("nombre")}
style={{ textAlign: "center" }}
>
Nombre del laboratorio o aula
{sortColumn === "nombre" && (
<img
@@ -109,7 +112,10 @@ export default function Pregunta7EP() {
)}
</th>
<th onClick={() => handleSort("cantidad")}>
<th
onClick={() => handleSort("cantidad")}
style={{ textAlign: "center" }}
>
Cantidad
{sortColumn === "cantidad" && (
<img
src/components/Perifericos/Pregunta8.tsx
+167
View File
@@ -0,0 +1,167 @@
"use client";
import React, { useState, useEffect } from "react";
import axios from "axios";
import Cookies from "js-cookie";
import "../../app/styles/layout/pregunta7.scss";
interface Dato {
nombre: string;
cantidad: number;
}
export default function Pregunta8() {
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);
const api_url = process.env.NEXT_PUBLIC_API_URL;
useEffect(() => {
const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };
axios
.get(`${api_url}/equipos/reporte/contar_proyecto`, { headers })
.then((res) => {
const formato: Dato[] = res.data.map((item: any) => ({
nombre: item.proyecto || "SIN PROYECTO",
cantidad: Number(item.total) || 0,
}));
setData(formato);
})
.catch((err) => {
console.error("Error cargando datos:", err);
});
}, []);
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="pregunta-cuadro">Numero de proyectos.</div>
<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={{ textAlign: "center" }}
>
Proyecto
{sortColumn === "nombre" && (
<img
src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
alt="orden"
/>
)}
</th>
<th
onClick={() => handleSort("cantidad")}
style={{ textAlign: "center" }}
>
Cantidad
{sortColumn === "cantidad" && (
<img
src={sortAsc ? "/arrow_up.svg" : "/arrow_down.svg"}
alt="orden"
/>
)}
</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>
);
}