navigate('/inicio')}>
diff --git a/cosiap_frontend/src/components/common/ui/Alert.jsx b/cosiap_frontend/src/components/common/ui/Alert.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3ad57753424cb4c2d1d652804726dabd7e22839d
--- /dev/null
+++ b/cosiap_frontend/src/components/common/ui/Alert.jsx
@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+
+export default function Alert({ message, type, duration, isVisible, setIsVisible }) {
+ useEffect(() => {
+ if (isVisible) {
+ const timer = setTimeout(() => {
+ setIsVisible(false); // Oculta la alerta después de la duración
+ }, duration);
+
+ return () => clearTimeout(timer); // Limpia el temporizador cuando el componente se desmonta
+ }
+ }, [isVisible, duration, setIsVisible]);
+
+ return (
+
+
+
+
+ {type === 'success' ? 'task_alt': type === 'error' ? 'error': 'warning' }
+
+
+
+
+ {message}
+
+
+
+ setIsVisible(false)} // Cerrar la alerta al hacer clic
+ className="material-symbols-outlined cursor-pointer font-bold"
+ >
+ close
+
+
+
+
+ );
+}
diff --git a/cosiap_frontend/src/components/common/ui/Modals/ModalConfirmation.jsx b/cosiap_frontend/src/components/common/ui/Modals/ModalConfirmation.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..efcca369bf7bfc03b9bf7c5512c1cc6f0972d24e
--- /dev/null
+++ b/cosiap_frontend/src/components/common/ui/Modals/ModalConfirmation.jsx
@@ -0,0 +1,29 @@
+
+
+
+export default function ModalConfirmation( {nameIcon, title, description, children} ){
+ return (
+
+
+
+
+
+ {nameIcon}
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+ {children}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/ui/SectionContainers/SectionContainer.jsx b/cosiap_frontend/src/components/common/ui/SectionContainers/SectionContainer.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b2333767dc8966502570cd4ea4af9bdbf4e2270
--- /dev/null
+++ b/cosiap_frontend/src/components/common/ui/SectionContainers/SectionContainer.jsx
@@ -0,0 +1,21 @@
+export default function SectionContainer( { title, children } ){
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/utility/LoginRequiredRoute.jsx b/cosiap_frontend/src/components/common/utility/LoginRequiredRoute.jsx
index b82f3dc4dab0d5215e56b1d6d069e99c0dccb98e..0a613044aae140624d3d170fb2a2456bfa78101c 100644
--- a/cosiap_frontend/src/components/common/utility/LoginRequiredRoute.jsx
+++ b/cosiap_frontend/src/components/common/utility/LoginRequiredRoute.jsx
@@ -1,12 +1,10 @@
import { useAutenticacion } from "@/components/common/utility/Autenticador";
import { useState, useEffect } from "react";
-import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { Navigate, Outlet } from "react-router-dom";
import api from "@/api";
export const LoginRequiredRoute = () => {
- const location = useLocation();
const { token } = useAutenticacion();
- console.log(location)
if (token === null) {
return
;
} else if (token === undefined) {
diff --git a/cosiap_frontend/src/components/users/Perfil/Direccion.jsx b/cosiap_frontend/src/components/users/Perfil/Direccion.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..35fa7e1938210d5f3c11ac3c102f3606e5c1729d
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/Direccion.jsx
@@ -0,0 +1,309 @@
+import SectionContainer from "@/components/common/ui/SectionContainers/SectionContainer";
+import Label_InputForm from "@/components/users/Perfil/Label_InputForm";
+import Label_SelectForm from "./Label_SelectForm";
+import ModalConfirmation from "@/components/common/ui/Modals/ModalConfirmation";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useEffect, useState } from "react";
+import { DirectionInformationValidationSchema } from "@/components/FormsValidations";
+import api from "@/api";
+
+
+export default function Direccion({ datosSolicitante, setViewPageLoader, setShowAlertSuccesful }){
+ // Estados
+ const [isEditing, setIsEditing] = useState(false); // Estado para controlar si está en modo edición
+ const [modifiedFields, setModifiedFields] = useState({}); // Campos que han sido modificados
+ const [showModalConfirmation, setShowModalConfirmation] = useState(false); // Control para mostrar el modal de confirmación
+ const [listaEstados, setListaEstados] = useState([]);
+ const [listaMunicipios, setListaMunicipios] = useState([]);
+ const [estadoSeleccionado, setEstadoSeleccionado] = useState();
+ const [municipioSeleccionado, setMunicipioSeleccionado] = useState();
+ // Hook para manejar el formulario
+ const {
+ register, // Registra los inputs en el formulario
+ handleSubmit, // Maneja el envío del formulario
+ reset, // Método para resetear los valores del formulario
+ formState: { errors, isSubmitting } // Estado del formulario: errores y si se está enviando
+ } = useForm({
+ resolver: yupResolver(DirectionInformationValidationSchema), // Resolver para la validación con Yup
+ defaultValues: {
+ direccion: "",
+ estado: "",
+ municipio: "",
+ codigo_postal: "",
+ poblacion: ""
+ }
+ });
+
+ // Función para resetear los datos del formulario con los valores actuales del solicitante
+ const resetData = () => reset({
+ direccion: datosSolicitante.direccion || "",
+ estado: estadoSeleccionado || "",
+ municipio: municipioSeleccionado || "",
+ codigo_postal: datosSolicitante.codigo_postal || "",
+ poblacion: datosSolicitante.poblacion || ""
+ });
+
+ const obtenerMunicipios = async () => {
+ setViewPageLoader(true)
+ try {
+ const response = await api.usuarios.municipios.get();
+ setListaMunicipios(response.data);
+ } catch (error) {
+ console.error(error)
+ }finally{
+ setViewPageLoader(false)
+ }
+ };
+
+ const obtenerEstados = async () => {
+ setViewPageLoader(true)
+ try {
+ const response = await api.usuarios.estados.get();
+ setListaEstados(response.data);
+ } catch (error) {
+ console.error(error)
+ }finally{
+ setViewPageLoader(false)
+ }
+ };
+
+ useEffect(() => {
+ obtenerEstados();
+ obtenerMunicipios();
+ }, []);
+
+ // useEffect que se ejecuta cada vez que los datos del solicitante cambian
+ useEffect(() => {
+ resetData(); // Resetea los datos cuando cambia datosSolicitante
+ if (datosSolicitante.municipio){
+ setEstadoSeleccionado(datosSolicitante.municipio.estado.id);
+ setMunicipioSeleccionado(datosSolicitante.municipio.id);
+ }
+ }, [datosSolicitante]);
+
+ // Función que maneja el envío del formulario
+ const handleFormSubmission = async (data) => {
+ if (!isEditing) {
+ return; // Si no está en modo edición, no se envía el formulario
+ }
+
+ //Eliminamos el estado en el data
+ delete data.estado;
+
+ //Convertimos a entero el id del municipio
+ data.municipio = parseInt(data.municipio);
+
+ setViewPageLoader(true); // Muestra un loader mientras se realiza la petición
+ try {
+ // Actualizar los datos del solicitante
+ const response = await api.usuarios.solicitantes.update(datosSolicitante.id, data);
+ // Cerrar modal de confirmación y deshabilitar la edición
+ setShowModalConfirmation(false);
+ setIsEditing(false);
+ setModifiedFields({}); // Vaciar los campos modificados
+ setShowAlertSuccesful(true)
+ } catch (error) {
+ console.error(error); // Manejar errores
+ } finally {
+ setViewPageLoader(false); // Quitar el loader al finalizar
+ }
+ };
+
+ // Función para manejar los cambios en los inputs
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ // Actualizar el estado de campos modificados
+ setModifiedFields((InputsPrev) => ({
+ ...InputsPrev,
+ [name]: value !== datosSolicitante[name] // Solo marcar como modificado si el valor es diferente al original
+ }));
+ // Si el usuario selecciona un estado, guardamos el valor del estado seleccionado
+ if (name === "estado") {
+ setEstadoSeleccionado(value); // Guardar el estado seleccionado
+ setMunicipioSeleccionado(undefined)
+ }
+ // Si el usuario selecciona un municipio, guardamos el valor del municipio seleccionado
+ if (name === "municipio") {
+ setMunicipioSeleccionado(value); // Guardar el estado seleccionado
+ }
+ };
+ // Función para cancelar la edición
+ const handleCancelEdition = () => {
+ setIsEditing(false); // Deshabilitar el modo edición
+ resetData(); // Restablecer los datos originales
+ setModifiedFields({}); // Limpiar los campos modificados
+ };
+
+ // Función para manejar el clic de "Guardar" con validación
+ const handleSaveClick = (data) => {
+ if (Object.values(modifiedFields).some((isModified) => isModified)) {
+ setShowModalConfirmation(true); // Mostrar el modal de confirmación si no hay errores
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Perfil/InformacionIdentificacion.jsx b/cosiap_frontend/src/components/users/Perfil/InformacionIdentificacion.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..06557d2a31315188c8c93676bfcc06347d0e40fe
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/InformacionIdentificacion.jsx
@@ -0,0 +1,216 @@
+import SectionContainer from "@/components/common/ui/SectionContainers/SectionContainer";
+import Label_InputForm from "@/components/users/Perfil/Label_InputForm";
+import ModalConfirmation from "@/components/common/ui/Modals/ModalConfirmation";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useEffect, useState } from "react";
+import { IdentificationValidationSchema } from "@/components/FormsValidations";
+import api, { apiUrl } from "@/api";
+import Label_InputFile from "./Label_InputFile";
+
+export default function InformacionIdentificacion( {datosSolicitante, setViewPageLoader, setShowAlertSuccesful} ){
+ // Estados
+ const [isEditing, setIsEditing] = useState(false); // Estado para controlar si está en modo edición
+ const [modifiedFields, setModifiedFields] = useState({}); // Campos que han sido modificados
+ const [showModalConfirmation, setShowModalConfirmation] = useState(false); // Control para mostrar el modal de confirmación
+ const [urlFileIne, setUrlFileIne] = useState(null);
+ // Hook para manejar formularios
+ const {
+ register, // Registra los inputs en el formulario
+ handleSubmit, // Maneja el envío del formulario
+ reset, // Método para resetear los valores del formulario
+ formState: { errors, isSubmitting } // Estado del formulario: errores y si se está enviando
+ } = useForm({
+ resolver: yupResolver(IdentificationValidationSchema), // Resolver para la validación con Yup
+ defaultValues: {
+ RFC: "",
+ curp: "",
+ INE: "",
+ }
+ });
+
+ // Función para resetear los datos del formulario con los valores actuales del solicitante
+ const resetData = () => reset({
+ RFC: datosSolicitante.RFC || "",
+ curp: datosSolicitante.curp || "",
+ INE: "",
+ });
+
+ // useEffect que se ejecuta cada vez que los datos del solicitante cambian
+ useEffect(() => {
+ resetData(); // Resetea los datos cuando cambia datosSolicitante
+ if(datosSolicitante.INE){//Si el usuario ya tiene un archivo ine subido
+ setUrlFileIne(apiUrl + datosSolicitante.INE);//Declaramos la ruta con el archivo subido
+ }
+ }, [datosSolicitante, reset]);
+
+ // Función que maneja el envío del formulario
+ const handleFormSubmission = async (data) => {
+ if (!isEditing) {
+ return; // Si no está en modo edición, no se envía el formulario
+ }
+
+ setViewPageLoader(true); // Muestra un loader mientras se realiza la petición
+
+ try {
+ // Crear una instancia de FormData
+ const formData = new FormData();
+
+ // Agregar los datos del formulario
+ formData.append("RFC", data.RFC);
+ formData.append("curp", data.curp);
+
+ // Si hay un archivo INE, agregarlo
+ if (data.INE && data.INE.length > 0) {
+ formData.append("INE", data.INE[0]); // Archivo INE
+ }
+
+ // Realizar la petición con el FormData
+ const response = await api.usuarios.solicitantes.update(datosSolicitante.id, formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ });
+ console.log(response)
+ // Cerrar modal de confirmación y deshabilitar la edición
+ setShowModalConfirmation(false);
+ setIsEditing(false);
+ setModifiedFields({}); // Vaciar los campos modificados
+ if(datosSolicitante.INE){
+ setUrlFileIne(apiUrl + response.data.solicitante.INE);//Declaramos la ruta con el archivo subido
+ }
+ setShowAlertSuccesful(true);
+ } catch (error) {
+ console.error(error); // Manejar errores
+ } finally {
+ setViewPageLoader(false); // Quitar el loader al finalizar
+ }
+ };
+
+ // Función para manejar los cambios en los inputs
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ // Actualizar el estado de campos modificados
+ setModifiedFields((InputsPrev) => ({
+ ...InputsPrev,
+ [name]: value !== datosSolicitante[name] // Solo marcar como modificado si el valor es diferente al original
+ }));
+ };
+
+ // Función para cancelar la edición
+ const handleCancelEdition = () => {
+ setIsEditing(false); // Deshabilitar el modo edición
+ resetData(); // Restablecer los datos originales
+ setModifiedFields({}); // Limpiar los campos modificados
+ if(datosSolicitante.INE){//Si el usuario ya tiene un archivo ine subido
+ setUrlFileIne(apiUrl + datosSolicitante.INE);//Declaramos la ruta con el archivo subido
+ }
+ };
+
+ // Función para manejar el clic de "Guardar" con validación
+ const handleSaveClick = (data) => {
+ if (Object.values(modifiedFields).some((isModified) => isModified)) {
+ setShowModalConfirmation(true); // Mostrar el modal de confirmación si no hay errores
+ }
+ };
+
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Perfil/InformacionPersonal.jsx b/cosiap_frontend/src/components/users/Perfil/InformacionPersonal.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..52778407992dc1048290c54f7ef4e31f7f807f65
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/InformacionPersonal.jsx
@@ -0,0 +1,235 @@
+import SectionContainer from "@/components/common/ui/SectionContainers/SectionContainer";
+import Label_InputForm from "@/components/users/Perfil/Label_InputForm";
+import Label_SelectForm from "./Label_SelectForm";
+import ModalConfirmation from "@/components/common/ui/Modals/ModalConfirmation";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useEffect, useState } from "react";
+import { PersonalInformationValidationSchema } from "@/components/FormsValidations";
+import api from "@/api";
+
+export default function InformacionPersonal({ datosSolicitante, setViewPageLoader, setShowAlertSuccesful }) {
+ // Estados
+ const [isEditing, setIsEditing] = useState(false); // Estado para controlar si está en modo edición
+ const [modifiedFields, setModifiedFields] = useState({}); // Campos que han sido modificados
+ const [showModalConfirmation, setShowModalConfirmation] = useState(false); // Control para mostrar el modal de confirmación
+ // Hook para manejar formularios
+ const {
+ register, // Registra los inputs en el formulario
+ handleSubmit, // Maneja el envío del formulario
+ reset, // Método para resetear los valores del formulario
+ formState: { errors, isSubmitting } // Estado del formulario: errores y si se está enviando
+ } = useForm({
+ resolver: yupResolver(PersonalInformationValidationSchema), // Resolver para la validación con Yup
+ defaultValues: {
+ nombre: "",
+ ap_paterno: "",
+ ap_materno: "",
+ sexo: "",
+ telefono: "",
+ email: ""
+ }
+ });
+
+ // Función para resetear los datos del formulario con los valores actuales del solicitante
+ const resetData = () => reset({
+ nombre: datosSolicitante.nombre || "",
+ ap_paterno: datosSolicitante.ap_paterno || "",
+ ap_materno: datosSolicitante.ap_materno || "",
+ sexo: datosSolicitante.sexo || "",
+ telefono: datosSolicitante.telefono || "",
+ email: datosSolicitante.email || ""
+ });
+
+ // useEffect que se ejecuta cada vez que los datos del solicitante cambian
+ useEffect(() => {
+ resetData(); // Resetea los datos cuando cambia datosSolicitante
+ }, [datosSolicitante, reset]);
+
+ // Función que maneja el envío del formulario
+ const handleFormSubmission = async (data) => {
+ if (!isEditing) {
+ return; // Si no está en modo edición, no se envía el formulario
+ }
+
+ setViewPageLoader(true); // Muestra un loader mientras se realiza la petición
+ try {
+ // Actualizar los datos del solicitante
+ const response = await api.usuarios.solicitantes.update(datosSolicitante.id, data);
+ console.log(response);
+
+ // Cerrar modal de confirmación y deshabilitar la edición
+ setShowModalConfirmation(false);
+ setIsEditing(false);
+ setModifiedFields({}); // Vaciar los campos modificados
+ setShowAlertSuccesful(true)
+ } catch (error) {
+ console.error(error); // Manejar errores
+ } finally {
+ setViewPageLoader(false); // Quitar el loader al finalizar
+ }
+ };
+
+ // Función para manejar los cambios en los inputs
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+
+ // Actualizar el estado de campos modificados
+ setModifiedFields((InputsPrev) => ({
+ ...InputsPrev,
+ [name]: value !== datosSolicitante[name] // Solo marcar como modificado si el valor es diferente al original
+ }));
+ };
+
+ // Función para cancelar la edición
+ const handleCancelEdition = () => {
+ setIsEditing(false); // Deshabilitar el modo edición
+ resetData(); // Restablecer los datos originales
+ setModifiedFields({}); // Limpiar los campos modificados
+ };
+
+ // Función para manejar el clic de "Guardar" con validación
+ const handleSaveClick = (data) => {
+ if (Object.values(modifiedFields).some((isModified) => isModified)) {
+ setShowModalConfirmation(true); // Mostrar el modal de confirmación si no hay errores
+ }
+ };
+
+ return (
+
+
+
+ );
+}
diff --git a/cosiap_frontend/src/components/users/Perfil/Label_InputFile.jsx b/cosiap_frontend/src/components/users/Perfil/Label_InputFile.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..3b4042343eb34f4f974c94a53f1425ec931c3057
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/Label_InputFile.jsx
@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react'; // Importamos useRef para manejar el campo de archivo
+import { FormInput } from "@/components/common/base/FormInput";
+
+export default function Label_InputFile({urlFile, label, id, name, type, placeholder, className, register, errors, onChange, isDisabled, message }) {
+ const [selectedFile, setSelectedFile] = useState(null); // Estado para almacenar el archivo seleccionado
+ console.log(urlFile)
+ const handleFileChange = (e) => {
+ const file = e.target.files[0]; // Capturamos el archivo seleccionado
+ // Si no hay archivo seleccionado, restablecemos el estado
+ if (file.type === 'application/pdf') {
+ // Verificamos que el archivo sea de tipo PDF
+ setSelectedFile(file); // Almacenamos el archivo si es PDF
+
+ } else {
+ setSelectedFile(null); // Si no es PDF, lo descartamos
+ }
+
+ if (onChange) {
+ onChange(e); // Llamamos al onChange pasado como parametro si está definido
+ }
+ };
+
+ useEffect(() => {
+ setSelectedFile(null)
+ }, [isDisabled]); //Cada vez que cambia la variable isDisabled
+
+ return (
+
+
{label}
+
+
{message}
+
+ {/* Aquí mostramos el área de vista previa si hay un archivo seleccionado */}
+ {selectedFile && !isDisabled && ( //Cuando hay un archivo seleccionado y esta habilitado el campo
+
+
+ )}
+
+ {urlFile && (
+
+ )}
+
+ );
+}
+
+Label_InputFile.propTypes = {
+ label: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ onChange: PropTypes.func,
+ isDisabled: PropTypes.bool,
+ register: PropTypes.func.isRequired,
+ message: PropTypes.string,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+};
diff --git a/cosiap_frontend/src/components/users/Perfil/Label_InputForm.jsx b/cosiap_frontend/src/components/users/Perfil/Label_InputForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c39fa305ad9614e3c471b84d32260ba58b81cac4
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/Label_InputForm.jsx
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { FormInput } from "@/components/common/base/FormInput";
+
+export default function Label_InputForm( {label, id, name, type, placeholder, className, register, errors, onChange, isDisabled} ) {
+ return (
+
+ {label}
+
+ );
+}
+
+Label_InputForm.PropTypes = {
+ label: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ className: PropTypes.string,
+ onChange: PropTypes.func,
+ isDisabled: PropTypes.bool,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.string
+ ])
+}
+
diff --git a/cosiap_frontend/src/components/users/Perfil/Label_SelectForm.jsx b/cosiap_frontend/src/components/users/Perfil/Label_SelectForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0437756d9ae6a066f34d25905882a2a33ff0bbae
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/Label_SelectForm.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { FormSelect } from "@/components/common/base/FormSelect";
+
+export default function Label_SelectForm({ label, id, name, options, className, register, errors, onChange, isDisabled, value }) {
+ return (
+
+ {label}
+
+ );
+}
+
+Label_SelectForm.propTypes = {
+ label: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ })
+ ).isRequired,
+ className: PropTypes.string,
+ onChange: PropTypes.func,
+ isDisabled: PropTypes.bool,
+ register: PropTypes.func.isRequired,
+ errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
+};
diff --git a/cosiap_frontend/src/components/users/Perfil/Perfil.jsx b/cosiap_frontend/src/components/users/Perfil/Perfil.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b804605fc7cd7006331872d101180db305da6cf
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Perfil/Perfil.jsx
@@ -0,0 +1,81 @@
+import InformacionPersonal from "@/components/users/Perfil/InformacionPersonal";
+import Direccion from "@/components/users/Perfil/Direccion";
+import InformacionIdentificacion from "@/components/users/Perfil/InformacionIdentificacion";
+import Alert from "@/components/common/ui/Alert";
+import api from "@/api";
+import { useAutenticacion } from "@/components/common/utility/Autenticador";
+import { useEffect, useState } from "react";
+
+export default function Perfil( {setViewPageLoader} ){
+ const { uid } = useAutenticacion();
+ const [datosSolicitante, setDatosSolicitante] = useState([]);
+ const [showAlertSuccesful, setShowAlertSuccesful] = useState(false); // Control de mostrar la alerta
+
+ const crearSolicitante = async () => {
+ try {
+ const response = await api.usuarios.solicitantes.post();
+ console.log("Solicitante creado: ", response.data);
+ //Tratamos de obtener el solicitante con el id
+ const responseObtain = await api.usuarios.solicitantes.getById(uid);
+ //Declaramos los datos del solicitante
+ setDatosSolicitante(responseObtain.data);
+ } catch (error) {
+ console.log(error)
+ }
+ };
+
+ const obtenerInformacionSolicitante = async () =>{
+ if (uid){
+ setViewPageLoader(true);
+ try {
+ //Tratamos de obtener el solicitante con el id
+ const responseObtain = await api.usuarios.solicitantes.getById(uid);
+ //Declaramos los datos del solicitante
+ setDatosSolicitante(responseObtain.data);
+ console.log(responseObtain.data)
+ } catch (error) { // Si da error significa que es su primera vez ingresando
+ crearSolicitante()
+ }finally{
+ setViewPageLoader(false);
+ }
+ }
+ };
+ useEffect(() => {
+ obtenerInformacionSolicitante();
+ },[uid]);
+
+ return (
+ <>
+
+
+
+ );
+}