@svadmin/ui 0.42.2 → 0.43.0

package/dist/components/account/GetStartedPage.svelte

@@ -1,125 +1,43 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowRight, Camera, Check, Puzzle, UserPlus, Users } from '@lucide/svelte';
   import * as Card from '../ui/card/index.js';
-  import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
-  import { Camera, UserPlus, Puzzle, Users, CheckCircle2, ArrowRight, Sparkles } from '@lucide/svelte';
-  import type { Component } from 'svelte';
+  import { Button } from '../ui/button/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import TwoFactorStepper from '../content/TwoFactorStepper.svelte';
 
   const i18n = useTranslation();
-
-  interface Step {
-    key: string;
-    title: string;
-    description: string;
-    icon: Component;
-    completed: boolean;
-  }
-
-  let currentStep = $state(0);
-
-  let steps = $state<Step[]>([
-    { key: 'avatar', title: i18n.t('account.uploadAvatar'), description: i18n.t('account.getStartedDescription'), icon: Camera, completed: false },
-    { key: 'profile', title: i18n.t('account.setupProfile'), description: i18n.t('account.getStartedDescription'), icon: UserPlus, completed: false },
-    { key: 'connect', title: i18n.t('account.connectProvider'), description: i18n.t('account.getStartedDescription'), icon: Puzzle, completed: false },
-    { key: 'team', title: i18n.t('account.setupTeam'), description: i18n.t('account.getStartedDescription'), icon: Users, completed: false },
-  ]);
-
-  const completedCount = $derived(steps.filter(s => s.completed).length);
-  const progressPercent = $derived(Math.round((completedCount / steps.length) * 100));
-  const allCompleted = $derived(completedCount === steps.length);
-
-  function markComplete(index: number) {
-    steps[index] = { ...steps[index], completed: true };
-    if (currentStep < steps.length - 1) {
-      currentStep = index + 1;
-    }
-  }
-
-  function goToStep(index: number) {
-    if (index <= completedCount) {
-      currentStep = index;
-    }
-  }
-
-  function skipStep() {
-    if (currentStep < steps.length - 1) {
-      currentStep++;
-    }
+  const steps = [
+    { title: i18n.t('account.uploadAvatar'), description: 'Add a recognizable profile image for your workspace.', icon: Camera },
+    { title: i18n.t('account.setupProfile'), description: 'Complete your contact details and working preferences.', icon: UserPlus },
+    { title: i18n.t('account.connectProvider'), description: 'Connect the services your team uses every day.', icon: Puzzle },
+    { title: i18n.t('account.setupTeam'), description: 'Invite teammates and set the right access level.', icon: Users },
+  ];
+  let completed = $state<boolean[]>(steps.map(() => false));
+  let current = $state(0);
+  const completedCount = $derived(completed.filter(Boolean).length);
+  const progress = $derived(Math.round(completedCount / steps.length * 100));
+  function complete(index: number) {
+    completed[index] = true;
+    current = Math.min(index + 1, steps.length - 1);
   }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.getStarted')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.getStartedDescription')}</p>
-    </div>
-    <Badge variant="secondary">{progressPercent}%</Badge>
+<ContentPageShell pageId="account-get-started" width="narrow">
+  <div class="flex items-center justify-between gap-3"><ContentPageHeader title={i18n.t('account.getStarted')} description={i18n.t('account.getStartedDescription')} /><Badge variant="secondary">{progress}%</Badge></div>
+  <TwoFactorStepper current={completedCount} steps={steps.map((step) => step.title)} />
+  <div class="space-y-3">
+    {#each steps as step, index (step.title)}
+      <Card.Card class={current === index && !completed[index] ? 'border-primary/40' : ''}>
+        <Card.CardContent class="flex items-start gap-4 p-4">
+          <span class={'flex size-10 shrink-0 items-center justify-center rounded-md ' + (completed[index] ? 'bg-success/10 text-success' : current === index ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground')}>
+            {#if completed[index]}<Check class="size-5" />{:else}<step.icon class="size-5" />{/if}
+          </span>
+          <div class="min-w-0 flex-1"><h2 class="text-sm font-semibold text-foreground">{step.title}</h2><p class="mt-1 text-sm text-muted-foreground">{step.description}</p>{#if current === index && !completed[index]}<Button class="mt-3" size="sm" onclick={() => complete(index)}>{i18n.t('account.completeSetup')}<ArrowRight class="size-3.5" /></Button>{/if}</div>
+        </Card.CardContent>
+      </Card.Card>
+    {/each}
   </div>
-
-  <!-- Progress bar -->
-  <div class="space-y-1.5">
-    <div class="h-2 rounded-full bg-muted overflow-hidden">
-      <div class="h-full rounded-full bg-primary transition-all duration-500" style="width: {progressPercent}%"></div>
-    </div>
-    <p class="text-xs text-muted-foreground">{i18n.t('account.step', { current: completedCount, total: steps.length })}</p>
-  </div>
-
-  {#if allCompleted}
-    <Card.Card class="border-success/30 bg-success/5">
-      <Card.CardContent class="flex items-center gap-4 p-6">
-        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-success/10 text-success">
-          <Sparkles class="h-6 w-6" />
-        </div>
-        <div>
-          <h3 class="font-semibold text-success">{i18n.t('account.completeSetup')}</h3>
-          <p class="text-sm text-success/70">{i18n.t('account.getStartedDescription')}</p>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  {:else}
-    <!-- Step cards -->
-    <div class="space-y-3">
-      {#each steps as step, i (i)}
-        <Card.Card class="border-border/60 transition-all {currentStep === i ? 'border-primary/40 shadow-sm' : ''} {step.completed ? 'opacity-60' : ''}">
-          <Card.CardContent class="p-4">
-            <div class="flex items-start gap-4">
-              <button
-                class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors
-                  {step.completed ? 'bg-success/10 text-success' : currentStep === i ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}"
-                onclick={() => goToStep(i)}
-              >
-                {#if step.completed}
-                  <CheckCircle2 class="h-5 w-5" />
-                {:else}
-                  <step.icon class="h-5 w-5" />
-                {/if}
-              </button>
-              <div class="flex-1 min-w-0">
-                <div class="flex items-center gap-2">
-                  <h4 class="font-medium text-foreground">{step.title}</h4>
-                  {#if currentStep === i && !step.completed}
-                    <Badge variant="outline" class="text-[10px]">{i18n.t('account.step', { current: i + 1, total: steps.length })}</Badge>
-                  {/if}
-                </div>
-                <p class="text-sm text-muted-foreground mt-0.5">{step.description}</p>
-
-                {#if currentStep === i && !step.completed}
-                  <div class="mt-3 flex gap-2">
-                    <Button size="sm" onclick={() => markComplete(i)}>
-                      {i18n.t('account.completeSetup')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
-                    </Button>
-                    <Button size="sm" variant="ghost" onclick={skipStep}>
-                      {i18n.t('account.skipSetup')}
-                    </Button>
-                  </div>
-                {/if}
-              </div>
-            </div>
-          </Card.CardContent>
-        </Card.Card>
-      {/each}
-    </div>
-  {/if}
-</div>
+</ContentPageShell>

package/dist/components/account/GetStartedPage.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'svelte';
-declare const GetStartedPage: Component<Record<string, never>, {}, "">;
+declare const GetStartedPage: import("svelte").Component<Record<string, never>, {}, "">;
 type GetStartedPage = ReturnType<typeof GetStartedPage>;
 export default GetStartedPage;

package/dist/components/account/SecurityLogPage.svelte

@@ -1,137 +1,22 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Download } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Search, Download } from '@lucide/svelte';
-
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FilterToolbar from '../content/FilterToolbar.svelte';
+  import SecurityEventTable from '../content/SecurityEventTable.svelte';
+  import type { SecurityEvent } from '../content/SecurityEventTable.svelte';
+  import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
-
-  interface LogEntry {
-    id: string;
-    event: string;
-    eventLabel: string;
-    ip: string;
-    device: string;
-    location: string;
-    time: string;
-    severity: 'info' | 'warning' | 'critical';
-  }
-
-  let searchQuery = $state('');
-  let filterSeverity = $state<'all' | 'info' | 'warning' | 'critical'>('all');
-
-  const logs: LogEntry[] = [
-    { id: '1', event: 'loginSuccess', eventLabel: i18n.t('securityLog.loginSuccess'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 minutes ago', severity: 'info' },
-    { id: '2', event: 'apiKeyCreated', eventLabel: i18n.t('securityLog.apiKeyCreated'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 hour ago', severity: 'info' },
-    { id: '3', event: 'loginFailed', eventLabel: i18n.t('securityLog.loginFailed'), ip: '203.0.113.42', device: 'Firefox / Windows', location: 'Unknown', time: '3 hours ago', severity: 'warning' },
-    { id: '4', event: 'twoFactorEnabled', eventLabel: i18n.t('securityLog.twoFactorEnabled'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 day ago', severity: 'info' },
-    { id: '5', event: 'passwordChanged', eventLabel: i18n.t('securityLog.passwordChanged'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '2 days ago', severity: 'info' },
-    { id: '6', event: 'loginFailed', eventLabel: i18n.t('securityLog.loginFailed'), ip: '198.51.100.77', device: 'Safari / iOS', location: 'Beijing, CN', time: '3 days ago', severity: 'critical' },
-    { id: '7', event: 'sessionRevoked', eventLabel: i18n.t('securityLog.sessionRevoked'), ip: '192.168.1.105', device: 'Safari / iOS', location: 'Shanghai, CN', time: '5 days ago', severity: 'info' },
-    { id: '8', event: 'apiKeyRevoked', eventLabel: i18n.t('securityLog.apiKeyRevoked'), ip: '192.168.1.102', device: 'Chrome / macOS', location: 'Shanghai, CN', time: '1 week ago', severity: 'warning' },
-  ];
-
-  const filteredLogs = $derived(
-    logs.filter(l => {
-      if (filterSeverity !== 'all' && l.severity !== filterSeverity) return false;
-      if (searchQuery) {
-        const q = searchQuery.toLowerCase();
-        return l.eventLabel.toLowerCase().includes(q) || l.ip.includes(q) || l.device.toLowerCase().includes(q);
-      }
-      return true;
-    })
-  );
-
+  let query = $state('');
+  const events: SecurityEvent[] = referenceDemoData.securityEvents;
+  const filtered = $derived(query ? events.filter((event) => `${event.event} ${event.actor} ${event.location}`.toLowerCase().includes(query.toLowerCase())) : events);
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.securityLog')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.securityLogDescription')}</p>
-    </div>
-    <Button variant="outline" size="sm">
-      <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
-    </Button>
-  </div>
-
-  <!-- Filters -->
-  <div class="flex flex-wrap gap-3">
-    <div class="relative flex-1 min-w-[200px]">
-      <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-      <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
-    </div>
-    <div class="flex rounded-lg border border-input overflow-hidden">
-      {#each ['all', 'info', 'warning', 'critical'] as sev (sev)}
-        <button
-          class="px-3 py-1.5 text-xs font-medium transition-colors capitalize
-            {filterSeverity === sev ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}"
-          onclick={() => filterSeverity = sev as typeof filterSeverity}
-        >{sev === 'all' ? i18n.t('common.filter') : sev}</button>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Log table -->
-  <Card.Card class="border-border/60">
-    <Card.CardContent class="p-0">
-      <div class="hidden overflow-x-auto md:block">
-        <table class="w-full">
-          <thead>
-            <tr class="border-b bg-muted/30">
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.event')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.ip')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.device')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.location')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('securityLog.time')}</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y">
-            {#each filteredLogs as log (log.id)}
-              <tr class="hover:bg-accent/30 transition-colors">
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-2">
-                    <span class="inline-flex h-2 w-2 rounded-full {log.severity === 'critical' ? 'bg-red-500' : log.severity === 'warning' ? 'bg-amber-500' : 'bg-blue-500'}"></span>
-                    <span class="text-sm text-foreground">{log.eventLabel}</span>
-                  </div>
-                </td>
-                <td class="px-4 py-3 text-sm text-muted-foreground font-mono">{log.ip}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">{log.device}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">{log.location}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{log.time}</td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-      <div class="divide-y md:hidden">
-        {#each filteredLogs as log (log.id)}
-          <div class="space-y-3 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div class="flex min-w-0 items-center gap-2">
-                <span class="inline-flex h-2 w-2 shrink-0 rounded-full {log.severity === 'critical' ? 'bg-red-500' : log.severity === 'warning' ? 'bg-amber-500' : 'bg-blue-500'}"></span>
-                <span class="truncate text-sm font-medium text-foreground">{log.eventLabel}</span>
-              </div>
-              <span class="shrink-0 text-xs text-muted-foreground">{log.time}</span>
-            </div>
-            <div class="grid gap-2 text-xs text-muted-foreground">
-              <div class="flex items-center justify-between gap-3">
-                <span>{i18n.t('securityLog.ip')}</span>
-                <span class="font-mono text-foreground">{log.ip}</span>
-              </div>
-              <div class="flex items-center justify-between gap-3">
-                <span>{i18n.t('securityLog.device')}</span>
-                <span class="truncate text-foreground">{log.device}</span>
-              </div>
-              <div class="flex items-center justify-between gap-3">
-                <span>{i18n.t('securityLog.location')}</span>
-                <span class="truncate text-foreground">{log.location}</span>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>
+<ContentPageShell pageId="account-security-log" width="wide">
+  <ContentPageHeader title={i18n.t('account.securityLog')} description={i18n.t('account.securityLogDescription')} actions={undefined} />
+  <div class="flex justify-end"><Button variant="outline" size="sm"><Download class="size-3.5" />{i18n.t('common.export')}</Button></div>
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  <SecurityEventTable events={filtered} />
+</ContentPageShell>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -1,286 +1,26 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import { Badge } from '../ui/badge/index.js';
-  import { Loader2, Shield, Building2, Lock, Globe, Calendar, Link2, Database } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import IntegrationCard from '../content/IntegrationCard.svelte';
+  import type { IntegrationSummary } from '../content/IntegrationCard.svelte';
+  import SecurityEventTable from '../content/SecurityEventTable.svelte';
+  import type { SecurityEvent } from '../content/SecurityEventTable.svelte';
   const i18n = useTranslation();
-
-  const trustedDevices = [
-    { name: 'MacBook Pro 16"', detail: 'macOS · Shanghai, CN', lastSeen: '2026-08-04 09:12', current: true },
-    { name: 'iPhone 17', detail: 'iOS · Shanghai, CN', lastSeen: '2026-08-03 22:41', current: false },
-    { name: 'Windows Workstation', detail: 'Windows · Beijing, CN', lastSeen: '2026-07-28 18:05', current: false },
-  ];
-
-  const paymentHistory = [
-    { date: '2026-08-01', type: 'Enterprise · Monthly', amount: '$299.00' },
-    { date: '2026-07-01', type: 'Enterprise · Monthly', amount: '$299.00' },
-    { date: '2026-06-01', type: 'Enterprise · Monthly', amount: '$299.00' },
-  ];
-
-  const calendarAccounts = [
-    { name: 'Work Calendar', account: 'alex@acme.com', active: true },
-    { name: 'Personal Calendar', account: 'alex@example.com', active: false },
-  ];
-
-  const connections = [
-    { name: 'Source Control', account: 'alexchen', linked: true },
-    { name: 'ChatOps', account: '@alex.chen', linked: true },
-    { name: 'Cloud Drive', account: 'alex@acme.com', linked: false },
-  ];
-
   let ssoEnabled = $state(false);
-  let ssoProvider = $state('');
-  let domainRestriction = $state('');
-  let passwordPolicy = $state('strong');
-  let sessionTimeout = $state('30');
-  let ipWhitelist = $state('');
   let auditLogging = $state(true);
-  let dataRetention = $state('365');
-  let saving = $state(false);
-
-  async function handleSave() {
-    saving = true;
-    await new Promise(r => setTimeout(r, 800));
-    saving = false;
-  }
+  const identity: IntegrationSummary[] = [{ id: 'sso', name: 'Enterprise identity provider', description: i18n.t('account.ssoDescription'), account: 'SAML / OIDC', connected: false }];
+  const events: SecurityEvent[] = [{ id: '1', event: 'SSO policy updated', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Today, 09:12', severity: 'info' }, { id: '2', event: 'Audit log retention changed', actor: 'Alex Chen', location: 'Shanghai, CN', createdAt: 'Yesterday, 16:40', severity: 'warning' }];
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsEnterprise')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsEnterpriseDescription')}</p>
-    </div>
-    <Badge variant="secondary"><Building2 class="h-3 w-3 mr-1" />Enterprise</Badge>
-  </div>
-
-  <!-- SSO -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Shield class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('account.singleSignOn')}
-      </Card.CardTitle>
-      <Card.CardDescription>{i18n.t('account.ssoDescription')}</Card.CardDescription>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-4">
-      <div class="flex items-center justify-between gap-4">
-        <div class="space-y-1">
-          <Label for="sso-enabled">{i18n.t('account.enableSso')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.t('account.enableSsoDesc')}</p>
-        </div>
-        <Switch id="sso-enabled" bind:checked={ssoEnabled} />
-      </div>
-      {#if ssoEnabled}
-        <div class="grid gap-4 sm:grid-cols-2">
-          <div class="space-y-2">
-            <Label for="sso-provider">{i18n.t('account.ssoProvider')}</Label>
-            <Input id="sso-provider" bind:value={ssoProvider} placeholder="Okta, Azure AD, etc." />
-          </div>
-          <div class="space-y-2">
-            <Label for="domain-restriction">{i18n.t('account.domainRestriction')}</Label>
-            <Input id="domain-restriction" bind:value={domainRestriction} placeholder="@company.com" />
-          </div>
-        </div>
-      {/if}
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Security Policy -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Lock class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('account.securityPolicy')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-4">
-      <div class="grid gap-4 sm:grid-cols-2">
-        <div class="space-y-2">
-          <Label for="password-policy">{i18n.t('account.passwordPolicy')}</Label>
-          <select id="password-policy" bind:value={passwordPolicy} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
-            <option value="basic">{i18n.t('account.policyBasic')}</option>
-            <option value="strong">{i18n.t('account.policyStrong')}</option>
-            <option value="very-strong">{i18n.t('account.policyVeryStrong')}</option>
-          </select>
-        </div>
-        <div class="space-y-2">
-          <Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label>
-          <Input id="session-timeout" bind:value={sessionTimeout} type="number" />
-        </div>
-      </div>
-
-      <div class="space-y-2">
-        <Label for="ip-whitelist">{i18n.t('account.ipWhitelist')}</Label>
-        <Input id="ip-whitelist" bind:value={ipWhitelist} placeholder="10.0.0.0/8, 192.168.1.0/24" />
-        <p class="text-xs text-muted-foreground">{i18n.t('account.ipWhitelistHint')}</p>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Data & Compliance -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="flex items-center gap-2 text-base">
-        <Globe class="h-4 w-4 text-muted-foreground" />
-        {i18n.t('account.dataCompliance')}
-      </Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="space-y-4">
-      <div class="flex items-center justify-between gap-4">
-        <div class="space-y-1">
-          <Label for="audit-logging">{i18n.t('account.auditLogging')}</Label>
-          <p class="text-xs text-muted-foreground">{i18n.t('account.auditLoggingDesc')}</p>
-        </div>
-        <Switch id="audit-logging" bind:checked={auditLogging} />
-      </div>
-
-      <div class="space-y-2">
-        <Label for="data-retention">{i18n.t('account.dataRetention')}</Label>
-        <Input id="data-retention" bind:value={dataRetention} type="number" />
-      </div>
-
-      <div class="flex justify-end">
-        <Button onclick={handleSave} disabled={saving}>
-          {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-          {i18n.t('common.save')}
-        </Button>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <div class="grid gap-4 lg:grid-cols-2">
-    <!-- Trusted Devices -->
-    <Card.Card class="border-border/60">
-      <Card.CardHeader>
-        <Card.CardTitle class="text-base">{i18n.t('account.trustedDevices')}</Card.CardTitle>
-      </Card.CardHeader>
-      <Card.CardContent class="p-0">
-        <div class="divide-y">
-          {#each trustedDevices as device (device.name)}
-            <div class="flex items-center justify-between gap-3 px-6 py-3">
-              <div class="min-w-0">
-                <p class="truncate text-sm font-medium text-foreground">{device.name}</p>
-                <p class="truncate text-xs text-muted-foreground">{device.detail} · {device.lastSeen}</p>
-              </div>
-              {#if device.current}
-                <Badge variant="secondary" class="shrink-0 text-[10px]">{i18n.t('security.currentSession')}</Badge>
-              {/if}
-            </div>
-          {/each}
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Current Plan + Payment History -->
-    <div class="space-y-4">
-      <Card.Card class="border-primary/30 bg-primary/5">
-        <Card.CardHeader class="pb-3">
-          <div class="flex items-center justify-between">
-            <Card.CardTitle class="text-base">{i18n.t('account.currentPlan')}</Card.CardTitle>
-            <Badge variant="secondary">Enterprise</Badge>
-          </div>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="flex items-baseline gap-1">
-            <span class="text-2xl font-bold text-foreground">$299</span>
-            <span class="text-sm text-muted-foreground">{i18n.t('account.perMonth')}</span>
-          </div>
-          <p class="mt-1 text-xs text-muted-foreground">Unlimited seats · SSO · Audit retention 365d</p>
-        </Card.CardContent>
-      </Card.Card>
-
-      <Card.Card class="border-border/60">
-        <Card.CardHeader class="pb-3">
-          <Card.CardTitle class="text-base">{i18n.t('account.paymentHistory')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="p-0">
-          <div class="divide-y">
-            <div class="grid grid-cols-3 px-6 py-2 text-xs font-medium text-muted-foreground">
-              <span>{i18n.t('account.date')}</span>
-              <span>{i18n.t('account.type')}</span>
-              <span class="text-right">{i18n.t('account.amount')}</span>
-            </div>
-            {#each paymentHistory as row (row.date)}
-              <div class="grid grid-cols-3 px-6 py-2.5 text-sm">
-                <span class="text-muted-foreground">{row.date}</span>
-                <span class="text-foreground">{row.type}</span>
-                <span class="text-right font-medium text-foreground">{row.amount}</span>
-              </div>
-            {/each}
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    </div>
-  </div>
-
-  <div class="grid gap-4 lg:grid-cols-3">
-    <!-- Calendar Accounts -->
-    <Card.Card class="border-border/60">
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Calendar class="h-4 w-4 text-muted-foreground" />{i18n.t('account.calendarAccounts')}
-        </Card.CardTitle>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        {#each calendarAccounts as cal (cal.account)}
-          <div class="flex items-center justify-between gap-3">
-            <div class="min-w-0">
-              <p class="truncate text-sm font-medium text-foreground">{cal.name}</p>
-              <p class="truncate text-xs text-muted-foreground">{cal.account}</p>
-            </div>
-            <Badge variant={cal.active ? 'secondary' : 'outline'} class="shrink-0 text-[10px]">
-              {cal.active ? i18n.t('account.active') : i18n.t('account.inactive')}
-            </Badge>
-          </div>
-        {/each}
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Connections -->
-    <Card.Card class="border-border/60">
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Link2 class="h-4 w-4 text-muted-foreground" />{i18n.t('account.connections')}
-        </Card.CardTitle>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        {#each connections as conn (conn.name)}
-          <div class="flex items-center justify-between gap-3">
-            <div class="min-w-0">
-              <p class="truncate text-sm font-medium text-foreground">{conn.name}</p>
-              <p class="truncate text-xs text-muted-foreground">{conn.account}</p>
-            </div>
-            <Badge variant={conn.linked ? 'secondary' : 'outline'} class="shrink-0 text-[10px]">
-              {conn.linked ? i18n.t('integrations.statusConnected') : i18n.t('integrations.statusDisconnected')}
-            </Badge>
-          </div>
-        {/each}
-      </Card.CardContent>
-    </Card.Card>
-
-    <!-- Data import -->
-    <Card.Card class="border-border/60">
-      <Card.CardHeader>
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Database class="h-4 w-4 text-muted-foreground" />{i18n.t('account.dataImport')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('account.dataImportDescription')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <div class="flex items-center justify-between gap-3 rounded-lg border border-border/60 p-3">
-          <div class="min-w-0">
-            <p class="truncate text-sm font-medium text-foreground">Google Analytics</p>
-            <p class="truncate text-xs text-muted-foreground">analytics.google.com</p>
-          </div>
-          <Button size="sm" variant="outline">{i18n.t('network.connect')}</Button>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  </div>
-</div>
+<ContentPageShell pageId="account-settings-enterprise" width="wide">
+  <ContentPageHeader title={i18n.t('account.settingsEnterprise')} description={i18n.t('account.settingsEnterpriseDescription')} />
+  <div class="grid gap-4 lg:grid-cols-2"><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.securityPolicy')}</h2><p class="mt-1 text-sm text-muted-foreground">Set organization-wide controls for authentication and sessions.</p></div><div class="space-y-2"><Label for="session-timeout">{i18n.t('account.sessionTimeout')}</Label><Input id="session-timeout" value="30" /></div><div class="space-y-2"><Label for="retention">{i18n.t('account.dataRetention')}</Label><Input id="retention" value="365" /></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.auditLogging')}</span><Switch bind:checked={auditLogging} /></div><Button size="sm">{i18n.t('common.save')}</Button></Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-4 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.singleSignOn')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.ssoDescription')}</p></div><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.enableSso')}</span><Switch bind:checked={ssoEnabled} /></div><Input value="https://idp.example.com/metadata" aria-label={i18n.t('account.ssoProvider')} /><Button variant="outline" size="sm">{i18n.t('common.test')}</Button></Card.CardContent></Card.Card></div>
+  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.connections')}</h2>{#each identity as integration (integration.id)}<IntegrationCard {integration} />{/each}</section>
+  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('account.securityLog')}</h2><SecurityEventTable events={events} /></section>
+</ContentPageShell>