@svadmin/ui 0.42.3 → 0.43.0

package/dist/components/ErrorPage.svelte

@@ -1,60 +1,8 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
-  import { useTranslation } from '@svadmin/core/i18n';
-
-  import { AlertTriangle, ArrowLeft, FileQuestion, Home } from '@lucide/svelte';
-  import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
-
-  const i18n = useTranslation();
-
-  interface Props {
-    status?: '404' | '500';
-    title?: string;
-    description?: string;
-  }
-
+  import SystemErrorState from './content/SystemErrorState.svelte';
+  import ContentPageShell from './content/ContentPageShell.svelte';
+  interface Props { status?: '404' | '500'; title?: string; description?: string; }
   let { status = '404', title, description }: Props = $props();
-  const adminContext = captureAdminContext();
-
-  function goBack() {
-    adminContext.back();
-  }
-
-  const isNotFound = $derived(status === '404');
-  const resolvedTitle = $derived(title ?? (isNotFound ? i18n.t('common.pageNotFound') : i18n.t('common.error')));
-  const resolvedDescription = $derived(
-    description ?? (isNotFound ? i18n.t('error.pageNotFoundDescription') : i18n.t('error.internalServerErrorDescription')),
-  );
 </script>
 
-<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="error">
-  <Card.Card class="w-full max-w-md border-border/60">
-    <Card.CardContent class="space-y-6 px-6 py-10 text-center">
-      <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-lg bg-muted/50 text-muted-foreground">
-        {#if isNotFound}
-          <FileQuestion class="h-8 w-8" />
-        {:else}
-          <AlertTriangle class="h-8 w-8 text-destructive" />
-        {/if}
-      </div>
-
-      <div class="space-y-2">
-        <p class="text-xs font-semibold uppercase text-muted-foreground">{status}</p>
-        <h1 class="text-2xl font-semibold text-foreground">{resolvedTitle}</h1>
-        <p class="mx-auto max-w-sm text-sm leading-relaxed text-muted-foreground">{resolvedDescription}</p>
-      </div>
-
-      <div class="flex flex-col justify-center gap-2 sm:flex-row">
-        <Button variant="outline" onclick={goBack}>
-          <ArrowLeft class="h-4 w-4" />
-          {i18n.t('common.back')}
-        </Button>
-        <Button onclick={() => adminContext.navigate('/')}>
-          <Home class="h-4 w-4" />
-          {i18n.t('common.returnHome')}
-        </Button>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-</div>
+<ContentPageShell pageId="system-error" width="narrow"><SystemErrorState {status} {title} {description} /></ContentPageShell>

package/dist/components/TwoFactorAuthPage.svelte

@@ -1,249 +1,61 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from './ui/card/index.js';
+  import { ArrowLeft, ArrowRight, Check, CheckCircle2, Copy, Shield } from '@lucide/svelte';
   import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
+  import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
+  import ContentPageShell from './content/ContentPageShell.svelte';
+  import ContentPageHeader from './content/ContentPageHeader.svelte';
+  import OtpInput from './content/OtpInput.svelte';
+  import TwoFactorStepper from './content/TwoFactorStepper.svelte';
   import { Badge } from './ui/badge/index.js';
   import { Separator } from './ui/separator/index.js';
-  import { Shield, Copy, CheckCircle2, AlertTriangle, ArrowRight, ArrowLeft } from '@lucide/svelte';
-
-  const i18n = useTranslation();
 
   type Step = 'intro' | 'scan' | 'verify' | 'recovery';
-
+  const i18n = useTranslation();
   let currentStep = $state<Step>('intro');
-  let is2faEnabled = $state(false);
-  let verifyError = $state('');
-  let copiedRecovery = $state(false);
+  let enabled = $state(false);
   let codeDigits = $state<string[]>(Array.from({ length: 6 }, () => ''));
-
-  const verificationCode = $derived(codeDigits.join(''));
-  const qrCells = [
-    '11111110',
-    '10010010',
-    '10111010',
-    '10100100',
-    '11101010',
-    '00101110',
-    '11010100',
-    '01110110',
-  ].flatMap(row => [...row].map(cell => cell === '1'));
-
-  const recoveryCodes = [
-    'A1B2-C3D4', 'E5F6-G7H8', 'I9J0-K1L2',
-    'M3N4-O5P6', 'Q7R8-S9T0', 'U1V2-W3X4',
-    'Y5Z6-A7B8', 'C9D0-E1F2',
-  ];
-
-  function startSetup() {
-    currentStep = 'scan';
-  }
-
-  function proceedToVerify() {
-    currentStep = 'verify';
-  }
-
-  function handleVerify() {
-    verifyError = '';
-    if (verificationCode.length !== 6) {
-      verifyError = i18n.t('auth.twoFactorEnterCode');
-      return;
-    }
-    currentStep = 'recovery';
-  }
-
-  function handleDigitInput(e: Event, index: number) {
-    const input = e.currentTarget as HTMLInputElement;
-    const digit = input.value.replace(/\D/g, '').slice(-1);
-    codeDigits[index] = digit;
-    input.value = digit;
-    if (digit && index < codeDigits.length - 1) {
-      const next = input.parentElement?.children[index + 1] as HTMLInputElement | undefined;
-      next?.focus();
-    }
-  }
-
-  function completeSetup() {
-    is2faEnabled = true;
-    currentStep = 'intro';
-  }
-
-  function disable2fa() {
-    is2faEnabled = false;
-    currentStep = 'intro';
-  }
-
-  function copyRecoveryCodes() {
-    navigator.clipboard?.writeText(recoveryCodes.join('\n'));
-    copiedRecovery = true;
-    setTimeout(() => { copiedRecovery = false; }, 2000);
-  }
+  let error = $state('');
+  let copied = $state(false);
+  const recoveryCodes = ['A1B2-C3D4', 'E5F6-G7H8', 'I9J0-K1L2', 'M3N4-O5P6', 'Q7R8-S9T0', 'U1V2-W3X4'];
+  const currentIndex = $derived(currentStep === 'intro' ? 0 : currentStep === 'scan' ? 1 : currentStep === 'verify' ? 2 : 3);
+  function verify() { if (codeDigits.join('').length !== 6) { error = i18n.t('auth.twoFactorEnterCode'); return; } error = ''; currentStep = 'recovery'; }
+  function copyCodes() { navigator.clipboard?.writeText(recoveryCodes.join('\n')); copied = true; setTimeout(() => copied = false, 1500); }
 </script>
 
-<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="auth-2fa">
-  <div class="w-full max-w-lg space-y-6">
-    {#if currentStep === 'intro' && !is2faEnabled}
-      <!-- Intro -->
-      <Card.Card class="border-border/60">
-        <Card.CardContent class="space-y-6 p-8 text-center">
-          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-500/10 text-amber-500">
-            <Shield class="h-8 w-8" />
-          </div>
-          <div class="space-y-2">
-            <h2 class="text-2xl font-semibold text-foreground">{i18n.t('auth.twoFactorSetup')}</h2>
-            <p class="text-sm text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
-          </div>
-          <div class="space-y-3 text-left">
-            <div class="flex items-start gap-3 rounded-xl border p-3">
-              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">1</div>
-              <div>
-                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorScanQR')}</p>
-                <p class="text-xs text-muted-foreground">Google Authenticator, Authy, etc.</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-3 rounded-xl border p-3">
-              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">2</div>
-              <div>
-                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorEnterCode')}</p>
-                <p class="text-xs text-muted-foreground">6-digit code from your authenticator</p>
-              </div>
-            </div>
-            <div class="flex items-start gap-3 rounded-xl border p-3">
-              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-500/10 text-blue-500 text-sm font-bold">3</div>
-              <div>
-                <p class="text-sm font-medium text-foreground">{i18n.t('auth.twoFactorSaveRecovery')}</p>
-                <p class="text-xs text-muted-foreground">{i18n.t('auth.twoFactorRecoveryHint')}</p>
-              </div>
-            </div>
-          </div>
-          <Button class="w-full" onclick={startSetup}>
-            {i18n.t('auth.twoFactorSetup')} <ArrowRight class="h-4 w-4 ml-2" />
-          </Button>
-        </Card.CardContent>
-      </Card.Card>
-
+<ContentPageShell pageId="auth-2fa" width="narrow">
+  <ContentPageHeader title={i18n.t('auth.twoFactorSetup')} description={i18n.t('security.twoFactorDescription')} />
+  {#if !enabled}<TwoFactorStepper current={currentIndex} steps={[i18n.t('auth.twoFactorSetup'), i18n.t('auth.twoFactorScanQR'), i18n.t('auth.twoFactorVerify'), i18n.t('auth.twoFactorRecovery')]} />{/if}
+  <Card.Card><Card.CardContent class="space-y-6 p-6">
+    {#if currentStep === 'intro' && !enabled}
+      <div class="flex items-start gap-3"><span class="flex size-10 items-center justify-center rounded-md bg-primary/10 text-primary"><Shield class="size-5" /></span><div><h2 class="text-base font-semibold text-foreground">{i18n.t('auth.twoFactorSetup')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p></div></div>
+      <ol class="space-y-2 text-sm text-muted-foreground"><li class="rounded-md border border-border p-3">1. {i18n.t('auth.twoFactorScanQR')}</li><li class="rounded-md border border-border p-3">2. {i18n.t('auth.twoFactorEnterCode')}</li><li class="rounded-md border border-border p-3">3. {i18n.t('auth.twoFactorSaveRecovery')}</li></ol>
+      <Button class="w-full" onclick={() => currentStep = 'scan'}>{i18n.t('common.next')}<ArrowRight class="size-4" /></Button>
     {:else if currentStep === 'scan'}
-      <!-- QR Code -->
-      <Card.Card class="border-border/60">
-        <Card.CardContent class="space-y-6 p-8">
-          <div class="text-center space-y-2">
-            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorScanQR')}</h2>
-            <p class="text-sm text-muted-foreground">Use your authenticator app to scan the code below.</p>
-          </div>
-          <div class="mx-auto flex h-48 w-48 items-center justify-center rounded-xl border-2 border-dashed border-border/60 bg-muted/20">
-            <div class="grid grid-cols-8 gap-[2px]">
-              {#each qrCells as filled, i (i)}
-                <div class="h-3 w-3 rounded-[1px] {filled ? 'bg-foreground' : 'bg-transparent'}"></div>
-              {/each}
-            </div>
-          </div>
-          <div class="flex gap-3">
-            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'intro'}>
-              <ArrowLeft class="h-4 w-4 mr-2" />{i18n.t('common.back')}
-            </Button>
-            <Button class="flex-1" onclick={proceedToVerify}>
-              {i18n.t('common.next')} <ArrowRight class="h-4 w-4 ml-2" />
-            </Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
+      <div class="space-y-4 text-center"><div class="mx-auto grid size-48 grid-cols-8 gap-0.5 rounded-md border border-border bg-muted p-5">{#each Array(64) as _, index (index)}<span class={'aspect-square ' + ((index * 11 + index % 7) % 3 === 0 ? 'bg-foreground' : 'bg-transparent')}></span>{/each}</div><p class="text-sm text-muted-foreground">{i18n.t('auth.twoFactorScanQR')}</p></div>
+      <div class="flex justify-between gap-2"><Button variant="outline" onclick={() => currentStep = 'intro'}><ArrowLeft class="size-4" />{i18n.t('common.back')}</Button><Button onclick={() => currentStep = 'verify'}>{i18n.t('common.next')}<ArrowRight class="size-4" /></Button></div>
     {:else if currentStep === 'verify'}
-      <!-- Verify -->
-      <Card.Card class="border-border/60">
-        <Card.CardContent class="space-y-6 p-8">
-          <div class="text-center space-y-2">
-            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorVerify')}</h2>
-            <p class="text-sm text-muted-foreground">{i18n.t('auth.twoFactorEnterCode')}</p>
-          </div>
-
-          {#if verifyError}
-            <Alert.Root variant="destructive">
-              <AlertTriangle class="h-4 w-4" />
-              <Alert.Description>{verifyError}</Alert.Description>
-            </Alert.Root>
-          {/if}
-
-          <div class="flex justify-center gap-2">
-            {#each Array(6) as _, i (i)}
-              <Input
-                class="h-14 w-12 text-center text-xl font-bold"
-                maxlength={1}
-                inputmode="numeric"
-                pattern="[0-9]*"
-                bind:value={codeDigits[i]}
-                oninput={(e: Event) => handleDigitInput(e, i)}
-              />
-            {/each}
-          </div>
-
-          <div class="flex gap-3">
-            <Button variant="outline" class="flex-1" onclick={() => currentStep = 'scan'}>
-              <ArrowLeft class="h-4 w-4 mr-2" />{i18n.t('common.back')}
-            </Button>
-            <Button class="flex-1" onclick={handleVerify}>
-              {i18n.t('common.confirm')} <ArrowRight class="h-4 w-4 ml-2" />
-            </Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
+      <div class="space-y-4"><div><h2 class="text-base font-semibold text-foreground">{i18n.t('auth.twoFactorVerify')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('auth.twoFactorEnterCode')}</p></div>{#if error}<Alert.Root variant="destructive"><Alert.Description>{error}</Alert.Description></Alert.Root>{/if}<OtpInput bind:value={codeDigits} /><div class="flex justify-between gap-2"><Button variant="outline" onclick={() => currentStep = 'scan'}><ArrowLeft class="size-4" />{i18n.t('common.back')}</Button><Button onclick={verify}>{i18n.t('common.next')}<ArrowRight class="size-4" /></Button></div></div>
     {:else if currentStep === 'recovery'}
-      <!-- Recovery codes -->
-      <Card.Card class="border-border/60">
-        <Card.CardContent class="space-y-6 p-8">
-          <div class="text-center space-y-2">
-            <div class="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-xl bg-green-500/10 text-green-500">
-              <CheckCircle2 class="h-6 w-6" />
-            </div>
-            <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorRecovery')}</h2>
-            <p class="text-sm text-muted-foreground">{i18n.t('auth.twoFactorRecoveryHint')}</p>
-          </div>
-
-          <div class="rounded-xl border bg-muted/20 p-4">
-            <div class="grid grid-cols-2 gap-2 font-mono text-sm">
-              {#each recoveryCodes as code, i (i)}
-                <div class="rounded-lg bg-background px-3 py-1.5 text-center text-foreground">{code}</div>
-              {/each}
-            </div>
-          </div>
-
-          <div class="flex gap-3">
-            <Button variant="outline" class="flex-1" onclick={copyRecoveryCodes}>
-              {#if copiedRecovery}
-                <CheckCircle2 class="h-4 w-4 mr-2" />{i18n.t('common.copied')}
-              {:else}
-                <Copy class="h-4 w-4 mr-2" />{i18n.t('common.copyAll')}
-              {/if}
-            </Button>
-            <Button class="flex-1" onclick={completeSetup}>
-              {i18n.t('account.completeSetup')} <ArrowRight class="h-4 w-4 ml-2" />
-            </Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
+      <div class="space-y-4"><div><h2 class="text-base font-semibold text-foreground">{i18n.t('auth.twoFactorRecovery')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('auth.twoFactorRecoveryHint')}</p></div><div class="grid grid-cols-2 gap-2 rounded-md border border-border bg-muted p-4 font-mono text-sm">{#each recoveryCodes as code (code)}<span>{code}</span>{/each}</div><div class="flex justify-end gap-2"><Button variant="outline" onclick={copyCodes}>{#if copied}<Check class="size-4" />{:else}<Copy class="size-4" />{/if}{i18n.t('common.copy')}</Button><Button onclick={() => { enabled = true; currentStep = 'intro'; }}>{i18n.t('account.completeSetup')}</Button></div>{#if enabled}<p class="text-sm text-success">{i18n.t('security.twoFactorActive')}</p>{/if}</div>
     {:else}
-      <!-- 2FA enabled state -->
-      <Card.Card class="border-border/60">
-        <Card.CardContent class="space-y-6 p-8 text-center">
-          <div class="mx-auto inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-green-500/10 text-green-500">
-            <Shield class="h-8 w-8" />
-          </div>
-          <div class="space-y-2">
-            <h2 class="text-2xl font-semibold text-foreground">{i18n.t('auth.twoFactorVerifySuccess')}</h2>
-            <p class="text-sm text-muted-foreground">{i18n.t('security.twoFactorActive')}</p>
-          </div>
-          <Badge variant="secondary" class="bg-green-500/10 text-green-600">
-            <CheckCircle2 class="h-3 w-3 mr-1" />2FA Active
-          </Badge>
-          <Separator />
-          <Button variant="destructive" onclick={disable2fa}>
-            {i18n.t('auth.twoFactorDisable')}
-          </Button>
-        </Card.CardContent>
-      </Card.Card>
+      <div class="space-y-6 p-6 text-center">
+        <div class="mx-auto flex size-12 items-center justify-center rounded-xl bg-success/10 text-success">
+          <Shield class="size-6" />
+        </div>
+        <div>
+          <h2 class="text-xl font-semibold text-foreground">{i18n.t('auth.twoFactorVerifySuccess')}</h2>
+          <p class="mt-1 text-sm text-muted-foreground">{i18n.t('security.twoFactorActive')}</p>
+        </div>
+        <Badge variant="secondary" class="mx-auto w-fit bg-success/10 text-success">
+          <CheckCircle2 class="size-3.5" />{i18n.t('securityLog.twoFactorEnabled')}
+        </Badge>
+        <Separator />
+        <Button variant="destructive" onclick={() => { enabled = false; currentStep = 'intro'; }}>
+          {i18n.t('auth.twoFactorDisable')}
+        </Button>
+      </div>
     {/if}
-  </div>
-</div>
+  </Card.CardContent></Card.Card>
+</ContentPageShell>

package/dist/components/account/CompanyProfilePage.svelte

@@ -1,156 +1,35 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Loader2 } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import { Badge } from '../ui/badge/index.js';
-  import * as Table from '../ui/table/index.js';
-  import { Upload, Loader2, ShieldCheck, ShieldOff } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import DescriptionList from '../content/DescriptionList.svelte';
+  import MemberList from '../content/MemberList.svelte';
+  import type { MemberSummary } from '../content/MemberList.svelte';
   const i18n = useTranslation();
-
   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 description = $state('Building the future of enterprise software with dependable AI and cloud workflows.');
   let saving = $state(false);
-
-  const members = [
-    { name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', twoFactor: true, joined: '2022-03-15' },
-    { name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', twoFactor: true, joined: '2022-06-22' },
-    { name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', twoFactor: false, joined: '2023-01-10' },
-    { name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', twoFactor: true, joined: '2022-02-14' },
-    { name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', twoFactor: false, joined: '2023-04-05' },
+  const members: MemberSummary[] = [
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', status: 'success' },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', status: 'success' },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', status: 'neutral' },
+    { id: '4', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', status: 'success' },
   ];
-
-  async function handleSave() {
-    saving = true;
-    await new Promise(r => setTimeout(r, 800));
-    saving = false;
-  }
+  async function save() { saving = true; await new Promise((resolve) => setTimeout(resolve, 400)); saving = false; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.companyProfile')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.companyProfileDescription')}</p>
+<ContentPageShell pageId="account-company-profile" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t("account.companyProfile")} description={i18n.t("account.companyProfileDescription")} /><Button onclick={save} disabled={saving} size="sm">{#if saving}<Loader2 class="size-3.5 animate-spin" />{/if}{i18n.t("common.save")}</Button></div>
+  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
+    <Card.Card><Card.CardContent class="space-y-4 p-5"><div class="grid gap-4 sm:grid-cols-2"><div class="space-y-2"><Label for="company-name">{i18n.t('profile.companyName')}</Label><Input id="company-name" bind:value={companyName} /></div><div class="space-y-2"><Label for="company-industry">{i18n.t('profile.industry')}</Label><Input id="company-industry" bind:value={industry} /></div><div class="space-y-2 sm:col-span-2"><Label for="company-website">{i18n.t('profile.website')}</Label><Input id="company-website" bind:value={website} type="url" /></div></div><div class="space-y-2"><Label for="company-description">{i18n.t('profile.companyDescription')}</Label><textarea id="company-description" bind:value={description} rows={4} class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"></textarea></div></Card.CardContent></Card.Card>
+    <Card.Card><Card.CardContent class="space-y-4 p-5"><div><p class="text-xs font-medium text-muted-foreground">{i18n.t('profile.companyName')}</p><p class="mt-1 text-lg font-semibold text-foreground">{companyName}</p><p class="text-sm text-muted-foreground">{industry}</p></div><DescriptionList columns={1} items={[{ label: i18n.t('profile.website'), value: website, href: website }, { label: i18n.t('profile.employees'), value: '1,250' }, { label: i18n.t('profile.founded'), value: '2015' }]} /></Card.CardContent></Card.Card>
   </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">{i18n.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">{i18n.t('profile.companyName')}</Label>
-          <Input id="company-name" bind:value={companyName} />
-        </div>
-        <div class="space-y-2">
-          <Label for="company-industry">{i18n.t('profile.industry')}</Label>
-          <Input id="company-industry" bind:value={industry} />
-        </div>
-        <div class="space-y-2">
-          <Label for="company-website">{i18n.t('profile.website')}</Label>
-          <Input id="company-website" bind:value={website} type="url" />
-        </div>
-        <div class="space-y-2">
-          <Label for="company-employees">{i18n.t('profile.employees')}</Label>
-          <Input id="company-employees" bind:value={employeeCount} />
-        </div>
-        <div class="space-y-2">
-          <Label for="company-founded">{i18n.t('profile.founded')}</Label>
-          <Input id="company-founded" bind:value={foundedYear} />
-        </div>
-      </div>
-      <div class="space-y-2">
-        <Label for="company-description">{i18n.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}
-          {i18n.t('common.save')}
-        </Button>
-      </div>
-    </Card.CardContent>
-  </Card.Card>
-
-  <!-- Members -->
-  <Card.Card class="border-border/60">
-    <Card.CardHeader>
-      <Card.CardTitle class="text-base">{i18n.t('profileSections.members')}</Card.CardTitle>
-    </Card.CardHeader>
-    <Card.CardContent class="p-0">
-      <Table.Root>
-        <Table.Header>
-          <Table.Row>
-            <Table.Head>{i18n.t('profile.name')}</Table.Head>
-            <Table.Head>{i18n.t('account.role')}</Table.Head>
-            <Table.Head>2FA</Table.Head>
-            <Table.Head class="text-right">{i18n.t('account.joined')}</Table.Head>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {#each members as member (member.email)}
-            <Table.Row>
-              <Table.Cell>
-                <div class="flex items-center gap-3">
-                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
-                    {member.name.split(' ').map(n => n[0]).join('').slice(0, 2)}
-                  </div>
-                  <div class="min-w-0">
-                    <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
-                    <p class="truncate text-xs text-muted-foreground">{member.email}</p>
-                  </div>
-                </div>
-              </Table.Cell>
-              <Table.Cell><Badge variant="secondary" class="text-[10px]">{member.role}</Badge></Table.Cell>
-              <Table.Cell>
-                {#if member.twoFactor}
-                  <ShieldCheck class="h-4 w-4 text-green-500" />
-                {:else}
-                  <ShieldOff class="h-4 w-4 text-muted-foreground/50" />
-                {/if}
-              </Table.Cell>
-              <Table.Cell class="text-right text-muted-foreground">{member.joined}</Table.Cell>
-            </Table.Row>
-          {/each}
-        </Table.Body>
-      </Table.Root>
-    </Card.CardContent>
-  </Card.Card>
-</div>
+  <section class="space-y-3"><h2 class="text-base font-semibold text-foreground">{i18n.t('profileSections.members')}</h2><MemberList {members} /></section>
+</ContentPageShell>