@natoora-libs/core 0.2.4 → 0.2.5-dev-prod-list-bulk-changes-1

package/dist/components/index.cjs

@@ -383,6 +383,7 @@ __export(components_exports, {
   SearchWithFilters: () => SearchWithFilters_default,
   SearchWithFiltersForTable: () => SearchWithFiltersForTable_default,
   SectionName: () => SectionName_default,
+  SmartMultipleSelect: () => SmartMultipleSelect,
   SmartSelect: () => SmartSelect_default,
   SmartTableHeader: () => SmartTableHeader,
   SmartTableHeaderFilterMenu: () => SmartTableHeaderFilterMenu,
@@ -1288,7 +1289,7 @@ var AutocompleteFilterMenuContent = ({
   onFilterOptionChange,
   onApplyFiltersClick,
   shouldShowCheckOnFilter,
-  onAutocompleteFilterChange,
+  onAutocompleteSearch,
   filterOptions
 }) => {
   const renderLoading = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material10.Skeleton, { variant: "rounded", height: 26, sx: { m: 1 } });
@@ -1321,7 +1322,7 @@ var AutocompleteFilterMenuContent = ({
         minCharacters: 3,
         sx: { backgroundColor: colors.neutral200 },
         onSearch: (value) => {
-          onAutocompleteFilterChange?.(value);
+          onAutocompleteSearch?.(value);
         }
       }
     ),
@@ -3729,7 +3730,7 @@ var CheckboxFilterMenuContent = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material23.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_material23.Divider, { sx: { mt: 0.5 } }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
       import_material23.Box,
       {
@@ -7302,18 +7303,124 @@ var SectionName = ({
 };
 var SectionName_default = SectionName;
 
-// src/components/SmartSelect/SmartSelect.tsx
+// src/components/SmartMultipleSelect/SmartMultipleSelect.tsx
 var import_react34 = require("react");
 var import_material62 = require("@mui/material");
-var import_mui49 = require("tss-react/mui");
 var import_jsx_runtime115 = require("react/jsx-runtime");
+var SmartMultipleSelect = ({
+  inputLabel,
+  variant = "standard",
+  size,
+  error,
+  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,
+      size,
+      disabled,
+      error,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.InputLabel, { children: inputLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+          import_material62.Select,
+          {
+            multiple: true,
+            label: inputLabel,
+            error,
+            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 useStyles44 = (0, import_mui49.makeStyles)()(() => ({
   container: {
     display: "flex",
     flexDirection: "column"
   }
 }));
-var SmartSelect = (0, import_react34.forwardRef)(
+var SmartSelect = (0, import_react35.forwardRef)(
   ({
     value,
     defaultOption,
@@ -7333,9 +7440,9 @@ var SmartSelect = (0, import_react34.forwardRef)(
     menuProps
   }, ref) => {
     const { classes } = useStyles44();
-    const [open, setOpen] = (0, import_react34.useState)(false);
-    const [localOptions, setLocalOptions] = (0, import_react34.useState)(options || []);
-    (0, import_react34.useEffect)(() => {
+    const [open, setOpen] = (0, import_react35.useState)(false);
+    const [localOptions, setLocalOptions] = (0, import_react35.useState)(options || []);
+    (0, import_react35.useEffect)(() => {
       if (options) {
         setLocalOptions(options);
       }
@@ -7374,8 +7481,8 @@ var SmartSelect = (0, import_react34.forwardRef)(
         onChange(selectedOption);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-      import_material62.FormControl,
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+      import_material63.FormControl,
       {
         fullWidth: true,
         size,
@@ -7385,16 +7492,16 @@ var SmartSelect = (0, import_react34.forwardRef)(
         "data-testid": dataTestId,
         disabled,
         children: [
-          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-            import_material62.InputLabel,
+          inputLabel && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            import_material63.InputLabel,
             {
               id: "smart-select-label",
               "data-testid": `${dataTestId}-label`,
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-            import_material62.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+            import_material63.Select,
             {
               ref,
               size,
@@ -7411,26 +7518,26 @@ var SmartSelect = (0, import_react34.forwardRef)(
               MenuProps: menuProps,
               label: inputLabel,
               children: [
-                isFetching && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-                  import_material62.MenuItem,
+                isFetching && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  import_material63.MenuItem,
                   {
                     disabled: true,
                     "data-testid": `${dataTestId}-loading`,
                     id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.CircularProgress, { size: 24 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.CircularProgress, { size: 24 })
                   }
                 ),
-                (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,
+                (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,
                   {
                     value: defaultOption?.value,
                     "data-testid": `${dataTestId}-default-option`,
                     children: defaultOption?.label
                   }
                 ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-                  import_material62.MenuItem,
+                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  import_material63.MenuItem,
                   {
                     value: option?.value,
                     "data-testid": `${dataTestId}-option-${option?.value}`,
@@ -7442,7 +7549,7 @@ var SmartSelect = (0, import_react34.forwardRef)(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.FormHelperText, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
         ]
       }
     );
@@ -7451,15 +7558,15 @@ var SmartSelect = (0, import_react34.forwardRef)(
 var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
-var import_react35 = require("react");
-var import_material63 = require("@mui/material");
-var import_colors51 = require("@mui/material/colors");
+var import_react36 = require("react");
+var import_material64 = require("@mui/material");
+var import_colors52 = require("@mui/material/colors");
 var import_mui50 = require("tss-react/mui");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
   red: {
-    backgroundColor: import_colors51.red["50"],
-    color: import_colors51.red["500"],
+    backgroundColor: import_colors52.red["50"],
+    color: import_colors52.red["500"],
     padding: theme.spacing(1.5),
     borderRadius: "5px",
     marginTop: theme.spacing(1),
@@ -7470,15 +7577,15 @@ var useStyles45 = (0, import_mui50.makeStyles)()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles45();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.Typography, { className: classes[color], children: copy });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { className: classes[color], children: copy });
 };
-var SquareLabel_default = (0, import_react35.memo)(SquareLabel);
+var SquareLabel_default = (0, import_react36.memo)(SquareLabel);
 
 // src/components/Switch/Switch.tsx
-var import_react36 = require("react");
-var import_material64 = require("@mui/material");
+var import_react37 = require("react");
+var import_material65 = require("@mui/material");
 var import_mui51 = require("tss-react/mui");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var LSwitch = ({
   checked,
   labelOn,
@@ -7486,8 +7593,8 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-  import_material64.Grid,
+}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: classes.c_switch, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+  import_material65.Grid,
   {
     component: "label",
     container: true,
@@ -7496,9 +7603,9 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      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,
+      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,
         {
           checked,
           color: "primary",
@@ -7506,7 +7613,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Grid, { children: labelOn })
+      labelOn && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Grid, { children: labelOn })
     ]
   }
 ) });
@@ -7528,13 +7635,13 @@ var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
     fontSize: "1rem"
   }
 }));
-var Switch_default = (0, import_react36.memo)(LabelledSwitch);
+var Switch_default = (0, import_react37.memo)(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_react37 = require("react");
-var import_material65 = require("@mui/material");
+var import_react38 = require("react");
+var import_material66 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var MAX_WIDTH = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
@@ -7545,138 +7652,138 @@ var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   }
   return false;
 });
-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);
-      }
-    }, [headCell.filterOptions]);
-    const numFilterOptions = (0, import_react37.useMemo)(
-      () => filterOptionsData?.length ?? 0,
-      [filterOptionsData?.length]
-    );
-    const handleFilterMenuOpen = (event) => {
-      if (!numFilterOptions && !headCell.isAutocompleteFilterMenu) {
-        headCell.refetchFilterOptions?.();
+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
+        ];
       }
-      setAnchorEl(event.currentTarget);
-    };
-    const handleFilterMenuClose = () => {
-      setSelectedFilterOptions(headerFilters[headCell.id]);
-      setAnchorEl(null);
+    } else {
+      newSelected = selectedFilterOptions.filter(
+        (_, index) => index !== selectedIndex
+      );
+    }
+    setSelectedFilterOptions(newSelected);
+  };
+  const handleApplyFiltersClick = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilterOptions]
     };
-    const handleSelectAllChange = (checked) => {
-      if (checked) {
-        setSelectedFilterOptions([
-          ...filterOptionsData ?? []
-        ]);
-        return;
+    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
+        })
       }
-      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
-        );
+    ),
+    /* @__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(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_react38 = require("react");
-var import_material66 = require("@mui/material");
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var SmartTableHeader = (0, import_react38.memo)(
+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)(
   ({
     order,
     orderBy,
@@ -7694,19 +7801,26 @@ var SmartTableHeader = (0, import_react38.memo)(
       onRequestSort(event, property);
     };
     const isSortActive = (headCellId) => orderBy === headCellId;
-    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,
+    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,
         {
-          color: "primary",
-          disableRipple: true,
-          indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
-          checked: numRows > 0 && numSelectedRows === numRows,
-          onChange: onSelectAllClick
+          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
+            }
+          )
         }
-      ) }) : null,
-      headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-        import_material66.TableCell,
+      ) : null,
+      headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+        import_material67.TableCell,
         {
           align: "left",
           width: headCell.width ?? "auto",
@@ -7729,31 +7843,23 @@ var SmartTableHeader = (0, import_react38.memo)(
               }
             }
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-            import_material66.Box,
+          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+            import_material67.Box,
             {
               display: "flex",
               flexDirection: "row",
               gap: headCell.disableSort ? 1 : 0,
               children: [
-                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,
+                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,
                   {
                     "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_runtime119.jsx)(
+                      headCell.renderHeader ?? headCell.label,
+                      orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                         "span",
                         {
                           style: {
@@ -7773,7 +7879,7 @@ var SmartTableHeader = (0, import_react38.memo)(
                     ]
                   }
                 ) }),
-                headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                headCell.filterType ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
                   SmartTableHeaderFilterMenu,
                   {
                     headCell,
@@ -7794,20 +7900,20 @@ var SmartTableHeader = (0, import_react38.memo)(
 );
 
 // src/components/Table/Table.tsx
-var import_react39 = require("react");
-var import_material68 = require("@mui/material");
+var import_react40 = require("react");
+var import_material69 = 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_material67 = require("@mui/material");
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_material68 = require("@mui/material");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__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,
+}) => /* @__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,
   {
     animation: "pulse",
     "data-testid": "table-loading-skeleton",
@@ -7855,7 +7961,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -7890,11 +7996,11 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = (0, import_react39.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react39.useState)(
+  const [order, setOrder] = (0, import_react40.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react40.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = (0, import_react39.useState)(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = (0, import_react40.useState)(defaultRowsPerPage);
   const { classes } = useStyles46();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
@@ -7907,7 +8013,7 @@ var Table = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -7933,25 +8039,25 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RenderItem, { ...row }, 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);
+      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);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__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)())
+        /* @__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)())
       );
     }
     return rowsComponents;
   };
-  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,
+  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,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-          import_material68.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+          import_material69.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7962,29 +8068,29 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_material69.TableBody, { children: [
       getTableRows(),
-      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" }) })
+      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" }) })
     ] })
   ] }) }) }) });
 };
 var Table_default = Table;
 
 // src/components/TableDesktop/TableDesktop.tsx
-var import_react40 = require("react");
-var import_material73 = require("@mui/material");
+var import_react41 = require("react");
+var import_material74 = require("@mui/material");
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
-var import_material69 = require("@mui/material");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_material70 = require("@mui/material");
+var import_jsx_runtime123 = 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_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,
+  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,
     {
       animation: "pulse",
       variant: "rounded",
@@ -8002,11 +8108,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_material70 = require("@mui/material");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_material71 = require("@mui/material");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
-    import_material70.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    import_material71.Button,
     {
       sx: {
         display: "flex",
@@ -8026,10 +8132,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__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)(
+}) => /* @__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)(
   import_TableCell.default,
   {
     sx: {
@@ -8042,9 +8148,9 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__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)(
+      /* @__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)(
         import_Typography.default,
         {
           variant: "subtitle1",
@@ -8057,18 +8163,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -8077,7 +8183,7 @@ var TableDesktopNoColumnsMessage = ({
 ) }) });
 
 // src/components/TableDesktopRows/TableDesktopRows.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var descendingComparator2 = (a, b, orderBy) => {
   const objA = a[orderBy];
   const objB = b[orderBy];
@@ -8109,7 +8215,7 @@ var TableDesktopRows = ({
   data,
   RenderItem,
   visibleHeadCells,
-  keyField,
+  getRowId,
   order,
   orderBy,
   disableInternalSort,
@@ -8122,8 +8228,9 @@ 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_runtime125.jsx)(
+    const rowId = getRowId(row);
+    const isItemSelected = selectedRows.has(rowId);
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       RenderItem,
       {
         ...{
@@ -8134,19 +8241,19 @@ var TableDesktopRows = ({
           enableEditMode,
           enableCheckboxSelection,
           rowHeight,
-          rowId: row[keyField],
+          rowId,
           onRowCheckboxChange,
           visibleHeadCells
         }
       },
-      row[keyField] ?? index
+      rowId ?? index
     );
   });
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-var import_material71 = require("@mui/material");
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_material72 = require("@mui/material");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
   isRowsFromAllPagesSelected,
@@ -8165,8 +8272,8 @@ var TableDesktopRowSelectionBar = ({
     }
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
-  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
-    import_material71.Box,
+  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+    import_material72.Box,
     {
       sx: {
         p: 1,
@@ -8178,22 +8285,22 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       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: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Button, { onClick: onSelectRowsFromAllPagesClick, children: [
           "Select all ",
           totalRowCount,
           " rows from all pages based on your filters"
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
 };
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material72 = require("@mui/material");
+var import_material73 = require("@mui/material");
 var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -8205,17 +8312,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles47();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
-    import_material72.TableCell,
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    import_material73.TableCell,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__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)(
+        /* @__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)(
           FilledButton_default,
           {
             copy: "Search",
@@ -8226,8 +8333,8 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-    import_material72.TableCell,
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_material73.TableCell,
     {
       className: classes.tableCellDefault,
       colSpan,
@@ -8239,7 +8346,13 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var resolveKeyValue = (keyField, rowData) => {
+  if (typeof keyField === "string") {
+    return rowData[keyField];
+  }
+  return keyField?.(rowData);
+};
 var TableDesktop = ({
   data = [],
   headCells,
@@ -8266,24 +8379,24 @@ var TableDesktop = ({
   shouldShowCheckOnFilter,
   refetchData
 }) => {
-  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)(
+  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)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = (0, import_react40.useState)(
-    /* @__PURE__ */ new Set()
-  );
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react40.useState)(false);
-  const [isBulkChangesMode, setIsBulkChangesMode] = (0, import_react40.useState)(false);
+  const [selectedRows, setSelectedRows] = (0, import_react41.useState)(/* @__PURE__ */ new Set());
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react41.useState)(false);
+  const [isBulkChangesMode, setIsBulkChangesMode] = (0, import_react41.useState)(false);
   const numRows = data.length;
-  const numSelectedRows = (0, import_react40.useMemo)(() => {
-    const currentPageIds = new Set(data.map((row) => row[keyField]));
+  const numSelectedRows = (0, import_react41.useMemo)(() => {
+    const currentPageIds = new Set(
+      data.map((row) => resolveKeyValue(keyField, row))
+    );
     return [...selectedRows].filter((id) => currentPageIds.has(id)).length;
   }, [data, selectedRows, keyField]);
   const isEveryRowInPageSelected = numRows > 0 && numSelectedRows === numRows;
-  const visibleHeadCells = (0, import_react40.useMemo)(
+  const visibleHeadCells = (0, import_react41.useMemo)(
     () => headCells.filter((headCell) => headCell?.enabled ?? true),
     [headCells]
   );
@@ -8300,7 +8413,9 @@ var TableDesktop = ({
     }
   };
   const selectAllRowsInPage = () => {
-    const allRowsIds = new Set(data.map((obj) => obj[keyField]));
+    const allRowsIds = new Set(
+      data.map((row) => resolveKeyValue(keyField, row))
+    );
     setSelectedRows(allRowsIds);
   };
   const resetSelectedRows = () => {
@@ -8346,7 +8461,7 @@ var TableDesktop = ({
       resetSelectedRows();
     }
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (isRowsFromAllPagesSelected) {
       selectAllRowsInPage();
       selectAllRowsInPage();
@@ -8354,7 +8469,7 @@ var TableDesktop = ({
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         TableDesktopLoadingState,
         {
           numRows: Math.min(rowsPerPage, 10),
@@ -8364,7 +8479,7 @@ var TableDesktop = ({
       );
     }
     if (numRows === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         TableEmptyResult_default,
         {
           showClearFilterButton,
@@ -8373,13 +8488,13 @@ var TableDesktop = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       TableDesktopRows,
       {
         data,
         RenderItem,
         visibleHeadCells,
-        keyField,
+        getRowId: (rowData) => resolveKeyValue(keyField, rowData),
         order,
         orderBy,
         disableInternalSort,
@@ -8392,8 +8507,8 @@ var TableDesktop = ({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-    import_material73.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    import_material74.Box,
     {
       sx: {
         height,
@@ -8401,8 +8516,8 @@ var TableDesktop = ({
         justifyContent: "space-between",
         justifyItems: "stretch"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-        import_material73.Paper,
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+        import_material74.Paper,
         {
           sx: {
             width: "100%",
@@ -8426,7 +8541,7 @@ var TableDesktop = ({
               isBulkChangesMode,
               onChangeBulkChangesMode: handleChangeBulkChangesMode
             }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
@@ -8437,8 +8552,8 @@ var TableDesktop = ({
                 onClearSelectionClick: handleClearSelectionClick
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
-              import_material73.TableContainer,
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              import_material74.TableContainer,
               {
                 sx: {
                   flexGrow: 1,
@@ -8459,13 +8574,13 @@ var TableDesktop = ({
                     backgroundColor: (theme) => theme.palette.grey[500]
                   }
                 },
-                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)(
+                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)(
                   TableDesktopNoColumnsMessage,
                   {
                     onClickNoColumnsMessageOpenMenu: handleClickToolbarMenuOpen
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_jsx_runtime128.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
                     SmartTableHeader,
                     {
                       order,
@@ -8481,7 +8596,7 @@ var TableDesktop = ({
                       shouldShowCheckOnFilter
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.TableBody, { children: renderBody() })
+                  /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material74.TableBody, { children: renderBody() })
                 ] }) })
               }
             ),
@@ -8498,99 +8613,142 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-var import_material75 = require("@mui/material");
+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/TableDesktopSmartSelect.tsx
-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/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 ?? "");
+        const optionsLabels = values.map((option) => option.label ?? "");
+        onUpdateEditableCell?.({
+          rowId,
+          columnId,
+          value: optionsValues,
+          label: optionsLabels
+        });
       }
-    );
-  }
-);
+    }
+  );
+};
+
+// 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 ?? ""
+        });
+      }
+    }
+  );
+};
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-var import_react42 = require("react");
-var import_material74 = require("@mui/material");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_material75 = require("@mui/material");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
   initialValue,
   inputLabel,
   disabled,
-  field,
+  columnId,
   type,
   variant = "standard",
   size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = (0, import_react42.useState)(initialValue);
-  const oldValue = (0, import_react42.useRef)(initialValue);
-  const isDirty = (0, import_react42.useMemo)(
+  const [input, setInput] = (0, import_react44.useState)(initialValue);
+  const oldValue = (0, import_react44.useRef)(initialValue);
+  const isDirty = (0, import_react44.useMemo)(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
-  const hasValidationError = (0, import_react42.useMemo)(
-    () => isDirty && !validateInput?.(input),
+  const hasValidationError = (0, import_react44.useMemo)(
+    () => isDirty && validateInput && !validateInput(input),
     [input, validateInput]
   );
   const commitValue = (value) => {
@@ -8599,7 +8757,7 @@ var TableDesktopTextField = ({
       return;
     }
     oldValue.current = value;
-    onUpdateEditableCell(rowId ?? 0, field, value, value);
+    onUpdateEditableCell({ rowId, columnId, value, label: value });
   };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
@@ -8607,8 +8765,8 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-    import_material74.TextField,
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    import_material75.TextField,
     {
       fullWidth: true,
       variant,
@@ -8630,6 +8788,9 @@ var TableDesktopTextField = ({
       slotProps: {
         input: {
           inputMode: type === "numeric" ? "numeric" : void 0
+        },
+        htmlInput: {
+          maxLength: 1e3
         }
       }
     }
@@ -8637,63 +8798,98 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var TableDesktopEditableField = ({
   editInitialValue,
   rowId,
-  field,
-  fieldName,
   disabled,
-  inputLabel,
   showCheckboxLabel = false,
   variant = "standard",
   size,
-  editableCellType,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  validateInput,
-  onUpdateEditableCell
+  onUpdateEditableCell,
+  headCell: {
+    id: columnId,
+    fieldName = "",
+    label: inputLabel = "",
+    editableCellType,
+    filterOptions,
+    refetchFilterOptions,
+    isFetchingFilterOptions,
+    validateInput,
+    allowBlankSelectOption
+  }
 }) => {
+  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_runtime131.jsx)(
+    select: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       TableDesktopSmartSelect,
       {
         rowId,
-        field,
+        columnId,
+        fieldName,
+        disabled,
+        variant,
+        size,
+        allowBlankOption: allowBlankSelectOption,
+        initialValue: editInitialValue,
+        inputLabel,
+        filterOptions: parsedFilterOptions,
+        refetchFilterOptions,
+        isFetchingFilterOptions,
+        onUpdateEditableCell
+      }
+    ),
+    multipleSelect: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      TableDesktopSmartMultipleSelect,
+      {
+        rowId,
+        columnId,
         fieldName,
         disabled,
         variant,
         size,
         initialValue: editInitialValue,
         inputLabel,
-        filterOptions,
+        filterOptions: parsedFilterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    checkbox: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      import_material75.FormControlLabel,
+    checkbox: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      import_material76.FormControlLabel,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-          import_material75.Checkbox,
+        control: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          import_material76.Checkbox,
           {
             disableRipple: true,
             disabled,
             defaultChecked: editInitialValue,
             onChange: ({ target: { checked } }) => {
-              if (!onUpdateEditableCell) {
-                return;
-              }
-              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
+              onUpdateEditableCell?.({
+                rowId,
+                columnId,
+                value: checked,
+                label: checked
+              });
             }
           }
         )
       }
     ),
-    text: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    text: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       TableDesktopTextField,
       {
         type: "text",
@@ -8701,14 +8897,14 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        field,
+        columnId,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    numeric: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -8716,21 +8912,80 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        field,
+        columnId,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
+    ),
+    date: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      import_x_date_pickers.DatePicker,
+      {
+        defaultValue: editInitialValue ? (0, import_moment3.default)(editInitialValue, "HH:mm:ss") : void 0,
+        label: inputLabel,
+        format: "DD/MM/YYYY",
+        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,
+            size,
+            error: false
+          }
+        }
+      }
+    ),
+    time: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      import_x_date_pickers.TimePicker,
+      {
+        defaultValue: editInitialValue ? (0, import_moment3.default)(editInitialValue, "HH:mm:ss") : void 0,
+        label: inputLabel,
+        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,
+            size,
+            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_material76 = require("@mui/material");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_material77 = require("@mui/material");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -8741,8 +8996,8 @@ var TableDesktopFooter = ({
   refetchData,
   isFetching
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
-    import_material76.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+    import_material77.Box,
     {
       sx: {
         py: 1,
@@ -8753,8 +9008,8 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
-          import_material76.Button,
+        refetchData ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+          import_material77.Button,
           {
             disableRipple: true,
             variant: "outlined",
@@ -8768,7 +9023,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                 import_Refresh.default,
                 {
                   fontSize: "small",
@@ -8779,22 +9034,22 @@ var TableDesktopFooter = ({
             ]
           }
         ) : null,
-        /* @__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,
+        /* @__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,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_material76.MenuItem, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material77.MenuItem, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
-            import_material76.Pagination,
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            import_material77.Pagination,
             {
               color: "standard",
               count: numPages,
@@ -8809,15 +9064,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-var import_react43 = require("react");
+var import_react46 = 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_material77 = require("@mui/material");
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_material78 = require("@mui/material");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_Check3.default, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_Check3.default, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -8831,36 +9086,28 @@ var getCellBackgroundColor = (isCellInEditMode) => ({
   background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100
 });
 var TableDesktopCell = ({
-  inputLabel,
   editInitialValue,
   rowId,
-  field,
-  fieldName,
-  width,
-  enableEditMode,
   disabled,
+  enableEditMode,
   readOnlyValue,
-  editableCellType,
-  filterOptions,
-  refetchFilterOptions,
-  isFetchingFilterOptions,
-  validateInput,
-  onUpdateEditableCell,
-  onCellClick
+  onCellClick,
+  headCell
 }) => {
-  const [isCellHovered, setIsCellHovered] = (0, import_react43.useState)(false);
-  const [isCellInEditMode, setIsCellInEditMode] = (0, import_react43.useState)(false);
-  (0, import_react43.useEffect)(() => {
+  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 handleKeyDown = (e) => {
       if (e.key === "Escape") {
         setIsCellInEditMode(false);
       }
     };
     if (isCellInEditMode) {
-      window.addEventListener("keydown", handleKeyDown);
+      globalThis.addEventListener("keydown", handleKeyDown);
     }
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
+      globalThis.removeEventListener("keydown", handleKeyDown);
     };
   }, [isCellInEditMode]);
   const handleEditClick = (e) => {
@@ -8868,8 +9115,8 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
-    import_material77.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    import_material78.TableCell,
     {
       align: "left",
       onMouseEnter: () => isCellEditable && setIsCellHovered(true),
@@ -8880,13 +9127,12 @@ 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_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,
+      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,
           {
             onClick: handleEditClick,
             sx: {
@@ -8900,24 +9146,17 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            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" })
+            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" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           TableDesktopEditableField,
           {
             editInitialValue,
             rowId,
-            field,
-            fieldName,
             disabled,
-            inputLabel: inputLabel ?? "",
-            editableCellType,
-            filterOptions,
-            refetchFilterOptions,
-            isFetchingFilterOptions,
-            validateInput,
-            onUpdateEditableCell
+            headCell,
+            onUpdateEditableCell: headCell.onUpdateEditableCell
           }
         ) : renderReadOnlyValue(readOnlyValue)
       ] }) })
@@ -8926,12 +9165,12 @@ var TableDesktopCell = ({
 };
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
-var import_react44 = require("react");
+var import_react47 = 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_material78 = require("@mui/material");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_material79 = require("@mui/material");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -8953,12 +9192,12 @@ var TableDesktopToolbar = ({
   renderTableColumnConfigurationMenu,
   renderInfoIcons
 }) => {
-  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)(
+  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)(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
     ),
@@ -8975,13 +9214,17 @@ var TableDesktopToolbar = ({
       refetchData?.();
     }
   };
-  const handleUpdateEditableCell = (_rowId, field, value, label) => {
+  const handleUpdateEditableCell = ({
+    columnId,
+    value,
+    label
+  }) => {
     setBulkChanges((prev) => {
-      return [...prev, { field, value, label }];
+      return [...prev, { field: columnId, value, label }];
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-    import_material78.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+    import_material79.Box,
     {
       sx: {
         borderBottom: "1px solid",
@@ -8989,8 +9232,8 @@ var TableDesktopToolbar = ({
         maxWidth: "100%"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-          import_material78.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+          import_material79.Box,
           {
             sx: {
               py: 1,
@@ -9001,8 +9244,8 @@ var TableDesktopToolbar = ({
               background: isBulkChangesMode ? colors.neutral150 : void 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-                import_material78.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+                import_material79.Box,
                 {
                   sx: {
                     py: 1,
@@ -9012,21 +9255,21 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    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 } })
+                    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 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                      import_material78.Tooltip,
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                      import_material79.Tooltip,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                          import_material78.FormControlLabel,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                          import_material79.FormControlLabel,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                              import_material78.Switch,
+                            control: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                              import_material79.Switch,
                               {
                                 size: "small",
                                 "aria-label": "bulk-changes-mode-switch",
@@ -9040,17 +9283,17 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                import_material78.IconButton,
+              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                import_material79.IconButton,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_KeyboardArrowLeft2.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_KeyboardArrowLeft2.default, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                import_material78.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                import_material79.Box,
                 {
                   ref: scrollRef,
                   sx: {
@@ -9066,56 +9309,40 @@ var TableDesktopToolbar = ({
                       display: "none"
                     }
                   },
-                  children: isBulkChangesMode ? visibleEditableColumns.map(
-                    ({
-                      id,
-                      fieldName,
-                      label,
-                      editableCellType,
-                      filterOptions,
-                      refetchFilterOptions,
-                      isFetchingFilterOptions,
-                      validateInput,
-                      width
-                    }) => editableCellType && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                      import_material78.Box,
+                  children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
+                    const { id, width, editableCellType } = headCell;
+                    return editableCellType && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                      import_material79.Box,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
                           TableDesktopEditableField,
                           {
-                            field: id,
+                            headCell,
                             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_runtime134.jsx)(
-                import_material78.IconButton,
+              isScrollable && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                import_material79.IconButton,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_KeyboardArrowRight2.default, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_KeyboardArrowRight2.default, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                  import_material78.Button,
+              isBulkChangesMode ? /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                  import_material79.Button,
                   {
                     variant: "outlined",
                     sx: { borderRadius: 25, alignSelf: "center" },
@@ -9127,8 +9354,8 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                  import_material78.Button,
+                /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                  import_material79.Button,
                   {
                     variant: "contained",
                     "aria-label": "bulk-changes-apply-button",
@@ -9138,26 +9365,26 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material78.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material79.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                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,
+                renderExportCsvDialog ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Download List", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                  import_material79.IconButton,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_Download.default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_Download.default, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material78.Tooltip, { title: "Table Column Configuration", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
-                  import_material78.IconButton,
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material79.Tooltip, { title: "Table Column Configuration", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                  import_material79.IconButton,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -9190,11 +9417,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react45 = require("react");
+var import_react48 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material79 = require("@mui/material");
+var import_material80 = require("@mui/material");
 var import_mui54 = require("tss-react/mui");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -9203,9 +9430,9 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react45.useState)([]);
+  const [sortableCells, setSortableCells] = (0, import_react48.useState)([]);
   const { classes } = useStyles48();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -9239,8 +9466,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  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,
+  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,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -9250,12 +9477,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react45.memo)(TableHeader);
+var TableHeader_default = (0, import_react48.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material80 = require("@mui/material");
+var import_material81 = require("@mui/material");
 var import_mui55 = require("tss-react/mui");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
   icon: {
     fontSize: 20
@@ -9292,19 +9519,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles49();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-    import_material80.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+    import_material81.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__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,
+        /* @__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,
             {
               color: "textSecondary",
               className: classes.title,
@@ -9312,9 +9539,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material80.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material81.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -9326,7 +9553,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_runtime137 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var useStyles50 = (0, import_mui56.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -9422,15 +9649,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles50();
-  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 }) });
+  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 }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react46 = require("react");
-var import_material81 = require("@mui/material");
+var import_react49 = require("react");
+var import_material82 = require("@mui/material");
 var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -9450,9 +9677,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles51();
-  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)(
+  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)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -9461,7 +9688,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -9470,31 +9697,31 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__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 })
+      /* @__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 })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = (0, import_react46.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react49.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material82 = require("@mui/material");
-var import_jsx_runtime139 = require("react/jsx-runtime");
+var import_material83 = require("@mui/material");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-  import_material82.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+  import_material83.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-      import_material82.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+      import_material83.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -9520,9 +9747,9 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material83 = require("@mui/material");
+var import_material84 = require("@mui/material");
 var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -9552,20 +9779,20 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles52();
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-    import_material83.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    import_material84.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material83.Backdrop,
+      BackdropComponent: import_material84.Backdrop,
       BackdropProps: { timeout: 500 },
-      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,
+      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,
             {
               sx: {
                 fontWeight: 600
@@ -9573,23 +9800,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-            import_material83.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+            import_material84.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                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 })
+                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 })
               ]
             }
           )
         ] }),
-        /* @__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)(
+        /* @__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)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -9602,7 +9829,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -9611,7 +9838,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -9619,30 +9846,30 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-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,
+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,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__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 })
+  /* @__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 })
   ] })
 ] });
-var UserBust_default = (0, import_react47.memo)(UserBust);
+var UserBust_default = (0, import_react50.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     "svg",
     {
       width: "20",
@@ -9651,7 +9878,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime144.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",
@@ -9730,6 +9957,7 @@ var IconChart_default = SvgIconChart;
   SearchWithFilters,
   SearchWithFiltersForTable,
   SectionName,
+  SmartMultipleSelect,
   SmartSelect,
   SmartTableHeader,
   SmartTableHeaderFilterMenu,