amliq-dashboard 2.0.0

package/src/pages/CaseDetail.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { api } from '../api/client'
+import { CaseTimeline } from '../components/compliance/CaseTimeline'
+import { CaseActions } from '../components/compliance/CaseActions'
+
+interface CaseData {
+  id: string
+  entity_name: string
+  matched_name: string
+  status: string
+  priority: string
+  assigned_to: string
+  confidence: number
+  resolution: string
+}
+
+interface Comment {
+  id: string
+  content: string
+  created_at: string
+}
+
+export function CaseDetail() {
+  const { t } = useTranslation('compliance')
+  const { id } = useParams<{ id: string }>()
+  const [caseData, setCaseData] = useState<CaseData | null>(null)
+  const [comments, setComments] = useState<Comment[]>([])
+  const [validTransitions, setValidTransitions] = useState<string[]>([])
+
+  const fetchCase = () => {
+    api.get<{ case: CaseData; comments: Comment[] }>(`/cases/${id}`)
+      .then(d => {
+        setCaseData(d?.case ?? null)
+        setComments(d?.comments ?? [])
+      })
+      .catch(() => setCaseData(null))
+    api.get<{ valid_transitions: string[] }>(`/cases/${id}/timeline`)
+      .then(d => setValidTransitions(d?.valid_transitions ?? []))
+      .catch(() => {})
+  }
+
+  useEffect(() => { fetchCase() }, [id])
+
+  if (!caseData) return <div className="p-lg" role="status" aria-live="polite">Loading...</div>
+
+  return (
+    <div className="px-md py-lg sm:p-8 max-w-4xl mx-auto">
+      <h1 className="text-xl sm:text-2xl font-semibold mb-2">{caseData.entity_name}</h1>
+      <p className="text-apple-label-secondary mb-6 text-sm sm:text-base break-words">{t('case_detail.match')} {caseData.matched_name}</p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+        <InfoField label={t('case_detail.status')} value={caseData.status} />
+        <InfoField label={t('case_detail.priority')} value={caseData.priority} />
+        <InfoField label={t('case_detail.confidence')} value={`${(caseData.confidence * 100).toFixed(1)}%`} />
+        <InfoField label={t('case_detail.assigned_to')} value={caseData.assigned_to || t('case_detail.unassigned')} />
+      </div>
+      <CaseActions caseId={id!} status={caseData.status}
+        validTransitions={validTransitions} onAction={fetchCase} />
+      <CaseTimeline caseId={id!} comments={comments} />
+    </div>
+  )
+}
+
+function InfoField({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <p className="text-xs text-apple-label-secondary">{label}</p>
+      <p className="font-medium">{value}</p>
+    </div>
+  )
+}

package/src/pages/CaseManagement.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { CaseManagement } from './CaseManagement'
+
+beforeEach(() => {
+  global.fetch = vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ data: { cases: [] } }),
+    })
+  ) as any
+})
+
+describe('CaseManagement', () => {
+  it('renders title', () => {
+    render(<CaseManagement />)
+    expect(screen.getByText('Case Management')).toBeInTheDocument()
+  })
+
+  it('renders filter buttons', () => {
+    render(<CaseManagement />)
+    expect(screen.getByText('All')).toBeInTheDocument()
+    expect(screen.getByText('open')).toBeInTheDocument()
+    expect(screen.getByText('escalated')).toBeInTheDocument()
+  })
+
+  it('shows empty state when no cases', async () => {
+    render(<CaseManagement />)
+    const empty = await screen.findByText('No cases found')
+    expect(empty).toBeInTheDocument()
+  })
+})

package/src/pages/CaseManagement.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageHeader } from '../components/layout/PageHeader'
+import { Card } from '../components/ui/Card'
+import { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { EmptyState } from '../components/ui/EmptyState'
+import { api } from '../api/client'
+
+interface ComplianceCase {
+  id: string
+  entity_name: string
+  matched_name: string
+  status: string
+  priority: string
+  assigned_to: string
+  created_at: string
+}
+
+export function CaseManagement() {
+  const { t } = useTranslation('compliance')
+  const [cases, setCases] = useState<ComplianceCase[]>([])
+  const [filter, setFilter] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    setLoading(true)
+    setError('')
+    const ep = filter ? `/cases?status=${filter}` : '/cases'
+    api.get<{ cases: ComplianceCase[] }>(ep)
+      .then(d => setCases(d?.cases ?? []))
+      .catch(err => setError(err instanceof Error ? err.message : 'Failed to load cases'))
+      .finally(() => setLoading(false))
+  }, [filter])
+
+  const statuses = ['', 'open', 'in_review', 'escalated', 'resolved']
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <PageHeader title={t('cases.title')} description="Manage compliance investigation cases" />
+      <div className="flex gap-sm mb-lg flex-wrap">
+        {statuses.map(s => (
+          <button key={s} onClick={() => setFilter(s)} aria-pressed={filter === s}
+            className={`px-lg py-xs rounded-full text-sm cursor-pointer transition-colors ${
+              filter === s ? 'bg-apple-blue text-white' : 'bg-white/[0.04] text-apple-label-secondary hover:bg-white/[0.08]'
+            }`}>
+            {s ? t(`cases.${s}`) : t('cases.all')}
+          </button>
+        ))}
+      </div>
+
+      {error && <Card className="mb-lg"><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+      {loading && <LoadingSpinner />}
+      {!loading && cases.length === 0 && <EmptyState title={t('cases.no_cases')} />}
+
+      {!loading && cases.length > 0 && (
+        <div className="space-y-sm">
+          {cases.map(c => <CaseCard key={c.id} caseItem={c} t={t} />)}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function CaseCard({ caseItem, t }: { caseItem: ComplianceCase; t: (k: string) => string }) {
+  const priorityColor: Record<string, string> = {
+    critical: 'bg-apple-red/20 text-apple-red',
+    high: 'bg-apple-orange/20 text-apple-orange',
+    medium: 'bg-apple-yellow/20 text-apple-yellow',
+    low: 'bg-apple-green/20 text-apple-green',
+  }
+  return (
+    <a href={`/compliance/cases/${caseItem.id}`}
+      className="block card-vibrancy p-lg hover:bg-white/[0.04] cursor-pointer transition-colors rounded-apple-lg">
+      <div className="flex justify-between items-start">
+        <div>
+          <p className="sf-headline">{caseItem.entity_name}</p>
+          <p className="sf-caption text-white/50">{t('cases.matched')} {caseItem.matched_name}</p>
+          <p className="sf-caption text-white/30 mt-xs">{new Date(caseItem.created_at).toLocaleDateString()}</p>
+        </div>
+        <div className="flex gap-sm">
+          <span className={`px-2 py-0.5 text-xs rounded-full ${priorityColor[caseItem.priority] || 'bg-white/5'}`}>
+            {caseItem.priority}
+          </span>
+          <span className="px-2 py-0.5 text-xs rounded-full bg-white/[0.06] text-white/60">
+            {caseItem.status}
+          </span>
+        </div>
+      </div>
+    </a>
+  )
+}

package/src/pages/Configuration.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { Configuration } from './Configuration'
+
+const mockConfig = {
+  default_threshold: 0.7,
+  auto_dismiss_below: 0.3,
+  auto_escalate_above: 0.9,
+  enabled_lists: [
+    { list_id: 'OFAC_SDN', sync_schedule: 'daily' },
+  ],
+}
+
+const mockUpdateConfig = vi.fn().mockResolvedValue(mockConfig)
+
+vi.mock('../hooks/useConfig', () => ({
+  useConfig: () => ({
+    config: mockConfig,
+    loading: false,
+    error: null,
+    updateConfig: mockUpdateConfig,
+    refetch: vi.fn(),
+  }),
+}))
+
+describe('Configuration', () => {
+  beforeEach(() => { mockUpdateConfig.mockClear() })
+
+  it('renders page title', () => {
+    render(<Configuration />)
+    expect(screen.getByText('Configuration')).toBeInTheDocument()
+  })
+
+  it('renders page description', () => {
+    render(<Configuration />)
+    expect(screen.getByText(/screening parameters/i)).toBeInTheDocument()
+  })
+
+  it('renders thresholds card', () => {
+    render(<Configuration />)
+    expect(screen.getByText('Thresholds')).toBeInTheDocument()
+  })
+
+  it('renders threshold sliders', () => {
+    const { container } = render(<Configuration />)
+    const sliders = container.querySelectorAll('input[type="range"]')
+    expect(sliders.length).toBe(3)
+  })
+
+  it('displays initial threshold percentages', () => {
+    render(<Configuration />)
+    expect(screen.getByText(/70%/)).toBeInTheDocument()
+    expect(screen.getByText(/30%/)).toBeInTheDocument()
+    expect(screen.getByText(/90%/)).toBeInTheDocument()
+  })
+
+  it('renders lists section', () => {
+    render(<Configuration />)
+    expect(screen.getByText(/Lists/)).toBeInTheDocument()
+    expect(screen.getByText('OFAC_SDN')).toBeInTheDocument()
+  })
+
+  it('renders save button', () => {
+    render(<Configuration />)
+    expect(
+      screen.getByRole('button', { name: /save changes/i }),
+    ).toBeInTheDocument()
+  })
+
+  it('calls updateConfig on save', async () => {
+    render(<Configuration />)
+    await userEvent.click(
+      screen.getByRole('button', { name: /save changes/i }),
+    )
+    await waitFor(() => {
+      expect(mockUpdateConfig).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('shows threshold labels', () => {
+    render(<Configuration />)
+    expect(screen.getByText(/Default Match Threshold/)).toBeInTheDocument()
+    expect(screen.getByText(/Auto-Dismiss Below/)).toBeInTheDocument()
+    expect(screen.getByText(/Auto-Escalate Above/)).toBeInTheDocument()
+  })
+
+  it('allows threshold adjustment via slider', async () => {
+    const { container } = render(<Configuration />)
+    const slider = container.querySelector(
+      'input[type="range"]',
+    ) as HTMLInputElement
+    expect(slider).toBeTruthy()
+    expect(slider.value).toBe('70')
+  })
+})

package/src/pages/Configuration.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Shield, Plus, Check, Clock } from 'lucide-react';
+import { PageHeader } from '../components/layout/PageHeader';
+import { Button } from '../components/ui/Button';
+import { useConfig } from '../hooks/useConfig';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import type { ListConfigItem } from '../api/config';
+
+export function Configuration() {
+  const { t } = useTranslation('config');
+  const { config, loading, error, updateConfig } = useConfig();
+  const [saving, setSaving] = useState(false);
+  const [threshold, setThreshold] = useState<number | null>(null);
+  const [dismissBelow, setDismissBelow] = useState<number | null>(null);
+  const [escalateAbove, setEscalateAbove] = useState<number | null>(null);
+
+  if (loading || !config) {
+    return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>;
+  }
+
+  const th = threshold ?? config.default_threshold * 100;
+  const d = dismissBelow ?? config.auto_dismiss_below * 100;
+  const ea = escalateAbove ?? config.auto_escalate_above * 100;
+  const lists = config.enabled_lists ?? [];
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await updateConfig({ default_threshold: th / 100, auto_dismiss_below: d / 100, auto_escalate_above: ea / 100 });
+    } finally { setSaving(false); }
+  };
+
+  return (
+    <div className="space-y-lg">
+      <PageHeader title={t('title')} description={t('description')} />
+      {error && <p className="text-apple-red sf-caption mb-md" role="alert">{error.message}</p>}
+      <div className="max-w-2xl space-y-lg">
+        <ThresholdsPanel th={th} d={d} ea={ea} t={t}
+          onThreshold={setThreshold} onDismiss={setDismissBelow} onEscalate={setEscalateAbove} />
+        <ListsPanel lists={lists} t={t} />
+        <Button variant="primary" onClick={handleSave} disabled={saving}>
+          {saving ? t('saving') : t('save')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ThresholdsPanel({ th, d, ea, t, onThreshold, onDismiss, onEscalate }: {
+  th: number; d: number; ea: number; t: (k: string) => string;
+  onThreshold: (v: number) => void; onDismiss: (v: number) => void; onEscalate: (v: number) => void;
+}) {
+  return (
+    <div className="glass-panel rounded-apple-lg p-xl">
+      <h3 className="sf-headline mb-md gradient-text">{t('thresholds.title')}</h3>
+      <SliderField label={`${t('thresholds.default')} ${th}%`} value={th} onChange={onThreshold} color="accent-apple-blue" />
+      <SliderField label={`${t('thresholds.auto_dismiss')} ${d}%`} value={d} onChange={onDismiss} color="accent-apple-green" />
+      <SliderField label={`${t('thresholds.auto_escalate')} ${ea}%`} value={ea} onChange={onEscalate} color="accent-apple-red" />
+    </div>
+  );
+}
+
+function SliderField({ label, value, onChange, color }: {
+  label: string; value: number; onChange: (v: number) => void; color: string;
+}) {
+  return (
+    <label className="block mb-md">
+      <span className="sf-caption">{label}</span>
+      <input type="range" min="0" max="100" value={value} aria-valuetext={`${value}%`}
+        aria-label={label} onChange={(e) => onChange(Number(e.target.value))}
+        className={`w-full ${color}`} />
+      <div className="flex justify-between text-xs text-zinc-500 mt-1">
+        <span>0%</span><span>100%</span>
+      </div>
+    </label>
+  );
+}
+
+function ListsPanel({ lists, t }: { lists: ListConfigItem[]; t: (k: string) => string }) {
+  return (
+    <div className="glass-panel rounded-apple-lg p-xl">
+      <div className="flex items-center justify-between mb-md">
+        <h3 className="sf-headline gradient-text">{t('lists.title')} ({lists.length})</h3>
+        <Link to="/lists/marketplace"
+          className="flex items-center gap-xs text-apple-blue text-[13px] font-semibold hover:underline">
+          <Plus className="w-4 h-4" /> Add Lists
+        </Link>
+      </div>
+      {lists.length === 0 ? <EmptyLists /> : lists.map((l) => <ListRow key={l.list_id} list={l} />)}
+    </div>
+  );
+}
+
+function EmptyLists() {
+  return (
+    <div className="text-center py-xl">
+      <Shield className="w-8 h-8 text-apple-label-tertiary mx-auto mb-sm" />
+      <p className="sf-body text-apple-label-secondary mb-sm">No lists enabled yet</p>
+      <Link to="/lists/marketplace" className="text-apple-blue text-[13px] font-semibold hover:underline">
+        Browse Marketplace
+      </Link>
+    </div>
+  );
+}
+
+function ListRow({ list }: { list: ListConfigItem }) {
+  return (
+    <div className="flex items-center justify-between py-sm border-b border-white/5 last:border-0">
+      <div className="flex items-center gap-sm">
+        <Shield className="w-4 h-4 text-apple-blue" />
+        <span className="sf-body">{list.list_id}</span>
+      </div>
+      <div className="flex items-center gap-md">
+        {list.sync_enabled && <Check className="w-3 h-3 text-apple-green" />}
+        <span className="sf-caption flex items-center gap-xs">
+          <Clock className="w-3 h-3" /> {list.sync_schedule || 'Manual'}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/pages/CryptoScreening.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react'
+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 { api } from '../api/client'
+
+interface CryptoHit {
+  address: string; chain: string; entity_id: string;
+  list_id: string; source: string;
+}
+interface CryptoResult {
+  decision: string; wallet_address: string; chain: string;
+  hits: CryptoHit[]; risk_flags: string[]; processing_us: number;
+}
+
+export function CryptoScreening() {
+  const [address, setAddress] = useState('')
+  const [chain, setChain] = useState('ETH')
+  const [result, setResult] = useState<CryptoResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const screen = async () => {
+    if (!address.trim()) return
+    setLoading(true); setError(''); setResult(null)
+    try {
+      const d = await api.post<CryptoResult>('/crypto/screen', {
+        wallet_address: address.trim(), chain,
+      })
+      setResult(d)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Screening failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="Crypto Screening"
+        description="Screen wallet addresses against 13K+ sanctioned wallets" />
+      <Card className="mb-lg">
+        <div className="flex flex-col sm:flex-row gap-md mb-lg">
+          <input value={address} onChange={e => setAddress(e.target.value)}
+            placeholder="0x7d84d78bb9b6044a45fa08b7fe109f2c8648ab4e"
+            className="input-field flex-1 font-mono text-sm" />
+          <select value={chain} onChange={e => setChain(e.target.value)} className="input-field w-24">
+            <option value="ETH">ETH</option>
+            <option value="BTC">BTC</option>
+            <option value="TRX">TRX</option>
+          </select>
+        </div>
+        <Button onClick={screen} disabled={loading || !address.trim()} className="w-full">
+          {loading ? 'Scanning...' : 'Screen Wallet'}
+        </Button>
+      </Card>
+
+      {loading && <LoadingSpinner />}
+      {error && <Card><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+
+      {result && (
+        <Card>
+          <div className="flex items-center justify-between mb-lg">
+            <div className="flex items-center gap-md">
+              <span className={`text-2xl font-bold ${result.decision === 'CLEAR' ? 'text-apple-green' : 'text-apple-red'}`}>
+                {result.decision}
+              </span>
+              <Badge color={result.decision === 'CLEAR' ? 'green' : 'red'} size="sm">{result.chain}</Badge>
+            </div>
+            <span className="sf-caption text-white/40">{result.processing_us ?? 0}μs</span>
+          </div>
+          <code className="text-sm text-white/60 font-mono block mb-lg break-all">{result.wallet_address}</code>
+
+          {(result.risk_flags ?? []).length > 0 && (
+            <div className="flex flex-wrap gap-sm mb-lg">
+              {(result.risk_flags ?? []).map(f => <Badge key={f} color="red" size="sm">{f}</Badge>)}
+            </div>
+          )}
+
+          {(result.hits ?? []).length > 0 && (
+            <div>
+              <p className="sf-caption text-white/50 mb-sm">Sanctions Matches</p>
+              {(result.hits ?? []).map((h, i) => (
+                <div key={i} className="p-md bg-apple-red/5 border border-apple-red/10 rounded-apple-md mb-sm">
+                  <code className="text-sm text-white/80 font-mono break-all">{h.address}</code>
+                  <div className="flex gap-sm mt-xs">
+                    <Badge color="red" size="sm">{h.list_id}</Badge>
+                    <Badge color="blue" size="sm">{h.chain}</Badge>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {(result.hits ?? []).length === 0 && result.decision === 'CLEAR' && (
+            <div className="text-center py-lg">
+              <span className="text-3xl">✓</span>
+              <p className="sf-headline text-apple-green mt-sm">No sanctions matches</p>
+            </div>
+          )}
+        </Card>
+      )}
+    </div>
+  )
+}
+
+export default CryptoScreening

package/src/pages/Dashboard.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { Dashboard } from './Dashboard'
+
+vi.mock('../context/AuthContext', () => ({
+  useAuth: () => ({
+    user: { id: '1', email: 'john@example.com', role: 'admin', tenant_id: 't1' },
+    loading: false,
+    isAuthenticated: true,
+  }),
+}))
+
+vi.mock('../hooks/useAnalytics', () => ({
+  useAnalytics: vi.fn(() => ({
+    analytics: {
+      totalAlerts: 42,
+      clearedAlerts: 28,
+      escalatedAlerts: 5,
+      avgResolutionTime: 2.5,
+      screeningVolume: [],
+      dispositionBreakdown: [],
+      riskDistribution: [],
+      topEntities: [
+        { name: 'Entity 1', alerts: 10, risk: 'High' },
+        { name: 'Entity 2', alerts: 8, risk: 'Medium' },
+      ],
+    },
+    loading: false,
+    error: null,
+  })),
+}))
+
+describe('Dashboard', () => {
+  it('renders page title', () => {
+    render(<Dashboard />)
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
+  it('renders stat cards', () => {
+    render(<Dashboard />)
+    expect(screen.getByText('Total Alerts')).toBeInTheDocument()
+    expect(screen.getByText('Cleared Today')).toBeInTheDocument()
+    expect(screen.getByText('Escalated')).toBeInTheDocument()
+  })
+
+  it('displays stat card values', () => {
+    render(<Dashboard />)
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('28')).toBeInTheDocument()
+  })
+})

package/src/pages/Dashboard.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StatCard } from '../components/data/StatCard';
+import { AreaChartComponent } from '../components/charts/AreaChart';
+import { DonutChart } from '../components/charts/DonutChart';
+import { BarChartComponent } from '../components/charts/BarChart';
+import { useAnalytics } from '../hooks/useAnalytics';
+import { ComplianceMetrics } from '../components/data/ComplianceMetrics';
+import { DashboardGreeting } from '../components/dashboard/DashboardGreeting';
+import { DashboardSkeleton } from '../components/dashboard/DashboardSkeleton';
+import { TopEntitiesTable } from '../components/dashboard/TopEntitiesTable';
+import { ActivityFeed } from '../components/dashboard/ActivityFeed';
+import { QuickActions } from '../components/dashboard/QuickActions';
+
+export function Dashboard() {
+  const { t } = useTranslation('dashboard');
+  const { analytics, loading } = useAnalytics();
+
+  if (loading) return <DashboardSkeleton />;
+
+  const d = {
+    totalAlerts: analytics?.totalAlerts ?? 0,
+    clearedAlerts: analytics?.clearedAlerts ?? 0,
+    escalatedAlerts: analytics?.escalatedAlerts ?? 0,
+    avgResolutionTime: analytics?.avgResolutionTime ?? 0,
+    screeningVolume: analytics?.screeningVolume ?? [],
+    dispositionBreakdown: analytics?.dispositionBreakdown ?? [],
+    riskDistribution: analytics?.riskDistribution ?? [],
+    topEntities: analytics?.topEntities ?? [],
+  };
+
+  return (
+    <div className="space-y-xxl">
+      <DashboardGreeting />
+      <QuickActions />
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-lg">
+        <StatCard title={t('total_alerts')} value={d.totalAlerts} trend={12} color="blue" />
+        <StatCard title={t('cleared_today')} value={d.clearedAlerts} trend={8} color="green" />
+        <StatCard title={t('escalated')} value={d.escalatedAlerts} trend={-3} color="red" />
+        <StatCard title={t('avg_resolution')} value={`${d.avgResolutionTime}h`} description={t('time_in_hours')} color="orange" />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-lg">
+        <div className="lg:col-span-2 space-y-lg">
+          <div className="glass-panel rounded-apple-lg p-md glow-blue">
+            <AreaChartComponent title={t('screening_volume')} data={d.screeningVolume} />
+          </div>
+          <div className="glass-panel rounded-apple-lg p-md">
+            <DonutChart title={t('disposition_breakdown')} data={d.dispositionBreakdown} />
+          </div>
+        </div>
+        <ActivityFeed />
+      </div>
+
+      <ComplianceMetrics />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
+        <div className="glass-panel rounded-apple-lg p-md">
+          <BarChartComponent title={t('risk_distribution')} data={d.riskDistribution} />
+        </div>
+        <TopEntitiesTable entities={d.topEntities} />
+      </div>
+    </div>
+  );
+}

package/src/pages/EDDWorkflow.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { EDDWorkflow } from './EDDWorkflow'
+
+vi.mock('../api/client', () => ({
+  api: {
+    get: vi.fn(() => Promise.resolve({
+      id: 'edd_1', entity_name: 'John Doe', status: 'in_progress',
+      risk_level: 'high', notes: '',
+      checklist: { identity_verified: true, source_of_funds: false },
+    })),
+  },
+}))
+
+describe('EDDWorkflow', () => {
+  it('renders title after load', async () => {
+    render(
+      <MemoryRouter initialEntries={['/compliance/edd/edd_1']}>
+        <Routes>
+          <Route path="/compliance/edd/:id" element={<EDDWorkflow />} />
+        </Routes>
+      </MemoryRouter>
+    )
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+    })
+  })
+})