@acvl/frontend-components 0.0.35 → 0.0.37

package/dist/cjs/types/src/components/v1/datagrids/wrappers/CreateGridWrapper.d.ts

@@ -6,7 +6,13 @@ export interface CSVMenuOptionProps {
     custom?: string;
     icon?: any;
 }
+export interface ExtraCreateOptionProps {
+    title: string;
+    icon: any;
+    onClick: () => void;
+}
 export interface CreateGridAPIProps {
+    extraOptions?: ExtraCreateOptionProps[];
     csv_upload?: {
         enable: boolean;
         extraOptions?: CSVMenuOptionProps[];

package/dist/cjs/types/src/components/v1/inputs/controlled/ControlledFileField/index.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { ButtonProps } from "@mui/material";
 export interface ControlledFileFieldProps extends BaseControlledFieldProps {
     extraProps?: {
+        multiple?: boolean;
         slotProps?: {
             input?: {
                 accept?: string;

package/dist/cjs/types/src/components/v1/inputs/controlled/CrudDropdown/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { AutocompleteProps } from "@mui/material";
+import { ComoOpcionesProps } from "../../../types";
+export interface CrudDropdownProps {
+    name: string;
+    label?: string;
+    control: any;
+    fieldProps?: Partial<AutocompleteProps<any, any, any, any>>;
+    extraProps: {
+        queryArgs: ComoOpcionesProps;
+        crudExtraArgs?: Record<string, any>;
+        /** API field name for the display label. Default: "nombre" */
+        labelField?: string;
+        disableHT?: boolean;
+    };
+}
+declare const CrudDropdown: React.FC<CrudDropdownProps>;
+export default CrudDropdown;

package/dist/cjs/types/src/components/v1/inputs/controlled/index.d.ts

@@ -11,3 +11,4 @@ export { default as ControlledToggleButtons } from "./ControlledToggleButtons";
 export { default as ControlledTimePicker } from "./ControlledTimePicker";
 export { default as ControlledFileField } from "./ControlledFileField";
 export { default as ControlledSimpleSlider } from "./ControlledSimpleSlider";
+export { default as CrudDropdown } from "./CrudDropdown";

package/dist/cjs/types/src/components/v1/layout/pages/DetailPage/Field/index.d.ts

@@ -21,6 +21,7 @@ export interface FieldProps {
         fieldName: string;
         value: any;
         method: any;
+        showOnDetail?: boolean;
     };
     filters?: FieldFilter[];
     navigation?: {

package/dist/cjs/types/src/components/v1/layout/pages/DetailPage/Section/index.d.ts

@@ -4,7 +4,7 @@ import { ReactNode } from "react";
 import { FieldValidationProps, EditReadOnlyFields } from "../types";
 import { PageType } from "../../../../types";
 export interface SectionProps {
-    display?: boolean | FieldValidationProps;
+    display?: boolean | FieldValidationProps | FieldValidationProps[];
     data?: any;
     form?: any;
     bgColor?: string;

package/dist/cjs/types/src/components/v1/lib/context/APIContext.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 export interface APIcontextProps {
     useLazyGetComoOpcionesQuery: any;
     useLazyGetHistorialQuery: any;
@@ -6,9 +6,10 @@ export interface APIcontextProps {
     useValidarCSVMutation: any;
     useSubirCSVMutation: any;
     useRemoverCSVMutation: any;
+    useGenericCrudMutation: any;
 }
 declare const APIContext: import("react").Context<APIcontextProps | null>;
-export declare const APIProvider: ({ children, hooks }: {
+export declare const APIProvider: ({ children, hooks, }: {
     children: ReactNode;
     hooks: APIcontextProps;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogContentText, DialogActions as DialogActions$1, ButtonGroup, Menu, ListItemIcon, MenuItem as MenuItem$1, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, alpha as alpha$1, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
+import { useTheme, useMediaQuery, Tooltip, IconButton, Button, Grid, FormGroup, FormHelperText as FormHelperText$1, Drawer, Box, Stack, CircularProgress, Typography as Typography$1, List as List$1, ListItem as ListItem$1, ListSubheader, styled as styled$1, LinearProgress, Autocomplete, Checkbox, Slider, Switch, InputAdornment as InputAdornment$1, ToggleButtonGroup, ToggleButton, TextField as TextField$1, Dialog, DialogTitle, DialogContent as DialogContent$1, DialogActions as DialogActions$1, DialogContentText, ButtonGroup, Menu, ListItemIcon, MenuItem as MenuItem$1, Link, Card, CardHeader, Avatar, CardContent, Divider as Divider$1, Popper, Grow as Grow$1, Paper, ClickAwayListener, Badge, TablePagination, NoSsr, tooltipClasses, Popover, ListItemButton, ListItemText as ListItemText$1, Collapse, Fade as Fade$1, Slide, Zoom, Snackbar, alpha as alpha$1, lighten, createTheme as createTheme$1, responsiveFontSizes } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import * as React from 'react';
 import React__default, { useCallback, useEffect, isValidElement, cloneElement, Children, createContext, useContext, useState, useMemo, useRef, useImperativeHandle, useLayoutEffect, Suspense, forwardRef } from 'react';
@@ -41,7 +41,7 @@ import BaseFocusTrap from '@mui/material/Unstable_TrapFocus';
 import DialogContent from '@mui/material/DialogContent';
 import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import debounce from 'lodash/debounce';
-import { get, map, find, groupBy, forEach, findIndex, mergeWith, isArray, omit, set as set$1, every, includes, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, debounce as debounce$1, some } from 'lodash';
+import { get, map, find, groupBy, forEach, findIndex, mergeWith, isArray, omit, set as set$1, debounce as debounce$1, every, includes, merge as merge$2, countBy, isNumber, isEmpty as isEmpty$1, isBoolean, isEqual as isEqual$1, some } from 'lodash';
 import { produce } from 'immer';
 import set from 'lodash/set';
 import get$1 from 'lodash/get';
@@ -68,8 +68,8 @@ import { Visibility, VisibilityOff } from '@mui/icons-material';
 import merge$1 from 'lodash/merge';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import ClearIcon$1 from '@mui/icons-material/Clear';
-import SaveIcon from '@mui/icons-material/Save';
 import AddIcon from '@mui/icons-material/Add';
+import SaveIcon from '@mui/icons-material/Save';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import LinearProgress$1 from '@mui/material/LinearProgress';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
@@ -97,6 +97,7 @@ import DrawIcon from '@mui/icons-material/Draw';
 import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { skipToken } from '@reduxjs/toolkit/query';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
 import TabContext from '@mui/lab/TabContext';
@@ -25494,8 +25495,8 @@ const useHasPermission = (path) => {
 };
 
 const APIContext = createContext(null);
-const APIProvider = ({ children, hooks }) => {
-    return (jsx(APIContext.Provider, { value: hooks, children: children }));
+const APIProvider = ({ children, hooks, }) => {
+    return jsx(APIContext.Provider, { value: hooks, children: children });
 };
 
 const useAPI = () => {
@@ -26518,7 +26519,19 @@ const VisuallyHiddenInput = styled$1("input")({
 });
 const ControlledFileField = (props) => {
     return (jsx(Controller, { control: props.control, name: props.name, render: ({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => {
-            return (jsxs(FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxs(Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", children: [jsx(Typography$1, { children: value.name }), jsx(IconButton, { onClick: () => onChange(null), children: jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxs(Button, { component: "label", variant: "contained", startIcon: jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsx(FormHelperText$1, { error: !!error, children: error ? error.message : " " })] }));
+            if (props.extraProps?.multiple) {
+                const files = value ?? [];
+                const handleAdd = (e) => {
+                    const incoming = e.target.files ? Array.from(e.target.files) : [];
+                    onChange([...files, ...incoming]);
+                    e.target.value = "";
+                };
+                const handleRemove = (index) => {
+                    onChange(files.filter((_, i) => i !== index));
+                };
+                return (jsxs(FormGroup, { sx: { width: 1 }, children: [jsxs(Stack, { spacing: 1, width: 1, children: [files.map((file, index) => (jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { minWidth: 0 }, children: [jsx(Typography$1, { noWrap: true, sx: { flex: 1 }, children: file.name }), jsx(IconButton, { onClick: () => handleRemove(index), children: jsx(ClearIcon$1, { color: "error" }) })] }, index))), jsxs(Button, { component: "label", variant: "contained", startIcon: jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsx(VisuallyHiddenInput, { type: "file", multiple: true, accept: "image/*", ref: ref, onBlur: onBlur, onChange: handleAdd, ...props.extraProps?.slotProps?.input })] })] }), jsx(FormHelperText$1, { error: !!error, children: error ? error.message : " " })] }));
+            }
+            return (jsxs(FormGroup, { sx: { width: 1 }, color: "secondary", children: [value ? (jsxs(Stack, { direction: "row", spacing: 1, width: 1, alignItems: "center", sx: { minWidth: 0 }, children: [jsx(Typography$1, { noWrap: true, sx: { flex: 1 }, children: value.name }), jsx(IconButton, { onClick: () => onChange(null), children: jsx(ClearIcon$1, { color: "error" }) })] })) : (jsxs(Button, { component: "label", variant: "contained", startIcon: jsx(UploadFileIcon, {}), sx: { maxWidth: 200 }, ...props.extraProps?.slotProps?.button, children: ["Cargar", jsx(VisuallyHiddenInput, { type: "file", accept: "image/*", ref: ref, onBlur: onBlur, onChange: (e) => onChange(e.target.files && e.target.files[0]), ...props.extraProps?.slotProps?.input })] })), jsx(FormHelperText$1, { error: !!error, children: error ? error.message : " " })] }));
         } }));
 };
 ControlledFileField.displayName = "ControlledFileField";
@@ -26532,6 +26545,161 @@ const ControlledSlider = (props) => {
         } }));
 };
 
+const CREATE_OPTION = { value: "__create__", label: "" };
+const CrudDropdown = (props) => {
+    const { name, label, control, fieldProps, extraProps: { queryArgs, crudExtraArgs = {}, labelField = "nombre", disableHT }, } = props;
+    const [inputValue, setInputValue] = useState("");
+    const [options, setOptions] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [createOpen, setCreateOpen] = useState(false);
+    const [editOpen, setEditOpen] = useState(false);
+    const [deleteOpen, setDeleteOpen] = useState(false);
+    const [activeOption, setActiveOption] = useState(null);
+    const [dialogInput, setDialogInput] = useState("");
+    const formValueRef = useRef(null);
+    const formOnChangeRef = useRef(() => { });
+    const api = useAPI();
+    const [getOpciones, { isLoading, isFetching, isError }] = api.useLazyGetComoOpcionesQuery();
+    const [genericCrud, { isLoading: isMutating }] = api.useGenericCrudMutation();
+    const notifications = useNotifications();
+    const args = useMemo(() => ({
+        ...queryArgs,
+        filters: { ...queryArgs.filters, nombre__icontains: inputValue },
+    }), [inputValue, queryArgs]);
+    const fetchOptions = useCallback(debounce$1((fetchArgs, cb) => {
+        setOptions([]);
+        getOpciones(fetchArgs)
+            .unwrap()
+            .then(cb)
+            .catch(() => { });
+    }, 500), []);
+    const refreshOptions = () => {
+        getOpciones(args, false)
+            .unwrap()
+            .then((fresh) => setOptions(fresh))
+            .catch(() => { });
+    };
+    React__default.useEffect(() => {
+        if (open)
+            fetchOptions(args, setOptions);
+    }, [args, fetchOptions, open]);
+    const handleCreate = () => {
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "POST",
+            body: { [labelField]: dialogInput, ...crudExtraArgs },
+        })
+            .unwrap()
+            .then(() => {
+            notifications.show("Opción creada.", { severity: "success" });
+            setCreateOpen(false);
+            setDialogInput("");
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al crear.", { severity: "error" }));
+    };
+    const handleEdit = () => {
+        if (!activeOption)
+            return;
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "PATCH",
+            id: activeOption.value,
+            body: { [labelField]: dialogInput, ...crudExtraArgs },
+        })
+            .unwrap()
+            .then(() => {
+            if (formValueRef.current?.value === activeOption.value) {
+                formOnChangeRef.current({ value: activeOption.value, label: dialogInput });
+            }
+            notifications.show("Opción actualizada.", { severity: "success" });
+            setEditOpen(false);
+            setDialogInput("");
+            setActiveOption(null);
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al actualizar.", { severity: "error" }));
+    };
+    const handleDelete = () => {
+        if (!activeOption)
+            return;
+        genericCrud({
+            endpoint: props.extraProps.queryArgs.endpoint,
+            method: "DELETE",
+            id: activeOption.value,
+        })
+            .unwrap()
+            .then(() => {
+            if (formValueRef.current?.value === activeOption.value) {
+                formOnChangeRef.current(null);
+            }
+            notifications.show("Opción eliminada.", { severity: "success" });
+            setDeleteOpen(false);
+            setActiveOption(null);
+            refreshOptions();
+        })
+            .catch(() => notifications.show("Error al eliminar.", { severity: "error" }));
+    };
+    return (jsxs(Fragment, { children: [jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange }, fieldState: { error } }) => {
+                    formValueRef.current = value;
+                    formOnChangeRef.current = onChange;
+                    const handleChange = (_event, newValue) => {
+                        if (newValue?.value === "__create__") {
+                            setDialogInput("");
+                            setCreateOpen(true);
+                            return;
+                        }
+                        onChange(newValue);
+                    };
+                    return (jsx(Autocomplete, { id: name, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), options: options, loading: isLoading || isFetching, value: value, onChange: handleChange, inputValue: inputValue, onInputChange: (_event, newInputValue) => setInputValue(newInputValue), isOptionEqualToValue: (option, val) => option.value === val.value, filterOptions: (x) => [CREATE_OPTION, ...x], getOptionLabel: (option) => option.value === "__create__" ? "" : option.label || "", fullWidth: true, size: "small", disabled: isError, renderOption: (optionProps, option) => {
+                            const { key, ...rest } = optionProps;
+                            if (option.value === "__create__") {
+                                return (jsxs(Box, { component: "li", ...rest, onClick: () => {
+                                        setDialogInput("");
+                                        setCreateOpen(true);
+                                    }, sx: {
+                                        justifyContent: "center !important",
+                                        color: "primary.main",
+                                        borderBottom: "1px solid",
+                                        borderColor: "divider",
+                                        py: "6px !important",
+                                        gap: 0.5,
+                                    }, children: [jsx(AddIcon, { fontSize: "small" }), jsx(Typography$1, { variant: "body2", children: "Agregar nuevo" })] }, key));
+                            }
+                            return (jsxs(Box, { component: "li", ...rest, sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    pr: "4px !important",
+                                }, children: [jsx(Box, { sx: {
+                                            flex: 1,
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                        }, children: option.label }), jsx(IconButton, { size: "small", tabIndex: -1, onMouseDown: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveOption(option);
+                                            setDialogInput(option.label);
+                                            setEditOpen(true);
+                                        }, children: jsx(EditIcon, { fontSize: "inherit" }) }), jsx(IconButton, { size: "small", tabIndex: -1, onMouseDown: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveOption(option);
+                                            setDeleteOpen(true);
+                                        }, children: jsx(DeleteIcon, { fontSize: "inherit" }) })] }, key));
+                        }, renderInput: (params) => (jsx(TextField$1, { ...params, label: label, error: !!error, helperText: error ? error.message : disableHT ? "" : " ", slotProps: {
+                                input: {
+                                    ...params.InputProps,
+                                    endAdornment: (jsxs(Fragment, { children: [isLoading || isFetching ? (jsx(CircularProgress, { color: "inherit", size: 20 })) : null, params.InputProps.endAdornment] })),
+                                },
+                            } })), ...fieldProps }));
+                } }), jsxs(Dialog, { open: createOpen, onClose: () => setCreateOpen(false), maxWidth: "xs", fullWidth: true, children: [jsx(DialogTitle, { children: "Agregar opci\u00F3n" }), jsx(DialogContent$1, { children: jsx(TextField$1, { autoFocus: true, fullWidth: true, size: "small", label: label, value: dialogInput, onChange: (e) => setDialogInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && !!dialogInput && handleCreate(), sx: { mt: 1 } }) }), jsxs(DialogActions$1, { children: [jsx(Button, { color: "error", onClick: () => setCreateOpen(false), children: "Cancelar" }), jsx(Button, { color: "secondary", disabled: !dialogInput, loading: isMutating, onClick: handleCreate, children: "Guardar" })] })] }), jsxs(Dialog, { open: editOpen, onClose: () => setEditOpen(false), maxWidth: "xs", fullWidth: true, children: [jsx(DialogTitle, { children: "Editar opci\u00F3n" }), jsx(DialogContent$1, { children: jsx(TextField$1, { autoFocus: true, fullWidth: true, size: "small", label: label, value: dialogInput, onChange: (e) => setDialogInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && !!dialogInput && handleEdit(), sx: { mt: 1 } }) }), jsxs(DialogActions$1, { children: [jsx(Button, { color: "error", onClick: () => setEditOpen(false), children: "Cancelar" }), jsx(Button, { color: "secondary", disabled: !dialogInput, loading: isMutating, onClick: handleEdit, children: "Guardar" })] })] }), jsxs(Dialog, { open: deleteOpen, onClose: () => setDeleteOpen(false), maxWidth: "xs", fullWidth: true, children: [jsx(DialogTitle, { children: "Eliminar opci\u00F3n" }), jsx(DialogContent$1, { children: jsxs(Typography$1, { children: ["\u00BFEliminar ", jsx("strong", { children: activeOption?.label }), "?"] }) }), jsxs(DialogActions$1, { children: [jsx(Button, { onClick: () => setDeleteOpen(false), children: "Cancelar" }), jsx(Button, { color: "error", loading: isMutating, onClick: handleDelete, children: "Eliminar" })] })] })] }));
+};
+CrudDropdown.displayName = "CrudDropdown";
+
 const DeleteConfirmationDialog = (props) => {
     const notifications = useNotifications();
     const { pathname } = useLocation();
@@ -27655,7 +27823,12 @@ const CreateGridWrapper = (props) => {
                         }), jsxs(MenuItem, { onClick: () => {
                             navigate(props.navigation ? `${props.navigation}crear` : `crear`);
                             handleClose();
-                        }, disableRipple: true, children: [jsx(ListItemIcon, { children: jsx(DrawIcon, {}) }), "Manual"] })] }), props.csv_upload?.enable && (jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
+                        }, disableRipple: true, children: [jsx(ListItemIcon, { children: jsx(DrawIcon, {}) }), "Manual"] }), props.extraOptions?.map((option, index) => {
+                        return (jsxs(MenuItem, { onClick: () => {
+                                option.onClick();
+                                handleClose();
+                            }, disableRipple: true, children: [jsx(ListItemIcon, { children: option.icon }), option.title] }, index));
+                    })] }), props.csv_upload?.enable && (jsx(CSVUpload, { open: csv.open, drawerToggle: handleToggleClose, data: csv.data })), props.renderFunction({ dataGridProps: createGridProps })] }));
 };
 
 const Base = (props) => {
@@ -27999,6 +28172,7 @@ const LinkField = ({ url, value, text }) => {
     return jsx(Link, { href: `${url}/${value}`, children: text });
 };
 const DetailField = (props) => {
+    const [anchor, setAnchor] = useState(null);
     const hasLinkToViewPermission = useHasPermission(`${props.navigation?.permission}.view`);
     const value = useCallback(() => {
         const { fieldData, type, extraProps, detail_name } = props;
@@ -28018,7 +28192,7 @@ const DetailField = (props) => {
                     ? dayjs(fieldData).format("YYYY-MM-DD HH:mm")
                     : dayjs(fieldData).format("YYYY-MM-DD");
             case "ControlledFileField":
-                return fieldData ? "Archivo" : "N/A";
+                return fieldData ? "Archivo(s)" : "N/A";
             default:
                 if (!fieldData)
                     return "N/A";
@@ -28036,7 +28210,13 @@ const DetailField = (props) => {
         return (jsx(LinkField, { url: props.navigation.url, value: get(props.fieldData, "value"), text: content }));
     }
     else if (props.type.displayName == "ControlledFileField" && content !== "N/A") {
-        return (jsx(Link, { href: props.fieldData, target: "_blank", rel: "noopener noreferrer", children: content }));
+        const archivos = Array.isArray(props.fieldData)
+            ? props.fieldData.filter(Boolean)
+            : [props.fieldData];
+        return (jsxs(Fragment, { children: [jsx(Badge, { badgeContent: archivos.length, color: "primary", sx: { "& .MuiBadge-badge": { fontSize: 10, minWidth: 16, height: 16 } }, children: jsx(Button, { size: "small", onClick: (e) => {
+                            e.stopPropagation();
+                            setAnchor(e.currentTarget);
+                        }, children: content }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: "bottom", horizontal: "center" }, transformOrigin: { vertical: "top", horizontal: "center" }, onClick: (e) => e.stopPropagation(), children: jsx(List$1, { dense: true, disablePadding: true, sx: { minWidth: 140 }, children: archivos.map((archivo, i) => (jsxs(ListItemButton, { component: "a", href: archivo.imagen, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: [jsx(ListItemText$1, { primary: `Archivo ${i + 1}` }), jsx(OpenInNewIcon, { fontSize: "small", sx: { ml: 1, opacity: 0.6 } })] }, i))) }) })] }));
     }
     else {
         if (Array.isArray(props.fieldData)) {
@@ -28084,6 +28264,8 @@ const Field = (props) => {
     const formData = props.form.watch();
     const show = useMemo(() => {
         if (props.dependantOn) {
+            if (props.dependantOn.showOnDetail && props.pageType === "detail")
+                return true;
             return props.dependantOn.method(get(props.data || formData, props.dependantOn.fieldName), props.dependantOn.value);
         }
         return true;
@@ -28112,6 +28294,7 @@ const FieldArrayField = (props) => {
         keyName: "_id",
     });
     const errors = props.form.formState.errors;
+    const errorMessage = get(props.form.formState.errors, props.name + ".message");
     const getIndex = useCallback((id) => findIndex(fields, function (field) {
         return field._id == id;
     }), [fields]);
@@ -28192,31 +28375,27 @@ const FieldArrayField = (props) => {
                                         fieldProps: field.fieldProps,
                                         extraProps: field.extraProps,
                                     }) })] }, `grid-${index}`));
-                    }) }) }), jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...dataGridProps }) })] })] }));
+                    }) }) }), jsxs(Grid, { rowSpacing: 1, container: true, size: "grow", direction: "column", ...props.gridProps, children: [jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", fontWeight: "bold", children: props.label }) }), errorMessage && (jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "body1", color: "error", children: errorMessage }) })), jsx(Grid, { size: 12, children: jsx(DataGrid, { ...dataGridProps }) })] })] }));
 };
 
 const Section = (props) => {
     const [expanded, setExpanded] = useState(true);
     const handleExpandChange = () => {
-        setExpanded(prevState => !prevState);
+        setExpanded((prevState) => !prevState);
     };
     const renderField = (field, index) => {
         if (props.first && index == 0)
-            merge$2(get(field, 'fieldProps', {}), { autoFocus: true });
+            merge$2(get(field, "fieldProps", {}), { autoFocus: true });
         return (jsx(Field, { fieldData: props.data && get(props.data, field.name), ...field, readOnly: 
             // props.validation?.readOnlyFields.includes(field.name) ||
-            (props.edit?.readOnlyFields?.names.includes(field.name) && props.edit.readOnlyFields.validator.method(get(props.data, props.edit.readOnlyFields.validator.field), props.edit.readOnlyFields.validator.value)), form: props.form, pageType: props.pageType, data: props.data }, `F-${index}`));
+            props.edit?.readOnlyFields?.names.includes(field.name) &&
+                props.edit.readOnlyFields.validator.method(get(props.data, props.edit.readOnlyFields.validator.field), props.edit.readOnlyFields.validator.value), form: props.form, pageType: props.pageType, data: props.data }, `F-${index}`));
     };
     const renderArrayField = (field, index) => (jsx(FieldArrayField, { ...field, form: props.form, pageType: props.pageType }, `FA-${index}`));
-    return (jsxs(Grid, { size: 12, container: true, spacing: 2, bgcolor: props.bgColor, p: 2, borderRadius: 1, children: [(props.title || props.description) &&
-                jsxs(Grid, { size: 12, container: true, spacing: 0, children: [props.title &&
-                            jsxs(Grid, { size: 12, container: true, onClick: handleExpandChange, sx: {
-                                    cursor: 'pointer'
-                                }, children: [jsx(Grid, { children: expanded ? jsx(ExpandLessIcon, { fontSize: 'small' }) : jsx(ExpandMoreIcon, { fontSize: 'small' }) }), jsx(Grid, { children: jsx(Typography$1, { variant: 'h5', children: props.title }) })] }), props.description &&
-                            jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: 'caption', color: 'secondary.main', children: props.description }) })] }), expanded &&
-                jsxs(Grid, { size: 12, container: true, direction: 'row', children: [props.fields &&
-                            props.fields.map((field, index) => renderField(field, index)), props.arrayFields &&
-                            props.arrayFields.map((arrayField, index) => renderArrayField(arrayField, index)), props.content && props.content(props.data)] })] }));
+    return (jsxs(Grid, { size: 12, container: true, spacing: 2, bgcolor: props.bgColor, p: 2, borderRadius: 1, children: [(props.title || props.description) && (jsxs(Grid, { size: 12, container: true, spacing: 0, children: [props.title && (jsxs(Grid, { size: 12, container: true, onClick: handleExpandChange, sx: {
+                            cursor: "pointer",
+                        }, children: [jsx(Grid, { children: expanded ? (jsx(ExpandLessIcon, { fontSize: "small" })) : (jsx(ExpandMoreIcon, { fontSize: "small" })) }), jsx(Grid, { children: jsx(Typography$1, { variant: "h5", children: props.title }) })] })), props.description && (jsx(Grid, { size: 12, children: jsx(Typography$1, { variant: "caption", color: "secondary.main", children: props.description }) }))] })), expanded && (jsxs(Grid, { size: 12, container: true, direction: "row", children: [props.fields && props.fields.map((field, index) => renderField(field, index)), props.arrayFields &&
+                        props.arrayFields.map((arrayField, index) => renderArrayField(arrayField, index)), props.content && props.content(props.data)] }))] }));
 };
 
 // ==============================|| VALIDATION ||============================== //
@@ -28425,7 +28604,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);
@@ -28435,8 +28614,7 @@ 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 jsx(NotAllowed, {});
     if (fetchError && fetchError.originalStatus == 404)
         return jsx(NotFound, {});
@@ -28450,9 +28628,7 @@ function DetailPage(props) {
             props: props.slotProps?.parser,
         };
         const dataToSend = formParser(params);
-        mutation(props.edit.useFormData
-            ? dataToSend
-            : { ...dataToSend, ...props.api.mutate.args })
+        mutation(props.edit.useFormData ? dataToSend : { ...dataToSend, ...props.api.mutate.args })
             .unwrap()
             .then(() => {
             if (!props.slotProps?.button?.save?.disableNavBack)
@@ -28478,17 +28654,26 @@ function DetailPage(props) {
     };
     const onError = (errors) => console.log("Validation Errors:", errors);
     // ==============================|| RENDER SECTIONS ||============================== //
+    const validateDisplay = (field, method, value) => {
+        const validateAgainst = form.watch(field)?.toString();
+        return method(validateAgainst, value);
+    };
     const renderContent = () => {
         let displayed_sections = -1;
         return (jsxs(Grid, { size: 12, container: true, direction: "column", position: "relative", pb: 2, children: [props.pageType == "detail" && data?.has_history && (jsx(HistorialDrawer, { ...props.slotProps?.historial })), props.sections.map((section, index) => {
                     if (!section.display)
                         return null;
                     if (typeof section.display == "object") {
-                        const validateAgainst = form
-                            .watch(section.display.field)
-                            ?.toString();
-                        if (!section.display.method(validateAgainst, section.display.value))
-                            return null;
+                        if (Array.isArray(section.display)) {
+                            if (!section.display
+                                .map((item) => validateDisplay(item.field, item.method, item.value))
+                                .every((item) => item == true))
+                                return null;
+                        }
+                        else {
+                            if (!validateDisplay(section.display.field, section.display.method, section.display.value))
+                                return null;
+                        }
                     }
                     displayed_sections += 1;
                     return (jsx(Section, { data: data, form: form, bgColor: displayed_sections % 2 == 1 ? "white" : "#F7F7F7", pageType: props.pageType, ...section, first: displayed_sections == 0 }, index));
@@ -28498,8 +28683,7 @@ 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);
@@ -28841,5 +29025,5 @@ const theme = () => {
     return themes;
 };
 
-export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, ControlledFileField, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, DeleteButton, DeleteConfirmationDialog, DetailPage, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, dayjs, deleteColumn, editColumn, filterQuery, formParser, header as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, snackProgress_default as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useNavigation, valueLabel };
+export { APIContext, APIProvider, ActiveCell, Base, ButtonWithDrawer, CSVUpload, ContentLayout, ControlledDate, ControlledDropdown, ControlledFileField, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, DeleteButton, DeleteConfirmationDialog, DetailPage, EditButton, ExportCSV, HistorialDrawer, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, SaveCancelButton, StatusBadge, StyledMenu, Tabs, Transitions, UncontrolledText, changeTitle, closeProgressSnack, dayjs, deleteColumn, editColumn, filterQuery, formParser, header as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, setErrors, snackProgress_default as snackProgressReducer, tags, theme, updateProgressSnackData, useAPI, useHasPermission, useNavigation, valueLabel };
 //# sourceMappingURL=index.js.map