From 96741361c7496d55fdea007fe2cee6730546afd3 Mon Sep 17 00:00:00 2001
From: jls846 <jlussanchez123@gmail.com>
Date: Sat, 8 Nov 2025 10:47:13 -0600
Subject: [PATCH] Creacion de vista pregunta7,1,2,4y5

---
 src/app/(Administrador)/pregunta1EP/page.tsx | 162 +++++++++++++++++++
 src/app/(Administrador)/pregunta2EP/page.tsx | 125 ++++++++++++++
 src/app/(Administrador)/pregunta4EP/page.tsx |  98 +++++++++++
 src/app/(Administrador)/pregunta5EP/page.tsx |  56 +++++++
 src/app/styles/layout/pregunta1EP.scss       |  52 ++++++
 src/app/styles/layout/pregunta2EP.scss       |  63 ++++++++
 src/app/styles/layout/pregunta4EP.scss       |  55 +++++++
 src/app/styles/layout/pregunta5EP.scss       |  70 ++++++++
 8 files changed, 681 insertions(+)
 create mode 100644 src/app/(Administrador)/pregunta1EP/page.tsx
 create mode 100644 src/app/(Administrador)/pregunta2EP/page.tsx
 create mode 100644 src/app/(Administrador)/pregunta4EP/page.tsx
 create mode 100644 src/app/(Administrador)/pregunta5EP/page.tsx
 create mode 100644 src/app/styles/layout/pregunta1EP.scss
 create mode 100644 src/app/styles/layout/pregunta2EP.scss
 create mode 100644 src/app/styles/layout/pregunta4EP.scss
 create mode 100644 src/app/styles/layout/pregunta5EP.scss

diff --git a/src/app/(Administrador)/pregunta1EP/page.tsx b/src/app/(Administrador)/pregunta1EP/page.tsx
new file mode 100644
index 0000000..8f36988
--- /dev/null
+++ b/src/app/(Administrador)/pregunta1EP/page.tsx
@@ -0,0 +1,162 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import "../../styles/layout/pregunta1EP.scss";
+
+interface EquiposImpresion {
+  inyeccionTinta: string;
+  laserPequenaBN: string;
+  matrizPuntos: string;
+  laserAltoVolumenBN: string;
+  laserPequenaColor: string;
+  multifuncionales: string;
+  laserAltoVolumenColor: string;
+  impresora3D: string;
+  plotter: string;
+}
+
+export default function Pregunta1EPPage() {
+  const [equipos, setEquipos] = useState<EquiposImpresion>({
+    inyeccionTinta: "7",
+    laserPequenaBN: "186",
+    matrizPuntos: "",
+    laserAltoVolumenBN: "28",
+    laserPequenaColor: "20",
+    multifuncionales: "108",
+    laserAltoVolumenColor: "18",
+    impresora3D: "2",
+    plotter: "11",
+  });
+
+  // 🔹 Preparado para conectar con API del backend
+  useEffect(() => {
+    // Cuando te den la API, descomenta y edita la URL 👇
+    /*
+    fetch("https://tu-api-backend.com/api/equipos-impresion")
+      .then((res) => res.json())
+      .then((data) => setEquipos(data))
+      .catch((err) => console.error("Error al obtener datos:", err));
+    */
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEquipos({
+      ...equipos,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  return (
+    <div className="container">
+      <div className="header">
+        1. Desglose el número de equipos de impresión con que cuenta el área
+        universitaria.
+      </div>
+
+      <div className="grid">
+        {/* Columna 1 */}
+        <div className="item">
+          <label htmlFor="inyeccionTinta">Inyección de tinta</label>
+          <input
+            type="text"
+            id="inyeccionTinta"
+            name="inyeccionTinta"
+            value={equipos.inyeccionTinta}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="laserPequenaBN">Láser pequeña B/N</label>
+          <input
+            type="text"
+            id="laserPequenaBN"
+            name="laserPequenaBN"
+            value={equipos.laserPequenaBN}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="matrizPuntos">Matriz de puntos</label>
+          <input
+            type="text"
+            id="matrizPuntos"
+            name="matrizPuntos"
+            value={equipos.matrizPuntos}
+            onChange={handleChange}
+          />
+        </div>
+
+        {/* Columna 2 */}
+        <div className="item">
+          <label htmlFor="laserAltoVolumenBN">Láser de alto volumen B/N</label>
+          <input
+            type="text"
+            id="laserAltoVolumenBN"
+            name="laserAltoVolumenBN"
+            value={equipos.laserAltoVolumenBN}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="laserPequenaColor">Láser pequeña Color</label>
+          <input
+            type="text"
+            id="laserPequenaColor"
+            name="laserPequenaColor"
+            value={equipos.laserPequenaColor}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="multifuncionales">Multifuncionales</label>
+          <input
+            type="text"
+            id="multifuncionales"
+            name="multifuncionales"
+            value={equipos.multifuncionales}
+            onChange={handleChange}
+          />
+        </div>
+
+        {/* Columna 3 */}
+        <div className="item">
+          <label htmlFor="laserAltoVolumenColor">
+            Láser de alto volumen Color
+          </label>
+          <input
+            type="text"
+            id="laserAltoVolumenColor"
+            name="laserAltoVolumenColor"
+            value={equipos.laserAltoVolumenColor}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="impresora3D">3D</label>
+          <input
+            type="text"
+            id="impresora3D"
+            name="impresora3D"
+            value={equipos.impresora3D}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="plotter">Plotter</label>
+          <input
+            type="text"
+            id="plotter"
+            name="plotter"
+            value={equipos.plotter}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(Administrador)/pregunta2EP/page.tsx b/src/app/(Administrador)/pregunta2EP/page.tsx
new file mode 100644
index 0000000..0501263
--- /dev/null
+++ b/src/app/(Administrador)/pregunta2EP/page.tsx
@@ -0,0 +1,125 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import "../../styles/layout/pregunta2EP.scss";
+
+interface EquiposPoblacion {
+  alumnos: string;
+  profesores: string;
+  tecnicosAcademicos: string;
+  investigadores: string;
+  administrativos: string;
+  total: string;
+}
+
+export default function Pregunta2EPPage() {
+  const [equipos, setEquipos] = useState<EquiposPoblacion>({
+    alumnos: "35",
+    profesores: "43",
+    tecnicosAcademicos: "",
+    investigadores: "",
+    administrativos: "302",
+    total: "380",
+  });
+
+  // 🔹 Preparado para conectarse al backend
+  useEffect(() => {
+    // Cuando tengas la API, descomenta esta parte 👇 y reemplaza la URL:
+    /*
+    fetch("https://tu-api-backend.com/api/equipos-poblacion")
+      .then((res) => res.json())
+      .then((data) => setEquipos(data))
+      .catch((err) => console.error("Error al obtener datos:", err));
+    */
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setEquipos({
+      ...equipos,
+      [name]: value,
+    });
+  };
+
+  return (
+    <div className="container">
+      <div className="header">
+        <span style={{ color: "#d9534f", fontWeight: "normal" }}>*</span>{" "}
+        <small>(Requerido en el caso de contar con Equipo de impresión)</small>
+      </div>
+
+      <div className="row">
+        <div className="item">
+          <label htmlFor="alumnos">Alumnos</label>
+          <input
+            type="text"
+            id="alumnos"
+            name="alumnos"
+            value={equipos.alumnos}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="profesores">
+            Profesores <span className="help-icon">?</span>
+          </label>
+          <input
+            type="text"
+            id="profesores"
+            name="profesores"
+            value={equipos.profesores}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="tecnicosAcademicos">Técnicos Académicos</label>
+          <input
+            type="text"
+            id="tecnicosAcademicos"
+            name="tecnicosAcademicos"
+            value={equipos.tecnicosAcademicos}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="investigadores">
+            Investigadores <span className="help-icon">?</span>
+          </label>
+          <input
+            type="text"
+            id="investigadores"
+            name="investigadores"
+            value={equipos.investigadores}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="administrativos">
+            Administrativos <span className="help-icon">?</span>
+          </label>
+          <input
+            type="text"
+            id="administrativos"
+            name="administrativos"
+            value={equipos.administrativos}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="total">Total</label>
+          <input
+            type="text"
+            id="total"
+            name="total"
+            value={equipos.total}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(Administrador)/pregunta4EP/page.tsx b/src/app/(Administrador)/pregunta4EP/page.tsx
new file mode 100644
index 0000000..ee0e02d
--- /dev/null
+++ b/src/app/(Administrador)/pregunta4EP/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import "../../styles/layout/pregunta4EP.scss";
+
+interface EquiposDigitalizacion {
+  digitalizadorCamaPlana: string;
+  digitalizador3d: string;
+  digitalizadorAlimentador: string;
+  digitalizadorGranVolumen: string;
+}
+
+export default function Pregunta4EPPage() {
+  const [equipos, setEquipos] = useState<EquiposDigitalizacion>({
+    digitalizadorCamaPlana: "27",
+    digitalizador3d: "",
+    digitalizadorAlimentador: "108",
+    digitalizadorGranVolumen: "1",
+  });
+
+  // 🔹 Preparado para conectar con el backend
+  useEffect(() => {
+    // Cuando tengas la API, descomenta y reemplaza la URL:
+    /*
+    fetch("https://tu-api-backend.com/api/equipos-digitalizacion")
+      .then((res) => res.json())
+      .then((data) => setEquipos(data))
+      .catch((err) => console.error("Error al obtener datos:", err));
+    */
+  }, []);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setEquipos({
+      ...equipos,
+      [name]: value,
+    });
+  };
+
+  return (
+    <div className="container">
+      <div className="header-bar">
+        Censo de equipos periféricos - Equipo de digitalización
+      </div>
+
+      <div className="grid">
+        <div className="item">
+          <label htmlFor="digitalizadorCamaPlana">
+            Digitalizador de cama plana para oficina
+          </label>
+          <input
+            type="text"
+            id="digitalizadorCamaPlana"
+            name="digitalizadorCamaPlana"
+            value={equipos.digitalizadorCamaPlana}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="digitalizador3d">3D</label>
+          <input
+            type="text"
+            id="digitalizador3d"
+            name="digitalizador3d"
+            value={equipos.digitalizador3d}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="digitalizadorAlimentador">
+            Digitalizador con alimentador de hojas para oficina
+          </label>
+          <input
+            type="text"
+            id="digitalizadorAlimentador"
+            name="digitalizadorAlimentador"
+            value={equipos.digitalizadorAlimentador}
+            onChange={handleChange}
+          />
+        </div>
+
+        <div className="item">
+          <label htmlFor="digitalizadorGranVolumen">
+            Digitalizador de gran volumen
+          </label>
+          <input
+            type="text"
+            id="digitalizadorGranVolumen"
+            name="digitalizadorGranVolumen"
+            value={equipos.digitalizadorGranVolumen}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(Administrador)/pregunta5EP/page.tsx b/src/app/(Administrador)/pregunta5EP/page.tsx
new file mode 100644
index 0000000..30cba20
--- /dev/null
+++ b/src/app/(Administrador)/pregunta5EP/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import "../../styles/layout/pregunta5EP.scss";
+
+export default function Pregunta5EP() {
+  return (
+    <div className="container">
+      <div className="header">
+        Indique el número de equipos de digitalización de acuerdo con la
+        población universitaria al que se destina su uso primordialmente.
+        <span>*</span>
+        <small> (Requerido en el caso de contar con Equipo de digitalización)</small>
+      </div>
+
+      <div className="row">
+        <div className="item">
+          <label htmlFor="alumnos-digital">Alumnos</label>
+          <input type="text" id="alumnos-digital" defaultValue="11" />
+        </div>
+
+        <div className="item">
+          <label htmlFor="profesores-digital">
+            Profesores <span className="help-icon">?</span>
+          </label>
+          <input type="text" id="profesores-digital" defaultValue="24" />
+        </div>
+
+        <div className="item">
+          <label htmlFor="tecnicos-academicos-digital">
+            Técnicos Académicos
+          </label>
+          <input type="text" id="tecnicos-academicos-digital" defaultValue="" />
+        </div>
+
+        <div className="item">
+          <label htmlFor="investigadores-digital">
+            Investigadores <span className="help-icon">?</span>
+          </label>
+          <input type="text" id="investigadores-digital" defaultValue="" />
+        </div>
+
+        <div className="item">
+          <label htmlFor="administrativos-digital">
+            Administrativos <span className="help-icon">?</span>
+          </label>
+          <input type="text" id="administrativos-digital" defaultValue="101" />
+        </div>
+
+        <div className="item">
+          <label htmlFor="total-digital">Total</label>
+          <input type="text" id="total-digital" defaultValue="136" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/styles/layout/pregunta1EP.scss b/src/app/styles/layout/pregunta1EP.scss
new file mode 100644
index 0000000..988471f
--- /dev/null
+++ b/src/app/styles/layout/pregunta1EP.scss
@@ -0,0 +1,52 @@
+
+
+.container {
+  max-width: 1000px;
+  margin: 2% auto 10% auto;
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.header {
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.item {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f5ff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+/* Ajuste para pantallas pequeñas */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/app/styles/layout/pregunta2EP.scss b/src/app/styles/layout/pregunta2EP.scss
new file mode 100644
index 0000000..342a28f
--- /dev/null
+++ b/src/app/styles/layout/pregunta2EP.scss
@@ -0,0 +1,63 @@
+
+.container {
+  max-width: 1000px;
+  margin: 2% 10% 20% 10%;
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.header {
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  font-size: 14px;
+}
+
+.row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.item {
+  flex: 1;
+  min-width: 140px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f5ff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+/* Estilos para los íconos de ayuda */
+.help-icon {
+  color: #007bff;
+  font-size: 12px;
+  cursor: help;
+  margin-left: 3px;
+}
+
+/* Responsivo */
+@media (max-width: 768px) {
+  .row {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
diff --git a/src/app/styles/layout/pregunta4EP.scss b/src/app/styles/layout/pregunta4EP.scss
new file mode 100644
index 0000000..2a9f1a9
--- /dev/null
+++ b/src/app/styles/layout/pregunta4EP.scss
@@ -0,0 +1,55 @@
+
+.container {
+  max-width: 1000px;
+  margin: 2% auto 20% auto;
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.header-bar {
+  background-color: #1a3d66;
+  color: white;
+  padding: 10px 15px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  border-radius: 4px 4px 0 0;
+}
+
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  align-items: end;
+}
+
+.item {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f5ff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+/* Responsivo */
+@media (max-width: 768px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/app/styles/layout/pregunta5EP.scss b/src/app/styles/layout/pregunta5EP.scss
new file mode 100644
index 0000000..b0c6e32
--- /dev/null
+++ b/src/app/styles/layout/pregunta5EP.scss
@@ -0,0 +1,70 @@
+
+.container {
+  max-width: 1000px;
+  margin: 2% auto 20% auto;
+  background: white;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.header {
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  font-size: 14px;
+
+  small {
+    font-weight: normal;
+    color: #555;
+  }
+
+  span {
+    color: #d9534f;
+  }
+}
+
+.row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.item {
+  flex: 1;
+  min-width: 150px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f0f5ff;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.help-icon {
+  color: #007bff;
+  font-size: 12px;
+  cursor: help;
+  margin-left: 3px;
+}
+
+@media (max-width: 768px) {
+  .row {
+    flex-direction: column;
+    gap: 10px;
+  }
+}