@natoora-libs/core 0.1.6 → 0.1.8

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;
 };
@@ -376,6 +376,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,
@@ -4596,7 +4597,7 @@ var drawerAppList = [
         featureNames: [featureName_default.CUSTOMERS],
         pinned: "customers",
         icon: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(icons_default.SvgIconAccount, {}),
-        url: `/customer-list`,
+        url: `/react/customers`,
         children: [
           {
             name: "Sites",
@@ -6407,10 +6408,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);
@@ -6442,11 +6444,18 @@ var RenderContentList = ({
         return /* @__PURE__ */ (0, import_jsx_runtime99.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_runtime99.jsx)(import_material47.ListItemText, { primary: item }),
               warningItems?.includes(item) && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_material47.Tooltip, { title: warningMessage, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_icons_material10.WarningAmber, { color: "warning" }) })
@@ -7350,14 +7359,226 @@ 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_Check = __toESM(require("@mui/icons-material/Check"), 1);
 var import_material58 = require("@mui/material");
+var import_classnames3 = __toESM(require("classnames"), 1);
 var import_mui51 = require("tss-react/mui");
 var import_jsx_runtime110 = 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)
+  },
+  filter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(0, 3)
+  },
+  applyFilterButtonsContainer: {
+    display: "flex",
+    padding: theme.spacing(0, 1)
+  },
+  saveAsDefaultButton: {
+    color: theme.palette.primary.main
+  }
+}));
+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,
+  numActiveFilters,
+  headerFilters,
+  shouldShowCheckOnFilter,
+  onApplyFilters
+}) => {
+  const { classes } = useStyles45();
+  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
+  const [selectedFilters, setSelectedFilters] = (0, import_react32.useState)(
+    headerFilters[headCell.id] ?? []
+  );
+  const filterOptions = headCell.filterOptionsQuery?.data ?? [];
+  const numFilterOptions = filterOptions.length ?? 0;
+  const numCurrentSelectedFilters = selectedFilters.length;
+  const handleFilterMenuOpen = (event) => {
+    if (!numFilterOptions) {
+      headCell.filterOptionsQuery?.refetch();
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const handleFilterMenuClose = () => {
+    setSelectedFilters(headerFilters[headCell.id]);
+    setAnchorEl(null);
+  };
+  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);
+  };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  (0, import_react32.useEffect)(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = (0, import_react32.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveFilterOption(value) === resolvedOption
+  ), [selectedFilters]);
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.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": !!numActiveFilters
+        }),
+        children: numActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          import_material58.Chip,
+          {
+            sx: { height: 24 },
+            label: numActiveFilters,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 }, color: "primary" })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 } })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime110.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_runtime110.jsxs)(import_material58.Box, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material58.Box, { px: 3, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+            import_material58.FormControlLabel,
+            {
+              label: "Select All",
+              control: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                import_material58.Checkbox,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptions]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material58.Divider, {}),
+          filterOptions.map(
+            (option) => {
+              const resolvedOption = resolveFilterOption(option);
+              return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+                import_material58.Box,
+                {
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                      import_material58.FormControlLabel,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                          import_material58.Checkbox,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_Check.default, { fontSize: "small", color: "action" }) : null
+                  ]
+                },
+                resolvedOption
+              );
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material58.Divider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material58.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+              ExtendedButton_default,
+              {
+                copy: "Save as Default",
+                buttonType: "button",
+                variant: "text",
+                tooltip: "Persists those filters for future visits",
+                className: classes.saveAsDefaultButton,
+                onClick: () => handleApplyFilters(true)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+              ExtendedButton_default,
+              {
+                copy: "Apply",
+                color: "primary",
+                buttonType: "submit",
+                onClick: () => handleApplyFilters(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_runtime111 = 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"
@@ -7374,51 +7595,133 @@ 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,
+  shouldShowCheckOnFilter
+}) => {
+  const { classes } = useStyles46();
   const createSortHandler = (property) => (event) => {
-    onRequestSort?.(event, property);
+    onRequestSort(event, property);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material58.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material58.TableRow, { children: props.headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-    import_material58.TableCell,
-    {
-      className: classes.containerTh,
-      align: "left",
-      sortDirection: orderBy === headCell.id ? order : false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.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_runtime110.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_runtime111.jsx)(import_material59.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(import_material59.TableRow, { children: [
+    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime111.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_runtime111.jsxs)(
+      import_material59.TableCell,
+      {
+        className: classes.tableHeaderContent,
+        align: "left",
+        sx: { width: headCell.width ?? "auto" },
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime111.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_runtime111.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+              ]
+            }
+          ),
+          headCell.filterOptionsQuery ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+            SmartTableHeaderFilterMenu_default,
+            {
+              headCell,
+              headerFilters,
+              numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+              onApplyFilters,
+              shouldShowCheckOnFilter
+            }
+          ) : 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_runtime112 = require("react/jsx-runtime");
+var TableLoading = ({
+  rowsPerPage,
+  rowHeight
+}) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime112.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]);
@@ -7454,24 +7757,9 @@ function calculateRowsPerPage(rowHeight) {
   return 1;
 }
 
-// src/components/Table/TableLoading.tsx
-var import_material59 = require("@mui/material");
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var TableLoading = ({ rowsPerPage = 0, rowHeight }) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.Box, { children: Array.from({ length: rowsPerPage }).map((x, i) => /* @__PURE__ */ (0, import_jsx_runtime111.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_runtime112 = require("react/jsx-runtime");
-var useStyles46 = (0, import_mui52.makeStyles)()(() => ({
+var import_jsx_runtime113 = require("react/jsx-runtime");
+var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7505,12 +7793,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) => {
@@ -7522,7 +7810,7 @@ var Table = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react33.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -7548,25 +7836,25 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableCell, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material60.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      import_material60.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+      import_material61.TableCell,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-          import_material60.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          import_material61.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7577,52 +7865,61 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material60.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime113.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_runtime113 = 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_runtime114 = 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_runtime113.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.TableCell, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(EmptyGlassIcon_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Typography, { variant: "h6", children: "No results found." }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.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_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-    import_material61.TableCell,
+  const { classes } = useStyles48();
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+    import_material62.TableCell,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    import_material62.TableCell,
     {
       className: classes.tableCellDefault,
-      colSpan: 8,
+      colSpan,
       align: "center",
       children: "Nothing to display"
     }
@@ -7630,9 +7927,9 @@ var TableEmptyResult = ({
 };
 var TableEmptyResult_default = TableEmptyResult;
 
-// src/components/Table/TableDesktop.tsx
-var import_jsx_runtime114 = require("react/jsx-runtime");
-var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
+// src/components/TableDesktop/TableDesktop.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -7645,97 +7942,206 @@ 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",
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
-  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_runtime114.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ (0, import_jsx_runtime114.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_runtime115.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_runtime115.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.Paper, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_jsx_runtime115.Fragment, { children: [...Array(Math.floor(rowsPerPage ?? 50))].map(() => /* @__PURE__ */ (0, import_jsx_runtime115.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_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
-      import_material62.Table,
+    (0, import_uuid2.v4)()
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+      import_material63.Table,
       {
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
+        style: { tableLayout },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
             SmartTableHeader_default,
             {
-              headCells,
+              headCells: visibleHeadCells,
               order,
               orderBy,
-              onRequestSort: handleRequestSort
+              numSelected: selected.length,
+              numRows: data.length,
+              enableCheckboxSelection,
+              headerFilters: headerFilters ?? {},
+              onRequestSort: handleRequestSort,
+              onSelectAllClick: handleSelectAllClick,
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material62.TableBody, { children: [
-            stableSort2(data, getSorting2(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-              RenderItem,
-              {
-                ...{ ...item, index, deleteItem }
-              },
-              item[keyField] || (0, import_uuid2.v4)()
-            )),
-            rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-              TableEmptyResult_default,
-              {
-                showClearFilterButton,
-                handleClickOnClearFiltersButton
-              }
-            )
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            TableEmptyResult_default,
+            {
+              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+              showClearFilterButton,
+              handleClickOnClearFiltersButton
+            }
+          ) })
         ]
       }
     ) }),
@@ -7745,12 +8151,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_runtime115 = 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_runtime116 = require("react/jsx-runtime");
+var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -7758,9 +8164,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) => {
@@ -7794,24 +8200,24 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-    import_material63.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime116.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_runtime116 = 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_runtime117 = require("react/jsx-runtime");
+var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -7845,21 +8251,21 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles50();
+  const { classes } = useStyles51();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    import_material64.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+    import_material65.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material64.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_material64.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material65.Box, { className: classes.center, children: [
+          Icon3 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+            import_material65.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -7867,9 +8273,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon3 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } })
+          Icon3 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon3, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material65.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -7878,11 +8284,11 @@ 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_jsx_runtime117 = require("react/jsx-runtime");
-var useStyles51 = (0, import_mui57.makeStyles)()((theme) => ({
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -7976,57 +8382,38 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles51();
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  const { classes, cx } = useStyles52();
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime118.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_runtime118 = 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_runtime119 = require("react/jsx-runtime");
+var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
-  searchNatoora: {
-    width: "100%"
-  },
-  searchIcon: {
-    opacity: ".5"
-  },
-  inputRoot: {
-    color: "inherit"
-  },
-  inputInput: {
-    transition: theme.transitions.create("width"),
-    width: "100%"
-  },
   topBar: {
     display: "flex",
     gap: theme.spacing(1),
     backgroundColor: colors.topBar
-  },
-  drawer: {
-    backgroundColor: "black"
-  },
-  drawerItem: {
-    maxWidth: "300px",
-    width: "80vw"
-  },
-  offset: theme.mixins.toolbar
+  }
 }));
 var TheToolbar = ({
   imageLogoDarkSmall,
   imageLogoLightSmall,
   handleOpen,
-  LeftDrawer: LeftDrawer2
+  LeftDrawer: LeftDrawer2,
+  leftSection,
+  rightSection
 }) => {
-  const { classes } = useStyles52();
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+  const { classes } = useStyles53();
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material66.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_material66.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8035,7 +8422,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -8043,31 +8430,32 @@ var TheToolbar = ({
           imageLogoDarkSmall,
           imageLogoLightSmall
         }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Box, { ml: "auto", children: rightSection })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.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_runtime119 = require("react/jsx-runtime");
+var import_material67 = require("@mui/material");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-  import_material66.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  import_material67.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material66.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      import_material67.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8093,10 +8481,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_runtime120 = 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_runtime121 = require("react/jsx-runtime");
+var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -8124,21 +8512,21 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material67.Dialog,
+  const { classes } = useStyles54();
+  return /* @__PURE__ */ (0, import_jsx_runtime121.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_runtime120.jsx)(import_material67.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material67.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material67.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-            import_material67.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+            import_material68.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8146,23 +8534,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-            import_material67.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+            import_material68.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_material67.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8175,7 +8563,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8184,7 +8572,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8192,10 +8580,10 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     "svg",
     {
       width: "20",
@@ -8204,7 +8592,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         "path",
         {
           d: "M2.49967 11.6667L2.91634 11.725L6.72467 7.91667C6.57467 7.375 6.71634 6.75833 7.15801 6.325C7.80801 5.66667 8.85801 5.66667 9.50801 6.325C9.94967 6.75833 10.0913 7.375 9.94134 7.91667L12.083 10.0583L12.4997 10C12.6497 10 12.7913 10 12.9163 10.0583L15.8913 7.08333C15.833 6.95833 15.833 6.81667 15.833 6.66667C15.833 6.22464 16.0086 5.80072 16.3212 5.48816C16.6337 5.17559 17.0576 5 17.4997 5C17.9417 5 18.3656 5.17559 18.6782 5.48816C18.9907 5.80072 19.1663 6.22464 19.1663 6.66667C19.1663 7.10869 18.9907 7.53262 18.6782 7.84518C18.3656 8.15774 17.9417 8.33333 17.4997 8.33333C17.3497 8.33333 17.208 8.33333 17.083 8.275L14.108 11.25C14.1663 11.375 14.1663 11.5167 14.1663 11.6667C14.1663 12.1087 13.9907 12.5326 13.6782 12.8452C13.3656 13.1577 12.9417 13.3333 12.4997 13.3333C12.0576 13.3333 11.6337 13.1577 11.3212 12.8452C11.0086 12.5326 10.833 12.1087 10.833 11.6667L10.8913 11.25L8.74967 9.10833C8.48301 9.16667 8.18301 9.16667 7.91634 9.10833L4.10801 12.9167L4.16634 13.3333C4.16634 13.7754 3.99075 14.1993 3.67819 14.5118C3.36563 14.8244 2.9417 15 2.49967 15C2.05765 15 1.63372 14.8244 1.32116 14.5118C1.0086 14.1993 0.833008 13.7754 0.833008 13.3333C0.833008 12.8913 1.0086 12.4674 1.32116 12.1548C1.63372 11.8423 2.05765 11.6667 2.49967 11.6667Z",
@@ -8276,6 +8664,7 @@ var IconChart_default = SvgIconChart;
   SectionName,
   SmartSelect,
   SmartTableHeader,
+  SmartTableHeaderFilterMenu,
   SquareButton,
   SquareLabel,
   Switch,