Refactor components to remove unused imports, enhance code readabilit…

…y, and update dependencies in package.json
CodeHive-Solutions · Nov 6, 2024 · d8802d2 · d8802d2
1 parent ef31126
commit d8802d2
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 274 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,9 +14,9 @@
     "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
-        "@mui/icons-material": "^5.16.7",
-        "@mui/lab": "5.0.0-alpha.173",
-        "@mui/material": "^5.16.7",
+        "@mui/icons-material": "^6.1.6",
+        "@mui/lab": "6.0.0-beta.14",
+        "@mui/material": "^6.1.6",
         "@mui/x-data-grid": "^7.22.1",
         "@sentry/react": "^8.37.1",
         "@sentry/vite-plugin": "^2.22.6",
@@ -55,7 +55,7 @@
         "@vitejs/plugin-react": "^4.3.3",
         "@vitest/ui": "^2.1.4",
         "jsdom": "^25.0.1",
-        "oxlint": "^0.9.10",
+        "oxlint": "^0.11.0",
         "prettier": "^3.3.3",
         "rollup-plugin-visualizer": "^5.12.0",
         "vite": "^5.4.10",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/pages/Assistance.jsx b/frontend/src/components/pages/Assistance.jsx
@@ -342,7 +342,7 @@ const columns = [
         width: 200,
         editable: true,
         type: 'number',
-        // Count `dias laborados` + `ipe` + `im` + `af` + `ar` + `c` + `cd/cf` + `aru` +  `am` + `df
+        // Count `días laborados` + `ipe` + `im` + `af` + `ar` + `c` + `cd/cf` + `aru` +  `am` + `df
         valueGetter: (value, row) => {
             let count = 0;
             for (let i = 1; i <= 30; i++) {
@@ -389,35 +389,35 @@ export default function Assistance() {
         }
     };
 
-    const handleEditClick = (id) => () => {
-        setRowModesModel({
-            ...rowModesModel,
-            [id]: { mode: GridRowModes.Edit },
-        });
-    };
+    // const handleEditClick = (id) => () => {
+    //     setRowModesModel({
+    //         ...rowModesModel,
+    //         [id]: { mode: GridRowModes.Edit },
+    //     });
+    // };
 
-    const handleSaveClick = (id) => () => {
-        setRowModesModel({
-            ...rowModesModel,
-            [id]: { mode: GridRowModes.View },
-        });
-    };
+    // const handleSaveClick = (id) => () => {
+    //     setRowModesModel({
+    //         ...rowModesModel,
+    //         [id]: { mode: GridRowModes.View },
+    //     });
+    // };
 
-    const handleDeleteClick = (id) => () => {
-        setRows(rows.filter((row) => row.id !== id));
-    };
+    // const handleDeleteClick = (id) => () => {
+    //     setRows(rows.filter((row) => row.id !== id));
+    // };
 
-    const handleCancelClick = (id) => () => {
-        setRowModesModel({
-            ...rowModesModel,
-            [id]: { mode: GridRowModes.View, ignoreModifications: true },
-        });
+    // const handleCancelClick = (id) => () => {
+    //     setRowModesModel({
+    //         ...rowModesModel,
+    //         [id]: { mode: GridRowModes.View, ignoreModifications: true },
+    //     });
 
-        const editedRow = rows.find((row) => row.id === id);
-        if (editedRow.isNew) {
-            setRows(rows.filter((row) => row.id !== id));
-        }
-    };
+    //     const editedRow = rows.find((row) => row.id === id);
+    //     if (editedRow.isNew) {
+    //         setRows(rows.filter((row) => row.id !== id));
+    //     }
+    // };
 
     const processRowUpdate = (newRow) => {
         const updatedRow = { ...newRow, isNew: false };

diff --git a/frontend/src/components/pages/CoexistenceCommittee.jsx b/frontend/src/components/pages/CoexistenceCommittee.jsx
@@ -81,7 +81,7 @@ const FormikTextField = ({
 const CoexistenceCommittee = () => {
     const { showSnack } = useSnackbar();
     const { isProgressVisible, showProgressbar, hideProgressbar } =
-        useProgressbar(); 
+        useProgressbar();
 
     // Maneja el envío del formulario
     const handleSubmit = async (values, { resetForm }) => {

diff --git a/frontend/src/components/pages/GoalsStats.jsx b/frontend/src/components/pages/GoalsStats.jsx
@@ -160,9 +160,6 @@ const AnalisisMetas = () => {
     const [goalsQuantity, setGoalsQuantity] = useState([]);
     const [yearsArray, setYearsArray] = useState([]);
     const [loading, setLoading] = useState(false);
-    const [currentMonth, setCurrentMonth] = useState('');
-    const [currentYear, setCurrentYear] = useState('');
-    const [campaigns, setCampaigns] = useState([]);
     const [initialValues, setInitialValues] = useState({});
     const navigate = useNavigate();
     const permissions = JSON.parse(localStorage.getItem('permissions'));
@@ -181,9 +178,6 @@ const AnalisisMetas = () => {
 
         const currentYear = currentDate.getFullYear();
 
-        setCurrentMonth(currentMonth);
-        setCurrentYear(currentYear);
-
         const basedInitialValues = {
             deliveryType: 'delivery',
             month: currentMonth,
@@ -297,25 +291,6 @@ const AnalisisMetas = () => {
         setRows(modifiedData);
     };
 
-    const getCampaignOptions = (data) => {
-        const campaigns = data.map((row) => row.campaign_goal).filter(Boolean);
-        const uniqueCampaigns = [...new Set(campaigns)];
-        const campaignOptions = uniqueCampaigns.map((campaign) => ({
-            value: campaign.toLowerCase(),
-            label:
-                campaign.charAt(0).toUpperCase() +
-                campaign.slice(1).toLowerCase(),
-        }));
-        const uniqueCampaignOptions = Array.from(
-            new Map(
-                campaignOptions.map((item) => [item['value'], item])
-            ).values()
-        );
-
-        console.log(uniqueCampaignOptions);
-        setCampaigns(uniqueCampaignOptions);
-    };
-
     const constructStats = (data, deliveryType) => {
         const stats = {
             metasCumplidas: 0,
@@ -339,29 +314,6 @@ const AnalisisMetas = () => {
         setGoalsQuantity(stats);
     };
 
-    const getAllGoals = async () => {
-        setLoading(true);
-        try {
-            const response = await fetch(`${getApiUrl().apiUrl}goals/`, {
-                method: 'GET',
-                credentials: 'include',
-            });
-
-            await handleError(response, showSnack);
-
-            if (response.status === 200) {
-                const data = await response.json();
-                getCampaignOptions(data);
-            }
-        } catch (error) {
-            if (getApiUrl().environment === 'development') {
-                console.error(error);
-            }
-        } finally {
-            setLoading(false);
-        }
-    };
-
     const getCurrentGoals = async () => {
         setLoading(true);
         try {
@@ -392,7 +344,6 @@ const AnalisisMetas = () => {
 
     useEffect(() => {
         getCurrentGoals();
-        getAllGoals();
     }, []);
 
     const currentColumns = [
@@ -478,21 +429,6 @@ const AnalisisMetas = () => {
         );
     }
 
-    const months = [
-        { value: 'ENERO', label: 'ENERO' },
-        { value: 'FEBRERO', label: 'FEBRERO' },
-        { value: 'MARZO', label: 'MARZO' },
-        { value: 'ABRIL', label: 'ABRIL' },
-        { value: 'MAYO', label: 'MAYO' },
-        { value: 'JUNIO', label: 'JUNIO' },
-        { value: 'JULIO', label: 'JULIO' },
-        { value: 'AGOSTO', label: 'AGOSTO' },
-        { value: 'SEPTIEMBRE', label: 'SEPTIEMBRE' },
-        { value: 'octubre', label: 'OCTUBRE' },
-        { value: 'NOVIEMBRE', label: 'NOVIEMBRE' },
-        { value: 'DICIEMBRE', label: 'DICIEMBRE' },
-    ];
-
     const stats = [
         { title: 'Metas Aceptadas', quantity: goalsQuantity.metasCumplidas },
         {

diff --git a/frontend/src/components/pages/Home.jsx b/frontend/src/components/pages/Home.jsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { getApiUrl } from '../../assets/getApi.js';
 import CarouselComponent from '../shared/Carousel';
 import { handleError } from '../../assets/handleError';
-import { EmblaCarousel } from '../shared/EmblaCarousel.jsx';
+// import { EmblaCarousel } from '../shared/EmblaCarousel.jsx';
 
 // Custom Hooks
 import { useSnackbar } from '../context/SnackbarContext';

diff --git a/frontend/src/components/pages/Login.jsx b/frontend/src/components/pages/Login.jsx
@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { Formik, Form, useField } from 'formik';
 import * as Yup from 'yup';
 import * as Sentry from '@sentry/react';
-import { Toaster, toast } from 'sonner';
+// import { Toaster, toast } from 'sonner';
 
 // Custom Hooks
 import { useSnackbar } from '../context/SnackbarContext';

diff --git a/frontend/src/components/pages/PayslipsPreview.jsx b/frontend/src/components/pages/PayslipsPreview.jsx
@@ -54,7 +54,7 @@ const columns = [
             new Intl.NumberFormat('es-CO', {
                 style: 'currency',
                 currency: 'COP',
-            }).format(value),   
+            }).format(value),
     },
     {
         field: 'bearing',

diff --git a/frontend/src/components/pages/Points.jsx b/frontend/src/components/pages/Points.jsx
@@ -1,8 +1,5 @@
 import { useState, useEffect } from 'react';
 
-// Libraries
-import { useNavigate } from 'react-router-dom';
-
 import { useSnackbar } from '../context/SnackbarContext';
 
 // Custom Components

diff --git a/frontend/src/components/pages/RiskEvents.jsx b/frontend/src/components/pages/RiskEvents.jsx
@@ -319,7 +319,6 @@ export const RiskEvent = () => {
             return (
                 <TextField
                     sx={{ width: '800px' }}
-                    InputLabelProps={{ shrink: true }}
                     multiline={multiline}
                     rows={rows}
                     type={type}
@@ -328,12 +327,14 @@ export const RiskEvent = () => {
                     {...field}
                     helperText={errorText}
                     error={!!errorText}
+                    slotProps={{
+                        inputLabel: { shrink: true },
+                    }}
                 />
             );
         } else if (type === 'date' || type === 'datetime-local') {
             return (
                 <TextField
-                    InputLabelProps={{ shrink: true }}
                     sx={{ width: '390px' }}
                     rows={rows}
                     type={type}
@@ -342,6 +343,9 @@ export const RiskEvent = () => {
                     {...field}
                     helperText={errorText}
                     error={!!errorText}
+                    slotProps={{
+                        inputLabel: { shrink: true },
+                    }}
                 />
             );
         } else if (multiline) {

diff --git a/frontend/src/components/pages/Vacations.jsx b/frontend/src/components/pages/Vacations.jsx
@@ -554,33 +554,32 @@ export const Vacations = () => {
             cellClassName: 'actions',
             getActions: ({ row }) => {
                 return [
-                    <Tooltip
-                        key={`tooltip-${row.id}`}
-                        title="Ver carta de respuesta de vacaciones"
-                        arrow
-                    >
-                        <GridActionsCellItem
-                            key={`open-response-letter-${row.id}`}
-                            icon={<FileOpenIcon />}
-                            disabled={row.status === 'PENDIENTE'}
-                            label="open-response-letter"
-                            sx={{
-                                color: 'primary.main',
-                            }}
-                            onClick={() => {
-                                window.open(
-                                    `${getApiUrl().apiUrl}vacation/${row.id}/get-response`,
-                                    '_blank'
-                                );
-                            }}
-                        />
+                    <Tooltip key={`tooltip-${row.id}`} arrow>
+                        <span>
+                            <GridActionsCellItem
+                                title="Ver carta de respuesta de vacaciones"
+                                key={`open-response-letter-${row.id}`}
+                                icon={<FileOpenIcon />}
+                                disabled={row.status === 'PENDIENTE'}
+                                label="open-response-letter"
+                                sx={{
+                                    color: 'primary.main',
+                                }}
+                                onClick={() => {
+                                    window.open(
+                                        `${getApiUrl().apiUrl}vacation/${row.id}/get-response`,
+                                        '_blank'
+                                    );
+                                }}
+                            />
+                        </span>
                     </Tooltip>,
                 ];
             },
         },
     ];
 
-    // const handleOpenDialog = () => setOpenVacation(true);
+    const handleOpenDialog = () => setOpenVacation(true);
 
     const CustomToolbar = () => {
         return (
@@ -595,21 +594,14 @@ export const Vacations = () => {
                         utf8WithBom: true,
                     }}
                 />
-                <Tooltip
-                    title="Dentro de unos días se habilitará la opción para solicitar vacaciones"
-                    arrow
+
+                <Button
+                    size="small"
+                    onClick={handleOpenDialog}
+                    startIcon={<BeachAccessIcon />}
                 >
-                    <span>
-                        <Button
-                            disabled
-                            size="small"
-                            // onClick={handleOpenDialog}
-                            startIcon={<BeachAccessIcon />}
-                        >
-                            Crear solicitud
-                        </Button>
-                    </span>
-                </Tooltip>
+                    Crear solicitud
+                </Button>
                 <Box sx={{ textAlign: 'end', flex: '1' }}>
                     <GridToolbarQuickFilter />
                 </Box>

diff --git a/frontend/src/components/shared/SwiperSlider.jsx b/frontend/src/components/shared/SwiperSlider.jsx
@@ -11,11 +11,9 @@ import '../../index.css';
 // Media
 import managersJr1 from '../../images/managers-jr/52716114.webp';
 import managersJr2 from '../../images/managers-jr/53069726.webp';
-import managersJr3 from '../../images/managers-jr/1014205170.webp';
 import managersJr4 from '../../images/managers-jr/1016002011.webp';
 import managersJr5 from '../../images/managers-jr/1016033764.webp';
 import managersJr6 from '../../images/managers-jr/91498957.webp';
-import managersJr7 from '../../images/managers-jr/79509094.webp';
 import managersJr8 from '../../images/managers-jr/28553156.webp';
 import managersJr9 from '../../images/managers-jr/1010178143.webp';
 

diff --git a/frontend/src/components/shared/VacationsRequest.jsx b/frontend/src/components/shared/VacationsRequest.jsx
@@ -288,7 +288,7 @@ const VacationsRequest = ({ openVacation, setOpenVacation, getVacations }) => {
 
     return (
         <Dialog
-            maxWidth
+            maxWidth={'md'}
             open={openVacation}
             onClose={handleCloseVacationDialog}
             aria-labelledby="alert-dialog-title"