@natoora-libs/core 0.0.41 → 0.1.0

package/dist/components/index.cjs

@@ -11,11 +11,11 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __copyProps = (to, from, except, desc2) => {
+var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
       if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc2 = __getOwnPropDesc(from, key)) || desc2.enumerable });
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
   return to;
 };
@@ -374,6 +374,7 @@ __export(components_exports, {
   SectionName: () => SectionName_default,
   SmartSelect: () => SmartSelect_default,
   SmartTableHeader: () => SmartTableHeader_default,
+  SmartTableHeaderFilterMenu: () => SmartTableHeaderFilterMenu_default,
   SquareButton: () => SquareButton_default,
   SquareLabel: () => SquareLabel_default,
   Switch: () => Switch_default,
@@ -458,7 +459,6 @@ var AlertDialog_default = AlertDialog;
 // src/components/AlertDialogFullScreen/AlertDialogFullScreen.tsx
 var import_material2 = require("@mui/material");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-console.log("wqpkoe");
 var AlertDialogFullScreen = ({
   handleAlertAccept,
   handleAlertReject,
@@ -4560,7 +4560,7 @@ var drawerAppList = [
         featureNames: [featureName_default.CUSTOMERS],
         pinned: "customers",
         icon: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(icons_default.SvgIconAccount, {}),
-        url: `/customer-list`,
+        url: `/react/customers`,
         children: [
           {
             name: "Sites",
@@ -6371,10 +6371,11 @@ var RenderContentList = ({
     const sections = items.map((item) => ({
       id: transformNameToID(item),
       element: document.getElementById(transformNameToID(item))
-    }));
+    })).filter(({ element }) => element !== null);
     if (observer.current) {
       observer.current.disconnect();
     }
+    if (sections.length === 0) return;
     observer.current = new IntersectionObserver(
       (entries) => {
         const visibleSection = entries.find((entry) => entry.isIntersecting);
@@ -6406,11 +6407,18 @@ var RenderContentList = ({
         return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
           import_material47.ListItemButton,
           {
-            component: "a",
-            href: `#${id}`,
-            onClick: () => setActive(id),
             selected: active === id,
             classes: { root: classes.root, selected: classes.selected },
+            onClick: () => {
+              setActive(id);
+              const element = document.getElementById(id);
+              if (element) {
+                element.scrollIntoView({
+                  behavior: "smooth",
+                  block: "start"
+                });
+              }
+            },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_material47.ListItemText, { primary: item }),
               warningItems?.includes(item) && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_material47.Tooltip, { title: warningMessage, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_icons_material10.WarningAmber, { color: "warning" }) })
@@ -7321,14 +7329,205 @@ var LabelledSwitch = (0, import_mui50.withStyles)(LSwitch, (theme) => ({
 }));
 var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 
-// src/components/Table/SmartTableHeader.tsx
-var import_react32 = require("react");
+// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
+var import_react32 = __toESM(require("react"), 1);
+var import_icons_material14 = require("@mui/icons-material");
 var import_material58 = require("@mui/material");
+var import_classnames3 = __toESM(require("classnames"), 1);
 var import_mui51 = require("tss-react/mui");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var useStyles45 = (0, import_mui51.makeStyles)()(() => ({
+var useStyles45 = (0, import_mui51.makeStyles)()((theme) => ({
+  filterMenu: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5)
+  },
+  filterCheckboxDropdown: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.spacing(0, 3)
+  },
+  applyFilterButtonsContainer: {
+    display: "flex",
+    padding: theme.spacing(0, 1)
+  }
+}));
+var resolveFilterOption = (filterOption) => {
+  if (typeof filterOption === "object") {
+    return filterOption?.label || filterOption?.name || "";
+  }
+  return filterOption;
+};
+var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
+  if (typeof item === "string" && typeof filterOption === "string") {
+    return item === filterOption;
+  }
+  if (typeof item === "object" && typeof filterOption === "object") {
+    return item.id === filterOption.id;
+  }
+  return false;
+});
+var SmartTableHeaderFilterMenu = ({
+  headCell,
+  hasActiveFilters,
+  headerFilters,
+  onApplyFilters
+}) => {
+  const { classes } = useStyles45();
+  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
+  const [shouldSave, setShouldSave] = (0, import_react32.useState)(false);
+  const [selectedFilters, setSelectedFilters] = (0, import_react32.useState)(
+    headerFilters[headCell.id] ?? []
+  );
+  const handleFilterMenuOpen = (event) => {
+    if (!headCell.filterOptionsQuery?.data?.length) {
+      headCell.filterOptionsQuery?.refetch();
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const handleFilterMenuClose = () => {
+    setSelectedFilters(headerFilters[headCell.id]);
+    setAnchorEl(null);
+    setShouldSave(false);
+  };
+  const handleFilterOptionClick = (option) => {
+    const selectedIndex = findFilterIndex(selectedFilters, option);
+    let newSelected;
+    if (selectedIndex === -1) {
+      if (typeof option === "string") {
+        newSelected = [...selectedFilters, option];
+      } else {
+        newSelected = [...selectedFilters, option];
+      }
+    } else {
+      newSelected = selectedFilters.filter(
+        (_, index) => index !== selectedIndex
+      );
+    }
+    setSelectedFilters(newSelected);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.IconButton,
+      {
+        disableRipple: true,
+        onClick: handleFilterMenuOpen,
+        "data-testid": "filter-menu-button",
+        style: { padding: 0 },
+        className: (0, import_classnames3.default)("filter-menu-trigger", {
+          "has-active-filters": hasActiveFilters
+        }),
+        children: hasActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+          import_material58.Chip,
+          {
+            sx: { height: 24 },
+            label: headerFilters[headCell.id]?.length,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 }, color: "primary" })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.Menu,
+      {
+        open: !!anchorEl,
+        onClose: handleFilterMenuClose,
+        anchorEl,
+        "data-testid": "filter-menu",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.filterMenu, children: [
+          headCell.filterOptionsQuery?.data?.map(
+            (option) => {
+              const resolvedOption = resolveFilterOption(option);
+              return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                import_material58.FormControl,
+                {
+                  className: classes.filterCheckboxDropdown,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                    import_material58.FormControlLabel,
+                    {
+                      label: resolvedOption,
+                      control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                        import_material58.Checkbox,
+                        {
+                          disableRipple: true,
+                          onChange: () => handleFilterOptionClick(option),
+                          checked: selectedFilters?.some(
+                            (value) => resolveFilterOption(value) === resolvedOption
+                          ) ?? false
+                        }
+                      )
+                    }
+                  )
+                },
+                resolvedOption
+              );
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.FormControl, { className: classes.filterCheckboxDropdown, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+              import_material58.FormControlLabel,
+              {
+                label: "Save Filters",
+                control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                  import_material58.Checkbox,
+                  {
+                    disableRipple: true,
+                    checked: shouldSave,
+                    onChange: (e) => setShouldSave(e.target.checked)
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.FormHelperText, { sx: { margin: 0 }, children: "Filters auto-apply on return." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+              ExtendedButton_default,
+              {
+                buttonType: "button",
+                copy: "Deselect All",
+                variant: "text",
+                onClick: () => setSelectedFilters([])
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+              ExtendedButton_default,
+              {
+                copy: "Apply",
+                color: "primary",
+                buttonType: "submit",
+                onClick: () => {
+                  const updatedFilters = {
+                    ...headerFilters,
+                    [headCell.id]: [...selectedFilters]
+                  };
+                  onApplyFilters?.(updatedFilters, shouldSave);
+                  setAnchorEl(null);
+                  setShouldSave(false);
+                }
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+var SmartTableHeaderFilterMenu_default = import_react32.default.memo(SmartTableHeaderFilterMenu);
+
+// src/components/SmartTableHeader/SmartTableHeader.tsx
+var import_react33 = require("react");
+var import_material59 = require("@mui/material");
+var import_mui52 = require("tss-react/mui");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var useStyles46 = (0, import_mui52.makeStyles)()((theme) => ({
   root: {
     backgroundColor: colors.neutral100,
+    height: theme.spacing(6),
     "& .MuiTableSortLabel-root": {
       fontWeight: 600,
       fontSize: ".875rem"
@@ -7345,51 +7544,130 @@ var useStyles45 = (0, import_mui51.makeStyles)()(() => ({
     top: 20,
     width: 1
   },
-  containerTh: {
+  tableHeaderContent: {
     borderBottom: "1px solid",
     borderBottomColor: colors.neutral250,
-    backgroundColor: colors.neutral100,
-    outline: "1px solid",
-    outlineColor: colors.neutral100
+    whiteSpace: "nowrap",
+    "& .filter-menu-trigger": {
+      visibility: "hidden",
+      opacity: 0,
+      transition: "visibility 0.1s, opacity 0.1s ease-in"
+    },
+    "&:hover .filter-menu-trigger, & .filter-menu-trigger.has-active-filters": {
+      visibility: "visible",
+      opacity: 1
+    },
+    "&:hover .MuiTableSortLabel-root": {
+      "& .MuiTableSortLabel-icon": {
+        opacity: 1
+      }
+    }
+  },
+  filterMenu: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5)
+  },
+  filterCheckboxDropdown: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.spacing(0, 3)
+  },
+  applyFilterButtonsContainer: {
+    display: "flex",
+    padding: theme.spacing(0, 1)
   }
 }));
-var SmartTableHeader = (props) => {
-  const { classes } = useStyles45();
-  const { order, orderBy, onRequestSort } = props;
+var SmartTableHeader = ({
+  order,
+  orderBy,
+  headCells,
+  numSelected,
+  numRows,
+  enableCheckboxSelection = false,
+  headerFilters,
+  onRequestSort,
+  onSelectAllClick,
+  onApplyFilters
+}) => {
+  const { classes } = useStyles46();
   const createSortHandler = (property) => (event) => {
-    onRequestSort?.(event, property);
+    onRequestSort(event, property);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableRow, { children: props.headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-    import_material58.TableCell,
-    {
-      className: classes.containerTh,
-      align: "left",
-      sortDirection: orderBy === headCell.id ? order : false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-        import_material58.TableSortLabel,
-        {
-          active: orderBy === headCell.id,
-          direction: orderBy === headCell.id ? order : "asc",
-          onClick: createSortHandler(headCell.id),
-          children: [
-            headCell.label,
-            orderBy === headCell.id ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
-          ]
-        }
-      )
-    },
-    headCell.id
-  )) }) });
+  const isSortActive = (headCellId) => orderBy === headCellId;
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material59.TableRow, { children: [
+    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      import_material59.Checkbox,
+      {
+        color: "primary",
+        indeterminate: numSelected > 0 && numSelected < numRows,
+        checked: numRows > 0 && numSelected === numRows,
+        onChange: onSelectAllClick
+      }
+    ) }) : null,
+    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+      import_material59.TableCell,
+      {
+        className: classes.tableHeaderContent,
+        align: "left",
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+            import_material59.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_runtime110.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ),
+          headCell.filterOptionsQuery ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+            SmartTableHeaderFilterMenu_default,
+            {
+              headCell,
+              headerFilters,
+              hasActiveFilters: !!headerFilters[headCell.id]?.length,
+              onApplyFilters
+            }
+          ) : null
+        ]
+      },
+      headCell.id
+    ))
+  ] }) });
 };
-var SmartTableHeader_default = (0, import_react32.memo)(SmartTableHeader);
+var SmartTableHeader_default = (0, import_react33.memo)(SmartTableHeader);
 
 // src/components/Table/Table.tsx
-var import_react33 = require("react");
-var import_material60 = require("@mui/material");
+var import_react34 = require("react");
+var import_material61 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
-var import_mui52 = require("tss-react/mui");
+var import_mui53 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
+// src/components/TableLoading/TableLoading.tsx
+var import_material60 = require("@mui/material");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var TableLoading = ({
+  rowsPerPage,
+  rowHeight
+}) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  import_material60.Skeleton,
+  {
+    animation: "pulse",
+    "data-testid": "table-loading-skeleton",
+    style: { margin: "8px", opacity: 0.4 },
+    variant: "rectangular",
+    height: rowHeight
+  },
+  index
+)) });
+var TableLoading_default = TableLoading;
+
 // src/components/Table/helpers.tsx
 function stableSort(array, cmp) {
   const stabilizedThis = array.map((el, index) => [el, index]);
@@ -7425,24 +7703,9 @@ function calculateRowsPerPage(rowHeight) {
   return 1;
 }
 
-// src/components/Table/TableLoading.tsx
-var import_material59 = require("@mui/material");
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var TableLoading = ({ rowsPerPage = 0, rowHeight }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Box, { children: Array.from({ length: rowsPerPage }).map((x, i) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-  import_material59.Skeleton,
-  {
-    animation: "pulse",
-    style: { margin: "8px", opacity: 0.4 },
-    variant: "rectangular",
-    height: rowHeight
-  },
-  i
-)) });
-var TableLoading_default = TableLoading;
-
 // src/components/Table/Table.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7476,12 +7739,12 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = (0, import_react33.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react33.useState)(
+  const [order, setOrder] = (0, import_react34.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react34.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = (0, import_react33.useState)(defaultRowsPerPage);
-  const { classes } = useStyles46();
+  const [rowsPerPage, setRowsPerPage] = (0, import_react34.useState)(defaultRowsPerPage);
+  const { classes } = useStyles47();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -7493,7 +7756,7 @@ var Table = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -7519,25 +7782,25 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-      import_material60.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      import_material61.TableCell,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-          import_material60.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          import_material61.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7548,52 +7811,61 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material60.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material60.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
 var Table_default = Table;
 
-// src/components/Table/TableDesktop.tsx
-var import_react34 = require("react");
-var import_material62 = require("@mui/material");
-var import_mui54 = require("tss-react/mui");
+// src/components/TableDesktop/TableDesktop.tsx
+var import_react35 = require("react");
+var import_material63 = require("@mui/material");
+var import_mui55 = require("tss-react/mui");
 var import_uuid2 = require("uuid");
 
-// src/components/Table/TableEmptyResult.tsx
-var import_material61 = require("@mui/material");
-var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime112 = require("react/jsx-runtime");
-var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
+// src/components/TableEmptyResult/TableEmptyResult.tsx
+var import_material62 = require("@mui/material");
+var import_mui54 = require("tss-react/mui");
+var import_jsx_runtime113 = require("react/jsx-runtime");
+var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
 var TableEmptyResult = ({
+  colSpan,
   showClearFilterButton = false,
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles47();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.TableCell, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(EmptyGlassIcon_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Typography, { variant: "h6", children: "No results found." }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      FilledButton_default,
-      {
-        copy: "Search",
-        variant: "contained",
-        color: "primary",
-        onClick: handleClickOnClearFiltersButton
-      }
-    )
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-    import_material61.TableCell,
+  const { classes } = useStyles48();
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    import_material62.TableCell,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    import_material62.TableCell,
     {
       className: classes.tableCellDefault,
-      colSpan: 8,
+      colSpan,
       align: "center",
       children: "Nothing to display"
     }
@@ -7601,9 +7873,9 @@ var TableEmptyResult = ({
 };
 var TableEmptyResult_default = TableEmptyResult;
 
-// src/components/Table/TableDesktop.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
+// src/components/TableDesktop/TableDesktop.tsx
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -7616,97 +7888,202 @@ var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
     justifyContent: "space-between"
   },
   container: {
-    maxHeight: "100%"
+    maxHeight: "100%",
+    "&::-webkit-scrollbar": {
+      width: "8px",
+      height: "8px"
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[100]
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[400],
+      borderRadius: "10px"
+    },
+    "&::-webkit-scrollbar-thumb:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.common.black : theme.palette.grey[500]
+    }
   }
 }));
-var desc = (a, b, orderBy) => {
-  if (b[orderBy] < a[orderBy]) {
+var descendingComparator2 = (a, b, orderBy) => {
+  const objA = a[orderBy];
+  const objB = b[orderBy];
+  const valA = typeof objA === "object" ? objA?.name : objA;
+  const valB = typeof objB === "object" ? objB?.name : objB;
+  if (!valA && !valB) {
+    return 0;
+  }
+  if (valA && !valB) {
     return -1;
   }
-  if (b[orderBy] > a[orderBy]) {
+  if (!valA && valB) {
+    return 1;
+  }
+  if (valA > valB) {
+    return -1;
+  }
+  if (valA < valB) {
     return 1;
   }
   return 0;
 };
-var stableSort2 = (array, cmp) => array.map((el, index) => [el, index]).sort((a, b) => {
-  const order = cmp(a[0], b[0]);
-  return order !== 0 ? order : a[1] - b[1];
-}).map((el) => el[0]);
-var getSorting2 = (order, orderBy) => order === "desc" ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy);
+var stableSort2 = (array, cmp) => array.map((el, index) => ({ el, index })).sort((a, b) => {
+  const order = cmp(a.el, b.el);
+  return order !== 0 ? order : a.index - b.index;
+}).map((el) => el.el);
+var getComparator = (order, orderBy) => order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
 var TableDesktop = ({
-  appliedFilters,
-  children,
   data,
   headCells,
+  RenderItem,
+  appliedFilters,
+  headerFilters,
+  children,
   height,
   isLoading,
-  RenderItem,
-  rowsPerPage,
+  rowsPerPage = 50,
+  enableCheckboxSelection = false,
+  disableInternalSort = false,
   updateSort,
   showClearFilterButton,
   handleClickOnClearFiltersButton,
   deleteItem,
-  keyField
+  keyField = "id",
+  onApplyFilters
 }) => {
-  const [order, setOrder] = (0, import_react34.useState)(
-    appliedFilters?.sortDir || "desc"
-  );
-  const [orderBy, setOrderBy] = (0, import_react34.useState)(
+  const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react35.useState)(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [page] = (0, import_react34.useState)(0);
-  const { classes } = useStyles48();
+  const [selected, setSelected] = (0, import_react35.useState)([]);
+  const [page] = (0, import_react35.useState)(0);
+  const { classes } = useStyles49();
   const rowHeight = 56;
+  const emptyRows = (0, import_react35.useMemo)(
+    () => rowsPerPage - data.length,
+    [rowsPerPage, data]
+  );
+  const visibleHeadCells = (0, import_react35.useMemo)(
+    () => headCells.filter((headCell) => headCell?.enabled ?? true),
+    [headCells]
+  );
+  const handleSelectAllClick = (0, import_react35.useCallback)(
+    (event) => {
+      if (event.target.checked) {
+        const newSelected = data.map((n) => n[keyField]);
+        setSelected(newSelected);
+        return;
+      }
+      setSelected([]);
+    },
+    [data, keyField]
+  );
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
     const orderDir = isAsc ? "desc" : "asc";
     setOrder(orderDir);
     setOrderBy(property);
-    updateSort(property, orderDir);
+    if (updateSort) {
+      updateSort(property, orderDir);
+    }
   };
-  const emptyRows = rowsPerPage - data.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-    import_material62.Skeleton,
+  const handleRowCheckboxClick = (0, import_react35.useCallback)(
+    (event, keyFieldValue) => {
+      const selectedIndex = selected.indexOf(keyFieldValue);
+      let newSelected = [];
+      if (selectedIndex === -1) {
+        newSelected = newSelected.concat(selected, keyFieldValue);
+      } else if (selectedIndex === 0) {
+        newSelected = newSelected.concat(selected.slice(1));
+      } else if (selectedIndex === selected.length - 1) {
+        newSelected = newSelected.concat(selected.slice(0, -1));
+      } else if (selectedIndex > 0) {
+        newSelected = newSelected.concat(
+          selected.slice(0, selectedIndex),
+          selected.slice(selectedIndex + 1)
+        );
+      }
+      setSelected(newSelected);
+    },
+    [selected]
+  );
+  const renderTableRows = (0, import_react35.useMemo)(() => {
+    const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
+    return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
+      const isItemSelected = selected.includes(row[keyField]);
+      return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+        RenderItem,
+        {
+          ...{
+            ...row,
+            index,
+            deleteItem,
+            isItemSelected,
+            enableCheckboxSelection,
+            keyFieldValue: row[keyField],
+            handleRowCheckboxClick,
+            visibleHeadCells
+          }
+        },
+        row[keyField] ?? index
+      );
+    });
+  }, [
+    data,
+    order,
+    orderBy,
+    page,
+    rowsPerPage,
+    selected,
+    enableCheckboxSelection,
+    disableInternalSort,
+    deleteItem,
+    keyField,
+    handleRowCheckboxClick,
+    visibleHeadCells,
+    RenderItem
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_jsx_runtime114.Fragment, { children: [...Array(Math.floor(rowsPerPage ?? 50))].map(() => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    import_material63.Skeleton,
     {
       animation: "pulse",
       style: { margin: "8px", opacity: 0.4 },
       variant: "rectangular",
-      height: rowHeight
+      height: rowHeight,
+      "data-testid": "loading-skeleton"
     },
-    Math.random()
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-      import_material62.Table,
+    (0, import_uuid2.v4)()
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+      import_material63.Table,
       {
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             SmartTableHeader_default,
             {
-              headCells,
+              headCells: visibleHeadCells,
               order,
               orderBy,
-              onRequestSort: handleRequestSort
+              numSelected: selected.length,
+              numRows: data.length,
+              enableCheckboxSelection,
+              headerFilters: headerFilters ?? {},
+              onRequestSort: handleRequestSort,
+              onSelectAllClick: handleSelectAllClick,
+              onApplyFilters
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.TableBody, { children: [
-            stableSort2(data, getSorting2(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-              RenderItem,
-              {
-                ...{ ...item, index, deleteItem }
-              },
-              item[keyField] || (0, import_uuid2.v4)()
-            )),
-            rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-              TableEmptyResult_default,
-              {
-                showClearFilterButton,
-                handleClickOnClearFiltersButton
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            TableEmptyResult_default,
+            {
+              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+              showClearFilterButton,
+              handleClickOnClearFiltersButton
+            }
+          ) })
         ]
       }
     ) }),
@@ -7716,12 +8093,12 @@ var TableDesktop = ({
 var TableDesktop_default = TableDesktop;
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react35 = require("react");
-var import_icons_material14 = require("@mui/icons-material");
-var import_material63 = require("@mui/material");
-var import_mui55 = require("tss-react/mui");
-var import_jsx_runtime114 = require("react/jsx-runtime");
-var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
+var import_react36 = require("react");
+var import_icons_material15 = require("@mui/icons-material");
+var import_material64 = require("@mui/material");
+var import_mui56 = require("tss-react/mui");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -7729,9 +8106,9 @@ var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react35.useState)([]);
-  const { classes } = useStyles49();
-  (0, import_react35.useEffect)(() => {
+  const [sortableCells, setSortableCells] = (0, import_react36.useState)([]);
+  const { classes } = useStyles50();
+  (0, import_react36.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -7765,24 +8142,24 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-    import_material63.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    import_material64.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
-      IconComponent: import_icons_material14.ImportExport,
+      IconComponent: import_icons_material15.ImportExport,
       onClick: () => handleSortClick(cell),
       children: cell.label
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react35.memo)(TableHeader);
+var TableHeader_default = (0, import_react36.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material64 = require("@mui/material");
-var import_mui56 = require("tss-react/mui");
-var import_jsx_runtime115 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
+var import_material65 = require("@mui/material");
+var import_mui57 = require("tss-react/mui");
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -7816,21 +8193,21 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles50();
+  const { classes } = useStyles51();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
-    import_material64.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+    import_material65.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material64.Box, { className: classes.center, children: [
-          Icon3 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-            import_material64.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material65.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material65.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material65.Box, { className: classes.center, children: [
+          Icon3 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            import_material65.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -7838,9 +8215,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon3 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } })
+          Icon3 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material64.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material65.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -7849,12 +8226,12 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 var import_react_dates = require("react-dates");
-var import_mui57 = require("tss-react/mui");
+var import_mui58 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
-var import_classnames3 = __toESM(require("classnames"), 1);
-var import_jsx_runtime116 = require("react/jsx-runtime");
-var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
+var import_classnames4 = __toESM(require("classnames"), 1);
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -7947,17 +8324,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes } = useStyles51();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: (0, import_classnames3.default)(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  const { classes } = useStyles52();
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: (0, import_classnames4.default)(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react36 = require("react");
-var import_material65 = require("@mui/material");
-var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime117 = require("react/jsx-runtime");
-var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
+var import_react37 = require("react");
+var import_material66 = require("@mui/material");
+var import_mui59 = require("tss-react/mui");
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -7994,10 +8371,10 @@ var TheToolbar = ({
   handleOpen,
   LeftDrawer: LeftDrawer2
 }) => {
-  const { classes } = useStyles52();
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material65.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material65.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  const { classes } = useStyles53();
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material66.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material66.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material66.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8006,7 +8383,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -8016,29 +8393,29 @@ var TheToolbar = ({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Box, { className: classes.offset }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material66.Box, { className: classes.offset }),
     LeftDrawer2
   ] });
 };
-var TheToolbar_default = (0, import_react36.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react37.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material66 = require("@mui/material");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_material67 = require("@mui/material");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-  import_material66.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  import_material67.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      import_material66.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      import_material67.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8064,10 +8441,10 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material67 = require("@mui/material");
-var import_mui59 = require("tss-react/mui");
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
+var import_material68 = require("@mui/material");
+var import_mui60 = require("tss-react/mui");
+var import_jsx_runtime120 = require("react/jsx-runtime");
+var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -8095,23 +8472,23 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material67.Dialog,
+  const { classes } = useStyles54();
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_material68.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material67.Backdrop,
+      BackdropComponent: import_material68.Backdrop,
       BackdropProps: {
         timeout: 500
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-            import_material67.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material68.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material68.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            import_material68.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8119,23 +8496,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-            import_material67.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+            import_material68.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material67.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material67.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material68.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material68.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8148,7 +8525,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8157,7 +8534,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8222,6 +8599,7 @@ var TwoButtonDialog_default = TwoButtonDialog;
   SectionName,
   SmartSelect,
   SmartTableHeader,
+  SmartTableHeaderFilterMenu,
   SquareButton,
   SquareLabel,
   Switch,