amliq-dashboard 2.0.0

package/src/pages/Signup.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { MemoryRouter } from 'react-router-dom'
+
+const mockSignup = vi.fn()
+const mockNavigate = vi.fn()
+
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('../context/AuthContext', () => ({
+  useAuth: () => ({ signup: mockSignup }),
+}))
+
+vi.mock('../components/auth/SignInButtons', () => ({
+  default: () => <div data-testid="sign-in-buttons" />,
+}))
+
+vi.mock('../components/auth/AuthDivider', () => ({
+  default: () => <div data-testid="auth-divider" />,
+}))
+
+import { Signup } from './Signup'
+
+const renderSignup = () =>
+  render(
+    <MemoryRouter>
+      <Signup />
+    </MemoryRouter>
+  )
+
+describe('Signup', () => {
+  beforeEach(() => { vi.clearAllMocks() })
+
+  it('renders all form fields', () => {
+    renderSignup()
+    expect(screen.getByLabelText('Organization name')).toBeInTheDocument()
+    expect(screen.getByLabelText('Email')).toBeInTheDocument()
+    expect(screen.getByLabelText('Password')).toBeInTheDocument()
+    expect(screen.getByLabelText('Country')).toBeInTheDocument()
+  })
+
+  it('renders submit button', () => {
+    renderSignup()
+    expect(screen.getByRole('button', { name: /create account/i })).toBeInTheDocument()
+  })
+
+  it('submits form data correctly', async () => {
+    mockSignup.mockResolvedValue(undefined)
+    renderSignup()
+    await userEvent.type(screen.getByLabelText('Organization name'), 'Acme')
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'password123')
+    await userEvent.click(screen.getByRole('button', { name: /create account/i }))
+    expect(mockSignup).toHaveBeenCalledWith('a@b.com', 'password123', 'Acme', 'US')
+  })
+
+  it('navigates to onboarding on success', async () => {
+    mockSignup.mockResolvedValue(undefined)
+    renderSignup()
+    await userEvent.type(screen.getByLabelText('Organization name'), 'Acme')
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'password123')
+    await userEvent.click(screen.getByRole('button', { name: /create account/i }))
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/onboarding'))
+  })
+
+  it('displays error on signup failure', async () => {
+    mockSignup.mockRejectedValue(new Error('Email taken'))
+    renderSignup()
+    await userEvent.type(screen.getByLabelText('Organization name'), 'Acme')
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'password123')
+    await userEvent.click(screen.getByRole('button', { name: /create account/i }))
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent('Email taken')
+    })
+  })
+
+  it('shows loading state during submission', async () => {
+    mockSignup.mockImplementation(() => new Promise(() => {}))
+    renderSignup()
+    await userEvent.type(screen.getByLabelText('Organization name'), 'Acme')
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'pass1234')
+    await userEvent.click(screen.getByRole('button', { name: /create account/i }))
+    expect(screen.getByRole('button', { name: /creating account/i })).toBeDisabled()
+  })
+
+  it('renders terms and privacy links', () => {
+    renderSignup()
+    expect(screen.getByText(/terms/i)).toBeInTheDocument()
+    expect(screen.getByText(/privacy policy/i)).toBeInTheDocument()
+  })
+})

package/src/pages/Signup.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useAuth } from '../context/AuthContext'
+import SignInButtons from '../components/auth/SignInButtons'
+import AuthDivider from '../components/auth/AuthDivider'
+import { COUNTRIES } from '../components/auth/countries'
+import { SignupLeftPanel } from '../components/auth/SignupLeftPanel'
+import { PasswordStrength } from '../components/auth/PasswordStrength'
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export function Signup() {
+  const navigate = useNavigate()
+  const { t } = useTranslation('auth')
+  const { signup } = useAuth()
+  const [form, setForm] = useState({ orgName: '', email: '', password: '', country: 'US' })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const set = (key: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
+    setForm((f) => ({ ...f, [key]: e.target.value }))
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!EMAIL_RE.test(form.email)) { setError('Please enter a valid email address.'); return }
+    if (form.password.length < 8) { setError('Password must be at least 8 characters.'); return }
+    setLoading(true); setError('')
+    try {
+      await signup(form.email, form.password, form.orgName, form.country)
+      navigate('/onboarding')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('signup.failed'))
+    } finally { setLoading(false) }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#1C1C1E] flex">
+      <SignupLeftPanel />
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-10">
+        <Link to="/" className="mb-8 lg:hidden">
+          <img src="/logo.svg" alt="AMLIQ" className="h-8 w-8" />
+        </Link>
+        <div className="w-full max-w-sm space-y-6">
+          <div className="text-center">
+            <h2 className="text-xl font-semibold text-white mb-2">{t('signup.title')}</h2>
+            <p className="text-sm text-apple-label-secondary">{t('signup.subtitle')}</p>
+          </div>
+          <SignInButtons action="sign_up" />
+          <AuthDivider />
+          {error && (
+            <div role="alert" className="p-3 bg-apple-red/10 border border-apple-red/20 rounded-lg">
+              <p className="text-apple-red text-sm">{error}</p>
+            </div>
+          )}
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <input type="text" value={form.orgName} onChange={set('orgName')} required
+              aria-label="Organization name" autoComplete="organization"
+              placeholder={t('signup.org_placeholder')} className="input-field w-full" />
+            <input type="email" value={form.email} onChange={set('email')} required
+              aria-label="Email" autoComplete="email" pattern="[^\s@]+@[^\s@]+\.[^\s@]+"
+              placeholder={t('signup.email_placeholder')} className="input-field w-full" />
+            <div>
+              <input type="password" value={form.password} onChange={set('password')} required
+                aria-label="Password" autoComplete="new-password" minLength={8}
+                placeholder={t('signup.password_placeholder')} className="input-field w-full" />
+              <PasswordStrength password={form.password} />
+            </div>
+            <select value={form.country} onChange={set('country')} aria-label="Country"
+              className="input-field w-full">
+              {COUNTRIES.map((c) => <option key={c.code} value={c.code}>{c.name}</option>)}
+            </select>
+            <button type="submit" disabled={loading} aria-busy={loading}
+              className="button-primary w-full text-center disabled:opacity-50">
+              {loading ? t('signup.submitting') : t('signup.submit')}
+            </button>
+          </form>
+          <p className="text-center text-xs text-apple-label-secondary leading-relaxed">
+            {t('signup.agree_prefix')}{' '}
+            <Link to="/terms" className="text-apple-blue hover:underline">{t('signup.terms_link')}</Link>{' '}
+            {t('signup.and')}{' '}
+            <Link to="/privacy" className="text-apple-blue hover:underline">{t('signup.privacy_link')}</Link>.
+          </p>
+          <p className="text-center text-xs text-apple-label-tertiary">
+            {t('signup.have_account')}{' '}
+            <Link to="/login" className="text-apple-blue hover:underline">{t('signup.sign_in_link')}</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/TaskHistory.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react'
+import { Clock, CheckCircle, XCircle, Loader, Bell } from 'lucide-react'
+import { PageHeader } from '../components/layout/PageHeader'
+import { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { Badge } from '../components/ui/Badge'
+import { api } from '../api/client'
+
+interface TaskEntry {
+  id: string
+  task_name: string
+  trigger: string
+  status: 'running' | 'success' | 'failed' | 'canceled'
+  started_at: string
+  duration_ms: number
+  output?: string
+  error?: string
+}
+
+interface AlertCfg {
+  email?: string
+  whatsapp?: string
+  slack_webhook?: string
+  enabled: boolean
+}
+
+export function TaskHistory() {
+  const [tasks, setTasks] = useState<TaskEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [alertCfg, setAlertCfg] = useState<AlertCfg>({ enabled: false })
+  const [showAlerts, setShowAlerts] = useState(false)
+
+  useEffect(() => {
+    api.get<{ tasks: TaskEntry[] }>('/tasks?limit=50')
+      .then(d => setTasks(d?.tasks ?? []))
+      .catch(() => {})
+      .finally(() => setLoading(false))
+    api.get<AlertCfg>('/tasks/alerts')
+      .then(d => { if (d) setAlertCfg(d) })
+      .catch(() => {})
+  }, [])
+
+  const saveAlertCfg = async () => {
+    await api.put('/tasks/alerts', alertCfg)
+    setShowAlerts(false)
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="Task History"
+        description="View scheduled task outcomes and set failure alerts"
+      />
+
+      <div className="flex justify-end mb-lg">
+        <button
+          onClick={() => setShowAlerts(!showAlerts)}
+          className="flex items-center gap-sm px-md py-sm rounded-apple-lg
+            bg-white/10 hover:bg-white/15 text-sm cursor-pointer"
+        >
+          <Bell className="w-4 h-4" />
+          Alert Settings
+        </button>
+      </div>
+
+      {showAlerts && (
+        <AlertSettings
+          cfg={alertCfg}
+          onChange={setAlertCfg}
+          onSave={saveAlertCfg}
+        />
+      )}
+
+      {/* Desktop */}
+      <div className="hidden md:block glass-panel rounded-apple-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-apple-label-secondary border-b border-white/10">
+              <th className="px-lg py-md">Task</th>
+              <th className="px-lg py-md">Status</th>
+              <th className="px-lg py-md">Duration</th>
+              <th className="px-lg py-md">Started</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tasks.map(t => (
+              <tr key={t.id} className="border-b border-white/5 hover:bg-white/5">
+                <td className="px-lg py-md">{t.task_name}</td>
+                <td className="px-lg py-md"><StatusIcon status={t.status} /></td>
+                <td className="px-lg py-md">{fmtMs(t.duration_ms)}</td>
+                <td className="px-lg py-md text-xs text-apple-label-secondary">
+                  {new Date(t.started_at).toLocaleString()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile */}
+      <div className="md:hidden space-y-sm">
+        {tasks.map(t => (
+          <div key={t.id} className="glass-panel rounded-apple-lg p-lg">
+            <div className="flex items-center justify-between mb-xs">
+              <span className="font-medium text-sm">{t.task_name}</span>
+              <StatusIcon status={t.status} />
+            </div>
+            <span className="sf-caption text-apple-label-secondary">
+              {fmtMs(t.duration_ms)} &middot; {new Date(t.started_at).toLocaleString()}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {tasks.length === 0 && (
+        <p className="text-center py-xl text-apple-label-tertiary sf-body">
+          No task history available
+        </p>
+      )}
+    </div>
+  )
+}
+
+function AlertSettings({ cfg, onChange, onSave }: {
+  cfg: AlertCfg
+  onChange: (c: AlertCfg) => void
+  onSave: () => void
+}) {
+  return (
+    <div className="glass-panel rounded-apple-lg p-lg mb-lg space-y-md">
+      <h3 className="sf-headline">Failure Alert Settings</h3>
+      <label className="flex items-center gap-sm cursor-pointer">
+        <input type="checkbox" checked={cfg.enabled}
+          onChange={e => onChange({ ...cfg, enabled: e.target.checked })}
+          className="accent-apple-blue" />
+        <span className="text-sm">Enable failure alerts</span>
+      </label>
+      <input type="email" placeholder="Email address"
+        value={cfg.email ?? ''} className="input-field w-full"
+        onChange={e => onChange({ ...cfg, email: e.target.value })} />
+      <input type="text" placeholder="WhatsApp number (international)"
+        value={cfg.whatsapp ?? ''} className="input-field w-full"
+        onChange={e => onChange({ ...cfg, whatsapp: e.target.value })} />
+      <input type="url" placeholder="Slack webhook URL"
+        value={cfg.slack_webhook ?? ''} className="input-field w-full"
+        onChange={e => onChange({ ...cfg, slack_webhook: e.target.value })} />
+      <button onClick={onSave}
+        className="px-lg py-sm rounded-apple-lg bg-apple-blue text-white
+          text-sm font-medium hover:bg-apple-blue/80 cursor-pointer">
+        Save Alert Settings
+      </button>
+    </div>
+  )
+}
+
+function StatusIcon({ status }: { status: string }) {
+  const m: Record<string, { c: 'green' | 'red' | 'blue' | 'gray'; I: typeof Clock }> = {
+    running: { c: 'blue', I: Loader },
+    success: { c: 'green', I: CheckCircle },
+    failed: { c: 'red', I: XCircle },
+    canceled: { c: 'gray', I: Clock },
+  }
+  const { c, I } = m[status] ?? m.canceled
+  return (
+    <Badge size="sm" color={c}>
+      <I className="w-3 h-3 mr-1 inline" />{status}
+    </Badge>
+  )
+}
+
+function fmtMs(ms: number) {
+  if (!ms) return '—'
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`
+}
+
+export default TaskHistory

package/src/pages/Team.test.tsx

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Team Page', () => {
+  it('should validate role options', () => {
+    const roles = ['admin', 'analyst', 'auditor', 'viewer']
+    expect(roles).toHaveLength(4)
+    expect(roles).toContain('admin')
+    expect(roles).toContain('viewer')
+  })
+
+  it('should require email for invite', () => {
+    const email = ''
+    expect(email.length).toBe(0)
+  })
+})

package/src/pages/Team.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageHeader } from '../components/layout/PageHeader'
+import { Card } from '../components/ui/Card'
+import { Button } from '../components/ui/Button'
+import { Badge } from '../components/ui/Badge'
+import { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { EmptyState } from '../components/ui/EmptyState'
+import { api } from '../api/client'
+
+interface Member {
+  ID: string
+  Email: string
+  Role: string
+  ActivatedAt: string
+}
+
+export function Team() {
+  const { t } = useTranslation('team')
+  const [members, setMembers] = useState<Member[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [email, setEmail] = useState('')
+  const [role, setRole] = useState('analyst')
+  const [inviting, setInviting] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const d = await api.get<{ members: Member[] }>('/team')
+      setMembers(d?.members ?? [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load team')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const invite = async () => {
+    if (!email.trim()) return
+    setInviting(true)
+    setError('')
+    try {
+      await api.post('/team/invite', { email, role })
+      setEmail('')
+      load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invite failed')
+    } finally {
+      setInviting(false)
+    }
+  }
+
+  const remove = async (id: string) => {
+    if (!confirm('Remove this team member?')) return
+    try {
+      await api.del(`/team/${id}`)
+      load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Remove failed')
+    }
+  }
+
+  const changeRole = async (id: string, newRole: string) => {
+    try {
+      await api.put(`/team/${id}/role`, { role: newRole })
+      load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Role change failed')
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title={t('title')} description="Manage your team members and roles" />
+      <Card className="mb-lg">
+        <div className="flex flex-col md:flex-row gap-sm">
+          <input placeholder={t('email_placeholder')} value={email}
+            aria-label={t('email_placeholder')}
+            onChange={e => setEmail(e.target.value)} className="input-field flex-1" />
+          <select value={role} onChange={e => setRole(e.target.value)}
+            aria-label={t('roles.label')} className="input-field">
+            {['admin', 'analyst', 'auditor', 'viewer'].map(r => (
+              <option key={r} value={r}>{t(`roles.${r}`)}</option>
+            ))}
+          </select>
+          <Button onClick={invite} disabled={inviting || !email.trim()}>
+            {inviting ? 'Inviting...' : t('invite')}
+          </Button>
+        </div>
+      </Card>
+
+      {error && <Card className="mb-lg"><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+      {loading && <LoadingSpinner />}
+
+      {!loading && members.length === 0 && (
+        <EmptyState title={t('no_members')} />
+      )}
+
+      {!loading && members.length > 0 && (
+        <Card>
+          {members.map(m => (
+            <TeamRow key={m.ID} member={m} onRemove={remove} onChangeRole={changeRole} />
+          ))}
+        </Card>
+      )}
+    </div>
+  )
+}
+
+function TeamRow({ member, onRemove, onChangeRole }: {
+  member: Member; onRemove: (id: string) => void; onChangeRole: (id: string, role: string) => void
+}) {
+  const roleColor = { admin: 'red', analyst: 'blue', auditor: 'orange', viewer: 'green' } as const
+  return (
+    <div className="px-lg py-md flex flex-col sm:flex-row sm:items-center justify-between border-b border-white/[0.04] last:border-0 gap-sm">
+      <div className="min-w-0">
+        <p className="sf-body truncate">{member.Email}</p>
+        <p className="sf-caption text-white/40">{new Date(member.ActivatedAt).toLocaleDateString()}</p>
+      </div>
+      <div className="flex items-center gap-md shrink-0">
+        <select value={member.Role} onChange={e => onChangeRole(member.ID, e.target.value)}
+          className="bg-transparent text-sm text-white/80 cursor-pointer">
+          {['admin', 'analyst', 'auditor', 'viewer'].map(r => (
+            <option key={r} value={r}>{r}</option>
+          ))}
+        </select>
+        <Badge color={roleColor[member.Role as keyof typeof roleColor] ?? 'blue'} size="sm">
+          {member.Role}
+        </Badge>
+        <button onClick={() => onRemove(member.ID)}
+          className="text-apple-red/60 hover:text-apple-red text-sm cursor-pointer">Remove</button>
+      </div>
+    </div>
+  )
+}
+
+export default Team

package/src/pages/TransactionMonitoring.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { TransactionMonitoring } from './TransactionMonitoring'
+
+beforeEach(() => {
+  global.fetch = vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ data: { alerts: [], summary: {} } }),
+    })
+  ) as any
+})
+
+describe('TransactionMonitoring', () => {
+  it('renders title', () => {
+    render(<TransactionMonitoring />)
+    expect(screen.getByText('Transaction Monitoring')).toBeInTheDocument()
+  })
+})

package/src/pages/TransactionMonitoring.tsx

@@ -0,0 +1,118 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle, ArrowUpRight, Shield, Clock } from 'lucide-react'
+import { PageHeader } from '../components/layout/PageHeader'
+import { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { Badge } from '../components/ui/Badge'
+import { api } from '../api/client'
+import { WebhookCTA } from '../components/transactions/WebhookCTA'
+
+interface TxnAlert {
+  id: string
+  transaction_id: string
+  alert_type: string
+  severity: number
+  description: string
+  created_at: string
+}
+
+const TYPE_ICONS: Record<string, typeof AlertTriangle> = {
+  high_value: ArrowUpRight, rapid_movement: Clock,
+  structuring: Shield, high_risk_country: AlertTriangle,
+  unusual_pattern: AlertTriangle,
+}
+
+export function TransactionMonitoring() {
+  const { t } = useTranslation('compliance')
+  const [alerts, setAlerts] = useState<TxnAlert[]>([])
+  const [summary, setSummary] = useState<Record<string, number>>({})
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    Promise.all([
+      api.get<{ alerts: TxnAlert[] }>('/transactions/alerts')
+        .then(d => setAlerts(d?.alerts ?? [])).catch(() => setAlerts([])),
+      api.get<Record<string, number>>('/transactions/alerts/summary')
+        .then(d => setSummary(d ?? {})).catch(() => setSummary({})),
+    ]).finally(() => setLoading(false))
+  }, [])
+
+  const typeLabels: Record<string, string> = {
+    high_value: t('transactions.high_value'),
+    rapid_movement: t('transactions.rapid_movement'),
+    structuring: t('transactions.structuring'),
+    high_risk_country: t('transactions.high_risk_country'),
+    unusual_pattern: t('transactions.unusual_pattern'),
+  }
+
+  if (loading) return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>
+
+  return (
+    <div>
+      <PageHeader title={t('transactions.title')} description="Real-time transaction alert monitoring" />
+      <SummaryCards summary={summary} typeLabels={typeLabels} />
+      <h2 className="sf-headline mb-md">{t('transactions.recent_alerts')}</h2>
+      <div className="space-y-sm">
+        {alerts.map(a => <AlertCard key={a.id} alert={a} typeLabels={typeLabels} />)}
+        {alerts.length === 0 && <WebhookCTA />}
+      </div>
+    </div>
+  )
+}
+
+function SummaryCards({ summary, typeLabels }: {
+  summary: Record<string, number>; typeLabels: Record<string, string>;
+}) {
+  const entries = Object.entries(summary)
+  if (entries.length === 0) return null
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-sm mb-xl">
+      {entries.map(([type_, count]) => {
+        const Icon = TYPE_ICONS[type_] ?? AlertTriangle
+        return (
+          <div key={type_} className="card-vibrancy p-md">
+            <div className="flex items-center gap-xs mb-xs">
+              <Icon className="w-4 h-4 text-apple-label-secondary flex-shrink-0" />
+              <p className="sf-caption text-apple-label-secondary truncate">{typeLabels[type_] || type_}</p>
+            </div>
+            <p className="text-2xl font-bold">{count}</p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function AlertCard({ alert, typeLabels }: { alert: TxnAlert; typeLabels: Record<string, string> }) {
+  const Icon = TYPE_ICONS[alert.alert_type] ?? AlertTriangle
+  const time = new Date(alert.created_at).toLocaleString()
+  return (
+    <div className="card-vibrancy p-md">
+      <div className="flex items-start gap-md">
+        <div className="flex-shrink-0 mt-0.5">
+          <Icon className="w-5 h-5 text-apple-orange" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="sf-body font-medium text-white mb-xs">{alert.description}</p>
+          <div className="flex flex-wrap items-center gap-sm">
+            <Badge size="sm" color="orange">{typeLabels[alert.alert_type] ?? alert.alert_type}</Badge>
+            <span className="sf-caption text-apple-label-tertiary">TXN {alert.transaction_id}</span>
+            <span className="sf-caption text-apple-label-tertiary hidden sm:inline">{time}</span>
+          </div>
+        </div>
+        <SeverityBadge severity={alert.severity} />
+      </div>
+    </div>
+  )
+}
+
+function SeverityBadge({ severity }: { severity: number }) {
+  const color = severity >= 8 ? 'bg-apple-red/20 text-apple-red'
+    : severity >= 5 ? 'bg-apple-orange/20 text-apple-orange'
+    : 'bg-apple-yellow/20 text-apple-yellow'
+  return (
+    <span className={`flex-shrink-0 px-sm py-xs text-xs font-semibold rounded-full ${color}`}>
+      {severity}/10
+    </span>
+  )
+}