From 88ba21140dcd119317c8dad57ec18807d2b0a2c0 Mon Sep 17 00:00:00 2001
From: AdalbertoCV <34152734@uaz.edu.mx>
Date: Mon, 30 Sep 2024 16:57:55 -0600
Subject: [PATCH] =?UTF-8?q?Primera=20parte=20de=20crear=20solicitud=20+=20?=
 =?UTF-8?q?Migraciones=20de=20respuestas=20de=20opci=C3=B3n=20m=C3=BAltipl?=
 =?UTF-8?q?e.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cosiap_api/cosiap_api/.env                    |   4 +-
 .../0006_valor_respuestas_string.py           |  32 ++
 cosiap_api/dynamic_forms/models.py            |  16 +-
 .../solicitudes/respuestas_serializer.py      |  16 +-
 cosiap_frontend/src/App.jsx                   |   2 +
 cosiap_frontend/src/api.js                    |   2 +-
 .../common/utility/RenderElemento.jsx         | 120 ++++++
 .../modalidades/ListaModalidades.jsx          |   4 +-
 .../src/components/modalidades/Modalidad.css  | 265 ++++++++++++
 .../src/components/modalidades/Modalidad.jsx  | 378 ++++++++----------
 .../components/modalidades/Modalidades.jsx    |  14 +-
 11 files changed, 606 insertions(+), 247 deletions(-)
 create mode 100644 cosiap_api/dynamic_forms/migrations/0006_valor_respuestas_string.py
 create mode 100644 cosiap_frontend/src/components/common/utility/RenderElemento.jsx
 create mode 100644 cosiap_frontend/src/components/modalidades/Modalidad.css

diff --git a/cosiap_api/cosiap_api/.env b/cosiap_api/cosiap_api/.env
index efd2d31..1b8c473 100644
--- a/cosiap_api/cosiap_api/.env
+++ b/cosiap_api/cosiap_api/.env
@@ -14,8 +14,8 @@ DATABASES_DEFAULT_PORT="3306"
 
 EMAIL_HOST="sandbox.smtp.mailtrap.io"
 EMAIL_FROM="cosiap@example.com"
-EMAIL_HOST_USER="dab27aa7ffd16a"
-EMAIL_HOST_PASSWORD="59d827a27f4eda"
+EMAIL_HOST_USER="3b48193365f615"
+EMAIL_HOST_PASSWORD="37f89fc1d98f48"
 EMAIL_PORT="2525"
 EMAIL_USE_TLS=True
 
diff --git a/cosiap_api/dynamic_forms/migrations/0006_valor_respuestas_string.py b/cosiap_api/dynamic_forms/migrations/0006_valor_respuestas_string.py
new file mode 100644
index 0000000..93c8a62
--- /dev/null
+++ b/cosiap_api/dynamic_forms/migrations/0006_valor_respuestas_string.py
@@ -0,0 +1,32 @@
+# Generated by Django 5.0.8 on 2024-09-30 19:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('dynamic_forms', '0005_verbose_name_dynamicformat_dynamicform'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='rcasillas',
+            name='valor',
+        ),
+        migrations.AlterField(
+            model_name='rdesplegable',
+            name='valor',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+        migrations.AlterField(
+            model_name='ropcionmultiple',
+            name='valor',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+        migrations.AddField(
+            model_name='rcasillas',
+            name='valor',
+            field=models.CharField(blank=True, max_length=100, null=True),
+        ),
+    ]
diff --git a/cosiap_api/dynamic_forms/models.py b/cosiap_api/dynamic_forms/models.py
index 2d6b294..f1be9a8 100644
--- a/cosiap_api/dynamic_forms/models.py
+++ b/cosiap_api/dynamic_forms/models.py
@@ -327,7 +327,7 @@ class RFecha(Respuesta):
             raise ValidationError("Este campo es Obligatorio.")
 
 class ROpcionMultiple(Respuesta):
-    valor = models.ForeignKey(Opcion, on_delete=models.CASCADE, null=True, blank=True)
+    valor = models.CharField(max_length=100,null=True, blank=True)
     otro = models.CharField(max_length=255, verbose_name="Otro", null=True,  blank=True)
 
     def getStringValue(self):
@@ -350,15 +350,15 @@ class ROpcionMultiple(Respuesta):
         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'):
+            if not ((opcOtro and (otro and otro.strip())) or not opcOtro) and (respuesta and respuesta == 'Otro'):
                 raise ValidationError("Este campo es obligatorio")
-        if (otro and otro.strip()) and (respuesta and not respuesta.nombre == 'Otro'):
+        if (otro and otro.strip()) and (respuesta and not respuesta == 'Otro'):
             raise ValidationError("No esta seleccionada opcion Otro")        
-        if respuesta and (respuesta.nombre == 'Otro' and not( otro and otro.strip())):
+        if respuesta and (respuesta == 'Otro' and not( otro and otro.strip())):
             raise ValidationError("Si eliges 'otro', debes proporcionar más detalles en el campo 'otro'.")  
 
 class RCasillas(Respuesta):
-    valor = models.ManyToManyField(Opcion, blank=True)
+    valor = models.CharField(max_length=100,null=True, blank=True)
     otro = models.CharField(max_length=255, verbose_name="Otro", null=True, blank=True)
 
     def getStringValue(self):
@@ -366,7 +366,7 @@ class RCasillas(Respuesta):
         objs = self.valor.all()
         for i, obj in enumerate(objs):
             string += str(obj)
-            if obj.nombre == 'Otro':
+            if obj == 'Otro':
                 string += ': '+ str(self.otro)
             if i < len(objs) - 1:
                 string += ', '
@@ -396,11 +396,11 @@ class RCasillas(Respuesta):
     
 
 class RDesplegable(Respuesta):
-    valor = models.ForeignKey(Opcion, on_delete=models.CASCADE, null=True,  blank=True)
+    valor = models.CharField(max_length=100,null=True, blank=True)
     otro = models.CharField(max_length=255, verbose_name="Otro", null=True,  blank=True)
 
     def getStringValue(self):
-        if self.valor and self.valor.nombre == 'Otro':
+        if self.valor and self.valor == 'Otro':
             return str(self.valor)+': '+str(self.otro)
         else :
             if self.valor is None:
diff --git a/cosiap_api/solicitudes/respuestas_serializer.py b/cosiap_api/solicitudes/respuestas_serializer.py
index d177d3c..b6183a6 100644
--- a/cosiap_api/solicitudes/respuestas_serializer.py
+++ b/cosiap_api/solicitudes/respuestas_serializer.py
@@ -1,5 +1,5 @@
 from rest_framework import serializers
-from dynamic_forms.models import Respuesta, Elemento, RegistroFormulario, RegistroSeccion, RNumerico, RCasillas, RDesplegable, RDocumento, RFecha, RHora, ROpcionMultiple, RTextoParrafo, RTextoCorto
+from dynamic_forms.models import Opcion, Respuesta, Elemento, RegistroFormulario, RegistroSeccion, RNumerico, RCasillas, RDesplegable, RDocumento, RFecha, RHora, ROpcionMultiple, RTextoParrafo, RTextoCorto
 
 class RespuestaSerializer(serializers.Serializer):
     seccion_id = serializers.IntegerField()
@@ -37,7 +37,7 @@ class RespuestaSerializer(serializers.Serializer):
             respuesta_instance = respuesta_class()
             if hasattr(respuesta_instance, 'valor'):
                 if not self._validate_value(data.get('valor'), respuesta_instance):
-                    raise serializers.ValidationError("El valor no cumple con el formato esperado.")
+                    raise serializers.ValidationError("El valor del elemento no cumple con el formato esperado.")
 
             if hasattr(respuesta_instance, 'otro'):
                 if not self._validate_value(data.get('otro'), respuesta_instance, field_name='otro'):
@@ -59,21 +59,11 @@ class RespuestaSerializer(serializers.Serializer):
                 return False
             return isinstance(value, (int, float))
 
-        if isinstance(respuesta_instance, RTextoCorto) or isinstance(respuesta_instance, RTextoParrafo) or isinstance(respuesta_instance, RDesplegable):
+        if isinstance(respuesta_instance, RTextoCorto) or isinstance(respuesta_instance, RTextoParrafo) or isinstance(respuesta_instance, RDesplegable)or isinstance(respuesta_instance, ROpcionMultiple) or isinstance(respuesta_instance, RCasillas):
             return isinstance(value, str)
 
         if isinstance(respuesta_instance, RHora) or isinstance(respuesta_instance, RFecha):
             return isinstance(value, str)
-
-        if isinstance(respuesta_instance, ROpcionMultiple):
-            try:
-                value = json.loads(value)
-                return isinstance(value, list)
-            except (ValueError, json.JSONDecodeError):
-                return False
-
-        if isinstance(respuesta_instance, RDocumento):
-            return hasattr(value, 'read')
         return True
 
 
diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index 36598c7..aa35a90 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -26,6 +26,7 @@ import LayoutBaseNavigation from "@/components/common/layouts/LayoutBaseNavigati
 import Modalidades from "@/components/modalidades/Modalidades";
 import CreateModalidad from "./components/modalidades/CrearModalidad";
 import EditModalidad from "./components/modalidades/EditarModalidad";
+import SolicitarModalidad from "./components/modalidades/Modalidad";
 
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
@@ -95,6 +96,7 @@ function RoutesApp({ setViewPageLoader }) {
             path="/modalidades"
             element={<Modalidades setViewPageLoader={setViewPageLoader} />}
           />
+          <Route path="/solicitar/:id" element={<SolicitarModalidad/>} />
           <Route path="/historial" element={<Inicio />} />
           <Route path="/recepcion_ayuda" element={<Inicio />} />
           <Route path="/ayuda/manual" element={<Inicio />} />
diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js
index f819e5d..603a0e0 100644
--- a/cosiap_frontend/src/api.js
+++ b/cosiap_frontend/src/api.js
@@ -113,7 +113,7 @@ const api = {
       getById: (id) => ax.get(`api/solicitudes/reportes/${id}`),
     },
     solicitar:{
-      post: (data) => ax.post('api/solicitudes/solicitar', data),
+      post: (data) => ax.post('api/solicitudes/solicitar/', data),
       update: (id,data) => ax.put(`api/solicitudes/solicitar/${id}`, data)
     }
   },
diff --git a/cosiap_frontend/src/components/common/utility/RenderElemento.jsx b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
new file mode 100644
index 0000000..14d690f
--- /dev/null
+++ b/cosiap_frontend/src/components/common/utility/RenderElemento.jsx
@@ -0,0 +1,120 @@
+import '@/components/modalidades/Modalidad.css'
+
+export const renderElemento = (seccionId, elemento, handleInputChange) => {
+  const { tipo, opciones, id, nombre } = elemento;
+
+  const handleChange = (e) => {
+    const valor = e.target.value;
+    handleInputChange(seccionId, id, valor); 
+  };
+
+  switch (tipo) {
+    case "texto_corto":
+      return (
+        <input
+          key={id}
+          type="text"
+          name={nombre}
+          placeholder={nombre}
+          required
+          className="input-class"
+          onChange={handleChange}
+        />
+      );
+    case "texto_parrafo":
+      return (
+        <textarea
+          key={id}
+          name={nombre}
+          placeholder={nombre}
+          required
+          className="textarea-class"
+          onChange={handleChange}
+        />
+      );
+    case "numerico":
+      return (
+        <input
+          key={id}
+          type="number"
+          name={nombre}
+          placeholder={nombre}
+          required
+          className="input-class"
+          onChange={handleChange}
+        />
+      );
+    case "opcion_multiple":
+    case "desplegable":
+      return (
+        <select onChange={handleChange} key={id} name={nombre} required className="select-class">
+          <option value="" disabled>
+            Seleccione {nombre}
+          </option>
+          {Object.keys(opciones).map((opcionId) => (
+            <option key={opcionId} value={opciones[opcionId].nombre}>
+              {opciones[opcionId].nombre}
+            </option>
+          ))}
+        </select>
+      );
+    case "casillas":
+      return (
+        <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={handleChange}
+                required
+              />
+              {opciones[opcionId].nombre}
+            </label>
+          ))}
+        </div>
+      );
+    case "documento":
+      return (
+        <input
+          type='file'
+          key={id}
+          name={nombre}
+          label={nombre}
+          required
+          accept=".pdf"
+          className="file-input-class"
+          onChange={handleChange}
+        />
+      );
+    case "fecha":
+      return (
+        <input
+          key={id}
+          type="date"
+          name={nombre}
+          required
+          className="date-input-class"
+          onChange={handleChange}
+        />
+      );
+    case "hora":
+      return (
+        <input
+          key={id}
+          type="time"
+          name={nombre}
+          required
+          className="time-input-class"
+          onChange={handleChange}
+        />
+      );
+    case "separador":
+      return (
+        <hr key={id} className="separator-class" />
+      );
+    default:
+      return null;
+  }
+};
diff --git a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
index 38259ad..8f63855 100644
--- a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
+++ b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
@@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
 
 export default function ListaModalidades({
   setViewPageLoader,
-  handleModalidadDetail,
+  handleModalidadSolicitar,
   isAdmin,
   handleModalidadCreate,
   handleModalidadEdit,
@@ -71,7 +71,7 @@ export default function ListaModalidades({
                       if (isAdmin) {
                         navigate(`/editar-modalidad/${item.id}`);
                       } else {
-                        handleModalidadDetail(item.id);
+                        navigate(`/solicitar/${item.id}`);
                       }
                     }}
                   >
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.css b/cosiap_frontend/src/components/modalidades/Modalidad.css
new file mode 100644
index 0000000..105c714
--- /dev/null
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.css
@@ -0,0 +1,265 @@
+/* Estilos generales para inputs */
+.input-class,
+.textarea-class,
+.select-class,
+.date-input-class,
+.time-input-class,
+.file-input-class {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.input-class:focus,
+.textarea-class:focus,
+.select-class:focus,
+.date-input-class:focus,
+.time-input-class:focus,
+.file-input-class:focus {
+  border-color: #4CAF50;
+  outline: none;
+}
+
+/* Estilos para el textarea */
+.textarea-class {
+  height: 150px;
+  resize: vertical;
+}
+
+/* Estilos para los select */
+.select-class {
+  height: 40px;
+  background-color: white;
+}
+
+/* Estilos para grupos de casillas (checkbox) */
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.checkbox-label {
+  margin-right: 15px;
+}
+
+.checkbox-label input {
+  margin-right: 5px;
+}
+
+/* Estilos para el input de archivo */
+.file-input-class {
+  cursor: pointer;
+}
+
+/* Estilos para la fecha y hora */
+.date-input-class,
+.time-input-class {
+  max-width: 200px;
+}
+
+/* Estilo para el separador */
+.separator-class {
+  border: 0;
+  height: 1px;
+  background: #e0e0e0;
+  margin: 20px 0;
+}
+
+
+/* Contenedor principal */
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    background-color: var(--secundario-mc);
+    border-radius: 45px;
+    margin-top: 20px;
+  }
+  
+  /* Sección de la imagen y título */
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    border-radius: 45px 45px 0 0;
+    overflow: hidden;
+  }
+  
+  .image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .image-overlay {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(128, 128, 128, 0.6);
+    border-radius: 45px 45px 0 0;
+  }
+  
+  .image-text-container {
+    position: absolute;
+    top: 10%;
+    width: 100%;
+    text-align: center;
+    color: var(--blanco);
+  }
+  
+  .image-text-container h3 {
+    font-size: 2rem;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+  
+  .image-text-container h4 {
+    font-size: 2.5rem;
+    margin-top: 20px;
+  }
+  
+  .image-text-container p {
+    font-size: 1.2rem;
+    margin-top: 20px;
+  }
+  
+  /* Estilos de las cards de las secciones */
+  .section-card {
+    background-color: var(--blanco);
+    width: 90%;
+    margin: 20px 0;
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .section-card h3 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: var(--secundario);
+    text-align: center;
+  }
+  
+  /* Contenedor de los elementos, para agruparlos en filas */
+  .elementos-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-between;
+  }
+  
+  /* Cada elemento tiene su propia card */
+  .element-card {
+    background-color: var(--gris-claro);
+    border-radius: 10px;
+    padding: 15px;
+    width: 30%; /* Toma 30% del ancho para 3 elementos por fila */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  /* Estilos para los inputs dentro de las element-cards */
+  .element-card input,
+  .element-card textarea,
+  .element-card select {
+    width: 100%;
+    padding: 10px;
+    font-size: 1rem;
+    margin-top: 5px;
+    border: 1px solid var(--gris);
+    border-radius: 5px;
+  }
+  
+  /* Input específico para archivo */
+  .file-input-class {
+    background-color: var(--blanco);
+    cursor: pointer;
+  }
+  
+  /* Estilo de la card del monto solicitado */
+  .monto-card {
+    background-color: var(--blanco);
+    width: 90%;
+    margin: 30px 0;
+    padding: 30px;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .monto-card h3 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: var(--secundario);
+    text-align: center;
+  }
+  
+  .monto-card .input-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  
+  /* Botones de acción */
+  .buttons-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+  }
+  
+  .button {
+    background-color: var(--secundario);
+    color: var(--blanco);
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .submit-button {
+    background-color: #4CAF50;
+    color: var(--blanco);
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  
+  .button:hover {
+    background-color: var(--secundario-f);
+  }
+  
+  .alert {
+    position: fixed;
+    top: 20px; /* Distancia desde la parte superior */
+    left: 50%;
+    transform: translateX(-50%); /* Centrar horizontalmente */
+    padding: 15px;
+    color: white;
+    width: calc(100% - 40px); /* Ajustar el ancho */
+    max-width: 600px; /* Ancho máximo */
+    text-align: center;
+    z-index: 1000; 
+    border-radius: 5px;
+    transition: opacity 0.5s ease; /* Transición suave */
+}
+
+.success {
+    background-color: #9fdfa1; /* Verde para éxito */
+}
+
+.error {
+    background-color: #f44336; /* Rojo para error */
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/Modalidad.jsx b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
index 7996c33..ff6c2c9 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidad.jsx
@@ -1,53 +1,110 @@
-import DocumentInput from "@/components/common/utility/DocumentInput";
-import HeaderSection from "@/components/common/utility/HeaderSection";
-import StatusDocument from "@/components/common/utility/StatusDocument";
 import InputMonto from "@/components/common/utility/InputMonto";
-import InputFile from "@/components/common/utility/InputFile";
+import { renderElemento } from "@/components/common/utility/RenderElemento";
+import '@/components/modalidades/Modalidad.css'
+
 /* Validaciones para formularios */
 import {
   MontoValidation,
-  PDF_FileValidation,
 } from "@/components/FormsValidations";
 
 import api from "@/api";
 import { useEffect, useState } from "react";
+import { useParams, useNavigate } from 'react-router-dom';
 
 // eslint-disable-next-line react-refresh/only-export-components
 export { useNavigate } from "react-router-dom";
 
-export default function Modalidad({ id, setViewPageLoader }) {
+const SolicitarModalidad = () => {
+  const { id } = useParams();
   const [modalidad, setModalidad] = useState();
-  const [archivo1, setArchivo1] = useState(null);
-  const [archivo2, setArchivo2] = useState(null);
-  const [archivoError1, setArchivoError1] = useState("");
-  const [archivoError2, setArchivoError2] = useState("");
-  const [fileName1, setFileName1] = useState("");
-  const [fileName2, setFileName2] = useState("");
-
   const [montoError, setMontoError] = useState("");
   const [montoSolicitado, setMontoSolicitado] = useState("");
-
-  const [showAlert, setShowAlert] = useState(false);
-  const [archivoTieneError, setArchivoTieneError] = useState(false);
-  const [montoTieneError, setMontoTieneError] = useState(false);
+  const [secciones, setSecciones]= useState([]);
+  const [respuesta, setRespuesta] = useState([]);
+  const [alertMessage, setAlertMessage] = useState(''); // Estado para el mensaje de alerta
+  const [isSuccess, setIsSuccess] = useState(false);
+  const navigate = useNavigate();
 
   const obtenerModalidad = async () => {
-    setViewPageLoader(true);
     try {
       const response = await api.modalidades.getById(Number(id));
       setModalidad(response.data.data);
+      const modalidadData = response.data.data
+      const formResponse = await api.dynamicForms.dynamicForms.getById(modalidadData.dynamic_form);
+      const seccionesArray = formResponse.data.data.secciones; 
+      const formattedSections = {};
+
+      Object.keys(seccionesArray).forEach(sectionKey => {
+          const section = seccionesArray[sectionKey];
+          formattedSections[section.id] = {
+              ...section,
+              elementos: {}
+          };
+
+          // Anidamos los elementos en su respectiva sección
+          Object.keys(section.elementos).forEach(elementKey => {
+              const element = section.elementos[elementKey];
+              formattedSections[section.id].elementos[element.id] = {
+                  ...element,
+                  opciones: {}  
+              };
+
+              // Si el elemento tiene opciones, anidamos las opciones
+              if (element.opciones) {
+                  Object.keys(element.opciones).forEach(optionKey => {
+                      const option = element.opciones[optionKey];
+                      formattedSections[section.id].elementos[element.id].opciones[option.id] = option;
+                  });
+              }
+          });
+      });
+      setSecciones(formattedSections);
+      console.log("Secciones del fomrulario:", formattedSections)
       console.log("Modalidad extraída con éxito", response);
       console.log(response.data);
     } catch (error) {
       console.error("Modalidad no extraída", error);
     }
-    setViewPageLoader(false);
   };
 
+
   useEffect(() => {
     obtenerModalidad();
   }, [id]);
 
+
+  const showAlert = (message, isSuccess) => {
+    setAlertMessage(message);
+    setIsSuccess(isSuccess);
+    
+    setTimeout(() => {
+      setAlertMessage('');
+    }, 3000);
+  };
+
+
+  const handleInputChange = (seccionId, elementoId, valor, otro = "") => {
+    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 },
+        ];
+      }
+    });
+  };
+
+
   /* Función para mostrar el monto_maximo en formato de pesos MXN */
   const formatCurrency = (amount) => {
     return new Intl.NumberFormat("es-MX", {
@@ -56,20 +113,6 @@ export default function Modalidad({ id, setViewPageLoader }) {
     }).format(amount);
   };
 
-  /* Validación de los archivos PDF. */
-  const validarArchivo = async (archivo) => {
-    try {
-      await PDF_FileValidation.validate(archivo);
-      setArchivoError("");
-      setArchivoTieneError(false); // sin error
-      return true;
-    } catch (error) {
-      setArchivoError(error.message);
-      setArchivoTieneError(true); // existe un error
-      return false;
-    }
-  };
-
   /* Validación del monto_maximo */
   const validarMonto = async (monto) => {
     try {
@@ -82,35 +125,10 @@ export default function Modalidad({ id, setViewPageLoader }) {
       return true;
     } catch (error) {
       setMontoError(error.message);
-      setMontoTieneError(true); // existe un error
       return false;
     }
   };
 
-  const handleFileChange1 = async (e) => {
-    const file = e.target.files[0];
-    setArchivo1(file);
-    setFileName1(file ? file.name : "");
-    const esValido = await validarArchivo(file);
-    if (esValido) {
-      setArchivoError1("");
-    } else {
-      setArchivoError1("Error en el archivo");
-    }
-  };
-
-    const handleFileChange2 = async (e) => {
-    const file = e.target.files[0];
-    setArchivo2(file);
-    setFileName2(file ? file.name : "");
-    const esValido = await validarArchivo(file);
-    if (esValido) {
-      setArchivoError2("");
-    } else {
-      setArchivoError2("Error en el archivo");
-    }
-  };
-
   const handleMontoChange = async (e) => {
     const monto = e.target.value;
     setMontoSolicitado(monto);
@@ -118,177 +136,109 @@ export default function Modalidad({ id, setViewPageLoader }) {
   };
 
   const handleSubmit = async () => {
-    const archivoValido = await validarArchivo(archivo);
-    const montoValido = await validarMonto(montoSolicitado);
+    const isEmptyResponse = respuesta.some(
+      (res) => !res.valor || res.valor.trim() === ""
+    );
+  
+    const isMontoInvalid = !montoSolicitado || montoError;
+  
+    if (isEmptyResponse || isMontoInvalid) {
+      showAlert('Por favor completa todos los campos requeridos.', false);
+      return;
+    }
+
 
-    if (archivoValido && montoValido) {
-      console.log("Formulario válido, listo para enviar.");
-      // Ocultar la alerta si el formulario es válido.
-      setShowAlert(false);
-    } else {
-      setShowAlert(true);
+    const dataToSend = {
+      monto_solicitado: montoSolicitado,
+      modalidad_id: modalidad.id,
+      respuestas: respuesta,
+    };
+  
+    try {
+      const response = await api.solicitudes.solicitar.post(dataToSend);
+      
+      if (response.status === 201) {
+        showAlert('Solicitud registrada exitosamente.', true);
+        navigate('/modalidades');
+      } else {
+        const errorMessage = response.data?.detail || 'Error desconocido';
+        showAlert(`Error: ${errorMessage}`, false);
+      }
+    } catch (error) {
+      // Atrapando el mensaje de error específico
+      if (error.response && error.response.data && error.response.data.messages) {
+        const specificErrorMessage = error.response.data.messages.error[0]; // Obtener el primer mensaje de error
+        showAlert(`Error: ${specificErrorMessage}`, false);
+      } else {
+        const errorMessage = error.message || 'Error en la conexión';
+        showAlert(`Error: ${errorMessage}`, false);
+      }
     }
   };
 
   return (
     modalidad && (
-      <div className="flex flex-col items-center pb-8 w-auto lg:w-[90%] mt-5 m-5 bg-[var(--secundario-mc)] rounded-[45px]">
-        <div className="relative w-full h-full mt-0 rounded-t-[45px]">
-          <div className="flex flex-col items-center text-[var(--blanco)]">
-            <img
-              className="rounded-t-[45px] w-full h-[400px] object-fill overflow-hidden"
-              src={`http://localhost:8000${modalidad.imagen}`}
-              alt="Modalidad"
-            />
-            <div className="absolute inset-x-0 top-0 h-[85%] bg-[var(--gris-6)] opacity-60 rounded-t-[45px]"></div>
-            <div className="absolute inset-x-0 flex items-center justify-center">
-              <div className="absolute top-10 text-center">
-                <h3 className="text-2xl font-bold uppercase drop-shadow-xl">
-                  Modalidad:
-                </h3>
-                <div className="flex justify-center mt-10">
-                  <h4 className="mb-2 text-3xl font-bold drop-shadow-xl">
-                    {modalidad.nombre}
-                  </h4>
-                </div>
-                <div className="mt-10">
-                  <p className="text-justify mx-auto leading-tight text-xl drop-shadow-xl">
-                    {modalidad.descripcion}
-                  </p>
-                </div>
-                <div className="mt-10">
-                  <p className="text-xl font-bold mx-auto drop-shadow-xl">
-                    {formatCurrency(modalidad.monto_maximo)}
-                  </p>
-                </div>
-              </div>
+      <div className="container">
+
+        {/* Alerta */}
+        {alertMessage && (
+            <div className={`alert ${isSuccess ? 'success' : 'error'}`}>
+              {alertMessage}
             </div>
-          </div>
-          <div className="py-3.5">
-            <HeaderSection title="Documentos" />
+        )}
+
+        {/* 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>
-        {showAlert && (
-          <div
-            className="w-[330px] md:w-[500px] lg:w-[50%] p-4 mb-4 text-center bg-[var(--error)] border border-[var(--error-f)] text-[var(--blanco)] px-4 py-3 rounded relative"
-            role="alert"
-          >
-            <strong className="font-semibold text-sm">
-              Por favor, suba toda la documentación.
-            </strong>
-            <span className="absolute top-0 bottom-0 right-0 px-4 py-3">
-              <button
-                onClick={() => setShowAlert(false)}
-                className="text-[var(--error-f)] font-bold "
-              >
-                <svg
-                  className="fill-current h-6 w-6 text-[var(--error-f)]"
-                  role="button"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                >
-                  <title>Cerrar</title>
-                  <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
-                </svg>
-              </button>
-            </span>
-          </div>
-        )}
-        {/* Campos para subir documentación. */}
-        <div className="flex flex-wrap items-center justify-center gap-4 mb-6 mt-4">
-          <DocumentInput
-            title="Constancia de estudios"
-            description="Constancia de estudios vigente."
-          >
-            <div className="flex flex-col justify-between w-full">
-            <InputFile
-              titleBtn="Seleccionar"
-              descBtn={fileName1 || "Ningún archivo seleccionado."}
-              onChange={handleFileChange1}
-              hasError={!!archivoError1} // true si hay error
-              
-            />
-            {archivoError1 && (
-              <div className="flex -mt-4 w-full justify-center">
-                <p className="text-[var(--error-f)] font-bold text-center text-xs underline">{archivoError1}</p>
-              </div>
-            )}
-            </div>
-            <div className="bg-[var(--secundario-c)] w-full h-[200px] border border-[var(--secundario-c)]"></div>
-            <div className="flex flex-col items-center justify-between mt-8">
-              <StatusDocument
-                title="Estatus"
-                description="Sube tu documentación para su revisión."
-              />
-              <StatusDocument
-                title="Retroalimentación"
-                description="Sube tu documentación para su revisión."
-              />
-            </div>
-          </DocumentInput>
-          <DocumentInput
-            title="Kardex de calificaciones"
-            description="Calificaciones de los semestres cursados hasta ahora."
-          >
-            <div className="flex flex-col justify-between w-full">
-              <InputFile
-              titleBtn="Seleccionar"
-              descBtn={fileName2 || "Ningún archivo seleccionado."}
-              onChange={handleFileChange2}
-              hasError={!!archivoError2}
-              
-            />
-            {archivoError2 && (
-              <div className="flex -mt-4 w-full justify-center">
-                <p className="text-[var(--error-f)] font-bold text-center text-xs underline">{archivoError2}</p>
-              </div>
-            )}
-            </div>
-            <div className="bg-[var(--secundario-c)] w-full h-[200px] border border-[var(--secundario-c)]"></div>
-            <div className="flex flex-col items-center justify-between mt-4">
-              <StatusDocument
-                title="Estatus"
-                description="Sube tu documentación para su revisión."
-              />
-              <StatusDocument
-                title="Retroalimentación"
-                description="Sube tu documentación para su revisión."
-              />
-            </div>
-          </DocumentInput>
-          <DocumentInput
-            title="Monto solicitado"
-            description="Ingresa la cantidad que deseas solicitar."
-          >
-            <div className="flex flex-col items-center justify-center mt-4 ">
-              <InputMonto
-                value={montoSolicitado}
-                onChange={handleMontoChange}
-              />
-              {montoError && (                
-                <p className="mt-4 text-[var(--error-f)] font-bold text-center text-xs underline">{montoError}</p>
-              )}
-              <div className="flex mt-5">
-                <StatusDocument
-                title="Estatus del monto"
-                description="Monto aprobado o rechazado."
-              />
-              </div>
+  
+        {/* Renderizar las secciones y elementos */}
+        {Object.keys(secciones).map((seccionId) => (
+          <div key={seccionId} className="section-card">
+            <h3>{secciones[seccionId].nombre}</h3>
+            <div className="elementos-container">
+              {Object.keys(secciones[seccionId].elementos).map((elementoId) => (
+                <div key={elementoId} className="element-card">
+                  <h4>{secciones[seccionId].elementos[elementoId].nombre}</h4>
+                  {renderElemento(seccionId, secciones[seccionId].elementos[elementoId], handleInputChange)}
+                </div>
+              ))}
             </div>
-          </DocumentInput>
+          </div>
+        ))}
+  
+        {/* 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 className="flex flex-row w-full h-auto justify-center items-center p-2 space-x-2 lg:space-x-8">
-          <button className="flex items-center justify-center lg:w-[15%] text-sm h-8 mr-10 bg-[var(--secundario)] hover:bg-[var(--secundario-f)] text-[var(--blanco)] font-bold py-2 px-8 border border-[var(--secundario)] rounded">
+  
+        {/* Botones de acción */}
+        <div className="buttons-container">
+          <button className="button" onClick={() => navigate('/modalidades')}>
             Cancelar
           </button>
-          <button
-            className="flex items-center justify-center lg:w-[15%] text-sm h-8 bg-[var(--exito-btn)] hover:bg-[#527f18e2] text-[var(--blanco)] font-bold py-2 px-4 border border-[#527f18] rounded"
-            onClick={handleSubmit}
-          >
-            Enviar Solicitud
+          <button className="button" onClick={handleSubmit}>
+            Solicitar
           </button>
         </div>
       </div>
     )
   );
-}
+};
+
+export default SolicitarModalidad;
diff --git a/cosiap_frontend/src/components/modalidades/Modalidades.jsx b/cosiap_frontend/src/components/modalidades/Modalidades.jsx
index e3f52bc..e7d14e6 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidades.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidades.jsx
@@ -7,16 +7,16 @@ import EditModalidad from "./EditarModalidad";
 
 export default function Modalidades({ setViewPageLoader }) {
   const [viewModalidades, setViewModalidades] = useState(true);
-  const [viewModalidadDetail, setViewModalidadDetail] = useState(false);
+  const [viewModalidadSolicitar, setViewModalidadSolicitar] = useState(false);
   const [selectedId, setSelectedId] = useState(null);
   const {isAdmin} = useAutenticacion();
   const [viewModalidadCreate, setViewModalidadCreate] = useState(false)
   const [viewModalidadEdit, setViewModalidadEdit] = useState(false)
 
 
-  const handleModalidadDetail = (id) => {
+  const handleModalidadSolicitar = (id) => {
     setViewModalidades(false);
-    setViewModalidadDetail(true);
+    setViewModalidadSolicitar(true);
     setSelectedId(id);
   };
 
@@ -27,7 +27,7 @@ export default function Modalidades({ setViewPageLoader }) {
 
   const handleModalidadEdit = (id) => {
     setSelectedId(id)
-    setViewModalidadDetail(false);
+    setViewModalidadSolicitar(false);
     setViewModalidadEdit(true)
   }
 
@@ -37,14 +37,14 @@ export default function Modalidades({ setViewPageLoader }) {
       {viewModalidades && (
         <ListaModalidades
           setViewPageLoader={setViewPageLoader}
-          handleModalidadDetail={handleModalidadDetail}
+          handleModalidadDetail={handleModalidadSolicitar}
           isAdmin = {isAdmin}
           handleModalidadCreate = {handleModalidadCreate}
           handleModalidadEdit={handleModalidadEdit}
         />
       )}
-      {viewModalidadDetail && selectedId && (
-        <Modalidad id={selectedId} setViewPageLoader={setViewPageLoader} />
+      {viewModalidadSolicitar && selectedId && (
+        <Modalidad id={selectedId}/>
       )}
       {viewModalidadCreate && (
         <CreateModalidad
-- 
GitLab