@acvl/frontend-components 0.0.24 → 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",
         } }));
 };
 
@@ -25664,9 +25666,9 @@ dayjs.locale(es);
 dayjs.extend(duration);
 
 // ==============================|| JSON ||============================== //
-const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, data, props, formType }) => {
+const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, data, props, formType, }) => {
     const ignore = get(props, `${base_key}.ignore`, false);
-    if (ignore || ['obj_permissions', 'has_history'].includes(base_key))
+    if (ignore || ["obj_permissions", "has_history"].includes(base_key))
         return;
     const altered_key = lodash.invoke(props, `${base_key}.alter_key`, base_key);
     const key = altered_key || base_key;
@@ -25684,7 +25686,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
         case "string":
             if (lodash.invoke(props, `${base_key}.extra_validation`, object))
                 return;
-            setValue(response, key, isEmpty(object) ? '' : object);
+            setValue(response, key, isEmpty(object) ? "" : object);
             break;
         case "number":
             setValue(response, key, object);
@@ -25694,28 +25696,37 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             break;
         case "object":
             if (isNull(object) || isEmpty(object)) {
-                if (includes(key, 'after') || includes(key, 'before'))
-                    setValue(response, key, '');
+                if (includes(key, "after") || includes(key, "before"))
+                    setValue(response, key, "");
                 else
                     setValue(response, key, object);
             }
+            else if (object instanceof File) {
+                setValue(response, key, object);
+            }
             else if (object instanceof dayjs) {
-                setValue(response, key, object.format(get(props, `${key}.format`, 'YYYY-MM-DD')));
+                setValue(response, key, object.format(get(props, `${key}.format`, "YYYY-MM-DD")));
             }
-            else if ('label' in object && 'value' in object) {
+            else if ("label" in object && "value" in object) {
                 if (useLabel)
-                    setValue(response, key, object['label']);
+                    setValue(response, key, object["label"]);
                 else
-                    setValue(response, key, object['value']);
+                    setValue(response, key, object["value"]);
             }
-            else if (Array.isArray(object)) { // it is an array
-                if (object.length && typeof object[0] == 'object' && !Array.isArray(object[0]) && 'value' in object[0] && object[0]['value'] == 'all') { // for data grid filters
-                    setValue(response, key, '');
+            else if (Array.isArray(object)) {
+                // it is an array
+                if (object.length &&
+                    typeof object[0] == "object" &&
+                    !Array.isArray(object[0]) &&
+                    "value" in object[0] &&
+                    object[0]["value"] == "all") {
+                    // for data grid filters
+                    setValue(response, key, "");
                 }
                 else {
                     forEach(object, (arrayItem, idx) => {
-                        if (typeof arrayItem == 'object') {
-                            if ('label' in arrayItem) {
+                        if (typeof arrayItem == "object") {
+                            if ("label" in arrayItem) {
                                 setValue(response, `${key}.${idx}`, function (item) {
                                     if (useLabel)
                                         return item.label;
@@ -25723,7 +25734,16 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
                                         return item.value;
                                 });
                             }
-                            typeSwitch({ base_object: arrayItem, base_key: `${key}.${idx}`, response: response, useLabel: useLabel, data: data, submitData: submitData, props: props, formType: formType });
+                            typeSwitch({
+                                base_object: arrayItem,
+                                base_key: `${key}.${idx}`,
+                                response: response,
+                                useLabel: useLabel,
+                                data: data,
+                                submitData: submitData,
+                                props: props,
+                                formType: formType,
+                            });
                         }
                         else {
                             const keyArray = get(response, key);
@@ -25740,9 +25760,19 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             }
             else {
                 forEach(object, (value, key2) => {
-                    if (!includes(['id', 'transporte.tarifa.cargos_adicionales'], key) && isEqual(get(data, `${key}.${key2}`), value))
+                    if (!includes(["id", "transporte.tarifa.cargos_adicionales"], key) &&
+                        isEqual(get(data, `${key}.${key2}`), value))
                         return;
-                    typeSwitch({ base_object: value, base_key: `${key}.${key2}`, response: response, useLabel: useLabel, data: data, submitData: submitData, props: props, formType: formType });
+                    typeSwitch({
+                        base_object: value,
+                        base_key: `${key}.${key2}`,
+                        response: response,
+                        useLabel: useLabel,
+                        data: data,
+                        submitData: submitData,
+                        props: props,
+                        formType: formType,
+                    });
                 });
             }
             break;
@@ -25754,7 +25784,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
 const jsonForm = ({ submitData, data, useLabel, props }) => {
     const response = {};
     forEach(submitData, function (value, key) {
-        if (key != 'id' && isEqual(get(data, key), value))
+        if (key != "id" && isEqual(get(data, key), value))
             return;
         typeSwitch({
             base_object: value,
@@ -25764,7 +25794,7 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
             data: data,
             props: props,
             submitData: submitData,
-            formType: 'json',
+            formType: "json",
         });
     });
     return response;
@@ -25772,7 +25802,7 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
 const formDataForm = ({ submitData, data, useLabel, props }) => {
     const formData = new FormData();
     forEach(submitData, function (value, key) {
-        if (key != 'id' && isEqual(get(data, key), value))
+        if (key != "id" && isEqual(get(data, key), value))
             return;
         typeSwitch({
             base_object: value,
@@ -25782,16 +25812,16 @@ const formDataForm = ({ submitData, data, useLabel, props }) => {
             data: data,
             props: props,
             submitData: submitData,
-            formType: 'formData',
+            formType: "formData",
         });
     });
     return formData;
 };
 // ==============================|| ERRORS ||============================== //
 const setErrors = (form, error) => {
-    if ('invalid_params' in error.data) {
+    if ("invalid_params" in error.data) {
         Object.values(error.data.invalid_params).forEach((entry) => {
-            form.setError(entry.name, { message: entry.reason.join(', ') });
+            form.setError(entry.name, { message: entry.reason.join(", ") });
         });
     }
 };
@@ -25803,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) => {
@@ -25873,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(", ") })] }) }) }));
         }) }));
 };
 
@@ -25934,14 +25953,14 @@ const FileBox = (props) => {
     return (jsxRuntime.jsxs(material.Box, { bgcolor: colors.grey[200], borderRadius: '12px', p: 2, display: 'flex', children: [jsxRuntime.jsx(material.Box, { flexGrow: 0.8, display: 'flex', justifyContent: 'left', alignItems: 'center', children: jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', children: props.file.name.split('.')[0] }) }), jsxRuntime.jsx(material.Box, { flexGrow: 0.2, display: 'flex', justifyContent: 'right', alignItems: 'center', children: props.loadingRemove ? (jsxRuntime.jsx(material.CircularProgress, { size: '18px' })) : (jsxRuntime.jsx(material.Tooltip, { title: 'Remove', children: jsxRuntime.jsx(material.IconButton, { color: 'error', sx: { p: 0 }, onClick: props.handleRemove, children: jsxRuntime.jsx(DeleteIcon, {}) }) })) })] }));
 };
 
-const VisuallyHiddenInput = material.styled('input')({
-    clipPath: 'inset(50%)',
+const VisuallyHiddenInput = material.styled("input")({
+    clipPath: "inset(50%)",
     height: 1,
-    overflow: 'hidden',
-    position: 'absolute',
+    overflow: "hidden",
+    position: "absolute",
     bottom: 0,
     left: 0,
-    whiteSpace: 'nowrap',
+    whiteSpace: "nowrap",
     width: 1,
 });
 const FileUploadBox = (props) => {
@@ -25952,68 +25971,78 @@ const FileUploadBox = (props) => {
     const [removerCSV, { isLoading: removerLoading }] = api.useRemoverCSVMutation();
     const Dropzone = ({ onChange, value }) => {
         const onDrop = React.useCallback((acceptedFiles) => {
-            acceptedFiles.map(file => {
-                const data = formDataForm({ });
-                validarCSV({ endpoint: props.csvProps.endpoint || '', data: data, custom: props.csvProps.custom }).unwrap()
+            acceptedFiles.map((file) => {
+                const data = formDataForm({ submitData: { archivo: file } });
+                validarCSV({
+                    endpoint: props.csvProps.endpoint || "",
+                    data: data,
+                    custom: props.csvProps.custom,
+                })
+                    .unwrap()
                     .then((response) => {
-                    onChange('archivo' in response ? response.archivo : acceptedFiles[0]);
+                    onChange("archivo" in response ? response.archivo : acceptedFiles[0]);
                     setFile(acceptedFiles[0]);
                     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);
                 });
             });
         }, []);
         const onDropRejected = React.useCallback(() => {
-            notifications.show('Tipo de archivo inválido. Solo se aceptan CSVs.', { severity: 'error' });
+            notifications.show("Tipo de archivo inválido. Solo se aceptan CSVs.", {
+                severity: "error",
+            });
         }, []);
-        const { getRootProps, getInputProps, isDragActive, } = reactDropzone.useDropzone({
+        const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
             onDrop,
             onDropRejected,
             accept: {
-                'text/csv': ['.csv'],
-                'application/vnd.ms-excel': ['.csv'],
+                "text/csv": [".csv"],
+                "application/vnd.ms-excel": [".csv"],
             },
             maxFiles: 1,
             multiple: false,
         });
         const handleRemove = () => {
-            if (typeof value == 'number') {
+            if (typeof value == "number") {
                 removerCSV({ id: value });
             }
             onChange(null);
             setFile(null);
         };
-        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;
-                    })] }) }));
+        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 })), renderErrorRows()] }) }));
     };
     return (jsxRuntime.jsx(reactHookForm.Controller, { name: props.name, control: props.control, render: ({ field: { onChange, value } }) => {
-            return (jsxRuntime.jsx(Dropzone, { onChange: onChange, value: value }));
+            return jsxRuntime.jsx(Dropzone, { onChange: onChange, value: value });
         } }));
 };
 
 const schema = zod.z.object({
-    archivo: zod.z.any()
+    archivo: zod.z.any(),
 });
 const CSVUpload = (props) => {
     const api = useAPI();
     const notifications = core.useNotifications();
+    const { pathname } = reactRouterDom.useLocation();
+    const endpoint = props.data?.endpoint || pathname;
     const [valid, setValid] = React.useState(false);
     const defaultValues = {
         archivo: null,
@@ -26022,29 +26051,30 @@ const CSVUpload = (props) => {
         resolver: zod$1.zodResolver(schema),
         defaultValues: defaultValues,
     });
-    const archivo = form.watch('archivo');
+    const archivo = form.watch("archivo");
     const [subirCSV, { isLoading }] = api.useSubirCSVMutation();
     const handleClose = () => {
         props.drawerToggle();
         form.reset();
     };
-    const tag = React.useMemo(() => props.data?.endpoint.split('/').at(-1), [props.data?.endpoint]);
+    const tag = React.useMemo(() => endpoint.split("/").at(-1), [endpoint]);
     const onSubmitHandler = (submitData) => {
-        const data = formDataForm(submitData);
-        subirCSV({ endpoint: props.data?.endpoint || '', tagType: tag, data: data, custom: props.data?.custom }).unwrap()
+        const data = formDataForm({ submitData });
+        subirCSV({ endpoint, tagType: tag, data, custom: props.data?.custom })
+            .unwrap()
             .then((response) => {
             if (props.postAction)
                 props.postAction(response);
             handleClose();
-            notifications.show('Archivo subido exitosamente!', { severity: 'success' });
+            notifications.show("Archivo subido exitosamente!", { severity: "success" });
         })
             .catch(() => {
-            notifications.show('Error!', { severity: 'error' });
+            notifications.show("Error!", { severity: "error" });
         });
     };
     const onError = (errors) => {
         console.log(errors);
-        notifications.show(`Error en: ${Object.keys(errors).join(', ')}!`, { severity: 'error' });
+        notifications.show(`Error en: ${Object.keys(errors).join(", ")}!`, { severity: "error" });
     };
     const handleDownload = () => {
         const link = document.createElement("a");
@@ -26052,7 +26082,7 @@ const CSVUpload = (props) => {
         link.href = `/plantillas/plantilla_${tag}.xlsx`;
         link.click();
     };
-    return (jsxRuntime.jsxs(MainDrawer, { open: props.open, drawerToggle: handleClose, title: props.data?.title || 'CSV', slots: {
+    return (jsxRuntime.jsxs(MainDrawer, { open: props.open, drawerToggle: handleClose, title: props.data?.title || "CSV", slots: {
             button: (jsxRuntime.jsx(SaveCancelButton, { slotProps: {
                     saveBtn: {
                         loading: isLoading,
@@ -26060,11 +26090,11 @@ const CSVUpload = (props) => {
                     },
                     cancelBtn: {
                         onClick: handleClose,
-                    }
-                } }))
-        }, children: [jsxRuntime.jsxs(material.Box, { px: 2, py: 3, bgcolor: colors.grey[50], borderRadius: '12px', children: [jsxRuntime.jsx(material.Typography, { fontWeight: 'bold', children: "Archivo de Muestra" }), jsxRuntime.jsxs(material.Stack, { direction: 'row', spacing: 2, children: [jsxRuntime.jsx(material.Typography, { variant: 'body2', children: "Puede descargar el ejemplo adjunto y utilizarlo como punto de partida para su propio archivo." }), jsxRuntime.jsx(material.Button, { variant: 'contained', startIcon: jsxRuntime.jsx(DownloadIcon, {}), onClick: handleDownload, sx: {
-                                    minWidth: 120
-                                }, children: "Descargar" })] })] }), jsxRuntime.jsx(material.Box, { id: 'formulario', component: 'form', width: 1, autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler, onError), children: jsxRuntime.jsx(FileUploadBox, { name: 'archivo', control: form.control, setValid: setValid, csvProps: props.data }) })] }));
+                    },
+                } })),
+        }, children: [jsxRuntime.jsxs(material.Box, { px: 2, py: 3, bgcolor: colors.grey[50], borderRadius: "12px", children: [jsxRuntime.jsx(material.Typography, { fontWeight: "bold", children: "Archivo de Muestra" }), jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 2, children: [jsxRuntime.jsx(material.Typography, { variant: "body2", children: "Puede descargar el ejemplo adjunto y utilizarlo como punto de partida para su propio archivo." }), jsxRuntime.jsx(material.Button, { variant: "contained", startIcon: jsxRuntime.jsx(DownloadIcon, {}), onClick: handleDownload, sx: {
+                                    minWidth: 120,
+                                }, children: "Descargar" })] })] }), jsxRuntime.jsx(material.Box, { id: "formulario", component: "form", width: 1, autoComplete: "off", noValidate: true, onSubmit: form.handleSubmit(onSubmitHandler, onError), children: jsxRuntime.jsx(FileUploadBox, { name: "archivo", control: form.control, setValid: setValid, csvProps: props.data }) })] }));
 };
 
 const mergeSettings = (baseSettings, mergingSettings) => {
@@ -26183,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: {
@@ -26199,7 +26229,7 @@ const snackProgress = toolkit.createSlice({
         closeProgressSnack(state, action) {
             return lodash.omit(state, action.payload);
         },
-    }
+    },
 });
 // exportar acciones
 const { openProgressSnack, updateProgressSnackData, closeProgressSnack } = snackProgress.actions;
@@ -26225,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();
@@ -26243,7 +26275,8 @@ const ControlledDropdown = (props) => {
     };
     const handleSearch = React.useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26256,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);
             };
@@ -26264,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 }));
         } }));
@@ -26296,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();
@@ -26317,7 +26352,8 @@ const ControlledSelect = (props) => {
     };
     const handleSearch = React.useCallback(debounce((args, callback) => {
         setOptions([]);
-        getOpciones(args).unwrap()
+        getOpciones(args)
+            .unwrap()
             .then(callback)
             .catch(() => {
             //
@@ -26326,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));
@@ -26355,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;
@@ -26366,7 +26404,7 @@ const ControlledSelect = (props) => {
                 } }));
         } }));
 };
-ControlledSelect.displayName = 'ControlledSelect';
+ControlledSelect.displayName = "ControlledSelect";
 
 // ==============================|| DESLIZADOR CONTROLADO ||============================== //
 const ControlledSlider$1 = (props) => {
@@ -26399,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 }));
         } }));
 };
@@ -26471,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 : " " }))] }));
         } }));
 };
 
@@ -26500,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();
@@ -26524,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" })] })] }));
 };
@@ -26557,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 })] }));
 };
 
@@ -26584,115 +26630,114 @@ 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],
         }),
     },
 }));
 
 const CreateButtonWithMenuOptions = (props) => {
-    // const permission = useHasPermission_v2(`${props.permission}.add`);
     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);
@@ -26704,21 +26749,24 @@ const CreateButtonWithMenuOptions = (props) => {
     const handleToggleClose = () => {
         setCSV({ open: false });
     };
-    // if (!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: () => {
+    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,
+                                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 }))] }));
@@ -26731,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)
@@ -26745,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) => {
@@ -26934,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 }));
 };
 
@@ -27015,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({
@@ -27027,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);
     };
@@ -27042,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);
@@ -27052,135 +27104,142 @@ 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) => {
-    // const endpoint = 'temp';
-    //
-    // const notifications = useNotifications();
-    // const [descargarCSV, {isLoading}] = ;
+    const { pathname } = reactRouterDom.useLocation();
+    const endpoint = props.slots?.endpoint || pathname;
+    const notifications = core.useNotifications();
+    const api = useAPI();
+    const [descargarCSV, { isLoading }] = api.useLazyDescargarCSVQuery();
     const handleClick = () => {
         const extraItems = { variant: props.slots?.variant };
         if (props.rowSelectionModel.ids.size > 0)
-            extraItems[`${props.slots?.column_key || 'id'}__in`] = Array.from(props.rowSelectionModel.ids).join(',');
-        // const filters = merge(
-        //     {},
-        //     omit(props.filterModel, map(props.ignore?.filters, function (filter) {return `items.${filter}`}) || []),
-        //     {items: extraItems}
-        // );
-        // descargarCSV({
-        //     endpoint: endpoint, filterModel: filters, sortModel: props.sortModel, ignoreSort: props.ignore?.sort,
-        // }).unwrap()
-        //     .then((response) => {
-        //         const file = document.createElement("a");
-        //         file.href = response.file
-        //         file.download = response.filename
-        //         file.click();
-        //
-        //         notifications.show('CSV descargado!', {severity: 'success'});
-        //         props.handleClick();
-        //     })
-        //     .catch((error) => {
-        //         console.log(error)
-        //         notifications.show('Error al descargar CSV.', {severity: 'error'});
-        //     })
+            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()
+            .then((response) => {
+            const file = document.createElement("a");
+            file.href = response.file;
+            file.download = response.filename;
+            file.click();
+            notifications.show("CSV descargado!", { severity: "success" });
+            props.handleClick();
+        })
+            .catch((error) => {
+            console.log(error);
+            notifications.show("Error al descargar CSV.", { severity: "error" });
+        });
     };
-    return (jsxRuntime.jsx(MenuItemWithLoading, { handleClick: handleClick, isLoading: false, 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,
+                            rowSelectionModel: props.rowSelectionModel,
                             csvExport: {
-                                rowSelectionModel: props.rowSelectionModel,
                                 ...csvExport,
                             },
-                            endpoint: props.csvProps?.endpoint,
                             ...remainingProps,
-                        }));
+                        });
                     })] })] }));
 };
 
@@ -27188,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 }) => ({
@@ -27253,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 })] }));
 };
 
@@ -27283,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);
@@ -27322,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 || ========================= //
@@ -27341,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);
         }
@@ -27359,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();
 };
 
@@ -27406,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) => {
@@ -27456,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 || ===== //
@@ -27488,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();
 };
 
@@ -27510,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);
@@ -27525,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) => {
@@ -27580,14 +27662,20 @@ const Base = (props) => {
         setFilterModel: setFilterModel,
     }));
     // ========================= || PAGINADO || ========================= //
-    const [paginationModel, setPaginationModel] = React.useState({ page: 0, pageSize: 50 });
+    const [paginationModel, setPaginationModel] = React.useState({
+        page: 0,
+        pageSize: 50,
+    });
     // ========================= || ORDENADO || ========================= //
     const [sortModel, setSortModel] = React.useState([]);
     // ========================= || FILTRADO || ========================= //
-    const [filterModel, setFilterModel] = React.useState({ items: {}, quickFilterValues: '' });
+    const [filterModel, setFilterModel] = React.useState({
+        items: {},
+        quickFilterValues: "",
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const setQuickSearchValue = React.useCallback(lodash.debounce((quickSearch) => {
-        setFilterModel(prevState => ({ ...prevState, quickFilterValues: quickSearch }));
+        setFilterModel((prevState) => ({ ...prevState, quickFilterValues: quickSearch }));
     }, 500), []);
     // ========================= || COLUMNAS || ========================= //
     const getTogglableColumns = (columns) => {
@@ -27595,7 +27683,7 @@ const Base = (props) => {
             return [];
         return columns
             .filter((column) => {
-            return !['__check__', 'actions'].includes(column.field);
+            return !["__check__", "actions"].includes(column.field);
         })
             .map((column) => column.field);
     };
@@ -27607,7 +27695,7 @@ const Base = (props) => {
     // ========================= || LAZY QUERY || ========================= //
     const [query, { data, isLoading, isFetching, isError, isUninitialized }] = props.api.data.query(props.api.data.options || {});
     // ========================= || INITIAL STATE || ========================= //
-    const localStoreName = React.useMemo(() => `${props.pathname}${props.slotProps?.tab ? `_${props.slotProps?.tab}` : ''}_DG`, [props.pathname, props.slotProps?.tab]);
+    const localStoreName = React.useMemo(() => `${props.pathname}${props.slotProps?.tab ? `_${props.slotProps?.tab}` : ""}_DG`, [props.pathname, props.slotProps?.tab]);
     const internalFilterRef = React.useRef(filterModel);
     const filterRef = props.slotProps?.filtersRef || internalFilterRef;
     React.useEffect(() => {
@@ -27617,28 +27705,30 @@ const Base = (props) => {
     const saveSnapshot = React.useCallback(() => {
         if (apiRef?.current?.exportState && localStorage && !props.slotProps?.dontSaveState) {
             const currentState = apiRef.current.exportState();
-            lodash.set(currentState, 'filters.filterModel', filterRef.current);
+            lodash.set(currentState, "filters.filterModel", filterRef.current);
             setWithExpiry(localStoreName, currentState, 86400000);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiRef, props.pathname]);
     React.useLayoutEffect(() => {
         const stateFromLocalStorage = getWithExpiry(localStoreName);
-        const init = stateFromLocalStorage ? stateFromLocalStorage : lodash.get(props, 'dataGridProps.initialState', {});
-        const pagination = lodash.get(init, 'pagination.paginationModel', paginationModel);
-        const sorting = lodash.get(init, 'sorting.sortModel', sortModel);
-        const filters = lodash.get(init, 'filters.filterModel', filterModel);
+        const init = stateFromLocalStorage
+            ? stateFromLocalStorage
+            : lodash.get(props, "dataGridProps.initialState", {});
+        const pagination = lodash.get(init, "pagination.paginationModel", paginationModel);
+        const sorting = lodash.get(init, "sorting.sortModel", sortModel);
+        const filters = lodash.get(init, "filters.filterModel", filterModel);
         setPaginationModel(pagination);
         setSortModel(sorting);
         setFilterModel(filters);
-        setColumnVisibilityModel(lodash.get(init, 'columns.columnVisibilityModel', columnVisibilityModel));
+        setColumnVisibilityModel(lodash.get(init, "columns.columnVisibilityModel", columnVisibilityModel));
         // handle refresh and navigating away/refreshing
-        window.addEventListener('beforeunload', saveSnapshot);
+        window.addEventListener("beforeunload", saveSnapshot);
         // console.log(getQueryArgs(pagination, sorting, filters, props.api.data.args))
         query(getQueryArgs(pagination, sorting, filters, props.api.data.args));
         return () => {
             // in case of an SPA remove the event-listener
-            window.removeEventListener('beforeunload', saveSnapshot);
+            window.removeEventListener("beforeunload", saveSnapshot);
             saveSnapshot();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -27657,8 +27747,8 @@ const Base = (props) => {
     };
     // ========================= || SELECCIÓN || ========================= //
     const [rowSelectionModel, setRowSelectionModel] = React.useState({
-        type: 'include',
-        ids: new Set()
+        type: "include",
+        ids: new Set(),
     });
     const handleRowSelectionModelChange = (newSelection) => {
         setRowSelectionModel(newSelection);
@@ -27676,13 +27766,13 @@ const Base = (props) => {
     const handleRowClick = ({ id }, event) => {
         const link_to = `${props.slotProps?.navigation != undefined ? props.slotProps?.navigation : props.pathname}/${id}`;
         if (event.ctrlKey) {
-            const newTab = document.createElement('a');
+            const newTab = document.createElement("a");
             newTab.href = link_to;
-            newTab.target = '_blank';
+            newTab.target = "_blank";
             newTab.click();
         }
         else {
-            navigate(`${props.slotProps?.navigation ? props.slotProps?.navigation : props.pathname}/${id}`);
+            navigate(`${props.slotProps?.navigation || props.slotProps?.navigation === "" ? props.slotProps?.navigation : props.pathname}/${id}`);
         }
     };
     const handleRowEditStop = (params, event) => {
@@ -27701,13 +27791,13 @@ const Base = (props) => {
         },
         slotProps: {
             baseCheckbox: {
-                size: 'small'
+                size: "small",
             },
             toolbar: {
                 filters: {
                     filterModel: filterModel,
                     setFilterModel: setFilterModel,
-                    setQuickSearchValue: setQuickSearchValue
+                    setQuickSearchValue: setQuickSearchValue,
                 },
                 protectFilters: props.api.data.protectFilters,
                 columnsFilter: props.slotProps?.columnsFilter,
@@ -27718,27 +27808,27 @@ const Base = (props) => {
                 buttons: {
                     refresh: {
                         refetch: handleRefetch,
-                    }
-                }
+                    },
+                },
             },
             columnsManagement: {
                 getTogglableColumns: getTogglableColumns,
             },
         },
     }, props.dataGridProps);
-    const renderDataGrid = ({ dataGridProps: renderDataGridProps }) => {
+    const renderDataGrid = ({ dataGridProps: renderDataGridProps, }) => {
         // console.log(dataGridProps)
         return (jsxRuntime.jsx(material.Box, { width: 1, minHeight: 300, height: 1, 
             // maxHeight={'calc(100% - 30px)'}
-            display: 'flex', flexDirection: 'column', pb: 0, children: jsxRuntime.jsx(material.NoSsr, { children: jsxRuntime.jsx(xDataGrid.DataGrid, { apiRef: apiRef, rows: data?.results || [], loading: lodash.some(lodash.get(renderDataGridProps, 'loadingParams', []), function (x) {
+            display: "flex", flexDirection: "column", pb: 0, children: jsxRuntime.jsx(material.NoSsr, { children: jsxRuntime.jsx(xDataGrid.DataGrid, { apiRef: apiRef, rows: data?.results || [], loading: lodash.some(lodash.get(renderDataGridProps, "loadingParams", []), function (x) {
                         return x;
                     }), 
                     // paginado //
-                    pagination: true, paginationMode: 'server', paginationModel: paginationModel, onPaginationModelChange: setPaginationModel, pageSizeOptions: [50, 100, { value: -1, label: 'Todos' }], 
+                    pagination: true, paginationMode: "server", paginationModel: paginationModel, onPaginationModelChange: setPaginationModel, pageSizeOptions: [50, 100, { value: -1, label: "Todos" }], 
                     // ordenado
-                    sortingMode: 'server', sortModel: sortModel, onSortModelChange: setSortModel, 
+                    sortingMode: "server", sortModel: sortModel, onSortModelChange: setSortModel, 
                     // filtrado
-                    filterMode: 'server', 
+                    filterMode: "server", 
                     // onFilterModelChange={handleFilterChange}
                     disableColumnFilter: true, showToolbar: true, 
                     // selection
@@ -27756,13 +27846,13 @@ const Base = (props) => {
                     // row count
                     rowCount: rowCount, 
                     // settings
-                    density: 'compact', 
+                    density: "compact", 
                     // striping
-                    getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd', localeText: {
-                        columnHeaderSortIconLabel: 'Ordenar',
-                        columnMenuSortAsc: 'Ordenar de menor a mayor',
-                        columnMenuSortDesc: 'Ordenar de mayor a menor',
-                        columnMenuLabel: 'Menú',
+                    getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd", localeText: {
+                        columnHeaderSortIconLabel: "Ordenar",
+                        columnMenuSortAsc: "Ordenar de menor a mayor",
+                        columnMenuSortDesc: "Ordenar de mayor a menor",
+                        columnMenuLabel: "Menú",
                     }, ...renderDataGridProps }) }) }));
     };
     // ========================= || RETURN || ========================= //
@@ -27776,7 +27866,7 @@ const Base = (props) => {
                 pathname: props.pathname,
                 navigation: props.slotProps?.navigation,
                 ...renderProps,
-                ...props.api.create
+                ...props.api.create,
             };
             renderFunction = CreateGridWrapper;
         }
@@ -27787,7 +27877,7 @@ const Base = (props) => {
                 renderFunctionProps: renderProps,
                 dataGridProps: dataGridProps,
                 baseGridRef: apiRef,
-                ...props.api.edit
+                ...props.api.edit,
             };
             renderFunction = EditGridWrapper;
         }
@@ -27797,7 +27887,7 @@ const Base = (props) => {
                 renderFunction: renderFunction,
                 renderFunctionProps: renderProps,
                 dataGridProps: dataGridProps,
-                ...props.api.delete
+                ...props.api.delete,
             });
         }
         return renderFunction(renderProps);
@@ -27818,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:
@@ -27835,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) => {
@@ -27997,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 });
     };
@@ -28047,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: {
@@ -28056,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));
                     }) }) })] }));
@@ -28154,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);
@@ -28165,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() })] }) }));
 };
@@ -28271,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
@@ -28279,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));
             }
@@ -28290,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);
@@ -28352,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) => {
@@ -28390,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: {
@@ -28410,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));
         }) }));
 };
@@ -28701,7 +28811,7 @@ exports.DeleteButton = DeleteButton;
 exports.DeleteConfirmationDialog = DeleteConfirmationDialog;
 exports.DetailPage = DetailPage;
 exports.EditButton = EditButton;
-exports.ExportButton = ExportButton;
+exports.ExportCSV = ExportCSV;
 exports.HistorialDrawer = HistorialDrawer;
 exports.ListPage = ListPage;
 exports.Loadable = Loadable;