git merge ale

src/app/(Administrador)/pregunta7.1/page.tsx

@@ -0,0 +1,172 @@
+"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/(Administrador)/pregunta7.1/pregunta7.css

@@ -0,0 +1,134 @@
+.contenedor-pregunta {
+  padding: 20px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f9fafc;
+}
+
+.contenedor-censo{
+background-color: #001f3f;
+color: white;
+}
+ 
+
+.pregunta-cuadro {
+  background-color: #f5f5f5;
+  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: #002855;
+  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 25px 6px 6px;
+  border: 2px solid #002855; 
+  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: #002855;
+  background-color: #eef2f6;
+}
+
+/* Total > 100% */
+.total-error {
+  background-color: #ffcccc;
+  color: #a80000;
+}
+

src/app/(Administrador)/pregunta7/page.tsx

@@ -1,172 +1,89 @@
 "use client";
+import React, { useState } from "react";
+import "./pregunta7.css";
 
-import React, { useState, useEffect } from "react";
+export default function Pregunta7() {
-import "../../styles/layout/pregunta7.scss";
+  const [datos, setDatos] = useState([
+    { nombre: "Impresión", valores: ["", "", "", ""] },
+    { nombre: "Digitalización", valores: ["", "", "", ""] },
+  ]);
 
-interface Dato {
+  const [garantia, setGarantia] = useState({
-  nombre: string;
+    escritorio: "",
-  cantidad: number;
+    portatil: "",
-}
+    altoRendimiento: "",
+  });
 
-const datosSimulados: Dato[] = [
+  // Función para actualizar datos de Pregunta 7
-  { nombre: "AULA DE ROBÓTICA 101", cantidad: 18 },
+  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
-  { nombre: "LAB DE QUÍMICA 201", cantidad: 25 },
+    const nuevosDatos = [...datos];
-  { nombre: "LAB DE FÍSICA 202", cantidad: 30 },
+    nuevosDatos[filaIndex].valores[colIndex] = value;
-  { nombre: "LAB DE PROGRAMACIÓN 301", cantidad: 40 },
+    setDatos(nuevosDatos);
-  { 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 = (
+  // Función para calcular total de cada fila en Pregunta 7
-    e: React.ChangeEvent<HTMLSelectElement>
+  const calcularTotal = (valores: string[]) =>
-  ) => {
+    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
-    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="contenedor-pregunta">
-      <div className="controls">
+      {/* Pregunta 7 */}
-        <div className="show-records">
+      <div className="contenedor-censo">
-          Mostrar
+        Censo de equipos periféricos - Estado del equipo periférico (impresión y
-          <select value={recordsPerPage} onChange={handleRecordsPerPageChange}>
+        digitalización.)
-            <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">
+      <div className="pregunta-cuadro">
-        <table>
+        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
+              <th className="azul-marino">% Antiguedad de los equipos</th>
-                onClick={() => handleSort("nombre")}
+              <th className="rosa-fuerte">Menor a 2 años</th>
-                style={{ cursor: "pointer" }}
+              <th className="rosa-fuerte">Entre 2 y 3 años</th>
-              >
+              <th className="rosa-fuerte">Entre 4 y 5 años</th>
-                Nombre del laboratorio o aula
+              <th className="rosa-fuerte">Mayor a 6 años</th>
-                {sortColumn === "nombre" && sortAsc && (
+              <th className="azul-marino">Total</th>
-                  <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) => (
+            {datos.map((fila, filaIndex) => {
-              <tr key={index}>
+              const total = calcularTotal(fila.valores);
-                <td>{item.nombre}</td>
+              return (
-                <td>{item.cantidad}</td>
+                <tr key={filaIndex}>
-              </tr>
+                  <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 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/(Administrador)/pregunta7/pregunta7.css

@@ -5,8 +5,11 @@
 }
 
 .contenedor-censo{
-background-color: #001f3f;
+  background-color: #002855;
-color: white;
+  color: white;
+  padding: 15px;
+  font-size: 16px;
+  margin-bottom: 25px;
 }