sevago-sso-fe 1.0.8 → 1.0.10

package/dist/index.cjs.js

@@ -5,6 +5,7 @@ const toolkit = require("@reduxjs/toolkit");
 const reactRedux = require("react-redux");
 const React = require("react");
 const reactRouterDom = require("react-router-dom");
+const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
 const system = require("@mui/system");
 const emStyled = require("@emotion/styled");
@@ -12805,8 +12806,10 @@ const truncateText = (text, maxLength = 27) => {
   return `${text.substring(0, maxLength)}...`;
 };
 const timeUtils = timeUtilsMethods;
-const useApps = (tab) => {
-  const userType = reactRedux.useSelector((state) => state.account.user?.type);
+const useApps = (tab = AppCategory.ALL) => {
+  const userType = reactRedux.useSelector(
+    (state) => state.account.user?.type
+  );
   const listApp = React.useMemo(() => {
     let filteredApps = SYSTEM_MODULES.filter((app2) => {
       return app2.allowUserTypes.includes(userType);
@@ -12823,8 +12826,21 @@ const useIsSystemMonitor = () => {
   const normalize = (p) => p.replace(/\/+$/, "");
   return normalize(location2.pathname) === normalize(PAGE.DASHBOARD.path);
 };
+const useAllApps = () => {
+  const userType = reactRedux.useSelector(
+    (state) => state.account.user?.type
+  );
+  const allApps = React.useMemo(() => {
+    return SYSTEM_MODULES.filter((app2) => {
+      return app2.allowUserTypes.includes(userType);
+    });
+  }, [userType]);
+  return allApps;
+};
 const useActiveSidebar = () => {
-  const { user, current_access } = reactRedux.useSelector((state) => state.account);
+  const { user, current_access } = reactRedux.useSelector(
+    (state) => state.account
+  );
   const activeSidebar = React.useMemo(() => {
     return SYSTEM_MODULES.find(
       (it) => it.key === current_access && user && (it.allowUserTypes ? it.allowUserTypes.includes(user?.type) : true)
@@ -12832,323 +12848,18 @@ const useActiveSidebar = () => {
   }, [current_access, user]);
   return activeSidebar;
 };
-var jsxRuntime = { exports: {} };
-var reactJsxRuntime_production = {};
-/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactJsxRuntime_production;
-function requireReactJsxRuntime_production() {
-  if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
-  hasRequiredReactJsxRuntime_production = 1;
-  var REACT_ELEMENT_TYPE2 = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
-  function jsxProd(type, config, maybeKey) {
-    var key = null;
-    void 0 !== maybeKey && (key = "" + maybeKey);
-    void 0 !== config.key && (key = "" + config.key);
-    if ("key" in config) {
-      maybeKey = {};
-      for (var propName in config)
-        "key" !== propName && (maybeKey[propName] = config[propName]);
-    } else maybeKey = config;
-    config = maybeKey.ref;
-    return {
-      $$typeof: REACT_ELEMENT_TYPE2,
-      type,
-      key,
-      ref: void 0 !== config ? config : null,
-      props: maybeKey
-    };
-  }
-  reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
-  reactJsxRuntime_production.jsx = jsxProd;
-  reactJsxRuntime_production.jsxs = jsxProd;
-  return reactJsxRuntime_production;
-}
-var reactJsxRuntime_development = {};
-/**
- * @license React
- * react-jsx-runtime.development.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var hasRequiredReactJsxRuntime_development;
-function requireReactJsxRuntime_development() {
-  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
-  hasRequiredReactJsxRuntime_development = 1;
-  "production" !== process.env.NODE_ENV && (function() {
-    function getComponentNameFromType(type) {
-      if (null == type) return null;
-      if ("function" === typeof type)
-        return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
-      if ("string" === typeof type) return type;
-      switch (type) {
-        case REACT_FRAGMENT_TYPE:
-          return "Fragment";
-        case REACT_PROFILER_TYPE:
-          return "Profiler";
-        case REACT_STRICT_MODE_TYPE:
-          return "StrictMode";
-        case REACT_SUSPENSE_TYPE:
-          return "Suspense";
-        case REACT_SUSPENSE_LIST_TYPE:
-          return "SuspenseList";
-        case REACT_ACTIVITY_TYPE:
-          return "Activity";
-      }
-      if ("object" === typeof type)
-        switch ("number" === typeof type.tag && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), type.$$typeof) {
-          case REACT_PORTAL_TYPE:
-            return "Portal";
-          case REACT_CONTEXT_TYPE:
-            return type.displayName || "Context";
-          case REACT_CONSUMER_TYPE:
-            return (type._context.displayName || "Context") + ".Consumer";
-          case REACT_FORWARD_REF_TYPE:
-            var innerType = type.render;
-            type = type.displayName;
-            type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
-            return type;
-          case REACT_MEMO_TYPE:
-            return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
-          case REACT_LAZY_TYPE:
-            innerType = type._payload;
-            type = type._init;
-            try {
-              return getComponentNameFromType(type(innerType));
-            } catch (x) {
-            }
-        }
-      return null;
-    }
-    function testStringCoercion(value2) {
-      return "" + value2;
-    }
-    function checkKeyStringCoercion(value2) {
-      try {
-        testStringCoercion(value2);
-        var JSCompiler_inline_result = false;
-      } catch (e) {
-        JSCompiler_inline_result = true;
-      }
-      if (JSCompiler_inline_result) {
-        JSCompiler_inline_result = console;
-        var JSCompiler_temp_const = JSCompiler_inline_result.error;
-        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value2[Symbol.toStringTag] || value2.constructor.name || "Object";
-        JSCompiler_temp_const.call(
-          JSCompiler_inline_result,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          JSCompiler_inline_result$jscomp$0
-        );
-        return testStringCoercion(value2);
-      }
-    }
-    function getTaskName(type) {
-      if (type === REACT_FRAGMENT_TYPE) return "<>";
-      if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
-        return "<...>";
-      try {
-        var name2 = getComponentNameFromType(type);
-        return name2 ? "<" + name2 + ">" : "<...>";
-      } catch (x) {
-        return "<...>";
-      }
-    }
-    function getOwner() {
-      var dispatcher = ReactSharedInternals.A;
-      return null === dispatcher ? null : dispatcher.getOwner();
-    }
-    function UnknownOwner() {
-      return Error("react-stack-top-frame");
-    }
-    function hasValidKey(config) {
-      if (hasOwnProperty2.call(config, "key")) {
-        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
-        if (getter && getter.isReactWarning) return false;
-      }
-      return void 0 !== config.key;
-    }
-    function defineKeyPropWarningGetter(props, displayName) {
-      function warnAboutAccessingKey() {
-        specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          displayName
-        ));
-      }
-      warnAboutAccessingKey.isReactWarning = true;
-      Object.defineProperty(props, "key", {
-        get: warnAboutAccessingKey,
-        configurable: true
-      });
-    }
-    function elementRefGetterWithDeprecationWarning() {
-      var componentName = getComponentNameFromType(this.type);
-      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      ));
-      componentName = this.props.ref;
-      return void 0 !== componentName ? componentName : null;
-    }
-    function ReactElement(type, key, props, owner, debugStack, debugTask) {
-      var refProp = props.ref;
-      type = {
-        $$typeof: REACT_ELEMENT_TYPE2,
-        type,
-        key,
-        props,
-        _owner: owner
-      };
-      null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
-        enumerable: false,
-        get: elementRefGetterWithDeprecationWarning
-      }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
-      type._store = {};
-      Object.defineProperty(type._store, "validated", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: 0
-      });
-      Object.defineProperty(type, "_debugInfo", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: null
-      });
-      Object.defineProperty(type, "_debugStack", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: debugStack
-      });
-      Object.defineProperty(type, "_debugTask", {
-        configurable: false,
-        enumerable: false,
-        writable: true,
-        value: debugTask
-      });
-      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
-      return type;
-    }
-    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
-      var children = config.children;
-      if (void 0 !== children)
-        if (isStaticChildren)
-          if (isArrayImpl(children)) {
-            for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
-              validateChildKeys(children[isStaticChildren]);
-            Object.freeze && Object.freeze(children);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else validateChildKeys(children);
-      if (hasOwnProperty2.call(config, "key")) {
-        children = getComponentNameFromType(type);
-        var keys2 = Object.keys(config).filter(function(k) {
-          return "key" !== k;
-        });
-        isStaticChildren = 0 < keys2.length ? "{key: someKey, " + keys2.join(": ..., ") + ": ...}" : "{key: someKey}";
-        didWarnAboutKeySpread[children + isStaticChildren] || (keys2 = 0 < keys2.length ? "{" + keys2.join(": ..., ") + ": ...}" : "{}", console.error(
-          'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
-          isStaticChildren,
-          children,
-          keys2,
-          children
-        ), didWarnAboutKeySpread[children + isStaticChildren] = true);
-      }
-      children = null;
-      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
-      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
-      if ("key" in config) {
-        maybeKey = {};
-        for (var propName in config)
-          "key" !== propName && (maybeKey[propName] = config[propName]);
-      } else maybeKey = config;
-      children && defineKeyPropWarningGetter(
-        maybeKey,
-        "function" === typeof type ? type.displayName || type.name || "Unknown" : type
-      );
-      return ReactElement(
-        type,
-        children,
-        maybeKey,
-        getOwner(),
-        debugStack,
-        debugTask
-      );
-    }
-    function validateChildKeys(node) {
-      isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
-    }
-    function isValidElement(object2) {
-      return "object" === typeof object2 && null !== object2 && object2.$$typeof === REACT_ELEMENT_TYPE2;
-    }
-    var React$1 = React, REACT_ELEMENT_TYPE2 = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty2 = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    React$1 = {
-      react_stack_bottom_frame: function(callStackForError) {
-        return callStackForError();
-      }
-    };
-    var specialPropKeyWarningShown;
-    var didWarnAboutElementRef = {};
-    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
-      React$1,
-      UnknownOwner
-    )();
-    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
-    var didWarnAboutKeySpread = {};
-    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
-    reactJsxRuntime_development.jsx = function(type, config, maybeKey) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(
-        type,
-        config,
-        maybeKey,
-        false,
-        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
-        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-      );
-    };
-    reactJsxRuntime_development.jsxs = function(type, config, maybeKey) {
-      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
-      return jsxDEVImpl(
-        type,
-        config,
-        maybeKey,
-        true,
-        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
-        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
-      );
-    };
-  })();
-  return reactJsxRuntime_development;
-}
-var hasRequiredJsxRuntime;
-function requireJsxRuntime() {
-  if (hasRequiredJsxRuntime) return jsxRuntime.exports;
-  hasRequiredJsxRuntime = 1;
-  if (process.env.NODE_ENV === "production") {
-    jsxRuntime.exports = requireReactJsxRuntime_production();
-  } else {
-    jsxRuntime.exports = requireReactJsxRuntime_development();
-  }
-  return jsxRuntime.exports;
-}
-var jsxRuntimeExports = requireJsxRuntime();
+const useSidebarState = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const openSidebar = () => setIsSidebarOpen(true);
+  const closeSidebar = () => setIsSidebarOpen(false);
+  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
+  return {
+    isSidebarOpen,
+    openSidebar,
+    closeSidebar,
+    toggleSidebar
+  };
+};
 var propTypes = { exports: {} };
 var reactIs$2 = { exports: {} };
 var reactIs_production_min$1 = {};
@@ -18227,7 +17938,7 @@ const useVersionCheck = (options) => {
   }, [options?.interval]);
 };
 const AuthLayout = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
     {
       sx: {
@@ -18379,7 +18090,7 @@ var StatusAvatar = /* @__PURE__ */ ((StatusAvatar2) => {
   return StatusAvatar2;
 })(StatusAvatar || {});
 const ImageWrapper = ({ isWrap = false, children }) => {
-  return isWrap ? /* @__PURE__ */ jsxRuntimeExports.jsx(StackRow, { alignItems: "center", className: "jsdsdj", children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children });
+  return isWrap ? /* @__PURE__ */ jsxRuntime.jsx(StackRow, { alignItems: "center", className: "jsdsdj", children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
 const ImageElement = ({
   url: url2,
@@ -18395,8 +18106,8 @@ const ImageElement = ({
   const [loaded, setLoaded] = React.useState(false);
   if (onClick) sx = { ...sx, cursor: "pointer" };
   const borderRadius2 = sizeType === ImageSizeType.CIRCLE ? "50%" : sizeType === ImageSizeType.SQUARE ? STYLE.BORDER_RADIUS_ELEMENT_SMALL : 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ImageWrapper, { isWrap, children: [
-    !loaded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(ImageWrapper, { isWrap, children: [
+    !loaded && /* @__PURE__ */ jsxRuntime.jsx(
       material.Skeleton,
       {
         variant: "rectangular",
@@ -18406,7 +18117,7 @@ const ImageElement = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
         ...rest,
@@ -18437,7 +18148,7 @@ const LogoComponent = ({
 }) => {
   const navigate = reactRouterDom.useNavigate();
   const toHome = () => navigate(PAGE.DASHBOARD.path);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(material.Box, { onClick: toHome, sx: { cursor: "pointer", height: height2, ...sx }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { onClick: toHome, sx: { cursor: "pointer", height: height2, ...sx }, children: /* @__PURE__ */ jsxRuntime.jsx(
     ImageElement,
     {
       url: url2,
@@ -18473,7 +18184,7 @@ const IconElement = ({
       },
       ...sx
     };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Icon,
     {
       onClick,
@@ -18490,7 +18201,7 @@ const IconElement = ({
     }
   );
 };
-const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(material.Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
+const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
   [`& .${material.tooltipClasses.arrow}`]: {
     color: "white"
   }
@@ -18503,7 +18214,7 @@ const AvatarElement = ({
   ...rest
 }) => {
   if (tooltipContent) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       material.Avatar,
       {
         ...rest,
@@ -18512,13 +18223,13 @@ const AvatarElement = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(material.Avatar, { ...rest, src: url2 || "", sx: { ...MAP_SIZE[size], bgcolor: "primary.main", ...sx, cursor: "pointer" } });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { ...rest, src: url2 || "", sx: { ...MAP_SIZE[size], bgcolor: "primary.main", ...sx, cursor: "pointer" } });
 };
 const TimeAgoComponent = ({
   time: time2,
   hasText
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Typography,
     {
       variant: "caption",
@@ -18528,7 +18239,7 @@ const TimeAgoComponent = ({
   );
 };
 const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE.HEIGHT_IMAGE_DEFAULT }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     system.Stack,
     {
       sx: {
@@ -18538,7 +18249,7 @@ const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE
         alignItems: "flex-start"
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             sx: {
@@ -18547,7 +18258,7 @@ const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE
             children: content
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TimeAgoComponent, { time: time2 })
+        /* @__PURE__ */ jsxRuntime.jsx(TimeAgoComponent, { time: time2 })
       ]
     }
   );
@@ -18558,9 +18269,9 @@ const ImageContentTimeComponent = ({
   time: time2,
   sizeType = "medium"
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRow, { alignItems: "center", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarElement, { url: url2, size: sizeType }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TimeAgoContentComponent, { content, time: time2 })
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { alignItems: "center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url2, size: sizeType }),
+    /* @__PURE__ */ jsxRuntime.jsx(TimeAgoContentComponent, { content, time: time2 })
   ] });
 };
 const TooltipOnClickElement = ({
@@ -18575,7 +18286,7 @@ const TooltipOnClickElement = ({
 }) => {
   return (
     // Chỗ này có thể là bug, onClickAway apply ngay cả khi component chưa được render
-    /* @__PURE__ */ jsxRuntimeExports.jsx(material.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsxRuntime.jsx(
       material.Tooltip,
       {
         PopperProps: { disablePortal: true },
@@ -18588,13 +18299,13 @@ const TooltipOnClickElement = ({
         placement,
         title: content,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children })
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children })
       }
     ) })
   );
 };
 const EmptyComponent = ({}) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(material.Fade, { in: true, timeout: STYLE.ANIMATION_TIME, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: STYLE.ANIMATION_TIME, children: /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
     {
       direction: "column",
@@ -18605,7 +18316,7 @@ const EmptyComponent = ({}) => {
         justifyContent: "center",
         padding: STYLE.PADDING_GAP_ITEM
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(material.Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
     }
   ) });
 };
@@ -18807,7 +18518,7 @@ const CircularProgress = /* @__PURE__ */ React__namespace.forwardRef(function Ci
     circleStyle.strokeDashoffset = `${((100 - value2) / 100 * circumference).toFixed(3)}px`;
     rootStyle.transform = "rotate(-90deg)";
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx(CircularProgressRoot, {
     className: clsx(classes.root, className),
     style: {
       width: size,
@@ -18820,11 +18531,11 @@ const CircularProgress = /* @__PURE__ */ React__namespace.forwardRef(function Ci
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CircularProgressSVG, {
+    children: /* @__PURE__ */ jsxRuntime.jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: [enableTrackSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressTrack, {
+      children: [enableTrackSlot ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressTrack, {
         className: classes.track,
         ownerState,
         cx: SIZE,
@@ -18833,7 +18544,7 @@ const CircularProgress = /* @__PURE__ */ React__namespace.forwardRef(function Ci
         fill: "none",
         strokeWidth: thickness,
         "aria-hidden": "true"
-      }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
+      }) : null, /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState,
@@ -18917,7 +18628,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes = {
   variant: PropTypes.oneOf(["determinate", "indeterminate"])
 } : void 0;
 const LoadingComponent = ({ color: color2, size = "medium", sx = {} }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
     {
       sx: {
@@ -18926,7 +18637,7 @@ const LoadingComponent = ({ color: color2, size = "medium", sx = {} }) => {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: STYLE.FONT_SIZE_LOADING[size], sx: { color: color2 } })
+      children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: STYLE.FONT_SIZE_LOADING[size], sx: { color: color2 } })
     }
   );
 };
@@ -18978,13 +18689,13 @@ const BellComponent = ({}) => {
       showSnackbar({ message: getErrorMessage(error), type: SnackbarType.ERROR });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     TooltipOnClickElement,
     {
       open,
       onClickAway: () => setOpen(false),
       placement: "bottom-end",
-      content: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      content: /* @__PURE__ */ jsxRuntime.jsxs(
         material.List,
         {
           sx: {
@@ -18997,7 +18708,7 @@ const BellComponent = ({}) => {
             width: "300px"
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsxs(
               material.ListItem,
               {
                 sx: {
@@ -19012,9 +18723,9 @@ const BellComponent = ({}) => {
                   zIndex: 1
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", children: "Thông báo" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRow, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: "Thông báo" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       IconElement,
                       {
                         sx: { cursor: "pointer" },
@@ -19032,7 +18743,7 @@ const BellComponent = ({}) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       IconElement,
                       {
                         icon: "settings",
@@ -19045,7 +18756,7 @@ const BellComponent = ({}) => {
                 ]
               }
             ),
-            loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(StackRowAlignCenter, { sx: { height: 50 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingComponent, {}) }) : list.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyComponent, {}) : list.map((notification) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            loading ? /* @__PURE__ */ jsxRuntime.jsx(StackRowAlignCenter, { sx: { height: 50 }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) }) : list.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyComponent, {}) : list.map((notification) => /* @__PURE__ */ jsxRuntime.jsx(
               material.ListItem,
               {
                 onClick: () => clickNotification(notification),
@@ -19063,8 +18774,8 @@ const BellComponent = ({}) => {
                     color: palette.primary.main
                   }
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Stack, { gap: 1, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { gap: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     ImageContentTimeComponent,
                     {
                       url: notification.createdBy?.url || "",
@@ -19072,7 +18783,7 @@ const BellComponent = ({}) => {
                       time: notification.createdAt
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { variant: "caption", sx: { ...getLimitLineCss(2) }, children: notification.content })
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { ...getLimitLineCss(2) }, children: notification.content })
                 ] })
               },
               notification.id
@@ -19080,7 +18791,7 @@ const BellComponent = ({}) => {
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         material.Badge,
         {
           onClick: async () => {
@@ -19090,7 +18801,7 @@ const BellComponent = ({}) => {
           badgeContent: notificationCount,
           color: "error",
           sx: { cursor: "pointer" },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx(
             IconElement,
             {
               icon: "notifications",
@@ -19119,10 +18830,10 @@ const AvatarUserInfo = ({
 }) => {
   const { palette } = material.useTheme();
   const isSystemMonitor = useIsSystemMonitor();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRow, { sx: { alignItems: "center", gap: STYLE.PADDING_GAP_ITEM }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarElement, { url: url2, size: sizeAvatar }),
-    positions.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Stack, { sx: { gap: 0 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { alignItems: "center", gap: STYLE.PADDING_GAP_ITEM }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url2, size: sizeAvatar }),
+    positions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { sx: { gap: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Typography,
         {
           sx: {
@@ -19136,7 +18847,7 @@ const AvatarUserInfo = ({
           children: name2
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Typography,
         {
           variant: "caption",
@@ -19160,7 +18871,7 @@ const AvatarUserInfo = ({
           children: positions.join(" / ")
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { sx: { ...TYPOGRAPHY_STYLES.textSm.semiBold, ...getLimitLineCss(1), ...sxName }, children: name2 })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY_STYLES.textSm.semiBold, ...getLimitLineCss(1), ...sxName }, children: name2 })
   ] });
 };
 const IconContentElement = ({
@@ -19182,15 +18893,15 @@ const IconContentElement = ({
       ...sx,
       cursor: "pointer"
     };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     StackRowAlignCenter,
     {
       onClick,
       sx: { gap: STYLE.GAP_ICON_CONTENT_BY_SIZE[size || "medium"], ...sx },
       id: id2,
       children: [
-        icon && /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon, sx: sxIcon, color: color2, fill }),
-        content && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon, sx: sxIcon, color: color2, fill }),
+        content && /* @__PURE__ */ jsxRuntime.jsx(
           material.Typography,
           {
             color: color2,
@@ -19223,8 +18934,8 @@ const RadioGroupElement = ({
   const change = (event) => {
     onChange && onChange({ target: { name: name2, value: event.target.value || void 0 } });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(material.FormControl, { disabled, sx: { gap: STYLE.PADDING_GAP_ITEM }, onChange: change, children: [
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { disabled, sx: { gap: STYLE.PADDING_GAP_ITEM }, onChange: change, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
       material.InputLabel,
       {
         shrink: true,
@@ -19234,13 +18945,13 @@ const RadioGroupElement = ({
           zIndex: 2,
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StackLabel, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(StackLabel, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
           label
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.RadioGroup,
       {
         name: name2,
@@ -19259,13 +18970,13 @@ const RadioGroupElement = ({
   ] });
 };
 const RadioElement = ({ name: name2, label, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.FormControlLabel,
     {
       name: name2,
       label,
       sx: { alignItems: "center", mr: 0 },
-      control: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      control: /* @__PURE__ */ jsxRuntime.jsx(
         material.Radio,
         {
           ...rest,
@@ -19338,10 +19049,10 @@ const AvatarUserComponent = ({}) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Box, { onClick: handleClick, sx: { cursor: "pointer", display: "flex", alignItems: "center", gap: 1 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarUserInfo, { url: account.user?.url, name: account.user?.name ?? "", positions, isTag: true }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { onClick: handleClick, sx: { cursor: "pointer", display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarUserInfo, { url: account.user?.url, name: account.user?.name ?? "", positions, isTag: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(
         IconElement,
         {
           icon: "arrow_drop_down",
@@ -19357,7 +19068,7 @@ const AvatarUserComponent = ({}) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       material.Menu,
       {
         anchorEl,
@@ -19396,10 +19107,10 @@ const AvatarUserComponent = ({}) => {
         transformOrigin: { horizontal: "right", vertical: "top" },
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Box, { sx: { p: 2 }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignStartJustBetween, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { variant: "subtitle1", sx: { lineHeight: 1 }, children: account.user?.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { p: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignStartJustBetween, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", sx: { lineHeight: 1 }, children: account.user?.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 IconElement,
                 {
                   icon: "settings",
@@ -19407,9 +19118,9 @@ const AvatarUserComponent = ({}) => {
                 }
               )
             ] }),
-            account.user?.userOrgUnitPositions && account.user.userOrgUnitPositions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(IconContentElement, { icon: "admin_panel_settings", content: "Vai trò" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+            account.user?.userOrgUnitPositions && account.user.userOrgUnitPositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconContentElement, { icon: "admin_panel_settings", content: "Vai trò" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 RadioGroupElement,
                 {
                   direction: "column",
@@ -19419,14 +19130,14 @@ const AvatarUserComponent = ({}) => {
                     dispatch(ACTION_ACCOUNT.updatePositionOrgUnit(event.target.value));
                     window.location.reload();
                   },
-                  children: account.user.userOrgUnitPositions.map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  children: account.user.userOrgUnitPositions.map((e) => /* @__PURE__ */ jsxRuntime.jsx(
                     RadioElement,
                     {
                       value: e.id,
                       size: "small",
-                      label: /* @__PURE__ */ jsxRuntimeExports.jsxs(system.Stack, { gap: 0, children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { children: e.orgUnit.name }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { variant: "caption", sx: { ...getLimitLineCss(1), color: "text.disabled" }, children: e.position.name })
+                      label: /* @__PURE__ */ jsxRuntime.jsxs(system.Stack, { gap: 0, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: e.orgUnit.name }),
+                        /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "caption", sx: { ...getLimitLineCss(1), color: "text.disabled" }, children: e.position.name })
                       ] })
                     },
                     e.id
@@ -19435,10 +19146,10 @@ const AvatarUserComponent = ({}) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(material.Divider, {}),
-          menu.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(material.MenuItem, { onClick: item.onClick, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: item.icon, size: "small", sx: { mr: 1 } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { children: item.content })
+          /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+          menu.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: item.onClick, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: item.icon, size: "small", sx: { mr: 1 } }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: item.content })
           ] }, index))
         ]
       }
@@ -19448,7 +19159,7 @@ const AvatarUserComponent = ({}) => {
 const MonitorPart = ({
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     system.Stack,
     {
       sx: {
@@ -19460,18 +19171,18 @@ const MonitorPart = ({
         backgroundPosition: "top",
         backgroundRepeat: "no-repeat"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(system.Stack, { p: { padding: STYLE.PADDING_GAP_LAYOUT }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowJustBetween, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(StackRowAlignCenter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(system.Stack, { p: { padding: STYLE.PADDING_GAP_LAYOUT }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(StackRowJustBetween, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StackRowAlignCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(
             LogoComponent,
             {
               url: "/images/logo/logo-sub-3.svg",
               fillColor: "white"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignCenter, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(BellComponent, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(AvatarUserComponent, {})
+          /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BellComponent, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(AvatarUserComponent, {})
           ] })
         ] }),
         children
@@ -19479,12 +19190,14 @@ const MonitorPart = ({
     }
   );
 };
-const DashboardLayout = ({ children }) => {
+const DashboardLayout = ({
+  children
+}) => {
   useUpdateCurrentAccess();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(MonitorPart, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(MonitorPart, { children });
 };
 const DefaultLayout = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
     {
       sx: {
@@ -19493,7 +19206,7 @@ const DefaultLayout = ({ children }) => {
         width: "100%",
         overflowY: "auto"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         material.Stack,
         {
           sx: {
@@ -21836,13 +21549,13 @@ const ButtonElement = ({
   ...rest
 }) => {
   const { palette } = material.useTheme();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
     {
       ...rest,
       variant,
-      startIcon: !loading && startIcon ? typeof startIcon === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: startIcon, sx: { cursor: "pointer" } }) : startIcon : void 0,
-      endIcon: !loading && endIcon ? typeof endIcon === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: endIcon, sx: { cursor: "pointer" } }) : endIcon : void 0,
+      startIcon: !loading && startIcon ? typeof startIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: startIcon, sx: { cursor: "pointer" } }) : startIcon : void 0,
+      endIcon: !loading && endIcon ? typeof endIcon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: endIcon, sx: { cursor: "pointer" } }) : endIcon : void 0,
       sx: {
         minWidth: 100,
         textTransform: "none",
@@ -21850,14 +21563,14 @@ const ButtonElement = ({
         ...sx
       },
       disabled,
-      children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
         LoadingComponent,
         {
           color: palette.primary.contrastText,
           size: "small",
           sx: { minHeight: "24.5px" }
         }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         material.Typography,
         {
           sx: { ...TYPOGRAPHY_STYLES.textSm.regular, whiteSpace: "nowrap" },
@@ -21875,7 +21588,7 @@ const TextFieldLabelElement = ({
 }) => {
   const { palette } = material.useTheme();
   if (!label) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Typography,
     {
       variant: "subtitle1",
@@ -21886,15 +21599,15 @@ const TextFieldLabelElement = ({
         gap: PADDING_GAP_ITEM_SMALL
       },
       children: [
-        iconLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
+        iconLabel && /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
         label,
-        required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "red" }, children: "*" })
+        required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
       ]
     }
   );
 };
 const IconButtonElement = ({ icon, onClick, sx, size = 16 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.IconButton,
     {
       onClick,
@@ -21910,7 +21623,7 @@ const IconButtonElement = ({ icon, onClick, sx, size = 16 }) => {
         },
         ...sx
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon, sx: { fontSize: size } })
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon, sx: { fontSize: size } })
     }
   );
 };
@@ -21939,8 +21652,8 @@ const TextFieldElement = ({
       onChange({ target: { name: name2, value: event.target.value || null } });
   };
   const { palette, typography } = material.useTheme();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Box, { sx: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       TextFieldLabelElement,
       {
         label,
@@ -21949,7 +21662,7 @@ const TextFieldElement = ({
         required: rest.required
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.TextField,
       {
         error: Boolean(error),
@@ -21960,7 +21673,7 @@ const TextFieldElement = ({
         name: name2,
         InputProps: {
           ...InputProps,
-          endAdornment: showResetButton && value2 && onReset ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonElement, { icon: "close", onClick: onReset }) : InputProps?.endAdornment,
+          endAdornment: showResetButton && value2 && onReset ? /* @__PURE__ */ jsxRuntime.jsx(IconButtonElement, { icon: "close", onClick: onReset }) : InputProps?.endAdornment,
           sx: {
             ...InputProps?.sx
           }
@@ -21972,7 +21685,7 @@ const TextFieldElement = ({
         ...rest
       }
     ),
-    description && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    description && /* @__PURE__ */ jsxRuntime.jsxs(
       material.Typography,
       {
         variant: "body2",
@@ -21988,7 +21701,7 @@ const TextFieldElement = ({
           gap: GAP_ICON_CONTENT_BY_SIZE.small
         },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(material.Box, { sx: { fontWeight: typography.h2.fontWeight }, children: "Ghi chú:" }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { fontWeight: typography.h2.fontWeight }, children: "Ghi chú:" }),
           " ",
           description
         ]
@@ -24125,15 +23838,15 @@ const OtpPart = ({ setAuthProcess }) => {
     const timer = setTimeout(() => setSecond(second - 1), 1e3);
     return () => clearTimeout(timer);
   }, [second]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Stack, { flex: 1, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { flex: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.Typography,
       {
         sx: { textAlign: "center" },
         children: `Mã OTP đã gửi đến ${formik.values.phone}. Mã có giá trị trong vòng ${second}s`
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StackRow, { children: Array.from({ length: lengthOtp }, (_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(StackRow, { children: Array.from({ length: lengthOtp }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       material.Stack,
       {
         component: "input",
@@ -24156,7 +23869,7 @@ const OtpPart = ({ setAuthProcess }) => {
       },
       index
     )) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       IconContentElement,
       {
         icon: "send",
@@ -24222,7 +23935,7 @@ const AuthPage = ({}) => {
     }
   };
   const [showPassword, setShowPassword] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Stack,
     {
       sx: {
@@ -24233,7 +23946,7 @@ const AuthPage = ({}) => {
         width: "100%",
         height: "100%"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         Formik,
         {
           initialValues: {
@@ -24248,7 +23961,7 @@ const AuthPage = ({}) => {
           validateOnChange: false,
           enableReinitialize: true,
           children: (formik) => {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            return /* @__PURE__ */ jsxRuntime.jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               material.Stack,
               {
                 sx: {
@@ -24262,9 +23975,9 @@ const AuthPage = ({}) => {
                 },
                 gap: 3,
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(LogoComponent, { url: "/images/logo/logo-sub-4.svg" }),
-                  authProcess === AuthProcess.LOGIN && /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(LogoComponent, { url: "/images/logo/logo-sub-4.svg" }),
+                  authProcess === AuthProcess.LOGIN && /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       TextFieldElement,
                       {
                         iconLabel: "mail",
@@ -24280,7 +23993,7 @@ const AuthPage = ({}) => {
                         required: true
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       TextFieldElement,
                       {
                         iconLabel: "vpn_key",
@@ -24296,7 +24009,7 @@ const AuthPage = ({}) => {
                           "& fieldset": { borderColor: palette.primary.light }
                         },
                         InputProps: {
-                          endAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
                             IconElement,
                             {
                               icon: showPassword ? "visibility" : "visibility_off",
@@ -24308,7 +24021,7 @@ const AuthPage = ({}) => {
                       }
                     )
                   ] }),
-                  authProcess === AuthProcess.FORGOT_PASSWORD && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  authProcess === AuthProcess.FORGOT_PASSWORD && /* @__PURE__ */ jsxRuntime.jsx(
                     TextFieldElement,
                     {
                       iconLabel: "mail",
@@ -24324,8 +24037,8 @@ const AuthPage = ({}) => {
                       required: true
                     }
                   ),
-                  authProcess === AuthProcess.VERIFY_OTP && /* @__PURE__ */ jsxRuntimeExports.jsx(OtpPart, { setAuthProcess }),
-                  authProcess === AuthProcess.RESET_PASSWORD && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  authProcess === AuthProcess.VERIFY_OTP && /* @__PURE__ */ jsxRuntime.jsx(OtpPart, { setAuthProcess }),
+                  authProcess === AuthProcess.RESET_PASSWORD && /* @__PURE__ */ jsxRuntime.jsx(
                     TextFieldElement,
                     {
                       label: "Mật khẩu",
@@ -24340,7 +24053,7 @@ const AuthPage = ({}) => {
                       },
                       type: showPassword ? "text" : "password",
                       InputProps: {
-                        endAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
                           IconElement,
                           {
                             icon: showPassword ? "visibility" : "visibility_off",
@@ -24350,7 +24063,7 @@ const AuthPage = ({}) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     IconContentElement,
                     {
                       icon: BUTTON_BACK_ICON_CONTENT[authProcess].backIcon,
@@ -24359,7 +24072,7 @@ const AuthPage = ({}) => {
                       onClick: () => authProcess === AuthProcess.LOGIN ? setAuthProcess(AuthProcess.FORGOT_PASSWORD) : setAuthProcess(AuthProcess.LOGIN)
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     ButtonElement,
                     {
                       loading,
@@ -24378,17 +24091,17 @@ const AuthPage = ({}) => {
   );
 };
 const DashboardPage = () => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Outlet, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {});
 };
 const ErrorPage = ({}) => {
   const dispatch = useAppDispatch();
   const navigate = reactRouterDom.useNavigate();
   const account = reactRedux.useSelector((state) => state.account);
   const [loading, setLoading] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignCenter, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "5" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "5" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Stack,
         {
           component: "img",
@@ -24399,7 +24112,7 @@ const ErrorPage = ({}) => {
           loading: "lazy"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Stack,
         {
           component: "img",
@@ -24411,8 +24124,8 @@ const ErrorPage = ({}) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { sx: { width: 450, textAlign: "center", lineHeight: 2 }, children: "TÀI KHOẢN CỦA BẠN KHÔNG ĐỦ QUYỀN TRUY CẬP HOẶC HỆ THỐNG ĐÃ GẶP SỰ CỐ!" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { width: 450, textAlign: "center", lineHeight: 2 }, children: "TÀI KHOẢN CỦA BẠN KHÔNG ĐỦ QUYỀN TRUY CẬP HOẶC HỆ THỐNG ĐÃ GẶP SỰ CỐ!" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
       ButtonElement,
       {
         content: "Đăng nhập lại",
@@ -24438,10 +24151,10 @@ const ErrorPage = ({}) => {
 };
 const NotFoundPage = ({}) => {
   const navigate = reactRouterDom.useNavigate();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignCenter, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Stack,
         {
           component: "img",
@@ -24452,10 +24165,10 @@ const NotFoundPage = ({}) => {
           loading: "lazy"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" })
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(material.Typography, { sx: { width: 450, textAlign: "center", lineHeight: 2 }, children: "XIN LỖI, TRANG BẠN TÌM KIẾM KHÔNG TỒN TẠI!" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { width: 450, textAlign: "center", lineHeight: 2 }, children: "XIN LỖI, TRANG BẠN TÌM KIẾM KHÔNG TỒN TẠI!" }),
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
 const LayoutGroupContext = React.createContext({});
@@ -27955,7 +27668,7 @@ function createMotionComponent(Component2, { forwardMotionProps = false } = {},
       MeasureLayout2 = layoutProjection.MeasureLayout;
       context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
     }
-    return jsxRuntimeExports.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsxRuntimeExports.jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] });
+    return jsxRuntime.jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsxRuntime.jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] });
   }
   MotionDOMComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${Component2.displayName ?? Component2.name ?? ""})`}`;
   const ForwardRefMotionComponent = React.forwardRef(MotionDOMComponent);
@@ -30074,7 +29787,7 @@ class MeasureLayoutWithContext extends React.Component {
 function MeasureLayout(props) {
   const [isPresent, safeToRemove] = usePresence();
   const layoutGroup = React.useContext(LayoutGroupContext);
-  return jsxRuntimeExports.jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
+  return jsxRuntime.jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
 }
 const defaultScaleCorrectors = {
   borderRadius: {
@@ -31731,9 +31444,9 @@ const MotionBox = ({
       transition: { duration: 0.2 }
     }
   } : {};
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
 };
-const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: "20",
@@ -31742,7 +31455,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         d: "M12 1L19 8M19 8L12 15M19 8L1 8",
@@ -31754,7 +31467,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     )
   }
 );
-const IconLeft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const IconLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
     width: "20",
@@ -31763,7 +31476,7 @@ const IconLeft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         d: "M8 15L1 8M1 8L8 1M1 8L19 8",
@@ -31801,8 +31514,8 @@ const AppGrid = ({
   const start = page * pageSize;
   const end = start + pageSize;
   const visibleApps = totalPages > 1 ? apps.slice(start, end) : apps;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
         sx: {
@@ -31812,7 +31525,7 @@ const AppGrid = ({
         },
         children: visibleApps.map((app2, index) => {
           const isSelected = selectedAppId === app2.key;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          return /* @__PURE__ */ jsxRuntime.jsxs(
             MotionBox,
             {
               preset: "staggerItem",
@@ -31827,7 +31540,7 @@ const AppGrid = ({
                 flexDirection: "column"
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   material.Box,
                   {
                     sx: {
@@ -31841,7 +31554,7 @@ const AppGrid = ({
                       background: getAppColor(app2.category),
                       boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
                     },
-                    children: app2.icon.startsWith("/") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    children: app2.icon.startsWith("/") && /* @__PURE__ */ jsxRuntime.jsx(
                       ImageElement,
                       {
                         sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
@@ -31851,7 +31564,7 @@ const AppGrid = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   material.Typography,
                   {
                     variant: titleVariant,
@@ -31859,7 +31572,7 @@ const AppGrid = ({
                     children: app2.title
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   material.Typography,
                   {
                     variant: captionVariant,
@@ -31874,8 +31587,8 @@ const AppGrid = ({
         })
       }
     ),
-    showPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      page === totalPages - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    showPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      page === totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
         material.IconButton,
         {
           size: "small",
@@ -31888,10 +31601,10 @@ const AppGrid = ({
             transform: "translateY(-120%)",
             color: theme.palette.divider
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconLeft, {})
         }
       ),
-      page !== totalPages - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      page !== totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
         material.IconButton,
         {
           size: "small",
@@ -31904,10 +31617,10 @@ const AppGrid = ({
             transform: "translateY(-120%)",
             color: theme.palette.divider
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconRight, {})
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         material.Box,
         {
           sx: {
@@ -31916,7 +31629,7 @@ const AppGrid = ({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx(
             material.Box,
             {
               sx: {
@@ -31928,7 +31641,7 @@ const AppGrid = ({
                 borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
                 backgroundColor: "rgba(255,255,255,0.15)"
               },
-              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
                 material.Box,
                 {
                   onClick: () => setPage(i),
@@ -31957,7 +31670,7 @@ const SystemMonitorScreen = () => {
   const [tab, setTab] = React.useState(AppCategory.ALL);
   const listApp = useApps(tab);
   const currentApp = useActiveSidebar();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     MotionBox,
     {
       preset: "fadeInUp",
@@ -31968,7 +31681,7 @@ const SystemMonitorScreen = () => {
         position: "relative",
         top: 150
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
         material.Box,
         {
           sx: {
@@ -31979,7 +31692,7 @@ const SystemMonitorScreen = () => {
             justifyContent: "flex-start"
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(
               material.Box,
               {
                 sx: {
@@ -31993,13 +31706,13 @@ const SystemMonitorScreen = () => {
                   { key: AppCategory.HRM, label: "HRM" },
                   { key: AppCategory.WORKFLOW, label: "Workflow Engine" },
                   { key: AppCategory.PLATFORM_INFO, label: "Platform & Info" }
-                ].map((t) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                ].map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
                   MotionBox,
                   {
                     sx: { position: "relative" },
                     preset: "tabUnderline",
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx(
                         material.Typography,
                         {
                           onClick: () => setTab(t.key),
@@ -32010,7 +31723,7 @@ const SystemMonitorScreen = () => {
                           children: t.label
                         }
                       ),
-                      tab === t.key && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      tab === t.key && /* @__PURE__ */ jsxRuntime.jsx(
                         MotionBox,
                         {
                           preset: "tabUnderline",
@@ -32022,7 +31735,7 @@ const SystemMonitorScreen = () => {
                             backgroundColor: theme.palette.common.white,
                             transformOrigin: "left"
                           },
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
+                          children: /* @__PURE__ */ jsxRuntime.jsx("div", {})
                         }
                       )
                     ]
@@ -32031,7 +31744,7 @@ const SystemMonitorScreen = () => {
                 ))
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsxRuntime.jsx(
               AppGrid,
               {
                 apps: listApp,
@@ -32057,17 +31770,17 @@ const renderRoutes = (routes2, account) => routes2.map((route) => {
   const { path, layout: layout2, element, type, allowUserTypes = [], children } = route;
   const Layout = layout2 || React.Fragment;
   let Element2 = element;
-  if (path === PAGE.AUTH.path && account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Navigate, { to: PAGE.DASHBOARD.path });
+  if (path === PAGE.AUTH.path && account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: PAGE.DASHBOARD.path });
   if (type === RouteType.PROTECTED) {
-    if (!account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Navigate, { to: PAGE.AUTH.path });
+    if (!account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: PAGE.AUTH.path });
     else if (allowUserTypes.length && !allowUserTypes.includes(account.user.type) && account.user.type !== UserType.ROOT)
-      Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(reactRouterDom.Navigate, { to: PAGE.ERROR.path });
+      Element2 = () => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: PAGE.ERROR.path });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactRouterDom.Route,
     {
       path,
-      element: /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Element2, {}) }),
+      element: /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx(Element2, {}) }),
       children: children && renderRoutes(children, account)
     },
     path
@@ -32087,6 +31800,217 @@ const routes = [
     ]
   }
 ];
+const SidebarContext = React.createContext(
+  void 0
+);
+const useSidebar = () => {
+  const context = React.useContext(SidebarContext);
+  if (context === void 0) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+const AppsSidebar = ({
+  isOpen,
+  onClose
+}) => {
+  const theme = useTheme();
+  const navigate = reactRouterDom.useNavigate();
+  const allApps = useApps();
+  const dispatch = useAppDispatch();
+  const currentApp = useActiveSidebar();
+  const { setActiveExpandMenu } = useSidebar();
+  const { palette } = useTheme();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        onClick: onClose,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: palette.action.selected,
+          zIndex: 100
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      MotionBox,
+      {
+        preset: "fadeInLeft",
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          height: "100vh",
+          backgroundColor: theme.palette.common.white,
+          zIndex: 100,
+          padding: PADDING_GAP_LAYOUT,
+          gap: PADDING_GAP_ITEM,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    onClick: onClose,
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      IconElement,
+                      {
+                        icon: "home",
+                        onClick: () => {
+                          onClose();
+                          navigate(PAGE.DASHBOARD.path);
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Workflow Engine" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.WORKFLOW
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "HRM" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter((app2) => app2.category === AppCategory.HRM),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Platform Info" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.PLATFORM_INFO
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 const TypographyContentCaption = ({
   content,
   caption,
@@ -32094,8 +32018,8 @@ const TypographyContentCaption = ({
   sxContent,
   sxCaption
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(material.Stack, { gap: 0, sx: { ...sx }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { gap: 0, sx: { ...sx }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       material.Typography,
       {
         sx: {
@@ -32105,7 +32029,7 @@ const TypographyContentCaption = ({
         children: content || "#"
       }
     ),
-    caption && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    caption && /* @__PURE__ */ jsxRuntime.jsx(
       material.Typography,
       {
         sx: {
@@ -32133,6 +32057,7 @@ exports.ANIMATION_TIME = ANIMATION_TIME;
 exports.AppCategory = AppCategory;
 exports.AppGrid = AppGrid;
 exports.AppType = AppType;
+exports.AppsSidebar = AppsSidebar;
 exports.AuthLayout = AuthLayout;
 exports.AuthPage = AuthPage;
 exports.AuthProcess = AuthProcess;
@@ -32336,7 +32261,11 @@ exports.updateAccount = updateAccount$1;
 exports.updateNotification = updateNotification;
 exports.updateNotificationSetting = updateNotificationSetting;
 exports.updateUser = updateUser;
+exports.useActiveSidebar = useActiveSidebar;
+exports.useAllApps = useAllApps;
 exports.useApps = useApps;
+exports.useIsSystemMonitor = useIsSystemMonitor;
+exports.useSidebarState = useSidebarState;
 exports.useSnackbar = useSnackbar;
 exports.useTagSelector = useTagSelector;
 exports.useUpdateCurrentAccess = useUpdateCurrentAccess;