amliq-dashboard 2.0.0

package/src/pages/EDDWorkflow.tsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { api } from '../api/client'
+
+interface EDDReport {
+  id: string
+  entity_name: string
+  status: string
+  checklist: Record<string, boolean>
+  risk_level: string
+  notes: string
+}
+
+const checkKeys: Record<string, string> = {
+  identity_verified: 'edd.identity',
+  source_of_funds: 'edd.source_of_funds',
+  source_of_wealth: 'edd.source_of_wealth',
+  pep_screening: 'edd.pep_screening',
+  adverse_media_check: 'edd.adverse_media',
+  sanctions_screening: 'edd.sanctions',
+  ubo_verification: 'edd.ubo_verification',
+  country_risk_assessment: 'edd.country_risk',
+}
+
+export function EDDWorkflow() {
+  const { t } = useTranslation('compliance')
+  const { id } = useParams<{ id: string }>()
+  const [report, setReport] = useState<EDDReport | null>(null)
+
+  useEffect(() => {
+    if (!id) return
+    api.get<EDDReport>(`/edd/${id}`)
+      .then(d => setReport(d ?? null))
+      .catch(() => setReport(null))
+  }, [id])
+
+  if (!report) return <div className="p-lg" role="status" aria-live="polite">Loading...</div>
+
+  const completed = Object.values(report.checklist).filter(Boolean).length
+  const total = Object.keys(report.checklist).length
+  const progress = total > 0 ? (completed / total) * 100 : 0
+
+  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">{t('edd.title')}</h1>
+      <p className="text-apple-label-secondary mb-6">{report.entity_name}</p>
+      <div className="card-vibrancy p-6">
+        <div className="flex justify-between mb-2 text-sm">
+          <span>{t('edd.progress')}</span>
+          <span>{completed}/{total} {t('edd.checks')}</span>
+        </div>
+        <div className="w-full bg-apple-bg-tertiary rounded-full h-2 mb-6">
+          <div className="bg-apple-green h-2 rounded-full"
+            style={{ width: `${progress}%` }} />
+        </div>
+        <div className="space-y-3">
+          {Object.entries(report.checklist).map(([key, done]) => (
+            <div key={key} className="flex items-center gap-3">
+              <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
+                done ? 'bg-apple-green border-apple-green' : 'border-apple-label-tertiary'}`}>
+                {done && <span className="text-white text-xs">&#10003;</span>}
+              </div>
+              <span className={done ? 'text-apple-label-tertiary line-through' : ''}>
+                {checkKeys[key] ? t(checkKeys[key]) : key}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/ForgotPassword.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { MemoryRouter } from 'react-router-dom'
+import ForgotPassword from './ForgotPassword'
+
+const renderForgot = () =>
+  render(
+    <MemoryRouter>
+      <ForgotPassword />
+    </MemoryRouter>
+  )
+
+describe('ForgotPassword', () => {
+  it('renders title and description', () => {
+    renderForgot()
+    expect(screen.getByText(/reset your password/i)).toBeInTheDocument()
+  })
+
+  it('renders email input', () => {
+    renderForgot()
+    expect(screen.getByLabelText(/email address/i)).toBeInTheDocument()
+  })
+
+  it('renders submit button', () => {
+    renderForgot()
+    expect(screen.getByRole('button', { name: /send reset link/i })).toBeInTheDocument()
+  })
+
+  it('renders back to login link', () => {
+    renderForgot()
+    expect(screen.getByText(/back to login/i)).toBeInTheDocument()
+  })
+
+  it('shows success message after submission', async () => {
+    renderForgot()
+    await userEvent.type(screen.getByLabelText(/email address/i), 'user@test.com')
+    await userEvent.click(screen.getByRole('button', { name: /send reset link/i }))
+    expect(screen.getByText(/check your inbox/i)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /send reset link/i })).not.toBeInTheDocument()
+  })
+
+  it('hides form after submission', async () => {
+    renderForgot()
+    await userEvent.type(screen.getByLabelText(/email address/i), 'user@test.com')
+    await userEvent.click(screen.getByRole('button', { name: /send reset link/i }))
+    expect(screen.queryByLabelText(/email address/i)).not.toBeInTheDocument()
+  })
+})

package/src/pages/ForgotPassword.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { ArrowLeft, Mail } from 'lucide-react'
+import { api } from '../api/client'
+
+export function ForgotPassword() {
+  const { t } = useTranslation('auth')
+  const [email, setEmail] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+    try {
+      await api.post('/auth/forgot-password', { email })
+      setSubmitted(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-apple-bg-primary flex items-center justify-center px-4">
+      <div className="w-full max-w-sm">
+        <Link to="/login"
+          className="inline-flex items-center gap-1.5 text-sm text-apple-label-secondary hover:text-white mb-8">
+          <ArrowLeft size={16} />
+          {t('forgot.back_to_login')}
+        </Link>
+
+        <h1 className="text-2xl font-bold text-white mb-2">{t('forgot.title')}</h1>
+        <p className="text-sm text-apple-label-secondary mb-8">{t('forgot.description')}</p>
+
+        {submitted ? (
+          <div className="rounded-apple-lg bg-green-500/10 border border-green-500/30 p-6 text-center">
+            <Mail size={32} className="text-green-400 mx-auto mb-3" />
+            <p className="text-white font-medium mb-1">{t('forgot.success_title')}</p>
+            <p className="text-sm text-apple-label-secondary">
+              {t('forgot.success_message', { email })}
+            </p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <input type="email" required value={email}
+              onChange={e => setEmail(e.target.value)}
+              aria-label={t('forgot.email_placeholder')}
+              placeholder={t('forgot.email_placeholder')}
+              className="input-field w-full" autoComplete="email" autoFocus />
+            {error && <p role="alert" className="text-apple-red text-sm">{error}</p>}
+            <button type="submit" disabled={loading}
+              className="w-full py-2.5 rounded-apple-md bg-apple-blue text-white font-medium hover:bg-apple-blue/90 transition-colors cursor-pointer disabled:opacity-50">
+              {loading ? 'Sending...' : t('forgot.submit')}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ForgotPassword

package/src/pages/ListsMarketplace.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Globe } from 'lucide-react';
+import { SearchField } from '../components/ui/SearchField';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import { ListMarketplaceCard } from '../components/lists/ListMarketplaceCard';
+import { api } from '../api/client';
+
+interface MarketplaceList {
+  id: string; name: string; description: string; region: string;
+  category: string; source_url: string; entity_count: number;
+  update_frequency: string; last_synced: string; enabled: boolean; tier: string;
+}
+
+const REGIONS = ['All', 'Global', 'Americas', 'Europe', 'Middle East', 'Asia-Pacific', 'Africa'];
+const CATEGORIES = ['All', 'sanctions', 'pep', 'law_enforcement', 'regulatory'];
+
+const categoryLabel: Record<string, string> = {
+  All: 'All', sanctions: 'Sanctions', pep: 'PEP',
+  law_enforcement: 'Law Enforcement', regulatory: 'Regulatory',
+};
+
+export function ListsMarketplace() {
+  const [lists, setLists] = useState<MarketplaceList[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [region, setRegion] = useState('All');
+  const [category, setCategory] = useState('All');
+
+  const fetchLists = useCallback(async () => {
+    try {
+      const data = await api.get<{ lists: MarketplaceList[] }>('/lists/marketplace');
+      setLists(data.lists);
+    } finally { setLoading(false); }
+  }, []);
+
+  useEffect(() => { fetchLists(); }, [fetchLists]);
+
+  const toggle = async (id: string, enabled: boolean) => {
+    const action = enabled ? 'disable' : 'enable';
+    await api.post(`/lists/marketplace/${id}/${action}`, {});
+    setLists(prev => prev.map(l => l.id === id ? { ...l, enabled: !enabled } : l));
+  };
+
+  const filtered = lists.filter(l => {
+    const q = search.toLowerCase();
+    const matchSearch = (l.name ?? '').toLowerCase().includes(q) || (l.description ?? '').toLowerCase().includes(q);
+    const matchRegion = region === 'All' || l.region === region;
+    const matchCategory = category === 'All' || l.category === category;
+    return matchSearch && matchRegion && matchCategory;
+  });
+
+  if (loading) return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>;
+
+  const totalEntities = lists.reduce((sum, l) => sum + l.entity_count, 0);
+  const enabledCount = lists.filter(l => l.enabled).length;
+
+  return (
+    <div>
+      <MarketplaceHero total={lists.length} enabled={enabledCount} entities={totalEntities} />
+      <FilterBar items={REGIONS} active={region} onSelect={setRegion} label="Region" />
+      <FilterBar items={CATEGORIES} active={category} onSelect={setCategory} label="Category" labelMap={categoryLabel} />
+      <div className="mb-lg"><SearchField placeholder="Search lists..." value={search} onChange={setSearch} /></div>
+      <p className="sf-caption mb-md">{filtered.length} lists available</p>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
+        {filtered.map(l => (
+          <ListMarketplaceCard key={l.id} list={l} onToggle={() => toggle(l.id, l.enabled)} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MarketplaceHero({ total, enabled, entities }: { total: number; enabled: number; entities: number }) {
+  return (
+    <div className="card-vibrancy p-xxl mb-xxl text-center bg-gradient-to-br from-apple-blue/10 to-transparent">
+      <Globe className="w-10 h-10 text-apple-blue mx-auto mb-md" />
+      <h1 className="text-3xl font-bold tracking-tight text-white mb-sm">
+        {total} Global Sanctions Lists
+      </h1>
+      <p className="sf-caption max-w-lg mx-auto">
+        {entities.toLocaleString()} entities across sanctions, PEP, law enforcement and regulatory databases. {enabled} currently active.
+      </p>
+    </div>
+  );
+}
+
+function FilterBar({ items, active, onSelect, label, labelMap }: {
+  items: string[]; active: string; onSelect: (v: string) => void; label: string;
+  labelMap?: Record<string, string>;
+}) {
+  return (
+    <div className="flex flex-wrap gap-sm mb-md" role="tablist" aria-label={`${label} filter`}>
+      {items.map(item => (
+        <button key={item} role="tab" aria-selected={active === item} onClick={() => onSelect(item)}
+          className={`rounded-full px-lg py-sm text-[13px] font-semibold transition-all cursor-pointer ${
+            active === item ? 'bg-apple-blue text-white shadow-[0_0_12px_rgba(10,132,255,0.2)]'
+              : 'bg-white/5 text-apple-label-secondary hover:bg-white/10 hover:text-white'
+          }`}>{labelMap?.[item] ?? item}</button>
+      ))}
+    </div>
+  );
+}

package/src/pages/Login.test.tsx

@@ -0,0 +1,100 @@
+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 mockLogin = 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: () => ({ login: mockLogin }),
+}))
+
+vi.mock('../components/auth/SignInButtons', () => ({
+  default: () => <div data-testid="sign-in-buttons" />,
+}))
+
+vi.mock('../components/auth/AuthDivider', () => ({
+  default: () => <div data-testid="auth-divider" />,
+}))
+
+import { Login } from './Login'
+
+const renderLogin = (initialEntries = ['/login']) =>
+  render(
+    <MemoryRouter initialEntries={initialEntries}>
+      <Login />
+    </MemoryRouter>
+  )
+
+describe('Login', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders email and password fields', () => {
+    renderLogin()
+    expect(screen.getByLabelText('Email')).toBeInTheDocument()
+    expect(screen.getByLabelText('Password')).toBeInTheDocument()
+  })
+
+  it('renders submit button', () => {
+    renderLogin()
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument()
+  })
+
+  it('submits form with email and password', async () => {
+    mockLogin.mockResolvedValue(undefined)
+    renderLogin()
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'pass1234')
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }))
+    expect(mockLogin).toHaveBeenCalledWith('a@b.com', 'pass1234')
+  })
+
+  it('navigates to dashboard on success', async () => {
+    mockLogin.mockResolvedValue(undefined)
+    renderLogin()
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'pass1234')
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }))
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/dashboard'))
+  })
+
+  it('displays error on login failure', async () => {
+    mockLogin.mockRejectedValue(new Error('Invalid credentials'))
+    renderLogin()
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'wrong')
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }))
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toHaveTextContent('Invalid credentials')
+    })
+  })
+
+  it('shows loading state during submission', async () => {
+    mockLogin.mockImplementation(() => new Promise(() => {}))
+    renderLogin()
+    await userEvent.type(screen.getByLabelText('Email'), 'a@b.com')
+    await userEvent.type(screen.getByLabelText('Password'), 'pass')
+    await userEvent.click(screen.getByRole('button', { name: /sign in/i }))
+    expect(screen.getByRole('button', { name: /signing in/i })).toBeDisabled()
+  })
+
+  it('renders forgot password and signup links', () => {
+    renderLogin()
+    expect(screen.getByText(/forgot password/i)).toBeInTheDocument()
+    expect(screen.getByText(/start free trial/i)).toBeInTheDocument()
+  })
+
+  it('renders OAuth buttons and divider', () => {
+    renderLogin()
+    expect(screen.getByTestId('sign-in-buttons')).toBeInTheDocument()
+    expect(screen.getByTestId('auth-divider')).toBeInTheDocument()
+  })
+})

package/src/pages/Login.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuth } from '../context/AuthContext';
+import { LoginLeftPanel } from '../components/auth/LoginLeftPanel';
+import { LoginForm } from '../components/auth/LoginForm';
+
+export function Login() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { t } = useTranslation('auth');
+  const { login, loginWithToken } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const token = searchParams.get('token');
+    const oauthError = searchParams.get('error');
+    if (token) {
+      loginWithToken(token)
+        .then(() => navigate('/dashboard', { replace: true }))
+        .catch(() => setError('OAuth login failed'));
+    }
+    if (oauthError) setError(oauthError);
+  }, [searchParams, navigate, loginWithToken]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      await login(email, password);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('login.failed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-apple-bg flex">
+      <LoginLeftPanel />
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-10 border-l border-white/5">
+        <Link to="/" className="flex items-center gap-2 mb-8 lg:hidden">
+          <img src="/logo.svg" alt="AMLIQ" className="h-8 w-8" />
+        </Link>
+        <LoginForm
+          email={email} password={password} error={error} loading={loading}
+          onEmailChange={setEmail} onPasswordChange={setPassword} onSubmit={handleSubmit}
+        />
+      </div>
+    </div>
+  );
+}

package/src/pages/MFASetup.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react'
+import { PageHeader } from '../components/layout/PageHeader'
+import { Card } from '../components/ui/Card'
+import { Button } from '../components/ui/Button'
+import { api } from '../api/client'
+
+interface SetupData {
+  qr_url: string
+  secret: string
+  recovery_codes: string[]
+}
+
+export function MFASetup() {
+  const [setup, setSetup] = useState<SetupData | null>(null)
+  const [code, setCode] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [verified, setVerified] = useState(false)
+  const [error, setError] = useState('')
+
+  const startSetup = async () => {
+    setLoading(true); setError('')
+    try {
+      const d = await api.post<SetupData>('/auth/mfa/setup', {})
+      setSetup(d)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Setup failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const verify = async () => {
+    if (code.length !== 6) return
+    setLoading(true); setError('')
+    try {
+      await api.post('/auth/mfa/verify', { code })
+      setVerified(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid code')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (verified) {
+    return (
+      <div className="max-w-lg mx-auto">
+        <PageHeader title="MFA Enabled" />
+        <Card className="text-center py-xxl">
+          <span className="text-4xl">🔒</span>
+          <p className="sf-headline text-apple-green mt-lg">Two-factor authentication enabled</p>
+          <p className="sf-caption text-white/50 mt-sm">Your account is now protected with TOTP</p>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-lg mx-auto">
+      <PageHeader title="Two-Factor Authentication"
+        description="Add an extra layer of security to your account" />
+
+      {!setup ? (
+        <Card>
+          <p className="sf-body text-white/60 mb-lg">
+            Use an authenticator app (Google Authenticator, Authy, 1Password) to generate time-based codes.
+          </p>
+          <Button onClick={startSetup} disabled={loading} className="w-full">
+            {loading ? 'Setting up...' : 'Enable MFA'}
+          </Button>
+        </Card>
+      ) : (
+        <div className="space-y-lg">
+          <Card>
+            <p className="sf-headline mb-md">1. Scan QR Code</p>
+            <div className="bg-white p-lg rounded-apple-md inline-block">
+              <img src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(setup.qr_url)}`}
+                alt="TOTP QR Code" className="w-48 h-48" />
+            </div>
+            <p className="sf-caption text-white/40 mt-md">
+              Or enter manually: <code className="text-white/60">{setup.secret}</code>
+            </p>
+          </Card>
+
+          <Card>
+            <p className="sf-headline mb-md">2. Enter Code</p>
+            <input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              placeholder="000000" maxLength={6}
+              className="input-field w-full text-center text-2xl tracking-[0.5em] font-mono mb-lg" />
+            <Button onClick={verify} disabled={loading || code.length !== 6} className="w-full">
+              {loading ? 'Verifying...' : 'Verify & Enable'}
+            </Button>
+          </Card>
+
+          <Card>
+            <p className="sf-headline mb-md">3. Save Recovery Codes</p>
+            <p className="sf-caption text-white/50 mb-md">
+              Store these codes safely. Each can be used once if you lose your authenticator.
+            </p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-sm">
+              {setup.recovery_codes.map(c => (
+                <code key={c} className="text-sm bg-white/5 p-sm rounded font-mono text-center">{c}</code>
+              ))}
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {error && <Card className="mt-lg"><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+    </div>
+  )
+}
+
+export default MFASetup

package/src/pages/MonitorProfileCard.tsx

@@ -0,0 +1,27 @@
+import { MonitorProfile } from '../api/monitoring';
+
+interface Props { profile: MonitorProfile; onUpdate?: () => void }
+
+export default function MonitorProfileCard({ profile }: Props) {
+  const riskColors: Record<string, string> = {
+    low: 'text-green-400', medium: 'text-yellow-400',
+    high: 'text-orange-400', critical: 'text-red-400',
+  };
+  return (
+    <div className="p-4 bg-white/[0.02] border border-white/[0.06] rounded-xl">
+      <div className="flex justify-between items-start">
+        <div>
+          <h3 className="text-white font-medium">{profile.entity_name}</h3>
+          <p className="text-zinc-500 text-sm mt-1">{profile.frequency} | {profile.entity_type}</p>
+        </div>
+        <span className={`text-xs font-medium uppercase ${riskColors[profile.risk_level] || 'text-zinc-400'}`}>
+          {profile.risk_level}
+        </span>
+      </div>
+      <div className="flex gap-4 mt-3 text-xs text-zinc-500">
+        <span>Last: {profile.last_screened_at || 'Never'}</span>
+        <span>Matches: {profile.match_count}</span>
+      </div>
+    </div>
+  );
+}

package/src/pages/Monitoring.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageHeader } from '../components/layout/PageHeader';
+import { Card } from '../components/ui/Card';
+import { Shield, AlertTriangle, Clock, Plus } from 'lucide-react';
+import { monitoringApi, MonitorProfile, MonitorDashboard } from '../api/monitoring';
+import MonitorProfileCard from './MonitorProfileCard';
+import AddMonitorModal from './AddMonitorModal';
+
+export function Monitoring() {
+  const { t } = useTranslation('monitoring');
+  const [profiles, setProfiles] = useState<MonitorProfile[]>([]);
+  const [dashboard, setDashboard] = useState<MonitorDashboard | null>(null);
+  const [showAdd, setShowAdd] = useState(false);
+
+  const loadData = async () => {
+    try {
+      const [pRes, dRes] = await Promise.all([
+        monitoringApi.listProfiles(),
+        monitoringApi.getDashboard(),
+      ]);
+      setProfiles(pRes.profiles || []);
+      setDashboard(dRes);
+    } catch { /* handled by client */ }
+  };
+
+  useEffect(() => { loadData(); }, []);
+
+  const stats = [
+    { name: 'Active Profiles', value: dashboard?.active_profiles ?? 0, icon: Shield },
+    { name: 'Pending Alerts', value: dashboard?.pending_alerts ?? 0, icon: AlertTriangle },
+    { name: 'Total Alerts', value: dashboard?.total_alerts ?? 0, icon: Clock },
+    { name: 'Total Profiles', value: dashboard?.total_profiles ?? 0, icon: Shield },
+  ];
+
+  return (
+    <div>
+      <PageHeader title={t('title')} description="Ongoing entity monitoring against sanctions lists" />
+      <div className="flex justify-end mb-md">
+        <button type="button" onClick={() => setShowAdd(true)} className="btn-primary flex items-center gap-sm">
+          <Plus className="w-4 h-4" /> Add to Monitoring
+        </button>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-lg mb-xxl">
+        {stats.map((s) => (
+          <Card key={s.name}>
+            <div className="flex items-center justify-between mb-sm">
+              <p className="sf-caption">{s.name}</p>
+              <s.icon className="w-5 h-5 text-apple-blue" />
+            </div>
+            <p className="sf-headline text-lg font-bold">{s.value}</p>
+          </Card>
+        ))}
+      </div>
+      <div className="space-y-md">
+        {profiles.map((p) => (
+          <MonitorProfileCard key={p.id} profile={p} onUpdate={loadData} />
+        ))}
+        {profiles.length === 0 && (
+          <Card><p className="sf-body text-apple-text-secondary text-center py-xl">
+            No monitored entities yet. Add one to get started.
+          </p></Card>
+        )}
+      </div>
+      {showAdd && <AddMonitorModal onClose={() => setShowAdd(false)} onCreated={loadData} />}
+    </div>
+  );
+}