sevago-sso-fe 1.0.8 → 1.0.10

package/dist/index.esm.js

@@ -2,8 +2,9 @@ import { persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, pers
 import { createAsyncThunk, createSlice, configureStore, combineReducers } from "@reduxjs/toolkit";
 import { useDispatch, useSelector } from "react-redux";
 import * as React from "react";
-import React__default, { useMemo, createContext, useContext, useState, useEffect, useCallback, forwardRef, useImperativeHandle, createElement, Children, useRef, useLayoutEffect, Fragment, useId, useInsertionEffect, Component as Component$1 } from "react";
+import React__default, { useMemo, useState, createContext, useContext, useEffect, useCallback, forwardRef, useImperativeHandle, createElement, Children, useRef, useLayoutEffect, Fragment as Fragment$1, useId, useInsertionEffect, Component as Component$1 } from "react";
 import { useLocation, useNavigate, Outlet, Route, Navigate } from "react-router-dom";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Stack as Stack$1, styled as styled$2, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$2, Skeleton, Box, Icon, Tooltip, tooltipClasses, Avatar, Typography, ClickAwayListener, Fade, Badge, List, ListItem, FormControl, InputLabel, RadioGroup, FormControlLabel, Radio, Menu, Divider, MenuItem, Button, IconButton, TextField, InputAdornment } from "@mui/material";
 import { unstable_createGetCssVar, createSpacing as createSpacing$1, useTheme as useTheme$1, unstable_memoTheme, Stack as Stack$2, css, keyframes as keyframes$1 } from "@mui/system";
 import emStyled from "@emotion/styled";
@@ -12787,8 +12788,10 @@ const truncateText = (text, maxLength = 27) => {
   return `${text.substring(0, maxLength)}...`;
 };
 const timeUtils = timeUtilsMethods;
-const useApps = (tab) => {
-  const userType = useSelector((state) => state.account.user?.type);
+const useApps = (tab = AppCategory.ALL) => {
+  const userType = useSelector(
+    (state) => state.account.user?.type
+  );
   const listApp = useMemo(() => {
     let filteredApps = SYSTEM_MODULES.filter((app2) => {
       return app2.allowUserTypes.includes(userType);
@@ -12805,8 +12808,21 @@ const useIsSystemMonitor = () => {
   const normalize = (p) => p.replace(/\/+$/, "");
   return normalize(location2.pathname) === normalize(PAGE.DASHBOARD.path);
 };
+const useAllApps = () => {
+  const userType = useSelector(
+    (state) => state.account.user?.type
+  );
+  const allApps = useMemo(() => {
+    return SYSTEM_MODULES.filter((app2) => {
+      return app2.allowUserTypes.includes(userType);
+    });
+  }, [userType]);
+  return allApps;
+};
 const useActiveSidebar = () => {
-  const { user, current_access } = useSelector((state) => state.account);
+  const { user, current_access } = useSelector(
+    (state) => state.account
+  );
   const activeSidebar = useMemo(() => {
     return SYSTEM_MODULES.find(
       (it) => it.key === current_access && user && (it.allowUserTypes ? it.allowUserTypes.includes(user?.type) : true)
@@ -12814,323 +12830,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 React2 = React__default, 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 = React2.__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;
-    };
-    React2 = {
-      react_stack_bottom_frame: function(callStackForError) {
-        return callStackForError();
-      }
-    };
-    var specialPropKeyWarningShown;
-    var didWarnAboutElementRef = {};
-    var unknownOwnerDebugStack = React2.react_stack_bottom_frame.bind(
-      React2,
-      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] = 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 = {};
@@ -18209,7 +17920,7 @@ const useVersionCheck = (options) => {
   }, [options?.interval]);
 };
 const AuthLayout = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Stack$1,
     {
       sx: {
@@ -18361,7 +18072,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__ */ jsx(StackRow, { alignItems: "center", className: "jsdsdj", children }) : /* @__PURE__ */ jsx(Fragment, { children });
 };
 const ImageElement = ({
   url: url2,
@@ -18377,8 +18088,8 @@ const ImageElement = ({
   const [loaded, setLoaded] = 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__ */ jsxs(ImageWrapper, { isWrap, children: [
+    !loaded && /* @__PURE__ */ jsx(
       Skeleton,
       {
         variant: "rectangular",
@@ -18388,7 +18099,7 @@ const ImageElement = ({
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(
       Box,
       {
         ...rest,
@@ -18419,7 +18130,7 @@ const LogoComponent = ({
 }) => {
   const navigate = useNavigate();
   const toHome = () => navigate(PAGE.DASHBOARD.path);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { onClick: toHome, sx: { cursor: "pointer", height: height2, ...sx }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(Box, { onClick: toHome, sx: { cursor: "pointer", height: height2, ...sx }, children: /* @__PURE__ */ jsx(
     ImageElement,
     {
       url: url2,
@@ -18455,7 +18166,7 @@ const IconElement = ({
       },
       ...sx
     };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Icon,
     {
       onClick,
@@ -18472,7 +18183,7 @@ const IconElement = ({
     }
   );
 };
-const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
+const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
   [`& .${tooltipClasses.arrow}`]: {
     color: "white"
   }
@@ -18485,7 +18196,7 @@ const AvatarElement = ({
   ...rest
 }) => {
   if (tooltipContent) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsx(
       Avatar,
       {
         ...rest,
@@ -18494,13 +18205,13 @@ const AvatarElement = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { ...rest, src: url2 || "", sx: { ...MAP_SIZE[size], bgcolor: "primary.main", ...sx, cursor: "pointer" } });
+  return /* @__PURE__ */ jsx(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__ */ jsx(
     Typography,
     {
       variant: "caption",
@@ -18510,7 +18221,7 @@ const TimeAgoComponent = ({
   );
 };
 const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE.HEIGHT_IMAGE_DEFAULT }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxs(
     Stack$2,
     {
       sx: {
@@ -18520,7 +18231,7 @@ const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE
         alignItems: "flex-start"
       },
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsx(
           Typography,
           {
             sx: {
@@ -18529,7 +18240,7 @@ const TimeAgoContentComponent = ({ time: time2, content, height: height2 = STYLE
             children: content
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TimeAgoComponent, { time: time2 })
+        /* @__PURE__ */ jsx(TimeAgoComponent, { time: time2 })
       ]
     }
   );
@@ -18540,9 +18251,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__ */ jsxs(StackRow, { alignItems: "center", children: [
+    /* @__PURE__ */ jsx(AvatarElement, { url: url2, size: sizeType }),
+    /* @__PURE__ */ jsx(TimeAgoContentComponent, { content, time: time2 })
   ] });
 };
 const TooltipOnClickElement = ({
@@ -18557,7 +18268,7 @@ const TooltipOnClickElement = ({
 }) => {
   return (
     // Chỗ này có thể là bug, onClickAway apply ngay cả khi component chưa được render
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
       Tooltip,
       {
         PopperProps: { disablePortal: true },
@@ -18570,13 +18281,13 @@ const TooltipOnClickElement = ({
         placement,
         title: content,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children })
+        children: /* @__PURE__ */ jsx("span", { children })
       }
     ) })
   );
 };
 const EmptyComponent = ({}) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Fade, { in: true, timeout: STYLE.ANIMATION_TIME, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(Fade, { in: true, timeout: STYLE.ANIMATION_TIME, children: /* @__PURE__ */ jsx(
     Stack$1,
     {
       direction: "column",
@@ -18587,7 +18298,7 @@ const EmptyComponent = ({}) => {
         justifyContent: "center",
         padding: STYLE.PADDING_GAP_ITEM
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
+      children: /* @__PURE__ */ jsx(Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
     }
   ) });
 };
@@ -18789,7 +18500,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     circleStyle.strokeDashoffset = `${((100 - value2) / 100 * circumference).toFixed(3)}px`;
     rootStyle.transform = "rotate(-90deg)";
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
+  return /* @__PURE__ */ jsx(CircularProgressRoot, {
     className: clsx(classes.root, className),
     style: {
       width: size,
@@ -18802,11 +18513,11 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
     role: "progressbar",
     ...rootProps,
     ...other,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CircularProgressSVG, {
+    children: /* @__PURE__ */ jsxs(CircularProgressSVG, {
       className: classes.svg,
       ownerState,
       viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: [enableTrackSlot ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressTrack, {
+      children: [enableTrackSlot ? /* @__PURE__ */ jsx(CircularProgressTrack, {
         className: classes.track,
         ownerState,
         cx: SIZE,
@@ -18815,7 +18526,7 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
         fill: "none",
         strokeWidth: thickness,
         "aria-hidden": "true"
-      }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
+      }) : null, /* @__PURE__ */ jsx(CircularProgressCircle, {
         className: classes.circle,
         style: circleStyle,
         ownerState,
@@ -18899,7 +18610,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__ */ jsx(
     Stack$1,
     {
       sx: {
@@ -18908,7 +18619,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__ */ jsx(CircularProgress, { size: STYLE.FONT_SIZE_LOADING[size], sx: { color: color2 } })
     }
   );
 };
@@ -18960,13 +18671,13 @@ const BellComponent = ({}) => {
       showSnackbar({ message: getErrorMessage(error), type: SnackbarType.ERROR });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     TooltipOnClickElement,
     {
       open,
       onClickAway: () => setOpen(false),
       placement: "bottom-end",
-      content: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      content: /* @__PURE__ */ jsxs(
         List,
         {
           sx: {
@@ -18979,7 +18690,7 @@ const BellComponent = ({}) => {
             width: "300px"
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxs(
               ListItem,
               {
                 sx: {
@@ -18994,9 +18705,9 @@ const BellComponent = ({}) => {
                   zIndex: 1
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", children: "Thông báo" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRow, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Thông báo" }),
+                  /* @__PURE__ */ jsxs(StackRow, { children: [
+                    /* @__PURE__ */ jsx(
                       IconElement,
                       {
                         sx: { cursor: "pointer" },
@@ -19014,7 +18725,7 @@ const BellComponent = ({}) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsx(
                       IconElement,
                       {
                         icon: "settings",
@@ -19027,7 +18738,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__ */ jsx(StackRowAlignCenter, { sx: { height: 50 }, children: /* @__PURE__ */ jsx(LoadingComponent, {}) }) : list.length === 0 ? /* @__PURE__ */ jsx(EmptyComponent, {}) : list.map((notification) => /* @__PURE__ */ jsx(
               ListItem,
               {
                 onClick: () => clickNotification(notification),
@@ -19045,8 +18756,8 @@ const BellComponent = ({}) => {
                     color: palette.primary.main
                   }
                 },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$1, { gap: 1, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                children: /* @__PURE__ */ jsxs(Stack$1, { gap: 1, children: [
+                  /* @__PURE__ */ jsx(
                     ImageContentTimeComponent,
                     {
                       url: notification.createdBy?.url || "",
@@ -19054,7 +18765,7 @@ const BellComponent = ({}) => {
                       time: notification.createdAt
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", sx: { ...getLimitLineCss(2) }, children: notification.content })
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ...getLimitLineCss(2) }, children: notification.content })
                 ] })
               },
               notification.id
@@ -19062,7 +18773,7 @@ const BellComponent = ({}) => {
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsx(
         Badge,
         {
           onClick: async () => {
@@ -19072,7 +18783,7 @@ const BellComponent = ({}) => {
           badgeContent: notificationCount,
           color: "error",
           sx: { cursor: "pointer" },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          children: /* @__PURE__ */ jsx(
             IconElement,
             {
               icon: "notifications",
@@ -19101,10 +18812,10 @@ const AvatarUserInfo = ({
 }) => {
   const { palette } = useTheme$2();
   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(Stack$1, { sx: { gap: 0 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(StackRow, { sx: { alignItems: "center", gap: STYLE.PADDING_GAP_ITEM }, children: [
+    /* @__PURE__ */ jsx(AvatarElement, { url: url2, size: sizeAvatar }),
+    positions.length > 0 ? /* @__PURE__ */ jsxs(Stack$1, { sx: { gap: 0 }, children: [
+      /* @__PURE__ */ jsx(
         Typography,
         {
           sx: {
@@ -19118,7 +18829,7 @@ const AvatarUserInfo = ({
           children: name2
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "caption",
@@ -19142,7 +18853,7 @@ const AvatarUserInfo = ({
           children: positions.join(" / ")
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { sx: { ...TYPOGRAPHY_STYLES.textSm.semiBold, ...getLimitLineCss(1), ...sxName }, children: name2 })
+    ] }) : /* @__PURE__ */ jsx(Typography, { sx: { ...TYPOGRAPHY_STYLES.textSm.semiBold, ...getLimitLineCss(1), ...sxName }, children: name2 })
   ] });
 };
 const IconContentElement = ({
@@ -19164,15 +18875,15 @@ const IconContentElement = ({
       ...sx,
       cursor: "pointer"
     };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ 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__ */ jsx(IconElement, { icon, sx: sxIcon, color: color2, fill }),
+        content && /* @__PURE__ */ jsx(
           Typography,
           {
             color: color2,
@@ -19205,8 +18916,8 @@ const RadioGroupElement = ({
   const change = (event) => {
     onChange && onChange({ target: { name: name2, value: event.target.value || void 0 } });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl, { disabled, sx: { gap: STYLE.PADDING_GAP_ITEM }, onChange: change, children: [
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(FormControl, { disabled, sx: { gap: STYLE.PADDING_GAP_ITEM }, onChange: change, children: [
+    label && /* @__PURE__ */ jsx(
       InputLabel,
       {
         shrink: true,
@@ -19216,13 +18927,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__ */ jsxs(StackLabel, { children: [
+          /* @__PURE__ */ jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
           label
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(
       RadioGroup,
       {
         name: name2,
@@ -19241,13 +18952,13 @@ const RadioGroupElement = ({
   ] });
 };
 const RadioElement = ({ name: name2, label, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     FormControlLabel,
     {
       name: name2,
       label,
       sx: { alignItems: "center", mr: 0 },
-      control: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      control: /* @__PURE__ */ jsx(
         Radio,
         {
           ...rest,
@@ -19320,10 +19031,10 @@ const AvatarUserComponent = ({}) => {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { onClick: handleClick, sx: { cursor: "pointer", display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(AvatarUserInfo, { url: account.user?.url, name: account.user?.name ?? "", positions, isTag: true }),
+      /* @__PURE__ */ jsx(
         IconElement,
         {
           icon: "arrow_drop_down",
@@ -19339,7 +19050,7 @@ const AvatarUserComponent = ({}) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxs(
       Menu,
       {
         anchorEl,
@@ -19378,10 +19089,10 @@ const AvatarUserComponent = ({}) => {
         transformOrigin: { horizontal: "right", vertical: "top" },
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { p: 2 }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignStartJustBetween, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle1", sx: { lineHeight: 1 }, children: account.user?.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+            /* @__PURE__ */ jsxs(StackRowAlignStartJustBetween, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { lineHeight: 1 }, children: account.user?.name }),
+              /* @__PURE__ */ jsx(
                 IconElement,
                 {
                   icon: "settings",
@@ -19389,9 +19100,9 @@ const AvatarUserComponent = ({}) => {
                 }
               )
             ] }),
-            account.user?.userOrgUnitPositions && account.user.userOrgUnitPositions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.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__ */ jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsx(IconContentElement, { icon: "admin_panel_settings", content: "Vai trò" }),
+              /* @__PURE__ */ jsx(
                 RadioGroupElement,
                 {
                   direction: "column",
@@ -19401,14 +19112,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__ */ jsx(
                     RadioElement,
                     {
                       value: e.id,
                       size: "small",
-                      label: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$2, { gap: 0, children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: e.orgUnit.name }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", sx: { ...getLimitLineCss(1), color: "text.disabled" }, children: e.position.name })
+                      label: /* @__PURE__ */ jsxs(Stack$2, { gap: 0, children: [
+                        /* @__PURE__ */ jsx(Typography, { children: e.orgUnit.name }),
+                        /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ...getLimitLineCss(1), color: "text.disabled" }, children: e.position.name })
                       ] })
                     },
                     e.id
@@ -19417,10 +19128,10 @@ const AvatarUserComponent = ({}) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
-          menu.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuItem, { onClick: item.onClick, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon: item.icon, size: "small", sx: { mr: 1 } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { children: item.content })
+          /* @__PURE__ */ jsx(Divider, {}),
+          menu.map((item, index) => /* @__PURE__ */ jsxs(MenuItem, { onClick: item.onClick, children: [
+            /* @__PURE__ */ jsx(IconElement, { icon: item.icon, size: "small", sx: { mr: 1 } }),
+            /* @__PURE__ */ jsx(Typography, { children: item.content })
           ] }, index))
         ]
       }
@@ -19430,7 +19141,7 @@ const AvatarUserComponent = ({}) => {
 const MonitorPart = ({
   children
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Stack$2,
     {
       sx: {
@@ -19442,18 +19153,18 @@ const MonitorPart = ({
         backgroundPosition: "top",
         backgroundRepeat: "no-repeat"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$2, { p: { padding: STYLE.PADDING_GAP_LAYOUT }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowJustBetween, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(StackRowAlignCenter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxs(Stack$2, { p: { padding: STYLE.PADDING_GAP_LAYOUT }, children: [
+        /* @__PURE__ */ jsxs(StackRowJustBetween, { children: [
+          /* @__PURE__ */ jsx(StackRowAlignCenter, { children: /* @__PURE__ */ 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__ */ jsxs(StackRowAlignCenter, { children: [
+            /* @__PURE__ */ jsx(BellComponent, {}),
+            /* @__PURE__ */ jsx(AvatarUserComponent, {})
           ] })
         ] }),
         children
@@ -19461,12 +19172,14 @@ const MonitorPart = ({
     }
   );
 };
-const DashboardLayout = ({ children }) => {
+const DashboardLayout = ({
+  children
+}) => {
   useUpdateCurrentAccess();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(MonitorPart, { children });
+  return /* @__PURE__ */ jsx(MonitorPart, { children });
 };
 const DefaultLayout = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Stack$1,
     {
       sx: {
@@ -19475,7 +19188,7 @@ const DefaultLayout = ({ children }) => {
         width: "100%",
         overflowY: "auto"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsx(
         Stack$1,
         {
           sx: {
@@ -21818,13 +21531,13 @@ const ButtonElement = ({
   ...rest
 }) => {
   const { palette } = useTheme$2();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     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__ */ jsx(IconElement, { icon: startIcon, sx: { cursor: "pointer" } }) : startIcon : void 0,
+      endIcon: !loading && endIcon ? typeof endIcon === "string" ? /* @__PURE__ */ jsx(IconElement, { icon: endIcon, sx: { cursor: "pointer" } }) : endIcon : void 0,
       sx: {
         minWidth: 100,
         textTransform: "none",
@@ -21832,14 +21545,14 @@ const ButtonElement = ({
         ...sx
       },
       disabled,
-      children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: loading ? /* @__PURE__ */ jsx(
         LoadingComponent,
         {
           color: palette.primary.contrastText,
           size: "small",
           sx: { minHeight: "24.5px" }
         }
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ) : /* @__PURE__ */ jsx(
         Typography,
         {
           sx: { ...TYPOGRAPHY_STYLES.textSm.regular, whiteSpace: "nowrap" },
@@ -21857,7 +21570,7 @@ const TextFieldLabelElement = ({
 }) => {
   const { palette } = useTheme$2();
   if (!label) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxs(
     Typography,
     {
       variant: "subtitle1",
@@ -21868,15 +21581,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__ */ jsx(IconElement, { icon: iconLabel, sx: { fontSize: STYLE.TEXT_FIELD.FONT_SIZE_LABEL } }),
         label,
-        required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "red" }, children: "*" })
+        required && /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
       ]
     }
   );
 };
 const IconButtonElement = ({ icon, onClick, sx, size = 16 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     IconButton,
     {
       onClick,
@@ -21892,7 +21605,7 @@ const IconButtonElement = ({ icon, onClick, sx, size = 16 }) => {
         },
         ...sx
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconElement, { icon, sx: { fontSize: size } })
+      children: /* @__PURE__ */ jsx(IconElement, { icon, sx: { fontSize: size } })
     }
   );
 };
@@ -21921,8 +21634,8 @@ const TextFieldElement = ({
       onChange({ target: { name: name2, value: event.target.value || null } });
   };
   const { palette, typography } = useTheme$2();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsx(
       TextFieldLabelElement,
       {
         label,
@@ -21931,7 +21644,7 @@ const TextFieldElement = ({
         required: rest.required
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(
       TextField,
       {
         error: Boolean(error),
@@ -21942,7 +21655,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__ */ jsx(IconButtonElement, { icon: "close", onClick: onReset }) : InputProps?.endAdornment,
           sx: {
             ...InputProps?.sx
           }
@@ -21954,7 +21667,7 @@ const TextFieldElement = ({
         ...rest
       }
     ),
-    description && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    description && /* @__PURE__ */ jsxs(
       Typography,
       {
         variant: "body2",
@@ -21970,7 +21683,7 @@ const TextFieldElement = ({
           gap: GAP_ICON_CONTENT_BY_SIZE.small
         },
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { fontWeight: typography.h2.fontWeight }, children: "Ghi chú:" }),
+          /* @__PURE__ */ jsx(Box, { sx: { fontWeight: typography.h2.fontWeight }, children: "Ghi chú:" }),
           " ",
           description
         ]
@@ -24107,15 +23820,15 @@ const OtpPart = ({ setAuthProcess }) => {
     const timer = setTimeout(() => setSecond(second - 1), 1e3);
     return () => clearTimeout(timer);
   }, [second]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$1, { flex: 1, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Stack$1, { flex: 1, children: [
+    /* @__PURE__ */ jsx(
       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__ */ jsx(StackRow, { children: Array.from({ length: lengthOtp }, (_, index) => /* @__PURE__ */ jsx(
       Stack$1,
       {
         component: "input",
@@ -24138,7 +23851,7 @@ const OtpPart = ({ setAuthProcess }) => {
       },
       index
     )) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsx(
       IconContentElement,
       {
         icon: "send",
@@ -24204,7 +23917,7 @@ const AuthPage = ({}) => {
     }
   };
   const [showPassword, setShowPassword] = useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Stack$1,
     {
       sx: {
@@ -24215,7 +23928,7 @@ const AuthPage = ({}) => {
         width: "100%",
         height: "100%"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsx(
         Formik,
         {
           initialValues: {
@@ -24230,7 +23943,7 @@ const AuthPage = ({}) => {
           validateOnChange: false,
           enableReinitialize: true,
           children: (formik) => {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            return /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(
               Stack$1,
               {
                 sx: {
@@ -24244,9 +23957,9 @@ const AuthPage = ({}) => {
                 },
                 gap: 3,
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(LogoComponent, { url: "/images/logo/logo-sub-4.svg" }),
-                  authProcess === AuthProcess.LOGIN && /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsx(LogoComponent, { url: "/images/logo/logo-sub-4.svg" }),
+                  authProcess === AuthProcess.LOGIN && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    /* @__PURE__ */ jsx(
                       TextFieldElement,
                       {
                         iconLabel: "mail",
@@ -24262,7 +23975,7 @@ const AuthPage = ({}) => {
                         required: true
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    /* @__PURE__ */ jsx(
                       TextFieldElement,
                       {
                         iconLabel: "vpn_key",
@@ -24278,7 +23991,7 @@ const AuthPage = ({}) => {
                           "& fieldset": { borderColor: palette.primary.light }
                         },
                         InputProps: {
-                          endAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
                             IconElement,
                             {
                               icon: showPassword ? "visibility" : "visibility_off",
@@ -24290,7 +24003,7 @@ const AuthPage = ({}) => {
                       }
                     )
                   ] }),
-                  authProcess === AuthProcess.FORGOT_PASSWORD && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  authProcess === AuthProcess.FORGOT_PASSWORD && /* @__PURE__ */ jsx(
                     TextFieldElement,
                     {
                       iconLabel: "mail",
@@ -24306,8 +24019,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__ */ jsx(OtpPart, { setAuthProcess }),
+                  authProcess === AuthProcess.RESET_PASSWORD && /* @__PURE__ */ jsx(
                     TextFieldElement,
                     {
                       label: "Mật khẩu",
@@ -24322,7 +24035,7 @@ const AuthPage = ({}) => {
                       },
                       type: showPassword ? "text" : "password",
                       InputProps: {
-                        endAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
                           IconElement,
                           {
                             icon: showPassword ? "visibility" : "visibility_off",
@@ -24332,7 +24045,7 @@ const AuthPage = ({}) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsx(
                     IconContentElement,
                     {
                       icon: BUTTON_BACK_ICON_CONTENT[authProcess].backIcon,
@@ -24341,7 +24054,7 @@ const AuthPage = ({}) => {
                       onClick: () => authProcess === AuthProcess.LOGIN ? setAuthProcess(AuthProcess.FORGOT_PASSWORD) : setAuthProcess(AuthProcess.LOGIN)
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  /* @__PURE__ */ jsx(
                     ButtonElement,
                     {
                       loading,
@@ -24360,17 +24073,17 @@ const AuthPage = ({}) => {
   );
 };
 const DashboardPage = () => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Outlet, {});
+  return /* @__PURE__ */ jsx(Outlet, {});
 };
 const ErrorPage = ({}) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const account = useSelector((state) => state.account);
   const [loading, setLoading] = React__default.useState(false);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignCenter, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "5" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(StackRowAlignCenter, { children: [
+      /* @__PURE__ */ jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "5" }),
+      /* @__PURE__ */ jsx(
         Stack$1,
         {
           component: "img",
@@ -24381,7 +24094,7 @@ const ErrorPage = ({}) => {
           loading: "lazy"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsx(
         Stack$1,
         {
           component: "img",
@@ -24393,8 +24106,8 @@ const ErrorPage = ({}) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(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__ */ jsx(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__ */ jsx(
       ButtonElement,
       {
         content: "Đăng nhập lại",
@@ -24420,10 +24133,10 @@ const ErrorPage = ({}) => {
 };
 const NotFoundPage = ({}) => {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(StackRowAlignCenter, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(StackRowAlignCenter, { children: [
+      /* @__PURE__ */ jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" }),
+      /* @__PURE__ */ jsx(
         Stack$1,
         {
           component: "img",
@@ -24434,10 +24147,10 @@ const NotFoundPage = ({}) => {
           loading: "lazy"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" })
+      /* @__PURE__ */ jsx(Typography, { color: "primary", variant: "h1", fontSize: 90, children: "4" })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(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__ */ jsx(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__ */ jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
 const LayoutGroupContext = createContext({});
@@ -27682,7 +27395,7 @@ function useRender(Component2, props, ref, { latestValues }, isStatic, forwardMo
   const useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
   const visualProps = useVisualProps(props, latestValues, isStatic, Component2);
   const filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
-  const elementProps = Component2 !== Fragment ? { ...filteredProps, ...visualProps, ref } : {};
+  const elementProps = Component2 !== Fragment$1 ? { ...filteredProps, ...visualProps, ref } : {};
   const { children } = props;
   const renderedChildren = useMemo(() => isMotionValue(children) ? children.get() : children, [children]);
   return createElement(Component2, {
@@ -27937,7 +27650,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 jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? 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 = forwardRef(MotionDOMComponent);
@@ -28663,7 +28376,7 @@ class SVGVisualElement extends DOMVisualElement {
 }
 const createDomVisualElement = (Component2, options) => {
   return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
-    allowProjection: Component2 !== Fragment
+    allowProjection: Component2 !== Fragment$1
   });
 };
 function resolveVariant(visualElement, definition, custom) {
@@ -30056,7 +29769,7 @@ class MeasureLayoutWithContext extends Component$1 {
 function MeasureLayout(props) {
   const [isPresent, safeToRemove] = usePresence();
   const layoutGroup = useContext(LayoutGroupContext);
-  return jsxRuntimeExports.jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
+  return jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
 }
 const defaultScaleCorrectors = {
   borderRadius: {
@@ -31713,9 +31426,9 @@ const MotionBox = ({
       transition: { duration: 0.2 }
     }
   } : {};
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+  return /* @__PURE__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
 };
-const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const IconRight = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "20",
@@ -31724,7 +31437,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: /* @__PURE__ */ jsx(
       "path",
       {
         d: "M12 1L19 8M19 8L12 15M19 8L1 8",
@@ -31736,7 +31449,7 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     )
   }
 );
-const IconLeft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const IconLeft = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     width: "20",
@@ -31745,7 +31458,7 @@ const IconLeft = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: /* @__PURE__ */ jsx(
       "path",
       {
         d: "M8 15L1 8M1 8L8 1M1 8L19 8",
@@ -31783,8 +31496,8 @@ const AppGrid = ({
   const start = page * pageSize;
   const end = start + pageSize;
   const visibleApps = totalPages > 1 ? apps.slice(start, end) : apps;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
       Box,
       {
         sx: {
@@ -31794,7 +31507,7 @@ const AppGrid = ({
         },
         children: visibleApps.map((app2, index) => {
           const isSelected = selectedAppId === app2.key;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          return /* @__PURE__ */ jsxs(
             MotionBox,
             {
               preset: "staggerItem",
@@ -31809,7 +31522,7 @@ const AppGrid = ({
                 flexDirection: "column"
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsx(
                   Box,
                   {
                     sx: {
@@ -31823,7 +31536,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__ */ jsx(
                       ImageElement,
                       {
                         sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
@@ -31833,7 +31546,7 @@ const AppGrid = ({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: titleVariant,
@@ -31841,7 +31554,7 @@ const AppGrid = ({
                     children: app2.title
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: captionVariant,
@@ -31856,8 +31569,8 @@ const AppGrid = ({
         })
       }
     ),
-    showPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      page === totalPages - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    showPagination && totalPages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      page === totalPages - 1 && /* @__PURE__ */ jsx(
         IconButton,
         {
           size: "small",
@@ -31870,10 +31583,10 @@ const AppGrid = ({
             transform: "translateY(-120%)",
             color: theme.palette.divider
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconLeft, {})
+          children: /* @__PURE__ */ jsx(IconLeft, {})
         }
       ),
-      page !== totalPages - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      page !== totalPages - 1 && /* @__PURE__ */ jsx(
         IconButton,
         {
           size: "small",
@@ -31886,10 +31599,10 @@ const AppGrid = ({
             transform: "translateY(-120%)",
             color: theme.palette.divider
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconRight, {})
+          children: /* @__PURE__ */ jsx(IconRight, {})
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsx(
         Box,
         {
           sx: {
@@ -31898,7 +31611,7 @@ const AppGrid = ({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          children: /* @__PURE__ */ jsx(
             Box,
             {
               sx: {
@@ -31910,7 +31623,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__ */ jsx(
                 Box,
                 {
                   onClick: () => setPage(i),
@@ -31939,7 +31652,7 @@ const SystemMonitorScreen = () => {
   const [tab, setTab] = useState(AppCategory.ALL);
   const listApp = useApps(tab);
   const currentApp = useActiveSidebar();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     MotionBox,
     {
       preset: "fadeInUp",
@@ -31950,7 +31663,7 @@ const SystemMonitorScreen = () => {
         position: "relative",
         top: 150
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      children: /* @__PURE__ */ jsxs(
         Box,
         {
           sx: {
@@ -31961,7 +31674,7 @@ const SystemMonitorScreen = () => {
             justifyContent: "flex-start"
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsx(
               Box,
               {
                 sx: {
@@ -31975,13 +31688,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__ */ jsxs(
                   MotionBox,
                   {
                     sx: { position: "relative" },
                     preset: "tabUnderline",
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      /* @__PURE__ */ jsx(
                         Typography,
                         {
                           onClick: () => setTab(t.key),
@@ -31992,7 +31705,7 @@ const SystemMonitorScreen = () => {
                           children: t.label
                         }
                       ),
-                      tab === t.key && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      tab === t.key && /* @__PURE__ */ jsx(
                         MotionBox,
                         {
                           preset: "tabUnderline",
@@ -32004,7 +31717,7 @@ const SystemMonitorScreen = () => {
                             backgroundColor: theme.palette.common.white,
                             transformOrigin: "left"
                           },
-                          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {})
+                          children: /* @__PURE__ */ jsx("div", {})
                         }
                       )
                     ]
@@ -32013,7 +31726,7 @@ const SystemMonitorScreen = () => {
                 ))
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsx(
               AppGrid,
               {
                 apps: listApp,
@@ -32039,17 +31752,17 @@ const renderRoutes = (routes2, account) => routes2.map((route) => {
   const { path, layout: layout2, element, type, allowUserTypes = [], children } = route;
   const Layout = layout2 || React__default.Fragment;
   let Element2 = element;
-  if (path === PAGE.AUTH.path && account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Navigate, { to: PAGE.DASHBOARD.path });
+  if (path === PAGE.AUTH.path && account.isLogin) Element2 = () => /* @__PURE__ */ jsx(Navigate, { to: PAGE.DASHBOARD.path });
   if (type === RouteType.PROTECTED) {
-    if (!account.isLogin) Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Navigate, { to: PAGE.AUTH.path });
+    if (!account.isLogin) Element2 = () => /* @__PURE__ */ jsx(Navigate, { to: PAGE.AUTH.path });
     else if (allowUserTypes.length && !allowUserTypes.includes(account.user.type) && account.user.type !== UserType.ROOT)
-      Element2 = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Navigate, { to: PAGE.ERROR.path });
+      Element2 = () => /* @__PURE__ */ jsx(Navigate, { to: PAGE.ERROR.path });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     Route,
     {
       path,
-      element: /* @__PURE__ */ jsxRuntimeExports.jsx(Layout, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Element2, {}) }),
+      element: /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Element2, {}) }),
       children: children && renderRoutes(children, account)
     },
     path
@@ -32069,6 +31782,217 @@ const routes = [
     ]
   }
 ];
+const SidebarContext = createContext(
+  void 0
+);
+const useSidebar = () => {
+  const context = 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 = useNavigate();
+  const allApps = useApps();
+  const dispatch = useAppDispatch();
+  const currentApp = useActiveSidebar();
+  const { setActiveExpandMenu } = useSidebar();
+  const { palette } = useTheme();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: onClose,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: palette.action.selected,
+          zIndex: 100
+        }
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: onClose,
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsx(IconElement, { icon: "close" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      IconElement,
+                      {
+                        icon: "home",
+                        onClick: () => {
+                          onClose();
+                          navigate(PAGE.DASHBOARD.path);
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Workflow Engine" }),
+                /* @__PURE__ */ 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__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "HRM" }),
+                /* @__PURE__ */ 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__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Platform Info" }),
+                /* @__PURE__ */ 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,
@@ -32076,8 +32000,8 @@ const TypographyContentCaption = ({
   sxContent,
   sxCaption
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack$1, { gap: 0, sx: { ...sx }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxs(Stack$1, { gap: 0, sx: { ...sx }, children: [
+    /* @__PURE__ */ jsx(
       Typography,
       {
         sx: {
@@ -32087,7 +32011,7 @@ const TypographyContentCaption = ({
         children: content || "#"
       }
     ),
-    caption && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    caption && /* @__PURE__ */ jsx(
       Typography,
       {
         sx: {
@@ -32116,6 +32040,7 @@ export {
   AppCategory,
   AppGrid,
   AppType,
+  AppsSidebar,
   AuthLayout,
   AuthPage,
   AuthProcess,
@@ -32319,7 +32244,11 @@ export {
   updateNotification,
   updateNotificationSetting,
   updateUser,
+  useActiveSidebar,
+  useAllApps,
   useApps,
+  useIsSystemMonitor,
+  useSidebarState,
   useSnackbar,
   useTagSelector,
   useUpdateCurrentAccess,