@acvl/frontend-components 0.0.32 → 0.0.34

package/dist/cjs/index.js

@@ -47,10 +47,7 @@ var immer = require('immer');
 var set = require('lodash/set');
 var get = require('lodash/get');
 var isEmpty = require('lodash/isEmpty');
-var isNull = require('lodash/isNull');
 var isEqual = require('lodash/isEqual');
-var forEach = require('lodash/forEach');
-var includes = require('lodash/includes');
 var CancelIcon = require('@mui/icons-material/Cancel');
 var HistoryIcon = require('@mui/icons-material/History');
 var lab = require('@mui/lab');
@@ -70,20 +67,21 @@ var CheckBoxOutlineBlankIcon = require('@mui/icons-material/CheckBoxOutlineBlank
 var CheckBoxIcon = require('@mui/icons-material/CheckBox');
 var iconsMaterial = require('@mui/icons-material');
 var merge$1 = require('lodash/merge');
+var UploadFileIcon = require('@mui/icons-material/UploadFile');
+var ClearIcon$1 = require('@mui/icons-material/Clear');
 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 MoreVertIcon = require('@mui/icons-material/MoreVert');
 var xDataGrid = require('@mui/x-data-grid');
 var Tooltip = require('@mui/material/Tooltip');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
 var Menu = require('@mui/material/Menu');
-var MoreVertIcon = require('@mui/icons-material/MoreVert');
 var SearchIcon = require('@mui/icons-material/Search');
 var FilterListIcon = require('@mui/icons-material/FilterList');
-var ClearIcon$1 = require('@mui/icons-material/Clear');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
 var FilterNoneIcon = require('@mui/icons-material/FilterNone');
 var CheckIcon = require('@mui/icons-material/Check');
@@ -25668,68 +25666,65 @@ dayjs.locale(es);
 dayjs.extend(duration);
 
 // ==============================|| JSON ||============================== //
+const setValue = (formType, form, key, value) => {
+    if (formType === "json")
+        set(form, key, value);
+    else
+        form.append(key, value);
+};
 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))
         return;
-    const altered_key = lodash.invoke(props, `${base_key}.alter_key`, base_key);
+    const altered_key = props?.[base_key]?.alter_key?.(base_key);
     const key = altered_key || base_key;
-    const altered_obj = lodash.invoke(props, `${base_key}.alter_value`, base_object, submitData);
+    const altered_obj = props?.[base_key]?.alter_value?.(base_object, submitData);
     const object = altered_obj || base_object;
-    const setValue = (form, key, value) => {
-        if (formType === "json") {
-            set(form, key, value);
-        }
-        else if (formType === "formData") {
-            form.append(key, value);
-        }
-    };
     switch (typeof object) {
         case "string":
-            if (lodash.invoke(props, `${base_key}.extra_validation`, object))
+            if (props?.[base_key]?.extra_validation?.(object))
                 return;
-            setValue(response, key, isEmpty(object) ? "" : object);
+            setValue(formType, response, key, isEmpty(object) ? "" : object);
             break;
         case "number":
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
         case "boolean":
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
         case "object":
-            if (isNull(object) || isEmpty(object)) {
-                if (includes(key, "after") || includes(key, "before"))
-                    setValue(response, key, "");
-                else
-                    setValue(response, key, object);
+            if (object instanceof File) {
+                setValue(formType, response, key, object);
             }
-            else if (object instanceof File) {
-                setValue(response, key, object);
+            else if (object === null || isEmpty(object)) {
+                if (key.includes("after") || key.includes("before"))
+                    setValue(formType, response, key, "");
+                else
+                    setValue(formType, response, key, formType == "json" ? object : "");
             }
             else if (dayjs.isDayjs(object)) {
-                setValue(response, key, object.format(get(props, `${key}.format`, "YYYY-MM-DD")));
+                setValue(formType, response, key, object.format(get(props, `${key}.format`, "YYYY-MM-DD")));
             }
             else if ("label" in object && "value" in object) {
                 if (useLabel)
-                    setValue(response, key, object["label"]);
+                    setValue(formType, response, key, object["label"]);
                 else
-                    setValue(response, key, object["value"]);
+                    setValue(formType, response, key, object["value"]);
             }
             else if (Array.isArray(object)) {
-                // it is an array
                 if (object.length &&
-                    typeof object[0] == "object" &&
+                    typeof object[0] === "object" &&
                     !Array.isArray(object[0]) &&
                     "value" in object[0] &&
-                    object[0]["value"] == "all") {
+                    object[0]["value"] === "all") {
                     // for data grid filters
-                    setValue(response, key, "");
+                    setValue(formType, response, key, "");
                 }
                 else {
-                    forEach(object, (arrayItem, idx) => {
-                        if (typeof arrayItem == "object") {
+                    object.forEach((arrayItem, idx) => {
+                        if (typeof arrayItem === "object") {
                             if ("label" in arrayItem) {
-                                setValue(response, `${key}.${idx}`, function (item) {
+                                setValue(formType, response, `${key}.${idx}`, function (item) {
                                     if (useLabel)
                                         return item.label;
                                     else
@@ -25738,7 +25733,7 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
                             }
                             typeSwitch({
                                 base_object: arrayItem,
-                                base_key: `${key}.${idx}`,
+                                base_key: formType === "json" ? `${key}.${idx}` : `${key}[${idx}]`,
                                 response: response,
                                 useLabel: useLabel,
                                 data: data,
@@ -25752,21 +25747,21 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
                             if (keyArray)
                                 keyArray.push(arrayItem);
                             else
-                                setValue(response, key, [arrayItem]);
+                                setValue(formType, response, key, [arrayItem]);
                         }
                     });
                 }
             }
             else if (object instanceof Set) {
-                setValue(response, key, Array.from(object));
+                setValue(formType, response, key, Array.from(object));
             }
             else {
-                forEach(object, (value, key2) => {
+                Object.entries(object).forEach(([key2, value]) => {
                     if (key2 !== "id" && isEqual(get(data, `${key}.${key2}`), value))
                         return;
                     typeSwitch({
                         base_object: value,
-                        base_key: `${key}.${key2}`,
+                        base_key: formType === "json" ? `${key}.${key2}` : `${key}${key2}`,
                         response: response,
                         useLabel: useLabel,
                         data: data,
@@ -25778,14 +25773,15 @@ const typeSwitch = ({ base_object, base_key, response, submitData, useLabel, dat
             }
             break;
         default:
-            setValue(response, key, object);
+            setValue(formType, response, key, object);
             break;
     }
 };
-const jsonForm = ({ submitData, data, useLabel, props }) => {
-    const response = {};
-    forEach(submitData, function (value, key) {
-        if (key != "id" && isEqual(get(data, key), value))
+const formParser = ({ type, submitData, data, useLabel, props, }) => {
+    const t = type || "json";
+    const response = t === "json" ? {} : new FormData();
+    Object.entries(submitData).forEach(([key, value]) => {
+        if (key !== "id" && isEqual(get(data, key), value))
             return;
         typeSwitch({
             base_object: value,
@@ -25795,29 +25791,11 @@ const jsonForm = ({ submitData, data, useLabel, props }) => {
             data: data,
             props: props,
             submitData: submitData,
-            formType: "json",
+            formType: t,
         });
     });
     return response;
 };
-const formDataForm = ({ submitData, data, useLabel, props }) => {
-    const formData = new FormData();
-    forEach(submitData, function (value, key) {
-        if (key != "id" && isEqual(get(data, key), value))
-            return;
-        typeSwitch({
-            base_object: value,
-            base_key: key,
-            response: formData,
-            useLabel: useLabel,
-            data: data,
-            props: props,
-            submitData: submitData,
-            formType: "formData",
-        });
-    });
-    return formData;
-};
 // ==============================|| ERRORS ||============================== //
 const setErrors = (form, error) => {
     if ("invalid_params" in error.data) {
@@ -25954,7 +25932,7 @@ 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")({
+const VisuallyHiddenInput$1 = material.styled("input")({
     clipPath: "inset(50%)",
     height: 1,
     overflow: "hidden",
@@ -25973,7 +25951,7 @@ const FileUploadBox = (props) => {
     const Dropzone = ({ onChange, value }) => {
         const onDrop = React.useCallback((acceptedFiles) => {
             acceptedFiles.map((file) => {
-                const data = formDataForm({ submitData: { archivo: file } });
+                const data = formParser({ type: "formData", submitData: { archivo: file } });
                 validarCSV({
                     endpoint: props.csvProps.endpoint || "",
                     data: data,
@@ -26024,7 +26002,7 @@ const FileUploadBox = (props) => {
                 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: {
+        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$1, { 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
@@ -26060,7 +26038,7 @@ const CSVUpload = (props) => {
     };
     const tag = React.useMemo(() => endpoint.split("/").at(-1), [endpoint]);
     const onSubmitHandler = (submitData) => {
-        const data = formDataForm({ submitData });
+        const data = formParser({ type: "formData", submitData });
         subirCSV({ endpoint, tagType: tag, data, custom: props.data?.custom })
             .unwrap()
             .then((response) => {
@@ -26111,10 +26089,10 @@ const mergeSettings = (baseSettings, mergingSettings) => {
 };
 const val = (value) => {
     if (Array.isArray(value)) {
-        return value.join(',');
+        return value.join(",");
     }
-    else if (typeof value == 'boolean') {
-        return value ? 'true' : 'false';
+    else if (typeof value == "boolean") {
+        return value ? "true" : "false";
     }
     else {
         return value;
@@ -26130,13 +26108,14 @@ const filterQuery = ({ filters }) => {
     return queryParams;
 };
 const filterGrid = ({ page, pageSize, filterModel, sortModel, ignoreSort }) => {
+    //GridArgs
     const queryParams = [];
     if (page)
         queryParams.push(`page=${page + 1}`);
     if (pageSize)
         queryParams.push(`page_size=${pageSize}`);
     if (filterModel.items) {
-        const jsonFilters = jsonForm({ submitData: filterModel.items });
+        const jsonFilters = formParser({ submitData: filterModel.items });
         lodash.forEach(jsonFilters, function (value, key) {
             queryParams.push(`${key}=${val(value)}`);
         });
@@ -26145,28 +26124,28 @@ const filterGrid = ({ page, pageSize, filterModel, sortModel, ignoreSort }) => {
         queryParams.push(`search=${filterModel.quickFilterValues}`);
     }
     if (sortModel.length && !ignoreSort) {
-        const val = `${sortModel[0]?.sort == 'asc' ? '' : '-'}${sortModel[0]?.field}`;
+        const val = `${sortModel[0]?.sort == "asc" ? "" : "-"}${sortModel[0]?.field}`;
         queryParams.push(`ordering=${val}`);
     }
     return queryParams;
 };
 const query = (data, url, type) => {
     switch (type) {
-        case 'grid':
-            return `${url}?${filterGrid(data).join('&')}`;
-        case 'simpleFilter':
-            return `${url}?${filterQuery(data).join('&')}`;
-        case 'single':
+        case "grid":
+            return `${url}?${filterGrid(data).join("&")}`;
+        case "simpleFilter":
+            return `${url}?${filterQuery(data).join("&")}`;
+        case "single":
             return `${url}/${data.id}`;
     }
 };
 const tags = (result, type, invalidate) => {
     if (result) {
         if (!invalidate) {
-            if ('results' in result) {
+            if ("results" in result) {
                 return [
                     ...result.results.map(({ id }) => ({ type: type, id })),
-                    { type: type, id: 'LIST' },
+                    { type: type, id: "LIST" },
                 ];
             }
             else {
@@ -26174,14 +26153,12 @@ const tags = (result, type, invalidate) => {
             }
         }
         else {
-            return invalidate.request == 'post' ?
-                [{ type: type, id: 'LIST' }] :
-                []; // { type: type, id: result.id }
+            return invalidate.request == "post" ? [{ type: type, id: "LIST" }] : []; // { type: type, id: result.id }
         }
     }
     else {
         if (!invalidate) {
-            return [{ type: type, id: 'LIST' },];
+            return [{ type: type, id: "LIST" }];
         }
         else {
             return [];
@@ -26192,15 +26169,15 @@ async function manualCacheRefresh(api, id, dispatch, queryFulfilled, endpoints)
     try {
         const { data } = await queryFulfilled;
         if (endpoints.single) {
-            dispatch(api.util.updateQueryData(endpoints.single, { id: id.toString(), type: 'single' }, (draft) => {
-                Object.assign(draft, data['detail']);
+            dispatch(api.util.updateQueryData(endpoints.single, { id: id.toString(), type: "single" }, (draft) => {
+                Object.assign(draft, data["detail"]);
             }));
         }
         if (endpoints.multiple) {
-            dispatch(api.util.updateQueryData(endpoints.multiple, { type: 'all' }, (draft) => {
-                const index = lodash.findIndex(draft.results, ['id', id]);
+            dispatch(api.util.updateQueryData(endpoints.multiple, { type: "all" }, (draft) => {
+                const index = lodash.findIndex(draft.results, ["id", id]);
                 if (index > -1)
-                    Object.assign(draft.results[index], data['list']);
+                    Object.assign(draft.results[index], data["list"]);
             }));
         }
     }
@@ -26530,10 +26507,23 @@ const ControlledTimePicker = (props) => {
         } }));
 };
 
-const ControlledPhotoField = (props) => {
-    return (jsxRuntime.jsx(reactHookForm.Controller, { control: props.control, name: props.name, render: ({ field: { onChange, onBlur, ref }, fieldState: { error } }) => (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: 'secondary', children: [jsxRuntime.jsx("input", { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]) }), jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : ' ' })] })) }));
+const VisuallyHiddenInput = material.styled("input")({
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: 1,
+    overflow: "hidden",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    whiteSpace: "nowrap",
+    width: 1,
+});
+const ControlledFileField = (props) => {
+    return (jsxRuntime.jsx(reactHookForm.Controller, { control: props.control, name: props.name, render: ({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => {
+            return (jsxRuntime.jsxs(material.FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", children: [jsxRuntime.jsx(material.Typography, { children: value.name }), jsxRuntime.jsx(material.IconButton, { onClick: () => onChange(null), children: jsxRuntime.jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxRuntime.jsxs(material.Button, { component: "label", variant: "contained", startIcon: jsxRuntime.jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsxRuntime.jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsxRuntime.jsx(material.FormHelperText, { error: !!error, children: error ? error.message : " " })] }));
+        } }));
 };
-ControlledPhotoField.displayName = 'ControlledPhotoField';
+ControlledFileField.displayName = "ControlledFileField";
 
 // ==============================|| DESLIZADOR CONTROLADO ||============================== //
 const ControlledSlider = (props) => {
@@ -26546,7 +26536,8 @@ const ControlledSlider = (props) => {
 
 const DeleteConfirmationDialog = (props) => {
     const notifications = core.useNotifications();
-    const pathname = "temp";
+    const { pathname } = reactRouterDom.useLocation();
+    const navigate = reactRouterDom.useNavigate();
     const id = React.useMemo(() => props.id || pathname.split("/").at(-1), [pathname, props.id]);
     const [mutation] = props.mutation();
     const schema = zod.object({ confirmation: zod.string() });
@@ -26568,7 +26559,7 @@ const DeleteConfirmationDialog = (props) => {
                 handleClose();
             }
             else {
-                // props.navigate(-1);
+                navigate(-1);
                 form.reset();
             }
             notifications.show("Objeto removido exitosamente!", { severity: "success" });
@@ -26800,6 +26791,18 @@ const ButtonWithDrawer = (props) => {
                 }) })] }));
 };
 
+const MoreOptions = (props) => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = () => {
+        setAnchorEl(document.getElementById("extra-options"));
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, { id: "extra-options", onClick: handleClick, children: jsxRuntime.jsx(MoreVertIcon, {}) }, "extra-options"), jsxRuntime.jsx(StyledMenu, { anchorEl: anchorEl, open: open, onClose: handleClose, children: props.options.map((option) => (jsxRuntime.jsxs(material.MenuItem, { onClick: option.onClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: option.icon }), option.title] }))) })] }));
+};
+
 const StatusBadge = (props) => {
     const color = React.useMemo(() => {
         switch (props?.severity) {
@@ -27347,8 +27350,8 @@ const EditGridWrapper = (props) => {
         setEdit((prevState) => !prevState);
     };
     const processRowUpdate = async (newRow, originalRow) => {
-        const original_data = jsonForm({ submitData: originalRow });
-        const data = jsonForm({
+        const original_data = formParser({ submitData: originalRow });
+        const data = formParser({
             submitData: newRow,
             ...(props.parser ? { props: props.parser } : []),
         });
@@ -28000,45 +28003,31 @@ const LinkField = ({ url, value, text }) => {
 const DetailField = (props) => {
     const hasLinkToViewPermission = useHasPermission(`${props.navigation?.permission}.view`);
     const value = React.useCallback(() => {
-        if (typeof props.fieldData == "boolean") {
-            if (props.fieldData)
-                return "Si";
-            return "No";
-        }
-        else if (typeof props.fieldData == "number") {
-            return props.fieldData.toString();
-        }
-        else if (props.type.displayName == "ControlledSelect") {
-            if (props.fieldData)
-                return lodash.map(props.fieldData, function (item) {
-                    return item.label;
-                }).join(", ");
-        }
-        else if (props.type.displayName == "ControlledDate") {
-            if (props.fieldData) {
-                switch (props.extraProps.type) {
-                    case "date":
-                        return dayjs(props.fieldData).format("YYYY-MM-DD");
-                    case "datetime":
-                        return dayjs(props.fieldData).format("YYYY-MM-DD HH:mm");
-                }
-            }
-        }
-        else if (props.type.displayName == "ControlledPhotoField") {
-            if (props.fieldData)
-                return "Imagen";
-        }
-        else {
-            if (props.fieldData) {
-                if (props.detail_name) {
-                    return lodash.get(props.fieldData, props.detail_name);
-                }
-                return props.fieldData;
-            }
+        const { fieldData, type, extraProps, detail_name } = props;
+        if (typeof fieldData === "boolean")
+            return fieldData ? "Si" : "No";
+        if (typeof fieldData === "number")
+            return fieldData.toString();
+        switch (type?.displayName) {
+            case "ControlledSelect":
+                return fieldData
+                    ? fieldData.map((item) => item.label).join(", ")
+                    : "N/A";
+            case "ControlledDate":
+                if (!fieldData)
+                    return "N/A";
+                return extraProps?.type === "datetime"
+                    ? dayjs(fieldData).format("YYYY-MM-DD HH:mm")
+                    : dayjs(fieldData).format("YYYY-MM-DD");
+            case "ControlledFileField":
+                return fieldData ? "Archivo" : "N/A";
+            default:
+                if (!fieldData)
+                    return "N/A";
+                return detail_name ? lodash.get(fieldData, detail_name) : fieldData;
         }
-        return "N/A";
-    }, [props.detail_name, props.fieldData, props.type.displayName]);
-    const content = `${props.detailFieldProps?.preValue ? props.detailFieldProps.preValue : ""} ${value()} ${props.detailFieldProps?.postValue ? props.detailFieldProps.postValue : ""}`;
+    }, [props.detail_name, props.extraProps, props.fieldData, props.type?.displayName]);
+    const content = `${props.detailFieldProps?.preValue || ""} ${value()} ${props.detailFieldProps?.postValue || ""}`.trim();
     if (props.navigation &&
         hasLinkToViewPermission &&
         props.fieldData &&
@@ -28048,8 +28037,8 @@ const DetailField = (props) => {
         }
         return (jsxRuntime.jsx(LinkField, { url: props.navigation.url, value: lodash.get(props.fieldData, "value"), text: content }));
     }
-    else if (props.type.displayName == "ControlledPhotoField") {
-        return (jsxRuntime.jsx(material.Link, { href: props.fieldData, download: "filename.pdf", children: content }));
+    else if (props.type.displayName == "ControlledFileField" && content !== "N/A") {
+        return (jsxRuntime.jsx(material.Link, { href: props.fieldData, target: "_blank", rel: "noopener noreferrer", children: content }));
     }
     else {
         if (Array.isArray(props.fieldData)) {
@@ -28115,43 +28104,49 @@ const Field = (props) => {
 };
 
 const EditToolbar = (props) => {
-    return (jsxRuntime.jsx(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" }) }) })) }));
+    return (jsxRuntime.jsx(xDataGrid.Toolbar, { children: props.pageType != "detail" && (jsxRuntime.jsx(Tooltip, { title: "Crear", children: jsxRuntime.jsx(xDataGrid.ToolbarButton, { onClick: props.handleClick, children: jsxRuntime.jsx(AddIcon, { fontSize: "small" }) }) })) }));
 };
 const FieldArrayField = (props) => {
     const detail = React.useMemo(() => props.pageType === "detail", [props.pageType]);
-    const { fields, append, update, remove } = reactHookForm.useFieldArray({
+    const { fields, append, remove, update } = reactHookForm.useFieldArray({
         control: props.form.control,
         name: props.name,
         keyName: "_id",
     });
-    const [rowModesModel, setRowModesModel] = React.useState({});
+    //   console.log(props.form?.watch(props.name));
+    //   console.log(fields);
     const getIndex = React.useCallback((id) => lodash.findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
+    const [drawer, setDrawer] = React.useState({
+        index: 0,
+        open: false,
+    });
     const handleCreate = () => {
         append(props.defaultValues);
+        setDrawer({ index: fields.length, open: true });
+    };
+    const handleRowClick = (params) => {
+        const index = getIndex(params.id);
+        setDrawer({ index, open: true });
+    };
+    const handleCloseDrawer = () => {
+        setDrawer((prev) => ({ ...prev, open: false }));
+    };
+    const handleCancel = () => {
+        update(drawer.index, fields[drawer.index]);
+        handleCloseDrawer();
+    };
+    const handleSave = () => {
+        update(drawer.index, props.form.watch(`${props.name}.${drawer.index}`));
+        handleCloseDrawer();
     };
     const handleDelete = (id) => {
         remove(getIndex(id));
     };
-    const processRowUpdate = async (newRow, originalRow) => {
-        const original_data = jsonForm({ submitData: originalRow, props: props.parser });
-        const data = jsonForm({ submitData: newRow, props: props.parser });
-        if (lodash.isEqual(data, original_data))
-            return originalRow;
-        const index = getIndex(data._id);
-        update(index, data);
-        return newRow;
-    };
-    const handleProcessRowUpdateError = () => { };
     const dataGridProps = mergeSettings({
         columns: !detail
             ? [
-                ...editColumn({
-                    displayEdit: true,
-                    rowModesModel,
-                    setRowModesModel,
-                }),
                 {
                     field: "delete",
                     type: "actions",
@@ -28167,8 +28162,7 @@ const FieldArrayField = (props) => {
         slots: { toolbar: EditToolbar },
         slotProps: {
             toolbar: {
-                handleCreate: handleCreate,
-                handleDelete: handleDelete,
+                handleClick: handleCreate,
                 pageType: props.pageType,
             },
             baseCheckbox: {
@@ -28178,23 +28172,21 @@ const FieldArrayField = (props) => {
         getRowId: (row) => row._id,
         getRowClassName: (params) => params.indexRelativeToCurrentPage % 2 === 0 ? "even" : "odd",
         density: "compact",
-        onRowClick: undefined,
-        editMode: "row",
-        rowModesModel: rowModesModel,
-        onRowModesModelChange: setRowModesModel,
-        processRowUpdate: processRowUpdate,
-        onProcessRowUpdateError: handleProcessRowUpdateError,
-        onRowEditStart: ({ reason }, event) => {
-            if (reason === xDataGrid.GridRowEditStartReasons.cellDoubleClick && detail)
-                event.defaultMuiPrevented = true;
-        },
-        onRowEditStop: (params, event) => {
-            if (params.reason === xDataGrid.GridRowEditStopReasons.rowFocusOut) {
-                event.defaultMuiPrevented = true;
-            }
-        },
+        onRowClick: props.pageType == "edit" ? handleRowClick : undefined,
     }, props.dataGridProps);
-    return (jsxRuntime.jsx(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, { ...dataGridProps }) })] }) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MainDrawer, { open: drawer.open, drawerToggle: handleCancel, title: "Trailer", slots: {
+                    button: (jsxRuntime.jsx(SaveCancelButton, { slotProps: {
+                            saveBtn: { onClick: handleSave, type: "button" },
+                            cancelBtn: { onClick: handleCancel },
+                        } })),
+                }, ...props.slotProps?.drawer, children: jsxRuntime.jsx(material.Grid, { container: true, size: 12, children: props.fields.map((field, index) => {
+                        return (jsxRuntime.jsxs(material.Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...field.gridProps, children: [jsxRuntime.jsx(material.Grid, { size: 12, children: jsxRuntime.jsx(material.Typography, { variant: "body1", fontWeight: "bold", children: field.label }) }), jsxRuntime.jsx(material.Grid, { size: 12, children: field.type({
+                                        name: `${props.name}.${drawer.index}.${field.name}`,
+                                        control: props.form.control,
+                                        fieldProps: field.fieldProps,
+                                        extraProps: field.extraProps,
+                                    }) })] }, `grid-${index}`));
+                    }) }) }), 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, { ...dataGridProps }) })] })] }));
 };
 
 const Section = (props) => {
@@ -28410,6 +28402,9 @@ function DetailPage(props) {
         resolver: zod$1.zodResolver(props.edit.schema),
         defaultValues: props.edit?.defaultValues,
     });
+    React.useImperativeHandle(props.ref, () => ({
+        form: form,
+    }));
     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) {
@@ -28424,7 +28419,7 @@ function DetailPage(props) {
             }
         }
     }, [data, dispatch, form, props.slots?.title]);
-    const [mutation, { isLoading: mutationIsLoading, isSuccess, data: mutationResponse }] = props.api.mutate.mutation();
+    const [mutation, { isLoading: mutationIsLoading, isSuccess, data: mutationResponse },] = props.api.mutate.mutation();
     const handleCancel = () => {
         form.reset();
         navigate(-1);
@@ -28434,7 +28429,8 @@ function DetailPage(props) {
     // ==============================|| 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, {});
@@ -28442,12 +28438,15 @@ function DetailPage(props) {
     const onSubmitHandler = (submitedData) => {
         const formData = "nativeEvent" in submitedData ? form.getValues() : submitedData;
         const params = {
+            type: props.edit.useFormData ? "formData" : "json",
             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 })
+        const dataToSend = formParser(params);
+        mutation(props.edit.useFormData
+            ? dataToSend
+            : { ...dataToSend, ...props.api.mutate.args })
             .unwrap()
             .then(() => {
             if (!props.slotProps?.button?.save?.disableNavBack)
@@ -28479,7 +28478,9 @@ function DetailPage(props) {
                     if (!section.display)
                         return null;
                     if (typeof section.display == "object") {
-                        const validateAgainst = form.watch(section.display.field)?.toString();
+                        const validateAgainst = form
+                            .watch(section.display.field)
+                            ?.toString();
                         if (!section.display.method(validateAgainst, section.display.value))
                             return null;
                     }
@@ -28491,7 +28492,8 @@ function DetailPage(props) {
         if (props.api.mutate.postAction &&
             isSuccess &&
             "post_action" in mutationResponse &&
-            mutationResponse["post_action"]["type"] === props.api.mutate.postAction.type) {
+            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);
@@ -28839,10 +28841,10 @@ exports.CSVUpload = CSVUpload;
 exports.ContentLayout = ContentLayout;
 exports.ControlledDate = ControlledDate;
 exports.ControlledDropdown = ControlledDropdown;
+exports.ControlledFileField = ControlledFileField;
 exports.ControlledFileUploadBox = FileUploadBox;
 exports.ControlledNumber = ControlledNumber;
 exports.ControlledPhoneNumber = ControlledPhoneNumber;
-exports.ControlledPhotoField = ControlledPhotoField;
 exports.ControlledSelect = ControlledSelect;
 exports.ControlledSimpleSlider = ControlledSlider;
 exports.ControlledSlider = ControlledSlider$1;
@@ -28866,6 +28868,7 @@ exports.Logo = Logo;
 exports.MainDrawer = MainDrawer;
 exports.MenuItemWithLoading = MenuItemWithLoading;
 exports.ModuleCard = ModuleCard;
+exports.MoreOptions = MoreOptions;
 exports.MyGridEditSingleSelect = MyGridEditSingleSelect;
 exports.NavigationContext = NavigationContext;
 exports.NavigationProvider = NavigationProvider;
@@ -28885,9 +28888,8 @@ exports.dayjs = dayjs;
 exports.deleteColumn = deleteColumn;
 exports.editColumn = editColumn;
 exports.filterQuery = filterQuery;
-exports.formDataForm = formDataForm;
+exports.formParser = formParser;
 exports.headerReducer = header;
-exports.jsonForm = jsonForm;
 exports.manualCacheRefresh = manualCacheRefresh;
 exports.mergeSettings = mergeSettings;
 exports.openProgressSnack = openProgressSnack;