@natoora-libs/core 0.0.32 → 0.0.34

package/dist/components/index.js

@@ -191,7 +191,7 @@ var BackHeader_default = BackHeader;
 
 // src/components/BottomBar/BottomBar.tsx
 import { Box as Box5, Paper } from "@mui/material";
-import { bool as bool2, func as func2, node, string as string2 } from "prop-types";
+import { bool, func, node, string } from "prop-types";
 import { makeStyles as makeStyles5 } from "tss-react/mui";
 
 // src/components/Buttons/ExtendedButton/ExtendedButton.tsx
@@ -214,7 +214,6 @@ import AppsIcon from "@mui/icons-material/Apps";
 import { Box as Box4 } from "@mui/material";
 import Button4 from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
-import { bool, func, oneOf, string } from "prop-types";
 import { makeStyles as makeStyles4 } from "tss-react/mui";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var useStyles4 = makeStyles4()((theme) => ({
@@ -278,18 +277,18 @@ var useStyles4 = makeStyles4()((theme) => ({
   }
 }));
 var ExtendedButton = ({
-  buttonType,
+  buttonType = "button",
   className,
-  color,
+  color = "default",
   copy,
-  disabled,
-  href,
-  onClick,
-  subcopy,
-  type,
-  variant,
-  component,
-  tooltip
+  disabled = false,
+  href = "",
+  onClick = void 0,
+  subcopy = void 0,
+  type = void 0,
+  variant = "outlined",
+  component = "button",
+  tooltip = ""
 }) => {
   const { classes, cx } = useStyles4();
   const icons2 = {
@@ -307,12 +306,13 @@ var ExtendedButton = ({
     download: GetApp,
     publish: Publish
   };
-  const IconComponent = icons2[type];
+  const muiColor = color === "noOutline" || color === "default" ? void 0 : color;
+  const IconComponent = type ? icons2[type] : null;
   return /* @__PURE__ */ jsx5(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx5(Box4, { children: /* @__PURE__ */ jsxs4(
     Button4,
     {
       className: cx(classes[color], className),
-      color: color === "noOutline" ? "default" : color,
+      color: muiColor,
       component,
       "data-testid": copy ? `extended-button-${copy.toLowerCase()}` : "extended-button",
       disabled,
@@ -321,7 +321,7 @@ var ExtendedButton = ({
       type: buttonType,
       variant,
       children: [
-        type ? /* @__PURE__ */ jsx5(IconComponent, { fontSize: "small", className: classes.icon }) : null,
+        IconComponent && /* @__PURE__ */ jsx5(IconComponent, { fontSize: "small", className: classes.icon }),
         /* @__PURE__ */ jsxs4("div", { className: classes.copy, children: [
           copy,
           /* @__PURE__ */ jsx5("span", { children: subcopy })
@@ -330,47 +330,6 @@ var ExtendedButton = ({
     }
   ) }) });
 };
-ExtendedButton.defaultProps = {
-  buttonType: "button",
-  color: "default",
-  disabled: false,
-  href: "",
-  tooltip: "",
-  component: "button",
-  type: void 0,
-  className: void 0,
-  onClick: void 0,
-  subcopy: void 0,
-  variant: "outlined"
-};
-ExtendedButton.propTypes = {
-  buttonType: oneOf(["button", "submit"]),
-  className: string,
-  color: oneOf(["default", "inherit", "primary", "secondary", "noOutline"]),
-  copy: string.isRequired,
-  disabled: bool,
-  href: string,
-  onClick: func,
-  subcopy: string,
-  tooltip: string,
-  component: string,
-  type: oneOf([
-    "add",
-    "apps",
-    "childCare",
-    "delete",
-    "edit",
-    "importExport",
-    "notes",
-    "print",
-    "save",
-    "upload",
-    "refresh",
-    "download",
-    "publish"
-  ]),
-  variant: oneOf(["contained", "outlined", "text"])
-};
 var ExtendedButton_default = memo(ExtendedButton);
 
 // src/components/BottomBar/BottomBar.tsx
@@ -424,10 +383,10 @@ BottomBar.defaultProps = {
   onRefreshClick: null
 };
 BottomBar.propTypes = {
-  className: string2,
+  className: string,
   children: node,
-  isLoading: bool2,
-  onRefreshClick: func2
+  isLoading: bool,
+  onRefreshClick: func
 };
 var BottomBar_default = BottomBar;
 
@@ -526,7 +485,7 @@ var BoxButton_default = React3.memo(BoxButton);
 import { memo as memo2 } from "react";
 import { CircularProgress } from "@mui/material";
 import Button5 from "@mui/material/Button";
-import { bool as bool3, func as func3, oneOf as oneOf2, string as string3 } from "prop-types";
+import { bool as bool2, func as func2, oneOf, string as string2 } from "prop-types";
 import { makeStyles as makeStyles7 } from "tss-react/mui";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var useStyles7 = makeStyles7()((theme) => ({
@@ -625,9 +584,9 @@ var FilledButton = ({
   );
 };
 FilledButton.propTypes = {
-  autoFocus: bool3,
-  className: string3,
-  color: oneOf2([
+  autoFocus: bool2,
+  className: string2,
+  color: oneOf([
     "default",
     "error",
     "info",
@@ -637,13 +596,13 @@ FilledButton.propTypes = {
     "success",
     "warning"
   ]),
-  copy: string3.isRequired,
-  isLoading: bool3,
-  disabled: bool3,
-  href: string3,
-  onClick: func3,
-  type: oneOf2(["button", "submit"]),
-  variant: oneOf2(["contained", "outlined", "text"])
+  copy: string2.isRequired,
+  isLoading: bool2,
+  disabled: bool2,
+  href: string2,
+  onClick: func2,
+  type: oneOf(["button", "submit"]),
+  variant: oneOf(["contained", "outlined", "text"])
 };
 var FilledButton_default = memo2(FilledButton);
 
@@ -775,14 +734,14 @@ import React6 from "react";
 import Button7 from "@mui/material/Button";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import {
-  bool as bool4,
-  func as func4,
+  bool as bool3,
+  func as func3,
   node as node2,
   number,
-  oneOf as oneOf3,
+  oneOf as oneOf2,
   oneOfType,
   shape,
-  string as string4
+  string as string3
 } from "prop-types";
 import { makeStyles as makeStyles8 } from "tss-react/mui";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -903,17 +862,17 @@ var OutlinedButton = ({
   );
 };
 OutlinedButton.propTypes = {
-  className: string4,
-  color: string4,
-  copy: oneOfType([number, string4]).isRequired,
-  disabled: bool4,
-  href: string4,
-  isLoading: bool4,
-  onClick: func4,
+  className: string3,
+  color: string3,
+  copy: oneOfType([number, string3]).isRequired,
+  disabled: bool3,
+  href: string3,
+  isLoading: bool3,
+  onClick: func3,
   startIcon: node2,
   style: shape({}),
-  subcopy: string4,
-  type: oneOf3(["button", "submit"])
+  subcopy: string3,
+  type: oneOf2(["button", "submit"])
 };
 var OutlinedButton_default = React6.memo(OutlinedButton);
 
@@ -2631,18 +2590,102 @@ var DeleteUserDialogContent = ({
 };
 var DeleteUserDialogContent_default = React53.memo(DeleteUserDialogContent);
 
-// src/components/DesktopContainer/DesktopContainer.tsx
-import { Container, Box as Box11 } from "@mui/material";
-import { makeStyles as makeStyles15 } from "tss-react/mui";
-
-// src/components/TheToolbar/TheToolbar.tsx
-import React58 from "react";
-import { AppBar as AppBar2, Box as Box10, Toolbar as Toolbar2 } from "@mui/material";
-import { makeStyles as makeStyles14 } from "tss-react/mui";
+// src/components/Dialog/TwoButtonDialog.tsx
+import {
+  Typography as Typography7,
+  Dialog as Dialog3,
+  Backdrop,
+  Box as Box9,
+  Divider,
+  Paper as Paper2
+} from "@mui/material";
+import Fade from "@mui/material/Fade";
+import { makeStyles as makeStyles13 } from "tss-react/mui";
+import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
+var useStyles13 = makeStyles13()((theme) => ({
+  paper: {
+    padding: theme.spacing(2)
+  },
+  mt: {
+    marginTop: theme.spacing(2)
+  },
+  mb: {
+    marginBottom: theme.spacing(2)
+  },
+  buttonContainer: {
+    display: "flex",
+    justifyContent: "center",
+    marginTop: theme.spacing(1)
+  }
+}));
+var TwoButtonDialog = ({
+  confirmButton,
+  dialogLoading = false,
+  title,
+  subtitle1,
+  subtitle2,
+  open,
+  setOpen
+}) => {
+  const { classes } = useStyles13();
+  return /* @__PURE__ */ jsx62(
+    Dialog3,
+    {
+      open,
+      disableEnforceFocus: true,
+      maxWidth: "sm",
+      fullWidth: true,
+      closeAfterTransition: true,
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        timeout: 500
+      },
+      children: /* @__PURE__ */ jsx62(Fade, { in: open, children: /* @__PURE__ */ jsxs37(Paper2, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs37(Box9, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx62(Typography7, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx62(
+            Box9,
+            {
+              sx: {
+                fontWeight: 600
+              },
+              children: title
+            }
+          ) }),
+          /* @__PURE__ */ jsxs37(
+            Box9,
+            {
+              className: classes.mt,
+              sx: {
+                fontWeight: 600
+              },
+              children: [
+                subtitle1 && /* @__PURE__ */ jsx62(Typography7, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx62(Typography7, { variant: "subtitle1", children: subtitle2 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx62(Divider, {}),
+        /* @__PURE__ */ jsxs37(Box9, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx62(FilledButton_default, { copy: "CANCEL", onClick: () => setOpen(false) }),
+          /* @__PURE__ */ jsx62(
+            FilledButton_default,
+            {
+              color: "primary",
+              copy: "CONFIRM",
+              onClick: confirmButton
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx62(Loading_default, { isLoading: dialogLoading })
+      ] }) })
+    }
+  );
+};
+var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/LeftDrawer/LeftDrawer.tsx
 import React57, { memo as memo3, useState } from "react";
-import { useDispatch } from "react-redux";
 import { ExpandLess, ExpandMore, FiberManualRecord } from "@mui/icons-material";
 import {
   AppBar,
@@ -2654,23 +2697,22 @@ import {
   ListSubheader,
   SwipeableDrawer,
   Toolbar,
-  Box as Box9,
+  Box as Box10,
   ListItemButton
 } from "@mui/material";
 import Icon from "@mui/material/Icon";
-import { makeStyles as makeStyles13 } from "tss-react/mui";
+import { makeStyles as makeStyles14 } from "tss-react/mui";
 
 // src/components/UserBust/UserBust.tsx
 import React55 from "react";
-import Typography7 from "@mui/material/Typography";
-import PropTypes4 from "prop-types";
+import Typography8 from "@mui/material/Typography";
 
 // src/components/UserAvatar/UserAvatar.tsx
 import React54 from "react";
 import Avatar from "@mui/material/Avatar";
 import PropTypes3 from "prop-types";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var UserAvatar = ({ src, width, height }) => /* @__PURE__ */ jsx62(Avatar, { alt: "user_avatar", src, style: { width, height } });
+import { jsx as jsx63 } from "react/jsx-runtime";
+var UserAvatar = ({ src, width, height }) => /* @__PURE__ */ jsx63(Avatar, { alt: "user_avatar", src, style: { width, height } });
 UserAvatar.propTypes = {
   src: PropTypes3.any,
   width: PropTypes3.any,
@@ -2679,19 +2721,14 @@ UserAvatar.propTypes = {
 var UserAvatar_default = React54.memo(UserAvatar);
 
 // src/components/UserBust/UserBust.tsx
-import { jsx as jsx63, jsxs as jsxs37 } from "react/jsx-runtime";
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs37("div", { children: [
-  /* @__PURE__ */ jsx63(UserAvatar_default, { src: user.profile_picture, ...avatarProps }),
-  /* @__PURE__ */ jsxs37("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx63(Typography7, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx63(Typography7, { ...typographyProps.username, children: user.username })
+import { jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs38("div", { children: [
+  /* @__PURE__ */ jsx64(UserAvatar_default, { ...avatarProps, src: user.profile_picture }),
+  /* @__PURE__ */ jsxs38("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsx64(Typography8, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx64(Typography8, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-UserBust.propTypes = {
-  user: PropTypes4.any,
-  avatarProps: PropTypes4.any,
-  typographyProps: PropTypes4.any
-};
 var UserBust_default = React55.memo(UserBust);
 
 // src/components/LeftDrawer/helpers/useGetFilteredDrawerAppList.tsx
@@ -2734,7 +2771,7 @@ var featureName = {
 var featureName_default = featureName;
 
 // src/components/LeftDrawer/helpers/drawerAppList.js
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var drawerAppList = [
   {
     groupName: "Home",
@@ -2745,7 +2782,7 @@ var drawerAppList = [
         alwaysDisplay: true,
         featureNames: [],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconHome, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconHome, {}),
         url: `/#/`
       }
     ]
@@ -2759,7 +2796,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.NOTIFICATIONS],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconNotification, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconNotification, {}),
         url: `/#/notifications`
       },
       {
@@ -2768,7 +2805,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PROMO_CODES],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconPromoCode, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconPromoCode, {}),
         url: "/react/promo_codes"
       },
       {
@@ -2777,7 +2814,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SEARCH_CATEGORIES],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconSearchCategories, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconSearchCategories, {}),
         url: "/react/search-categories"
       },
       {
@@ -2786,7 +2823,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: ["cms"],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconContentManagement, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconContentManagement, {}),
         url: "/react/content-management"
       }
     ]
@@ -2800,7 +2837,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.AIRCALL],
         pinned: "recorded_calls",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconPhone, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconPhone, {}),
         url: "/react/air-call"
       },
       {
@@ -2809,7 +2846,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.CUSTOMERS],
         pinned: "customers",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconAccount, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconAccount, {}),
         url: `/#/customer-list`,
         children: [
           {
@@ -2832,7 +2869,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ORDERS],
         pinned: "orders",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconOrders, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconOrders, {}),
         url: `/#/orders`
       },
       {
@@ -2841,7 +2878,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PRICE_LIST],
         pinned: "price_list",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconPriceList, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconPriceList, {}),
         url: `/#/price-list`
       },
       {
@@ -2850,7 +2887,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SPECIAL_PRICES],
         pinned: "special_prices",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconSpecialPrice, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconSpecialPrice, {}),
         url: `/#/pricing/special-prices`
       }
     ]
@@ -2864,7 +2901,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PURCHASE_ORDERS],
         pinned: "purchase_orders",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconBuying, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconBuying, {}),
         url: "/react/purchase-orders"
       },
       {
@@ -2873,7 +2910,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PRODUCTS],
         pinned: "products",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconProducts, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconProducts, {}),
         url: `/#/product-base-list`
       },
       {
@@ -2882,7 +2919,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SUPPLIERS],
         pinned: "suppliers",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconSupplier, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconSupplier, {}),
         url: "/react/suppliers"
       },
       {
@@ -2891,7 +2928,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SUPPLIER_PRICES],
         pinned: "supplier_prices",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconSupplierPrices, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconSupplierPrices, {}),
         url: `/#/supplier-prices`
       },
       {
@@ -2900,7 +2937,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.BULK_UPDATE],
         pinned: "bulk-update",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconImport, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconImport, {}),
         url: "/react/bulk_update"
       }
     ]
@@ -2914,7 +2951,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.GOODS_IN],
         pinned: "goods_in",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconGoodsin, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconGoodsin, {}),
         url: "/react/goodsin-list"
       },
       {
@@ -2923,7 +2960,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.RETURNS],
         pinned: "goods_in",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconGoodsin, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconGoodsin, {}),
         url: "/react/returns"
       },
       {
@@ -2932,7 +2969,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.KANBAN],
         pinned: "kanbancards",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconVkc, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconVkc, {}),
         url: `/#/kanban`
       },
       {
@@ -2944,7 +2981,7 @@ var drawerAppList = [
             featureName: featureName_default.STOCK_MOVEMENTS
           }
         ],
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconLocation, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconLocation, {}),
         name: "Stock and Locations",
         pinned: "locations",
         routeName: "locations",
@@ -2958,7 +2995,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.PICKING_STATIONS],
         pinned: "picking_stations",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconScales, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconScales, {}),
         url: `/#/pickingstation`
       },
       {
@@ -2967,7 +3004,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.QUALITY_CONTROL],
         pinned: "quality_control",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconQc, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconQc, {}),
         url: `/#/quality-control`
       },
       {
@@ -2976,7 +3013,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.RETAIL],
         pinned: "retail",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconRetail, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconRetail, {}),
         url: `/retail/product-availability`
       },
       {
@@ -2985,7 +3022,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.SERVICE_DELIVERY],
         pinned: "runs",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconRuns, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconRuns, {}),
         url: `/#/runs`
       },
       {
@@ -2994,7 +3031,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.OPS_METRICS],
         pinned: "ops-metrics",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconOpsMetrics, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconOpsMetrics, {}),
         url: "/react/ops-metrics"
       }
     ]
@@ -3008,7 +3045,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ACCOUNTS],
         pinned: "accounts",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconAccounts, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconAccounts, {}),
         url: `/#/accounts`
       },
       {
@@ -3017,7 +3054,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.REPORTS],
         pinned: "reports",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconReports, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconReports, {}),
         url: `/reports`
       }
     ]
@@ -3031,7 +3068,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.ADMIN],
         pinned: "admin",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconSetting, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconSetting, {}),
         url: `/admin`
       },
       {
@@ -3040,7 +3077,7 @@ var drawerAppList = [
         alwaysDisplay: false,
         featureNames: [featureName_default.USER_MANAGEMENT],
         pinned: "users",
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconUserManagement, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconUserManagement, {}),
         url: "/react/user-management"
       },
       {
@@ -3049,7 +3086,7 @@ var drawerAppList = [
         alwaysDisplay: true,
         featureNames: [],
         pinned: null,
-        icon: /* @__PURE__ */ jsx64(icons_default.SvgIconLogin, {}),
+        icon: /* @__PURE__ */ jsx65(icons_default.SvgIconLogin, {}),
         url: "/react/logout"
       }
     ]
@@ -3092,8 +3129,8 @@ var useGetFilteredDrawerAppList = () => {
 var useGetFilteredDrawerAppList_default = useGetFilteredDrawerAppList;
 
 // src/components/LeftDrawer/LeftDrawer.tsx
-import { jsx as jsx65, jsxs as jsxs38 } from "react/jsx-runtime";
-var useStyles13 = makeStyles13()((theme) => ({
+import { jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
+var useStyles14 = makeStyles14()((theme) => ({
   subheader: {
     textTransform: "uppercase",
     fontSize: theme.spacing(1.5)
@@ -3149,9 +3186,14 @@ var useStyles13 = makeStyles13()((theme) => ({
     }
   }
 }));
-var LeftDrawer = ({ handleClose, handleOpen, open }) => {
+var LeftDrawer = ({
+  handleClose,
+  handleOpen,
+  onLogout,
+  open,
+  user
+}) => {
   const [openCollapse, setOpenCollapse] = useState({});
-  const dispatch = useDispatch();
   const filteredDrawerAppList = useGetFilteredDrawerAppList_default();
   const handleCollapse = (e, routeName) => {
     e.stopPropagation();
@@ -3159,8 +3201,8 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
     tempOpenCollapse[routeName] = !tempOpenCollapse[routeName];
     setOpenCollapse(tempOpenCollapse);
   };
-  const { classes } = useStyles13();
-  return /* @__PURE__ */ jsxs38(
+  const { classes } = useStyles14();
+  return /* @__PURE__ */ jsxs39(
     SwipeableDrawer,
     {
       className: classes.drawer,
@@ -3169,19 +3211,19 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
       onOpen: handleOpen,
       open,
       children: [
-        /* @__PURE__ */ jsx65(AppBar, { position: "static", children: /* @__PURE__ */ jsxs38(Toolbar, { className: classes.topBar, children: [
-          /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66(AppBar, { position: "static", children: /* @__PURE__ */ jsxs39(Toolbar, { className: classes.topBar, children: [
+          /* @__PURE__ */ jsx66(
             UserBust_default,
             {
-              user: {},
+              user,
               avatarProps: { height: 50, width: 50 },
               typographyProps: {
-                name: { variant: "subtitle1" },
-                username: { variant: "caption" }
+                name: { variant: "subtitle1", component: "div" },
+                username: { variant: "caption", component: "div" }
               }
             }
           ),
-          /* @__PURE__ */ jsx65(Box9, { children: /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx66(Box10, { children: /* @__PURE__ */ jsx66(
             RoundButton_default,
             {
               icon: "edit",
@@ -3192,21 +3234,22 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx65(List, { children: filteredDrawerAppList.map((group) => /* @__PURE__ */ jsxs38(React57.Fragment, { children: [
-          /* @__PURE__ */ jsx65(ListSubheader, { disableSticky: true, className: classes.subheader, children: group.groupName }),
-          group.apps.map((app) => /* @__PURE__ */ jsxs38(React57.Fragment, { children: [
-            /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsx66(List, { children: filteredDrawerAppList.map((group) => /* @__PURE__ */ jsxs39(React57.Fragment, { children: [
+          /* @__PURE__ */ jsx66(ListSubheader, { disableSticky: true, className: classes.subheader, children: group.groupName }),
+          group.apps.map((app) => /* @__PURE__ */ jsxs39(React57.Fragment, { children: [
+            /* @__PURE__ */ jsxs39(
               ListItem,
               {
                 title: app.url,
                 onClick: () => {
                   if (app.routeName === "logout") {
+                    return onLogout();
                   }
                   return window.location.assign(app.url);
                 },
                 children: [
-                  /* @__PURE__ */ jsx65(ListItemIcon, { children: /* @__PURE__ */ jsx65(Icon, { className: classes.iconMenu, children: app.icon }) }),
-                  /* @__PURE__ */ jsx65(
+                  /* @__PURE__ */ jsx66(ListItemIcon, { children: /* @__PURE__ */ jsx66(Icon, { className: classes.iconMenu, children: app.icon }) }),
+                  /* @__PURE__ */ jsx66(
                     ListItemText,
                     {
                       className: classes.appName,
@@ -3216,13 +3259,13 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
                       }
                     }
                   ),
-                  app.children?.length > 0 && (openCollapse[app.routeName] ? /* @__PURE__ */ jsx65(
+                  app.children?.length > 0 && (openCollapse[app.routeName] ? /* @__PURE__ */ jsx66(
                     ExpandLess,
                     {
                       "data-testid": "svg-close-collapse",
                       onClick: (e) => handleCollapse(e, app.routeName)
                     }
-                  ) : /* @__PURE__ */ jsx65(
+                  ) : /* @__PURE__ */ jsx66(
                     ExpandMore,
                     {
                       "data-testid": "svg-open-collapse",
@@ -3233,7 +3276,7 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
               },
               app.name
             ),
-            app.children?.length > 0 && /* @__PURE__ */ jsx65(Collapse, { in: openCollapse[app.routeName], children: /* @__PURE__ */ jsx65(List, { children: app.children.map((child) => /* @__PURE__ */ jsxs38(
+            app.children?.length > 0 && /* @__PURE__ */ jsx66(Collapse, { in: openCollapse[app.routeName], children: /* @__PURE__ */ jsx66(List, { children: app.children.map((child) => /* @__PURE__ */ jsxs39(
               ListItemButton,
               {
                 className: classes.nested,
@@ -3241,8 +3284,8 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
                 onClick: () => window.location.assign(app.url),
                 title: app.url,
                 children: [
-                  /* @__PURE__ */ jsx65(ListItemIcon, { children: /* @__PURE__ */ jsx65(FiberManualRecord, { style: { height: 12 } }) }),
-                  /* @__PURE__ */ jsx65(
+                  /* @__PURE__ */ jsx66(ListItemIcon, { children: /* @__PURE__ */ jsx66(FiberManualRecord, { style: { height: 12 } }) }),
+                  /* @__PURE__ */ jsx66(
                     ListItemText,
                     {
                       primary: child.name,
@@ -3263,231 +3306,15 @@ var LeftDrawer = ({ handleClose, handleOpen, open }) => {
 };
 var LeftDrawer_default = memo3(LeftDrawer);
 
-// src/components/TheToolbar/TheToolbar.tsx
-import { jsx as jsx66, jsxs as jsxs39 } from "react/jsx-runtime";
-var useStyles14 = makeStyles14()((theme) => ({
-  menuButton: {
-    color: theme.palette.primary.contrastText
-  },
-  searchNatoora: {
-    width: "100%"
-  },
-  searchIcon: {
-    opacity: ".5"
-  },
-  inputRoot: {
-    color: "inherit"
-  },
-  inputInput: {
-    transition: theme.transitions.create("width"),
-    width: "100%"
-  },
-  topBar: {
-    display: "flex",
-    gap: theme.spacing(1),
-    backgroundColor: colors.topBar
-  },
-  drawer: {
-    backgroundColor: "black"
-  },
-  drawerItem: {
-    maxWidth: "300px",
-    width: "80vw"
-  },
-  offset: theme.mixins.toolbar
-}));
-var TheToolbar = ({ imageLogoDarkSmall, imageLogoLightSmall }) => {
-  const { classes } = useStyles14();
-  const [open, setOpen] = React58.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ jsxs39(Box10, { children: [
-    /* @__PURE__ */ jsx66(AppBar2, { children: /* @__PURE__ */ jsxs39(Toolbar2, { className: classes.topBar, children: [
-      /* @__PURE__ */ jsx66(
-        RoundButton_default,
-        {
-          className: classes.menuButton,
-          icon: "menu",
-          noStrokes: true,
-          onClick: handleOpen
-        }
-      ),
-      /* @__PURE__ */ jsx66(
-        CompanyLogo_default,
-        {
-          size: "small",
-          color: "light",
-          imageLogoDarkSmall,
-          imageLogoLightSmall
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx66(Box10, { className: classes.offset }),
-    /* @__PURE__ */ jsx66(
-      LeftDrawer_default,
-      {
-        open,
-        handleOpen,
-        handleClose
-      }
-    )
-  ] });
-};
-var TheToolbar_default = React58.memo(TheToolbar);
-
-// src/components/DesktopContainer/DesktopContainer.tsx
-import { jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
-var useStyles15 = makeStyles15()((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    minHeight: "100vh",
-    maxWidth: 1420,
-    padding: 0
-  },
-  content: {
-    height: "100%",
-    flexGrow: 1
-  },
-  [theme.breakpoints.up("xl")]: {
-    root: {
-      maxWidth: 1720
-    }
-  }
-}));
-var DesktopContainer = ({
-  imageLogoDarkSmall,
-  imageLogoLightSmall,
-  children
-}) => {
-  const { classes } = useStyles15();
-  return /* @__PURE__ */ jsxs40(Container, { className: classes.root, maxWidth: "xl", children: [
-    /* @__PURE__ */ jsx67(
-      TheToolbar_default,
-      {
-        imageLogoDarkSmall,
-        imageLogoLightSmall
-      }
-    ),
-    /* @__PURE__ */ jsx67(
-      Box11,
-      {
-        className: classes.content,
-        id: "mainContainer",
-        sx: {
-          display: "flex",
-          flexDirection: "column"
-        },
-        children
-      }
-    )
-  ] });
-};
-var DesktopContainer_default = DesktopContainer;
-
-// src/components/Dialog/TwoButtonDialog.tsx
-import {
-  Typography as Typography8,
-  Dialog as Dialog3,
-  Backdrop,
-  Box as Box12,
-  Divider,
-  Paper as Paper2
-} from "@mui/material";
-import Fade from "@mui/material/Fade";
-import { makeStyles as makeStyles16 } from "tss-react/mui";
-import { jsx as jsx68, jsxs as jsxs41 } from "react/jsx-runtime";
-var useStyles16 = makeStyles16()((theme) => ({
-  paper: {
-    padding: theme.spacing(2)
-  },
-  mt: {
-    marginTop: theme.spacing(2)
-  },
-  mb: {
-    marginBottom: theme.spacing(2)
-  },
-  buttonContainer: {
-    display: "flex",
-    justifyContent: "center",
-    marginTop: theme.spacing(1)
-  }
-}));
-var TwoButtonDialog = ({
-  confirmButton,
-  dialogLoading = false,
-  title,
-  subtitle1,
-  subtitle2,
-  open,
-  setOpen
-}) => {
-  const { classes } = useStyles16();
-  return /* @__PURE__ */ jsx68(
-    Dialog3,
-    {
-      open,
-      disableEnforceFocus: true,
-      maxWidth: "sm",
-      fullWidth: true,
-      closeAfterTransition: true,
-      BackdropComponent: Backdrop,
-      BackdropProps: {
-        timeout: 500
-      },
-      children: /* @__PURE__ */ jsx68(Fade, { in: open, children: /* @__PURE__ */ jsxs41(Paper2, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs41(Box12, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx68(Typography8, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx68(
-            Box12,
-            {
-              sx: {
-                fontWeight: 600
-              },
-              children: title
-            }
-          ) }),
-          /* @__PURE__ */ jsxs41(
-            Box12,
-            {
-              className: classes.mt,
-              sx: {
-                fontWeight: 600
-              },
-              children: [
-                subtitle1 && /* @__PURE__ */ jsx68(Typography8, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx68(Typography8, { variant: "subtitle1", children: subtitle2 })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx68(Divider, {}),
-        /* @__PURE__ */ jsxs41(Box12, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx68(FilledButton_default, { copy: "CANCEL", onClick: () => setOpen(false) }),
-          /* @__PURE__ */ jsx68(
-            FilledButton_default,
-            {
-              color: "primary",
-              copy: "CONFIRM",
-              onClick: confirmButton
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx68(Loading_default, { isLoading: dialogLoading })
-      ] }) })
-    }
-  );
-};
-var TwoButtonDialog_default = TwoButtonDialog;
-
 // src/components/Pagination/PaginationForTable.tsx
 import Pagination from "@mui/material/Pagination";
 import Paper3 from "@mui/material/Paper";
 import Typography9 from "@mui/material/Typography";
-import { any as any2, func as func5, object, oneOf as oneOf4, string as string5 } from "prop-types";
-import { makeStyles as makeStyles17 } from "tss-react/mui";
-import { jsx as jsx69, jsxs as jsxs42 } from "react/jsx-runtime";
+import { any as any2, func as func4, object, oneOf as oneOf3, string as string4 } from "prop-types";
+import { makeStyles as makeStyles15 } from "tss-react/mui";
+import { jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
 var paginationHeight = "56px";
-var useStyles17 = makeStyles17()((theme) => ({
+var useStyles15 = makeStyles15()((theme) => ({
   root: {
     display: "flex",
     flexDirection: "row",
@@ -3523,12 +3350,12 @@ var PaginationForTable = ({
   style,
   updateFilters
 }) => {
-  const { classes, cx } = useStyles17();
+  const { classes, cx } = useStyles15();
   const handleChange = (event, value) => {
     updateFilters({ ...appliedFilters, page: value });
   };
   const isFixed = position === "fixed";
-  return /* @__PURE__ */ jsx69(Paper3, { children: /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx67(Paper3, { children: /* @__PURE__ */ jsxs40(
     "div",
     {
       style,
@@ -3536,11 +3363,11 @@ var PaginationForTable = ({
         [classes.fixed]: isFixed
       }),
       children: [
-        /* @__PURE__ */ jsxs42(Typography9, { variant: "body1", children: [
+        /* @__PURE__ */ jsxs40(Typography9, { variant: "body1", children: [
           "Page: ",
           page
         ] }),
-        /* @__PURE__ */ jsx69(
+        /* @__PURE__ */ jsx67(
           Pagination,
           {
             count: pagination.num_pages,
@@ -3557,34 +3384,34 @@ PaginationForTable.defaultProps = {
 };
 PaginationForTable.propTypes = {
   appliedFilters: any2,
-  className: string5,
+  className: string4,
   page: any2,
   pagination: object,
-  position: oneOf4(["relative", "fixed"]),
+  position: oneOf3(["relative", "fixed"]),
   style: any2,
-  updateFilters: func5.isRequired
+  updateFilters: func4.isRequired
 };
 var PaginationForTable_default = PaginationForTable;
 
 // src/components/ProductImage/ProductImage.tsx
 import { CardMedia } from "@mui/material";
-import { any as any3, string as string6 } from "prop-types";
+import { any as any3, string as string5 } from "prop-types";
 import { withStyles as withStyles2 } from "tss-react/mui";
-import { jsx as jsx70, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs41 } from "react/jsx-runtime";
 var PImage = ({
   classes,
   image,
   size = "c_productbust__image_xs",
   status
-}) => /* @__PURE__ */ jsxs43("div", { className: classes.c_productbust__image, children: [
-  /* @__PURE__ */ jsx70(
+}) => /* @__PURE__ */ jsxs41("div", { className: classes.c_productbust__image, children: [
+  /* @__PURE__ */ jsx68(
     CardMedia,
     {
       className: classes[size],
       image: image || "resources/img/peas.jpg"
     }
   ),
-  status && status !== "ACTIVE" && /* @__PURE__ */ jsx70("div", { className: classes.c_productbust__label_status, children: status })
+  status && status !== "ACTIVE" && /* @__PURE__ */ jsx68("div", { className: classes.c_productbust__label_status, children: status })
 ] });
 var ProductImage = withStyles2(PImage, (theme) => ({
   c_productbust__label_status: {
@@ -3665,8 +3492,8 @@ var ProductImage = withStyles2(PImage, (theme) => ({
 }));
 PImage.propTypes = {
   classes: any3,
-  image: string6,
-  size: string6,
+  image: string5,
+  size: string5,
   status: any3
 };
 var ProductImage_default = ProductImage;
@@ -3679,15 +3506,15 @@ import {
   ListItemText as ListItemText2,
   ListSubheader as ListSubheader2
 } from "@mui/material";
-import { makeStyles as makeStyles18 } from "tss-react/mui";
+import { makeStyles as makeStyles16 } from "tss-react/mui";
 
 // src/utils/useGetActiveSection.ts
 import { useEffect, useState as useState2 } from "react";
 var transformNameToID = (name) => name.replaceAll(" ", "-").toLocaleLowerCase();
 
 // src/components/RenderContentList/RenderContentList.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-var useStyles18 = makeStyles18()(
+import { jsx as jsx69 } from "react/jsx-runtime";
+var useStyles16 = makeStyles16()(
   (_theme, _params, classes) => ({
     root: {
       [`&.${classes.selected}`]: {
@@ -3701,20 +3528,20 @@ var useStyles18 = makeStyles18()(
   })
 );
 var RenderContentList = ({ items, activeSection }) => {
-  const { classes } = useStyles18();
+  const { classes } = useStyles16();
   const [active, setActive] = useState3(activeSection);
   useEffect2(() => {
     setActive(activeSection);
   }, [activeSection]);
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx69(
     List2,
     {
       component: "nav",
       "aria-labelledby": "nested-list-subheader",
-      subheader: /* @__PURE__ */ jsx71(ListSubheader2, { component: "div", id: "nested-list-subheader", children: "Contents" }),
+      subheader: /* @__PURE__ */ jsx69(ListSubheader2, { component: "div", id: "nested-list-subheader", children: "Contents" }),
       children: items.map((item) => {
         const id = transformNameToID(item);
-        return /* @__PURE__ */ jsx71(
+        return /* @__PURE__ */ jsx69(
           ListItemButton2,
           {
             component: "a",
@@ -3722,7 +3549,7 @@ var RenderContentList = ({ items, activeSection }) => {
             onClick: () => setActive(item),
             selected: active === item,
             classes: { root: classes.root },
-            children: /* @__PURE__ */ jsx71(ListItemText2, { primary: item })
+            children: /* @__PURE__ */ jsx69(ListItemText2, { primary: item })
           },
           id
         );
@@ -3733,11 +3560,11 @@ var RenderContentList = ({ items, activeSection }) => {
 var RenderContentList_default = RenderContentList;
 
 // src/components/RowProductCard/RowProductCard.tsx
-import { Box as Box13, Divider as Divider2, Paper as Paper4, Typography as Typography10 } from "@mui/material";
-import { makeStyles as makeStyles19 } from "tss-react/mui";
-import { arrayOf, node as node3, oneOf as oneOf5, oneOfType as oneOfType2, shape as shape2, string as string7 } from "prop-types";
-import { Fragment as Fragment3, jsx as jsx72, jsxs as jsxs44 } from "react/jsx-runtime";
-var useStyles19 = makeStyles19()((theme) => ({
+import { Box as Box11, Divider as Divider2, Paper as Paper4, Typography as Typography10 } from "@mui/material";
+import { makeStyles as makeStyles17 } from "tss-react/mui";
+import { arrayOf, node as node3, oneOf as oneOf4, oneOfType as oneOfType2, shape as shape2, string as string6 } from "prop-types";
+import { Fragment as Fragment3, jsx as jsx70, jsxs as jsxs42 } from "react/jsx-runtime";
+var useStyles17 = makeStyles17()((theme) => ({
   wrapper: {
     display: "flex",
     gap: theme.spacing(2),
@@ -3762,15 +3589,15 @@ var useStyles19 = makeStyles19()((theme) => ({
   }
 }));
 var RowProductCard = ({ children, columns, location, product, size }) => {
-  const { classes, cx } = useStyles19();
+  const { classes, cx } = useStyles17();
   const hasColumns = columns.length >= 1;
   const imageSize = {
     small: "c_productbust__image_sm",
     medium: "c_productbust__image_md",
     large: "c_productbust__image_lg"
   };
-  return /* @__PURE__ */ jsxs44(Paper4, { className: classes.wrapper, children: [
-    /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsxs42(Paper4, { className: classes.wrapper, children: [
+    /* @__PURE__ */ jsx70(
       ProductImage_default,
       {
         image: product.image,
@@ -3778,15 +3605,15 @@ var RowProductCard = ({ children, columns, location, product, size }) => {
         size: imageSize[size]
       }
     ),
-    /* @__PURE__ */ jsxs44(
+    /* @__PURE__ */ jsxs42(
       "div",
       {
         className: cx(classes.content, {
           [classes.onlyProductName]: !hasColumns && !location
         }),
         children: [
-          /* @__PURE__ */ jsxs44(
-            Box13,
+          /* @__PURE__ */ jsxs42(
+            Box11,
             {
               className: classes.upperRow,
               sx: {
@@ -3795,26 +3622,26 @@ var RowProductCard = ({ children, columns, location, product, size }) => {
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsxs44("div", { children: [
-                  location ? /* @__PURE__ */ jsx72(Typography10, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
-                  /* @__PURE__ */ jsx72(Typography10, { variant: "h6", children: product.name })
+                /* @__PURE__ */ jsxs42("div", { children: [
+                  location ? /* @__PURE__ */ jsx70(Typography10, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
+                  /* @__PURE__ */ jsx70(Typography10, { variant: "h6", children: product.name })
                 ] }),
                 children
               ]
             }
           ),
-          hasColumns ? /* @__PURE__ */ jsxs44(Fragment3, { children: [
-            /* @__PURE__ */ jsx72(Divider2, { className: classes.divider }),
-            /* @__PURE__ */ jsx72(
-              Box13,
+          hasColumns ? /* @__PURE__ */ jsxs42(Fragment3, { children: [
+            /* @__PURE__ */ jsx70(Divider2, { className: classes.divider }),
+            /* @__PURE__ */ jsx70(
+              Box11,
               {
                 sx: {
                   display: "flex",
                   gap: "24px"
                 },
-                children: columns.map((column) => /* @__PURE__ */ jsxs44("div", { children: [
-                  /* @__PURE__ */ jsx72(Typography10, { className: classes.smallTitle, variant: "caption", children: column.title }),
-                  typeof column.value === "string" ? /* @__PURE__ */ jsx72(Typography10, { variant: "body1", children: column.value }) : column.value
+                children: columns.map((column) => /* @__PURE__ */ jsxs42("div", { children: [
+                  /* @__PURE__ */ jsx70(Typography10, { className: classes.smallTitle, variant: "caption", children: column.title }),
+                  typeof column.value === "string" ? /* @__PURE__ */ jsx70(Typography10, { variant: "body1", children: column.value }) : column.value
                 ] }, column.title))
               }
             )
@@ -3840,42 +3667,42 @@ RowProductCard.propTypes = {
    */
   columns: arrayOf(
     shape2({
-      title: string7,
-      value: oneOfType2([string7, node3])
+      title: string6,
+      value: oneOfType2([string6, node3])
     })
   ),
   /**
    * Where is the product location
    */
-  location: string7,
+  location: string6,
   /**
    * Product information
    */
   product: shape2({
-    image: string7.isRequired,
-    name: string7.isRequired,
-    status: string7
+    image: string6.isRequired,
+    name: string6.isRequired,
+    status: string6
   }).isRequired,
-  size: oneOf5(["small", "medium", "large"])
+  size: oneOf4(["small", "medium", "large"])
 };
 var RowProductCard_default = RowProductCard;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-import React61 from "react";
-import Box15 from "@mui/material/Box";
-import PropTypes6 from "prop-types";
-import { makeStyles as makeStyles21 } from "tss-react/mui";
+import React60 from "react";
+import Box13 from "@mui/material/Box";
+import PropTypes5 from "prop-types";
+import { makeStyles as makeStyles19 } from "tss-react/mui";
 
 // src/components/SearchWithFilters/SearchWithFiltersForTable.tsx
-import React60 from "react";
+import React59 from "react";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import SearchIcon from "@mui/icons-material/Search";
-import { Box as Box14, Button as Button8, Divider as Divider3, InputBase, Paper as Paper5 } from "@mui/material";
-import PropTypes5 from "prop-types";
-import { makeStyles as makeStyles20 } from "tss-react/mui";
-import { Fragment as Fragment4, jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
-var useStyles20 = makeStyles20()((theme) => ({
+import { Box as Box12, Button as Button8, Divider as Divider3, InputBase, Paper as Paper5 } from "@mui/material";
+import PropTypes4 from "prop-types";
+import { makeStyles as makeStyles18 } from "tss-react/mui";
+import { Fragment as Fragment4, jsx as jsx71, jsxs as jsxs43 } from "react/jsx-runtime";
+var useStyles18 = makeStyles18()((theme) => ({
   c_search: {
     height: 46,
     padding: "4px",
@@ -3933,8 +3760,8 @@ var SearchWithFiltersForTable = (props) => {
     enterPressedInSearch,
     searchedValue
   } = props;
-  const { classes } = useStyles20();
-  const [searchText, setSearchText] = React60.useState("");
+  const { classes } = useStyles18();
+  const [searchText, setSearchText] = React59.useState("");
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -3949,9 +3776,9 @@ var SearchWithFiltersForTable = (props) => {
     }
   };
   const ArrowIcon = isOpen ? ArrowDropUpIcon : ArrowDropDownIcon;
-  return /* @__PURE__ */ jsxs45(Paper5, { className: classes.c_search, children: [
-    /* @__PURE__ */ jsx73(Box14, { className: classes.c_search__icon, children: /* @__PURE__ */ jsx73(SearchIcon, { className: classes.icon, fontSize: "small" }) }),
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs43(Paper5, { className: classes.c_search, children: [
+    /* @__PURE__ */ jsx71(Box12, { className: classes.c_search__icon, children: /* @__PURE__ */ jsx71(SearchIcon, { className: classes.icon, fontSize: "small" }) }),
+    /* @__PURE__ */ jsx71(
       InputBase,
       {
         className: classes.c_search__input,
@@ -3961,22 +3788,22 @@ var SearchWithFiltersForTable = (props) => {
         onKeyDown: handleKeyPress
       }
     ),
-    showFilterButton && /* @__PURE__ */ jsxs45(Fragment4, { children: [
-      /* @__PURE__ */ jsx73(
+    showFilterButton && /* @__PURE__ */ jsxs43(Fragment4, { children: [
+      /* @__PURE__ */ jsx71(
         Divider3,
         {
           className: classes.c_search__divider,
           orientation: "vertical"
         }
       ),
-      /* @__PURE__ */ jsxs45(
+      /* @__PURE__ */ jsxs43(
         Button8,
         {
           className: classes.c_search__bt_filter,
           onClick: handleFilterButtonClick,
           children: [
             "Filters",
-            /* @__PURE__ */ jsx73(ArrowIcon, { className: classes.c_search__bt_icon_filter })
+            /* @__PURE__ */ jsx71(ArrowIcon, { className: classes.c_search__bt_icon_filter })
           ]
         }
       )
@@ -3984,18 +3811,18 @@ var SearchWithFiltersForTable = (props) => {
   ] });
 };
 SearchWithFiltersForTable.propTypes = {
-  onFilterButtonClick: PropTypes5.func,
-  isOpen: PropTypes5.bool,
-  updateSearch: PropTypes5.func,
-  enterPressedInSearch: PropTypes5.func,
-  showFilterButton: PropTypes5.bool,
-  searchedValue: PropTypes5.string
+  onFilterButtonClick: PropTypes4.func,
+  isOpen: PropTypes4.bool,
+  updateSearch: PropTypes4.func,
+  enterPressedInSearch: PropTypes4.func,
+  showFilterButton: PropTypes4.bool,
+  searchedValue: PropTypes4.string
 };
-var SearchWithFiltersForTable_default = React60.memo(SearchWithFiltersForTable);
+var SearchWithFiltersForTable_default = React59.memo(SearchWithFiltersForTable);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
-var useStyles21 = makeStyles21()((theme) => ({
+import { jsx as jsx72, jsxs as jsxs44 } from "react/jsx-runtime";
+var useStyles19 = makeStyles19()((theme) => ({
   container: {
     display: "flex",
     alignItems: "center",
@@ -4025,11 +3852,11 @@ var SearchAndFilterHeaderForTable = (props) => {
     button,
     searchedValue
   } = props;
-  const { classes } = useStyles21();
-  return /* @__PURE__ */ jsxs46(Box15, { className: classes.container, children: [
-    /* @__PURE__ */ jsxs46(Box15, { className: classes.leftSection, children: [
-      /* @__PURE__ */ jsx74(AppLabel_default, { appName }),
-      /* @__PURE__ */ jsx74(
+  const { classes } = useStyles19();
+  return /* @__PURE__ */ jsxs44(Box13, { className: classes.container, children: [
+    /* @__PURE__ */ jsxs44(Box13, { className: classes.leftSection, children: [
+      /* @__PURE__ */ jsx72(AppLabel_default, { appName }),
+      /* @__PURE__ */ jsx72(
         SearchWithFiltersForTable_default,
         {
           onFilterButtonClick,
@@ -4040,41 +3867,41 @@ var SearchAndFilterHeaderForTable = (props) => {
           searchedValue
         }
       ),
-      copy && /* @__PURE__ */ jsx74(
-        Box15,
+      copy && /* @__PURE__ */ jsx72(
+        Box13,
         {
           sx: {
             margin: 0.5
           },
-          children: /* @__PURE__ */ jsx74(OutlinedButton_default, { copy })
+          children: /* @__PURE__ */ jsx72(OutlinedButton_default, { copy })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx74(Box15, { children: button })
+    /* @__PURE__ */ jsx72(Box13, { children: button })
   ] });
 };
 SearchAndFilterHeaderForTable.propTypes = {
-  appName: PropTypes6.string,
-  button: PropTypes6.node,
-  copy: PropTypes6.string,
-  enterPressedInSearch: PropTypes6.func,
-  isOpen: PropTypes6.bool,
-  onFilterButtonClick: PropTypes6.func,
-  searchedValue: PropTypes6.string,
-  showFilterButton: PropTypes6.bool,
-  updateSearch: PropTypes6.func
+  appName: PropTypes5.string,
+  button: PropTypes5.node,
+  copy: PropTypes5.string,
+  enterPressedInSearch: PropTypes5.func,
+  isOpen: PropTypes5.bool,
+  onFilterButtonClick: PropTypes5.func,
+  searchedValue: PropTypes5.string,
+  showFilterButton: PropTypes5.bool,
+  updateSearch: PropTypes5.func
 };
-var SearchAndFilterHeaderForTable_default = React61.memo(SearchAndFilterHeaderForTable);
+var SearchAndFilterHeaderForTable_default = React60.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
-import React62, { useState as useState4, useEffect as useEffect3 } from "react";
+import React61, { useState as useState4, useEffect as useEffect3 } from "react";
 import ArrowDropDownIcon2 from "@mui/icons-material/ArrowDropDown";
 import ArrowDropUpIcon2 from "@mui/icons-material/ArrowDropUp";
 import SearchIcon2 from "@mui/icons-material/Search";
 import { Button as Button9, Divider as Divider4, InputBase as InputBase2, Paper as Paper6 } from "@mui/material";
-import { makeStyles as makeStyles22 } from "tss-react/mui";
-import { jsx as jsx75, jsxs as jsxs47 } from "react/jsx-runtime";
-var useStyles22 = makeStyles22()((theme) => ({
+import { makeStyles as makeStyles20 } from "tss-react/mui";
+import { jsx as jsx73, jsxs as jsxs45 } from "react/jsx-runtime";
+var useStyles20 = makeStyles20()((theme) => ({
   searchContainer: {
     height: 46,
     padding: "4px",
@@ -4119,7 +3946,7 @@ var SearchWithFilters = ({
   disabled = false
 }) => {
   const [searchText, setSearchText] = useState4(searchValue);
-  const { classes } = useStyles22();
+  const { classes } = useStyles20();
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -4133,9 +3960,9 @@ var SearchWithFilters = ({
   useEffect3(() => {
     setSearchText(searchValue);
   }, [searchValue]);
-  return /* @__PURE__ */ jsxs47(Paper6, { className: classes.searchContainer, children: [
-    /* @__PURE__ */ jsx75(SearchIcon2, { className: classes.icon, fontSize: "small" }),
-    /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsxs45(Paper6, { className: classes.searchContainer, children: [
+    /* @__PURE__ */ jsx73(SearchIcon2, { className: classes.icon, fontSize: "small" }),
+    /* @__PURE__ */ jsx73(
       InputBase2,
       {
         className: classes.input,
@@ -4147,8 +3974,8 @@ var SearchWithFilters = ({
         inputProps: { "aria-label": "search" }
       }
     ),
-    /* @__PURE__ */ jsx75(Divider4, { className: classes.divider, orientation: "vertical" }),
-    /* @__PURE__ */ jsxs47(
+    /* @__PURE__ */ jsx73(Divider4, { className: classes.divider, orientation: "vertical" }),
+    /* @__PURE__ */ jsxs45(
       Button9,
       {
         className: classes.filterButton,
@@ -4156,20 +3983,20 @@ var SearchWithFilters = ({
         disabled,
         children: [
           "Filters",
-          showFilters ? /* @__PURE__ */ jsx75(ArrowDropUpIcon2, {}) : /* @__PURE__ */ jsx75(ArrowDropDownIcon2, {})
+          showFilters ? /* @__PURE__ */ jsx73(ArrowDropUpIcon2, {}) : /* @__PURE__ */ jsx73(ArrowDropDownIcon2, {})
         ]
       }
     )
   ] });
 };
-var SearchWithFilters_default = React62.memo(SearchWithFilters);
+var SearchWithFilters_default = React61.memo(SearchWithFilters);
 
 // src/components/SectionName/SectionName.tsx
 import InfoIcon from "@mui/icons-material/Info";
-import { Box as Box16, Tooltip as Tooltip3, Typography as Typography11 } from "@mui/material";
-import { makeStyles as makeStyles23 } from "tss-react/mui";
-import { jsx as jsx76, jsxs as jsxs48 } from "react/jsx-runtime";
-var useStyles23 = makeStyles23()(() => ({
+import { Box as Box14, Tooltip as Tooltip3, Typography as Typography11 } from "@mui/material";
+import { makeStyles as makeStyles21 } from "tss-react/mui";
+import { jsx as jsx74, jsxs as jsxs46 } from "react/jsx-runtime";
+var useStyles21 = makeStyles21()(() => ({
   container: {
     display: "flex",
     alignItems: "flex-end",
@@ -4203,10 +4030,10 @@ var SectionName = ({
   buttonText,
   buttonDisabled
 }) => {
-  const { classes } = useStyles23();
-  return /* @__PURE__ */ jsxs48(Box16, { className: classes.container, children: [
-    /* @__PURE__ */ jsxs48(Box16, { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsx76(
+  const { classes } = useStyles21();
+  return /* @__PURE__ */ jsxs46(Box14, { className: classes.container, children: [
+    /* @__PURE__ */ jsxs46(Box14, { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsx74(
         Typography11,
         {
           variant: "h5",
@@ -4216,7 +4043,7 @@ var SectionName = ({
           children: name
         }
       ),
-      tooltipDescription ? /* @__PURE__ */ jsx76(Tooltip3, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx76(
+      tooltipDescription ? /* @__PURE__ */ jsx74(Tooltip3, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx74(
         InfoIcon,
         {
           fontSize: "small",
@@ -4225,7 +4052,7 @@ var SectionName = ({
         }
       ) }) : null
     ] }),
-    buttonText ? /* @__PURE__ */ jsx76(
+    buttonText ? /* @__PURE__ */ jsx74(
       ExtendedButton_default,
       {
         type: "add",
@@ -4243,14 +4070,14 @@ var SectionName = ({
 var SectionName_default = SectionName;
 
 // src/components/Shift/Shift.tsx
-import { Box as Box17, Typography as Typography12 } from "@mui/material";
-import { oneOf as oneOf6 } from "prop-types";
-import { makeStyles as makeStyles24 } from "tss-react/mui";
+import { Box as Box15, Typography as Typography12 } from "@mui/material";
+import { oneOf as oneOf5 } from "prop-types";
+import { makeStyles as makeStyles22 } from "tss-react/mui";
 
 // src/resources/icons/DayIcon.js
-import React63 from "react";
-import { jsx as jsx77 } from "react/jsx-runtime";
-var DayIcon = (props) => /* @__PURE__ */ jsx77(
+import React62 from "react";
+import { jsx as jsx75 } from "react/jsx-runtime";
+var DayIcon = (props) => /* @__PURE__ */ jsx75(
   "svg",
   {
     fill: "none",
@@ -4259,7 +4086,7 @@ var DayIcon = (props) => /* @__PURE__ */ jsx77(
     width: 22,
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx77(
+    children: /* @__PURE__ */ jsx75(
       "path",
       {
         d: "M2.55 18.09L3.96 19.5L5.76 17.71L4.34 16.29M11 5C7.69 5 5 7.69 5 11C5 14.31 7.69 17 11 17C14.31 17 17 14.31 17 11C17 7.68 14.31 5 11 5ZM19 12H22V10H19M16.24 17.71L18.04 19.5L19.45 18.09L17.66 16.29M19.45 4L18.04 2.6L16.24 4.39L17.66 5.81M12 0H10V3H12M5.76 4.39L3.96 2.6L2.55 4L4.34 5.81L5.76 4.39ZM0 12H3V10H0M12 19H10V22H12",
@@ -4271,9 +4098,9 @@ var DayIcon = (props) => /* @__PURE__ */ jsx77(
 var DayIcon_default = DayIcon;
 
 // src/resources/icons/NightIcon.js
-import React64 from "react";
-import { jsx as jsx78 } from "react/jsx-runtime";
-var NightIcon = (props) => /* @__PURE__ */ jsx78(
+import React63 from "react";
+import { jsx as jsx76 } from "react/jsx-runtime";
+var NightIcon = (props) => /* @__PURE__ */ jsx76(
   "svg",
   {
     fill: "none",
@@ -4282,7 +4109,7 @@ var NightIcon = (props) => /* @__PURE__ */ jsx78(
     width: "14",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx78(
+    children: /* @__PURE__ */ jsx76(
       "path",
       {
         d: "M0.92627 9.99963C0.926174 11.5698 1.29582 13.1179 2.00528 14.5186C2.71474 15.9194 3.74407 17.1334 5.00994 18.0623C6.27582 18.9913 7.74265 19.6091 9.29169 19.8657C10.8407 20.1224 12.4284 20.0107 13.9263 19.5396C11.8959 18.9016 10.122 17.6323 8.86268 15.9165C7.60338 14.2008 6.92434 12.1279 6.92434 9.99963C6.92434 7.87132 7.60338 5.79851 8.86268 4.08274C10.122 2.36696 11.8959 1.09772 13.9263 0.459633C12.4284 -0.0114145 10.8407 -0.123133 9.29169 0.133521C7.74265 0.390176 6.27582 1.00799 5.00994 1.93695C3.74407 2.8659 2.71474 4.07989 2.00528 5.48063C1.29582 6.88136 0.926174 8.42948 0.92627 9.99963Z",
@@ -4294,12 +4121,12 @@ var NightIcon = (props) => /* @__PURE__ */ jsx78(
 var NightIcon_default = NightIcon;
 
 // src/components/Shift/Shift.tsx
-import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs47 } from "react/jsx-runtime";
 var ShiftEnum = {
   DAY: "Day",
   NIGHT: "Night"
 };
-var useStyles24 = makeStyles24()(() => ({
+var useStyles22 = makeStyles22()(() => ({
   shiftName: {
     textTransform: "uppercase",
     fontWeight: 600
@@ -4307,12 +4134,12 @@ var useStyles24 = makeStyles24()(() => ({
 }));
 var Shift = ({ shift }) => {
   const shiftIcon = {
-    [ShiftEnum.DAY]: /* @__PURE__ */ jsx79(DayIcon_default, { "data-testid": "shift-day" }),
-    [ShiftEnum.NIGHT]: /* @__PURE__ */ jsx79(NightIcon_default, { "data-testid": "shift-night" })
+    [ShiftEnum.DAY]: /* @__PURE__ */ jsx77(DayIcon_default, { "data-testid": "shift-day" }),
+    [ShiftEnum.NIGHT]: /* @__PURE__ */ jsx77(NightIcon_default, { "data-testid": "shift-night" })
   };
-  const { classes } = useStyles24();
-  return /* @__PURE__ */ jsxs49(
-    Box17,
+  const { classes } = useStyles22();
+  return /* @__PURE__ */ jsxs47(
+    Box15,
     {
       sx: {
         display: "flex",
@@ -4321,30 +4148,30 @@ var Shift = ({ shift }) => {
       },
       children: [
         shiftIcon[shift],
-        /* @__PURE__ */ jsxs49(Typography12, { children: [
-          /* @__PURE__ */ jsxs49("span", { className: classes.shiftName, children: [
+        /* @__PURE__ */ jsxs47(Typography12, { children: [
+          /* @__PURE__ */ jsxs47("span", { className: classes.shiftName, children: [
             shift,
             " "
           ] }),
-          /* @__PURE__ */ jsx79("span", { children: "Shift" })
+          /* @__PURE__ */ jsx77("span", { children: "Shift" })
         ] })
       ]
     }
   );
 };
 Shift.propTypes = {
-  shift: oneOf6(Object.values(ShiftEnum))
+  shift: oneOf5(Object.values(ShiftEnum))
 };
 var Shift_default = Shift;
 
 // src/components/surfaces/FixedFooter/index.js
-import React65 from "react";
-import { Box as Box18 } from "@mui/material";
-import PropTypes7 from "prop-types";
-import { makeStyles as makeStyles25 } from "tss-react/mui";
-import { jsx as jsx80, jsxs as jsxs50 } from "react/jsx-runtime";
+import React64 from "react";
+import { Box as Box16 } from "@mui/material";
+import PropTypes6 from "prop-types";
+import { makeStyles as makeStyles23 } from "tss-react/mui";
+import { jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
 var footerHeight = "64px";
-var useStyles25 = makeStyles25()((theme) => ({
+var useStyles23 = makeStyles23()((theme) => ({
   root: {
     position: "fixed",
     bottom: 0,
@@ -4362,11 +4189,11 @@ var useStyles25 = makeStyles25()((theme) => ({
   }
 }));
 var FixedFooter = ({ justifyContent, children }) => {
-  const { classes } = useStyles25();
-  return /* @__PURE__ */ jsxs50(Box18, { children: [
-    /* @__PURE__ */ jsx80(Box18, { className: classes.fixedOffset }),
-    /* @__PURE__ */ jsx80(
-      Box18,
+  const { classes } = useStyles23();
+  return /* @__PURE__ */ jsxs48(Box16, { children: [
+    /* @__PURE__ */ jsx78(Box16, { className: classes.fixedOffset }),
+    /* @__PURE__ */ jsx78(
+      Box16,
       {
         className: classes.root,
         sx: {
@@ -4378,21 +4205,21 @@ var FixedFooter = ({ justifyContent, children }) => {
   ] });
 };
 FixedFooter.propTypes = {
-  children: PropTypes7.node.isRequired,
-  justifyContent: PropTypes7.string
+  children: PropTypes6.node.isRequired,
+  justifyContent: PropTypes6.string
 };
-var FixedFooter_default = React65.memo(FixedFooter);
+var FixedFooter_default = React64.memo(FixedFooter);
 
 // src/components/Table/SmartTableHeader.js
-import React66 from "react";
+import React65 from "react";
 import TableCell from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
-import PropTypes8 from "prop-types";
-import { makeStyles as makeStyles26 } from "tss-react/mui";
-import { jsx as jsx81, jsxs as jsxs51 } from "react/jsx-runtime";
-var useStyles26 = makeStyles26()(() => ({
+import PropTypes7 from "prop-types";
+import { makeStyles as makeStyles24 } from "tss-react/mui";
+import { jsx as jsx79, jsxs as jsxs49 } from "react/jsx-runtime";
+var useStyles24 = makeStyles24()(() => ({
   root: {
     backgroundColor: colors.background,
     "& .MuiTableSortLabel-root": {
@@ -4420,18 +4247,18 @@ var useStyles26 = makeStyles26()(() => ({
   }
 }));
 var SmartTableHeader = (props) => {
-  const { classes } = useStyles26();
+  const { classes } = useStyles24();
   const { order, orderBy, onRequestSort } = props;
   const createSortHandler = (property) => (event) => {
     onRequestSort(event, property);
   };
-  return /* @__PURE__ */ jsx81(TableHead, { className: classes.root, children: /* @__PURE__ */ jsx81(TableRow, { children: props.headCells.map((headCell) => /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx79(TableHead, { className: classes.root, children: /* @__PURE__ */ jsx79(TableRow, { children: props.headCells.map((headCell) => /* @__PURE__ */ jsx79(
     TableCell,
     {
       className: classes.containerTh,
       align: "left",
       sortDirection: orderBy === headCell.id ? order : false,
-      children: /* @__PURE__ */ jsxs51(
+      children: /* @__PURE__ */ jsxs49(
         TableSortLabel,
         {
           active: orderBy === headCell.id,
@@ -4439,7 +4266,7 @@ var SmartTableHeader = (props) => {
           onClick: createSortHandler(headCell.id),
           children: [
             headCell.label,
-            orderBy === headCell.id ? /* @__PURE__ */ jsx81("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
+            orderBy === headCell.id ? /* @__PURE__ */ jsx79("span", { className: classes.visuallyHidden, children: order === "desc" ? "sorted descending" : "sorted ascending" }) : null
           ]
         }
       )
@@ -4448,12 +4275,12 @@ var SmartTableHeader = (props) => {
   )) }) });
 };
 SmartTableHeader.propTypes = {
-  order: PropTypes8.string,
-  orderBy: PropTypes8.string,
-  onRequestSort: PropTypes8.func,
-  headCells: PropTypes8.any
+  order: PropTypes7.string,
+  orderBy: PropTypes7.string,
+  onRequestSort: PropTypes7.func,
+  headCells: PropTypes7.any
 };
-var SmartTableHeader_default = React66.memo(SmartTableHeader);
+var SmartTableHeader_default = React65.memo(SmartTableHeader);
 
 // src/components/Table/TableDesktop.tsx
 import { useState as useState5 } from "react";
@@ -4464,13 +4291,13 @@ import {
   TableContainer,
   Skeleton
 } from "@mui/material";
-import { makeStyles as makeStyles28 } from "tss-react/mui";
+import { makeStyles as makeStyles26 } from "tss-react/mui";
 
 // src/components/Table/TableEmptyResult.tsx
 import { TableCell as TableCell2, TableRow as TableRow2, Typography as Typography13 } from "@mui/material";
-import { makeStyles as makeStyles27 } from "tss-react/mui";
-import { jsx as jsx82, jsxs as jsxs52 } from "react/jsx-runtime";
-var useStyles27 = makeStyles27()(() => ({
+import { makeStyles as makeStyles25 } from "tss-react/mui";
+import { jsx as jsx80, jsxs as jsxs50 } from "react/jsx-runtime";
+var useStyles25 = makeStyles25()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
 }));
@@ -4479,12 +4306,12 @@ var TableEmptyResult = ({
   handleClickOnClearFiltersButton = () => {
   }
 }) => {
-  const { classes } = useStyles27();
-  return showClearFilterButton ? /* @__PURE__ */ jsx82(TableRow2, { children: /* @__PURE__ */ jsxs52(TableCell2, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
-    /* @__PURE__ */ jsx82(EmptyGlassIcon_default, {}),
-    /* @__PURE__ */ jsx82(Typography13, { variant: "h6", children: "No results found." }),
-    /* @__PURE__ */ jsx82(Typography13, { variant: "subtitle1", children: "Search without applied filters?" }),
-    /* @__PURE__ */ jsx82(
+  const { classes } = useStyles25();
+  return showClearFilterButton ? /* @__PURE__ */ jsx80(TableRow2, { children: /* @__PURE__ */ jsxs50(TableCell2, { className: classes.tableCellIcon, colSpan: 8, align: "center", children: [
+    /* @__PURE__ */ jsx80(EmptyGlassIcon_default, {}),
+    /* @__PURE__ */ jsx80(Typography13, { variant: "h6", children: "No results found." }),
+    /* @__PURE__ */ jsx80(Typography13, { variant: "subtitle1", children: "Search without applied filters?" }),
+    /* @__PURE__ */ jsx80(
       FilledButton_default,
       {
         copy: "Search",
@@ -4493,7 +4320,7 @@ var TableEmptyResult = ({
         onClick: handleClickOnClearFiltersButton
       }
     )
-  ] }) }) : /* @__PURE__ */ jsx82(TableRow2, { children: /* @__PURE__ */ jsx82(
+  ] }) }) : /* @__PURE__ */ jsx80(TableRow2, { children: /* @__PURE__ */ jsx80(
     TableCell2,
     {
       className: classes.tableCellDefault,
@@ -4506,8 +4333,8 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/Table/TableDesktop.tsx
-import { Fragment as Fragment5, jsx as jsx83, jsxs as jsxs53 } from "react/jsx-runtime";
-var useStyles28 = makeStyles28()(() => ({
+import { Fragment as Fragment5, jsx as jsx81, jsxs as jsxs51 } from "react/jsx-runtime";
+var useStyles26 = makeStyles26()(() => ({
   root: {
     justifyContent: "space-between",
     display: "flex",
@@ -4559,7 +4386,7 @@ var TableDesktop = ({
     appliedFilters?.sortField || "delivery_date"
   );
   const [page] = useState5(0);
-  const { classes } = useStyles28();
+  const { classes } = useStyles26();
   const rowHeight = 56;
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === "asc";
@@ -4569,7 +4396,7 @@ var TableDesktop = ({
     updateSort(property, orderDir);
   };
   const emptyRows = rowsPerPage - data.length;
-  return /* @__PURE__ */ jsx83("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ jsx83(Paper7, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx83("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx81("div", { className: classes.root, style: { height }, children: /* @__PURE__ */ jsx81(Paper7, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx81("div", { children: [...Array(Math.floor(rowsPerPage))].map(() => /* @__PURE__ */ jsx81(
     Skeleton,
     {
       animation: "pulse",
@@ -4578,15 +4405,15 @@ var TableDesktop = ({
       height: rowHeight
     },
     Math.random()
-  )) }) : /* @__PURE__ */ jsxs53(Fragment5, { children: [
-    /* @__PURE__ */ jsx83(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs53(
+  )) }) : /* @__PURE__ */ jsxs51(Fragment5, { children: [
+    /* @__PURE__ */ jsx81(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs51(
       Table,
       {
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
         children: [
-          /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsx81(
             SmartTableHeader_default,
             {
               headCells,
@@ -4595,15 +4422,15 @@ var TableDesktop = ({
               onRequestSort: handleRequestSort
             }
           ),
-          /* @__PURE__ */ jsxs53(TableBody, { children: [
-            stableSort(data, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsxs51(TableBody, { children: [
+            stableSort(data, getSorting(order, orderBy)).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((item, index) => /* @__PURE__ */ jsx81(
               RenderItem,
               {
                 ...{ ...item, index, deleteItem }
               },
               item[keyField]
             )),
-            rowsPerPage === emptyRows && /* @__PURE__ */ jsx83(
+            rowsPerPage === emptyRows && /* @__PURE__ */ jsx81(
               TableEmptyResult_default,
               {
                 showClearFilterButton,
@@ -4623,10 +4450,10 @@ var TableDesktop_default = TableDesktop;
 import { memo as memo4, useEffect as useEffect4, useState as useState6 } from "react";
 import ImportExportIcon from "@mui/icons-material/ImportExport";
 import { TableCell as TableCell3, TableHead as TableHead2, TableRow as TableRow3, TableSortLabel as TableSortLabel2 } from "@mui/material";
-import { arrayOf as arrayOf2, bool as bool5, func as func6, oneOf as oneOf7, shape as shape3, string as string8 } from "prop-types";
-import { makeStyles as makeStyles29 } from "tss-react/mui";
-import { jsx as jsx84 } from "react/jsx-runtime";
-var useStyles29 = makeStyles29()(() => ({
+import { arrayOf as arrayOf2, bool as bool4, func as func5, oneOf as oneOf6, shape as shape3, string as string7 } from "prop-types";
+import { makeStyles as makeStyles27 } from "tss-react/mui";
+import { jsx as jsx82 } from "react/jsx-runtime";
+var useStyles27 = makeStyles27()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
       opacity: 1
@@ -4635,7 +4462,7 @@ var useStyles29 = makeStyles29()(() => ({
 }));
 var TableHeader = ({ cells, onSort }) => {
   const [sortableCells, setSortableCells] = useState6([]);
-  const { classes } = useStyles29();
+  const { classes } = useStyles27();
   useEffect4(() => {
     setSortableCells(cells);
   }, []);
@@ -4670,7 +4497,7 @@ var TableHeader = ({ cells, onSort }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx84(TableHead2, { children: /* @__PURE__ */ jsx84(TableRow3, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx84(TableCell3, { children: cell.isSortable ? /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx82(TableHead2, { children: /* @__PURE__ */ jsx82(TableRow3, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx82(TableCell3, { children: cell.isSortable ? /* @__PURE__ */ jsx82(
     TableSortLabel2,
     {
       className: classes.sortLabel,
@@ -4687,15 +4514,85 @@ TableHeader.defaultProps = {
 TableHeader.propTypes = {
   cells: arrayOf2(
     shape3({
-      direction: oneOf7(["asc", "desc", ""]),
-      isSortable: bool5,
-      label: string8,
-      name: string8
+      direction: oneOf6(["asc", "desc", ""]),
+      isSortable: bool4,
+      label: string7,
+      name: string7
     })
   ).isRequired,
-  onSort: func6
+  onSort: func5
 };
 var TableHeader_default = memo4(TableHeader);
+
+// src/components/TheToolbar/TheToolbar.tsx
+import React68 from "react";
+import { AppBar as AppBar2, Box as Box17, Toolbar as Toolbar2 } from "@mui/material";
+import { makeStyles as makeStyles28 } from "tss-react/mui";
+import { jsx as jsx83, jsxs as jsxs52 } from "react/jsx-runtime";
+var useStyles28 = makeStyles28()((theme) => ({
+  menuButton: {
+    color: theme.palette.primary.contrastText
+  },
+  searchNatoora: {
+    width: "100%"
+  },
+  searchIcon: {
+    opacity: ".5"
+  },
+  inputRoot: {
+    color: "inherit"
+  },
+  inputInput: {
+    transition: theme.transitions.create("width"),
+    width: "100%"
+  },
+  topBar: {
+    display: "flex",
+    gap: theme.spacing(1),
+    backgroundColor: colors.topBar
+  },
+  drawer: {
+    backgroundColor: "black"
+  },
+  drawerItem: {
+    maxWidth: "300px",
+    width: "80vw"
+  },
+  offset: theme.mixins.toolbar
+}));
+var TheToolbar = ({
+  imageLogoDarkSmall,
+  imageLogoLightSmall,
+  handleOpen,
+  LeftDrawer: LeftDrawer2
+}) => {
+  const { classes } = useStyles28();
+  return /* @__PURE__ */ jsxs52(Box17, { children: [
+    /* @__PURE__ */ jsx83(AppBar2, { children: /* @__PURE__ */ jsxs52(Toolbar2, { className: classes.topBar, children: [
+      /* @__PURE__ */ jsx83(
+        RoundButton_default,
+        {
+          className: classes.menuButton,
+          icon: "menu",
+          noStrokes: true,
+          onClick: handleOpen
+        }
+      ),
+      /* @__PURE__ */ jsx83(
+        CompanyLogo_default,
+        {
+          size: "small",
+          color: "light",
+          imageLogoDarkSmall,
+          imageLogoLightSmall
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx83(Box17, { className: classes.offset }),
+    LeftDrawer2
+  ] });
+};
+var TheToolbar_default = React68.memo(TheToolbar);
 export {
   AlertDialog_default as AlertDialog,
   AlertDialogFullScreen_default as AlertDialogFullScreen,
@@ -4707,7 +4604,6 @@ export {
   Date_default as Date,
   DeleteSubstitutionDialogContent_default as DeleteSubstitutionDialogContent,
   DeleteUserDialogContent_default as DeleteUserDialogContent,
-  DesktopContainer_default as DesktopContainer,
   ExtendedButton_default as ExtendedButton,
   FilledButton_default as FilledButton,
   FilledButtonLg_default as FilledButtonLg,