sevago-sso-fe 1.0.84 → 1.0.86

package/dist/index.cjs.js

@@ -5,8 +5,8 @@ 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");
+const system = require("@mui/system");
 require("@emotion/react");
 const reactRouterDom = require("react-router-dom");
 const formik = require("formik");
@@ -6780,6 +6780,101 @@ const MotionBox = ({
   } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { ...motionProps, ...getAnimationProps(), ...hoverProps, onClick, style: { ...sx }, children });
 };
+const ArrowTooltip = styled$2(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
+  [`& .${material.tooltipClasses.arrow}`]: {
+    color: "white"
+  }
+}));
+const AvatarElement = ({
+  url,
+  sx = {},
+  size = "medium",
+  tooltipContent,
+  ...rest
+}) => {
+  if (tooltipContent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      material.Avatar,
+      {
+        ...rest,
+        src: url || "",
+        sx: {
+          ...MAP_SIZE[size],
+          bgcolor: "primary.main",
+          ...sx,
+          cursor: "pointer"
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Avatar,
+    {
+      ...rest,
+      src: url || "",
+      sx: {
+        ...MAP_SIZE[size],
+        bgcolor: "primary.main",
+        ...sx,
+        cursor: "pointer"
+      }
+    }
+  );
+};
+const OnlineBadge = styled(material.Badge)(({ theme }) => ({
+  "& .MuiBadge-badge": {
+    backgroundColor: COLOR_CONSTANT.success,
+    color: COLOR_CONSTANT.success,
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    "&::after": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      animation: "ripple 1.2s infinite ease-in-out",
+      border: "1px solid currentColor",
+      content: '""'
+    }
+  },
+  "@keyframes ripple": {
+    "0%": {
+      transform: "scale(.8)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "scale(2.4)",
+      opacity: 0
+    }
+  }
+}));
+const AvatarOnlineStatusElement = ({
+  url,
+  size = "extra_large",
+  online = false,
+  children
+}) => {
+  if (online) {
+    return /* @__PURE__ */ jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url || void 0, size, sx: { backgroundColor: COLOR_CONSTANT.gray2 }, children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Badge,
+    {
+      overlap: "circular",
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      variant: "dot",
+      sx: {
+        "& .MuiBadge-badge": {
+          backgroundColor: COLOR_CONSTANT.gray4,
+          color: COLOR_CONSTANT.gray4,
+          boxShadow: (theme) => `0 0 0 2px ${theme.palette.background.paper}`
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url || void 0, size, sx: { backgroundColor: COLOR_CONSTANT.gray2 }, children })
+    }
+  );
+};
 const StackRow = styled(material.Stack)(() => ({
   flexDirection: "row"
 }));
@@ -7213,331 +7308,35 @@ 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(system.Stack, { sx: { flexDirection: direction }, 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
-          }
-        )
-      }
-    ),
-    showNameApps && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: titleVariant, sx: { color: titleColor }, children: app.content })
-  ] });
-};
-const AppGrid = ({
-  apps,
-  columns = 5,
-  rows = 3,
-  iconSize = 80,
-  iconRadius = 7,
-  gap: gap2 = PADDING_GAP_ITEM,
-  titleVariant = "subtitle1",
-  titleColor,
-  showPagination = true,
-  onClickApp,
-  isShowAppHidden = false
+const AvatarUserInfo = ({
+  name,
+  url,
+  positions = [],
+  maxWidth: maxWidth2 = "440px",
+  isTag = false,
+  sxName,
+  sxPosition,
+  sizeAvatar = "large"
 }) => {
-  const theme = useTheme();
-  const pageSize = Math.max(1, columns * Math.max(1, rows));
-  const totalPages = Math.max(1, Math.ceil(apps.length / pageSize));
-  const [page, setPage] = React.useState(0);
-  React.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 placeholdersCount = isShowAppHidden ? Math.max(0, pageSize - visibleApps.length) : 0;
-  const placeholderHeight = isShowAppHidden ? iconSize + 36.5 : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Box,
-      {
-        sx: {
-          display: "grid",
-          gridTemplateColumns: `repeat(${columns}, 1fr)`,
-          gap: gap2
-        },
-        children: [
-          visibleApps.map((app, index) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              MotionBox,
-              {
-                preset: "staggerItem",
-                index,
-                hover: true,
-                sx: {
-                  cursor: "pointer",
-                  display: "flex",
-                  flex: 1,
-                  alignItems: "center",
-                  flexDirection: "column"
-                },
-                onClick: () => onClickApp(app),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  AppGridItem,
-                  {
-                    app,
-                    iconSize,
-                    iconRadius,
-                    titleVariant,
-                    titleColor: titleColor ?? theme.palette.common.white
-                  }
-                )
-              },
-              index
-            );
-          }),
-          placeholdersCount > 0 && Array.from({ length: placeholdersCount }).map((_, fillerIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              sx: {
-                visibility: "hidden",
-                width: 1,
-                minHeight: placeholderHeight
-              }
-            },
-            `placeholder-${fillerIndex}`
-          ))
-        ]
-      }
-    ),
-    showPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      page === totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          size: "small",
-          onClick: () => setPage((p) => Math.max(0, p - 1)),
-          disabled: page === 0,
-          sx: {
-            position: "absolute",
-            top: "50%",
-            left: -30,
-            transform: "translateY(-120%)",
-            color: theme.palette.divider
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconLeft, {})
-        }
-      ),
-      page !== totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
+  const { palette } = material.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { alignItems: "center", gap: PADDING_GAP_ITEM }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url, size: sizeAvatar }),
+    positions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { sx: { gap: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
         {
-          size: "small",
-          onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
-          disabled: page === totalPages - 1,
           sx: {
-            position: "absolute",
-            top: "50%",
-            right: -30,
-            transform: "translateY(-120%)",
-            color: theme.palette.divider
+            fontWeight: "600",
+            fontSize: "14px",
+            lineHeight: "20px",
+            ...getLimitLineCss(1),
+            ...sxName
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(IconRight, {})
+          children: name
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        material.Box,
-        {
-          sx: {
-            mt: 2,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: PADDING_GAP_BUTTON,
-                px: PADDING_GAP_BUTTON,
-                py: PADDING_GAP_ITEM_SMALL,
-                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
-                backgroundColor: "rgba(255,255,255,0.15)"
-              },
-              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                material.Box,
-                {
-                  onClick: () => setPage(i),
-                  sx: {
-                    height: 10,
-                    borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
-                    cursor: "pointer",
-                    transition: "width 0.3s ease",
-                    width: i === page ? "40px" : "10px",
-                    backgroundColor: i === page ? theme.palette.common.white : "rgba(255,255,255,0.35)"
-                  }
-                },
-                i
-              ))
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-};
-const BannerComponent = ({ url }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: ANIMATION_TIME, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    ImageElement,
-    {
-      url,
-      sx: {
-        borderRadius: BORDER_RADIUS_ELEMENT,
-        maxWidth: "100%",
-        width: "100%",
-        height: "auto"
-      }
-    }
-  ) }) });
-};
-const ArrowTooltip = styled$2(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ...props, arrow: true, classes: { popper: className } }))(() => ({
-  [`& .${material.tooltipClasses.arrow}`]: {
-    color: "white"
-  }
-}));
-const AvatarElement = ({
-  url,
-  sx = {},
-  size = "medium",
-  tooltipContent,
-  ...rest
-}) => {
-  if (tooltipContent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ArrowTooltip, { title: tooltipContent, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      material.Avatar,
-      {
-        ...rest,
-        src: url || "",
-        sx: {
-          ...MAP_SIZE[size],
-          bgcolor: "primary.main",
-          ...sx,
-          cursor: "pointer"
-        }
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Avatar,
-    {
-      ...rest,
-      src: url || "",
-      sx: {
-        ...MAP_SIZE[size],
-        bgcolor: "primary.main",
-        ...sx,
-        cursor: "pointer"
-      }
-    }
-  );
-};
-const OnlineBadge = styled(material.Badge)(({ theme }) => ({
-  "& .MuiBadge-badge": {
-    backgroundColor: COLOR_CONSTANT.success,
-    color: COLOR_CONSTANT.success,
-    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
-    "&::after": {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      borderRadius: "50%",
-      animation: "ripple 1.2s infinite ease-in-out",
-      border: "1px solid currentColor",
-      content: '""'
-    }
-  },
-  "@keyframes ripple": {
-    "0%": {
-      transform: "scale(.8)",
-      opacity: 1
-    },
-    "100%": {
-      transform: "scale(2.4)",
-      opacity: 0
-    }
-  }
-}));
-const AvatarOnlineStatusElement = ({
-  url,
-  size = "extra_large",
-  online = false,
-  children
-}) => {
-  if (online) {
-    return /* @__PURE__ */ jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url || void 0, size, sx: { backgroundColor: COLOR_CONSTANT.gray2 }, children }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Badge,
-    {
-      overlap: "circular",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      variant: "dot",
-      sx: {
-        "& .MuiBadge-badge": {
-          backgroundColor: COLOR_CONSTANT.gray4,
-          color: COLOR_CONSTANT.gray4,
-          boxShadow: (theme) => `0 0 0 2px ${theme.palette.background.paper}`
-        }
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url: url || void 0, size, sx: { backgroundColor: COLOR_CONSTANT.gray2 }, children })
-    }
-  );
-};
-const AvatarUserInfo = ({
-  name,
-  url,
-  positions = [],
-  maxWidth: maxWidth2 = "440px",
-  isTag = false,
-  sxName,
-  sxPosition,
-  sizeAvatar = "large"
-}) => {
-  const { palette } = material.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(StackRow, { sx: { alignItems: "center", gap: PADDING_GAP_ITEM }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(AvatarElement, { url, size: sizeAvatar }),
-    positions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { sx: { gap: 0 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
-        {
-          sx: {
-            fontWeight: "600",
-            fontSize: "14px",
-            lineHeight: "20px",
-            ...getLimitLineCss(1),
-            ...sxName
-          },
-          children: name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
+        material.Typography,
         {
           variant: "caption",
           sx: {
@@ -9497,6 +9296,206 @@ const WrapperElement = ({
     }
   ) });
 };
+const AppGridItem = ({
+  app,
+  iconSize,
+  iconRadius,
+  titleVariant = "subtitle1",
+  titleColor,
+  showNameApps = true,
+  direction = "column"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { 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,
+  rows = 3,
+  iconSize = 80,
+  iconRadius = 7,
+  gap: gap2 = PADDING_GAP_ITEM,
+  titleVariant = "subtitle1",
+  titleColor,
+  showPagination = true,
+  onClickApp,
+  isShowAppHidden = false
+}) => {
+  const theme = useTheme();
+  const pageSize = Math.max(1, columns * Math.max(1, rows));
+  const totalPages = Math.max(1, Math.ceil(apps.length / pageSize));
+  const [page, setPage] = React.useState(0);
+  React.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 placeholdersCount = isShowAppHidden ? Math.max(0, pageSize - visibleApps.length) : 0;
+  const placeholderHeight = isShowAppHidden ? iconSize + 36.5 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gap: gap2
+        },
+        children: [
+          visibleApps.map((app, index) => {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              MotionBox,
+              {
+                preset: "staggerItem",
+                index,
+                hover: true,
+                sx: {
+                  cursor: "pointer",
+                  display: "flex",
+                  flex: 1,
+                  alignItems: "center",
+                  flexDirection: "column"
+                },
+                onClick: () => onClickApp(app),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  AppGridItem,
+                  {
+                    app,
+                    iconSize,
+                    iconRadius,
+                    titleVariant,
+                    titleColor: titleColor ?? theme.palette.common.white
+                  }
+                )
+              },
+              index
+            );
+          }),
+          placeholdersCount > 0 && Array.from({ length: placeholdersCount }).map((_, fillerIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                visibility: "hidden",
+                width: 1,
+                minHeight: placeholderHeight
+              }
+            },
+            `placeholder-${fillerIndex}`
+          ))
+        ]
+      }
+    ),
+    showPagination && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      page === totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: () => setPage((p) => Math.max(0, p - 1)),
+          disabled: page === 0,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            left: -30,
+            transform: "translateY(-120%)",
+            color: theme.palette.divider
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconLeft, {})
+        }
+      ),
+      page !== totalPages - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        material.IconButton,
+        {
+          size: "small",
+          onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
+          disabled: page === totalPages - 1,
+          sx: {
+            position: "absolute",
+            top: "50%",
+            right: -30,
+            transform: "translateY(-120%)",
+            color: theme.palette.divider
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconRight, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          sx: {
+            mt: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: PADDING_GAP_BUTTON,
+                px: PADDING_GAP_BUTTON,
+                py: PADDING_GAP_ITEM_SMALL,
+                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                backgroundColor: "rgba(255,255,255,0.15)"
+              },
+              children: Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  onClick: () => setPage(i),
+                  sx: {
+                    height: 10,
+                    borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                    cursor: "pointer",
+                    transition: "width 0.3s ease",
+                    width: i === page ? "40px" : "10px",
+                    backgroundColor: i === page ? theme.palette.common.white : "rgba(255,255,255,0.35)"
+                  }
+                },
+                i
+              ))
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+const BannerComponent = ({ url }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: true, timeout: ANIMATION_TIME, children: /* @__PURE__ */ jsxRuntime.jsx(material.Stack, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ImageElement,
+    {
+      url,
+      sx: {
+        borderRadius: BORDER_RADIUS_ELEMENT,
+        maxWidth: "100%",
+        width: "100%",
+        height: "auto"
+      }
+    }
+  ) }) });
+};
 const Breadcrumbs = ({ content, showBackButton = true, onBack, sxLabel }) => {
   const navigate = reactRouterDom.useNavigate();
   const handleBack = () => {
@@ -9790,7 +9789,7 @@ const SystemMonitorSidebarPart = ({
   blacklist,
   env,
   onClickApp,
-  showNameApps = false,
+  showNameApps,
   direction = "row"
 }) => {
   const [open, setOpen] = React.useState(false);
@@ -9806,7 +9805,7 @@ const SystemMonitorSidebarPart = ({
   }, [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 }),
+    currentApp && /* @__PURE__ */ jsxRuntime.jsx(AppGridItem, { app: currentApp, iconSize: 32, iconRadius: 3, showNameApps, direction }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AppsSidebar,
       {