@natoora-libs/core 0.2.33 → 0.2.34

package/dist/components/index.js

@@ -5750,10 +5750,283 @@ var FixedFooter = ({ justifyContent, children }) => {
 };
 var FixedFooter_default = React4.memo(FixedFooter);
 
+// src/components/GlobalSearchTrigger/GlobalSearchTrigger.tsx
+import { memo as memo14 } from "react";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import { Box as Box29, InputBase, Paper as Paper3 } from "@mui/material";
+import { alpha as alpha2 } from "@mui/material/styles";
+import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+var GlobalSearchTrigger = ({
+  onClick,
+  onFocus,
+  onChange,
+  onKeyDown,
+  readOnly = true,
+  placeholder = "Search",
+  ariaLabel = "Global search",
+  shortcutLabel = "\u2318 K",
+  value = "",
+  minWidth = 220,
+  sx,
+  ref,
+  inputRef
+}) => {
+  return /* @__PURE__ */ jsxs61(
+    Paper3,
+    {
+      ref,
+      elevation: 0,
+      onClick,
+      role: "search",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        border: `1px solid ${alpha2(colors.white, 0.22)}`,
+        borderRadius: 1,
+        px: 1.5,
+        py: 0.75,
+        minWidth,
+        backgroundColor: alpha2(colors.black, 0.2),
+        color: alpha2(colors.white, 0.82),
+        transition: "background-color 0.15s ease, border-color 0.15s ease",
+        "&:hover": {
+          borderColor: alpha2(colors.white, 0.38),
+          backgroundColor: alpha2(colors.black, 0.35)
+        },
+        "&:focus-within": {
+          borderColor: alpha2(colors.muiPrimary, 0.95),
+          backgroundColor: alpha2(colors.black, 0.35)
+        },
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx97(SearchRoundedIcon, { sx: { fontSize: 19, color: colors.muiPrimary } }),
+        /* @__PURE__ */ jsx97(
+          InputBase,
+          {
+            inputRef,
+            value,
+            readOnly,
+            onFocus,
+            onKeyDown,
+            onChange: (event) => onChange?.(event.target.value),
+            placeholder,
+            inputProps: { "aria-label": ariaLabel },
+            sx: {
+              flexGrow: 1,
+              color: alpha2(colors.white, 0.82),
+              fontSize: 14,
+              "& input::placeholder": {
+                color: alpha2(colors.white, 0.62),
+                opacity: 1
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx97(
+          Box29,
+          {
+            sx: {
+              border: `1px solid ${alpha2(colors.white, 0.32)}`,
+              borderRadius: "5px",
+              px: 0.6,
+              py: 0.2,
+              fontSize: 11,
+              lineHeight: 1
+            },
+            children: shortcutLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var GlobalSearchTrigger_default = memo14(GlobalSearchTrigger);
+
+// src/components/GlobalSearch/GlobalSearch.tsx
+import { memo as memo15, useCallback as useCallback2, useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { Box as Box30 } from "@mui/material";
+import { jsx as jsx98 } from "react/jsx-runtime";
+var IFRAME_MESSAGE_SOURCE = "global-search-iframe";
+var HOST_SOURCE = "global-search-host";
+var COLLAPSED_HEIGHT = 44;
+var MAX_WIDTH = 760;
+var MIN_WIDTH = 280;
+var MAX_HEIGHT = 820;
+var WIDGET_SRC = "/react/search/widget";
+var isEditableElement = (target) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable) {
+    return true;
+  }
+  const tagName = target.tagName.toLowerCase();
+  const role = target.getAttribute("role");
+  return tagName === "input" || tagName === "textarea" || tagName === "select" || role === "textbox";
+};
+var GlobalSearch = ({
+  onNavigate,
+  shouldUseWindowLocation = (path) => path.startsWith("/react/") || path.startsWith("/#/")
+}) => {
+  const iframeRef = useRef5(null);
+  const wrapperRef = useRef5(null);
+  const [open, setOpen] = useState7(false);
+  const [height, setHeight] = useState7(COLLAPSED_HEIGHT);
+  const widgetSrc = WIDGET_SRC;
+  const widgetOrigin = new URL(widgetSrc, window.location.origin).origin;
+  const postToIframe = useCallback2(
+    (type) => {
+      const targetWindow = iframeRef.current?.contentWindow;
+      if (!targetWindow) {
+        return;
+      }
+      targetWindow.postMessage(
+        {
+          source: HOST_SOURCE,
+          type
+        },
+        widgetOrigin
+      );
+    },
+    [widgetOrigin]
+  );
+  const close = useCallback2(() => {
+    setOpen(false);
+    setHeight(COLLAPSED_HEIGHT);
+    postToIframe("GLOBAL_SEARCH_CLOSE");
+  }, [postToIframe]);
+  const toggle = useCallback2(() => {
+    setOpen(true);
+    setHeight(MAX_HEIGHT);
+    postToIframe("GLOBAL_SEARCH_TOGGLE");
+  }, [postToIframe]);
+  useEffect5(() => {
+    const onKeyDown = (event) => {
+      const isCommandOrCtrl = event.metaKey || event.ctrlKey;
+      if (isCommandOrCtrl && event.key.toLowerCase() === "k") {
+        if (isEditableElement(event.target) && !open) {
+          return;
+        }
+        event.preventDefault();
+        toggle();
+      }
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        close();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [close, open, toggle]);
+  useEffect5(() => {
+    if (!open) {
+      return void 0;
+    }
+    const onPointerDown = (event) => {
+      const wrapper = wrapperRef.current;
+      if (!wrapper) {
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (!wrapper.contains(target)) {
+        close();
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [close, open]);
+  useEffect5(() => {
+    const onMessage = (event) => {
+      if (event.origin !== widgetOrigin) {
+        return;
+      }
+      const iframeWindow = iframeRef.current?.contentWindow;
+      if (iframeWindow && event.source !== iframeWindow) {
+        return;
+      }
+      const data = event.data;
+      if (!data || data.source !== IFRAME_MESSAGE_SOURCE) {
+        return;
+      }
+      if (data.type === "GLOBAL_SEARCH_CLOSE") {
+        setOpen(false);
+        setHeight(COLLAPSED_HEIGHT);
+        return;
+      }
+      if (data.type === "GLOBAL_SEARCH_RESIZE") {
+        const nextHeight = Math.max(
+          COLLAPSED_HEIGHT,
+          Math.min(MAX_HEIGHT, Math.ceil(Number(data.height || 0)))
+        );
+        setHeight(nextHeight);
+        setOpen(nextHeight > COLLAPSED_HEIGHT + 1);
+        return;
+      }
+      if (data.type === "GLOBAL_SEARCH_NAVIGATE") {
+        const rawRoute = data.route;
+        if (!rawRoute || !rawRoute.startsWith("/")) {
+          return;
+        }
+        setOpen(false);
+        setHeight(COLLAPSED_HEIGHT);
+        const nextRoute = rawRoute.startsWith("/react/") || rawRoute.startsWith("/#/") ? rawRoute : `/react${rawRoute}`;
+        if (nextRoute.startsWith("/react/") || shouldUseWindowLocation(rawRoute)) {
+          window.location.assign(nextRoute);
+          return;
+        }
+        onNavigate?.(nextRoute);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [onNavigate, shouldUseWindowLocation, widgetOrigin]);
+  return /* @__PURE__ */ jsx98(
+    Box30,
+    {
+      ref: wrapperRef,
+      sx: {
+        position: "relative",
+        overflow: "visible",
+        width: "100%",
+        maxWidth: MAX_WIDTH,
+        minWidth: MIN_WIDTH,
+        flex: "1 1 420px",
+        height: COLLAPSED_HEIGHT
+      },
+      children: /* @__PURE__ */ jsx98(
+        "iframe",
+        {
+          ref: iframeRef,
+          title: "Global Search",
+          "data-testid": "global-search-widget-iframe",
+          src: widgetSrc,
+          scrolling: "no",
+          style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: "100%",
+            height,
+            border: 0,
+            display: "block",
+            backgroundColor: "transparent"
+          }
+        }
+      )
+    }
+  );
+};
+var GlobalSearch_default = memo15(GlobalSearch);
+
 // src/components/Header/Header.tsx
-import { Paper as Paper3 } from "@mui/material";
+import { Paper as Paper4 } from "@mui/material";
 import { makeStyles as makeStyles28 } from "tss-react/mui";
-import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs62 } from "react/jsx-runtime";
 var useStyles28 = makeStyles28()((theme) => ({
   container: {
     margin: theme.spacing(1)
@@ -5776,16 +6049,16 @@ var Header = ({
   wrappedHeader = false
 }) => {
   const { classes, cx } = useStyles28();
-  return /* @__PURE__ */ jsx97(
-    Paper3,
+  return /* @__PURE__ */ jsx99(
+    Paper4,
     {
       className: cx({
         [classes.container]: !wrappedHeader
       }),
       elevation: wrappedHeader ? 0 : 1,
-      children: /* @__PURE__ */ jsxs61("header", { className: classes.header, children: [
-        /* @__PURE__ */ jsx97(AppLabel_default, { appName }),
-        children ? /* @__PURE__ */ jsx97("div", { className: classes.rightContent, children }) : null
+      children: /* @__PURE__ */ jsxs62("header", { className: classes.header, children: [
+        /* @__PURE__ */ jsx99(AppLabel_default, { appName }),
+        children ? /* @__PURE__ */ jsx99("div", { className: classes.rightContent, children }) : null
       ] })
     }
   );
@@ -5795,20 +6068,20 @@ var Header_default = Header;
 // src/components/List/List.tsx
 import { FixedSizeList } from "react-window";
 import { ListItem, ListItemText as ListItemText3 } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx98, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx100, jsxs as jsxs63 } from "react/jsx-runtime";
 var ListHeader = (props) => {
   const headers = props.headers || [];
-  return /* @__PURE__ */ jsx98(ListItem, { children: headers.map((header, i) => (
+  return /* @__PURE__ */ jsx100(ListItem, { children: headers.map((header, i) => (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ jsx98(ListItemText3, { primary: header.text }, i)
+    /* @__PURE__ */ jsx100(ListItemText3, { primary: header.text }, i)
   )) });
 };
 function VirtualizedList(props) {
   const { innerWidth, innerHeight } = window;
   const { headers, items, renderItem } = props;
-  return /* @__PURE__ */ jsxs62(Fragment8, { children: [
-    /* @__PURE__ */ jsx98(ListHeader, { headers }),
-    /* @__PURE__ */ jsx98(
+  return /* @__PURE__ */ jsxs63(Fragment8, { children: [
+    /* @__PURE__ */ jsx100(ListHeader, { headers }),
+    /* @__PURE__ */ jsx100(
       FixedSizeList,
       {
         height: innerHeight - 150,
@@ -5824,11 +6097,11 @@ function VirtualizedList(props) {
 
 // src/components/LocationsSectionInfo/LocationsSectionInfo.tsx
 import { Fragment as Fragment9 } from "react";
-import { Box as Box29, Chip as Chip4, Typography as Typography20 } from "@mui/material";
+import { Box as Box31, Chip as Chip4, Typography as Typography20 } from "@mui/material";
 import { purple } from "@mui/material/colors";
 import classNames2 from "classnames";
 import { makeStyles as makeStyles29 } from "tss-react/mui";
-import { jsx as jsx99, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs64 } from "react/jsx-runtime";
 var useStyles29 = makeStyles29()(() => ({
   container: {
     display: "flex",
@@ -5874,8 +6147,8 @@ var LocationsSectionInfo = ({
     }
     return "STOCK";
   };
-  return /* @__PURE__ */ jsxs63(Box29, { className: classes.container, children: [
-    /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsxs64(Box31, { className: classes.container, children: [
+    /* @__PURE__ */ jsx101(
       Chip4,
       {
         className: classNames2(classes.defaultChip, {
@@ -5886,20 +6159,20 @@ var LocationsSectionInfo = ({
         label: getLocationLabel()
       }
     ),
-    /* @__PURE__ */ jsx99(Typography20, { className: classes.locationText, color: "primary", children: principalLocation }),
-    secondaryLocation?.map((loc) => /* @__PURE__ */ jsxs63(Fragment9, { children: [
-      /* @__PURE__ */ jsx99(Typography20, { className: classes.smallTitle, children: "/" }),
-      /* @__PURE__ */ jsx99(Typography20, { className: classes.locationText, children: loc })
+    /* @__PURE__ */ jsx101(Typography20, { className: classes.locationText, color: "primary", children: principalLocation }),
+    secondaryLocation?.map((loc) => /* @__PURE__ */ jsxs64(Fragment9, { children: [
+      /* @__PURE__ */ jsx101(Typography20, { className: classes.smallTitle, children: "/" }),
+      /* @__PURE__ */ jsx101(Typography20, { className: classes.locationText, children: loc })
     ] }, loc))
   ] });
 };
 var LocationsSectionInfo_default = LocationsSectionInfo;
 
 // src/components/Notes/Notes.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 import { FormControl as FormControl4, Input, InputAdornment as InputAdornment3, InputLabel as InputLabel4 } from "@mui/material";
 import { makeStyles as makeStyles30 } from "tss-react/mui";
-import { jsx as jsx100, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs65 } from "react/jsx-runtime";
 var useStyles30 = makeStyles30()((theme) => ({
   wrapper: {
     padding: theme.spacing(3),
@@ -5916,8 +6189,8 @@ var Notes2 = ({
   onChange,
   onClearNotes
 }) => {
-  const [notes, setNotes] = useState7("");
-  useEffect5(() => {
+  const [notes, setNotes] = useState8("");
+  useEffect6(() => {
     if (!initialNotes) {
       return;
     }
@@ -5942,13 +6215,13 @@ var Notes2 = ({
     }
   };
   const { classes } = useStyles30();
-  return /* @__PURE__ */ jsx100("div", { className: classes.wrapper, children: /* @__PURE__ */ jsxs64(FormControl4, { fullWidth: true, children: [
-    /* @__PURE__ */ jsx100(InputLabel4, { htmlFor: "notes", children: "Notes" }),
-    /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx102("div", { className: classes.wrapper, children: /* @__PURE__ */ jsxs65(FormControl4, { fullWidth: true, children: [
+    /* @__PURE__ */ jsx102(InputLabel4, { htmlFor: "notes", children: "Notes" }),
+    /* @__PURE__ */ jsx102(
       Input,
       {
         disabled: isDisabled || isLoading,
-        endAdornment: isEditable && notes.length > 0 && /* @__PURE__ */ jsx100(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx100(
+        endAdornment: isEditable && notes.length > 0 && /* @__PURE__ */ jsx102(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx102(
           RoundButton_default,
           {
             disabled: isLoading,
@@ -5974,8 +6247,8 @@ var Notes2 = ({
 var Notes_default = Notes2;
 
 // src/components/Numpad/Numpad.tsx
-import { jsx as jsx101, jsxs as jsxs65 } from "react/jsx-runtime";
-var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
+import { jsx as jsx103, jsxs as jsxs66 } from "react/jsx-runtime";
+var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs66(
   "div",
   {
     style: {
@@ -5987,9 +6260,9 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
       padding: 8
     },
     children: [
-      /* @__PURE__ */ jsxs65("div", { children: [
-        /* @__PURE__ */ jsxs65("div", { children: [
-          /* @__PURE__ */ jsx101(
+      /* @__PURE__ */ jsxs66("div", { children: [
+        /* @__PURE__ */ jsxs66("div", { children: [
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("1"),
@@ -5998,7 +6271,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "1"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("2"),
@@ -6007,7 +6280,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "2"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("3"),
@@ -6017,8 +6290,8 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs65("div", { children: [
-          /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsxs66("div", { children: [
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("4"),
@@ -6027,7 +6300,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "4"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("5"),
@@ -6036,7 +6309,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "5"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("6"),
@@ -6046,8 +6319,8 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs65("div", { children: [
-          /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsxs66("div", { children: [
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("7"),
@@ -6056,7 +6329,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "7"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("8"),
@@ -6065,7 +6338,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "8"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("9"),
@@ -6075,8 +6348,8 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs65("div", { children: [
-          /* @__PURE__ */ jsx101(
+        /* @__PURE__ */ jsxs66("div", { children: [
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("0"),
@@ -6085,7 +6358,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
               children: "0"
             }
           ),
-          /* @__PURE__ */ jsx101(
+          /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               onClick: () => handleClick("."),
@@ -6096,7 +6369,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx101(
+      /* @__PURE__ */ jsx103(
         "div",
         {
           style: {
@@ -6105,7 +6378,7 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
             justifyContent: "space-between",
             borderLeft: `1px solid ${colors.neutral250}`
           },
-          children: /* @__PURE__ */ jsx101(
+          children: /* @__PURE__ */ jsx103(
             RoundButton_default,
             {
               icon: "backspaceOutlined",
@@ -6122,10 +6395,10 @@ var Numpad = ({ handleClick, handleUndo }) => /* @__PURE__ */ jsxs65(
 var Numpad_default = Numpad;
 
 // src/components/NumpadInput/NumpadInput.tsx
-import { memo as memo14, useState as useState8 } from "react";
+import { memo as memo16, useState as useState9 } from "react";
 import { TextField as TextField6, Typography as Typography21 } from "@mui/material";
 import { makeStyles as makeStyles31 } from "tss-react/mui";
-import { jsx as jsx102, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs67 } from "react/jsx-runtime";
 var useStyles31 = makeStyles31()(() => ({
   c_numpadinput__textfield: {
     "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
@@ -6152,7 +6425,7 @@ var useStyles31 = makeStyles31()(() => ({
 var NumpadInput = (props) => {
   const { handleNextClick, inputLabel, children } = props;
   const { classes } = useStyles31();
-  const [state, setState] = useState8("");
+  const [state, setState] = useState9("");
   const handleNumpadClick = (value) => {
     setState(state + value);
   };
@@ -6162,13 +6435,13 @@ var NumpadInput = (props) => {
   function handleSubmit() {
     handleNextClick?.(state);
   }
-  const DefaultInput = /* @__PURE__ */ jsxs66("div", { children: [
-    /* @__PURE__ */ jsx102(Typography21, { variant: "h5", style: { padding: "16px 0 3rem" }, children: inputLabel }),
-    /* @__PURE__ */ jsx102("form", { noValidate: true, autoComplete: "off", children: /* @__PURE__ */ jsx102(
+  const DefaultInput = /* @__PURE__ */ jsxs67("div", { children: [
+    /* @__PURE__ */ jsx104(Typography21, { variant: "h5", style: { padding: "16px 0 3rem" }, children: inputLabel }),
+    /* @__PURE__ */ jsx104("form", { noValidate: true, autoComplete: "off", children: /* @__PURE__ */ jsx104(
       TextField6,
       {
         id: "outlined-basic",
-        label: /* @__PURE__ */ jsx102(Typography21, { style: { fontSize: "1.5rem" }, children: "Insert" }),
+        label: /* @__PURE__ */ jsx104(Typography21, { style: { fontSize: "1.5rem" }, children: "Insert" }),
         value: state,
         variant: "outlined",
         autoFocus: true,
@@ -6183,27 +6456,27 @@ var NumpadInput = (props) => {
     ) }),
     children
   ] });
-  return /* @__PURE__ */ jsxs66("div", { children: [
-    /* @__PURE__ */ jsxs66("div", { className: classes.c_numpadinput__body, children: [
+  return /* @__PURE__ */ jsxs67("div", { children: [
+    /* @__PURE__ */ jsxs67("div", { className: classes.c_numpadinput__body, children: [
       children || DefaultInput,
-      /* @__PURE__ */ jsx102(Numpad_default, { handleClick: handleNumpadClick, handleUndo })
+      /* @__PURE__ */ jsx104(Numpad_default, { handleClick: handleNumpadClick, handleUndo })
     ] }),
-    state ? /* @__PURE__ */ jsx102(
+    state ? /* @__PURE__ */ jsx104(
       FilledButtonLg_default,
       {
         color: "primary",
         copy: "next",
         handleClick: handleSubmit
       }
-    ) : /* @__PURE__ */ jsx102(FilledButtonLg_default, { copy: "next", disabled: true })
+    ) : /* @__PURE__ */ jsx104(FilledButtonLg_default, { copy: "next", disabled: true })
   ] });
 };
-var NumpadInput_default = memo14(NumpadInput);
+var NumpadInput_default = memo16(NumpadInput);
 
 // src/components/NumpadPlus/NumpadPlus.tsx
-import { Box as Box30 } from "@mui/material";
+import { Box as Box32 } from "@mui/material";
 import { makeStyles as makeStyles32 } from "tss-react/mui";
-import { jsx as jsx103, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs68 } from "react/jsx-runtime";
 var useStyles32 = makeStyles32()(() => ({
   numpadContainer: {
     display: "flex",
@@ -6235,10 +6508,10 @@ var useStyles32 = makeStyles32()(() => ({
 }));
 var NumpadPlus = ({ handleClick, handleUndo }) => {
   const { classes: styles } = useStyles32();
-  return /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadContainer, children: [
-    /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadNumbersContainer, children: [
-      /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadRow, children: [
-        /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadContainer, children: [
+    /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadNumbersContainer, children: [
+      /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadRow, children: [
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("1"),
@@ -6247,7 +6520,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "1"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("2"),
@@ -6256,7 +6529,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "2"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("3"),
@@ -6266,8 +6539,8 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadRow, children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadRow, children: [
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("4"),
@@ -6276,7 +6549,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "4"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("5"),
@@ -6285,7 +6558,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "5"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("6"),
@@ -6295,8 +6568,8 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadRow, children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadRow, children: [
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("7"),
@@ -6305,7 +6578,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "7"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("8"),
@@ -6314,7 +6587,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "8"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("9"),
@@ -6324,8 +6597,8 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs67(Box30, { className: styles.numpadRow, children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsxs68(Box32, { className: styles.numpadRow, children: [
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("0"),
@@ -6334,7 +6607,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "0"
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("."),
@@ -6343,7 +6616,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
             children: "."
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx105(
           RoundButton_default,
           {
             onClick: () => handleClick("-"),
@@ -6354,7 +6627,7 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx103(Box30, { className: styles.numpadBackspace, children: /* @__PURE__ */ jsx103(
+    /* @__PURE__ */ jsx105(Box32, { className: styles.numpadBackspace, children: /* @__PURE__ */ jsx105(
       RoundButton_default,
       {
         icon: "backspaceOutlined",
@@ -6368,9 +6641,9 @@ var NumpadPlus = ({ handleClick, handleUndo }) => {
 var NumpadPlus_default = NumpadPlus;
 
 // src/components/Pagination/Pagination.tsx
-import { Pagination, Paper as Paper4, Typography as Typography22 } from "@mui/material";
+import { Pagination, Paper as Paper5, Typography as Typography22 } from "@mui/material";
 import { makeStyles as makeStyles33 } from "tss-react/mui";
-import { jsx as jsx104, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs69 } from "react/jsx-runtime";
 var paginationHeight = "56px";
 var useStyles33 = makeStyles33()((theme) => ({
   root: {
@@ -6383,18 +6656,11 @@ var useStyles33 = makeStyles33()((theme) => ({
     borderRadius: "0 0 4px 4px",
     width: "100%",
     height: paginationHeight,
-    overflow: "hidden",
     "& > *": {
       margin: theme.spacing(2)
     },
-    "& .MuiPagination-root": {
-      minWidth: 0
-    },
-    "& .MuiPagination-ul": {
-      flexWrap: "nowrap"
-    },
-    "& .MuiPaginationItem-root": {
-      flexShrink: 0
+    "& .MuiTypography-body1": {
+      fontSize: ".850rem"
     }
   },
   fixed: {
@@ -6414,16 +6680,14 @@ var PaginationForTable = ({
   pagination,
   position = "relative",
   style,
-  updateFilters,
-  siblingCount = 1,
-  boundaryCount = 1
+  updateFilters
 }) => {
   const { classes, cx } = useStyles33();
   const handleChange = (event, value) => {
     updateFilters({ ...appliedFilters, page: value });
   };
   const isFixed = position === "fixed";
-  return /* @__PURE__ */ jsx104(Paper4, { children: /* @__PURE__ */ jsxs68(
+  return /* @__PURE__ */ jsx106(Paper5, { children: /* @__PURE__ */ jsxs69(
     "div",
     {
       style,
@@ -6431,20 +6695,18 @@ var PaginationForTable = ({
         [classes.fixed]: isFixed
       }),
       children: [
-        /* @__PURE__ */ jsxs68(Typography22, { variant: "body1", children: [
+        /* @__PURE__ */ jsxs69(Typography22, { variant: "body1", children: [
           "Page: ",
           page
         ] }),
-        /* @__PURE__ */ jsx104("div", { style: { overflowX: "auto", maxWidth: 400 }, children: /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx106(
           Pagination,
           {
             count: pagination.num_pages,
-            page: Number(page),
-            onChange: handleChange,
-            siblingCount,
-            boundaryCount
+            page,
+            onChange: handleChange
           }
-        ) })
+        )
       ]
     }
   ) });
@@ -6452,7 +6714,7 @@ var PaginationForTable = ({
 var Pagination_default = PaginationForTable;
 
 // src/components/PlusMinusInput/PlusMinusInput.tsx
-import { useCallback as useCallback2, useEffect as useEffect6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect7 } from "react";
 import { Controller as Controller9, useForm, useWatch } from "react-hook-form";
 import {
   FormControlLabel as FormControlLabel5,
@@ -6461,7 +6723,7 @@ import {
   Typography as Typography23
 } from "@mui/material";
 import { makeStyles as makeStyles34 } from "tss-react/mui";
-import { jsx as jsx105, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs70 } from "react/jsx-runtime";
 var useStyles34 = makeStyles34()((theme) => ({
   container: {
     position: "relative",
@@ -6539,7 +6801,7 @@ var PlusMinusInput = ({
     }
   });
   const inputValue = useWatch({ control, name: "inputValue" });
-  const setInputValue = useCallback2(
+  const setInputValue = useCallback3(
     (newValue) => {
       if (Number.isNaN(newValue) || newValue < 0) {
         return;
@@ -6548,7 +6810,7 @@ var PlusMinusInput = ({
     },
     [setValue]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     clearErrors("inputValue");
     if (inputValue === "") {
       setError("inputValue", {
@@ -6568,7 +6830,7 @@ var PlusMinusInput = ({
       }
     }
   }, [clearErrors, inputValue, setError]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof initialValue !== "number") {
       return;
     }
@@ -6604,7 +6866,7 @@ var PlusMinusInput = ({
     updateInputValue(value);
   };
   const { classes, cx } = useStyles34();
-  return /* @__PURE__ */ jsx105("div", { className: classes.container, children: /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsx107("div", { className: classes.container, children: /* @__PURE__ */ jsxs70(
     FormGroup,
     {
       className: cx(classes.wrapper, {
@@ -6612,7 +6874,7 @@ var PlusMinusInput = ({
         [classes.rightButtons]: buttonsPosition === "right"
       }),
       children: [
-        /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx107(
           RoundButton_default,
           {
             className: classes.minus,
@@ -6622,18 +6884,18 @@ var PlusMinusInput = ({
             size: "small"
           }
         ),
-        /* @__PURE__ */ jsxs69("div", { children: [
-          /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsxs70("div", { children: [
+          /* @__PURE__ */ jsx107(
             Controller9,
             {
               control,
               name: "inputValue",
-              render: ({ field }) => /* @__PURE__ */ jsx105(
+              render: ({ field }) => /* @__PURE__ */ jsx107(
                 FormControlLabel5,
                 {
                   ...field,
                   className: classes.formControlLabel,
-                  control: /* @__PURE__ */ jsx105(
+                  control: /* @__PURE__ */ jsx107(
                     TextField7,
                     {
                       className: classes.input,
@@ -6650,7 +6912,7 @@ var PlusMinusInput = ({
               )
             }
           ),
-          errors.inputValue && /* @__PURE__ */ jsx105(
+          errors.inputValue && /* @__PURE__ */ jsx107(
             Typography23,
             {
               className: classes.errorText,
@@ -6661,7 +6923,7 @@ var PlusMinusInput = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx105(
+        /* @__PURE__ */ jsx107(
           RoundButton_default,
           {
             className: classes.plus,
@@ -6678,28 +6940,28 @@ var PlusMinusInput = ({
 var PlusMinusInput_default = PlusMinusInput;
 
 // src/components/ProductBust/ProductBust.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { Typography as Typography24 } from "@mui/material";
 import { withStyles as withStyles4 } from "tss-react/mui";
 
 // src/components/ProductImage/ProductImage.tsx
 import { CardMedia } from "@mui/material";
 import { withStyles as withStyles3 } from "tss-react/mui";
-import { jsx as jsx106, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs71 } from "react/jsx-runtime";
 var PImage = ({
   classes,
   image,
   size = "c_productbust__image_xs",
   status
-}) => /* @__PURE__ */ jsxs70("div", { className: classes.c_productbust__image, children: [
-  /* @__PURE__ */ jsx106(
+}) => /* @__PURE__ */ jsxs71("div", { className: classes.c_productbust__image, children: [
+  /* @__PURE__ */ jsx108(
     CardMedia,
     {
       className: classes[size],
       image: image || "@/resources/img/peas.jpg"
     }
   ),
-  status && status !== "ACTIVE" && /* @__PURE__ */ jsx106("div", { className: classes.c_productbust__label_status, children: status })
+  status && status !== "ACTIVE" && /* @__PURE__ */ jsx108("div", { className: classes.c_productbust__label_status, children: status })
 ] });
 var ProductImage = withStyles3(PImage, (theme) => ({
   c_productbust__label_status: {
@@ -6781,7 +7043,7 @@ var ProductImage = withStyles3(PImage, (theme) => ({
 var ProductImage_default = ProductImage;
 
 // src/components/ProductBust/ProductBust.tsx
-import { Fragment as Fragment10, jsx as jsx107, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx109, jsxs as jsxs72 } from "react/jsx-runtime";
 var PBust = ({
   classes,
   size,
@@ -6823,8 +7085,8 @@ var PBust = ({
     default:
       break;
   }
-  const [historyVisible, setHistoryVisible] = useState9(false);
-  const historyDataIcon = () => /* @__PURE__ */ jsx107(
+  const [historyVisible, setHistoryVisible] = useState10(false);
+  const historyDataIcon = () => /* @__PURE__ */ jsx109(
     RoundButton_default,
     {
       icon: "history",
@@ -6832,8 +7094,8 @@ var PBust = ({
       size: "small"
     }
   );
-  return /* @__PURE__ */ jsxs71("div", { className: classes.c_productbust, children: [
-    /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsxs72("div", { className: classes.c_productbust, children: [
+    /* @__PURE__ */ jsx109(
       ProductImage_default,
       {
         image: product?.image,
@@ -6841,10 +7103,10 @@ var PBust = ({
         size: imageSize
       }
     ),
-    /* @__PURE__ */ jsxs71("div", { className: classes.c_productbust__container, children: [
-      /* @__PURE__ */ jsxs71("div", { className: classes.c_productbust__heading, children: [
-        /* @__PURE__ */ jsxs71("div", { children: [
-          /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsxs72("div", { className: classes.c_productbust__container, children: [
+      /* @__PURE__ */ jsxs72("div", { className: classes.c_productbust__heading, children: [
+        /* @__PURE__ */ jsxs72("div", { children: [
+          /* @__PURE__ */ jsx109(
             Typography24,
             {
               component: "span",
@@ -6853,10 +7115,10 @@ var PBust = ({
               children: !!locationData && locationData
             }
           ),
-          /* @__PURE__ */ jsx107(Typography24, { component: "span", className: classes[titleSize], children: product?.name }),
-          !product && /* @__PURE__ */ jsx107(Typography24, { component: "span", className: classes[titleSize], children: "Empty Position" }),
-          primaryData || /* @__PURE__ */ jsxs71(Fragment10, { children: [
-            /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx109(Typography24, { component: "span", className: classes[titleSize], children: product?.name }),
+          !product && /* @__PURE__ */ jsx109(Typography24, { component: "span", className: classes[titleSize], children: "Empty Position" }),
+          primaryData || /* @__PURE__ */ jsxs72(Fragment10, { children: [
+            /* @__PURE__ */ jsx109(
               Typography24,
               {
                 style: { color: "#555" },
@@ -6864,7 +7126,7 @@ var PBust = ({
                 children: product?.category.name
               }
             ),
-            /* @__PURE__ */ jsx107(
+            /* @__PURE__ */ jsx109(
               Typography24,
               {
                 style: { color: "#A42966", textTransform: "uppercase" },
@@ -6874,14 +7136,14 @@ var PBust = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs71("div", { className: classes.c_productbust__btns, children: [
-          /* @__PURE__ */ jsx107("div", { children: buttonData }),
-          /* @__PURE__ */ jsx107("div", { children: !!locationId && historyDataIcon() })
+        /* @__PURE__ */ jsxs72("div", { className: classes.c_productbust__btns, children: [
+          /* @__PURE__ */ jsx109("div", { children: buttonData }),
+          /* @__PURE__ */ jsx109("div", { children: !!locationId && historyDataIcon() })
         ] })
       ] }),
-      /* @__PURE__ */ jsx107("div", { children: !!secondaryData && secondaryData })
+      /* @__PURE__ */ jsx109("div", { children: !!secondaryData && secondaryData })
     ] }),
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx109(
       LocationHistoryDialog,
       {
         handleVisible: setHistoryVisible,
@@ -6983,9 +7245,9 @@ var ProductBust = withStyles4(PBust, (theme) => ({
 var ProductBust_default = ProductBust;
 
 // src/components/RenderAvatar/RenderAvatar.tsx
-import { Avatar, Badge, Box as Box31, Typography as Typography25 } from "@mui/material";
+import { Avatar, Badge, Box as Box33, Typography as Typography25 } from "@mui/material";
 import { withStyles as withStyles5 } from "tss-react/mui";
-import { jsx as jsx108, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs73 } from "react/jsx-runtime";
 var RenderAvatar = ({ active }) => {
   const StyledBadge = withStyles5(Badge, () => ({
     root: {
@@ -6994,12 +7256,12 @@ var RenderAvatar = ({ active }) => {
       }
     }
   }));
-  return /* @__PURE__ */ jsxs72(
-    Box31,
+  return /* @__PURE__ */ jsxs73(
+    Box33,
     {
       sx: { display: "flex", flexDirection: "column", alignItems: "center" },
       children: [
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx110(
           StyledBadge,
           {
             overlap: "circular",
@@ -7008,10 +7270,10 @@ var RenderAvatar = ({ active }) => {
               horizontal: "right"
             },
             variant: "dot",
-            children: /* @__PURE__ */ jsx108(Avatar, {})
+            children: /* @__PURE__ */ jsx110(Avatar, {})
           }
         ),
-        /* @__PURE__ */ jsx108(Typography25, { variant: "caption", children: active ? "Active" : "Disabled" })
+        /* @__PURE__ */ jsx110(Typography25, { variant: "caption", children: active ? "Active" : "Disabled" })
       ]
     }
   );
@@ -7019,7 +7281,7 @@ var RenderAvatar = ({ active }) => {
 var RenderAvatar_default = RenderAvatar;
 
 // src/components/RenderContentList/RenderContentList.tsx
-import { useEffect as useEffect8, useState as useState11, useRef as useRef5 } from "react";
+import { useEffect as useEffect9, useState as useState12, useRef as useRef6 } from "react";
 import WarningAmber from "@mui/icons-material/WarningAmber";
 import {
   List,
@@ -7031,11 +7293,11 @@ import {
 import { makeStyles as makeStyles35 } from "tss-react/mui";
 
 // src/utils/useGetActiveSection.ts
-import { useEffect as useEffect7, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 var transformNameToID = (name) => name.replaceAll(" ", "_").toLocaleLowerCase();
 
 // src/components/RenderContentList/RenderContentList.tsx
-import { jsx as jsx109, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs74 } from "react/jsx-runtime";
 var useStyles35 = makeStyles35()(
   (_theme, _params, classes) => ({
     root: {
@@ -7056,11 +7318,11 @@ var RenderContentList = ({
   warningMessage = "Missing information on this section"
 }) => {
   const { classes } = useStyles35();
-  const [active, setActive] = useState11(activeSection);
-  const observer = useRef5(null);
-  const isScrolling = useRef5(false);
-  const timeoutScrolling = useRef5(null);
-  useEffect8(() => {
+  const [active, setActive] = useState12(activeSection);
+  const observer = useRef6(null);
+  const isScrolling = useRef6(false);
+  const timeoutScrolling = useRef6(null);
+  useEffect9(() => {
     if (!activeSection) {
       return void 0;
     }
@@ -7084,7 +7346,7 @@ var RenderContentList = ({
       if (timeoutScrolling.current) clearTimeout(timeoutScrolling.current);
     };
   }, [activeSection]);
-  useEffect8(() => {
+  useEffect9(() => {
     const sections = items.map((item) => ({
       id: transformNameToID(item),
       element: document.getElementById(transformNameToID(item))
@@ -7133,23 +7395,23 @@ var RenderContentList = ({
       isScrolling.current = false;
     }, 1e3);
   };
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx111(
     List,
     {
       component: "nav",
       "aria-labelledby": "nested-list-subheader",
-      subheader: /* @__PURE__ */ jsx109(ListSubheader, { component: "div", id: "nested-list-subheader", children: "Contents" }),
+      subheader: /* @__PURE__ */ jsx111(ListSubheader, { component: "div", id: "nested-list-subheader", children: "Contents" }),
       children: items.map((item) => {
         const id = transformNameToID(item);
-        return /* @__PURE__ */ jsxs73(
+        return /* @__PURE__ */ jsxs74(
           ListItemButton,
           {
             selected: active === id,
             classes: { root: classes.root, selected: classes.selected },
             onClick: () => handleMenuClick(id),
             children: [
-              /* @__PURE__ */ jsx109(ListItemText4, { primary: item }),
-              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ jsx109(Tooltip9, { title: warningMessage, children: /* @__PURE__ */ jsx109(WarningAmber, { color: "warning" }) })
+              /* @__PURE__ */ jsx111(ListItemText4, { primary: item }),
+              (warningItems?.includes(item) || warningItems?.includes(id)) && /* @__PURE__ */ jsx111(Tooltip9, { title: warningMessage, children: /* @__PURE__ */ jsx111(WarningAmber, { color: "warning" }) })
             ]
           },
           id
@@ -7161,9 +7423,9 @@ var RenderContentList = ({
 var RenderContentList_default = RenderContentList;
 
 // src/components/RowProductCard/RowProductCard.tsx
-import { Box as Box32, Divider as Divider6, Paper as Paper5, Typography as Typography26 } from "@mui/material";
+import { Box as Box34, Divider as Divider6, Paper as Paper6, Typography as Typography26 } from "@mui/material";
 import { makeStyles as makeStyles36 } from "tss-react/mui";
-import { Fragment as Fragment11, jsx as jsx110, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx112, jsxs as jsxs75 } from "react/jsx-runtime";
 var useStyles36 = makeStyles36()((theme) => ({
   wrapper: {
     display: "flex",
@@ -7202,8 +7464,8 @@ var RowProductCard = ({
     medium: "c_productbust__image_md",
     large: "c_productbust__image_lg"
   };
-  return /* @__PURE__ */ jsxs74(Paper5, { className: classes.wrapper, children: [
-    /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsxs75(Paper6, { className: classes.wrapper, children: [
+    /* @__PURE__ */ jsx112(
       ProductImage_default,
       {
         image: product.image,
@@ -7211,15 +7473,15 @@ var RowProductCard = ({
         size: imageSize[size]
       }
     ),
-    /* @__PURE__ */ jsxs74(
+    /* @__PURE__ */ jsxs75(
       "div",
       {
         className: cx(classes.content, {
           [classes.onlyProductName]: !hasColumns && !location
         }),
         children: [
-          /* @__PURE__ */ jsxs74(
-            Box32,
+          /* @__PURE__ */ jsxs75(
+            Box34,
             {
               className: classes.upperRow,
               sx: {
@@ -7228,26 +7490,26 @@ var RowProductCard = ({
                 alignItems: "center"
               },
               children: [
-                /* @__PURE__ */ jsxs74("div", { children: [
-                  location ? /* @__PURE__ */ jsx110(Typography26, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
-                  /* @__PURE__ */ jsx110(Typography26, { variant: "h6", children: product.name })
+                /* @__PURE__ */ jsxs75("div", { children: [
+                  location ? /* @__PURE__ */ jsx112(Typography26, { className: classes.smallTitle, variant: "caption", children: `Location: ${location}` }) : null,
+                  /* @__PURE__ */ jsx112(Typography26, { variant: "h6", children: product.name })
                 ] }),
                 children
               ]
             }
           ),
-          hasColumns ? /* @__PURE__ */ jsxs74(Fragment11, { children: [
-            /* @__PURE__ */ jsx110(Divider6, { className: classes.divider }),
-            /* @__PURE__ */ jsx110(
-              Box32,
+          hasColumns ? /* @__PURE__ */ jsxs75(Fragment11, { children: [
+            /* @__PURE__ */ jsx112(Divider6, { className: classes.divider }),
+            /* @__PURE__ */ jsx112(
+              Box34,
               {
                 sx: {
                   display: "flex",
                   gap: "24px"
                 },
-                children: columns.map((column) => /* @__PURE__ */ jsxs74("div", { children: [
-                  /* @__PURE__ */ jsx110(Typography26, { className: classes.smallTitle, variant: "caption", children: column.title }),
-                  typeof column.value === "string" ? /* @__PURE__ */ jsx110(Typography26, { variant: "body1", children: column.value }) : column.value
+                children: columns.map((column) => /* @__PURE__ */ jsxs75("div", { children: [
+                  /* @__PURE__ */ jsx112(Typography26, { className: classes.smallTitle, variant: "caption", children: column.title }),
+                  typeof column.value === "string" ? /* @__PURE__ */ jsx112(Typography26, { variant: "body1", children: column.value }) : column.value
                 ] }, column.title))
               }
             )
@@ -7260,10 +7522,10 @@ var RowProductCard = ({
 var RowProductCard_default = RowProductCard;
 
 // src/components/ScrollableDialog/ScrollableDialog.tsx
-import { useEffect as useEffect9, useRef as useRef6, useState as useState12 } from "react";
-import { Box as Box33, Dialog as Dialog4, Divider as Divider7, Fade, Paper as Paper6, Typography as Typography27 } from "@mui/material";
+import { useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
+import { Box as Box35, Dialog as Dialog4, Divider as Divider7, Fade, Paper as Paper7, Typography as Typography27 } from "@mui/material";
 import { makeStyles as makeStyles37 } from "tss-react/mui";
-import { jsx as jsx111, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs76 } from "react/jsx-runtime";
 var useStyles37 = makeStyles37()((theme) => ({
   dialog: {
     margin: "0 auto",
@@ -7303,18 +7565,18 @@ var ScrollableDialog = ({
   isOpen,
   title
 }) => {
-  const [bodyHeight, setBodyHeight] = useState12(0);
-  const [hasScrollBar, setHasScrollBar] = useState12(false);
-  const [maxDialogHeight, setMaxDialogHeight] = useState12(0);
+  const [bodyHeight, setBodyHeight] = useState13(0);
+  const [hasScrollBar, setHasScrollBar] = useState13(false);
+  const [maxDialogHeight, setMaxDialogHeight] = useState13(0);
   const { classes, cx } = useStyles37();
-  const headerRef = useRef6(null);
-  const footerRef = useRef6(null);
-  const titleRef = useRef6(null);
-  const bodyRef = useRef6(null);
+  const headerRef = useRef7(null);
+  const footerRef = useRef7(null);
+  const titleRef = useRef7(null);
+  const bodyRef = useRef7(null);
   const DIALOG_MARGIN = 65;
   const DEFAULT_MAX_HEIGHT = 728;
   const TITLE_MARGIN = 48;
-  useEffect9(() => {
+  useEffect10(() => {
     const handleResize = () => {
       const screenHeight = window.innerHeight;
       const newMaxHeight = screenHeight < DEFAULT_MAX_HEIGHT + DIALOG_MARGIN ? screenHeight - DIALOG_MARGIN : DEFAULT_MAX_HEIGHT;
@@ -7333,22 +7595,22 @@ var ScrollableDialog = ({
     const scrollHeight = bodyRef.current?.scrollHeight || 0;
     setHasScrollBar(scrollHeight > contentHeight);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (isOpen) {
       requestAnimationFrame(measureHeights);
     }
   }, [isOpen, header, footer, title, maxDialogHeight]);
-  return /* @__PURE__ */ jsx111(Dialog4, { className: classes.dialog, fullWidth: true, maxWidth: false, open: isOpen, children: /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx113(Dialog4, { className: classes.dialog, fullWidth: true, maxWidth: false, open: isOpen, children: /* @__PURE__ */ jsx113(
     Fade,
     {
       in: isOpen,
       onEntered: () => {
         requestAnimationFrame(measureHeights);
       },
-      children: /* @__PURE__ */ jsxs75(Paper6, { className: classes.wrapper, children: [
-        header ? /* @__PURE__ */ jsx111("div", { className: classes.header, id: "dialog-header", children: header }) : null,
-        /* @__PURE__ */ jsxs75("div", { className: classes.body, children: [
-          /* @__PURE__ */ jsx111(
+      children: /* @__PURE__ */ jsxs76(Paper7, { className: classes.wrapper, children: [
+        header ? /* @__PURE__ */ jsx113("div", { className: classes.header, id: "dialog-header", children: header }) : null,
+        /* @__PURE__ */ jsxs76("div", { className: classes.body, children: [
+          /* @__PURE__ */ jsx113(
             Typography27,
             {
               className: classes.title,
@@ -7357,7 +7619,7 @@ var ScrollableDialog = ({
               children: title
             }
           ),
-          /* @__PURE__ */ jsx111(
+          /* @__PURE__ */ jsx113(
             "div",
             {
               className: cx(classes.scrollableContainer, {
@@ -7371,9 +7633,9 @@ var ScrollableDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx111(Divider7, {}),
-        footer ? /* @__PURE__ */ jsx111(
-          Box33,
+        /* @__PURE__ */ jsx113(Divider7, {}),
+        footer ? /* @__PURE__ */ jsx113(
+          Box35,
           {
             className: classes.footer,
             id: "dialog-footer",
@@ -7391,20 +7653,20 @@ var ScrollableDialog = ({
 var ScrollableDialog_default = ScrollableDialog;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
-import { Box as Box34, Paper as Paper8 } from "@mui/material";
+import { Box as Box36, Paper as Paper9 } from "@mui/material";
 import { makeStyles as makeStyles39 } from "tss-react/mui";
 
 // src/components/SearchWithFilters/SearchWithFilters.tsx
-import { useState as useState13, useEffect as useEffect10 } from "react";
+import { useState as useState14, useEffect as useEffect11 } from "react";
 import * as React6 from "react";
 import {
   ArrowDropDown as ArrowDropDownIcon,
   ArrowDropUp as ArrowDropUpIcon,
   Search as SearchIcon
 } from "@mui/icons-material";
-import { Button as Button14, Divider as Divider8, InputBase, Paper as Paper7 } from "@mui/material";
+import { Button as Button14, Divider as Divider8, InputBase as InputBase2, Paper as Paper8 } from "@mui/material";
 import { makeStyles as makeStyles38 } from "tss-react/mui";
-import { jsx as jsx112, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs77 } from "react/jsx-runtime";
 var useStyles38 = makeStyles38()((theme) => ({
   searchContainer: {
     height: 46,
@@ -7449,7 +7711,7 @@ var SearchWithFilters = ({
   },
   disabled = false
 }) => {
-  const [searchText, setSearchText] = useState13(searchValue);
+  const [searchText, setSearchText] = useState14(searchValue);
   const { classes } = useStyles38();
   const handleTextChange = (e) => {
     const { value } = e.target;
@@ -7461,13 +7723,13 @@ var SearchWithFilters = ({
       enterPressedInSearch?.();
     }
   };
-  useEffect10(() => {
+  useEffect11(() => {
     setSearchText(searchValue);
   }, [searchValue]);
-  return /* @__PURE__ */ jsxs76(Paper7, { className: classes.searchContainer, children: [
-    /* @__PURE__ */ jsx112(SearchIcon, { className: classes.icon, fontSize: "small" }),
-    /* @__PURE__ */ jsx112(
-      InputBase,
+  return /* @__PURE__ */ jsxs77(Paper8, { className: classes.searchContainer, children: [
+    /* @__PURE__ */ jsx114(SearchIcon, { className: classes.icon, fontSize: "small" }),
+    /* @__PURE__ */ jsx114(
+      InputBase2,
       {
         className: classes.input,
         placeholder: "Search",
@@ -7478,8 +7740,8 @@ var SearchWithFilters = ({
         inputProps: { "aria-label": "search" }
       }
     ),
-    /* @__PURE__ */ jsx112(Divider8, { className: classes.divider, orientation: "vertical" }),
-    /* @__PURE__ */ jsxs76(
+    /* @__PURE__ */ jsx114(Divider8, { className: classes.divider, orientation: "vertical" }),
+    /* @__PURE__ */ jsxs77(
       Button14,
       {
         className: classes.filterButton,
@@ -7487,7 +7749,7 @@ var SearchWithFilters = ({
         disabled,
         children: [
           "Filters",
-          showFilters ? /* @__PURE__ */ jsx112(ArrowDropUpIcon, {}) : /* @__PURE__ */ jsx112(ArrowDropDownIcon, {})
+          showFilters ? /* @__PURE__ */ jsx114(ArrowDropUpIcon, {}) : /* @__PURE__ */ jsx114(ArrowDropDownIcon, {})
         ]
       }
     )
@@ -7496,7 +7758,7 @@ var SearchWithFilters = ({
 var SearchWithFilters_default = React6.memo(SearchWithFilters);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeader.tsx
-import { jsx as jsx113, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs78 } from "react/jsx-runtime";
 var useStyles39 = makeStyles39()((theme) => ({
   wrapper: {
     display: "flex",
@@ -7532,11 +7794,11 @@ var SearchAndFilterHeader = ({
   searchValue
 }) => {
   const { classes } = useStyles39();
-  return /* @__PURE__ */ jsx113(Paper8, { children: /* @__PURE__ */ jsxs77(Box34, { className: classes.wrapper, children: [
-    /* @__PURE__ */ jsxs77(Box34, { className: classes.container, children: [
-      /* @__PURE__ */ jsxs77(Box34, { className: classes.leftSection, children: [
-        /* @__PURE__ */ jsx113(AppLabel_default, { appName }),
-        /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx115(Paper9, { children: /* @__PURE__ */ jsxs78(Box36, { className: classes.wrapper, children: [
+    /* @__PURE__ */ jsxs78(Box36, { className: classes.container, children: [
+      /* @__PURE__ */ jsxs78(Box36, { className: classes.leftSection, children: [
+        /* @__PURE__ */ jsx115(AppLabel_default, { appName }),
+        /* @__PURE__ */ jsx115(
           SearchWithFilters_default,
           {
             searchValue,
@@ -7547,9 +7809,9 @@ var SearchAndFilterHeader = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx113(Box34, { children: extraButton })
+      /* @__PURE__ */ jsx115(Box36, { children: extraButton })
     ] }),
-    showFilters ? /* @__PURE__ */ jsx113(Box34, { children: filtersComponent }) : null,
+    showFilters ? /* @__PURE__ */ jsx115(Box36, { children: filtersComponent }) : null,
     appliedFiltersComponent
   ] }) });
 };
@@ -7557,19 +7819,19 @@ var SearchAndFilterHeader_default = SearchAndFilterHeader;
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
 import * as React7 from "react";
-import { Box as Box36 } from "@mui/material";
+import { Box as Box38 } from "@mui/material";
 import { makeStyles as makeStyles41 } from "tss-react/mui";
 
 // src/components/SearchWithFilters/SearchWithFiltersForTable.tsx
-import { useState as useState14, memo as memo16 } from "react";
+import { useState as useState15, memo as memo18 } from "react";
 import {
   ArrowDropDown as ArrowDropDownIcon2,
   ArrowDropUp as ArrowDropUpIcon2,
   Search as SearchIcon2
 } from "@mui/icons-material";
-import { Box as Box35, Button as Button15, Divider as Divider9, InputBase as InputBase2, Paper as Paper9 } from "@mui/material";
+import { Box as Box37, Button as Button15, Divider as Divider9, InputBase as InputBase3, Paper as Paper10 } from "@mui/material";
 import { makeStyles as makeStyles40 } from "tss-react/mui";
-import { Fragment as Fragment12, jsx as jsx114, jsxs as jsxs78 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx116, jsxs as jsxs79 } from "react/jsx-runtime";
 var useStyles40 = makeStyles40()((theme) => ({
   c_search: {
     height: 46,
@@ -7629,7 +7891,7 @@ var SearchWithFiltersForTable = (props) => {
     searchedValue
   } = props;
   const { classes } = useStyles40();
-  const [searchText, setSearchText] = useState14("");
+  const [searchText, setSearchText] = useState15("");
   const handleTextChange = (e) => {
     const { value } = e.target;
     setSearchText(value);
@@ -7644,10 +7906,10 @@ var SearchWithFiltersForTable = (props) => {
     }
   };
   const ArrowIcon = isOpen ? ArrowDropUpIcon2 : ArrowDropDownIcon2;
-  return /* @__PURE__ */ jsxs78(Paper9, { className: classes.c_search, children: [
-    /* @__PURE__ */ jsx114(Box35, { className: classes.c_search__icon, children: /* @__PURE__ */ jsx114(SearchIcon2, { className: classes.icon, fontSize: "small" }) }),
-    /* @__PURE__ */ jsx114(
-      InputBase2,
+  return /* @__PURE__ */ jsxs79(Paper10, { className: classes.c_search, children: [
+    /* @__PURE__ */ jsx116(Box37, { className: classes.c_search__icon, children: /* @__PURE__ */ jsx116(SearchIcon2, { className: classes.icon, fontSize: "small" }) }),
+    /* @__PURE__ */ jsx116(
+      InputBase3,
       {
         className: classes.c_search__input,
         placeholder: "Search",
@@ -7656,32 +7918,32 @@ var SearchWithFiltersForTable = (props) => {
         onKeyDown: handleKeyPress
       }
     ),
-    showFilterButton && /* @__PURE__ */ jsxs78(Fragment12, { children: [
-      /* @__PURE__ */ jsx114(
+    showFilterButton && /* @__PURE__ */ jsxs79(Fragment12, { children: [
+      /* @__PURE__ */ jsx116(
         Divider9,
         {
           className: classes.c_search__divider,
           orientation: "vertical"
         }
       ),
-      /* @__PURE__ */ jsxs78(
+      /* @__PURE__ */ jsxs79(
         Button15,
         {
           className: classes.c_search__bt_filter,
           onClick: handleFilterButtonClick,
           children: [
             "Filters",
-            /* @__PURE__ */ jsx114(ArrowIcon, { className: classes.c_search__bt_icon_filter })
+            /* @__PURE__ */ jsx116(ArrowIcon, { className: classes.c_search__bt_icon_filter })
           ]
         }
       )
     ] })
   ] });
 };
-var SearchWithFiltersForTable_default = memo16(SearchWithFiltersForTable);
+var SearchWithFiltersForTable_default = memo18(SearchWithFiltersForTable);
 
 // src/components/SearchAndFilterHeader/SearchAndFilterHeaderForTable.tsx
-import { jsx as jsx115, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs80 } from "react/jsx-runtime";
 var useStyles41 = makeStyles41()((theme) => ({
   container: {
     display: "flex",
@@ -7713,10 +7975,10 @@ var SearchAndFilterHeaderForTable = (props) => {
     searchedValue
   } = props;
   const { classes } = useStyles41();
-  return /* @__PURE__ */ jsxs79(Box36, { className: classes.container, children: [
-    /* @__PURE__ */ jsxs79(Box36, { className: classes.leftSection, children: [
-      /* @__PURE__ */ jsx115(AppLabel_default, { appName }),
-      /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsxs80(Box38, { className: classes.container, children: [
+    /* @__PURE__ */ jsxs80(Box38, { className: classes.leftSection, children: [
+      /* @__PURE__ */ jsx117(AppLabel_default, { appName }),
+      /* @__PURE__ */ jsx117(
         SearchWithFiltersForTable_default,
         {
           onFilterButtonClick,
@@ -7727,24 +7989,24 @@ var SearchAndFilterHeaderForTable = (props) => {
           searchedValue
         }
       ),
-      copy && /* @__PURE__ */ jsx115(
-        Box36,
+      copy && /* @__PURE__ */ jsx117(
+        Box38,
         {
           sx: {
             margin: 0.5
           },
-          children: /* @__PURE__ */ jsx115(OutlinedButton_default, { copy })
+          children: /* @__PURE__ */ jsx117(OutlinedButton_default, { copy })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx115(Box36, { children: button })
+    /* @__PURE__ */ jsx117(Box38, { children: button })
   ] });
 };
 var SearchAndFilterHeaderForTable_default = React7.memo(SearchAndFilterHeaderForTable);
 
 // src/components/SearchHeader/SearchHeader.tsx
-import { Box as Box37, Paper as Paper10 } from "@mui/material";
-import { jsx as jsx116, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Box as Box39, Paper as Paper11 } from "@mui/material";
+import { jsx as jsx118, jsxs as jsxs81 } from "react/jsx-runtime";
 var SearchHeader = ({
   renderButton,
   renderExtraAction,
@@ -7755,8 +8017,8 @@ var SearchHeader = ({
   onKeyDown,
   width
 }) => {
-  return /* @__PURE__ */ jsxs80(
-    Paper10,
+  return /* @__PURE__ */ jsxs81(
+    Paper11,
     {
       sx: {
         display: "flex",
@@ -7764,8 +8026,8 @@ var SearchHeader = ({
         padding: 2
       },
       children: [
-        /* @__PURE__ */ jsxs80(
-          Box37,
+        /* @__PURE__ */ jsxs81(
+          Box39,
           {
             sx: {
               display: "flex",
@@ -7773,8 +8035,8 @@ var SearchHeader = ({
               alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ jsxs80(Box37, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                /* @__PURE__ */ jsx116(
+              /* @__PURE__ */ jsxs81(Box39, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx118(
                   SearchFieldDebounced,
                   {
                     width,
@@ -7799,9 +8061,9 @@ var SearchHeader = ({
 // src/components/SectionName/SectionName.tsx
 import HistoryIcon from "@mui/icons-material/History";
 import InfoIcon from "@mui/icons-material/Info";
-import { Box as Box38, Divider as Divider10, IconButton as IconButton5, Tooltip as Tooltip10, Typography as Typography28 } from "@mui/material";
+import { Box as Box40, Divider as Divider10, IconButton as IconButton5, Tooltip as Tooltip10, Typography as Typography28 } from "@mui/material";
 import { makeStyles as makeStyles42 } from "tss-react/mui";
-import { jsx as jsx117, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs82 } from "react/jsx-runtime";
 var useStyles42 = makeStyles42()((theme) => ({
   container: {
     display: "flex",
@@ -7857,9 +8119,9 @@ var SectionName = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs81(Box38, { className: classes.container, children: [
-    /* @__PURE__ */ jsxs81(Box38, { className: classes.titleContainer, children: [
-      /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsxs82(Box40, { className: classes.container, children: [
+    /* @__PURE__ */ jsxs82(Box40, { className: classes.titleContainer, children: [
+      /* @__PURE__ */ jsx119(
         Typography28,
         {
           variant: "h5",
@@ -7868,7 +8130,7 @@ var SectionName = ({
           children: name
         }
       ),
-      tooltipDescription ? /* @__PURE__ */ jsx117(Tooltip10, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx117(
+      tooltipDescription ? /* @__PURE__ */ jsx119(Tooltip10, { title: tooltipDescription, placement: "right", children: /* @__PURE__ */ jsx119(
         InfoIcon,
         {
           fontSize: "small",
@@ -7877,8 +8139,8 @@ var SectionName = ({
         }
       ) }) : null
     ] }),
-    /* @__PURE__ */ jsxs81(Box38, { className: classes.actionButtons, children: [
-      buttonText ? /* @__PURE__ */ jsx117(
+    /* @__PURE__ */ jsxs82(Box40, { className: classes.actionButtons, children: [
+      buttonText ? /* @__PURE__ */ jsx119(
         ExtendedButton_default,
         {
           type: buttonType,
@@ -7891,17 +8153,17 @@ var SectionName = ({
           variant: "text"
         }
       ) : null,
-      openHistoryLog && buttonText && /* @__PURE__ */ jsx117(Divider10, { orientation: "vertical", sx: { height: "24px" } }),
-      openHistoryLog && /* @__PURE__ */ jsx117(IconButton5, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ jsx117(HistoryIcon, {}) })
+      openHistoryLog && buttonText && /* @__PURE__ */ jsx119(Divider10, { orientation: "vertical", sx: { height: "24px" } }),
+      openHistoryLog && /* @__PURE__ */ jsx119(IconButton5, { size: "small", onClick: () => openHistoryLog(), children: /* @__PURE__ */ jsx119(HistoryIcon, {}) })
     ] })
   ] });
 };
 var SectionName_default = SectionName;
 
 // src/components/SmartMultipleSelect/SmartMultipleSelect.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import {
-  Box as Box39,
+  Box as Box41,
   Checkbox as Checkbox7,
   CircularProgress as CircularProgress5,
   FormControl as FormControl5,
@@ -7911,7 +8173,7 @@ import {
   Select as Select4,
   Typography as Typography29
 } from "@mui/material";
-import { jsx as jsx118, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs83 } from "react/jsx-runtime";
 var SmartMultipleSelect = ({
   inputLabel,
   variant = "standard",
@@ -7929,7 +8191,7 @@ var SmartMultipleSelect = ({
   helperText,
   menuProps
 }) => {
-  const [localValues, setLocalValues] = useState15(defaultValues ?? []);
+  const [localValues, setLocalValues] = useState16(defaultValues ?? []);
   const handleChangeOption = (option) => {
     let newValues = [];
     const selectedIndex = localValues.findIndex(
@@ -7943,19 +8205,19 @@ var SmartMultipleSelect = ({
     setLocalValues(newValues);
     onChange?.(newValues);
   };
-  const renderMenuContent = () => !menuOptions?.length ? /* @__PURE__ */ jsx118(
-    Box39,
+  const renderMenuContent = () => !menuOptions?.length ? /* @__PURE__ */ jsx120(
+    Box41,
     {
       sx: { display: "flex", justifyContent: "center", alignItems: "center" },
-      children: /* @__PURE__ */ jsx118(Typography29, { children: emptyMessage })
+      children: /* @__PURE__ */ jsx120(Typography29, { children: emptyMessage })
     }
-  ) : /* @__PURE__ */ jsx118(Box39, { sx: { display: "flex", flexDirection: "column" }, children: menuOptions?.map((option, index) => {
+  ) : /* @__PURE__ */ jsx120(Box41, { sx: { display: "flex", flexDirection: "column" }, children: menuOptions?.map((option, index) => {
     const selectedValues = values ?? localValues ?? [];
     const isSelected = selectedValues.some(
       (selected) => selected.value === option.value
     );
-    return /* @__PURE__ */ jsxs82(
-      Box39,
+    return /* @__PURE__ */ jsxs83(
+      Box41,
       {
         onClick: () => handleChangeOption(option),
         sx: {
@@ -7965,14 +8227,14 @@ var SmartMultipleSelect = ({
           backgroundColor: isSelected ? colors.lightBlueBackground : void 0
         },
         children: [
-          /* @__PURE__ */ jsx118(Checkbox7, { disableRipple: true, sx: { py: 0.5 }, checked: isSelected }),
-          /* @__PURE__ */ jsx118(ListItemText5, { primary: option.label })
+          /* @__PURE__ */ jsx120(Checkbox7, { disableRipple: true, sx: { py: 0.5 }, checked: isSelected }),
+          /* @__PURE__ */ jsx120(ListItemText5, { primary: option.label })
         ]
       },
       option.value ?? index
     );
   }) });
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs83(
     FormControl5,
     {
       fullWidth: true,
@@ -7981,8 +8243,8 @@ var SmartMultipleSelect = ({
       disabled,
       error,
       children: [
-        /* @__PURE__ */ jsx118(InputLabel5, { children: inputLabel }),
-        /* @__PURE__ */ jsx118(
+        /* @__PURE__ */ jsx120(InputLabel5, { children: inputLabel }),
+        /* @__PURE__ */ jsx120(
           Select4,
           {
             multiple: true,
@@ -7995,33 +8257,33 @@ var SmartMultipleSelect = ({
             onClose: () => onClose?.(localValues),
             renderValue: (selectedValues) => {
               const valuesString = selectedValues.map((v) => v.label)?.join(", ");
-              return /* @__PURE__ */ jsx118(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
+              return /* @__PURE__ */ jsx120(DynamicOverflowTooltip, { tooltipDescription: valuesString, children: valuesString });
             },
-            children: isLoading ? /* @__PURE__ */ jsx118(
-              Box39,
+            children: isLoading ? /* @__PURE__ */ jsx120(
+              Box41,
               {
                 sx: {
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
                 },
-                children: /* @__PURE__ */ jsx118(CircularProgress5, { size: 24 })
+                children: /* @__PURE__ */ jsx120(CircularProgress5, { size: 24 })
               }
             ) : renderMenuContent()
           }
         ),
-        helperText && /* @__PURE__ */ jsx118(FormHelperText4, { children: helperText })
+        helperText && /* @__PURE__ */ jsx120(FormHelperText4, { children: helperText })
       ]
     }
   );
 };
 
 // src/components/SquareLabel/SquareLabel.tsx
-import { memo as memo18 } from "react";
+import { memo as memo20 } from "react";
 import { Typography as Typography30 } from "@mui/material";
 import { red as red2 } from "@mui/material/colors";
 import { makeStyles as makeStyles43 } from "tss-react/mui";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var useStyles43 = makeStyles43()((theme) => ({
   red: {
     backgroundColor: red2["50"],
@@ -8036,15 +8298,15 @@ var useStyles43 = makeStyles43()((theme) => ({
 }));
 var SquareLabel = ({ color, copy }) => {
   const { classes } = useStyles43();
-  return /* @__PURE__ */ jsx119(Typography30, { className: classes[color], children: copy });
+  return /* @__PURE__ */ jsx121(Typography30, { className: classes[color], children: copy });
 };
-var SquareLabel_default = memo18(SquareLabel);
+var SquareLabel_default = memo20(SquareLabel);
 
 // src/components/Switch/Switch.tsx
-import { memo as memo19 } from "react";
+import { memo as memo21 } from "react";
 import { Grid as Grid2, Switch } from "@mui/material";
 import { withStyles as withStyles6 } from "tss-react/mui";
-import { jsx as jsx120, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs84 } from "react/jsx-runtime";
 var LSwitch = ({
   checked,
   labelOn,
@@ -8052,7 +8314,7 @@ var LSwitch = ({
   handleChange,
   classes,
   disabled
-}) => /* @__PURE__ */ jsx120("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs83(
+}) => /* @__PURE__ */ jsx122("div", { className: classes.c_switch, children: /* @__PURE__ */ jsxs84(
   Grid2,
   {
     component: "label",
@@ -8062,8 +8324,8 @@ var LSwitch = ({
       alignItems: "center"
     },
     children: [
-      labelOff && /* @__PURE__ */ jsx120(Grid2, { children: labelOff }),
-      /* @__PURE__ */ jsx120(Grid2, { children: /* @__PURE__ */ jsx120(
+      labelOff && /* @__PURE__ */ jsx122(Grid2, { children: labelOff }),
+      /* @__PURE__ */ jsx122(Grid2, { children: /* @__PURE__ */ jsx122(
         Switch,
         {
           checked,
@@ -8072,7 +8334,7 @@ var LSwitch = ({
           disabled
         }
       ) }),
-      labelOn && /* @__PURE__ */ jsx120(Grid2, { children: labelOn })
+      labelOn && /* @__PURE__ */ jsx122(Grid2, { children: labelOn })
     ]
   }
 ) });
@@ -8094,14 +8356,14 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
     fontSize: "1rem"
   }
 }));
-var Switch_default = memo19(LabelledSwitch);
+var Switch_default = memo21(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import { useState as useState16, useEffect as useEffect11 } from "react";
+import { useState as useState17, useEffect as useEffect12 } from "react";
 import { Menu as Menu4 } from "@mui/material";
 import classNames3 from "classnames";
-import { Fragment as Fragment13, jsx as jsx121, jsxs as jsxs84 } from "react/jsx-runtime";
-var MAX_WIDTH = 276;
+import { Fragment as Fragment13, jsx as jsx123, jsxs as jsxs85 } from "react/jsx-runtime";
+var MAX_WIDTH2 = 276;
 var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
   if (typeof item === "string" && typeof filterOption === "string") {
     return item === filterOption;
@@ -8118,11 +8380,11 @@ var SmartTableHeaderFilterMenu = ({
   shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
-  const [anchorEl, setAnchorEl] = useState16(null);
-  const [filterOptionsData, setFilterOptionsData] = useState16();
-  const [selectedFilterOptions, setSelectedFilterOptions] = useState16(headerFilters[headCell.id] ?? []);
+  const [anchorEl, setAnchorEl] = useState17(null);
+  const [filterOptionsData, setFilterOptionsData] = useState17();
+  const [selectedFilterOptions, setSelectedFilterOptions] = useState17(headerFilters[headCell.id] ?? []);
   const numFilterOptions = filterOptionsData?.length ?? 0;
-  useEffect11(() => {
+  useEffect12(() => {
     if (headCell.filterOptions) {
       setFilterOptionsData(headCell.filterOptions);
     } else if (headCell.filterType === "boolean") {
@@ -8178,11 +8440,11 @@ var SmartTableHeaderFilterMenu = ({
     onApplyFilters?.(updatedFilters, shouldSave);
     setAnchorEl(null);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     setSelectedFilterOptions(headerFilters[headCell.id] ?? []);
   }, [headerFilters, headCell.id]);
-  return /* @__PURE__ */ jsxs84(Fragment13, { children: [
-    /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsxs85(Fragment13, { children: [
+    /* @__PURE__ */ jsx123(
       ActiveFiltersIconButton,
       {
         numActiveFilters,
@@ -8192,7 +8454,7 @@ var SmartTableHeaderFilterMenu = ({
         })
       }
     ),
-    /* @__PURE__ */ jsx121(
+    /* @__PURE__ */ jsx123(
       Menu4,
       {
         open: !!anchorEl,
@@ -8201,12 +8463,12 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu",
         slotProps: {
           list: {
-            sx: { p: 0, maxWidth: MAX_WIDTH }
+            sx: { p: 0, maxWidth: MAX_WIDTH2 }
           }
         },
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ jsx121(
+        children: headCell.filterType === "autocomplete" ? /* @__PURE__ */ jsx123(
           AutocompleteFilterMenuContent,
           {
             columnId: headCell.id,
@@ -8219,7 +8481,7 @@ var SmartTableHeaderFilterMenu = ({
             onApplyFiltersClick: handleApplyFiltersClick,
             shouldShowCheckOnFilter
           }
-        ) : /* @__PURE__ */ jsx121(
+        ) : /* @__PURE__ */ jsx123(
           CheckboxFilterMenuContent,
           {
             columnId: headCell.id,
@@ -8239,9 +8501,9 @@ var SmartTableHeaderFilterMenu = ({
 };
 
 // src/components/SmartTableHeader/SmartTableHeader.tsx
-import { memo as memo20 } from "react";
+import { memo as memo22 } from "react";
 import {
-  Box as Box40,
+  Box as Box42,
   Checkbox as Checkbox8,
   TableCell,
   TableHead,
@@ -8250,8 +8512,8 @@ import {
   Tooltip as Tooltip11,
   Typography as Typography31
 } from "@mui/material";
-import { jsx as jsx122, jsxs as jsxs85 } from "react/jsx-runtime";
-var SmartTableHeader = memo20(
+import { jsx as jsx124, jsxs as jsxs86 } from "react/jsx-runtime";
+var SmartTableHeader = memo22(
   ({
     order,
     orderBy,
@@ -8269,13 +8531,13 @@ var SmartTableHeader = memo20(
       onRequestSort(event, property);
     };
     const isSortActive = (headCellId) => orderBy === headCellId;
-    return /* @__PURE__ */ jsx122(TableHead, { children: /* @__PURE__ */ jsxs85(TableRow, { children: [
-      enableCheckboxSelection ? /* @__PURE__ */ jsx122(
+    return /* @__PURE__ */ jsx124(TableHead, { children: /* @__PURE__ */ jsxs86(TableRow, { children: [
+      enableCheckboxSelection ? /* @__PURE__ */ jsx124(
         TableCell,
         {
           padding: "checkbox",
           sx: { backgroundColor: colors.neutral100 },
-          children: /* @__PURE__ */ jsx122(
+          children: /* @__PURE__ */ jsx124(
             Checkbox8,
             {
               color: "primary",
@@ -8287,7 +8549,7 @@ var SmartTableHeader = memo20(
           )
         }
       ) : null,
-      headCells.map((headCell) => /* @__PURE__ */ jsx122(
+      headCells.map((headCell) => /* @__PURE__ */ jsx124(
         TableCell,
         {
           align: "left",
@@ -8311,14 +8573,14 @@ var SmartTableHeader = memo20(
               }
             }
           },
-          children: /* @__PURE__ */ jsxs85(
-            Box40,
+          children: /* @__PURE__ */ jsxs86(
+            Box42,
             {
               display: "flex",
               flexDirection: "row",
               gap: headCell.disableSort ? 1 : 0,
               children: [
-                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ jsx122(Tooltip11, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx122(Typography31, { variant: "subtitle2", mt: 0.25, mb: -0.25, children: headCell.label }) }) : /* @__PURE__ */ jsx122(Tooltip11, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs85(
+                headCell.disableSort ? headCell.renderHeader ?? /* @__PURE__ */ jsx124(Tooltip11, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsx124(Typography31, { variant: "subtitle2", mt: 0.25, mb: -0.25, children: headCell.label }) }) : /* @__PURE__ */ jsx124(Tooltip11, { title: headCell.labelTooltip ?? "", arrow: true, children: /* @__PURE__ */ jsxs86(
                   TableSortLabel,
                   {
                     "data-testid": "table-sort-label",
@@ -8327,7 +8589,7 @@ var SmartTableHeader = memo20(
                     onClick: createSortHandler(headCell.id),
                     children: [
                       headCell.renderHeader ?? headCell.label,
-                      orderBy === headCell.id ? /* @__PURE__ */ jsx122(
+                      orderBy === headCell.id ? /* @__PURE__ */ jsx124(
                         "span",
                         {
                           style: {
@@ -8347,7 +8609,7 @@ var SmartTableHeader = memo20(
                     ]
                   }
                 ) }),
-                headCell.filterType ? /* @__PURE__ */ jsx122(
+                headCell.filterType ? /* @__PURE__ */ jsx124(
                   SmartTableHeaderFilterMenu,
                   {
                     headCell,
@@ -8369,10 +8631,10 @@ var SmartTableHeader = memo20(
 
 // src/components/Table/Table.tsx
 var import_debounce = __toESM(require_debounce(), 1);
-import { useLayoutEffect, useState as useState17 } from "react";
+import { useLayoutEffect, useState as useState18 } from "react";
 import {
-  Box as Box42,
-  Paper as Paper11,
+  Box as Box44,
+  Paper as Paper12,
   Table as MUITable,
   TableBody,
   TableCell as TableCell2,
@@ -8385,12 +8647,12 @@ import { makeStyles as makeStyles44 } from "tss-react/mui";
 import { v4 as uuidv4 } from "uuid";
 
 // src/components/TableLoading/TableLoading.tsx
-import { Box as Box41, Skeleton as Skeleton4 } from "@mui/material";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { Box as Box43, Skeleton as Skeleton4 } from "@mui/material";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var TableLoading = ({
   rowsPerPage,
   rowHeight
-}) => /* @__PURE__ */ jsx123(Box41, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx123(
+}) => /* @__PURE__ */ jsx125(Box43, { children: Array.from({ length: rowsPerPage ?? 0 }).map((_, index) => /* @__PURE__ */ jsx125(
   Skeleton4,
   {
     animation: "pulse",
@@ -8439,7 +8701,7 @@ function calculateRowsPerPage(rowHeight) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx124, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs87 } from "react/jsx-runtime";
 var useStyles44 = makeStyles44()(() => ({
   root: {
     height: "calc(100vh - 262px)",
@@ -8474,11 +8736,11 @@ var Table = ({
   serverRendered,
   updateSort
 }) => {
-  const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState17(
+  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState18(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [rowsPerPage, setRowsPerPage] = useState17(defaultRowsPerPage);
+  const [rowsPerPage, setRowsPerPage] = useState18(defaultRowsPerPage);
   const { classes } = useStyles44();
   const rowHeight = 56;
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);
@@ -8517,24 +8779,24 @@ var Table = ({
     );
     const rowsComponents = rows.map((row) => {
       if (RenderItem) {
-        return /* @__PURE__ */ jsx124(RenderItem, { ...row }, row.id);
+        return /* @__PURE__ */ jsx126(RenderItem, { ...row }, row.id);
       }
-      return /* @__PURE__ */ jsx124(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx124(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
+      return /* @__PURE__ */ jsx126(TableRow2, { hover: true, onClick: () => onRowClick?.(row), children: headCells?.map((column) => /* @__PURE__ */ jsx126(TableCell2, { children: row[column.id] }, column.id)) }, row.id);
     });
     if (emptyRows > 0 && rowsPerPage > emptyRows) {
       rowsComponents.push(
-        /* @__PURE__ */ jsx124(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx124(TableCell2, { colSpan: 8 }) }, uuidv4())
+        /* @__PURE__ */ jsx126(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx126(TableCell2, { colSpan: 8 }) }, uuidv4())
       );
     }
     return rowsComponents;
   };
-  return /* @__PURE__ */ jsx124(Paper11, { className: classes.root, children: /* @__PURE__ */ jsx124(Box42, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx124(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx124(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs86(MUITable, { size: "medium", stickyHeader: true, children: [
-    /* @__PURE__ */ jsx124(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx124(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx126(Paper12, { className: classes.root, children: /* @__PURE__ */ jsx126(Box44, { className: classes.paper, children: isLoading ? /* @__PURE__ */ jsx126(TableLoading_default, { rowHeight, rowsPerPage }) : /* @__PURE__ */ jsx126(TableContainer, { className: classes.container, children: /* @__PURE__ */ jsxs87(MUITable, { size: "medium", stickyHeader: true, children: [
+    /* @__PURE__ */ jsx126(TableHead2, { className: classes.header, children: /* @__PURE__ */ jsx126(TableRow2, { children: headCells?.map((headCell) => /* @__PURE__ */ jsx126(
       TableCell2,
       {
         align: "left",
         sortDirection: orderBy === headCell.id ? order : void 0,
-        children: /* @__PURE__ */ jsx124(
+        children: /* @__PURE__ */ jsx126(
           TableSortLabel2,
           {
             active: orderBy === headCell.id,
@@ -8546,9 +8808,9 @@ var Table = ({
       },
       headCell.id
     )) }) }),
-    /* @__PURE__ */ jsxs86(TableBody, { children: [
+    /* @__PURE__ */ jsxs87(TableBody, { children: [
       getTableRows(),
-      rowsPerPage === emptyRows && /* @__PURE__ */ jsx124(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx124(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
+      rowsPerPage === emptyRows && /* @__PURE__ */ jsx126(TableRow2, { style: { height: rowHeight * emptyRows }, children: /* @__PURE__ */ jsx126(TableCell2, { colSpan: 8, align: "center", children: "Nothing to display" }) })
     ] })
   ] }) }) }) });
 };
@@ -8557,22 +8819,22 @@ var Table_default = Table;
 // src/components/TableDesktop/TableDesktop.tsx
 import {
   useMemo as useMemo5,
-  useState as useState18,
-  useEffect as useEffect12,
-  useRef as useRef7
+  useState as useState19,
+  useEffect as useEffect13,
+  useRef as useRef8
 } from "react";
-import { Paper as Paper12, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box44 } from "@mui/material";
+import { Paper as Paper13, Table as Table2, TableBody as TableBody3, TableContainer as TableContainer2, Box as Box46 } from "@mui/material";
 
 // src/components/TableDesktopLoadingState/TableDesktopLoadingState.tsx
 import { Skeleton as Skeleton5, TableCell as TableCell3, TableRow as TableRow3 } from "@mui/material";
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var getRange = (n) => Array.from({ length: n }, (_, i) => i + 1);
 var TableDesktopLoadingState = ({
   numRows,
   numColumns,
   rowHeight = 56
 }) => {
-  return getRange(numRows).map((rowNum) => /* @__PURE__ */ jsx125(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx125(TableCell3, { children: /* @__PURE__ */ jsx125(
+  return getRange(numRows).map((rowNum) => /* @__PURE__ */ jsx127(TableRow3, { children: getRange(numColumns).map((colNum) => /* @__PURE__ */ jsx127(TableCell3, { children: /* @__PURE__ */ jsx127(
     Skeleton5,
     {
       animation: "pulse",
@@ -8592,9 +8854,9 @@ import Typography32 from "@mui/material/Typography";
 
 // src/components/Buttons/BaseButton/BaseIconButton.tsx
 import { Button as Button16 } from "@mui/material";
-import { jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsxs as jsxs88 } from "react/jsx-runtime";
 var BaseIconButton = ({ icon, sx, ...props }) => {
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88(
     Button16,
     {
       sx: {
@@ -8615,10 +8877,10 @@ var BaseIconButton = ({ icon, sx, ...props }) => {
 };
 
 // src/components/TableDesktopNoColumnsMessage/TableDesktopNoColumnsMessage.tsx
-import { jsx as jsx126, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs89 } from "react/jsx-runtime";
 var TableDesktopNoColumnsMessage = ({
   onClickNoColumnsMessageOpenMenu
-}) => /* @__PURE__ */ jsx126(TableBody2, { children: /* @__PURE__ */ jsx126(TableRow4, { children: /* @__PURE__ */ jsxs88(
+}) => /* @__PURE__ */ jsx128(TableBody2, { children: /* @__PURE__ */ jsx128(TableRow4, { children: /* @__PURE__ */ jsxs89(
   TableCell4,
   {
     sx: {
@@ -8631,9 +8893,9 @@ var TableDesktopNoColumnsMessage = ({
       alignItems: "center"
     },
     children: [
-      /* @__PURE__ */ jsx126(Typography32, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
-      /* @__PURE__ */ jsx126(Typography32, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
-      /* @__PURE__ */ jsxs88(
+      /* @__PURE__ */ jsx128(Typography32, { variant: "subtitle2", fontSize: 16, children: "Customise your view" }),
+      /* @__PURE__ */ jsx128(Typography32, { variant: "subtitle1", align: "center", color: "textSecondary", children: "Open the menu to customise your table and search." }),
+      /* @__PURE__ */ jsxs89(
         Typography32,
         {
           variant: "subtitle1",
@@ -8646,18 +8908,18 @@ var TableDesktopNoColumnsMessage = ({
           },
           children: [
             "Tips: ",
-            /* @__PURE__ */ jsx126(Typography32, { component: "strong", children: "Save as default" }),
+            /* @__PURE__ */ jsx128(Typography32, { component: "strong", children: "Save as default" }),
             " to keep these columns for future views"
           ]
         }
       ),
-      /* @__PURE__ */ jsx126(
+      /* @__PURE__ */ jsx128(
         BaseIconButton,
         {
           variant: "contained",
           color: "primary",
           onClick: onClickNoColumnsMessageOpenMenu,
-          icon: /* @__PURE__ */ jsx126(IconTableEdit_default, { fill: colors.white }),
+          icon: /* @__PURE__ */ jsx128(IconTableEdit_default, { fill: colors.white }),
           children: "OPEN MENU"
         }
       )
@@ -8666,7 +8928,7 @@ var TableDesktopNoColumnsMessage = ({
 ) }) });
 
 // src/components/TableDesktopRows/TableDesktopRows.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var descendingComparator2 = (a, b, orderBy) => {
   const objA = a[orderBy];
   const objB = b[orderBy];
@@ -8713,7 +8975,7 @@ var TableDesktopRows = ({
   return sortedData.map((row, index) => {
     const rowId = getRowId(row);
     const isItemSelected = selectedRows.has(rowId);
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx129(
       RenderItem,
       {
         ...{
@@ -8735,8 +8997,8 @@ var TableDesktopRows = ({
 };
 
 // src/components/TableDesktopRowSelectionBar/TableDesktopRowSelectionBar.tsx
-import { Box as Box43, Button as Button17, Typography as Typography33 } from "@mui/material";
-import { jsx as jsx128, jsxs as jsxs89 } from "react/jsx-runtime";
+import { Box as Box45, Button as Button17, Typography as Typography33 } from "@mui/material";
+import { jsx as jsx130, jsxs as jsxs90 } from "react/jsx-runtime";
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
   isRowsFromAllPagesSelected,
@@ -8755,8 +9017,8 @@ var TableDesktopRowSelectionBar = ({
     }
     return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
   };
-  return isAnyRowSelected ? /* @__PURE__ */ jsxs89(
-    Box43,
+  return isAnyRowSelected ? /* @__PURE__ */ jsxs90(
+    Box45,
     {
       sx: {
         p: 1,
@@ -8768,13 +9030,13 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       children: [
-        /* @__PURE__ */ jsx128(Typography33, { children: getSelectedRowsText() }),
-        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs89(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
+        /* @__PURE__ */ jsx130(Typography33, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ jsxs90(Button17, { onClick: onSelectRowsFromAllPagesClick, children: [
           "Select all ",
           totalRowCount,
           " rows from all pages based on your filters"
         ] }) : null,
-        /* @__PURE__ */ jsx128(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
+        /* @__PURE__ */ jsx130(Button17, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
@@ -8783,7 +9045,7 @@ var TableDesktopRowSelectionBar = ({
 // src/components/TableEmptyResult/TableEmptyResult.tsx
 import { TableCell as TableCell5, TableRow as TableRow5, Typography as Typography34 } from "@mui/material";
 import { makeStyles as makeStyles45 } from "tss-react/mui";
-import { jsx as jsx129, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs91 } from "react/jsx-runtime";
 var useStyles45 = makeStyles45()(() => ({
   tableCellIcon: { padding: 24, height: "calc(100vh - 320px)" },
   tableCellDefault: { padding: 24 }
@@ -8795,17 +9057,17 @@ var TableEmptyResult = ({
   }
 }) => {
   const { classes } = useStyles45();
-  return showClearFilterButton ? /* @__PURE__ */ jsx129(TableRow5, { children: /* @__PURE__ */ jsxs90(
+  return showClearFilterButton ? /* @__PURE__ */ jsx131(TableRow5, { children: /* @__PURE__ */ jsxs91(
     TableCell5,
     {
       className: classes.tableCellIcon,
       colSpan,
       align: "center",
       children: [
-        /* @__PURE__ */ jsx129(EmptyGlassIcon_default, {}),
-        /* @__PURE__ */ jsx129(Typography34, { variant: "h6", children: "No results found." }),
-        /* @__PURE__ */ jsx129(Typography34, { variant: "subtitle1", children: "Search without applied filters?" }),
-        /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx131(EmptyGlassIcon_default, {}),
+        /* @__PURE__ */ jsx131(Typography34, { variant: "h6", children: "No results found." }),
+        /* @__PURE__ */ jsx131(Typography34, { variant: "subtitle1", children: "Search without applied filters?" }),
+        /* @__PURE__ */ jsx131(
           FilledButton_default,
           {
             copy: "Search",
@@ -8816,7 +9078,7 @@ var TableEmptyResult = ({
         )
       ]
     }
-  ) }) : /* @__PURE__ */ jsx129(TableRow5, { children: /* @__PURE__ */ jsx129(
+  ) }) : /* @__PURE__ */ jsx131(TableRow5, { children: /* @__PURE__ */ jsx131(
     TableCell5,
     {
       className: classes.tableCellDefault,
@@ -8829,7 +9091,7 @@ var TableEmptyResult = ({
 var TableEmptyResult_default = TableEmptyResult;
 
 // src/components/TableDesktop/TableDesktop.tsx
-import { Fragment as Fragment14, jsx as jsx130, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx132, jsxs as jsxs92 } from "react/jsx-runtime";
 var resolveKeyValue = (keyField, rowData) => {
   if (typeof keyField === "string") {
     return rowData[keyField];
@@ -8862,15 +9124,15 @@ var TableDesktop = ({
   shouldShowCheckOnFilter,
   refetchData
 }) => {
-  const tableToolbarMenuButtonRef = useRef7(null);
-  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState18(null);
-  const [order, setOrder] = useState18(appliedFilters?.sortDir || "desc");
-  const [orderBy, setOrderBy] = useState18(
+  const tableToolbarMenuButtonRef = useRef8(null);
+  const [tableToolbarMenuAnchor, setTableToolbarMenuAnchor] = useState19(null);
+  const [order, setOrder] = useState19(appliedFilters?.sortDir || "desc");
+  const [orderBy, setOrderBy] = useState19(
     appliedFilters?.sortField || "delivery_date"
   );
-  const [selectedRows, setSelectedRows] = useState18(/* @__PURE__ */ new Set());
-  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState18(false);
-  const [isBulkChangesMode, setIsBulkChangesMode] = useState18(false);
+  const [selectedRows, setSelectedRows] = useState19(/* @__PURE__ */ new Set());
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = useState19(false);
+  const [isBulkChangesMode, setIsBulkChangesMode] = useState19(false);
   const numRows = data.length;
   const numSelectedRows = useMemo5(() => {
     const currentPageIds = new Set(
@@ -8945,14 +9207,14 @@ var TableDesktop = ({
       refetchData?.();
     }
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (isRowsFromAllPagesSelected) {
       selectAllRowsInPage();
     }
   }, [isRowsFromAllPagesSelected, data]);
   const renderBody = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx130(
+      return /* @__PURE__ */ jsx132(
         TableDesktopLoadingState,
         {
           numRows: Math.min(rowsPerPage, 10),
@@ -8962,7 +9224,7 @@ var TableDesktop = ({
       );
     }
     if (numRows === 0) {
-      return /* @__PURE__ */ jsx130(
+      return /* @__PURE__ */ jsx132(
         TableEmptyResult_default,
         {
           showClearFilterButton,
@@ -8971,7 +9233,7 @@ var TableDesktop = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx130(
+    return /* @__PURE__ */ jsx132(
       TableDesktopRows,
       {
         data,
@@ -8990,8 +9252,8 @@ var TableDesktop = ({
       }
     );
   };
-  return /* @__PURE__ */ jsx130(
-    Box44,
+  return /* @__PURE__ */ jsx132(
+    Box46,
     {
       sx: {
         height,
@@ -8999,8 +9261,8 @@ var TableDesktop = ({
         justifyContent: "space-between",
         justifyItems: "stretch"
       },
-      children: /* @__PURE__ */ jsxs91(
-        Paper12,
+      children: /* @__PURE__ */ jsxs92(
+        Paper13,
         {
           sx: {
             width: "100%",
@@ -9024,7 +9286,7 @@ var TableDesktop = ({
               isBulkChangesMode,
               onChangeBulkChangesMode: handleChangeBulkChangesMode
             }) : null,
-            /* @__PURE__ */ jsx130(
+            /* @__PURE__ */ jsx132(
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
@@ -9035,7 +9297,7 @@ var TableDesktop = ({
                 onClearSelectionClick: handleClearSelectionClick
               }
             ),
-            /* @__PURE__ */ jsx130(
+            /* @__PURE__ */ jsx132(
               TableContainer2,
               {
                 sx: {
@@ -9057,13 +9319,13 @@ var TableDesktop = ({
                     backgroundColor: (theme) => theme.palette.grey[500]
                   }
                 },
-                children: /* @__PURE__ */ jsx130(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx130(
+                children: /* @__PURE__ */ jsx132(Table2, { stickyHeader: true, "aria-label": "sticky-table", sx: { tableLayout }, children: visibleHeadCells.length === 0 ? /* @__PURE__ */ jsx132(
                   TableDesktopNoColumnsMessage,
                   {
                     onClickNoColumnsMessageOpenMenu: handleClickToolbarMenuOpen
                   }
-                ) : /* @__PURE__ */ jsxs91(Fragment14, { children: [
-                  /* @__PURE__ */ jsx130(
+                ) : /* @__PURE__ */ jsxs92(Fragment14, { children: [
+                  /* @__PURE__ */ jsx132(
                     SmartTableHeader,
                     {
                       order,
@@ -9079,7 +9341,7 @@ var TableDesktop = ({
                       shouldShowCheckOnFilter
                     }
                   ),
-                  /* @__PURE__ */ jsx130(TableBody3, { children: renderBody() })
+                  /* @__PURE__ */ jsx132(TableBody3, { children: renderBody() })
                 ] }) })
               }
             ),
@@ -9096,7 +9358,7 @@ var TableDesktop = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
+import { useEffect as useEffect15, useState as useState24 } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Checkbox as Checkbox9, FormControlLabel as FormControlLabel6 } from "@mui/material";
 import { DatePicker, TimePicker } from "@mui/x-date-pickers";
@@ -9104,7 +9366,7 @@ import moment2 from "moment";
 
 // src/components/TableDesktopEditableField/TableDesktopSmartMultipleSelect.tsx
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var TableDesktopSmartMultipleSelect = ({
   initialValue,
   inputLabel,
@@ -9125,7 +9387,7 @@ var TableDesktopSmartMultipleSelect = ({
       label: val[fieldName].toString()
     }));
   }, [initialValue]);
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx133(
     SmartMultipleSelect,
     {
       inputLabel,
@@ -9156,8 +9418,8 @@ var TableDesktopSmartMultipleSelect = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopSmartSelect.tsx
-import { useState as useState19 } from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { useState as useState20 } from "react";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var TableDesktopSmartSelect = ({
   ref,
   initialValue,
@@ -9174,12 +9436,12 @@ var TableDesktopSmartSelect = ({
   isFetchingFilterOptions,
   onUpdateEditableCell
 }) => {
-  const [value, setValue] = useState19(
+  const [value, setValue] = useState20(
     initialValue
   );
   const valueId = resolveObjectType(value ?? "", "id");
   const valueLabel = resolveObjectType(value ?? "", fieldName);
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx134(
     SmartSelect,
     {
       ref,
@@ -9211,18 +9473,18 @@ var TableDesktopSmartSelect = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTagsField.tsx
-import { useEffect as useEffect13, useMemo as useMemo7, useState as useState21, useRef as useRef8 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo7, useState as useState22, useRef as useRef9 } from "react";
 
 // src/components/HashtagInput/HashtagInput.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import {
   Autocomplete,
   Chip as Chip5,
   TextField as TextField8,
-  alpha as alpha2,
+  alpha as alpha3,
   useTheme as useTheme2
 } from "@mui/material";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 import { createElement } from "react";
 var HashtagInput = ({
   label,
@@ -9238,7 +9500,7 @@ var HashtagInput = ({
   ...props
 }) => {
   const { palette } = useTheme2();
-  const [inputValue, setInputValue] = useState20("");
+  const [inputValue, setInputValue] = useState21("");
   const sanitizeTag = (value) => {
     return value.toLowerCase().replace(/[^a-z0-9#]/g, "").trim();
   };
@@ -9255,7 +9517,7 @@ var HashtagInput = ({
       handleAddTag();
     }
   };
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx135(
     Autocomplete,
     {
       ...props,
@@ -9274,7 +9536,7 @@ var HashtagInput = ({
           onDeleteTag?.(details.option);
         }
       },
-      renderInput: (textFieldProps) => /* @__PURE__ */ jsx133(
+      renderInput: (textFieldProps) => /* @__PURE__ */ jsx135(
         TextField8,
         {
           ...textFieldProps,
@@ -9305,7 +9567,7 @@ var HashtagInput = ({
               paddingBlock: 0,
               color: palette.primary.main,
               fontWeight: "bold",
-              backgroundColor: alpha2(palette.primary.main, 0.1)
+              backgroundColor: alpha3(palette.primary.main, 0.1)
             }
           }
         );
@@ -9315,7 +9577,7 @@ var HashtagInput = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTagsField.tsx
-import { Fragment as Fragment15, jsx as jsx134 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx136 } from "react/jsx-runtime";
 var TableDesktopTagsField = ({
   initialValue,
   inputLabel,
@@ -9326,9 +9588,9 @@ var TableDesktopTagsField = ({
   size,
   onUpdateEditableCell
 }) => {
-  const [error, setError] = useState21();
-  const [values, setValues] = useState21([]);
-  const valuesRef = useRef8([]);
+  const [error, setError] = useState22();
+  const [values, setValues] = useState22([]);
+  const valuesRef = useRef9([]);
   const validateTag = (tag) => {
     if (tag.length >= 30) {
       return false;
@@ -9350,11 +9612,11 @@ var TableDesktopTagsField = ({
   const initialValueTags = useMemo7(() => {
     return (initialValue ?? []).map((val) => val.tag);
   }, [initialValue]);
-  useEffect13(() => {
+  useEffect14(() => {
     setValues(initialValueTags);
     valuesRef.current = initialValueTags;
   }, [initialValueTags]);
-  return /* @__PURE__ */ jsx134(Fragment15, { children: /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx136(Fragment15, { children: /* @__PURE__ */ jsx136(
     HashtagInput,
     {
       autoFocus: true,
@@ -9389,9 +9651,9 @@ var TableDesktopTagsField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopTextField.tsx
-import { useMemo as useMemo8, useState as useState22, useRef as useRef9 } from "react";
+import { useMemo as useMemo8, useState as useState23, useRef as useRef10 } from "react";
 import { TextField as TextField9 } from "@mui/material";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var TableDesktopTextField = ({
   rowId,
   initialValue,
@@ -9404,8 +9666,8 @@ var TableDesktopTextField = ({
   validateInput,
   onUpdateEditableCell
 }) => {
-  const [input, setInput] = useState22(initialValue);
-  const oldValue = useRef9(initialValue);
+  const [input, setInput] = useState23(initialValue);
+  const oldValue = useRef10(initialValue);
   const isDirty = useMemo8(
     () => input !== oldValue.current,
     [input, oldValue.current]
@@ -9428,7 +9690,7 @@ var TableDesktopTextField = ({
       commitValue(input);
     }
   };
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx137(
     TextField9,
     {
       fullWidth: true,
@@ -9461,7 +9723,7 @@ var TableDesktopTextField = ({
 };
 
 // src/components/TableDesktopEditableField/TableDesktopEditableField.tsx
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 var TableDesktopEditableField = ({
   editInitialValue,
   rowId,
@@ -9482,8 +9744,8 @@ var TableDesktopEditableField = ({
     allowBlankSelectOption
   }
 }) => {
-  const [parsedFilterOptions, setParsedFilterOptions] = useState23();
-  useEffect14(() => {
+  const [parsedFilterOptions, setParsedFilterOptions] = useState24();
+  useEffect15(() => {
     if (filterOptions && editableCellType === "select" || editableCellType === "multipleSelect") {
       const parsedOptions = filterOptions?.map(
         (option) => ({
@@ -9495,7 +9757,7 @@ var TableDesktopEditableField = ({
     }
   }, [filterOptions, editableCellType]);
   const editableComponents = {
-    select: /* @__PURE__ */ jsx136(
+    select: /* @__PURE__ */ jsx138(
       TableDesktopSmartSelect,
       {
         rowId,
@@ -9513,7 +9775,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    multipleSelect: /* @__PURE__ */ jsx136(
+    multipleSelect: /* @__PURE__ */ jsx138(
       TableDesktopSmartMultipleSelect,
       {
         rowId,
@@ -9530,11 +9792,11 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    checkbox: /* @__PURE__ */ jsx136(
+    checkbox: /* @__PURE__ */ jsx138(
       FormControlLabel6,
       {
         label: showCheckboxLabel ? inputLabel : "",
-        control: /* @__PURE__ */ jsx136(
+        control: /* @__PURE__ */ jsx138(
           Checkbox9,
           {
             disableRipple: true,
@@ -9552,7 +9814,7 @@ var TableDesktopEditableField = ({
         )
       }
     ),
-    text: /* @__PURE__ */ jsx136(
+    text: /* @__PURE__ */ jsx138(
       TableDesktopTextField,
       {
         type: "text",
@@ -9567,7 +9829,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    numeric: /* @__PURE__ */ jsx136(
+    numeric: /* @__PURE__ */ jsx138(
       TableDesktopTextField,
       {
         type: "numeric",
@@ -9582,7 +9844,7 @@ var TableDesktopEditableField = ({
         onUpdateEditableCell
       }
     ),
-    date: /* @__PURE__ */ jsx136(
+    date: /* @__PURE__ */ jsx138(
       DatePicker,
       {
         defaultValue: editInitialValue ? moment2(editInitialValue, "HH:mm:ss") : void 0,
@@ -9611,7 +9873,7 @@ var TableDesktopEditableField = ({
         }
       }
     ),
-    time: /* @__PURE__ */ jsx136(
+    time: /* @__PURE__ */ jsx138(
       TimePicker,
       {
         defaultValue: editInitialValue ? moment2(editInitialValue, "HH:mm:ss") : void 0,
@@ -9638,7 +9900,7 @@ var TableDesktopEditableField = ({
         }
       }
     ),
-    tags: /* @__PURE__ */ jsx136(
+    tags: /* @__PURE__ */ jsx138(
       TableDesktopTagsField,
       {
         initialValue: editInitialValue,
@@ -9660,7 +9922,7 @@ var TableDesktopEditableField = ({
 // src/components/TableDesktopFooter/TableDesktopFooter.tsx
 import Refresh3 from "@mui/icons-material/Refresh";
 import {
-  Box as Box45,
+  Box as Box47,
   Button as Button18,
   MenuItem as MenuItem4,
   Pagination as Pagination2,
@@ -9668,7 +9930,7 @@ import {
   Stack,
   Typography as Typography35
 } from "@mui/material";
-import { jsx as jsx137, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs93 } from "react/jsx-runtime";
 var TableDesktopFooter = ({
   numPages,
   page,
@@ -9679,8 +9941,8 @@ var TableDesktopFooter = ({
   refetchData,
   isFetching
 }) => {
-  return /* @__PURE__ */ jsxs92(
-    Box45,
+  return /* @__PURE__ */ jsxs93(
+    Box47,
     {
       sx: {
         py: 1,
@@ -9691,7 +9953,7 @@ var TableDesktopFooter = ({
         borderTop: `1px solid ${colors.neutral300}`
       },
       children: [
-        refetchData ? /* @__PURE__ */ jsx137(
+        refetchData ? /* @__PURE__ */ jsx139(
           Button18,
           {
             disableRipple: true,
@@ -9703,7 +9965,7 @@ var TableDesktopFooter = ({
               ml: 1,
               gap: 1
             },
-            children: /* @__PURE__ */ jsx137(
+            children: /* @__PURE__ */ jsx139(
               Refresh3,
               {
                 fontSize: "small",
@@ -9712,21 +9974,21 @@ var TableDesktopFooter = ({
             )
           }
         ) : null,
-        /* @__PURE__ */ jsxs92(Box45, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
-          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs92(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx137(Typography35, { fontSize: 12, children: "Rows per page:" }),
-            /* @__PURE__ */ jsx137(
+        /* @__PURE__ */ jsxs93(Box47, { sx: { display: "flex", ml: "auto", py: 1 }, children: [
+          pageSize && pageSizeOptions && onPageSizeChange ? /* @__PURE__ */ jsxs93(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx139(Typography35, { fontSize: 12, children: "Rows per page:" }),
+            /* @__PURE__ */ jsx139(
               Select5,
               {
                 value: pageSize,
                 onChange: onPageSizeChange,
                 size: "small",
                 variant: "standard",
-                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx137(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
+                children: pageSizeOptions.map((pageSizeOption) => /* @__PURE__ */ jsx139(MenuItem4, { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx137(
+          /* @__PURE__ */ jsx139(
             Pagination2,
             {
               color: "standard",
@@ -9742,15 +10004,15 @@ var TableDesktopFooter = ({
 };
 
 // src/components/TableDesktopCell/TableDesktopCell.tsx
-import { useEffect as useEffect15, useState as useState24 } from "react";
+import { useEffect as useEffect16, useState as useState25 } from "react";
 import CheckIcon3 from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import EditIcon from "@mui/icons-material/Edit";
 import { IconButton as IconButton6, TableCell as TableCell6, Tooltip as Tooltip12 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx138, jsxs as jsxs93 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx140, jsxs as jsxs94 } from "react/jsx-runtime";
 var getReadOnlyBooleanIcon = (value) => {
   if (value) {
-    return /* @__PURE__ */ jsx138(CheckIcon3, { sx: { fontSize: 16 } });
+    return /* @__PURE__ */ jsx140(CheckIcon3, { sx: { fontSize: 16 } });
   }
   return "-";
 };
@@ -9772,10 +10034,10 @@ var TableDesktopCell = ({
   onCellClick,
   headCell
 }) => {
-  const [isCellHovered, setIsCellHovered] = useState24(false);
-  const [isCellInEditMode, setIsCellInEditMode] = useState24(false);
+  const [isCellHovered, setIsCellHovered] = useState25(false);
+  const [isCellInEditMode, setIsCellInEditMode] = useState25(false);
   const { width, editableCellType } = headCell;
-  useEffect15(() => {
+  useEffect16(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         setIsCellInEditMode(false);
@@ -9793,7 +10055,7 @@ var TableDesktopCell = ({
     setIsCellInEditMode((prev) => !prev);
   };
   const isCellEditable = !!enableEditMode && !!editableCellType && !disabled;
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx140(
     TableCell6,
     {
       align: "left",
@@ -9808,8 +10070,8 @@ var TableDesktopCell = ({
         ":hover": isCellEditable ? getCellBackgroundColor(isCellInEditMode) : void 0,
         background: enableEditMode && isCellInEditMode ? colors.lightBlueBackground : void 0
       },
-      children: /* @__PURE__ */ jsx138(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs93(Fragment16, { children: [
-        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx138(Tooltip12, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx138(
+      children: /* @__PURE__ */ jsx140(DynamicOverflowTooltip, { tooltipDescription: String(readOnlyValue), arrow: true, children: /* @__PURE__ */ jsxs94(Fragment16, { children: [
+        enableEditMode && isCellHovered ? /* @__PURE__ */ jsx140(Tooltip12, { title: isCellInEditMode ? "" : "Toggle Edit Mode", children: /* @__PURE__ */ jsx140(
           IconButton6,
           {
             onClick: handleEditClick,
@@ -9824,10 +10086,10 @@ var TableDesktopCell = ({
                 backgroundColor: isCellInEditMode ? colors.lightBlueBackground : colors.neutral150
               }
             },
-            children: isCellInEditMode ? /* @__PURE__ */ jsx138(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx138(EditIcon, { fontSize: "small" })
+            children: isCellInEditMode ? /* @__PURE__ */ jsx140(CloseIcon, { fontSize: "small", color: "error" }) : /* @__PURE__ */ jsx140(EditIcon, { fontSize: "small" })
           }
         ) }) : null,
-        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx138(
+        enableEditMode && isCellInEditMode && editableCellType ? /* @__PURE__ */ jsx140(
           TableDesktopEditableField,
           {
             editInitialValue,
@@ -9844,15 +10106,15 @@ var TableDesktopCell = ({
 
 // src/components/TableDesktopToolbar/TableDesktopToolbar.tsx
 import {
-  useState as useState25,
+  useState as useState26,
   useMemo as useMemo9,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 import Download from "@mui/icons-material/Download";
 import KeyboardArrowLeft2 from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRight2 from "@mui/icons-material/KeyboardArrowRight";
 import {
-  Box as Box46,
+  Box as Box48,
   Button as Button19,
   Divider as Divider11,
   FormControlLabel as FormControlLabel7,
@@ -9861,7 +10123,7 @@ import {
   Tooltip as Tooltip13,
   Typography as Typography36
 } from "@mui/material";
-import { Fragment as Fragment17, jsx as jsx139, jsxs as jsxs94 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx141, jsxs as jsxs95 } from "react/jsx-runtime";
 var TableDesktopToolbar = ({
   toolbarLabel,
   headCells,
@@ -9884,11 +10146,11 @@ var TableDesktopToolbar = ({
   renderTableColumnConfigurationMenu,
   renderInfoIcons
 }) => {
-  const scrollRef = useRef10(null);
-  const [bulkChanges, setBulkChanges] = useState25([]);
-  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState25(false);
-  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState25(false);
-  const [resetCounter, setResetCounter] = useState25(0);
+  const scrollRef = useRef11(null);
+  const [bulkChanges, setBulkChanges] = useState26([]);
+  const [isBulkChangesDialogOpen, setIsBulkChangesDialogOpen] = useState26(false);
+  const [isExportCsvDialogOpen, setIsExportCsvDialogOpen] = useState26(false);
+  const [resetCounter, setResetCounter] = useState26(0);
   const visibleEditableColumns = useMemo9(
     () => headCells.filter(
       (headCell) => headCell?.enabled && !!headCell?.editableCellType
@@ -9915,8 +10177,8 @@ var TableDesktopToolbar = ({
       return [...prev, { field: columnId, value, label }];
     });
   };
-  return /* @__PURE__ */ jsxs94(
-    Box46,
+  return /* @__PURE__ */ jsxs95(
+    Box48,
     {
       sx: {
         borderBottom: "1px solid",
@@ -9924,8 +10186,8 @@ var TableDesktopToolbar = ({
         maxWidth: "100%"
       },
       children: [
-        /* @__PURE__ */ jsxs94(
-          Box46,
+        /* @__PURE__ */ jsxs95(
+          Box48,
           {
             sx: {
               py: 1,
@@ -9936,8 +10198,8 @@ var TableDesktopToolbar = ({
               background: isBulkChangesMode ? colors.neutral150 : void 0
             },
             children: [
-              /* @__PURE__ */ jsxs94(
-                Box46,
+              /* @__PURE__ */ jsxs95(
+                Box48,
                 {
                   sx: {
                     py: 1,
@@ -9947,20 +10209,20 @@ var TableDesktopToolbar = ({
                     whiteSpace: "nowrap"
                   },
                   children: [
-                    toolbarLabel ? /* @__PURE__ */ jsxs94(Fragment17, { children: [
-                      /* @__PURE__ */ jsx139(Typography36, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
-                      /* @__PURE__ */ jsx139(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
+                    toolbarLabel ? /* @__PURE__ */ jsxs95(Fragment17, { children: [
+                      /* @__PURE__ */ jsx141(Typography36, { variant: "subtitle2", color: "textSecondary", children: toolbarLabel }),
+                      /* @__PURE__ */ jsx141(Divider11, { orientation: "vertical", sx: { height: 0.75, py: 2.5 } })
                     ] }) : null,
-                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx139(
+                    renderBulkChangesDialog && refetchData ? /* @__PURE__ */ jsx141(
                       Tooltip13,
                       {
                         title: disableBulkChangesMode ? "Access denied, you don\u2019t have permission to use this feature." : "",
-                        children: /* @__PURE__ */ jsx139(
+                        children: /* @__PURE__ */ jsx141(
                           FormControlLabel7,
                           {
                             label: "Bulk Changes Mode",
                             disabled: disableBulkChangesMode || !visibleEditableColumns.length,
-                            control: /* @__PURE__ */ jsx139(
+                            control: /* @__PURE__ */ jsx141(
                               Switch2,
                               {
                                 size: "small",
@@ -9975,17 +10237,17 @@ var TableDesktopToolbar = ({
                   ]
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx139(
+              isScrollable && /* @__PURE__ */ jsx141(
                 IconButton7,
                 {
                   "aria-label": "scroll-left",
                   sx: { padding: 0, alignSelf: "center" },
                   onClick: () => scroll("left"),
-                  children: /* @__PURE__ */ jsx139(KeyboardArrowLeft2, {})
+                  children: /* @__PURE__ */ jsx141(KeyboardArrowLeft2, {})
                 }
               ),
-              /* @__PURE__ */ jsx139(
-                Box46,
+              /* @__PURE__ */ jsx141(
+                Box48,
                 {
                   ref: scrollRef,
                   sx: {
@@ -10006,11 +10268,11 @@ var TableDesktopToolbar = ({
                     if (bulkUpdateDisabled) {
                       return null;
                     }
-                    return editableCellType && /* @__PURE__ */ jsx139(
-                      Box46,
+                    return editableCellType && /* @__PURE__ */ jsx141(
+                      Box48,
                       {
                         sx: { width, flex: "0 0 auto" },
-                        children: /* @__PURE__ */ jsx139(
+                        children: /* @__PURE__ */ jsx141(
                           TableDesktopEditableField,
                           {
                             headCell,
@@ -10026,17 +10288,17 @@ var TableDesktopToolbar = ({
                   }) : null
                 }
               ),
-              isScrollable && /* @__PURE__ */ jsx139(
+              isScrollable && /* @__PURE__ */ jsx141(
                 IconButton7,
                 {
                   "aria-label": "scroll-right",
                   sx: { p: 0, alignSelf: "center" },
                   onClick: () => scroll("right"),
-                  children: /* @__PURE__ */ jsx139(KeyboardArrowRight2, {})
+                  children: /* @__PURE__ */ jsx141(KeyboardArrowRight2, {})
                 }
               ),
-              isBulkChangesMode ? /* @__PURE__ */ jsxs94(Fragment17, { children: [
-                /* @__PURE__ */ jsx139(
+              isBulkChangesMode ? /* @__PURE__ */ jsxs95(Fragment17, { children: [
+                /* @__PURE__ */ jsx141(
                   Button19,
                   {
                     variant: "outlined",
@@ -10049,7 +10311,7 @@ var TableDesktopToolbar = ({
                     children: "RESET"
                   }
                 ),
-                /* @__PURE__ */ jsx139(
+                /* @__PURE__ */ jsx141(
                   Button19,
                   {
                     variant: "contained",
@@ -10060,26 +10322,26 @@ var TableDesktopToolbar = ({
                     children: "APPLY"
                   }
                 )
-              ] }) : /* @__PURE__ */ jsxs94(Box46, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              ] }) : /* @__PURE__ */ jsxs95(Box48, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
                 renderInfoIcons,
-                renderExportCsvDialog ? /* @__PURE__ */ jsx139(Tooltip13, { title: "Download List", children: /* @__PURE__ */ jsx139("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx139(
+                renderExportCsvDialog ? /* @__PURE__ */ jsx141(Tooltip13, { title: "Download List", children: /* @__PURE__ */ jsx141("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx141(
                   IconButton7,
                   {
                     disableRipple: true,
                     disabled: isDataEmpty,
                     "aria-label": "export-csv-button",
                     onClick: () => setIsExportCsvDialogOpen(true),
-                    children: /* @__PURE__ */ jsx139(Download, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx141(Download, { fill: colors.neutral750 })
                   }
                 ) }) }) : null,
-                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx139(Tooltip13, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx139(
+                renderTableColumnConfigurationMenu ? /* @__PURE__ */ jsx141(Tooltip13, { title: "Table Column Configuration", children: /* @__PURE__ */ jsx141(
                   IconButton7,
                   {
                     disableRipple: true,
                     "aria-label": "table-column-config-button",
                     ref: tableToolbarMenuButtonRef,
                     onClick: onClickToolbarMenuOpen,
-                    children: /* @__PURE__ */ jsx139(IconTableEdit_default, { fill: colors.neutral750 })
+                    children: /* @__PURE__ */ jsx141(IconTableEdit_default, { fill: colors.neutral750 })
                   }
                 ) }) : null
               ] })
@@ -10112,11 +10374,11 @@ var TableDesktopToolbar = ({
 };
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo21, useEffect as useEffect16, useState as useState26 } from "react";
+import { memo as memo23, useEffect as useEffect17, useState as useState27 } from "react";
 import ImportExportIcon from "@mui/icons-material/ImportExport";
 import { TableCell as TableCell7, TableHead as TableHead3, TableRow as TableRow6, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles46 } from "tss-react/mui";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 var useStyles46 = makeStyles46()(() => ({
   sortLabel: {
     "& .MuiTableSortLabel-icon": {
@@ -10125,9 +10387,9 @@ var useStyles46 = makeStyles46()(() => ({
   }
 }));
 var TableHeader = ({ cells, onSort = null }) => {
-  const [sortableCells, setSortableCells] = useState26([]);
+  const [sortableCells, setSortableCells] = useState27([]);
   const { classes } = useStyles46();
-  useEffect16(() => {
+  useEffect17(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {
@@ -10161,7 +10423,7 @@ var TableHeader = ({ cells, onSort = null }) => {
     });
     setSortableCells(sortedCells);
   };
-  return /* @__PURE__ */ jsx140(TableHead3, { children: /* @__PURE__ */ jsx140(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx140(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx142(TableHead3, { children: /* @__PURE__ */ jsx142(TableRow6, { children: sortableCells.map((cell, key) => /* @__PURE__ */ jsx142(TableCell7, { children: cell.isSortable ? /* @__PURE__ */ jsx142(
     TableSortLabel3,
     {
       className: classes.sortLabel,
@@ -10172,12 +10434,12 @@ var TableHeader = ({ cells, onSort = null }) => {
     }
   ) : cell.label }, cell.label || key)) }) });
 };
-var TableHeader_default = memo21(TableHeader);
+var TableHeader_default = memo23(TableHeader);
 
 // src/components/TextDivider/TextDivider.tsx
-import { Box as Box47, Typography as Typography37, Divider as Divider12, Button as Button20 } from "@mui/material";
+import { Box as Box49, Typography as Typography37, Divider as Divider12, Button as Button20 } from "@mui/material";
 import { makeStyles as makeStyles47 } from "tss-react/mui";
-import { jsx as jsx141, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs96 } from "react/jsx-runtime";
 var useStyles47 = makeStyles47()(() => ({
   icon: {
     fontSize: 20
@@ -10214,18 +10476,18 @@ var TextDivider = ({
 }) => {
   const { classes } = useStyles47();
   const iconColor = color ?? colors.neutral900;
-  return /* @__PURE__ */ jsxs95(
-    Box47,
+  return /* @__PURE__ */ jsxs96(
+    Box49,
     {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       className: classes.container,
       children: [
-        /* @__PURE__ */ jsx141(Divider12, { className: classes.leftDivider }),
-        /* @__PURE__ */ jsx141(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs95(Box47, { className: classes.center, children: [
-          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx141(Icon2, { className: classes.icon, style: { color: iconColor } }),
-          /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx143(Divider12, { className: classes.leftDivider }),
+        /* @__PURE__ */ jsx143(Button20, { onClick, disabled: !onClick, className: classes.button, children: /* @__PURE__ */ jsxs96(Box49, { className: classes.center, children: [
+          Icon2 && iconPosition === "left" && /* @__PURE__ */ jsx143(Icon2, { className: classes.icon, style: { color: iconColor } }),
+          /* @__PURE__ */ jsx143(
             Typography37,
             {
               color: "textSecondary",
@@ -10234,9 +10496,9 @@ var TextDivider = ({
               children: title
             }
           ),
-          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx141(Icon2, { className: classes.icon, style: { color: iconColor } })
+          Icon2 && iconPosition === "right" && /* @__PURE__ */ jsx143(Icon2, { className: classes.icon, style: { color: iconColor } })
         ] }) }),
-        /* @__PURE__ */ jsx141(Divider12, { className: classes.rightDivider })
+        /* @__PURE__ */ jsx143(Divider12, { className: classes.rightDivider })
       ]
     }
   );
@@ -10248,7 +10510,7 @@ import { DateRangePicker } from "react-dates";
 import { makeStyles as makeStyles48 } from "tss-react/mui";
 import "react-dates/initialize";
 import "react-dates/lib/css/_datepicker.css";
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var useStyles48 = makeStyles48()((theme) => ({
   wrapper: {
     "& .DateRangePicker": {
@@ -10344,15 +10606,15 @@ var ThemedDateRangePicker = ({
   ...props
 }) => {
   const { classes, cx } = useStyles48();
-  return /* @__PURE__ */ jsx142("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx142(DateRangePicker, { ...props }) });
+  return /* @__PURE__ */ jsx144("div", { className: cx(classes.wrapper, className), children: /* @__PURE__ */ jsx144(DateRangePicker, { ...props }) });
 };
 var ThemedDateRangePicker_default = ThemedDateRangePicker;
 
 // src/components/TheToolbar/TheToolbar.tsx
-import { memo as memo22 } from "react";
-import { AppBar, Box as Box48, Toolbar } from "@mui/material";
+import { memo as memo24 } from "react";
+import { AppBar, Box as Box50, Toolbar } from "@mui/material";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
-import { jsx as jsx143, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs97 } from "react/jsx-runtime";
 var useStyles49 = makeStyles49()((theme) => ({
   menuButton: {
     color: theme.palette.primary.contrastText
@@ -10369,13 +10631,14 @@ var TheToolbar = ({
   handleOpen,
   LeftDrawer,
   leftSection,
+  centerSection,
   rightSection,
   isAuthenticated = true
 }) => {
   const { classes } = useStyles49();
-  return /* @__PURE__ */ jsxs96(Box48, { children: [
-    /* @__PURE__ */ jsx143(AppBar, { children: /* @__PURE__ */ jsxs96(Toolbar, { className: classes.topBar, children: [
-      isAuthenticated ? /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsxs97(Box50, { children: [
+    /* @__PURE__ */ jsx145(AppBar, { children: /* @__PURE__ */ jsxs97(Toolbar, { className: classes.topBar, children: [
+      isAuthenticated ? /* @__PURE__ */ jsx145(
         RoundButton_default,
         {
           className: classes.menuButton,
@@ -10384,7 +10647,7 @@ var TheToolbar = ({
           onClick: handleOpen
         }
       ) : null,
-      /* @__PURE__ */ jsx143(
+      /* @__PURE__ */ jsx145(
         CompanyLogo_default,
         {
           size: "small",
@@ -10393,30 +10656,42 @@ var TheToolbar = ({
           imageLogoLightSmall
         }
       ),
-      /* @__PURE__ */ jsx143(Box48, { ml: 2, children: leftSection }),
-      /* @__PURE__ */ jsx143(Box48, { ml: "auto", children: rightSection })
+      /* @__PURE__ */ jsx145(Box50, { ml: 2, children: leftSection }),
+      centerSection ? /* @__PURE__ */ jsx145(
+        Box50,
+        {
+          sx: {
+            flexGrow: 1,
+            minWidth: 0,
+            display: "flex",
+            justifyContent: "center"
+          },
+          children: centerSection
+        }
+      ) : /* @__PURE__ */ jsx145(Box50, { sx: { flexGrow: 1 } }),
+      /* @__PURE__ */ jsx145(Box50, { children: rightSection })
     ] }) }),
     LeftDrawer
   ] });
 };
-var TheToolbar_default = memo22(TheToolbar);
+var TheToolbar_default = memo24(TheToolbar);
 
 // src/components/ToastMessage/ToastMessage.tsx
 import { Alert as MuiAlert, Snackbar } from "@mui/material";
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 var ToastMessage = ({
   toastType,
   toastMessage,
   open,
   onClose
-}) => /* @__PURE__ */ jsx144(
+}) => /* @__PURE__ */ jsx146(
   Snackbar,
   {
     open,
     autoHideDuration: 3e3,
     onClose,
     anchorOrigin: { vertical: "top", horizontal: "right" },
-    children: /* @__PURE__ */ jsx144(
+    children: /* @__PURE__ */ jsx146(
       MuiAlert,
       {
         elevation: 6,
@@ -10447,13 +10722,13 @@ import {
   Typography as Typography38,
   Dialog as Dialog5,
   Backdrop,
-  Box as Box49,
+  Box as Box51,
   Divider as Divider13,
-  Paper as Paper13,
+  Paper as Paper14,
   Fade as Fade2
 } from "@mui/material";
 import { makeStyles as makeStyles50 } from "tss-react/mui";
-import { jsx as jsx145, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx147, jsxs as jsxs98 } from "react/jsx-runtime";
 var useStyles50 = makeStyles50()((theme) => ({
   paper: {
     padding: theme.spacing(2)
@@ -10483,7 +10758,7 @@ var TwoButtonDialog = ({
   cancelButton
 }) => {
   const { classes } = useStyles50();
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx147(
     Dialog5,
     {
       open,
@@ -10493,10 +10768,10 @@ var TwoButtonDialog = ({
       closeAfterTransition: true,
       BackdropComponent: Backdrop,
       BackdropProps: { timeout: 500 },
-      children: /* @__PURE__ */ jsx145(Fade2, { in: open, children: /* @__PURE__ */ jsxs97(Paper13, { className: classes.paper, children: [
-        /* @__PURE__ */ jsxs97(Box49, { className: classes.mb, children: [
-          /* @__PURE__ */ jsx145(Typography38, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx145(
-            Box49,
+      children: /* @__PURE__ */ jsx147(Fade2, { in: open, children: /* @__PURE__ */ jsxs98(Paper14, { className: classes.paper, children: [
+        /* @__PURE__ */ jsxs98(Box51, { className: classes.mb, children: [
+          /* @__PURE__ */ jsx147(Typography38, { variant: "h5", component: "div", children: /* @__PURE__ */ jsx147(
+            Box51,
             {
               sx: {
                 fontWeight: 600
@@ -10504,23 +10779,23 @@ var TwoButtonDialog = ({
               children: title
             }
           ) }),
-          /* @__PURE__ */ jsxs97(
-            Box49,
+          /* @__PURE__ */ jsxs98(
+            Box51,
             {
               className: classes.mt,
               sx: {
                 fontWeight: 600
               },
               children: [
-                subtitle1 && /* @__PURE__ */ jsx145(Typography38, { variant: "subtitle1", children: subtitle1 }),
-                subtitle2 && /* @__PURE__ */ jsx145(Typography38, { variant: "subtitle1", children: subtitle2 })
+                subtitle1 && /* @__PURE__ */ jsx147(Typography38, { variant: "subtitle1", children: subtitle1 }),
+                subtitle2 && /* @__PURE__ */ jsx147(Typography38, { variant: "subtitle1", children: subtitle2 })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx145(Divider13, {}),
-        /* @__PURE__ */ jsxs97(Box49, { className: classes.buttonContainer, children: [
-          /* @__PURE__ */ jsx145(
+        /* @__PURE__ */ jsx147(Divider13, {}),
+        /* @__PURE__ */ jsxs98(Box51, { className: classes.buttonContainer, children: [
+          /* @__PURE__ */ jsx147(
             FilledButton_default,
             {
               copy: cancelLabel,
@@ -10533,7 +10808,7 @@ var TwoButtonDialog = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx145(
+          /* @__PURE__ */ jsx147(
             FilledButton_default,
             {
               color: "primary",
@@ -10542,7 +10817,7 @@ var TwoButtonDialog = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx145(Loading_default, { isLoading: dialogLoading })
+        /* @__PURE__ */ jsx147(Loading_default, { isLoading: dialogLoading })
       ] }) })
     }
   );
@@ -10550,11 +10825,11 @@ var TwoButtonDialog = ({
 var TwoButtonDialog_default = TwoButtonDialog;
 
 // src/components/UserBust/UserBust.tsx
-import { memo as memo23 } from "react";
+import { memo as memo25 } from "react";
 import { Avatar as Avatar2, Typography as Typography39 } from "@mui/material";
-import { jsx as jsx146, jsxs as jsxs98 } from "react/jsx-runtime";
-var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs98("div", { children: [
-  /* @__PURE__ */ jsx146(
+import { jsx as jsx148, jsxs as jsxs99 } from "react/jsx-runtime";
+var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs99("div", { children: [
+  /* @__PURE__ */ jsx148(
     Avatar2,
     {
       src: user.profile_picture,
@@ -10562,18 +10837,18 @@ var UserBust = ({ user, avatarProps, typographyProps }) => /* @__PURE__ */ jsxs9
       style: { width: avatarProps.width, height: avatarProps.height }
     }
   ),
-  /* @__PURE__ */ jsxs98("div", { style: { paddingTop: 16 }, children: [
-    /* @__PURE__ */ jsx146(Typography39, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
-    /* @__PURE__ */ jsx146(Typography39, { ...typographyProps.username, children: user.username })
+  /* @__PURE__ */ jsxs99("div", { style: { paddingTop: 16 }, children: [
+    /* @__PURE__ */ jsx148(Typography39, { ...typographyProps.name, children: `${user.first_name} ${user.last_name}` }),
+    /* @__PURE__ */ jsx148(Typography39, { ...typographyProps.username, children: user.username })
   ] })
 ] });
-var UserBust_default = memo23(UserBust);
+var UserBust_default = memo25(UserBust);
 
 // src/components/icons/IconChart.tsx
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
 var SvgIconChart = (props) => {
   const { fill } = props;
-  return /* @__PURE__ */ jsx147(
+  return /* @__PURE__ */ jsx149(
     "svg",
     {
       width: "20",
@@ -10582,7 +10857,7 @@ var SvgIconChart = (props) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ jsx147(
+      children: /* @__PURE__ */ jsx149(
         "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",
@@ -10629,6 +10904,8 @@ export {
   FilterOptionsCheckboxes,
   FilterSimpleSelector_default as FilterSimpleSelector,
   FixedFooter_default as FixedFooter,
+  GlobalSearch_default as GlobalSearch,
+  GlobalSearchTrigger_default as GlobalSearchTrigger,
   GooglePlacesAddressAutocomplete,
   HashtagInput,
   Header_default as Header,