laboral certification

my personal information / my account modal Attempt to implement the new functionality for the legal module Payslips Fiscalia adaptation Fix datetime fields in the events module
CodeHive-Solutions · Apr 15, 2024 · a4ec8e9 · a4ec8e9
1 parent 57d142d
commit a4ec8e9
Show file tree

Hide file tree

Showing 12 changed files with 597 additions and 71 deletions.
diff --git a/src/components/common/NavBar.jsx b/src/components/common/NavBar.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 // Libraries
 import { useNavigate, useMatch } from "react-router-dom";
@@ -7,9 +7,34 @@ import { useNavigate, useMatch } from "react-router-dom";
 import Goals from "../shared/Goals";
 import SnackbarAlert from "./SnackBarAlert";
 import { getApiUrl } from "../../assets/getApi";
-
+import MyAccountDialog from "../shared/MyAccount";
 // Material-UI
-import { Box, Button, Typography, MenuItem, Menu, Tooltip, IconButton, Avatar, ListItemIcon, useMediaQuery, ListItemText, LinearProgress, Fade } from "@mui/material";
+import {
+    Box,
+    Button,
+    Typography,
+    MenuItem,
+    Menu,
+    Tooltip,
+    IconButton,
+    Avatar,
+    ListItemIcon,
+    useMediaQuery,
+    ListItemText,
+    LinearProgress,
+    Fade,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    DialogContentText,
+    FormGroup,
+    FormControlLabel,
+    Checkbox,
+    Collapse,
+    TextField,
+    Divider,
+} from "@mui/material";
 
 // Icons
 import { Logout, Settings } from "@mui/icons-material";
@@ -33,6 +58,7 @@ import logotipo from "../../images/cyc-logos/logo-navbar.webp";
 
 const Navbar = () => {
     const [openCollapse, setOpenCollapse] = useState(false);
+    const [openCollapseEmail, setOpenCollapseEmail] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const [anchorElUtils, setAnchorElUtils] = useState(null);
     const [anchorElMenu, setAnchorElMenu] = useState(null);
@@ -44,11 +70,17 @@ const Navbar = () => {
     const [openSnack, setOpenSnack] = useState(false);
     const openUtils = Boolean(anchorElUtils);
     const [openDialog, setOpenDialog] = useState(false);
+    const [openAccountDialog, setOpenAccountDialog] = useState(false);
     const cedula = JSON.parse(localStorage.getItem("cedula"));
-    const [profilePicture, setProfilePicture] = useState();
+    const [openCertification, setOpenCertification] = useState(false);
+    const [openCollapseBonuses, setOpenCollapseBonuses] = useState(false);
+    const [checked, setChecked] = useState(false);
+    const emailRef = useRef(null);
     const cargoItem = localStorage.getItem("cargo");
     const isAdvisor = cargoItem && JSON.parse(cargoItem).includes("ASESOR");
     const permissions = JSON.parse(localStorage.getItem("permissions"));
+    const currentEmail = JSON.parse(localStorage.getItem("email"));
+    const bonusesInput = useRef(null);
     const goalsStatsPermission = cedula === "1020780559" || cedula === "28172713" || cedula === "1001185389" || cedula === "25878771";
     const servicesPermission =
         permissions &&
@@ -141,6 +173,17 @@ const Navbar = () => {
     }
 
     const handleCloseSnack = () => setOpenSnack(false);
+
+    const handleOpenCertification = () => setOpenCertification(true);
+
+    const handleCloseCertification = () => {
+        setOpenCertification(false);
+        setOpenCollapseBonuses(false);
+        setChecked(false);
+        setOpenCollapseEmail(false);
+    };
+
+    const handleOpenCollapseBonuses = () => setOpenCollapseBonuses(!openCollapseBonuses);
     const handleOpenSnack = () => setOpenSnack(true);
 
     const handleClickMenu = (event) => {
@@ -167,6 +210,19 @@ const Navbar = () => {
         setAnchorEl(null);
     };
 
+    const handleOpenAccountDialog = () => {
+        setOpenAccountDialog(true);
+    };
+
+    const handleCloseAccountDialog = () => {
+        setOpenAccountDialog(false);
+    };
+
+    const handleOpenCollapseEmail = () => {
+        setOpenCollapseEmail(!openCollapseEmail);
+        emailRef.current.value = "";
+    };
+
     const showSnack = (severity, message, error) => {
         setSeverity(severity);
         setMessage(message);
@@ -199,6 +255,18 @@ const Navbar = () => {
 
     const sendCertification = async () => {
         setOpenCollapse(true);
+        let body = {};
+
+        if (checked) {
+            body = {
+                cedula,
+                bonuses: bonusesInput.current.value,
+            };
+        } else {
+            body = {
+                cedula,
+            };
+        }
 
         try {
             const response = await fetch(`${getApiUrl()}employment-management/send-employment-certification/`, {
@@ -207,7 +275,7 @@ const Navbar = () => {
                 headers: {
                     "Content-Type": "application/json",
                 },
-                body: JSON.stringify({ cedula }),
+                body: JSON.stringify(body),
             });
 
             const data = await response.json();
@@ -219,6 +287,7 @@ const Navbar = () => {
                 }
                 showSnack("error", "Error en el servidor, por favor intente más tarde", true);
             } else if (response.status === 200) {
+                setOpenCertification(false);
                 showSnack("success", data.message + " correctamente al correo " + data.email.toLowerCase());
             }
         } catch (error) {
@@ -228,10 +297,63 @@ const Navbar = () => {
         }
     };
 
+    const handleChangeCheck = (event) => {
+        setChecked(event.target.checked);
+        handleOpenCollapseBonuses();
+    };
+
     const isMobile = useMediaQuery("(max-width: 600px)");
 
     return (
         <>
+            <Dialog open={openCertification} onClose={handleCloseCertification} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
+                <DialogTitle id="alert-dialog-title">{"¿Enviar Certificación Laboral?"}</DialogTitle>
+                <DialogContent sx={{ paddingBottom: 0 }}>
+                    <DialogContentText id="alert-dialog-description">
+                        Selecciona si deseas que la certificación se envíe a tu correo, ya sea con o sin bonificaciones, y especifica los meses promediados de estas, si
+                        las hubiera.
+                    </DialogContentText>
+                    <FormGroup sx={{ mt: ".5rem" }}>
+                        <FormControlLabel
+                            control={<Checkbox checked={checked} onChange={handleChangeCheck} inputProps={{ "aria-label": "controlled" }} />}
+                            label="Incluir bonificaciones"
+                        />
+                    </FormGroup>
+                    <Collapse sx={{ py: "1rem" }} in={openCollapseBonuses}>
+                        <TextField inputRef={bonusesInput} sx={{ width: "100%" }} defaultValue="3" label="Seleccione los meses promediados de bonificaciones" select>
+                            <MenuItem value={3}>Últimos 3 meses</MenuItem>
+                            <MenuItem value={6}>Últimos 6 meses</MenuItem>
+                            <MenuItem value={12}>Últimos 12 meses</MenuItem>
+                        </TextField>
+                    </Collapse>
+                    <Typography color="text.secondary">
+                        La certificación laboral sera enviada al correo electrónico:{" "}
+                        <span style={{ fontWeight: 500, color: "rgb(0,0,0,0.8)" }}>{currentEmail.toLowerCase()}</span>
+                    </Typography>
+                    <Collapse in={!openCollapseEmail}>
+                        <Button variant="outlined" sx={{ mt: "1rem" }} onClick={handleOpenCollapseEmail}>
+                            Ese no es mi correo
+                        </Button>
+                    </Collapse>
+                    <Collapse in={openCollapseEmail}>
+                        <TextField
+                            sx={{ mt: "1rem" }}
+                            inputRef={emailRef}
+                            autoFocus
+                            margin="dense"
+                            id="email"
+                            label="Correo electrónico"
+                            type="email"
+                            fullWidth
+                            variant="standard"
+                        />
+                    </Collapse>
+                </DialogContent>
+                <DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
+                    <Button onClick={handleCloseCertification}>Cancelar</Button>
+                    <Button onClick={sendCertification}>Enviar</Button>
+                </DialogActions>
+            </Dialog>
             <Fade in={openCollapse}>
                 <LinearProgress sx={{ position: "fixed", top: 0, left: 0, width: "100%", zIndex: 1002 }} variant="query" />
             </Fade>
@@ -344,6 +466,13 @@ const Navbar = () => {
                 transformOrigin={{ horizontal: "right", vertical: "top" }}
                 anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
             >
+                <MenuItem onClick={handleOpenAccountDialog}>
+                    <ListItemIcon>
+                        <Avatar />
+                    </ListItemIcon>
+                    <ListItemText primary="Mi Cuenta" />
+                </MenuItem>
+                <Divider />
                 {isAdvisor ? (
                     <MenuItem onClick={handleOpenDialog}>
                         <ListItemIcon>
@@ -358,7 +487,7 @@ const Navbar = () => {
                     </ListItemIcon>
                     <ListItemText primary="Mis desprendibles de nomina" />
                 </MenuItem>
-                {/* <MenuItem onClick={() => sendCertification()}>
+                {/* <MenuItem onClick={handleOpenCertification}>
                     <ListItemIcon>
                         <DescriptionIcon fontSize="small" />
                     </ListItemIcon>
@@ -464,17 +593,18 @@ const Navbar = () => {
                         <ListItemText primary="Registros de Desprendibles de Nomina" />
                     </MenuItem>
                 ) : null}
-                {/* {permissions && permissions.includes("employment_management.view_employmentcertification") ? (
+                {permissions && permissions.includes("employment_management.view_employmentcertification") ? (
                     <MenuItem onClick={() => navigate("/logged/certifications")}>
                         <ListItemIcon>
                             <TopicIcon fontSize="small" />
                         </ListItemIcon>
                         <ListItemText primary="Certificados Laborales" />
                     </MenuItem>
-                ) : null} */}
+                ) : null}
             </Menu>
-            {isAdvisor ? <Goals openDialog={openDialog} setOpenDialog={setOpenDialog} showSnack={showSnack} /> : null}{" "}
+            {isAdvisor ? <Goals openDialog={openDialog} setOpenDialog={setOpenDialog} showSnack={showSnack} /> : null}
             <SnackbarAlert message={message} severity={severity} openSnack={openSnack} closeSnack={handleCloseSnack} />
+            <MyAccountDialog open={openAccountDialog} onClose={handleCloseAccountDialog} />
         </>
     );
 };

diff --git a/src/components/pages/Blog.jsx b/src/components/pages/Blog.jsx
@@ -143,11 +143,7 @@ const Blog = () => {
     };
 
     const handleFilterMonth = (month) => {
-        // Filter articles by month
-        console.log(month);
-
         // Logic to filter articles by month
-
         const filteredArticles = baseArticles.filter((article) => {
             const articleMonth = new Date(`${openYear}-${article.uploadDate.slice(0, 2)}-02`).toLocaleString("default", { month: "long" });
             return articleMonth === month;

diff --git a/src/components/pages/EmploymentCertification.jsx b/src/components/pages/EmploymentCertification.jsx
@@ -31,7 +31,7 @@ export const EmploymentCertification = () => {
 
     const getEmploymentCertifications = async () => {
         try {
-            const response = await fetch(`${getApiUrl()}/employment-management//`, {
+            const response = await fetch(`${getApiUrl()}employment-management/get-employment-certifications`, {
                 method: "GET",
                 credentials: "include",
             });
@@ -66,11 +66,34 @@ export const EmploymentCertification = () => {
     const columns = [
         { field: "id", headerName: "ID", width: 70 },
         { field: "user", headerName: "Cedula", width: 100 },
-        { field: "position", headerName: "Cargo", width: 250, editable: false },
-        { field: "salary", headerName: "Salario", width: 150, editable: false },
+        { field: "position", headerName: "Cargo", width: 360, editable: false },
+        {
+            field: "salary",
+            headerName: "Salario",
+            width: 125,
+            editable: false,
+            valueGetter: (params) => params.row.salary * 1,
+            valueFormatter: (params) =>
+                new Intl.NumberFormat("es-CO", {
+                    style: "currency",
+                    currency: "COP",
+                }).format(params.value),
+        },
+        {
+            field: "bonuses",
+            headerName: "Bonificación",
+            width: 125,
+            editable: false,
+            valueGetter: (params) => params.row.bonuses * 1,
+            valueFormatter: (params) =>
+                new Intl.NumberFormat("es-CO", {
+                    style: "currency",
+                    currency: "COP",
+                }).format(params.value),
+        },
         { field: "contract_type", headerName: "Contrato", width: 170, editable: false },
         { field: "start_date", headerName: "Fecha de Ingreso", width: 150, editable: false },
-        { field: "expedition", headerName: "Lugar de Expedición", width: 200, editable: false },
+        { field: "expedition_city", headerName: "Lugar de Expedición", width: 180, editable: false },
     ];
 
     return (

diff --git a/src/components/pages/Home.jsx b/src/components/pages/Home.jsx
@@ -19,10 +19,12 @@ import cake from "../../images/birthdays/cake.png";
 import ceroDiscrimination from "../../images/home-carousel/cero-discrimination.png";
 import prosecutor from "../../images/home-carousel/prosecutor.png";
 import Avatar from "../../images/home-carousel/avatar.jpg";
+import water from "../../images/home-carousel/water.png";
+import water2 from "../../images/home-carousel/water-2.png";
 
 const benefits = [{ image: realBenefit2, title: "Beneficio 2" }];
 
-const homeImages = [{ image: prosecutor }, { image: ceroDiscrimination }, { image: vacanciesCarousel }];
+const homeImages = [{ image: water2 }, { image: water }, { image: prosecutor }, { image: ceroDiscrimination }, { image: vacanciesCarousel }];
 
 const Home = () => {
     const [openSnack, setOpenSnack] = useState(false);
@@ -61,7 +63,7 @@ const Home = () => {
 
                 let formattedName = "";
                 if (wholeName.split(" ").length === 4) {
-                    formattedName = `${firstNamesParts[1]} ${lastNamesParts[0]}`.trim();
+                    formattedName = `${firstNamesParts[0]} ${lastNamesParts[0]}`.trim();
                 } else {
                     formattedName = `${firstNames} ${lastNames}`.trim();
                 }

diff --git a/src/components/pages/Legal.jsx b/src/components/pages/Legal.jsx
@@ -337,7 +337,7 @@ export const Legal = () => {
             if (!response.ok) {
                 throw new Error(data.detail);
             } else if (response.status === 200) {
-                handleCloseDialogEdit();
+                handleCloseDialogEdit();    
                 getPolicies();
                 showSnack("success", "Se ha actualizado el registro correctamente.");
             }
@@ -351,26 +351,6 @@ export const Legal = () => {
         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 updatedInitialValues = {
-            ...newInitialValues,
-            [`${inputName}_${i}`]: "",
-            [`${inputName}number_${i}`]: "",
-            [`${inputName}start_date_${i}`]: "",
-            [`${inputName}end_date_${i}`]: "",
-        };
-        setNewInitialValues(updatedInitialValues);
-        console.log(updatedInitialValues);
-
-        // Add the new inputs to the newValidationSchema object
-        const updatedValidationSchema = newValidationSchema.shape({
-            ...newValidationSchema.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"),
-        });
-        setNewValidationSchema(updatedValidationSchema);
-
         const newInputs = [
             {
                 name: `${inputName}_${i}`,
@@ -407,7 +387,27 @@ export const Legal = () => {
             setInputs({ ...inputs, insurancePolicy: [...inputs.insurancePolicy, ...newInputs] });
         }
 
+        const updatedInitialValues = {
+            ...newInitialValues,
+            [`${inputName}_${i}`]: "",
+            [`${inputName}number_${i}`]: "",
+            [`${inputName}start_date_${i}`]: "",
+            [`${inputName}end_date_${i}`]: "",
+        };
+
+        console.log(updatedInitialValues);
+        setNewInitialValues(updatedInitialValues);
         // Add the new inputs to the newInitialValues object
+
+        // Add the new inputs to the newValidationSchema object
+        const updatedValidationSchema = newValidationSchema.shape({
+            ...newValidationSchema.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"),
+        });
+        setNewValidationSchema(updatedValidationSchema);
     };
 
     const FormikTextField = ({ label, type, options, multiline, rows, ...props }) => {