sevago-sso-fe 1.0.83 → 1.0.85

package/dist/index.esm.js

@@ -3,10 +3,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme as useTheme$2, Skeleton, Box, styled as styled$3, InputLabel, Link, Typography, Paper, IconButton, Fade, Tooltip, tooltipClasses, Avatar, Badge, Icon, Tabs, Tab, CircularProgress, Button, FormControlLabel, Checkbox, Dialog, DialogTitle, DialogContent, DialogActions, Collapse, FormControl, Select, MenuItem, Pagination, RadioGroup, Radio, ClickAwayListener } from "@mui/material";
 import * as React from "react";
 import React__default, { useState, useId, useEffect, useRef, Fragment as Fragment$1 } from "react";
+import { motion, LayoutGroup, AnimatePresence, MotionConfig } from "framer-motion";
 import { unstable_createGetCssVar, createSpacing as createSpacing$1, useTheme as useTheme$1, Stack as Stack$1, Box as Box$1 } from "@mui/system";
 import styled$2 from "@emotion/styled";
 import "@emotion/react";
-import { motion, LayoutGroup, AnimatePresence, MotionConfig } from "framer-motion";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Form } from "formik";
 const sevagoEHiringIcon = "data:image/svg+xml,%3csvg%20width='54'%20height='54'%20viewBox='0%200%2054%2054'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_d_2505_587)'%3e%3cpath%20d='M26.9997%202C39.702%202%2049.9992%2012.2973%2049.9993%2024.9997C49.9993%2029.9065%2048.4622%2034.454%2045.844%2038.1882L48.8273%2041.1715L48.9707%2041.3213C50.3888%2042.8915%2050.3405%2045.3143%2048.8273%2046.8275C47.3143%2048.3405%2044.8913%2048.389%2043.3212%2046.9707L43.1715%2046.8275L40.188%2043.844C36.454%2046.4623%2031.9065%2047.9993%2026.9997%2047.9993C14.2972%2047.9992%204%2037.7022%204%2024.9997C4.00017%2012.2973%2014.2973%202.00017%2026.9997%202ZM26.9997%208.02533C17.6255%208.0255%2010.0255%2015.6255%2010.0253%2024.9997C10.0253%2034.374%2017.6253%2041.9738%2026.9997%2041.974C36.374%2041.974%2043.9738%2034.374%2043.9738%2024.9997C43.9737%2015.6255%2036.3738%208.02533%2026.9997%208.02533ZM29.1008%2027C30.9238%2027.0327%2032.7062%2027.5537%2034.2685%2028.5103C34.6045%2028.7162%2034.9277%2028.941%2035.2368%2029.1827C37.3037%2030.7973%2037.0545%2033.918%2034.9147%2035.4342C34.3567%2035.8295%2033.7702%2036.1848%2033.1585%2036.4955C31.266%2037.4562%2029.1842%2037.9708%2027.0695%2037.9993C24.9552%2038.0278%2022.8615%2037.569%2020.9448%2036.6598C20.3177%2036.3623%2019.7142%2036.0187%2019.1398%2035.6328C16.975%2034.1778%2016.6373%2031.0858%2018.6353%2029.4088C18.9863%2029.1143%2019.3567%2028.8417%2019.7453%2028.595C21.341%2027.5827%2023.1778%2027.0317%2025.0578%2027H29.1008ZM26.9997%2012C28.5908%2012%2030.1175%2012.6327%2031.2428%2013.7578C32.3677%2014.8828%2033.0003%2016.4083%2033.0005%2017.9993C33.0005%2019.5907%2032.3678%2021.1173%2031.2428%2022.2425C30.1175%2023.3677%2028.5908%2024.0003%2026.9997%2024.0003C25.4085%2024.0002%2023.8832%2023.3675%2022.758%2022.2425C21.6328%2021.1173%2021.0002%2019.5907%2021.0002%2017.9993C21.0005%2016.4083%2021.633%2014.8828%2022.758%2013.7578C23.8832%2012.6328%2025.4085%2012.0002%2026.9997%2012Z'%20fill='white'%20/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_d_2505_587'%20x='0'%20y='0'%20width='53.9994'%20height='53.9995'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'%20/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'%20/%3e%3cfeOffset%20dy='2'%20/%3e%3cfeGaussianBlur%20stdDeviation='2'%20/%3e%3cfeComposite%20in2='hardAlpha'%20operator='out'%20/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.182083%200%200%200%200%200.243258%200%200%200%200%200.316667%200%200%200%200.16%200'%20/%3e%3cfeBlend%20mode='normal'%20in2='BackgroundImageFix'%20result='effect1_dropShadow_2505_587'%20/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='effect1_dropShadow_2505_587'%20result='shape'%20/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e";
@@ -6670,6 +6670,98 @@ const IconRight = (props) => /* @__PURE__ */ jsx("svg", { width: "20", height: "
     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__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
+};
 const StackRow = styled(Stack)(() => ({
   flexDirection: "row"
 }));
@@ -6842,98 +6934,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__ */ jsx(motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
-};
 const ImageBrand = styled(ImageElement)(({ theme }) => ({
   height: HEIGHT_ELEMENT_OTHER,
   border: `1px solid ${theme.palette.divider}`,
@@ -7195,6 +7195,38 @@ const TypographyFilter = styled$3(Typography)(({ theme }) => ({
   textWrap: "nowrap",
   padding: `0px ${PADDING_GAP_LAYOUT}`
 }));
+const AppGridItem = ({
+  app,
+  iconSize,
+  iconRadius,
+  titleVariant = "subtitle1",
+  titleColor,
+  showNameApps = true,
+  direction = "column"
+}) => {
+  return /* @__PURE__ */ jsxs(StackRowAlignJustCenter, { sx: { flexDirection: direction, gap: PADDING_GAP_ITEM }, children: [
+    /* @__PURE__ */ jsx(
+      StackRowAlignJustCenter,
+      {
+        sx: {
+          width: iconSize,
+          height: iconSize,
+          borderRadius: iconRadius,
+          background: app.color
+        },
+        children: /* @__PURE__ */ jsx(
+          ImageElement,
+          {
+            sx: { width: iconSize * 0.56, height: iconSize * 0.56 },
+            url: app.icon,
+            sizeType: ImageSizeType.SQUARE
+          }
+        )
+      }
+    ),
+    showNameApps && /* @__PURE__ */ jsx(Typography, { variant: titleVariant, sx: { color: titleColor }, children: app.content })
+  ] });
+};
 const AppGrid = ({
   apps,
   columns = 5,
@@ -7231,7 +7263,7 @@ const AppGrid = ({
         },
         children: [
           visibleApps.map((app, index) => {
-            return /* @__PURE__ */ jsxs(
+            return /* @__PURE__ */ jsx(
               MotionBox,
               {
                 preset: "staggerItem",
@@ -7245,29 +7277,16 @@ const AppGrid = ({
                   flexDirection: "column"
                 },
                 onClick: () => onClickApp(app),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    StackRowAlignJustCenter,
-                    {
-                      sx: {
-                        width: iconSize,
-                        height: iconSize,
-                        borderRadius: iconRadius,
-                        mb: 1.5,
-                        background: app.color
-                      },
-                      children: /* @__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.content })
-                ]
+                children: /* @__PURE__ */ jsx(
+                  AppGridItem,
+                  {
+                    app,
+                    iconSize,
+                    iconRadius,
+                    titleVariant,
+                    titleColor: titleColor ?? theme.palette.common.white
+                  }
+                )
               },
               index
             );
@@ -9751,11 +9770,24 @@ const SystemMonitorSidebarPart = ({
   position,
   blacklist,
   env,
-  onClickApp
+  onClickApp,
+  showNameApps = false,
+  direction = "row"
 }) => {
   const [open, setOpen] = useState(false);
+  const [currentApp, setCurrentApp] = useState(null);
+  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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ImageElement, { url: IconAppsSidebar, onClick: () => setOpen(true), sizeType: ImageSizeType.SQUARE }),
+    currentApp && /* @__PURE__ */ jsx(AppGridItem, { app: currentApp, iconSize: 32, iconRadius: 6, showNameApps, direction }),
     /* @__PURE__ */ jsx(
       AppsSidebar,
       {
@@ -9850,6 +9882,7 @@ export {
   APP_GROUP_COLOR,
   APP_OBJ,
   AppGrid,
+  AppGridItem,
   AppGroup,
   AppType,
   AppsSidebar,