From c0317595fdcd1a0e052d42ef298e7e7f3eee14a2 Mon Sep 17 00:00:00 2001
From: Elliot Axel Noriega <elliotnoriega@gmail.com>
Date: Tue, 5 Nov 2024 13:17:21 -0600
Subject: [PATCH 1/2] Z-index de layouts

---
 .../src/components/common/layouts/LayoutBaseNavigation.jsx      | 2 +-
 .../common/layouts/LayoutsNavigation/Navbar/Navbar.jsx          | 2 +-
 .../common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx
index 0db9c6f..7e8c183 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseNavigation.jsx
@@ -75,7 +75,7 @@ export default function LayoutBaseNavigation() {
 
       <div className={`w-full h-full ${selectedNav === 'vertical' ? 'lg:ml-[17.3%]' : ''}`}>
         <div 
-          className="fixed flex cursor-pointer h-10 w-10 right-0 bg-[var(--principal-c)] border-y-4 border-l-4 border-[var(--principal-mf)] rounded-s-3xl mt-2"
+          className="fixed flex cursor-pointer h-10 w-10 right-0 bg-[var(--principal-c)] border-y-4 border-l-4 border-[var(--principal-mf)] rounded-s-3xl mt-2 z-10"
           onClick={() => setViewSettings(!viewSettings)}
         >
           <SettingsToggle settingsToggleRef={settingsToggleRef} />
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx
index b1cbe2d..d8956ef 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx
@@ -50,7 +50,7 @@ export default function Navbar({ linksItems, viewMenu, setViewMenu }) {
         <>
             <nav className="z-0 uppercase static left-0 inset-y-0">
                 {/* Contenedor de gradiente para pantallas pequeñas */}
-                <div className="fixed z-0 h-[3.8rem] lg:h-[3.1rem] w-full bg-gradient-to-r from-[var(--principal-mf)] via-[var(--principal)] to-[var(--principal-c)] p-1"></div>
+                <div className="fixed z-10 h-[3.8rem] lg:h-[3.1rem] w-full bg-gradient-to-r from-[var(--principal-mf)] via-[var(--principal)] to-[var(--principal-c)] p-1"></div>
 
                 {/* Contenedor principal del navbar */}
                 <div className="z-10 fixed top-0 left-0 right-0 flex items-center justify-between bg-[#E1E1E1]">
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
index 753e2c0..37a0982 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx
@@ -56,7 +56,7 @@ export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){
         <>        
         <aside className="z-0 uppercase static left-0 inset-y-0">
             {/* Contenedor gradiente de parte superior */}
-            <div className="fixed z-0 h-[3.8rem] lg:h-11 w-full bg-gradient-to-r from-[var(--principal-mf)] via-[var(--principal)] to-[var(--principal-c)] lg:shadow-gray-400 lg:shadow-lg p-1">
+            <div className="fixed z-10 h-[3.8rem] lg:h-11 w-full bg-gradient-to-r from-[var(--principal-mf)] via-[var(--principal)] to-[var(--principal-c)] lg:shadow-gray-400 lg:shadow-lg p-1">
             
             </div>
             {/* Contenedor de parte superior */}
-- 
GitLab


From 38f1b9271e1d513ce50c3f2dd8911c27592799b4 Mon Sep 17 00:00:00 2001
From: Elliot Axel Noriega <elliotnoriega@gmail.com>
Date: Mon, 11 Nov 2024 20:49:25 -0600
Subject: [PATCH 2/2] Funcionalidad de ver solicitud detallada, y columna
 solicitante con nombre completo

---
 cosiap_api/solicitudes/views.py               |   3 +-
 cosiap_frontend/src/App.jsx                   |   3 +-
 cosiap_frontend/src/api.js                    |   8 +-
 .../SolicitudesAdmin/DetallesSolicitud.jsx    | 830 ++++++++++++++++++
 .../SolicitudesAdmin/MenuColumnas.jsx         |  28 +-
 .../SolicitudesAdmin/MenuFiltros.jsx          |   2 +-
 .../SolicitudesAdmin/MenuReportes.jsx         |   4 +-
 .../SolicitudesAdmin/Solicitudes.jsx          | 395 ++++++---
 8 files changed, 1134 insertions(+), 139 deletions(-)
 create mode 100644 cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx

diff --git a/cosiap_api/solicitudes/views.py b/cosiap_api/solicitudes/views.py
index 7260613..9397958 100644
--- a/cosiap_api/solicitudes/views.py
+++ b/cosiap_api/solicitudes/views.py
@@ -408,8 +408,7 @@ class CalificarDocumento(BasePermissionAPIView):
 
                 # Actualizar el status del documento
                 respuesta.status = nuevo_status
-                if nueva_observacion:
-                    respuesta.observacion = nueva_observacion
+                respuesta.observacion = nueva_observacion
                 respuesta.save()
 
             data['mensaje'] = "Documentos calificados correctamente."
diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index 21b985b..3f8b9ac 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -42,7 +42,7 @@ import CrearFormato from "./components/plantillas/CrearPlantilla";
 import useColor from "./components/useColor";
 import EditarColorLogo from "./components/design/colorLogo";
 import DescargarManual from "./components/plantillas/manual";
-
+import DetallesSolicitud from "./components/SolicitudesAdmin/DetallesSolicitud";
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
 
@@ -141,6 +141,7 @@ function RoutesApp({ setViewPageLoader }) {
           >
             <Route path="/usuarios" element={<ListaUsuarios />} />
             <Route path="/solicitudes" element={<Solicitudes setViewPageLoader={setViewPageLoader} />} />
+            <Route path="/solicitudes/detalles-solicitud/:id_solicitud" element={<DetallesSolicitud setViewPageLoader={setViewPageLoader} />} />
             <Route path="/crear-modalidad" element={<CreateModalidad/>} />
             <Route path="/editar-modalidad/:id" element={<EditModalidad/>} />
             <Route path="/historial-solicitante/:id" element={<ListaSolicitudesSolicitante/>} />
diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js
index 4c15e94..1bd0844 100644
--- a/cosiap_frontend/src/api.js
+++ b/cosiap_frontend/src/api.js
@@ -120,10 +120,15 @@ const api = {
     post: (data) => ax.post('api/solicitudes/', data),
     getById: (id) => ax.get(`api/solicitudes/${id}`),
     update: (id, data) => ax.put(`api/solicitudes/${id}/`, data),
+    delete: (id) => ax.delete(`api/solicitudes/${id}`),
+    calificar_documentos: (id, data) => ax.put(`api/solicitudes/calificar/${id}/`, data),
     historial: {
       get: () => ax.get('api/solicitudes/historial'),
       getById: (id) => ax.get(`api/solicitudes/historial/${id}`),
     },
+    minuta: {
+      update: (id,data) => ax.put(`api/solicitudes/subir-minuta/${id}/`, data)
+    },
     convenio: {
       update: (id,data) => ax.put(`api/solicitudes/subir-convenio/${id}/`, data),
       get: () => ax.get('api/solicitudes/subir-convenio/')
@@ -134,7 +139,8 @@ const api = {
     },
     reportes:{
       exportar: (params) => ax.get(`api/solicitudes/reportes/exportar`, params)
-    }
+    },
+    
   },
   dynamicTables: {
     get: () => ax.get('api/dynamic-tables'),
diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx
new file mode 100644
index 0000000..fcf954e
--- /dev/null
+++ b/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx
@@ -0,0 +1,830 @@
+import api, { apiUrl } from "@/api";
+import { useParams, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+import ModalConfirmation from "../common/ui/Modals/ModalConfirmation";
+import Alert from "../common/ui/Alert";
+
+export default function DetallesSolicitud( {setViewPageLoader} ) {
+    const { id_solicitud } = useParams();
+    const [solicitud, setSolicitud] = useState(null);
+    const [minuta, setMinuta] = useState(null);
+    const [montoAprobado, setMontoAprobado] = useState(null);
+    const [observacion, setObservacion] = useState(null);
+    const [status, setStatus] = useState(null);
+    const [showModal, setShowModal] = useState(false);
+
+    //Estados para alertas
+    const [showAlertSuccesful, setShowAlertSuccesful] = useState(false);
+    const [showAlertError, setShowAlertError] = useState(false);
+    //Variable para el mensaje de la alerta
+    const [alertMessage, setAlertMessage] = useState('');
+
+    const navigate = useNavigate();
+
+    function regimen (value) {
+        switch (value) {
+            case "1":
+                return "Régimen Simplificado de Confianza"
+            case "2":
+                return "Sueldos y salarios e ingresos asimilados a salarios"
+            case "3":
+                return "Régimen de Actividades Empresariales y Profesionales"
+            case "4":
+                return "Régimen de Incorporación Fiscal"
+            case "5":
+                return "Enajenación de bienes"
+            case "6":
+                return "Régimen de Actividades Empresariales con ingresos a través de Plataformas Tecnológicas"
+            case "7":
+                return "Régimen de Arrendamiento"
+            case "8":
+                return "Intereses"
+            case "9":
+                return "Obtención de premios"
+            case "10":
+                return "Dividendos"
+            case "11":
+                return "Demás Ingresos"
+            case "12":
+                return "Sin obligaciones fiscales"
+            default:
+                return value;
+        }
+    }
+
+    const obtenerSolicitud = async() => {
+        try {
+            setViewPageLoader(true);
+            
+            const response = await api.solicitudes.getById(id_solicitud)
+
+            console.log('Extracción de solicitud exitosa', response)
+            //Actualizamos el monto aprobado
+            setMontoAprobado(response.data.monto_aprobado)
+            //Aactualizamos la observacion
+            setObservacion(response.data.observacion)
+            setStatus(response.data.status)
+            setSolicitud(response.data)
+        } catch (error) {
+            console.error('Error al obtener solicitud', error);
+        } finally {
+            setViewPageLoader(false);
+        }
+    }
+
+    useEffect((() => {
+        obtenerSolicitud()
+    }), [id_solicitud])
+
+    const handleStatusDocumentChange = (seccionKey, elementoKey, newStatus) => {
+        // Actualiza el estado de la solicitud, cambiando el estado del elemento correspondiente
+        const updatedSolicitud = { ...solicitud };
+        updatedSolicitud.formulario.secciones[seccionKey].elementos[elementoKey].respuesta.status = newStatus;
+        
+        // Aquí actualizarías el estado o realizarías cualquier acción necesaria
+        setSolicitud(updatedSolicitud);
+        
+    };
+
+    const handleObservationDocumentChange = (seccionKey, elementoKey, newObservation) => {
+        // Actualiza el estado de la solicitud, cambiando el estado del elemento correspondiente
+        const updatedSolicitud = { ...solicitud };
+        updatedSolicitud.formulario.secciones[seccionKey].elementos[elementoKey].respuesta.observacion = newObservation;
+        
+        // Aquí actualizarías el estado o realizarías cualquier acción necesaria
+        setSolicitud(updatedSolicitud);
+        
+    };
+
+    const handleMinutaChange = (event) => {
+        const file = event.target.files[0];
+        // Verifica si el archivo es un PDF
+        if (file && file.type === "application/pdf") {
+            setMinuta(file);
+        } else {
+            setMinuta(null);
+            setAlertMessage("Solo puedes subir archivos PDF.")
+            setShowAlertError(true); 
+            event.target.value = ""; // Limpia el input de archivo
+        }
+    };
+
+    const actualizarDatosSolicitud = async() => {
+        try {
+            //Creamos un data siempre y agregamos la minuta, observación, status y monto aprobado
+            // Crear una instancia de FormData
+            const formData = new FormData();
+            formData.append('minuta', minuta);
+            formData.append('observacion', observacion);
+            formData.append('status', status);
+            formData.append('monto_aprobado', montoAprobado);
+            const data = {'field_updates': formData}
+            console.log(data)
+            const response = await api.solicitudes.update(id_solicitud, data, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            });
+
+            console.log('Actualización de solicitud exitosa', response)
+        } catch (error) {
+            console.error(error)
+        }
+    };
+
+    const calificarDocumentos = async() => {
+        try {
+            let data = [];
+
+            // Iteramos sobre cada sección del formulario
+            Object.values(solicitud?.formulario.secciones).forEach((seccion) => {
+                // Iteramos sobre cada elemento de la sección
+                Object.values(seccion.elementos).forEach((elemento) => {
+                    // Verificamos si el elemento es de tipo "documento" y tiene una respuesta
+                    if (elemento.tipo === "documento" && elemento.respuesta) {
+                        data.push({
+                            id_respuesta: elemento.respuesta.id,
+                            nuevo_status: elemento.respuesta.status, // Usamos un string vacío si no hay status
+                            nueva_observacion: elemento.respuesta.observacion // Usamos un string vacío si no hay observación
+                        });
+                    }
+                });
+            });
+
+            const response = await api.solicitudes.calificar_documentos(id_solicitud, {'check_documents': data});
+
+            console.log('Actualización de documentos exitosa', response)
+        } catch (error) {
+            console.error(error)
+        }
+    };
+
+
+
+    const handleSaveChanges = async() => {
+        setShowModal(false);
+        try {
+            setViewPageLoader(true);
+
+            // Actualizamos los datos de la solicitud, excepto la minuta
+
+            //Creamos la data con la observacion, status y monto_aprobado
+            let datos = {
+                observacion: observacion,
+                status: status,
+                monto_aprobado: montoAprobado
+            }
+
+            const response = await api.solicitudes.update(id_solicitud, {'field_updates': datos});
+            
+            console.log('Actualización de datos de solicitud exitosa', response)
+            if (minuta){
+                //Agregamos la minuta en un form_data
+                const formData = new FormData();
+                formData.append('minuta', minuta);
+                // Actualizamos la minuta
+                const responseMinuta = await api.solicitudes.minuta.update(id_solicitud, formData,{
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+                console.log('Actualización de minuta de solicitud exitosa', responseMinuta)
+
+            }
+            // const response = await api.solicitudes.update(id_solicitud, {'field_updates': data}, {
+            //     headers: {
+            //         'Content-Type': 'multipart/form-data',
+            //     },
+            // });
+
+            console.log('Actualización de solicitud exitosa', response)
+            
+            //Calificamos los documentos
+            let data = [];
+
+            // Iteramos sobre cada sección del formulario
+            Object.values(solicitud?.formulario.secciones).forEach((seccion) => {
+                // Iteramos sobre cada elemento de la sección
+                Object.values(seccion.elementos).forEach((elemento) => {
+                    // Verificamos si el elemento es de tipo "documento" y tiene una respuesta
+                    if (elemento.tipo === "documento" && Object.keys(elemento.respuesta).length !== 0) {
+                        data.push({
+                            id_respuesta: elemento.respuesta.id,
+                            nuevo_status: elemento.respuesta.status,
+                            nueva_observacion: (elemento.respuesta.observacion.length === 0 ? null : elemento.respuesta.observacion)
+                        });
+                    }
+                });
+            });
+
+            console.log(data)
+
+            const responseDoc = await api.solicitudes.calificar_documentos(id_solicitud, {'check_documents': data});
+
+            console.log('Actualización de documentos exitosa', responseDoc)
+            
+
+            //Definimos el mensaje de la alerta
+            setAlertMessage('¡Cambios guardados con exito!');
+            setShowAlertSuccesful(true)
+            
+        } catch (error) {
+            console.error('Error al guardar cambios', error);
+            //Definimos el mensaje de la alerta
+            setAlertMessage('¡Ha ocurrido un error inesperado! Vuelve a intentarlo');
+            setShowAlertError(true)
+        } finally {
+            setViewPageLoader(false);
+        }
+    }
+
+    return (
+        <>
+            {showAlertSuccesful && (
+                <Alert
+                    message={alertMessage}
+                    type="success" // success
+                    duration={5000} // Duración de 5 segundos
+                    isVisible={showAlertSuccesful}
+                    setIsVisible={setShowAlertSuccesful}
+                />
+            )}
+            {showAlertError && (
+                <Alert
+                    message={alertMessage}
+                    type="error" // success
+                    duration={5000} // Duración de 5 segundos
+                    isVisible={showAlertError}
+                    setIsVisible={setShowAlertError}
+                />
+            )}
+            
+            {showModal && (
+                <ModalConfirmation 
+                    nameIcon="warning"
+                    title="¿Estas seguro de guardar los cambios realizados"
+                >
+                    <button
+                        type="button"
+                        className='py-1 px-8 bg-[var(--gris-3)] hover:bg-[var(--gris-6)] text-dark hover:text-white font-semibold rounded-lg focus:outline-none'
+                        onClick={() => setShowModal(false)}
+                    >
+                        Cancelar
+                    </button>
+
+                    <button
+                        className='py-1 px-8 bg-green-300 hover:bg-green-500 text-white font-semibold rounded-lg focus:outline-none'
+                        onClick={handleSaveChanges}
+                    >
+                        Guardar
+                    </button>
+                </ModalConfirmation>
+            )}
+            <div className="flex justify-center">
+                <div className="flex-wrap w-[90%] lg:w-[98%] mt-[5%] lg:mt-[2%] mb-4 justify-center">
+                    <div className="flex-wrap rounded-[2.5rem] bg-[#E3E3E3] min-h-96 pb-2 justify-center">
+                        {/* Contenedor de la imagen de modalidad */}
+                        <div className="relative w-full h-56 lg:h-80 rounded-t-[2.5rem] overflow-hidden">
+                            <img 
+                                src={`${apiUrl + solicitud?.modalidad.imagen}`} 
+                                alt="Modalidad" 
+                                className="w-full h-full object-cover" 
+                            />
+                            <div className="absolute inset-0 bg-gray-600 bg-opacity-75 rounded-t-[2.5rem]"></div>
+                            <div className="absolute flex flex-col items-center justify-center top-[10%] space-y-4 lg:space-y-8 w-full text-center text-white">
+                                
+                                <span className="text-base lg:text-xl font-semibold uppercase"
+                                    style={{
+                                        textShadow: `
+                                        1px 1px 0 black, 
+                                        -1px 1px 0 black, 
+                                        1px -1px 0 black, 
+                                        -1px -1px 0 black,
+                                        2px 2px 0 black, 
+                                        -2px 2px 0 black, 
+                                        2px -2px 0 black, 
+                                        -2px -2px 0 black
+                                        `
+                                    }} 
+                                >
+                                    Modalidad:
+                                </span>
+                                
+                                <span className="text-lg lg:text-2xl uppercase font-bold font-sans break-words whitespace-normal overflow-hidden text-ellipsis px-4 max-w-full"
+                                    style={{
+                                        textShadow: `
+                                        1px 1px 0 #B91C1C, 
+                                        -1px 1px 0 #B91C1C, 
+                                        1px -1px 0 #B91C1C, 
+                                        -1px -1px 0 #B91C1C,
+                                        2px 2px 0 #B91C1C, 
+                                        -2px 2px 0 #B91C1C, 
+                                        2px -2px 0 #B91C1C, 
+                                        -2px -2px 0 #B91C1C
+                                        `
+                                    }}    
+                                >
+                                    "{solicitud?.modalidad.nombre}"
+                                </span>
+                                
+                                <span className="text-base lg:text-lg font-semibold break-words whitespace-normal overflow-hidden text-ellipsis px-4 max-w-full"
+                                    style={{
+                                        textShadow: `
+                                        0.5px 0.5px 0 black, 
+                                        -0.5px 0.5px 0 black, 
+                                        0.5px -0.5px 0 black, 
+                                        -0.5px -0.5px 0 black,
+                                        1px 1px 0 black, 
+                                        -1px 1px 0 black, 
+                                        1px -1px 0 black, 
+                                        -1px -1px 0 black
+                                        `
+                                    }}                                 
+                                >
+                                    {solicitud?.modalidad.descripcion}
+                                </span>
+                                
+                                <span className="uppercase text-lg lg:text-xl font-semibold break-words whitespace-normal overflow-hidden px-4 max-w-full"
+                                    style={{
+                                        textShadow: `
+                                        1px 1px 0 black, 
+                                        -1px 1px 0 black, 
+                                        1px -1px 0 black, 
+                                        -1px -1px 0 black,
+                                        2px 2px 0 black, 
+                                        -2px 2px 0 black, 
+                                        2px -2px 0 black, 
+                                        -2px -2px 0 black
+                                        `
+                                    }} 
+                                >
+                                    $ {
+                                        solicitud?.modalidad.monto_maximo.toLocaleString('es-MX', {
+                                            minimumFractionDigits: 2, // Número mínimo de decimales
+                                            maximumFractionDigits: 2, // Número máximo de decimales
+                                        })
+                                        
+                                    } MXN
+                                </span>
+                            </div>
+                        </div>
+                        {/* Contenedor con la información del solicitante */}
+                        <div className="flex flex-col items-center justify-center w-auto h-auto m-4 p-2 ring-2 ring-black rounded-xl">
+                            <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                <h1>Datos del solicitante</h1>
+                            </div>
+                            {/* Contenedor con la información personal del solicitante */}
+                            <div className="text-center text-lg lg:text-2xl text-[var(--principal-mf)] font-semibold my-2 underline">
+                                <h1>Informacion personal</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2">
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Nombre
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.nombre || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Apellido Paterno
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.ap_paterno || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Apellido Materno
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.ap_materno || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Sexo
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.sexo ? (solicitud.solicitante.sexo === 'M' ? 'Masculino' : solicitud.solicitante.sexo === 'F' ? 'Femenino' : 'Otro' ) : "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Telefono
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.telefono || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Correo electronico
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitesce-normal">
+                                        {solicitud?.solicitante.email || "(N/A)"}
+                                    </span>
+                                </div>
+                            </div>
+                            {/* Contenedor con la información de direccion del solicitante */}
+                            <div className="text-center text-lg lg:text-2xl text-[var(--principal-mf)] font-semibold my-2 underline">
+                                <h1>Dirección</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2">
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Dirección
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.direccion || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Estado
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.municipio?.estado.nombre || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Municipio
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.municipio?.nombre || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Codigo Postal
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.codigo_postal || "(N/A)"}
+                                    </span>
+                                </div>
+                            </div>
+                            {/* Contenedor con la información de identificacion del solicitante */}
+                            <div className="text-center text-lg lg:text-2xl text-[var(--principal-mf)] font-semibold my-2 underline">
+                                <h1>Información de identificación</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2">
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        RFC
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.RFC || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        CURP
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.curp || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        INE
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                    
+                                        {((solicitud?.solicitante.INE !== null) && (solicitud?.solicitante.INE !== undefined)) ? 
+                                            (<a href={apiUrl + solicitud?.solicitante.INE} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
+                                                Ver archivo
+                                            </a>)
+                                        : ("(N/A)")
+                                        }
+                                    </span>
+                                </div>
+                            </div>
+                            {/* Contenedor con la información de identificacion del solicitante */}
+                            <div className="text-center text-lg lg:text-2xl text-[var(--principal-mf)] font-semibold my-2 underline">
+                                <h1>Datos bancarios</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2">
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Nombre del banco
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.datos_bancarios?.nombre_banco || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Cuenta bancaria
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.datos_bancarios?.cuenta_bancaria || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Clave bancaria
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.datos_bancarios?.clabe_bancaria || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Codigo Postal Fiscal
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.datos_bancarios?.codigo_postal_fiscal || "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Regimen
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.solicitante.datos_bancarios?.regimen ? regimen(solicitud?.solicitante.datos_bancarios?.regimen) : "(N/A)"}
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Estado de cuenta
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                    
+                                        {((solicitud?.solicitante.datos_bancarios?.doc_estado_cuenta !== null) && (solicitud?.solicitante.datos_bancarios?.doc_estado_cuenta !== undefined)) ? 
+                                            (<a href={apiUrl + solicitud?.solicitante.datos_bancarios?.doc_estado_cuenta} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
+                                                Ver archivo
+                                            </a>)
+                                        : ("(N/A)")
+                                        }
+                                    </span>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 my-2 sm:w-56">
+                                    <span className="text-center font-bold text-[var(--principal-mf)]">
+                                        Constancia de situación fiscal
+                                    </span>
+                                    <span className="text-center break-words overflow-hidden text-ellipsis whitespace-normal">
+                                    
+                                        {((solicitud?.solicitante.datos_bancarios?.doc_constancia_sat !== null) && (solicitud?.solicitante.datos_bancarios?.doc_constancia_sat !== undefined)) ? 
+                                            (<a href={apiUrl + solicitud?.solicitante.datos_bancarios?.doc_constancia_sat} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
+                                                Ver archivo
+                                            </a>)
+                                        : ("(N/A)")
+                                        }
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Contenedor del formulario*/}
+                        <div className="flex flex-col items-center justify-center w-auto h-auto m-4 p-2 ring-2 ring-black rounded-xl">
+
+                        {
+                            Object.values(solicitud?.formulario?.secciones || {}).map((seccion, key) => (
+                                <>
+                                    <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                        <h1>{seccion.nombre}</h1>
+                                    </div>
+                                    <div key={key} className="flex flex-wrap justify-center p-2 ">
+                                        {/* Elementos de la seccion */}
+                                        {Object.values(seccion?.elementos || {}).map((elemento, key) =>(
+                                            elemento.tipo !== "documento" ? (
+                                                <div key={key} className="flex flex-col items-center w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] bg-white rounded-2xl">
+                                                    <span className="font-semibold text-start break-words overflow-hidden text-ellipsis whitespace-normal">
+                                                        {elemento.nombre}
+                                                    </span>
+                                                    <span className="font-medium text-start break-words overflow-hidden text-ellipsis whitespace-normal">
+                                                        {elemento.respuesta?.valor || "(N/A)"}
+                                                    </span>
+                                                </div>
+                                            ) : (
+                                                <div key={key} 
+                                                    className={`flex flex-col items-center w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] bg-white rounded-2xl ring-4 ring-gray-500
+                                                    ${elemento.respuesta?.valor && (elemento.respuesta?.status === "revisando" ? 'ring-gray-500' : elemento.respuesta?.status === "invalido" ? 'ring-red-500': 'ring-green-400' )}`}
+                                                >
+                                                    <span className="font-semibold text-start break-words overflow-hidden text-ellipsis whitespace-normal">
+                                                        {elemento.nombre}
+                                                    </span>
+                                                    {elemento.respuesta?.valor ? (
+                                                        <>
+                                                            <div className="flex justify-center items-center w-full my-4 mx-2">
+                                                                <a href={`${apiUrl + elemento.respuesta?.valor}`} target="_blank" rel="noopener noreferrer" className="p-2 bg-[var(--informacion-f)] text-white uppercase rounded-lg text-xs font-semibold">
+                                                                    VER DOCUMENTO
+                                                                </a>
+                                                            </div>
+                                                            <span className="font-semibold text-[var(--principal-f)]">
+                                                                Estatus
+                                                            </span>
+                                                            <div className="flex justify-center items-center w-full my-4 mx-2">
+                                                                <select 
+                                                                    className={`p-2 uppercase rounded-lg text-xs px-8 bg-white font-bold
+                                                                    ${elemento.respuesta?.status === "revisando" ? 'text-gray-600' : elemento.respuesta?.status === "invalido" ? 'text-red-600' : 'text-green-600'} :`}
+                                                                    value={elemento.respuesta?.status}
+                                                                    onChange={(e) => handleStatusDocumentChange(seccion.id, elemento.id, e.target.value)}
+                                                                >
+                                                                    <option key="revisando" value="revisando">
+                                                                        En revisión
+                                                                    </option>
+                                                                    <option key="invalido" value="invalido">
+                                                                        Inválido
+                                                                    </option>
+                                                                    <option key="valido" value="valido" >
+                                                                        Válido
+                                                                    </option>
+                                                                </select>
+                                                            </div>
+                                                            <span className="font-semibold text-[var(--principal-f)]">
+                                                                Retroalimentación
+                                                            </span>
+                                                            <div className="flex justify-center items-center w-full my-4 mx-2">
+                                                                <textarea
+                                                                    type="text"
+                                                                    id="descripcion"
+                                                                    value={elemento.respuesta?.observacion || ""}
+                                                                    onChange={(e) => handleObservationDocumentChange(seccion.id, elemento.id, e.target.value)}
+                                                                    className="p-2 rounded-lg text-base bg-white font-semibold w-[90%]"
+                                                                />
+                                                            </div>
+                                                        </>
+                                                    ) : (
+                                                        <span className="font-semibold mt-5">
+                                                            El solicitante no ha subido su {elemento?.nombre}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            ))
+                                        )}
+                                    </div>
+                                </>
+                            ))
+                        }
+                            <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                <h1>Monto solicitado</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2 ">
+                                <div className="flex flex-row items-center justify-center space-x-2 w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] bg-white rounded-2xl">
+                                    <span className="font-bold text-start text-lg break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        $
+                                    </span>
+                                    <span className="font-bold text-start text-lg break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        {solicitud?.monto_solicitado.toLocaleString('es-MX', {
+                                            minimumFractionDigits: 2, // Número mínimo de decimales
+                                            maximumFractionDigits: 2, // Número máximo de decimales
+                                        })}
+                                    </span>
+                                    <span className="font-bold text-start text-lg break-words overflow-hidden text-ellipsis whitespace-normal">
+                                        MXN
+                                    </span>
+                                </div>
+                            </div>
+                            
+                        </div>
+                        {/* Contenedor del convenio y minuta*/}
+                        <div className="flex flex-col items-center justify-center w-auto h-auto m-4 p-2 ring-2 ring-black rounded-xl">
+                            <div className="flex flex-wrap justify-center p-2 ">
+                                <div className="flex flex-col items-center w-full p-2 sm:w-96 lg:w-[27rem]">
+                                    <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                        <h1>Convenio</h1>
+                                    </div>
+                                    <div
+                                        className="flex flex-col items-center w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] bg-white rounded-2xl"
+                                    >
+                                        {solicitud?.convenio ? (<div className="flex justify-center items-center w-full my-4 mx-2">
+                                            <a href={`${apiUrl + solicitud?.convenio}`} target="_blank" rel="noopener noreferrer" className="p-2 bg-[var(--informacion-f)] text-white uppercase rounded-lg text-xs font-semibold">
+                                                VER DOCUMENTO
+                                            </a>
+                                        </div>) : (
+                                            <span className="font-semibold">
+                                                No hay convenio subido
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                                <div className="flex flex-col items-center w-full p-2 sm:w-96 lg:w-[27rem]">
+                                    <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                        <h1>Minuta</h1>
+                                    </div>
+                                    <div
+                                        className="flex flex-col items-center w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] bg-white rounded-2xl"
+                                    >
+                                        {solicitud?.minuta ? (<div className="flex justify-center items-center w-full my-4 mx-2">
+                                            <a href={`${apiUrl + solicitud?.minuta?.archivo}`} target="_blank" rel="noopener noreferrer" className="p-2 bg-[var(--informacion-f)] text-white uppercase rounded-lg text-xs font-semibold">
+                                                VER DOCUMENTO
+                                            </a>
+                                        </div>) : (
+                                            <span className="font-semibold">
+                                                No hay minuta subida
+                                            </span>
+                                        )}
+                                        <span className="font-semibold text-[var(--principal-f)] mt-3">
+                                            {solicitud?.minuta ? "Actualizar " : "Subir "} minuta
+                                        </span>
+                                        <input 
+                                            id="inputArchivoMinuta"
+                                            name="inputArchivoMinuta"
+                                            type="file"
+                                            placeholder="subir archivo"
+                                            onChange={handleMinutaChange}
+                                            className="disabled:bg-gray-300 bg-white rounded-md text-sm border-0 overfl
+                                                file:bg-[var(--principal-f)] file:mr-3 file:border-1 file:text-sm file:border-[var(--principal-mf)] 
+                                                file:text-white file:rounded-l-[7px] file:py-[2px] file:px-3 mt-3 ring-1 ring-black"
+                                            
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Contenedor del monto aprobado*/}
+                        <div className="flex flex-col items-center justify-center w-auto h-auto m-4 p-2 ring-2 ring-black rounded-xl">
+                            <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                <h1>Monto aprobado</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2 ">
+                                <div className="flex flex-col bg-white w-full p-4 my-2 sm:m-6 sm:w-80 lg:w-[26rem] rounded-2xl space-y-2">
+                                    <div className="flex flex-row items-center justify-around space-x-2">
+                                        <span className="font-bold text-start text-lg break-words overflow-hidden text-ellipsis whitespace-normal">
+                                            $
+                                        </span>
+                                        <input 
+                                            id="inputMontoAprobado"
+                                            name="inputMontoAprobado"
+                                            type="number"
+                                            value={montoAprobado || ""}
+                                            placeholder="Ingresa el monto aprobado"
+                                            className="disabled:bg-gray-300 ring-1 ring-black focus:ring-2 focus:ring-inset focus:ring-[var(--principal-f)] border-none rounded-lg text-sm min-w-56"
+                                            onChange={(e) => setMontoAprobado(e.target.value)}
+                                        />
+                                        <span className="font-bold text-start text-lg break-words overflow-hidden text-ellipsis whitespace-normal">
+                                            MXN
+                                        </span>
+                                    </div>
+                                    {montoAprobado > solicitud?.modalidad.monto_maximo && (
+                                        <span className="font-medium text-center text-sm break-words overflow-hidden text-ellipsis whitespace-norma text-red-500">
+                                            El monto aprobado excede el monto maximo de la modalidad
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                            <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                <h1>Observación</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2 w-full">
+                                <div className="flex flex-col bg-white w-full p-4 my-2 sm:m-6 rounded-2xl space-y-2">
+                                    <textarea
+                                        id="inputDescripcion"
+                                        name="inputDescripcion"
+                                        type="text"
+                                        value={observacion || ""}
+                                        placeholder="Ingresa una observación a la solicitud"
+                                        className="disabled:bg-gray-300 ring-1 ring-black focus:ring-2 focus:ring-inset focus:ring-[var(--principal-f)] border-none rounded-lg text-sm min-w-56"
+                                        onChange={(e) => setObservacion(e.target.value)}
+                                    />
+                                </div>
+                            </div>
+                            <div className="uppercase font-black text-center text-lg lg:text-2xl text-[var(--principal-f)] my-2">
+                                <h1>Estatus de la solicitud</h1>
+                            </div>
+                            <div className="flex flex-wrap justify-center p-2 ">
+                                <div className="flex flex-col w-full sm:w-80 lg:w-[26rem] rounded-2xl space-y-2">
+                                    <div className="flex justify-center items-center w-full my-2 mx-2">
+                                        <select
+                                            id="inputDescripcion"
+                                            name="inputDescripcion"
+                                            value={status || ""}
+                                            className={`p-2 uppercase rounded-lg text-3x1 px-8 bg-white font-bold ring-2 ring-gray-600 text-gray-600
+                                                ${status === "Rechazado" ? 'text-red-600 ring-red-600' : status === "Aprobado" ? 'text-green-600 ring-green-600' : ''}`}
+                                            onChange={(e) => setStatus(e.target.value)}
+                                        >
+                                            <option value="Pendiente">Pendiente</option>
+                                            <option value="Rechazado">Rechazado</option>
+                                            <option value="Aprobado">Aprobado</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>                            
+                        </div>
+                        {/* Contenedor de las acciones*/}
+                        <div className="flex flex-row items-center w-auto h-auto m-4 p-2 justify-around">
+                            <button
+                                type="button"
+                                className='py-1 px-6 bg-red-300 hover:bg-red-500 text-white text-xl font-semibold rounded-lg focus:outline-none'
+                                onClick={() => navigate('/solicitudes')}
+                            >
+                                Regresar
+                            </button>
+                            <button
+                                type="button"
+                                className="py-1 px-6 bg-green-300 hover:bg-green-500 text-white text-lg font-semibold rounded-lg focus:outline-none"
+                                onClick={() => setShowModal(true)}
+                            >
+                                Guardar cambios
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/MenuColumnas.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/MenuColumnas.jsx
index e148010..9ac0e07 100644
--- a/cosiap_frontend/src/components/SolicitudesAdmin/MenuColumnas.jsx
+++ b/cosiap_frontend/src/components/SolicitudesAdmin/MenuColumnas.jsx
@@ -46,19 +46,21 @@ export default function MenuColumnas( {columnas, columnasOcultas, setColumnasOcu
                     </div>
                     <div className="flex-row overflow-y-auto h-64 space-y-3 px-3 uppercase font-semibold">
                         {Object.entries(columnas).map(([key, value], index) => (
-                            <div key={key} className="flex justify-start text-sm">
-                                <label className="inline-flex items-center me-5 cursor-pointer">
-                                <input type="checkbox"
-                                    checked={!columnasOcultas.includes(key)} // Mostrar el checkbox marcado si la columna no está oculta
-                                    onChange={() => handleToggleColumn(key)} // Maneja el cambio al seleccionar/deseleccionar
-                                    className="sr-only peer"
-                                />
-                                <div className="relative w-11 h-6 bg-gray-200 rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--principal-mf)]"></div>
-                                </label>
-                                <span className="">
-                                    {key === 'modalidad__nombre' ? "Modalidad" : key === 'solicitante__nombre' ? "Solicitante" : key === 'timestamp' ? "Fecha" : value}
-                                </span>
-                            </div>
+                            (!['solicitante__ap_materno','solicitante__ap_paterno'].includes(key) && (
+                                <div key={key} className="flex justify-start text-sm">
+                                    <label className="inline-flex items-center me-5 cursor-pointer">
+                                    <input type="checkbox"
+                                        checked={!columnasOcultas.includes(key)} // Mostrar el checkbox marcado si la columna no está oculta
+                                        onChange={() => handleToggleColumn(key)} // Maneja el cambio al seleccionar/deseleccionar
+                                        className="sr-only peer"
+                                    />
+                                    <div className="relative w-11 h-6 bg-gray-200 rounded-full peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--principal-mf)]"></div>
+                                    </label>
+                                    <span className="">
+                                        {key === 'modalidad__nombre' ? "Modalidad" : key === 'solicitante__nombre' ? "Solicitante" : key === 'timestamp' ? "Fecha" : value}
+                                    </span>
+                                </div>
+                            ))
                         ))}
                     </div>
                 </div>
diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/MenuFiltros.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/MenuFiltros.jsx
index cc0daef..7da5eb0 100644
--- a/cosiap_frontend/src/components/SolicitudesAdmin/MenuFiltros.jsx
+++ b/cosiap_frontend/src/components/SolicitudesAdmin/MenuFiltros.jsx
@@ -83,7 +83,7 @@ export default function MenuFiltros({ filtros, setFiltros, columnasOcultas, menu
                     </div>
                     <div className="flex-row max-h-44 space-y-4 px-3 uppercase font-semibold relative overflow-y-auto">
                         {filtros.map((filtro, key) => (
-                            !columnasOcultas.includes(filtro.campo) && (
+                            (!columnasOcultas.includes(filtro.campo) && !['solicitante__ap_materno','solicitante__ap_paterno'].includes(filtro.campo)) && (
                                 <div 
                                     key={key} 
                                     className={`relative flex cursor-pointer select-none justify-between text-sm ${mostrarSubmenu === filtro.campo && "bg-slate-200"}`}
diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/MenuReportes.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/MenuReportes.jsx
index 6981037..d63f464 100644
--- a/cosiap_frontend/src/components/SolicitudesAdmin/MenuReportes.jsx
+++ b/cosiap_frontend/src/components/SolicitudesAdmin/MenuReportes.jsx
@@ -11,7 +11,7 @@ export default function MenuReportes( {reportes, reporteAplicado, enableSectionR
             <div ref={menuRef} className="absolute right-4 lg:right-60 w-[60%] sm:w-3/12 lg:w-1/6 mt-[7.8rem] sm:mt-[9rem] lg:mt-[8.5rem] z-10">
                 <div className="space-y-2 px-2 pb-3 pt-2 bg-white mt-2 rounded-2xl shadow-gray-500 shadow-2xl  ring-1 ring-[var(--principal-f)]">
                     <div className="flex text-center text-sm p-2 border-b-2 border-gray-400 text-gray-500">
-                        <div className="flex flex-col space-y-2 w-full overflow-y-auto max-h-32">
+                        <div className="flex flex-col space-y-2 overflow-y-auto max-h-32">
                             {reportes.length === 0 ? (
                                 <span className="font-semibold">
                                     No hay reportes registrados. Crea uno nuevo.
@@ -27,7 +27,7 @@ export default function MenuReportes( {reportes, reporteAplicado, enableSectionR
                                         <span className="material-symbols-outlined text-sm">
                                             settings
                                         </span>
-                                        <span className="font-semibold text-start">
+                                        <span className="font-semibold text-start break-words overflow-hidden text-ellipsis whitespace-normal">
                                             {reporte.nombre}
                                         </span>
                                     </div>
diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/Solicitudes.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/Solicitudes.jsx
index be3654d..66cba44 100644
--- a/cosiap_frontend/src/components/SolicitudesAdmin/Solicitudes.jsx
+++ b/cosiap_frontend/src/components/SolicitudesAdmin/Solicitudes.jsx
@@ -8,8 +8,10 @@ import MenuFiltros from "./MenuFiltros";
 import Alert from "../common/ui/Alert";
 import MenuReportes from "./MenuReportes";
 import ModalConfirmation from "../common/ui/Modals/ModalConfirmation";
+import { useNavigate } from "react-router-dom";
 
 export default function Solicitudes( {setViewPageLoader} ){
+    
     const [solicitudes, setSolicitudes] = useState([]);
     const [columnas, setColumnas] = useState({});
     const [columnasOcultas, setColumnasOcultas] = useState([]);
@@ -51,6 +53,14 @@ export default function Solicitudes( {setViewPageLoader} ){
 
     const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
 
+    //Estado para lanzar el submenu de cada solicitud
+    const [selectedSolicitudId, setSelectedSolicitudId] = useState(null);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+    
+    //Ref para detectar clicks derechos fuera de las solicitudes
+    const solicitudRef = useRef(null);
+    const menuOpcionesRef = useRef(null);
+
     function Regimen (value) {
         switch (value) {
             case "1":
@@ -141,6 +151,12 @@ export default function Solicitudes( {setViewPageLoader} ){
             buttonMenuReportesRef.current && !buttonMenuReportesRef.current.contains(event.target)){
                 setViewMenuReportes(false);
             }
+
+            //Declaramos nulo selectedSolicitudId si no se hace click dentro del menu de opciones o de las solicitudes
+            if (solicitudRef.current && !solicitudRef.current.contains(event.target) &&
+            menuOpcionesRef.current && !menuOpcionesRef.current.contains(event.target)){
+                setSelectedSolicitudId(null);
+            }
         }
 
         // Añade el event listener para detectar clics fuera de los elementos
@@ -342,9 +358,13 @@ export default function Solicitudes( {setViewPageLoader} ){
                 }                                          
             } else if (html_type === "textInput") {
                 if (lookups.icontains) {
-                    solicitudesFiltradas = solicitudesFiltradas.filter(solicitud =>
-                        solicitud[campo].toLowerCase().includes(lookups.icontains.toLowerCase())
-                    );
+                    solicitudesFiltradas = solicitudesFiltradas.filter(solicitud => {
+                        if (campo === "solicitante__nombre"){//Al haber unido el nombre y apellidos en la columna de solicitante
+                            return (solicitud[campo]+ " " + solicitud["solicitante__ap_paterno"] + " " + (solicitud["solicitante__ap_materno"] || "")).toLowerCase().includes(lookups.icontains.toLowerCase())
+                        }else{
+                            return solicitud[campo].toLowerCase().includes(lookups.icontains.toLowerCase())
+                        }
+                    });
                     // Agregar a la lista de filtros aplicados
                     nuevosFiltrosAplicados.push({ filtro });
                 }
@@ -359,9 +379,14 @@ export default function Solicitudes( {setViewPageLoader} ){
         });
         // Aplicamos el término de búsqueda a todos los campos de cada solicitud
         if (searchTerm !== '' && searchTerm !==null) {
-            solicitudesFiltradas = solicitudesFiltradas.filter(solicitud => {
-                return Object.values(solicitud).some(value => 
-                    value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+            solicitudesFiltradas = solicitudesFiltradas.filter(solicitud => {  
+                return (
+                    // Verificar si el término de búsqueda coincide en cualquier campo
+                    Object.values(solicitud).some(value =>
+                        value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+                    ) ||
+                    // Verificar coincidencia específica en la columna "Solicitante"
+                    (solicitud.solicitante__nombre+ " " + solicitud.solicitante__ap_paterno+ " " + (solicitud.solicitante__ap_materno || ""))?.toString().toLowerCase().includes(searchTerm.toLowerCase())
                 );
             });
         }
@@ -502,9 +527,6 @@ export default function Solicitudes( {setViewPageLoader} ){
 
             console.log('Actualización exitosa', response)
 
-            //Actualizamos las solicitudes
-            const responseSolicitudes = await api.solicitudes.get();
-
             // Cambiamos en el arreglo de solicitudes, el registro
             ChangeSolicitud(editingField.id_solicitud, editingField.key, editingValue)
 
@@ -725,6 +747,63 @@ export default function Solicitudes( {setViewPageLoader} ){
         }
     }),[reporteAplicado])
 
+    const handleRightClick = (e, id) => {
+        e.preventDefault(); // Bloquea el menú contextual del navegador
+        setSelectedSolicitudId(id);
+        setMenuPosition({ x: e.pageX, y: e.pageY });
+
+        // Declaramos las dimensiones que tiene el menu
+        const menuWidth = 48; // Ancho estimado del menú en píxeles
+        const menuHeight = 32; // Alto estimado del menú en píxeles
+
+        // Determinar posición inicial en base al clic
+        let x = e.pageX;
+        let y = e.pageY;
+
+        if (window.innerWidth <= 768) {
+            // Pantallas pequeñas: centra el menú horizontalmente
+            x = (window.innerWidth - menuWidth) / 2;
+        } else {
+            // Ajuste para no desbordar a la derecha en pantallas grandes
+            if (x + menuWidth > window.innerWidth) {
+                x = window.innerWidth - menuWidth;
+            }
+        }
+
+        // Ajuste para no desbordar hacia abajo
+        if (y + menuHeight > window.innerHeight) {
+            y = window.innerHeight - menuHeight;
+        }
+
+        // Establecer la posición final del menú
+        setMenuPosition({ x, y });
+    };
+
+    const handleEliminarSolicitud = async (id_solicitud) => {
+        try {
+            setViewPageLoader(true)
+            //hacemos la petición a la api para la eliminación del reporte
+            const response = await api.solicitudes.delete(id_solicitud);
+            console.log('Eliminación de solicitud exitosa ', response)
+            //Reestablecemos el estado del id solicitud seleccionada
+            setSelectedSolicitudId(null);
+            //Eliminamos de los arreglos correspondientes la solicitud
+            setSolicitudes(solicitudes.filter((solicitud) => solicitud.id !== id_solicitud));
+            setSolicitudesOriginales(solicitudes.filter((solicitud) => solicitud.id !== id_solicitud));
+            //Definimos el mensaje de la alerta
+            setAlertMessage('¡Eliminacion de solicitud exitosa!');
+            setShowAlertSuccesful(true)
+        } catch (error) {
+            console.error(error)
+            //Definimos el mensaje de la alerta
+            setAlertMessage('¡Ha ocurrido un error inesperado! Vuelve a intentarlo');
+            setShowAlertError(true)
+        }finally{
+            setViewPageLoader(false);
+        }
+    };
+    
+
     return (
         <>
             {showAlertSuccesful && (
@@ -745,125 +824,203 @@ export default function Solicitudes( {setViewPageLoader} ){
                     setIsVisible={setShowAlertError}
                 />
             )}
-            {viewMenuColumnas && (
-                <MenuColumnas columnas={columnas} columnasOcultas={columnasOcultas} setColumnasOcultas={setColumnasOcultas} menuRef={menuColumnasRef} />
-            )}
-            {viewMenuFiltros && (
-                <MenuFiltros filtros={filtros} setFiltros={setFiltros} columnasOcultas={columnasOcultas} menuRef={menuFiltrosRef} solicitudes={solicitudesOriginales}/>
-            )}
-
-            {viewMenuReportes && (
-                 <MenuReportes reportes={reportes} reporteAplicado={reporteAplicado} setReporteAplicado={setReporteAplicado} enableSectionReportes={enableSectionReportes} setEnableSectionReportes={setEnableSectionReportes} menuRef={menuReportesRef} setViewMenu={setViewMenuReportes}/>
-            )}
-            <div className="flex justify-center">
-                <div className="flex-wrap w-[90%] lg:w-[98%] mt-[5%] lg:mt-[2%] justify-center">
-                    <SectionContainer title="Solicitudes">
-                        <div className="flex flex-col w-full">
-                            <div className="flex justify-around m-4 mx-6 space-x-2">
-                                <div className="grow w-1/6">
-                                    <span className="material-symbols-outlined absolute z-10 leading-snug font-extrabold text-center text-gray-600 bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-2">
-                                        search
-                                    </span>
-                                    <input 
-                                        type="text" 
-                                        id="search" 
-                                        placeholder="Search" 
-                                        className="relative z-0 border-0 px-3 py-2 font-semibold placeholder-gray-600 bg-white rounded-full text-base shadow-lg focus:ring-2 focus:ring-[var(--principal-f)] w-full pl-10"
-                                        onChange={handleSearch}
-                                        value={searchTerm}
-                                    />
+            
+            <>
+                {viewMenuColumnas && (
+                    <MenuColumnas columnas={columnas} columnasOcultas={columnasOcultas} setColumnasOcultas={setColumnasOcultas} menuRef={menuColumnasRef} />
+                )}
+                {viewMenuFiltros && (
+                    <MenuFiltros filtros={filtros} setFiltros={setFiltros} columnasOcultas={columnasOcultas} menuRef={menuFiltrosRef} solicitudes={solicitudesOriginales}/>
+                )}
+                {viewMenuReportes && (
+                    <MenuReportes reportes={reportes} reporteAplicado={reporteAplicado} setReporteAplicado={setReporteAplicado} enableSectionReportes={enableSectionReportes} setEnableSectionReportes={setEnableSectionReportes} menuRef={menuReportesRef} setViewMenu={setViewMenuReportes}/>
+                )}
+                <div className="flex justify-center">
+                    <div className="flex-wrap w-[90%] lg:w-[98%] mt-[5%] lg:mt-[2%] justify-center">
+                        <SectionContainer title="Solicitudes">
+                            <div className="flex flex-col w-full">
+                                <div className="flex justify-around m-4 mx-6 space-x-2">
+                                    <div className="grow w-1/6">
+                                        <span className="material-symbols-outlined absolute z-10 leading-snug font-extrabold text-center text-gray-600 bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-2">
+                                            search
+                                        </span>
+                                        <input 
+                                            type="text" 
+                                            id="search" 
+                                            placeholder="Search" 
+                                            className="relative z-0 border-0 px-3 py-2 font-semibold placeholder-gray-600 bg-white rounded-full text-base shadow-lg focus:ring-2 focus:ring-[var(--principal-f)] w-full pl-10"
+                                            onChange={handleSearch}
+                                            value={searchTerm}
+                                        />
+                                    </div>
+                                    <Button nameIcon="summarize" text="Reportes" onClick={() => setViewMenuReportes(!viewMenuReportes)} buttonRef={buttonMenuReportesRef}/>
+                                    <Button nameIcon="tune" text="Filtros" onClick={() => setViewMenuFiltros(!viewMenuFiltros)} buttonRef={buttonMenuFiltrosRef}/>
+                                    <Button nameIcon="splitscreen_right" text="Columnas" onClick={() => setViewMenuColumnas(!viewMenuColumnas)} buttonRef={buttonMenuColumnasRef}/>
                                 </div>
-                                <Button nameIcon="summarize" text="Reportes" onClick={() => setViewMenuReportes(!viewMenuReportes)} buttonRef={buttonMenuReportesRef}/>
-                                <Button nameIcon="tune" text="Filtros" onClick={() => setViewMenuFiltros(!viewMenuFiltros)} buttonRef={buttonMenuFiltrosRef}/>
-                                <Button nameIcon="splitscreen_right" text="Columnas" onClick={() => setViewMenuColumnas(!viewMenuColumnas)} buttonRef={buttonMenuColumnasRef}/>
-                            </div>
-                            {enableSectionReportes && (
-                                <SectionReportes reporteAplicado={reporteAplicado} setReporteAplicado={setReporteAplicado} enableSection={enableSectionReportes} setEnableSection = {setEnableSectionReportes} handleCrearReporte={handleCrearReporte} handleActualizarReporte={handleActualizarReporte} handleBorrarReporte={handleBorrarReporte} handleExportarReporte={handleExportarReporte}/>
-                            )}
-                            <ShowFilters filtrosAplicados={filtrosAplicados} setFiltrosAplicados={setFiltrosAplicados} deleteFilter={deleteFilter} />
-                            <div className="flex w-full justify-center pb-3 sm:pb-4">
-                                <div className="overflow-x-auto max-w-[97%] rounded-md">
-                                    <table className="w-full mb-6">
-                                        <thead className="my-60">
-                                            <DragDropContext onDragEnd={handleDragEnd}>
-                                                <Droppable droppableId="columns" direction="horizontal">
-                                                    {(provided) => (
-                                                        <tr
-                                                            className="text-center text-black text-sm uppercase"
-                                                            {...provided.droppableProps}
-                                                            ref={provided.innerRef}
-                                                        >
-                                                            {Object.entries(columnas).map(([key, value], index) => (
-                                                                !columnasOcultas.includes(key) && (
-                                                                    <Draggable key={key} draggableId={key} index={index}>
-                                                                        {(provided, snapshot) => (
-                                                                            <th
-                                                                                ref={provided.innerRef}
-                                                                                {...provided.draggableProps}
-                                                                                {...provided.dragHandleProps}
-                                                                                className={`bg-[var(--principal-c)] min-w-48 font-semibold py-4 transition-colors duration-300 ${
-                                                                                    snapshot.isDragging ? 'ring-4 ring-[var(--principal-mf)] rounded-lg' : 'bg-[var(--principal-c)]'
-                                                                                }`}
-                                                                            >
-                                                                                <div className="flex justify-center items-center space-x-3">
-                                                                                    <span>
-                                                                                        {key === 'modalidad__nombre' ? "Modalidad" : key === 'solicitante__nombre' ? "Solicitante" : key === 'timestamp' ? "Fecha" : value}
-                                                                                    </span>
-                                                                                    
-                                                                                    <span 
-                                                                                        className="material-symbols-outlined cursor-pointer"
-                                                                                        onClick={() => sortSolicitudes(key)}  // Ordenar al hacer clic
-                                                                                    >
-                                                                                        {sortConfig.key === key ? (
-                                                                                            sortConfig.direction === 'ascending' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
-                                                                                        ) : (
-                                                                                            'unfold_more'
-                                                                                        )}
-                                                                                    </span>
-                                                                                </div>
-                                                                            </th>
-                                                                        )}
-                                                                    </Draggable>
-                                                                )
-                                                            ))}
-                                                            {provided.placeholder}
-                                                        </tr>
-                                                    )}
-                                                </Droppable>
-                                            </DragDropContext>
-                                        </thead>
-                                        <tbody>
-                                            {solicitudes.map((solicitud, index) => (
-                                                <tr key={index} className="text-sm">
-                                                    {Object.entries(solicitud).map(([key, value], i) => (
-                                                        !columnasOcultas.includes(key) && (
-                                                            <td 
-                                                                key={i} 
-                                                                className="bg-[#E3E3E3] text-center font-normal px-4 py-4 border-b-2 border-[var(--principal)] max-w-48 text-wrap cursor-pointer"
-                                                                onDoubleClick={AvailablesFieldsToEdit.includes(key) ? () => handleDoubleClick(solicitud.id, key, value) : null} //Le agregamos la funcion, solamente a los compos que se pueden editar
+                                {enableSectionReportes && (
+                                    <SectionReportes reporteAplicado={reporteAplicado} setReporteAplicado={setReporteAplicado} enableSection={enableSectionReportes} setEnableSection = {setEnableSectionReportes} handleCrearReporte={handleCrearReporte} handleActualizarReporte={handleActualizarReporte} handleBorrarReporte={handleBorrarReporte} handleExportarReporte={handleExportarReporte}/>
+                                )}
+                                <ShowFilters filtrosAplicados={filtrosAplicados} setFiltrosAplicados={setFiltrosAplicados} deleteFilter={deleteFilter} />
+                                <div className="flex w-full justify-center pb-3 sm:pb-4">
+                                    <div className="overflow-x-auto max-w-[97%] rounded-md">
+                                        <table className="w-full mb-6">
+                                            <thead className="my-60">
+                                                <DragDropContext onDragEnd={handleDragEnd}>
+                                                    <Droppable droppableId="columns" direction="horizontal">
+                                                        {(provided) => (
+                                                            <tr
+                                                                className="text-center text-black text-sm uppercase"
+                                                                {...provided.droppableProps}
+                                                                ref={provided.innerRef}
                                                             >
-                                                                {editingField && editingField.id_solicitud === solicitud.id && editingField.key === key ? (
-                                                                    inputEditingField(key)
-                                                                ) : (
-                                                                    getEstiloCampo(key, value)
-                                                                )}
-                                                            </td>
-                                                        )
-                                                    ))}
-                                                </tr>
-                                            ))}
-                                        </tbody>
-                                    </table>
+                                                                {Object.entries(columnas).map(([key, value], index) => (
+                                                                    (!columnasOcultas.includes(key) && !['solicitante__ap_materno','solicitante__ap_paterno'].includes(key)) && (
+                                                                        <Draggable key={key} draggableId={key} index={index}>
+                                                                            {(provided, snapshot) => (
+                                                                                <th
+                                                                                    ref={provided.innerRef}
+                                                                                    {...provided.draggableProps}
+                                                                                    {...provided.dragHandleProps}
+                                                                                    className={`bg-[var(--principal-c)] min-w-48 font-semibold py-4 transition-colors duration-300 ${
+                                                                                        snapshot.isDragging ? 'ring-4 ring-[var(--principal-mf)] rounded-lg' : 'bg-[var(--principal-c)]'
+                                                                                    }`}
+                                                                                >
+                                                                                    <div className="flex justify-center items-center space-x-3">
+                                                                                        <span>
+                                                                                            {key === 'modalidad__nombre' ? "Modalidad" : key === 'solicitante__nombre' ? "Solicitante" : key === 'timestamp' ? "Fecha" : value}
+                                                                                        </span>
+                                                                                        
+                                                                                        <span 
+                                                                                            className="material-symbols-outlined cursor-pointer"
+                                                                                            onClick={() => sortSolicitudes(key)}  // Ordenar al hacer clic
+                                                                                        >
+                                                                                            {sortConfig.key === key ? (
+                                                                                                sortConfig.direction === 'ascending' ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+                                                                                            ) : (
+                                                                                                'unfold_more'
+                                                                                            )}
+                                                                                        </span>
+                                                                                    </div>
+                                                                                </th>
+                                                                            )}
+                                                                        </Draggable>
+                                                                    )
+                                                                ))}
+                                                                {provided.placeholder}
+                                                            </tr>
+                                                        )}
+                                                    </Droppable>
+                                                </DragDropContext>
+                                            </thead>
+                                            <tbody>
+                                                {solicitudes.map((solicitud, index) => (
+                                                    <tr key={index} className="text-sm" ref={solicitudRef}>
+                                                        {Object.entries(solicitud).map(([key, value], i) => (
+                                                            (!columnasOcultas.includes(key) && !['solicitante__ap_materno','solicitante__ap_paterno'].includes(key)) && (
+                                                                <td 
+                                                                    key={i} 
+                                                                    className={`text-center font-normal px-4 py-4 border-b-2 border-[var(--principal)] max-w-48 text-wrap cursor-pointer ${selectedSolicitudId === solicitud.id ? 'bg-gray-300 ' : 'bg-[#E3E3E3] '}`}
+                                                                    onContextMenu={(e) => handleRightClick(e, solicitud.id)}
+                                                                    onDoubleClick={AvailablesFieldsToEdit.includes(key) ? () => handleDoubleClick(solicitud.id, key, value) : null} //Le agregamos la funcion, solamente a los compos que se pueden editar
+                                                                >
+                                                                    {editingField && editingField.id_solicitud === solicitud.id && editingField.key === key ? (
+                                                                        inputEditingField(key)
+                                                                    ) : (
+                                                                        key === 'solicitante__nombre' ? (getEstiloCampo(key, value+" "+solicitud.solicitante__ap_paterno+ " "+(solicitud.solicitante__ap_materno || ""))) : (getEstiloCampo(key, value))
+                                                                    )}
+                                                                </td>
+                                                            )
+                                                        ))}
+                                                    </tr>
+                                                ))}
+                                                {/* Menu contextual para una solicitud seleccionada */}
+                                                {selectedSolicitudId && (
+                                                    <MenuOpcionesSolicitud selectedSolicitudId={selectedSolicitudId} menuPosition={menuPosition} handleEliminarSolicitud={handleEliminarSolicitud}/>
+                                                )}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    {/* Menu contextual para una solicitud seleccionada */}
+                                    {selectedSolicitudId && (
+                                        <MenuOpcionesSolicitud selectedSolicitudId={selectedSolicitudId} menuPosition={menuPosition} handleEliminarSolicitud={handleEliminarSolicitud} menuRef={menuOpcionesRef}/>
+                                    )}
                                 </div>
                             </div>
-                        </div>
-                    </SectionContainer>
+                        </SectionContainer>
+                    </div>
                 </div>
-            </div>
+            </>
+            
         </>
     );
 }
 
+const MenuOpcionesSolicitud = ( {selectedSolicitudId, menuPosition, handleEliminarSolicitud, menuRef} ) => {
+    const [showModal, setShowModal] = useState(false);
+    const navigate = useNavigate();
+
+    const handleDelete = () => {
+        setShowModal(false);
+        handleEliminarSolicitud(selectedSolicitudId);
+    };
+
+    return (
+        <div ref={menuRef}>
+            {showModal && (
+                <ModalConfirmation 
+                    nameIcon="warning"
+                    title="¿Estás seguro de que deseas eliminar esta solicitud?"
+                    description="Se eliminara de manera definitiva del sistema"
+                >
+                    <button
+                        type="button"
+                        className='py-1 px-8 bg-[var(--gris-3)] hover:bg-[var(--gris-6)] text-dark hover:text-white font-semibold rounded-lg focus:outline-none'
+                        onClick={() => setShowModal(false)}
+                    >
+                        Cancelar
+                    </button>
+
+                    <button
+                        className='py-1 px-8 bg-red-300 hover:bg-red-500 text-white font-semibold rounded-lg focus:outline-none'
+                        onClick={handleDelete}
+                    >
+                        Eliminar
+                    </button>
+                </ModalConfirmation>
+            )}
+            <div
+                ref={menuRef}
+                className={`absolute flex flex-col w-48 h-auto bg-white rounded-2xl shadow-gray-500 shadow-2xl ring-2 ring-black z-10
+                    `}
+                style={{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }}
+            >
+                <div 
+                    className="flex py-2 px-2 items-center space-x-2 cursor-pointer select-none hover:bg-gray-200 rounded-t-2xl"
+                    onClick={() => navigate(`detalles-solicitud/${selectedSolicitudId}`)}
+                >
+                    <span className="material-symbols-outlined">
+                        visibility
+                    </span>
+                    <span className="font-semibold">
+                        Ver vista detallada
+                    </span>
+                </div>
+                <div 
+                    className="flex py-2 px-2 items-center space-x-2 cursor-pointer select-none hover:bg-gray-200 rounded-b-2xl"
+                    onClick={() => setShowModal(true)}
+                >
+                    <span className="material-symbols-outlined">
+                        delete
+                    </span>
+                    <span className="font-semibold">
+                        Eliminar solicitud
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 const ShowFilters = ({filtrosAplicados, setFiltrosAplicados, deleteFilter}) => {
     function RegimenAbreviado (value) {
         switch (value) {
-- 
GitLab