@natoora-libs/core 0.1.16 → 0.1.17

package/dist/components/index.cjs

@@ -3017,7 +3017,7 @@ var RoundButton = ({
       onClick(e);
     }
   };
-  const Button15 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const Button16 = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_material16.Fab,
     {
       className: cx(
@@ -3041,7 +3041,7 @@ var RoundButton = ({
       children: icon ? iconComponentMap[icon] : children || ""
     }
   );
-  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button15 }) : Button15;
+  return tooltip ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_material16.Tooltip, { title: tooltip, children: Button16 }) : Button16;
 };
 var RoundButton_default = RoundButton;
 
@@ -6799,13 +6799,13 @@ var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
 var import_react34 = require("react");
 var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
-var import_material61 = require("@mui/material");
+var import_material62 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
 var import_mui55 = require("tss-react/mui");
 
 // src/components/TableDesktop/TableDesktop.tsx
 var import_react33 = require("react");
-var import_material60 = require("@mui/material");
+var import_material61 = require("@mui/material");
 var import_mui54 = require("tss-react/mui");
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
@@ -6948,8 +6948,52 @@ var import_TableBody = __toESM(require("@mui/material/TableBody"), 1);
 var import_TableCell = __toESM(require("@mui/material/TableCell"), 1);
 var import_TableRow = __toESM(require("@mui/material/TableRow"), 1);
 var import_Typography = __toESM(require("@mui/material/Typography"), 1);
+
+// src/components/Buttons/IconButton/IconButton.tsx
+var import_material59 = require("@mui/material");
 var import_jsx_runtime110 = require("react/jsx-runtime");
-var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+var IconButton4 = ({ icon, sx, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    import_material59.Button,
+    {
+      ...props,
+      sx: {
+        display: "flex",
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 100,
+        ...sx
+      },
+      children: [
+        icon,
+        props.children
+      ]
+    }
+  );
+};
+var IconButton_default = IconButton4;
+
+// src/components/icons/IconTableEdit.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var SvgIconTableEdit = (props) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("path", { d: "M21.7 13.35L20.7 14.35L18.65 12.3L19.65 11.3C19.86 11.08 20.21 11.08 20.42 11.3L21.7 12.58C21.92 12.79 21.92 13.14 21.7 13.35ZM12 18.94L18.07 12.88L20.12 14.93L14.06 21H12V18.94ZM4 2H18C18.5304 2 19.0391 2.21071 19.4142 2.58579C19.7893 2.96086 20 3.46957 20 4V8.17L16.17 12H12V16.17L10.17 18H4C3.46957 18 2.96086 17.7893 2.58579 17.4142C2.21071 17.0391 2 16.5304 2 16V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2ZM4 6V10H10V6H4ZM12 6V10H18V6H12ZM4 12V16H10V12H4Z" })
+  }
+);
+var IconTableEdit_default = SvgIconTableEdit;
+
+// src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var TableDesktopNoColumnsMessage = ({
+  handleClickOnNoColumnsMessageAction
+}) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_TableBody.default, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_TableRow.default, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
   import_TableCell.default,
   {
     sx: {
@@ -6962,20 +7006,44 @@ var TableDesktopNoColumnsMessage = () => /* @__PURE__ */ (0, import_jsx_runtime1
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: [
-        "Use the column selector on the right to choose which fields",
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("br", {}),
-        "you want to display in the table"
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+        import_Typography.default,
+        {
+          variant: "subtitle1",
+          align: "center",
+          color: "textSecondary",
+          sx: {
+            backgroundColor: colors.neutral200,
+            padding: 1,
+            borderRadius: 1
+          },
+          children: [
+            "Tips: ",
+            /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_Typography.default, { component: "strong", children: "Save as default" }),
+            " to keep these columns for future views"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        IconButton_default,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(IconTableEdit_default, { fill: colors.white }),
+          variant: "contained",
+          color: "primary",
+          onClick: handleClickOnNoColumnsMessageAction,
+          children: "OPEN MENU"
+        }
+      )
     ]
   }
 ) }) });
 
 // src/components/TableEmptyResult/TableEmptyResult.tsx
-var import_material59 = require("@mui/material");
+var import_material60 = require("@mui/material");
 var import_mui53 = require("tss-react/mui");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var useStyles47 = (0, import_mui53.makeStyles)()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -6987,17 +7055,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles47();
-  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-    import_material59.TableCell,
+  return showClearFilterButton ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    import_material60.TableCell,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.Typography, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.Typography, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.Typography, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           FilledButton_default,
           {
             copy: "Search",
@@ -7008,8 +7076,8 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_material59.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-    import_material59.TableCell,
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material60.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    import_material60.TableCell,
     {
       className: classes.tableCellDefault,
       colSpan,
@@ -7021,7 +7089,7 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var ROW_HEIGHT = 56;
 var useStyles48 = (0, import_mui54.makeStyles)()((theme) => ({
   root: {
@@ -7101,6 +7169,7 @@ var TableDesktop = ({
   updateSort,
   showClearFilterButton,
   handleClickOnClearFiltersButton,
+  handleClickOnNoColumnsMessageAction,
   deleteItem,
   keyField = "id",
   tableLayout = "auto",
@@ -7160,8 +7229,8 @@ var TableDesktop = ({
   );
   const renderTableRows = (0, import_react33.useMemo)(() => {
     if (isLoading) {
-      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-        import_material60.Skeleton,
+      return [...Array(Math.min(numRows, rowsPerPage))].map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableRow, { children: [...Array(visibleHeadCells.length)].map((_2, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+        import_material61.Skeleton,
         {
           animation: "pulse",
           variant: "rounded",
@@ -7174,7 +7243,7 @@ var TableDesktop = ({
     const sortedData = disableInternalSort ? data : stableSort(data, getComparator(order, orderBy));
     return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
       const isItemSelected = selected.has(row[keyField]);
-      return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
         RenderItem,
         {
           ...{
@@ -7214,16 +7283,21 @@ var TableDesktop = ({
       setSelected(/* @__PURE__ */ new Set());
     }
   }, [enableCheckboxSelection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_material60.Paper, { className: classes.paper, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      import_material60.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_material61.Paper, { className: classes.paper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+      import_material61.Table,
       {
         stickyHeader: true,
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         style: { tableLayout },
-        children: visibleHeadCells.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(TableDesktopNoColumnsMessage, {}) : /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        children: visibleHeadCells.length === 0 && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          TableDesktopNoColumnsMessage,
+          {
+            handleClickOnNoColumnsMessageAction
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             SmartTableHeader_default,
             {
               headCells: visibleHeadCells,
@@ -7239,14 +7313,21 @@ var TableDesktop = ({
               shouldShowCheckOnFilter
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_material60.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+          !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             TableEmptyResult_default,
             {
               colSpan: enableCheckboxSelection ? visibleHeadCells.length + 1 : visibleHeadCells.length,
               showClearFilterButton,
               handleClickOnClearFiltersButton
             }
-          ) })
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableBody, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            import_material61.TableCell,
+            {
+              colSpan: visibleHeadCells.length,
+              align: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material61.CircularProgress, {})
+            }
+          ) }) })
         ] })
       }
     ) }),
@@ -7256,7 +7337,7 @@ var TableDesktop = ({
 var TableDesktop_default = TableDesktop;
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
   filterMenu: {
     display: "flex",
@@ -7291,7 +7372,7 @@ var useStyles49 = (0, import_mui55.makeStyles)()((theme) => ({
     padding: theme.spacing(0, 1),
     justifyContent: "space-between"
   },
-  saveAsDefaultButton: {
+  applyButton: {
     color: theme.palette.primary.main
   },
   skeleton: {
@@ -7326,7 +7407,10 @@ var SmartTableHeaderFilterMenu = ({
       setFilterOptionsData(headCell.filterOptions);
     }
   }, [headCell.filterOptions]);
-  const numFilterOptions = (0, import_react34.useMemo)(() => filterOptionsData?.length ?? 0, [filterOptionsData?.length]);
+  const numFilterOptions = (0, import_react34.useMemo)(
+    () => filterOptionsData?.length ?? 0,
+    [filterOptionsData?.length]
+  );
   const numCurrentSelectedFilters = selectedFilters.length;
   const handleFilterMenuOpen = (event) => {
     if (!numFilterOptions) {
@@ -7365,21 +7449,24 @@ var SmartTableHeaderFilterMenu = ({
   (0, import_react34.useEffect)(() => {
     setSelectedFilters(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  const isOptionChecked = (0, import_react34.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
-    (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
-  ), [selectedFilters]);
-  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { "data-testid": "loading-skeletons", width: 272, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton }),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Skeleton, { variant: "rounded", className: classes.skeleton })
+  const isOptionChecked = (0, import_react34.useMemo)(
+    () => (resolvedOption) => !!selectedFilters?.some(
+      (value) => resolveOptionType(value, headCell.fieldName ?? "") === resolvedOption
+    ),
+    [selectedFilters]
+  );
+  const loadingSkeletons = /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { "data-testid": "loading-skeletons", width: 272, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton }),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Skeleton, { variant: "rounded", className: classes.skeleton })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
       ActiveFiltersIconButton_default,
       {
         numActiveFilters,
@@ -7389,8 +7476,8 @@ var SmartTableHeaderFilterMenu = ({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-      import_material61.Menu,
+    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+      import_material62.Menu,
       {
         open: !!anchorEl,
         onClose: handleFilterMenuClose,
@@ -7398,20 +7485,22 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu",
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { className: classes.filterMenu, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-            import_material61.FormControlLabel,
+        children: headCell.isFetchingFilterOptions ? loadingSkeletons : /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.filterMenu, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Box, { px: 3, mb: 0.5, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            import_material62.FormControlLabel,
             {
               label: "Select All",
-              control: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                import_material61.Checkbox,
+              control: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_material62.Checkbox,
                 {
                   disableRipple: true,
                   checked: numCurrentSelectedFilters === numFilterOptions,
                   indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
                   onChange: ({ target: { checked } }) => {
                     if (checked) {
-                      setSelectedFilters([...filterOptionsData]);
+                      setSelectedFilters([
+                        ...filterOptionsData
+                      ]);
                     } else {
                       setSelectedFilters([]);
                     }
@@ -7420,57 +7509,52 @@ var SmartTableHeaderFilterMenu = ({
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Box, { className: classes.filterOptions, children: filterOptionsData?.map(
-            (option) => {
-              const resolvedOption = resolveOptionType(option, headCell.fieldName ?? "");
-              return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
-                import_material61.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Box, { className: classes.filterOptions, children: filterOptionsData?.map((option) => {
+            const resolvedOption = resolveOptionType(
+              option,
+              headCell.fieldName ?? ""
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.filter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                import_material62.FormControlLabel,
                 {
-                  className: classes.filter,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                      import_material61.FormControlLabel,
-                      {
-                        label: resolvedOption,
-                        control: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-                          import_material61.Checkbox,
-                          {
-                            disableRipple: true,
-                            onChange: () => handleFilterOptionClick(option),
-                            checked: isOptionChecked(resolvedOption)
-                          }
-                        )
-                      },
-                      resolvedOption
-                    ),
-                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
-                  ]
+                  label: resolvedOption,
+                  control: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    import_material62.Checkbox,
+                    {
+                      disableRipple: true,
+                      onChange: () => handleFilterOptionClick(option),
+                      checked: isOptionChecked(resolvedOption)
+                    }
+                  )
                 },
                 resolvedOption
-              );
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_material61.Divider, { sx: { mb: 0.5 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_material61.Box, { className: classes.applyFilterButtonsContainer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+              ),
+              shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Tooltip, { title: "This filter is saved as default", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_Check.default, { fontSize: "small", color: "action" }) }) : null
+            ] }, resolvedOption);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material62.Divider, { sx: { mb: 0.5 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material62.Box, { className: classes.applyFilterButtonsContainer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
               ExtendedButton_default,
               {
-                copy: "Save as Default",
-                buttonType: "button",
+                copy: "Apply",
                 variant: "text",
-                tooltip: "Persists those filters for future visits",
-                className: classes.saveAsDefaultButton,
-                onClick: () => handleApplyFilters(true)
+                buttonType: "button",
+                tooltip: "Apply the filters without saving.",
+                className: classes.applyButton,
+                onClick: () => handleApplyFilters(false)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
               ExtendedButton_default,
               {
-                copy: "Apply",
+                copy: "Save as Default",
                 color: "primary",
                 buttonType: "submit",
-                onClick: () => handleApplyFilters(false)
+                tooltip: "Persists those filters for future visits",
+                onClick: () => handleApplyFilters(true)
               }
             )
           ] })
@@ -7483,19 +7567,19 @@ var SmartTableHeaderFilterMenu_default = (0, import_react34.memo)(SmartTableHead
 
 // src/components/Table/Table.tsx
 var import_react35 = require("react");
-var import_material63 = require("@mui/material");
+var import_material64 = require("@mui/material");
 var import_debounce = __toESM(require_debounce(), 1);
 var import_mui56 = require("tss-react/mui");
 var import_uuid = require("uuid");
 
 // src/components/TableLoading/TableLoading.tsx
-var import_material62 = require("@mui/material");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_material63 = require("@mui/material");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material62.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-  import_material62.Skeleton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material63.Box, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  import_material63.Skeleton,
   {
     animation: "pulse",
     "data-testid": "table-loading-skeleton",
@@ -7543,7 +7627,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var useStyles50 = (0, import_mui56.makeStyles)()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -7621,25 +7705,25 @@ var Table2 = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { colSpan: 8 }) }, (0, import_uuid.v4)())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material63.Table, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-      import_material63.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Paper, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Box, { className: classes.paper, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableContainer, { className: classes.container, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.Table, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableHead, { className: classes.header, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { children: headCells?.map((headCell) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      import_material64.TableCell,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
-          import_material63.TableSortLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          import_material64.TableSortLabel,
           {
             active: orderBy === headCell.id,
             direction: orderBy === headCell.id ? order : "asc",
@@ -7650,9 +7734,9 @@ var Table2 = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_material63.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_material63.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableRow, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.TableCell, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
@@ -7660,8 +7744,8 @@ var Table_default = Table2;
 
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 var import_Refresh = __toESM(require("@mui/icons-material/Refresh"), 1);
-var import_material64 = require("@mui/material");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_material65 = require("@mui/material");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -7672,8 +7756,8 @@ var TableDesktopFooter = ({
   refetch,
   isFetching
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    import_material64.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+    import_material65.Box,
     {
       py: 1,
       gap: 2,
@@ -7683,8 +7767,8 @@ var TableDesktopFooter = ({
       borderTop: `1px solid ${colors.neutral300}`,
       bgcolor: (theme) => theme.palette.background.default,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-          import_material64.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
+          import_material65.Button,
           {
             disableRipple: true,
             variant: "outlined",
@@ -7698,7 +7782,7 @@ var TableDesktopFooter = ({
               borderColor: colors.neutral600
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                 import_Refresh.default,
                 {
                   fontSize: "small",
@@ -7709,22 +7793,22 @@ var TableDesktopFooter = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material64.Box, { display: "flex", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_material64.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.Typography, { children: "Rows per page:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-              import_material64.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Box, { display: "flex", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_material65.Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.Typography, { children: "Rows per page:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+              import_material65.Select,
               {
                 value: pageSize,
                 onChange: handlePageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_material64.MenuItem, { value: size, children: size }, size))
+                children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_material65.MenuItem, { value: size, children: size }, size))
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-            import_material64.Pagination,
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+            import_material65.Pagination,
             {
               color: "standard",
               count: numPages,
@@ -7743,11 +7827,11 @@ var import_react38 = require("react");
 var import_Check2 = __toESM(require("@mui/icons-material/Check"), 1);
 var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
 var import_Edit = __toESM(require("@mui/icons-material/Edit"), 1);
-var import_material66 = require("@mui/material");
+var import_material67 = require("@mui/material");
 
 // src/components/TableDesktopRowCell/TableDesktopSmartSelect.tsx
 var import_react36 = require("react");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var resolveValue = (value) => {
   if (typeof value === "string") {
     return value;
@@ -7779,7 +7863,7 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
       setOptions(parsedOptions);
     }
   }, [filterOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     SmartSelect_default,
     {
       ref,
@@ -7803,8 +7887,8 @@ var TableDesktopSmartSelect = (0, import_react36.memo)(({
 
 // src/components/TableDesktopRowCell/TableDesktopTextField.tsx
 var import_react37 = require("react");
-var import_material65 = require("@mui/material");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_material66 = require("@mui/material");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var TableDesktopTextField = ({
   rowId,
   editInitialValue,
@@ -7827,8 +7911,8 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-    import_material65.TextField,
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_material66.TextField,
     {
       fullWidth: true,
       variant: "standard",
@@ -7848,10 +7932,10 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopRowCell/TableDesktopRowCell.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Check2.default, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -7901,7 +7985,7 @@ var TableDesktopRowCell = ({
     };
   }, [isEditMode]);
   const editableComponents = {
-    "select": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    "select": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       TableDesktopSmartSelect,
       {
         rowId,
@@ -7915,8 +7999,8 @@ var TableDesktopRowCell = ({
         onUpdateEditableCell
       }
     ),
-    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material66.Checkbox,
+    "checkbox": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_material67.Checkbox,
       {
         disableRipple: true,
         disabled,
@@ -7926,7 +8010,7 @@ var TableDesktopRowCell = ({
         }
       }
     ),
-    "text": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    "text": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       TableDesktopTextField,
       {
         rowId,
@@ -7937,8 +8021,8 @@ var TableDesktopRowCell = ({
         onUpdateEditableCell
       }
     ),
-    "numeric": /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      import_material66.TextField,
+    "numeric": /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_material67.TextField,
       {
         fullWidth: true,
         variant: "standard",
@@ -7963,8 +8047,8 @@ var TableDesktopRowCell = ({
     e.stopPropagation();
     setIsEditMode((prev) => !prev);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_material66.TableCell,
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Tooltip, { title: isOverflowed ? String(readOnlyValue) : "", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    import_material67.TableCell,
     {
       align: "left",
       onMouseEnter: () => editableCellType && !disabled && setIsCellHovered(true),
@@ -7981,8 +8065,8 @@ var TableDesktopRowCell = ({
         },
         background: isEditMode ? colors.lightBlueBackground : (theme) => theme.palette.background.default
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
-        import_material66.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+        import_material67.Box,
         {
           p: 1,
           ref: cellRef,
@@ -7990,8 +8074,8 @@ var TableDesktopRowCell = ({
           textOverflow: "ellipsis",
           whiteSpace: "nowrap",
           children: [
-            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_material66.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-              import_material66.IconButton,
+            isCellHovered ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material67.Tooltip, { title: isEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              import_material67.IconButton,
               {
                 onClick: handleEditClick,
                 sx: {
@@ -8005,7 +8089,7 @@ var TableDesktopRowCell = ({
                     backgroundColor: isEditMode ? colors.lightBlueBackground : colors.neutral150
                   }
                 },
-                children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_Edit.default, { fontSize: "small" })
+                children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Close.default, { fontSize: "small", color: "error" }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_Edit.default, { fontSize: "small" })
               }
             ) }) : null,
             isEditMode && editableCellType ? editableComponents[editableCellType] : renderReadOnlyValue(readOnlyValue)
@@ -8019,9 +8103,9 @@ var TableDesktopRowCell = ({
 // src/components/TableHeader/TableHeader.tsx
 var import_react39 = require("react");
 var import_icons_material12 = require("@mui/icons-material");
-var import_material67 = require("@mui/material");
+var import_material68 = require("@mui/material");
 var import_mui57 = require("tss-react/mui");
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var useStyles51 = (0, import_mui57.makeStyles)()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -8066,8 +8150,8 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_material67.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-    import_material67.TableSortLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableRow, { children: sortableCells.map((cell, key) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_material68.TableCell, { children: cell.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_material68.TableSortLabel,
     {
       className: classes.sortLabel,
       direction: cell?.direction || "asc",
@@ -8080,9 +8164,9 @@ var TableHeader = ({ cells, onSort = null }) => {
 var TableHeader_default = (0, import_react39.memo)(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-var import_material68 = require("@mui/material");
+var import_material69 = require("@mui/material");
 var import_mui58 = require("tss-react/mui");
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var useStyles52 = (0, import_mui58.makeStyles)()(() => ({
   icon: {
     fontSize: 20
@@ -8119,19 +8203,19 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles52();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
-    import_material68.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    import_material69.Box,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Divider, { className: classes.leftDivider }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_material68.Box, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-            import_material68.Typography,
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Divider, { className: classes.leftDivider }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Button, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Box, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            import_material69.Typography,
             {
               color: "textSecondary",
               className: classes.title,
@@ -8139,9 +8223,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_material68.Divider, { className: classes.rightDivider })
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Divider, { className: classes.rightDivider })
       ]
     }
   );
@@ -8153,7 +8237,7 @@ var import_react_dates = require("react-dates");
 var import_mui59 = require("tss-react/mui");
 var import_initialize = require("react-dates/initialize");
 var import_datepicker = require("react-dates/lib/css/_datepicker.css");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var useStyles53 = (0, import_mui59.makeStyles)()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -8249,15 +8333,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles53();
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_dates.DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_dates.DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
 var import_react40 = require("react");
-var import_material69 = require("@mui/material");
+var import_material70 = require("@mui/material");
 var import_mui60 = require("tss-react/mui");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var useStyles54 = (0, import_mui60.makeStyles)()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -8277,9 +8361,9 @@ var TheToolbar = ({
   rightSection
 }) => {
   const { classes } = useStyles54();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_material69.Toolbar, { className: classes.topBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.AppBar, { children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material70.Toolbar, { className: classes.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -8288,7 +8372,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         CompanyLogo_default,
         {
           size: "small",
@@ -8297,8 +8381,8 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Box, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_material69.Box, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Box, { ml: 2, children: leftSection }),
+      /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material70.Box, { ml: "auto", children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
@@ -8306,22 +8390,22 @@ var TheToolbar = ({
 var TheToolbar_default = (0, import_react40.memo)(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
-var import_material70 = require("@mui/material");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_material71 = require("@mui/material");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-  import_material70.Snackbar,
+}) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  import_material71.Snackbar,
   {
     open,
     autoHideDuration: 1500,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      import_material70.Alert,
+    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      import_material71.Alert,
       {
         elevation: 6,
         variant: "filled",
@@ -8347,9 +8431,9 @@ var ToastMessage = ({
 var ToastMessage_default = ToastMessage;
 
 // src/components/TwoButtonDialog/TwoButtonDialog.tsx
-var import_material71 = require("@mui/material");
+var import_material72 = require("@mui/material");
 var import_mui61 = require("tss-react/mui");
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var useStyles55 = (0, import_mui61.makeStyles)()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -8379,20 +8463,20 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles55();
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    import_material71.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    import_material72.Dialog,
     {
       open,
       disableEnforceFocus: true,
       maxWidth: "sm",
       fullWidth: true,
       closeAfterTransition: true,
-      BackdropComponent: import_material71.Backdrop,
+      BackdropComponent: import_material72.Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Paper, { className: classes.paper, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Box, { className: classes.mb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-            import_material71.Box,
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Fade, { in: open, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Paper, { className: classes.paper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Box, { className: classes.mb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "h5", component: "div", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            import_material72.Box,
             {
               sx: {
                 fontWeight: 600
@@ -8400,23 +8484,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
-            import_material71.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+            import_material72.Box,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Typography, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Typography, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material71.Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_material71.Box, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material72.Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material72.Box, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -8429,7 +8513,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
             FilledButton_default,
             {
               color: "primary",
@@ -8438,7 +8522,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -8447,29 +8531,29 @@ var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
 var import_react41 = require("react");
-var import_material72 = require("@mui/material");
-var import_jsx_runtime126 = require("react/jsx-runtime");
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-    import_material72.Avatar,
+var import_material73 = require("@mui/material");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_material73.Avatar,
     {
       src: user.profile_picture,
       alt: "user_avatar",
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material72.Typography, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_material73.Typography, { ...typographyProps.username, children: user.username })
   ] })
 ] });
 var UserBust_default = (0, import_react41.memo)(UserBust);
 
 // src/components/icons/IconChart.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     "svg",
     {
       width: "20",
@@ -8478,7 +8562,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         "path",
         {
           d: "M2.49967 11.6667L2.91634 11.725L6.72467 7.91667C6.57467 7.375 6.71634 6.75833 7.15801 6.325C7.80801 5.66667 8.85801 5.66667 9.50801 6.325C9.94967 6.75833 10.0913 7.375 9.94134 7.91667L12.083 10.0583L12.4997 10C12.6497 10 12.7913 10 12.9163 10.0583L15.8913 7.08333C15.833 6.95833 15.833 6.81667 15.833 6.66667C15.833 6.22464 16.0086 5.80072 16.3212 5.48816C16.6337 5.17559 17.0576 5 17.4997 5C17.9417 5 18.3656 5.17559 18.6782 5.48816C18.9907 5.80072 19.1663 6.22464 19.1663 6.66667C19.1663 7.10869 18.9907 7.53262 18.6782 7.84518C18.3656 8.15774 17.9417 8.33333 17.4997 8.33333C17.3497 8.33333 17.208 8.33333 17.083 8.275L14.108 11.25C14.1663 11.375 14.1663 11.5167 14.1663 11.6667C14.1663 12.1087 13.9907 12.5326 13.6782 12.8452C13.3656 13.1577 12.9417 13.3333 12.4997 13.3333C12.0576 13.3333 11.6337 13.1577 11.3212 12.8452C11.0086 12.5326 10.833 12.1087 10.833 11.6667L10.8913 11.25L8.74967 9.10833C8.48301 9.16667 8.18301 9.16667 7.91634 9.10833L4.10801 12.9167L4.16634 13.3333C4.16634 13.7754 3.99075 14.1993 3.67819 14.5118C3.36563 14.8244 2.9417 15 2.49967 15C2.05765 15 1.63372 14.8244 1.32116 14.5118C1.0086 14.1993 0.833008 13.7754 0.833008 13.3333C0.833008 12.8913 1.0086 12.4674 1.32116 12.1548C1.63372 11.8423 2.05765 11.6667 2.49967 11.6667Z",