strapi-plugin-magic-sessionmanager 1.0.0

package/dist/_chunks/Settings-L1ryVQMS.js

@@ -0,0 +1,1324 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const index = require("./index-Dd_SkI79.js");
+const useLicense = require("./useLicense-Bw66_4CW.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const theme = {
+  colors: {
+    primary: { 600: "#0284C7", 700: "#075985" },
+    success: { 600: "#16A34A", 700: "#15803D" },
+    danger: { 600: "#DC2626" },
+    neutral: { 200: "#E5E7EB", 400: "#9CA3AF", 700: "#374151" }
+  },
+  shadows: { sm: "0 1px 3px rgba(0,0,0,0.1)" },
+  borderRadius: { md: "8px", lg: "12px" }
+};
+const fadeIn = styled.keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+styled.keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const Container = styled__default.default(designSystem.Box)`
+  animation: ${fadeIn} 0.5s;
+  max-width: 1400px;
+  margin: 0 auto;
+`;
+const StickySaveBar = styled__default.default(designSystem.Box)`
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: white;
+  border-bottom: 1px solid ${theme.colors.neutral[200]};
+  box-shadow: ${theme.shadows.sm};
+`;
+const ToggleCard = styled__default.default(designSystem.Box)`
+  background: ${(props) => props.$active ? "linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)" : "linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%)"};
+  border-radius: ${theme.borderRadius.lg};
+  padding: 24px;
+  min-height: 120px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid ${(props) => props.$active ? theme.colors.success[600] : theme.colors.neutral[200]};
+  box-shadow: ${(props) => props.$active ? "0 4px 20px rgba(34, 197, 94, 0.15)" : "0 2px 8px rgba(0, 0, 0, 0.06)"};
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: ${(props) => props.$active ? "0 8px 30px rgba(34, 197, 94, 0.25)" : "0 6px 16px rgba(0, 0, 0, 0.12)"};
+    border-color: ${(props) => props.$active ? theme.colors.success[700] : theme.colors.neutral[300]};
+  }
+  
+  &:active {
+    transform: translateY(-2px);
+  }
+  
+  ${(props) => props.$active && `
+    &::before {
+      content: 'ACTIVE';
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      background: ${theme.colors.success[600]};
+      color: white;
+      padding: 4px 10px;
+      border-radius: 6px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
+    }
+  `}
+  
+  ${(props) => !props.$active && `
+    &::before {
+      content: 'INACTIVE';
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      background: ${theme.colors.neutral[400]};
+      color: white;
+      padding: 4px 10px;
+      border-radius: 6px;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  `}
+`;
+const GreenToggle = styled__default.default.div`
+  ${(props) => props.$isActive && `
+    button[role="switch"] {
+      background-color: #16A34A !important;
+      border-color: #16A34A !important;
+      
+      &:hover {
+        background-color: #15803D !important;
+        border-color: #15803D !important;
+      }
+      
+      &:focus {
+        background-color: #16A34A !important;
+        border-color: #16A34A !important;
+        box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
+      }
+    }
+    
+    /* Toggle handle */
+    button[role="switch"] > span {
+      background-color: white !important;
+    }
+  `}
+  
+  ${(props) => !props.$isActive && `
+    button[role="switch"] {
+      background-color: #E5E7EB;
+      
+      &:hover {
+        background-color: #D1D5DB;
+      }
+    }
+  `}
+`;
+const TEMPLATE_VARIABLES = {
+  suspiciousLogin: [
+    { var: "{{user.email}}", desc: "User email address" },
+    { var: "{{user.username}}", desc: "Username" },
+    { var: "{{session.loginTime}}", desc: "Login timestamp" },
+    { var: "{{session.ipAddress}}", desc: "IP address" },
+    { var: "{{geo.city}}", desc: "City (if available)" },
+    { var: "{{geo.country}}", desc: "Country (if available)" },
+    { var: "{{geo.timezone}}", desc: "Timezone (if available)" },
+    { var: "{{session.userAgent}}", desc: "Browser/Device info" },
+    { var: "{{reason.isVpn}}", desc: "VPN detected (true/false)" },
+    { var: "{{reason.isProxy}}", desc: "Proxy detected (true/false)" },
+    { var: "{{reason.isThreat}}", desc: "Threat detected (true/false)" },
+    { var: "{{reason.securityScore}}", desc: "Security score (0-100)" }
+  ],
+  newLocation: [
+    { var: "{{user.email}}", desc: "User email address" },
+    { var: "{{user.username}}", desc: "Username" },
+    { var: "{{session.loginTime}}", desc: "Login timestamp" },
+    { var: "{{session.ipAddress}}", desc: "IP address" },
+    { var: "{{geo.city}}", desc: "City" },
+    { var: "{{geo.country}}", desc: "Country" },
+    { var: "{{geo.timezone}}", desc: "Timezone" },
+    { var: "{{session.userAgent}}", desc: "Browser/Device info" }
+  ],
+  vpnProxy: [
+    { var: "{{user.email}}", desc: "User email address" },
+    { var: "{{user.username}}", desc: "Username" },
+    { var: "{{session.loginTime}}", desc: "Login timestamp" },
+    { var: "{{session.ipAddress}}", desc: "IP address" },
+    { var: "{{geo.city}}", desc: "City (if available)" },
+    { var: "{{geo.country}}", desc: "Country (if available)" },
+    { var: "{{session.userAgent}}", desc: "Browser/Device info" },
+    { var: "{{reason.isVpn}}", desc: "VPN detected (true/false)" },
+    { var: "{{reason.isProxy}}", desc: "Proxy detected (true/false)" }
+  ]
+};
+const validateTemplate = (template, templateType) => {
+  const requiredVars = TEMPLATE_VARIABLES[templateType];
+  const foundVars = [];
+  requiredVars.forEach(({ var: variable }) => {
+    if (template.includes(variable)) {
+      foundVars.push(variable);
+    }
+  });
+  return {
+    isValid: foundVars.length > 0,
+    foundVars,
+    totalAvailable: requiredVars.length
+  };
+};
+const getDefaultTemplates = () => ({
+  suspiciousLogin: {
+    subject: "🚨 Suspicious Login Alert - Session Manager",
+    html: `
+<html>
+<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f9fafb; border-radius: 10px;">
+    <h2 style="color: #dc2626;">🚨 Suspicious Login Detected</h2>
+    <p>A potentially suspicious login was detected for your account.</p>
+    
+    <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
+      <h3 style="margin-top: 0;">Account Information:</h3>
+      <ul>
+        <li><strong>Email:</strong> {{user.email}}</li>
+        <li><strong>Username:</strong> {{user.username}}</li>
+      </ul>
+      
+      <h3>Login Details:</h3>
+      <ul>
+        <li><strong>Time:</strong> {{session.loginTime}}</li>
+        <li><strong>IP Address:</strong> {{session.ipAddress}}</li>
+        <li><strong>Location:</strong> {{geo.city}}, {{geo.country}}</li>
+        <li><strong>Timezone:</strong> {{geo.timezone}}</li>
+        <li><strong>Device:</strong> {{session.userAgent}}</li>
+      </ul>
+      
+      <h3 style="color: #dc2626;">Security Alert:</h3>
+      <ul>
+        <li>VPN Detected: {{reason.isVpn}}</li>
+        <li>Proxy Detected: {{reason.isProxy}}</li>
+        <li>Threat Detected: {{reason.isThreat}}</li>
+        <li>Security Score: {{reason.securityScore}}/100</li>
+      </ul>
+    </div>
+    
+    <p>If this was you, you can safely ignore this email. If you don't recognize this activity, please secure your account immediately.</p>
+    
+    <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 20px 0;"/>
+    <p style="color: #666; font-size: 12px;">This is an automated security notification from Magic Session Manager.</p>
+  </div>
+</body>
+</html>`,
+    text: `🚨 Suspicious Login Detected
+
+A potentially suspicious login was detected for your account.
+
+Account: {{user.email}}
+Username: {{user.username}}
+
+Login Details:
+- Time: {{session.loginTime}}
+- IP: {{session.ipAddress}}
+- Location: {{geo.city}}, {{geo.country}}
+
+Security: VPN={{reason.isVpn}}, Proxy={{reason.isProxy}}, Threat={{reason.isThreat}}, Score={{reason.securityScore}}/100`
+  },
+  newLocation: {
+    subject: "📍 New Location Login Detected",
+    html: `
+<html>
+<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f9ff; border-radius: 10px;">
+    <h2 style="color: #0284c7;">📍 Login from New Location</h2>
+    <p>Your account was accessed from a new location.</p>
+    
+    <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
+      <h3 style="margin-top: 0;">Account:</h3>
+      <p><strong>{{user.email}}</strong></p>
+      
+      <h3>New Location Details:</h3>
+      <ul>
+        <li><strong>Time:</strong> {{session.loginTime}}</li>
+        <li><strong>Location:</strong> {{geo.city}}, {{geo.country}}</li>
+        <li><strong>IP Address:</strong> {{session.ipAddress}}</li>
+        <li><strong>Device:</strong> {{session.userAgent}}</li>
+      </ul>
+    </div>
+    
+    <p>If this was you, no action is needed. If you don't recognize this login, please secure your account.</p>
+    
+    <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 20px 0;"/>
+    <p style="color: #666; font-size: 12px;">Magic Session Manager notification</p>
+  </div>
+</body>
+</html>`,
+    text: `📍 Login from New Location
+
+Your account was accessed from a new location.
+
+Account: {{user.email}}
+
+New Location Details:
+- Time: {{session.loginTime}}
+- Location: {{geo.city}}, {{geo.country}}
+- IP Address: {{session.ipAddress}}
+- Device: {{session.userAgent}}
+
+If this was you, no action is needed.`
+  },
+  vpnProxy: {
+    subject: "⚠️ VPN/Proxy Login Detected",
+    html: `
+<html>
+<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+  <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fffbeb; border-radius: 10px;">
+    <h2 style="color: #d97706;">⚠️ VPN/Proxy Detected</h2>
+    <p>A login from a VPN or proxy service was detected on your account.</p>
+    
+    <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
+      <h3 style="margin-top: 0;">Account:</h3>
+      <p><strong>{{user.email}}</strong></p>
+      
+      <h3>Login Details:</h3>
+      <ul>
+        <li><strong>Time:</strong> {{session.loginTime}}</li>
+        <li><strong>IP Address:</strong> {{session.ipAddress}}</li>
+        <li><strong>Location:</strong> {{geo.city}}, {{geo.country}}</li>
+        <li><strong>Device:</strong> {{session.userAgent}}</li>
+        <li><strong>VPN:</strong> {{reason.isVpn}}</li>
+        <li><strong>Proxy:</strong> {{reason.isProxy}}</li>
+      </ul>
+    </div>
+    
+    <p>VPN/Proxy usage may indicate suspicious activity. If this was you, you can safely ignore this email.</p>
+    
+    <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 20px 0;"/>
+    <p style="color: #666; font-size: 12px;">Magic Session Manager notification</p>
+  </div>
+</body>
+</html>`,
+    text: `⚠️ VPN/Proxy Detected
+
+A login from a VPN or proxy service was detected on your account.
+
+Account: {{user.email}}
+
+Login Details:
+- Time: {{session.loginTime}}
+- IP Address: {{session.ipAddress}}
+- Location: {{geo.city}}, {{geo.country}}
+- VPN: {{reason.isVpn}}, Proxy: {{reason.isProxy}}`
+  }
+});
+const SettingsPage = () => {
+  const { get, post, put } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const { isPremium, isAdvanced, isEnterprise } = useLicense.useLicense();
+  const [loading, setLoading] = react.useState(true);
+  const [saving, setSaving] = react.useState(false);
+  const [hasChanges, setHasChanges] = react.useState(false);
+  const [cleaning, setCleaning] = react.useState(false);
+  const [activeTemplateTab, setActiveTemplateTab] = react.useState("suspiciousLogin");
+  const [settings, setSettings] = react.useState({
+    inactivityTimeout: 15,
+    cleanupInterval: 30,
+    lastSeenRateLimit: 30,
+    retentionDays: 90,
+    enableGeolocation: true,
+    enableSecurityScoring: true,
+    blockSuspiciousSessions: false,
+    maxFailedLogins: 5,
+    enableEmailAlerts: false,
+    alertOnSuspiciousLogin: true,
+    alertOnNewLocation: true,
+    alertOnVpnProxy: true,
+    enableWebhooks: false,
+    discordWebhookUrl: "",
+    slackWebhookUrl: "",
+    enableGeofencing: false,
+    allowedCountries: [],
+    blockedCountries: [],
+    emailTemplates: {
+      suspiciousLogin: { subject: "", html: "", text: "" },
+      newLocation: { subject: "", html: "", text: "" },
+      vpnProxy: { subject: "", html: "", text: "" }
+    }
+  });
+  react.useEffect(() => {
+    fetchSettings();
+  }, []);
+  const fetchSettings = async () => {
+    setLoading(true);
+    try {
+      const response = await get(`/${index.pluginId}/settings`);
+      if (response?.data?.settings) {
+        const loadedSettings = response.data.settings;
+        if (!loadedSettings.emailTemplates || Object.keys(loadedSettings.emailTemplates).length === 0) {
+          loadedSettings.emailTemplates = getDefaultTemplates();
+        } else {
+          const defaultTemplates = getDefaultTemplates();
+          Object.keys(defaultTemplates).forEach((key) => {
+            if (!loadedSettings.emailTemplates[key]) {
+              loadedSettings.emailTemplates[key] = defaultTemplates[key];
+            } else {
+              loadedSettings.emailTemplates[key] = {
+                subject: loadedSettings.emailTemplates[key].subject || defaultTemplates[key].subject,
+                html: loadedSettings.emailTemplates[key].html || defaultTemplates[key].html,
+                text: loadedSettings.emailTemplates[key].text || defaultTemplates[key].text
+              };
+            }
+          });
+        }
+        setSettings(loadedSettings);
+      } else {
+        setSettings((prev) => ({ ...prev, emailTemplates: getDefaultTemplates() }));
+      }
+    } catch (err) {
+      console.error("[Settings] Error loading from backend:", err);
+      toggleNotification({
+        type: "warning",
+        message: "Could not load settings from server. Using defaults."
+      });
+      setSettings((prev) => ({ ...prev, emailTemplates: getDefaultTemplates() }));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleChange = (key, value) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+    setHasChanges(true);
+  };
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const response = await put(`/${index.pluginId}/settings`, settings);
+      if (response?.data?.success) {
+        toggleNotification({
+          type: "success",
+          message: "Settings saved successfully to database!"
+        });
+        setHasChanges(false);
+        try {
+          localStorage.setItem(`${index.pluginId}-settings`, JSON.stringify(settings));
+        } catch (localErr) {
+          console.warn("[Settings] Could not save to localStorage:", localErr);
+        }
+      } else {
+        throw new Error("Save failed");
+      }
+    } catch (err) {
+      console.error("[Settings] Error saving:", err);
+      toggleNotification({
+        type: "danger",
+        message: "Failed to save settings to server"
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleReset = () => {
+    fetchSettings();
+    setHasChanges(false);
+  };
+  const handleCleanInactive = async () => {
+    if (!confirm("⚠️ WARNING: This will permanently delete ALL inactive sessions.\n\nContinue?")) {
+      return;
+    }
+    setCleaning(true);
+    try {
+      const { data } = await post(`/${index.pluginId}/sessions/clean-inactive`);
+      toggleNotification({
+        type: "success",
+        message: `Successfully deleted ${data.deletedCount} inactive sessions!`
+      });
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: "Failed to delete inactive sessions"
+      });
+    } finally {
+      setCleaning(false);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading settings..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StickySaveBar, { paddingTop: 5, paddingBottom: 5, paddingLeft: 6, paddingRight: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", style: { fontSize: "24px" }, children: "⚙️ Session Manager Settings" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: "Configure session tracking, security, and email notifications" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        hasChanges && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { onClick: handleReset, variant: "tertiary", size: "L", children: "Reset" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: handleSave,
+            loading: saving,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+            size: "L",
+            disabled: !hasChanges || saving,
+            style: {
+              background: hasChanges && !saving ? "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" : "#e5e7eb",
+              color: hasChanges && !saving ? "white" : "#9ca3af",
+              fontWeight: "600",
+              padding: "12px 24px",
+              border: "none",
+              boxShadow: hasChanges && !saving ? "0 4px 12px rgba(102, 126, 234, 0.4)" : "none",
+              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            onMouseEnter: (e) => {
+              if (hasChanges && !saving) {
+                e.currentTarget.style.transform = "translateY(-2px)";
+                e.currentTarget.style.boxShadow = "0 8px 20px rgba(102, 126, 234, 0.5)";
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = hasChanges && !saving ? "0 4px 12px rgba(102, 126, 234, 0.4)" : "none";
+            },
+            children: saving ? "Saving..." : hasChanges ? "Save Changes" : "No Changes"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 6, paddingLeft: 6, paddingRight: 6, paddingBottom: 10, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "primary50", hasRadius: true, style: { marginBottom: "24px", border: "1px solid #bae6fd" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { style: { width: "20px", height: "20px", color: "#0284C7" } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "primary700", style: { marginBottom: "4px" }, children: "Current License Status" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: isPremium ? "success100" : "neutral100", textColor: isPremium ? "success700" : "neutral600", children: [
+              isPremium ? "✓" : "✗",
+              " Premium"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: isAdvanced ? "primary100" : "neutral100", textColor: isAdvanced ? "primary700" : "neutral600", children: [
+              isAdvanced ? "✓" : "✗",
+              " Advanced"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { backgroundColor: isEnterprise ? "secondary100" : "neutral100", textColor: isEnterprise ? "secondary700" : "neutral600", children: [
+              isEnterprise ? "✓" : "✗",
+              " Enterprise"
+            ] })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Root, { type: "multiple", defaultValue: ["general", "security", "email"], children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "general", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Accordion.Trigger,
+            {
+              icon: icons.Cog,
+              description: "Basic session tracking configuration",
+              children: "General Settings"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: "⏱️ SESSION TIMEOUT" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, style: { marginBottom: "32px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Inactivity Timeout" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: String(settings.inactivityTimeout),
+                    onChange: (value) => handleChange("inactivityTimeout", parseInt(value)),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "5", children: "5 minutes (Very Strict)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "10", children: "10 minutes (Strict)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "15", children: "15 minutes (Recommended)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "30", children: "30 minutes (Moderate)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "60", children: "1 hour (Relaxed)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "120", children: "2 hours (Very Relaxed)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: [
+                  "Sessions inactive for more than ",
+                  settings.inactivityTimeout,
+                  " minutes will be marked as offline"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Last Seen Rate Limit" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: String(settings.lastSeenRateLimit),
+                    onChange: (value) => handleChange("lastSeenRateLimit", parseInt(value)),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "10", children: "10 seconds" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "30", children: "30 seconds (Recommended)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "60", children: "1 minute" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "120", children: "2 minutes" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "300", children: "5 minutes" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: [
+                  "Prevents excessive database writes. Updates throttled to once every ",
+                  settings.lastSeenRateLimit,
+                  " seconds"
+                ] })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginBottom: "24px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: "🧹 AUTO-CLEANUP & RETENTION" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Cleanup Interval" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: String(settings.cleanupInterval),
+                    onChange: (value) => handleChange("cleanupInterval", parseInt(value)),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "15", children: "15 minutes" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "30", children: "30 minutes (Recommended)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "60", children: "1 hour" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "120", children: "2 hours" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: [
+                  "Inactive sessions are automatically cleaned every ",
+                  settings.cleanupInterval,
+                  " minutes"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Retention Period" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    value: String(settings.retentionDays),
+                    onChange: (value) => handleChange("retentionDays", parseInt(value)),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "7", children: "7 days" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "30", children: "30 days" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "60", children: "60 days" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "90", children: "90 days (Recommended)" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "180", children: "180 days" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "365", children: "1 year" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "-1", children: "Forever" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "11px", marginTop: "8px" }, children: [
+                  "Old sessions deleted after ",
+                  settings.retentionDays === -1 ? "never" : `${settings.retentionDays} days`
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "danger100", style: { borderRadius: theme.borderRadius.md, border: `2px solid ${theme.colors.danger[200]}` }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { style: { width: "18px", height: "18px", color: theme.colors.danger[600], flexShrink: 0, marginTop: "2px" } }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "danger700", style: { marginBottom: "8px", display: "block" }, children: "Danger Zone" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", style: { fontSize: "13px", lineHeight: "1.7" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Clean All Inactive:" }),
+                    " Permanently deletes all inactive sessions. This cannot be undone."
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    onClick: handleCleanInactive,
+                    loading: cleaning,
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                    variant: "danger",
+                    size: "S",
+                    style: { flexShrink: 0 },
+                    children: "Clean Now"
+                  }
+                )
+              ] }) }) })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "security", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Accordion.Trigger,
+            {
+              icon: icons.Shield,
+              description: "Security policies and threat protection",
+              children: "Security Settings"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: "🔒 SECURITY OPTIONS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                ToggleCard,
+                {
+                  $active: settings.blockSuspiciousSessions,
+                  onClick: () => handleChange("blockSuspiciousSessions", !settings.blockSuspiciousSessions),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, alignItems: "center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(GreenToggle, { $isActive: settings.blockSuspiciousSessions, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Toggle,
+                      {
+                        checked: settings.blockSuspiciousSessions,
+                        onChange: () => handleChange("blockSuspiciousSessions", !settings.blockSuspiciousSessions)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", style: { textAlign: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Typography,
+                        {
+                          variant: "delta",
+                          fontWeight: "bold",
+                          textColor: settings.blockSuspiciousSessions ? "success700" : "neutral800",
+                          style: { fontSize: "16px" },
+                          children: "Block Suspicious Sessions"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.6" }, children: "Automatically block sessions from VPNs, proxies, or threat IPs" })
+                    ] })
+                  ] })
+                }
+              ) }),
+              isPremium && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ToggleCard,
+                  {
+                    $active: settings.enableGeolocation,
+                    onClick: () => handleChange("enableGeolocation", !settings.enableGeolocation),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, alignItems: "center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(GreenToggle, { $isActive: settings.enableGeolocation, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Toggle,
+                        {
+                          checked: settings.enableGeolocation,
+                          onChange: () => handleChange("enableGeolocation", !settings.enableGeolocation)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", style: { textAlign: "center" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          designSystem.Typography,
+                          {
+                            variant: "delta",
+                            fontWeight: "bold",
+                            textColor: settings.enableGeolocation ? "success700" : "neutral800",
+                            style: { fontSize: "16px" },
+                            children: "IP Geolocation"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.6" }, children: "Fetch location data for each session (Premium)" })
+                      ] })
+                    ] })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ToggleCard,
+                  {
+                    $active: settings.enableSecurityScoring,
+                    onClick: () => handleChange("enableSecurityScoring", !settings.enableSecurityScoring),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, alignItems: "center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(GreenToggle, { $isActive: settings.enableSecurityScoring, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Toggle,
+                        {
+                          checked: settings.enableSecurityScoring,
+                          onChange: () => handleChange("enableSecurityScoring", !settings.enableSecurityScoring)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", style: { textAlign: "center" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          designSystem.Typography,
+                          {
+                            variant: "delta",
+                            fontWeight: "bold",
+                            textColor: settings.enableSecurityScoring ? "success700" : "neutral800",
+                            style: { fontSize: "16px" },
+                            children: "Security Scoring"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.6" }, children: "Calculate security scores and detect threats (Premium)" })
+                      ] })
+                    ] })
+                  }
+                ) })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "🚫 Max Failed Login Attempts" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.NumberInput,
+                {
+                  value: settings.maxFailedLogins,
+                  onValueChange: (val) => handleChange("maxFailedLogins", val),
+                  min: 1,
+                  max: 20
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, background: "warning50", style: { borderRadius: "4px", marginTop: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "warning700", style: { fontSize: "11px" }, children: [
+                "User will be blocked after ",
+                settings.maxFailedLogins,
+                " failed attempts"
+              ] }) })
+            ] }) }) })
+          ] }) })
+        ] }),
+        isAdvanced && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "email", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Accordion.Trigger,
+            {
+              icon: icons.Mail,
+              description: "Email alerts for security events",
+              children: "Email Notifications (Advanced)"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "32px" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", textAlign: "center", color: theme.colors.neutral[700] }, children: "📧 EMAIL ALERTS" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", textAlign: "center", fontSize: "12px" }, children: "Send security alerts to users via email" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                ToggleCard,
+                {
+                  $active: settings.enableEmailAlerts,
+                  onClick: () => handleChange("enableEmailAlerts", !settings.enableEmailAlerts),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, alignItems: "center", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(GreenToggle, { $isActive: settings.enableEmailAlerts, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Toggle,
+                      {
+                        checked: settings.enableEmailAlerts,
+                        onChange: () => handleChange("enableEmailAlerts", !settings.enableEmailAlerts)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", style: { textAlign: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Typography,
+                        {
+                          variant: "delta",
+                          fontWeight: "bold",
+                          textColor: settings.enableEmailAlerts ? "success700" : "neutral800",
+                          style: { fontSize: "16px" },
+                          children: "Enable Email Alerts"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.6" }, children: "Send security alerts for suspicious logins, new locations, and VPN/Proxy usage" })
+                    ] })
+                  ] })
+                }
+              ) }) })
+            ] }),
+            settings.enableEmailAlerts && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "16px", display: "block", color: theme.colors.neutral[700] }, children: "⚙️ ALERT TYPES" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, style: { marginBottom: "32px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    padding: 4,
+                    background: settings.alertOnSuspiciousLogin ? "danger50" : "neutral50",
+                    style: {
+                      borderRadius: theme.borderRadius.md,
+                      border: `2px solid ${settings.alertOnSuspiciousLogin ? "#fecaca" : "#E5E7EB"}`,
+                      transition: "all 0.2s",
+                      cursor: "pointer"
+                    },
+                    onClick: () => handleChange("alertOnSuspiciousLogin", !settings.alertOnSuspiciousLogin),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Checkbox,
+                      {
+                        checked: settings.alertOnSuspiciousLogin,
+                        onChange: () => handleChange("alertOnSuspiciousLogin", !settings.alertOnSuspiciousLogin),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "14px" }, children: "🚨 Suspicious Login" })
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    padding: 4,
+                    background: settings.alertOnNewLocation ? "primary50" : "neutral50",
+                    style: {
+                      borderRadius: theme.borderRadius.md,
+                      border: `2px solid ${settings.alertOnNewLocation ? "#bae6fd" : "#E5E7EB"}`,
+                      transition: "all 0.2s",
+                      cursor: "pointer"
+                    },
+                    onClick: () => handleChange("alertOnNewLocation", !settings.alertOnNewLocation),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Checkbox,
+                      {
+                        checked: settings.alertOnNewLocation,
+                        onChange: () => handleChange("alertOnNewLocation", !settings.alertOnNewLocation),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "14px" }, children: "📍 New Location" })
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    padding: 4,
+                    background: settings.alertOnVpnProxy ? "warning50" : "neutral50",
+                    style: {
+                      borderRadius: theme.borderRadius.md,
+                      border: `2px solid ${settings.alertOnVpnProxy ? "#fde68a" : "#E5E7EB"}`,
+                      transition: "all 0.2s",
+                      cursor: "pointer"
+                    },
+                    onClick: () => handleChange("alertOnVpnProxy", !settings.alertOnVpnProxy),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Checkbox,
+                      {
+                        checked: settings.alertOnVpnProxy,
+                        onChange: () => handleChange("alertOnVpnProxy", !settings.alertOnVpnProxy),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", style: { fontSize: "14px" }, children: "⚠️ VPN/Proxy" })
+                      }
+                    )
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { style: { marginBottom: "24px" } }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: theme.colors.neutral[700] }, children: "📝 EMAIL TEMPLATES" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "20px", display: "block", fontSize: "12px" }, children: "Customize email notification templates with dynamic variables" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.Root, { value: activeTemplateTab, onValueChange: setActiveTemplateTab, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tabs.List, { "aria-label": "Email Templates", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "suspiciousLogin", children: "🚨 Suspicious Login" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "newLocation", children: "📍 New Location" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "vpnProxy", children: "⚠️ VPN/Proxy" })
+                ] }),
+                Object.keys(settings.emailTemplates).map((templateKey) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Content, { value: templateKey, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { marginBottom: "24px" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "✉️ Email Subject" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.TextInput,
+                      {
+                        value: settings.emailTemplates[templateKey].subject,
+                        onChange: (e) => {
+                          const newTemplates = { ...settings.emailTemplates };
+                          newTemplates[templateKey].subject = e.target.value;
+                          handleChange("emailTemplates", newTemplates);
+                        },
+                        placeholder: "Enter email subject..."
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Box,
+                    {
+                      padding: 3,
+                      background: "primary100",
+                      style: { borderRadius: theme.borderRadius.md, marginBottom: "20px", border: "2px solid #BAE6FD" },
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(icons.Code, { style: { width: "16px", height: "16px", color: theme.colors.primary[600] } }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", textColor: "primary600", children: "Available Variables (click to copy)" })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: TEMPLATE_VARIABLES[templateKey].map(({ var: variable, desc }) => /* @__PURE__ */ jsxRuntime.jsx(
+                          designSystem.Button,
+                          {
+                            size: "S",
+                            variant: "tertiary",
+                            onClick: () => {
+                              navigator.clipboard.writeText(variable);
+                              toggleNotification({ type: "success", message: `${variable} copied!` });
+                            },
+                            style: {
+                              fontFamily: "monospace",
+                              fontSize: "11px",
+                              padding: "4px 8px"
+                            },
+                            title: desc,
+                            children: variable
+                          },
+                          variable
+                        )) })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.Box,
+                    {
+                      background: "neutral0",
+                      padding: 6,
+                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%", marginBottom: "24px" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { fontSize: "18px" }, children: "🎨 HTML Template" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "success", children: "Main Template" })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Button,
+                            {
+                              variant: "tertiary",
+                              size: "S",
+                              onClick: () => {
+                                const defaultTemplates = getDefaultTemplates();
+                                const newTemplates = { ...settings.emailTemplates };
+                                newTemplates[templateKey].html = defaultTemplates[templateKey].html;
+                                handleChange("emailTemplates", newTemplates);
+                                toggleNotification({ type: "success", message: "Default HTML template loaded!" });
+                              },
+                              children: "📋 Load Default"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block", fontSize: "14px" }, children: [
+                          "HTML template for email notifications. Use variables like ",
+                          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "{{user.email}}" }),
+                          " for dynamic content."
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          designSystem.Box,
+                          {
+                            style: {
+                              border: "2px solid #E5E7EB",
+                              borderRadius: "6px",
+                              overflow: "hidden",
+                              background: "#1e1e1e",
+                              height: "500px",
+                              display: "flex",
+                              flexDirection: "column"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Box,
+                                {
+                                  padding: 2,
+                                  background: "neutral700",
+                                  style: { borderBottom: "1px solid #333", flexShrink: 0 },
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#888", fontSize: "11px", fontFamily: "monospace" }, children: "template.html" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "textarea",
+                                {
+                                  value: settings.emailTemplates[templateKey].html,
+                                  onChange: (e) => {
+                                    const newTemplates = { ...settings.emailTemplates };
+                                    newTemplates[templateKey].html = e.target.value;
+                                    handleChange("emailTemplates", newTemplates);
+                                  },
+                                  style: {
+                                    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+                                    height: "100%",
+                                    fontSize: "14px",
+                                    lineHeight: "1.8",
+                                    background: "#1e1e1e",
+                                    color: "#d4d4d4",
+                                    border: "none",
+                                    padding: "20px",
+                                    resize: "none",
+                                    width: "100%",
+                                    boxSizing: "border-box",
+                                    outline: "none",
+                                    margin: 0,
+                                    display: "block",
+                                    overflow: "auto"
+                                  },
+                                  placeholder: "Enter HTML template with variables like {{user.email}}..."
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, style: { marginTop: "12px" }, wrap: "wrap", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Button,
+                            {
+                              variant: "secondary",
+                              size: "S",
+                              onClick: () => {
+                                navigator.clipboard.writeText(settings.emailTemplates[templateKey].html);
+                                toggleNotification({ type: "success", message: "HTML template copied!" });
+                              },
+                              children: "📋 Copy Template"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Button,
+                            {
+                              variant: "tertiary",
+                              size: "S",
+                              onClick: () => {
+                                const validation = validateTemplate(settings.emailTemplates[templateKey].html, templateKey);
+                                toggleNotification({
+                                  type: validation.isValid ? "success" : "warning",
+                                  message: validation.isValid ? `✓ Template valid! Found ${validation.foundVars.length}/${validation.totalAvailable} variables.` : "⚠️ No variables found. Add at least one variable."
+                                });
+                              },
+                              children: "✓ Validate"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Button,
+                            {
+                              variant: "tertiary",
+                              size: "S",
+                              onClick: () => {
+                                const lines = settings.emailTemplates[templateKey].html.split("\n").length;
+                                const chars = settings.emailTemplates[templateKey].html.length;
+                                toggleNotification({
+                                  type: "info",
+                                  message: `Template has ${lines} lines and ${chars} characters`
+                                });
+                              },
+                              children: "ℹ️ Template Info"
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.Box,
+                    {
+                      background: "neutral0",
+                      padding: 6,
+                      style: { borderRadius: theme.borderRadius.lg, border: "2px solid #E5E7EB", width: "100%", marginBottom: "24px" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginBottom: "16px" }, children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", style: { fontSize: "18px" }, children: "📄 Text Template" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { variant: "secondary", children: "Fallback" })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Button,
+                            {
+                              variant: "tertiary",
+                              size: "S",
+                              onClick: () => {
+                                const defaultTemplates = getDefaultTemplates();
+                                const newTemplates = { ...settings.emailTemplates };
+                                newTemplates[templateKey].text = defaultTemplates[templateKey].text;
+                                handleChange("emailTemplates", newTemplates);
+                                toggleNotification({ type: "success", message: "Default text template loaded!" });
+                              },
+                              children: "📋 Load Default"
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginBottom: "16px", display: "block", fontSize: "14px" }, children: "Plain text version (no HTML) as fallback for older email clients" }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          designSystem.Box,
+                          {
+                            style: {
+                              border: "2px solid #E5E7EB",
+                              borderRadius: "6px",
+                              overflow: "hidden",
+                              background: "#1e1e1e",
+                              height: "300px",
+                              display: "flex",
+                              flexDirection: "column"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Box,
+                                {
+                                  padding: 2,
+                                  background: "neutral700",
+                                  style: { borderBottom: "1px solid #333", flexShrink: 0 },
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { color: "#888", fontSize: "11px", fontFamily: "monospace" }, children: "template.txt" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "textarea",
+                                {
+                                  value: settings.emailTemplates[templateKey].text,
+                                  onChange: (e) => {
+                                    const newTemplates = { ...settings.emailTemplates };
+                                    newTemplates[templateKey].text = e.target.value;
+                                    handleChange("emailTemplates", newTemplates);
+                                  },
+                                  style: {
+                                    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+                                    height: "100%",
+                                    fontSize: "14px",
+                                    lineHeight: "1.8",
+                                    background: "#1e1e1e",
+                                    color: "#d4d4d4",
+                                    border: "none",
+                                    padding: "20px",
+                                    resize: "none",
+                                    width: "100%",
+                                    boxSizing: "border-box",
+                                    outline: "none",
+                                    margin: 0,
+                                    display: "block",
+                                    overflow: "auto"
+                                  },
+                                  placeholder: "Plain text version (no HTML)..."
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, style: { marginTop: "12px" }, wrap: "wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          designSystem.Button,
+                          {
+                            variant: "secondary",
+                            size: "S",
+                            onClick: () => {
+                              navigator.clipboard.writeText(settings.emailTemplates[templateKey].text);
+                              toggleNotification({ type: "success", message: "Text template copied!" });
+                            },
+                            children: "📋 Copy Template"
+                          }
+                        ) })
+                      ]
+                    }
+                  )
+                ] }) }, templateKey))
+              ] })
+            ] })
+          ] }) })
+        ] }),
+        isAdvanced && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "webhooks", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Accordion.Trigger,
+            {
+              icon: icons.Code,
+              description: "Discord & Slack integration",
+              children: "Webhook Integration (Advanced)"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 5, style: { borderRadius: theme.borderRadius.md, marginBottom: "32px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ToggleCard,
+              {
+                $active: settings.enableWebhooks,
+                onClick: () => handleChange("enableWebhooks", !settings.enableWebhooks),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, style: { width: "100%" }, alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(GreenToggle, { $isActive: settings.enableWebhooks, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Toggle,
+                    {
+                      checked: settings.enableWebhooks,
+                      onChange: () => handleChange("enableWebhooks", !settings.enableWebhooks)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, alignItems: "center", style: { textAlign: "center" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Typography,
+                      {
+                        variant: "delta",
+                        fontWeight: "bold",
+                        textColor: settings.enableWebhooks ? "success700" : "neutral800",
+                        style: { fontSize: "16px" },
+                        children: "Enable Webhooks"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "13px", lineHeight: "1.6" }, children: "Send session events to Discord, Slack, or custom endpoints" })
+                  ] })
+                ] })
+              }
+            ) }) }) }),
+            settings.enableWebhooks && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "🔗 Discord Webhook URL" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    style: {
+                      border: "2px solid #E5E7EB",
+                      borderRadius: theme.borderRadius.md,
+                      overflow: "hidden",
+                      background: "#fafafa"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        placeholder: "https://discord.com/api/webhooks/123456789/abcdefghijklmnopqrstuvwxyz...",
+                        value: settings.discordWebhookUrl,
+                        onChange: (e) => handleChange("discordWebhookUrl", e.target.value),
+                        rows: 3,
+                        style: {
+                          width: "100%",
+                          padding: "14px 18px",
+                          border: "none",
+                          outline: "none",
+                          fontFamily: "Monaco, Consolas, monospace",
+                          fontSize: "14px",
+                          lineHeight: "1.8",
+                          color: "#374151",
+                          background: "white",
+                          resize: "vertical",
+                          minHeight: "80px"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginTop: "10px" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: "💡 Optional: Post session alerts to your Discord channel" }),
+                  settings.discordWebhookUrl && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "primary600", style: { fontSize: "11px", fontFamily: "monospace" }, children: [
+                    settings.discordWebhookUrl.length,
+                    " characters"
+                  ] })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "💬 Slack Webhook URL" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    style: {
+                      border: "2px solid #E5E7EB",
+                      borderRadius: theme.borderRadius.md,
+                      overflow: "hidden",
+                      background: "#fafafa"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        placeholder: "https://hooks.slack.com/services/XXXX/XXXX/XXXX",
+                        value: settings.slackWebhookUrl,
+                        onChange: (e) => handleChange("slackWebhookUrl", e.target.value),
+                        rows: 3,
+                        style: {
+                          width: "100%",
+                          padding: "14px 18px",
+                          border: "none",
+                          outline: "none",
+                          fontFamily: "Monaco, Consolas, monospace",
+                          fontSize: "14px",
+                          lineHeight: "1.8",
+                          color: "#374151",
+                          background: "white",
+                          resize: "vertical",
+                          minHeight: "80px"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", style: { marginTop: "10px" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: "💡 Optional: Post session alerts to your Slack workspace" }),
+                  settings.slackWebhookUrl && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "primary600", style: { fontSize: "11px", fontFamily: "monospace" }, children: [
+                    settings.slackWebhookUrl.length,
+                    " characters"
+                  ] })
+                ] })
+              ] }) })
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 5, background: "primary100", style: { borderRadius: theme.borderRadius.md, marginTop: "32px", border: "2px solid #BAE6FD" }, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { style: { width: "20px", height: "20px", color: theme.colors.success[600], flexShrink: 0, marginTop: "2px" } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "8px", display: "block", color: theme.colors.primary[700] }, children: "✨ Database-Backed Settings" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "primary700", style: { fontSize: "13px", lineHeight: "1.8" }, children: "All settings are stored in your Strapi database and shared across all admin users. Changes take effect immediately - no server restart required! Email templates, webhooks, and security options are all managed from this interface." })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+exports.default = SettingsPage;