sevago-sso-fe 1.0.31 → 1.0.33

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import * as React from "react";
 import React__default, { useMemo, useState, createContext, useContext, useEffect, useCallback, forwardRef, useImperativeHandle, createElement, Children, useRef, useLayoutEffect, Fragment as Fragment$1, useId, useInsertionEffect, Component } from "react";
 import { useLocation, useNavigate, Outlet, Route, Navigate } from "react-router-dom";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Alert, Stack as Stack$1, useTheme as useTheme$2, Icon, Button, Typography, IconButton, Box, TextField, styled as styled$2, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, Skeleton, InputAdornment, Tooltip, tooltipClasses, Avatar, ClickAwayListener as ClickAwayListener$1, Fade, Badge, List, ListItem, FormControl, InputLabel, RadioGroup, FormControlLabel, Radio, Menu, Divider, MenuItem } from "@mui/material";
+import { Alert, Stack as Stack$1, useTheme as useTheme$2, Icon, Button, Typography, IconButton, Box, TextField, styled as styled$2, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, Skeleton, InputAdornment, Tooltip, tooltipClasses, Avatar, FormControl, InputLabel, RadioGroup, FormControlLabel, Radio, Menu, Divider, MenuItem, Fade, ClickAwayListener as ClickAwayListener$1 } from "@mui/material";
 import { unstable_createGetCssVar, createSpacing as createSpacing$1, useTheme as useTheme$1, unstable_memoTheme, css, keyframes as keyframes$1, Stack as Stack$2 } from "@mui/system";
 import emStyled from "@emotion/styled";
 import "@emotion/react";
@@ -21732,9 +21732,6 @@ const ErrorPage = ({}) => {
                   type: LogoutType.THIS_DEVICE,
                   refreshToken: account.refreshToken
                 })
-              ).unwrap(),
-              dispatch(
-                ACTION_ACCOUNT.unsubscribeTopic({ fcmToken: account.fcmToken })
               ).unwrap()
             ]);
             navigate(PAGE.AUTH.path);
@@ -21768,781 +21765,91 @@ const NotFoundPage = ({}) => {
     /* @__PURE__ */ jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
-const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
-  [`& .${tooltipClasses.arrow}`]: {
-    color: "white"
-  }
-}));
-const AvatarElement = ({
-  url: url2,
-  sx = {},
-  size = "medium",
-  tooltipContent,
-  ...rest
-}) => {
-  if (tooltipContent) {
-    return /* @__PURE__ */ jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsx(
-      Avatar,
+const IconLeft = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "16",
+    viewBox: "0 0 20 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
       {
-        ...rest,
-        src: url2 || "",
-        sx: { ...MAP_SIZE[size], bgcolor: "primary.main", ...sx, cursor: "pointer" }
+        d: "M8 15L1 8M1 8L8 1M1 8L19 8",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
       }
-    ) });
+    )
   }
-  return /* @__PURE__ */ jsx(Avatar, { ...rest, src: url2 || "", sx: { ...MAP_SIZE[size], bgcolor: "primary.main", ...sx, cursor: "pointer" } });
-};
-const TimeAgoComponent = ({
-  time: time2,
-  hasText
-}) => {
-  return /* @__PURE__ */ jsx(
-    Typography,
-    {
-      variant: "caption",
-      sx: { ...getLimitLineCss(1), color: "text.disabled", lineHeight: 1.2 },
-      children: (hasText ? "Cập nhật lúc " : "") + timeUtils.getTimeAgo(time2)
-    }
-  );
-};
-const TimeAgoContentComponent = ({ time: time2, content, height: height2 = HEIGHT_IMAGE_DEFAULT }) => {
-  return /* @__PURE__ */ jsxs(
-    Stack$2,
-    {
-      sx: {
-        height: height2,
-        gap: 0,
-        justifyContent: "space-between",
-        alignItems: "flex-start"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            sx: {
-              ...getLimitLineCss(1)
-            },
-            children: content
-          }
-        ),
-        /* @__PURE__ */ jsx(TimeAgoComponent, { time: time2 })
-      ]
-    }
-  );
-};
-const ImageContentTimeComponent = ({
-  url: url2,
-  content,
-  time: time2,
-  sizeType = "medium"
-}) => {
-  return /* @__PURE__ */ jsxs(StackRow, { alignItems: "center", children: [
-    /* @__PURE__ */ jsx(AvatarElement, { url: url2, size: sizeType }),
-    /* @__PURE__ */ jsx(TimeAgoContentComponent, { content, time: time2 })
-  ] });
-};
-const TooltipOnClickElement = ({
-  open,
-  placement = "top",
-  content,
-  children,
-  onOpen,
-  onClose,
-  onClickAway,
-  ...rest
-}) => {
-  return (
-    // Chỗ này có thể là bug, onClickAway apply ngay cả khi component chưa được render
-    /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway, children: /* @__PURE__ */ jsx(
-      Tooltip,
+);
+const IconRight = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "20",
+    height: "16",
+    viewBox: "0 0 20 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
       {
-        PopperProps: { disablePortal: true },
-        open,
-        onOpen,
-        onClose,
-        disableFocusListener: true,
-        disableHoverListener: true,
-        disableTouchListener: true,
-        placement,
-        title: content,
-        ...rest,
-        children: /* @__PURE__ */ jsx("span", { children })
+        d: "M12 1L19 8M19 8L12 15M19 8L1 8",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
       }
-    ) })
-  );
+    )
+  }
+);
+const LayoutGroupContext = createContext({});
+function useConstant(init) {
+  const ref = useRef(null);
+  if (ref.current === null) {
+    ref.current = init();
+  }
+  return ref.current;
+}
+const isBrowser = typeof window !== "undefined";
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+const PresenceContext = /* @__PURE__ */ createContext(null);
+function addUniqueItem(arr, item) {
+  if (arr.indexOf(item) === -1)
+    arr.push(item);
+}
+function removeItem(arr, item) {
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
+}
+const clamp = (min, max, v) => {
+  if (v > max)
+    return max;
+  if (v < min)
+    return min;
+  return v;
 };
-const EmptyComponent = ({}) => {
-  return /* @__PURE__ */ jsx(Fade, { in: true, timeout: ANIMATION_TIME, children: /* @__PURE__ */ jsx(
-    Stack$1,
-    {
-      direction: "column",
-      sx: {
-        flex: 1,
-        height: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: PADDING_GAP_ITEM
-      },
-      children: /* @__PURE__ */ jsx(Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
-    }
-  ) });
+function formatErrorMessage(message, errorCode) {
+  return errorCode ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}` : message;
+}
+let warning = () => {
 };
-const BellComponent = ({}) => {
-  const isSystemMonitor = useIsSystemMonitor();
-  const { notificationCount } = useSelector(
-    (state) => state.account
-  );
-  const account = useSelector((state) => state.account);
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-  const { palette } = useTheme$2();
-  const { showSnackbar } = useSnackbar();
-  const [open, setOpen] = useState(false);
-  const [list, setList] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const handleGetListNotification = async () => {
-    setLoading(true);
-    try {
-      const res = await notificationApi.getListNotification({
-        status: NotificationStatus.NOT_VIEWED,
-        page: 0,
-        take: 0
-      });
-      setList(res.list);
-      dispatch(ACTION_ACCOUNT.changeNotificationCount(res.total));
-    } catch (error) {
-      showSnackbar({
-        message: getErrorMessage(error),
-        type: SnackbarType.ERROR
-      });
-    } finally {
-      setLoading(false);
+let invariant = () => {
+};
+if (process.env.NODE_ENV !== "production") {
+  warning = (check, message, errorCode) => {
+    if (!check && typeof console !== "undefined") {
+      console.warn(formatErrorMessage(message, errorCode));
     }
   };
-  useEffect(() => {
-    (async () => await handleGetListNotification())();
-  }, []);
-  const clickNotification = async (notification) => {
-    setOpen(false);
-    const isMyProposal = notification?.createdById === account.user.id;
-    try {
-      await notificationApi.updateNotification({
-        updateNotificationAction: UpdateNotificationAction.VIEW_ONE,
-        id: notification.id
-      });
-      dispatch(ACTION_ACCOUNT.changeNotificationCount(notificationCount - 1));
-      navigate(notification.path || PAGE.DASHBOARD.path, {
-        state: {
-          searchType: isMyProposal ? UserMovementSearchType.MY_PROPOSAL : UserMovementSearchType.NEED_APPROVE
-        }
-      });
-    } catch (error) {
-      showSnackbar({
-        message: getErrorMessage(error),
-        type: SnackbarType.ERROR
-      });
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    TooltipOnClickElement,
-    {
-      open,
-      onClickAway: () => setOpen(false),
-      placement: "bottom-end",
-      content: /* @__PURE__ */ jsxs(
-        List,
-        {
-          sx: {
-            display: "flex",
-            flexDirection: "column",
-            padding: 0,
-            maxHeight: 500,
-            overflowY: "auto",
-            flex: 1,
-            width: "300px"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              ListItem,
-              {
-                sx: {
-                  padding: PADDING_GAP_ITEM,
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  position: "sticky",
-                  top: 0,
-                  backgroundColor: palette.background.paper,
-                  zIndex: 1
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", children: "Thông báo" }),
-                  /* @__PURE__ */ jsxs(StackRow, { children: [
-                    /* @__PURE__ */ jsx(
-                      IconElement,
-                      {
-                        sx: { cursor: "pointer" },
-                        icon: "mark_email_read",
-                        onClick: async (e) => {
-                          e.stopPropagation();
-                          try {
-                            await notificationApi.updateNotification({
-                              updateNotificationAction: UpdateNotificationAction.VIEW_ALL
-                            });
-                            dispatch(ACTION_ACCOUNT.changeNotificationCount(0));
-                          } catch (error) {
-                            showSnackbar({
-                              message: getErrorMessage(error),
-                              type: SnackbarType.ERROR
-                            });
-                          }
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      IconElement,
-                      {
-                        icon: "settings",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                        }
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            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),
-                id: notification.id,
-                sx: {
-                  borderRadius: BORDER_RADIUS_ELEMENT,
-                  padding: PADDING_GAP_ITEM,
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  cursor: "pointer",
-                  transition: TRANSITION_TIME,
-                  "&:hover": {
-                    backgroundColor: palette.action.hover,
-                    color: palette.primary.main
-                  }
-                },
-                children: /* @__PURE__ */ jsxs(Stack$1, { gap: 1, children: [
-                  /* @__PURE__ */ jsx(
-                    ImageContentTimeComponent,
-                    {
-                      url: notification.createdBy?.url || "",
-                      content: notification.title,
-                      time: notification.createdAt
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { ...getLimitLineCss(2) }, children: notification.content })
-                ] })
-              },
-              notification.id
-            ))
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsx(
-        Badge,
-        {
-          onClick: async () => {
-            setOpen(!open);
-            await handleGetListNotification();
-          },
-          badgeContent: notificationCount,
-          color: "error",
-          sx: { cursor: "pointer" },
-          children: /* @__PURE__ */ jsx(
-            IconElement,
-            {
-              icon: "notifications",
-              onClick: () => setOpen(!open),
-              size: "large",
-              sx: {
-                color: isSystemMonitor ? palette.background.default : palette.primary.main,
-                "&:hover": {
-                  color: isSystemMonitor ? palette.background.default : palette.primary.main
-                }
-              }
-            }
-          )
-        }
-      )
-    }
-  );
-};
-const AvatarUserInfo = ({
-  name,
-  url: url2,
-  positions = [],
-  maxWidth: maxWidth2 = "440px",
-  isTag = false,
-  sxName,
-  sxPosition,
-  sizeAvatar = "large"
-}) => {
-  const { palette } = useTheme$2();
-  const isSystemMonitor = useIsSystemMonitor();
-  return /* @__PURE__ */ jsxs(StackRow, { sx: { alignItems: "center", gap: 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: {
-            color: isSystemMonitor ? palette.primary.contrastText : palette.text.secondary,
-            fontWeight: "600",
-            fontSize: "14px",
-            lineHeight: "20px",
-            ...getLimitLineCss(1),
-            ...sxName
-          },
-          children: name
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "caption",
-          sx: {
-            ...getLimitLineCss(1),
-            color: palette.text.disabled,
-            maxWidth: maxWidth2,
-            ...isTag && {
-              display: "flex",
-              padding: "2px 4px",
-              justifyContent: "center",
-              alignItems: "center",
-              gap: "10px",
-              borderRadius: "4px",
-              background: " #EFF8FF",
-              color: " #035388",
-              width: "fit-content",
-              ...sxPosition
-            }
-          },
-          children: positions.join(" / ")
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(
-      Typography,
-      {
-        sx: {
-          ...TYPOGRAPHY_STYLES.textSm.semiBold,
-          ...getLimitLineCss(1),
-          ...sxName
-        },
-        children: name
-      }
-    )
-  ] });
-};
-const RadioGroupElement = ({
-  name,
-  direction = "row",
-  label,
-  disabled,
-  iconLabel = "event_list",
-  defaultValue,
-  value: value2,
-  onChange,
-  children,
-  required = false,
-  sx = {}
-}) => {
-  const change = (event) => {
-    onChange && onChange({ target: { name, value: event.target.value || void 0 } });
-  };
-  return /* @__PURE__ */ jsxs(FormControl, { disabled, sx: { gap: PADDING_GAP_ITEM }, onChange: change, children: [
-    label && /* @__PURE__ */ jsx(
-      InputLabel,
-      {
-        shrink: true,
-        required,
-        sx: {
-          transform: "translate(0px , -9px) scale(0.75)",
-          zIndex: 2,
-          display: "flex"
-        },
-        children: /* @__PURE__ */ jsxs(StackLabel, { children: [
-          /* @__PURE__ */ jsx(IconElement, { icon: iconLabel, sx: { fontSize: TEXT_FIELD.FONT_SIZE_LABEL } }),
-          label
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      RadioGroup,
-      {
-        name,
-        defaultValue,
-        value: value2,
-        sx: {
-          flexDirection: direction,
-          paddingTop: label ? "calc(8.5px + 1.5px)" : 0,
-          // 8.5 lấy từ default theme không phải tự nhiên mà có
-          gap: PADDING_GAP_LAYOUT,
-          ...sx
-        },
-        children
-      }
-    )
-  ] });
-};
-const RadioElement = ({ name, label, ...rest }) => {
-  return /* @__PURE__ */ jsx(
-    FormControlLabel,
-    {
-      name,
-      label,
-      sx: { alignItems: "center", mr: 0 },
-      control: /* @__PURE__ */ jsx(
-        Radio,
-        {
-          ...rest,
-          sx: {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingRight: PADDING_GAP_ITEM,
-            marginLeft: "2px",
-            "&:hover": { backgroundColor: "unset" },
-            "& .MuiSvgIcon-root": { fontSize: "18px" }
-          }
-        }
-      )
-    }
-  );
-};
-const AvatarUserComponent = ({}) => {
-  const account = useSelector((state) => state.account);
-  const { showSnackbar } = useSnackbar();
-  const dispatch = useAppDispatch();
-  const navigate = useNavigate();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const positions = account?.user?.managedOrgUnits?.map((e) => e.name) || [];
-  const menu = [
-    {
-      content: "Đăng xuất khỏi thiết bị",
-      icon: "logout",
-      onClick: async () => {
-        try {
-          await Promise.all([
-            dispatch(
-              ACTION_ACCOUNT.logout({
-                type: LogoutType.THIS_DEVICE,
-                refreshToken: account.refreshToken
-              })
-            ).unwrap()
-          ]);
-          navigate(PAGE.AUTH.path);
-        } catch (error) {
-          showSnackbar({
-            message: getErrorMessage(error),
-            type: SnackbarType.ERROR
-          });
-        }
-      }
-    },
-    {
-      content: "Đăng xuất khỏi tất cả thiết bị",
-      icon: "exit_to_app",
-      onClick: async () => {
-        if ("serviceWorker" in navigator) {
-          navigator.serviceWorker.getRegistrations().then((registrations) => {
-            registrations.forEach((registration) => {
-              registration.unregister();
-            });
-          }).catch((error) => {
-            console.error("Error unregistering Service Workers: ", error);
-          });
-        } else {
-          console.warn("Service Worker is not supported in this browser.");
-        }
-        await dispatch(
-          ACTION_ACCOUNT.logout({
-            type: LogoutType.THIS_DEVICE,
-            refreshToken: account.refreshToken
-          })
-        ).unwrap();
-        navigate(PAGE.AUTH.path);
-      }
-    }
-  ];
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  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",
-              size: "medium",
-              sx: {
-                color: "text.secondary",
-                transition: "transform 0.2s ease-in-out",
-                transform: anchorEl ? "rotate(180deg)" : "rotate(0deg)",
-                fontVariationSettings: "'wght' 600, 'FILL' 0",
-                willChange: "transform",
-                backfaceVisibility: "hidden"
-              }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Menu,
-      {
-        anchorEl,
-        open: Boolean(anchorEl),
-        onClose: handleClose,
-        onClick: handleClose,
-        disableScrollLock: true,
-        PaperProps: {
-          elevation: 0,
-          sx: {
-            overflow: "visible",
-            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-            mt: 1.5,
-            transform: "translate3d(0, 0, 0)",
-            willChange: "transform",
-            "& .MuiAvatar-root": {
-              width: 32,
-              height: 32,
-              ml: -0.5,
-              mr: 1
-            },
-            "&:before": {
-              content: '""',
-              display: "block",
-              position: "absolute",
-              top: 0,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: "background.paper",
-              transform: "translateY(-50%) rotate(45deg)",
-              zIndex: 0
-            }
-          }
-        },
-        transformOrigin: { horizontal: "right", vertical: "top" },
-        anchorOrigin: { horizontal: "right", vertical: "bottom" },
-        children: [
-          /* @__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",
-                  onClick: () => navigate(PAGE.DASHBOARD.path + DASHBOARD_SCREEN.ACCOUNT.path)
-                }
-              )
-            ] }),
-            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",
-                  sx: { paddingLeft: "20px" },
-                  value: account.userUnitPositionId,
-                  onChange: (event) => {
-                    dispatch(
-                      ACTION_ACCOUNT.updatePositionOrgUnit(event.target.value)
-                    );
-                    window.location.reload();
-                  },
-                  children: account.user.userOrgUnitPositions.map((e) => /* @__PURE__ */ jsx(
-                    RadioElement,
-                    {
-                      value: e.id,
-                      size: "small",
-                      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
-                  ))
-                }
-              )
-            ] })
-          ] }),
-          /* @__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))
-        ]
-      }
-    )
-  ] });
-};
-const MonitorPart = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx(
-    Stack$2,
-    {
-      sx: {
-        minHeight: "100vh",
-        width: "100%",
-        overflowY: "auto",
-        backgroundImage: "url('/images/image-dashboard.jpg')",
-        backgroundSize: "cover",
-        backgroundPosition: "top",
-        backgroundRepeat: "no-repeat"
-      },
-      children: /* @__PURE__ */ jsxs(Stack$2, { p: { padding: 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__ */ jsxs(StackRowAlignCenter, { children: [
-            /* @__PURE__ */ jsx(BellComponent, {}),
-            /* @__PURE__ */ jsx(AvatarUserComponent, {})
-          ] })
-        ] }),
-        children
-      ] })
-    }
-  );
-};
-const IconLeft = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: "20",
-    height: "16",
-    viewBox: "0 0 20 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M8 15L1 8M1 8L8 1M1 8L19 8",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }
-    )
-  }
-);
-const IconRight = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: "20",
-    height: "16",
-    viewBox: "0 0 20 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M12 1L19 8M19 8L12 15M19 8L1 8",
-        stroke: "currentColor",
-        "stroke-width": "2",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      }
-    )
-  }
-);
-const LayoutGroupContext = createContext({});
-function useConstant(init) {
-  const ref = useRef(null);
-  if (ref.current === null) {
-    ref.current = init();
-  }
-  return ref.current;
-}
-const isBrowser = typeof window !== "undefined";
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-const PresenceContext = /* @__PURE__ */ createContext(null);
-function addUniqueItem(arr, item) {
-  if (arr.indexOf(item) === -1)
-    arr.push(item);
-}
-function removeItem(arr, item) {
-  const index = arr.indexOf(item);
-  if (index > -1)
-    arr.splice(index, 1);
-}
-const clamp = (min, max, v) => {
-  if (v > max)
-    return max;
-  if (v < min)
-    return min;
-  return v;
-};
-function formatErrorMessage(message, errorCode) {
-  return errorCode ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}` : message;
-}
-let warning = () => {
-};
-let invariant = () => {
-};
-if (process.env.NODE_ENV !== "production") {
-  warning = (check, message, errorCode) => {
-    if (!check && typeof console !== "undefined") {
-      console.warn(formatErrorMessage(message, errorCode));
-    }
-  };
-  invariant = (check, message, errorCode) => {
-    if (!check) {
-      throw new Error(formatErrorMessage(message, errorCode));
+  invariant = (check, message, errorCode) => {
+    if (!check) {
+      throw new Error(formatErrorMessage(message, errorCode));
     }
   };
 }
@@ -29660,337 +28967,762 @@ const gestureAnimations = {
   inView: {
     Feature: InViewFeature
   },
-  tap: {
-    Feature: PressGesture
+  tap: {
+    Feature: PressGesture
+  },
+  focus: {
+    Feature: FocusGesture
+  },
+  hover: {
+    Feature: HoverGesture
+  }
+};
+const layout = {
+  layout: {
+    ProjectionNode: HTMLProjectionNode,
+    MeasureLayout
+  }
+};
+const featureBundle = {
+  ...animations,
+  ...gestureAnimations,
+  ...drag,
+  ...layout
+};
+const motion = /* @__PURE__ */ createMotionProxy(featureBundle, createDomVisualElement);
+const animationPresets = {
+  fadeInUp: {
+    initial: { opacity: 0, y: 50 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  fadeInDown: {
+    initial: { opacity: 0, y: -50 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.3, ease: "easeOut" }
   },
-  focus: {
-    Feature: FocusGesture
+  fadeInLeft: {
+    initial: { opacity: 0, x: -50 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.3, ease: "easeOut" }
   },
-  hover: {
-    Feature: HoverGesture
+  fadeInRight: {
+    initial: { opacity: 0, x: 50 },
+    animate: { opacity: 1, x: 0 },
+    transition: { duration: 0.3, ease: "easeOut" }
+  },
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.3, ease: "easeOut" }
+  },
+  slideInUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.4, ease: "easeOut" }
+  },
+  staggerItem: {
+    initial: { opacity: 0, y: 30, scale: 0.9 },
+    animate: { opacity: 1, y: 0, scale: 1 },
+    transition: { duration: 0.4, delay: 0, ease: "easeOut" }
+  },
+  tabContent: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.4, ease: "easeOut" }
+  },
+  tabUnderline: {
+    initial: { scaleX: 0, opacity: 0 },
+    animate: { scaleX: 1, opacity: 1 },
+    exit: { scaleX: 0, opacity: 0 },
+    transition: { duration: 0.3, ease: "easeInOut" }
   }
 };
-const layout = {
-  layout: {
-    ProjectionNode: HTMLProjectionNode,
-    MeasureLayout
+const MotionBox = ({
+  children,
+  sx,
+  onClick,
+  preset = "fadeInUp",
+  delay: delay2,
+  index,
+  hover: hover2 = false,
+  ...motionProps
+}) => {
+  const getAnimationProps = () => {
+    if (preset) {
+      const presetConfig = animationPresets[preset];
+      if (preset === "staggerItem" && index !== void 0) {
+        return {
+          ...presetConfig,
+          transition: {
+            ...presetConfig.transition,
+            delay: index * 0.05 + (delay2 || 0)
+          }
+        };
+      }
+      if (delay2 !== void 0) {
+        return {
+          ...presetConfig,
+          transition: {
+            ...presetConfig.transition,
+            delay: delay2
+          }
+        };
+      }
+      return presetConfig;
+    }
+    return {};
+  };
+  const hoverProps = hover2 ? {
+    whileHover: {
+      y: -4,
+      scale: 1.05,
+      transition: { duration: 0.2 }
+    }
+  } : {};
+  return /* @__PURE__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+};
+const AppGrid = ({
+  apps,
+  onClickItem,
+  columns = 5,
+  rows = 3,
+  iconSize = 80,
+  iconRadius = 7,
+  iconShadow = `0 ${PADDING_GAP_ITEM_SMALL} ${PADDING_GAP_LAYOUT} ${BORDER_COLOR_CARD}`,
+  gap: gap2 = PADDING_GAP_ITEM,
+  titleVariant = "subtitle1",
+  captionVariant = "caption",
+  titleColor,
+  captionColor,
+  selectedAppId,
+  showPagination = true
+}) => {
+  const theme = useTheme();
+  const pageSize = Math.max(1, columns * Math.max(1, rows));
+  const totalPages = Math.max(1, Math.ceil(apps.length / pageSize));
+  const [page, setPage] = React__default.useState(0);
+  const { user } = useSelector((state) => state.account);
+  React__default.useEffect(() => {
+    setPage((prev) => prev >= totalPages ? totalPages - 1 : prev);
+  }, [totalPages, columns, rows, apps.length]);
+  const start = page * pageSize;
+  const end = start + pageSize;
+  const visibleApps = totalPages > 1 ? apps.slice(start, end) : apps;
+  const findLink = (app) => {
+    if (!app.children?.length) {
+      return app.path;
+    }
+    for (const i of app.children || []) {
+      if (user?.type && i.allowUserTypes.includes(user?.type)) {
+        if (i.path) {
+          return `${i.path}`;
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gap: gap2
+        },
+        children: visibleApps.map((app, index) => {
+          const isSelected = selectedAppId === app.key;
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: findLink(app) || "#",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: {
+                textDecoration: "none",
+                color: "inherit",
+                width: "100%",
+                display: "block"
+              },
+              onClick: (e) => {
+                const url2 = findLink(app);
+                e.preventDefault();
+                onClickItem?.(app);
+                if (url2 && url2 !== "#") {
+                  try {
+                    window.open(url2, "_blank", "noopener");
+                  } catch (err) {
+                    const newWindow = window.open("about:blank");
+                    if (newWindow) newWindow.location.href = url2;
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsxs(
+                MotionBox,
+                {
+                  preset: "staggerItem",
+                  index,
+                  hover: true,
+                  sx: {
+                    cursor: "pointer",
+                    display: "flex",
+                    flex: 1,
+                    alignItems: "center",
+                    flexDirection: "column"
+                  },
+                  onClick: () => {
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: {
+                          width: iconSize,
+                          height: iconSize,
+                          borderRadius: iconRadius,
+                          mb: 1.5,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          background: getAppColor(app.category),
+                          boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
+                        },
+                        children: typeof app.icon === "string" && app.icon && /* @__PURE__ */ jsx(
+                          ImageElement,
+                          {
+                            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
+                            url: app.icon,
+                            sizeType: ImageSizeType.SQUARE
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: titleVariant,
+                        sx: { color: titleColor ?? theme.palette.common.white },
+                        children: app.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: captionVariant,
+                        sx: { color: captionColor ?? theme.palette.common.white },
+                        children: app.caption
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            app.key
+          );
+        })
+      }
+    ),
+    showPagination && totalPages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      page === totalPages - 1 && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: () => setPage((p) => Math.max(0, p - 1)),
+          disabled: page === 0,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: -30,
+            transform: "translateY(-120%)",
+            color: theme.palette.divider
+          },
+          children: /* @__PURE__ */ jsx(IconLeft, {})
+        }
+      ),
+      page !== totalPages - 1 && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
+          disabled: page === totalPages - 1,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            right: -30,
+            transform: "translateY(-120%)",
+            color: theme.palette.divider
+          },
+          children: /* @__PURE__ */ jsx(IconRight, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            mt: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: PADDING_GAP_BUTTON,
+                px: PADDING_GAP_BUTTON,
+                py: PADDING_GAP_ITEM_SMALL,
+                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                backgroundColor: "rgba(255,255,255,0.15)"
+              },
+              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  onClick: () => setPage(i),
+                  sx: {
+                    height: 10,
+                    borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                    cursor: "pointer",
+                    transition: "width 0.3s ease",
+                    width: i === page ? "40px" : "10px",
+                    backgroundColor: i === page ? theme.palette.common.white : "rgba(255,255,255,0.35)"
+                  }
+                },
+                i
+              ))
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+const ArrowTooltip = emStyled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: "white"
   }
-};
-const featureBundle = {
-  ...animations,
-  ...gestureAnimations,
-  ...drag,
-  ...layout
-};
-const motion = /* @__PURE__ */ createMotionProxy(featureBundle, createDomVisualElement);
-const animationPresets = {
-  fadeInUp: {
-    initial: { opacity: 0, y: 50 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.2, ease: "easeOut" }
-  },
-  fadeInDown: {
-    initial: { opacity: 0, y: -50 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.3, ease: "easeOut" }
-  },
-  fadeInLeft: {
-    initial: { opacity: 0, x: -50 },
-    animate: { opacity: 1, x: 0 },
-    transition: { duration: 0.3, ease: "easeOut" }
-  },
-  fadeInRight: {
-    initial: { opacity: 0, x: 50 },
-    animate: { opacity: 1, x: 0 },
-    transition: { duration: 0.3, ease: "easeOut" }
-  },
-  scaleIn: {
-    initial: { opacity: 0, scale: 0.9 },
-    animate: { opacity: 1, scale: 1 },
-    transition: { duration: 0.3, ease: "easeOut" }
-  },
-  slideInUp: {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.4, ease: "easeOut" }
-  },
-  staggerItem: {
-    initial: { opacity: 0, y: 30, scale: 0.9 },
-    animate: { opacity: 1, y: 0, scale: 1 },
-    transition: { duration: 0.4, delay: 0, ease: "easeOut" }
-  },
-  tabContent: {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.4, ease: "easeOut" }
-  },
-  tabUnderline: {
-    initial: { scaleX: 0, opacity: 0 },
-    animate: { scaleX: 1, opacity: 1 },
-    exit: { scaleX: 0, opacity: 0 },
-    transition: { duration: 0.3, ease: "easeInOut" }
+}));
+const AvatarElement = ({
+  url: url2,
+  sx = {},
+  size = "medium",
+  tooltipContent,
+  ...rest
+}) => {
+  if (tooltipContent) {
+    return /* @__PURE__ */ jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ 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 MotionBox = ({
+const AvatarUserInfo = ({
+  name,
+  url: url2,
+  positions = [],
+  maxWidth: maxWidth2 = "440px",
+  isTag = false,
+  sxName,
+  sxPosition,
+  sizeAvatar = "large"
+}) => {
+  const { palette } = useTheme$2();
+  const isSystemMonitor = useIsSystemMonitor();
+  return /* @__PURE__ */ jsxs(StackRow, { sx: { alignItems: "center", gap: 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: {
+            color: isSystemMonitor ? palette.primary.contrastText : palette.text.secondary,
+            fontWeight: "600",
+            fontSize: "14px",
+            lineHeight: "20px",
+            ...getLimitLineCss(1),
+            ...sxName
+          },
+          children: name
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "caption",
+          sx: {
+            ...getLimitLineCss(1),
+            color: palette.text.disabled,
+            maxWidth: maxWidth2,
+            ...isTag && {
+              display: "flex",
+              padding: "2px 4px",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "10px",
+              borderRadius: "4px",
+              background: " #EFF8FF",
+              color: " #035388",
+              width: "fit-content",
+              ...sxPosition
+            }
+          },
+          children: positions.join(" / ")
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          ...TYPOGRAPHY_STYLES.textSm.semiBold,
+          ...getLimitLineCss(1),
+          ...sxName
+        },
+        children: name
+      }
+    )
+  ] });
+};
+const RadioGroupElement = ({
+  name,
+  direction = "row",
+  label,
+  disabled,
+  iconLabel = "event_list",
+  defaultValue,
+  value: value2,
+  onChange,
   children,
-  sx,
-  onClick,
-  preset = "fadeInUp",
-  delay: delay2,
-  index,
-  hover: hover2 = false,
-  ...motionProps
+  required = false,
+  sx = {}
 }) => {
-  const getAnimationProps = () => {
-    if (preset) {
-      const presetConfig = animationPresets[preset];
-      if (preset === "staggerItem" && index !== void 0) {
-        return {
-          ...presetConfig,
-          transition: {
-            ...presetConfig.transition,
-            delay: index * 0.05 + (delay2 || 0)
-          }
-        };
+  const change = (event) => {
+    onChange && onChange({ target: { name, value: event.target.value || void 0 } });
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { disabled, sx: { gap: PADDING_GAP_ITEM }, onChange: change, children: [
+    label && /* @__PURE__ */ jsx(
+      InputLabel,
+      {
+        shrink: true,
+        required,
+        sx: {
+          transform: "translate(0px , -9px) scale(0.75)",
+          zIndex: 2,
+          display: "flex"
+        },
+        children: /* @__PURE__ */ jsxs(StackLabel, { children: [
+          /* @__PURE__ */ jsx(IconElement, { icon: iconLabel, sx: { fontSize: TEXT_FIELD.FONT_SIZE_LABEL } }),
+          label
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        name,
+        defaultValue,
+        value: value2,
+        sx: {
+          flexDirection: direction,
+          paddingTop: label ? "calc(8.5px + 1.5px)" : 0,
+          // 8.5 lấy từ default theme không phải tự nhiên mà có
+          gap: PADDING_GAP_LAYOUT,
+          ...sx
+        },
+        children
       }
-      if (delay2 !== void 0) {
-        return {
-          ...presetConfig,
-          transition: {
-            ...presetConfig.transition,
-            delay: delay2
+    )
+  ] });
+};
+const RadioElement = ({ name, label, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      name,
+      label,
+      sx: { alignItems: "center", mr: 0 },
+      control: /* @__PURE__ */ jsx(
+        Radio,
+        {
+          ...rest,
+          sx: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingRight: PADDING_GAP_ITEM,
+            marginLeft: "2px",
+            "&:hover": { backgroundColor: "unset" },
+            "& .MuiSvgIcon-root": { fontSize: "18px" }
           }
-        };
-      }
-      return presetConfig;
-    }
-    return {};
-  };
-  const hoverProps = hover2 ? {
-    whileHover: {
-      y: -4,
-      scale: 1.05,
-      transition: { duration: 0.2 }
+        }
+      )
     }
-  } : {};
-  return /* @__PURE__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+  );
 };
-const AppGrid = ({
-  apps,
-  onClickItem,
-  columns = 5,
-  rows = 3,
-  iconSize = 80,
-  iconRadius = 7,
-  iconShadow = `0 ${PADDING_GAP_ITEM_SMALL} ${PADDING_GAP_LAYOUT} ${BORDER_COLOR_CARD}`,
-  gap: gap2 = PADDING_GAP_ITEM,
-  titleVariant = "subtitle1",
-  captionVariant = "caption",
-  titleColor,
-  captionColor,
-  selectedAppId,
-  showPagination = true
-}) => {
-  const theme = useTheme();
-  const pageSize = Math.max(1, columns * Math.max(1, rows));
-  const totalPages = Math.max(1, Math.ceil(apps.length / pageSize));
-  const [page, setPage] = React__default.useState(0);
-  const { user } = useSelector((state) => state.account);
-  React__default.useEffect(() => {
-    setPage((prev) => prev >= totalPages ? totalPages - 1 : prev);
-  }, [totalPages, columns, rows, apps.length]);
-  const start = page * pageSize;
-  const end = start + pageSize;
-  const visibleApps = totalPages > 1 ? apps.slice(start, end) : apps;
-  const findLink = (app) => {
-    if (!app.children?.length) {
-      return app.path;
-    }
-    for (const i of app.children || []) {
-      if (user?.type && i.allowUserTypes.includes(user?.type)) {
-        if (i.path) {
-          return `${i.path}`;
+const AvatarUserComponent = ({}) => {
+  const account = useSelector((state) => state.account);
+  const { showSnackbar } = useSnackbar();
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const positions = account?.user?.managedOrgUnits?.map((e) => e.name) || [];
+  const menu = [
+    {
+      content: "Đăng xuất khỏi thiết bị",
+      icon: "logout",
+      onClick: async () => {
+        try {
+          await Promise.all([
+            dispatch(
+              ACTION_ACCOUNT.logout({
+                type: LogoutType.THIS_DEVICE,
+                refreshToken: account.refreshToken
+              })
+            ).unwrap()
+          ]);
+          navigate(PAGE.AUTH.path);
+        } catch (error) {
+          showSnackbar({
+            message: getErrorMessage(error),
+            type: SnackbarType.ERROR
+          });
+        }
+      }
+    },
+    {
+      content: "Đăng xuất khỏi tất cả thiết bị",
+      icon: "exit_to_app",
+      onClick: async () => {
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.getRegistrations().then((registrations) => {
+            registrations.forEach((registration) => {
+              registration.unregister();
+            });
+          }).catch((error) => {
+            console.error("Error unregistering Service Workers: ", error);
+          });
+        } else {
+          console.warn("Service Worker is not supported in this browser.");
         }
+        await dispatch(
+          ACTION_ACCOUNT.logout({
+            type: LogoutType.THIS_DEVICE,
+            refreshToken: account.refreshToken
+          })
+        ).unwrap();
+        navigate(PAGE.AUTH.path);
       }
     }
+  ];
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
   };
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
       Box,
       {
+        onClick: handleClick,
         sx: {
-          display: "grid",
-          gridTemplateColumns: `repeat(${columns}, 1fr)`,
-          gap: gap2
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 1
         },
-        children: visibleApps.map((app, index) => {
-          const isSelected = selectedAppId === app.key;
-          return /* @__PURE__ */ jsx(
-            "a",
+        children: [
+          /* @__PURE__ */ jsx(
+            AvatarUserInfo,
             {
-              href: findLink(app) || "#",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              style: {
-                textDecoration: "none",
-                color: "inherit",
-                width: "100%",
-                display: "block"
-              },
-              onClick: (e) => {
-                const url2 = findLink(app);
-                e.preventDefault();
-                onClickItem?.(app);
-                if (url2 && url2 !== "#") {
-                  try {
-                    window.open(url2, "_blank", "noopener");
-                  } catch (err) {
-                    const newWindow = window.open("about:blank");
-                    if (newWindow) newWindow.location.href = url2;
-                  }
+              url: account.user?.url,
+              name: account.user?.name ?? "",
+              positions,
+              isTag: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconElement,
+            {
+              icon: "arrow_drop_down",
+              size: "medium",
+              sx: {
+                color: "text.secondary",
+                transition: "transform 0.2s ease-in-out",
+                transform: anchorEl ? "rotate(180deg)" : "rotate(0deg)",
+                fontVariationSettings: "'wght' 600, 'FILL' 0",
+                willChange: "transform",
+                backfaceVisibility: "hidden"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleClose,
+        onClick: handleClose,
+        disableScrollLock: true,
+        PaperProps: {
+          elevation: 0,
+          sx: {
+            overflow: "visible",
+            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+            mt: 1.5,
+            transform: "translate3d(0, 0, 0)",
+            willChange: "transform",
+            "& .MuiAvatar-root": {
+              width: 32,
+              height: 32,
+              ml: -0.5,
+              mr: 1
+            },
+            "&:before": {
+              content: '""',
+              display: "block",
+              position: "absolute",
+              top: 0,
+              right: 14,
+              width: 10,
+              height: 10,
+              bgcolor: "background.paper",
+              transform: "translateY(-50%) rotate(45deg)",
+              zIndex: 0
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: [
+          /* @__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",
+                  onClick: () => navigate(PAGE.DASHBOARD.path + DASHBOARD_SCREEN.ACCOUNT.path)
+                }
+              )
+            ] }),
+            account.user?.userOrgUnitPositions && account.user.userOrgUnitPositions.length > 0 && /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                IconContentElement,
+                {
+                  icon: "admin_panel_settings",
+                  content: "Vai trò"
                 }
-              },
-              children: /* @__PURE__ */ jsxs(
-                MotionBox,
+              ),
+              /* @__PURE__ */ jsx(
+                RadioGroupElement,
                 {
-                  preset: "staggerItem",
-                  index,
-                  hover: true,
-                  sx: {
-                    cursor: "pointer",
-                    display: "flex",
-                    flex: 1,
-                    alignItems: "center",
-                    flexDirection: "column"
-                  },
-                  onClick: () => {
+                  direction: "column",
+                  sx: { paddingLeft: "20px" },
+                  value: account.userUnitPositionId,
+                  onChange: (event) => {
+                    dispatch(
+                      ACTION_ACCOUNT.updatePositionOrgUnit(event.target.value)
+                    );
+                    window.location.reload();
                   },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: {
-                          width: iconSize,
-                          height: iconSize,
-                          borderRadius: iconRadius,
-                          mb: 1.5,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          background: getAppColor(app.category),
-                          boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
-                        },
-                        children: typeof app.icon === "string" && app.icon && /* @__PURE__ */ jsx(
-                          ImageElement,
+                  children: account.user.userOrgUnitPositions.map((e) => /* @__PURE__ */ jsx(
+                    RadioElement,
+                    {
+                      value: e.id,
+                      size: "small",
+                      label: /* @__PURE__ */ jsxs(Stack$2, { gap: 0, children: [
+                        /* @__PURE__ */ jsx(Typography, { children: e.orgUnit.name }),
+                        /* @__PURE__ */ jsx(
+                          Typography,
                           {
-                            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
-                            url: app.icon,
-                            sizeType: ImageSizeType.SQUARE
+                            variant: "caption",
+                            sx: {
+                              ...getLimitLineCss(1),
+                              color: "text.disabled"
+                            },
+                            children: e.position.name
                           }
                         )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        variant: titleVariant,
-                        sx: { color: titleColor ?? theme.palette.common.white },
-                        children: app.title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        variant: captionVariant,
-                        sx: { color: captionColor ?? theme.palette.common.white },
-                        children: app.caption
-                      }
-                    )
-                  ]
+                      ] })
+                    },
+                    e.id
+                  ))
                 }
               )
-            },
-            app.key
-          );
-        })
+            ] })
+          ] }),
+          /* @__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))
+        ]
       }
-    ),
-    showPagination && totalPages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      page === totalPages - 1 && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "small",
-          onClick: () => setPage((p) => Math.max(0, p - 1)),
-          disabled: page === 0,
-          sx: {
-            position: "absolute",
-            top: "50%",
-            left: -30,
-            transform: "translateY(-120%)",
-            color: theme.palette.divider
-          },
-          children: /* @__PURE__ */ jsx(IconLeft, {})
-        }
-      ),
-      page !== totalPages - 1 && /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "small",
-          onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
-          disabled: page === totalPages - 1,
-          sx: {
-            position: "absolute",
-            top: "50%",
-            right: -30,
-            transform: "translateY(-120%)",
-            color: theme.palette.divider
-          },
-          children: /* @__PURE__ */ jsx(IconRight, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          sx: {
-            mt: 2,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: PADDING_GAP_BUTTON,
-                px: PADDING_GAP_BUTTON,
-                py: PADDING_GAP_ITEM_SMALL,
-                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
-                backgroundColor: "rgba(255,255,255,0.15)"
-              },
-              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsx(
-                Box,
-                {
-                  onClick: () => setPage(i),
-                  sx: {
-                    height: 10,
-                    borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
-                    cursor: "pointer",
-                    transition: "width 0.3s ease",
-                    width: i === page ? "40px" : "10px",
-                    backgroundColor: i === page ? theme.palette.common.white : "rgba(255,255,255,0.35)"
-                  }
-                },
-                i
-              ))
-            }
-          )
-        }
-      )
-    ] })
+    )
   ] });
 };
+const EmptyComponent = ({}) => {
+  return /* @__PURE__ */ jsx(Fade, { in: true, timeout: ANIMATION_TIME, children: /* @__PURE__ */ jsx(
+    Stack$1,
+    {
+      direction: "column",
+      sx: {
+        flex: 1,
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: PADDING_GAP_ITEM
+      },
+      children: /* @__PURE__ */ jsx(Box, { component: "img", sx: { width: 70 }, src: "/images/empty.svg" })
+    }
+  ) });
+};
+const TimeAgoComponent = ({
+  time: time2,
+  hasText
+}) => {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "caption",
+      sx: { ...getLimitLineCss(1), color: "text.disabled", lineHeight: 1.2 },
+      children: (hasText ? "Cập nhật lúc " : "") + timeUtils.getTimeAgo(time2)
+    }
+  );
+};
+const TimeAgoContentComponent = ({ time: time2, content, height: height2 = HEIGHT_IMAGE_DEFAULT }) => {
+  return /* @__PURE__ */ jsxs(
+    Stack$2,
+    {
+      sx: {
+        height: height2,
+        gap: 0,
+        justifyContent: "space-between",
+        alignItems: "flex-start"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              ...getLimitLineCss(1)
+            },
+            children: content
+          }
+        ),
+        /* @__PURE__ */ jsx(TimeAgoComponent, { time: time2 })
+      ]
+    }
+  );
+};
 const AppsSidebar = ({
   isOpen,
   onClose,
@@ -30225,6 +29957,36 @@ const TypographyContentCaption = ({
     )
   ] });
 };
+const TooltipOnClickElement = ({
+  open,
+  placement = "top",
+  content,
+  children,
+  onOpen,
+  onClose,
+  onClickAway,
+  ...rest
+}) => {
+  return (
+    // Chỗ này có thể là bug, onClickAway apply ngay cả khi component chưa được render
+    /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway, children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        PopperProps: { disablePortal: true },
+        open,
+        onOpen,
+        onClose,
+        disableFocusListener: true,
+        disableHoverListener: true,
+        disableTouchListener: true,
+        placement,
+        title: content,
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { children })
+      }
+    ) })
+  );
+};
 const TypographyFilter = styled$2(Typography)(({ theme }) => ({
   height: HEIGHT_ELEMENT_OTHER,
   border: `1px solid ${theme.palette.divider}`,
@@ -30510,7 +30272,6 @@ export {
   AvatarUserInfo,
   BOOKING_SCREEN,
   BUTTON_BACK_ICON_CONTENT,
-  BellComponent,
   BorderLinearProgress,
   ButtonElement,
   DASHBOARD_BASE,
@@ -30531,7 +30292,6 @@ export {
   MAP_SIZE,
   MODE,
   Mode,
-  MonitorPart,
   MotionBox,
   NotFoundPage,
   NotificationStatus,