strapi-plugin-magic-sessionmanager 4.0.1 → 4.0.3

package/dist/_chunks/{App-CIQ-7sa7.mjs → App-DJW1ZNl5.mjs}

@@ -1,12 +1,67 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
+import { p as parseUserAgent, a as pluginId, g as getTranslation } from "./index-DQO9bNP7.mjs";
 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-Duk1_Wrz.mjs";
-import { u as useLicense } from "./useLicense-Ce8GaxB0.mjs";
+import { u as useLicense } from "./useLicense-DxbD4Wf8.mjs";
 import { useNavigate } from "react-router-dom";
+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.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -31,6 +86,7 @@ const Section = styled(Box)`
   margin-bottom: 24px;
 `;
 const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
+  const { formatMessage } = useIntl();
   const { get, post } = useFetchClient();
   const { toggleNotification } = useNotification();
   const { isPremium } = useLicense();
@@ -38,6 +94,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   const [showUserAgent, setShowUserAgent] = useState(false);
   const [geoData, setGeoData] = useState(null);
   const [geoLoading, setGeoLoading] = useState(false);
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   if (!session) return null;
   const deviceInfo = parseUserAgent(session.userAgent);
   const isOnline = session.isTrulyActive;
@@ -84,7 +141,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);
@@ -92,7 +149,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       await post(`/${pluginId}/sessions/${session.id}/terminate`);
       toggleNotification({
         type: "success",
-        message: "Session terminated successfully"
+        message: t("notifications.success.terminated", "Session terminated successfully")
       });
       onSessionTerminated();
       onClose();
@@ -100,7 +157,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);
@@ -134,11 +191,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         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(Typography, { variant: "beta", fontWeight: "bold", children: t("modal.title", "Session Details") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("modal.id", "ID: {id}", { id: session.id }) })
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Box, { padding: 6, children: [
@@ -149,34 +203,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__ */ 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__ */ jsx(SectionTitle, { children: t("modal.section.user", "User") }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Check, label: t("modal.user.username", "Username"), value: session.user?.username || t("modal.user.na", "N/A") }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: t("modal.user.email", "Email"), value: session.user?.email || t("modal.user.na", "N/A") }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: t("modal.user.id", "User ID"), value: session.user?.id || t("modal.user.na", "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(SectionTitle, { children: t("modal.section.device", "Device") }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: DeviceIcon, label: t("modal.device.device", "Device"), value: deviceInfo.device }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Monitor, label: t("modal.device.browser", "Browser"), value: `${deviceInfo.browser} ${deviceInfo.browserVersion || ""}` }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Server, label: t("modal.device.os", "OS"), value: deviceInfo.os }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Information, label: t("modal.device.ip", "IP"), value: session.ipAddress })
           ] })
         ] }),
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Section, { children: [
-          /* @__PURE__ */ jsx(SectionTitle, { children: "Timeline" }),
+          /* @__PURE__ */ jsx(SectionTitle, { children: t("modal.section.timeline", "Timeline") }),
           /* @__PURE__ */ jsx(
             DetailRow,
             {
               compact: true,
               icon: Clock,
-              label: "Login",
+              label: t("modal.timeline.login", "Login"),
               value: new Date(session.loginTime).toLocaleString("de-DE", {
                 day: "2-digit",
                 month: "short",
@@ -190,7 +244,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: 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",
@@ -204,8 +258,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: 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__ */ jsx(
@@ -213,7 +267,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {
               compact: true,
               icon: Cross,
-              label: "Logout",
+              label: t("modal.timeline.logout", "Logout"),
               value: new Date(session.logoutTime).toLocaleString("de-DE", {
                 day: "2-digit",
                 month: "short",
@@ -225,20 +279,20 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
         ] }) })
       ] }),
       isPremium ? /* @__PURE__ */ jsxs(Section, { children: [
-        /* @__PURE__ */ jsx(SectionTitle, { children: "Location and 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__ */ jsx(SectionTitle, { children: t("modal.section.security", "Location and Security") }),
+        geoLoading ? /* @__PURE__ */ jsx(Box, { padding: 4, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("modal.security.loading", "Loading location data...") }) }) : /* @__PURE__ */ jsxs(TwoColumnGrid, { children: [
           /* @__PURE__ */ jsxs(Box, { children: [
             /* @__PURE__ */ jsx(
               DetailRow,
               {
                 compact: true,
                 icon: Earth,
-                label: "Country",
+                label: t("modal.security.country", "Country"),
                 value: `${premiumData.country_flag || ""} ${premiumData.country}`.trim()
               }
             ),
-            /* @__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__ */ jsx(DetailRow, { compact: true, icon: Earth, label: t("modal.security.city", "City"), value: premiumData.city }),
+            /* @__PURE__ */ jsx(DetailRow, { compact: true, icon: Clock, label: t("modal.security.timezone", "Timezone"), value: premiumData.timezone })
           ] }),
           /* @__PURE__ */ jsxs(Box, { children: [
             /* @__PURE__ */ jsx(
@@ -246,7 +300,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: Shield,
-                label: "Security",
+                label: t("modal.security.score", "Security"),
                 value: `${premiumData.securityScore}/100 (${premiumData.riskLevel})`
               }
             ),
@@ -255,8 +309,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: Shield,
-                label: "VPN",
-                value: premiumData.isVpn ? "[WARNING] Yes" : "No"
+                label: t("modal.security.vpn", "VPN"),
+                value: premiumData.isVpn ? t("modal.security.vpnWarning", "[WARNING] Yes") : t("modal.security.no", "No")
               }
             ),
             /* @__PURE__ */ jsx(
@@ -264,8 +318,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               {
                 compact: true,
                 icon: Shield,
-                label: "Proxy",
-                value: premiumData.isProxy ? "[WARNING] Yes" : "No"
+                label: t("modal.security.proxy", "Proxy"),
+                value: premiumData.isProxy ? t("modal.security.vpnWarning", "[WARNING] Yes") : t("modal.security.no", "No")
               }
             )
           ] })
@@ -282,8 +336,8 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
           },
           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 and 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(Typography, { variant: "beta", style: { color: "#92400e", fontWeight: "700" }, children: t("modal.premium.title", "Location and Security Analysis") }),
+            /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#78350f", fontSize: "14px", lineHeight: "1.6" }, children: t("modal.premium.description", "Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session") }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -298,7 +352,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")
               }
             )
           ] })
@@ -306,7 +360,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ) }),
       /* @__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(SectionTitle, { style: { marginBottom: 0, paddingBottom: 0, border: "none" }, children: t("modal.section.technical", "Technical Details") }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -314,7 +368,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")}`
             }
           )
         ] }),
@@ -339,7 +393,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", style: { width: "100%" }, children: [
-      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: "Close" }),
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: t("modal.actions.close", "Close") }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -348,72 +402,12 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
           disabled: !session.isActive || terminating,
           loading: terminating,
           startIcon: /* @__PURE__ */ jsx(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 = keyframes`
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
@@ -502,7 +496,7 @@ const HeaderContent = styled(Flex)`
   z-index: 1;
 `;
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: white;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -554,7 +548,7 @@ const StatsGrid = styled.div`
   }
 `;
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(props) => props.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: 28px ${theme.spacing.lg};
   position: relative;
@@ -563,7 +557,7 @@ const StatCard = styled(Box)`
   ${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;
@@ -584,7 +578,7 @@ const StatCard = styled(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);
@@ -592,7 +586,7 @@ const StatCard = styled(Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$color || theme.colors.primary[600]};
+      color: ${(props) => props.$color || props.theme.colors.primary600};
     }
   }
 `;
@@ -603,7 +597,7 @@ const StatIcon = styled(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};
@@ -611,7 +605,7 @@ const StatIcon = styled(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}) {
@@ -628,7 +622,7 @@ const StatIcon = styled(Box)`
 const StatValue = styled(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};
@@ -641,7 +635,7 @@ const StatValue = styled(Typography)`
 `;
 const StatLabel = styled(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;
@@ -651,21 +645,21 @@ const StatLabel = styled(Typography)`
   }
 `;
 const DataTable = styled(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(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;
@@ -675,14 +669,14 @@ const StyledTable = styled(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;
@@ -691,7 +685,7 @@ const StyledTable = styled(Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${(props) => props.theme.colors.neutral800};
       vertical-align: middle;
     }
   }
@@ -700,18 +694,18 @@ const OnlineIndicator = styled.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;
   ${css`animation: ${(props) => props.$online ? pulse : "none"} 2s ease-in-out infinite;`}
 `;
 const FilterBar = styled(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;
 `;
@@ -726,27 +720,27 @@ const SearchIcon = styled(Search)`
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${(props) => props.theme.colors.neutral600};
   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: 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(Flex)`
@@ -759,13 +753,38 @@ const ClickableRow = styled(Tr)`
   cursor: pointer;
   
   &:hover {
-    background: ${theme.colors.primary[50]} !important;
+    background: ${(props) => props.theme.colors.primary100} !important;
   }
 `;
+styled(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.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 } = useIntl();
   const { get, post, del } = useFetchClient();
   const { toggleNotification } = useNotification();
   const { isPremium } = useLicense();
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const [sessions, setSessions] = useState([]);
   const [loading, setLoading] = useState(true);
   const [filterStatus, setFilterStatus] = useState("active");
@@ -794,7 +813,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 {
@@ -805,7 +824,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 {
@@ -813,13 +832,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")
       });
     }
   };
@@ -827,7 +846,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;
     }
@@ -862,13 +881,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")
       });
     }
   };
@@ -876,7 +895,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;
     }
@@ -919,13 +938,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")
       });
     }
   };
@@ -976,9 +995,10 @@ const HomePage = () => {
       /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [
         /* @__PURE__ */ jsxs(Title, { children: [
           /* @__PURE__ */ jsx(Monitor, {}),
-          " Session Manager"
+          " ",
+          t("homepage.title", "Session Manager")
         ] }),
-        /* @__PURE__ */ jsx(Subtitle, { children: "Monitor and manage user sessions in real-time" })
+        /* @__PURE__ */ jsx(Subtitle, { children: t("homepage.subtitle", "Monitor and manage user sessions in real-time") })
       ] }),
       isPremium && filteredSessions.length > 0 && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
         /* @__PURE__ */ jsx(
@@ -994,7 +1014,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__ */ jsx(
@@ -1010,7 +1030,7 @@ const HomePage = () => {
               border: "1px solid rgba(255,255,255,0.3)",
               fontWeight: "600"
             },
-            children: "Export JSON"
+            children: t("homepage.export.json", "Export JSON")
           }
         )
       ] })
@@ -1019,32 +1039,32 @@ const HomePage = () => {
       /* @__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__ */ jsx(StatLabel, { children: t("homepage.stats.active", "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__ */ jsx(StatLabel, { children: t("homepage.stats.idle", "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__ */ jsx(StatLabel, { children: t("homepage.stats.loggedOut", "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__ */ jsxs(StatCard, { $delay: "0.4s", $color: "#4B5563", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "#F3F4F6", $color: "#4B5563", children: /* @__PURE__ */ jsx(Cross, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: terminatedSessions.length }),
-        /* @__PURE__ */ jsx(StatLabel, { children: "Terminated" })
+        /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.terminated", "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__ */ jsxs(StatCard, { $delay: "0.5s", $color: "#A855F7", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "#EDE9FE", $color: "#9333EA", children: /* @__PURE__ */ jsx(User, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: sessions.length }),
-        /* @__PURE__ */ jsx(StatLabel, { children: "Total" })
+        /* @__PURE__ */ jsx(StatLabel, { children: t("homepage.stats.total", "Total") })
       ] })
     ] }),
-    loading && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading sessions..." }) }),
+    loading && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: t("homepage.loading", "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__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", textColor: "neutral700", style: { marginBottom: theme.spacing.md }, children: t("homepage.allSessions", "All Sessions") }) }),
       /* @__PURE__ */ jsxs(FilterBar, { children: [
         /* @__PURE__ */ jsxs(SearchInputWrapper, { children: [
           /* @__PURE__ */ jsx(SearchIcon, {}),
@@ -1053,7 +1073,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"
             }
           )
@@ -1066,11 +1086,11 @@ const HomePage = () => {
             placeholder: "Filter",
             size: "S",
             children: [
-              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: "All Sessions" }),
-              /* @__PURE__ */ jsx(SingleSelectOption, { value: "active", children: "Active (less than 15 min)" }),
-              /* @__PURE__ */ jsx(SingleSelectOption, { value: "idle", children: "Idle (more than 15 min)" }),
-              /* @__PURE__ */ jsx(SingleSelectOption, { value: "loggedout", children: "Logged Out" }),
-              /* @__PURE__ */ jsx(SingleSelectOption, { value: "terminated", children: "Terminated" })
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("homepage.filter.all", "All Sessions") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "active", children: t("homepage.filter.active", "Active (less than 15 min)") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "idle", children: t("homepage.filter.idle", "Idle (more than 15 min)") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "loggedout", children: t("homepage.filter.loggedout", "Logged Out") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "terminated", children: t("homepage.filter.terminated", "Terminated") })
             ]
           }
         ) }),
@@ -1082,31 +1102,24 @@ const HomePage = () => {
             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(SingleSelectOption, { value: "10", children: t("homepage.entries.10", "10 entries") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "25", children: t("homepage.entries.25", "25 entries") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "50", children: t("homepage.entries.50", "50 entries") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "100", children: t("homepage.entries.100", "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}")`
-      ] }) }),
+      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(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__ */ 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(Th, { children: t("homepage.table.status", "Status") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.user", "User") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.device", "Device") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.ipAddress", "IP Address") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.loginTime", "Login Time") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.lastActive", "Last Active") }),
+          /* @__PURE__ */ jsx(Th, { children: t("homepage.table.actions", "Actions") })
         ] }) }),
         /* @__PURE__ */ jsx(Tbody, { children: filteredSessions.map((session) => {
           const deviceInfo = parseUserAgent(session.userAgent);
@@ -1116,26 +1129,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
             }
@@ -1163,7 +1176,7 @@ const HomePage = () => {
                   )
                 ] }) }),
                 /* @__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" }),
+                  /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", ellipsis: true, children: session.user?.username || session.user?.email || t("homepage.user.unknown", "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: [
@@ -1181,10 +1194,7 @@ const HomePage = () => {
                 /* @__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(Typography, { variant: "pi", textColor: sessionStatus === "active" ? "success600" : "neutral500", children: t("homepage.time.minAgo", "{minutes} min ago", { minutes: session.minutesSinceActive }) })
                 ] }) }),
                 /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(ActionButtons, { className: "action-buttons", children: [
                   /* @__PURE__ */ jsx(
@@ -1196,7 +1206,7 @@ const HomePage = () => {
                         e.stopPropagation();
                         handleSessionClick(session);
                       },
-                      title: "View Details",
+                      title: t("homepage.actions.viewDetails", "View Details"),
                       children: /* @__PURE__ */ jsx(Eye, {})
                     }
                   ),
@@ -1210,7 +1220,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__ */ jsx(Cross, {})
                     }
                   ),
@@ -1223,7 +1233,7 @@ const HomePage = () => {
                         e.stopPropagation();
                         handleDeleteSession(session.id);
                       },
-                      title: "Delete Permanently",
+                      title: t("homepage.actions.deletePermanently", "Delete Permanently"),
                       children: /* @__PURE__ */ jsx(Trash, {})
                     }
                   )
@@ -1238,10 +1248,10 @@ const HomePage = () => {
         /* @__PURE__ */ jsxs(
           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",
@@ -1282,20 +1292,20 @@ const HomePage = () => {
                       justifyContent: "center",
                       boxShadow: theme.shadows.xl
                     },
-                    children: /* @__PURE__ */ jsx(Search, { style: { width: "50px", height: "50px", color: theme.colors.primary[600] } })
+                    children: /* @__PURE__ */ jsx(Search, { style: { width: "50px", height: "50px", color: "#0284C7" } })
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   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__ */ jsx(
@@ -1308,7 +1318,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")
                   }
                 )
               ] })
@@ -1320,10 +1330,10 @@ const HomePage = () => {
     !loading && sessions.length === 0 && /* @__PURE__ */ jsxs(
       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",
@@ -1363,20 +1373,20 @@ const HomePage = () => {
                   justifyContent: "center",
                   boxShadow: theme.shadows.xl
                 },
-                children: /* @__PURE__ */ jsx(Monitor, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+                children: /* @__PURE__ */ jsx(Monitor, { style: { width: "60px", height: "60px", color: "#0284C7" } })
               }
             ),
             /* @__PURE__ */ jsx(
               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__ */ jsx(
@@ -1389,7 +1399,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")
               }
             )
           ] })