@natoora-libs/core 0.2.6 → 0.2.61

package/dist/components/index.cjs

@@ -383,7 +383,6 @@ __export(components_exports, {
   SearchWithFilters: () => SearchWithFilters_default,
   SearchWithFiltersForTable: () => SearchWithFiltersForTable_default,
   SectionName: () => SectionName_default,
-  SmartMultipleSelect: () => SmartMultipleSelect,
   SmartSelect: () => SmartSelect_default,
   SmartTableHeader: () => SmartTableHeader,
   SmartTableHeaderFilterMenu: () => SmartTableHeaderFilterMenu,
@@ -1289,7 +1288,7 @@ var AutocompleteFilterMenuContent = ({
   onFilterOptionChange,
   onApplyFiltersClick,
   shouldShowCheckOnFilter,
-  onAutocompleteSearch,
+  onAutocompleteFilterChange,
   filterOptions
 }) => {
   const renderLoading = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Skeleton, { variant: "rounded", height: 26, sx: { m: 1 } });
@@ -1322,7 +1321,7 @@ var AutocompleteFilterMenuContent = ({
         minCharacters: 3,
         sx: { backgroundColor: colors.neutral200 },
         onSearch: (value) => {
-          onAutocompleteSearch?.(value);
+          onAutocompleteFilterChange?.(value);
         }
       }
     ),
@@ -5128,7 +5127,7 @@ var FilterSimpleSelector = ({
 var FilterSimpleSelector_default = FilterSimpleSelector;
 
 // src/components/FixedFooter/FixedFooter.tsx
-var React2 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_material39 = require("@mui/material");
 var import_mui29 = require("tss-react/mui");
 var import_jsx_runtime91 = require("react/jsx-runtime");
@@ -5166,7 +5165,7 @@ var FixedFooter = ({ justifyContent, children }) => {
     )
   ] });
 };
-var FixedFooter_default = React2.memo(FixedFooter);
+var FixedFooter_default = React4.memo(FixedFooter);
 
 // src/components/Header/Header.tsx
 var import_material40 = require("@mui/material");
@@ -6840,7 +6839,7 @@ var import_mui45 = require("tss-react/mui");
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
 var import_react31 = require("react");
-var React4 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 var import_icons_material9 = require("@mui/icons-material");
 var import_material56 = require("@mui/material");
 var import_mui44 = require("tss-react/mui");
@@ -6933,7 +6932,7 @@ var SearchWithFilters = ({
     )
   ] });
 };
-var SearchWithFilters_default = React4.memo(SearchWithFilters);
+var SearchWithFilters_default = React6.memo(SearchWithFilters);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
@@ -6996,7 +6995,7 @@ var SearchAndFilterHeader = ({
 var SearchAndFilterHeader_default = SearchAndFilterHeader;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-var React5 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_material59 = require("@mui/material");
 var import_mui47 = require("tss-react/mui");
 
@@ -7176,7 +7175,7 @@ var SearchAndFilterHeaderForTable = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material59.Box, { children: button })
   ] });
 };
-var SearchAndFilterHeaderForTable_default = React5.memo(SearchAndFilterHeaderForTable);
+var SearchAndFilterHeaderForTable_default = React7.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchHeader/SearchHeader.tsx
 var import_react33 = require("react");
@@ -7303,113 +7302,18 @@ var SectionName = ({
 };
 var SectionName_default = SectionName;
 
-// src/components/SmartMultipleSelect/SmartMultipleSelect.tsx
+// src/components/SmartSelect/SmartSelect.tsx
 var import_react34 = require("react");
 var import_material62 = require("@mui/material");
-var import_jsx_runtime115 = require("react/jsx-runtime");
-var SmartMultipleSelect = ({
-  inputLabel,
-  variant = "standard",
-  size,
-  values,
-  defaultValues,
-  onChange,
-  onOpen,
-  onClose,
-  menuOptions,
-  isLoading,
-  disabled,
-  emptyMessage = "No options.",
-  helperText
-}) => {
-  const [localValues, setLocalValues] = (0, import_react34.useState)(defaultValues ?? []);
-  const handleChangeOption = (option) => {
-    let newValues = [];
-    const selectedIndex = localValues.findIndex(
-      (val) => val.value === option.value
-    );
-    if (selectedIndex === -1) {
-      newValues = [...localValues, option];
-    } else {
-      newValues = localValues.filter((_, i) => i !== selectedIndex);
-    }
-    setLocalValues(newValues);
-    onChange?.(newValues);
-  };
-  const renderMenuContent = () => !menuOptions?.length ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-    import_material62.Box,
-    {
-      sx: { display: "flex", justifyContent: "center", alignItems: "center" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Typography, { children: emptyMessage })
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Box, { sx: { display: "flex", flexDirection: "column" }, children: menuOptions?.map((option, index) => {
-    const selectedValues = values ?? localValues ?? [];
-    const isSelected = selectedValues.some(
-      (selected) => selected.value === option.value
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-      import_material62.Box,
-      {
-        onClick: () => handleChangeOption(option),
-        sx: {
-          p: 0.5,
-          display: "flex",
-          cursor: "pointer",
-          backgroundColor: isSelected ? colors.lightBlueBackground : void 0
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Checkbox, { disableRipple: true, sx: { py: 0.5 }, checked: isSelected }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.ListItemText, { primary: option.label })
-        ]
-      },
-      option.value ?? index
-    );
-  }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.FormControl, { fullWidth: true, variant, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.InputLabel, { children: inputLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-      import_material62.Select,
-      {
-        multiple: true,
-        size,
-        disabled,
-        value: values ?? localValues,
-        defaultValue: defaultValues,
-        onOpen,
-        onClose: () => onClose?.(localValues),
-        renderValue: (selectedValues) => {
-          const valuesString = selectedValues.map((v) => v.label)?.join(", ");
-          return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
-        },
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-          import_material62.Box,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.CircularProgress, { size: 24 })
-          }
-        ) : renderMenuContent()
-      }
-    ),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.FormHelperText, { children: helperText })
-  ] });
-};
-
-// src/components/SmartSelect/SmartSelect.tsx
-var import_react35 = require("react");
-var import_material63 = require("@mui/material");
 var import_mui49 = require("tss-react/mui");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var useStyles44 = (0, import_mui49.makeStyles)()(() => ({
   container: {
     display: "flex",
     flexDirection: "column"
   }
 }));
-var SmartSelect = (0, import_react35.forwardRef)(
+var SmartSelect = (0, import_react34.forwardRef)(
   ({
     value,
     defaultOption,
@@ -7429,9 +7333,9 @@ var SmartSelect = (0, import_react35.forwardRef)(
     menuProps
   }, ref) => {
     const { classes } = useStyles44();
-    const [open, setOpen] = (0, import_react35.useState)(false);
-    const [localOptions, setLocalOptions] = (0, import_react35.useState)(options || []);
-    (0, import_react35.useEffect)(() => {
+    const [open, setOpen] = (0, import_react34.useState)(false);
+    const [localOptions, setLocalOptions] = (0, import_react34.useState)(options || []);
+    (0, import_react34.useEffect)(() => {
       if (options) {
         setLocalOptions(options);
       }
@@ -7470,8 +7374,8 @@ var SmartSelect = (0, import_react35.forwardRef)(
         onChange(selectedOption);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-      import_material63.FormControl,
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+      import_material62.FormControl,
       {
         fullWidth: true,
         size,
@@ -7481,16 +7385,16 @@ var SmartSelect = (0, import_react35.forwardRef)(
         "data-testid": dataTestId,
         disabled,
         children: [
-          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-            import_material63.InputLabel,
+          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            import_material62.InputLabel,
             {
               id: "smart-select-label",
               "data-testid": `${dataTestId}-label`,
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-            import_material63.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+            import_material62.Select,
             {
               ref,
               size,
@@ -7507,26 +7411,26 @@ var SmartSelect = (0, import_react35.forwardRef)(
               MenuProps: menuProps,
               label: inputLabel,
               children: [
-                isFetching && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
+                isFetching && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  import_material62.MenuItem,
                   {
                     disabled: true,
                     "data-testid": `${dataTestId}-loading`,
                     id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.CircularProgress, { size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.CircularProgress, { size: 24 })
                   }
                 ),
-                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
-                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
+                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.MenuItem, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
+                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  import_material62.MenuItem,
                   {
                     value: defaultOption?.value,
                     "data-testid": `${dataTestId}-default-option`,
                     children: defaultOption?.label
                   }
                 ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-                  import_material63.MenuItem,
+                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  import_material62.MenuItem,
                   {
                     value: option?.value,
                     "data-testid": `${dataTestId}-option-${option?.value}`,
@@ -7538,7 +7442,7 @@ var SmartSelect = (0, import_react35.forwardRef)(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
         ]
       }
     );
@@ -7547,15 +7451,15 @@ var SmartSelect = (0, import_react35.forwardRef)(
 var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
-var import_react36 = require("react");
-var import_material64 = require("@mui/material");
-var import_colors52 = require("@mui/material/colors");
+var import_react35 = require("react");
+var import_material63 = require("@mui/material");
+var import_colors51 = require("@mui/material/colors");
 var import_mui50 = require("tss-react/mui");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
   red: {
-    backgroundColor: import_colors52.red["50"],
-    color: import_colors52.red["500"],
+    backgroundColor: import_colors51.red["50"],
+    color: import_colors51.red["500"],
     padding: theme.spacing(1.5),
     borderRadius: "5px",
     marginTop: theme.spacing(1),
@@ -7566,15 +7470,15 @@ var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles45();
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { className: classes[color], children: copy });
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.Typography, { className: classes[color], children: copy });
 };
-var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
+var SquareLabel_default = (0, import_react35.memo)(SquareLabel);
 
 // src/components/Switch/Switch.tsx
-var import_react37 = require("react");
-var import_material65 = require("@mui/material");
+var import_react36 = require("react");
+var import_material64 = require("@mui/material");
 var import_mui51 = require("tss-react/mui");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var LSwitch = ({
   checked,
   labelOn,
@@ -7582,8 +7486,8 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
-  import_material65.Grid,
+}) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+  import_material64.Grid,
   {
     component: "label",
     container: true,
@@ -7592,9 +7496,9 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      labelOff && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Grid, { children: labelOff }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-        import_material65.Switch,
+      labelOff && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Grid, { children: labelOff }),
+      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        import_material64.Switch,
         {
           checked,
           color: "primary",
@@ -7602,7 +7506,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Grid, { children: labelOn })
+      labelOn && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Grid, { children: labelOn })
     ]
   }
 ) });
@@ -7624,13 +7528,13 @@ var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
     fontSize: "1rem"
   }
 }));
-var Switch_default = (0, import_react37.memo)(LabelledSwitch);
+var Switch_default = (0, import_react36.memo)(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_react38 = require("react");
-var import_material66 = require("@mui/material");
+var import_react37 = require("react");
+var import_material65 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var MAX_WIDTH = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
@@ -7641,138 +7545,138 @@ var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   }
   return false;
 });
-var SmartTableHeaderFilterMenu = ({
-  headCell,
-  numActiveFilters,
-  headerFilters,
-  shouldShowCheckOnFilter,
-  onApplyFilters
-}) => {
-  const [anchorEl, setAnchorEl] = (0, import_react38.useState)(null);
-  const [filterOptionsData, setFilterOptionsData] = (0, import_react38.useState)();
-  const [selectedFilterOptions, setSelectedFilterOptions] = (0, import_react38.useState)(headerFilters[headCell.id] ?? []);
-  const numFilterOptions = filterOptionsData?.length ?? 0;
-  (0, import_react38.useEffect)(() => {
-    if (headCell.filterOptions) {
-      setFilterOptionsData(headCell.filterOptions);
-    } else if (headCell.filterType === "boolean") {
-      setFilterOptionsData([
-        { id: "true", label: "Yes" },
-        { id: "false", label: "No" }
-      ]);
-    }
-  }, [headCell.filterOptions]);
-  const handleFilterMenuOpen = (event) => {
-    if (!numFilterOptions && headCell.filterType === "default") {
-      headCell.refetchFilterOptions?.();
-    }
-    setAnchorEl(event.currentTarget);
-  };
-  const handleFilterMenuClose = () => {
-    setSelectedFilterOptions(headerFilters[headCell.id]);
-    setAnchorEl(null);
-  };
-  const handleSelectAllChange = (checked) => {
-    if (checked) {
-      setSelectedFilterOptions([
-        ...filterOptionsData ?? []
-      ]);
-      return;
-    }
-    setSelectedFilterOptions([]);
-  };
-  const handleFilterOptionChange = (option) => {
-    const selectedIndex = findFilterIndex(selectedFilterOptions, option);
-    let newSelected;
-    if (selectedIndex === -1) {
-      if (typeof option === "string") {
-        newSelected = [...selectedFilterOptions, option];
-      } else {
-        newSelected = [
-          ...selectedFilterOptions,
-          option
-        ];
+var SmartTableHeaderFilterMenu = (0, import_react37.memo)(
+  ({
+    headCell,
+    numActiveFilters,
+    headerFilters,
+    shouldShowCheckOnFilter,
+    onApplyFilters
+  }) => {
+    const [anchorEl, setAnchorEl] = (0, import_react37.useState)(null);
+    const [filterOptionsData, setFilterOptionsData] = (0, import_react37.useState)();
+    const [selectedFilterOptions, setSelectedFilterOptions] = (0, import_react37.useState)(headerFilters[headCell.id] ?? []);
+    (0, import_react37.useEffect)(() => {
+      if (headCell.filterOptions) {
+        setFilterOptionsData(headCell.filterOptions);
       }
-    } else {
-      newSelected = selectedFilterOptions.filter(
-        (_, index) => index !== selectedIndex
-      );
-    }
-    setSelectedFilterOptions(newSelected);
-  };
-  const handleApplyFiltersClick = (shouldSave) => {
-    const updatedFilters = {
-      ...headerFilters,
-      [headCell.id]: [...selectedFilterOptions]
+    }, [headCell.filterOptions]);
+    const numFilterOptions = (0, import_react37.useMemo)(
+      () => filterOptionsData?.length ?? 0,
+      [filterOptionsData?.length]
+    );
+    const handleFilterMenuOpen = (event) => {
+      if (!numFilterOptions && !headCell.isAutocompleteFilterMenu) {
+        headCell.refetchFilterOptions?.();
+      }
+      setAnchorEl(event.currentTarget);
     };
-    onApplyFilters?.(updatedFilters, shouldSave);
-    setAnchorEl(null);
-  };
-  (0, import_react38.useEffect)(() => {
-    setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
-  }, [headerFilters, headCell.id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      ActiveFiltersIconButton,
-      {
-        numActiveFilters,
-        handleClick: handleFilterMenuOpen,
-        className: (0, import_classnames3.default)("filter-menu-trigger", {
-          "has-active-filters": !!numActiveFilters || !!anchorEl
-        })
+    const handleFilterMenuClose = () => {
+      setSelectedFilterOptions(headerFilters[headCell.id]);
+      setAnchorEl(null);
+    };
+    const handleSelectAllChange = (checked) => {
+      if (checked) {
+        setSelectedFilterOptions([
+          ...filterOptionsData ?? []
+        ]);
+        return;
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material66.Menu,
-      {
-        open: !!anchorEl,
-        onClose: handleFilterMenuClose,
-        anchorEl,
-        "data-testid": "filter-menu",
-        slotProps: {
-          list: {
-            sx: { p: 0, maxWidth: MAX_WIDTH }
-          }
-        },
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-          AutocompleteFilterMenuContent,
-          {
-            columnId: headCell.id,
-            labelFieldName: headCell.fieldName ?? "",
-            isLoading: headCell.isFetchingFilterOptions,
-            filterOptions: filterOptionsData,
-            onAutocompleteSearch: headCell.onAutocompleteSearch,
-            selectedFilterOptions,
-            onFilterOptionChange: handleFilterOptionChange,
-            onApplyFiltersClick: handleApplyFiltersClick,
-            shouldShowCheckOnFilter
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-          CheckboxFilterMenuContent,
-          {
-            columnId: headCell.id,
-            labelFieldName: headCell.fieldName ?? "",
-            isLoading: headCell.isFetchingFilterOptions,
-            selectedFilterOptions,
-            filterOptions: filterOptionsData ?? [],
-            onSelectAllChange: handleSelectAllChange,
-            onFilterOptionChange: handleFilterOptionChange,
-            onApplyFiltersClick: handleApplyFiltersClick,
-            shouldShowCheckOnFilter
-          }
-        )
+      setSelectedFilterOptions([]);
+    };
+    const handleFilterOptionChange = (option) => {
+      const selectedIndex = findFilterIndex(selectedFilterOptions, option);
+      let newSelected;
+      if (selectedIndex === -1) {
+        if (typeof option === "string") {
+          newSelected = [...selectedFilterOptions, option];
+        } else {
+          newSelected = [
+            ...selectedFilterOptions,
+            option
+          ];
+        }
+      } else {
+        newSelected = selectedFilterOptions.filter(
+          (_, index) => index !== selectedIndex
+        );
       }
-    )
-  ] });
-};
+      setSelectedFilterOptions(newSelected);
+    };
+    const handleApplyFiltersClick = (shouldSave) => {
+      const updatedFilters = {
+        ...headerFilters,
+        [headCell.id]: [...selectedFilterOptions]
+      };
+      onApplyFilters?.(updatedFilters, shouldSave);
+      setAnchorEl(null);
+    };
+    (0, import_react37.useEffect)(() => {
+      setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
+    }, [headerFilters, headCell.id]);
+    return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+        ActiveFiltersIconButton,
+        {
+          numActiveFilters,
+          handleClick: handleFilterMenuOpen,
+          className: (0, import_classnames3.default)("filter-menu-trigger", {
+            "has-active-filters": !!numActiveFilters || !!anchorEl
+          })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+        import_material65.Menu,
+        {
+          open: !!anchorEl,
+          onClose: handleFilterMenuClose,
+          anchorEl,
+          "data-testid": "filter-menu",
+          slotProps: {
+            list: {
+              sx: { p: 0, maxWidth: MAX_WIDTH }
+            }
+          },
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "right" },
+          children: headCell.isAutocompleteFilterMenu ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+            AutocompleteFilterMenuContent,
+            {
+              columnId: headCell.id,
+              labelFieldName: headCell.fieldName ?? "",
+              isLoading: headCell.isFetchingFilterOptions,
+              filterOptions: headCell.filterOptions,
+              onAutocompleteFilterChange: headCell.onAutocompleteFilterChange,
+              selectedFilterOptions,
+              onFilterOptionChange: handleFilterOptionChange,
+              onApplyFiltersClick: handleApplyFiltersClick,
+              shouldShowCheckOnFilter
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+            CheckboxFilterMenuContent,
+            {
+              columnId: headCell.id,
+              labelFieldName: headCell.fieldName ?? "",
+              isLoading: headCell.isFetchingFilterOptions,
+              selectedFilterOptions,
+              filterOptions: filterOptionsData ?? [],
+              onSelectAllChange: handleSelectAllChange,
+              onFilterOptionChange: handleFilterOptionChange,
+              onApplyFiltersClick: handleApplyFiltersClick,
+              shouldShowCheckOnFilter
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
-var import_react39 = require("react");
-var import_material67 = require("@mui/material");
-var import_jsx_runtime120 = require("react/jsx-runtime");
-var SmartTableHeader = (0, import_react39.memo)(
+var import_react38 = require("react");
+var import_material66 = require("@mui/material");
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var SmartTableHeader = (0, import_react38.memo)(
   ({
     order,
     orderBy,
@@ -7790,26 +7694,19 @@ var SmartTableHeader = (0, import_react39.memo)(
       onRequestSort(event, property);
     };
     const isSortActive = (headCellId) => orderBy === headCellId;
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material67.TableRow, { children: [
-      enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-        import_material67.TableCell,
+    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material66.TableRow, { children: [
+      enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        import_material66.Checkbox,
         {
-          padding: "checkbox",
-          sx: { backgroundColor: colors.neutral100 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-            import_material67.Checkbox,
-            {
-              color: "primary",
-              disableRipple: true,
-              indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
-              checked: numRows > 0 && numSelectedRows === numRows,
-              onChange: onSelectAllClick
-            }
-          )
+          color: "primary",
+          disableRipple: true,
+          indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
+          checked: numRows > 0 && numSelectedRows === numRows,
+          onChange: onSelectAllClick
         }
-      ) : null,
-      headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-        import_material67.TableCell,
+      ) }) : null,
+      headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        import_material66.TableCell,
         {
           align: "left",
           width: headCell.width ?? "auto",
@@ -7832,23 +7729,31 @@ var SmartTableHeader = (0, import_react39.memo)(
               }
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-            import_material67.Box,
+          children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+            import_material66.Box,
             {
               display: "flex",
               flexDirection: "row",
               gap: headCell.disableSort ? 1 : 0,
               children: [
-                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Typography, { variant: "subtitle2", mt: 0.25, mb: -0.25, children: headCell.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-                  import_material67.TableSortLabel,
+                headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                  import_material66.Typography,
+                  {
+                    variant: "subtitle2",
+                    mt: 0.25,
+                    fontWeight: 600,
+                    children: headCell.label
+                  }
+                ) }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+                  import_material66.TableSortLabel,
                   {
                     "data-testid": "table-sort-label",
                     active: isSortActive(headCell.id),
                     direction: orderBy === headCell.id ? order : "asc",
                     onClick: createSortHandler(headCell.id),
                     children: [
-                      headCell.renderHeader ?? headCell.label,
-                      orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                      headCell.RenderHeader ?? headCell.label,
+                      orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                         "span",
                         {
                           style: {
@@ -7868,7 +7773,7 @@ var SmartTableHeader = (0, import_react39.memo)(
                     ]
                   }
                 ) }),
-                headCell.filterType ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                   SmartTableHeaderFilterMenu,
                   {
                     headCell,
@@ -7889,20 +7794,20 @@ var SmartTableHeader = (0, import_react39.memo)(
 );
 
 // src/components/Table/Table.tsx
-var import_react40 = require("react");
-var import_material69 = require("@mui/material");
+var import_react39 = require("react");
+var import_material68 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
 var import_mui52 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
-var import_material68 = require("@mui/material");
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_material67 = require("@mui/material");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-  import_material68.Skeleton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  import_material67.Skeleton,
   {
     animation: "pulse",
     "data-testid": "table-loading-skeleton",
@@ -7950,7 +7855,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -7985,11 +7890,11 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = (0, import_react40.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react40.useState)(
+  const [order, setOrder] = (0, import_react39.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react39.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = (0, import_react40.useState)(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = (0, import_react39.useState)(defaultRowsPerPage);
   const { classes } = useStyles46();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
@@ -8002,7 +7907,7 @@ var Table = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react39.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -8028,25 +7933,25 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableCell, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_material69.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-      import_material69.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_material68.TableCell,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-          import_material69.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+          import_material68.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -8057,29 +7962,29 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_material69.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
 var Table_default = Table;
 
 // src/components/TableDesktop/TableDesktop.tsx
-var import_react41 = require("react");
-var import_material74 = require("@mui/material");
+var import_react40 = require("react");
+var import_material73 = require("@mui/material");
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
-var import_material70 = require("@mui/material");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_material69 = require("@mui/material");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
 var TableDesktopLoadingState = ({
   numRows,
   numColumns,
   rowHeight = 56
 }) => {
-  return getRange(numRows).map((rowNum) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material70.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material70.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-    import_material70.Skeleton,
+  return getRange(numRows).map((rowNum) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material69.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_material69.Skeleton,
     {
       animation: "pulse",
       variant: "rounded",
@@ -8097,11 +8002,11 @@ var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
 var import_Typography = __toESM(require("@mui/material/Typography"), 1);
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
-var import_material71 = require("@mui/material");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_material70 = require("@mui/material");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
-    import_material71.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    import_material70.Button,
     {
       sx: {
         display: "flex",
@@ -8121,10 +8026,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
   import_TableCell.default,
   {
     sx: {
@@ -8137,9 +8042,9 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
         import_Typography.default,
         {
           variant: "subtitle1",
@@ -8152,18 +8057,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -8172,7 +8077,7 @@ var TableDesktopNoColumnsMessage = ({
 ) }) });
 
 // src/components/TableDesktopRows/TableDesktopRows.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var descendingComparator2 = (a, b, orderBy) => {
   const objA = a[orderBy];
   const objB = b[orderBy];
@@ -8218,7 +8123,7 @@ var TableDesktopRows = ({
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
   return sortedData.map((row, index) => {
     const isItemSelected = selectedRows.has(row[keyField]);
-    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       RenderItem,
       {
         ...{
@@ -8240,8 +8145,8 @@ var TableDesktopRows = ({
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-var import_material72 = require("@mui/material");
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_material71 = require("@mui/material");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
   isRowsFromAllPagesSelected,
@@ -8260,8 +8165,8 @@ var TableDesktopRowSelectionBar = ({
     }
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
-  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
-    import_material72.Box,
+  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+    import_material71.Box,
     {
       sx: {
         p: 1,
@@ -8273,22 +8178,22 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { children: getSelectedRowsText() }),
-        !isRowsFromAllPagesSelected ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Button, { onClick: onSelectRowsFromAllPagesClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Typography, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material71.Button, { onClick: onSelectRowsFromAllPagesClick, children: [
           "Select all ",
           totalRowCount,
           " rows from all pages based on your filters"
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
 };
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material73 = require("@mui/material");
+var import_material72 = require("@mui/material");
 var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -8300,17 +8205,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles47();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-    import_material73.TableCell,
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+    import_material72.TableCell,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
           FilledButton_default,
           {
             copy: "Search",
@@ -8321,8 +8226,8 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-    import_material73.TableCell,
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    import_material72.TableCell,
     {
       className: classes.tableCellDefault,
       colSpan,
@@ -8334,7 +8239,7 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var TableDesktop = ({
   data = [],
   headCells,
@@ -8361,24 +8266,24 @@ var TableDesktop = ({
   shouldShowCheckOnFilter,
   refetchData
 }) => {
-  const tableToolbarMenuButtonRef = (0, import_react41.useRef)(null);
-  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = (0, import_react41.useState)(null);
-  const [order, setOrder] = (0, import_react41.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react41.useState)(
+  const tableToolbarMenuButtonRef = (0, import_react40.useRef)(null);
+  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = (0, import_react40.useState)(null);
+  const [order, setOrder] = (0, import_react40.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react40.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = (0, import_react41.useState)(
+  const [selectedRows, setSelectedRows] = (0, import_react40.useState)(
     /* @__PURE__ */ new Set()
   );
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react41.useState)(false);
-  const [isBulkChangesMode, setIsBulkChangesMode] = (0, import_react41.useState)(false);
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react40.useState)(false);
+  const [isBulkChangesMode, setIsBulkChangesMode] = (0, import_react40.useState)(false);
   const numRows = data.length;
-  const numSelectedRows = (0, import_react41.useMemo)(() => {
+  const numSelectedRows = (0, import_react40.useMemo)(() => {
     const currentPageIds = new Set(data.map((row) => row[keyField]));
     return [...selectedRows].filter((id) => currentPageIds.has(id)).length;
   }, [data, selectedRows, keyField]);
   const isEveryRowInPageSelected = numRows > 0 && numSelectedRows === numRows;
-  const visibleHeadCells = (0, import_react41.useMemo)(
+  const visibleHeadCells = (0, import_react40.useMemo)(
     () => headCells.filter((headCell) => headCell?.enabled ?? true),
     [headCells]
   );
@@ -8441,7 +8346,7 @@ var TableDesktop = ({
       resetSelectedRows();
     }
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (isRowsFromAllPagesSelected) {
       selectAllRowsInPage();
       selectAllRowsInPage();
@@ -8449,7 +8354,7 @@ var TableDesktop = ({
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         TableDesktopLoadingState,
         {
           numRows: Math.min(rowsPerPage, 10),
@@ -8459,7 +8364,7 @@ var TableDesktop = ({
       );
     }
     if (numRows === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         TableEmptyResult_default,
         {
           showClearFilterButton,
@@ -8468,7 +8373,7 @@ var TableDesktop = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
       TableDesktopRows,
       {
         data,
@@ -8487,8 +8392,8 @@ var TableDesktop = ({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-    import_material74.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_material73.Box,
     {
       sx: {
         height,
@@ -8496,8 +8401,8 @@ var TableDesktop = ({
         justifyContent: "space-between",
         justifyItems: "stretch"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
-        import_material74.Paper,
+      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+        import_material73.Paper,
         {
           sx: {
             width: "100%",
@@ -8521,7 +8426,7 @@ var TableDesktop = ({
               isBulkChangesMode,
               onChangeBulkChangesMode: handleChangeBulkChangesMode
             }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
@@ -8532,8 +8437,8 @@ var TableDesktop = ({
                 onClearSelectionClick: handleClearSelectionClick
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
-              import_material74.TableContainer,
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              import_material73.TableContainer,
               {
                 sx: {
                   flexGrow: 1,
@@ -8554,13 +8459,13 @@ var TableDesktop = ({
                     backgroundColor: (theme) => theme.palette.grey[500]
                   }
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material74.Table, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Table, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                   TableDesktopNoColumnsMessage,
                   {
                     onClickNoColumnsMessageOpenMenu: handleClickToolbarMenuOpen
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                     SmartTableHeader,
                     {
                       order,
@@ -8576,7 +8481,7 @@ var TableDesktop = ({
                       shouldShowCheckOnFilter
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material74.TableBody, { children: renderBody() })
+                  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableBody, { children: renderBody() })
                 ] }) })
               }
             ),
@@ -8593,141 +8498,99 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-var import_react45 = require("react");
-var import_Delete = __toESM(require("@mui/icons-material/Delete"), 1);
-var import_material76 = require("@mui/material");
-var import_x_date_pickers = require("@mui/x-date-pickers");
-var import_moment3 = __toESM(require("moment"), 1);
-
-// src/components/TableDesktopEditableField/TableDesktopSmartMultipleSelect.tsx
-var import_react42 = require("react");
-var import_jsx_runtime130 = require("react/jsx-runtime");
-var TableDesktopSmartMultipleSelect = ({
-  initialValue,
-  inputLabel,
-  columnId,
-  fieldName,
-  rowId,
-  disabled,
-  variant = "standard",
-  size,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  onUpdateEditableCell
-}) => {
-  const defaultValues = (0, import_react42.useMemo)(() => {
-    return initialValue.map((val) => ({
-      value: val.id,
-      label: val[fieldName].toString()
-    }));
-  }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-    SmartMultipleSelect,
-    {
-      inputLabel,
-      size,
-      variant,
-      disabled,
-      defaultValues,
-      menuOptions: filterOptions,
-      isLoading: isFetchingFilterOptions,
-      onOpen: () => {
-        if (!filterOptions?.length) {
-          refetchFilterOptions?.();
-        }
-      },
-      onClose: (values) => {
-        const optionsValues = values.map((option) => option.value ?? "");
-        onUpdateEditableCell?.({
-          rowId,
-          columnId,
-          value: optionsValues,
-          label: optionsValues
-        });
-      }
-    }
-  );
-};
+var import_material75 = require("@mui/material");
 
 // src/components/TableDesktopEditableField/TableDesktopSmartSelect.tsx
-var import_react43 = require("react");
-var import_jsx_runtime131 = require("react/jsx-runtime");
-var TableDesktopSmartSelect = ({
-  ref,
-  initialValue,
-  inputLabel,
-  columnId,
-  fieldName,
-  rowId,
-  disabled,
-  variant = "standard",
-  size,
-  allowBlankOption,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  onUpdateEditableCell
-}) => {
-  const [value, setValue] = (0, import_react43.useState)(
-    initialValue
-  );
-  const valueId = resolveObjectType(value ?? "", "id");
-  const valueLabel = resolveObjectType(value ?? "", fieldName);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-    SmartSelect_default,
-    {
-      ref,
-      value: valueId,
-      allowBlankOption,
-      inputLabel,
-      options: filterOptions,
-      disabled,
-      variant,
-      size,
-      refetch: refetchFilterOptions,
-      isFetching: isFetchingFilterOptions,
-      defaultOption: {
-        value: valueId ?? "",
-        label: String(valueLabel ?? "")
-      },
-      onChange: ({ value: id, label }) => {
-        setValue({ id: id ?? "", name: label ?? "" });
-        onUpdateEditableCell?.({
-          rowId,
-          columnId,
-          value: id || null,
-          label: label ?? ""
-        });
+var import_react41 = require("react");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var TableDesktopSmartSelect = (0, import_react41.memo)(
+  ({
+    ref,
+    initialValue,
+    inputLabel,
+    field,
+    fieldName,
+    rowId,
+    disabled,
+    variant = "standard",
+    size,
+    filterOptions,
+    refetchFilterOptions,
+    isFetchingFilterOptions,
+    onUpdateEditableCell
+  }) => {
+    const [value, setValue] = (0, import_react41.useState)(
+      initialValue
+    );
+    const [options, setOptions] = (0, import_react41.useState)();
+    const valueId = resolveObjectType(value, "id");
+    const valueLabel = resolveObjectType(value, fieldName);
+    (0, import_react41.useEffect)(() => {
+      if (filterOptions) {
+        const parsedOptions = filterOptions?.map(
+          (option) => ({
+            value: resolveObjectType(option, "id"),
+            label: String(resolveObjectType(option, fieldName))
+          })
+        );
+        setOptions(parsedOptions);
       }
-    }
-  );
-};
+    }, [filterOptions]);
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      SmartSelect_default,
+      {
+        ref,
+        value: valueId,
+        inputLabel,
+        options,
+        disabled,
+        variant,
+        size,
+        refetch: refetchFilterOptions,
+        isFetching: isFetchingFilterOptions,
+        defaultOption: {
+          value: valueId ?? "",
+          label: String(valueLabel ?? "")
+        },
+        onChange: ({ value: id, label: name }) => {
+          if (!id || !name) {
+            return;
+          }
+          setValue({ id, name });
+          if (!onUpdateEditableCell) {
+            return;
+          }
+          onUpdateEditableCell(rowId ?? 0, field, id, name);
+        }
+      }
+    );
+  }
+);
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-var import_react44 = require("react");
-var import_material75 = require("@mui/material");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_react42 = require("react");
+var import_material74 = require("@mui/material");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
   initialValue,
   inputLabel,
   disabled,
-  columnId,
+  field,
   type,
   variant = "standard",
   size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = (0, import_react44.useState)(initialValue);
-  const oldValue = (0, import_react44.useRef)(initialValue);
-  const isDirty = (0, import_react44.useMemo)(
+  const [input, setInput] = (0, import_react42.useState)(initialValue);
+  const oldValue = (0, import_react42.useRef)(initialValue);
+  const isDirty = (0, import_react42.useMemo)(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
-  const hasValidationError = (0, import_react44.useMemo)(
-    () => isDirty && validateInput && !validateInput(input),
+  const hasValidationError = (0, import_react42.useMemo)(
+    () => isDirty && !validateInput?.(input),
     [input, validateInput]
   );
   const commitValue = (value) => {
@@ -8736,7 +8599,7 @@ var TableDesktopTextField = ({
       return;
     }
     oldValue.current = value;
-    onUpdateEditableCell({ rowId, columnId, value, label: value });
+    onUpdateEditableCell(rowId ?? 0, field, value, value);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
@@ -8744,8 +8607,8 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-    import_material75.TextField,
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    import_material74.TextField,
     {
       fullWidth: true,
       variant,
@@ -8767,9 +8630,6 @@ var TableDesktopTextField = ({
       slotProps: {
         input: {
           inputMode: type === "numeric" ? "numeric" : void 0
-        },
-        htmlInput: {
-          maxLength: 1e3
         }
       }
     }
@@ -8777,98 +8637,63 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var TableDesktopEditableField = ({
   editInitialValue,
   rowId,
+  field,
+  fieldName,
   disabled,
+  inputLabel,
   showCheckboxLabel = false,
   variant = "standard",
   size,
-  onUpdateEditableCell,
-  headCell: {
-    id: columnId,
-    fieldName = "",
-    label: inputLabel = "",
-    editableCellType,
-    filterOptions,
-    refetchFilterOptions,
-    isFetchingFilterOptions,
-    validateInput,
-    allowBlankSelectOption
-  }
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell
 }) => {
-  const [parsedFilterOptions, setParsedFilterOptions] = (0, import_react45.useState)();
-  (0, import_react45.useEffect)(() => {
-    if (filterOptions && editableCellType === "select" || editableCellType === "multipleSelect") {
-      const parsedOptions = filterOptions?.map(
-        (option) => ({
-          value: resolveObjectType(option, "id"),
-          label: String(resolveObjectType(option, fieldName))
-        })
-      );
-      setParsedFilterOptions(parsedOptions);
-    }
-  }, [filterOptions, editableCellType]);
   const editableComponents = {
-    select: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    select: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       TableDesktopSmartSelect,
       {
         rowId,
-        columnId,
+        field,
         fieldName,
         disabled,
         variant,
         size,
-        allowBlankOption: allowBlankSelectOption,
         initialValue: editInitialValue,
         inputLabel,
-        filterOptions: parsedFilterOptions,
+        filterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    multipleSelect: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      TableDesktopSmartMultipleSelect,
-      {
-        rowId,
-        columnId,
-        fieldName,
-        disabled,
-        variant,
-        size,
-        initialValue: editInitialValue,
-        inputLabel,
-        filterOptions: parsedFilterOptions,
-        refetchFilterOptions,
-        isFetchingFilterOptions,
-        onUpdateEditableCell
-      }
-    ),
-    checkbox: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_material76.FormControlLabel,
+    checkbox: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      import_material75.FormControlLabel,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-          import_material76.Checkbox,
+        control: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          import_material75.Checkbox,
           {
             disableRipple: true,
             disabled,
             defaultChecked: editInitialValue,
             onChange: ({ target: { checked } }) => {
-              onUpdateEditableCell?.({
-                rowId,
-                columnId,
-                value: checked,
-                label: checked
-              });
+              if (!onUpdateEditableCell) {
+                return;
+              }
+              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
             }
           }
         )
       }
     ),
-    text: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    text: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       TableDesktopTextField,
       {
         type: "text",
@@ -8876,14 +8701,14 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        columnId,
+        field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    numeric: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -8891,80 +8716,21 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        columnId,
+        field,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
-    ),
-    date: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_x_date_pickers.DatePicker,
-      {
-        defaultValue: (0, import_moment3.default)(editInitialValue),
-        label: inputLabel,
-        format: "DD/MM/YYYY",
-        sx: { overflowY: "hidden" },
-        onAccept: (value) => {
-          const formattedValue = value?.format("YYYY-MM-DD") ?? null;
-          const formattedLabel = value?.format("DD/MM/YYYY") ?? null;
-          onUpdateEditableCell?.({
-            rowId,
-            columnId,
-            value: formattedValue,
-            label: formattedLabel
-          });
-        },
-        slots: { clearIcon: import_Delete.default },
-        slotProps: {
-          field: { clearable: true },
-          clearButton: { sx: { p: 0.5 } },
-          openPickerButton: { sx: { p: 0 } },
-          textField: {
-            variant: "standard",
-            error: false
-          }
-        }
-      }
-    ),
-    time: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-      import_x_date_pickers.TimePicker,
-      {
-        defaultValue: (0, import_moment3.default)(editInitialValue, "HH:mm:ss"),
-        label: inputLabel,
-        sx: { overflowY: "hidden" },
-        onAccept: (value) => {
-          const formattedValue = value?.format("HH:mm") ?? null;
-          onUpdateEditableCell?.({
-            rowId,
-            columnId,
-            value: formattedValue,
-            label: formattedValue
-          });
-        },
-        slots: { clearIcon: import_Delete.default },
-        slotProps: {
-          field: { clearable: true },
-          clearButton: { sx: { p: 0.5 } },
-          openPickerButton: { sx: { p: 0 } },
-          textField: {
-            variant: "standard",
-            error: false
-          }
-        }
-      }
     )
   };
-  if (!editableCellType) {
-    return null;
-  }
   return editableComponents[editableCellType];
 };
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
-var import_material77 = require("@mui/material");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_material76 = require("@mui/material");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -8975,8 +8741,8 @@ var TableDesktopFooter = ({
   refetchData,
   isFetching
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-    import_material77.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+    import_material76.Box,
     {
       sx: {
         py: 1,
@@ -8987,8 +8753,8 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-          import_material77.Button,
+        refetchData ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+          import_material76.Button,
           {
             disableRipple: true,
             variant: "outlined",
@@ -9002,7 +8768,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                 import_Refresh.default,
                 {
                   fontSize: "small",
@@ -9013,22 +8779,22 @@ var TableDesktopFooter = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material77.Box, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
-          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material77.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material77.Typography, { children: "Rows per page:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-              import_material77.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material76.Box, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
+          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(import_material76.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material76.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+              import_material76.Select,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material77.MenuItem, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material76.MenuItem, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-            import_material77.Pagination,
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+            import_material76.Pagination,
             {
               color: "standard",
               count: numPages,
@@ -9043,15 +8809,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-var import_react46 = require("react");
+var import_react43 = require("react");
 var import_Check3 = __toESM(require("@mui/icons-material/Check"), 1);
 var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
 var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
-var import_material78 = require("@mui/material");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_material77 = require("@mui/material");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_Check3.default, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_Check3.default, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -9065,28 +8831,36 @@ var getCellBackgroundColor = (isCellInEditMode) => ({
   background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100
 });
 var TableDesktopCell = ({
+  inputLabel,
   editInitialValue,
   rowId,
-  disabled,
+  field,
+  fieldName,
+  width,
   enableEditMode,
+  disabled,
   readOnlyValue,
-  onCellClick,
-  headCell
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell,
+  onCellClick
 }) => {
-  const [isCellHovered, setIsCellHovered] = (0, import_react46.useState)(false);
-  const [isCellInEditMode, setIsCellInEditMode] = (0, import_react46.useState)(false);
-  const { width, editableCellType } = headCell;
-  (0, import_react46.useEffect)(() => {
+  const [isCellHovered, setIsCellHovered] = (0, import_react43.useState)(false);
+  const [isCellInEditMode, setIsCellInEditMode] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         setIsCellInEditMode(false);
       }
     };
     if (isCellInEditMode) {
-      globalThis.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keydown", handleKeyDown);
     }
     return () => {
-      globalThis.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isCellInEditMode]);
   const handleEditClick = (e) => {
@@ -9094,8 +8868,8 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-    import_material78.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    import_material77.TableCell,
     {
       align: "left",
       onMouseEnter: () => isCellEditable && setIsCellHovered(true),
@@ -9106,12 +8880,13 @@ var TableDesktopCell = ({
         width: width ?? "auto",
         position: "relative",
         cursor: disabled || !enableEditMode ? "default" : "pointer",
+        opacity: disabled ? 0.2 : 1,
         ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
         background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-        enableEditMode && isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material78.Tooltip, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-          import_material78.IconButton,
+      children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
+        enableEditMode && isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_material77.Tooltip, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          import_material77.IconButton,
           {
             onClick: handleEditClick,
             sx: {
@@ -9125,17 +8900,24 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            children: isCellInEditMode ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_Edit.default, { fontSize: "small" })
+            children: isCellInEditMode ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_Edit.default, { fontSize: "small" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
           TableDesktopEditableField,
           {
             editInitialValue,
             rowId,
+            field,
+            fieldName,
             disabled,
-            headCell,
-            onUpdateEditableCell: headCell.onUpdateEditableCell
+            inputLabel: inputLabel ?? "",
+            editableCellType,
+            filterOptions,
+            refetchFilterOptions,
+            isFetchingFilterOptions,
+            validateInput,
+            onUpdateEditableCell
           }
         ) : renderReadOnlyValue(readOnlyValue)
       ] }) })
@@ -9144,12 +8926,12 @@ var TableDesktopCell = ({
 };
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
-var import_react47 = require("react");
+var import_react44 = require("react");
 var import_Download = __toESM(require("@mui/icons-material/Download"), 1);
 var import_KeyboardArrowLeft2 = __toESM(require("@mui/icons-material/KeyboardArrowLeft"), 1);
 var import_KeyboardArrowRight2 = __toESM(require("@mui/icons-material/KeyboardArrowRight"), 1);
-var import_material79 = require("@mui/material");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_material78 = require("@mui/material");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -9171,12 +8953,12 @@ var TableDesktopToolbar = ({
   renderTableColumnConfigurationMenu,
   renderInfoIcons
 }) => {
-  const scrollRef = (0, import_react47.useRef)(null);
-  const [bulkChanges, setBulkChanges] = (0, import_react47.useState)([]);
-  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = (0, import_react47.useState)(false);
-  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = (0, import_react47.useState)(false);
-  const [resetCounter, setResetCounter] = (0, import_react47.useState)(0);
-  const visibleEditableColumns = (0, import_react47.useMemo)(
+  const scrollRef = (0, import_react44.useRef)(null);
+  const [bulkChanges, setBulkChanges] = (0, import_react44.useState)([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = (0, import_react44.useState)(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = (0, import_react44.useState)(false);
+  const [resetCounter, setResetCounter] = (0, import_react44.useState)(0);
+  const visibleEditableColumns = (0, import_react44.useMemo)(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
     ),
@@ -9193,17 +8975,13 @@ var TableDesktopToolbar = ({
       refetchData?.();
     }
   };
-  const handleUpdateEditableCell = ({
-    columnId,
-    value,
-    label
-  }) => {
+  const handleUpdateEditableCell = (_rowId, field, value, label) => {
     setBulkChanges((prev) => {
-      return [...prev, { field: columnId, value, label }];
+      return [...prev, { field, value, label }];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-    import_material79.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+    import_material78.Box,
     {
       sx: {
         borderBottom: "1px solid",
@@ -9211,8 +8989,8 @@ var TableDesktopToolbar = ({
         maxWidth: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-          import_material79.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+          import_material78.Box,
           {
             sx: {
               py: 1,
@@ -9223,8 +9001,8 @@ var TableDesktopToolbar = ({
               background: isBulkChangesMode ? colors.neutral150 : void 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-                import_material79.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+                import_material78.Box,
                 {
                   sx: {
                     py: 1,
@@ -9234,21 +9012,21 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    toolbarLabel ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Typography, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
-                      /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Divider, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
+                    toolbarLabel ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material78.Typography, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material78.Divider, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                      import_material79.Tooltip,
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                      import_material78.Tooltip,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                          import_material79.FormControlLabel,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                          import_material78.FormControlLabel,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                              import_material79.Switch,
+                            control: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                              import_material78.Switch,
                               {
                                 size: "small",
                                 "aria-label": "bulk-changes-mode-switch",
@@ -9262,17 +9040,17 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                import_material79.IconButton,
+              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                import_material78.IconButton,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_KeyboardArrowLeft2.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_KeyboardArrowLeft2.default, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                import_material79.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                import_material78.Box,
                 {
                   ref: scrollRef,
                   sx: {
@@ -9288,40 +9066,56 @@ var TableDesktopToolbar = ({
                       display: "none"
                     }
                   },
-                  children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
-                    const { id, width, editableCellType } = headCell;
-                    return editableCellType && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                      import_material79.Box,
+                  children: isBulkChangesMode ? visibleEditableColumns.map(
+                    ({
+                      id,
+                      fieldName,
+                      label,
+                      editableCellType,
+                      filterOptions,
+                      refetchFilterOptions,
+                      isFetchingFilterOptions,
+                      validateInput,
+                      width
+                    }) => editableCellType && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                      import_material78.Box,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                           TableDesktopEditableField,
                           {
-                            headCell,
+                            field: id,
                             size: "small",
                             variant: "outlined",
                             showCheckboxLabel: true,
+                            fieldName: fieldName ?? "",
+                            inputLabel: label ?? "",
+                            editableCellType,
+                            filterOptions,
+                            refetchFilterOptions,
+                            isFetchingFilterOptions,
+                            validateInput,
                             onUpdateEditableCell: handleUpdateEditableCell
                           }
                         )
                       },
                       `${id}-${resetCounter}`
-                    );
-                  }) : null
+                    )
+                  ) : null
                 }
               ),
-              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                import_material79.IconButton,
+              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                import_material78.IconButton,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_KeyboardArrowRight2.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_KeyboardArrowRight2.default, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                  import_material79.Button,
+              isBulkChangesMode ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  import_material78.Button,
                   {
                     variant: "outlined",
                     sx: { borderRadius: 25, alignSelf: "center" },
@@ -9333,8 +9127,8 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                  import_material79.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  import_material78.Button,
                   {
                     variant: "contained",
                     "aria-label": "bulk-changes-apply-button",
@@ -9344,26 +9138,26 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material79.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material78.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Download Customer List", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                  import_material79.IconButton,
+                renderExportCsvDialog ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material78.Tooltip, { title: "Download Customer List", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  import_material78.IconButton,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_Download.default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_Download.default, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Table Column Configuration", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-                  import_material79.IconButton,
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material78.Tooltip, { title: "Table Column Configuration", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                  import_material78.IconButton,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -9396,11 +9190,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react48 = require("react");
+var import_react45 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material80 = require("@mui/material");
+var import_material79 = require("@mui/material");
 var import_mui54 = require("tss-react/mui");
-var import_jsx_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -9409,9 +9203,9 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react48.useState)([]);
+  const [sortableCells, setSortableCells] = (0, import_react45.useState)([]);
   const { classes } = useStyles48();
-  (0, import_react48.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -9445,8 +9239,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material80.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material80.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_material80.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
-    import_material80.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material79.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material79.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material79.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    import_material79.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -9456,12 +9250,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react48.memo)(TableHeader);
+var TableHeader_default = (0, import_react45.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material81 = require("@mui/material");
+var import_material80 = require("@mui/material");
 var import_mui55 = require("tss-react/mui");
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
   icon: {
     fontSize: 20
@@ -9498,19 +9292,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles49();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
-    import_material81.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+    import_material80.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material81.Box, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-            import_material81.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material80.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material80.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material80.Box, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+            import_material80.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -9518,9 +9312,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material80.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -9532,7 +9326,7 @@ var import_react_dates = require("react-dates");
 var import_mui56 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -9628,15 +9422,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles50();
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react49 = require("react");
-var import_material82 = require("@mui/material");
+var import_react46 = require("react");
+var import_material81 = require("@mui/material");
 var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -9656,9 +9450,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles51();
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material82.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material82.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material81.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material81.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -9667,7 +9461,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -9676,31 +9470,31 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material82.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material82.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = (0, import_react49.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react46.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material83 = require("@mui/material");
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_material82 = require("@mui/material");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-  import_material83.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+  import_material82.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
-      import_material83.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+      import_material82.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -9726,9 +9520,9 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material84 = require("@mui/material");
+var import_material83 = require("@mui/material");
 var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -9758,20 +9552,20 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles52();
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-    import_material84.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    import_material83.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material84.Backdrop,
+      BackdropComponent: import_material83.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material84.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material84.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material84.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material84.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
-            import_material84.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material83.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material83.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material83.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material83.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+            import_material83.Box,
             {
               sx: {
                 fontWeight: 600
@@ -9779,23 +9573,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
-            import_material84.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+            import_material83.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material84.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material84.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material83.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material83.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(import_material84.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_material84.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material83.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material83.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -9808,7 +9602,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -9817,7 +9611,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -9825,30 +9619,30 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-var import_react50 = require("react");
-var import_material85 = require("@mui/material");
-var import_jsx_runtime143 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-    import_material85.Avatar,
+var import_react47 = require("react");
+var import_material84 = require("@mui/material");
+var import_jsx_runtime141 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+    import_material84.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material85.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material85.Typography, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material84.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_material84.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = (0, import_react50.memo)(UserBust);
+var UserBust_default = (0, import_react47.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
     "svg",
     {
       width: "20",
@@ -9857,7 +9651,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
         "path",
         {
           d: "M2.49967 11.6667L2.91634 11.725L6.72467 7.91667C6.57467 7.375 6.71634 6.75833 7.15801 6.325C7.80801 5.66667 8.85801 5.66667 9.50801 6.325C9.94967 6.75833 10.0913 7.375 9.94134 7.91667L12.083 10.0583L12.4997 10C12.6497 10 12.7913 10 12.9163 10.0583L15.8913 7.08333C15.833 6.95833 15.833 6.81667 15.833 6.66667C15.833 6.22464 16.0086 5.80072 16.3212 5.48816C16.6337 5.17559 17.0576 5 17.4997 5C17.9417 5 18.3656 5.17559 18.6782 5.48816C18.9907 5.80072 19.1663 6.22464 19.1663 6.66667C19.1663 7.10869 18.9907 7.53262 18.6782 7.84518C18.3656 8.15774 17.9417 8.33333 17.4997 8.33333C17.3497 8.33333 17.208 8.33333 17.083 8.275L14.108 11.25C14.1663 11.375 14.1663 11.5167 14.1663 11.6667C14.1663 12.1087 13.9907 12.5326 13.6782 12.8452C13.3656 13.1577 12.9417 13.3333 12.4997 13.3333C12.0576 13.3333 11.6337 13.1577 11.3212 12.8452C11.0086 12.5326 10.833 12.1087 10.833 11.6667L10.8913 11.25L8.74967 9.10833C8.48301 9.16667 8.18301 9.16667 7.91634 9.10833L4.10801 12.9167L4.16634 13.3333C4.16634 13.7754 3.99075 14.1993 3.67819 14.5118C3.36563 14.8244 2.9417 15 2.49967 15C2.05765 15 1.63372 14.8244 1.32116 14.5118C1.0086 14.1993 0.833008 13.7754 0.833008 13.3333C0.833008 12.8913 1.0086 12.4674 1.32116 12.1548C1.63372 11.8423 2.05765 11.6667 2.49967 11.6667Z",
@@ -9936,7 +9730,6 @@ var IconChart_default = SvgIconChart;
   SearchWithFilters,
   SearchWithFiltersForTable,
   SectionName,
-  SmartMultipleSelect,
   SmartSelect,
   SmartTableHeader,
   SmartTableHeaderFilterMenu,