sevago-sso-fe 1.0.12 → 1.0.14

package/dist/index.esm.js

@@ -3,7 +3,7 @@ import { createAsyncThunk, createSlice, configureStore, combineReducers } from "
 import { useDispatch, useSelector } from "react-redux";
 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 as Component$1 } from "react";
-import { useLocation, useNavigate, Outlet, Route, Navigate } from "react-router-dom";
+import { useLocation, useNavigate, Outlet, Link, Route, Navigate } from "react-router-dom";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Alert, Stack as Stack$1, styled as styled$2, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$2, Skeleton, Box, Icon, Tooltip, tooltipClasses, Avatar, Typography, ClickAwayListener as ClickAwayListener$1, 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";
@@ -20694,7 +20694,9 @@ const LoadingComponent = ({ color: color2, size = "medium", sx = {} }) => {
 };
 const BellComponent = ({}) => {
   const isSystemMonitor = useIsSystemMonitor();
-  const { notificationCount } = useSelector((state) => state.account);
+  const { notificationCount } = useSelector(
+    (state) => state.account
+  );
   const account = useSelector((state) => state.account);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -20714,7 +20716,10 @@ const BellComponent = ({}) => {
       setList(res.list);
       dispatch(ACTION_ACCOUNT.changeNotificationCount(res.total));
     } catch (error) {
-      showSnackbar({ message: getErrorMessage(error), type: SnackbarType.ERROR });
+      showSnackbar({
+        message: getErrorMessage(error),
+        type: SnackbarType.ERROR
+      });
     } finally {
       setLoading(false);
     }
@@ -20737,7 +20742,10 @@ const BellComponent = ({}) => {
         }
       });
     } catch (error) {
-      showSnackbar({ message: getErrorMessage(error), type: SnackbarType.ERROR });
+      showSnackbar({
+        message: getErrorMessage(error),
+        type: SnackbarType.ERROR
+      });
     }
   };
   return /* @__PURE__ */ jsx(
@@ -20789,7 +20797,10 @@ const BellComponent = ({}) => {
                             });
                             dispatch(ACTION_ACCOUNT.changeNotificationCount(0));
                           } catch (error) {
-                            showSnackbar({ message: getErrorMessage(error), type: SnackbarType.ERROR });
+                            showSnackbar({
+                              message: getErrorMessage(error),
+                              type: SnackbarType.ERROR
+                            });
                           }
                         }
                       }
@@ -20860,7 +20871,9 @@ const BellComponent = ({}) => {
               size: "large",
               sx: {
                 color: isSystemMonitor ? palette.background.default : palette.primary.main,
-                "&:hover": { color: isSystemMonitor ? palette.background.default : palette.primary.main }
+                "&:hover": {
+                  color: isSystemMonitor ? palette.background.default : palette.primary.main
+                }
               }
             }
           )
@@ -21244,8 +21257,32 @@ const MonitorPart = ({
 const DashboardLayout = ({
   children
 }) => {
-  useUpdateCurrentAccess();
-  return /* @__PURE__ */ jsx(MonitorPart, { children });
+  const isSystemMonitor = useIsSystemMonitor();
+  const { sidebarWidth } = useSidebar();
+  if (isSystemMonitor) return /* @__PURE__ */ jsx(MonitorPart, { children });
+  return /* @__PURE__ */ jsx(
+    Stack$1,
+    {
+      sx: {
+        minHeight: "100vh",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(Stack$1, { p: 0, gap: 0, children: /* @__PURE__ */ jsx(StackRow, { children: /* @__PURE__ */ jsx(
+        Stack$1,
+        {
+          sx: {
+            overflowY: "auto",
+            marginLeft: sidebarWidth,
+            width: "100%",
+            transition: "margin-left 0.3s ease",
+            background: "#F5F6F8",
+            minHeight: `calc(100vh - ${STYLE.HEIGHT_HEADER}px)`
+          },
+          children
+        }
+      ) }) })
+    }
+  );
 };
 const DefaultLayout = ({ children }) => {
   return /* @__PURE__ */ jsx(
@@ -26222,6 +26259,48 @@ const NotFoundPage = ({}) => {
     /* @__PURE__ */ jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
+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);
@@ -33497,48 +33576,6 @@ const MotionBox = ({
   } : {};
   return /* @__PURE__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
 };
-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 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 AppGrid = ({
   apps,
   onClickItem,
@@ -33559,12 +33596,25 @@ const AppGrid = ({
   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 = (app2) => {
+    if (!app2.children?.length) {
+      return app2.path;
+    }
+    for (const i of app2.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,
@@ -33576,62 +33626,73 @@ const AppGrid = ({
         },
         children: visibleApps.map((app2, index) => {
           const isSelected = selectedAppId === app2.key;
-          return /* @__PURE__ */ jsxs(
-            MotionBox,
+          return /* @__PURE__ */ jsx(
+            Link,
             {
-              preset: "staggerItem",
-              index,
-              hover: true,
-              onClick: () => onClickItem?.(app2),
-              sx: {
-                cursor: "pointer",
-                display: "flex",
-                flex: 1,
-                alignItems: "center",
-                flexDirection: "column"
+              to: findLink(app2) || "#",
+              style: {
+                textDecoration: "none",
+                color: "inherit",
+                width: "100%"
               },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    sx: {
-                      width: iconSize,
-                      height: iconSize,
-                      borderRadius: iconRadius,
-                      mb: 1.5,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      background: getAppColor(app2.category),
-                      boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
-                    },
-                    children: app2.icon.startsWith("/") && /* @__PURE__ */ jsx(
-                      ImageElement,
+              children: /* @__PURE__ */ jsxs(
+                MotionBox,
+                {
+                  preset: "staggerItem",
+                  index,
+                  hover: true,
+                  onClick: () => onClickItem?.(app2),
+                  sx: {
+                    cursor: "pointer",
+                    display: "flex",
+                    flex: 1,
+                    alignItems: "center",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: {
+                          width: iconSize,
+                          height: iconSize,
+                          borderRadius: iconRadius,
+                          mb: 1.5,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          background: getAppColor(app2.category),
+                          boxShadow: isSelected ? `0 0 0 1px ${theme.palette.primary.main}, ${iconShadow}` : iconShadow
+                        },
+                        children: app2.icon.startsWith("/") && /* @__PURE__ */ jsx(
+                          ImageElement,
+                          {
+                            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
+                            url: app2.icon,
+                            sizeType: ImageSizeType.SQUARE
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
                       {
-                        sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
-                        url: app2.icon,
-                        sizeType: ImageSizeType.SQUARE
+                        variant: titleVariant,
+                        sx: { color: titleColor ?? theme.palette.common.white },
+                        children: app2.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: captionVariant,
+                        sx: { color: captionColor ?? theme.palette.common.white },
+                        children: app2.caption
                       }
                     )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: titleVariant,
-                    sx: { color: titleColor ?? theme.palette.common.white },
-                    children: app2.title
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: captionVariant,
-                    sx: { color: captionColor ?? theme.palette.common.white },
-                    children: app2.caption
-                  }
-                )
-              ]
+                  ]
+                }
+              )
             },
             app2.key
           );
@@ -33714,143 +33775,6 @@ const AppGrid = ({
     ] })
   ] });
 };
-const SystemMonitorScreen = () => {
-  const theme = useTheme();
-  useNavigate();
-  const dispatch = useAppDispatch();
-  const [tab, setTab] = useState(AppCategory.ALL);
-  const listApp = useApps(tab);
-  const currentApp = useActiveSidebar();
-  return /* @__PURE__ */ jsx(
-    MotionBox,
-    {
-      preset: "fadeInUp",
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        position: "relative",
-        top: 150
-      },
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          sx: {
-            width: 865,
-            gap: 6.25,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "flex-start"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: {
-                  display: "flex",
-                  gap: PADDING_GAP_TAB,
-                  width: "100%",
-                  justifyContent: "flex-start"
-                },
-                children: [
-                  { key: AppCategory.ALL, label: "Tất Cả" },
-                  { key: AppCategory.HRM, label: "HRM" },
-                  { key: AppCategory.WORKFLOW, label: "Workflow Engine" },
-                  { key: AppCategory.PLATFORM_INFO, label: "Platform & Info" }
-                ].map((t) => /* @__PURE__ */ jsxs(
-                  MotionBox,
-                  {
-                    sx: { position: "relative" },
-                    preset: "tabUnderline",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          onClick: () => setTab(t.key),
-                          sx: {
-                            cursor: "pointer",
-                            color: tab === t.key ? theme.palette.common.white : theme.palette.grey[300]
-                          },
-                          children: t.label
-                        }
-                      ),
-                      tab === t.key && /* @__PURE__ */ jsx(
-                        MotionBox,
-                        {
-                          preset: "tabUnderline",
-                          sx: {
-                            position: "absolute",
-                            left: 0,
-                            right: 0,
-                            height: 2,
-                            backgroundColor: theme.palette.common.white,
-                            transformOrigin: "left"
-                          },
-                          children: /* @__PURE__ */ jsx("div", {})
-                        }
-                      )
-                    ]
-                  },
-                  t.key
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsx(
-              AppGrid,
-              {
-                apps: listApp,
-                columns: 5,
-                iconSize: 80,
-                iconRadius: 7,
-                gap: PADDING_GAP_TAB,
-                selectedAppId: currentApp?.key,
-                onClickItem: async (app2) => {
-                  await dispatch(
-                    ACTION_ACCOUNT.updateCurrentAccess(app2.key)
-                  ).unwrap();
-                }
-              }
-            ) }, tab)
-          ]
-        }
-      )
-    }
-  );
-};
-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__ */ jsx(Navigate, { to: PAGE.DASHBOARD.path });
-  if (type === RouteType.PROTECTED) {
-    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__ */ jsx(Navigate, { to: PAGE.ERROR.path });
-  }
-  return /* @__PURE__ */ jsx(
-    Route,
-    {
-      path,
-      element: /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Element2, {}) }),
-      children: children && renderRoutes(children, account)
-    },
-    path
-  );
-});
-const routes = [
-  { ...PAGE.AUTH, element: AuthPage, layout: AuthLayout },
-  { ...PAGE.NOT_FOUND, element: NotFoundPage, layout: DefaultLayout },
-  { ...PAGE.ERROR, element: ErrorPage, layout: DefaultLayout },
-  // PROTECTED
-  {
-    ...PAGE.DASHBOARD,
-    element: DashboardPage,
-    layout: DashboardLayout,
-    children: [
-      { ...PAGE.DASHBOARD, element: SystemMonitorScreen }
-    ]
-  }
-];
 const AppsSidebar = ({
   isOpen,
   onClose
@@ -34093,6 +34017,217 @@ const TypographyFilter = styled$2(Typography)(({ theme }) => ({
   textWrap: "nowrap",
   padding: `0px ${STYLE.PADDING_GAP_LAYOUT}`
 }));
+const SystemMonitorScreen = () => {
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+  const [tab, setTab] = useState(AppCategory.ALL);
+  const user = useSelector((state) => state.account?.user);
+  const listApp = useApps(tab);
+  const currentApp = useActiveSidebar();
+  const checkUserNotOrg = useMemo(
+    () => !user?.userOrgUnitPositions?.length || user.userOrgUnitPositions.some((pos) => !pos.orgUnit || !pos.position),
+    [user]
+  );
+  if (checkUserNotOrg) {
+    return /* @__PURE__ */ jsx(
+      MotionBox,
+      {
+        preset: "fadeInUp",
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          top: 150,
+          minHeight: "400px"
+        },
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              padding: 4,
+              borderRadius: 2,
+              backgroundColor: theme.palette.background.paper,
+              boxShadow: theme.shadows[4],
+              maxWidth: 500
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "h6",
+                  sx: {
+                    color: theme.palette.error.main,
+                    marginBottom: 2,
+                    fontWeight: 600
+                  },
+                  children: "Thông báo"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    color: theme.palette.text.secondary,
+                    lineHeight: 1.6,
+                    marginBottom: 3
+                  },
+                  children: "Bạn chưa có người quản lý trực tiếp. Vui lòng liên hệ quản trị viên để được hỗ trợ."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: theme.palette.text.disabled,
+                    fontStyle: "italic"
+                  },
+                  children: "Hệ thống sẽ tự động cập nhật khi bạn được phân quyền."
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MotionBox,
+    {
+      preset: "fadeInUp",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        top: 150
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            width: 865,
+            gap: 6.25,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  gap: PADDING_GAP_TAB,
+                  width: "100%",
+                  justifyContent: "flex-start"
+                },
+                children: [
+                  { key: AppCategory.ALL, label: "Tất Cả" },
+                  { key: AppCategory.HRM, label: "HRM" },
+                  { key: AppCategory.WORKFLOW, label: "Workflow Engine" },
+                  { key: AppCategory.PLATFORM_INFO, label: "Platform & Info" }
+                ].map((t) => /* @__PURE__ */ jsxs(
+                  MotionBox,
+                  {
+                    sx: { position: "relative" },
+                    preset: "tabUnderline",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          onClick: () => setTab(t.key),
+                          sx: {
+                            cursor: "pointer",
+                            color: tab === t.key ? theme.palette.common.white : theme.palette.grey[300]
+                          },
+                          children: t.label
+                        }
+                      ),
+                      tab === t.key && /* @__PURE__ */ jsx(
+                        MotionBox,
+                        {
+                          preset: "tabUnderline",
+                          sx: {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            height: 2,
+                            backgroundColor: theme.palette.common.white,
+                            transformOrigin: "left"
+                          },
+                          children: /* @__PURE__ */ jsx("div", {})
+                        }
+                      )
+                    ]
+                  },
+                  t.key
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(MotionBox, { preset: "tabContent", children: /* @__PURE__ */ jsx(
+              AppGrid,
+              {
+                apps: listApp,
+                columns: 5,
+                iconSize: 80,
+                iconRadius: 7,
+                gap: PADDING_GAP_TAB,
+                selectedAppId: currentApp?.key,
+                onClickItem: async (app2) => {
+                  await dispatch(
+                    ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                  ).unwrap();
+                }
+              }
+            ) }, tab)
+          ]
+        }
+      )
+    }
+  );
+};
+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__ */ jsx(Navigate, { to: PAGE.DASHBOARD.path });
+  if (type === RouteType.PROTECTED) {
+    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__ */ jsx(Navigate, { to: PAGE.ERROR.path });
+  }
+  return /* @__PURE__ */ jsx(
+    Route,
+    {
+      path,
+      element: /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Element2, {}) }),
+      children: children && renderRoutes(children, account)
+    },
+    path
+  );
+});
+const routes = [
+  { ...PAGE.AUTH, element: AuthPage, layout: AuthLayout },
+  { ...PAGE.NOT_FOUND, element: NotFoundPage, layout: DefaultLayout },
+  { ...PAGE.ERROR, element: ErrorPage, layout: DefaultLayout },
+  // PROTECTED
+  {
+    ...PAGE.DASHBOARD,
+    element: DashboardPage,
+    layout: DashboardLayout,
+    children: [
+      { ...PAGE.DASHBOARD, element: SystemMonitorScreen }
+    ]
+  }
+];
 export {
   ALLOW_USER_TYPES,
   ANIMATION_TIME,