strapi-plugin-magic-sessionmanager 1.0.0

package/dist/_chunks/App-MPqlEJVm.mjs

@@ -0,0 +1,1953 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useFetchClient, useNotification } from "@strapi/strapi/admin";
+import styled, { keyframes } from "styled-components";
+import { Modal, Flex, Box, Typography, Badge, 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 { p as parseUserAgent, a as pluginId } from "./index-BGCs2pNv.mjs";
+import { u as useLicense } from "./useLicense-Dw_-SJHP.mjs";
+import { useNavigate } from "react-router-dom";
+const TwoColumnGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const SectionTitle = styled(Typography)`
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #374151;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #e5e7eb;
+  display: block;
+`;
+const Section = styled(Box)`
+  margin-bottom: 24px;
+`;
+const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
+  const { get, post } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const { isPremium } = useLicense();
+  const [terminating, setTerminating] = useState(false);
+  const [showUserAgent, setShowUserAgent] = useState(false);
+  const [geoData, setGeoData] = useState(null);
+  const [geoLoading, setGeoLoading] = useState(false);
+  if (!session) return null;
+  const deviceInfo = parseUserAgent(session.userAgent);
+  const isOnline = session.isTrulyActive;
+  useEffect(() => {
+    if (isPremium && session.ipAddress && !geoData) {
+      fetchGeolocationData();
+    }
+  }, [isPremium, session.ipAddress]);
+  const fetchGeolocationData = async () => {
+    setGeoLoading(true);
+    try {
+      const { data } = await get(`/${pluginId}/geolocation/${session.ipAddress}`);
+      setGeoData(data.data);
+    } catch (err) {
+      console.error("[SessionDetailModal] Error fetching geolocation:", err);
+      setGeoData({
+        country_flag: "🌍",
+        country: "Unknown",
+        city: "Unknown",
+        timezone: "Unknown",
+        securityScore: 50,
+        riskLevel: "Unknown",
+        isVpn: false,
+        isProxy: false
+      });
+    } finally {
+      setGeoLoading(false);
+    }
+  };
+  const premiumData = geoData || {
+    country_flag: "🌍",
+    country: "Loading...",
+    city: "Loading...",
+    timezone: "Loading...",
+    securityScore: 0,
+    riskLevel: "Unknown",
+    isVpn: false,
+    isProxy: false
+  };
+  const getDeviceIcon = (deviceType) => {
+    if (deviceType === "Mobile" || deviceType === "Tablet") return Phone;
+    if (deviceType === "Desktop" || deviceType === "Laptop") return Monitor;
+    return Server;
+  };
+  const DeviceIcon = getDeviceIcon(deviceInfo.device);
+  const handleTerminate = async () => {
+    if (!confirm("Are you sure you want to terminate this session?")) {
+      return;
+    }
+    setTerminating(true);
+    try {
+      await post(`/${pluginId}/sessions/${session.id}/terminate`);
+      toggleNotification({
+        type: "success",
+        message: "Session terminated successfully"
+      });
+      onSessionTerminated();
+      onClose();
+    } catch (err) {
+      console.error("[SessionDetailModal] Error:", err);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to terminate session"
+      });
+    } finally {
+      setTerminating(false);
+    }
+  };
+  const DetailRow = ({ label, value, icon: Icon, compact }) => /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "flex-start", style: { marginBottom: compact ? "12px" : "16px" }, children: [
+    Icon && /* @__PURE__ */ jsx(Box, { style: {
+      width: "36px",
+      height: "36px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "#f3f4f6",
+      borderRadius: "8px",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ jsx(Icon, { width: "18px", height: "18px" }) }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", fontWeight: "600", marginBottom: "4px" }, children: label }),
+      /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral800", style: { fontSize: "14px", fontWeight: "500" }, children: value })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(Modal.Root, { open: true, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(Modal.Content, { style: { maxWidth: "900px" }, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Box, { style: {
+        width: "48px",
+        height: "48px",
+        borderRadius: "12px",
+        background: isOnline ? "#dcfce7" : "#f3f4f6",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ jsx(DeviceIcon, { width: "24px", height: "24px" }) }),
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: "Session Details" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+          "ID: ",
+          session.id
+        ] })
+      ] })
+    ] }) }),
+    /* @__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 ? "🟢 ONLINE" : "⚫ OFFLINE"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Divider, { style: { marginBottom: "24px" } }),
+      /* @__PURE__ */ jsxs(TwoColumnGrid, { children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(Section, { children: [
+            /* @__PURE__ */ jsx(SectionTitle, { children: "👤 User" }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Check, label: "Username", value: session.user?.username || "N/A" }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: "Email", value: session.user?.email || "N/A" }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: "User ID", value: session.user?.id || "N/A" })
+          ] }),
+          /* @__PURE__ */ jsxs(Section, { children: [
+            /* @__PURE__ */ jsx(SectionTitle, { children: "💻 Device" }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: DeviceIcon, label: "Device", value: deviceInfo.device }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Monitor, label: "Browser", value: `${deviceInfo.browser} ${deviceInfo.browserVersion || ""}` }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Server, label: "OS", value: deviceInfo.os }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: "IP", value: session.ipAddress })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Section, { children: [
+          /* @__PURE__ */ jsx(SectionTitle, { children: "⏱️ Timeline" }),
+          /* @__PURE__ */ jsx(
+            DetailRow,
+            {
+              compact: true,
+              icon: Clock,
+              label: "Login",
+              value: new Date(session.loginTime).toLocaleString("de-DE", {
+                day: "2-digit",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DetailRow,
+            {
+              compact: true,
+              icon: Clock,
+              label: "Last Active",
+              value: new Date(session.lastActive || session.loginTime).toLocaleString("de-DE", {
+                day: "2-digit",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DetailRow,
+            {
+              compact: true,
+              icon: Clock,
+              label: "Idle Time",
+              value: `${session.minutesSinceActive} min`
+            }
+          ),
+          session.logoutTime && /* @__PURE__ */ jsx(
+            DetailRow,
+            {
+              compact: true,
+              icon: Cross,
+              label: "Logout",
+              value: new Date(session.logoutTime).toLocaleString("de-DE", {
+                day: "2-digit",
+                month: "short",
+                hour: "2-digit",
+                minute: "2-digit"
+              })
+            }
+          )
+        ] }) })
+      ] }),
+      isPremium ? /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsx(SectionTitle, { children: "🌍 Location & Security" }),
+        geoLoading ? /* @__PURE__ */ jsx(Box, { padding: 4, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Loading location data..." }) }) : /* @__PURE__ */ jsxs(TwoColumnGrid, { children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(
+              DetailRow,
+              {
+                compact: true,
+                icon: Earth,
+                label: "Country",
+                value: `${premiumData.country_flag || "🌍"} ${premiumData.country}`
+              }
+            ),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Earth, label: "City", value: premiumData.city }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Clock, label: "Timezone", value: premiumData.timezone })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(
+              DetailRow,
+              {
+                compact: true,
+                icon: Shield,
+                label: "Security",
+                value: `${premiumData.securityScore}/100 (${premiumData.riskLevel})`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DetailRow,
+              {
+                compact: true,
+                icon: Shield,
+                label: "VPN",
+                value: premiumData.isVpn ? "⚠️ Yes" : "✅ No"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DetailRow,
+              {
+                compact: true,
+                icon: Shield,
+                label: "Proxy",
+                value: premiumData.isProxy ? "⚠️ Yes" : "✅ No"
+              }
+            )
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsx(Section, { children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 5,
+          style: {
+            background: "linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)",
+            borderRadius: "12px",
+            border: "2px solid #fbbf24",
+            textAlign: "center"
+          },
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx(Crown, { style: { width: "40px", height: "40px", color: "#d97706" } }),
+            /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: "🌍 Location & Security Analysis" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#78350f", fontSize: "14px", lineHeight: "1.6" }, children: "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                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: "Upgrade to Premium"
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "12px" }, children: [
+          /* @__PURE__ */ jsx(SectionTitle, { style: { marginBottom: 0, paddingBottom: 0, border: "none" }, children: "🔧 Technical Details" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              onClick: () => setShowUserAgent(!showUserAgent),
+              style: { fontSize: "12px" },
+              children: showUserAgent ? "▲ Hide Details" : "▼ Show Details"
+            }
+          )
+        ] }),
+        showUserAgent && /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 3,
+            background: "neutral100",
+            hasRadius: true,
+            style: {
+              fontFamily: "monospace",
+              fontSize: "10px",
+              wordBreak: "break-all",
+              maxHeight: "80px",
+              overflow: "auto",
+              marginTop: "8px",
+              animation: "fadeIn 0.3s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { lineHeight: "1.6" }, children: session.userAgent })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: "Close" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleTerminate,
+          variant: "danger",
+          disabled: !session.isActive || terminating,
+          loading: terminating,
+          startIcon: /* @__PURE__ */ jsx(Cross, {}),
+          children: "Terminate Session"
+        }
+      )
+    ] }) })
+  ] }) });
+};
+const theme = {
+  colors: {
+    primary: {
+      50: "#F0F9FF",
+      100: "#E0F2FE",
+      500: "#0EA5E9",
+      600: "#0284C7"
+    },
+    secondary: {
+      500: "#A855F7",
+      600: "#9333EA"
+    },
+    success: {
+      100: "#DCFCE7",
+      500: "#22C55E",
+      600: "#16A34A"
+    },
+    warning: {
+      100: "#FEF3C7",
+      500: "#F59E0B",
+      600: "#D97706"
+    },
+    danger: {
+      100: "#FEE2E2",
+      500: "#EF4444",
+      600: "#DC2626"
+    },
+    neutral: {
+      0: "#FFFFFF",
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  },
+  transitions: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px"
+  },
+  borderRadius: {
+    md: "8px",
+    lg: "12px",
+    xl: "16px"
+  }
+};
+const fadeIn$1 = keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const shimmer = keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const float = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+`;
+const pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+`;
+const FloatingEmoji = styled.div`
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  font-size: 72px;
+  opacity: 0.08;
+  animation: ${float} 4s ease-in-out infinite;
+`;
+const breakpoints = {
+  mobile: "768px"
+};
+const Container = styled(Box)`
+  animation: ${fadeIn$1} ${theme.transitions.slow};
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: ${theme.spacing.xl} ${theme.spacing.lg} 0;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    padding: 16px 12px 0;
+  }
+`;
+const Header = styled(Box)`
+  background: linear-gradient(135deg, 
+    ${theme.colors.primary[600]} 0%, 
+    ${theme.colors.secondary[600]} 100%
+  );
+  border-radius: ${theme.borderRadius.xl};
+  padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
+  margin-bottom: ${theme.spacing.xl};
+  position: relative;
+  overflow: hidden;
+  box-shadow: ${theme.shadows.xl};
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    padding: 24px 20px;
+    border-radius: 12px;
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 200%;
+    height: 100%;
+    background: linear-gradient(
+      90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.15), 
+      transparent
+    );
+    animation: ${shimmer} 3s infinite;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle at 20% 80%, transparent 50%, rgba(255, 255, 255, 0.1) 50%);
+    background-size: 15px 15px;
+    opacity: 0.3;
+  }
+`;
+const HeaderContent = styled(Flex)`
+  position: relative;
+  z-index: 1;
+`;
+const Title = styled(Typography)`
+  color: ${theme.colors.neutral[0]};
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing.sm};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    animation: ${float} 3s ease-in-out infinite;
+  }
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    font-size: 1.5rem;
+    
+    svg {
+      width: 22px;
+      height: 22px;
+    }
+  }
+`;
+const Subtitle = styled(Typography)`
+  color: rgba(255, 255, 255, 0.95);
+  font-size: 0.95rem;
+  font-weight: 400;
+  margin-top: ${theme.spacing.xs};
+  letter-spacing: 0.01em;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    font-size: 0.85rem;
+  }
+`;
+const StatsGrid = styled.div`
+  margin-bottom: ${theme.spacing.xl};
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: ${theme.spacing.lg};
+  justify-content: center;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    margin-bottom: 24px;
+  }
+`;
+const StatCard = styled(Box)`
+  background: ${theme.colors.neutral[0]};
+  border-radius: ${theme.borderRadius.lg};
+  padding: 28px ${theme.spacing.lg};
+  position: relative;
+  overflow: hidden;
+  transition: all ${theme.transitions.normal};
+  animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
+  animation-delay: ${(props) => props.$delay || "0s"};
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  min-width: 200px;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    min-width: unset;
+    padding: 20px 12px;
+    
+    &:hover {
+      transform: none;
+    }
+  }
+  
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: ${theme.shadows.xl};
+    border-color: ${(props) => props.$color || theme.colors.primary[500]};
+    
+    .stat-icon {
+      transform: scale(1.15) rotate(5deg);
+    }
+    
+    .stat-value {
+      transform: scale(1.08);
+      color: ${(props) => props.$color || theme.colors.primary[600]};
+    }
+  }
+`;
+const StatIcon = styled(Box)`
+  width: 68px;
+  height: 68px;
+  border-radius: ${theme.borderRadius.lg};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.$bg || theme.colors.primary[100]};
+  transition: all ${theme.transitions.normal};
+  margin: 0 auto 20px;
+  box-shadow: ${theme.shadows.sm};
+  
+  svg {
+    width: 34px;
+    height: 34px;
+    color: ${(props) => props.$color || theme.colors.primary[600]};
+  }
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 12px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+const StatValue = styled(Typography)`
+  font-size: 2.75rem;
+  font-weight: 700;
+  color: ${theme.colors.neutral[800]};
+  line-height: 1;
+  margin-bottom: 10px;
+  transition: all ${theme.transitions.normal};
+  text-align: center;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    font-size: 2rem;
+    margin-bottom: 6px;
+  }
+`;
+const StatLabel = styled(Typography)`
+  font-size: 0.95rem;
+  color: ${theme.colors.neutral[600]};
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-align: center;
+  
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    font-size: 0.8rem;
+  }
+`;
+const DataTable = styled(Box)`
+  background: ${theme.colors.neutral[0]};
+  border-radius: ${theme.borderRadius.lg};
+  overflow: hidden;
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  margin-bottom: ${theme.spacing.xl};
+`;
+const StyledTable = styled(Table)`
+  thead {
+    background: ${theme.colors.neutral[50]};
+    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    
+    th {
+      font-weight: 600;
+      color: ${theme.colors.neutral[700]};
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+      padding: ${theme.spacing.lg} ${theme.spacing.lg};
+    }
+  }
+  
+  tbody tr {
+    transition: all ${theme.transitions.fast};
+    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    &:hover {
+      background: ${theme.colors.neutral[50]};
+      
+      .action-buttons {
+        opacity: 1;
+      }
+    }
+    
+    td {
+      padding: ${theme.spacing.lg} ${theme.spacing.lg};
+      color: ${theme.colors.neutral[700]};
+      vertical-align: middle;
+    }
+  }
+`;
+const OnlineIndicator = styled.div`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: ${(props) => props.$online ? theme.colors.success[500] : theme.colors.neutral[400]};
+  display: inline-block;
+  margin-right: 8px;
+  animation: ${(props) => props.$online ? pulse : "none"} 2s ease-in-out infinite;
+`;
+const FilterBar = styled(Flex)`
+  background: ${theme.colors.neutral[0]};
+  padding: ${theme.spacing.md} ${theme.spacing.lg};
+  border-radius: ${theme.borderRadius.lg};
+  margin-bottom: ${theme.spacing.lg};
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  gap: ${theme.spacing.md};
+  align-items: center;
+`;
+const SearchInputWrapper = styled.div`
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+const SearchIcon = styled(Search)`
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  color: ${theme.colors.neutral[600]};
+  pointer-events: none;
+`;
+const StyledSearchInput = styled.input`
+  width: 100%;
+  padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
+  border: 1px solid ${theme.colors.neutral[200]};
+  border-radius: ${theme.borderRadius.md};
+  font-size: 0.875rem;
+  transition: all ${theme.transitions.fast};
+  background: ${theme.colors.neutral[0]};
+  color: ${theme.colors.neutral[800]};
+  
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.primary[500]};
+    box-shadow: 0 0 0 3px ${theme.colors.primary[100]};
+  }
+  
+  &::placeholder {
+    color: ${theme.colors.neutral[600]};
+  }
+`;
+const ActionButtons = styled(Flex)`
+  opacity: 0.7;
+  transition: all ${theme.transitions.fast};
+  gap: ${theme.spacing.xs};
+  justify-content: flex-end;
+`;
+const ClickableRow = styled(Tr)`
+  cursor: pointer;
+  
+  &:hover {
+    background: ${theme.colors.primary[50]} !important;
+  }
+`;
+const HomePage = () => {
+  const { get, post, del } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const { isPremium } = useLicense();
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [filterStatus, setFilterStatus] = useState("active");
+  const [entriesPerPage, setEntriesPerPage] = useState("25");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedSession, setSelectedSession] = useState(null);
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  useEffect(() => {
+    fetchSessions();
+    const interval = setInterval(() => {
+      if (!showDetailModal) {
+        fetchSessions();
+      }
+    }, 10 * 60 * 1e3);
+    return () => clearInterval(interval);
+  }, [showDetailModal]);
+  const fetchSessions = async () => {
+    setLoading(true);
+    try {
+      const { data } = await get(`/${pluginId}/sessions`);
+      setSessions(data.data || []);
+    } catch (err) {
+      console.error("[SessionManager] Error fetching sessions:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleTerminateSession = async (sessionId) => {
+    if (!confirm("Are you sure you want to terminate this session?\n\nThis will set isActive to false (user will be logged out).")) {
+      return;
+    }
+    try {
+      await post(`/${pluginId}/sessions/${sessionId}/terminate`);
+      fetchSessions();
+    } catch (err) {
+      console.error("[SessionManager] Error terminating session:", err);
+    }
+  };
+  const handleDeleteSession = async (sessionId) => {
+    if (!confirm("⚠️ WARNING: This will PERMANENTLY delete this session from the database!\n\nThis action cannot be undone.\n\nAre you sure?")) {
+      return;
+    }
+    try {
+      await del(`/${pluginId}/sessions/${sessionId}`);
+      fetchSessions();
+      toggleNotification({
+        type: "success",
+        message: "Session permanently deleted"
+      });
+    } catch (err) {
+      console.error("[SessionManager] Error deleting session:", err);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to delete session"
+      });
+    }
+  };
+  const handleExportCSV = () => {
+    if (!isPremium) {
+      toggleNotification({
+        type: "warning",
+        message: "Premium license required for export functionality"
+      });
+      return;
+    }
+    try {
+      const headers = ["ID", "Status", "User Email", "Username", "Device", "Browser", "OS", "IP Address", "Login Time", "Last Active", "Logout Time", "Minutes Idle"];
+      const rows = filteredSessions.map((session) => {
+        const deviceInfo = parseUserAgent(session.userAgent);
+        const status = getSessionStatus(session);
+        return [
+          session.id,
+          status,
+          session.user?.email || "",
+          session.user?.username || "",
+          deviceInfo.device,
+          deviceInfo.browser,
+          deviceInfo.os,
+          session.ipAddress,
+          new Date(session.loginTime).toISOString(),
+          new Date(session.lastActive || session.loginTime).toISOString(),
+          session.logoutTime ? new Date(session.logoutTime).toISOString() : "",
+          session.minutesSinceActive
+        ];
+      });
+      const csvContent = [
+        headers.join(","),
+        ...rows.map((row) => row.map((cell) => `"${cell}"`).join(","))
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = `sessions-export-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+      link.click();
+      toggleNotification({
+        type: "success",
+        message: `Exported ${filteredSessions.length} sessions to CSV`
+      });
+    } catch (err) {
+      console.error("[SessionManager] Export error:", err);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to export sessions"
+      });
+    }
+  };
+  const handleExportJSON = () => {
+    if (!isPremium) {
+      toggleNotification({
+        type: "warning",
+        message: "Premium license required for export functionality"
+      });
+      return;
+    }
+    try {
+      const exportData = {
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        filter: filterStatus,
+        totalSessions: sessions.length,
+        exportedSessions: filteredSessions.length,
+        sessions: filteredSessions.map((session) => {
+          const deviceInfo = parseUserAgent(session.userAgent);
+          return {
+            id: session.id,
+            status: getSessionStatus(session),
+            user: {
+              id: session.user?.id,
+              email: session.user?.email,
+              username: session.user?.username
+            },
+            device: {
+              type: deviceInfo.device,
+              browser: deviceInfo.browser,
+              browserVersion: deviceInfo.browserVersion,
+              os: deviceInfo.os
+            },
+            ipAddress: session.ipAddress,
+            loginTime: session.loginTime,
+            lastActive: session.lastActive,
+            logoutTime: session.logoutTime,
+            minutesSinceActive: session.minutesSinceActive,
+            isActive: session.isActive,
+            isTrulyActive: session.isTrulyActive
+          };
+        })
+      };
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" });
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = `sessions-export-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.json`;
+      link.click();
+      toggleNotification({
+        type: "success",
+        message: `Exported ${filteredSessions.length} sessions to JSON`
+      });
+    } catch (err) {
+      console.error("[SessionManager] Export error:", err);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to export sessions"
+      });
+    }
+  };
+  const getDeviceIcon = (deviceType) => {
+    if (deviceType === "Mobile" || deviceType === "Tablet") return Phone;
+    if (deviceType === "Desktop" || deviceType === "Laptop") return Monitor;
+    return Server;
+  };
+  const activeSessions = sessions.filter((s) => s.isActive && s.isTrulyActive);
+  const idleSessions = sessions.filter((s) => s.isActive && !s.isTrulyActive);
+  const loggedOutSessions = sessions.filter((s) => !s.isActive && s.logoutTime);
+  const terminatedSessions = sessions.filter((s) => !s.isActive && !s.logoutTime);
+  const handleSessionClick = (session) => {
+    setSelectedSession(session);
+    setShowDetailModal(true);
+  };
+  const handleModalClose = () => {
+    setShowDetailModal(false);
+    setSelectedSession(null);
+  };
+  const handleSessionTerminated = () => {
+    fetchSessions();
+  };
+  const getSessionStatus = (session) => {
+    if (!session.isActive) {
+      return session.logoutTime ? "loggedout" : "terminated";
+    }
+    return session.isTrulyActive ? "active" : "idle";
+  };
+  const filteredSessions = sessions.filter((session) => {
+    const sessionStatus = getSessionStatus(session);
+    if (filterStatus === "active" && sessionStatus !== "active") return false;
+    if (filterStatus === "idle" && sessionStatus !== "idle") return false;
+    if (filterStatus === "loggedout" && sessionStatus !== "loggedout") return false;
+    if (filterStatus === "terminated" && sessionStatus !== "terminated") return false;
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      const matchesUser = session.user?.email?.toLowerCase().includes(query) || session.user?.username?.toLowerCase().includes(query);
+      const matchesIp = session.ipAddress?.toLowerCase().includes(query);
+      const deviceInfo = parseUserAgent(session.userAgent);
+      const matchesDevice = deviceInfo.device?.toLowerCase().includes(query) || deviceInfo.browser?.toLowerCase().includes(query) || deviceInfo.os?.toLowerCase().includes(query);
+      return matchesUser || matchesIp || matchesDevice;
+    }
+    return true;
+  }).slice(0, parseInt(entriesPerPage));
+  return /* @__PURE__ */ jsxs(Container, { padding: 8, children: [
+    /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderContent, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+        /* @__PURE__ */ jsxs(Title, { children: [
+          /* @__PURE__ */ jsx(Monitor, {}),
+          " Session Manager"
+        ] }),
+        /* @__PURE__ */ jsx(Subtitle, { children: "Monitor and manage user sessions in real-time" })
+      ] }),
+      isPremium && filteredSessions.length > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleExportCSV,
+            startIcon: /* @__PURE__ */ jsx(Download, {}),
+            size: "M",
+            variant: "secondary",
+            style: {
+              backgroundColor: "rgba(255,255,255,0.2)",
+              color: "white",
+              border: "1px solid rgba(255,255,255,0.3)",
+              fontWeight: "600"
+            },
+            children: "Export CSV"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleExportJSON,
+            startIcon: /* @__PURE__ */ jsx(Download, {}),
+            size: "M",
+            variant: "secondary",
+            style: {
+              backgroundColor: "rgba(255,255,255,0.2)",
+              color: "white",
+              border: "1px solid rgba(255,255,255,0.3)",
+              fontWeight: "600"
+            },
+            children: "Export JSON"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(StatsGrid, { children: [
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.success[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(Check, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: activeSessions.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Active" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.warning[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsx(Clock, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: idleSessions.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Idle" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.danger[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsx(Cross, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: loggedOutSessions.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Logged Out" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: theme.colors.neutral[600], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.neutral[100], $color: theme.colors.neutral[600], children: /* @__PURE__ */ jsx(Cross, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: terminatedSessions.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Terminated" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.5s", $color: theme.colors.secondary[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.secondary[100], $color: theme.colors.secondary[600], children: /* @__PURE__ */ jsx(User, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: sessions.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Total" })
+      ] })
+    ] }),
+    loading && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading sessions..." }) }),
+    !loading && sessions.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: "📊 All Sessions" }) }),
+      /* @__PURE__ */ jsxs(FilterBar, { children: [
+        /* @__PURE__ */ jsxs(SearchInputWrapper, { children: [
+          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(
+            StyledSearchInput,
+            {
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search by user, IP address, or device...",
+              type: "text"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { style: { minWidth: "180px" }, children: /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: filterStatus,
+            onChange: setFilterStatus,
+            placeholder: "Filter",
+            size: "S",
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: "All Sessions" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "active", children: "🟢 Active (< 15 min)" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "idle", children: "🟡 Idle (> 15 min)" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "loggedout", children: "🔴 Logged Out" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "terminated", children: "⚫ Terminated" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { style: { minWidth: "130px" }, children: /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: entriesPerPage,
+            onChange: setEntriesPerPage,
+            placeholder: "Entries",
+            size: "S",
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "10", children: "10 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "25", children: "25 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "50", children: "50 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "100", children: "100 entries" })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+        "Showing ",
+        filteredSessions.length,
+        " of ",
+        sessions.length,
+        " sessions",
+        searchQuery && ` (filtered by "${searchQuery}")`
+      ] }) }),
+      filteredSessions.length > 0 ? /* @__PURE__ */ jsx(DataTable, { children: /* @__PURE__ */ jsxs(StyledTable, { children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: "Status" }),
+          /* @__PURE__ */ jsx(Th, { children: "User" }),
+          /* @__PURE__ */ jsx(Th, { children: "Device" }),
+          /* @__PURE__ */ jsx(Th, { children: "IP Address" }),
+          /* @__PURE__ */ jsx(Th, { children: "Login Time" }),
+          /* @__PURE__ */ jsx(Th, { children: "Last Active" }),
+          /* @__PURE__ */ jsx(Th, { children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: filteredSessions.map((session) => {
+          const deviceInfo = parseUserAgent(session.userAgent);
+          const DeviceIcon = getDeviceIcon(deviceInfo.device);
+          const sessionStatus = getSessionStatus(session);
+          const statusConfig = {
+            active: {
+              bg: theme.colors.success[50],
+              badgeColor: "success600",
+              label: "🟢 Active",
+              indicator: true
+            },
+            idle: {
+              bg: theme.colors.warning[50],
+              badgeColor: "warning600",
+              label: "🟡 Idle",
+              indicator: false
+            },
+            loggedout: {
+              bg: theme.colors.danger[50],
+              badgeColor: "danger600",
+              label: "🔴 Logged Out",
+              indicator: false,
+              opacity: 0.7
+            },
+            terminated: {
+              bg: theme.colors.neutral[100],
+              badgeColor: "neutral600",
+              label: "⚫ Terminated",
+              indicator: false,
+              opacity: 0.6
+            }
+          };
+          const config = statusConfig[sessionStatus];
+          return /* @__PURE__ */ jsxs(
+            ClickableRow,
+            {
+              onClick: () => handleSessionClick(session),
+              style: {
+                background: config.bg,
+                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(Flex, { direction: "column", alignItems: "flex-start", children: [
+                  /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", ellipsis: true, children: session.user?.username || session.user?.email || "Unknown" }),
+                  session.user?.email && session.user?.username && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: session.user.email })
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+                  /* @__PURE__ */ jsx(DeviceIcon, { width: "18px", height: "18px" }),
+                  /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: deviceInfo.device }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+                      deviceInfo.browser,
+                      " on ",
+                      deviceInfo.os
+                    ] })
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontFamily: "monospace" }, children: session.ipAddress }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: new Date(session.loginTime).toLocaleString() }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral700", children: new Date(session.lastActive || session.loginTime).toLocaleString() }),
+                  /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: sessionStatus === "active" ? "success600" : "neutral500", children: [
+                    session.minutesSinceActive,
+                    " min ago"
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(ActionButtons, { className: "action-buttons", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      size: "S",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleSessionClick(session);
+                      },
+                      title: "View Details",
+                      children: /* @__PURE__ */ jsx(Eye, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "danger-light",
+                      size: "S",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleTerminateSession(session.id);
+                      },
+                      disabled: sessionStatus !== "active" && sessionStatus !== "idle",
+                      title: session.isActive ? "Terminate (Logout)" : "Already inactive",
+                      children: /* @__PURE__ */ jsx(Cross, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "danger",
+                      size: "S",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDeleteSession(session.id);
+                      },
+                      title: "Delete Permanently",
+                      children: /* @__PURE__ */ jsx(Trash, {})
+                    }
+                  )
+                ] }) })
+              ]
+            },
+            session.id
+          );
+        }) })
+      ] }) }) : (
+        /* No results found */
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              background: theme.colors.neutral[0],
+              borderRadius: theme.borderRadius.xl,
+              border: `2px dashed ${theme.colors.neutral[200]}`,
+              padding: "60px 32px",
+              textAlign: "center",
+              position: "relative",
+              overflow: "hidden",
+              minHeight: "300px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: `linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%)`,
+                    opacity: 0.3,
+                    zIndex: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(FloatingEmoji, { children: "🔍" }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 4, style: { position: "relative", zIndex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    style: {
+                      width: "100px",
+                      height: "100px",
+                      borderRadius: "50%",
+                      background: `linear-gradient(135deg, ${theme.colors.primary[100]} 0%, ${theme.colors.secondary[100]} 100%)`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      boxShadow: theme.shadows.xl
+                    },
+                    children: /* @__PURE__ */ jsx(Search, { style: { width: "50px", height: "50px", color: theme.colors.primary[600] } })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "alpha",
+                    style: {
+                      fontSize: "1.5rem",
+                      fontWeight: "700",
+                      color: theme.colors.neutral[800],
+                      marginBottom: "4px"
+                    },
+                    children: "No sessions found"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "omega",
+                    textColor: "neutral600",
+                    style: {
+                      fontSize: "1rem",
+                      maxWidth: "400px",
+                      lineHeight: "1.6"
+                    },
+                    children: "Try adjusting your search query or filters to find sessions"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      )
+    ] }),
+    !loading && sessions.length === 0 && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          background: theme.colors.neutral[0],
+          borderRadius: theme.borderRadius.xl,
+          border: `2px dashed ${theme.colors.neutral[200]}`,
+          padding: "80px 32px",
+          textAlign: "center",
+          position: "relative",
+          overflow: "hidden",
+          minHeight: "400px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: `linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%)`,
+                opacity: 0.3,
+                zIndex: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FloatingEmoji, { children: "💻" }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 6, style: { position: "relative", zIndex: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  width: "120px",
+                  height: "120px",
+                  borderRadius: "50%",
+                  background: `linear-gradient(135deg, ${theme.colors.primary[100]} 0%, ${theme.colors.secondary[100]} 100%)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: theme.shadows.xl
+                },
+                children: /* @__PURE__ */ jsx(Monitor, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                style: {
+                  fontSize: "1.75rem",
+                  fontWeight: "700",
+                  color: theme.colors.neutral[800],
+                  marginBottom: "8px"
+                },
+                children: "No sessions yet"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "omega",
+                textColor: "neutral600",
+                style: {
+                  fontSize: "1rem",
+                  maxWidth: "500px",
+                  lineHeight: "1.6"
+                },
+                children: "Sessions will appear here when users log in to your application"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showDetailModal && selectedSession && /* @__PURE__ */ jsx(
+      SessionDetailModal,
+      {
+        session: selectedSession,
+        onClose: handleModalClose,
+        onSessionTerminated: handleSessionTerminated
+      }
+    )
+  ] });
+};
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const slideUp = keyframes`
+  from { 
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(4, 28, 47, 0.85);
+  backdrop-filter: blur(8px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${fadeIn} 0.3s ease-out;
+  padding: 20px;
+`;
+const ModalContent = styled(Box)`
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+  animation: ${slideUp} 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+`;
+const GradientHeader = styled(Box)`
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 32px 40px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  }
+`;
+const IconWrapper = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+
+  svg {
+    width: 36px;
+    height: 36px;
+    color: white;
+  }
+`;
+const CloseButton = styled.button`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 10;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ToggleButton = styled.button`
+  background: none;
+  border: none;
+  color: #667eea;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 0;
+  text-decoration: underline;
+  transition: color 0.2s;
+  
+  &:hover {
+    color: #764ba2;
+  }
+`;
+const LicenseGuard = ({ children }) => {
+  const { get, post } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
+  const [isChecking, setIsChecking] = useState(true);
+  const [needsLicense, setNeedsLicense] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [useExistingKey, setUseExistingKey] = useState(false);
+  const [useAutoCreate, setUseAutoCreate] = useState(true);
+  const [existingLicenseKey, setExistingLicenseKey] = useState("");
+  const [existingEmail, setExistingEmail] = useState("");
+  const [adminUser, setAdminUser] = useState(null);
+  const [formData, setFormData] = useState({
+    email: "",
+    firstName: "",
+    lastName: ""
+  });
+  useEffect(() => {
+    checkLicenseStatus();
+    fetchAdminUser();
+  }, []);
+  const fetchAdminUser = async () => {
+    try {
+      const response = await get("/admin/users/me");
+      const userData = response.data?.data || response.data;
+      if (userData) {
+        setAdminUser(userData);
+        setFormData({
+          email: userData.email || "",
+          firstName: userData.firstname || "",
+          lastName: userData.lastname || ""
+        });
+      }
+    } catch (error) {
+      console.debug("[LicenseGuard] Could not fetch admin user (not logged in yet)");
+    }
+  };
+  const checkLicenseStatus = async () => {
+    setIsChecking(true);
+    try {
+      const response = await get(`/${pluginId}/license/status`);
+      if (response.data.valid) {
+        setNeedsLicense(false);
+      } else {
+        setNeedsLicense(true);
+      }
+    } catch (error) {
+      console.error("[LicenseGuard] Error checking license:", error);
+      setNeedsLicense(true);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+  const handleAutoCreateLicense = async (e) => {
+    e.preventDefault();
+    setIsCreating(true);
+    try {
+      const response = await post(`/${pluginId}/license/auto-create`, {});
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: "License automatically created! Reloading..."
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Failed to auto-create license");
+      }
+    } catch (error) {
+      console.error("[LicenseGuard] Error auto-creating license:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Failed to auto-create license. Try manual creation."
+      });
+      setIsCreating(false);
+      setUseAutoCreate(false);
+    }
+  };
+  const handleCreateLicense = async (e) => {
+    e.preventDefault();
+    if (!formData.email || !formData.firstName || !formData.lastName) {
+      toggleNotification({
+        type: "warning",
+        message: "Please fill in all fields"
+      });
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const response = await post(`/${pluginId}/license/create`, formData);
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: "License created successfully! Reloading..."
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Failed to create license");
+      }
+    } catch (error) {
+      console.error("[LicenseGuard] Error creating license:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Failed to create license. Please try again."
+      });
+      setIsCreating(false);
+    }
+  };
+  const handleValidateExistingKey = async (e) => {
+    e.preventDefault();
+    if (!existingLicenseKey.trim() || !existingEmail.trim()) {
+      toggleNotification({
+        type: "warning",
+        message: "Please enter both license key and email address"
+      });
+      return;
+    }
+    setIsCreating(true);
+    try {
+      const response = await post(`/${pluginId}/license/store-key`, {
+        licenseKey: existingLicenseKey.trim(),
+        email: existingEmail.trim()
+      });
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: "License key validated successfully! Reloading..."
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Invalid license key or email");
+      }
+    } catch (error) {
+      console.error("[LicenseGuard] Error validating license key:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Invalid license key or email address. Please check and try again."
+      });
+      setIsCreating(false);
+    }
+  };
+  const handleClose = () => {
+    navigate("/content-manager");
+  };
+  if (isChecking) {
+    return /* @__PURE__ */ jsx(Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Loader, { children: "Checking license..." }) });
+  }
+  if (needsLicense) {
+    return /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsxs(GradientHeader, { children: [
+        /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ jsx(Cross, {}) }),
+        /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Key, {}) }),
+        /* @__PURE__ */ jsxs(Box, { style: { textAlign: "center", position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "alpha",
+              style: {
+                color: "white",
+                fontSize: "24px",
+                fontWeight: "700",
+                marginBottom: "12px",
+                display: "block"
+              },
+              children: "🔐 Activate Session Manager"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "epsilon",
+              style: {
+                color: "rgba(255, 255, 255, 0.9)",
+                fontSize: "14px",
+                display: "block"
+              },
+              children: useExistingKey ? "Enter your existing license key" : "Create a license to start using the plugin"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("form", { onSubmit: useExistingKey ? handleValidateExistingKey : useAutoCreate ? handleAutoCreateLicense : handleCreateLicense, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 6,
+          paddingLeft: 8,
+          paddingRight: 8,
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsxs(Box, { style: { textAlign: "center", width: "100%" }, children: [
+              !useExistingKey && /* @__PURE__ */ jsx(
+                ToggleButton,
+                {
+                  type: "button",
+                  onClick: () => setUseAutoCreate(!useAutoCreate),
+                  disabled: isCreating,
+                  style: { marginBottom: "8px", display: "block", margin: "0 auto" },
+                  children: useAutoCreate ? "→ Manual entry" : "← Auto-create with my account"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToggleButton,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setUseExistingKey(!useExistingKey);
+                    if (!useExistingKey) setUseAutoCreate(false);
+                  },
+                  disabled: isCreating,
+                  children: useExistingKey ? "← Create new license" : "Have a license key? →"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                background: "primary100",
+                padding: 4,
+                style: {
+                  borderRadius: "8px",
+                  border: "2px solid #BAE6FD",
+                  width: "100%"
+                },
+                children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "🔑 Enter your email and license key to activate." : useAutoCreate && adminUser && adminUser.email ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})` : useAutoCreate ? '✨ Click "Activate" to auto-create a license with your admin account' : "💡 A license will be created with the details below." })
+              }
+            ),
+            useExistingKey ? (
+              // Existing License Key Input
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Email Address *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "admin@example.com",
+                      type: "email",
+                      value: existingEmail,
+                      onChange: (e) => setExistingEmail(e.target.value),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px" }, children: "Enter the email address associated with this license" })
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "License Key *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "67C5-40D2-7695-718C",
+                      value: existingLicenseKey,
+                      onChange: (e) => setExistingLicenseKey(e.target.value),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px" }, children: "Enter the license key in the format: XXXX-XXXX-XXXX-XXXX" })
+                ] })
+              ] })
+            ) : useAutoCreate && adminUser ? (
+              // Auto-create mode - Show user info
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  background: "success100",
+                  padding: 5,
+                  style: {
+                    borderRadius: "8px",
+                    border: "2px solid #DCFCE7",
+                    textAlign: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account:" }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
+                      "👤 ",
+                      adminUser.firstname || "Admin",
+                      " ",
+                      adminUser.lastname || "User"
+                    ] }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+                      "📧 ",
+                      adminUser.email || "Loading..."
+                    ] })
+                  ]
+                }
+              )
+            ) : (
+              // Manual Create License Fields
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Email Address *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "admin@example.com",
+                      type: "email",
+                      value: formData.email,
+                      onChange: (e) => setFormData({ ...formData, email: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "First Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "John",
+                      value: formData.firstName,
+                      onChange: (e) => setFormData({ ...formData, firstName: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Last Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "Doe",
+                      value: formData.lastName,
+                      onChange: (e) => setFormData({ ...formData, lastName: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] })
+              ] })
+            ),
+            /* @__PURE__ */ jsx(Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "L",
+                startIcon: /* @__PURE__ */ jsx(Check, {}),
+                loading: isCreating,
+                disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
+                style: {
+                  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  color: "white",
+                  fontWeight: "600",
+                  border: "none",
+                  boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
+                },
+                children: "Validate License"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "L",
+                startIcon: /* @__PURE__ */ jsx(Check, {}),
+                loading: isCreating,
+                disabled: isCreating || !useAutoCreate && (!formData.email || !formData.firstName || !formData.lastName),
+                style: {
+                  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  color: "white",
+                  fontWeight: "600",
+                  border: "none",
+                  boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
+                },
+                children: useAutoCreate ? "Activate License" : "Create License"
+              }
+            ) })
+          ] })
+        }
+      ) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const App = () => {
+  return /* @__PURE__ */ jsx(LicenseGuard, { children: /* @__PURE__ */ jsx(HomePage, {}) });
+};
+export {
+  App as default
+};