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

package/dist/components/index.js

@@ -2781,7 +2781,7 @@ var RoundButton = ({
       onClick(e);
     }
   };
-  const Button15 = /* @__PURE__ */ jsx63(
+  const Button16 = /* @__PURE__ */ jsx63(
     Fab,
     {
       className: cx(
@@ -2805,7 +2805,7 @@ var RoundButton = ({
       children: icon ? iconComponentMap[icon] : children || ""
     }
   );
-  return tooltip ? /* @__PURE__ */ jsx63(Tooltip2, { title: tooltip, children: Button15 }) : Button15;
+  return tooltip ? /* @__PURE__ */ jsx63(Tooltip2, { title: tooltip, children: Button16 }) : Button16;
 };
 var RoundButton_default = RoundButton;
 
@@ -6382,6 +6382,7 @@ var SmartSelect = forwardRef2(
     onChange,
     inputLabel,
     variant = "standard",
+    size,
     error,
     helperText,
     disabled,
@@ -6436,6 +6437,7 @@ var SmartSelect = forwardRef2(
       FormControl4,
       {
         fullWidth: true,
+        size,
         className: classes.container,
         error,
         variant,
@@ -6454,6 +6456,7 @@ var SmartSelect = forwardRef2(
             Select3,
             {
               ref,
+              size,
               disabled,
               labelId: "smart-select-label",
               value: value ?? "",
@@ -6587,52 +6590,265 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
 var Switch_default = memo19(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import { useMemo as useMemo3, useState as useState16, useEffect as useEffect11, memo as memo21 } from "react";
+import { useMemo as useMemo2, useState as useState15, useEffect as useEffect10, memo as memo20 } from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import {
-  Box as Box29,
-  Checkbox as Checkbox5,
+  Box as Box28,
+  Checkbox as Checkbox4,
   Divider as Divider9,
   FormControlLabel as FormControlLabel3,
   Menu as Menu4,
-  Skeleton as Skeleton3,
+  Skeleton as Skeleton2,
   Tooltip as Tooltip6
 } from "@mui/material";
 import classNames3 from "classnames";
-import { makeStyles as makeStyles48 } from "tss-react/mui";
-
-// src/components/TableDesktop/TableDesktop.tsx
-import {
-  useCallback as useCallback2,
-  useMemo as useMemo2,
-  useState as useState15,
-  useEffect as useEffect10
-} from "react";
-import {
-  Paper as Paper10,
-  Table,
-  TableBody as TableBody2,
-  TableContainer,
-  Skeleton as Skeleton2,
-  TableRow as TableRow4,
-  TableCell as TableCell4
-} from "@mui/material";
-import { makeStyles as makeStyles47 } from "tss-react/mui";
+import { makeStyles as makeStyles45 } from "tss-react/mui";
+import { Fragment as Fragment11, jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
+var useStyles45 = makeStyles45()((theme) => ({
+  filterMenu: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  filterOptions: {
+    maxHeight: theme.spacing(62),
+    overflowY: "auto",
+    "&::-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]
+    }
+  },
+  filter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(0, 3)
+  },
+  applyFilterButtonsContainer: {
+    display: "flex",
+    padding: theme.spacing(0, 1),
+    justifyContent: "space-between"
+  },
+  saveAsDefaultButton: {
+    color: theme.palette.primary.main
+  },
+  skeleton: {
+    height: theme.spacing(3),
+    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;
+  }
+  if (typeof item === "object" && typeof filterOption === "object") {
+    return item.id === filterOption.id;
+  }
+  return false;
+});
+var SmartTableHeaderFilterMenu = ({
+  headCell,
+  numActiveFilters,
+  headerFilters,
+  shouldShowCheckOnFilter,
+  onApplyFilters
+}) => {
+  const { classes } = useStyles45();
+  const [anchorEl, setAnchorEl] = useState15(null);
+  const [filterOptionsData, setFilterOptionsData] = useState15();
+  const [selectedFilters, setSelectedFilters] = useState15(
+    headerFilters[headCell.id] ?? []
+  );
+  useEffect10(() => {
+    if (headCell.filterOptions) {
+      setFilterOptionsData(headCell.filterOptions);
+    }
+  }, [headCell.filterOptions]);
+  const numFilterOptions = useMemo2(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
+  const numCurrentSelectedFilters = selectedFilters.length;
+  const handleFilterMenuOpen = (event) => {
+    if (!numFilterOptions) {
+      headCell.refetchFilterOptions?.();
+    }
+    setAnchorEl(event.currentTarget);
+  };
+  const handleFilterMenuClose = () => {
+    setSelectedFilters(headerFilters[headCell.id]);
+    setAnchorEl(null);
+  };
+  const handleFilterOptionClick = (option) => {
+    const selectedIndex = findFilterIndex(selectedFilters, option);
+    let newSelected;
+    if (selectedIndex === -1) {
+      if (typeof option === "string") {
+        newSelected = [...selectedFilters, option];
+      } else {
+        newSelected = [...selectedFilters, option];
+      }
+    } else {
+      newSelected = selectedFilters.filter(
+        (_, index) => index !== selectedIndex
+      );
+    }
+    setSelectedFilters(newSelected);
+  };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  useEffect10(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = useMemo2(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
+  ), [selectedFilters]);
+  const loadingSkeletons = /* @__PURE__ */ jsxs73(Box28, { "data-testid": "loading-skeletons", width: 272, children: [
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ jsx108(Divider9, {}),
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ jsx108(Divider9, {}),
+    /* @__PURE__ */ jsx108(Skeleton2, { variant: "rounded", className: classes.skeleton })
+  ] });
+  return /* @__PURE__ */ jsxs73(Fragment11, { children: [
+    /* @__PURE__ */ jsx108(
+      ActiveFiltersIconButton_default,
+      {
+        numActiveFilters,
+        handleClick: handleFilterMenuOpen,
+        className: classNames3("filter-menu-trigger", {
+          "has-active-filters": !!numActiveFilters || !!anchorEl
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx108(
+      Menu4,
+      {
+        open: !!anchorEl,
+        onClose: handleFilterMenuClose,
+        anchorEl,
+        "data-testid": "filter-menu",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ jsxs73(Box28, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ jsx108(Box28, { px: 3, mb: 0.5, children: /* @__PURE__ */ jsx108(
+            FormControlLabel3,
+            {
+              label: "Select All",
+              control: /* @__PURE__ */ jsx108(
+                Checkbox4,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptionsData]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx108(Divider9, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ jsx108(Box28, { className: classes.filterOptions, children: filterOptionsData?.map(
+            (option) => {
+              const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
+              return /* @__PURE__ */ jsxs73(
+                Box28,
+                {
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ jsx108(
+                      FormControlLabel3,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ jsx108(
+                          Checkbox4,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ jsx108(Tooltip6, { title: "This filter is saved as default", children: /* @__PURE__ */ jsx108(CheckIcon, { fontSize: "small", color: "action" }) }) : null
+                  ]
+                },
+                resolvedOption
+              );
+            }
+          ) }),
+          /* @__PURE__ */ jsx108(Divider9, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ jsxs73(Box28, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ jsx108(
+              ExtendedButton_default,
+              {
+                copy: "Save as Default",
+                buttonType: "button",
+                variant: "text",
+                tooltip: "Persists those filters for future visits",
+                className: classes.saveAsDefaultButton,
+                onClick: () => handleApplyFilters(true)
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ExtendedButton_default,
+              {
+                copy: "Apply",
+                color: "primary",
+                buttonType: "submit",
+                onClick: () => handleApplyFilters(false)
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+var SmartTableHeaderFilterMenu_default = memo20(SmartTableHeaderFilterMenu);
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
-import { memo as memo20 } from "react";
+import { memo as memo21 } from "react";
 import {
-  Box as Box28,
-  Checkbox as Checkbox4,
+  Box as Box29,
+  Checkbox as Checkbox5,
   TableCell,
   TableHead,
   TableRow,
   TableSortLabel,
+  Tooltip as Tooltip7,
   Typography as Typography25
 } from "@mui/material";
-import { makeStyles as makeStyles45 } from "tss-react/mui";
-import { jsx as jsx108, jsxs as jsxs73 } from "react/jsx-runtime";
-var useStyles45 = makeStyles45()((theme) => ({
+import { makeStyles as makeStyles46 } from "tss-react/mui";
+import { jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
+var useStyles46 = makeStyles46()((theme) => ({
   root: {
     backgroundColor: colors.neutral100,
     height: theme.spacing(6),
@@ -6699,14 +6915,14 @@ var SmartTableHeader = ({
   onApplyFilters,
   shouldShowCheckOnFilter
 }) => {
-  const { classes } = useStyles45();
+  const { classes } = useStyles46();
   const createSortHandler = (property) => (event) => {
     onRequestSort(event, property);
   };
   const isSortActive = (headCellId) => orderBy === headCellId;
-  return /* @__PURE__ */ jsx108(TableHead, { className: classes.root, children: /* @__PURE__ */ jsxs73(TableRow, { children: [
-    enableCheckboxSelection ? /* @__PURE__ */ jsx108(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx108(
-      Checkbox4,
+  return /* @__PURE__ */ jsx109(TableHead, { className: classes.root, children: /* @__PURE__ */ jsxs74(TableRow, { children: [
+    enableCheckboxSelection ? /* @__PURE__ */ jsx109(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx109(
+      Checkbox5,
       {
         color: "primary",
         disableRipple: true,
@@ -6715,21 +6931,21 @@ var SmartTableHeader = ({
         onChange: onSelectAllClick
       }
     ) }) : null,
-    headCells.map((headCell) => /* @__PURE__ */ jsx108(
+    headCells.map((headCell) => /* @__PURE__ */ jsx109(
       TableCell,
       {
         className: classes.tableHeaderContent,
         align: "left",
         width: headCell.width ?? "auto",
         sortDirection: orderBy === headCell.id ? order : false,
-        children: /* @__PURE__ */ jsxs73(
-          Box28,
+        children: /* @__PURE__ */ jsxs74(
+          Box29,
           {
             display: "flex",
             flexDirection: "row",
             gap: headCell.disableSort ? 1 : 0,
             children: [
-              headCell.disableSort ? /* @__PURE__ */ jsx108(Typography25, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) : /* @__PURE__ */ jsxs73(
+              headCell.disableSort ? headCell.RenderHeader ?? /* @__PURE__ */ jsx109(Tooltip7, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx109(Typography25, { variant: "subtitle2", mt: 0.25, fontWeight: 600, children: headCell.label }) }) : /* @__PURE__ */ jsx109(Tooltip7, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs74(
                 TableSortLabel,
                 {
                   "data-testid": "table-sort-label",
@@ -6738,11 +6954,11 @@ var SmartTableHeader = ({
                   onClick: createSortHandler(headCell.id),
                   children: [
                     headCell.RenderHeader ?? headCell.label,
-                    orderBy === headCell.id ? /* @__PURE__ */ jsx108("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+                    orderBy === headCell.id ? /* @__PURE__ */ jsx109("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
                   ]
                 }
-              ),
-              headCell.refetchFilterOptions ? /* @__PURE__ */ jsx108(
+              ) }),
+              headCell.refetchFilterOptions ? /* @__PURE__ */ jsx109(
                 SmartTableHeaderFilterMenu_default,
                 {
                   headCell,
@@ -6760,93 +6976,85 @@ var SmartTableHeader = ({
     ))
   ] }) });
 };
-var SmartTableHeader_default = memo20(SmartTableHeader);
+var SmartTableHeader_default = memo21(SmartTableHeader);
 
-// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-import TableBody from "@mui/material/TableBody";
-import TableCell2 from "@mui/material/TableCell";
-import TableRow2 from "@mui/material/TableRow";
-import Typography26 from "@mui/material/Typography";
-import { jsx as jsx109, jsxs as jsxs74 } from "react/jsx-runtime";
-var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ jsx109(TableBody, { children: /* @__PURE__ */ jsx109(TableRow2, { children: /* @__PURE__ */ jsxs74(
-  TableCell2,
-  {
-    sx: {
-      py: 8,
-      gap: 2,
-      borderBottom: "none",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    children: [
-      /* @__PURE__ */ jsx109(Typography26, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ jsxs74(Typography26, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
-        "Use the column selector on the right to choose which fields",
-        /* @__PURE__ */ jsx109("br", {}),
-        "you want to display in the table"
-      ] })
-    ]
-  }
-) }) });
+// src/components/Table/Table.tsx
+var import_debounce = __toESM(require_debounce(), 1);
+import { useLayoutEffect, useState as useState16 } from "react";
+import {
+  Box as Box31,
+  Paper as Paper10,
+  Table as MUITable,
+  TableBody,
+  TableCell as TableCell2,
+  TableContainer,
+  TableHead as TableHead2,
+  TableRow as TableRow2,
+  TableSortLabel as TableSortLabel2
+} from "@mui/material";
+import { makeStyles as makeStyles47 } from "tss-react/mui";
+import { v4 as uuidv4 } from "uuid";
 
-// src/components/TableEmptyResult/TableEmptyResult.tsx
-import { TableCell as TableCell3, TableRow as TableRow3, Typography as Typography27 } from "@mui/material";
-import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx110, jsxs as jsxs75 } from "react/jsx-runtime";
-var useStyles46 = makeStyles46()(() => ({
-  tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
-  tableCellDefault: { padding: 24 }
-}));
-var TableEmptyResult = ({
-  colSpan,
-  showClearFilterButton = false,
-  handleClickOnClearFiltersButton = () => {
-  }
-}) => {
-  const { classes } = useStyles46();
-  return showClearFilterButton ? /* @__PURE__ */ jsx110(TableRow3, { children: /* @__PURE__ */ jsxs75(
-    TableCell3,
-    {
-      className: classes.tableCellIcon,
-      colSpan,
-      align: "center",
-      children: [
-        /* @__PURE__ */ jsx110(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ jsx110(Typography27, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ jsx110(Typography27, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ jsx110(
-          FilledButton_default,
-          {
-            copy: "Search",
-            variant: "contained",
-            color: "primary",
-            onClick: handleClickOnClearFiltersButton
-          }
-        )
-      ]
-    }
-  ) }) : /* @__PURE__ */ jsx110(TableRow3, { children: /* @__PURE__ */ jsx110(
-    TableCell3,
-    {
-      className: classes.tableCellDefault,
-      colSpan,
-      align: "center",
-      children: "Nothing to display"
+// src/components/TableLoading/TableLoading.tsx
+import { Box as Box30, Skeleton as Skeleton3 } from "@mui/material";
+import { jsx as jsx110 } from "react/jsx-runtime";
+var TableLoading = ({
+  rowsPerPage,
+  rowHeight
+}) => /* @__PURE__ */ jsx110(Box30, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx110(
+  Skeleton3,
+  {
+    animation: "pulse",
+    "data-testid": "table-loading-skeleton",
+    style: { margin: "8px", opacity: 0.4 },
+    variant: "rectangular",
+    height: rowHeight
+  },
+  index
+)) });
+var TableLoading_default = TableLoading;
+
+// src/components/Table/helpers.tsx
+function stableSort(array, cmp) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = cmp(a[0], b[0]);
+    if (order !== 0) {
+      return order;
     }
-  ) });
-};
-var TableEmptyResult_default = TableEmptyResult;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+function getSorting(order, orderBy) {
+  return order === "desc" ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
+}
+function calculateRowsPerPage(rowHeight) {
+  const appContainerDom = document.getElementById("mainContainer");
+  const headerDom = document.getElementById("aboveTableHeader");
+  if (appContainerDom && headerDom) {
+    return Math.floor(
+      (appContainerDom.clientHeight - headerDom.clientHeight - 24) / rowHeight - 2
+    );
+  }
+  return 1;
+}
 
-// src/components/TableDesktop/TableDesktop.tsx
-import { Fragment as Fragment11, jsx as jsx111, jsxs as jsxs76 } from "react/jsx-runtime";
-var ROW_HEIGHT = 56;
-var useStyles47 = makeStyles47()((theme) => ({
+// src/components/Table/Table.tsx
+import { jsx as jsx111, jsxs as jsxs75 } from "react/jsx-runtime";
+var useStyles47 = makeStyles47()(() => ({
   root: {
-    justifyContent: "space-between",
-    display: "flex",
-    justifyItems: "stretch"
+    height: "calc(100vh - 262px)",
+    overflow: "scroll"
   },
   paper: {
     width: "100%",
@@ -6854,105 +7062,37 @@ var useStyles47 = makeStyles47()((theme) => ({
     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]
+  header: {
+    "& .MuiTableSortLabel-root": {
+      fontWeight: 600,
+      fontSize: ".875rem"
     }
+  },
+  container: {
+    maxHeight: "calc(100% - 0)"
   }
 }));
-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 = ({
+var Table = ({
+  appliedFilters,
   data,
+  doNotCalculateRows,
   headCells,
-  RenderItem,
-  appliedFilters,
-  headerFilters,
-  children,
-  height,
   isLoading,
-  rowsPerPage = 50,
-  enableCheckboxSelection = false,
-  disableInternalSort = false,
-  updateSort,
-  showClearFilterButton,
-  handleClickOnClearFiltersButton,
-  deleteItem,
-  keyField = "id",
-  tableLayout = "auto",
-  onApplyFilters,
-  shouldShowCheckOnFilter
+  onRowClick,
+  page = 0,
+  RenderItem = null,
+  rowsPerPage: defaultRowsPerPage = 10,
+  serverRendered,
+  updateSort
 }) => {
-  const { classes } = useStyles47();
-  const [order, setOrder] = useState15(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState15(
+  const [order, setOrder] = useState16(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState16(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selected, setSelected] = useState15(/* @__PURE__ */ new Set());
-  const [page] = useState15(0);
-  const numRows = data.length;
-  const emptyRows = useMemo2(
-    () => rowsPerPage - data.length,
-    [rowsPerPage, data]
-  );
-  const visibleHeadCells = useMemo2(
-    () => headCells.filter((headCell) => headCell?.enabled ?? true),
-    [headCells]
-  );
-  const handleSelectAllClick = useCallback2(
-    (event) => {
-      if (event.target.checked) {
-        const allItems = new Set(data.map((n) => n[keyField]));
-        setSelected(allItems);
-      } else {
-        setSelected(/* @__PURE__ */ new Set());
-      }
-    },
-    [data, keyField]
-  );
+  const [rowsPerPage, setRowsPerPage] = useState16(defaultRowsPerPage);
+  const { classes } = useStyles47();
+  const rowHeight = 56;
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
     const orderDir = isAsc ? "desc" : "asc";
@@ -6962,459 +7102,424 @@ var TableDesktop = ({
       updateSort(property, orderDir);
     }
   };
-  const handleRowCheckboxChange = useCallback2(
-    (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 = useMemo2(() => {
-    if (isLoading) {
-      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ jsx111(TableRow4, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ jsx111(TableCell4, { children: /* @__PURE__ */ jsx111(
-        Skeleton2,
-        {
-          animation: "pulse",
-          variant: "rounded",
-          height: ROW_HEIGHT - 33,
-          sx: { bgcolor: colors.neutral100 },
-          "data-testid": "loading-skeleton"
-        }
-      ) }, cellIndex)) }, rowIndex));
+  useLayoutEffect(() => {
+    if (!doNotCalculateRows) {
+      return;
     }
-    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__ */ jsx111(
-        RenderItem,
-        {
-          ...{
-            ...row,
-            index,
-            deleteItem,
-            isItemSelected,
-            enableCheckboxSelection,
-            rowHeight: ROW_HEIGHT,
-            rowId: row[keyField],
-            handleRowCheckboxChange,
-            visibleHeadCells
-          }
-        },
-        row[keyField] ?? index
-      );
+    function updateRowsPerPage() {
+      const newRowsPerPage = calculateRowsPerPage(rowHeight);
+      setRowsPerPage(newRowsPerPage);
+    }
+    updateRowsPerPage();
+    const debounced = (0, import_debounce.default)(updateRowsPerPage, 150);
+    window.addEventListener("resize", debounced);
+    return () => {
+      window.removeEventListener("resize", debounced);
+    };
+  }, [doNotCalculateRows]);
+  const createSortHandler = (property) => (event) => {
+    handleRequestSort(event, property);
+  };
+  const getTableRows = () => {
+    const index = page;
+    const rows = serverRendered ? data : stableSort(data, getSorting(order, orderBy)).slice(
+      index * rowsPerPage,
+      index * rowsPerPage + rowsPerPage
+    );
+    const rowsComponents = rows.map((row) => {
+      if (RenderItem) {
+        return /* @__PURE__ */ jsx111(RenderItem, { ...row }, row.id);
+      }
+      return /* @__PURE__ */ jsx111(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx111(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
     });
-  }, [
-    data,
-    order,
-    orderBy,
-    page,
-    rowsPerPage,
-    selected,
-    isLoading,
-    numRows,
-    enableCheckboxSelection,
-    disableInternalSort,
-    deleteItem,
-    keyField,
-    handleRowCheckboxChange,
-    visibleHeadCells,
-    RenderItem
-  ]);
-  useEffect10(() => {
-    if (!enableCheckboxSelection) {
-      setSelected(/* @__PURE__ */ new Set());
+    if (emptyRows > 0 && rowsPerPage > emptyRows) {
+      rowsComponents.push(
+        /* @__PURE__ */ jsx111(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx111(TableCell2, { colSpan: 8 }) }, uuidv4())
+      );
     }
-  }, [enableCheckboxSelection]);
-  return /* @__PURE__ */ jsx111("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ jsxs76(Paper10, { className: classes.paper, children: [
-    /* @__PURE__ */ jsx111(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsx111(
-      Table,
+    return rowsComponents;
+  };
+  return /* @__PURE__ */ jsx111(Paper10, { className: classes.root, children: /* @__PURE__ */ jsx111(Box31, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx111(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx111(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs75(MUITable, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx111(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx111(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx111(
+      TableCell2,
       {
-        stickyHeader: true,
-        "aria-labelledby": "tableTitle",
-        "aria-label": "sticky table",
-        style: { tableLayout },
-        children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx111(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ jsxs76(Fragment11, { children: [
-          /* @__PURE__ */ jsx111(
-            SmartTableHeader_default,
-            {
-              headCells: visibleHeadCells,
-              order,
-              orderBy,
-              numSelected: selected.size,
-              numRows,
-              enableCheckboxSelection,
-              headerFilters: headerFilters ?? {},
-              onRequestSort: handleRequestSort,
-              onSelectAllClick: handleSelectAllClick,
-              onApplyFilters,
-              shouldShowCheckOnFilter
-            }
-          ),
-          /* @__PURE__ */ jsx111(TableBody2, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ jsx111(
-            TableEmptyResult_default,
-            {
-              colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
-              showClearFilterButton,
-              handleClickOnClearFiltersButton
-            }
-          ) })
-        ] })
-      }
-    ) }),
-    children
-  ] }) });
+        align: "left",
+        sortDirection: orderBy === headCell.id ? order : void 0,
+        children: /* @__PURE__ */ jsx111(
+          TableSortLabel2,
+          {
+            active: orderBy === headCell.id,
+            direction: orderBy === headCell.id ? order : "asc",
+            onClick: createSortHandler(headCell.id),
+            children: headCell.label
+          }
+        )
+      },
+      headCell.id
+    )) }) }),
+    /* @__PURE__ */ jsxs75(TableBody, { children: [
+      getTableRows(),
+      rowsPerPage === emptyRows && /* @__PURE__ */ jsx111(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx111(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+    ] })
+  ] }) }) }) });
 };
-var TableDesktop_default = TableDesktop;
+var Table_default = Table;
 
-// src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import { Fragment as Fragment12, jsx as jsx112, jsxs as jsxs77 } from "react/jsx-runtime";
-var useStyles48 = makeStyles48()((theme) => ({
-  filterMenu: {
-    display: "flex",
-    flexDirection: "column"
-  },
-  filterOptions: {
-    maxHeight: theme.spacing(62),
-    overflowY: "auto",
-    "&::-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]
-    }
-  },
-  filter: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: theme.spacing(0, 3)
-  },
-  applyFilterButtonsContainer: {
-    display: "flex",
-    padding: theme.spacing(0, 1),
-    justifyContent: "space-between"
-  },
-  saveAsDefaultButton: {
-    color: theme.palette.primary.main
-  },
-  skeleton: {
-    height: theme.spacing(3),
-    margin: theme.spacing(1)
-  }
-}));
-var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
-  if (typeof item === "string" && typeof filterOption === "string") {
-    return item === filterOption;
-  }
-  if (typeof item === "object" && typeof filterOption === "object") {
-    return item.id === filterOption.id;
-  }
-  return false;
-});
-var SmartTableHeaderFilterMenu = ({
-  headCell,
-  numActiveFilters,
-  headerFilters,
-  shouldShowCheckOnFilter,
-  onApplyFilters
+// src/components/TableDesktop/TableDesktop.tsx
+import {
+  useMemo as useMemo3,
+  useState as useState17,
+  useEffect as useEffect11
+} from "react";
+import {
+  Paper as Paper11,
+  Table as Table2,
+  TableBody as TableBody3,
+  TableContainer as TableContainer2,
+  Box as Box34
+} from "@mui/material";
+
+// src/components/TableDesktopFooter/TableDesktopFooter.tsx
+import Refresh3 from "@mui/icons-material/Refresh";
+import { Box as Box32, Button as Button13, MenuItem as MenuItem4, Pagination as Pagination2, Select as Select4, Stack, Typography as Typography26 } from "@mui/material";
+import { jsx as jsx112, jsxs as jsxs76 } from "react/jsx-runtime";
+var TableDesktopFooter = ({
+  numPages,
+  page,
+  pageSize,
+  pageSizeOptions,
+  onPageChange,
+  onPageSizeChange,
+  refetch,
+  isFetching
 }) => {
-  const { classes } = useStyles48();
-  const [anchorEl, setAnchorEl] = useState16(null);
-  const [filterOptionsData, setFilterOptionsData] = useState16();
-  const [selectedFilters, setSelectedFilters] = useState16(
-    headerFilters[headCell.id] ?? []
-  );
-  useEffect11(() => {
-    if (headCell.filterOptions) {
-      setFilterOptionsData(headCell.filterOptions);
-    }
-  }, [headCell.filterOptions]);
-  const numFilterOptions = useMemo3(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
-  const numCurrentSelectedFilters = selectedFilters.length;
-  const handleFilterMenuOpen = (event) => {
-    if (!numFilterOptions) {
-      headCell.refetchFilterOptions?.();
-    }
-    setAnchorEl(event.currentTarget);
-  };
-  const handleFilterMenuClose = () => {
-    setSelectedFilters(headerFilters[headCell.id]);
-    setAnchorEl(null);
-  };
-  const handleFilterOptionClick = (option) => {
-    const selectedIndex = findFilterIndex(selectedFilters, option);
-    let newSelected;
-    if (selectedIndex === -1) {
-      if (typeof option === "string") {
-        newSelected = [...selectedFilters, option];
-      } else {
-        newSelected = [...selectedFilters, option];
-      }
-    } else {
-      newSelected = selectedFilters.filter(
-        (_, index) => index !== selectedIndex
-      );
-    }
-    setSelectedFilters(newSelected);
-  };
-  const handleApplyFilters = (shouldSave) => {
-    const updatedFilters = {
-      ...headerFilters,
-      [headCell.id]: [...selectedFilters]
-    };
-    onApplyFilters?.(updatedFilters, shouldSave);
-    setAnchorEl(null);
-  };
-  useEffect11(() => {
-    setSelectedFilters(headerFilters[headCell.id] ?? []);
-  }, [headerFilters, headCell.id]);
-  const isOptionChecked = useMemo3(() => (resolvedOption) => !!selectedFilters?.some(
-    (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
-  ), [selectedFilters]);
-  const loadingSkeletons = /* @__PURE__ */ jsxs77(Box29, { "data-testid": "loading-skeletons", width: 272, children: [
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ jsx112(Divider9, {}),
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ jsx112(Divider9, {}),
-    /* @__PURE__ */ jsx112(Skeleton3, { variant: "rounded", className: classes.skeleton })
-  ] });
-  return /* @__PURE__ */ jsxs77(Fragment12, { children: [
-    /* @__PURE__ */ jsx112(
-      ActiveFiltersIconButton_default,
-      {
-        numActiveFilters,
-        handleClick: handleFilterMenuOpen,
-        className: classNames3("filter-menu-trigger", {
-          "has-active-filters": !!numActiveFilters || !!anchorEl
-        })
-      }
-    ),
-    /* @__PURE__ */ jsx112(
-      Menu4,
-      {
-        open: !!anchorEl,
-        onClose: handleFilterMenuClose,
-        anchorEl,
-        "data-testid": "filter-menu",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ jsxs77(Box29, { className: classes.filterMenu, children: [
-          /* @__PURE__ */ jsx112(Box29, { px: 3, mb: 0.5, children: /* @__PURE__ */ jsx112(
-            FormControlLabel3,
-            {
-              label: "Select All",
-              control: /* @__PURE__ */ jsx112(
-                Checkbox5,
+  return /* @__PURE__ */ jsxs76(
+    Box32,
+    {
+      py: 1,
+      gap: 2,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      borderTop: `1px solid ${colors.neutral300}`,
+      bgcolor: (theme) => theme.palette.background.default,
+      children: [
+        /* @__PURE__ */ jsxs76(
+          Button13,
+          {
+            disableRipple: true,
+            variant: "outlined",
+            onClick: () => refetch(),
+            disabled: isFetching,
+            sx: {
+              ml: 1,
+              gap: 1,
+              borderRadius: 25,
+              color: colors.neutral800,
+              borderColor: colors.neutral600
+            },
+            children: [
+              /* @__PURE__ */ jsx112(
+                Refresh3,
                 {
-                  disableRipple: true,
-                  checked: numCurrentSelectedFilters === numFilterOptions,
-                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
-                  onChange: ({ target: { checked } }) => {
-                    if (checked) {
-                      setSelectedFilters([...filterOptionsData]);
-                    } else {
-                      setSelectedFilters([]);
-                    }
-                  }
+                  fontSize: "small",
+                  color: isFetching ? "disabled" : "primary"
                 }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ jsx112(Divider9, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ jsx112(Box29, { className: classes.filterOptions, children: filterOptionsData?.map(
-            (option) => {
-              const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
-              return /* @__PURE__ */ jsxs77(
-                Box29,
-                {
-                  className: classes.filter,
-                  children: [
-                    /* @__PURE__ */ jsx112(
-                      FormControlLabel3,
-                      {
-                        label: resolvedOption,
-                        control: /* @__PURE__ */ jsx112(
-                          Checkbox5,
-                          {
-                            disableRipple: true,
-                            onChange: () => handleFilterOptionClick(option),
-                            checked: isOptionChecked(resolvedOption)
-                          }
-                        )
-                      },
-                      resolvedOption
-                    ),
-                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ jsx112(Tooltip6, { title: "This filter is saved as default", children: /* @__PURE__ */ jsx112(CheckIcon, { fontSize: "small", color: "action" }) }) : null
-                  ]
-                },
-                resolvedOption
-              );
-            }
-          ) }),
-          /* @__PURE__ */ jsx112(Divider9, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ jsxs77(Box29, { className: classes.applyFilterButtonsContainer, children: [
-            /* @__PURE__ */ jsx112(
-              ExtendedButton_default,
-              {
-                copy: "Save as Default",
-                buttonType: "button",
-                variant: "text",
-                tooltip: "Persists those filters for future visits",
-                className: classes.saveAsDefaultButton,
-                onClick: () => handleApplyFilters(true)
-              }
-            ),
+              ),
+              "REFRESH"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs76(Box32, { display: "flex", children: [
+          /* @__PURE__ */ jsxs76(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx112(Typography26, { children: "Rows per page:" }),
             /* @__PURE__ */ jsx112(
-              ExtendedButton_default,
+              Select4,
               {
-                copy: "Apply",
-                color: "primary",
-                buttonType: "submit",
-                onClick: () => handleApplyFilters(false)
+                value: pageSize,
+                onChange: onPageSizeChange,
+                size: "small",
+                variant: "standard",
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx112(MenuItem4, { value: size, children: size }, size))
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx112(
+            Pagination2,
+            {
+              color: "standard",
+              count: numPages,
+              page,
+              onChange: onPageChange
+            }
+          )
         ] })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
-var SmartTableHeaderFilterMenu_default = memo21(SmartTableHeaderFilterMenu);
 
-// src/components/Table/Table.tsx
-var import_debounce = __toESM(require_debounce(), 1);
-import { useLayoutEffect, useState as useState17 } from "react";
-import {
-  Box as Box31,
-  Paper as Paper11,
-  Table as MUITable,
-  TableBody as TableBody3,
-  TableCell as TableCell5,
-  TableContainer as TableContainer2,
-  TableHead as TableHead2,
-  TableRow as TableRow5,
-  TableSortLabel as TableSortLabel2
-} from "@mui/material";
-import { makeStyles as makeStyles49 } from "tss-react/mui";
-import { v4 as uuidv4 } from "uuid";
+// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
+import TableBody2 from "@mui/material/TableBody";
+import TableCell3 from "@mui/material/TableCell";
+import TableRow3 from "@mui/material/TableRow";
+import Typography27 from "@mui/material/Typography";
+import { jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
+var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ jsx113(TableBody2, { children: /* @__PURE__ */ jsx113(TableRow3, { children: /* @__PURE__ */ jsxs77(
+  TableCell3,
+  {
+    sx: {
+      py: 8,
+      gap: 2,
+      borderBottom: "none",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ jsx113(Typography27, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ jsxs77(Typography27, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
+        "Use the column selector on the right to choose which fields",
+        /* @__PURE__ */ jsx113("br", {}),
+        "you want to display in the table"
+      ] })
+    ]
+  }
+) }) });
 
-// src/components/TableLoading/TableLoading.tsx
-import { Box as Box30, Skeleton as Skeleton4 } from "@mui/material";
-import { jsx as jsx113 } from "react/jsx-runtime";
-var TableLoading = ({
+// src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
+import { Skeleton as Skeleton4, TableCell as TableCell4, TableRow as TableRow4 } from "@mui/material";
+import { jsx as jsx114 } from "react/jsx-runtime";
+var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
+var TableDesktopLoadingState = ({
+  numRows,
   rowsPerPage,
+  numColumns,
   rowHeight
-}) => /* @__PURE__ */ jsx113(Box30, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx113(
-  Skeleton4,
-  {
-    animation: "pulse",
-    "data-testid": "table-loading-skeleton",
-    style: { margin: "8px", opacity: 0.4 },
-    variant: "rectangular",
-    height: rowHeight
-  },
-  index
-)) });
-var TableLoading_default = TableLoading;
-
-// src/components/Table/helpers.tsx
-function stableSort2(array, cmp) {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => {
-    const order = cmp(a[0], b[0]);
-    if (order !== 0) {
-      return order;
+}) => {
+  return getRange(Math.min(numRows, rowsPerPage)).map((rowNum) => /* @__PURE__ */ jsx114(TableRow4, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx114(TableCell4, { children: /* @__PURE__ */ jsx114(
+    Skeleton4,
+    {
+      animation: "pulse",
+      variant: "rounded",
+      height: rowHeight - 33,
+      sx: { bgcolor: colors.neutral100 },
+      "data-testid": "loading-skeleton"
     }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-function descendingComparator2(a, b, orderBy) {
-  if (b[orderBy] < a[orderBy]) {
+  ) }, colNum)) }, rowNum));
+};
+
+// src/components/TableDesktopRows/TableDesktopRows.tsx
+import { jsx as jsx115 } from "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 (b[orderBy] > a[orderBy]) {
+  if (!valA && valB) {
+    return 1;
+  }
+  if (valA > valB) {
+    return -1;
+  }
+  if (valA < valB) {
     return 1;
   }
   return 0;
-}
-function getSorting(order, orderBy) {
-  return order === "desc" ? (a, b) => descendingComparator2(a, b, orderBy) : (a, b) => -descendingComparator2(a, b, orderBy);
-}
-function calculateRowsPerPage(rowHeight) {
-  const appContainerDom = document.getElementById("mainContainer");
-  const headerDom = document.getElementById("aboveTableHeader");
-  if (appContainerDom && headerDom) {
-    return Math.floor(
-      (appContainerDom.clientHeight - headerDom.clientHeight - 24) / rowHeight - 2
+};
+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__ */ jsx115(
+      TableDesktopLoadingState,
+      {
+        numRows: data.length,
+        rowsPerPage,
+        numColumns: visibleHeadCells.length + (enableCheckboxSelection ? 1 : 0),
+        rowHeight
+      }
     );
   }
-  return 1;
-}
+  return sortedData.map((row, index) => {
+    const isItemSelected = selectedRows.has(row[keyField]);
+    return /* @__PURE__ */ jsx115(
+      RenderItem,
+      {
+        ...{
+          ...row,
+          index,
+          deleteItem,
+          isItemSelected,
+          enableEditMode,
+          enableCheckboxSelection,
+          rowHeight,
+          rowId: row[keyField],
+          handleRowCheckboxChange,
+          visibleHeadCells
+        }
+      },
+      row[keyField] ?? index
+    );
+  });
+};
 
-// src/components/Table/Table.tsx
-import { jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
-var useStyles49 = makeStyles49()(() => ({
-  root: {
-    height: "calc(100vh - 262px)",
-    overflow: "scroll"
-  },
-  paper: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between"
-  },
-  header: {
-    "& .MuiTableSortLabel-root": {
-      fontWeight: 600,
-      fontSize: ".875rem"
+// src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
+import { Box as Box33, Button as Button14, Typography as Typography28 } from "@mui/material";
+import { jsx as jsx116, jsxs as jsxs78 } from "react/jsx-runtime";
+var TableDesktopRowSelectionBar = ({
+  isEveryRowInPageSelected,
+  isRowsInAllPagesSelected,
+  numSelectedRows,
+  totalRowCount,
+  handleRowSelectionBarClick
+}) => {
+  return isEveryRowInPageSelected ? /* @__PURE__ */ jsxs78(
+    Box33,
+    {
+      sx: {
+        p: 1,
+        gap: 2,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: colors.neutral150
+      },
+      children: [
+        /* @__PURE__ */ jsx116(Typography28, { children: isRowsInAllPagesSelected ? `All ${totalRowCount} rows are selected based on your filters.` : `All ${numSelectedRows} rows on this page are selected.` }),
+        /* @__PURE__ */ jsx116(Button14, { onClick: handleRowSelectionBarClick, children: isRowsInAllPagesSelected ? "Clear Selection" : `Select all ${totalRowCount} rows from all pages based on your filters.` })
+      ]
     }
-  },
-  container: {
-    maxHeight: "calc(100% - 0)"
-  }
+  ) : null;
+};
+
+// src/components/TableEmptyResult/TableEmptyResult.tsx
+import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography29 } from "@mui/material";
+import { makeStyles as makeStyles48 } from "tss-react/mui";
+import { jsx as jsx117, jsxs as jsxs79 } from "react/jsx-runtime";
+var useStyles48 = makeStyles48()(() => ({
+  tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
+  tableCellDefault: { padding: 24 }
 }));
-var Table2 = ({
-  appliedFilters,
+var TableEmptyResult = ({
+  colSpan,
+  showClearFilterButton = false,
+  handleClickOnClearFiltersButton = () => {
+  }
+}) => {
+  const { classes } = useStyles48();
+  return showClearFilterButton ? /* @__PURE__ */ jsx117(TableRow5, { children: /* @__PURE__ */ jsxs79(
+    TableCell5,
+    {
+      className: classes.tableCellIcon,
+      colSpan,
+      align: "center",
+      children: [
+        /* @__PURE__ */ jsx117(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ jsx117(Typography29, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ jsx117(Typography29, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ jsx117(
+          FilledButton_default,
+          {
+            copy: "Search",
+            variant: "contained",
+            color: "primary",
+            onClick: handleClickOnClearFiltersButton
+          }
+        )
+      ]
+    }
+  ) }) : /* @__PURE__ */ jsx117(TableRow5, { children: /* @__PURE__ */ jsx117(
+    TableCell5,
+    {
+      className: classes.tableCellDefault,
+      colSpan,
+      align: "center",
+      children: "Nothing to display"
+    }
+  ) });
+};
+var TableEmptyResult_default = TableEmptyResult;
+
+// src/components/TableDesktop/TableDesktop.tsx
+import { Fragment as Fragment12, jsx as jsx118, jsxs as jsxs80 } from "react/jsx-runtime";
+var TableDesktop = ({
   data,
-  doNotCalculateRows,
   headCells,
+  RenderItem,
+  appliedFilters,
+  headerFilters,
+  children,
+  height,
+  rowHeight = 56,
+  totalDataCount,
   isLoading,
-  onRowClick,
-  page = 0,
-  RenderItem = null,
-  rowsPerPage: defaultRowsPerPage = 10,
-  serverRendered,
-  updateSort
+  rowsPerPage = 50,
+  enableEditMode = false,
+  enableCheckboxSelection = false,
+  disableInternalSort = false,
+  updateSort,
+  showClearFilterButton,
+  handleClickOnClearFiltersButton,
+  deleteItem,
+  keyField = "id",
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter,
+  components,
+  componentsProps
 }) => {
   const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
   const [orderBy, setOrderBy] = useState17(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = useState17(defaultRowsPerPage);
-  const { classes } = useStyles49();
-  const rowHeight = 56;
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
+  const [selectedRows, setSelectedRows] = useState17(/* @__PURE__ */ new Set());
+  const [isRowsInAllPagesSelected, setIsRowsInAllPagesSelected] = useState17(false);
+  const { toolbar: Toolbar2 } = components ?? {};
+  const { toolbarProps, footerProps } = componentsProps ?? {};
+  const numRows = useMemo3(
+    () => data.length,
+    [data.length]
+  );
+  const emptyRows = useMemo3(
+    () => rowsPerPage - numRows,
+    [rowsPerPage, numRows]
+  );
+  const isEveryRowInPageSelected = useMemo3(
+    () => numRows > 0 && selectedRows.size === numRows,
+    [selectedRows, numRows]
+  );
+  const visibleHeadCells = useMemo3(
+    () => headCells.filter((headCell) => headCell?.enabled ?? true),
+    [headCells]
+  );
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
     const orderDir = isAsc ? "desc" : "asc";
@@ -7424,156 +7529,243 @@ var Table2 = ({
       updateSort(property, orderDir);
     }
   };
-  useLayoutEffect(() => {
-    if (!doNotCalculateRows) {
+  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;
     }
-    function updateRowsPerPage() {
-      const newRowsPerPage = calculateRowsPerPage(rowHeight);
-      setRowsPerPage(newRowsPerPage);
-    }
-    updateRowsPerPage();
-    const debounced = (0, import_debounce.default)(updateRowsPerPage, 150);
-    window.addEventListener("resize", debounced);
-    return () => {
-      window.removeEventListener("resize", debounced);
-    };
-  }, [doNotCalculateRows]);
-  const createSortHandler = (property) => (event) => {
-    handleRequestSort(event, property);
+    resetSelectedRows();
   };
-  const getTableRows = () => {
-    const index = page;
-    const rows = serverRendered ? data : stableSort2(data, getSorting(order, orderBy)).slice(
-      index * rowsPerPage,
-      index * rowsPerPage + rowsPerPage
-    );
-    const rowsComponents = rows.map((row) => {
-      if (RenderItem) {
-        return /* @__PURE__ */ jsx114(RenderItem, { ...row }, row.id);
+  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 /* @__PURE__ */ jsx114(TableRow5, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx114(TableCell5, { children: row[column.id] }, column.id)) }, row.id);
+      return newSelected;
     });
-    if (emptyRows > 0 && rowsPerPage > emptyRows) {
-      rowsComponents.push(
-        /* @__PURE__ */ jsx114(TableRow5, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx114(TableCell5, { colSpan: 8 }) }, uuidv4())
-      );
+  };
+  const handleRowSelectionBarClick = () => {
+    if (isRowsInAllPagesSelected) {
+      resetSelectedRows();
+      return;
     }
-    return rowsComponents;
+    setIsRowsInAllPagesSelected(true);
   };
-  return /* @__PURE__ */ jsx114(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx114(Box31, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx114(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx114(TableContainer2, { className: classes.container, children: /* @__PURE__ */ jsxs78(MUITable, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ jsx114(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx114(TableRow5, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx114(
-      TableCell5,
-      {
-        align: "left",
-        sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ jsx114(
-          TableSortLabel2,
-          {
-            active: orderBy === headCell.id,
-            direction: orderBy === headCell.id ? order : "asc",
-            onClick: createSortHandler(headCell.id),
-            children: headCell.label
-          }
-        )
+  const handlePageChange = (event, page) => {
+    resetSelectedRows();
+    footerProps?.onPageChange?.(event, page);
+  };
+  useEffect11(() => {
+    if (!enableCheckboxSelection) {
+      resetSelectedRows();
+    }
+  }, [enableCheckboxSelection]);
+  useEffect11(() => {
+    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__ */ jsx118(
+    Box34,
+    {
+      sx: {
+        height,
+        display: "flex",
+        justifyContent: "space-between",
+        justifyItems: "stretch"
       },
-      headCell.id
-    )) }) }),
-    /* @__PURE__ */ jsxs78(TableBody3, { children: [
-      getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ jsx114(TableRow5, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx114(TableCell5, { colSpan: 8, align: "center", children: "Nothing to display" }) })
-    ] })
-  ] }) }) }) });
+      children: /* @__PURE__ */ jsxs80(
+        Paper11,
+        {
+          sx: {
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between"
+          },
+          children: [
+            Toolbar2 ? /* @__PURE__ */ jsx118(
+              Toolbar2,
+              {
+                selectedRows: [...selectedRows],
+                isRowsInAllPagesSelected,
+                ...toolbarProps
+              }
+            ) : null,
+            /* @__PURE__ */ jsx118(
+              TableDesktopRowSelectionBar,
+              {
+                isEveryRowInPageSelected,
+                isRowsInAllPagesSelected,
+                numSelectedRows: selectedRows.size,
+                totalRowCount: totalDataCount ?? 0,
+                handleRowSelectionBarClick
+              }
+            ),
+            /* @__PURE__ */ jsx118(
+              TableContainer2,
+              {
+                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__ */ jsx118(
+                  Table2,
+                  {
+                    stickyHeader: true,
+                    "aria-label": "sticky-table",
+                    sx: { tableLayout },
+                    children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx118(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ jsxs80(Fragment12, { children: [
+                      /* @__PURE__ */ jsx118(
+                        SmartTableHeader_default,
+                        {
+                          headCells: visibleHeadCells,
+                          order,
+                          orderBy,
+                          numSelected: selectedRows.size,
+                          numRows,
+                          enableCheckboxSelection,
+                          headerFilters: headerFilters ?? {},
+                          onRequestSort: handleRequestSort,
+                          onSelectAllClick: handleSelectAllClick,
+                          onApplyFilters,
+                          shouldShowCheckOnFilter
+                        }
+                      ),
+                      /* @__PURE__ */ jsx118(TableBody3, { children: rowsPerPage !== emptyRows ? /* @__PURE__ */ jsx118(
+                        TableDesktopRows,
+                        {
+                          data,
+                          RenderItem,
+                          visibleHeadCells,
+                          keyField,
+                          order,
+                          orderBy,
+                          rowsPerPage,
+                          isLoading,
+                          disableInternalSort,
+                          enableCheckboxSelection,
+                          enableEditMode,
+                          selectedRows,
+                          handleRowCheckboxChange,
+                          rowHeight,
+                          deleteItem
+                        }
+                      ) : /* @__PURE__ */ jsx118(
+                        TableEmptyResult_default,
+                        {
+                          colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
+                          showClearFilterButton,
+                          handleClickOnClearFiltersButton
+                        }
+                      ) })
+                    ] })
+                  }
+                )
+              }
+            ),
+            children,
+            footerProps ? /* @__PURE__ */ jsx118(TableDesktopFooter, { ...footerProps, onPageChange: handlePageChange }) : null
+          ]
+        }
+      )
+    }
+  );
 };
-var Table_default = Table2;
 
-// src/components/TableDesktopFooter/TableDesktopFooter.tsx
-import Refresh3 from "@mui/icons-material/Refresh";
-import { Box as Box32, Button as Button13, MenuItem as MenuItem4, Pagination as Pagination2, Select as Select4, Stack, Typography as Typography28 } from "@mui/material";
-import { jsx as jsx115, jsxs as jsxs79 } from "react/jsx-runtime";
-var TableDesktopFooter = ({
-  numPages,
-  page,
-  pageSize,
-  pageSizeOptions,
-  handlePageChange,
-  handlePageSizeChange,
-  refetch,
-  isFetching
+// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
+import { Checkbox as Checkbox6, FormControlLabel as FormControlLabel4 } from "@mui/material";
+
+// src/components/TableDesktopEditableComponent/TableDesktopNumericField.tsx
+import { useState as useState18 } from "react";
+import { TextField as TextField8 } from "@mui/material";
+import { jsx as jsx119 } from "react/jsx-runtime";
+var TableDesktopNumericField = ({
+  rowId,
+  initialValue,
+  inputLabel,
+  disabled,
+  field,
+  variant = "standard",
+  size,
+  onUpdateEditableCell
 }) => {
-  return /* @__PURE__ */ jsxs79(
-    Box32,
+  const [input, setInput] = useState18(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__ */ jsx119(
+    TextField8,
     {
-      py: 1,
-      gap: 2,
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      borderTop: `1px solid ${colors.neutral300}`,
-      bgcolor: (theme) => theme.palette.background.default,
-      children: [
-        /* @__PURE__ */ jsxs79(
-          Button13,
-          {
-            disableRipple: true,
-            variant: "outlined",
-            onClick: () => refetch(),
-            disabled: isFetching,
-            sx: {
-              ml: 1,
-              gap: 1,
-              borderRadius: 25,
-              color: colors.neutral800,
-              borderColor: colors.neutral600
-            },
-            children: [
-              /* @__PURE__ */ jsx115(
-                Refresh3,
-                {
-                  fontSize: "small",
-                  color: isFetching ? "disabled" : "primary"
-                }
-              ),
-              "REFRESH"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs79(Box32, { display: "flex", children: [
-          /* @__PURE__ */ jsxs79(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx115(Typography28, { children: "Rows per page:" }),
-            /* @__PURE__ */ jsx115(
-              Select4,
-              {
-                value: pageSize,
-                onChange: handlePageSizeChange,
-                size: "small",
-                variant: "standard",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx115(MenuItem4, { value: size, children: size }, size))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx115(
-            Pagination2,
-            {
-              color: "standard",
-              count: numPages,
-              page,
-              onChange: handlePageChange
-            }
-          )
-        ] })
-      ]
+      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/TableDesktopRowCell/TableDesktopRowCell.tsx
-import { useEffect as useEffect13, useRef as useRef5, useState as useState20 } from "react";
-import { Box as Box33, Checkbox as Checkbox6, IconButton as IconButton4, TableCell as TableCell6, TextField as TextField9, Tooltip as Tooltip7 } from "@mui/material";
-
-// src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
-import { useState as useState18, memo as memo22, useEffect as useEffect12 } from "react";
-import { jsx as jsx116 } from "react/jsx-runtime";
+// src/components/TableDesktopEditableComponent/TableDesktopSmartSelect.tsx
+import { useState as useState19, memo as memo22, useEffect as useEffect12 } from "react";
+import { jsx as jsx120 } from "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;
@@ -7584,28 +7776,31 @@ var TableDesktopSmartSelect = memo22(({
   ref,
   initialValue,
   inputLabel,
+  field,
   fieldName,
   rowId,
   disabled,
+  variant = "standard",
+  size,
   filterOptions,
   refetchFilterOptions,
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = useState18(initialValue);
-  const [options, setOptions] = useState18();
+  const [value, setValue] = useState19(initialValue);
+  const [options, setOptions] = useState19();
   const valueId = resolveValue(value);
-  const valueLabel = resolveOptionType(value, fieldName);
+  const valueLabel = resolveOptionType2(value, fieldName);
   useEffect12(() => {
     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__ */ jsx116(
+  return /* @__PURE__ */ jsx120(
     SmartSelect_default,
     {
       ref,
@@ -7613,191 +7808,252 @@ var TableDesktopSmartSelect = memo22(({
       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
-import CheckIcon2 from "@mui/icons-material/Check";
-
-// src/components/TableDesktopRowCell/TableDesktopTextField.tsx
-import TextField8 from "@mui/material/TextField";
-import { useMemo as useMemo4, useState as useState19 } from "react";
-import { jsx as jsx117 } from "react/jsx-runtime";
+// src/components/TableDesktopEditableComponent/TableDesktopTextField.tsx
+import { useMemo as useMemo4, useState as useState20 } from "react";
+import { TextField as TextField9 } from "@mui/material";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
   rowId,
-  editInitialValue,
+  initialValue,
   inputLabel,
   disabled,
+  field,
+  variant = "standard",
+  size,
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = useState19(editInitialValue);
-  const hasError = useMemo4(() => !validateInput?.(value), [value, validateInput]);
-  return /* @__PURE__ */ jsx117(
-    TextField8,
+  const [input, setInput] = useState20(initialValue);
+  const hasValidationError = useMemo4(() => !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__ */ jsx121(
+    TextField9,
     {
       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
-import Close2 from "@mui/icons-material/Close";
-import Edit3 from "@mui/icons-material/Edit";
-import { jsx as jsx118, jsxs as jsxs80 } from "react/jsx-runtime";
-var TableDesktopRowCell = ({
-  inputLabel,
+// src/components/TableDesktopEditableComponent/TableDesktopEditableComponent.tsx
+import { jsx as jsx122 } from "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 = useRef5(null);
-  const [isOverflowed, setIsOverflowed] = useState20(false);
-  const [isCellHovered, setIsCellHovered] = useState20(false);
-  const [isEditMode, setIsEditMode] = useState20(false);
-  useEffect13(() => {
-    const ref = cellRef.current;
-    if (ref) {
-      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
-    }
-  }, [readOnlyValue, width]);
-  useEffect13(() => {
-    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__ */ jsx118(
+    "select": /* @__PURE__ */ jsx122(
       TableDesktopSmartSelect,
       {
         rowId,
+        field,
         fieldName,
         disabled,
+        variant,
+        size,
         initialValue: editInitialValue,
-        inputLabel: inputLabel ?? "",
+        inputLabel,
         filterOptions,
         refetchFilterOptions,
         isFetchingFilterOptions,
         onUpdateEditableCell
       }
     ),
-    "checkbox": /* @__PURE__ */ jsx118(
-      Checkbox6,
+    "checkbox": /* @__PURE__ */ jsx122(
+      FormControlLabel4,
       {
-        disableRipple: true,
-        disabled,
-        defaultChecked: editInitialValue,
-        onChange: ({ target: { checked } }) => {
-          onUpdateEditableCell?.(rowId, checked);
-        }
+        label: showCheckboxLabel ? inputLabel : "",
+        control: /* @__PURE__ */ jsx122(
+          Checkbox6,
+          {
+            disableRipple: true,
+            disabled,
+            defaultChecked: editInitialValue,
+            onChange: ({ target: { checked } }) => {
+              if (!onUpdateEditableCell) {
+                return;
+              }
+              onUpdateEditableCell(rowId ?? 0, field, checked, checked);
+            }
+          }
+        )
       }
     ),
-    "text": /* @__PURE__ */ jsx118(
+    "text": /* @__PURE__ */ jsx122(
       TableDesktopTextField,
       {
         rowId,
         disabled,
-        editInitialValue,
+        variant,
+        size,
+        field,
+        initialValue: editInitialValue,
         inputLabel: inputLabel ?? "",
         validateInput,
         onUpdateEditableCell
       }
     ),
-    "numeric": /* @__PURE__ */ jsx118(
-      TextField9,
+    "numeric": /* @__PURE__ */ jsx122(
+      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__ */ jsx118(CheckIcon2, { sx: { fontSize: 16 } });
+  return editableComponents[editableCellType];
+};
+
+// src/components/TableDesktopCell/TableDesktopCell.tsx
+import { useEffect as useEffect13, useRef as useRef5, useState as useState21 } from "react";
+import CheckIcon2 from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import EditIcon from "@mui/icons-material/Edit";
+import { Box as Box35, IconButton as IconButton4, TableCell as TableCell6, Tooltip as Tooltip8 } from "@mui/material";
+import { jsx as jsx123, jsxs as jsxs81 } from "react/jsx-runtime";
+var getReadOnlyBooleanIcon = (value) => {
+  if (value) {
+    return /* @__PURE__ */ jsx123(CheckIcon2, { 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 = useRef5(null);
+  const [isOverflowed, setIsOverflowed] = useState21(false);
+  const [isCellHovered, setIsCellHovered] = useState21(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState21(false);
+  useEffect13(() => {
+    const ref = cellRef.current;
+    if (ref) {
+      setIsOverflowed(ref.scrollWidth > ref.clientWidth);
     }
-    return "-";
-  };
+  }, [readOnlyValue, width]);
+  useEffect13(() => {
+    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__ */ jsx118(Tooltip7, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ jsx118(
+  const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
+  return /* @__PURE__ */ jsx123(Tooltip8, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ jsx123(
     TableCell6,
     {
       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__ */ jsxs80(
-        Box33,
+      children: /* @__PURE__ */ jsxs81(
+        Box35,
         {
           p: 1,
           ref: cellRef,
@@ -7805,7 +8061,7 @@ var TableDesktopRowCell = ({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           children: [
-            isCellHovered ? /* @__PURE__ */ jsx118(Tooltip7, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx118(
+            enableEditMode && isCellHovered ? /* @__PURE__ */ jsx123(Tooltip8, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx123(
               IconButton4,
               {
                 onClick: handleEditClick,
@@ -7815,15 +8071,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__ */ jsx118(Close2, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx118(Edit3, { fontSize: "small" })
+                children: isCellInEditMode ? /* @__PURE__ */ jsx123(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx123(EditIcon, { fontSize: "small" })
               }
             ) }) : null,
-            isEditMode && editableCellType ? editableComponents[editableCellType] : typeof readOnlyValue === "boolean" ? getReadOnlyBooleanIcon(readOnlyValue) : readOnlyValue
+            enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx123(
+              TableDesktopEditableComponent,
+              {
+                editInitialValue,
+                rowId,
+                field,
+                fieldName,
+                disabled,
+                inputLabel: inputLabel ?? "",
+                editableCellType,
+                filterOptions,
+                refetchFilterOptions,
+                isFetchingFilterOptions,
+                validateInput,
+                onUpdateEditableCell
+              }
+            ) : renderReadOnlyValue(readOnlyValue)
           ]
         }
       )
@@ -7832,12 +8104,12 @@ var TableDesktopRowCell = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo23, useEffect as useEffect14, useState as useState21 } from "react";
+import { memo as memo23, useEffect as useEffect14, useState as useState22 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
-import { makeStyles as makeStyles50 } from "tss-react/mui";
-import { jsx as jsx119 } from "react/jsx-runtime";
-var useStyles50 = makeStyles50()(() => ({
+import { makeStyles as makeStyles49 } from "tss-react/mui";
+import { jsx as jsx124 } from "react/jsx-runtime";
+var useStyles49 = makeStyles49()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -7845,8 +8117,8 @@ var useStyles50 = makeStyles50()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState21([]);
-  const { classes } = useStyles50();
+  const [sortableCells, setSortableCells] = useState22([]);
+  const { classes } = useStyles49();
   useEffect14(() => {
     setSortableCells(cells);
   }, []);
@@ -7881,7 +8153,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx119(TableHead3, { children: /* @__PURE__ */ jsx119(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx119(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx124(TableHead3, { children: /* @__PURE__ */ jsx124(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx124(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx124(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -7895,10 +8167,10 @@ var TableHeader = ({ cells, onSort = null }) => {
 var TableHeader_default = memo23(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box34, Typography as Typography29, Divider as Divider10, Button as Button14 } from "@mui/material";
-import { makeStyles as makeStyles51 } from "tss-react/mui";
-import { jsx as jsx120, jsxs as jsxs81 } from "react/jsx-runtime";
-var useStyles51 = makeStyles51()(() => ({
+import { Box as Box36, Typography as Typography30, Divider as Divider10, Button as Button15 } from "@mui/material";
+import { makeStyles as makeStyles50 } from "tss-react/mui";
+import { jsx as jsx125, jsxs as jsxs82 } from "react/jsx-runtime";
+var useStyles50 = makeStyles50()(() => ({
   icon: {
     fontSize: 20
   },
@@ -7932,21 +8204,21 @@ var TextDivider = ({
   iconPosition = "left",
   titleWeight = "400"
 }) => {
-  const { classes } = useStyles51();
+  const { classes } = useStyles50();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ jsxs81(
-    Box34,
+  return /* @__PURE__ */ jsxs82(
+    Box36,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx120(Divider10, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx120(Button14, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs81(Box34, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx120(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx120(
-            Typography29,
+        /* @__PURE__ */ jsx125(Divider10, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx125(Button15, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs82(Box36, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx125(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx125(
+            Typography30,
             {
               color: "textSecondary",
               className: classes.title,
@@ -7954,9 +8226,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx120(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx125(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx120(Divider10, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx125(Divider10, { className: classes.rightDivider })
       ]
     }
   );
@@ -7965,11 +8237,11 @@ var TextDivider_default = TextDivider;
 
 // src/components/ThemedDateRangePicker/ThemedDateRangePicker.tsx
 import { DateRangePicker } from "react-dates";
-import { makeStyles as makeStyles52 } from "tss-react/mui";
+import { makeStyles as makeStyles51 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx121 } from "react/jsx-runtime";
-var useStyles52 = makeStyles52()((theme) => ({
+import { jsx as jsx126 } from "react/jsx-runtime";
+var useStyles51 = makeStyles51()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
       backgroundColor: theme.palette.mode === "dark" ? theme.palette.grey[900] : colors.neutral100,
@@ -8063,17 +8335,17 @@ var ThemedDateRangePicker = ({
   className,
   ...props
 }) => {
-  const { classes, cx } = useStyles52();
-  return /* @__PURE__ */ jsx121("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx121(DateRangePicker, { ...props }) });
+  const { classes, cx } = useStyles51();
+  return /* @__PURE__ */ jsx126("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx126(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
 import { memo as memo24 } from "react";
-import { AppBar, Box as Box35, Toolbar } from "@mui/material";
-import { makeStyles as makeStyles53 } from "tss-react/mui";
-import { jsx as jsx122, jsxs as jsxs82 } from "react/jsx-runtime";
-var useStyles53 = makeStyles53()((theme) => ({
+import { AppBar, Box as Box37, Toolbar } from "@mui/material";
+import { makeStyles as makeStyles52 } from "tss-react/mui";
+import { jsx as jsx127, jsxs as jsxs83 } from "react/jsx-runtime";
+var useStyles52 = makeStyles52()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
   },
@@ -8091,10 +8363,10 @@ var TheToolbar = ({
   leftSection,
   rightSection
 }) => {
-  const { classes } = useStyles53();
-  return /* @__PURE__ */ jsxs82(Box35, { children: [
-    /* @__PURE__ */ jsx122(AppBar, { children: /* @__PURE__ */ jsxs82(Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ jsx122(
+  const { classes } = useStyles52();
+  return /* @__PURE__ */ jsxs83(Box37, { children: [
+    /* @__PURE__ */ jsx127(AppBar, { children: /* @__PURE__ */ jsxs83(Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ jsx127(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8103,7 +8375,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx127(
         CompanyLogo_default,
         {
           size: "small",
@@ -8112,8 +8384,8 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx122(Box35, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx122(Box35, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx127(Box37, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ jsx127(Box37, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
@@ -8122,20 +8394,20 @@ var TheToolbar_default = memo24(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx123(
+}) => /* @__PURE__ */ jsx128(
   Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx123(
+    children: /* @__PURE__ */ jsx128(
       MuiAlert,
       {
         elevation: 6,
@@ -8163,17 +8435,17 @@ var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
 import {
-  Typography as Typography30,
+  Typography as Typography31,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box36,
+  Box as Box38,
   Divider as Divider11,
   Paper as Paper12,
   Fade as Fade2
 } from "@mui/material";
-import { makeStyles as makeStyles54 } from "tss-react/mui";
-import { jsx as jsx124, jsxs as jsxs83 } from "react/jsx-runtime";
-var useStyles54 = makeStyles54()((theme) => ({
+import { makeStyles as makeStyles53 } from "tss-react/mui";
+import { jsx as jsx129, jsxs as jsxs84 } from "react/jsx-runtime";
+var useStyles53 = makeStyles53()((theme) => ({
   paper: {
     padding: theme.spacing(2)
   },
@@ -8201,8 +8473,8 @@ var TwoButtonDialog = ({
   cancelLabel = "CANCEL",
   cancelButton
 }) => {
-  const { classes } = useStyles54();
-  return /* @__PURE__ */ jsx124(
+  const { classes } = useStyles53();
+  return /* @__PURE__ */ jsx129(
     Dialog5,
     {
       open,
@@ -8212,10 +8484,10 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx124(Fade2, { in: open, children: /* @__PURE__ */ jsxs83(Paper12, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs83(Box36, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx124(Typography30, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx124(
-            Box36,
+      children: /* @__PURE__ */ jsx129(Fade2, { in: open, children: /* @__PURE__ */ jsxs84(Paper12, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs84(Box38, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx129(Typography31, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx129(
+            Box38,
             {
               sx: {
                 fontWeight: 600
@@ -8223,23 +8495,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ jsxs83(
-            Box36,
+          /* @__PURE__ */ jsxs84(
+            Box38,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx124(Typography30, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx124(Typography30, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx129(Typography31, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx129(Typography31, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx124(Divider11, {}),
-        /* @__PURE__ */ jsxs83(Box36, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx124(
+        /* @__PURE__ */ jsx129(Divider11, {}),
+        /* @__PURE__ */ jsxs84(Box38, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx129(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8252,7 +8524,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx124(
+          /* @__PURE__ */ jsx129(
             FilledButton_default,
             {
               color: "primary",
@@ -8261,7 +8533,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx124(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx129(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8270,10 +8542,10 @@ var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
 import { memo as memo25 } from "react";
-import { Avatar as Avatar2, Typography as Typography31 } from "@mui/material";
-import { jsx as jsx125, jsxs as jsxs84 } from "react/jsx-runtime";
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs84("div", { children: [
-  /* @__PURE__ */ jsx125(
+import { Avatar as Avatar2, Typography as Typography32 } from "@mui/material";
+import { jsx as jsx130, jsxs as jsxs85 } from "react/jsx-runtime";
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs85("div", { children: [
+  /* @__PURE__ */ jsx130(
     Avatar2,
     {
       src: user.profile_picture,
@@ -8281,18 +8553,18 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs8
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ jsxs84("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx125(Typography31, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx125(Typography31, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ jsxs85("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsx130(Typography32, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx130(Typography32, { ...typographyProps.username, children: user.username })
   ] })
 ] });
 var UserBust_default = memo25(UserBust);
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "svg",
     {
       width: "20",
@@ -8301,7 +8573,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx126(
+      children: /* @__PURE__ */ jsx131(
         "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",
@@ -8378,10 +8650,10 @@ export {
   SquareLabel_default as SquareLabel,
   Switch_default as Switch,
   Table_default as Table,
-  TableDesktop_default as TableDesktop,
+  TableDesktop,
+  TableDesktopCell,
+  TableDesktopEditableComponent,
   TableDesktopFooter,
-  TableDesktopRowCell,
-  TableDesktopSmartSelect,
   TableEmptyResult_default as TableEmptyResult,
   TableHeader_default as TableHeader,
   TableLoading_default as TableLoading,