mensaje

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

@@ -0,0 +1,89 @@
+"use client";
+import React, { useState } from "react";
+import "./pregunta7.css";
+
+export default function Pregunta9() {
+  
+  const [datos, setDatos] = useState([
+    { nombre: "Impresión", valores: ["", "", "", ""] },
+    { nombre: "Digitilización", valores: ["", "", "", ""] },
+    
+  ]);
+
+
+  const [garantia, setGarantia] = useState({
+    escritorio: "",
+    portatil: "",
+    altoRendimiento: "",
+  });
+
+  // Función para actualizar datos de Pregunta 9
+  const handleChange = (filaIndex: number, colIndex: number, value: string) => {
+    const nuevosDatos = [...datos];
+    nuevosDatos[filaIndex].valores[colIndex] = value;
+    setDatos(nuevosDatos);
+  };
+
+  // Función para calcular total de cada fila en Pregunta 9
+  const calcularTotal = (valores: string[]) =>
+    valores.reduce((acc, val) => acc + (Number(val) || 0), 0);
+
+  return (
+    <div className="contenedor-pregunta">
+      {/* Pregunta 7 */}
+      <div className="contenedor-censo">Censo de equipos periféricos - Estado del equipo periférico (impresion y digitalización.)</div>
+     
+
+      <div className="pregunta-cuadro">
+        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 className="azul-marino">% Antiguedad de los equipos</th>
+              <th className="rosa-fuerte">Menor a 2 años</th>
+              <th className="rosa-fuerte">Entre 2 y 3 años</th>
+              <th className="rosa-fuerte">Entre 4 y 5 años</th>
+              <th className="rosa-fuerte">Mayor a 6 años</th>
+              <th className="azul-marino">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {datos.map((fila, filaIndex) => {
+              const total = calcularTotal(fila.valores);
+              return (
+                <tr key={filaIndex}>
+                  <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>
+  );
+}

src/app/(Administrador)/pregunta7/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;
+}
+