@svadmin/ui 0.42.3 → 0.44.0

package/dist/components/account/GetStartedPage.svelte

@@ -1,125 +1,64 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowRight, Building2, Check, KeyRound, Palette, Plug, ShieldCheck, UserRound, 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';
 
   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 },
+  let completed = $state<string[]>(['profile', 'security']);
+  const isZh = $derived(i18n.locale === 'zh-CN');
+  const entries = $derived([
+    { id: 'profile', title: isZh ? '个人资料' : 'User profile', description: isZh ? '维护联系人、工作状态、文件和日历连接。' : 'Maintain contact details, work status, files, and calendar connections.', href: '#/account/home/user-profile', icon: UserRound },
+    { id: 'company', title: isZh ? '企业资料' : 'Company profile', description: isZh ? '配置企业信息、品牌资料、成员和数据导入。' : 'Configure company details, branding, members, and data imports.', href: '#/account/home/company-profile', icon: Building2 },
+    { id: 'members', title: isZh ? '成员与邀请' : 'Members and invites', description: isZh ? '邀请成员、分配角色或从 CSV 批量导入。' : 'Invite members, assign roles, or import a CSV roster.', href: '#/account/members/team-members', icon: Users },
+    { id: 'security', title: isZh ? '安全设置' : 'Security setup', description: isZh ? '启用两步验证并检查账户安全事件。' : 'Enable two-factor authentication and review account security events.', href: '#/authentication/branded/2fa', icon: ShieldCheck },
+    { id: 'appearance', title: isZh ? '外观与偏好' : 'Appearance and preferences', description: isZh ? '设置主题、密度、语言和辅助功能。' : 'Set theme, density, language, and accessibility preferences.', href: '#/account/appearance', icon: Palette },
+    { id: 'integrations', title: isZh ? '集成与 API' : 'Integrations and API', description: isZh ? '连接外部服务，并管理 API 密钥和 Webhook。' : 'Connect external services and manage API keys and webhooks.', href: '#/account/integrations', icon: Plug },
   ]);
+  const progress = $derived(Math.round(completed.length / entries.length * 100));
 
-  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++;
-    }
+  function toggleCompleted(id: string) {
+    completed = completed.includes(id) ? completed.filter((item) => item !== id) : [...completed, id];
   }
 </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="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+    <ContentPageHeader title={i18n.t('account.getStarted')} description={isZh ? '从账户功能入口快速完成组织、成员、安全和集成配置。' : 'Use the account hub to complete organization, member, security, and integration setup.'} />
+    <Badge variant="outline">{progress}% {isZh ? '已完成' : 'complete'}</Badge>
   </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}
+  <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_19rem]">
+    <div class="grid gap-4 md:grid-cols-2">
+      {#each entries as entry (entry.id)}
+        <Card.Card class="flex min-h-52 flex-col">
+          <Card.CardContent class="flex flex-1 flex-col p-5">
+            <div class="flex items-start justify-between gap-3">
+              <span class="flex size-9 items-center justify-center rounded-md border border-border bg-card text-primary"><entry.icon class="size-4" /></span>
+              <button type="button" class="flex size-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:text-foreground" aria-label={isZh ? '切换完成状态' : 'Toggle completion'} onclick={() => toggleCompleted(entry.id)}>
+                {#if completed.includes(entry.id)}<Check class="size-4 text-success" />{/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>
+            <h2 class="mt-4 text-base font-semibold text-foreground">{entry.title}</h2>
+            <p class="mt-1 flex-1 text-sm leading-6 text-muted-foreground">{entry.description}</p>
+            <Button href={entry.href} variant="link" class="mt-4 h-auto justify-start p-0">{isZh ? '打开设置' : 'Open settings'}<ArrowRight class="size-3.5" /></Button>
           </Card.CardContent>
         </Card.Card>
       {/each}
     </div>
-  {/if}
-</div>
+
+    <aside class="space-y-5">
+      <section class="rounded-lg border border-border bg-card p-5">
+        <div class="flex items-center gap-3"><span class="flex size-9 items-center justify-center rounded-md bg-primary/10 text-primary"><KeyRound class="size-4" /></span><div><h2 class="text-sm font-semibold text-foreground">{isZh ? '账户准备度' : 'Account readiness'}</h2><p class="text-xs text-muted-foreground">{completed.length} / {entries.length}</p></div></div>
+        <div class="mt-4 h-2 overflow-hidden rounded-full bg-muted"><div class="h-full rounded-full bg-primary" style:width={`${progress}%`}></div></div>
+        <div class="mt-4 divide-y divide-border border-y border-border">
+          {#each entries as entry (entry.id)}<div class="flex items-center justify-between gap-3 py-3 text-sm"><span class="text-muted-foreground">{entry.title}</span>{#if completed.includes(entry.id)}<Badge variant="secondary">{isZh ? '完成' : 'Done'}</Badge>{:else}<span class="text-xs text-muted-foreground">{isZh ? '待配置' : 'Pending'}</span>{/if}</div>{/each}
+        </div>
+      </section>
+      <Button class="w-full" onclick={() => completed = entries.map((entry) => entry.id)}>{isZh ? '标记全部完成' : 'Mark all complete'}</Button>
+    </aside>
+  </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/MembersStarterPage.svelte

@@ -1,106 +1,63 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
+  import { ArrowRight, Check, Download, Mail, Upload, 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 { Avatar } from '../ui/avatar/index.js';
   import { Input } from '../ui/input/index.js';
-  import { Search, UserPlus, MoreHorizontal, Clock, CheckCircle2, XCircle } from '@lucide/svelte';
+  import { Badge } from '../ui/badge/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
 
   const i18n = useTranslation();
-
-  interface Member {
-    id: string;
-    name: string;
-    email: string;
-    role: string;
-    status: 'active' | 'invited' | 'inactive';
-    avatar?: string;
-    joinedAt: string;
+  let inviteOpen = $state(false);
+  let email = $state('');
+  let invited = $state<string[]>([]);
+  const isZh = $derived(i18n.locale === 'zh-CN');
+
+  function sendInvite() {
+    const normalized = email.trim();
+    if (!normalized || invited.includes(normalized)) return;
+    invited = [...invited, normalized];
+    email = '';
   }
-
-  let searchQuery = $state('');
-
-  let members = $state<Member[]>([
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', status: 'active', joinedAt: '2023-01-15' },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', status: 'active', joinedAt: '2023-03-22' },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', status: 'invited', joinedAt: '2024-01-10' },
-    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', status: 'active', joinedAt: '2023-06-05' },
-    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', status: 'inactive', joinedAt: '2022-11-20' },
-    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', status: 'active', joinedAt: '2023-02-14' },
-  ]);
-
-  const filteredMembers = $derived(
-    searchQuery
-      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()))
-      : members
-  );
-
-  const statusConfig = {
-    'active': { icon: CheckCircle2, color: 'text-green-500', label: i18n.t('account.active') },
-    'invited': { icon: Clock, color: 'text-amber-500', label: i18n.t('account.invited') },
-    'inactive': { icon: XCircle, color: 'text-muted-foreground', label: i18n.t('account.inactive') },
-  };
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </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.membersStarter')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.membersStarterDescription')}</p>
-    </div>
-    <Button size="sm">
-      <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
-    </Button>
-  </div>
+<ContentPageShell pageId="account-members-starter" width="wide">
+  <ContentPageHeader title={isZh ? '开始组建团队' : 'Start building your team'} description={isZh ? '这是零成员工作区的起始页。邀请第一位成员，或通过 CSV 批量导入。' : 'This is the starting state for a workspace with no members. Invite the first teammate or import a CSV roster.'} />
 
-  <!-- Search -->
-  <div class="relative">
-    <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>
+  <section class="grid min-h-[28rem] overflow-hidden rounded-lg border border-border bg-card lg:grid-cols-[minmax(0,1fr)_21rem]">
+    <div class="flex flex-col items-center justify-center px-6 py-12 text-center">
+      <span class="flex size-14 items-center justify-center rounded-lg bg-primary/10 text-primary"><Users class="size-6" /></span>
+      <Badge variant="outline" class="mt-5">0 {isZh ? '名成员' : 'members'}</Badge>
+      <h2 class="mt-4 text-xl font-semibold text-foreground">{isZh ? '邀请你的第一位团队成员' : 'Invite your first team member'}</h2>
+      <p class="mt-2 max-w-lg text-sm leading-6 text-muted-foreground">{isZh ? '成员加入后，你可以继续分配角色、设置权限、查看活动状态，并在团队成员页批量管理。' : 'After members join, assign roles, configure access, review activity, and manage them in the full team member table.'}</p>
+      <div class="mt-6 flex flex-wrap justify-center gap-2"><Button onclick={() => inviteOpen = true}><UserPlus class="size-4" />{isZh ? '邀请成员' : 'Invite member'}</Button><Button href="#/account/members/import-members" variant="outline"><Upload class="size-4" />{isZh ? '导入 CSV' : 'Import CSV'}</Button></div>
+    </div>
 
-  <!-- Members list -->
-  <Card.Card class="border-border/60">
-    <Card.CardContent class="p-0">
-      <div class="divide-y">
-        {#each filteredMembers as member (member.id)}
-          {@const sc = statusConfig[member.status]}
-          <div class="flex items-center gap-3 p-4 hover:bg-accent/30 transition-colors">
-            <div class="shrink-0">
-              {#if member.avatar}
-                <Avatar class="h-9 w-9"><img src={member.avatar} alt={member.name} /></Avatar>
-              {:else}
-                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
-                  {initials(member.name)}
-                </div>
-              {/if}
-            </div>
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium text-foreground truncate">{member.name}</span>
-                <Badge variant="outline" class="text-[10px] shrink-0">{member.role}</Badge>
-              </div>
-              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
-            </div>
-            <div class="shrink-0 flex items-center gap-3">
-              <span class="flex items-center gap-1 text-xs {sc.color}">
-                <sc.icon class="h-3 w-3" />
-                {sc.label}
-              </span>
-              <Button variant="ghost" size="icon-sm">
-                <MoreHorizontal class="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+    <aside class="border-t border-border bg-muted/15 p-5 lg:border-l lg:border-t-0">
+      <h2 class="text-sm font-semibold text-foreground">{isZh ? '团队准备清单' : 'Team setup checklist'}</h2>
+      <div class="mt-4 space-y-4">
+        {#each [isZh ? '邀请至少一名管理员' : 'Invite at least one admin', isZh ? '确认默认成员角色' : 'Confirm the default member role', isZh ? '准备成员 CSV 模板' : 'Prepare the member CSV template'] as item, index (item)}
+          {@const completed = index === 0 && invited.length > 0}
+          <div class="flex items-start gap-3" data-checklist-status={completed ? 'complete' : 'pending'}><span class={'mt-0.5 flex size-6 items-center justify-center rounded-md border ' + (completed ? 'border-success/30 bg-success/10 text-success' : 'border-border text-muted-foreground')}>{#if completed}<Check class="size-3.5" />{:else}<span class="text-xs">{index + 1}</span>{/if}</span><p class="text-sm leading-5 text-muted-foreground">{item}</p></div>
         {/each}
       </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>
+      <a href="#/account/members/team-members" class="mt-6 flex items-center gap-1 border-t border-border pt-4 text-sm font-medium text-primary">{isZh ? '查看完整成员管理' : 'Open full member management'}<ArrowRight class="size-3.5" /></a>
+      <Button variant="outline" size="sm" class="mt-3 w-full"><Download class="size-3.5" />{isZh ? '下载 CSV 模板' : 'Download CSV template'}</Button>
+    </aside>
+  </section>
+
+  {#if inviteOpen}
+    <Card.Card data-member-invite-panel>
+      <Card.CardContent class="grid gap-4 p-5 md:grid-cols-[auto_minmax(0,1fr)_auto] md:items-end">
+        <span class="flex size-10 items-center justify-center rounded-md bg-primary/10 text-primary"><Mail class="size-4" /></span>
+        <label><span class="text-sm font-medium text-foreground">{isZh ? '成员邮箱' : 'Member email'}</span><Input class="mt-2" type="email" bind:value={email} placeholder="teammate@example.com" /></label>
+        <div class="flex gap-2"><Button variant="outline" onclick={() => inviteOpen = false}>{i18n.t('common.cancel')}</Button><Button onclick={sendInvite}>{isZh ? '发送邀请' : 'Send invite'}</Button></div>
+      </Card.CardContent>
+    </Card.Card>
+  {/if}
+
+  {#if invited.length > 0}
+    <section class="rounded-lg border border-border bg-card"><div class="border-b border-border px-4 py-3"><h2 class="text-sm font-semibold text-foreground">{isZh ? '待接受邀请' : 'Pending invitations'}</h2></div><div class="divide-y divide-border">{#each invited as invite (invite)}<div class="flex items-center justify-between gap-3 px-4 py-3"><div><p class="text-sm font-medium text-foreground">{invite}</p><p class="text-xs text-muted-foreground">{isZh ? '刚刚发送' : 'Sent just now'}</p></div><Badge variant="outline">{isZh ? '已邀请' : 'Invited'}</Badge></div>{/each}</div></section>
+  {/if}
+</ContentPageShell>

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>