@svadmin/ui 0.34.10 → 0.36.0

package/dist/components/account/CompanyProfilePage.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { t } 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 { Upload, Loader2 } from '@lucide/svelte';
+
+  let companyName = $state('Acme Corporation');
+  let industry = $state('Technology');
+  let website = $state('https://acme.com');
+  let employeeCount = $state('1,250');
+  let foundedYear = $state('2015');
+  let description = $state('Building the future of enterprise software with cutting-edge AI and cloud solutions.');
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    await new Promise(r => setTimeout(r, 800));
+    saving = false;
+  }
+</script>
+
+<div class="space-y-6" data-svadmin-content-page="account">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('account.companyProfile')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.companyProfileDescription')}</p>
+  </div>
+
+  <!-- Company Avatar & Banner -->
+  <Card.Card class="border-border/60">
+    <Card.CardContent class="p-0">
+      <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative rounded-t-xl">
+        <button class="absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-lg bg-black/40 text-white hover:bg-black/60 transition-colors">
+          <Upload class="h-4 w-4" />
+        </button>
+      </div>
+      <div class="relative px-6 pb-5">
+        <div class="-mt-8 flex items-end gap-4">
+          <div class="ring-4 ring-card rounded-xl overflow-hidden shrink-0">
+            <div class="flex h-16 w-16 items-center justify-center bg-primary/10 text-primary text-xl font-bold">
+              {companyName.split(' ').map(n => n[0]).join('').slice(0, 2)}
+            </div>
+          </div>
+          <div class="pb-1">
+            <h3 class="text-lg font-semibold text-foreground">{companyName}</h3>
+            <p class="text-sm text-muted-foreground">{industry}</p>
+          </div>
+        </div>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Company Details Form -->
+  <Card.Card class="border-border/60">
+    <Card.CardHeader>
+      <Card.CardTitle class="text-base">{t('profile.companyName')}</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="company-name">{t('profile.companyName')}</Label>
+          <Input id="company-name" bind:value={companyName} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-industry">{t('profile.industry')}</Label>
+          <Input id="company-industry" bind:value={industry} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-website">{t('profile.website')}</Label>
+          <Input id="company-website" bind:value={website} type="url" />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-employees">{t('profile.employees')}</Label>
+          <Input id="company-employees" bind:value={employeeCount} />
+        </div>
+        <div class="space-y-2">
+          <Label for="company-founded">{t('profile.founded')}</Label>
+          <Input id="company-founded" bind:value={foundedYear} />
+        </div>
+      </div>
+      <div class="space-y-2">
+        <Label for="company-description">{t('profile.companyDescription')}</Label>
+        <textarea
+          id="company-description"
+          bind:value={description}
+          rows={3}
+          class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ></textarea>
+      </div>
+      <div class="flex justify-end">
+        <Button onclick={handleSave} disabled={saving}>
+          {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
+          {t('common.save')}
+        </Button>
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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

package/dist/components/account/GetStartedPage.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  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';
+
+  interface Step {
+    key: string;
+    title: string;
+    description: string;
+    icon: Component;
+    completed: boolean;
+  }
+
+  let currentStep = $state(0);
+
+  let steps = $state<Step[]>([
+    { key: 'avatar', title: t('account.uploadAvatar'), description: t('account.getStartedDescription'), icon: Camera, completed: false },
+    { key: 'profile', title: t('account.setupProfile'), description: t('account.getStartedDescription'), icon: UserPlus, completed: false },
+    { key: 'connect', title: t('account.connectProvider'), description: t('account.getStartedDescription'), icon: Puzzle, completed: false },
+    { key: 'team', title: t('account.setupTeam'), description: 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++;
+    }
+  }
+</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">{t('account.getStarted')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.getStartedDescription')}</p>
+    </div>
+    <Badge variant="secondary">{progressPercent}%</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">{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">{t('account.completeSetup')}</h3>
+          <p class="text-sm text-success/70">{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]">{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)}>
+                      {t('account.completeSetup')} <ArrowRight class="h-3.5 w-3.5 ml-1" />
+                    </Button>
+                    <Button size="sm" variant="ghost" onclick={skipStep}>
+                      {t('account.skipSetup')}
+                    </Button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </Card.CardContent>
+        </Card.Card>
+      {/each}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/account/ImportMembersPage.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Upload, Download, FileText, CheckCircle2, Loader2 } from '@lucide/svelte';
+
+  let isDragging = $state(false);
+  let fileName = $state('');
+  let importState = $state<'idle' | 'uploading' | 'processing' | 'complete' | 'error'>('idle');
+  let progress = $state(0);
+  let importCount = $state(0);
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  function handleDragLeave() {
+    isDragging = false;
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    isDragging = false;
+    const file = e.dataTransfer?.files?.[0];
+    if (file) processFile(file);
+  }
+
+  function handleFileSelect(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) processFile(file);
+  }
+
+  function processFile(file: File) {
+    fileName = file.name;
+    importState = 'uploading';
+    progress = 0;
+
+    // Simulate upload
+    const interval = setInterval(() => {
+      progress += 10;
+      if (progress >= 100) {
+        clearInterval(interval);
+        importState = 'processing';
+        // Simulate processing
+        setTimeout(() => {
+          importCount = Math.floor(Math.random() * 50) + 20;
+          importState = 'complete';
+        }, 1500);
+      }
+    }, 200);
+  }
+
+  function resetImport() {
+    fileName = '';
+    importState = 'idle';
+    progress = 0;
+    importCount = 0;
+  }
+</script>
+
+<div class="space-y-6" data-svadmin-content-page="account">
+  <div>
+    <h2 class="text-xl font-semibold text-foreground">{t('account.importMembers')}</h2>
+    <p class="mt-1 text-sm text-muted-foreground">{t('account.importMembersDescription')}</p>
+  </div>
+
+  {#if importState === 'complete'}
+    <Card.Card class="border-success/30 bg-success/5">
+      <Card.CardContent class="flex flex-col items-center gap-4 p-8">
+        <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-success/10 text-success">
+          <CheckCircle2 class="h-7 w-7" />
+        </div>
+        <div class="text-center">
+          <h3 class="text-lg font-semibold text-success">{t('account.importComplete')}</h3>
+          <p class="text-sm text-success/70 mt-1">{t('account.imported', { count: importCount })}</p>
+        </div>
+        <Button variant="outline" onclick={resetImport}>{t('common.back')}</Button>
+      </Card.CardContent>
+    </Card.Card>
+  {:else}
+    <!-- Upload area -->
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="p-6">
+        <label
+          for="file-input"
+          class="block cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors
+            {isDragging ? 'border-primary bg-primary/5' : 'border-border/60 hover:border-primary/40'}"
+          ondragover={handleDragOver}
+          ondragleave={handleDragLeave}
+          ondrop={handleDrop}
+        >
+          {#if importState === 'idle'}
+            <Upload class="mx-auto h-10 w-10 text-muted-foreground" />
+            <p class="mt-3 text-sm font-medium text-foreground">{t('account.dragOrClick')}</p>
+            <p class="mt-1 text-xs text-muted-foreground">{t('account.supportedFormats')}</p>
+            <div class="mt-4">
+              <span class="inline-flex h-8 items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground">
+                {t('common.upload')}
+              </span>
+              <input id="file-input" type="file" accept=".csv,.xlsx" class="sr-only" onchange={handleFileSelect} />
+            </div>
+          {:else if importState === 'uploading' || importState === 'processing'}
+            <div class="space-y-3">
+              <div class="flex items-center justify-center gap-2 text-sm">
+                {#if importState === 'processing'}
+                  <Loader2 class="h-4 w-4 animate-spin" />
+                {:else}
+                  <FileText class="h-4 w-4 text-muted-foreground" />
+                {/if}
+                <span class="font-medium">{fileName}</span>
+              </div>
+              <div class="h-2 w-48 mx-auto rounded-full bg-muted overflow-hidden">
+                <div class="h-full rounded-full bg-primary transition-all duration-300" style="width: {progress}%"></div>
+              </div>
+              <p class="text-xs text-muted-foreground">
+                {importState === 'uploading' ? t('account.importProgress') : t('account.startImport')}...
+              </p>
+            </div>
+          {/if}
+        </label>
+      </Card.CardContent>
+    </Card.Card>
+
+    <!-- Template download -->
+    <Card.Card class="border-border/60">
+      <Card.CardContent class="flex items-center justify-between p-4">
+        <div class="flex items-center gap-3">
+          <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <FileText class="h-4 w-4" />
+          </div>
+          <div>
+            <p class="text-sm font-medium text-foreground">{t('account.downloadTemplate')}</p>
+            <p class="text-xs text-muted-foreground">CSV template.csv</p>
+          </div>
+        </div>
+        <Button variant="outline" size="sm">
+          <Download class="h-3.5 w-3.5 mr-1" />{t('account.downloadTemplate')}
+        </Button>
+      </Card.CardContent>
+    </Card.Card>
+  {/if}
+</div>

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

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

package/dist/components/account/MembersStarterPage.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  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';
+
+  interface Member {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    status: 'active' | 'invited' | 'inactive';
+    avatar?: string;
+    joinedAt: string;
+  }
+
+  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: t('account.active') },
+    'invited': { icon: Clock, color: 'text-amber-500', label: t('account.invited') },
+    'inactive': { icon: XCircle, color: 'text-muted-foreground', label: 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">{t('account.membersStarter')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.membersStarterDescription')}</p>
+    </div>
+    <Button size="sm">
+      <UserPlus class="h-4 w-4 mr-1" />{t('account.inviteMember')}
+    </Button>
+  </div>
+
+  <!-- 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={t('common.search')}
+      bind:value={searchQuery}
+      class="pl-9"
+    />
+  </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>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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

package/dist/components/account/SecurityLogPage.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { t } 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 { Search, Download } from '@lucide/svelte';
+
+  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: 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: 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: t('securityLog.loginFailed'), ip: '203.0.113.42', device: 'Firefox / Windows', location: 'Unknown', time: '3 hours ago', severity: 'warning' },
+    { id: '4', event: 'twoFactorEnabled', eventLabel: 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: 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: 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: 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: 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;
+    })
+  );
+
+</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">{t('account.securityLog')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{t('account.securityLogDescription')}</p>
+    </div>
+    <Button variant="outline" size="sm">
+      <Download class="h-3.5 w-3.5 mr-1" />{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={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' ? 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">{t('securityLog.event')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.ip')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.device')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{t('securityLog.location')}</th>
+              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{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>{t('securityLog.ip')}</span>
+                <span class="font-mono text-foreground">{log.ip}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.device')}</span>
+                <span class="truncate text-foreground">{log.device}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.location')}</span>
+                <span class="truncate text-foreground">{log.location}</span>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </Card.CardContent>
+  </Card.Card>
+</div>

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

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