@natoora-libs/core 0.1.14 → 0.1.16-dev-doug-1

package/dist/components/index.cjs

@@ -382,10 +382,10 @@ __export(components_exports, {
   SquareLabel: () => SquareLabel_default,
   Switch: () => Switch_default,
   Table: () => Table_default,
-  TableDesktop: () => TableDesktop_default,
+  TableDesktop: () => TableDesktop,
+  TableDesktopCell: () => TableDesktopCell,
+  TableDesktopEditableComponent: () => TableDesktopEditableComponent,
   TableDesktopFooter: () => TableDesktopFooter,
-  TableDesktopRowCell: () => TableDesktopRowCell,
-  TableDesktopSmartSelect: () => TableDesktopSmartSelect,
   TableEmptyResult: () => TableEmptyResult_default,
   TableHeader: () => TableHeader_default,
   TableLoading: () => TableLoading_default,
@@ -3017,7 +3017,7 @@ var RoundButton = ({
       onClick(e);
     }
   };
-  const Button15 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const Button16 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_material16.Fab,
     {
       className: cx(
@@ -3041,7 +3041,7 @@ var RoundButton = ({
       children: icon ? iconComponentMap[icon] : children || ""
     }
   );
-  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button15 }) : Button15;
+  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button16 }) : Button16;
 };
 var RoundButton_default = RoundButton;
 
@@ -6592,6 +6592,7 @@ var SmartSelect = (0, import_react29.forwardRef)(
     onChange,
     inputLabel,
     variant = "standard",
+    size,
     error,
     helperText,
     disabled,
@@ -6646,6 +6647,7 @@ var SmartSelect = (0, import_react29.forwardRef)(
       import_material55.FormControl,
       {
         fullWidth: true,
+        size,
         className: classes.container,
         error,
         variant,
@@ -6664,6 +6666,7 @@ var SmartSelect = (0, import_react29.forwardRef)(
             import_material55.Select,
             {
               ref,
+              size,
               disabled,
               labelId: "smart-select-label",
               value: value ?? "",
@@ -6797,467 +6800,13 @@ var LabelledSwitch = (0, import_mui51.withStyles)(LSwitch, (theme) => ({
 var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_react34 = require("react");
-var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
-var import_material61 = require("@mui/material");
-var import_classnames3 = __toESM(require("classnames"), 1);
-var import_mui55 = require("tss-react/mui");
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_react33 = require("react");
-var import_material60 = require("@mui/material");
-var import_mui54 = require("tss-react/mui");
-
-// src/components/SmartTableHeader/SmartTableHeader.tsx
 var import_react32 = require("react");
+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_mui52 = require("tss-react/mui");
 var import_jsx_runtime109 = 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"
-    }
-  },
-  visuallyHidden: {
-    border: 0,
-    clip: "rect(0 0 0 0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    top: 20,
-    width: 1
-  },
-  tableHeaderContent: {
-    borderBottom: "1px solid",
-    borderBottomColor: colors.neutral300,
-    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 = ({
-  order,
-  orderBy,
-  headCells,
-  numSelected,
-  numRows,
-  enableCheckboxSelection = false,
-  headerFilters,
-  onRequestSort,
-  onSelectAllClick,
-  onApplyFilters,
-  shouldShowCheckOnFilter
-}) => {
-  const { classes } = useStyles46();
-  const createSortHandler = (property) => (event) => {
-    onRequestSort(event, property);
-  };
-  const isSortActive = (headCellId) => orderBy === headCellId;
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.TableRow, { children: [
-    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-      import_material58.Checkbox,
-      {
-        color: "primary",
-        disableRipple: true,
-        indeterminate: numSelected > 0 && numSelected < numRows,
-        checked: numRows > 0 && numSelected === numRows,
-        onChange: onSelectAllClick
-      }
-    ) }) : null,
-    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-      import_material58.TableCell,
-      {
-        className: classes.tableHeaderContent,
-        align: "left",
-        width: headCell.width ?? "auto",
-        sortDirection: orderBy === headCell.id ? order : false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-          import_material58.Box,
-          {
-            display: "flex",
-            flexDirection: "row",
-            gap: headCell.disableSort ? 1 : 0,
-            children: [
-              headCell.disableSort ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-                import_material58.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_runtime109.jsx)("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
-                  ]
-                }
-              ),
-              headCell.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                SmartTableHeaderFilterMenu_default,
-                {
-                  headCell,
-                  headerFilters,
-                  numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
-                  onApplyFilters,
-                  shouldShowCheckOnFilter
-                }
-              ) : null
-            ]
-          }
-        )
-      },
-      headCell.id
-    ))
-  ] }) });
-};
-var SmartTableHeader_default = (0, import_react32.memo)(SmartTableHeader);
-
-// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
-var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
-var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
-var import_Typography = __toESM(require("@mui/material/Typography"), 1);
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
-  import_TableCell.default,
-  {
-    sx: {
-      py: 8,
-      gap: 2,
-      borderBottom: "none",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
-        "Use the column selector on the right to choose which fields",
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("br", {}),
-        "you want to display in the table"
-      ] })
-    ]
-  }
-) }) });
-
-// src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material59 = require("@mui/material");
-var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var useStyles47 = (0, import_mui53.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_runtime111.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-    import_material59.TableCell,
-    {
-      className: classes.tableCellIcon,
-      colSpan,
-      align: "center",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.Typography, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-          FilledButton_default,
-          {
-            copy: "Search",
-            variant: "contained",
-            color: "primary",
-            onClick: handleClickOnClearFiltersButton
-          }
-        )
-      ]
-    }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-    import_material59.TableCell,
-    {
-      className: classes.tableCellDefault,
-      colSpan,
-      align: "center",
-      children: "Nothing to display"
-    }
-  ) });
-};
-var TableEmptyResult_default = TableEmptyResult;
-
-// src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime112 = require("react/jsx-runtime");
-var ROW_HEIGHT = 56;
-var useStyles48 = (0, import_mui54.makeStyles)()((theme) => ({
-  root: {
-    justifyContent: "space-between",
-    display: "flex",
-    justifyItems: "stretch"
-  },
-  paper: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between"
-  },
-  container: {
-    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 descendingComparator = (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 (!valA && valB) {
-    return 1;
-  }
-  if (valA > valB) {
-    return -1;
-  }
-  if (valA < valB) {
-    return 1;
-  }
-  return 0;
-};
-var stableSort = (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) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
-var resolveOptionType = (option, fieldName) => {
-  if (!option || typeof option !== "object") {
-    return option;
-  }
-  return option[fieldName] || "";
-};
-var TableDesktop = ({
-  data,
-  headCells,
-  RenderItem,
-  appliedFilters,
-  headerFilters,
-  children,
-  height,
-  isLoading,
-  rowsPerPage = 50,
-  enableCheckboxSelection = false,
-  disableInternalSort = false,
-  updateSort,
-  showClearFilterButton,
-  handleClickOnClearFiltersButton,
-  deleteItem,
-  keyField = "id",
-  tableLayout = "auto",
-  onApplyFilters,
-  shouldShowCheckOnFilter
-}) => {
-  const { classes } = useStyles48();
-  const [order, setOrder] = (0, import_react33.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react33.useState)(
-    appliedFilters?.sortField || "delivery_date"
-  );
-  const [selected, setSelected] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
-  const [page] = (0, import_react33.useState)(0);
-  const numRows = data.length;
-  const emptyRows = (0, import_react33.useMemo)(
-    () => rowsPerPage - data.length,
-    [rowsPerPage, data]
-  );
-  const visibleHeadCells = (0, import_react33.useMemo)(
-    () => headCells.filter((headCell) => headCell?.enabled ?? true),
-    [headCells]
-  );
-  const handleSelectAllClick = (0, import_react33.useCallback)(
-    (event) => {
-      if (event.target.checked) {
-        const allItems = new Set(data.map((n) => n[keyField]));
-        setSelected(allItems);
-      } else {
-        setSelected(/* @__PURE__ */ new Set());
-      }
-    },
-    [data, keyField]
-  );
-  const handleRequestSort = (event, property) => {
-    const isAsc = orderBy === property && order === "asc";
-    const orderDir = isAsc ? "desc" : "asc";
-    setOrder(orderDir);
-    setOrderBy(property);
-    if (updateSort) {
-      updateSort(property, orderDir);
-    }
-  };
-  const handleRowCheckboxChange = (0, import_react33.useCallback)(
-    (event, keyFieldValue) => {
-      event.stopPropagation();
-      setSelected((prev) => {
-        const newSelected = new Set(prev);
-        if (newSelected.has(keyFieldValue)) {
-          newSelected.delete(keyFieldValue);
-        } else {
-          newSelected.add(keyFieldValue);
-        }
-        return newSelected;
-      });
-    },
-    []
-  );
-  const renderTableRows = (0, import_react33.useMemo)(() => {
-    if (isLoading) {
-      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-        import_material60.Skeleton,
-        {
-          animation: "pulse",
-          variant: "rounded",
-          height: ROW_HEIGHT - 33,
-          sx: { bgcolor: colors.neutral100 },
-          "data-testid": "loading-skeleton"
-        }
-      ) }, cellIndex)) }, rowIndex));
-    }
-    const sortedData = disableInternalSort ? data : stableSort(data, getComparator(order, orderBy));
-    return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
-      const isItemSelected = selected.has(row[keyField]);
-      return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-        RenderItem,
-        {
-          ...{
-            ...row,
-            index,
-            deleteItem,
-            isItemSelected,
-            enableCheckboxSelection,
-            rowHeight: ROW_HEIGHT,
-            rowId: row[keyField],
-            handleRowCheckboxChange,
-            visibleHeadCells
-          }
-        },
-        row[keyField] ?? index
-      );
-    });
-  }, [
-    data,
-    order,
-    orderBy,
-    page,
-    rowsPerPage,
-    selected,
-    isLoading,
-    numRows,
-    enableCheckboxSelection,
-    disableInternalSort,
-    deleteItem,
-    keyField,
-    handleRowCheckboxChange,
-    visibleHeadCells,
-    RenderItem
-  ]);
-  (0, import_react33.useEffect)(() => {
-    if (!enableCheckboxSelection) {
-      setSelected(/* @__PURE__ */ new Set());
-    }
-  }, [enableCheckboxSelection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material60.Paper, { className: classes.paper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      import_material60.Table,
-      {
-        stickyHeader: true,
-        "aria-labelledby": "tableTitle",
-        "aria-label": "sticky table",
-        style: { tableLayout },
-        children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-            SmartTableHeader_default,
-            {
-              headCells: visibleHeadCells,
-              order,
-              orderBy,
-              numSelected: selected.size,
-              numRows,
-              enableCheckboxSelection,
-              headerFilters: headerFilters ?? {},
-              onRequestSort: handleRequestSort,
-              onSelectAllClick: handleSelectAllClick,
-              onApplyFilters,
-              shouldShowCheckOnFilter
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-            TableEmptyResult_default,
-            {
-              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-              showClearFilterButton,
-              handleClickOnClearFiltersButton
-            }
-          ) })
-        ] })
-      }
-    ) }),
-    children
-  ] }) });
-};
-var TableDesktop_default = TableDesktop;
-
-// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
-var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   filterMenu: {
     display: "flex",
     flexDirection: "column"
@@ -7299,6 +6848,12 @@ var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
     margin: theme.spacing(1)
   }
 }));
+var resolveOptionType = (option, fieldName) => {
+  if (!option || typeof option !== "object") {
+    return option;
+  }
+  return option[fieldName] || "";
+};
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
     return item === filterOption;
@@ -7315,18 +6870,18 @@ var SmartTableHeaderFilterMenu = ({
   shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
-  const { classes } = useStyles49();
-  const [anchorEl, setAnchorEl] = (0, import_react34.useState)(null);
-  const [filterOptionsData, setFilterOptionsData] = (0, import_react34.useState)();
-  const [selectedFilters, setSelectedFilters] = (0, import_react34.useState)(
+  const { classes } = useStyles46();
+  const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
+  const [filterOptionsData, setFilterOptionsData] = (0, import_react32.useState)();
+  const [selectedFilters, setSelectedFilters] = (0, import_react32.useState)(
     headerFilters[headCell.id] ?? []
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (headCell.filterOptions) {
       setFilterOptionsData(headCell.filterOptions);
     }
   }, [headCell.filterOptions]);
-  const numFilterOptions = (0, import_react34.useMemo)(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
+  const numFilterOptions = (0, import_react32.useMemo)(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
   const numCurrentSelectedFilters = selectedFilters.length;
   const handleFilterMenuOpen = (event) => {
     if (!numFilterOptions) {
@@ -7362,24 +6917,24 @@ var SmartTableHeaderFilterMenu = ({
     onApplyFilters?.(updatedFilters, shouldSave);
     setAnchorEl(null);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setSelectedFilters(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  const isOptionChecked = (0, import_react34.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
+  const isOptionChecked = (0, import_react32.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
     (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
   ), [selectedFilters]);
-  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { "data-testid": "loading-skeletons", width: 272, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton })
+  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { "data-testid": "loading-skeletons", width: 272, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Skeleton, { variant: "rounded", className: classes.skeleton })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       ActiveFiltersIconButton_default,
       {
         numActiveFilters,
@@ -7389,8 +6944,8 @@ var SmartTableHeaderFilterMenu = ({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-      import_material61.Menu,
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      import_material58.Menu,
       {
         open: !!anchorEl,
         onClose: handleFilterMenuClose,
@@ -7398,13 +6953,13 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu",
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { className: classes.filterMenu, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-            import_material61.FormControlLabel,
+        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            import_material58.FormControlLabel,
             {
               label: "Select All",
-              control: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                import_material61.Checkbox,
+              control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                import_material58.Checkbox,
                 {
                   disableRipple: true,
                   checked: numCurrentSelectedFilters === numFilterOptions,
@@ -7420,21 +6975,21 @@ var SmartTableHeaderFilterMenu = ({
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Box, { className: classes.filterOptions, children: filterOptionsData?.map(
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Box, { className: classes.filterOptions, children: filterOptionsData?.map(
             (option) => {
               const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
-              return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-                import_material61.Box,
+              return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+                import_material58.Box,
                 {
                   className: classes.filter,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                      import_material61.FormControlLabel,
+                    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                      import_material58.FormControlLabel,
                       {
                         label: resolvedOption,
-                        control: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                          import_material61.Checkbox,
+                        control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                          import_material58.Checkbox,
                           {
                             disableRipple: true,
                             onChange: () => handleFilterOptionClick(option),
@@ -7444,16 +6999,16 @@ var SmartTableHeaderFilterMenu = ({
                       },
                       resolvedOption
                     ),
-                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
                   ]
                 },
                 resolvedOption
               );
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { className: classes.applyFilterButtonsContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               ExtendedButton_default,
               {
                 copy: "Save as Default",
@@ -7464,7 +7019,7 @@ var SmartTableHeaderFilterMenu = ({
                 onClick: () => handleApplyFilters(true)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               ExtendedButton_default,
               {
                 copy: "Apply",
@@ -7479,23 +7034,158 @@ var SmartTableHeaderFilterMenu = ({
     )
   ] });
 };
-var SmartTableHeaderFilterMenu_default = (0, import_react34.memo)(SmartTableHeaderFilterMenu);
+var SmartTableHeaderFilterMenu_default = (0, import_react32.memo)(SmartTableHeaderFilterMenu);
+
+// src/components/SmartTableHeader/SmartTableHeader.tsx
+var import_react33 = require("react");
+var import_material59 = require("@mui/material");
+var import_mui53 = require("tss-react/mui");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var useStyles47 = (0, import_mui53.makeStyles)()((theme) => ({
+  root: {
+    backgroundColor: colors.neutral100,
+    height: theme.spacing(6),
+    "& .MuiTableSortLabel-root": {
+      fontWeight: 600,
+      fontSize: ".875rem"
+    }
+  },
+  visuallyHidden: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    top: 20,
+    width: 1
+  },
+  tableHeaderContent: {
+    borderBottom: "1px solid",
+    borderBottomColor: colors.neutral300,
+    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 = ({
+  order,
+  orderBy,
+  headCells,
+  numSelected,
+  numRows,
+  enableCheckboxSelection = false,
+  headerFilters,
+  onRequestSort,
+  onSelectAllClick,
+  onApplyFilters,
+  shouldShowCheckOnFilter
+}) => {
+  const { classes } = useStyles47();
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+  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",
+        disableRipple: true,
+        indeterminate: numSelected > 0 && numSelected < numRows,
+        checked: numRows > 0 && numSelected === numRows,
+        onChange: onSelectAllClick
+      }
+    ) }) : null,
+    headCells.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      import_material59.TableCell,
+      {
+        className: classes.tableHeaderContent,
+        align: "left",
+        width: headCell.width ?? "auto",
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+          import_material59.Box,
+          {
+            display: "flex",
+            flexDirection: "row",
+            gap: headCell.disableSort ? 1 : 0,
+            children: [
+              headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Typography, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.Tooltip, { title: headCell.labelTooltip ?? "", arrow: true, 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.refetchFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                SmartTableHeaderFilterMenu_default,
+                {
+                  headCell,
+                  headerFilters,
+                  numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+                  onApplyFilters,
+                  shouldShowCheckOnFilter
+                }
+              ) : null
+            ]
+          }
+        )
+      },
+      headCell.id
+    ))
+  ] }) });
+};
+var SmartTableHeader_default = (0, import_react33.memo)(SmartTableHeader);
 
 // src/components/Table/Table.tsx
-var import_react35 = require("react");
-var import_material63 = require("@mui/material");
+var import_react34 = require("react");
+var import_material61 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
-var import_mui56 = require("tss-react/mui");
+var import_mui54 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
-var import_material62 = require("@mui/material");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_material60 = require("@mui/material");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-  import_material62.Skeleton,
+}) => /* @__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",
@@ -7508,7 +7198,7 @@ var TableLoading = ({
 var TableLoading_default = TableLoading;
 
 // src/components/Table/helpers.tsx
-function stableSort2(array, cmp) {
+function stableSort(array, cmp) {
   const stabilizedThis = array.map((el, index) => [el, index]);
   stabilizedThis.sort((a, b) => {
     const order = cmp(a[0], b[0]);
@@ -7519,7 +7209,7 @@ function stableSort2(array, cmp) {
   });
   return stabilizedThis.map((el) => el[0]);
 }
-function descendingComparator2(a, b, orderBy) {
+function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
   }
@@ -7529,7 +7219,7 @@ function descendingComparator2(a, b, orderBy) {
   return 0;
 }
 function getSorting(order, orderBy) {
-  return order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
+  return order === "desc" ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
 }
 function calculateRowsPerPage(rowHeight) {
   const appContainerDom = document.getElementById("mainContainer");
@@ -7543,8 +7233,8 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime115 = require("react/jsx-runtime");
-var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var useStyles48 = (0, import_mui54.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
     overflow: "scroll"
@@ -7565,7 +7255,7 @@ var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
     maxHeight: "calc(100% - 0)"
   }
 }));
-var Table2 = ({
+var Table = ({
   appliedFilters,
   data,
   doNotCalculateRows,
@@ -7578,12 +7268,12 @@ var Table2 = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = (0, import_react35.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_react35.useState)(defaultRowsPerPage);
-  const { classes } = useStyles50();
+  const [rowsPerPage, setRowsPerPage] = (0, import_react34.useState)(defaultRowsPerPage);
+  const { classes } = useStyles48();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
@@ -7595,7 +7285,7 @@ var Table2 = ({
       updateSort(property, orderDir);
     }
   };
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react34.useLayoutEffect)(() => {
     if (!doNotCalculateRows) {
       return;
     }
@@ -7615,31 +7305,31 @@ var Table2 = ({
   };
   const getTableRows = () => {
     const index = page;
-    const rows = serverRendered ? data : stableSort2(data, getSorting(order, orderBy)).slice(
+    const rows = serverRendered ? data : stableSort(data, getSorting(order, orderBy)).slice(
       index * rowsPerPage,
       index * rowsPerPage + rowsPerPage
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.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_runtime115.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.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_runtime115.jsx)(import_material63.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material63.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-      import_material63.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_runtime115.jsx)(
-          import_material63.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          import_material61.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7650,30 +7340,34 @@ var Table2 = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material63.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material61.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.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 = Table2;
+var Table_default = Table;
+
+// src/components/TableDesktop/TableDesktop.tsx
+var import_react35 = require("react");
+var import_material66 = require("@mui/material");
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
-var import_material64 = require("@mui/material");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_material62 = require("@mui/material");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var TableDesktopFooter = ({
   numPages,
   page,
   pageSize,
   pageSizeOptions,
-  handlePageChange,
-  handlePageSizeChange,
+  onPageChange,
+  onPageSizeChange,
   refetch,
   isFetching
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    import_material64.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    import_material62.Box,
     {
       py: 1,
       gap: 2,
@@ -7683,8 +7377,8 @@ var TableDesktopFooter = ({
       borderTop: `1px solid ${colors.neutral300}`,
       bgcolor: (theme) => theme.palette.background.default,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-          import_material64.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+          import_material62.Button,
           {
             disableRipple: true,
             variant: "outlined",
@@ -7698,7 +7392,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                 import_Refresh.default,
                 {
                   fontSize: "small",
@@ -7709,74 +7403,577 @@ var TableDesktopFooter = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material64.Box, { display: "flex", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material64.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.Typography, { children: "Rows per page:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-              import_material64.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material62.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+              import_material62.Select,
+              {
+                value: pageSize,
+                onChange: onPageSizeChange,
+                size: "small",
+                variant: "standard",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material62.MenuItem, { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            import_material62.Pagination,
+            {
+              color: "standard",
+              count: numPages,
+              page,
+              onChange: onPageChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
+var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
+var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
+var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
+var import_Typography = __toESM(require("@mui/material/Typography"), 1);
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+  import_TableCell.default,
+  {
+    sx: {
+      py: 8,
+      gap: 2,
+      borderBottom: "none",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
+        "Use the column selector on the right to choose which fields",
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("br", {}),
+        "you want to display in the table"
+      ] })
+    ]
+  }
+) }) });
+
+// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
+var import_material63 = require("@mui/material");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
+var TableDesktopLoadingState = ({
+  numRows,
+  rowsPerPage,
+  numColumns,
+  rowHeight
+}) => {
+  return getRange(Math.min(numRows, rowsPerPage)).map((rowNum) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    import_material63.Skeleton,
+    {
+      animation: "pulse",
+      variant: "rounded",
+      height: rowHeight - 33,
+      sx: { bgcolor: colors.neutral100 },
+      "data-testid": "loading-skeleton"
+    }
+  ) }, colNum)) }, rowNum));
+};
+
+// src/components/TableDesktopRows/TableDesktopRows.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+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 (!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.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 TableDesktopRows = ({
+  data,
+  RenderItem,
+  visibleHeadCells,
+  keyField,
+  order,
+  orderBy,
+  rowsPerPage,
+  isLoading,
+  disableInternalSort,
+  enableCheckboxSelection,
+  enableEditMode,
+  selectedRows,
+  handleRowCheckboxChange,
+  rowHeight,
+  deleteItem
+}) => {
+  const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      TableDesktopLoadingState,
+      {
+        numRows: data.length,
+        rowsPerPage,
+        numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
+        rowHeight
+      }
+    );
+  }
+  return sortedData.map((row, index) => {
+    const isItemSelected = selectedRows.has(row[keyField]);
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+      RenderItem,
+      {
+        ...{
+          ...row,
+          index,
+          deleteItem,
+          isItemSelected,
+          enableEditMode,
+          enableCheckboxSelection,
+          rowHeight,
+          rowId: row[keyField],
+          handleRowCheckboxChange,
+          visibleHeadCells
+        }
+      },
+      row[keyField] ?? index
+    );
+  });
+};
+
+// src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
+var import_material64 = require("@mui/material");
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var TableDesktopRowSelectionBar = ({
+  isEveryRowInPageSelected,
+  isRowsInAllPagesSelected,
+  numSelectedRows,
+  totalRowCount,
+  handleRowSelectionBarClick
+}) => {
+  return isEveryRowInPageSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+    import_material64.Box,
+    {
+      sx: {
+        p: 1,
+        gap: 2,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: colors.neutral150
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { children: isRowsInAllPagesSelected ? `All ${totalRowCount} rows are selected based on your filters.` : `All ${numSelectedRows} rows on this page are selected.` }),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Button, { onClick: handleRowSelectionBarClick, children: isRowsInAllPagesSelected ? "Clear Selection" : `Select all ${totalRowCount} rows from all pages based on your filters.` })
+      ]
+    }
+  ) : null;
+};
+
+// src/components/TableEmptyResult/TableEmptyResult.tsx
+var import_material65 = require("@mui/material");
+var import_mui55 = require("tss-react/mui");
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var useStyles49 = (0, import_mui55.makeStyles)()(() => ({
+  tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
+  tableCellDefault: { padding: 24 }
+}));
+var TableEmptyResult = ({
+  colSpan,
+  showClearFilterButton = false,
+  handleClickOnClearFiltersButton = () => {
+  }
+}) => {
+  const { classes } = useStyles49();
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+    import_material65.TableCell,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    import_material65.TableCell,
+    {
+      className: classes.tableCellDefault,
+      colSpan,
+      align: "center",
+      children: "Nothing to display"
+    }
+  ) });
+};
+var TableEmptyResult_default = TableEmptyResult;
+
+// src/components/TableDesktop/TableDesktop.tsx
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var TableDesktop = ({
+  data,
+  headCells,
+  RenderItem,
+  appliedFilters,
+  headerFilters,
+  children,
+  height,
+  rowHeight = 56,
+  totalDataCount,
+  isLoading,
+  rowsPerPage = 50,
+  enableEditMode = false,
+  enableCheckboxSelection = false,
+  disableInternalSort = false,
+  updateSort,
+  showClearFilterButton,
+  handleClickOnClearFiltersButton,
+  deleteItem,
+  keyField = "id",
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter,
+  components,
+  componentsProps
+}) => {
+  const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = (0, import_react35.useState)(
+    appliedFilters?.sortField || "delivery_date"
+  );
+  const [selectedRows, setSelectedRows] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
+  const [isRowsInAllPagesSelected, setIsRowsInAllPagesSelected] = (0, import_react35.useState)(false);
+  const { toolbar: Toolbar2 } = components ?? {};
+  const { toolbarProps, footerProps } = componentsProps ?? {};
+  const numRows = (0, import_react35.useMemo)(
+    () => data.length,
+    [data.length]
+  );
+  const emptyRows = (0, import_react35.useMemo)(
+    () => rowsPerPage - numRows,
+    [rowsPerPage, numRows]
+  );
+  const isEveryRowInPageSelected = (0, import_react35.useMemo)(
+    () => numRows > 0 && selectedRows.size === numRows,
+    [selectedRows, numRows]
+  );
+  const visibleHeadCells = (0, import_react35.useMemo)(
+    () => headCells.filter((headCell) => headCell?.enabled ?? true),
+    [headCells]
+  );
+  const handleRequestSort = (event, property) => {
+    const isAsc = orderBy === property && order === "asc";
+    const orderDir = isAsc ? "desc" : "asc";
+    setOrder(orderDir);
+    setOrderBy(property);
+    if (updateSort) {
+      updateSort(property, orderDir);
+    }
+  };
+  const resetSelectedRows = () => {
+    setSelectedRows(/* @__PURE__ */ new Set());
+    setIsRowsInAllPagesSelected(false);
+  };
+  const handleSelectAllClick = (event) => {
+    if (event.target.checked) {
+      const allRowsIds = new Set(data.map((n) => n[keyField]));
+      ;
+      setSelectedRows(allRowsIds);
+      return;
+    }
+    resetSelectedRows();
+  };
+  const handleRowCheckboxChange = (event, rowId) => {
+    event.stopPropagation();
+    setSelectedRows((prev) => {
+      const newSelected = new Set(prev);
+      if (newSelected.has(rowId)) {
+        newSelected.delete(rowId);
+      } else {
+        newSelected.add(rowId);
+      }
+      return newSelected;
+    });
+  };
+  const handleRowSelectionBarClick = () => {
+    if (isRowsInAllPagesSelected) {
+      resetSelectedRows();
+      return;
+    }
+    setIsRowsInAllPagesSelected(true);
+  };
+  const handlePageChange = (event, page) => {
+    resetSelectedRows();
+    footerProps?.onPageChange?.(event, page);
+  };
+  (0, import_react35.useEffect)(() => {
+    if (!enableCheckboxSelection) {
+      resetSelectedRows();
+    }
+  }, [enableCheckboxSelection]);
+  (0, import_react35.useEffect)(() => {
+    if (isEveryRowInPageSelected || isRowsInAllPagesSelected) {
+      const rowsIdsSet = new Set(data.map((obj) => obj[keyField]));
+      setSelectedRows(
+        (prev) => new Set([...prev].filter((value) => rowsIdsSet.has(value)))
+      );
+    }
+  }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsInAllPagesSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_material66.Box,
+    {
+      sx: {
+        height,
+        display: "flex",
+        justifyContent: "space-between",
+        justifyItems: "stretch"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+        import_material66.Paper,
+        {
+          sx: {
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between"
+          },
+          children: [
+            Toolbar2 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              Toolbar2,
               {
-                value: pageSize,
-                onChange: handlePageSizeChange,
-                size: "small",
-                variant: "standard",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.MenuItem, { value: size, children: size }, size))
+                selectedRows: [...selectedRows],
+                isRowsInAllPagesSelected,
+                ...toolbarProps
               }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-            import_material64.Pagination,
-            {
-              color: "standard",
-              count: numPages,
-              page,
-              onChange: handlePageChange
-            }
-          )
-        ] })
-      ]
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              TableDesktopRowSelectionBar,
+              {
+                isEveryRowInPageSelected,
+                isRowsInAllPagesSelected,
+                numSelectedRows: selectedRows.size,
+                totalRowCount: totalDataCount ?? 0,
+                handleRowSelectionBarClick
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+              import_material66.TableContainer,
+              {
+                sx: {
+                  flexGrow: 1,
+                  minHeight: 0,
+                  maxHeight: "100%",
+                  "&::-webkit-scrollbar": {
+                    width: "8px",
+                    height: "8px"
+                  },
+                  "&::-webkit-scrollbar-track": {
+                    backgroundColor: (theme) => theme.palette.grey[100]
+                  },
+                  "&::-webkit-scrollbar-thumb": {
+                    backgroundColor: (theme) => theme.palette.grey[400],
+                    borderRadius: "10px"
+                  },
+                  "&::-webkit-scrollbar-thumb:hover": {
+                    backgroundColor: (theme) => theme.palette.grey[500]
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                  import_material66.Table,
+                  {
+                    stickyHeader: true,
+                    "aria-label": "sticky-table",
+                    sx: { tableLayout },
+                    children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                        SmartTableHeader_default,
+                        {
+                          headCells: visibleHeadCells,
+                          order,
+                          orderBy,
+                          numSelected: selectedRows.size,
+                          numRows,
+                          enableCheckboxSelection,
+                          headerFilters: headerFilters ?? {},
+                          onRequestSort: handleRequestSort,
+                          onSelectAllClick: handleSelectAllClick,
+                          onApplyFilters,
+                          shouldShowCheckOnFilter
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.TableBody, { children: rowsPerPage !== emptyRows ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                        TableDesktopRows,
+                        {
+                          data,
+                          RenderItem,
+                          visibleHeadCells,
+                          keyField,
+                          order,
+                          orderBy,
+                          rowsPerPage,
+                          isLoading,
+                          disableInternalSort,
+                          enableCheckboxSelection,
+                          enableEditMode,
+                          selectedRows,
+                          handleRowCheckboxChange,
+                          rowHeight,
+                          deleteItem
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                        TableEmptyResult_default,
+                        {
+                          colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+                          showClearFilterButton,
+                          handleClickOnClearFiltersButton
+                        }
+                      ) })
+                    ] })
+                  }
+                )
+              }
+            ),
+            children,
+            footerProps ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(TableDesktopFooter, { ...footerProps, onPageChange: handlePageChange }) : null
+          ]
+        }
+      )
     }
   );
 };
 
-// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_react38 = require("react");
-var import_material65 = require("@mui/material");
+// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
+var import_material69 = require("@mui/material");
 
-// src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
+// src/components/TableDesktopEditableComponent/TableDesktopNumericField.tsx
 var import_react36 = require("react");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_material67 = require("@mui/material");
+var import_jsx_runtime120 = require("react/jsx-runtime");
+var TableDesktopNumericField = ({
+  rowId,
+  initialValue,
+  inputLabel,
+  disabled,
+  field,
+  variant = "standard",
+  size,
+  onUpdateEditableCell
+}) => {
+  const [input, setInput] = (0, import_react36.useState)(initialValue);
+  const commitValue = (value) => {
+    if (!onUpdateEditableCell) {
+      return;
+    }
+    onUpdateEditableCell(rowId ?? 0, field, value, value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitValue(input);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_material67.TextField,
+    {
+      fullWidth: true,
+      variant,
+      size,
+      value: input,
+      disabled,
+      label: inputLabel,
+      onKeyDown: handleKeyDown,
+      onChange: (e) => {
+        e.target.value = e.target.value.replace(/\D/g, "");
+        setInput(e.target.value);
+      },
+      onBlur: ({ target: { value } }) => {
+        commitValue(value);
+      },
+      slotProps: {
+        input: {
+          inputMode: "numeric"
+        }
+      }
+    }
+  );
+};
+
+// src/components/TableDesktopEditableComponent/TableDesktopSmartSelect.tsx
+var import_react37 = require("react");
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var resolveOptionType2 = (option, fieldName) => {
+  if (!option || typeof option !== "object") {
+    return option;
+  }
+  return option[fieldName] || "";
+};
 var resolveValue = (value) => {
   if (typeof value === "string") {
     return value;
   }
   return value?.id;
 };
-var TableDesktopSmartSelect = (0, import_react36.memo)(({
+var TableDesktopSmartSelect = (0, import_react37.memo)(({
   ref,
   initialValue,
   inputLabel,
+  field,
   fieldName,
   rowId,
   disabled,
+  variant = "standard",
+  size,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = (0, import_react36.useState)(initialValue);
-  const [options, setOptions] = (0, import_react36.useState)();
+  const [value, setValue] = (0, import_react37.useState)(initialValue);
+  const [options, setOptions] = (0, import_react37.useState)();
   const valueId = resolveValue(value);
-  const valueLabel = resolveOptionType(value, fieldName);
-  (0, import_react36.useEffect)(() => {
+  const valueLabel = resolveOptionType2(value, fieldName);
+  (0, import_react37.useEffect)(() => {
     if (filterOptions) {
       const parsedOptions = filterOptions?.map((option) => ({
         value: resolveValue(option),
-        label: String(resolveOptionType(option, fieldName))
+        label: String(resolveOptionType2(option, fieldName))
       }));
       setOptions(parsedOptions);
     }
   }, [filterOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     SmartSelect_default,
     {
       ref,
@@ -7784,191 +7981,252 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
       inputLabel,
       options,
       disabled,
+      variant,
+      size,
       refetch: refetchFilterOptions,
       isFetching: isFetchingFilterOptions,
       defaultOption: {
         value: valueId ?? "",
         label: String(valueLabel ?? "")
       },
-      onChange: ({ value: value2, label }) => {
-        setValue({ id: value2 ?? "", name: label ?? "" });
-        onUpdateEditableCell?.(rowId, value2 ?? "");
+      onChange: ({ value: id, label: name }) => {
+        if (!id || !name) {
+          return;
+        }
+        setValue({ id, name });
+        if (!onUpdateEditableCell) {
+          return;
+        }
+        onUpdateEditableCell(rowId ?? 0, field, id, name);
       }
     }
   );
 });
 
-// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
-
-// src/components/TableDesktopRowCell/TableDesktopTextField.tsx
-var import_TextField = __toESM(require("@mui/material/TextField"), 1);
-var import_react37 = require("react");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+// src/components/TableDesktopEditableComponent/TableDesktopTextField.tsx
+var import_react38 = require("react");
+var import_material68 = require("@mui/material");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
-  editInitialValue,
+  initialValue,
   inputLabel,
   disabled,
+  field,
+  variant = "standard",
+  size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = (0, import_react37.useState)(editInitialValue);
-  const hasError = (0, import_react37.useMemo)(() => !validateInput?.(value), [value, validateInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-    import_TextField.default,
+  const [input, setInput] = (0, import_react38.useState)(initialValue);
+  const hasValidationError = (0, import_react38.useMemo)(() => !validateInput?.(input), [input, validateInput]);
+  const commitValue = (value) => {
+    if (hasValidationError || !onUpdateEditableCell) {
+      return;
+    }
+    onUpdateEditableCell(rowId ?? 0, field, value, value);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitValue(input);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_material68.TextField,
     {
       fullWidth: true,
-      variant: "standard",
-      defaultValue: value,
+      variant,
+      size,
+      value: input,
       label: inputLabel,
-      error: hasError,
+      error: hasValidationError,
       disabled,
-      onChange: ({ target: { value: value2 } }) => {
-        setValue(value2);
+      onKeyDown: handleKeyDown,
+      onChange: ({ target: { value } }) => {
+        setInput(value);
       },
-      onBlur: ({ target: { value: value2 } }) => {
-        if (hasError) {
-          return;
-        }
-        onUpdateEditableCell?.(rowId, value2);
+      onBlur: ({ target: { value } }) => {
+        commitValue(value);
       }
     }
   );
 };
 
-// src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
-var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
-var import_jsx_runtime119 = require("react/jsx-runtime");
-var TableDesktopRowCell = ({
-  inputLabel,
+// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var TableDesktopEditableComponent = ({
   editInitialValue,
   rowId,
+  field,
   fieldName,
-  width,
   disabled,
-  readOnlyValue,
+  showCheckboxLabel = false,
+  variant = "standard",
+  size,
+  inputLabel,
   editableCellType,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
   validateInput,
-  onUpdateEditableCell,
-  onCellClick
+  onUpdateEditableCell
 }) => {
-  const cellRef = (0, import_react38.useRef)(null);
-  const [isOverflowed, setIsOverflowed] = (0, import_react38.useState)(false);
-  const [isCellHovered, setIsCellHovered] = (0, import_react38.useState)(false);
-  const [isEditMode, setIsEditMode] = (0, import_react38.useState)(false);
-  (0, import_react38.useEffect)(() => {
-    const ref = cellRef.current;
-    if (ref) {
-      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
-    }
-  }, [readOnlyValue, width]);
-  (0, import_react38.useEffect)(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        setIsEditMode(false);
-      }
-    };
-    if (isEditMode) {
-      window.addEventListener("keydown", handleKeyDown);
-    }
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isEditMode]);
   const editableComponents = {
-    "select": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    "select": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       TableDesktopSmartSelect,
       {
         rowId,
+        field,
         fieldName,
         disabled,
+        variant,
+        size,
         initialValue: editInitialValue,
-        inputLabel: inputLabel ?? "",
+        inputLabel,
         filterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material65.Checkbox,
+    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      import_material69.FormControlLabel,
       {
-        disableRipple: true,
-        disabled,
-        defaultChecked: editInitialValue,
-        onChange: ({ target: { checked } }) => {
-          onUpdateEditableCell?.(rowId, checked);
-        }
+        label: showCheckboxLabel ? inputLabel : "",
+        control: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+          import_material69.Checkbox,
+          {
+            disableRipple: true,
+            disabled,
+            defaultChecked: editInitialValue,
+            onChange: ({ target: { checked } }) => {
+              if (!onUpdateEditableCell) {
+                return;
+              }
+              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
+            }
+          }
+        )
       }
     ),
-    "text": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    "text": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       TableDesktopTextField,
       {
         rowId,
         disabled,
-        editInitialValue,
+        variant,
+        size,
+        field,
+        initialValue: editInitialValue,
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    "numeric": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material65.TextField,
+    "numeric": /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      TableDesktopNumericField,
       {
-        fullWidth: true,
-        variant: "standard",
+        rowId,
         disabled,
-        defaultValue: editInitialValue,
-        label: inputLabel,
-        onChange: (e) => {
-          e.target.value = e.target.value.replace(/\D/g, "");
-        },
-        onBlur: ({ target: { value } }) => {
-          onUpdateEditableCell?.(rowId, value);
-        },
-        slotProps: {
-          input: {
-            inputMode: "numeric"
-          }
-        }
+        variant,
+        size,
+        field,
+        initialValue: editInitialValue,
+        inputLabel: inputLabel ?? "",
+        onUpdateEditableCell
       }
     )
   };
-  const getReadOnlyBooleanIcon = (value) => {
-    if (value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+  return editableComponents[editableCellType];
+};
+
+// src/components/TableDesktopCell/TableDesktopCell.tsx
+var import_react39 = require("react");
+var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
+var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
+var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
+var import_material70 = require("@mui/material");
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var getReadOnlyBooleanIcon = (value) => {
+  if (value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+  }
+  return "-";
+};
+var renderReadOnlyValue = (value) => {
+  if (typeof value === "boolean") {
+    return getReadOnlyBooleanIcon(value);
+  }
+  return value;
+};
+var getCellBackgroundColor = (isCellInEditMode) => ({
+  background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100
+});
+var TableDesktopCell = ({
+  inputLabel,
+  editInitialValue,
+  rowId,
+  field,
+  fieldName,
+  width,
+  enableEditMode,
+  disabled,
+  readOnlyValue,
+  editableCellType,
+  filterOptions,
+  refetchFilterOptions,
+  isFetchingFilterOptions,
+  validateInput,
+  onUpdateEditableCell,
+  onCellClick
+}) => {
+  const cellRef = (0, import_react39.useRef)(null);
+  const [isOverflowed, setIsOverflowed] = (0, import_react39.useState)(false);
+  const [isCellHovered, setIsCellHovered] = (0, import_react39.useState)(false);
+  const [isCellInEditMode, setIsCellInEditMode] = (0, import_react39.useState)(false);
+  (0, import_react39.useEffect)(() => {
+    const ref = cellRef.current;
+    if (ref) {
+      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
     }
-    return "-";
-  };
+  }, [readOnlyValue, width]);
+  (0, import_react39.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsCellInEditMode(false);
+      }
+    };
+    if (isCellInEditMode) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isCellInEditMode]);
   const handleEditClick = (e) => {
     e.stopPropagation();
-    setIsEditMode((prev) => !prev);
+    setIsCellInEditMode((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material65.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material65.TableCell,
+  const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    import_material70.TableCell,
     {
       align: "left",
-      onMouseEnter: () => editableCellType && !disabled && setIsCellHovered(true),
-      onMouseLeave: () => editableCellType && !disabled && setIsCellHovered(false),
-      onClick: (event) => !disabled && onCellClick?.(event, isEditMode),
+      onMouseEnter: () => isCellEditable && setIsCellHovered(true),
+      onMouseLeave: () => isCellEditable && setIsCellHovered(false),
+      onClick: (event) => !disabled && onCellClick?.(event, isCellInEditMode),
       sx: {
         padding: 1,
         width: width ?? "auto",
         position: "relative",
-        cursor: disabled ? "default" : "pointer",
+        cursor: disabled || !enableEditMode ? "default" : "pointer",
         opacity: disabled ? 0.2 : 1,
-        ":hover": editableCellType && {
-          background: isEditMode ? colors.lightBlueBackground : colors.neutral100
-        },
-        background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
+        ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
+        background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-        import_material65.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+        import_material70.Box,
         {
           p: 1,
           ref: cellRef,
@@ -7976,8 +8234,8 @@ var TableDesktopRowCell = ({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           children: [
-            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material65.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              import_material65.IconButton,
+            enableEditMode && isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material70.Tooltip, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+              import_material70.IconButton,
               {
                 onClick: handleEditClick,
                 sx: {
@@ -7986,15 +8244,31 @@ var TableDesktopRowCell = ({
                   zIndex: 1,
                   borderRadius: 0,
                   position: "absolute",
-                  background: isEditMode ? colors.lightBlueBackground : colors.neutral100,
+                  background: isCellInEditMode ? colors.lightBlueBackground : colors.neutral100,
                   "&:hover": {
-                    backgroundColor: isEditMode ? colors.lightBlueBackground : colors.neutral150
+                    backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
                   }
                 },
-                children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Edit.default, { fontSize: "small" })
+                children: isCellInEditMode ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_Edit.default, { fontSize: "small" })
               }
             ) }) : null,
-            isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+            enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+              TableDesktopEditableComponent,
+              {
+                editInitialValue,
+                rowId,
+                field,
+                fieldName,
+                disabled,
+                inputLabel: inputLabel ?? "",
+                editableCellType,
+                filterOptions,
+                refetchFilterOptions,
+                isFetchingFilterOptions,
+                validateInput,
+                onUpdateEditableCell
+              }
+            ) : renderReadOnlyValue(readOnlyValue)
           ]
         }
       )
@@ -8003,12 +8277,12 @@ var TableDesktopRowCell = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material66 = require("@mui/material");
-var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime120 = require("react/jsx-runtime");
-var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
+var import_material71 = require("@mui/material");
+var import_mui56 = require("tss-react/mui");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -8016,9 +8290,9 @@ var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = (0, import_react39.useState)([]);
-  const { classes } = useStyles51();
-  (0, import_react39.useEffect)(() => {
+  const [sortableCells, setSortableCells] = (0, import_react40.useState)([]);
+  const { classes } = useStyles50();
+  (0, import_react40.useEffect)(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -8052,8 +8326,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material66.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material66.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_material71.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -8063,13 +8337,13 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = (0, import_react39.memo)(TableHeader);
+var TableHeader_default = (0, import_react40.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material67 = require("@mui/material");
-var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime121 = require("react/jsx-runtime");
-var useStyles52 = (0, import_mui58.makeStyles)()(() => ({
+var import_material72 = require("@mui/material");
+var import_mui57 = require("tss-react/mui");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   icon: {
     fontSize: 20
   },
@@ -8103,21 +8377,21 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles52();
+  const { classes } = useStyles51();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
-    import_material67.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
+    import_material72.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material67.Box, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-            import_material67.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_material72.Box, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+            import_material72.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -8125,9 +8399,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -8136,11 +8410,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 var import_react_dates = require("react-dates");
-var import_mui59 = 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_runtime122 = require("react/jsx-runtime");
-var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
+var import_jsx_runtime127 = require("react/jsx-runtime");
+var useStyles52 = (0, import_mui58.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -8234,17 +8508,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  const { classes, cx } = useStyles52();
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-var import_react40 = require("react");
-var import_material68 = require("@mui/material");
-var import_mui60 = require("tss-react/mui");
-var import_jsx_runtime123 = require("react/jsx-runtime");
-var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
+var import_react41 = require("react");
+var import_material73 = require("@mui/material");
+var import_mui59 = require("tss-react/mui");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -8262,10 +8536,10 @@ var TheToolbar = ({
   leftSection,
   rightSection
 }) => {
-  const { classes } = useStyles54();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material68.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material68.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  const { classes } = useStyles53();
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material73.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_material73.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8274,7 +8548,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -8283,31 +8557,31 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material68.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = (0, import_react40.memo)(TheToolbar);
+var TheToolbar_default = (0, import_react41.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material69 = require("@mui/material");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_material74 = require("@mui/material");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-  import_material69.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  import_material74.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material69.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      import_material74.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8333,10 +8607,10 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material70 = require("@mui/material");
-var import_mui61 = require("tss-react/mui");
-var import_jsx_runtime125 = require("react/jsx-runtime");
-var useStyles55 = (0, import_mui61.makeStyles)()((theme) => ({
+var import_material75 = require("@mui/material");
+var import_mui60 = require("tss-react/mui");
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -8364,21 +8638,21 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles55();
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    import_material70.Dialog,
+  const { classes } = useStyles54();
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    import_material75.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material70.Backdrop,
+      BackdropComponent: import_material75.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-            import_material70.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+            import_material75.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8386,23 +8660,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
-            import_material70.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+            import_material75.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_material75.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_material75.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8415,7 +8689,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8424,7 +8698,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8432,30 +8706,30 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-var import_react41 = require("react");
-var import_material71 = require("@mui/material");
-var import_jsx_runtime126 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-    import_material71.Avatar,
+var import_react42 = require("react");
+var import_material76 = require("@mui/material");
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_material76.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material71.Typography, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material76.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_material76.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = (0, import_react41.memo)(UserBust);
+var UserBust_default = (0, import_react42.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "svg",
     {
       width: "20",
@@ -8464,7 +8738,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime132.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",
@@ -8543,9 +8817,9 @@ var IconChart_default = SvgIconChart;
   Switch,
   Table,
   TableDesktop,
+  TableDesktopCell,
+  TableDesktopEditableComponent,
   TableDesktopFooter,
-  TableDesktopRowCell,
-  TableDesktopSmartSelect,
   TableEmptyResult,
   TableHeader,
   TableLoading,