From b4c159215bcf2c91adef2d023bcee30e6c8e3a04 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Mon, 7 Oct 2024 20:56:01 -0600
Subject: [PATCH 1/3] =?UTF-8?q?Primera=20parte=20de=20edici=C3=B3n=20de=20?=
 =?UTF-8?q?respuestas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cosiap_frontend/src/App.jsx                   |   2 +
 .../common/utility/RenderElementEdit.jsx      | 185 ++++++++++++++
 .../src/components/modalidades/Modalidad.css  |  32 +++
 .../solicitudes/EditarSolicitud.jsx           | 239 ++++++++++++++++++
 .../solicitudes/HistorialSolicitudes.jsx      |   5 +-
 5 files changed, 462 insertions(+), 1 deletion(-)
 create mode 100644 cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
 create mode 100644 cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx

diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index 93d6d55..63b2e17 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -29,6 +29,7 @@ import EditModalidad from "./components/modalidades/EditarModalidad";
 import SolicitarModalidad from "./components/modalidades/Modalidad";
 import Perfil from '@/components/users/Perfil/Perfil';
 import ListaSolicitudes from "./components/solicitudes/HistorialSolicitudes";
+import EditarSolicitud from "./components/solicitudes/EditarSolicitud";
 
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
@@ -102,6 +103,7 @@ function RoutesApp({ setViewPageLoader }) {
           <Route path="/historial" element={<ListaSolicitudes />} />
           <Route path="/recepcion_ayuda" element={<Inicio />} />
           <Route path="/ayuda/manual" element={<Inicio />} />
+          <Route path="/editar-solicitud/:id" element={<EditarSolicitud />} />
           <Route path="/perfil" element={<Perfil setViewPageLoader={setViewPageLoader} />} />
           {/* Solo administradores pueden acceder a estas url */}
           <Route
diff --git a/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
new file mode 100644
index 0000000..3a8217a
--- /dev/null
+++ b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
@@ -0,0 +1,185 @@
+import '@/components/modalidades/Modalidad.css'
+import api from "@/api";
+
+export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange, respuestas) => {
+  const { tipo, opciones, id, nombre, formato, obligatorio } = elemento;
+
+  // Buscar si ya existe una respuesta para este elemento
+  const respuestaElemento = respuestas.find(
+    (r) => r.seccion_id === seccionId && r.elemento_id === id
+  );
+  
+  // Determinar el valor prellenado
+  const valorPrellenado = respuestaElemento ? respuestaElemento.valor : "";
+
+  const handleChange = (e) => {
+    const valor = e.target.value;
+    console.log(`Valor seleccionado: ${valor}`);
+    handleInputChange(seccionId, id, valor); 
+  };
+
+  const handleDownload = async (elemento, formato) => {
+    try {
+      const response = await api.formatos.getById(formato, {
+        responseType: 'blob',
+      });
+  
+      const contentType = response.headers['content-type'];
+      console.log('Content Type:', contentType);
+  
+      if (contentType !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+        throw new Error('Tipo de archivo inesperado');
+      }
+  
+      const blob = new Blob([response.data], { type: contentType });
+      const url = window.URL.createObjectURL(blob);
+  
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute('download', `${elemento.nombre}_formato.docx`);
+      
+      document.body.appendChild(link);
+      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error al descargar el formato:', error);
+    }
+  };
+  
+  const renderInput = (inputElement, obligatorio) => (
+    <>
+      {inputElement}
+      {obligatorio && <small className="required-text">*obligatorio</small>}
+    </>
+  );
+
+  switch (tipo) {
+    case "texto_corto":
+      return renderInput(
+        <input
+          key={id}
+          type="text"
+          name={nombre}
+          placeholder={nombre}
+          required={obligatorio}
+          className="input-class"
+          onChange={handleChange}
+          value={valorPrellenado}
+        />,
+        obligatorio
+      );
+    case "texto_parrafo":
+      return renderInput(
+        <textarea
+          key={id}
+          name={nombre}
+          placeholder={nombre}
+          required={obligatorio}
+          className="textarea-class"
+          onChange={handleChange}
+          value={valorPrellenado}
+
+        />,
+        obligatorio
+      );
+    case "numerico":
+      return renderInput(
+        <input
+          key={id}
+          type="number"
+          name={nombre}
+          placeholder={nombre}
+          required={obligatorio}
+          className="input-class"
+          onChange={handleChange}
+          value={valorPrellenado}
+
+        />,
+        obligatorio
+      );
+    case "opcion_multiple":
+    case "desplegable":
+      return renderInput(
+        <select onChange={handleChange} key={id} name={nombre} required={obligatorio} value={valorPrellenado} className="select-class">
+          {Object.keys(opciones).map((opcionId) => (
+            <option key={opcionId} value={opciones[opcionId].nombre}>
+              {opciones[opcionId].nombre}
+            </option>
+          ))}
+        </select>,
+        obligatorio
+      );
+    case "casillas":
+      return renderInput(
+        <div key={id} className="checkbox-group">
+          {Object.keys(opciones).map((opcionId) => (
+            <label key={opcionId} className="checkbox-label">
+              <input
+                type="checkbox"
+                name={nombre}
+                value={opciones[opcionId].nombre}
+                onChange={(e) => handleCheckboxChange(seccionId, id, e)}
+                required={obligatorio}
+              />
+              {opciones[opcionId].nombre}
+            </label>
+          ))}
+        </div>,
+        obligatorio
+      );
+    case "documento":
+      return renderInput(
+        <div key={id}>
+          <input
+            type="file"
+            name={nombre}
+            required={obligatorio}
+            accept=".pdf"
+            className="file-input-class"
+            onChange={(e) => handleInputChange(seccionId, id, e.target.files[0])}
+          />
+          {valorPrellenado && (
+            <a
+              href={`http://localhost:8000${valorPrellenado}`} 
+              target="_blank" 
+              rel="noopener noreferrer"  
+              className="view-document-button"
+            >
+              Ver documento
+            </a>
+         )}
+        </div>,
+        obligatorio
+      );
+    case "fecha":
+      return renderInput(
+        <input
+          key={id}
+          type="date"
+          name={nombre}
+          value={valorPrellenado}
+          required={obligatorio}
+          className="date-input-class"
+          onChange={handleChange}
+        />,
+        obligatorio
+      );
+    case "hora":
+      return renderInput(
+        <input
+          key={id}
+          type="time"
+          name={nombre}
+          value={valorPrellenado}
+          required={obligatorio}
+          className="time-input-class"
+          onChange={handleChange}
+        />,
+        obligatorio
+      );
+    case "separador":
+      return <hr key={id} className="separator-class" />;
+    default:
+      return null;
+  }
+};
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.css b/cosiap_frontend/src/components/modalidades/Modalidad.css
index e6111a1..36d4fa4 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.css
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.css
@@ -321,4 +321,36 @@
 
 .download-button:focus {
   outline: none; /* Elimina el borde de enfoque */
+}
+
+.view-document-button {
+  display: inline-block;
+  padding: 10px 20px;
+  margin-top: 10px;
+  background-color: #4f6ebc; /* Color de fondo */
+  color: white; /* Color del texto */
+  text-align: center;
+  text-decoration: none;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+.info-container {
+  border: 1px solid #e0e0e0; /* Borde suave */
+  border-radius: 8px; /* Bordes redondeados */
+  padding: 15px; /* Relleno interior */
+  background-color: #f9f9f9; /* Fondo claro */
+  margin-bottom: 20px; /* Separación con otros elementos */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
+  text-align: center;
+}
+
+.info-container p {
+  margin: 8px 0; /* Margen entre los párrafos */
+}
+
+.info-container strong {
+  color: #333; /* Color fuerte para los títulos */
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
new file mode 100644
index 0000000..a4827bd
--- /dev/null
+++ b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
@@ -0,0 +1,239 @@
+import { useState, useEffect } from "react";
+import api from '../../api';
+import MainContainer from "../common/utility/MainContainer";
+import { useNavigate, useParams } from 'react-router-dom';
+import { renderElemento } from "@/components/common/utility/RenderElementEdit"; 
+import '@/components/modalidades/Modalidad.css'
+/* Validaciones para formularios */
+import {
+    MontoValidation,
+  } from "@/components/FormsValidations";
+import InputMonto from "@/components/common/utility/InputMonto";
+
+
+const EditarSolicitud = () => {
+  const { id } = useParams();
+  const [respuestas, setRespuestas] = useState({});
+  const [solicitud, setSolicitud] = useState(null);
+  const [modalidad, setModalidad] = useState('');
+  const [respuesta, setRespuesta] = useState([]);
+  const [montoSolicitado, setMontoSolicitado] = useState("");
+  const [montoError, setMontoError] = useState("");
+  const navigate = useNavigate();
+
+  // Obtenemos los datos de la solicitud
+  useEffect(() => {
+    const fetchRespuestas = async () => {
+      try {
+        const response = await api.solicitudes.getById(id);
+        setMontoSolicitado(response.data.monto_solicitado)
+        setModalidad(response.data.modalidad)
+        setSolicitud(response.data); // Almacena toda la solicitud
+        setRespuestas(response.data.formulario.secciones || {}); // Secciones del formulario
+        // Obtener las respuestas existentes
+        const respuestasProcesadas = [];
+
+        // Recorrer todas las secciones
+        Object.values(response.data.formulario.secciones).forEach((seccion) => {
+            Object.values(seccion.elementos).forEach((elemento) => {
+            const respuesta = elemento.respuesta || {}; // Verificar si existe la respuesta
+
+            respuestasProcesadas.push({
+                elemento_id: elemento.id,
+                seccion_id: seccion.id,
+                valor: respuesta.valor || "" // Precargar valor si existe, o dejar vacío
+            });
+            });
+        });
+
+        console.log("Diccionario de respuestas: ", respuestasProcesadas)
+
+        setRespuesta(respuestasProcesadas);
+      } catch (error) {
+        console.error("Error al obtener las respuestas", error);
+        setRespuestas({});
+        setRespuesta([]);
+      }
+    };
+    fetchRespuestas();
+  }, [id]);
+
+  const handleInputChange = (seccionId, elementoId, valor, otro = "") => {
+    console.log(`Actualizando respuesta: seccionId=${seccionId}, elementoId=${elementoId}, valor=${valor}`);
+    setRespuesta((prevRespuestas) => {
+      const existingRespuesta = prevRespuestas.find(
+        (r) => r.seccion_id === seccionId && r.elemento_id === elementoId
+      );
+
+      if (existingRespuesta) {
+        return prevRespuestas.map((r) =>
+          r.seccion_id === seccionId && r.elemento_id === elementoId
+            ? { ...r, valor, otro }
+            : r
+        );
+      } else {
+        return [
+          ...prevRespuestas,
+          { seccion_id: seccionId, elemento_id: elementoId, valor, otro },
+        ];
+      }
+    });
+  };
+
+  /* Validación del monto_maximo */
+  const validarMonto = async (monto) => {
+    try {
+      await MontoValidation.max(
+        modalidad.monto_maximo,
+        `La cantidad supera el monto máximo (${formatCurrency(modalidad.monto_maximo)})`
+      ).validate(monto);
+      setMontoError(false); // no hay error
+      setMontoError("");
+      return true;
+    } catch (error) {
+      setMontoError(error.message);
+      return false;
+    }
+  };
+
+  const handleMontoChange = async (e) => {
+    const monto = e.target.value;
+    setMontoSolicitado(monto);
+    await validarMonto(monto);
+  };
+
+
+  const handleCheckboxChange = (seccionId, id, e) => {
+    const { value, checked } = e.target;
+  
+    // Obtén las respuestas existentes
+    const existingRespuesta = respuesta.find(
+      (r) => r.seccion_id === seccionId && r.elemento_id === id
+    );
+  
+    console.log(existingRespuesta)
+  
+    setRespuesta((prevRespuestas) => {
+      let newValor;
+  
+      // Si ya hay una respuesta, actualiza su valor; si no, crea uno nuevo
+      if (existingRespuesta) {
+        // Si ya hay una respuesta, obtenemos los valores actuales
+        const valoresActuales = existingRespuesta.valor ? existingRespuesta.valor.split(",") : [];
+        console.log("Valores actuales:", valoresActuales)
+  
+        // Agregar o quitar el valor según la selección
+        if (checked) {
+          // Agregar valor si se selecciona
+          newValor = valoresActuales.includes(value) ? valoresActuales : [...valoresActuales, value];
+        } else {
+          // Remover valor si se deselecciona
+          newValor = valoresActuales.filter((v) => v !== value);
+        }
+      } else {
+        // Si no existe, comenzamos con un array que contiene el valor actual
+        newValor = checked ? [value] : [];
+      }
+  
+      // Unimos los valores en una cadena separada por comas
+      const cadenaValores = newValor.join(",");
+      console.log("Cadena Respuesta: ", cadenaValores);
+  
+      // Si no existe la respuesta, agrega una nueva al array
+      if (!existingRespuesta) {
+        return [...prevRespuestas, { seccion_id: seccionId, elemento_id: id, valor: cadenaValores }];
+      }
+  
+      // Si ya existe, actualiza la respuesta existente
+      return prevRespuestas.map((r) =>
+        r.seccion_id === seccionId && r.elemento_id === id
+          ? { ...r, valor: cadenaValores }
+          : r
+      );
+    });
+  };
+
+  /* Función para mostrar el monto_maximo en formato de pesos MXN */
+  const formatCurrency = (amount) => {
+    return new Intl.NumberFormat("es-MX", {
+      style: "currency",
+      currency: "MXN",
+    }).format(amount);
+  };
+
+  // Renderiza los inputs dinámicos y prellenados
+  const renderSecciones = () => {
+    return Object.values(respuestas).map((seccion) => (
+      <div key={seccion.id} className="section-card">
+        <h3>{seccion.nombre}</h3>
+        <div className="elementos-container">
+        
+        {Object.values(seccion.elementos).map((elemento) => (
+            <div key={elemento.id} className="element-card">
+                <h4>{elemento.nombre}</h4>
+                {renderElemento(seccion.id, elemento, handleInputChange, handleCheckboxChange, respuesta)}
+            </div>
+        ))}
+        </div>
+      </div>
+    )); 
+  };
+
+  return (
+    <MainContainer>
+    {/* Imagen y descripción de la modalidad */}
+      <div className="image-container">
+      <img src={`http://localhost:8000${modalidad.imagen}`} alt="Modalidad" />
+      <div className="image-overlay"></div>
+      <div className="image-text-container">
+        <h3>Modalidad:</h3>
+        <h4>{modalidad.nombre}</h4>
+        <p>{modalidad.descripcion}</p>
+        <p className="monto">{formatCurrency(modalidad.monto_maximo)}</p>
+      </div>
+      </div>
+      {solicitud && (
+        <div>
+          <div className="info-container">
+            {/* Mostrar campos de solo lectura */}
+            <p><strong>Status:</strong> {solicitud.status}</p>
+            <p><strong>Monto Aprobado:</strong> {solicitud.monto_aprobado}</p>
+          </div>
+          <div className="container">
+          <div>
+            {renderSecciones()}
+          </div>
+          </div>
+        </div>
+      )}
+
+      <div className="container">
+
+      {/* Card del monto solicitado */}
+      <div className="monto-card">
+          <h3>Monto solicitado</h3>
+          <div className="input-container">
+            <InputMonto value={montoSolicitado} onChange={handleMontoChange} />
+          </div>
+          {montoError && (
+            <p className="mt-4 text-[var(--error-f)] font-bold text-center text-xs underline">
+              {montoError}
+            </p>
+          )}
+        </div>
+        </div>
+  
+        {/* Botones de acción */}
+        <div className="buttons-container">
+          <button className="button" onClick={() => navigate('/historial')}>
+            Cancelar
+          </button>
+          <button className="submit-button" >
+            Enviar Solicitud
+          </button>
+        </div>
+    </MainContainer>
+  );
+};
+
+export default EditarSolicitud;
diff --git a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
index 3753cda..5e9d89d 100644
--- a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
+++ b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
@@ -3,10 +3,13 @@ import api from '../../api';
 import Tabla from "../common/utility/ReusableTable"; // Importa la tabla reutilizable
 import MainContainer from "../common/utility/MainContainer";
 import '@/components/solicitudes/HistorialSolicitudes.css'; // Importa los estilos
+import { useNavigate} from 'react-router-dom';
+
 
 // Componente para devolver la lista de las solicitudes de un solicitante
 const ListaSolicitudes = () => {
     const [solicitudes, setSolicitudes] = useState([]);
+    const navigate = useNavigate();
 
     // Obtenemos las solicitudes del usuario
     useEffect(() => {
@@ -74,7 +77,7 @@ const ListaSolicitudes = () => {
                         Ver
                     </button>
                     {fila.status === 'Pendiente' && (
-                        <button className="button-editar"
+                        <button className="button-editar" onClick={() => navigate(`/editar-solicitud/${fila.solicitud_n}`)}
                         >
                             Editar
                         </button>
-- 
GitLab


From 1d524f3d3422397c09a996527af3a8d272d6e76f Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Wed, 9 Oct 2024 13:52:04 -0600
Subject: [PATCH 2/3] =?UTF-8?q?Edici=C3=B3n=20de=20solicitudes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cosiap_api/dynamic_forms/serializers.py       |  11 +-
 .../dynamic_tables/DynamicTableDynamicForm.py |   1 -
 cosiap_frontend/src/api.js                    |   2 +-
 .../common/utility/RenderElementEdit.jsx      | 118 ++++++++++--------
 .../components/modalidades/CrearModalidad.jsx |   2 +-
 .../modalidades/EditarModalidad.jsx           |   2 +-
 .../src/components/modalidades/Modalidad.css  |  58 ++++++++-
 .../solicitudes/EditarSolicitud.jsx           | 110 ++++++++++++++--
 8 files changed, 231 insertions(+), 73 deletions(-)

diff --git a/cosiap_api/dynamic_forms/serializers.py b/cosiap_api/dynamic_forms/serializers.py
index f07f268..dec0cd1 100644
--- a/cosiap_api/dynamic_forms/serializers.py
+++ b/cosiap_api/dynamic_forms/serializers.py
@@ -263,21 +263,14 @@ class RespuestaFormularioSerializer(DynamicModelSerializer):
         self.forms_cache = {form.id: form for form in qs}
            
         # Prefetch para las respuestas
-        qs = Respuesta.objects.filter(**respuesta_filter_kwargs).exclude(elemento__tipo=Elemento.Tipo.CASILLAS).select_subclasses().select_related(
+        qs = Respuesta.objects.filter(**respuesta_filter_kwargs).select_subclasses().select_related(
             'elemento', 
             'registro_seccion',
             'registro_seccion__seccion',
             'registro_seccion__registro_formulario',
             f'registro_seccion__registro_formulario__{self.one_to_one_field_name}'
             )
-        qs_casillas = Respuesta.objects.filter(**respuesta_filter_kwargs, elemento__tipo=Elemento.Tipo.CASILLAS).select_subclasses().select_related(
-            'elemento', 
-            'registro_seccion',
-            'registro_seccion__seccion',
-            'registro_seccion__registro_formulario',
-            f'registro_seccion__registro_formulario__{self.one_to_one_field_name}'
-            ).prefetch_related('valor')
-        qs = list(qs) + list(qs_casillas)
+        qs = list(qs) 
         rs_cache = {}
         for respuesta in qs:
             #(respuesta = INstancia de RNUmerico)            
diff --git a/cosiap_api/dynamic_tables/DynamicTableDynamicForm.py b/cosiap_api/dynamic_tables/DynamicTableDynamicForm.py
index 7007f27..6d74428 100644
--- a/cosiap_api/dynamic_tables/DynamicTableDynamicForm.py
+++ b/cosiap_api/dynamic_tables/DynamicTableDynamicForm.py
@@ -18,7 +18,6 @@ class DynamicTableDynamicForm(DynamicTable):
         solicitud = super().retrieve_instance_data(instance)
         solicitud_id = solicitud.get('id')
         solicitud_instance = Solicitud.objects.get(id=solicitud_id)
-
         form = RespuestaFormularioSerializer(solicitud_instance, dynamic_form_source='modalidad__dynamic_form')
         form_data = form.data
 
diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js
index 202a4d7..a4ce7fb 100644
--- a/cosiap_frontend/src/api.js
+++ b/cosiap_frontend/src/api.js
@@ -121,7 +121,7 @@ const api = {
     },
     solicitar:{
       post: (data) => ax.post('api/solicitudes/solicitar/', data),
-      update: (id,data) => ax.put(`api/solicitudes/solicitar/${id}`, data)
+      update: (id,data) => ax.put(`api/solicitudes/solicitar/${id}/`, data)
     }
   },
   dynamicTables: {
diff --git a/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
index 3a8217a..a3602e5 100644
--- a/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
+++ b/cosiap_frontend/src/components/common/utility/RenderElementEdit.jsx
@@ -1,8 +1,7 @@
 import '@/components/modalidades/Modalidad.css'
-import api from "@/api";
 
 export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange, respuestas) => {
-  const { tipo, opciones, id, nombre, formato, obligatorio } = elemento;
+  const { tipo, opciones, id, nombre, obligatorio } = elemento;
 
   // Buscar si ya existe una respuesta para este elemento
   const respuestaElemento = respuestas.find(
@@ -11,46 +10,54 @@ export const renderElemento = (seccionId, elemento, handleInputChange, handleChe
   
   // Determinar el valor prellenado
   const valorPrellenado = respuestaElemento ? respuestaElemento.valor : "";
+  const status = respuestaElemento ? respuestaElemento.status : "";
+  const observacion = respuestaElemento ? respuestaElemento.observacion : "";
+
+  console.log(status, observacion)
+
+  // Determinamos el borde del color del card basado en el status
+  let borderColorClass = "";
+  let estado = "";
+  switch (status) {
+    case "valido":
+      borderColorClass = "border-green";
+      estado = "Aprobado" // borde verde para válido
+      break;
+    case "revisando":
+      borderColorClass = "border-yellow"; // borde amarillo para revisando
+      estado = "En revisión"
+      break;
+    case "invalido":
+      borderColorClass = "border-red"; // borde rojo para inválido
+      estado = "Documento Incorrecto"
+      break;
+    default:
+      borderColorClass = ""; // sin borde especial si no hay estado
+  }
 
   const handleChange = (e) => {
     const valor = e.target.value;
     console.log(`Valor seleccionado: ${valor}`);
     handleInputChange(seccionId, id, valor); 
   };
-
-  const handleDownload = async (elemento, formato) => {
-    try {
-      const response = await api.formatos.getById(formato, {
-        responseType: 'blob',
-      });
-  
-      const contentType = response.headers['content-type'];
-      console.log('Content Type:', contentType);
-  
-      if (contentType !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-        throw new Error('Tipo de archivo inesperado');
-      }
-  
-      const blob = new Blob([response.data], { type: contentType });
-      const url = window.URL.createObjectURL(blob);
-  
-      const link = document.createElement('a');
-      link.href = url;
-      link.setAttribute('download', `${elemento.nombre}_formato.docx`);
-      
-      document.body.appendChild(link);
-      link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error('Error al descargar el formato:', error);
-    }
-  };
   
   const renderInput = (inputElement, obligatorio) => (
-    <>
+    <div className={`element-container ${borderColorClass}`}>
       {inputElement}
       {obligatorio && <small className="required-text">*obligatorio</small>}
-    </>
+      <br></br>
+      {status && (
+        <small> 
+        Estatus: {estado}
+        </small>
+      )}
+      <br></br>
+      {observacion && (
+        <small>
+        Observación: {observacion}
+        </small>
+      )}
+    </div>
   );
 
   switch (tipo) {
@@ -109,24 +116,35 @@ export const renderElemento = (seccionId, elemento, handleInputChange, handleChe
         </select>,
         obligatorio
       );
-    case "casillas":
-      return renderInput(
-        <div key={id} className="checkbox-group">
-          {Object.keys(opciones).map((opcionId) => (
-            <label key={opcionId} className="checkbox-label">
-              <input
-                type="checkbox"
-                name={nombre}
-                value={opciones[opcionId].nombre}
-                onChange={(e) => handleCheckboxChange(seccionId, id, e)}
-                required={obligatorio}
-              />
-              {opciones[opcionId].nombre}
-            </label>
-          ))}
-        </div>,
-        obligatorio
-      );
+      case "casillas": {
+        // Convertimos la cadena de valores prellenados en un array
+        const valoresSeleccionados = valorPrellenado.split(',');
+        console.log(valoresSeleccionados)
+  
+        return renderInput(
+          <div key={id} className="checkbox-group">
+            {Object.keys(opciones).map((opcionId) => {
+              const opcionNombre = opciones[opcionId].nombre;
+              const isChecked = valoresSeleccionados.includes(opcionNombre); // Verificar si la opción está seleccionada
+              
+              return (
+                <label key={opcionId} className="checkbox-label">
+                  <input
+                    type="checkbox"
+                    name={nombre}
+                    value={opcionNombre}
+                    checked={isChecked} // Establecer si está seleccionado
+                    onChange={(e) => handleCheckboxChange(seccionId, id, e)}
+                    required={obligatorio}
+                  />
+                  {opcionNombre}
+                </label>
+              );
+            })}
+          </div>,
+          obligatorio
+        );
+      }
     case "documento":
       return renderInput(
         <div key={id}>
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index 47bcaa8..3bcf905 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -440,7 +440,7 @@ const CreateModalidad = () => {
     
         <div className="button-container">
 
-            <button  onClick={(e) => navigate('/modalidades')} className="add-button">
+            <button  onClick={() => navigate('/modalidades')} className="add-button">
                 Cancelar
             </button>
 
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
index c456473..f01eaa5 100644
--- a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -824,7 +824,7 @@ const EditModalidad = () => {
                     ))}
                 </div>
                 <div className="button-container">
-                    <button  onClick={(e) => navigate('/modalidades')} className="add-button">
+                    <button  onClick={() => navigate('/modalidades')} className="add-button">
                         Cancelar
                     </button>
                     <button type="submit" className="submit-button">
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.css b/cosiap_frontend/src/components/modalidades/Modalidad.css
index 36d4fa4..cc6b4d7 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.css
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.css
@@ -110,7 +110,7 @@
     flex-direction: column;
     align-items: center;
     padding: 20px;
-    background-color: var(--secundario-mc);
+    background-color: #f9f9f9;
     border-radius: 45px;
     margin-top: 20px;
   }
@@ -353,4 +353,60 @@
 
 .info-container strong {
   color: #333; /* Color fuerte para los títulos */
+}
+
+/* Borde dependiendo del estado */
+.border-green {
+  border: 2px solid rgb(75, 247, 75);
+}
+
+.border-yellow {
+  border: 2px solid yellow;
+}
+
+.border-red {
+  border: 2px solid red;
+}
+
+/* Texto de la observación */
+.observacion-text {
+  margin-top: 5px;
+  display: block;
+}
+
+.border-green .observacion-text {
+  color: green;
+}
+
+.border-yellow .observacion-text {
+  color: yellow;
+}
+
+.border-red .observacion-text {
+  color: red;
+}
+
+/* Contenedor de los inputs con borde */
+.element-container {
+  margin-bottom: 15px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+/* Otros estilos de inputs */
+.input-class,
+.textarea-class,
+.select-class,
+.file-input-class,
+.date-input-class,
+.time-input-class {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.required-text {
+  color: red;
+  font-size: 0.8em;
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
index a4827bd..3c89fa2 100644
--- a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
+++ b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
@@ -13,13 +13,15 @@ import InputMonto from "@/components/common/utility/InputMonto";
 
 const EditarSolicitud = () => {
   const { id } = useParams();
-  const [respuestas, setRespuestas] = useState({});
+  const [secciones, setSecciones] = useState({});
   const [solicitud, setSolicitud] = useState(null);
   const [modalidad, setModalidad] = useState('');
   const [respuesta, setRespuesta] = useState([]);
   const [montoSolicitado, setMontoSolicitado] = useState("");
   const [montoError, setMontoError] = useState("");
   const navigate = useNavigate();
+  const [alertMessage, setAlertMessage] = useState(''); // Estado para el mensaje de alerta
+  const [isSuccess, setIsSuccess] = useState(false);
 
   // Obtenemos los datos de la solicitud
   useEffect(() => {
@@ -29,7 +31,8 @@ const EditarSolicitud = () => {
         setMontoSolicitado(response.data.monto_solicitado)
         setModalidad(response.data.modalidad)
         setSolicitud(response.data); // Almacena toda la solicitud
-        setRespuestas(response.data.formulario.secciones || {}); // Secciones del formulario
+        setSecciones(response.data.formulario.secciones || {}); // Secciones del formulario
+        console.log("Variable respuestas: ", response.data.formulario.secciones)
         // Obtener las respuestas existentes
         const respuestasProcesadas = [];
 
@@ -41,17 +44,19 @@ const EditarSolicitud = () => {
             respuestasProcesadas.push({
                 elemento_id: elemento.id,
                 seccion_id: seccion.id,
-                valor: respuesta.valor || "" // Precargar valor si existe, o dejar vacío
+                valor: respuesta.valor || "", // Precargar valor si existe, o dejar vacío
+                status: respuesta.status || "",
+                observacion: respuesta.observacion || ""
             });
             });
         });
 
-        console.log("Diccionario de respuestas: ", respuestasProcesadas)
+        console.log("Variable respuesta: ", respuestasProcesadas)
 
         setRespuesta(respuestasProcesadas);
       } catch (error) {
         console.error("Error al obtener las respuestas", error);
-        setRespuestas({});
+        setSecciones({});
         setRespuesta([]);
       }
     };
@@ -80,6 +85,15 @@ const EditarSolicitud = () => {
     });
   };
 
+  const showAlert = (message, isSuccess) => {
+    setAlertMessage(message);
+    setIsSuccess(isSuccess);
+    
+    setTimeout(() => {
+      setAlertMessage('');
+    }, 3000);
+  };
+
   /* Validación del monto_maximo */
   const validarMonto = async (monto) => {
     try {
@@ -163,7 +177,7 @@ const EditarSolicitud = () => {
 
   // Renderiza los inputs dinámicos y prellenados
   const renderSecciones = () => {
-    return Object.values(respuestas).map((seccion) => (
+    return Object.values(secciones).map((seccion) => (
       <div key={seccion.id} className="section-card">
         <h3>{seccion.nombre}</h3>
         <div className="elementos-container">
@@ -179,8 +193,88 @@ const EditarSolicitud = () => {
     )); 
   };
 
+  const handleSubmit = async () => {
+    console.log("Respuestas:", respuesta);
+    console.log("Secciones: ", secciones);
+    // Filtrar los elementos obligatorios y verificar si están contestados
+    const elementosObligatoriosSinRespuesta = Object.keys(secciones).flatMap(seccionId => {
+      return Object.values(secciones[seccionId].elementos)
+          .filter(elemento => elemento.obligatorio)  // Filtrar solo los elementos obligatorios
+          .filter(elemento => !respuesta.some(res => res.elemento_id === elemento.id && res.valor))  // Verificar si no hay respuesta
+          .map(elemento => elemento.nombre);  // Obtener el nombre de cada elemento que falta
+    });
+
+    const isMontoInvalid = !montoSolicitado || montoError;
+
+    // Mostrar error si falta alguna respuesta obligatoria o si el monto es inválido
+    if (elementosObligatoriosSinRespuesta.length > 0 || isMontoInvalid) {
+        const missingElementsMessage = elementosObligatoriosSinRespuesta.length > 0
+            ? `Por favor completa los campos obligatorios: ${elementosObligatoriosSinRespuesta.join(', ')}.`
+            : '';
+
+        const montoErrorMessage = isMontoInvalid ? 'La cantidad solicitada es inválida o está vacía.' : '';
+
+        showAlert(`${missingElementsMessage} ${montoErrorMessage}`, false);
+        return;
+    }
+
+    // Crear FormData para enviar en formato multipart/form-data
+    const formData = new FormData();
+    formData.append('monto_solicitado', montoSolicitado);
+    formData.append('modalidad_id', modalidad.id);
+
+    // Agrega las respuestas al FormData
+    respuesta.forEach((res, index) => {
+      const elemento_tipo = secciones[res.seccion_id].elementos[res.elemento_id].tipo;
+    
+      // Si el tipo de elemento es "documento"
+      if (elemento_tipo === 'documento') {
+          // Si el valor es un archivo, agregar como valor_file
+          if (res.valor instanceof File) {
+              formData.append(`respuestas[${index}][seccion_id]`, res.seccion_id);
+              formData.append(`respuestas[${index}][elemento_id]`, res.elemento_id);
+              formData.append(`respuestas[${index}][valor_file]`, res.valor);
+          }
+          // Si el valor es una cadena de texto, no agregar
+      } else {
+          // Si el tipo de elemento no es "documento", agregar siempre como valor_texto
+          formData.append(`respuestas[${index}][seccion_id]`, res.seccion_id);
+          formData.append(`respuestas[${index}][elemento_id]`, res.elemento_id);
+          formData.append(`respuestas[${index}][valor_texto]`, res.valor);
+      }
+    });
+
+    console.log("Solicitud: ", solicitud.id, "Datos a enviar:", formData);
+
+    try {
+        const response = await api.solicitudes.solicitar.update(solicitud.id,formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+        });
+
+        if (response.status === 200) {
+            showAlert('Solicitud actualziada exitosamente.', true);
+            navigate('/historial');
+        } else {
+            const errorMessage = response.data?.detail || 'Error desconocido';
+            showAlert(`Error: ${errorMessage}`, false);
+        }
+    } catch (error) {
+        const specificErrorMessage = error.response?.data?.messages?.error[0] || error.message || 'Error en la conexión';
+        showAlert(`Error: ${specificErrorMessage}`, false);
+    }
+
+    };
+
   return (
     <MainContainer>
+    {/* Alerta */}
+    {alertMessage && (
+      <div className={`alert ${isSuccess ? 'success' : 'error'}`}>
+        {alertMessage}
+      </div>
+    )}
     {/* Imagen y descripción de la modalidad */}
       <div className="image-container">
       <img src={`http://localhost:8000${modalidad.imagen}`} alt="Modalidad" />
@@ -200,11 +294,9 @@ const EditarSolicitud = () => {
             <p><strong>Monto Aprobado:</strong> {solicitud.monto_aprobado}</p>
           </div>
           <div className="container">
-          <div>
             {renderSecciones()}
           </div>
           </div>
-        </div>
       )}
 
       <div className="container">
@@ -228,7 +320,7 @@ const EditarSolicitud = () => {
           <button className="button" onClick={() => navigate('/historial')}>
             Cancelar
           </button>
-          <button className="submit-button" >
+          <button className="submit-button" onClick={() => handleSubmit()} >
             Enviar Solicitud
           </button>
         </div>
-- 
GitLab


From 3a7dc1a2ff7fc34b2651c543be28007fbf1b313a Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Wed, 9 Oct 2024 19:58:57 -0600
Subject: [PATCH 3/3] =?UTF-8?q?Visualizaci=C3=B3n=20de=20una=20solicitud?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../migrations/0007_RFecha_charfield.py       |  18 +++
 cosiap_api/dynamic_forms/models.py            |  20 +--
 .../migrations/0006_RFecha_charfield.py       |  17 +++
 .../solicitudes/respuestas_serializer.py      |   2 +-
 cosiap_api/solicitudes/views.py               |  45 +++---
 cosiap_frontend/src/App.jsx                   |   2 +
 .../common/utility/RenderElementView.jsx      | 133 ++++++++++++++++++
 .../src/components/modalidades/Modalidad.css  |   2 +-
 .../src/components/modalidades/Modalidad.jsx  |   4 +-
 .../solicitudes/EditarSolicitud.jsx           |   8 +-
 .../solicitudes/HistorialSolicitudes.jsx      |  34 ++++-
 .../components/solicitudes/VerSolicitud.jsx   | 101 +++++++++++++
 12 files changed, 341 insertions(+), 45 deletions(-)
 create mode 100644 cosiap_api/dynamic_forms/migrations/0007_RFecha_charfield.py
 create mode 100644 cosiap_api/solicitudes/migrations/0006_RFecha_charfield.py
 create mode 100644 cosiap_frontend/src/components/common/utility/RenderElementView.jsx
 create mode 100644 cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx

diff --git a/cosiap_api/dynamic_forms/migrations/0007_RFecha_charfield.py b/cosiap_api/dynamic_forms/migrations/0007_RFecha_charfield.py
new file mode 100644
index 0000000..b6bdb95
--- /dev/null
+++ b/cosiap_api/dynamic_forms/migrations/0007_RFecha_charfield.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.8 on 2024-10-10 00:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dynamic_forms', '0006_valor_respuestas_string'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='rfecha',
+            name='valor',
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+    ]
diff --git a/cosiap_api/dynamic_forms/models.py b/cosiap_api/dynamic_forms/models.py
index 7995782..d1f0782 100644
--- a/cosiap_api/dynamic_forms/models.py
+++ b/cosiap_api/dynamic_forms/models.py
@@ -310,7 +310,8 @@ class RHora(Respuesta):
 
 
 class RFecha(Respuesta):
-    valor = models.DateField(null=True,  blank=True)
+    valor = models.CharField(max_length=255, null=True,  blank=True)
+
 
     def getStringValue(self):
         if self.valor is None:
@@ -399,22 +400,7 @@ class RDesplegable(Respuesta):
                 return str(self.valor)
     class Meta:
         verbose_name_plural = '17. R Desplegables'
-
-    def clean(self):
-        super().clean()
-        respuesta = self.valor                     
-        obligatorio = self.elemento.obligatorio                          
-        opcOtro = self.elemento.opcionOtro                   
-        otro = self.otro                         
-        if (not respuesta) and obligatorio:
-            raise ValidationError("Este campo es Obligatorio.")     
-        if obligatorio:
-            if not ((opcOtro and (otro and otro.strip())) or not opcOtro) and (respuesta and respuesta.nombre == 'Otro'):
-                raise ValidationError("Este campo es obligatorio")
-        if (otro and otro.strip()) and (respuesta and not respuesta.nombre == 'Otro'):
-            raise ValidationError("No esta seleccionada opcion Otro")        
-        if respuesta and (respuesta.nombre == 'Otro' and not( otro and otro.strip())):
-            raise ValidationError("Si eliges 'otro', debes proporcionar más detalles en el campo 'otro'.")   
+ 
 
 class RDocumento(Respuesta):
     class Status(models.TextChoices):    
diff --git a/cosiap_api/solicitudes/migrations/0006_RFecha_charfield.py b/cosiap_api/solicitudes/migrations/0006_RFecha_charfield.py
new file mode 100644
index 0000000..eb15118
--- /dev/null
+++ b/cosiap_api/solicitudes/migrations/0006_RFecha_charfield.py
@@ -0,0 +1,17 @@
+# Generated by Django 5.0.8 on 2024-10-10 00:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('solicitudes', '0005_verbose_name_dynamicformat_dynamicform'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='convenio',
+            options={'ordering': ['pk'], 'verbose_name': 'Convenio', 'verbose_name_plural': 'Convenios'},
+        ),
+    ]
diff --git a/cosiap_api/solicitudes/respuestas_serializer.py b/cosiap_api/solicitudes/respuestas_serializer.py
index 0367ffd..2ea1f9b 100644
--- a/cosiap_api/solicitudes/respuestas_serializer.py
+++ b/cosiap_api/solicitudes/respuestas_serializer.py
@@ -72,7 +72,7 @@ class RespuestaSerializer(serializers.Serializer):
             return isinstance(value, str)
 
         if isinstance(respuesta_instance, (RHora, RFecha)):
-            return isinstance(value, str)  # Puedes añadir validaciones de formato aquí si lo deseas
+            return isinstance(value, str)  
         
         return True  # Si no es uno de los tipos conocidos, se considera válido
 
diff --git a/cosiap_api/solicitudes/views.py b/cosiap_api/solicitudes/views.py
index 82e8ef5..cfe36d2 100644
--- a/cosiap_api/solicitudes/views.py
+++ b/cosiap_api/solicitudes/views.py
@@ -92,6 +92,7 @@ class SolicitarAPIView(BasePermissionAPIView):
 
                 # Procesar las respuestas enviadas
                 respuestas = self._extract_respuestas_from_formdata(request.data)
+                print(respuestas)
                 for respuesta in respuestas:
                     serializer = RespuestaSerializer(data=respuesta, context={'registro_formulario': registro_formulario})
                     if serializer.is_valid(raise_exception=True):
@@ -107,26 +108,33 @@ class SolicitarAPIView(BasePermissionAPIView):
 
     def _extract_respuestas_from_formdata(self, data):
         """
-        Extrae las respuestas en el formato esperado de FormData.
+        Extrae las respuestas en el formato esperado de FormData, sin asumir que los índices son consecutivos.
         """
         respuestas = []
-        index = 0
-        while f"respuestas[{index}][seccion_id]" in data:
-            respuesta = {
-                'seccion_id': data.get(f"respuestas[{index}][seccion_id]"),
-                'elemento_id': data.get(f"respuestas[{index}][elemento_id]"),
-            }
-    
-            # Agregar valor_texto solo si está presente
-            if f"respuestas[{index}][valor_texto]" in data:
-                respuesta['valor_texto'] = data.get(f"respuestas[{index}][valor_texto]")
-            
-            # Agregar valor_file solo si está presente
-            if f"respuestas[{index}][valor_file]" in data:
-                respuesta['valor_file'] = data.get(f"respuestas[{index}][valor_file]")
-            
-            respuestas.append(respuesta)
-            index += 1
+
+        # Buscar todas las claves que coinciden con el patrón 'respuestas' en el FormData
+        for key in data.keys():
+            # Extraer el índice del patrón 'respuestas[X][seccion_id]' donde X es el índice
+            if "respuestas" in key and "seccion_id" in key:
+                # Extraer el índice usando regex o split
+                index = key.split('[')[1].split(']')[0]
+
+                # Crear la respuesta correspondiente
+                respuesta = {
+                    'seccion_id': data.get(f"respuestas[{index}][seccion_id]"),
+                    'elemento_id': data.get(f"respuestas[{index}][elemento_id]"),
+                }
+
+                # Agregar valor_texto solo si está presente
+                if f"respuestas[{index}][valor_texto]" in data:
+                    respuesta['valor_texto'] = data.get(f"respuestas[{index}][valor_texto]")
+
+                # Agregar valor_file solo si está presente
+                if f"respuestas[{index}][valor_file]" in data:
+                    respuesta['valor_file'] = data.get(f"respuestas[{index}][valor_file]")
+
+                respuestas.append(respuesta)
+
         return respuestas
 
 
@@ -161,6 +169,7 @@ class SolicitarAPIView(BasePermissionAPIView):
 
                 # Procesar las respuestas enviadas
                 respuestas = self._extract_respuestas_from_formdata(request.data)
+                print(respuestas)
                 for respuesta in respuestas:
                     serializer = RespuestaSerializer(data=respuesta, context={'registro_formulario': registro_formulario})
 
diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index 63b2e17..ea4bc29 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -30,6 +30,7 @@ import SolicitarModalidad from "./components/modalidades/Modalidad";
 import Perfil from '@/components/users/Perfil/Perfil';
 import ListaSolicitudes from "./components/solicitudes/HistorialSolicitudes";
 import EditarSolicitud from "./components/solicitudes/EditarSolicitud";
+import VisualizarSolicitud from "./components/solicitudes/VerSolicitud";
 
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
@@ -104,6 +105,7 @@ function RoutesApp({ setViewPageLoader }) {
           <Route path="/recepcion_ayuda" element={<Inicio />} />
           <Route path="/ayuda/manual" element={<Inicio />} />
           <Route path="/editar-solicitud/:id" element={<EditarSolicitud />} />
+          <Route path="/ver-solicitud/:id" element={<VisualizarSolicitud />} />
           <Route path="/perfil" element={<Perfil setViewPageLoader={setViewPageLoader} />} />
           {/* Solo administradores pueden acceder a estas url */}
           <Route
diff --git a/cosiap_frontend/src/components/common/utility/RenderElementView.jsx b/cosiap_frontend/src/components/common/utility/RenderElementView.jsx
new file mode 100644
index 0000000..1274a7a
--- /dev/null
+++ b/cosiap_frontend/src/components/common/utility/RenderElementView.jsx
@@ -0,0 +1,133 @@
+import '@/components/modalidades/Modalidad.css'
+
+export const renderElemento = (seccionId, elemento, handleInputChange, handleCheckboxChange, respuestas) => {
+  const { tipo, opciones, id, nombre, obligatorio } = elemento;
+
+  // Buscar si ya existe una respuesta para este elemento
+  const respuestaElemento = respuestas.find(
+    (r) => r.seccion_id === seccionId && r.elemento_id === id
+  );
+  
+  // Determinar el valor prellenado
+  const valorPrellenado = respuestaElemento ? respuestaElemento.valor : "";
+  const status = respuestaElemento ? respuestaElemento.status : "";
+  const observacion = respuestaElemento ? respuestaElemento.observacion : "";
+
+  // Determinamos el borde del color del card basado en el status
+  let borderColorClass = "";
+  let estado = "";
+  switch (status) {
+    case "valido":
+      borderColorClass = "border-green";
+      estado = "Aprobado" // borde verde para válido
+      break;
+    case "revisando":
+      borderColorClass = "border-yellow"; // borde amarillo para revisando
+      estado = "En revisión"
+      break;
+    case "invalido":
+      borderColorClass = "border-red"; // borde rojo para inválido
+      estado = "Documento Incorrecto"
+      break;
+    default:
+      borderColorClass = ""; // sin borde especial si no hay estado
+  }
+
+  
+  const renderInput = (inputElement, obligatorio) => (
+    <div className={`element-container ${borderColorClass}`}>
+      {inputElement}
+      {obligatorio && <small className="required-text">*obligatorio</small>}
+      <br></br>
+      {status && (
+        <small> 
+        Estatus: {estado}
+        </small>
+      )}
+      <br></br>
+      {observacion && (
+        <small>
+        Observación: {observacion}
+        </small>
+      )}
+    </div>
+  );
+
+  switch (tipo) {
+    case "texto_corto":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+          
+      );
+    case "texto_parrafo":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+      );
+    case "numerico":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+      );
+    case "opcion_multiple":
+    case "desplegable":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+      );
+      case "casillas": {
+        // Convertimos la cadena de valores prellenados en un array
+        const valoresSeleccionados = valorPrellenado.split(',');
+        console.log(valoresSeleccionados)
+  
+        return renderInput(
+          <div key={id} className="checkbox-group">
+            {Object.keys(opciones).map((opcionId) => {
+              const opcionNombre = opciones[opcionId].nombre;
+              const isChecked = valoresSeleccionados.includes(opcionNombre); // Verificar si la opción está seleccionada
+              
+              return (
+                <label key={opcionId} className="checkbox-label">
+                  <input
+                    type="checkbox"
+                    name={nombre}
+                    value={opcionNombre}
+                    checked={isChecked} // Establecer si está seleccionado
+                    onChange={(e) => handleCheckboxChange(seccionId, id, e)}
+                    required={obligatorio}
+                  />
+                  {opcionNombre}
+                </label>
+              );
+            })}
+          </div>,
+          obligatorio
+        );
+      }
+    case "documento":
+      return renderInput(
+        <div key={id}>
+          {valorPrellenado && (
+            <a
+              href={`http://localhost:8000${valorPrellenado}`} 
+              target="_blank" 
+              rel="noopener noreferrer"  
+              className="view-document-button"
+            >
+              Ver documento
+            </a>
+         )}
+        </div>,
+        obligatorio
+      );
+    case "fecha":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+      );
+    case "hora":
+      return renderInput(
+        <p>{valorPrellenado}</p>
+      );
+    case "separador":
+      return <hr key={id} className="separator-class" />;
+    default:
+      return null;
+  }
+};
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.css b/cosiap_frontend/src/components/modalidades/Modalidad.css
index cc6b4d7..0169e93 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.css
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.css
@@ -289,7 +289,7 @@
 }
 
 .success {
-    background-color: #9fdfa1; /* Verde para éxito */
+    background-color: #19a81e; /* Verde para éxito */
 }
 
 .error {
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index 64378f4..ec6b551 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -239,7 +239,9 @@ const SolicitarModalidad = () => {
 
         if (response.status === 201) {
             showAlert('Solicitud registrada exitosamente.', true);
-            navigate('/modalidades');
+            setTimeout(() => {
+              navigate('/historial'); 
+          }, 1000);
         } else {
             const errorMessage = response.data?.detail || 'Error desconocido';
             showAlert(`Error: ${errorMessage}`, false);
diff --git a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
index 3c89fa2..96ef6aa 100644
--- a/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
+++ b/cosiap_frontend/src/components/solicitudes/EditarSolicitud.jsx
@@ -254,8 +254,10 @@ const EditarSolicitud = () => {
         });
 
         if (response.status === 200) {
-            showAlert('Solicitud actualziada exitosamente.', true);
-            navigate('/historial');
+            showAlert('Solicitud actualizada exitosamente.', true);
+            setTimeout(() => {
+              navigate('/historial'); 
+          }, 1000);
         } else {
             const errorMessage = response.data?.detail || 'Error desconocido';
             showAlert(`Error: ${errorMessage}`, false);
@@ -321,7 +323,7 @@ const EditarSolicitud = () => {
             Cancelar
           </button>
           <button className="submit-button" onClick={() => handleSubmit()} >
-            Enviar Solicitud
+            Actualizar
           </button>
         </div>
     </MainContainer>
diff --git a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
index 5e9d89d..ed9afbf 100644
--- a/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
+++ b/cosiap_frontend/src/components/solicitudes/HistorialSolicitudes.jsx
@@ -9,6 +9,7 @@ import { useNavigate} from 'react-router-dom';
 // Componente para devolver la lista de las solicitudes de un solicitante
 const ListaSolicitudes = () => {
     const [solicitudes, setSolicitudes] = useState([]);
+    const [modalidades, setModalidades] = useState([]);
     const navigate = useNavigate();
 
     // Obtenemos las solicitudes del usuario
@@ -16,15 +17,40 @@ const ListaSolicitudes = () => {
         const fetchSolicitudes = async () => {
             try {
                 const response = await api.solicitudes.historial.get();
-                setSolicitudes(Object.values(response.data) || []);
+                const solicitudesData = Object.values(response.data) || [];
+
+                // Guardamos las solicitudes
+                setSolicitudes(solicitudesData);
+
+                // Creamos un objeto para almacenar los nombres de las modalidades por ID de solicitud
+                const modalidadNombres = {};
+
+                // Realizamos las solicitudes a la API para obtener el nombre de cada modalidad
+                await Promise.all(solicitudesData.map(async (solicitud) => {
+                    const modalidadId = solicitud.modalidad;
+                    try {
+                        const modalidadResponse = await api.modalidades.getById(modalidadId);
+                        // Asignamos el nombre de la modalidad en el objeto usando el ID de la solicitud como clave
+                        modalidadNombres[solicitud.id] = modalidadResponse.data.data.nombre;
+                    } catch (error) {
+                        console.error(`Error al obtener el nombre de la modalidad con id ${modalidadId}`, error);
+                        modalidadNombres[solicitud.id] = 'Desconocido';
+                    }
+                }));
+
+                // Actualizamos el estado con los nombres de las modalidades, almacenados por ID
+                setModalidades(modalidadNombres);
+
             } catch (error) {
                 console.error("Error al obtener la lista de solicitudes", error);
                 setSolicitudes([]);
             }
         };
+
         fetchSolicitudes();
     }, []);
 
+
     // Función para aplicar estilos al estado
     const getStatusClass = (status) => {
         switch (status) {
@@ -42,8 +68,8 @@ const ListaSolicitudes = () => {
     // Definimos las columnas a mostrar en la tabla
     const columnas = [
         {
-            label: "Nº de Solicitud",
-            render: (fila) => fila.solicitud_n
+            label: "Modalidad",
+            render: (fila) => modalidades[fila.id] || 'Cargando...'
         },
         {
             label: "Estatus",
@@ -72,7 +98,7 @@ const ListaSolicitudes = () => {
             label: "Acciones",
             render: (fila) => (
                 <div>
-                    <button className="button-ver"
+                    <button className="button-ver" onClick={() => navigate(`/ver-solicitud/${fila.solicitud_n}`)}
                     >
                         Ver
                     </button>
diff --git a/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx b/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx
new file mode 100644
index 0000000..e91fd03
--- /dev/null
+++ b/cosiap_frontend/src/components/solicitudes/VerSolicitud.jsx
@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import api from '../../api';
+import MainContainer from "../common/utility/MainContainer";
+import { useParams, useNavigate } from 'react-router-dom';
+import { renderElemento } from "@/components/common/utility/RenderElementView"; 
+import '@/components/modalidades/Modalidad.css';
+
+const VisualizarSolicitud = () => {
+  const { id } = useParams();
+  const [secciones, setSecciones] = useState({});
+  const [solicitud, setSolicitud] = useState(null);
+  const [modalidad, setModalidad] = useState('');
+  const [respuesta, setRespuesta] = useState([]);
+  const navigate = useNavigate();
+
+  // Obtenemos los datos de la solicitud
+  useEffect(() => {
+    const fetchSolicitud = async () => {
+      try {
+        const response = await api.solicitudes.getById(id);
+        setModalidad(response.data.modalidad);
+        setSolicitud(response.data);
+        setSecciones(response.data.formulario.secciones || {});
+        const respuestasProcesadas = [];
+        // Recorrer todas las secciones
+        Object.values(response.data.formulario.secciones).forEach((seccion) => {
+            Object.values(seccion.elementos).forEach((elemento) => {
+            const respuesta = elemento.respuesta || {}; // Verificar si existe la respuesta
+
+            respuestasProcesadas.push({
+                elemento_id: elemento.id,
+                seccion_id: seccion.id,
+                valor: respuesta.valor || "", // Precargar valor si existe, o dejar vacío
+                status: respuesta.status || "",
+                observacion: respuesta.observacion || ""
+            });
+            });
+        });
+        setRespuesta(respuestasProcesadas);
+      } catch (error) {
+        console.error("Error al obtener la solicitud", error);
+        setSecciones({});
+      }
+    };
+    fetchSolicitud();
+  }, [id]);
+
+  // Renderiza las secciones y sus elementos en modo solo lectura
+  const renderSecciones = () => {
+    return Object.values(secciones).map((seccion) => (
+      <div key={seccion.id} className="section-card">
+        <h3>{seccion.nombre}</h3>
+        <div className="elementos-container">
+          {Object.values(seccion.elementos).map((elemento) => (
+            <div key={elemento.id} className="element-card">
+              <h4>{elemento.nombre}</h4>
+              {/* Renderizamos el elemento en modo solo lectura */}
+              {renderElemento(seccion.id, elemento, null, null, respuesta)}
+            </div>
+          ))}
+        </div>
+      </div>
+    ));
+  };
+
+  return (
+    <MainContainer>
+      {solicitud && (
+        <>
+          <div className="image-container">
+            <img src={`http://localhost:8000${modalidad.imagen}`} alt="Modalidad" />
+            <div className="image-overlay"></div>
+            <div className="image-text-container">
+              <h3>Modalidad:</h3>
+              <h4>{modalidad.nombre}</h4>
+              <p>{modalidad.descripcion}</p>
+              <p className="monto">{new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(modalidad.monto_maximo)}</p>
+            </div>
+          </div>
+
+          <div className="info-container">
+            <p><strong>Status:</strong> {solicitud.status}</p>
+            <p><strong>Monto Aprobado:</strong> {solicitud.monto_aprobado}</p>
+          </div>
+
+          <div className="container">
+            {renderSecciones()}
+          </div>
+          {/* Botones de acción */}
+        <div className="buttons-container">
+          <button className="button" onClick={() => navigate('/historial')}>
+            Volver
+          </button>
+        </div>
+        </>
+      )}
+    </MainContainer>
+  );
+};
+
+export default VisualizarSolicitud;
-- 
GitLab