sevago-sso-fe 1.0.9 → 1.0.10

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, pers
 import { createAsyncThunk, createSlice, configureStore, combineReducers } from "@reduxjs/toolkit";
 import { useDispatch, useSelector } from "react-redux";
 import * as React from "react";
-import React__default, { useMemo, createContext, useContext, useState, useEffect, useCallback, forwardRef, useImperativeHandle, createElement, Children, useRef, useLayoutEffect, Fragment as Fragment$1, useId, useInsertionEffect, Component as Component$1 } from "react";
+import React__default, { useMemo, useState, createContext, useContext, useEffect, useCallback, forwardRef, useImperativeHandle, createElement, Children, useRef, useLayoutEffect, Fragment as Fragment$1, useId, useInsertionEffect, Component as Component$1 } from "react";
 import { useLocation, useNavigate, Outlet, Route, Navigate } from "react-router-dom";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Stack as Stack$1, styled as styled$2, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$2, Skeleton, Box, Icon, Tooltip, tooltipClasses, Avatar, Typography, ClickAwayListener, Fade, Badge, List, ListItem, FormControl, InputLabel, RadioGroup, FormControlLabel, Radio, Menu, Divider, MenuItem, Button, IconButton, TextField, InputAdornment } from "@mui/material";
@@ -12788,8 +12788,10 @@ const truncateText = (text, maxLength = 27) => {
   return `${text.substring(0, maxLength)}...`;
 };
 const timeUtils = timeUtilsMethods;
-const useApps = (tab) => {
-  const userType = useSelector((state) => state.account.user?.type);
+const useApps = (tab = AppCategory.ALL) => {
+  const userType = useSelector(
+    (state) => state.account.user?.type
+  );
   const listApp = useMemo(() => {
     let filteredApps = SYSTEM_MODULES.filter((app2) => {
       return app2.allowUserTypes.includes(userType);
@@ -12806,8 +12808,21 @@ const useIsSystemMonitor = () => {
   const normalize = (p) => p.replace(/\/+$/, "");
   return normalize(location2.pathname) === normalize(PAGE.DASHBOARD.path);
 };
+const useAllApps = () => {
+  const userType = useSelector(
+    (state) => state.account.user?.type
+  );
+  const allApps = useMemo(() => {
+    return SYSTEM_MODULES.filter((app2) => {
+      return app2.allowUserTypes.includes(userType);
+    });
+  }, [userType]);
+  return allApps;
+};
 const useActiveSidebar = () => {
-  const { user, current_access } = useSelector((state) => state.account);
+  const { user, current_access } = useSelector(
+    (state) => state.account
+  );
   const activeSidebar = useMemo(() => {
     return SYSTEM_MODULES.find(
       (it) => it.key === current_access && user && (it.allowUserTypes ? it.allowUserTypes.includes(user?.type) : true)
@@ -12815,6 +12830,18 @@ const useActiveSidebar = () => {
   }, [current_access, user]);
   return activeSidebar;
 };
+const useSidebarState = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const openSidebar = () => setIsSidebarOpen(true);
+  const closeSidebar = () => setIsSidebarOpen(false);
+  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
+  return {
+    isSidebarOpen,
+    openSidebar,
+    closeSidebar,
+    toggleSidebar
+  };
+};
 var propTypes = { exports: {} };
 var reactIs$2 = { exports: {} };
 var reactIs_production_min$1 = {};
@@ -19145,7 +19172,9 @@ const MonitorPart = ({
     }
   );
 };
-const DashboardLayout = ({ children }) => {
+const DashboardLayout = ({
+  children
+}) => {
   useUpdateCurrentAccess();
   return /* @__PURE__ */ jsx(MonitorPart, { children });
 };
@@ -31753,6 +31782,217 @@ const routes = [
     ]
   }
 ];
+const SidebarContext = createContext(
+  void 0
+);
+const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (context === void 0) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+const AppsSidebar = ({
+  isOpen,
+  onClose
+}) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const allApps = useApps();
+  const dispatch = useAppDispatch();
+  const currentApp = useActiveSidebar();
+  const { setActiveExpandMenu } = useSidebar();
+  const { palette } = useTheme();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        onClick: onClose,
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: palette.action.selected,
+          zIndex: 100
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      MotionBox,
+      {
+        preset: "fadeInLeft",
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          height: "100vh",
+          backgroundColor: theme.palette.common.white,
+          zIndex: 100,
+          padding: PADDING_GAP_LAYOUT,
+          gap: PADDING_GAP_ITEM,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: onClose,
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsx(IconElement, { icon: "close" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    sx: {
+                      color: theme.palette.grey[600],
+                      "&:hover": { backgroundColor: theme.palette.grey[100] }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      IconElement,
+                      {
+                        icon: "home",
+                        onClick: () => {
+                          onClose();
+                          navigate(PAGE.DASHBOARD.path);
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Workflow Engine" }),
+                /* @__PURE__ */ jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.WORKFLOW
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "HRM" }),
+                /* @__PURE__ */ jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter((app2) => app2.category === AppCategory.HRM),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                gap: PADDING_GAP_ITEM,
+                display: "flex",
+                flexDirection: "column"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Platform Info" }),
+                /* @__PURE__ */ jsx(
+                  AppGrid,
+                  {
+                    apps: allApps.filter(
+                      (app2) => app2.category === AppCategory.PLATFORM_INFO
+                    ),
+                    columns: 4,
+                    iconSize: 60,
+                    iconRadius: 5.5,
+                    gap: PADDING_GAP_ITEM,
+                    titleVariant: "body1",
+                    captionVariant: "caption",
+                    titleColor: theme.palette.grey[800],
+                    captionColor: theme.palette.grey[600],
+                    selectedAppId: currentApp?.key,
+                    onClickItem: async (app2) => {
+                      await dispatch(
+                        ACTION_ACCOUNT.updateCurrentAccess(app2.key)
+                      ).unwrap();
+                      setActiveExpandMenu(null);
+                      onClose();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 const TypographyContentCaption = ({
   content,
   caption,
@@ -31800,6 +32040,7 @@ export {
   AppCategory,
   AppGrid,
   AppType,
+  AppsSidebar,
   AuthLayout,
   AuthPage,
   AuthProcess,
@@ -32003,7 +32244,11 @@ export {
   updateNotification,
   updateNotificationSetting,
   updateUser,
+  useActiveSidebar,
+  useAllApps,
   useApps,
+  useIsSystemMonitor,
+  useSidebarState,
   useSnackbar,
   useTagSelector,
   useUpdateCurrentAccess,