@acvl/frontend-components 0.0.25 → 0.0.27

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, ButtonGroup, Menu, alpha as alpha$1, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
+import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, ButtonGroup, Menu, ListItemIcon, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, alpha as alpha$1, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import * as React from 'react';
 import React__default, { useCallback, useEffect, isValidElement, cloneElement, Children, createContext, useContext, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect, Suspense, forwardRef } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation, useLoaderData } from 'react-router-dom';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Controller, useForm, useWatch, useFieldArray, FormProvider } from 'react-hook-form';
 import { useSession, PageHeader, useNotifications } from '@toolpad/core';
@@ -41,7 +41,7 @@ import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import DialogContent from '@mui/material/DialogContent';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import debounce from 'lodash/debounce';
-import { get, invoke, map, find, forEach as forEach$1, findIndex, mergeWith, isArray, omit, set as set$1, every, includes as includes$1, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, debounce as debounce$1, some } from 'lodash';
+import { get, invoke, map, find, groupBy, forEach as forEach$1, findIndex, mergeWith, isArray, omit, set as set$1, every, includes as includes$1, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, debounce as debounce$1, some } from 'lodash';
 import { produce } from 'immer';
 import set from 'lodash/set';
 import get$1 from 'lodash/get';
@@ -73,6 +73,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import AddIcon from '@mui/icons-material/Add';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import LinearProgress$1 from '@mui/material/LinearProgress';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
 import { useGridApiContext, ToolbarButton, QuickFilter, QuickFilterTrigger, QuickFilterControl, QuickFilterClear, ColumnsPanelTrigger, Toolbar, useGridSelector, gridPaginationSelector, GridRow, GridRowEditStartReasons, GridRowModes, GridActionsCellItem, useGridApiRef, DataGrid, GridRowEditStopReasons, GridEditSingleSelectCell, GridEditInputCell, GridEditBooleanCell } from '@mui/x-data-grid';
 import Tooltip$1 from '@mui/material/Tooltip';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -94,6 +95,7 @@ import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-
 import { CSS } from '@dnd-kit/utilities';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToVerticalAxis, restrictToWindowEdges, restrictToParentElement } from '@dnd-kit/modifiers';
+import DrawIcon from '@mui/icons-material/Draw';
 import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { skipToken } from '@reduxjs/toolkit/query';
@@ -104,10 +106,12 @@ import { useDispatch, useSelector } from 'react-redux';
 
 const NormalOrIcon = (props) => {
     const theme = useTheme();
-    const belowLG = useMediaQuery(theme.breakpoints.down('lg'));
-    if ((belowLG && !(props.type == 'button')) || props.type == 'icon')
-        return (jsx(Tooltip, { title: props.buttonProps.children, children: jsx(IconButton, { ...props.buttonProps, children: props.buttonProps.startIcon }) }));
-    return (jsx(Button, { ...props.buttonProps }));
+    const belowLG = useMediaQuery(theme.breakpoints.down("lg"));
+    if ((belowLG && !(props.type == "button")) || props.type == "icon") {
+        const { startIcon, ...others } = props.buttonProps;
+        return (jsx(Tooltip, { title: props.buttonProps.children, children: jsx(IconButton, { ...others, children: startIcon }) }));
+    }
+    return jsx(Button, { ...props.buttonProps });
 };
 
 const EditButton = () => {
@@ -117,23 +121,23 @@ const EditButton = () => {
     }, [navigate]);
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.key === 'e') {
+        if (event.ctrlKey && event.key === "e") {
             event.preventDefault();
             handleClick();
         }
     }, [handleClick]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsx(NormalOrIcon, { buttonProps: {
-            color: 'secondary',
-            variant: 'contained',
+            color: "secondary",
+            variant: "contained",
             startIcon: jsx(EditIcon, {}),
             onClick: handleClick,
-            children: 'Editar',
+            children: "Editar",
         } }));
 };
 
@@ -25811,18 +25815,18 @@ const valueLabel = object({
 
 const MainDrawer = (props) => {
     const theme = useTheme();
-    return (jsx(Drawer, { variant: 'temporary', anchor: 'right', open: props.open, onClose: props.drawerToggle, sx: {
+    return (jsx(Drawer, { variant: "temporary", anchor: "right", open: props.open, onClose: props.drawerToggle, sx: {
             zIndex: 1202,
-            '& .MuiDrawer-paper': {
-                width: '100%',
+            "& .MuiDrawer-paper": {
+                width: "100%",
                 maxWidth: props.width ? props.width : 600,
                 background: theme.palette.background.default,
                 color: theme.palette.text.primary,
-                borderRight: 'none',
-                borderTopLeftRadius: '12px',
-                borderBottomLeftRadius: '12px',
-            }
-        }, color: 'inherit', ...props.drawerProps, children: jsxs(Grid, { container: true, direction: 'column', px: 4, py: 2, spacing: 2, children: [jsx(Grid, { display: 'flex', justifyContent: 'right', pb: 0, children: props.slots?.button ? props.slots.button : (jsx(Button, { color: 'error', startIcon: jsx(CancelIcon, {}), onClick: props.drawerToggle, children: "Cerrar" })) }), jsx(Grid, { children: jsx(PageHeader, { breadcrumbs: [], title: props.title }) }), jsx(Grid, { size: 12, container: true, position: 'relative', children: props.children })] }) }));
+                borderRight: "none",
+                borderTopLeftRadius: "12px",
+                borderBottomLeftRadius: "12px",
+            },
+        }, color: "inherit", ...props.drawerProps, children: jsxs(Grid, { container: true, direction: "column", px: 4, py: 2, spacing: 2, children: [jsx(Grid, { display: "flex", justifyContent: "right", pb: 0, children: props.slots?.button ? (props.slots.button) : (jsx(Button, { color: "error", startIcon: jsx(CancelIcon, {}), onClick: props.drawerToggle, children: "Cerrar" })) }), jsx(Grid, { children: jsx(PageHeader, { breadcrumbs: [], title: props.title }) }), jsx(Grid, { size: 12, container: true, position: "relative", children: props.children })] }) }));
 };
 
 const LoadingComponent = (props) => {
@@ -25881,60 +25885,49 @@ const _HistorialDrawer = (props) => {
 const HistorialDrawer = (props) => {
     const [open, setOpen] = useState(false);
     const handleDrawer = useCallback(() => {
-        setOpen(prevState => !prevState);
+        setOpen((prevState) => !prevState);
     }, []);
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.shiftKey && event.key === 'H') {
+        if (event.ctrlKey && event.shiftKey && event.key === "H") {
             event.preventDefault();
             handleDrawer();
         }
     }, [handleDrawer]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: 'Historial', children: jsx(IconButton, { color: 'primary', onClick: handleDrawer, sx: {
-                        position: 'absolute',
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Historial", children: jsx(IconButton, { color: "primary", onClick: handleDrawer, sx: {
+                        position: "absolute",
                         right: 0,
                     }, ...props.iconButtonProps, children: jsx(HistoryIcon, {}) }) }), jsx(_HistorialDrawer, { open: open, handleDrawer: handleDrawer, endpoint: props.endpoint })] }));
 };
 
-const buildListItems = (content) => {
-    const items = [];
-    const loop = (content, error_title) => {
-        if (Array.isArray(content)) {
-            items.push({ title: error_title ? (error_title.charAt(0).toUpperCase() + error_title.slice(1)).split('_').join(' ') : 'N/A', content: content.join(', ') });
-        }
-        else {
-            Object.keys(content).map((row_error) => {
-                loop(content[row_error], row_error);
-            });
-        }
-    };
-    loop(content);
-    return items;
-};
 const RowErrors = (props) => {
     return (jsx(List$1, { subheader: jsx(ListSubheader, { sx: {
                 bgcolor: red[50],
                 color: red[800],
-                fontWeight: 'bold',
-                borderRadius: '12px',
-                lineHeight: '40px'
+                fontWeight: "bold",
+                borderRadius: "12px",
+                lineHeight: "40px",
             }, children: `Hilera ${props.row}` }), sx: {
             bgcolor: red[50],
-            borderRadius: '12px',
-        }, children: buildListItems(props.data[props.row]).map((item) => {
+            borderRadius: "12px",
+        }, children: props.data.map((item) => {
+            const pre_name = item.name.split(".").at(-1);
+            const name = (pre_name.charAt(0).toUpperCase() + pre_name.slice(1))
+                .split("_")
+                .join(" ");
             return (jsx(ListItem$1, { sx: {
-                    py: 0
-                }, children: jsx(ListItemText, { primary: jsxs(Box, { children: [jsx(Typography$1, { variant: 'caption', pr: 0.5, sx: {
+                    py: 0,
+                }, children: jsx(ListItemText, { primary: jsxs(Box, { children: [jsx(Typography$1, { variant: "caption", pr: 0.5, sx: {
                                     color: red[800],
-                                }, children: `${item.title}:` }), jsx(Typography$1, { variant: 'caption', sx: {
+                                }, children: `${name}:` }), jsx(Typography$1, { variant: "caption", sx: {
                                     color: red[800],
-                                }, children: item.content })] }) }) }));
+                                }, children: item.reason.join(", ") })] }) }) }));
         }) }));
 };
 
@@ -25974,9 +25967,8 @@ const FileUploadBox = (props) => {
                     props.setValid(true);
                 })
                     .catch((e) => {
-                    const columnas_inv = get(e.data, "columnas_invalidas");
-                    if (columnas_inv)
-                        notifications.show(columnas_inv, { severity: "error" });
+                    if (e.data?.detail?.length > 0)
+                        notifications.show(e.data.detail[0], { severity: "error" });
                     props.setValid(false);
                 });
             });
@@ -26003,19 +25995,22 @@ const FileUploadBox = (props) => {
             onChange(null);
             setFile(null);
         };
+        const renderErrorRows = () => {
+            if (!error?.data?.invalid_params)
+                return;
+            const rows = groupBy(error?.data?.invalid_params, function (e) {
+                return e.name.split(".")[0];
+            });
+            if (!rows)
+                return;
+            return Object.entries(rows).map(([row, errors]) => (jsx(RowErrors, { row: row, data: errors }, row)));
+        };
         return (jsx(Box$1, { width: 1, children: jsxs(Stack, { spacing: 2, children: [!file && !isLoading && (jsxs(Box$1, { component: "div", width: 1, display: "flex", justifyContent: "center", alignItems: "center", border: "1.5px dashed", borderRadius: "12px", py: 4, px: 2, borderColor: grey[800], bgcolor: grey[50], ...getRootProps(), children: [jsx(VisuallyHiddenInput, { id: "file-upload", type: "file", ...getInputProps() }), jsx(FileUploadIcon, { sx: {
                                     color: grey[800],
                                     pr: 1,
                                 } }), jsx(Typography, { variant: "body2", sx: { color: grey[800] }, children: isDragActive
                                     ? "Soltar archivo aquí."
-                                    : "Arrastra un archivo aquí o haz clic para seleccionar uno." })] })), isLoading && (jsx(Box$1, { children: jsx(LinearProgress, { sx: { height: 5 } }) })), file && (jsx(FileBox, { file: file, handleRemove: handleRemove, loadingRemove: removerLoading })), error &&
-                        "data" in error &&
-                        Object.keys(error.data).map((row) => {
-                            if (typeof error.data[row] == "object") {
-                                return jsx(RowErrors, { row: row, data: error.data }, row);
-                            }
-                            return null;
-                        })] }) }));
+                                    : "Arrastra un archivo aquí o haz clic para seleccionar uno." })] })), isLoading && (jsx(Box$1, { children: jsx(LinearProgress, { sx: { height: 5 } }) })), file && (jsx(FileBox, { file: file, handleRemove: handleRemove, loadingRemove: removerLoading })), renderErrorRows()] }) }));
     };
     return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value } }) => {
             return jsx(Dropzone, { onChange: onChange, value: value });
@@ -26200,7 +26195,7 @@ async function manualCacheRefresh(api, id, dispatch, queryFulfilled, endpoints)
 const initialState$1 = {};
 // == crea el slice == //
 const snackProgress = createSlice({
-    name: 'snackProgress',
+    name: "snackProgress",
     initialState: initialState$1,
     // declarar acciones que se le pueden hacer a esta sección de la tienda
     reducers: {
@@ -26216,7 +26211,7 @@ const snackProgress = createSlice({
         closeProgressSnack(state, action) {
             return omit(state, action.payload);
         },
-    }
+    },
 });
 // exportar acciones
 const { openProgressSnack, updateProgressSnackData, closeProgressSnack } = snackProgress.actions;
@@ -26242,12 +26237,14 @@ const { changeTitle, } = settings.actions;
 var header = settings.reducer;
 
 const ControlledDropdown = (props) => {
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState("");
     const [options, setOptions] = useState(props.extraProps?.options ? props.extraProps?.options : []);
     const args = useMemo(() => {
         if (!props.extraProps?.queryArgs)
             return undefined;
-        return mergeSettings(props.extraProps?.queryArgs, { filters: { nombre__icontains: inputValue } });
+        return mergeSettings(props.extraProps?.queryArgs, {
+            filters: { nombre__icontains: inputValue },
+        });
     }, [inputValue, props.extraProps?.queryArgs]);
     const api = useAPI();
     const [getOpciones, { isLoading, isFetching, isError }] = api.useLazyGetComoOpcionesQuery();
@@ -26260,7 +26257,8 @@ const ControlledDropdown = (props) => {
     };
     const handleSearch = useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26273,7 +26271,7 @@ const ControlledDropdown = (props) => {
             });
         }
     }, [args, handleSearch, open]);
-    return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange, }, fieldState: { error }, }) => {
+    return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
             const handleChange = (_event, newValue) => {
                 onChange(newValue);
             };
@@ -26281,10 +26279,10 @@ const ControlledDropdown = (props) => {
                     setInputValue(newInputValue);
                 }, isOptionEqualToValue: (option, value) => {
                     return option.value === value.value;
-                }, filterOptions: props.extraProps.queryArgs ? (x) => x : undefined, fullWidth: true, size: 'small', disabled: !options || isError, renderInput: (params) => (jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : props.extraProps?.disableHT ? '' : ' ', slotProps: {
+                }, filterOptions: props.extraProps.queryArgs ? (x) => x : undefined, fullWidth: true, size: "small", disabled: !options || isError, renderInput: (params) => (jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : props.extraProps?.disableHT ? "" : " ", slotProps: {
                         input: {
                             ...params.InputProps,
-                            endAdornment: (jsxs(Fragment, { children: [(isLoading || isFetching) ? jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })),
+                            endAdornment: (jsxs(Fragment, { children: [isLoading || isFetching ? (jsx(CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
                         },
                     } })), ...props.fieldProps }));
         } }));
@@ -26313,13 +26311,15 @@ const ControlledPhoneNumber = (props) => {
 };
 
 const ControlledSelect = (props) => {
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState("");
     const [options, setOptions] = useState(props.extraProps?.options ? props.extraProps?.options : []);
     const [selectedAll, setSelectedAll] = useState(false);
     const args = useMemo(() => {
         if (!props.extraProps?.queryArgs)
             return undefined;
-        return mergeSettings(props.extraProps?.queryArgs, { filters: { nombre__icontains: inputValue } });
+        return mergeSettings(props.extraProps?.queryArgs, {
+            filters: { nombre__icontains: inputValue },
+        });
     }, [inputValue, props.extraProps?.queryArgs]);
     const api = useAPI();
     const [getOpciones, { isLoading, isFetching, isError }] = api.useLazyGetComoOpcionesQuery();
@@ -26334,7 +26334,8 @@ const ControlledSelect = (props) => {
     };
     const handleSearch = useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26343,12 +26344,14 @@ const ControlledSelect = (props) => {
     useEffect(() => {
         if (args && open)
             handleSearch(args, (filteredOptions) => {
-                setOptions([{ value: 'all', label: 'All' }].concat(filteredOptions));
+                setOptions([{ value: "all", label: "All" }].concat(filteredOptions));
             });
     }, [args, handleSearch, open]);
     return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
             const handleChange = (_event, newValue) => {
-                if (find(newValue, function (val) { return val.value == 'all'; })) {
+                if (find(newValue, function (val) {
+                    return val.value == "all";
+                })) {
                     if (selectedAll) {
                         setSelectedAll(false);
                         onChange(newValue.slice(1));
@@ -26372,10 +26375,10 @@ const ControlledSelect = (props) => {
                     setInputValue(newInputValue);
                 }, isOptionEqualToValue: (option, value) => {
                     return option.value === value.value;
-                }, filterOptions: props.extraProps.queryArgs ? (x) => x : undefined, multiple: true, disableCloseOnSelect: true, limitTags: 1, fullWidth: true, size: 'small', disabled: !options || isError, renderInput: (params) => (jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : '', slotProps: {
+                }, filterOptions: props.extraProps.queryArgs ? (x) => x : undefined, multiple: true, disableCloseOnSelect: true, limitTags: 1, fullWidth: true, size: "small", disabled: !options || isError, renderInput: (params) => (jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : "", slotProps: {
                         input: {
                             ...params.InputProps,
-                            endAdornment: (jsxs(Fragment, { children: [(isLoading || isFetching) ? jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })),
+                            endAdornment: (jsxs(Fragment, { children: [isLoading || isFetching ? (jsx(CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
                         },
                     } })), ...props.fieldProps, renderOption: (props, option, { selected }) => {
                     const { key, ...optionProps } = props;
@@ -26383,7 +26386,7 @@ const ControlledSelect = (props) => {
                 } }));
         } }));
 };
-ControlledSelect.displayName = 'ControlledSelect';
+ControlledSelect.displayName = "ControlledSelect";
 
 // ==============================|| DESLIZADOR CONTROLADO ||============================== //
 const ControlledSlider$1 = (props) => {
@@ -26416,19 +26419,27 @@ const ControlledText = (props) => {
     };
     return (
     // controlador
-    jsx(Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error }, }) => {
+    jsx(Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error } }) => {
             return (
             // campo de texto
-            jsx(TextField, { variant: 'outlined', size: 'small', id: props.name, label: props.label, value: value ? value.toString() : '', onChange: onChange, error: !!error, type: props.extraProps?.password ? showPassword ? 'text' : 'password' : 'text', helperText: error ? error.message : props.fieldProps?.helperText ? props.fieldProps.helperText : ' ', fullWidth: true, slotProps: {
+            jsx(TextField, { variant: "outlined", size: "small", id: props.name, label: props.label, value: value ? value.toString() : "", onChange: onChange, error: !!error, type: props.extraProps?.password
+                    ? showPassword
+                        ? "text"
+                        : "password"
+                    : "text", helperText: error
+                    ? error.message
+                    : props.fieldProps?.helperText
+                        ? props.fieldProps.helperText
+                        : " ", fullWidth: true, slotProps: {
                     input: {
                         // ícono de mostar u ocultar si es campo de contarseña
-                        endAdornment: props.extraProps?.password && (jsx(InputAdornment$1, { position: 'end', children: jsx(IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: 'end', size: 'large', sx: {
-                                    color: 'secondary.darker',
-                                    '&:hover': {
-                                        color: 'secondary.main',
-                                    }
-                                }, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) }))
-                    }
+                        endAdornment: props.extraProps?.password && (jsx(InputAdornment$1, { position: "end", children: jsx(IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: "end", size: "large", sx: {
+                                    color: "secondary.darker",
+                                    "&:hover": {
+                                        color: "secondary.main",
+                                    },
+                                }, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) })),
+                    },
                 }, ...props.fieldProps }));
         } }));
 };
@@ -26488,16 +26499,15 @@ const ControlledTimePicker = (props) => {
     const filedProps = useMemo(() => {
         const defaultProps = {
             slotProps: {
-                textField: { size: 'small' },
-                field: { clearable: true, },
-            }
+                textField: { size: "small" },
+                field: { clearable: true },
+            },
         };
         return merge$1({}, defaultProps, props.fieldProps);
     }, [props.fieldProps]);
-    return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error }, }) => {
-            const val = convertValueToDayjs(value, 'time');
-            return (jsxs(FormGroup, { sx: { width: 1 }, color: 'secondary', children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(TimePicker, { label: props.label, onChange: (v) => handleChange(v, 'time', onChange), value: val || null, ...filedProps }) }), !props.extraProps?.disableHT &&
-                        jsx(FormHelperText$1, { error: !!error, children: error ? error.message : ' ' })] }));
+    return (jsx(Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const val = convertValueToDayjs(value, "time");
+            return (jsxs(FormGroup, { sx: { width: 1 }, color: "secondary", children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(TimePicker, { label: props.label, onChange: (v) => handleChange(v, "time", onChange), value: val || null, ...filedProps }) }), !props.extraProps?.disableHT && (jsx(FormHelperText$1, { error: !!error, children: error ? error.message : " " }))] }));
         } }));
 };
 
@@ -26517,22 +26527,23 @@ const ControlledSlider = (props) => {
 
 const DeleteConfirmationDialog = (props) => {
     const notifications = useNotifications();
-    const pathname = 'temp';
-    const id = useMemo(() => props.id || pathname.split('/').at(-1), [pathname, props.id]);
+    const pathname = "temp";
+    const id = useMemo(() => props.id || pathname.split("/").at(-1), [pathname, props.id]);
     const [mutation] = props.mutation();
     const schema = object({ confirmation: string() });
     const form = useForm({
         resolver: zodResolver(schema),
-        defaultValues: { confirmation: '' },
+        defaultValues: { confirmation: "" },
     });
     const handleClose = () => {
         props.handleClose();
         form.reset();
     };
-    const confirmation = form.watch('confirmation').toUpperCase();
-    const disabled = useMemo(() => confirmation != 'ELIMINAR', [confirmation]);
+    const confirmation = form.watch("confirmation").toUpperCase();
+    const disabled = useMemo(() => confirmation != "ELIMINAR", [confirmation]);
     const onSubmitHandler = () => {
-        mutation({ id: id }).unwrap()
+        mutation({ id: id })
+            .unwrap()
             .then(() => {
             if (props.disableNavBack) {
                 handleClose();
@@ -26541,25 +26552,25 @@ const DeleteConfirmationDialog = (props) => {
                 // props.navigate(-1);
                 form.reset();
             }
-            notifications.show('Objeto removido exitosamente!', { severity: 'success' });
+            notifications.show("Objeto removido exitosamente!", { severity: "success" });
         })
             .catch((error) => {
             console.log(error);
-            notifications.show('Error', { severity: 'error' });
+            notifications.show("Error", { severity: "error" });
         });
     };
     const handleKeyDown = (event) => {
-        if (event.key === 'Enter' && !disabled)
+        if (event.key === "Enter" && !disabled)
             onSubmitHandler();
     };
-    return (jsxs(Dialog, { open: props.open, onClose: handleClose, children: [jsx(DialogTitle, { variant: 'h5', children: "Eliminar" }), jsxs(DialogContent$1, { children: [jsx(DialogContentText, { sx: { pb: 2 }, children: "\u00BFEst\u00E1 seguro que quiere eliminar el objeto?" }), jsx(Box, { id: 'eliminar-formulario', width: '100%', position: 'relative', children: jsx(ControlledText, { name: 'confirmation', control: form.control, fieldProps: {
+    return (jsxs(Dialog, { open: props.open, onClose: handleClose, children: [jsx(DialogTitle, { variant: "h5", children: "Eliminar" }), jsxs(DialogContent$1, { children: [jsx(DialogContentText, { sx: { pb: 2 }, children: "\u00BFEst\u00E1 seguro que quiere eliminar el objeto?" }), jsx(Box, { id: "eliminar-formulario", width: "100%", position: "relative", children: jsx(ControlledText, { name: "confirmation", control: form.control, fieldProps: {
                                 autoFocus: true,
                                 required: true,
-                                margin: 'dense',
+                                margin: "dense",
                                 label: "Escribir 'ELIMINAR' para confirmar.",
                                 fullWidth: true,
-                                variant: 'standard',
-                                helperText: '',
+                                variant: "standard",
+                                helperText: "",
                                 onKeyDown: handleKeyDown,
                             } }) })] }), jsxs(DialogActions$1, { children: [jsx(Button, { onClick: handleClose, children: "Cancelar" }), jsx(Button, { onClick: onSubmitHandler, disabled: disabled, children: "Eliminar" })] })] }));
 };
@@ -26574,23 +26585,23 @@ const DeleteButton = (props) => {
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.key === 'd') {
+        if (event.ctrlKey && event.key === "d") {
             event.preventDefault();
             handleClick();
         }
     }, [handleClick]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxs(Fragment, { children: [jsx(NormalOrIcon, { buttonProps: {
-                    color: 'error',
-                    variant: 'contained',
+                    color: "error",
+                    variant: "contained",
                     startIcon: jsx(DeleteIcon, {}),
                     onClick: handleClick,
-                    children: 'Eliminar',
+                    children: "Eliminar",
                 } }), jsx(DeleteConfirmationDialog, { open: open, handleClose: handleClose, ...props })] }));
 };
 
@@ -26601,104 +26612,104 @@ const SaveCancelButton = (props) => {
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.key === 'Escape') {
+        if (event.key === "Escape") {
             event.preventDefault();
             handleCancel();
         }
     }, [handleCancel]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxs(ButtonGroup, { sx: {
             maxHeight: 40,
         }, ...props.slotProps?.buttonGroup, children: [jsx(NormalOrIcon, { buttonProps: {
-                    color: 'error',
-                    variant: 'contained',
+                    color: "error",
+                    variant: "contained",
                     startIcon: jsx(CancelIcon, {}),
                     onClick: handleCancel,
                     sx: { height: 1 },
-                    children: 'Cancelar',
-                    ...props.slotProps?.cancelBtn
+                    children: "Cancelar",
+                    ...props.slotProps?.cancelBtn,
                 } }), jsx(NormalOrIcon, { buttonProps: {
-                    color: 'secondary',
-                    variant: 'contained',
+                    color: "secondary",
+                    variant: "contained",
                     startIcon: jsx(SaveIcon, {}),
-                    type: 'submit',
-                    form: 'formulario',
+                    type: "submit",
+                    form: "formulario",
                     sx: { height: 1 },
-                    children: 'Guardar',
-                    ...props.slotProps?.saveBtn
+                    children: "Guardar",
+                    ...props.slotProps?.saveBtn,
                 } })] }));
 };
 
 const CreateButtonBase = (props) => {
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.key === 'e') {
+        if (event.ctrlKey && event.key === "e") {
             event.preventDefault();
             props.handleClick();
         }
     }, []);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsx(NormalOrIcon, { buttonProps: {
-            id: 'create-button',
-            variant: 'contained',
-            color: 'secondary',
+            id: "create-button",
+            variant: "contained",
+            color: "secondary",
             startIcon: jsx(AddIcon, {}),
             onClick: props.handleClick,
-            'aria-controls': props.open ? 'create-menu' : undefined,
-            'aria-haspopup': true,
-            'aria-expanded': props.open ? 'true' : undefined,
+            "aria-controls": props.open ? "create-menu" : undefined,
+            "aria-haspopup": true,
+            "aria-expanded": props.open ? "true" : undefined,
             endIcon: jsx(KeyboardArrowDownIcon, {}),
-            children: 'Crear',
+            children: "Crear",
             ...props.buttonProps,
         } }));
 };
 
 const MenuItemWithLoading = (props) => {
     return (jsxs(MenuItem, { onClick: props.handleClick, sx: {
-            position: 'relative',
-        }, disabled: props.disabled || props.isLoading, children: [props.children, props.isLoading &&
-                jsx(Box, { position: 'absolute', width: 1, top: '50%', left: '50%', sx: {
-                        transform: 'translate(-50%, -50%)',
-                    }, px: 2, children: jsx(LinearProgress$1, {}) })] }));
+            position: "relative",
+        }, disabled: props.disabled || props.isLoading, children: [props.children, props.isLoading && (jsx(Box, { position: "absolute", width: 1, top: "50%", left: "50%", sx: {
+                    transform: "translate(-50%, -50%)",
+                }, px: 2, children: jsx(LinearProgress$1, {}) }))] }));
 };
 
 const StyledMenu = styled$1((props) => (jsx(Menu, { elevation: 0, anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right',
+        vertical: "bottom",
+        horizontal: "right",
     }, transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right',
+        vertical: "top",
+        horizontal: "right",
     }, ...props })))(({ theme }) => ({
-    '& .MuiPaper-root': {
+    "& .MuiPaper-root": {
         borderRadius: 6,
         marginTop: theme.spacing(1),
         minWidth: 180,
-        color: 'rgb(55, 65, 81)',
-        boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
-        '& .MuiMenu-list': {
-            padding: '4px 0',
+        color: "rgb(55, 65, 81)",
+        backgroundColor: theme.palette.primary.lighter,
+        boxShadow: "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+        "& .MuiMenu-list": {
+            padding: "4px 0",
         },
-        '& .MuiMenuItem-root': {
-            '& .MuiSvgIcon-root': {
-                fontSize: 18,
-                color: theme.palette.text.secondary,
-                marginRight: theme.spacing(1.5),
-            },
-            '&:active': {
-                backgroundColor: alpha$1(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        "& .MuiMenuItem-root": {
+            borderRadius: 12,
+            "&:hover": {
+                backgroundColor: theme.palette.primary.main,
+                color: "white",
+                "& .MuiSvgIcon-root": {
+                    color: "white",
+                },
             },
         },
-        ...theme.applyStyles('dark', {
+        ...theme.applyStyles("dark", {
             color: theme.palette.grey[300],
         }),
     },
@@ -26708,7 +26719,7 @@ const CreateButtonWithMenuOptions = (props) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = () => {
-        setAnchorEl(document.getElementById('create-button'));
+        setAnchorEl(document.getElementById("create-button"));
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -26722,20 +26733,22 @@ const CreateButtonWithMenuOptions = (props) => {
     };
     if (!props.permission)
         return null;
-    return (jsxs(Fragment, { children: [jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxs(StyledMenu, { id: 'create-menu', MenuListProps: {
-                    'aria-labelledby': 'create-menu-button',
-                }, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable && ([
-                        {
-                            title: 'CSV',
-                            endpoint: props.pathname,
-                        },
-                        ...(props.csv_upload.extraOptions || [])
-                    ].map((option, index) => {
-                        return (jsx(MenuItem, { onClick: () => {
-                                handleToggleOpen(option);
-                                handleClose();
-                            }, disableRipple: true, children: option.title }, index));
-                    })), jsx(MenuItem, { onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxs(StyledMenu, { id: "create-menu", MenuListProps: {
+                    "aria-labelledby": "create-menu-button",
+                }, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable &&
+                        [
+                            {
+                                title: "CSV",
+                                endpoint: props.pathname,
+                                icon: AttachFileIcon,
+                            },
+                            ...(props.csv_upload.extraOptions || []),
+                        ].map((option, index) => {
+                            return (jsxs(MenuItem, { onClick: () => {
+                                    handleToggleOpen(option);
+                                    handleClose();
+                                }, disableRipple: true, children: [option.icon && (jsx(ListItemIcon, { children: jsx(AttachFileIcon, {}) })), option.title] }, index));
+                        }), jsx(MenuItem, { onClick: () => {
                             props.navigate(`crear`);
                             handleClose();
                         }, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data }))] }));
@@ -26748,12 +26761,12 @@ const ButtonWithDrawer = (props) => {
         let setFunc = setInternalOpen;
         if (props.setOpen)
             setFunc = props.setOpen;
-        setFunc(prevState => !prevState);
+        setFunc((prevState) => !prevState);
     };
     const configuracionBase = {
-        variant: 'contained',
+        variant: "contained",
         fullWidth: true,
-        color: 'primary'
+        color: "primary",
     };
     const renderButton = () => {
         if (props.slots.button)
@@ -26762,7 +26775,10 @@ const ButtonWithDrawer = (props) => {
     };
     return (jsxs(Fragment, { children: [renderButton(), jsx(MainDrawer, { open: open, drawerToggle: handleClick, title: props.slots.drawer.title, slots: {
                     button: props.slots.drawer.button,
-                }, children: props.slots.drawer.content({ ...props.slotProps?.drawer?.content, handleClose: handleClick }) })] }));
+                }, children: props.slots.drawer.content({
+                    ...props.slotProps?.drawer?.content,
+                    handleClose: handleClick,
+                }) })] }));
 };
 
 const StatusBadge = (props) => {
@@ -26951,16 +26967,16 @@ const UncontrolledText = (props) => {
     const handleShowPassword = () => {
         setShowPassword(!showPassword);
     };
-    return (jsx(TextField, { variant: 'outlined', id: props.name, name: props.name, label: props.label, type: props.password ? showPassword ? 'text' : 'password' : 'text', helperText: props.textFieldProps?.helperText ? props.textFieldProps.helperText : ' ', slotProps: {
+    return (jsx(TextField, { variant: "outlined", id: props.name, name: props.name, label: props.label, type: props.password ? (showPassword ? "text" : "password") : "text", helperText: props.textFieldProps?.helperText ? props.textFieldProps.helperText : " ", slotProps: {
             input: {
                 // ícono de mostar u ocultar si es campo de contarseña
-                endAdornment: props.password && (jsx(InputAdornment$1, { position: 'end', children: jsx(IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: 'end', size: 'large', sx: {
-                            color: 'secondary.darker',
-                            '&:hover': {
-                                color: 'secondary.main',
-                            }
-                        }, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) }))
-            }
+                endAdornment: props.password && (jsx(InputAdornment$1, { position: "end", children: jsx(IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: "end", size: "large", sx: {
+                            color: "secondary.darker",
+                            "&:hover": {
+                                color: "secondary.main",
+                            },
+                        }, children: showPassword ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) })),
+            },
         }, ...props.textFieldProps }));
 };
 
@@ -27032,9 +27048,8 @@ const generateSchema = (columns, columnsFilter, id) => {
 };
 
 const FiltersPopper = (props) => {
-    // const params:any = useLoaderData();
-    // const id = params?.id;
-    const id = 1;
+    const params = useLoaderData();
+    const id = params?.id;
     const columns = useGridApiContext().current.getAllColumns();
     const [schema, defaultValues] = useMemo(() => generateSchema(columns, props.columnsFilter, id), [columns, id, props.columnsFilter]);
     const form = useForm({
@@ -27044,14 +27059,16 @@ const FiltersPopper = (props) => {
     const [dirty, setDirty] = useState(false);
     useEffect(() => {
         if (props.filters.filterModel.items) {
-            if (!every(props.filters.filterModel.items, function (_value, key) { return includes$1(props.protectFilters, key); })) {
+            if (!every(props.filters.filterModel.items, function (_value, key) {
+                return includes$1(props.protectFilters, key);
+            })) {
                 setDirty(true);
             }
             form.reset(merge$2({}, defaultValues, props.filters.filterModel.items));
         }
     }, [defaultValues, props.filters.filterModel.items, form, props.protectFilters]);
     const handleClose = (event) => {
-        if (props.menuRef.current && event?.target.tagName == 'BODY')
+        if (props.menuRef.current && event?.target.tagName == "BODY")
             return;
         props.setOpen(false);
     };
@@ -27059,9 +27076,9 @@ const FiltersPopper = (props) => {
         setDirty(false);
         props.filters.setFilterModel(produce((draft) => {
             forEach$1(props.filters.filterModel.items, function (_value, key) {
-                if (['ordering', 'search'].concat(props.protectFilters || []).includes(key))
+                if (["ordering", "search"].concat(props.protectFilters || []).includes(key))
                     return;
-                delete draft['items'][key];
+                delete draft["items"][key];
             });
         }));
         form.reset(defaultValues);
@@ -27069,75 +27086,82 @@ const FiltersPopper = (props) => {
     };
     const onSubmitHandler = (submitData) => {
         props.filters.setFilterModel(produce((draft) => {
-            draft['items'] = { ...draft['items'], ...submitData };
+            draft["items"] = { ...draft["items"], ...submitData };
         }));
         handleClose();
     };
     const onError = (errors) => {
         console.log(errors);
     };
-    return (jsx(Box, { id: 'filtros', children: jsx(Popper, { id: 'filters-menu', open: props.open, anchorEl: props.menuRef.current, placement: "bottom-end", transition: true, sx: { zIndex: 1202 }, children: ({ TransitionProps }) => (jsx(Grow$1, { ...TransitionProps, timeout: 350, children: jsx(Paper, { elevation: 5, sx: { zIndex: 5 }, children: jsx(ClickAwayListener, { onClickAway: handleClose, children: jsxs(Grid, { size: 12, container: true, padding: 2, width: 350, maxWidth: '100%', children: [jsx(Grid, { size: 12, container: true, rowSpacing: 2, maxHeight: 300, overflow: 'auto', children: columns.map((column, index) => {
+    return (jsx(Box, { id: "filtros", children: jsx(Popper, { id: "filters-menu", open: props.open, anchorEl: props.menuRef.current, placement: "bottom-end", transition: true, sx: { zIndex: 1202 }, children: ({ TransitionProps }) => (jsx(Grow$1, { ...TransitionProps, timeout: 350, children: jsx(Paper, { elevation: 5, sx: { zIndex: 5 }, children: jsx(ClickAwayListener, { onClickAway: handleClose, children: jsxs(Grid, { size: 12, container: true, padding: 2, width: 350, maxWidth: "100%", children: [jsx(Grid, { size: 12, container: true, rowSpacing: 2, maxHeight: 300, overflow: "auto", children: columns.map((column, index) => {
                                         if (column.input)
-                                            return (jsxs(Grid, { size: 12, container: true, direction: 'column', spacing: 0, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { fontWeight: 'bold', gutterBottom: true, children: column.filterName || column.headerName }) }), jsx(Grid, { size: 12, children: Children.map(column.input, (child) => {
-                                                            let addedProps = { control: form.control };
-                                                            if (column.type == 'number') {
+                                            return (jsxs(Grid, { size: 12, container: true, direction: "column", spacing: 0, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { fontWeight: "bold", gutterBottom: true, children: column.filterName ||
+                                                                column.headerName }) }), jsx(Grid, { size: 12, children: Children.map(column.input, (child) => {
+                                                            let addedProps = {
+                                                                control: form.control,
+                                                            };
+                                                            if (column.type == "number") {
                                                                 addedProps = {
                                                                     ...addedProps,
                                                                     extraProps: {
-                                                                        ...child.props.extraProps,
+                                                                        ...child.props
+                                                                            .extraProps,
                                                                         getValue: form.getValues,
                                                                         setValue: form.setValue,
-                                                                    }
+                                                                    },
                                                                 };
                                                             }
                                                             return cloneElement(child, {
                                                                 ...child.props,
-                                                                ...addedProps
+                                                                ...addedProps,
                                                             });
                                                         }) })] }, index));
                                         return null;
-                                    }) }), jsx(Grid, { size: 12, py: 2, children: jsx(Divider, {}) }), jsxs(Grid, { size: 12, display: 'flex', justifyContent: 'space-evenly', children: [jsx(Button, { disabled: (!form.formState.isDirty || props.disableQuickSearch) && !dirty, startIcon: jsx(ClearIcon$1, {}), variant: 'outlined', onClick: handleClear, children: "Limpiar" }), jsx(Button, { loading: props.disableQuickSearch, disabled: !form.formState.isDirty, startIcon: jsx(FilterAltIcon, {}), variant: 'outlined', onClick: form.handleSubmit(onSubmitHandler, onError), children: "Aplicar" })] })] }) }) }) })) }) }));
+                                    }) }), jsx(Grid, { size: 12, py: 2, children: jsx(Divider, {}) }), jsxs(Grid, { size: 12, display: "flex", justifyContent: "space-evenly", children: [jsx(Button, { disabled: (!form.formState.isDirty ||
+                                                props.disableQuickSearch) &&
+                                                !dirty, startIcon: jsx(ClearIcon$1, {}), variant: "outlined", onClick: handleClear, children: "Limpiar" }), jsx(Button, { loading: props.disableQuickSearch, disabled: !form.formState.isDirty, startIcon: jsx(FilterAltIcon, {}), variant: "outlined", onClick: form.handleSubmit(onSubmitHandler, onError), children: "Aplicar" })] })] }) }) }) })) }) }));
 };
 
 const FiltersButton = (props) => {
     const [open, setOpen] = useState(false);
     const menuRef = useRef(null);
     const handleClick = () => {
-        setOpen(prevState => !prevState);
+        setOpen((prevState) => !prevState);
     };
     const filterCount = useMemo(() => {
         return countBy(Object.entries(props.filters.filterModel.items), function (filter) {
             const key = filter[0];
             const value = filter[1];
-            if (key == 'ordering' || key == 'search')
+            if (key == "ordering" || key == "search")
                 return;
-            if (props.protectFilters && findIndex(props.protectFilters, function (x) { return x == key; }) > -1)
+            if (props.protectFilters &&
+                findIndex(props.protectFilters, function (x) {
+                    return x == key;
+                }) > -1)
                 return;
             return (isNumber(value) && value > 0) || !isEmpty$1(value) || isBoolean(value);
         }).true;
-    }, [
-        props.filters.filterModel.items, props.protectFilters
-    ]);
+    }, [props.filters.filterModel.items, props.protectFilters]);
     // ===== || ABRIR CON CTRL + Shift + F || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.shiftKey && event.key === 'F') {
+        if (event.ctrlKey && event.shiftKey && event.key === "F") {
             event.preventDefault();
             setOpen(true);
         }
-        else if (event.key === 'Escape' && open) {
+        else if (event.key === "Escape" && open) {
             setOpen(false);
         }
     }, [open]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsxs(Fragment, { children: [jsx(Tooltip$1, { title: "Filtros", children: jsx(ToolbarButton, { ref: menuRef, id: "filters-menu-trigger", "aria-controls": "filters-menu", "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, color: 'default', onClick: handleClick, onKeyDown: key => {
-                        if (key.key == 'Escape')
+    return (jsxs(Fragment, { children: [jsx(Tooltip$1, { title: "Filtros", children: jsx(ToolbarButton, { ref: menuRef, id: "filters-menu-trigger", "aria-controls": "filters-menu", "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, color: "default", onClick: handleClick, onKeyDown: (key) => {
+                        if (key.key == "Escape")
                             setOpen(false);
-                    }, className: 'my-icon-button', children: jsx(Badge, { badgeContent: filterCount, color: "primary", children: jsx(FilterListIcon, { fontSize: "small" }) }) }) }), jsx(FiltersPopper, { ...props, menuRef: menuRef, open: open, setOpen: setOpen })] }));
+                    }, className: "my-icon-button", children: jsx(Badge, { badgeContent: filterCount, color: "primary", children: jsx(FilterListIcon, { fontSize: "small" }) }) }) }), jsx(FiltersPopper, { ...props, menuRef: menuRef, open: open, setOpen: setOpen })] }));
 };
 
 const ExportCSV = (props) => {
@@ -27149,41 +27173,46 @@ const ExportCSV = (props) => {
     const handleClick = () => {
         const extraItems = { variant: props.slots?.variant };
         if (props.rowSelectionModel.ids.size > 0)
-            extraItems[`${props.slots?.column_key || 'id'}__in`] = Array.from(props.rowSelectionModel.ids).join(',');
-        const filters = merge$2({}, omit(props.filterModel, map(props.ignore?.filters, function (filter) { return `items.${filter}`; }) || []), { items: extraItems });
+            extraItems[`${props.slots?.column_key || "id"}__in`] = Array.from(props.rowSelectionModel.ids).join(",");
+        const filters = merge$2({}, omit(props.filterModel, map(props.ignore?.filters, function (filter) {
+            return `items.${filter}`;
+        }) || []), { items: extraItems });
         descargarCSV({
-            endpoint: endpoint, filterModel: filters, sortModel: props.sortModel, ignoreSort: props.ignore?.sort,
-        }).unwrap()
+            endpoint: endpoint,
+            filterModel: filters,
+            sortModel: props.sortModel,
+            ignoreSort: props.ignore?.sort,
+        })
+            .unwrap()
             .then((response) => {
             const file = document.createElement("a");
             file.href = response.file;
             file.download = response.filename;
             file.click();
-            notifications.show('CSV descargado!', { severity: 'success' });
+            notifications.show("CSV descargado!", { severity: "success" });
             props.handleClick();
         })
             .catch((error) => {
             console.log(error);
-            notifications.show('Error al descargar CSV.', { severity: 'error' });
+            notifications.show("Error al descargar CSV.", { severity: "error" });
         });
     };
-    return (jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading: isLoading, disabled: props.disabledWithoutSelection && !props.rowSelectionModel.ids.size, children: props.slots?.title || 'Descargar como CSV' }, 'export-dg-csv'));
+    return (jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading: isLoading, disabled: props.disabledWithoutSelection && !props.rowSelectionModel.ids.size, children: props.slots?.title || "Descargar como CSV" }, "export-dg-csv"));
 };
 
 const ExportButton = (props) => {
     const [exportMenuOpen, setExportMenuOpen] = useState(false);
     const exportMenuTriggerRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Exportar", children: jsx(ToolbarButton, { ref: exportMenuTriggerRef, id: "export-menu-trigger", "aria-controls": "export-menu", "aria-haspopup": "true", "aria-expanded": exportMenuOpen ? 'true' : undefined, onClick: () => setExportMenuOpen(true), className: 'my-icon-button', children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }), jsxs(Menu$1, { id: "export-menu", anchorEl: exportMenuTriggerRef.current, open: exportMenuOpen, onClose: () => setExportMenuOpen(false), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Exportar", children: jsx(ToolbarButton, { ref: exportMenuTriggerRef, id: "export-menu-trigger", "aria-controls": "export-menu", "aria-haspopup": "true", "aria-expanded": exportMenuOpen ? "true" : undefined, onClick: () => setExportMenuOpen(true), className: "my-icon-button", children: jsx(FileDownloadIcon, { fontSize: "small" }) }) }), jsxs(Menu$1, { id: "export-menu", anchorEl: exportMenuTriggerRef.current, open: exportMenuOpen, onClose: () => setExportMenuOpen(false), anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, slotProps: {
                     list: {
-                        'aria-labelledby': 'export-menu-trigger',
+                        "aria-labelledby": "export-menu-trigger",
                     },
-                }, children: [!props.csvProps?.hide &&
-                        jsx(ExportCSV, { handleClick: () => setExportMenuOpen(false), filterModel: props.filterModel, sortModel: props.sortModel, rowSelectionModel: props.rowSelectionModel, slots: {
-                                endpoint: props.csvProps?.endpoint
-                            } }), props.extraOptions?.map(item => {
+                }, children: [!props.csvProps?.hide && (jsx(ExportCSV, { handleClick: () => setExportMenuOpen(false), filterModel: props.filterModel, sortModel: props.sortModel, rowSelectionModel: props.rowSelectionModel, slots: {
+                            endpoint: props.csvProps?.endpoint,
+                        } })), props.extraOptions?.map((item) => {
                         const csvExport = item.props.csvExport;
-                        const remainingProps = omit(item.props, 'csvExport');
-                        return (item.element({
+                        const remainingProps = omit(item.props, "csvExport");
+                        return item.element({
                             handleClick: () => setExportMenuOpen(false),
                             filterModel: props.filterModel,
                             sortModel: props.sortModel,
@@ -27192,7 +27221,7 @@ const ExportButton = (props) => {
                                 ...csvExport,
                             },
                             ...remainingProps,
-                        }));
+                        });
                     })] })] }));
 };
 
@@ -27200,34 +27229,33 @@ const ColumnsButton = () => {
     const apiRef = useGridApiContext();
     const allCols = apiRef.current.getAllColumns().length;
     const visibleCols = apiRef.current.getVisibleColumns().length;
-    return (jsx(Tooltip, { title: "Columnas", children: jsx(ColumnsPanelTrigger, { render: jsx(ToolbarButton, { className: 'my-icon-button' }), children: jsx(Badge, { color: 'primary', variant: 'dot', invisible: visibleCols >= allCols, children: jsx(ViewColumnIcon, { fontSize: "small" }) }) }) }));
+    return (jsx(Tooltip, { title: "Columnas", children: jsx(ColumnsPanelTrigger, { render: jsx(ToolbarButton, { className: "my-icon-button" }), children: jsx(Badge, { color: "primary", variant: "dot", invisible: visibleCols >= allCols, children: jsx(ViewColumnIcon, { fontSize: "small" }) }) }) }));
 };
 
 const RefreshButton = (props) => {
     // ===== || EJECUTAR CON CTRL + Shift + R || ===== //
     const handleKeyPress = useCallback((event) => {
-        if (event.ctrlKey && event.shiftKey && event.key === 'R') {
+        if (event.ctrlKey && event.shiftKey && event.key === "R") {
             event.preventDefault();
             if (props.refetch)
                 props.refetch();
         }
     }, [props]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsx(Tooltip$1, { title: 'Refrescar', children: jsx(ToolbarButton, { onClick: props.refetch, children: jsx(RefreshIcon, { fontSize: 'small' }) }) }));
+    return (jsx(Tooltip$1, { title: "Refrescar", children: jsx(ToolbarButton, { onClick: props.refetch, children: jsx(RefreshIcon, { fontSize: "small" }) }) }));
 };
 
 const CustomToolbar = (props) => {
     const [expanded, setExpanded] = useState(true);
     return (jsx(Toolbar, { style: {
-            minHeight: expanded ? 'inherit' : '10px',
-        }, children: expanded ? (jsxs(Fragment, { children: [jsxs(Stack, { direction: 'row', width: 0.5, justifyContent: 'left', children: [!props.buttons?.refresh?.hide && jsx(RefreshButton, { refetch: props.buttons?.refresh?.refetch }), !(props.buttons?.refresh?.hide || props.buttons?.export?.hide) && jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), !props.buttons?.export?.hide && (jsx(ExportButton, { filterModel: props.filters.filterModel, sortModel: props.sortModel, rowSelectionModel: props.selection, ...props.buttons.export }))] }), jsx(Box, { width: 1, display: 'flex', justifyContent: 'center', alignItems: 'top', children: jsx(IconButton, { size: 'small', onClick: () => setExpanded(false), children: jsx(ExpandLessIcon, {}) }) }), jsxs(Stack, { direction: 'row', width: 0.5, justifyContent: 'right', children: [jsx(ColumnsButton, {}), !props.buttons.filters?.hide &&
-                            jsxs(Fragment, { children: [jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(FiltersButton, { ...props })] }), jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(QuickSearch, { disableQuickSearch: props.disableQuickSearch, filters: props.filters }), props.extraButtons &&
-                            props.extraButtons.map((button, index) => (jsxs(Box, { display: 'flex', children: [jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(Tooltip$1, { title: button.label, children: jsx(ToolbarButton, { onClick: () => button.onClick(), className: 'my-icon-button', ...button.buttonProps, children: jsx(button.icon, { fontSize: "small" }) }) })] }, `toolbar-button-${index}`))), jsx(SelectedRowsButton, { selection: props.selection, extraActions: props.extraActions })] })] })) : (jsx(Box, { width: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', children: jsx(IconButton, { onClick: () => setExpanded(true), children: jsx(ExpandMoreIcon, {}) }) })) }));
+            minHeight: expanded ? "inherit" : "10px",
+        }, children: expanded ? (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", width: 0.5, justifyContent: "left", children: [!props.buttons?.refresh?.hide && (jsx(RefreshButton, { refetch: props.buttons?.refresh?.refetch })), !(props.buttons?.refresh?.hide || props.buttons?.export?.hide) && (jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } })), !props.buttons?.export?.hide && (jsx(ExportButton, { filterModel: props.filters.filterModel, sortModel: props.sortModel, rowSelectionModel: props.selection, ...props.buttons.export }))] }), jsx(Box, { width: 1, display: "flex", justifyContent: "center", alignItems: "top", children: jsx(IconButton, { size: "small", onClick: () => setExpanded(false), children: jsx(ExpandLessIcon, {}) }) }), jsxs(Stack, { direction: "row", width: 0.5, justifyContent: "right", children: [jsx(ColumnsButton, {}), !props.buttons.filters?.hide && (jsxs(Fragment, { children: [jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(FiltersButton, { ...props })] })), jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(QuickSearch, { disableQuickSearch: props.disableQuickSearch, filters: props.filters }), props.extraButtons &&
+                            props.extraButtons.map((button, index) => (jsxs(Box, { display: "flex", children: [jsx(Divider$1, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsx(Tooltip$1, { title: button.label, children: jsx(ToolbarButton, { onClick: () => button.onClick(), className: "my-icon-button", ...button.buttonProps, children: jsx(button.icon, { fontSize: "small" }) }) })] }, `toolbar-button-${index}`))), jsx(SelectedRowsButton, { selection: props.selection, extraActions: props.extraActions })] })] })) : (jsx(Box, { width: 1, display: "flex", justifyContent: "center", alignItems: "center", children: jsx(IconButton, { onClick: () => setExpanded(true), children: jsx(ExpandMoreIcon, {}) }) })) }));
 };
 
 const StyledGridOverlay = styled$1('div')(({ theme }) => ({
@@ -27265,20 +27293,22 @@ function CustomPagination() {
 }
 
 const DraggableRow = (params) => {
-    const { attributes, listeners, setNodeRef, transform, transition, } = useSortable({ id: params.rowId.toString() });
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: params.rowId.toString(),
+    });
     const style = {
         transform: CSS.Transform.toString(transform),
-        transition
+        transition,
     };
-    return (jsxs(Box, { display: 'flex', ref: setNodeRef, style: style, children: [jsx(Box, { ...attributes, ...listeners, sx: {
-                    width: '20px',
+    return (jsxs(Box, { display: "flex", ref: setNodeRef, style: style, children: [jsx(Box, { ...attributes, ...listeners, sx: {
+                    width: "20px",
                     height: params.rowHeight,
-                    background: 'repeating-linear-gradient( 45deg, #e0e0e0, #e0e0e0 5px, transparent 5px, transparent 10px)',
-                    borderTop: '1px solid rgba(224, 224, 224, 1)',
-                    cursor: 'grab',
-                    '&:active': {
-                        cursor: 'grabbing',
-                    }
+                    background: "repeating-linear-gradient( 45deg, #e0e0e0, #e0e0e0 5px, transparent 5px, transparent 10px)",
+                    borderTop: "1px solid rgba(224, 224, 224, 1)",
+                    cursor: "grab",
+                    "&:active": {
+                        cursor: "grabbing",
+                    },
                 } }), jsx(GridRow, { ...params })] }));
 };
 
@@ -27295,38 +27325,42 @@ const EditGridWrapper = (props) => {
     const handleClickEdit = () => {
         if (edit)
             handleCancelarEdit();
-        setEdit(prevState => !prevState);
+        setEdit((prevState) => !prevState);
     };
     const processRowUpdate = async (newRow, originalRow) => {
         const original_data = jsonForm({ submitData: originalRow });
-        const data = jsonForm({ submitData: newRow, ...(props.parser ? { props: props.parser } : []) });
+        const data = jsonForm({
+            submitData: newRow,
+            ...(props.parser ? { props: props.parser } : []),
+        });
         if (isEqual$1(data, original_data))
             return originalRow;
         try {
             const result = await editMutation(data).unwrap();
-            setErrors(prevState => produce(prevState, draft => {
+            setErrors((prevState) => produce(prevState, (draft) => {
                 delete draft[newRow.id];
             }));
             if (props?.postAction)
                 props.postAction(result);
-            notifications.show(`Información actualizada!`, { severity: 'success' });
+            notifications.show(`Información actualizada!`, { severity: "success" });
             return result.list;
         }
         catch (e) {
-            setErrors(prevState => produce(prevState, draft => {
-                draft[newRow.id] = get(e, 'data');
+            setErrors((prevState) => produce(prevState, (draft) => {
+                draft[newRow.id] = get(e, "data.invalid_params");
             }));
-            notifications.show('Error actualizando información!', { severity: 'error' });
+            notifications.show("Error actualizando información!", { severity: "error" });
         }
     };
+    const handleProcessRowUpdateError = () => { };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
         if (props.permission) {
-            if (event.ctrlKey && event.shiftKey && event.key === 'E') {
+            if (event.ctrlKey && event.shiftKey && event.key === "E") {
                 event.preventDefault();
                 setEdit(true);
             }
-            else if (event.key === 'Escape' && event.shiftKey && edit) {
+            else if (event.key === "Escape" && event.shiftKey && edit) {
                 event.preventDefault();
                 handleCancelarEdit();
                 setEdit(false);
@@ -27334,9 +27368,9 @@ const EditGridWrapper = (props) => {
         }
     }, [edit, props.permission]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     // ========================= || DRAG N DROP || ========================= //
@@ -27353,7 +27387,10 @@ const EditGridWrapper = (props) => {
         if (over) {
             const activeRow = rows.find((row) => row.id == active.id);
             const overRow = rows.find((row) => row.id == over.id);
-            const mutationArgs = { ...props.dnd?.args, id: activeRow.id };
+            const mutationArgs = {
+                ...props.dnd?.args,
+                id: activeRow.id,
+            };
             mutationArgs[field] = get(overRow, field);
             editMutation(mutationArgs);
         }
@@ -27371,33 +27408,38 @@ const EditGridWrapper = (props) => {
         slotProps: {
             toolbar: {
                 extraButtons: [
-                    ...(props.permission && !props.disabled ? [{
-                            label: edit ? 'Cancelar' : 'Editar',
-                            icon: edit ? CancelIcon : EditIcon,
-                            onClick: handleClickEdit,
-                        }] : []),
-                ]
-            }
+                    ...(props.permission && !props.disabled
+                        ? [
+                            {
+                                label: edit ? "Cancelar" : "Editar",
+                                icon: edit ? CancelIcon : EditIcon,
+                                onClick: handleClickEdit,
+                            },
+                        ]
+                        : []),
+                ],
+            },
         },
         onRowEditStart: ({ reason, row }, event) => {
-            if (!get(row, `obj_permissions.edit`) || (reason === GridRowEditStartReasons.cellDoubleClick && !edit)) {
+            if (!get(row, `obj_permissions.edit`) ||
+                (reason === GridRowEditStartReasons.cellDoubleClick && !edit)) {
                 event.defaultMuiPrevented = true;
             }
         },
         // edit
         checkboxSelection: !edit,
         ...(edit ? { onRowClick: undefined } : []),
-        editMode: 'row',
+        editMode: "row",
         rowModesModel: rowModesModel,
         onRowModesModelChange: setRowModesModel,
         processRowUpdate: processRowUpdate,
+        onProcessRowUpdateError: handleProcessRowUpdateError,
         loadingParams: [loadingMutation],
     }, props.dataGridProps);
-    const renderEditGrid = () => (jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [
-            restrictToVerticalAxis,
-            restrictToWindowEdges,
-            restrictToParentElement
-        ], autoScroll: false, children: jsx(SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
+    const renderEditGrid = () => (jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges, restrictToParentElement], autoScroll: false, children: jsx(SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: verticalListSortingStrategy, children: props.renderFunction({
+                ...props.renderFunctionProps,
+                dataGridProps: editGridProps,
+            }) }) }));
     return renderEditGrid();
 };
 
@@ -27418,43 +27460,47 @@ const editColumn = (props) => {
             [id]: { mode: GridRowModes.View, ignoreModifications: true },
         });
     };
-    return [{
-            field: 'edit',
-            headerName: 'Editar',
-            type: 'actions',
+    return [
+        {
+            field: "edit",
+            headerName: "Editar",
+            type: "actions",
             width: 80,
-            cellClassName: 'actions',
+            cellClassName: "actions",
             getActions: ({ id, row }) => {
-                const canEdit = get$1(row, 'obj_permissions.edit');
+                const canEdit = get$1(row, "obj_permissions.edit");
                 const isInEditMode = props.rowModesModel[id]?.mode === GridRowModes.Edit;
                 if (isInEditMode) {
                     return [
-                        jsx(GridActionsCellItem, { icon: jsx(SaveIcon, {}), label: 'Guardar', color: 'primary', onClick: handleSaveClick(id) }, 'save'),
-                        jsx(GridActionsCellItem, { icon: jsx(CancelIcon, {}), label: 'Cancelar', className: 'textPrimary', onClick: handleCancelClick(id), color: 'inherit' }, 'cancel'),
+                        jsx(GridActionsCellItem, { icon: jsx(SaveIcon, {}), label: "Guardar", color: "primary", onClick: handleSaveClick(id) }, "save"),
+                        jsx(GridActionsCellItem, { icon: jsx(CancelIcon, {}), label: "Cancelar", className: "textPrimary", onClick: handleCancelClick(id), color: "inherit" }, "cancel"),
                     ];
                 }
                 return [
-                    jsx(GridActionsCellItem, { icon: jsx(EditIcon, { sx: { color: canEdit ? 'black' : 'inherit' } }), label: 'Editar', className: 'textPrimary', onClick: handleEditClick(id), disabled: !canEdit }, 'edit'),
+                    jsx(GridActionsCellItem, { icon: jsx(EditIcon, { sx: { color: canEdit ? "black" : "inherit" } }), label: "Editar", className: "textPrimary", onClick: handleEditClick(id), disabled: !canEdit }, "edit"),
                 ];
-            }
-        }];
+            },
+        },
+    ];
 };
 
 const deleteColumn = (props) => {
     if (!props.displayDelete)
         return [];
-    return [{
-            field: 'delete',
-            headerName: 'Eliminar',
+    return [
+        {
+            field: "delete",
+            headerName: "Eliminar",
             width: 80,
-            cellClassName: 'actions',
+            cellClassName: "actions",
             renderCell: ({ id, row }) => {
                 const canDelete = get$1(row, `obj_permissions.delete`, false);
                 return [
-                    jsx(GridActionsCellItem, { icon: jsx(DeleteIcon, {}), label: 'Eliminar', className: 'textPrimary', onClick: props.handleOpen(id), color: 'primary', disabled: !canDelete }, 'delete')
+                    jsx(GridActionsCellItem, { icon: jsx(DeleteIcon, {}), label: "Eliminar", className: "textPrimary", onClick: props.handleOpen(id), color: "primary", disabled: !canDelete }, "delete"),
                 ];
-            }
-        }];
+            },
+        },
+    ];
 };
 
 const DeleteGridWrapper = (props) => {
@@ -27468,25 +27514,25 @@ const DeleteGridWrapper = (props) => {
         setDeleteRowId(undefined);
     };
     const handleClickDelete = () => {
-        setDeleting(prevState => !prevState);
+        setDeleting((prevState) => !prevState);
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
         if (props.permission) {
-            if (event.ctrlKey && event.shiftKey && event.key === 'D') {
+            if (event.ctrlKey && event.shiftKey && event.key === "D") {
                 event.preventDefault();
                 setDeleting(true);
             }
-            else if (event.key === 'Escape' && event.shiftKey && deleting) {
+            else if (event.key === "Escape" && event.shiftKey && deleting) {
                 event.preventDefault();
                 setDeleting(false);
             }
         }
     }, [props.permission, deleting]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     // ===== || GRID PROPS || ===== //
@@ -27500,20 +27546,23 @@ const DeleteGridWrapper = (props) => {
         slotProps: {
             toolbar: {
                 extraButtons: [
-                    ...(props.permission ? [{
-                            label: deleting ? 'Cancelar' : 'Eliminar',
-                            icon: deleting ? CancelIcon : DeleteIcon,
-                            onClick: handleClickDelete,
-                        }] : [])
-                ]
-            }
+                    ...(props.permission
+                        ? [
+                            {
+                                label: deleting ? "Cancelar" : "Eliminar",
+                                icon: deleting ? CancelIcon : DeleteIcon,
+                                onClick: handleClickDelete,
+                            },
+                        ]
+                        : []),
+                ],
+            },
         },
         // edit
         checkboxSelection: !deleting,
         ...(deleting ? { onRowClick: undefined } : []),
     }, props.dataGridProps);
-    const renderDeleteGrid = () => (jsxs(Fragment, { children: [props.mutation &&
-                jsx(DeleteConfirmationDialog, { mutation: props.mutation, open: !!deleteRowId, handleClose: handleClose, id: deleteRowId, disableNavBack: true }), props.renderFunction({ ...props.renderFunctionProps, dataGridProps: deleteGridProps })] }));
+    const renderDeleteGrid = () => (jsxs(Fragment, { children: [props.mutation && (jsx(DeleteConfirmationDialog, { mutation: props.mutation, open: !!deleteRowId, handleClose: handleClose, id: deleteRowId, disableNavBack: true })), props.renderFunction({ ...props.renderFunctionProps, dataGridProps: deleteGridProps })] }));
     return renderDeleteGrid();
 };
 
@@ -27522,7 +27571,7 @@ const CreateGridWrapper = (props) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = () => {
-        setAnchorEl(document.getElementById('create-button'));
+        setAnchorEl(document.getElementById("create-button"));
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -27537,51 +27586,56 @@ const CreateGridWrapper = (props) => {
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = useCallback((event) => {
         if (props.permission) {
-            if (event.ctrlKey && event.key === 'e') {
+            if (event.ctrlKey && event.key === "e") {
                 event.preventDefault();
                 handleClick();
             }
         }
     }, [props.permission]);
     useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     const createGridProps = mergeSettings({
         slotProps: {
             toolbar: {
                 extraButtons: [
-                    ...(props.permission ? [{
-                            label: 'Crear',
-                            icon: AddIcon,
-                            onClick: handleClick,
-                            buttonProps: {
-                                id: 'create-button',
-                            }
-                        }] : []),
-                ]
-            }
+                    ...(props.permission
+                        ? [
+                            {
+                                label: "Crear",
+                                icon: AddIcon,
+                                onClick: handleClick,
+                                buttonProps: {
+                                    id: "create-button",
+                                },
+                            },
+                        ]
+                        : []),
+                ],
+            },
         },
     }, props.dataGridProps);
-    return (jsxs(Fragment, { children: [jsxs(StyledMenu, { id: 'create-menu', MenuListProps: {
-                    'aria-labelledby': 'create-menu-button',
-                }, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable && ([
-                        {
-                            title: 'CSV',
-                            endpoint: props.pathname,
-                        },
-                        ...(props.csv_upload.extraOptions || [])
-                    ].map((option, index) => {
-                        return (jsx(MenuItem, { onClick: () => {
-                                handleToggleOpen(option);
-                                handleClose();
-                            }, disableRipple: true, children: option.title }, index));
-                    })), jsx(MenuItem, { onClick: () => {
+    return (jsxs(Fragment, { children: [jsxs(StyledMenu, { id: "create-menu", MenuListProps: {
+                    "aria-labelledby": "create-menu-button",
+                }, anchorEl: anchorEl, open: open, onClose: handleClose, children: [props.csv_upload?.enable &&
+                        [
+                            {
+                                title: "CSV",
+                                endpoint: props.pathname,
+                            },
+                            ...(props.csv_upload.extraOptions || []),
+                        ].map((option, index) => {
+                            return (jsxs(MenuItem, { onClick: () => {
+                                    handleToggleOpen(option);
+                                    handleClose();
+                                }, disableRipple: true, children: [jsx(ListItemIcon, { children: jsx(AttachFileIcon, { sx: { transform: "rotate(90deg)" } }) }), option.title] }, index));
+                        }), jsxs(MenuItem, { onClick: () => {
                             navigate(props.navigation ? `${props.navigation}crear` : `crear`);
                             handleClose();
-                        }, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
+                        }, disableRipple: true, children: [jsx(ListItemIcon, { children: jsx(DrawIcon, {}) }), "Manual"] })] }), props.csv_upload?.enable && (jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
 };
 
 const Base = (props) => {
@@ -27838,13 +27892,13 @@ const ActiveCell = ({ value }) => {
     }, [value]);
     const renderIcon = useCallback(() => {
         const iconProps = {
-            size: 'small',
+            size: "small",
             sx: {
                 color: color[700],
-                fontSize: '30px',
+                fontSize: "30px",
                 stroke: color[700],
-                strokeWidth: 1.5
-            }
+                strokeWidth: 1.5,
+            },
         };
         switch (value) {
             case true:
@@ -27855,7 +27909,7 @@ const ActiveCell = ({ value }) => {
                 return jsx(ErrorOutlineIcon, { ...iconProps });
         }
     }, [color, value]);
-    return (jsx(Box, { px: 2, py: 0.5, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2, borderColor: color[900], children: renderIcon() }));
+    return (jsx(Box, { px: 2, py: 0.5, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 2, borderColor: color[900], children: renderIcon() }));
 };
 
 const MyGridEditSingleSelect = (props) => {
@@ -27870,7 +27924,7 @@ const MyGridEditSingleSelect = (props) => {
         } }));
 };
 
-const StyledTooltip = styled$1(({ className, ...props }) => (jsx(Tooltip, { ...props, placement: 'top', classes: { popper: className } })))(({ theme }) => ({
+const StyledTooltip = styled$1(({ className, ...props }) => (jsx(Tooltip, { ...props, placement: "top", classes: { popper: className } })))(({ theme }) => ({
     [`& .${tooltipClasses.tooltip}`]: {
         backgroundColor: theme.palette.error.main,
         color: theme.palette.error.contrastText,
@@ -27880,27 +27934,29 @@ const EditCellWithErrorTooltip = (props) => {
     const { error } = props;
     const renderCell = () => {
         switch (props.colDef.type) {
-            case 'boolean':
+            case "boolean":
                 return jsx(GridEditBooleanCell, { ...props });
-            case 'singleSelect':
+            case "singleSelect":
                 return jsx(MyGridEditSingleSelect, { ...props });
             default:
-                return jsx(GridEditInputCell, { ...props, slotProps: {
+                return (jsx(GridEditInputCell, { ...props, slotProps: {
                         root: {
                             onFocus: (e) => {
-                                if (props.field == 'cotizacion__total')
+                                if (props.field == "cotizacion__total")
                                     return e.target.select();
                             },
-                        }
-                    } });
+                        },
+                    } }));
         }
     };
-    return (jsx(StyledTooltip, { open: !!error, title: error, children: renderCell() }));
+    return (jsx(StyledTooltip, { open: !!error, title: error?.reason.join(", "), children: jsx("div", { style: { display: "flex" }, children: renderCell() }) }));
 };
 
 function renderEditCellWithErrorTooltip(params, mutationErrors, path) {
-    const hasError = get(get(mutationErrors, params.id), path || params.field);
-    return jsx(EditCellWithErrorTooltip, { ...params, error: hasError });
+    const error = find(get(mutationErrors, params.id), function (e) {
+        return e.name == (path || params.field);
+    });
+    return jsx(EditCellWithErrorTooltip, { ...params, error: error });
 }
 
 const CoverPage = (props) => {
@@ -28017,34 +28073,38 @@ const Field = (props) => {
         return true;
     }, [props.data, props.dependantOn]);
     const renderField = useCallback(() => {
-        if (!props.pageType || props.pageType == 'list')
+        if (!props.pageType || props.pageType == "list")
             return;
-        if (props.pageType == 'detail')
+        if (props.pageType == "detail")
             return jsx(DetailField, { ...props });
         else
             return jsx(EditField, { ...props });
     }, [props]);
     if (!show)
         return;
-    return (jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: 'column', ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: 'body1', fontWeight: 'bold', children: props.label }) }), jsx(Grid, { size: 12, children: renderField() })] }));
+    return (jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsx(Grid, { size: 12, children: renderField() })] }));
 };
 
 const EditToolbar = (props) => {
-    return (jsxs(Toolbar, { children: [props.pageType != 'detail' &&
-                jsx(Tooltip$1, { title: 'Crear', children: jsx(ToolbarButton, { onClick: props.handleCreate, children: jsx(AddIcon, { fontSize: "small" }) }) }), !!props.selected &&
-                jsx(Tooltip$1, { title: 'Borrar', children: jsx(ToolbarButton, { onClick: props.handleDelete, children: jsx(DeleteIcon, { fontSize: "small" }) }) })] }));
+    return (jsxs(Toolbar, { children: [props.pageType != "detail" && (jsx(Tooltip$1, { title: "Crear", children: jsx(ToolbarButton, { onClick: props.handleCreate, children: jsx(AddIcon, { fontSize: "small" }) }) })), !!props.selected && (jsx(Tooltip$1, { title: "Borrar", children: jsx(ToolbarButton, { onClick: props.handleDelete, children: jsx(DeleteIcon, { fontSize: "small" }) }) }))] }));
 };
 const FieldArrayField = (props) => {
     const { fields, remove } = useFieldArray({
         control: props.form.control,
         name: props.name,
-        keyName: '_id'
+        keyName: "_id",
+    });
+    const [drawer, setDrawer] = useState({
+        open: false,
+        data: undefined,
     });
-    const [drawer, setDrawer] = useState({ open: false, data: undefined });
-    const [rowSelectionModel, setRowSelectionModel] = useState({ type: 'include', ids: new Set() });
-    const getIndex = useCallback((id) => (findIndex(fields, function (field) {
+    const [rowSelectionModel, setRowSelectionModel] = useState({
+        type: "include",
+        ids: new Set(),
+    });
+    const getIndex = useCallback((id) => findIndex(fields, function (field) {
         return field._id == id;
-    })), [fields]);
+    }), [fields]);
     const handleCreate = () => {
         setDrawer({ open: true, data: undefined });
     };
@@ -28067,7 +28127,7 @@ const FieldArrayField = (props) => {
     const handleRowClick = (e) => {
         setDrawer({ open: true, data: e.row });
     };
-    return (jsxs(Fragment, { children: [jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: 'column', ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: 'body1', fontWeight: 'bold', children: props.label }) }), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...props.dataGridProps, rows: fields, checkboxSelection: props.pageType != 'detail', onRowSelectionModelChange: (newRowSelectionModel) => {
+    return (jsxs(Fragment, { children: [jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...props.dataGridProps, rows: fields, checkboxSelection: props.pageType != "detail", onRowSelectionModelChange: (newRowSelectionModel) => {
                                 setRowSelectionModel(newRowSelectionModel);
                             }, showToolbar: true, slots: { toolbar: EditToolbar }, slotProps: {
                                 toolbar: {
@@ -28076,7 +28136,7 @@ const FieldArrayField = (props) => {
                                     handleDelete: handleDelete,
                                     pageType: props.pageType,
                                 },
-                            }, disableRowSelectionOnClick: true, onRowClick: handleRowClick, getRowId: (row) => row._id }) })] }), jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: 'Cargo Adicional', children: jsx(Grid, { size: 12, container: true, children: props.fields.map((field) => {
+                            }, disableRowSelectionOnClick: true, onRowClick: handleRowClick, getRowId: (row) => row._id }) })] }), jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: "Cargo Adicional", children: jsx(Grid, { size: 12, container: true, children: props.fields.map((field) => {
                         const fieldName = `${props.name}.${getIndex(drawer.data?._id)}.${field.name}`;
                         return (jsx(Field, { ...field, form: props.form, name: fieldName, fieldData: get(drawer.data, field.name) }, fieldName));
                     }) }) })] }));
@@ -28174,10 +28234,10 @@ const Logo = () => {
 // ==============================|| PESTAÑAS ||============================== //
 /**
  * Pestañas customizables
-**/
+ **/
 const Tabs = (props) => {
     // valor inicial
-    const [value, setValue] = useState(props.initialValue || '1');
+    const [value, setValue] = useState(props.initialValue || "1");
     // manejar cambio de pestaña
     const handleChange = (_event, newValue) => {
         setValue(newValue);
@@ -28185,29 +28245,33 @@ const Tabs = (props) => {
     };
     // hacer el render del contenido de la pestaña seleccionada
     const renderTabs = () => {
-        return (props.tabs.map((option) => {
+        return props.tabs.map((option) => {
             const renderContent = () => {
                 return React__default.Children.map(option.children, (child) => {
                     const cloneProps = { ...child.props };
-                    set$1(cloneProps, 'type', props.type);
-                    set$1(cloneProps, 'slotProps.tab', option.value);
+                    set$1(cloneProps, "type", props.type);
+                    set$1(cloneProps, "slotProps.tab", option.value);
                     return React__default.cloneElement(child, cloneProps);
                 });
             };
             return (jsx(TabPanel, { value: option.value, sx: {
-                    pt: 2, pb: 0, px: 0, width: 1, height: 1,
+                    pt: 2,
+                    pb: 0,
+                    px: 0,
+                    width: 1,
+                    height: 1,
                 }, children: renderContent() }, option.value));
-        }));
+        });
     };
     return (
     // contexto
-    jsx(Box, { width: 1, height: 'calc(100vh - 175px)', children: jsxs(TabContext, { value: value, children: [jsx(TabList, { onChange: handleChange, "aria-label": "create-work-order-tabs", variant: 'scrollable', scrollButtons: 'auto', sx: {
-                        minHeight: 40
+    jsx(Box, { width: 1, height: "calc(100vh - 175px)", children: jsxs(TabContext, { value: value, children: [jsx(TabList, { onChange: handleChange, "aria-label": "create-work-order-tabs", variant: "scrollable", scrollButtons: "auto", sx: {
+                        minHeight: 40,
                     }, children: props.tabs.map((option) => {
-                        return (jsx(Tab, { label: option.label, icon: option.icon, iconPosition: 'start', value: option.value, sx: {
-                                color: 'secondary.light',
+                        return (jsx(Tab, { label: option.label, icon: option.icon, iconPosition: "start", value: option.value, sx: {
+                                color: "secondary.light",
                                 py: 0,
-                                minHeight: 40
+                                minHeight: 40,
                             } }, option.value));
                     }) }), jsx(Box, { width: 1, height: 0.935, children: renderTabs() })] }) }));
 };
@@ -28291,7 +28355,7 @@ function DetailPage(props) {
         resolver: zodResolver(props.edit.schema),
         defaultValues: props.edit?.defaultValues,
     });
-    const { data, isLoading, isFetching, error: fetchError } = props.api.data.query(!props.api.data.skipToken ? props.api.data.args : skipToken);
+    const { data, isLoading, isFetching, error: fetchError, } = props.api.data.query(!props.api.data.skipToken ? props.api.data.args : skipToken);
     useEffect(() => {
         if (data) {
             // set form data based on query data
@@ -28299,7 +28363,7 @@ function DetailPage(props) {
             if (props.slots?.title) {
                 const title = map(props.slots?.title, function (field) {
                     return get(data, field);
-                }).join(' ');
+                }).join(" ");
                 if (title)
                     dispatch(changeTitle(title));
             }
@@ -28310,60 +28374,64 @@ function DetailPage(props) {
         form.reset();
         navigate(-1);
     };
-    const canEdit = useMemo(() => get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ''}obj_permissions.edit`), [data, props.slotProps?.permissionsPath]);
-    const canDelete = useMemo(() => get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ''}obj_permissions.delete`), [data, props.slotProps?.permissionsPath]);
+    const canEdit = useMemo(() => get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ""}obj_permissions.edit`), [data, props.slotProps?.permissionsPath]);
+    const canDelete = useMemo(() => get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ""}obj_permissions.delete`), [data, props.slotProps?.permissionsPath]);
     // ==============================|| VALIDATION ||============================== //
     useValidateFieldData(props, form);
     // ==============================|| QUICK RETURN ||============================== //
-    if ((!canEdit && props.pageType == 'edit') || (fetchError && fetchError.originalStatus == 403))
+    if ((!canEdit && props.pageType == "edit") || (fetchError && fetchError.originalStatus == 403))
         return jsx(NotAllowed, {});
     if (fetchError && fetchError.originalStatus == 404)
         return jsx(NotFound, {});
     // ==============================|| SUBMIT ||============================== //
     const onSubmitHandler = (submitedData) => {
-        const formData = 'nativeEvent' in submitedData ? form.getValues() : submitedData;
+        const formData = "nativeEvent" in submitedData ? form.getValues() : submitedData;
         const params = { submitData: formData, data: data, props: props.slotProps?.parser };
         const dataToSend = props.edit.useFormData ? formDataForm(params) : jsonForm(params);
-        mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args }).unwrap()
+        mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args })
+            .unwrap()
             .then(() => {
             if (!props.slotProps?.button?.save?.disableNavBack)
                 navigate(-1);
             if (props.slotProps?.button?.save?.onClick)
                 props.slotProps?.button?.save?.onClick();
             form.reset();
-            notifications.show(`${capitalizedObject} ${props.pageType == 'edit' ? 'actualizad@' : 'cread@'}!`, { severity: 'success' });
+            notifications.show(`${capitalizedObject} ${props.pageType == "edit" ? "actualizad@" : "cread@"}!`, { severity: "success" });
         })
             .catch((error) => {
             if (error.status === 401) ;
             if (error.status === 403) {
-                notifications.show(error.data.detail, { severity: 'error' });
+                notifications.show(error.data.detail, { severity: "error" });
             }
             else {
                 console.log(error);
                 setErrors(form, error);
-                notifications.show((error.data.detail ?
-                    error.data.detail.join(', ') :
-                    `Error ${props.pageType == 'edit' ? 'actualizando' : 'creando'} ${props.object.name}!`), { severity: 'error' });
+                notifications.show(error.data.detail
+                    ? error.data.detail.join(", ")
+                    : `Error ${props.pageType == "edit" ? "actualizando" : "creando"} ${props.object.name}!`, { severity: "error" });
             }
         });
     };
     // ==============================|| RENDER SECTIONS ||============================== //
     const renderContent = () => {
         let displayed_sections = -1;
-        return (jsxs(Grid, { size: 12, container: true, direction: 'column', position: 'relative', pb: 2, children: [props.pageType == 'detail' && data?.has_history && jsx(HistorialDrawer, { ...props.slotProps?.historial }), props.sections.map((section, index) => {
+        return (jsxs(Grid, { size: 12, container: true, direction: "column", position: "relative", pb: 2, children: [props.pageType == "detail" && data?.has_history && (jsx(HistorialDrawer, { ...props.slotProps?.historial })), props.sections.map((section, index) => {
                     if (!section.display)
                         return null;
-                    if (typeof section.display == 'object') {
+                    if (typeof section.display == "object") {
                         const validateAgainst = form.watch(section.display.field)?.toString();
                         if (!section.display.method(validateAgainst, section.display.value))
                             return null;
                     }
                     displayed_sections += 1;
-                    return (jsx(Section, { data: data, form: form, bgColor: displayed_sections % 2 == 1 ? 'white' : '#F7F7F7', pageType: props.pageType, ...section, first: displayed_sections == 0 }, index));
+                    return (jsx(Section, { data: data, form: form, bgColor: displayed_sections % 2 == 1 ? "white" : "#F7F7F7", pageType: props.pageType, ...section, first: displayed_sections == 0 }, index));
                 })] }));
     };
     const renderPostAction = () => {
-        if (props.api.mutate.postAction && isSuccess && 'post_action' in mutationResponse && mutationResponse['post_action']['type'] === props.api.mutate.postAction.type) {
+        if (props.api.mutate.postAction &&
+            isSuccess &&
+            "post_action" in mutationResponse &&
+            mutationResponse["post_action"]["type"] === props.api.mutate.postAction.type) {
             switch (props.api.mutate.postAction.after) {
                 // case 'create':
                 //     if (props.pageType === 'create') return addPropsToNode(props.api.mutate.postAction.node, mutationResponse);
@@ -28372,37 +28440,44 @@ function DetailPage(props) {
                 //     if (props.pageType === 'edit') return props.api.mutate.postAction.node;
                 //     break;
                 default:
-                    return addPropsToNode(props.api.mutate.postAction.node, { parent: props.api.data.args['id'], ...mutationResponse['post_action'] });
+                    return addPropsToNode(props.api.mutate.postAction.node, {
+                        parent: props.api.data.args["id"],
+                        ...mutationResponse["post_action"],
+                    });
             }
         }
     };
-    const badgeInfo = get(data, props.slots?.badge || '');
+    const badgeInfo = get(data, props.slots?.badge || "");
     const renderButton = () => {
         if (props.slots?.button)
             return props.slots?.button;
-        if (props.pageType == 'detail') {
+        if (props.pageType == "detail") {
             if (!canEdit && !canDelete)
                 return null;
-            return (jsxs(Stack, { direction: 'row', spacing: 1, children: [canDelete && props.api.delete && jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack }), canEdit && jsx(EditButton, {})] }));
+            return (jsxs(Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsx(EditButton, {})] }));
         }
         else {
             return (jsx(SaveCancelButton, { slotProps: {
                     saveBtn: {
                         loading: mutationIsLoading,
                         disabled: !form.formState.isDirty,
-                        ...(props.slotProps?.button?.save?.type == 'onClick' ? {
-                            type: 'button',
-                            onClick: onSubmitHandler,
-                        } : {}),
+                        ...(props.slotProps?.button?.save?.type == "onClick"
+                            ? {
+                                type: "button",
+                                onClick: onSubmitHandler,
+                            }
+                            : {}),
                     },
-                    ...(props.slotProps?.button?.cancel ? { cancelBtn: props.slotProps?.button?.cancel } : {
-                        cancelBtn: { onClick: handleCancel }
-                    }),
+                    ...(props.slotProps?.button?.cancel
+                        ? { cancelBtn: props.slotProps?.button?.cancel }
+                        : {
+                            cancelBtn: { onClick: handleCancel },
+                        }),
                 } }));
         }
     };
-    return (jsxs(Fragment, { children: [jsx(ContentLayout, { button: renderButton(), badge: props.pageType == 'detail' && badgeInfo &&
-                    jsx(StatusBadge, { title: badgeInfo['label'], severity: badgeInfo['value'] }), children: jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsx(FormProvider, { ...form, children: jsx(Box, { id: 'formulario', component: 'form', autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: '100%', position: 'relative', children: renderContent() }) }) }) }), renderPostAction()] }));
+    return (jsxs(Fragment, { children: [jsx(ContentLayout, { button: renderButton(), badge: props.pageType == "detail" &&
+                    badgeInfo && (jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsx(FormProvider, { ...form, children: jsx(Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
 }
 
 const ListPage = (props) => {
@@ -28410,19 +28485,19 @@ const ListPage = (props) => {
 };
 
 function SlideTransition(props) {
-    return jsx(Slide, { ...props, direction: 'left' });
+    return jsx(Slide, { ...props, direction: "left" });
 }
 const BaseProgressSnack = (props) => {
-    // const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
     const handleClose = (e) => {
         if (e?.defaultMuiPrevented)
             return;
-        // dispatch(closeProgressSnack(props.id));
+        dispatch(closeProgressSnack(props.id));
     };
-    const finished = useMemo(() => get(props.data, 'finished'), [props.data]);
-    const error = useMemo(() => get(props.data, 'error'), [props.data]);
+    const finished = useMemo(() => get(props.data, "finished"), [props.data]);
+    const error = useMemo(() => get(props.data, "error"), [props.data]);
     const renderItem = useCallback(() => {
-        return (jsx(Snackbar, { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: props.open, onClose: handleClose, slots: {
+        return (jsx(Snackbar, { anchorOrigin: { vertical: "bottom", horizontal: "right" }, open: props.open, onClose: handleClose, slots: {
                 transition: SlideTransition,
             }, slotProps: {
                 clickAwayListener: {
@@ -28430,27 +28505,27 @@ const BaseProgressSnack = (props) => {
                         event.defaultMuiPrevented = true;
                     },
                 },
-            }, children: jsx(Badge, { invisible: props.index < 1, badgeContent: props.index + 1, color: 'primary', children: jsx(Paper, { elevation: 2, sx: {
-                        bgcolor: props.data['error'] ? 'primary.main' : 'secondary.dark',
+            }, children: jsx(Badge, { invisible: props.index < 1, badgeContent: props.index + 1, color: "primary", children: jsx(Paper, { elevation: 2, sx: {
+                        bgcolor: props.data["error"] ? "primary.main" : "secondary.dark",
                         minWidth: 300,
-                        maxWidth: '100vw',
+                        maxWidth: "100vw",
                         p: 2,
-                        borderRadius: '12px',
-                        color: 'white',
-                    }, children: jsxs(Stack, { direction: 'column', spacing: 1, children: [jsxs(Stack, { direction: 'row', alignItems: 'center', spacing: 1, justifyContent: 'space-between', children: [jsx(Typography$1, { pr: 2, color: 'inherit', children: props.data.title || 'N/A' }), finished && !error && (jsx(Tooltip, { title: 'Cerrar', placement: 'bottom', children: jsx(IconButton, { color: 'secondary', size: 'small', onClick: handleClose, sx: {
-                                                color: 'inherit',
-                                                '&:hover': {
-                                                    backgroundColor: 'rgba(255, 255, 255, 0.2)'
+                        borderRadius: "12px",
+                        color: "white",
+                    }, children: jsxs(Stack, { direction: "column", spacing: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, justifyContent: "space-between", children: [jsx(Typography$1, { pr: 2, color: "inherit", children: props.data.title || "N/A" }), finished && !error && (jsx(Tooltip, { title: "Cerrar", placement: "bottom", children: jsx(IconButton, { color: "secondary", size: "small", onClick: handleClose, sx: {
+                                                color: "inherit",
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(255, 255, 255, 0.2)",
                                                 },
-                                            }, children: jsx(CloseIcon, { fontSize: 'small' }) }) }))] }), !finished && !error && props.content(props.data)] }) }) }) }));
+                                            }, children: jsx(CloseIcon, { fontSize: "small" }) }) }))] }), !finished && !error && props.content(props.data)] }) }) }) }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [finished, props]);
     return renderItem();
 };
 
 const ObjectProgressStack = (props) => {
-    const snacks = useSelector(state => get(state, 'snackProgress', {}));
-    return (jsx(Stack, { direction: 'column', spacing: 2, children: Object.keys(snacks).map((key, index) => {
+    const snacks = useSelector((state) => get(state, "snackProgress", {}));
+    return (jsx(Stack, { direction: "column", spacing: 2, children: Object.keys(snacks).map((key, index) => {
             return (jsx(BaseProgressSnack, { id: key, index: index, ...snacks[key], content: props.content }, key));
         }) }));
 };