@acvl/frontend-components 0.0.25 → 0.0.26

package/dist/cjs/index.js

@@ -74,6 +74,7 @@ var SaveIcon = require('@mui/icons-material/Save');
 var AddIcon = require('@mui/icons-material/Add');
 var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
 var LinearProgress = require('@mui/material/LinearProgress');
+var AttachFileIcon = require('@mui/icons-material/AttachFile');
 var xDataGrid = require('@mui/x-data-grid');
 var Tooltip = require('@mui/material/Tooltip');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
@@ -95,6 +96,7 @@ var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var core$1 = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
+var DrawIcon = require('@mui/icons-material/Draw');
 var CloseIcon = require('@mui/icons-material/Close');
 var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
 var query$1 = require('@reduxjs/toolkit/query');
@@ -124,10 +126,10 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const NormalOrIcon = (props) => {
     const theme = material.useTheme();
-    const belowLG = material.useMediaQuery(theme.breakpoints.down('lg'));
-    if ((belowLG && !(props.type == 'button')) || props.type == 'icon')
+    const belowLG = material.useMediaQuery(theme.breakpoints.down("lg"));
+    if ((belowLG && !(props.type == "button")) || props.type == "icon")
         return (jsxRuntime.jsx(material.Tooltip, { title: props.buttonProps.children, children: jsxRuntime.jsx(material.IconButton, { ...props.buttonProps, children: props.buttonProps.startIcon }) }));
-    return (jsxRuntime.jsx(material.Button, { ...props.buttonProps }));
+    return jsxRuntime.jsx(material.Button, { ...props.buttonProps });
 };
 
 const EditButton = () => {
@@ -137,23 +139,23 @@ const EditButton = () => {
     }, [navigate]);
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
-        if (event.ctrlKey && event.key === 'e') {
+        if (event.ctrlKey && event.key === "e") {
             event.preventDefault();
             handleClick();
         }
     }, [handleClick]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxRuntime.jsx(NormalOrIcon, { buttonProps: {
-            color: 'secondary',
-            variant: 'contained',
+            color: "secondary",
+            variant: "contained",
             startIcon: jsxRuntime.jsx(EditIcon, {}),
             onClick: handleClick,
-            children: 'Editar',
+            children: "Editar",
         } }));
 };
 
@@ -25831,18 +25833,18 @@ const valueLabel = zod.object({
 
 const MainDrawer = (props) => {
     const theme = material.useTheme();
-    return (jsxRuntime.jsx(material.Drawer, { variant: 'temporary', anchor: 'right', open: props.open, onClose: props.drawerToggle, sx: {
+    return (jsxRuntime.jsx(material.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: jsxRuntime.jsxs(material.Grid, { container: true, direction: 'column', px: 4, py: 2, spacing: 2, children: [jsxRuntime.jsx(material.Grid, { display: 'flex', justifyContent: 'right', pb: 0, children: props.slots?.button ? props.slots.button : (jsxRuntime.jsx(material.Button, { color: 'error', startIcon: jsxRuntime.jsx(CancelIcon, {}), onClick: props.drawerToggle, children: "Cerrar" })) }), jsxRuntime.jsx(material.Grid, { children: jsxRuntime.jsx(core.PageHeader, { breadcrumbs: [], title: props.title }) }), jsxRuntime.jsx(material.Grid, { size: 12, container: true, position: 'relative', children: props.children })] }) }));
+                borderRight: "none",
+                borderTopLeftRadius: "12px",
+                borderBottomLeftRadius: "12px",
+            },
+        }, color: "inherit", ...props.drawerProps, children: jsxRuntime.jsxs(material.Grid, { container: true, direction: "column", px: 4, py: 2, spacing: 2, children: [jsxRuntime.jsx(material.Grid, { display: "flex", justifyContent: "right", pb: 0, children: props.slots?.button ? (props.slots.button) : (jsxRuntime.jsx(material.Button, { color: "error", startIcon: jsxRuntime.jsx(CancelIcon, {}), onClick: props.drawerToggle, children: "Cerrar" })) }), jsxRuntime.jsx(material.Grid, { children: jsxRuntime.jsx(core.PageHeader, { breadcrumbs: [], title: props.title }) }), jsxRuntime.jsx(material.Grid, { size: 12, container: true, position: "relative", children: props.children })] }) }));
 };
 
 const LoadingComponent = (props) => {
@@ -25901,60 +25903,49 @@ const _HistorialDrawer = (props) => {
 const HistorialDrawer = (props) => {
     const [open, setOpen] = React.useState(false);
     const handleDrawer = React.useCallback(() => {
-        setOpen(prevState => !prevState);
+        setOpen((prevState) => !prevState);
     }, []);
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
-        if (event.ctrlKey && event.shiftKey && event.key === 'H') {
+        if (event.ctrlKey && event.shiftKey && event.key === "H") {
             event.preventDefault();
             handleDrawer();
         }
     }, [handleDrawer]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Tooltip, { title: 'Historial', children: jsxRuntime.jsx(material.IconButton, { color: 'primary', onClick: handleDrawer, sx: {
-                        position: 'absolute',
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Tooltip, { title: "Historial", children: jsxRuntime.jsx(material.IconButton, { color: "primary", onClick: handleDrawer, sx: {
+                        position: "absolute",
                         right: 0,
                     }, ...props.iconButtonProps, children: jsxRuntime.jsx(HistoryIcon, {}) }) }), jsxRuntime.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 (jsxRuntime.jsx(material.List, { subheader: jsxRuntime.jsx(material.ListSubheader, { sx: {
                 bgcolor: colors.red[50],
                 color: colors.red[800],
-                fontWeight: 'bold',
-                borderRadius: '12px',
-                lineHeight: '40px'
+                fontWeight: "bold",
+                borderRadius: "12px",
+                lineHeight: "40px",
             }, children: `Hilera ${props.row}` }), sx: {
             bgcolor: colors.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 (jsxRuntime.jsx(material.ListItem, { sx: {
-                    py: 0
-                }, children: jsxRuntime.jsx(ListItemText, { primary: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { variant: 'caption', pr: 0.5, sx: {
+                    py: 0,
+                }, children: jsxRuntime.jsx(ListItemText, { primary: jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { variant: "caption", pr: 0.5, sx: {
                                     color: colors.red[800],
-                                }, children: `${item.title}:` }), jsxRuntime.jsx(material.Typography, { variant: 'caption', sx: {
+                                }, children: `${name}:` }), jsxRuntime.jsx(material.Typography, { variant: "caption", sx: {
                                     color: colors.red[800],
-                                }, children: item.content })] }) }) }));
+                                }, children: item.reason.join(", ") })] }) }) }));
         }) }));
 };
 
@@ -25994,9 +25985,8 @@ const FileUploadBox = (props) => {
                     props.setValid(true);
                 })
                     .catch((e) => {
-                    const columnas_inv = lodash.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);
                 });
             });
@@ -26023,19 +26013,22 @@ const FileUploadBox = (props) => {
             onChange(null);
             setFile(null);
         };
+        const renderErrorRows = () => {
+            if (!error?.data?.invalid_params)
+                return;
+            const rows = lodash.groupBy(error?.data?.invalid_params, function (e) {
+                return e.name.split(".")[0];
+            });
+            if (!rows)
+                return;
+            return Object.entries(rows).map(([row, errors]) => (jsxRuntime.jsx(RowErrors, { row: row, data: errors }, row)));
+        };
         return (jsxRuntime.jsx(Box, { width: 1, children: jsxRuntime.jsxs(material.Stack, { spacing: 2, children: [!file && !isLoading && (jsxRuntime.jsxs(Box, { component: "div", width: 1, display: "flex", justifyContent: "center", alignItems: "center", border: "1.5px dashed", borderRadius: "12px", py: 4, px: 2, borderColor: colors.grey[800], bgcolor: colors.grey[50], ...getRootProps(), children: [jsxRuntime.jsx(VisuallyHiddenInput, { id: "file-upload", type: "file", ...getInputProps() }), jsxRuntime.jsx(FileUploadIcon, { sx: {
                                     color: colors.grey[800],
                                     pr: 1,
                                 } }), jsxRuntime.jsx(Typography, { variant: "body2", sx: { color: colors.grey[800] }, children: isDragActive
                                     ? "Soltar archivo aquí."
-                                    : "Arrastra un archivo aquí o haz clic para seleccionar uno." })] })), isLoading && (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(material.LinearProgress, { sx: { height: 5 } }) })), file && (jsxRuntime.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 jsxRuntime.jsx(RowErrors, { row: row, data: error.data }, row);
-                            }
-                            return null;
-                        })] }) }));
+                                    : "Arrastra un archivo aquí o haz clic para seleccionar uno." })] })), isLoading && (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(material.LinearProgress, { sx: { height: 5 } }) })), file && (jsxRuntime.jsx(FileBox, { file: file, handleRemove: handleRemove, loadingRemove: removerLoading })), renderErrorRows()] }) }));
     };
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value } }) => {
             return jsxRuntime.jsx(Dropzone, { onChange: onChange, value: value });
@@ -26220,7 +26213,7 @@ async function manualCacheRefresh(api, id, dispatch, queryFulfilled, endpoints)
 const initialState$1 = {};
 // == crea el slice == //
 const snackProgress = toolkit.createSlice({
-    name: 'snackProgress',
+    name: "snackProgress",
     initialState: initialState$1,
     // declarar acciones que se le pueden hacer a esta sección de la tienda
     reducers: {
@@ -26236,7 +26229,7 @@ const snackProgress = toolkit.createSlice({
         closeProgressSnack(state, action) {
             return lodash.omit(state, action.payload);
         },
-    }
+    },
 });
 // exportar acciones
 const { openProgressSnack, updateProgressSnackData, closeProgressSnack } = snackProgress.actions;
@@ -26262,12 +26255,14 @@ const { changeTitle, } = settings.actions;
 var header = settings.reducer;
 
 const ControlledDropdown = (props) => {
-    const [inputValue, setInputValue] = React.useState('');
+    const [inputValue, setInputValue] = React.useState("");
     const [options, setOptions] = React.useState(props.extraProps?.options ? props.extraProps?.options : []);
     const args = React.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();
@@ -26280,7 +26275,8 @@ const ControlledDropdown = (props) => {
     };
     const handleSearch = React.useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26293,7 +26289,7 @@ const ControlledDropdown = (props) => {
             });
         }
     }, [args, handleSearch, open]);
-    return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange, }, fieldState: { error }, }) => {
+    return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
             const handleChange = (_event, newValue) => {
                 onChange(newValue);
             };
@@ -26301,10 +26297,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) => (jsxRuntime.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) => (jsxRuntime.jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : props.extraProps?.disableHT ? "" : " ", slotProps: {
                         input: {
                             ...params.InputProps,
-                            endAdornment: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isLoading || isFetching) ? jsxRuntime.jsx(material.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })),
+                            endAdornment: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading || isFetching ? (jsxRuntime.jsx(material.CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
                         },
                     } })), ...props.fieldProps }));
         } }));
@@ -26333,13 +26329,15 @@ const ControlledPhoneNumber = (props) => {
 };
 
 const ControlledSelect = (props) => {
-    const [inputValue, setInputValue] = React.useState('');
+    const [inputValue, setInputValue] = React.useState("");
     const [options, setOptions] = React.useState(props.extraProps?.options ? props.extraProps?.options : []);
     const [selectedAll, setSelectedAll] = React.useState(false);
     const args = React.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();
@@ -26354,7 +26352,8 @@ const ControlledSelect = (props) => {
     };
     const handleSearch = React.useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26363,12 +26362,14 @@ const ControlledSelect = (props) => {
     React.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 (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
             const handleChange = (_event, newValue) => {
-                if (lodash.find(newValue, function (val) { return val.value == 'all'; })) {
+                if (lodash.find(newValue, function (val) {
+                    return val.value == "all";
+                })) {
                     if (selectedAll) {
                         setSelectedAll(false);
                         onChange(newValue.slice(1));
@@ -26392,10 +26393,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) => (jsxRuntime.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) => (jsxRuntime.jsx(TextField, { ...params, label: props.label, error: !!error, helperText: error ? error.message : "", slotProps: {
                         input: {
                             ...params.InputProps,
-                            endAdornment: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isLoading || isFetching) ? jsxRuntime.jsx(material.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })),
+                            endAdornment: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading || isFetching ? (jsxRuntime.jsx(material.CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
                         },
                     } })), ...props.fieldProps, renderOption: (props, option, { selected }) => {
                     const { key, ...optionProps } = props;
@@ -26403,7 +26404,7 @@ const ControlledSelect = (props) => {
                 } }));
         } }));
 };
-ControlledSelect.displayName = 'ControlledSelect';
+ControlledSelect.displayName = "ControlledSelect";
 
 // ==============================|| DESLIZADOR CONTROLADO ||============================== //
 const ControlledSlider$1 = (props) => {
@@ -26436,19 +26437,27 @@ const ControlledText = (props) => {
     };
     return (
     // controlador
-    jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error }, }) => {
+    jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error } }) => {
             return (
             // campo de texto
-            jsxRuntime.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: {
+            jsxRuntime.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 && (jsxRuntime.jsx(material.InputAdornment, { position: 'end', children: jsxRuntime.jsx(material.IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: 'end', size: 'large', sx: {
-                                    color: 'secondary.darker',
-                                    '&:hover': {
-                                        color: 'secondary.main',
-                                    }
-                                }, children: showPassword ? jsxRuntime.jsx(iconsMaterial.Visibility, {}) : jsxRuntime.jsx(iconsMaterial.VisibilityOff, {}) }) }))
-                    }
+                        endAdornment: props.extraProps?.password && (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(material.IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: "end", size: "large", sx: {
+                                    color: "secondary.darker",
+                                    "&:hover": {
+                                        color: "secondary.main",
+                                    },
+                                }, children: showPassword ? jsxRuntime.jsx(iconsMaterial.Visibility, {}) : jsxRuntime.jsx(iconsMaterial.VisibilityOff, {}) }) })),
+                    },
                 }, ...props.fieldProps }));
         } }));
 };
@@ -26508,16 +26517,15 @@ const ControlledTimePicker = (props) => {
     const filedProps = React.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 (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error }, }) => {
-            const val = convertValueToDayjs(value, 'time');
-            return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: 'secondary', children: [jsxRuntime.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxRuntime.jsx(TimePicker, { label: props.label, onChange: (v) => handleChange(v, 'time', onChange), value: val || null, ...filedProps }) }), !props.extraProps?.disableHT &&
-                        jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : ' ' })] }));
+    return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const val = convertValueToDayjs(value, "time");
+            return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: "secondary", children: [jsxRuntime.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxRuntime.jsx(TimePicker, { label: props.label, onChange: (v) => handleChange(v, "time", onChange), value: val || null, ...filedProps }) }), !props.extraProps?.disableHT && (jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : " " }))] }));
         } }));
 };
 
@@ -26537,22 +26545,23 @@ const ControlledSlider = (props) => {
 
 const DeleteConfirmationDialog = (props) => {
     const notifications = core.useNotifications();
-    const pathname = 'temp';
-    const id = React.useMemo(() => props.id || pathname.split('/').at(-1), [pathname, props.id]);
+    const pathname = "temp";
+    const id = React.useMemo(() => props.id || pathname.split("/").at(-1), [pathname, props.id]);
     const [mutation] = props.mutation();
     const schema = zod.object({ confirmation: zod.string() });
     const form = reactHookForm.useForm({
         resolver: zod$1.zodResolver(schema),
-        defaultValues: { confirmation: '' },
+        defaultValues: { confirmation: "" },
     });
     const handleClose = () => {
         props.handleClose();
         form.reset();
     };
-    const confirmation = form.watch('confirmation').toUpperCase();
-    const disabled = React.useMemo(() => confirmation != 'ELIMINAR', [confirmation]);
+    const confirmation = form.watch("confirmation").toUpperCase();
+    const disabled = React.useMemo(() => confirmation != "ELIMINAR", [confirmation]);
     const onSubmitHandler = () => {
-        mutation({ id: id }).unwrap()
+        mutation({ id: id })
+            .unwrap()
             .then(() => {
             if (props.disableNavBack) {
                 handleClose();
@@ -26561,25 +26570,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 (jsxRuntime.jsxs(material.Dialog, { open: props.open, onClose: handleClose, children: [jsxRuntime.jsx(material.DialogTitle, { variant: 'h5', children: "Eliminar" }), jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { sx: { pb: 2 }, children: "\u00BFEst\u00E1 seguro que quiere eliminar el objeto?" }), jsxRuntime.jsx(material.Box, { id: 'eliminar-formulario', width: '100%', position: 'relative', children: jsxRuntime.jsx(ControlledText, { name: 'confirmation', control: form.control, fieldProps: {
+    return (jsxRuntime.jsxs(material.Dialog, { open: props.open, onClose: handleClose, children: [jsxRuntime.jsx(material.DialogTitle, { variant: "h5", children: "Eliminar" }), jsxRuntime.jsxs(material.DialogContent, { children: [jsxRuntime.jsx(material.DialogContentText, { sx: { pb: 2 }, children: "\u00BFEst\u00E1 seguro que quiere eliminar el objeto?" }), jsxRuntime.jsx(material.Box, { id: "eliminar-formulario", width: "100%", position: "relative", children: jsxRuntime.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,
                             } }) })] }), jsxRuntime.jsxs(material.DialogActions, { children: [jsxRuntime.jsx(material.Button, { onClick: handleClose, children: "Cancelar" }), jsxRuntime.jsx(material.Button, { onClick: onSubmitHandler, disabled: disabled, children: "Eliminar" })] })] }));
 };
@@ -26594,23 +26603,23 @@ const DeleteButton = (props) => {
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
-        if (event.ctrlKey && event.key === 'd') {
+        if (event.ctrlKey && event.key === "d") {
             event.preventDefault();
             handleClick();
         }
     }, [handleClick]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(NormalOrIcon, { buttonProps: {
-                    color: 'error',
-                    variant: 'contained',
+                    color: "error",
+                    variant: "contained",
                     startIcon: jsxRuntime.jsx(DeleteIcon, {}),
                     onClick: handleClick,
-                    children: 'Eliminar',
+                    children: "Eliminar",
                 } }), jsxRuntime.jsx(DeleteConfirmationDialog, { open: open, handleClose: handleClose, ...props })] }));
 };
 
@@ -26621,104 +26630,104 @@ const SaveCancelButton = (props) => {
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
-        if (event.key === 'Escape') {
+        if (event.key === "Escape") {
             event.preventDefault();
             handleCancel();
         }
     }, [handleCancel]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxRuntime.jsxs(material.ButtonGroup, { sx: {
             maxHeight: 40,
         }, ...props.slotProps?.buttonGroup, children: [jsxRuntime.jsx(NormalOrIcon, { buttonProps: {
-                    color: 'error',
-                    variant: 'contained',
+                    color: "error",
+                    variant: "contained",
                     startIcon: jsxRuntime.jsx(CancelIcon, {}),
                     onClick: handleCancel,
                     sx: { height: 1 },
-                    children: 'Cancelar',
-                    ...props.slotProps?.cancelBtn
+                    children: "Cancelar",
+                    ...props.slotProps?.cancelBtn,
                 } }), jsxRuntime.jsx(NormalOrIcon, { buttonProps: {
-                    color: 'secondary',
-                    variant: 'contained',
+                    color: "secondary",
+                    variant: "contained",
                     startIcon: jsxRuntime.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 = React.useCallback((event) => {
-        if (event.ctrlKey && event.key === 'e') {
+        if (event.ctrlKey && event.key === "e") {
             event.preventDefault();
             props.handleClick();
         }
     }, []);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     return (jsxRuntime.jsx(NormalOrIcon, { buttonProps: {
-            id: 'create-button',
-            variant: 'contained',
-            color: 'secondary',
+            id: "create-button",
+            variant: "contained",
+            color: "secondary",
             startIcon: jsxRuntime.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: jsxRuntime.jsx(KeyboardArrowDownIcon, {}),
-            children: 'Crear',
+            children: "Crear",
             ...props.buttonProps,
         } }));
 };
 
 const MenuItemWithLoading = (props) => {
     return (jsxRuntime.jsxs(MenuItem, { onClick: props.handleClick, sx: {
-            position: 'relative',
-        }, disabled: props.disabled || props.isLoading, children: [props.children, props.isLoading &&
-                jsxRuntime.jsx(material.Box, { position: 'absolute', width: 1, top: '50%', left: '50%', sx: {
-                        transform: 'translate(-50%, -50%)',
-                    }, px: 2, children: jsxRuntime.jsx(LinearProgress, {}) })] }));
+            position: "relative",
+        }, disabled: props.disabled || props.isLoading, children: [props.children, props.isLoading && (jsxRuntime.jsx(material.Box, { position: "absolute", width: 1, top: "50%", left: "50%", sx: {
+                    transform: "translate(-50%, -50%)",
+                }, px: 2, children: jsxRuntime.jsx(LinearProgress, {}) }))] }));
 };
 
 const StyledMenu = material.styled((props) => (jsxRuntime.jsx(material.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: material.alpha(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],
         }),
     },
@@ -26728,7 +26737,7 @@ const CreateButtonWithMenuOptions = (props) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     const handleClick = () => {
-        setAnchorEl(document.getElementById('create-button'));
+        setAnchorEl(document.getElementById("create-button"));
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -26742,20 +26751,22 @@ const CreateButtonWithMenuOptions = (props) => {
     };
     if (!props.permission)
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxRuntime.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 (jsxRuntime.jsx(MenuItem, { onClick: () => {
-                                handleToggleOpen(option);
-                                handleClose();
-                            }, disableRipple: true, children: option.title }, index));
-                    })), jsxRuntime.jsx(MenuItem, { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CreateButtonBase, { open: open, handleClick: handleClick }), jsxRuntime.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 (jsxRuntime.jsxs(MenuItem, { onClick: () => {
+                                    handleToggleOpen(option);
+                                    handleClose();
+                                }, disableRipple: true, children: [option.icon && (jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(AttachFileIcon, {}) })), option.title] }, index));
+                        }), jsxRuntime.jsx(MenuItem, { onClick: () => {
                             props.navigate(`crear`);
                             handleClose();
                         }, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data }))] }));
@@ -26768,12 +26779,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)
@@ -26782,7 +26793,10 @@ const ButtonWithDrawer = (props) => {
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderButton(), jsxRuntime.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) => {
@@ -26971,16 +26985,16 @@ const UncontrolledText = (props) => {
     const handleShowPassword = () => {
         setShowPassword(!showPassword);
     };
-    return (jsxRuntime.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 (jsxRuntime.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 && (jsxRuntime.jsx(material.InputAdornment, { position: 'end', children: jsxRuntime.jsx(material.IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: 'end', size: 'large', sx: {
-                            color: 'secondary.darker',
-                            '&:hover': {
-                                color: 'secondary.main',
-                            }
-                        }, children: showPassword ? jsxRuntime.jsx(iconsMaterial.Visibility, {}) : jsxRuntime.jsx(iconsMaterial.VisibilityOff, {}) }) }))
-            }
+                endAdornment: props.password && (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(material.IconButton, { "aria-label": "toggle password visibility", tabIndex: -1, onClick: handleShowPassword, edge: "end", size: "large", sx: {
+                            color: "secondary.darker",
+                            "&:hover": {
+                                color: "secondary.main",
+                            },
+                        }, children: showPassword ? jsxRuntime.jsx(iconsMaterial.Visibility, {}) : jsxRuntime.jsx(iconsMaterial.VisibilityOff, {}) }) })),
+            },
         }, ...props.textFieldProps }));
 };
 
@@ -27052,9 +27066,8 @@ const generateSchema = (columns, columnsFilter, id) => {
 };
 
 const FiltersPopper = (props) => {
-    // const params:any = useLoaderData();
-    // const id = params?.id;
-    const id = 1;
+    const params = reactRouterDom.useLoaderData();
+    const id = params?.id;
     const columns = xDataGrid.useGridApiContext().current.getAllColumns();
     const [schema, defaultValues] = React.useMemo(() => generateSchema(columns, props.columnsFilter, id), [columns, id, props.columnsFilter]);
     const form = reactHookForm.useForm({
@@ -27064,14 +27077,16 @@ const FiltersPopper = (props) => {
     const [dirty, setDirty] = React.useState(false);
     React.useEffect(() => {
         if (props.filters.filterModel.items) {
-            if (!lodash.every(props.filters.filterModel.items, function (_value, key) { return lodash.includes(props.protectFilters, key); })) {
+            if (!lodash.every(props.filters.filterModel.items, function (_value, key) {
+                return lodash.includes(props.protectFilters, key);
+            })) {
                 setDirty(true);
             }
             form.reset(lodash.merge({}, 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);
     };
@@ -27079,9 +27094,9 @@ const FiltersPopper = (props) => {
         setDirty(false);
         props.filters.setFilterModel(immer.produce((draft) => {
             lodash.forEach(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);
@@ -27089,75 +27104,82 @@ const FiltersPopper = (props) => {
     };
     const onSubmitHandler = (submitData) => {
         props.filters.setFilterModel(immer.produce((draft) => {
-            draft['items'] = { ...draft['items'], ...submitData };
+            draft["items"] = { ...draft["items"], ...submitData };
         }));
         handleClose();
     };
     const onError = (errors) => {
         console.log(errors);
     };
-    return (jsxRuntime.jsx(material.Box, { id: 'filtros', children: jsxRuntime.jsx(material.Popper, { id: 'filters-menu', open: props.open, anchorEl: props.menuRef.current, placement: "bottom-end", transition: true, sx: { zIndex: 1202 }, children: ({ TransitionProps }) => (jsxRuntime.jsx(material.Grow, { ...TransitionProps, timeout: 350, children: jsxRuntime.jsx(material.Paper, { elevation: 5, sx: { zIndex: 5 }, children: jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: jsxRuntime.jsxs(material.Grid, { size: 12, container: true, padding: 2, width: 350, maxWidth: '100%', children: [jsxRuntime.jsx(material.Grid, { size: 12, container: true, rowSpacing: 2, maxHeight: 300, overflow: 'auto', children: columns.map((column, index) => {
+    return (jsxRuntime.jsx(material.Box, { id: "filtros", children: jsxRuntime.jsx(material.Popper, { id: "filters-menu", open: props.open, anchorEl: props.menuRef.current, placement: "bottom-end", transition: true, sx: { zIndex: 1202 }, children: ({ TransitionProps }) => (jsxRuntime.jsx(material.Grow, { ...TransitionProps, timeout: 350, children: jsxRuntime.jsx(material.Paper, { elevation: 5, sx: { zIndex: 5 }, children: jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: jsxRuntime.jsxs(material.Grid, { size: 12, container: true, padding: 2, width: 350, maxWidth: "100%", children: [jsxRuntime.jsx(material.Grid, { size: 12, container: true, rowSpacing: 2, maxHeight: 300, overflow: "auto", children: columns.map((column, index) => {
                                         if (column.input)
-                                            return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: 'column', spacing: 0, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', gutterBottom: true, children: column.filterName || column.headerName }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: React.Children.map(column.input, (child) => {
-                                                            let addedProps = { control: form.control };
-                                                            if (column.type == 'number') {
+                                            return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: "column", spacing: 0, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { fontWeight: "bold", gutterBottom: true, children: column.filterName ||
+                                                                column.headerName }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: React.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 React.cloneElement(child, {
                                                                 ...child.props,
-                                                                ...addedProps
+                                                                ...addedProps,
                                                             });
                                                         }) })] }, index));
                                         return null;
-                                    }) }), jsxRuntime.jsx(material.Grid, { size: 12, py: 2, children: jsxRuntime.jsx(Divider, {}) }), jsxRuntime.jsxs(material.Grid, { size: 12, display: 'flex', justifyContent: 'space-evenly', children: [jsxRuntime.jsx(material.Button, { disabled: (!form.formState.isDirty || props.disableQuickSearch) && !dirty, startIcon: jsxRuntime.jsx(ClearIcon$1, {}), variant: 'outlined', onClick: handleClear, children: "Limpiar" }), jsxRuntime.jsx(material.Button, { loading: props.disableQuickSearch, disabled: !form.formState.isDirty, startIcon: jsxRuntime.jsx(FilterAltIcon, {}), variant: 'outlined', onClick: form.handleSubmit(onSubmitHandler, onError), children: "Aplicar" })] })] }) }) }) })) }) }));
+                                    }) }), jsxRuntime.jsx(material.Grid, { size: 12, py: 2, children: jsxRuntime.jsx(Divider, {}) }), jsxRuntime.jsxs(material.Grid, { size: 12, display: "flex", justifyContent: "space-evenly", children: [jsxRuntime.jsx(material.Button, { disabled: (!form.formState.isDirty ||
+                                                props.disableQuickSearch) &&
+                                                !dirty, startIcon: jsxRuntime.jsx(ClearIcon$1, {}), variant: "outlined", onClick: handleClear, children: "Limpiar" }), jsxRuntime.jsx(material.Button, { loading: props.disableQuickSearch, disabled: !form.formState.isDirty, startIcon: jsxRuntime.jsx(FilterAltIcon, {}), variant: "outlined", onClick: form.handleSubmit(onSubmitHandler, onError), children: "Aplicar" })] })] }) }) }) })) }) }));
 };
 
 const FiltersButton = (props) => {
     const [open, setOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     const handleClick = () => {
-        setOpen(prevState => !prevState);
+        setOpen((prevState) => !prevState);
     };
     const filterCount = React.useMemo(() => {
         return lodash.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 && lodash.findIndex(props.protectFilters, function (x) { return x == key; }) > -1)
+            if (props.protectFilters &&
+                lodash.findIndex(props.protectFilters, function (x) {
+                    return x == key;
+                }) > -1)
                 return;
             return (lodash.isNumber(value) && value > 0) || !lodash.isEmpty(value) || lodash.isBoolean(value);
         }).true;
-    }, [
-        props.filters.filterModel.items, props.protectFilters
-    ]);
+    }, [props.filters.filterModel.items, props.protectFilters]);
     // ===== || ABRIR CON CTRL + Shift + F || ===== //
     const handleKeyPress = React.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]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { title: "Filtros", children: jsxRuntime.jsx(xDataGrid.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip, { title: "Filtros", children: jsxRuntime.jsx(xDataGrid.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: jsxRuntime.jsx(material.Badge, { badgeContent: filterCount, color: "primary", children: jsxRuntime.jsx(FilterListIcon, { fontSize: "small" }) }) }) }), jsxRuntime.jsx(FiltersPopper, { ...props, menuRef: menuRef, open: open, setOpen: setOpen })] }));
+                    }, className: "my-icon-button", children: jsxRuntime.jsx(material.Badge, { badgeContent: filterCount, color: "primary", children: jsxRuntime.jsx(FilterListIcon, { fontSize: "small" }) }) }) }), jsxRuntime.jsx(FiltersPopper, { ...props, menuRef: menuRef, open: open, setOpen: setOpen })] }));
 };
 
 const ExportCSV = (props) => {
@@ -27169,41 +27191,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 = lodash.merge({}, lodash.omit(props.filterModel, lodash.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 = lodash.merge({}, lodash.omit(props.filterModel, lodash.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 (jsxRuntime.jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading: isLoading, disabled: props.disabledWithoutSelection && !props.rowSelectionModel.ids.size, children: props.slots?.title || 'Descargar como CSV' }, 'export-dg-csv'));
+    return (jsxRuntime.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] = React.useState(false);
     const exportMenuTriggerRef = React.useRef(null);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Tooltip, { title: "Exportar", children: jsxRuntime.jsx(xDataGrid.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: jsxRuntime.jsx(FileDownloadIcon, { fontSize: "small" }) }) }), jsxRuntime.jsxs(Menu, { id: "export-menu", anchorEl: exportMenuTriggerRef.current, open: exportMenuOpen, onClose: () => setExportMenuOpen(false), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Tooltip, { title: "Exportar", children: jsxRuntime.jsx(xDataGrid.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: jsxRuntime.jsx(FileDownloadIcon, { fontSize: "small" }) }) }), jsxRuntime.jsxs(Menu, { 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 &&
-                        jsxRuntime.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 && (jsxRuntime.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 = lodash.omit(item.props, 'csvExport');
-                        return (item.element({
+                        const remainingProps = lodash.omit(item.props, "csvExport");
+                        return item.element({
                             handleClick: () => setExportMenuOpen(false),
                             filterModel: props.filterModel,
                             sortModel: props.sortModel,
@@ -27212,7 +27239,7 @@ const ExportButton = (props) => {
                                 ...csvExport,
                             },
                             ...remainingProps,
-                        }));
+                        });
                     })] })] }));
 };
 
@@ -27220,34 +27247,33 @@ const ColumnsButton = () => {
     const apiRef = xDataGrid.useGridApiContext();
     const allCols = apiRef.current.getAllColumns().length;
     const visibleCols = apiRef.current.getVisibleColumns().length;
-    return (jsxRuntime.jsx(material.Tooltip, { title: "Columnas", children: jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { className: 'my-icon-button' }), children: jsxRuntime.jsx(material.Badge, { color: 'primary', variant: 'dot', invisible: visibleCols >= allCols, children: jsxRuntime.jsx(ViewColumnIcon, { fontSize: "small" }) }) }) }));
+    return (jsxRuntime.jsx(material.Tooltip, { title: "Columnas", children: jsxRuntime.jsx(xDataGrid.ColumnsPanelTrigger, { render: jsxRuntime.jsx(xDataGrid.ToolbarButton, { className: "my-icon-button" }), children: jsxRuntime.jsx(material.Badge, { color: "primary", variant: "dot", invisible: visibleCols >= allCols, children: jsxRuntime.jsx(ViewColumnIcon, { fontSize: "small" }) }) }) }));
 };
 
 const RefreshButton = (props) => {
     // ===== || EJECUTAR CON CTRL + Shift + R || ===== //
     const handleKeyPress = React.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]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
-    return (jsxRuntime.jsx(Tooltip, { title: 'Refrescar', children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.refetch, children: jsxRuntime.jsx(RefreshIcon, { fontSize: 'small' }) }) }));
+    return (jsxRuntime.jsx(Tooltip, { title: "Refrescar", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.refetch, children: jsxRuntime.jsx(RefreshIcon, { fontSize: "small" }) }) }));
 };
 
 const CustomToolbar = (props) => {
     const [expanded, setExpanded] = React.useState(true);
     return (jsxRuntime.jsx(xDataGrid.Toolbar, { style: {
-            minHeight: expanded ? 'inherit' : '10px',
-        }, children: expanded ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.Stack, { direction: 'row', width: 0.5, justifyContent: 'left', children: [!props.buttons?.refresh?.hide && jsxRuntime.jsx(RefreshButton, { refetch: props.buttons?.refresh?.refetch }), !(props.buttons?.refresh?.hide || props.buttons?.export?.hide) && jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), !props.buttons?.export?.hide && (jsxRuntime.jsx(ExportButton, { filterModel: props.filters.filterModel, sortModel: props.sortModel, rowSelectionModel: props.selection, ...props.buttons.export }))] }), jsxRuntime.jsx(material.Box, { width: 1, display: 'flex', justifyContent: 'center', alignItems: 'top', children: jsxRuntime.jsx(material.IconButton, { size: 'small', onClick: () => setExpanded(false), children: jsxRuntime.jsx(ExpandLessIcon, {}) }) }), jsxRuntime.jsxs(material.Stack, { direction: 'row', width: 0.5, justifyContent: 'right', children: [jsxRuntime.jsx(ColumnsButton, {}), !props.buttons.filters?.hide &&
-                            jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(FiltersButton, { ...props })] }), jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(QuickSearch, { disableQuickSearch: props.disableQuickSearch, filters: props.filters }), props.extraButtons &&
-                            props.extraButtons.map((button, index) => (jsxRuntime.jsxs(material.Box, { display: 'flex', children: [jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(Tooltip, { title: button.label, children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: () => button.onClick(), className: 'my-icon-button', ...button.buttonProps, children: jsxRuntime.jsx(button.icon, { fontSize: "small" }) }) })] }, `toolbar-button-${index}`))), jsxRuntime.jsx(SelectedRowsButton, { selection: props.selection, extraActions: props.extraActions })] })] })) : (jsxRuntime.jsx(material.Box, { width: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', children: jsxRuntime.jsx(material.IconButton, { onClick: () => setExpanded(true), children: jsxRuntime.jsx(ExpandMoreIcon, {}) }) })) }));
+            minHeight: expanded ? "inherit" : "10px",
+        }, children: expanded ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.Stack, { direction: "row", width: 0.5, justifyContent: "left", children: [!props.buttons?.refresh?.hide && (jsxRuntime.jsx(RefreshButton, { refetch: props.buttons?.refresh?.refetch })), !(props.buttons?.refresh?.hide || props.buttons?.export?.hide) && (jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } })), !props.buttons?.export?.hide && (jsxRuntime.jsx(ExportButton, { filterModel: props.filters.filterModel, sortModel: props.sortModel, rowSelectionModel: props.selection, ...props.buttons.export }))] }), jsxRuntime.jsx(material.Box, { width: 1, display: "flex", justifyContent: "center", alignItems: "top", children: jsxRuntime.jsx(material.IconButton, { size: "small", onClick: () => setExpanded(false), children: jsxRuntime.jsx(ExpandLessIcon, {}) }) }), jsxRuntime.jsxs(material.Stack, { direction: "row", width: 0.5, justifyContent: "right", children: [jsxRuntime.jsx(ColumnsButton, {}), !props.buttons.filters?.hide && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(FiltersButton, { ...props })] })), jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(QuickSearch, { disableQuickSearch: props.disableQuickSearch, filters: props.filters }), props.extraButtons &&
+                            props.extraButtons.map((button, index) => (jsxRuntime.jsxs(material.Box, { display: "flex", children: [jsxRuntime.jsx(material.Divider, { orientation: "vertical", variant: "middle", flexItem: true, sx: { mx: 0.5 } }), jsxRuntime.jsx(Tooltip, { title: button.label, children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: () => button.onClick(), className: "my-icon-button", ...button.buttonProps, children: jsxRuntime.jsx(button.icon, { fontSize: "small" }) }) })] }, `toolbar-button-${index}`))), jsxRuntime.jsx(SelectedRowsButton, { selection: props.selection, extraActions: props.extraActions })] })] })) : (jsxRuntime.jsx(material.Box, { width: 1, display: "flex", justifyContent: "center", alignItems: "center", children: jsxRuntime.jsx(material.IconButton, { onClick: () => setExpanded(true), children: jsxRuntime.jsx(ExpandMoreIcon, {}) }) })) }));
 };
 
 const StyledGridOverlay = material.styled('div')(({ theme }) => ({
@@ -27285,20 +27311,22 @@ function CustomPagination() {
 }
 
 const DraggableRow = (params) => {
-    const { attributes, listeners, setNodeRef, transform, transition, } = sortable.useSortable({ id: params.rowId.toString() });
+    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({
+        id: params.rowId.toString(),
+    });
     const style = {
         transform: utilities.CSS.Transform.toString(transform),
-        transition
+        transition,
     };
-    return (jsxRuntime.jsxs(material.Box, { display: 'flex', ref: setNodeRef, style: style, children: [jsxRuntime.jsx(material.Box, { ...attributes, ...listeners, sx: {
-                    width: '20px',
+    return (jsxRuntime.jsxs(material.Box, { display: "flex", ref: setNodeRef, style: style, children: [jsxRuntime.jsx(material.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",
+                    },
                 } }), jsxRuntime.jsx(xDataGrid.GridRow, { ...params })] }));
 };
 
@@ -27315,38 +27343,41 @@ 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 (lodash.isEqual(data, original_data))
             return originalRow;
         try {
             const result = await editMutation(data).unwrap();
-            setErrors(prevState => immer.produce(prevState, draft => {
+            setErrors((prevState) => immer.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 => immer.produce(prevState, draft => {
-                draft[newRow.id] = lodash.get(e, 'data');
+            setErrors((prevState) => immer.produce(prevState, (draft) => {
+                draft[newRow.id] = lodash.get(e, "data");
             }));
-            notifications.show('Error actualizando información!', { severity: 'error' });
+            notifications.show("Error actualizando información!", { severity: "error" });
         }
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.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);
@@ -27354,9 +27385,9 @@ const EditGridWrapper = (props) => {
         }
     }, [edit, props.permission]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     // ========================= || DRAG N DROP || ========================= //
@@ -27373,7 +27404,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] = lodash.get(overRow, field);
             editMutation(mutationArgs);
         }
@@ -27391,33 +27425,37 @@ 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 (!lodash.get(row, `obj_permissions.edit`) || (reason === xDataGrid.GridRowEditStartReasons.cellDoubleClick && !edit)) {
+            if (!lodash.get(row, `obj_permissions.edit`) ||
+                (reason === xDataGrid.GridRowEditStartReasons.cellDoubleClick && !edit)) {
                 event.defaultMuiPrevented = true;
             }
         },
         // edit
         checkboxSelection: !edit,
         ...(edit ? { onRowClick: undefined } : []),
-        editMode: 'row',
+        editMode: "row",
         rowModesModel: rowModesModel,
         onRowModesModelChange: setRowModesModel,
         processRowUpdate: processRowUpdate,
         loadingParams: [loadingMutation],
     }, props.dataGridProps);
-    const renderEditGrid = () => (jsxRuntime.jsx(core$1.DndContext, { sensors: sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: [
-            modifiers.restrictToVerticalAxis,
-            modifiers.restrictToWindowEdges,
-            modifiers.restrictToParentElement
-        ], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({ ...props.renderFunctionProps, dataGridProps: editGridProps }) }) }));
+    const renderEditGrid = () => (jsxRuntime.jsx(core$1.DndContext, { sensors: sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToVerticalAxis, modifiers.restrictToWindowEdges, modifiers.restrictToParentElement], autoScroll: false, children: jsxRuntime.jsx(sortable.SortableContext, { items: rows ? rows.map((row) => row.id.toString()) : [], strategy: sortable.verticalListSortingStrategy, children: props.renderFunction({
+                ...props.renderFunctionProps,
+                dataGridProps: editGridProps,
+            }) }) }));
     return renderEditGrid();
 };
 
@@ -27438,43 +27476,47 @@ const editColumn = (props) => {
             [id]: { mode: xDataGrid.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(row, 'obj_permissions.edit');
+                const canEdit = get(row, "obj_permissions.edit");
                 const isInEditMode = props.rowModesModel[id]?.mode === xDataGrid.GridRowModes.Edit;
                 if (isInEditMode) {
                     return [
-                        jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(SaveIcon, {}), label: 'Guardar', color: 'primary', onClick: handleSaveClick(id) }, 'save'),
-                        jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(CancelIcon, {}), label: 'Cancelar', className: 'textPrimary', onClick: handleCancelClick(id), color: 'inherit' }, 'cancel'),
+                        jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(SaveIcon, {}), label: "Guardar", color: "primary", onClick: handleSaveClick(id) }, "save"),
+                        jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(CancelIcon, {}), label: "Cancelar", className: "textPrimary", onClick: handleCancelClick(id), color: "inherit" }, "cancel"),
                     ];
                 }
                 return [
-                    jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(EditIcon, { sx: { color: canEdit ? 'black' : 'inherit' } }), label: 'Editar', className: 'textPrimary', onClick: handleEditClick(id), disabled: !canEdit }, 'edit'),
+                    jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.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(row, `obj_permissions.delete`, false);
                 return [
-                    jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(DeleteIcon, {}), label: 'Eliminar', className: 'textPrimary', onClick: props.handleOpen(id), color: 'primary', disabled: !canDelete }, 'delete')
+                    jsxRuntime.jsx(xDataGrid.GridActionsCellItem, { icon: jsxRuntime.jsx(DeleteIcon, {}), label: "Eliminar", className: "textPrimary", onClick: props.handleOpen(id), color: "primary", disabled: !canDelete }, "delete"),
                 ];
-            }
-        }];
+            },
+        },
+    ];
 };
 
 const DeleteGridWrapper = (props) => {
@@ -27488,25 +27530,25 @@ const DeleteGridWrapper = (props) => {
         setDeleteRowId(undefined);
     };
     const handleClickDelete = () => {
-        setDeleting(prevState => !prevState);
+        setDeleting((prevState) => !prevState);
     };
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.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]);
     React.useEffect(() => {
-        document.addEventListener('keydown', handleKeyPress);
+        document.addEventListener("keydown", handleKeyPress);
         return () => {
-            document.removeEventListener('keydown', handleKeyPress);
+            document.removeEventListener("keydown", handleKeyPress);
         };
     }, [handleKeyPress]);
     // ===== || GRID PROPS || ===== //
@@ -27520,20 +27562,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 = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.mutation &&
-                jsxRuntime.jsx(DeleteConfirmationDialog, { mutation: props.mutation, open: !!deleteRowId, handleClose: handleClose, id: deleteRowId, disableNavBack: true }), props.renderFunction({ ...props.renderFunctionProps, dataGridProps: deleteGridProps })] }));
+    const renderDeleteGrid = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.mutation && (jsxRuntime.jsx(DeleteConfirmationDialog, { mutation: props.mutation, open: !!deleteRowId, handleClose: handleClose, id: deleteRowId, disableNavBack: true })), props.renderFunction({ ...props.renderFunctionProps, dataGridProps: deleteGridProps })] }));
     return renderDeleteGrid();
 };
 
@@ -27542,7 +27587,7 @@ const CreateGridWrapper = (props) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
     const handleClick = () => {
-        setAnchorEl(document.getElementById('create-button'));
+        setAnchorEl(document.getElementById("create-button"));
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -27557,51 +27602,56 @@ const CreateGridWrapper = (props) => {
     // ===== || KEYDOWN || ===== //
     const handleKeyPress = React.useCallback((event) => {
         if (props.permission) {
-            if (event.ctrlKey && event.key === 'e') {
+            if (event.ctrlKey && event.key === "e") {
                 event.preventDefault();
                 handleClick();
             }
         }
     }, [props.permission]);
     React.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsx(MenuItem, { onClick: () => {
-                                handleToggleOpen(option);
-                                handleClose();
-                            }, disableRipple: true, children: option.title }, index));
-                    })), jsxRuntime.jsx(MenuItem, { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsxs(MenuItem, { onClick: () => {
+                                    handleToggleOpen(option);
+                                    handleClose();
+                                }, disableRipple: true, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(AttachFileIcon, { sx: { transform: "rotate(90deg)" } }) }), option.title] }, index));
+                        }), jsxRuntime.jsxs(MenuItem, { onClick: () => {
                             navigate(props.navigation ? `${props.navigation}crear` : `crear`);
                             handleClose();
-                        }, disableRipple: true, children: "Manual" })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
+                        }, disableRipple: true, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(DrawIcon, {}) }), "Manual"] })] }), props.csv_upload?.enable && (jsxRuntime.jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
 };
 
 const Base = (props) => {
@@ -27858,13 +27908,13 @@ const ActiveCell = ({ value }) => {
     }, [value]);
     const renderIcon = React.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:
@@ -27875,7 +27925,7 @@ const ActiveCell = ({ value }) => {
                 return jsxRuntime.jsx(ErrorOutlineIcon, { ...iconProps });
         }
     }, [color, value]);
-    return (jsxRuntime.jsx(material.Box, { px: 2, py: 0.5, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 2, borderColor: color[900], children: renderIcon() }));
+    return (jsxRuntime.jsx(material.Box, { px: 2, py: 0.5, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 2, borderColor: color[900], children: renderIcon() }));
 };
 
 const MyGridEditSingleSelect = (props) => {
@@ -28037,34 +28087,38 @@ const Field = (props) => {
         return true;
     }, [props.data, props.dependantOn]);
     const renderField = React.useCallback(() => {
-        if (!props.pageType || props.pageType == 'list')
+        if (!props.pageType || props.pageType == "list")
             return;
-        if (props.pageType == 'detail')
+        if (props.pageType == "detail")
             return jsxRuntime.jsx(DetailField, { ...props });
         else
             return jsxRuntime.jsx(EditField, { ...props });
     }, [props]);
     if (!show)
         return;
-    return (jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: 'column', ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: 'body1', fontWeight: 'bold', children: props.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: renderField() })] }));
+    return (jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: renderField() })] }));
 };
 
 const EditToolbar = (props) => {
-    return (jsxRuntime.jsxs(xDataGrid.Toolbar, { children: [props.pageType != 'detail' &&
-                jsxRuntime.jsx(Tooltip, { title: 'Crear', children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleCreate, children: jsxRuntime.jsx(AddIcon, { fontSize: "small" }) }) }), !!props.selected &&
-                jsxRuntime.jsx(Tooltip, { title: 'Borrar', children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleDelete, children: jsxRuntime.jsx(DeleteIcon, { fontSize: "small" }) }) })] }));
+    return (jsxRuntime.jsxs(xDataGrid.Toolbar, { children: [props.pageType != "detail" && (jsxRuntime.jsx(Tooltip, { title: "Crear", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleCreate, children: jsxRuntime.jsx(AddIcon, { fontSize: "small" }) }) })), !!props.selected && (jsxRuntime.jsx(Tooltip, { title: "Borrar", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleDelete, children: jsxRuntime.jsx(DeleteIcon, { fontSize: "small" }) }) }))] }));
 };
 const FieldArrayField = (props) => {
     const { fields, remove } = reactHookForm.useFieldArray({
         control: props.form.control,
         name: props.name,
-        keyName: '_id'
+        keyName: "_id",
     });
-    const [drawer, setDrawer] = React.useState({ open: false, data: undefined });
-    const [rowSelectionModel, setRowSelectionModel] = React.useState({ type: 'include', ids: new Set() });
-    const getIndex = React.useCallback((id) => (lodash.findIndex(fields, function (field) {
+    const [drawer, setDrawer] = React.useState({
+        open: false,
+        data: undefined,
+    });
+    const [rowSelectionModel, setRowSelectionModel] = React.useState({
+        type: "include",
+        ids: new Set(),
+    });
+    const getIndex = React.useCallback((id) => lodash.findIndex(fields, function (field) {
         return field._id == id;
-    })), [fields]);
+    }), [fields]);
     const handleCreate = () => {
         setDrawer({ open: true, data: undefined });
     };
@@ -28087,7 +28141,7 @@ const FieldArrayField = (props) => {
     const handleRowClick = (e) => {
         setDrawer({ open: true, data: e.row });
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: 'column', ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: 'body1', fontWeight: 'bold', children: props.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(xDataGrid.DataGrid, { ...props.dataGridProps, rows: fields, checkboxSelection: props.pageType != 'detail', onRowSelectionModelChange: (newRowSelectionModel) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(xDataGrid.DataGrid, { ...props.dataGridProps, rows: fields, checkboxSelection: props.pageType != "detail", onRowSelectionModelChange: (newRowSelectionModel) => {
                                 setRowSelectionModel(newRowSelectionModel);
                             }, showToolbar: true, slots: { toolbar: EditToolbar }, slotProps: {
                                 toolbar: {
@@ -28096,7 +28150,7 @@ const FieldArrayField = (props) => {
                                     handleDelete: handleDelete,
                                     pageType: props.pageType,
                                 },
-                            }, disableRowSelectionOnClick: true, onRowClick: handleRowClick, getRowId: (row) => row._id }) })] }), jsxRuntime.jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: 'Cargo Adicional', children: jsxRuntime.jsx(material.Grid, { size: 12, container: true, children: props.fields.map((field) => {
+                            }, disableRowSelectionOnClick: true, onRowClick: handleRowClick, getRowId: (row) => row._id }) })] }), jsxRuntime.jsx(MainDrawer, { open: drawer.open, drawerToggle: closeDrawer, title: "Cargo Adicional", children: jsxRuntime.jsx(material.Grid, { size: 12, container: true, children: props.fields.map((field) => {
                         const fieldName = `${props.name}.${getIndex(drawer.data?._id)}.${field.name}`;
                         return (jsxRuntime.jsx(Field, { ...field, form: props.form, name: fieldName, fieldData: lodash.get(drawer.data, field.name) }, fieldName));
                     }) }) })] }));
@@ -28194,10 +28248,10 @@ const Logo = () => {
 // ==============================|| PESTAÑAS ||============================== //
 /**
  * Pestañas customizables
-**/
+ **/
 const Tabs = (props) => {
     // valor inicial
-    const [value, setValue] = React.useState(props.initialValue || '1');
+    const [value, setValue] = React.useState(props.initialValue || "1");
     // manejar cambio de pestaña
     const handleChange = (_event, newValue) => {
         setValue(newValue);
@@ -28205,29 +28259,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.Children.map(option.children, (child) => {
                     const cloneProps = { ...child.props };
-                    lodash.set(cloneProps, 'type', props.type);
-                    lodash.set(cloneProps, 'slotProps.tab', option.value);
+                    lodash.set(cloneProps, "type", props.type);
+                    lodash.set(cloneProps, "slotProps.tab", option.value);
                     return React.cloneElement(child, cloneProps);
                 });
             };
             return (jsxRuntime.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
-    jsxRuntime.jsx(material.Box, { width: 1, height: 'calc(100vh - 175px)', children: jsxRuntime.jsxs(TabContext, { value: value, children: [jsxRuntime.jsx(TabList, { onChange: handleChange, "aria-label": "create-work-order-tabs", variant: 'scrollable', scrollButtons: 'auto', sx: {
-                        minHeight: 40
+    jsxRuntime.jsx(material.Box, { width: 1, height: "calc(100vh - 175px)", children: jsxRuntime.jsxs(TabContext, { value: value, children: [jsxRuntime.jsx(TabList, { onChange: handleChange, "aria-label": "create-work-order-tabs", variant: "scrollable", scrollButtons: "auto", sx: {
+                        minHeight: 40,
                     }, children: props.tabs.map((option) => {
-                        return (jsxRuntime.jsx(Tab, { label: option.label, icon: option.icon, iconPosition: 'start', value: option.value, sx: {
-                                color: 'secondary.light',
+                        return (jsxRuntime.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));
                     }) }), jsxRuntime.jsx(material.Box, { width: 1, height: 0.935, children: renderTabs() })] }) }));
 };
@@ -28311,7 +28369,7 @@ function DetailPage(props) {
         resolver: zod$1.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 : query$1.skipToken);
+    const { data, isLoading, isFetching, error: fetchError, } = props.api.data.query(!props.api.data.skipToken ? props.api.data.args : query$1.skipToken);
     React.useEffect(() => {
         if (data) {
             // set form data based on query data
@@ -28319,7 +28377,7 @@ function DetailPage(props) {
             if (props.slots?.title) {
                 const title = lodash.map(props.slots?.title, function (field) {
                     return lodash.get(data, field);
-                }).join(' ');
+                }).join(" ");
                 if (title)
                     dispatch(changeTitle(title));
             }
@@ -28330,60 +28388,64 @@ function DetailPage(props) {
         form.reset();
         navigate(-1);
     };
-    const canEdit = React.useMemo(() => lodash.get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ''}obj_permissions.edit`), [data, props.slotProps?.permissionsPath]);
-    const canDelete = React.useMemo(() => lodash.get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ''}obj_permissions.delete`), [data, props.slotProps?.permissionsPath]);
+    const canEdit = React.useMemo(() => lodash.get(data, `${props.slotProps?.permissionsPath ? `${props.slotProps?.permissionsPath}.` : ""}obj_permissions.edit`), [data, props.slotProps?.permissionsPath]);
+    const canDelete = React.useMemo(() => lodash.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 jsxRuntime.jsx(NotAllowed, {});
     if (fetchError && fetchError.originalStatus == 404)
         return jsxRuntime.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 (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: 'column', position: 'relative', pb: 2, children: [props.pageType == 'detail' && data?.has_history && jsxRuntime.jsx(HistorialDrawer, { ...props.slotProps?.historial }), props.sections.map((section, index) => {
+        return (jsxRuntime.jsxs(material.Grid, { size: 12, container: true, direction: "column", position: "relative", pb: 2, children: [props.pageType == "detail" && data?.has_history && (jsxRuntime.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 (jsxRuntime.jsx(Section, { data: data, form: form, bgColor: displayed_sections % 2 == 1 ? 'white' : '#F7F7F7', pageType: props.pageType, ...section, first: displayed_sections == 0 }, index));
+                    return (jsxRuntime.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);
@@ -28392,37 +28454,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 = lodash.get(data, props.slots?.badge || '');
+    const badgeInfo = lodash.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 (jsxRuntime.jsxs(material.Stack, { direction: 'row', spacing: 1, children: [canDelete && props.api.delete && jsxRuntime.jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack }), canEdit && jsxRuntime.jsx(EditButton, {})] }));
+            return (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, children: [canDelete && props.api.delete && (jsxRuntime.jsx(DeleteButton, { mutation: props.api.delete.mutation, disableNavBack: props.slotProps?.deleteButton?.disableNavBack })), canEdit && jsxRuntime.jsx(EditButton, {})] }));
         }
         else {
             return (jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContentLayout, { button: renderButton(), badge: props.pageType == 'detail' && badgeInfo &&
-                    jsxRuntime.jsx(StatusBadge, { title: badgeInfo['label'], severity: badgeInfo['value'] }), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: 'formulario', component: 'form', autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: '100%', position: 'relative', children: renderContent() }) }) }) }), renderPostAction()] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContentLayout, { button: renderButton(), badge: props.pageType == "detail" &&
+                    badgeInfo && (jsxRuntime.jsx(StatusBadge, { title: badgeInfo["label"], severity: badgeInfo["value"] })), children: jsxRuntime.jsx(LoadingComponent, { height: 0.7, isLoading: isLoading || isFetching, children: jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: jsxRuntime.jsx(material.Box, { id: "formulario", component: "form", autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler), width: "100%", position: "relative", children: renderContent() }) }) }) }), renderPostAction()] }));
 }
 
 const ListPage = (props) => {
@@ -28430,19 +28499,20 @@ const ListPage = (props) => {
 };
 
 function SlideTransition(props) {
-    return jsxRuntime.jsx(material.Slide, { ...props, direction: 'left' });
+    return jsxRuntime.jsx(material.Slide, { ...props, direction: "left" });
 }
 const BaseProgressSnack = (props) => {
-    // const dispatch = useAppDispatch();
+    console.log(props);
+    const dispatch = reactRedux.useDispatch();
     const handleClose = (e) => {
         if (e?.defaultMuiPrevented)
             return;
-        // dispatch(closeProgressSnack(props.id));
+        dispatch(closeProgressSnack(props.id));
     };
-    const finished = React.useMemo(() => lodash.get(props.data, 'finished'), [props.data]);
-    const error = React.useMemo(() => lodash.get(props.data, 'error'), [props.data]);
+    const finished = React.useMemo(() => lodash.get(props.data, "finished"), [props.data]);
+    const error = React.useMemo(() => lodash.get(props.data, "error"), [props.data]);
     const renderItem = React.useCallback(() => {
-        return (jsxRuntime.jsx(material.Snackbar, { anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: props.open, onClose: handleClose, slots: {
+        return (jsxRuntime.jsx(material.Snackbar, { anchorOrigin: { vertical: "bottom", horizontal: "right" }, open: props.open, onClose: handleClose, slots: {
                 transition: SlideTransition,
             }, slotProps: {
                 clickAwayListener: {
@@ -28450,27 +28520,27 @@ const BaseProgressSnack = (props) => {
                         event.defaultMuiPrevented = true;
                     },
                 },
-            }, children: jsxRuntime.jsx(material.Badge, { invisible: props.index < 1, badgeContent: props.index + 1, color: 'primary', children: jsxRuntime.jsx(material.Paper, { elevation: 2, sx: {
-                        bgcolor: props.data['error'] ? 'primary.main' : 'secondary.dark',
+            }, children: jsxRuntime.jsx(material.Badge, { invisible: props.index < 1, badgeContent: props.index + 1, color: "primary", children: jsxRuntime.jsx(material.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: jsxRuntime.jsxs(material.Stack, { direction: 'column', spacing: 1, children: [jsxRuntime.jsxs(material.Stack, { direction: 'row', alignItems: 'center', spacing: 1, justifyContent: 'space-between', children: [jsxRuntime.jsx(material.Typography, { pr: 2, color: 'inherit', children: props.data.title || 'N/A' }), finished && !error && (jsxRuntime.jsx(material.Tooltip, { title: 'Cerrar', placement: 'bottom', children: jsxRuntime.jsx(material.IconButton, { color: 'secondary', size: 'small', onClick: handleClose, sx: {
-                                                color: 'inherit',
-                                                '&:hover': {
-                                                    backgroundColor: 'rgba(255, 255, 255, 0.2)'
+                        borderRadius: "12px",
+                        color: "white",
+                    }, children: jsxRuntime.jsxs(material.Stack, { direction: "column", spacing: 1, children: [jsxRuntime.jsxs(material.Stack, { direction: "row", alignItems: "center", spacing: 1, justifyContent: "space-between", children: [jsxRuntime.jsx(material.Typography, { pr: 2, color: "inherit", children: props.data.title || "N/A" }), finished && !error && (jsxRuntime.jsx(material.Tooltip, { title: "Cerrar", placement: "bottom", children: jsxRuntime.jsx(material.IconButton, { color: "secondary", size: "small", onClick: handleClose, sx: {
+                                                color: "inherit",
+                                                "&:hover": {
+                                                    backgroundColor: "rgba(255, 255, 255, 0.2)",
                                                 },
-                                            }, children: jsxRuntime.jsx(CloseIcon, { fontSize: 'small' }) }) }))] }), !finished && !error && props.content(props.data)] }) }) }) }));
+                                            }, children: jsxRuntime.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 = reactRedux.useSelector(state => lodash.get(state, 'snackProgress', {}));
-    return (jsxRuntime.jsx(material.Stack, { direction: 'column', spacing: 2, children: Object.keys(snacks).map((key, index) => {
+    const snacks = reactRedux.useSelector((state) => lodash.get(state, "snackProgress", {}));
+    return (jsxRuntime.jsx(material.Stack, { direction: "column", spacing: 2, children: Object.keys(snacks).map((key, index) => {
             return (jsxRuntime.jsx(BaseProgressSnack, { id: key, index: index, ...snacks[key], content: props.content }, key));
         }) }));
 };