diff --git a/src/components/common/NavBar.jsx b/src/components/common/NavBar.jsx index 2df19d1..d6942f2 100644 --- a/src/components/common/NavBar.jsx +++ b/src/components/common/NavBar.jsx @@ -8,6 +8,8 @@ import Goals from "../shared/Goals"; import SnackbarAlert from "./SnackBarAlert"; import { getApiUrl } from "../../assets/getApi"; import MyAccountDialog from "../shared/MyAccount"; +import InactivityDetector from "../shared/InactivityDetector"; + // Material-UI import { Box, @@ -306,6 +308,7 @@ const Navbar = () => { return ( <> + {"¿Enviar Certificación Laboral?"} diff --git a/src/components/pages/Legal.jsx b/src/components/pages/Legal.jsx index b0a5402..5a54478 100644 --- a/src/components/pages/Legal.jsx +++ b/src/components/pages/Legal.jsx @@ -28,8 +28,6 @@ import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; import DeleteIcon from "@mui/icons-material/Delete"; import SaveIcon from "@mui/icons-material/Save"; -import AddIcon from "@mui/icons-material/Add"; -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; const validationSchema = Yup.object().shape({ name: Yup.string().required("Campo requerido"), @@ -52,50 +50,122 @@ const validationSchema = Yup.object().shape({ civil_responsibility_policy_number: Yup.string().required("Campo requerido"), civil_responsibility_policy_start_date: Yup.string().required("Campo requerido"), civil_responsibility_policy_end_date: Yup.string().required("Campo requerido"), + + civil_responsibility_policy_2: Yup.string(), + civil_responsibility_policy_number_2: Yup.string(), + civil_responsibility_policy_start_date_2: Yup.string(), + civil_responsibility_policy_end_date_2: Yup.string(), + + civil_responsibility_policy_3: Yup.string(), + civil_responsibility_policy_number_3: Yup.string(), + civil_responsibility_policy_start_date_3: Yup.string(), + civil_responsibility_policy_end_date_3: Yup.string(), + compliance_policy: Yup.string().required("Campo requerido"), compliance_policy_number: Yup.string().required("Campo requerido"), compliance_policy_start_date: Yup.string().required("Campo requerido"), compliance_policy_end_date: Yup.string().required("Campo requerido"), + + compliance_policy_2: Yup.string(), + compliance_policy_number_2: Yup.string(), + compliance_policy_start_date_2: Yup.string(), + compliance_policy_end_date_2: Yup.string(), + + compliance_policy_3: Yup.string(), + compliance_policy_number_3: Yup.string(), + compliance_policy_start_date_3: Yup.string(), + compliance_policy_end_date_3: Yup.string(), + insurance_policy: Yup.string().required("Campo requerido"), insurance_policy_number: Yup.string().required("Campo requerido"), insurance_policy_start_date: Yup.string().required("Campo requerido"), insurance_policy_end_date: Yup.string().required("Campo requerido"), + + insurance_policy_2: Yup.string(), + insurance_policy_number_2: Yup.string(), + insurance_policy_start_date_2: Yup.string(), + insurance_policy_end_date_2: Yup.string(), + + insurance_policy_3: Yup.string(), + insurance_policy_number_3: Yup.string(), + insurance_policy_start_date_3: Yup.string(), + insurance_policy_end_date_3: Yup.string(), + renovation_date: Yup.string().required("Campo requerido"), }); -const initialInputs = { - clients: [ - { name: "name", label: "Clientes", type: "text" }, - { name: "city", label: "Ciudad", type: "text" }, - { name: "description", label: "Descripción", type: "text" }, - { name: "expected_start_date", label: "Fecha de Inicio Estimada", type: "date" }, - { name: "value", label: "Valor del Contrato", type: "text" }, - { name: "monthly_cost", label: "Facturación Mensual", type: "text" }, - { name: "duration", label: "Duración", type: "date" }, - { name: "contact", label: "Nombre del Contacto", type: "text" }, - { name: "contact_telephone", label: "Teléfono", type: "text" }, - { name: "start_date", label: "Fecha de Inicio", type: "date" }, - ], - civilResponsibilityPolicy: [ - { name: "civil_responsibility_policy", label: "Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text", multiline: true }, - { name: "civil_responsibility_policy_number", label: "Numero Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, - { name: "civil_responsibility_policy_start_date", label: "Fecha Inicio Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "date" }, - { name: "civil_responsibility_policy_end_date", label: "Fecha Fin Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "date" }, - ], - compliancePolicy: [ - { name: "compliance_policy", label: "Póliza de Cumplimiento", type: "text", multiline: true }, - { name: "compliance_policy_number", label: "Numero Póliza de Cumplimiento", type: "text", multiline: true }, - { name: "compliance_policy_start_date", label: "Fecha Inicio Póliza de Cumplimiento", type: "date", multiline: true }, - { name: "compliance_policy_end_date", label: "Fecha Fin Póliza de Cumplimiento", type: "date", multiline: true }, - ], - insurancePolicy: [ - { name: "insurance_policy", label: "Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text", multiline: true }, - { name: "insurance_policy_number", label: "Numero Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text", multiline: true }, - { name: "insurance_policy_start_date", label: "Fecha Inicio Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date", multiline: true }, - { name: "insurance_policy_end_date", label: "Fecha Fin Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date", multiline: true }, - ], - renovation: [{ name: "renovation_date", label: "Renovación del contrato", type: "date" }], -}; +const initialInputs = [ + { name: "name", label: "Clientes", type: "text" }, + { name: "city", label: "Ciudad", type: "text" }, + { name: "description", label: "Descripción", type: "text" }, + { name: "expected_start_date", label: "Fecha de Inicio Estimada", type: "date" }, + { name: "value", label: "Valor del Contrato", type: "text" }, + { name: "monthly_cost", label: "Facturación Mensual", type: "text" }, + { name: "duration", label: "Duración", type: "date" }, + { name: "contact", label: "Nombre del Contacto", type: "text" }, + { name: "contact_telephone", label: "Teléfono", type: "text" }, + { name: "start_date", label: "Fecha de Inicio", type: "date" }, + { name: "civil_responsibility_policy", label: "Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { name: "civil_responsibility_policy_number", label: "Numero Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { name: "civil_responsibility_policy_start_date", label: "Fecha Inicio Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "date" }, + { name: "civil_responsibility_policy_end_date", label: "Fecha Fin Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "date" }, + + { name: "civil_responsibility_policy_2", label: "Segunda Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { name: "civil_responsibility_policy_number_2", label: "Segundo Numero Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { + name: "civil_responsibility_policy_start_date_2", + label: "Segunda Fecha Inicio Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", + type: "date", + }, + { + name: "civil_responsibility_policy_end_date_2", + label: "Segunda Fecha Fin Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", + type: "date", + }, + { name: "civil_responsibility_policy_3", label: "Tercera Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { name: "civil_responsibility_policy_number_3", label: "Tercero Numero Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", type: "text" }, + { + name: "civil_responsibility_policy_start_date_3", + label: "Tercera Fecha Inicio Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", + type: "date", + }, + { + name: "civil_responsibility_policy_end_date_3", + label: "Tercera Fecha Fin Póliza de Responsabilidad Civil Extracontractual Derivada de Cumplimiento", + type: "date", + }, + { name: "compliance_policy", label: "Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_number", label: "Numero Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_start_date", label: "Fecha Inicio Póliza de Cumplimiento", type: "date" }, + { name: "compliance_policy_end_date", label: "Fecha Fin Póliza de Cumplimiento", type: "date" }, + + { name: "compliance_policy_2", label: "Segunda Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_number_2", label: "Segundo Numero Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_start_date_2", label: "Segunda Fecha Inicio Póliza de Cumplimiento", type: "date" }, + { name: "compliance_policy_end_date_2", label: "Segunda Fecha Fin Póliza de Cumplimiento", type: "date" }, + + { name: "compliance_policy_3", label: "Tercera Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_number_3", label: "Tercero Numero Póliza de Cumplimiento", type: "text" }, + { name: "compliance_policy_start_date_3", label: "Tercera Fecha Inicio Póliza de Cumplimiento", type: "date" }, + { name: "compliance_policy_end_date_3", label: "Tercera Fecha Fin Póliza de Cumplimiento", type: "date" }, + + { name: "insurance_policy", label: "Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_number", label: "Numero Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_start_date", label: "Fecha Inicio Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + { name: "insurance_policy_end_date", label: "Fecha Fin Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + + { name: "insurance_policy_2", label: "Segunda Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_number_2", label: "Segundo Numero Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_start_date_2", label: "Segunda Fecha Inicio Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + { name: "insurance_policy_end_date_2", label: "Segunda Fecha Fin Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + + { name: "insurance_policy_3", label: "Tercera Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_number_3", label: "Tercero Numero Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "text" }, + { name: "insurance_policy_start_date_3", label: "Tercera Fecha Inicio Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + { name: "insurance_policy_end_date_3", label: "Tercera Fecha Fin Póliza Seguros de Responsabilidad Profesional por Perdida de Datos", type: "date" }, + + { name: "renovation_date", label: "Renovación del contrato", type: "date" }, +]; export const Legal = () => { const initialValues = { @@ -113,14 +183,47 @@ export const Legal = () => { civil_responsibility_policy_number: "", civil_responsibility_policy_start_date: "", civil_responsibility_policy_end_date: "", + + civil_responsibility_policy_2: "", + civil_responsibility_policy_number_2: "", + civil_responsibility_policy_start_date_2: "", + civil_responsibility_policy_end_date_2: "", + + civil_responsibility_policy_3: "", + civil_responsibility_policy_number_3: "", + civil_responsibility_policy_start_date_3: "", + civil_responsibility_policy_end_date_3: "", + compliance_policy: "", compliance_policy_number: "", compliance_policy_start_date: "", compliance_policy_end_date: "", + + compliance_policy_2: "", + compliance_policy_number_2: "", + compliance_policy_start_date_2: "", + compliance_policy_end_date_2: "", + + compliance_policy_3: "", + compliance_policy_number_3: "", + compliance_policy_start_date_3: "", + compliance_policy_end_date_3: "", + insurance_policy: "", insurance_policy_number: "", insurance_policy_start_date: "", insurance_policy_end_date: "", + + insurance_policy_2: "", + insurance_policy_number_2: "", + insurance_policy_start_date_2: "", + insurance_policy_end_date_2: "", + + insurance_policy_3: "", + insurance_policy_number_3: "", + insurance_policy_start_date_3: "", + insurance_policy_end_date_3: "", + renovation_date: "", }; @@ -158,9 +261,6 @@ export const Legal = () => { throw new Error(data.detail); } else if (response.status === 200) { setRows(data); - // setAddPermission(data.permissions.add); - // setEditPermission(data.permissions.change); - // setDeletePermission(data.permissions.delete); } } catch (error) { console.error(error); @@ -185,9 +285,6 @@ export const Legal = () => { } else if (response.status === 200) { setDetails(data); handleOpenDialogEdit(); - // setAddPermission(data.permissions.add); - // setEditPermission(data.permissions.change); - // setDeletePermission(data.permissions.delete); } } catch (error) { console.error(error); @@ -348,121 +445,34 @@ export const Legal = () => { } }; - const handleAddPolicies = (inputName, i, policyType, inputLabel, updateValidationSchema) => { - inputName = inputName.split("end")[0]; // Remove the index from the input name - inputLabel = inputLabel.split("Fin ")[1]; // Remove the index from the input label - - const newInputs = [ - { - name: `${inputName}_${i}`, - label: `${i} ${inputLabel}`, - type: "text", - multiline: true, - }, - { - name: `${inputName}number_${i}`, - label: `Numero ${inputLabel}`, - type: "text", - multiline: true, - }, - { - name: `${inputName}start_date_${i}`, - label: `Fecha Inicio ${inputLabel}`, - type: "date", - multiline: true, - }, - { - name: `${inputName}end_date_${i}`, - label: `Fecha Fin ${inputLabel}`, - type: "date", - multiline: true, - }, - ]; - - // Add the new inputs to the state inputs object in the correct position - setInputs({ ...inputs, [policyType]: [...inputs[policyType], ...newInputs] }); - - setNewInitialValues((currentValues) => ({ - ...currentValues, - [`${inputName}_${i}`]: "", - [`${inputName}number_${i}`]: "", - [`${inputName}start_date_${i}`]: "", - [`${inputName}end_date_${i}`]: "", - })); - - updateValidationSchema((currentSchema) => - currentSchema.shape({ - ...currentSchema.fields, - [`${inputName}_${i}`]: Yup.string().required("Campo requerido"), - [`${inputName}number_${i}`]: Yup.string().required("Campo requerido"), - [`${inputName}start_date_${i}`]: Yup.string().required("Campo requerido"), - [`${inputName}end_date_${i}`]: Yup.string().required("Campo requerido"), - }) - ); - }; - - const FormikTextField = ({ label, type, options, multiline, rows, ...props }) => { + const FormikTextField = ({ label, type, options, rows, ...props }) => { const [field, meta] = useField(props); const errorText = meta.error && meta.touched ? meta.error : ""; + const textFieldProps = { + key: props.name, + sx: { width: props.name === "renovation_date" ? "800px" : "390px", mt: props.name === "renovation_date" ? "2rem" : {} }, + disabled: disabled, + rows: rows, + InputLabelProps: type === "date" ? { shrink: true } : {}, + type: type, + label: label, + ...field, + helperText: errorText, + error: !!errorText, + }; + if (props.name === "civil_responsibility_policy" || props.name === "compliance_policy" || props.name === "insurance_policy") { return ( <> - + ); } - if (label === "Renovación del contrato") { - return ( - <> - - - ); - } else if (type === "date") { - return ( - - ); - } else { - return ( - - ); - } + + return ; }; const columns = [ @@ -537,108 +547,12 @@ export const Legal = () => {
- {inputs.clients.map((input, index) => { - return ; - })} - - {inputs.civilResponsibilityPolicy.map((input, index) => { - const uniqueKey = `${input.name}_${index}`; // Generate a unique key using input name and index - if (index === inputs.civilResponsibilityPolicy.length - 1) { - return ( - - - - - - ); - } else if (input.name.includes("end")) { - return ( - <> - - - - ); - } - return ( - - ); - })} - {inputs.compliancePolicy.map((input, index) => { - const uniqueKey = `${input.name}_${index}`; // Generate a unique key using input name and index - if (index === inputs.compliancePolicy.length - 1) { - return ( - - - - - - ); - } - return ( - - ); - })} - {inputs.insurancePolicy.map((input, index) => { - const uniqueKey = `${input.name}_${index}`; // Generate a unique key using input name and index - if (index === inputs.insurancePolicy.length - 1) { - return ( - - - - - - ); - } - return ( - - ); - })} - - {inputs.renovation.map((input, index) => { - return ( - - - - ); - })} - - - - + {inputs.map((input) => ( + + ))} +
@@ -653,55 +567,18 @@ export const Legal = () => { - {/* +
- - - - - - - - - - - - - - - - -
- */} + diff --git a/src/components/shared/InactivityDetector.jsx b/src/components/shared/InactivityDetector.jsx new file mode 100644 index 0000000..c11ee6a --- /dev/null +++ b/src/components/shared/InactivityDetector.jsx @@ -0,0 +1,39 @@ +import { useEffect } from "react"; + +const InactivityDetector = ({ handleLogout }) => { + useEffect(() => { + let inactivityTimeout; + + const resetInactivityTimeout = () => { + clearTimeout(inactivityTimeout); + inactivityTimeout = setTimeout(() => { + handleLogout(); + }, 150000); // Adjust the timeout value as needed (in milliseconds) + }; + + const handleActivity = () => { + console.log("User activity detected"); + resetInactivityTimeout(); + }; + + // Add event listeners to detect user activity + window.addEventListener("mousemove", handleActivity); + window.addEventListener("keydown", handleActivity); + window.addEventListener("scroll", handleActivity); + window.addEventListener("click", handleActivity); + + // Start the inactivity timeout on component mount + resetInactivityTimeout(); + + // Clean up event listeners on component unmount + return () => { + clearTimeout(inactivityTimeout); + window.removeEventListener("mousemove", handleActivity); + window.removeEventListener("scroll", handleActivity); + window.removeEventListener("click", handleActivity); + window.removeEventListener("keydown", handleActivity); + }; + }, []); +}; + +export default InactivityDetector; diff --git a/src/components/shared/InactivivyDetector.jsx b/src/components/shared/InactivivyDetector.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/main.jsx b/src/main.jsx index 829d11e..09983c5 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -36,6 +36,7 @@ import MyPayslips from "./components/pages/MyPayslips"; import SwiperSlider from "./components/shared/SwiperSlider"; import EmploymentCertification from "./components/pages/EmploymentCertification"; import ImageMagnifier from "./components/pages/ImageMagnifier"; +import InactivityDetector from "./components/shared/InactivityDetector"; const theme = createTheme({ typography: { @@ -85,7 +86,7 @@ const router = createBrowserRouter([ }, { path: "test", - element: , + element: , }, { path: "/logged",