sevago-sso-fe 1.0.9 → 1.0.11

package/dist/components/index.d.ts

@@ -7,5 +7,6 @@ export * from './loading';
 export * from './logo';
 export * from './motion';
 export * from './time-ago';
+export * from './sidebar';
 export * from './elements';
 export * from './styles';

package/dist/components/sidebar/apps-sidebar.component.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface AppsSidebarProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const AppsSidebar: React.FC<AppsSidebarProps>;
+export {};

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { AppsSidebar } from './apps-sidebar.component';

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
-export { useApps } from './use-apps.hook';
+export * from './use-apps.hook';
 export { useSnackbar } from './use-snackbar.hook';
 export { useTagSelector } from './use-tag-selector.hook';
 export { useUpdateCurrentAccess } from './use-update-current-access.hook';
 export { useVersionCheck } from './use-version-check.hook';
+export { useApps, useActiveSidebar, useIsSystemMonitor, useAllApps, useSidebarState, } from './use-apps.hook';

package/dist/hooks/use-apps.hook.d.ts

@@ -1,5 +1,5 @@
 import { AppCategory } from '../common/enums/app-category.enum';
-export declare const useApps: (tab: AppCategory) => import('../common/enums/app-category.enum').AppModule[];
+export declare const useApps: (tab?: AppCategory) => import('../common/enums/app-category.enum').AppModule[];
 export declare const useIsSystemMonitor: () => boolean;
 export declare const useAllApps: () => import('../common/enums/app-category.enum').AppModule[];
 export declare const useActiveSidebar: () => import('../common/enums/app-category.enum').AppModule | undefined;

package/dist/hooks/user-sidebar.d.ts

@@ -0,0 +1 @@
+export declare const useSidebar: () => any;

package/dist/index.cjs.js

@@ -12806,8 +12806,10 @@ const truncateText = (text, maxLength = 27) => {
   return `${text.substring(0, maxLength)}...`;
 };
 const timeUtils = timeUtilsMethods;
-const useApps = (tab) => {
-  const userType = reactRedux.useSelector((state) => state.account.user?.type);
+const useApps = (tab = AppCategory.ALL) => {
+  const userType = reactRedux.useSelector(
+    (state) => state.account.user?.type
+  );
   const listApp = React.useMemo(() => {
     let filteredApps = SYSTEM_MODULES.filter((app2) => {
       return app2.allowUserTypes.includes(userType);
@@ -12824,8 +12826,21 @@ const useIsSystemMonitor = () => {
   const normalize = (p) => p.replace(/\/+$/, "");
   return normalize(location2.pathname) === normalize(PAGE.DASHBOARD.path);
 };
+const useAllApps = () => {
+  const userType = reactRedux.useSelector(
+    (state) => state.account.user?.type
+  );
+  const allApps = React.useMemo(() => {
+    return SYSTEM_MODULES.filter((app2) => {
+      return app2.allowUserTypes.includes(userType);
+    });
+  }, [userType]);
+  return allApps;
+};
 const useActiveSidebar = () => {
-  const { user, current_access } = reactRedux.useSelector((state) => state.account);
+  const { user, current_access } = reactRedux.useSelector(
+    (state) => state.account
+  );
   const activeSidebar = React.useMemo(() => {
     return SYSTEM_MODULES.find(
       (it) => it.key === current_access && user && (it.allowUserTypes ? it.allowUserTypes.includes(user?.type) : true)
@@ -12833,6 +12848,18 @@ const useActiveSidebar = () => {
   }, [current_access, user]);
   return activeSidebar;
 };
+const useSidebarState = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const openSidebar = () => setIsSidebarOpen(true);
+  const closeSidebar = () => setIsSidebarOpen(false);
+  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
+  return {
+    isSidebarOpen,
+    openSidebar,
+    closeSidebar,
+    toggleSidebar
+  };
+};
 var propTypes = { exports: {} };
 var reactIs$2 = { exports: {} };
 var reactIs_production_min$1 = {};
@@ -19163,7 +19190,9 @@ const MonitorPart = ({
     }
   );
 };
-const DashboardLayout = ({ children }) => {
+const DashboardLayout = ({
+  children
+}) => {
   useUpdateCurrentAccess();
   return /* @__PURE__ */ jsxRuntime.jsx(MonitorPart, { children });
 };
@@ -24142,6 +24171,37 @@ const NotFoundPage = ({}) => {
     /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { content: "Quay lại trang chủ", fullWidth: false, onClick: () => navigate(PAGE.AUTH.path) })
   ] });
 };
+const SidebarContext = React.createContext(
+  void 0
+);
+const SidebarProvider = ({
+  children
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [activeExpandMenu, setActiveExpandMenu] = React.useState(
+    null
+  );
+  const { current_access } = reactRedux.useSelector(
+    (state) => state.account
+  );
+  React.useEffect(() => {
+    setActiveExpandMenu(null);
+  }, [current_access]);
+  const sidebarWidth = activeExpandMenu ? isCollapsed ? STYLE.WIDTH_COLLAPSE + STYLE.WIDTH_SIDEBAR_EXPAND : STYLE.WIDTH_SIDEBAR + STYLE.WIDTH_SIDEBAR_EXPAND : isCollapsed ? STYLE.WIDTH_COLLAPSE : STYLE.WIDTH_SIDEBAR;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarContext.Provider,
+    {
+      value: {
+        isCollapsed,
+        setIsCollapsed,
+        activeExpandMenu,
+        setActiveExpandMenu,
+        sidebarWidth: `${sidebarWidth}px`
+      },
+      children
+    }
+  );
+};
 const LayoutGroupContext = React.createContext({});
 function useConstant(init) {
   const ref = React.useRef(null);
@@ -31771,6 +31831,214 @@ const routes = [
     ]
   }
 ];
+const useSidebar = () => {
+  const context = React.useContext(SidebarContext);
+  if (context === void 0) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+const AppsSidebar = ({
+  isOpen,
+  onClose
+}) => {
+  const theme = useTheme();
+  const navigate = reactRouterDom.useNavigate();
+  const allApps = useApps();
+  const dispatch = useAppDispatch();
+  const currentApp = useActiveSidebar();
+  const { setActiveExpandMenu } = useSidebar();
+  const { palette } = useTheme();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        onClick: onClose,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: palette.action.selected,
+          zIndex: 100
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      MotionBox,
+      {
+        preset: "fadeInLeft",
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          height: "100vh",
+          backgroundColor: theme.palette.common.white,
+          zIndex: 100,
+          padding: PADDING_GAP_LAYOUT,
+          gap: PADDING_GAP_ITEM,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    onClick: onClose,
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.IconButton,
+                  {
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      IconElement,
+                      {
+                        icon: "home",
+                        onClick: () => {
+                          onClose();
+                          navigate(PAGE.DASHBOARD.path);
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Workflow Engine" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.WORKFLOW
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "HRM" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter((app2) => app2.category === AppCategory.HRM),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle2", children: "Platform Info" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.PLATFORM_INFO
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 const TypographyContentCaption = ({
   content,
   caption,
@@ -31817,6 +32085,7 @@ exports.ANIMATION_TIME = ANIMATION_TIME;
 exports.AppCategory = AppCategory;
 exports.AppGrid = AppGrid;
 exports.AppType = AppType;
+exports.AppsSidebar = AppsSidebar;
 exports.AuthLayout = AuthLayout;
 exports.AuthPage = AuthPage;
 exports.AuthProcess = AuthProcess;
@@ -31893,6 +32162,8 @@ exports.RouteType = RouteType;
 exports.SCALE_VALUE = SCALE_VALUE;
 exports.STYLE = STYLE;
 exports.SYSTEM_MODULES = SYSTEM_MODULES;
+exports.SidebarContext = SidebarContext;
+exports.SidebarProvider = SidebarProvider;
 exports.SmallIcon = SmallIcon;
 exports.SocketNamespace = SocketNamespace;
 exports.SocketSystemEvent = SocketSystemEvent;
@@ -32020,7 +32291,11 @@ exports.updateAccount = updateAccount$1;
 exports.updateNotification = updateNotification;
 exports.updateNotificationSetting = updateNotificationSetting;
 exports.updateUser = updateUser;
+exports.useActiveSidebar = useActiveSidebar;
+exports.useAllApps = useAllApps;
 exports.useApps = useApps;
+exports.useIsSystemMonitor = useIsSystemMonitor;
+exports.useSidebarState = useSidebarState;
 exports.useSnackbar = useSnackbar;
 exports.useTagSelector = useTagSelector;
 exports.useUpdateCurrentAccess = useUpdateCurrentAccess;