@natoora-libs/core 0.2.1-dev-doug-1 → 0.2.2-dev-doug-1

package/dist/components/index.js

@@ -6262,7 +6262,7 @@ import { makeStyles as makeStyles35 } from "tss-react/mui";
 
 // src/utils/useGetActiveSection.ts
 import { useEffect as useEffect6, useState as useState10 } from "react";
-var transformNameToID = (name) => name.replaceAll(" ", "-").toLocaleLowerCase();
+var transformNameToID = (name) => name.replaceAll(" ", "_").toLocaleLowerCase();
 
 // src/components/RenderContentList/RenderContentList.tsx
 import { jsx as jsx105, jsxs as jsxs69 } from "react/jsx-runtime";
@@ -6345,7 +6345,7 @@ var RenderContentList = ({
             },
             children: [
               /* @__PURE__ */ jsx105(ListItemText4, { primary: item }),
-              warningItems?.includes(item) && /* @__PURE__ */ jsx105(Tooltip7, { title: warningMessage, children: /* @__PURE__ */ jsx105(WarningAmber, { color: "warning" }) })
+              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ jsx105(Tooltip7, { title: warningMessage, children: /* @__PURE__ */ jsx105(WarningAmber, { color: "warning" }) })
             ]
           },
           id
@@ -7063,18 +7063,123 @@ var SectionName = ({
 };
 var SectionName_default = SectionName;
 
-// src/components/SmartSelect/SmartSelect.tsx
-import { forwardRef as forwardRef2, useState as useState15, useEffect as useEffect10 } from "react";
+// src/components/SmartMultipleSelect/SmartMultipleSelect.tsx
+import { useState as useState15 } from "react";
 import {
+  Box as Box35,
+  Checkbox as Checkbox6,
   CircularProgress as CircularProgress4,
   FormControl as FormControl4,
   FormHelperText as FormHelperText3,
   InputLabel as InputLabel4,
+  ListItemText as ListItemText5,
+  Select as Select3,
+  Typography as Typography28
+} from "@mui/material";
+import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
+var SmartMultipleSelect = ({
+  inputLabel,
+  variant = "standard",
+  size,
+  values,
+  defaultValues,
+  onChange,
+  onOpen,
+  onClose,
+  menuOptions,
+  isLoading,
+  disabled,
+  emptyMessage = "No options.",
+  helperText
+}) => {
+  const [localValues, setLocalValues] = useState15(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__ */ jsx114(
+    Box35,
+    {
+      sx: { display: "flex", justifyContent: "center", alignItems: "center" },
+      children: /* @__PURE__ */ jsx114(Typography28, { children: emptyMessage })
+    }
+  ) : /* @__PURE__ */ jsx114(Box35, { 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__ */ jsxs78(
+      Box35,
+      {
+        onClick: () => handleChangeOption(option),
+        sx: {
+          p: 0.5,
+          display: "flex",
+          cursor: "pointer",
+          backgroundColor: isSelected ? colors.lightBlueBackground : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsx114(Checkbox6, { disableRipple: true, sx: { py: 0.5 }, checked: isSelected }),
+          /* @__PURE__ */ jsx114(ListItemText5, { primary: option.label })
+        ]
+      },
+      option.value ?? index
+    );
+  }) });
+  return /* @__PURE__ */ jsxs78(FormControl4, { fullWidth: true, variant, children: [
+    /* @__PURE__ */ jsx114(InputLabel4, { children: inputLabel }),
+    /* @__PURE__ */ jsx114(
+      Select3,
+      {
+        multiple: true,
+        size,
+        disabled,
+        value: values ?? localValues,
+        defaultValue: defaultValues,
+        onOpen,
+        onClose: () => onClose?.(localValues),
+        renderValue: (selectedValues) => {
+          const valuesString = selectedValues.map((v) => v.label)?.join(", ");
+          return /* @__PURE__ */ jsx114(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
+        },
+        children: isLoading ? /* @__PURE__ */ jsx114(
+          Box35,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx114(CircularProgress4, { size: 24 })
+          }
+        ) : renderMenuContent()
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx114(FormHelperText3, { children: helperText })
+  ] });
+};
+
+// src/components/SmartSelect/SmartSelect.tsx
+import { forwardRef as forwardRef2, useState as useState16, useEffect as useEffect10 } from "react";
+import {
+  CircularProgress as CircularProgress5,
+  FormControl as FormControl5,
+  FormHelperText as FormHelperText4,
+  InputLabel as InputLabel5,
   MenuItem as MenuItem3,
-  Select as Select3
+  Select as Select4
 } from "@mui/material";
 import { makeStyles as makeStyles43 } from "tss-react/mui";
-import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs79 } from "react/jsx-runtime";
 var useStyles43 = makeStyles43()(() => ({
   container: {
     display: "flex",
@@ -7101,8 +7206,8 @@ var SmartSelect = forwardRef2(
     menuProps
   }, ref) => {
     const { classes } = useStyles43();
-    const [open, setOpen] = useState15(false);
-    const [localOptions, setLocalOptions] = useState15(options || []);
+    const [open, setOpen] = useState16(false);
+    const [localOptions, setLocalOptions] = useState16(options || []);
     useEffect10(() => {
       if (options) {
         setLocalOptions(options);
@@ -7142,8 +7247,8 @@ var SmartSelect = forwardRef2(
         onChange(selectedOption);
       }
     };
-    return /* @__PURE__ */ jsxs78(
-      FormControl4,
+    return /* @__PURE__ */ jsxs79(
+      FormControl5,
       {
         fullWidth: true,
         size,
@@ -7153,16 +7258,16 @@ var SmartSelect = forwardRef2(
         "data-testid": dataTestId,
         disabled,
         children: [
-          inputLabel && /* @__PURE__ */ jsx114(
-            InputLabel4,
+          inputLabel && /* @__PURE__ */ jsx115(
+            InputLabel5,
             {
               id: "smart-select-label",
               "data-testid": `${dataTestId}-label`,
               children: inputLabel
             }
           ),
-          /* @__PURE__ */ jsxs78(
-            Select3,
+          /* @__PURE__ */ jsxs79(
+            Select4,
             {
               ref,
               size,
@@ -7179,17 +7284,17 @@ var SmartSelect = forwardRef2(
               MenuProps: menuProps,
               label: inputLabel,
               children: [
-                isFetching && /* @__PURE__ */ jsx114(
+                isFetching && /* @__PURE__ */ jsx115(
                   MenuItem3,
                   {
                     disabled: true,
                     "data-testid": `${dataTestId}-loading`,
                     id: `${dataTestId}-loading`,
-                    children: /* @__PURE__ */ jsx114(CircularProgress4, { size: 24 })
+                    children: /* @__PURE__ */ jsx115(CircularProgress5, { size: 24 })
                   }
                 ),
-                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ jsx114(MenuItem3, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
-                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ jsx114(
+                (defaultOption === null || !defaultOptionLabelIsValid || !defaultOptionValueIsValid) && !isFetching && options?.length === 0 && /* @__PURE__ */ jsx115(MenuItem3, { disabled: true, "data-testid": `${dataTestId}-empty-message`, children: emptyMessage }),
+                localOptions.length === 0 && !isFetching && options?.length !== 0 && defaultOptionLabelIsValid && defaultOptionValueIsValid && /* @__PURE__ */ jsx115(
                   MenuItem3,
                   {
                     value: defaultOption?.value,
@@ -7197,7 +7302,7 @@ var SmartSelect = forwardRef2(
                     children: defaultOption?.label
                   }
                 ),
-                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ jsx114(
+                !isFetching && combinedOptions.length > 0 && combinedOptions.map((option) => /* @__PURE__ */ jsx115(
                   MenuItem3,
                   {
                     value: option?.value,
@@ -7210,7 +7315,7 @@ var SmartSelect = forwardRef2(
               ]
             }
           ),
-          helperText && /* @__PURE__ */ jsx114(FormHelperText3, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
+          helperText && /* @__PURE__ */ jsx115(FormHelperText4, { "data-testid": `${dataTestId}-helper-text`, children: helperText })
         ]
       }
     );
@@ -7220,10 +7325,10 @@ var SmartSelect_default = SmartSelect;
 
 // src/components/SquareLabel/SquareLabel.tsx
 import { memo as memo19 } from "react";
-import { Typography as Typography28 } from "@mui/material";
+import { Typography as Typography29 } from "@mui/material";
 import { red as red2 } from "@mui/material/colors";
 import { makeStyles as makeStyles44 } from "tss-react/mui";
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var useStyles44 = makeStyles44()((theme) => ({
   red: {
     backgroundColor: red2["50"],
@@ -7238,7 +7343,7 @@ var useStyles44 = makeStyles44()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles44();
-  return /* @__PURE__ */ jsx115(Typography28, { className: classes[color], children: copy });
+  return /* @__PURE__ */ jsx116(Typography29, { className: classes[color], children: copy });
 };
 var SquareLabel_default = memo19(SquareLabel);
 
@@ -7246,7 +7351,7 @@ var SquareLabel_default = memo19(SquareLabel);
 import { memo as memo20 } from "react";
 import { Grid as Grid2, Switch } from "@mui/material";
 import { withStyles as withStyles6 } from "tss-react/mui";
-import { jsx as jsx116, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs80 } from "react/jsx-runtime";
 var LSwitch = ({
   checked,
   labelOn,
@@ -7254,7 +7359,7 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ jsx116("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs79(
+}) => /* @__PURE__ */ jsx117("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs80(
   Grid2,
   {
     component: "label",
@@ -7264,8 +7369,8 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      labelOff && /* @__PURE__ */ jsx116(Grid2, { children: labelOff }),
-      /* @__PURE__ */ jsx116(Grid2, { children: /* @__PURE__ */ jsx116(
+      labelOff && /* @__PURE__ */ jsx117(Grid2, { children: labelOff }),
+      /* @__PURE__ */ jsx117(Grid2, { children: /* @__PURE__ */ jsx117(
         Switch,
         {
           checked,
@@ -7274,7 +7379,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ jsx116(Grid2, { children: labelOn })
+      labelOn && /* @__PURE__ */ jsx117(Grid2, { children: labelOn })
     ]
   }
 ) });
@@ -7299,10 +7404,10 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
 var Switch_default = memo20(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import { useState as useState16, useEffect as useEffect11 } from "react";
+import { useState as useState17, useEffect as useEffect11 } from "react";
 import { Menu as Menu4 } from "@mui/material";
 import classNames3 from "classnames";
-import { Fragment as Fragment13, jsx as jsx117, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx118, jsxs as jsxs81 } from "react/jsx-runtime";
 var MAX_WIDTH = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
@@ -7320,15 +7425,18 @@ var SmartTableHeaderFilterMenu = ({
   shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
-  const [anchorEl, setAnchorEl] = useState16(null);
-  const [filterOptionsData, setFilterOptionsData] = useState16();
-  const [selectedFilterOptions, setSelectedFilterOptions] = useState16(headerFilters[headCell.id] ?? []);
+  const [anchorEl, setAnchorEl] = useState17(null);
+  const [filterOptionsData, setFilterOptionsData] = useState17();
+  const [selectedFilterOptions, setSelectedFilterOptions] = useState17(headerFilters[headCell.id] ?? []);
   const numFilterOptions = filterOptionsData?.length ?? 0;
   useEffect11(() => {
     if (headCell.filterOptions) {
       setFilterOptionsData(headCell.filterOptions);
     } else if (headCell.filterType === "boolean") {
-      setFilterOptionsData([{ id: "true", label: "Yes" }, { id: "false", label: "No" }]);
+      setFilterOptionsData([
+        { id: "true", label: "Yes" },
+        { id: "false", label: "No" }
+      ]);
     }
   }, [headCell.filterOptions]);
   const handleFilterMenuOpen = (event) => {
@@ -7380,8 +7488,8 @@ var SmartTableHeaderFilterMenu = ({
   useEffect11(() => {
     setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  return /* @__PURE__ */ jsxs80(Fragment13, { children: [
-    /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsxs81(Fragment13, { children: [
+    /* @__PURE__ */ jsx118(
       ActiveFiltersIconButton,
       {
         numActiveFilters,
@@ -7391,7 +7499,7 @@ var SmartTableHeaderFilterMenu = ({
         })
       }
     ),
-    /* @__PURE__ */ jsx117(
+    /* @__PURE__ */ jsx118(
       Menu4,
       {
         open: !!anchorEl,
@@ -7405,7 +7513,7 @@ var SmartTableHeaderFilterMenu = ({
         },
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ jsx117(
+        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ jsx118(
           AutocompleteFilterMenuContent,
           {
             columnId: headCell.id,
@@ -7418,7 +7526,7 @@ var SmartTableHeaderFilterMenu = ({
             onApplyFiltersClick: handleApplyFiltersClick,
             shouldShowCheckOnFilter
           }
-        ) : /* @__PURE__ */ jsx117(
+        ) : /* @__PURE__ */ jsx118(
           CheckboxFilterMenuContent,
           {
             columnId: headCell.id,
@@ -7440,16 +7548,16 @@ var SmartTableHeaderFilterMenu = ({
 // src/components/SmartTableHeader/SmartTableHeader.tsx
 import { memo as memo21 } from "react";
 import {
-  Box as Box35,
-  Checkbox as Checkbox6,
+  Box as Box36,
+  Checkbox as Checkbox7,
   TableCell,
   TableHead,
   TableRow,
   TableSortLabel,
   Tooltip as Tooltip9,
-  Typography as Typography29
+  Typography as Typography30
 } from "@mui/material";
-import { jsx as jsx118, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs82 } from "react/jsx-runtime";
 var SmartTableHeader = memo21(
   ({
     order,
@@ -7468,18 +7576,25 @@ var SmartTableHeader = memo21(
       onRequestSort(event, property);
     };
     const isSortActive = (headCellId) => orderBy === headCellId;
-    return /* @__PURE__ */ jsx118(TableHead, { children: /* @__PURE__ */ jsxs81(TableRow, { children: [
-      enableCheckboxSelection ? /* @__PURE__ */ jsx118(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx118(
-        Checkbox6,
+    return /* @__PURE__ */ jsx119(TableHead, { children: /* @__PURE__ */ jsxs82(TableRow, { children: [
+      enableCheckboxSelection ? /* @__PURE__ */ jsx119(
+        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__ */ jsx119(
+            Checkbox7,
+            {
+              color: "primary",
+              disableRipple: true,
+              indeterminate: numSelectedRows > 0 && numSelectedRows < numRows,
+              checked: numRows > 0 && numSelectedRows === numRows,
+              onChange: onSelectAllClick
+            }
+          )
         }
-      ) }) : null,
-      headCells.map((headCell) => /* @__PURE__ */ jsx118(
+      ) : null,
+      headCells.map((headCell) => /* @__PURE__ */ jsx119(
         TableCell,
         {
           align: "left",
@@ -7503,22 +7618,14 @@ var SmartTableHeader = memo21(
               }
             }
           },
-          children: /* @__PURE__ */ jsxs81(
-            Box35,
+          children: /* @__PURE__ */ jsxs82(
+            Box36,
             {
               display: "flex",
               flexDirection: "row",
               gap: headCell.disableSort ? 1 : 0,
               children: [
-                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ jsx118(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx118(
-                  Typography29,
-                  {
-                    variant: "subtitle2",
-                    mt: 0.25,
-                    mb: -0.25,
-                    children: headCell.label
-                  }
-                ) }) : /* @__PURE__ */ jsx118(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs81(
+                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ jsx119(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx119(Typography30, { variant: "subtitle2", mt: 0.25, mb: -0.25, children: headCell.label }) }) : /* @__PURE__ */ jsx119(Tooltip9, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs82(
                   TableSortLabel,
                   {
                     "data-testid": "table-sort-label",
@@ -7527,7 +7634,7 @@ var SmartTableHeader = memo21(
                     onClick: createSortHandler(headCell.id),
                     children: [
                       headCell.renderHeader ?? headCell.label,
-                      orderBy === headCell.id ? /* @__PURE__ */ jsx118(
+                      orderBy === headCell.id ? /* @__PURE__ */ jsx119(
                         "span",
                         {
                           style: {
@@ -7547,7 +7654,7 @@ var SmartTableHeader = memo21(
                     ]
                   }
                 ) }),
-                headCell.filterType ? /* @__PURE__ */ jsx118(
+                headCell.filterType ? /* @__PURE__ */ jsx119(
                   SmartTableHeaderFilterMenu,
                   {
                     headCell,
@@ -7569,9 +7676,9 @@ var SmartTableHeader = memo21(
 
 // src/components/Table/Table.tsx
 var import_debounce = __toESM(require_debounce(), 1);
-import { useLayoutEffect, useState as useState17 } from "react";
+import { useLayoutEffect, useState as useState18 } from "react";
 import {
-  Box as Box37,
+  Box as Box38,
   Paper as Paper11,
   Table as MUITable,
   TableBody,
@@ -7585,12 +7692,12 @@ import { makeStyles as makeStyles45 } from "tss-react/mui";
 import { v4 as uuidv4 } from "uuid";
 
 // src/components/TableLoading/TableLoading.tsx
-import { Box as Box36, Skeleton as Skeleton4 } from "@mui/material";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { Box as Box37, Skeleton as Skeleton4 } from "@mui/material";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ jsx119(Box36, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx119(
+}) => /* @__PURE__ */ jsx120(Box37, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx120(
   Skeleton4,
   {
     animation: "pulse",
@@ -7639,7 +7746,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx120, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs83 } from "react/jsx-runtime";
 var useStyles45 = makeStyles45()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -7674,11 +7781,11 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState17(
+  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState18(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = useState17(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = useState18(defaultRowsPerPage);
   const { classes } = useStyles45();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
@@ -7717,24 +7824,24 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ jsx120(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ jsx121(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ jsx120(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx120(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ jsx121(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx121(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ jsx120(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx120(TableCell2, { colSpan: 8 }) }, uuidv4())
+        /* @__PURE__ */ jsx121(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx121(TableCell2, { colSpan: 8 }) }, uuidv4())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ jsx120(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx120(Box37, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx120(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx120(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs82(MUITable, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ jsx120(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx120(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx121(Box38, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx121(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx121(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs83(MUITable, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx121(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx121(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx121(
       TableCell2,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ jsx120(
+        children: /* @__PURE__ */ jsx121(
           TableSortLabel2,
           {
             active: orderBy === headCell.id,
@@ -7746,9 +7853,9 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ jsxs82(TableBody, { children: [
+    /* @__PURE__ */ jsxs83(TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ jsx120(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx120(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ jsx121(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx121(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
@@ -7757,22 +7864,22 @@ var Table_default = Table;
 // src/components/TableDesktop/TableDesktop.tsx
 import {
   useMemo as useMemo3,
-  useState as useState18,
+  useState as useState19,
   useEffect as useEffect12,
   useRef as useRef7
 } from "react";
-import { Paper as Paper12, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box39 } from "@mui/material";
+import { Paper as Paper12, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box40 } from "@mui/material";
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
 import { Skeleton as Skeleton5, TableCell as TableCell3, TableRow as TableRow3 } from "@mui/material";
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "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__ */ jsx121(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx121(TableCell3, { children: /* @__PURE__ */ jsx121(
+  return getRange(numRows).map((rowNum) => /* @__PURE__ */ jsx122(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx122(TableCell3, { children: /* @__PURE__ */ jsx122(
     Skeleton5,
     {
       animation: "pulse",
@@ -7788,13 +7895,13 @@ var TableDesktopLoadingState = ({
 import TableBody2 from "@mui/material/TableBody";
 import TableCell4 from "@mui/material/TableCell";
 import TableRow4 from "@mui/material/TableRow";
-import Typography30 from "@mui/material/Typography";
+import Typography31 from "@mui/material/Typography";
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
 import { Button as Button16 } from "@mui/material";
-import { jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsxs as jsxs84 } from "react/jsx-runtime";
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ jsxs83(
+  return /* @__PURE__ */ jsxs84(
     Button16,
     {
       sx: {
@@ -7815,10 +7922,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-import { jsx as jsx122, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs85 } from "react/jsx-runtime";
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ jsx122(TableBody2, { children: /* @__PURE__ */ jsx122(TableRow4, { children: /* @__PURE__ */ jsxs84(
+}) => /* @__PURE__ */ jsx123(TableBody2, { children: /* @__PURE__ */ jsx123(TableRow4, { children: /* @__PURE__ */ jsxs85(
   TableCell4,
   {
     sx: {
@@ -7831,10 +7938,10 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ jsx122(Typography30, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ jsx122(Typography30, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
-      /* @__PURE__ */ jsxs84(
-        Typography30,
+      /* @__PURE__ */ jsx123(Typography31, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ jsx123(Typography31, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ jsxs85(
+        Typography31,
         {
           variant: "subtitle1",
           align: "center",
@@ -7846,18 +7953,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ jsx122(Typography30, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ jsx123(Typography31, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx123(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ jsx122(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ jsx123(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -7866,7 +7973,7 @@ var TableDesktopNoColumnsMessage = ({
 ) }) });
 
 // src/components/TableDesktopRows/TableDesktopRows.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var descendingComparator2 = (a, b, orderBy) => {
   const objA = a[orderBy];
   const objB = b[orderBy];
@@ -7912,7 +8019,7 @@ var TableDesktopRows = ({
   const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
   return sortedData.map((row, index) => {
     const isItemSelected = selectedRows.has(row[keyField]);
-    return /* @__PURE__ */ jsx123(
+    return /* @__PURE__ */ jsx124(
       RenderItem,
       {
         ...{
@@ -7934,8 +8041,8 @@ var TableDesktopRows = ({
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-import { Box as Box38, Button as Button17, Typography as Typography31 } from "@mui/material";
-import { jsx as jsx124, jsxs as jsxs85 } from "react/jsx-runtime";
+import { Box as Box39, Button as Button17, Typography as Typography32 } from "@mui/material";
+import { jsx as jsx125, jsxs as jsxs86 } from "react/jsx-runtime";
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
   isRowsFromAllPagesSelected,
@@ -7954,8 +8061,8 @@ var TableDesktopRowSelectionBar = ({
     }
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
-  return isAnyRowSelected ? /* @__PURE__ */ jsxs85(
-    Box38,
+  return isAnyRowSelected ? /* @__PURE__ */ jsxs86(
+    Box39,
     {
       sx: {
         p: 1,
@@ -7967,22 +8074,22 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       children: [
-        /* @__PURE__ */ jsx124(Typography31, { children: getSelectedRowsText() }),
-        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs85(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
+        /* @__PURE__ */ jsx125(Typography32, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs86(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
           "Select all ",
           totalRowCount,
           " rows from all pages based on your filters"
         ] }) : null,
-        /* @__PURE__ */ jsx124(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
+        /* @__PURE__ */ jsx125(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
 };
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
-import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography32 } from "@mui/material";
+import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography33 } from "@mui/material";
 import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx125, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
 var useStyles46 = makeStyles46()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -7994,17 +8101,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles46();
-  return showClearFilterButton ? /* @__PURE__ */ jsx125(TableRow5, { children: /* @__PURE__ */ jsxs86(
+  return showClearFilterButton ? /* @__PURE__ */ jsx126(TableRow5, { children: /* @__PURE__ */ jsxs87(
     TableCell5,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__PURE__ */ jsx125(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ jsx125(Typography32, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ jsx125(Typography32, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ jsx125(
+        /* @__PURE__ */ jsx126(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ jsx126(Typography33, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ jsx126(Typography33, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ jsx126(
           FilledButton_default,
           {
             copy: "Search",
@@ -8015,7 +8122,7 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ jsx125(TableRow5, { children: /* @__PURE__ */ jsx125(
+  ) }) : /* @__PURE__ */ jsx126(TableRow5, { children: /* @__PURE__ */ jsx126(
     TableCell5,
     {
       className: classes.tableCellDefault,
@@ -8028,7 +8135,7 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-import { Fragment as Fragment14, jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx127, jsxs as jsxs88 } from "react/jsx-runtime";
 var TableDesktop = ({
   data = [],
   headCells,
@@ -8056,16 +8163,16 @@ var TableDesktop = ({
   refetchData
 }) => {
   const tableToolbarMenuButtonRef = useRef7(null);
-  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState18(null);
-  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState18(
+  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState19(null);
+  const [order, setOrder] = useState19(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState19(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = useState18(
+  const [selectedRows, setSelectedRows] = useState19(
     /* @__PURE__ */ new Set()
   );
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState18(false);
-  const [isBulkChangesMode, setIsBulkChangesMode] = useState18(false);
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState19(false);
+  const [isBulkChangesMode, setIsBulkChangesMode] = useState19(false);
   const numRows = data.length;
   const numSelectedRows = useMemo3(() => {
     const currentPageIds = new Set(data.map((row) => row[keyField]));
@@ -8143,7 +8250,7 @@ var TableDesktop = ({
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx126(
+      return /* @__PURE__ */ jsx127(
         TableDesktopLoadingState,
         {
           numRows: Math.min(rowsPerPage, 10),
@@ -8153,7 +8260,7 @@ var TableDesktop = ({
       );
     }
     if (numRows === 0) {
-      return /* @__PURE__ */ jsx126(
+      return /* @__PURE__ */ jsx127(
         TableEmptyResult_default,
         {
           showClearFilterButton,
@@ -8162,7 +8269,7 @@ var TableDesktop = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx126(
+    return /* @__PURE__ */ jsx127(
       TableDesktopRows,
       {
         data,
@@ -8181,8 +8288,8 @@ var TableDesktop = ({
       }
     );
   };
-  return /* @__PURE__ */ jsx126(
-    Box39,
+  return /* @__PURE__ */ jsx127(
+    Box40,
     {
       sx: {
         height,
@@ -8190,7 +8297,7 @@ var TableDesktop = ({
         justifyContent: "space-between",
         justifyItems: "stretch"
       },
-      children: /* @__PURE__ */ jsxs87(
+      children: /* @__PURE__ */ jsxs88(
         Paper12,
         {
           sx: {
@@ -8215,7 +8322,7 @@ var TableDesktop = ({
               isBulkChangesMode,
               onChangeBulkChangesMode: handleChangeBulkChangesMode
             }) : null,
-            /* @__PURE__ */ jsx126(
+            /* @__PURE__ */ jsx127(
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
@@ -8226,7 +8333,7 @@ var TableDesktop = ({
                 onClearSelectionClick: handleClearSelectionClick
               }
             ),
-            /* @__PURE__ */ jsx126(
+            /* @__PURE__ */ jsx127(
               TableContainer2,
               {
                 sx: {
@@ -8248,13 +8355,13 @@ var TableDesktop = ({
                     backgroundColor: (theme) => theme.palette.grey[500]
                   }
                 },
-                children: /* @__PURE__ */ jsx126(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx126(
+                children: /* @__PURE__ */ jsx127(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx127(
                   TableDesktopNoColumnsMessage,
                   {
                     onClickNoColumnsMessageOpenMenu: handleClickToolbarMenuOpen
                   }
-                ) : /* @__PURE__ */ jsxs87(Fragment14, { children: [
-                  /* @__PURE__ */ jsx126(
+                ) : /* @__PURE__ */ jsxs88(Fragment14, { children: [
+                  /* @__PURE__ */ jsx127(
                     SmartTableHeader,
                     {
                       order,
@@ -8270,7 +8377,7 @@ var TableDesktop = ({
                       shouldShowCheckOnFilter
                     }
                   ),
-                  /* @__PURE__ */ jsx126(TableBody3, { children: renderBody() })
+                  /* @__PURE__ */ jsx127(TableBody3, { children: renderBody() })
                 ] }) })
               }
             ),
@@ -8287,99 +8394,141 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { Checkbox as Checkbox7, FormControlLabel as FormControlLabel5 } from "@mui/material";
+import { useEffect as useEffect13, useState as useState22 } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Checkbox as Checkbox8, FormControlLabel as FormControlLabel5 } from "@mui/material";
+import { DatePicker, TimePicker } from "@mui/x-date-pickers";
+import moment2 from "moment";
+
+// src/components/TableDesktopEditableField/TableDesktopSmartMultipleSelect.tsx
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx128 } from "react/jsx-runtime";
+var TableDesktopSmartMultipleSelect = ({
+  initialValue,
+  inputLabel,
+  columnId,
+  fieldName,
+  rowId,
+  disabled,
+  variant = "standard",
+  size,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  onUpdateEditableCell
+}) => {
+  const defaultValues = useMemo4(() => {
+    return initialValue.map((val) => ({
+      value: val.id,
+      label: val[fieldName].toString()
+    }));
+  }, [initialValue]);
+  return /* @__PURE__ */ jsx128(
+    SmartMultipleSelect,
+    {
+      inputLabel,
+      size,
+      variant,
+      disabled,
+      defaultValues,
+      menuOptions: filterOptions,
+      isLoading: isFetchingFilterOptions,
+      onOpen: () => {
+        if (!filterOptions?.length) {
+          refetchFilterOptions?.();
+        }
+      },
+      onClose: (values) => {
+        const optionsValues = values.map((option) => option.value ?? "");
+        onUpdateEditableCell?.({
+          rowId,
+          columnId,
+          value: optionsValues,
+          label: optionsValues
+        });
+      }
+    }
+  );
+};
 
 // src/components/TableDesktopEditableField/TableDesktopSmartSelect.tsx
-import { useState as useState19, memo as memo22, useEffect as useEffect13 } from "react";
-import { jsx as jsx127 } from "react/jsx-runtime";
-var TableDesktopSmartSelect = memo22(
-  ({
-    ref,
-    initialValue,
-    inputLabel,
-    field,
-    fieldName,
-    rowId,
-    disabled,
-    variant = "standard",
-    size,
-    filterOptions,
-    refetchFilterOptions,
-    isFetchingFilterOptions,
-    onUpdateEditableCell
-  }) => {
-    const [value, setValue] = useState19(
-      initialValue
-    );
-    const [options, setOptions] = useState19();
-    const valueId = resolveObjectType(value, "id");
-    const valueLabel = resolveObjectType(value, fieldName);
-    useEffect13(() => {
-      if (filterOptions) {
-        const parsedOptions = filterOptions?.map(
-          (option) => ({
-            value: resolveObjectType(option, "id"),
-            label: String(resolveObjectType(option, fieldName))
-          })
-        );
-        setOptions(parsedOptions);
-      }
-    }, [filterOptions]);
-    return /* @__PURE__ */ jsx127(
-      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);
-        }
+import { useState as useState20 } from "react";
+import { jsx as jsx129 } from "react/jsx-runtime";
+var TableDesktopSmartSelect = ({
+  ref,
+  initialValue,
+  inputLabel,
+  columnId,
+  fieldName,
+  rowId,
+  disabled,
+  variant = "standard",
+  size,
+  allowBlankOption,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  onUpdateEditableCell
+}) => {
+  const [value, setValue] = useState20(
+    initialValue
+  );
+  const valueId = resolveObjectType(value ?? "", "id");
+  const valueLabel = resolveObjectType(value ?? "", fieldName);
+  return /* @__PURE__ */ jsx129(
+    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
-import { useMemo as useMemo4, useState as useState20, useRef as useRef8 } from "react";
+import { useMemo as useMemo5, useState as useState21, useRef as useRef8 } from "react";
 import { TextField as TextField8 } from "@mui/material";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
   rowId,
   initialValue,
   inputLabel,
   disabled,
-  field,
+  columnId,
   type,
   variant = "standard",
   size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = useState20(initialValue);
+  const [input, setInput] = useState21(initialValue);
   const oldValue = useRef8(initialValue);
-  const isDirty = useMemo4(
+  const isDirty = useMemo5(
     () => input !== oldValue.current,
     [input, oldValue.current]
   );
-  const hasValidationError = useMemo4(
-    () => isDirty && !validateInput?.(input),
+  const hasValidationError = useMemo5(
+    () => isDirty && validateInput && !validateInput(input),
     [input, validateInput]
   );
   const commitValue = (value) => {
@@ -8388,7 +8537,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") {
@@ -8396,7 +8545,7 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx130(
     TextField8,
     {
       fullWidth: true,
@@ -8419,6 +8568,9 @@ var TableDesktopTextField = ({
       slotProps: {
         input: {
           inputMode: type === "numeric" ? "numeric" : void 0
+        },
+        htmlInput: {
+          maxLength: 1e3
         }
       }
     }
@@ -8426,63 +8578,98 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "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] = useState22();
+  useEffect13(() => {
+    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__ */ jsx129(
+    select: /* @__PURE__ */ jsx131(
       TableDesktopSmartSelect,
       {
         rowId,
-        field,
+        columnId,
+        fieldName,
+        disabled,
+        variant,
+        size,
+        allowBlankOption: allowBlankSelectOption,
+        initialValue: editInitialValue,
+        inputLabel,
+        filterOptions: parsedFilterOptions,
+        refetchFilterOptions,
+        isFetchingFilterOptions,
+        onUpdateEditableCell
+      }
+    ),
+    multipleSelect: /* @__PURE__ */ jsx131(
+      TableDesktopSmartMultipleSelect,
+      {
+        rowId,
+        columnId,
         fieldName,
         disabled,
         variant,
         size,
         initialValue: editInitialValue,
         inputLabel,
-        filterOptions,
+        filterOptions: parsedFilterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    checkbox: /* @__PURE__ */ jsx129(
+    checkbox: /* @__PURE__ */ jsx131(
       FormControlLabel5,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ jsx129(
-          Checkbox7,
+        control: /* @__PURE__ */ jsx131(
+          Checkbox8,
           {
             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__ */ jsx129(
+    text: /* @__PURE__ */ jsx131(
       TableDesktopTextField,
       {
         type: "text",
@@ -8490,14 +8677,14 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        field,
+        columnId,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ jsx129(
+    numeric: /* @__PURE__ */ jsx131(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -8505,29 +8692,88 @@ var TableDesktopEditableField = ({
         disabled,
         variant,
         size,
-        field,
+        columnId,
         initialValue: editInitialValue ?? "",
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
+    ),
+    date: /* @__PURE__ */ jsx131(
+      DatePicker,
+      {
+        defaultValue: moment2(editInitialValue),
+        label: inputLabel,
+        format: "DD/MM/YYYY",
+        sx: { overflowY: "hidden" },
+        onAccept: (value) => {
+          const formattedValue = value?.format("YYYY-MM-DD") ?? null;
+          const formattedLabel = value?.format("DD/MM/YYYY") ?? null;
+          onUpdateEditableCell?.({
+            rowId,
+            columnId,
+            value: formattedValue,
+            label: formattedLabel
+          });
+        },
+        slots: { clearIcon: DeleteIcon },
+        slotProps: {
+          field: { clearable: true },
+          clearButton: { sx: { p: 0.5 } },
+          openPickerButton: { sx: { p: 0 } },
+          textField: {
+            variant: "standard",
+            error: false
+          }
+        }
+      }
+    ),
+    time: /* @__PURE__ */ jsx131(
+      TimePicker,
+      {
+        defaultValue: moment2(editInitialValue, "HH:mm:ss"),
+        label: inputLabel,
+        sx: { overflowY: "hidden" },
+        onAccept: (value) => {
+          const formattedValue = value?.format("HH:mm") ?? null;
+          onUpdateEditableCell?.({
+            rowId,
+            columnId,
+            value: formattedValue,
+            label: formattedValue
+          });
+        },
+        slots: { clearIcon: DeleteIcon },
+        slotProps: {
+          field: { clearable: true },
+          clearButton: { sx: { p: 0.5 } },
+          openPickerButton: { sx: { p: 0 } },
+          textField: {
+            variant: "standard",
+            error: false
+          }
+        }
+      }
     )
   };
+  if (!editableCellType) {
+    return null;
+  }
   return editableComponents[editableCellType];
 };
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 import Refresh3 from "@mui/icons-material/Refresh";
 import {
-  Box as Box40,
+  Box as Box41,
   Button as Button18,
   MenuItem as MenuItem4,
   Pagination as Pagination2,
-  Select as Select4,
+  Select as Select5,
   Stack,
-  Typography as Typography33
+  Typography as Typography34
 } from "@mui/material";
-import { jsx as jsx130, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx132, jsxs as jsxs89 } from "react/jsx-runtime";
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -8538,8 +8784,8 @@ var TableDesktopFooter = ({
   refetchData,
   isFetching
 }) => {
-  return /* @__PURE__ */ jsxs88(
-    Box40,
+  return /* @__PURE__ */ jsxs89(
+    Box41,
     {
       sx: {
         py: 1,
@@ -8550,7 +8796,7 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ jsxs88(
+        refetchData ? /* @__PURE__ */ jsxs89(
           Button18,
           {
             disableRipple: true,
@@ -8565,7 +8811,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ jsx130(
+              /* @__PURE__ */ jsx132(
                 Refresh3,
                 {
                   fontSize: "small",
@@ -8576,21 +8822,21 @@ var TableDesktopFooter = ({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs88(Box40, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
-          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs88(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx130(Typography33, { children: "Rows per page:" }),
-            /* @__PURE__ */ jsx130(
-              Select4,
+        /* @__PURE__ */ jsxs89(Box41, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
+          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs89(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx132(Typography34, { children: "Rows per page:" }),
+            /* @__PURE__ */ jsx132(
+              Select5,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx130(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx132(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx132(
             Pagination2,
             {
               color: "standard",
@@ -8606,15 +8852,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect14, useState as useState21 } from "react";
+import { useEffect as useEffect14, useState as useState23 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
 import { IconButton as IconButton5, TableCell as TableCell6, Tooltip as Tooltip10 } from "@mui/material";
-import { Fragment as Fragment15, jsx as jsx131, jsxs as jsxs89 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx133, jsxs as jsxs90 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ jsx131(CheckIcon3, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ jsx133(CheckIcon3, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -8628,25 +8874,17 @@ 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] = useState21(false);
-  const [isCellInEditMode, setIsCellInEditMode] = useState21(false);
+  const [isCellHovered, setIsCellHovered] = useState23(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState23(false);
+  const { width, editableCellType } = headCell;
   useEffect14(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -8654,10 +8892,10 @@ var TableDesktopCell = ({
       }
     };
     if (isCellInEditMode) {
-      window.addEventListener("keydown", handleKeyDown);
+      globalThis.addEventListener("keydown", handleKeyDown);
     }
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
+      globalThis.removeEventListener("keydown", handleKeyDown);
     };
   }, [isCellInEditMode]);
   const handleEditClick = (e) => {
@@ -8665,7 +8903,7 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx133(
     TableCell6,
     {
       align: "left",
@@ -8681,8 +8919,8 @@ var TableDesktopCell = ({
         ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
         background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ jsx131(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs89(Fragment15, { children: [
-        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx131(Tooltip10, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx131(
+      children: /* @__PURE__ */ jsx133(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs90(Fragment15, { children: [
+        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx133(Tooltip10, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx133(
           IconButton5,
           {
             onClick: handleEditClick,
@@ -8697,24 +8935,17 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            children: isCellInEditMode ? /* @__PURE__ */ jsx131(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx131(EditIcon, { fontSize: "small" })
+            children: isCellInEditMode ? /* @__PURE__ */ jsx133(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx133(EditIcon, { fontSize: "small" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx131(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx133(
           TableDesktopEditableField,
           {
             editInitialValue,
             rowId,
-            field,
-            fieldName,
             disabled,
-            inputLabel: inputLabel ?? "",
-            editableCellType,
-            filterOptions,
-            refetchFilterOptions,
-            isFetchingFilterOptions,
-            validateInput,
-            onUpdateEditableCell
+            headCell,
+            onUpdateEditableCell: headCell.onUpdateEditableCell
           }
         ) : renderReadOnlyValue(readOnlyValue)
       ] }) })
@@ -8724,24 +8955,24 @@ var TableDesktopCell = ({
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
-  useState as useState22,
-  useMemo as useMemo5,
+  useState as useState24,
+  useMemo as useMemo6,
   useRef as useRef9
 } from "react";
 import Download from "@mui/icons-material/Download";
 import KeyboardArrowLeft2 from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRight2 from "@mui/icons-material/KeyboardArrowRight";
 import {
-  Box as Box41,
+  Box as Box42,
   Button as Button19,
   Divider as Divider11,
   FormControlLabel as FormControlLabel6,
   IconButton as IconButton6,
   Switch as Switch2,
   Tooltip as Tooltip11,
-  Typography as Typography34
+  Typography as Typography35
 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx132, jsxs as jsxs90 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -8764,11 +8995,11 @@ var TableDesktopToolbar = ({
   renderInfoIcons
 }) => {
   const scrollRef = useRef9(null);
-  const [bulkChanges, setBulkChanges] = useState22([]);
-  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState22(false);
-  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState22(false);
-  const [resetCounter, setResetCounter] = useState22(0);
-  const visibleEditableColumns = useMemo5(
+  const [bulkChanges, setBulkChanges] = useState24([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState24(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState24(false);
+  const [resetCounter, setResetCounter] = useState24(0);
+  const visibleEditableColumns = useMemo6(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
     ),
@@ -8785,13 +9016,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__ */ jsxs90(
-    Box41,
+  return /* @__PURE__ */ jsxs91(
+    Box42,
     {
       sx: {
         borderBottom: "1px solid",
@@ -8799,8 +9034,8 @@ var TableDesktopToolbar = ({
         maxWidth: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs90(
-          Box41,
+        /* @__PURE__ */ jsxs91(
+          Box42,
           {
             sx: {
               py: 1,
@@ -8811,8 +9046,8 @@ var TableDesktopToolbar = ({
               background: isBulkChangesMode ? colors.neutral150 : void 0
             },
             children: [
-              /* @__PURE__ */ jsxs90(
-                Box41,
+              /* @__PURE__ */ jsxs91(
+                Box42,
                 {
                   sx: {
                     py: 1,
@@ -8822,20 +9057,20 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    toolbarLabel ? /* @__PURE__ */ jsxs90(Fragment16, { children: [
-                      /* @__PURE__ */ jsx132(Typography34, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
-                      /* @__PURE__ */ jsx132(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
+                    toolbarLabel ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
+                      /* @__PURE__ */ jsx134(Typography35, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
+                      /* @__PURE__ */ jsx134(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx132(
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx134(
                       Tooltip11,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ jsx132(
+                        children: /* @__PURE__ */ jsx134(
                           FormControlLabel6,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ jsx132(
+                            control: /* @__PURE__ */ jsx134(
                               Switch2,
                               {
                                 size: "small",
@@ -8850,17 +9085,17 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx132(
+              isScrollable && /* @__PURE__ */ jsx134(
                 IconButton6,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ jsx132(KeyboardArrowLeft2, {})
+                  children: /* @__PURE__ */ jsx134(KeyboardArrowLeft2, {})
                 }
               ),
-              /* @__PURE__ */ jsx132(
-                Box41,
+              /* @__PURE__ */ jsx134(
+                Box42,
                 {
                   ref: scrollRef,
                   sx: {
@@ -8876,55 +9111,39 @@ var TableDesktopToolbar = ({
                       display: "none"
                     }
                   },
-                  children: isBulkChangesMode ? visibleEditableColumns.map(
-                    ({
-                      id,
-                      fieldName,
-                      label,
-                      editableCellType,
-                      filterOptions,
-                      refetchFilterOptions,
-                      isFetchingFilterOptions,
-                      validateInput,
-                      width
-                    }) => editableCellType && /* @__PURE__ */ jsx132(
-                      Box41,
+                  children: isBulkChangesMode ? visibleEditableColumns.map((headCell) => {
+                    const { id, width, editableCellType } = headCell;
+                    return editableCellType && /* @__PURE__ */ jsx134(
+                      Box42,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ jsx132(
+                        children: /* @__PURE__ */ jsx134(
                           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__ */ jsx132(
+              isScrollable && /* @__PURE__ */ jsx134(
                 IconButton6,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ jsx132(KeyboardArrowRight2, {})
+                  children: /* @__PURE__ */ jsx134(KeyboardArrowRight2, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ jsxs90(Fragment16, { children: [
-                /* @__PURE__ */ jsx132(
+              isBulkChangesMode ? /* @__PURE__ */ jsxs91(Fragment16, { children: [
+                /* @__PURE__ */ jsx134(
                   Button19,
                   {
                     variant: "outlined",
@@ -8937,7 +9156,7 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ jsx132(
+                /* @__PURE__ */ jsx134(
                   Button19,
                   {
                     variant: "contained",
@@ -8948,26 +9167,26 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs90(Box41, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ jsxs91(Box42, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ jsx132(Tooltip11, { title: "Download Customer List", children: /* @__PURE__ */ jsx132("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx132(
+                renderExportCsvDialog ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Download Customer List", children: /* @__PURE__ */ jsx134("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx134(
                   IconButton6,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ jsx132(Download, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx134(Download, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx132(Tooltip11, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx132(
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx134(Tooltip11, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx134(
                   IconButton6,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ jsx132(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx134(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -9000,11 +9219,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo23, useEffect as useEffect15, useState as useState23 } from "react";
+import { memo as memo22, useEffect as useEffect15, useState as useState25 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles47 } from "tss-react/mui";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 var useStyles47 = makeStyles47()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -9013,7 +9232,7 @@ var useStyles47 = makeStyles47()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState23([]);
+  const [sortableCells, setSortableCells] = useState25([]);
   const { classes } = useStyles47();
   useEffect15(() => {
     setSortableCells(cells);
@@ -9049,7 +9268,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx133(TableHead3, { children: /* @__PURE__ */ jsx133(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx133(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx135(TableHead3, { children: /* @__PURE__ */ jsx135(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx135(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx135(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -9060,12 +9279,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = memo23(TableHeader);
+var TableHeader_default = memo22(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box42, Typography as Typography35, Divider as Divider12, Button as Button20 } from "@mui/material";
+import { Box as Box43, Typography as Typography36, Divider as Divider12, Button as Button20 } from "@mui/material";
 import { makeStyles as makeStyles48 } from "tss-react/mui";
-import { jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
 var useStyles48 = makeStyles48()(() => ({
   icon: {
     fontSize: 20
@@ -9102,19 +9321,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles48();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ jsxs91(
-    Box42,
+  return /* @__PURE__ */ jsxs92(
+    Box43,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx134(Divider12, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx134(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs91(Box42, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx134(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx134(
-            Typography35,
+        /* @__PURE__ */ jsx136(Divider12, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx136(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs92(Box43, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx136(
+            Typography36,
             {
               color: "textSecondary",
               className: classes.title,
@@ -9122,9 +9341,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx134(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx136(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx134(Divider12, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx136(Divider12, { className: classes.rightDivider })
       ]
     }
   );
@@ -9136,7 +9355,7 @@ import { DateRangePicker } from "react-dates";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -9232,15 +9451,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles49();
-  return /* @__PURE__ */ jsx135("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx135(DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ jsx137("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx137(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo24 } from "react";
-import { AppBar, Box as Box43, Toolbar } from "@mui/material";
+import { memo as memo23 } from "react";
+import { AppBar, Box as Box44, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles50 } from "tss-react/mui";
-import { jsx as jsx136, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
 var useStyles50 = makeStyles50()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -9260,9 +9479,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles50();
-  return /* @__PURE__ */ jsxs92(Box43, { children: [
-    /* @__PURE__ */ jsx136(AppBar, { children: /* @__PURE__ */ jsxs92(Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsxs93(Box44, { children: [
+    /* @__PURE__ */ jsx138(AppBar, { children: /* @__PURE__ */ jsxs93(Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ jsx138(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -9271,7 +9490,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ jsx136(
+      /* @__PURE__ */ jsx138(
         CompanyLogo_default,
         {
           size: "small",
@@ -9280,30 +9499,30 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx136(Box43, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx136(Box43, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx138(Box44, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ jsx138(Box44, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = memo24(TheToolbar);
+var TheToolbar_default = memo23(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx137(
+}) => /* @__PURE__ */ jsx139(
   Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx137(
+    children: /* @__PURE__ */ jsx139(
       MuiAlert,
       {
         elevation: 6,
@@ -9331,16 +9550,16 @@ var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
 import {
-  Typography as Typography36,
+  Typography as Typography37,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box44,
+  Box as Box45,
   Divider as Divider13,
   Paper as Paper13,
   Fade as Fade2
 } from "@mui/material";
 import { makeStyles as makeStyles51 } from "tss-react/mui";
-import { jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
 var useStyles51 = makeStyles51()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -9370,7 +9589,7 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles51();
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx140(
     Dialog5,
     {
       open,
@@ -9380,10 +9599,10 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx138(Fade2, { in: open, children: /* @__PURE__ */ jsxs93(Paper13, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs93(Box44, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx138(Typography36, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx138(
-            Box44,
+      children: /* @__PURE__ */ jsx140(Fade2, { in: open, children: /* @__PURE__ */ jsxs94(Paper13, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs94(Box45, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx140(Typography37, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx140(
+            Box45,
             {
               sx: {
                 fontWeight: 600
@@ -9391,23 +9610,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ jsxs93(
-            Box44,
+          /* @__PURE__ */ jsxs94(
+            Box45,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx138(Typography36, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx138(Typography36, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx140(Typography37, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx138(Divider13, {}),
-        /* @__PURE__ */ jsxs93(Box44, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx138(
+        /* @__PURE__ */ jsx140(Divider13, {}),
+        /* @__PURE__ */ jsxs94(Box45, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx140(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -9420,7 +9639,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx138(
+          /* @__PURE__ */ jsx140(
             FilledButton_default,
             {
               color: "primary",
@@ -9429,7 +9648,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx138(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx140(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -9437,11 +9656,11 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-import { memo as memo25 } from "react";
-import { Avatar as Avatar2, Typography as Typography37 } from "@mui/material";
-import { jsx as jsx139, jsxs as jsxs94 } from "react/jsx-runtime";
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs94("div", { children: [
-  /* @__PURE__ */ jsx139(
+import { memo as memo24 } from "react";
+import { Avatar as Avatar2, Typography as Typography38 } from "@mui/material";
+import { jsx as jsx141, jsxs as jsxs95 } from "react/jsx-runtime";
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs95("div", { children: [
+  /* @__PURE__ */ jsx141(
     Avatar2,
     {
       src: user.profile_picture,
@@ -9449,18 +9668,18 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs9
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ jsxs94("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx139(Typography37, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx139(Typography37, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ jsxs95("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx141(Typography38, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = memo25(UserBust);
+var UserBust_default = memo24(UserBust);
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx142(
     "svg",
     {
       width: "20",
@@ -9469,7 +9688,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx140(
+      children: /* @__PURE__ */ jsx142(
         "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",
@@ -9547,6 +9766,7 @@ export {
   SearchWithFilters_default as SearchWithFilters,
   SearchWithFiltersForTable_default as SearchWithFiltersForTable,
   SectionName_default as SectionName,
+  SmartMultipleSelect,
   SmartSelect_default as SmartSelect,
   SmartTableHeader,
   SmartTableHeaderFilterMenu,