strapi-plugin-magic-sessionmanager 4.0.0 → 4.0.2

package/dist/_chunks/{App-DdnUYWbC.js → App-DDKYCjKw.js}

@@ -2,15 +2,70 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const reactIntl = require("react-intl");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
+const index = require("./index-CWcvrfXc.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
-const index = require("./index-DC8Y0qxx.js");
-const useLicense = require("./useLicense-qgGfMvse.js");
+const useLicense = require("./useLicense-DtvJOszr.js");
 const reactRouterDom = require("react-router-dom");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const theme = {
+  colors: {
+    primary: {
+      50: "#F0F9FF",
+      100: "#E0F2FE",
+      600: "#0284C7"
+    },
+    secondary: {
+      50: "#FAF5FF",
+      100: "#F3E8FF",
+      600: "#9333EA"
+    },
+    success: {
+      50: "#F0FDF4",
+      100: "#DCFCE7",
+      500: "#22C55E",
+      600: "#16A34A"
+    },
+    warning: {
+      50: "#FFFBEB",
+      100: "#FEF3C7",
+      500: "#F59E0B",
+      600: "#D97706"
+    },
+    danger: {
+      50: "#FEF2F2",
+      100: "#FEE2E2",
+      500: "#EF4444",
+      600: "#DC2626"
+    }
+  },
+  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 TwoColumnGrid = styled__default.default.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -35,6 +90,7 @@ const Section = styled__default.default(designSystem.Box)`
   margin-bottom: 24px;
 `;
 const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
+  const { formatMessage } = reactIntl.useIntl();
   const { get, post } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
   const { isPremium } = useLicense.useLicense();
@@ -42,6 +98,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const [showUserAgent, setShowUserAgent] = react.useState(false);
   const [geoData, setGeoData] = react.useState(null);
   const [geoLoading, setGeoLoading] = react.useState(false);
+  const t = (id, defaultMessage, values) => formatMessage({ id: index.getTranslation(id), defaultMessage }, values);
   if (!session) return null;
   const deviceInfo = index.parseUserAgent(session.userAgent);
   const isOnline = session.isTrulyActive;
@@ -58,7 +115,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
     } catch (err) {
       console.error("[SessionDetailModal] Error fetching geolocation:", err);
       setGeoData({
-        country_flag: "🌍",
+        country_flag: "",
         country: "Unknown",
         city: "Unknown",
         timezone: "Unknown",
@@ -72,7 +129,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
     }
   };
   const premiumData = geoData || {
-    country_flag: "🌍",
+    country_flag: "",
     country: "Loading...",
     city: "Loading...",
     timezone: "Loading...",
@@ -88,7 +145,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   };
   const DeviceIcon = getDeviceIcon(deviceInfo.device);
   const handleTerminate = async () => {
-    if (!confirm("Are you sure you want to terminate this session?")) {
+    if (!confirm(t("modal.confirm.terminate", "Are you sure you want to terminate this session?"))) {
       return;
     }
     setTerminating(true);
@@ -96,7 +153,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       await post(`/${index.pluginId}/sessions/${session.id}/terminate`);
       toggleNotification({
         type: "success",
-        message: "Session terminated successfully"
+        message: t("notifications.success.terminated", "Session terminated successfully")
       });
       onSessionTerminated();
       onClose();
@@ -104,7 +161,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       console.error("[SessionDetailModal] Error:", err);
       toggleNotification({
         type: "danger",
-        message: "Failed to terminate session"
+        message: t("notifications.error.terminate", "Failed to terminate session")
       });
     } finally {
       setTerminating(false);
@@ -138,11 +195,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         justifyContent: "center"
       }, children: /* @__PURE__ */ jsxRuntime.jsx(DeviceIcon, { width: "24px", height: "24px" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Session Details" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-          "ID: ",
-          session.id
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: t("modal.title", "Session Details") }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("modal.id", "ID: {id}", { id: session.id }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
@@ -153,34 +207,34 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
           textColor: "neutral0",
           size: "M",
           style: { fontSize: "14px", padding: "8px 20px", fontWeight: "600" },
-          children: isOnline ? "🟢 ONLINE" : "⚫ OFFLINE"
+          children: 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: [
           /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "👤 User" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Check, label: "Username", value: session.user?.username || "N/A" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: "Email", value: session.user?.email || "N/A" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: "User ID", value: session.user?.id || "N/A" })
+            /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("modal.section.user", "User") }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Check, label: t("modal.user.username", "Username"), value: session.user?.username || t("modal.user.na", "N/A") }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: t("modal.user.email", "Email"), value: session.user?.email || t("modal.user.na", "N/A") }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: t("modal.user.id", "User ID"), value: session.user?.id || t("modal.user.na", "N/A") })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "💻 Device" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: DeviceIcon, label: "Device", value: deviceInfo.device }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Monitor, label: "Browser", value: `${deviceInfo.browser} ${deviceInfo.browserVersion || ""}` }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Server, label: "OS", value: deviceInfo.os }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: "IP", value: session.ipAddress })
+            /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("modal.section.device", "Device") }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: DeviceIcon, label: t("modal.device.device", "Device"), value: deviceInfo.device }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Monitor, label: t("modal.device.browser", "Browser"), value: `${deviceInfo.browser} ${deviceInfo.browserVersion || ""}` }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Server, label: t("modal.device.os", "OS"), value: deviceInfo.os }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Information, label: t("modal.device.ip", "IP"), value: session.ipAddress })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "⏱️ Timeline" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("modal.section.timeline", "Timeline") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             DetailRow,
             {
               compact: true,
               icon: icons.Clock,
-              label: "Login",
+              label: t("modal.timeline.login", "Login"),
               value: new Date(session.loginTime).toLocaleString("de-DE", {
                 day: "2-digit",
                 month: "short",
@@ -194,7 +248,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: icons.Clock,
-              label: "Last Active",
+              label: t("modal.timeline.lastActive", "Last Active"),
               value: new Date(session.lastActive || session.loginTime).toLocaleString("de-DE", {
                 day: "2-digit",
                 month: "short",
@@ -208,8 +262,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: icons.Clock,
-              label: "Idle Time",
-              value: `${session.minutesSinceActive} min`
+              label: t("modal.timeline.idleTime", "Idle Time"),
+              value: t("modal.timeline.minutes", "{minutes} min", { minutes: session.minutesSinceActive })
             }
           ),
           session.logoutTime && /* @__PURE__ */ jsxRuntime.jsx(
@@ -217,7 +271,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: icons.Cross,
-              label: "Logout",
+              label: t("modal.timeline.logout", "Logout"),
               value: new Date(session.logoutTime).toLocaleString("de-DE", {
                 day: "2-digit",
                 month: "short",
@@ -229,20 +283,20 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         ] }) })
       ] }),
       isPremium ? /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "🌍 Location & Security" }),
-        geoLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Loading location data..." }) }) : /* @__PURE__ */ jsxRuntime.jsxs(TwoColumnGrid, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: t("modal.section.security", "Location and Security") }),
+        geoLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("modal.security.loading", "Loading location data...") }) }) : /* @__PURE__ */ jsxRuntime.jsxs(TwoColumnGrid, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               DetailRow,
               {
                 compact: true,
                 icon: icons.Earth,
-                label: "Country",
-                value: `${premiumData.country_flag || "🌍"} ${premiumData.country}`
+                label: t("modal.security.country", "Country"),
+                value: `${premiumData.country_flag || ""} ${premiumData.country}`.trim()
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Earth, label: "City", value: premiumData.city }),
-            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Clock, label: "Timezone", value: premiumData.timezone })
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Earth, label: t("modal.security.city", "City"), value: premiumData.city }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { compact: true, icon: icons.Clock, label: t("modal.security.timezone", "Timezone"), value: premiumData.timezone })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -250,7 +304,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: icons.Shield,
-                label: "Security",
+                label: t("modal.security.score", "Security"),
                 value: `${premiumData.securityScore}/100 (${premiumData.riskLevel})`
               }
             ),
@@ -259,8 +313,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: icons.Shield,
-                label: "VPN",
-                value: premiumData.isVpn ? "⚠️ Yes" : "✅ No"
+                label: t("modal.security.vpn", "VPN"),
+                value: premiumData.isVpn ? t("modal.security.vpnWarning", "[WARNING] Yes") : t("modal.security.no", "No")
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -268,8 +322,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: icons.Shield,
-                label: "Proxy",
-                value: premiumData.isProxy ? "⚠️ Yes" : "✅ No"
+                label: t("modal.security.proxy", "Proxy"),
+                value: premiumData.isProxy ? t("modal.security.vpnWarning", "[WARNING] Yes") : t("modal.security.no", "No")
               }
             )
           ] })
@@ -286,8 +340,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(icons.Crown, { style: { width: "40px", height: "40px", color: "#d97706" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: "🌍 Location & Security Analysis" }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.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__ */ 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,
               {
@@ -302,7 +356,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                   marginTop: "8px",
                   boxShadow: "0 4px 12px rgba(245, 158, 11, 0.3)"
                 },
-                children: "Upgrade to Premium"
+                children: t("modal.premium.upgrade", "Upgrade to Premium")
               }
             )
           ] })
@@ -310,7 +364,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
         /* @__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: "🔧 Technical Details" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { style: { marginBottom: 0, paddingBottom: 0, border: "none" }, children: t("modal.section.technical", "Technical Details") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Button,
             {
@@ -318,7 +372,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               size: "S",
               onClick: () => setShowUserAgent(!showUserAgent),
               style: { fontSize: "12px" },
-              children: showUserAgent ? "▲ Hide Details" : "▼ Show Details"
+              children: showUserAgent ? `▲ ${t("modal.technical.hide", "Hide Details")}` : `▼ ${t("modal.technical.show", "Show Details")}`
             }
           )
         ] }),
@@ -343,7 +397,7 @@ 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: "Close" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: onClose, variant: "tertiary", children: t("modal.actions.close", "Close") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Button,
         {
@@ -352,72 +406,12 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
           disabled: !session.isActive || terminating,
           loading: terminating,
           startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}),
-          children: "Terminate Session"
+          children: t("modal.actions.terminate", "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 = styled.keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -506,7 +500,7 @@ const HeaderContent = styled__default.default(designSystem.Flex)`
   z-index: 1;
 `;
 const Title = styled__default.default(designSystem.Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -558,7 +552,7 @@ const StatsGrid = styled__default.default.div`
   }
 `;
 const StatCard = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -567,7 +561,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   ${styled.css`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]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -588,7 +582,7 @@ const StatCard = styled__default.default(designSystem.Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme.shadows.xl};
-    border-color: ${(props) => props.$color || theme.colors.primary[500]};
+    border-color: ${(props) => props.$color || props.theme.colors.primary600};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -596,7 +590,7 @@ const StatCard = styled__default.default(designSystem.Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme.colors.primary[600]};
+      color: ${(props) => props.$color || props.theme.colors.primary600};
     }
   }
 `;
@@ -607,7 +601,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || theme.colors.primary[100]};
+  background: ${(props) => props.$bg || props.theme.colors.primary100};
   transition: all ${theme.transitions.normal};
   margin: 0 auto 20px;
   box-shadow: ${theme.shadows.sm};
@@ -615,7 +609,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
   svg {
     width: 34px;
     height: 34px;
-    color: ${(props) => props.$color || theme.colors.primary[600]};
+    color: ${(props) => props.$color || props.theme.colors.primary600};
   }
   
   @media screen and (max-width: ${breakpoints.mobile}) {
@@ -632,7 +626,7 @@ const StatIcon = styled__default.default(designSystem.Box)`
 const StatValue = styled__default.default(designSystem.Typography)`
   font-size: 2.75rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${(props) => props.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: 10px;
   transition: all ${theme.transitions.normal};
@@ -645,7 +639,7 @@ const StatValue = styled__default.default(designSystem.Typography)`
 `;
 const StatLabel = styled__default.default(designSystem.Typography)`
   font-size: 0.95rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-align: center;
@@ -655,21 +649,21 @@ const StatLabel = styled__default.default(designSystem.Typography)`
   }
 `;
 const DataTable = styled__default.default(designSystem.Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   overflow: hidden;
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   margin-bottom: ${theme.spacing.xl};
 `;
 const StyledTable = styled__default.default(designSystem.Table)`
   thead {
-    background: ${theme.colors.neutral[50]};
-    border-bottom: 2px solid ${theme.colors.neutral[200]};
+    background: ${(props) => props.theme.colors.neutral100};
+    border-bottom: 2px solid ${(props) => props.theme.colors.neutral200};
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -679,14 +673,14 @@ const StyledTable = styled__default.default(designSystem.Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid ${(props) => props.theme.colors.neutral150};
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${(props) => props.theme.colors.primary100};
       
       .action-buttons {
         opacity: 1;
@@ -695,7 +689,7 @@ const StyledTable = styled__default.default(designSystem.Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
@@ -704,18 +698,18 @@ const OnlineIndicator = styled__default.default.div`
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: ${(props) => props.$online ? theme.colors.success[500] : theme.colors.neutral[400]};
+  background: ${(props) => props.$online ? theme.colors.success[500] : props.theme.colors.neutral400};
   display: inline-block;
   margin-right: 8px;
   ${styled.css`animation: ${(props) => props.$online ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const FilterBar = styled__default.default(designSystem.Flex)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   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]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -730,27 +724,27 @@ const SearchIcon = styled__default.default(icons.Search)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   pointer-events: none;
 `;
 const StyledSearchInput = styled__default.default.input`
   width: 100%;
   padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${(props) => props.theme.colors.neutral200};
   border-radius: ${theme.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme.transitions.fast};
-  background: ${theme.colors.neutral[0]};
-  color: ${theme.colors.neutral[800]};
+  background: ${(props) => props.theme.colors.neutral0};
+  color: ${(props) => props.theme.colors.neutral800};
   
   &:focus {
     outline: none;
-    border-color: ${theme.colors.primary[500]};
-    box-shadow: 0 0 0 3px ${theme.colors.primary[100]};
+    border-color: ${(props) => props.theme.colors.primary600};
+    box-shadow: 0 0 0 3px ${(props) => props.theme.colors.primary100};
   }
   
   &::placeholder {
-    color: ${theme.colors.neutral[600]};
+    color: ${(props) => props.theme.colors.neutral500};
   }
 `;
 const ActionButtons = styled__default.default(designSystem.Flex)`
@@ -763,13 +757,38 @@ const ClickableRow = styled__default.default(designSystem.Tr)`
   cursor: pointer;
   
   &:hover {
-    background: ${theme.colors.primary[50]} !important;
+    background: ${(props) => props.theme.colors.primary100} !important;
   }
 `;
+styled__default.default(designSystem.Box)`
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: ${theme.borderRadius.xl};
+  border: 2px dashed ${(props) => props.theme.colors.neutral300};
+  padding: 80px 32px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  min-height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+styled__default.default.div`
+  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;
+  z-index: 0;
+`;
 const HomePage = () => {
+  const { formatMessage } = reactIntl.useIntl();
   const { get, post, del } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
   const { isPremium } = useLicense.useLicense();
+  const t = (id, defaultMessage, values) => formatMessage({ id: index.getTranslation(id), defaultMessage }, values);
   const [sessions, setSessions] = react.useState([]);
   const [loading, setLoading] = react.useState(true);
   const [filterStatus, setFilterStatus] = react.useState("active");
@@ -798,7 +817,7 @@ const HomePage = () => {
     }
   };
   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).")) {
+    if (!confirm(t("homepage.confirm.terminate", "Are you sure you want to terminate this session?\n\nThis will set isActive to false (user will be logged out)."))) {
       return;
     }
     try {
@@ -809,7 +828,7 @@ const HomePage = () => {
     }
   };
   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?")) {
+    if (!confirm(t("homepage.confirm.delete", "[WARNING] This will PERMANENTLY delete this session from the database!\n\nThis action cannot be undone.\n\nAre you sure?"))) {
       return;
     }
     try {
@@ -817,13 +836,13 @@ const HomePage = () => {
       fetchSessions();
       toggleNotification({
         type: "success",
-        message: "Session permanently deleted"
+        message: t("notifications.success.deleted", "Session permanently deleted")
       });
     } catch (err) {
       console.error("[SessionManager] Error deleting session:", err);
       toggleNotification({
         type: "danger",
-        message: "Failed to delete session"
+        message: t("notifications.error.delete", "Failed to delete session")
       });
     }
   };
@@ -831,7 +850,7 @@ const HomePage = () => {
     if (!isPremium) {
       toggleNotification({
         type: "warning",
-        message: "Premium license required for export functionality"
+        message: t("notifications.warning.premiumRequired", "Premium license required for export functionality")
       });
       return;
     }
@@ -866,13 +885,13 @@ const HomePage = () => {
       link.click();
       toggleNotification({
         type: "success",
-        message: `Exported ${filteredSessions.length} sessions to CSV`
+        message: t("notifications.success.exported", "Exported {count} sessions to {format}", { count: filteredSessions.length, format: "CSV" })
       });
     } catch (err) {
       console.error("[SessionManager] Export error:", err);
       toggleNotification({
         type: "danger",
-        message: "Failed to export sessions"
+        message: t("notifications.error.export", "Failed to export sessions")
       });
     }
   };
@@ -880,7 +899,7 @@ const HomePage = () => {
     if (!isPremium) {
       toggleNotification({
         type: "warning",
-        message: "Premium license required for export functionality"
+        message: t("notifications.warning.premiumRequired", "Premium license required for export functionality")
       });
       return;
     }
@@ -923,13 +942,13 @@ const HomePage = () => {
       link.click();
       toggleNotification({
         type: "success",
-        message: `Exported ${filteredSessions.length} sessions to JSON`
+        message: t("notifications.success.exported", "Exported {count} sessions to {format}", { count: filteredSessions.length, format: "JSON" })
       });
     } catch (err) {
       console.error("[SessionManager] Export error:", err);
       toggleNotification({
         type: "danger",
-        message: "Failed to export sessions"
+        message: t("notifications.error.export", "Failed to export sessions")
       });
     }
   };
@@ -980,9 +999,10 @@ const HomePage = () => {
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons.Monitor, {}),
-          " Session Manager"
+          " ",
+          t("homepage.title", "Session Manager")
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Monitor and manage user sessions in real-time" })
+        /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: t("homepage.subtitle", "Monitor and manage user sessions in real-time") })
       ] }),
       isPremium && filteredSessions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -998,7 +1018,7 @@ const HomePage = () => {
               border: "1px solid rgba(255,255,255,0.3)",
               fontWeight: "600"
             },
-            children: "Export CSV"
+            children: t("homepage.export.csv", "Export CSV")
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1014,7 +1034,7 @@ const HomePage = () => {
               border: "1px solid rgba(255,255,255,0.3)",
               fontWeight: "600"
             },
-            children: "Export JSON"
+            children: t("homepage.export.json", "Export JSON")
           }
         )
       ] })
@@ -1023,32 +1043,32 @@ const HomePage = () => {
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.success[500], children: [
         /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: activeSessions.length }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Active" })
+        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.active", "Active") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.warning[500], children: [
         /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Clock, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: idleSessions.length }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Idle" })
+        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.idle", "Idle") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.danger[500], children: [
         /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.danger[100], $color: theme.colors.danger[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: loggedOutSessions.length }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Logged Out" })
+        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.loggedOut", "Logged Out") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: theme.colors.neutral[600], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.neutral[100], $color: theme.colors.neutral[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.4s", $color: "#4B5563", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "#F3F4F6", $color: "#4B5563", children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: terminatedSessions.length }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Terminated" })
+        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.terminated", "Terminated") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.5s", $color: theme.colors.secondary[500], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.secondary[100], $color: theme.colors.secondary[600], children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatCard, { $delay: "0.5s", $color: "#A855F7", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StatIcon, { className: "stat-icon", $bg: "#EDE9FE", $color: "#9333EA", children: /* @__PURE__ */ jsxRuntime.jsx(icons.User, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(StatValue, { className: "stat-value", children: sessions.length }),
-        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Total" })
+        /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: t("homepage.stats.total", "Total") })
       ] })
     ] }),
-    loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading sessions..." }) }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: t("homepage.loading", "Loading sessions...") }) }),
     !loading && sessions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: "📊 All Sessions" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", textColor: "neutral700", style: { marginBottom: theme.spacing.md }, children: t("homepage.allSessions", "All Sessions") }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(FilterBar, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(SearchInputWrapper, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}),
@@ -1057,7 +1077,7 @@ const HomePage = () => {
             {
               value: searchQuery,
               onChange: (e) => setSearchQuery(e.target.value),
-              placeholder: "Search by user, IP address, or device...",
+              placeholder: t("homepage.search.placeholder", "Search by user, IP address, or device..."),
               type: "text"
             }
           )
@@ -1070,11 +1090,11 @@ const HomePage = () => {
             placeholder: "Filter",
             size: "S",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "all", children: "All Sessions" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "active", children: "🟢 Active (< 15 min)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "idle", children: "🟡 Idle (> 15 min)" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "loggedout", children: "🔴 Logged Out" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "terminated", children: "⚫ Terminated" })
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "all", children: t("homepage.filter.all", "All Sessions") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "active", children: t("homepage.filter.active", "Active (less than 15 min)") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "idle", children: t("homepage.filter.idle", "Idle (more than 15 min)") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "loggedout", children: t("homepage.filter.loggedout", "Logged Out") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "terminated", children: t("homepage.filter.terminated", "Terminated") })
             ]
           }
         ) }),
@@ -1086,31 +1106,24 @@ const HomePage = () => {
             placeholder: "Entries",
             size: "S",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "10", children: "10 entries" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "25", children: "25 entries" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "50", children: "50 entries" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "100", children: "100 entries" })
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "10", children: t("homepage.entries.10", "10 entries") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "25", children: t("homepage.entries.25", "25 entries") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "50", children: t("homepage.entries.50", "50 entries") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "100", children: t("homepage.entries.100", "100 entries") })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-        "Showing ",
-        filteredSessions.length,
-        " of ",
-        sessions.length,
-        " sessions",
-        searchQuery && ` (filtered by "${searchQuery}")`
-      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: searchQuery ? t("homepage.showingFiltered", 'Showing {count} of {total} sessions (filtered by "{query}")', { count: filteredSessions.length, total: sessions.length, query: searchQuery }) : t("homepage.showing", "Showing {count} of {total} sessions", { count: filteredSessions.length, total: sessions.length }) }) }),
       filteredSessions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DataTable, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Status" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "User" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Device" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "IP Address" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Login Time" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Last Active" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: "Actions" })
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.status", "Status") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.user", "User") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.device", "Device") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.ipAddress", "IP Address") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.loginTime", "Login Time") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.lastActive", "Last Active") }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: t("homepage.table.actions", "Actions") })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: filteredSessions.map((session) => {
           const deviceInfo = index.parseUserAgent(session.userAgent);
@@ -1120,26 +1133,26 @@ const HomePage = () => {
             active: {
               bg: theme.colors.success[50],
               badgeColor: "success600",
-              label: "🟢 Active",
+              label: t("homepage.status.active", "Active"),
               indicator: true
             },
             idle: {
               bg: theme.colors.warning[50],
               badgeColor: "warning600",
-              label: "🟡 Idle",
+              label: t("homepage.status.idle", "Idle"),
               indicator: false
             },
             loggedout: {
               bg: theme.colors.danger[50],
               badgeColor: "danger600",
-              label: "🔴 Logged Out",
+              label: t("homepage.status.loggedOut", "Logged Out"),
               indicator: false,
               opacity: 0.7
             },
             terminated: {
-              bg: theme.colors.neutral[100],
+              bg: "#F3F4F6",
               badgeColor: "neutral600",
-              label: "⚫ Terminated",
+              label: t("homepage.status.terminated", "Terminated"),
               indicator: false,
               opacity: 0.6
             }
@@ -1167,7 +1180,7 @@ const HomePage = () => {
                   )
                 ] }) }),
                 /* @__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 || "Unknown" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", ellipsis: true, children: session.user?.username || session.user?.email || t("homepage.user.unknown", "Unknown") }),
                   session.user?.email && session.user?.username && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: session.user.email })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
@@ -1185,10 +1198,7 @@ const HomePage = () => {
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: new Date(session.loginTime).toLocaleString() }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral700", children: new Date(session.lastActive || session.loginTime).toLocaleString() }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: sessionStatus === "active" ? "success600" : "neutral500", children: [
-                    session.minutesSinceActive,
-                    " min ago"
-                  ] })
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: sessionStatus === "active" ? "success600" : "neutral500", children: t("homepage.time.minAgo", "{minutes} min ago", { minutes: session.minutesSinceActive }) })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { className: "action-buttons", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -1200,7 +1210,7 @@ const HomePage = () => {
                         e.stopPropagation();
                         handleSessionClick(session);
                       },
-                      title: "View Details",
+                      title: t("homepage.actions.viewDetails", "View Details"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
                     }
                   ),
@@ -1214,7 +1224,7 @@ const HomePage = () => {
                         handleTerminateSession(session.id);
                       },
                       disabled: sessionStatus !== "active" && sessionStatus !== "idle",
-                      title: session.isActive ? "Terminate (Logout)" : "Already inactive",
+                      title: session.isActive ? t("homepage.actions.terminate", "Terminate (Logout)") : t("homepage.actions.alreadyInactive", "Already inactive"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
                     }
                   ),
@@ -1227,7 +1237,7 @@ const HomePage = () => {
                         e.stopPropagation();
                         handleDeleteSession(session.id);
                       },
-                      title: "Delete Permanently",
+                      title: t("homepage.actions.deletePermanently", "Delete Permanently"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
                     }
                   )
@@ -1242,10 +1252,10 @@ const HomePage = () => {
         /* @__PURE__ */ jsxRuntime.jsxs(
           designSystem.Box,
           {
+            background: "neutral0",
             style: {
-              background: theme.colors.neutral[0],
               borderRadius: theme.borderRadius.xl,
-              border: `2px dashed ${theme.colors.neutral[200]}`,
+              border: "2px dashed #E5E7EB",
               padding: "60px 32px",
               textAlign: "center",
               position: "relative",
@@ -1286,20 +1296,20 @@ const HomePage = () => {
                       justifyContent: "center",
                       boxShadow: theme.shadows.xl
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { style: { width: "50px", height: "50px", color: theme.colors.primary[600] } })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { style: { width: "50px", height: "50px", color: "#0284C7" } })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   designSystem.Typography,
                   {
                     variant: "alpha",
+                    textColor: "neutral800",
                     style: {
                       fontSize: "1.5rem",
                       fontWeight: "700",
-                      color: theme.colors.neutral[800],
                       marginBottom: "4px"
                     },
-                    children: "No sessions found"
+                    children: t("homepage.noResults.title", "No sessions found")
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1312,7 +1322,7 @@ const HomePage = () => {
                       maxWidth: "400px",
                       lineHeight: "1.6"
                     },
-                    children: "Try adjusting your search query or filters to find sessions"
+                    children: t("homepage.noResults.description", "Try adjusting your search query or filters to find sessions")
                   }
                 )
               ] })
@@ -1324,10 +1334,10 @@ const HomePage = () => {
     !loading && sessions.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(
       designSystem.Box,
       {
+        background: "neutral0",
         style: {
-          background: theme.colors.neutral[0],
           borderRadius: theme.borderRadius.xl,
-          border: `2px dashed ${theme.colors.neutral[200]}`,
+          border: "2px dashed #E5E7EB",
           padding: "80px 32px",
           textAlign: "center",
           position: "relative",
@@ -1353,7 +1363,6 @@ const HomePage = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(FloatingEmoji, { children: "💻" }),
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 6, style: { position: "relative", zIndex: 1 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Box,
@@ -1368,20 +1377,20 @@ const HomePage = () => {
                   justifyContent: "center",
                   boxShadow: theme.shadows.xl
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Monitor, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Monitor, { style: { width: "60px", height: "60px", color: "#0284C7" } })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Typography,
               {
                 variant: "alpha",
+                textColor: "neutral800",
                 style: {
                   fontSize: "1.75rem",
                   fontWeight: "700",
-                  color: theme.colors.neutral[800],
                   marginBottom: "8px"
                 },
-                children: "No sessions yet"
+                children: t("homepage.empty.title", "No sessions yet")
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1394,7 +1403,7 @@ const HomePage = () => {
                   maxWidth: "500px",
                   lineHeight: "1.6"
                 },
-                children: "Sessions will appear here when users log in to your application"
+                children: t("homepage.empty.description", "Sessions will appear here when users log in to your application")
               }
             )
           ] })
@@ -1759,7 +1768,7 @@ const LicenseGuard = ({ children }) => {
                   border: "2px solid #BAE6FD",
                   width: "100%"
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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." })
+                children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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 ? (
@@ -1826,15 +1835,11 @@ const LicenseGuard = ({ children }) => {
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account:" }),
                     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
-                      "👤 ",
                       adminUser.firstname || "Admin",
                       " ",
                       adminUser.lastname || "User"
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-                      "📧 ",
-                      adminUser.email || "Loading..."
-                    ] })
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: adminUser.email || "Loading..." })
                   ]
                 }
               )