From 443c9c963209942c3a097f83d607864d31c14b89 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Tue, 12 Nov 2024 14:45:07 -0600 Subject: [PATCH 1/2] Correccion de estilos, factorizacion y responsividad en pantallas chicas --- cosiap_frontend/src/App.css | 3 +- cosiap_frontend/src/App.jsx | 2 +- cosiap_frontend/src/components/Inicio.jsx | 82 +- .../SolicitudesAdmin/DetallesSolicitud.jsx | 966 ++++++++---------- .../components/admin/TablaAdministradores.jsx | 86 +- .../src/components/admin/TablaUsuarios.jsx | 78 +- .../common/layouts/LayoutBaseNavigation.jsx | 6 +- .../layouts/LayoutsNavigation/Settings.jsx | 2 +- .../MondalidadInfoContainer.jsx | 97 ++ .../components/modalidades/CrearModalidad.jsx | 9 +- .../modalidades/EditarModalidad.jsx | 7 +- .../modalidades/ListaModalidades.jsx | 110 +- .../components/modalidades/ModalidadCard.jsx | 56 +- .../components/modalidades/Modalidades.jsx | 2 +- .../{Modalidad.jsx => SolicitarModalidad.jsx} | 93 +- .../components/plantillas/CrearPlantilla.jsx | 5 +- .../components/plantillas/ListaFormatos.jsx | 52 +- .../solicitudes/HistorialSolicitudes.jsx | 7 +- .../components/solicitudes/VerSolicitud.jsx | 27 +- .../src/components/users/Perfil/Perfil.jsx | 4 +- 20 files changed, 848 insertions(+), 846 deletions(-) create mode 100644 cosiap_frontend/src/components/common/ui/SectionContainers/MondalidadInfoContainer.jsx rename cosiap_frontend/src/components/modalidades/{Modalidad.jsx => SolicitarModalidad.jsx} (83%) diff --git a/cosiap_frontend/src/App.css b/cosiap_frontend/src/App.css index ddf68e2..265fd7e 100644 --- a/cosiap_frontend/src/App.css +++ b/cosiap_frontend/src/App.css @@ -616,7 +616,6 @@ font-size: 16px; background-color: var(--gris-claro); border-radius: 12px; padding: 20px; - width: 30%; /* Toma 30% del ancho para 3 elementos por fila */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; @@ -689,7 +688,7 @@ font-size: 16px; /* Botones de acción */ .buttons-container { display: flex; - justify-content: space-between; /* Un botón a la izquierda, otro a la derecha */ + justify-content: space-around; /* Un botón a la izquierda, otro a la derecha */ width: 100%; /* El contenedor ocupa todo el ancho disponible */ margin-top: 20px; padding: 0 40px; /* Espacio a los lados del contenedor, ajusta según lo necesites */ diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx index 3f8b9ac..b2bda60 100644 --- a/cosiap_frontend/src/App.jsx +++ b/cosiap_frontend/src/App.jsx @@ -27,7 +27,7 @@ import LayoutBaseNavigation from "@/components/common/layouts/LayoutBaseNavigati import Modalidades from "@/components/modalidades/Modalidades"; import CreateModalidad from "./components/modalidades/CrearModalidad"; import EditModalidad from "./components/modalidades/EditarModalidad"; -import SolicitarModalidad from "./components/modalidades/Modalidad"; +import SolicitarModalidad from "./components/modalidades/SolicitarModalidad"; import Perfil from '@/components/users/Perfil/Perfil'; import ListaSolicitudes from "./components/solicitudes/HistorialSolicitudes"; import EditarSolicitud from "./components/solicitudes/EditarSolicitud"; diff --git a/cosiap_frontend/src/components/Inicio.jsx b/cosiap_frontend/src/components/Inicio.jsx index 7866cd9..c9597e3 100644 --- a/cosiap_frontend/src/components/Inicio.jsx +++ b/cosiap_frontend/src/components/Inicio.jsx @@ -3,62 +3,46 @@ import MainContainer from "@/components/common/utility/MainContainer"; import '@/App.css' import { useNavigate } from 'react-router-dom'; import { apiUrl } from "@/api"; +import SectionContainer from "./common/ui/SectionContainers/SectionContainer"; export default function Inicio() { const { isAdmin } = useAutenticacion(); const navigate = useNavigate(); return ( - - {isAdmin ? ( -
-
-

SISTEMA COSIAP

-

- Como Administrador podrás: -

-

-
    -
  • Gestionar las modalidades de apoyo pertenecientes a una convocatoria.
    • -
  • Gestionar usuarios (Administradores y Solicitantes)
    • -
  • Gestionar solicitudes de apoyos.
    • -
  • Gestionar reportes de solicitudes (filtros y configuraciones personalizadas)
    • -
  • Gestionar formatos personalizados para la realizacion de solicitudes.
    • -
-

- -
-
- Home Admin -
+ +
+
+ SISTEMA COSIAP +

+ {isAdmin ? "Como Administrador podrás:" : "Como solicitante podrás aspirar a un apoyo económico relacionado con una modalidad vigente en el periodo actual."} +

+
    + {isAdmin ? ( + <> +
  • Gestionar las modalidades de apoyo pertenecientes a una convocatoria.
    • +
  • Gestionar usuarios (Administradores y Solicitantes)
    • +
  • Gestionar solicitudes de apoyos.
    • +
  • Gestionar reportes de solicitudes (filtros y configuraciones personalizadas)
    • +
  • Gestionar formatos personalizados para la realizacion de solicitudes.
    • + + ) : ( + <> +
  • Existe la posibilidad de que tu solicitud sea rechazada.
    • +
  • No puedes adquirir más de dos apoyos en menos de un año.
    • + + )} +
+
- ) : ( -
-
-

SISTEMA COSIAP

-

- Como solicitante podrás aspirar a un apoyo económico relacionado con - una modalidad vigente en el periodo actual. -

-

-
    -
  • Existe la posibilidad de que tu solicitud sea rechazada.
    • -
  • No puedes adquirir más de dos apoyos en menos de un año.
    • -
-

- -
-
- Home Solicitante -
+
+ {isAdmin
- )} - +
+ ); } diff --git a/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx b/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx index 784e723..18335eb 100644 --- a/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx +++ b/cosiap_frontend/src/components/SolicitudesAdmin/DetallesSolicitud.jsx @@ -3,6 +3,7 @@ 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"; +import ModalidadInfoContainer from "../common/ui/SectionContainers/MondalidadInfoContainer"; export default function DetallesSolicitud( {setViewPageLoader} ) { const { id_solicitud } = useParams(); @@ -280,551 +281,464 @@ export default function DetallesSolicitud( {setViewPageLoader} ) { )} -
-
-
- {/* Contenedor de la imagen de modalidad */} -
- Modalidad -
-
- - - Modalidad: - - - - "{solicitud?.modalidad.nombre}" - - - - {solicitud?.modalidad.descripcion} - - - - $ { - solicitud?.modalidad.monto_maximo.toLocaleString('es-MX', { - minimumFractionDigits: 2, // Número mínimo de decimales - maximumFractionDigits: 2, // Número máximo de decimales - }) - - } MXN - -
+ + {/* Contenedor con la información del solicitante */} +
+
+

Datos del solicitante

+
+ {/* Contenedor con la información personal del solicitante */} +
+

Informacion personal

+
+
+
+ + Nombre + + + {solicitud?.solicitante.nombre || "(N/A)"} +
- {/* Contenedor con la información del solicitante */} -
-
-

Datos del solicitante

-
- {/* Contenedor con la información personal del solicitante */} -
-

Informacion personal

-
-
-
- - Nombre - - - {solicitud?.solicitante.nombre || "(N/A)"} - -
-
- - Apellido Paterno - - - {solicitud?.solicitante.ap_paterno || "(N/A)"} - -
-
- - Apellido Materno - - - {solicitud?.solicitante.ap_materno || "(N/A)"} - -
-
- - Sexo - - - {solicitud?.solicitante.sexo ? (solicitud.solicitante.sexo === 'M' ? 'Masculino' : solicitud.solicitante.sexo === 'F' ? 'Femenino' : 'Otro' ) : "(N/A)"} - -
-
- - Telefono - - - {solicitud?.solicitante.telefono || "(N/A)"} - -
-
- - Correo electronico - - - {solicitud?.solicitante.email || "(N/A)"} - -
-
- {/* Contenedor con la información de direccion del solicitante */} -
-

Dirección

-
-
-
- - Dirección - - - {solicitud?.solicitante.direccion || "(N/A)"} - -
-
- - Estado - - - {solicitud?.solicitante.municipio?.estado.nombre || "(N/A)"} - -
-
- - Municipio - - - {solicitud?.solicitante.municipio?.nombre || "(N/A)"} - -
-
- - Codigo Postal - - - {solicitud?.solicitante.codigo_postal || "(N/A)"} - -
-
- {/* Contenedor con la información de identificacion del solicitante */} -
-

Información de identificación

-
-
-
- - RFC - - - {solicitud?.solicitante.RFC || "(N/A)"} - -
-
- - CURP - - - {solicitud?.solicitante.curp || "(N/A)"} - -
-
- - INE - - - - {((solicitud?.solicitante.INE !== null) && (solicitud?.solicitante.INE !== undefined)) ? - ( - Ver archivo - ) - : ("(N/A)") - } - -
-
- {/* Contenedor con la información de identificacion del solicitante */} -
-

Datos bancarios

-
-
-
- - Nombre del banco - - - {solicitud?.solicitante.datos_bancarios?.nombre_banco || "(N/A)"} - -
-
- - Cuenta bancaria - - - {solicitud?.solicitante.datos_bancarios?.cuenta_bancaria || "(N/A)"} - -
-
- - Clave bancaria - - - {solicitud?.solicitante.datos_bancarios?.clabe_bancaria || "(N/A)"} - -
-
- - Codigo Postal Fiscal - - - {solicitud?.solicitante.datos_bancarios?.codigo_postal_fiscal || "(N/A)"} - -
-
- - Regimen - - - {solicitud?.solicitante.datos_bancarios?.regimen ? regimen(solicitud?.solicitante.datos_bancarios?.regimen) : "(N/A)"} - -
-
- - Estado de cuenta - - - - {((solicitud?.solicitante.datos_bancarios?.doc_estado_cuenta !== null) && (solicitud?.solicitante.datos_bancarios?.doc_estado_cuenta !== undefined)) ? - ( - Ver archivo - ) - : ("(N/A)") - } - -
-
- - Constancia de situación fiscal - - - - {((solicitud?.solicitante.datos_bancarios?.doc_constancia_sat !== null) && (solicitud?.solicitante.datos_bancarios?.doc_constancia_sat !== undefined)) ? - ( - Ver archivo - ) - : ("(N/A)") - } - -
-
+
+ + Apellido Paterno + + + {solicitud?.solicitante.ap_paterno || "(N/A)"} +
- - {/* Contenedor del formulario*/} -
- - { - Object.values(solicitud?.formulario?.secciones || {}).map((seccion, key) => ( - <> -
-

{seccion.nombre}

-
-
- {/* Elementos de la seccion */} - {Object.values(seccion?.elementos || {}).map((elemento, key) =>( - elemento.tipo !== "documento" ? ( -
- - {elemento.nombre} - - - {elemento.respuesta?.valor || "(N/A)"} - -
- ) : ( -
- - {elemento.nombre} - - {elemento.respuesta?.valor ? ( - <> - - - Estatus - -
- -
- - Retroalimentación - -
-