Creacion de vista pregunta7

public/arrow_down.svg

@@ -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>

public/arrow_up.svg

@@ -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>

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<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;

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;
+  }
+}