sevago-sso-fe 1.0.83 → 1.0.85

package/dist/components/app-grid/app-grid-item.component.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AppInfo } from '../../common/constant/apps.data';
+export interface AppGridItemProps {
+    app: AppInfo;
+    iconSize: number;
+    iconRadius: number;
+    titleVariant?: 'subtitle1' | 'body1' | 'caption';
+    titleColor?: string;
+    showNameApps?: boolean;
+    direction?: 'row' | 'column';
+}
+export declare const AppGridItem: React.FC<AppGridItemProps>;

package/dist/components/app-grid/index.d.ts

@@ -1 +1,2 @@
 export { AppGrid } from './app-grid.component';
+export { AppGridItem } from './app-grid-item.component';

package/dist/components/sidebar/system-monitor-sidebar.part.d.ts

@@ -4,5 +4,7 @@ export interface SystemMonitorSidebarPartProps {
     blacklist?: string[];
     env: Environment;
     onClickApp: (appInfo: AppInfo) => void;
+    showNameApps?: boolean;
+    direction?: 'row' | 'column';
 }
 export declare const SystemMonitorSidebarPart: React.FC<SystemMonitorSidebarPartProps>;

package/dist/index.cjs.js

@@ -4,10 +4,10 @@ const dayjs = require("dayjs");
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
 const React = require("react");
+const framerMotion = require("framer-motion");
 const system = require("@mui/system");
 const styled$2 = require("@emotion/styled");
 require("@emotion/react");
-const framerMotion = require("framer-motion");
 const reactRouterDom = require("react-router-dom");
 const formik = require("formik");
 function _interopNamespaceDefault(e) {
@@ -6688,6 +6688,98 @@ const IconRight = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20"
     strokeLinejoin: "round"
   }
 ) });
+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 MotionBox = ({
+  children,
+  sx,
+  onClick,
+  preset = "fadeInUp",
+  delay,
+  index,
+  hover = 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 + (delay || 0)
+          }
+        };
+      }
+      if (delay !== void 0) {
+        return {
+          ...presetConfig,
+          transition: {
+            ...presetConfig.transition,
+            delay
+          }
+        };
+      }
+      return presetConfig;
+    }
+    return {};
+  };
+  const hoverProps = hover ? {
+    whileHover: {
+      y: -4,
+      scale: 1.05,
+      transition: { duration: 0.2 }
+    }
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+};
 const StackRow = styled(material.Stack)(() => ({
   flexDirection: "row"
 }));
@@ -6860,98 +6952,6 @@ const ImageElement = ({
     )
   ] });
 };
-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 MotionBox = ({
-  children,
-  sx,
-  onClick,
-  preset = "fadeInUp",
-  delay,
-  index,
-  hover = 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 + (delay || 0)
-          }
-        };
-      }
-      if (delay !== void 0) {
-        return {
-          ...presetConfig,
-          transition: {
-            ...presetConfig.transition,
-            delay
-          }
-        };
-      }
-      return presetConfig;
-    }
-    return {};
-  };
-  const hoverProps = hover ? {
-    whileHover: {
-      y: -4,
-      scale: 1.05,
-      transition: { duration: 0.2 }
-    }
-  } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
-};
 const ImageBrand = styled(ImageElement)(({ theme }) => ({
   height: HEIGHT_ELEMENT_OTHER,
   border: `1px solid ${theme.palette.divider}`,
@@ -7213,6 +7213,38 @@ const TypographyFilter = material.styled(material.Typography)(({ theme }) => ({
   textWrap: "nowrap",
   padding: `0px ${PADDING_GAP_LAYOUT}`
 }));
+const AppGridItem = ({
+  app,
+  iconSize,
+  iconRadius,
+  titleVariant = "subtitle1",
+  titleColor,
+  showNameApps = true,
+  direction = "column"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignJustCenter, { sx: { flexDirection: direction, gap: PADDING_GAP_ITEM }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StackRowAlignJustCenter,
+      {
+        sx: {
+          width: iconSize,
+          height: iconSize,
+          borderRadius: iconRadius,
+          background: app.color
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ImageElement,
+          {
+            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
+            url: app.icon,
+            sizeType: ImageSizeType.SQUARE
+          }
+        )
+      }
+    ),
+    showNameApps && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: titleVariant, sx: { color: titleColor }, children: app.content })
+  ] });
+};
 const AppGrid = ({
   apps,
   columns = 5,
@@ -7249,7 +7281,7 @@ const AppGrid = ({
         },
         children: [
           visibleApps.map((app, index) => {
-            return /* @__PURE__ */ jsxRuntime.jsxs(
+            return /* @__PURE__ */ jsxRuntime.jsx(
               MotionBox,
               {
                 preset: "staggerItem",
@@ -7263,29 +7295,16 @@ const AppGrid = ({
                   flexDirection: "column"
                 },
                 onClick: () => onClickApp(app),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    StackRowAlignJustCenter,
-                    {
-                      sx: {
-                        width: iconSize,
-                        height: iconSize,
-                        borderRadius: iconRadius,
-                        mb: 1.5,
-                        background: app.color
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        ImageElement,
-                        {
-                          sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
-                          url: app.icon,
-                          sizeType: ImageSizeType.SQUARE
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: titleVariant, sx: { color: titleColor ?? theme.palette.common.white }, children: app.content })
-                ]
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGridItem,
+                  {
+                    app,
+                    iconSize,
+                    iconRadius,
+                    titleVariant,
+                    titleColor: titleColor ?? theme.palette.common.white
+                  }
+                )
               },
               index
             );
@@ -9769,11 +9788,24 @@ const SystemMonitorSidebarPart = ({
   position,
   blacklist,
   env,
-  onClickApp
+  onClickApp,
+  showNameApps = false,
+  direction = "row"
 }) => {
   const [open, setOpen] = React.useState(false);
+  const [currentApp, setCurrentApp] = React.useState(null);
+  React.useEffect(() => {
+    const href = window.location.href;
+    const matchedKey = Object.keys(APP_OBJ).find((key) => {
+      const app = APP_OBJ[key];
+      const target = app.path[env];
+      return !!target && href.startsWith(target);
+    });
+    setCurrentApp(matchedKey ? APP_OBJ[matchedKey] : null);
+  }, [window.location.href]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ImageElement, { url: IconAppsSidebar, onClick: () => setOpen(true), sizeType: ImageSizeType.SQUARE }),
+    currentApp && /* @__PURE__ */ jsxRuntime.jsx(AppGridItem, { app: currentApp, iconSize: 32, iconRadius: 6, showNameApps, direction }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AppsSidebar,
       {
@@ -9867,6 +9899,7 @@ const SystemMonitorScreen = ({ blacklist, env, onClickApp }) => {
 exports.APP_GROUP_COLOR = APP_GROUP_COLOR;
 exports.APP_OBJ = APP_OBJ;
 exports.AppGrid = AppGrid;
+exports.AppGridItem = AppGridItem;
 exports.AppGroup = AppGroup;
 exports.AppType = AppType;
 exports.AppsSidebar = AppsSidebar;