strapi-plugin-magic-sessionmanager 4.2.16 → 4.3.1

package/dist/_chunks/{Analytics-BC4jdzBT.mjs → Analytics-sX94t6D9.mjs}

@@ -4,8 +4,8 @@ import { useFetchClient } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Loader, Typography, Box, Flex, Badge } from "@strapi/design-system";
 import { ChartBubble, Crown, User, Clock, Monitor } from "@strapi/icons";
-import { a as pluginId } from "./index-CUSrDKCG.mjs";
-import { u as useLicense } from "./useLicense-xjKLHcVq.mjs";
+import { a as pluginId } from "./index-Ij0JRf9W.mjs";
+import { u as useLicense } from "./useLicense-DJEDGSap.mjs";
 const theme = {
   colors: {
     primary: { 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },

package/dist/_chunks/{Analytics-D6RGeWO5.js → Analytics-tOOj5T92.js}

@@ -6,8 +6,8 @@ const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-BuxWeACw.js");
-const useLicense = require("./useLicense-D7FSpX8c.js");
+const index = require("./index-DtBfKBne.js");
+const useLicense = require("./useLicense-NCFYHpDd.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {

package/dist/_chunks/{App-CahdcIEB.mjs → App-Cs4KKd3L.mjs}

@@ -3,10 +3,11 @@ import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
-import { p as parseUserAgent, a as pluginId, g as getTranslation } from "./index-CUSrDKCG.mjs";
-import { Modal, Flex, Box, Typography, Badge, Divider, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, TextInput } from "@strapi/design-system";
+import { p as parseUserAgent, a as pluginId, g as getTranslation } from "./index-Ij0JRf9W.mjs";
+import { Modal, Flex, Box, Typography, Divider, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, TextInput } from "@strapi/design-system";
 import { Check, Information, Monitor, Server, Clock, Cross, Earth, Shield, Crown, Phone, Download, User, Eye, Trash, Search, Key } from "@strapi/icons";
-import { u as useLicense } from "./useLicense-xjKLHcVq.mjs";
+import { u as useLicense } from "./useLicense-DJEDGSap.mjs";
+import { S as ShowHideButton, T as TertiaryButton, D as DangerButton, I as IconButtonPrimary, a as IconButtonWarning, b as IconButtonDanger } from "./StyledButtons-fbNVRlMY.mjs";
 import { useNavigate } from "react-router-dom";
 const theme = {
   colors: {
@@ -85,6 +86,74 @@ const SectionTitle = styled(Typography)`
 const Section = styled(Box)`
   margin-bottom: 24px;
 `;
+const ModalStatusBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  border-radius: 24px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  
+  ${(props) => props.$online && `
+    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
+    color: #166534;
+    border: 2px solid #86EFAC;
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
+  `}
+  
+  ${(props) => !props.$online && `
+    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
+    color: #4B5563;
+    border: 2px solid #D1D5DB;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  `}
+`;
+const StatusDot$1 = styled.span`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  
+  ${(props) => props.$online && `
+    background: #22C55E;
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+    animation: pulse-green 2s ease-in-out infinite;
+  `}
+  
+  ${(props) => !props.$online && `
+    background: #9CA3AF;
+  `}
+  
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.15); }
+  }
+`;
+const PremiumButton = styled.button`
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+  margin-top: 8px;
+  
+  &:hover {
+    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+`;
 const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
@@ -196,16 +265,10 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
-      /* @__PURE__ */ jsx(Flex, { justifyContent: "center", style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
-        Badge,
-        {
-          backgroundColor: isOnline ? "success600" : "neutral600",
-          textColor: "neutral0",
-          size: "M",
-          style: { fontSize: "14px", padding: "8px 20px", fontWeight: "600" },
-          children: isOnline ? t("modal.status.online", "ONLINE") : t("modal.status.offline", "OFFLINE")
-        }
-      ) }),
+      /* @__PURE__ */ jsx(Flex, { justifyContent: "center", style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsxs(ModalStatusBadge, { $online: isOnline, children: [
+        /* @__PURE__ */ jsx(StatusDot$1, { $online: isOnline }),
+        isOnline ? t("modal.status.online", "ONLINE") : t("modal.status.offline", "OFFLINE")
+      ] }) }),
       /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
       /* @__PURE__ */ jsxs(TwoColumnGrid, { children: [
         /* @__PURE__ */ jsxs(Box, { children: [
@@ -339,19 +402,9 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
             /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#78350f", fontSize: "14px", lineHeight: "1.6" }, children: t("modal.premium.description", "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session") }),
             /* @__PURE__ */ jsx(
-              Button,
+              PremiumButton,
               {
-                variant: "secondary",
-                size: "M",
                 onClick: () => window.open("https://magicapi.fitlex.me", "_blank"),
-                style: {
-                  background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
-                  color: "white",
-                  border: "none",
-                  fontWeight: "600",
-                  marginTop: "8px",
-                  boxShadow: "0 4px 12px rgba(245, 158, 11, 0.3)"
-                },
                 children: t("modal.premium.upgrade", "Upgrade to Premium")
               }
             )
@@ -362,13 +415,11 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ jsx(SectionTitle, { style: { marginBottom: 0, paddingBottom: 0, border: "none" }, children: t("modal.section.technical", "Technical Details") }),
           /* @__PURE__ */ jsx(
-            Button,
+            ShowHideButton,
             {
-              variant: "tertiary",
               size: "S",
               onClick: () => setShowUserAgent(!showUserAgent),
-              style: { fontSize: "12px" },
-              children: showUserAgent ? `▲ ${t("modal.technical.hide", "Hide Details")}` : `▼ ${t("modal.technical.show", "Show Details")}`
+              children: showUserAgent ? t("modal.technical.hide", "Hide Details") : t("modal.technical.show", "Show Details")
             }
           )
         ] }),
@@ -393,12 +444,11 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: t("modal.actions.close", "Close") }),
+      /* @__PURE__ */ jsx(TertiaryButton, { onClick: onClose, children: t("modal.actions.close", "Close") }),
       /* @__PURE__ */ jsx(
-        Button,
+        DangerButton,
         {
           onClick: handleTerminate,
-          variant: "danger",
           disabled: !session.isActive || terminating,
           loading: terminating,
           startIcon: /* @__PURE__ */ jsx(Cross, {}),
@@ -690,7 +740,7 @@ const StyledTable = styled(Table)`
     }
   }
 `;
-const OnlineIndicator = styled.div`
+styled.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -744,11 +794,76 @@ const StyledSearchInput = styled.input`
   }
 `;
 const ActionButtons = styled(Flex)`
-  opacity: 0.7;
+  opacity: 0.85;
   transition: all ${theme.transitions.fast};
-  gap: ${theme.spacing.xs};
+  gap: 8px;
   justify-content: flex-end;
 `;
+const StatusBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  transition: all 0.2s ease;
+  
+  ${(props) => props.$status === "active" && `
+    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
+    color: #15803D;
+    border: 1px solid #86EFAC;
+  `}
+  
+  ${(props) => props.$status === "idle" && `
+    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
+    color: #A16207;
+    border: 1px solid #FCD34D;
+  `}
+  
+  ${(props) => props.$status === "loggedout" && `
+    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
+    color: #B91C1C;
+    border: 1px solid #FCA5A5;
+  `}
+  
+  ${(props) => props.$status === "terminated" && `
+    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
+    color: #4B5563;
+    border: 1px solid #D1D5DB;
+  `}
+`;
+const StatusDot = styled.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  
+  ${(props) => props.$status === "active" && `
+    background: #22C55E;
+    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
+    animation: pulse-green 2s ease-in-out infinite;
+  `}
+  
+  ${(props) => props.$status === "idle" && `
+    background: #F59E0B;
+  `}
+  
+  ${(props) => props.$status === "loggedout" && `
+    background: #EF4444;
+  `}
+  
+  ${(props) => props.$status === "terminated" && `
+    background: #9CA3AF;
+  `}
+  
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.1); }
+  }
+`;
 const ClickableRow = styled(Tr)`
   cursor: pointer;
   
@@ -1163,17 +1278,9 @@ const HomePage = () => {
                 opacity: config.opacity || 1
               },
               children: [
-                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsx(OnlineIndicator, { $online: config.indicator }),
-                  /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      backgroundColor: config.badgeColor,
-                      textColor: "neutral0",
-                      size: "S",
-                      children: config.label
-                    }
-                  )
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(StatusBadge, { $status: sessionStatus, children: [
+                  /* @__PURE__ */ jsx(StatusDot, { $status: sessionStatus }),
+                  config.label
                 ] }) }),
                 /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
                   /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", ellipsis: true, children: session.user?.username || session.user?.email || t("homepage.user.unknown", "Unknown") }),
@@ -1198,10 +1305,8 @@ const HomePage = () => {
                 ] }) }),
                 /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(ActionButtons, { className: "action-buttons", children: [
                   /* @__PURE__ */ jsx(
-                    Button,
+                    IconButtonPrimary,
                     {
-                      variant: "secondary",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleSessionClick(session);
@@ -1211,10 +1316,8 @@ const HomePage = () => {
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    Button,
+                    IconButtonWarning,
                     {
-                      variant: "danger-light",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleTerminateSession(session.id);
@@ -1225,10 +1328,8 @@ const HomePage = () => {
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    Button,
+                    IconButtonDanger,
                     {
-                      variant: "danger",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleDeleteSession(session.id);

package/dist/_chunks/{App-BkaaNOpt.js → App-D4qVym6y.js}

@@ -5,10 +5,11 @@ const react = require("react");
 const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
-const index = require("./index-BuxWeACw.js");
+const index = require("./index-DtBfKBne.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const useLicense = require("./useLicense-D7FSpX8c.js");
+const useLicense = require("./useLicense-NCFYHpDd.js");
+const StyledButtons = require("./StyledButtons-D2EbG_Zw.js");
 const reactRouterDom = require("react-router-dom");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
@@ -89,6 +90,74 @@ const SectionTitle = styled__default.default(designSystem.Typography)`
 const Section = styled__default.default(designSystem.Box)`
   margin-bottom: 24px;
 `;
+const ModalStatusBadge = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 24px;
+  border-radius: 24px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  
+  ${(props) => props.$online && `
+    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
+    color: #166534;
+    border: 2px solid #86EFAC;
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
+  `}
+  
+  ${(props) => !props.$online && `
+    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
+    color: #4B5563;
+    border: 2px solid #D1D5DB;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  `}
+`;
+const StatusDot$1 = styled__default.default.span`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  
+  ${(props) => props.$online && `
+    background: #22C55E;
+    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+    animation: pulse-green 2s ease-in-out infinite;
+  `}
+  
+  ${(props) => !props.$online && `
+    background: #9CA3AF;
+  `}
+  
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.15); }
+  }
+`;
+const PremiumButton = styled__default.default.button`
+  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+  margin-top: 8px;
+  
+  &:hover {
+    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+`;
 const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const { formatMessage } = reactIntl.useIntl();
   const { get, post } = admin.useFetchClient();
@@ -200,16 +269,10 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Badge,
-        {
-          backgroundColor: isOnline ? "success600" : "neutral600",
-          textColor: "neutral0",
-          size: "M",
-          style: { fontSize: "14px", padding: "8px 20px", fontWeight: "600" },
-          children: isOnline ? t("modal.status.online", "ONLINE") : t("modal.status.offline", "OFFLINE")
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalStatusBadge, { $online: isOnline, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatusDot$1, { $online: isOnline }),
+        isOnline ? t("modal.status.online", "ONLINE") : t("modal.status.offline", "OFFLINE")
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginBottom: "24px" } }),
       /* @__PURE__ */ jsxRuntime.jsxs(TwoColumnGrid, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
@@ -343,19 +406,9 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#78350f", fontSize: "14px", lineHeight: "1.6" }, children: t("modal.premium.description", "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session") }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
+              PremiumButton,
               {
-                variant: "secondary",
-                size: "M",
                 onClick: () => window.open("https://magicapi.fitlex.me", "_blank"),
-                style: {
-                  background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
-                  color: "white",
-                  border: "none",
-                  fontWeight: "600",
-                  marginTop: "8px",
-                  boxShadow: "0 4px 12px rgba(245, 158, 11, 0.3)"
-                },
                 children: t("modal.premium.upgrade", "Upgrade to Premium")
               }
             )
@@ -366,13 +419,11 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { style: { marginBottom: 0, paddingBottom: 0, border: "none" }, children: t("modal.section.technical", "Technical Details") }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Button,
+            StyledButtons.ShowHideButton,
             {
-              variant: "tertiary",
               size: "S",
               onClick: () => setShowUserAgent(!showUserAgent),
-              style: { fontSize: "12px" },
-              children: showUserAgent ? `▲ ${t("modal.technical.hide", "Hide Details")}` : `▼ ${t("modal.technical.show", "Show Details")}`
+              children: showUserAgent ? t("modal.technical.hide", "Hide Details") : t("modal.technical.show", "Show Details")
             }
           )
         ] }),
@@ -397,12 +448,11 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: t("modal.actions.close", "Close") }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledButtons.TertiaryButton, { onClick: onClose, children: t("modal.actions.close", "Close") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Button,
+        StyledButtons.DangerButton,
         {
           onClick: handleTerminate,
-          variant: "danger",
           disabled: !session.isActive || terminating,
           loading: terminating,
           startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}),
@@ -694,7 +744,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
     }
   }
 `;
-const OnlineIndicator = styled__default.default.div`
+styled__default.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
@@ -748,11 +798,76 @@ const StyledSearchInput = styled__default.default.input`
   }
 `;
 const ActionButtons = styled__default.default(designSystem.Flex)`
-  opacity: 0.7;
+  opacity: 0.85;
   transition: all ${theme.transitions.fast};
-  gap: ${theme.spacing.xs};
+  gap: 8px;
   justify-content: flex-end;
 `;
+const StatusBadge = styled__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  transition: all 0.2s ease;
+  
+  ${(props) => props.$status === "active" && `
+    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
+    color: #15803D;
+    border: 1px solid #86EFAC;
+  `}
+  
+  ${(props) => props.$status === "idle" && `
+    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
+    color: #A16207;
+    border: 1px solid #FCD34D;
+  `}
+  
+  ${(props) => props.$status === "loggedout" && `
+    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
+    color: #B91C1C;
+    border: 1px solid #FCA5A5;
+  `}
+  
+  ${(props) => props.$status === "terminated" && `
+    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
+    color: #4B5563;
+    border: 1px solid #D1D5DB;
+  `}
+`;
+const StatusDot = styled__default.default.span`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  
+  ${(props) => props.$status === "active" && `
+    background: #22C55E;
+    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
+    animation: pulse-green 2s ease-in-out infinite;
+  `}
+  
+  ${(props) => props.$status === "idle" && `
+    background: #F59E0B;
+  `}
+  
+  ${(props) => props.$status === "loggedout" && `
+    background: #EF4444;
+  `}
+  
+  ${(props) => props.$status === "terminated" && `
+    background: #9CA3AF;
+  `}
+  
+  @keyframes pulse-green {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.1); }
+  }
+`;
 const ClickableRow = styled__default.default(designSystem.Tr)`
   cursor: pointer;
   
@@ -1167,17 +1282,9 @@ const HomePage = () => {
                 opacity: config.opacity || 1
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(OnlineIndicator, { $online: config.indicator }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Badge,
-                    {
-                      backgroundColor: config.badgeColor,
-                      textColor: "neutral0",
-                      size: "S",
-                      children: config.label
-                    }
-                  )
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge, { $status: sessionStatus, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $status: sessionStatus }),
+                  config.label
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", ellipsis: true, children: session.user?.username || session.user?.email || t("homepage.user.unknown", "Unknown") }),
@@ -1202,10 +1309,8 @@ const HomePage = () => {
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { className: "action-buttons", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Button,
+                    StyledButtons.IconButtonPrimary,
                     {
-                      variant: "secondary",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleSessionClick(session);
@@ -1215,10 +1320,8 @@ const HomePage = () => {
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Button,
+                    StyledButtons.IconButtonWarning,
                     {
-                      variant: "danger-light",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleTerminateSession(session.id);
@@ -1229,10 +1332,8 @@ const HomePage = () => {
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Button,
+                    StyledButtons.IconButtonDanger,
                     {
-                      variant: "danger",
-                      size: "S",
                       onClick: (e) => {
                         e.stopPropagation();
                         handleDeleteSession(session.id);

package/dist/_chunks/{License-BFx721o7.mjs → License-CN5YpqIu.mjs}

@@ -4,7 +4,7 @@ import { Loader, Box, Alert, Flex, Typography, Button, Badge, Accordion } from "
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { ArrowClockwise, Duplicate, Download, User, Shield, Sparkle, ChartBubble } from "@strapi/icons";
 import styled, { css, keyframes } from "styled-components";
-import { a as pluginId } from "./index-CUSrDKCG.mjs";
+import { a as pluginId } from "./index-Ij0JRf9W.mjs";
 const theme = {
   borderRadius: { lg: "12px" }
 };

package/dist/_chunks/{License-C8VnKtV1.js → License-kfVcskd3.js}

@@ -6,7 +6,7 @@ const designSystem = require("@strapi/design-system");
 const admin = require("@strapi/strapi/admin");
 const icons = require("@strapi/icons");
 const styled = require("styled-components");
-const index = require("./index-BuxWeACw.js");
+const index = require("./index-DtBfKBne.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const theme = {

package/dist/_chunks/{OnlineUsersWidget-uJ6DZB_N.js → OnlineUsersWidget-Cg3R7602.js}

@@ -6,7 +6,7 @@ const reactIntl = require("react-intl");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-BuxWeACw.js");
+const index = require("./index-DtBfKBne.js");
 const OnlineUsersWidget = () => {
   const { formatMessage } = reactIntl.useIntl();
   const { get } = admin.useFetchClient();

package/dist/_chunks/{OnlineUsersWidget-r2ZgSnok.mjs → OnlineUsersWidget-ytykP_tA.mjs}

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import { Box, Typography, Flex, Grid } from "@strapi/design-system";
 import { Check, Cross, Clock, User } from "@strapi/icons";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation } from "./index-CUSrDKCG.mjs";
+import { g as getTranslation } from "./index-Ij0JRf9W.mjs";
 const OnlineUsersWidget = () => {
   const { formatMessage } = useIntl();
   const { get } = useFetchClient();