amliq-dashboard 2.0.0

package/src/pages/Onboarding.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import Onboarding from './Onboarding'
+
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => vi.fn(),
+}))
+
+vi.mock('../api/client', () => ({
+  api: {
+    get: vi.fn(() => Promise.resolve({ lists: [] })),
+    put: vi.fn(() => Promise.resolve({})),
+  },
+}))
+
+describe('Onboarding', () => {
+  it('renders welcome title', () => {
+    render(<Onboarding />)
+    expect(screen.getByText('Welcome to AMLIQ')).toBeInTheDocument()
+  })
+
+  it('renders step indicators', () => {
+    render(<Onboarding />)
+    expect(screen.getByText('Country')).toBeInTheDocument()
+    expect(screen.getByText('Lists')).toBeInTheDocument()
+    expect(screen.getByText('Threshold')).toBeInTheDocument()
+  })
+
+  it('renders country selection on step 1', () => {
+    render(<Onboarding />)
+    expect(screen.getByText('Select your country')).toBeInTheDocument()
+    expect(screen.getByText('United States')).toBeInTheDocument()
+    expect(screen.getByText('Israel')).toBeInTheDocument()
+  })
+})

package/src/pages/Onboarding.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { api } from '../api/client'
+import { StepIndicator } from './onboarding/StepIndicator'
+import { CountryStep } from './onboarding/CountryStep'
+import { ListsStep } from './onboarding/ListsStep'
+import { ThresholdStep } from './onboarding/ThresholdStep'
+
+const COUNTRIES = [
+  { code: 'US', label: 'United States' },
+  { code: 'IL', label: 'Israel' },
+  { code: 'GB', label: 'United Kingdom' },
+  { code: 'DE', label: 'Germany' },
+  { code: 'CH', label: 'Switzerland' },
+  { code: 'JP', label: 'Japan' },
+]
+
+interface ListSuggestion {
+  list_id: string; threshold: number; sync_enabled: boolean
+}
+
+export default function Onboarding() {
+  const { t } = useTranslation('onboarding')
+  const navigate = useNavigate()
+  const [step, setStep] = useState(1)
+  const [country, setCountry] = useState('')
+  const [lists, setLists] = useState<ListSuggestion[]>([])
+  const [threshold, setThreshold] = useState(70)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (country) {
+      api.get<{ lists: ListSuggestion[] }>(`/onboarding/lists?country=${country}`)
+        .then(r => setLists(r.lists ?? []))
+    }
+  }, [country])
+
+  const handleFinish = async () => {
+    setSaving(true)
+    try {
+      await api.put('/config', { default_threshold: threshold / 100 })
+      navigate('/dashboard')
+    } catch { setSaving(false) }
+  }
+
+  return (
+    <div className="min-h-screen bg-apple-bg/50 flex items-center justify-center p-lg">
+      <div className="max-w-lg w-full space-y-xl">
+        <h1 className="sf-title text-white text-center">{t('welcome')}</h1>
+        <StepIndicator current={step} />
+        {step === 1 && <CountryStep countries={COUNTRIES} value={country}
+          onChange={c => { setCountry(c); setStep(2) }} />}
+        {step === 2 && <ListsStep lists={lists} onNext={() => setStep(3)} />}
+        {step === 3 && <ThresholdStep value={threshold}
+          onChange={setThreshold} onFinish={handleFinish} saving={saving} />}
+      </div>
+    </div>
+  )
+}

package/src/pages/PEPScreening.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { PEPScreening } from './PEPScreening'
+
+describe('PEPScreening', () => {
+  it('renders page title', () => {
+    render(<PEPScreening />)
+    expect(screen.getByRole('heading', { name: /Screen Entity/i })).toBeInTheDocument()
+  })
+
+  it('renders search button', () => {
+    render(<PEPScreening />)
+    expect(screen.getByRole('button', { name: /Screen Entity/i })).toBeInTheDocument()
+  })
+})

package/src/pages/PEPScreening.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { PageHeader } from '../components/layout/PageHeader'
+import { Card } from '../components/ui/Card'
+import { Button } from '../components/ui/Button'
+import { SearchField } from '../components/ui/SearchField'
+import { ScreeningQuotaBanner } from '../components/screening/ScreeningQuotaBanner'
+import { ScreenResults } from '../components/screening/ScreenResults'
+import { LimitReachedBanner } from '../components/screening/LimitReachedBanner'
+import { ScreeningProgress } from '../components/screening/ScreeningProgress'
+import { api, ApiError } from '../api/client'
+import { Badge } from '../components/ui/Badge'
+import type { ScreenResponse } from '../types'
+
+interface PEPResult {
+  results: Array<{ entity_id: string; position: string; country: string; tier: number }>
+  total: number
+}
+
+export function PEPScreening() {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<ScreenResponse | null>(null)
+  const [pepResults, setPepResults] = useState<PEPResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+  const isLimitError = error instanceof ApiError && error.status === 402
+
+  const handleScreen = async () => {
+    if (!query.trim()) return
+    setLoading(true)
+    setError(null)
+    setPepResults(null)
+    try {
+      const [screenData, pepData] = await Promise.allSettled([
+        api.post<ScreenResponse>('/screen', { entity_name: query.trim() }),
+        api.post<PEPResult>('/pep/screen', { name: query.trim() }),
+      ])
+      if (screenData.status === 'fulfilled') setResults(screenData.value)
+      if (pepData.status === 'fulfilled') setPepResults(pepData.value)
+      if (screenData.status === 'rejected') {
+        const e = screenData.reason instanceof Error ? screenData.reason : new Error(String(screenData.reason))
+        if (e instanceof ApiError && e.status === 402) setError(e)
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const pepList = pepResults?.results ?? []
+
+  return (
+    <div>
+      <PageHeader
+        title="PEP & Sanctions Screening"
+        description="Screen against PEP databases and global sanctions lists simultaneously"
+      />
+      <div className="mb-lg"><ScreeningQuotaBanner /></div>
+      <Card className="mb-lg">
+        <SearchField
+          placeholder="Enter name (e.g. Benjamin Netanyahu, Vladimir Putin)"
+          value={query} onChange={setQuery} onSubmit={handleScreen}
+        />
+        <Button onClick={handleScreen} disabled={loading || !query.trim()} className="w-full mt-lg">
+          {loading ? 'Screening...' : 'Screen PEP & Sanctions'}
+        </Button>
+      </Card>
+
+      {error && isLimitError && <LimitReachedBanner error={error} />}
+      {error && !isLimitError && (
+        <Card className="mb-lg"><p role="alert" className="text-apple-red sf-body">{error.message}</p></Card>
+      )}
+
+      {loading && (
+        <div className="mt-xxl">
+          <ScreeningProgress query={query} />
+        </div>
+      )}
+
+      {!loading && pepList.length > 0 && (
+        <Card className="mb-lg">
+          <h3 className="sf-headline mb-md">PEP Results — {pepList.length} profiles</h3>
+          <div className="space-y-sm">
+            {pepList.map((p, i) => (
+              <div key={i} className="flex items-center justify-between p-md bg-white/[0.03] rounded-apple-md">
+                <div>
+                  <p className="sf-body font-medium">{p.entity_id}</p>
+                  <p className="sf-caption text-apple-label-tertiary">{p.position} — {p.country}</p>
+                </div>
+                <Badge color={p.tier <= 2 ? 'red' : 'orange'} size="sm">Tier {p.tier}</Badge>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {!loading && results && <ScreenResults data={results} />}
+    </div>
+  )
+}

package/src/pages/ResetPassword.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import { useSearchParams, Link } from 'react-router-dom'
+import { ArrowLeft, CheckCircle } from 'lucide-react'
+import { api } from '../api/client'
+
+export function ResetPassword() {
+  const [params] = useSearchParams()
+  const token = params.get('token') || ''
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [done, setDone] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return }
+    if (password !== confirm) { setError('Passwords do not match'); return }
+    setLoading(true); setError('')
+    try {
+      await api.post('/auth/reset-password', { token, password })
+      setDone(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Reset failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!token) {
+    return (
+      <div className="min-h-screen bg-apple-bg-primary flex items-center justify-center px-4">
+        <div className="text-center">
+          <p className="text-apple-red sf-headline">Invalid reset link</p>
+          <Link to="/forgot-password" className="text-apple-blue text-sm mt-md inline-block">
+            Request a new reset link
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  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} /> Back to login
+        </Link>
+
+        {done ? (
+          <div className="rounded-apple-lg bg-green-500/10 border border-green-500/30 p-6 text-center">
+            <CheckCircle size={32} className="text-green-400 mx-auto mb-3" />
+            <p className="text-white font-medium mb-1">Password updated</p>
+            <Link to="/login" className="text-apple-blue text-sm">Sign in with your new password</Link>
+          </div>
+        ) : (
+          <>
+            <h1 className="text-2xl font-bold text-white mb-2">Set new password</h1>
+            <p className="text-sm text-apple-label-secondary mb-8">Enter your new password below.</p>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <input type="password" required value={password} minLength={8}
+                onChange={e => setPassword(e.target.value)}
+                placeholder="New password (8+ characters)" className="input-field w-full" autoFocus />
+              <input type="password" required value={confirm}
+                onChange={e => setConfirm(e.target.value)}
+                placeholder="Confirm password" className="input-field w-full" />
+              {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 ? 'Updating...' : 'Update Password'}
+              </button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ResetPassword

package/src/pages/RiskAssessment.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { RiskAssessment } from './RiskAssessment'
+
+describe('RiskAssessment', () => {
+  it('renders page title', () => {
+    render(<RiskAssessment />)
+    expect(screen.getByText('Risk Assessment')).toBeInTheDocument()
+  })
+
+  it('renders calculate button', () => {
+    render(<RiskAssessment />)
+    expect(screen.getByText('Calculate Risk')).toBeInTheDocument()
+  })
+})

package/src/pages/RiskAssessment.tsx

@@ -0,0 +1,108 @@
+import { useState } 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 { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { api } from '../api/client'
+
+interface RiskResult {
+  composite_score: number
+  risk_level: string
+  factors: string[]
+  breakdown: Record<string, number>
+}
+
+export function RiskAssessment() {
+  const { t } = useTranslation('compliance')
+  const [entityId, setEntityId] = useState('')
+  const [country, setCountry] = useState('')
+  const [result, setResult] = useState<RiskResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const calculate = async () => {
+    if (!entityId.trim()) return
+    setLoading(true)
+    setError('')
+    try {
+      const d = await api.post<RiskResult>('/risk/score', {
+        entity_id: entityId, country,
+        sanctions_score: 0, pep_score: 0,
+        adverse_media_score: 0, industry_score: 0,
+      })
+      setResult(d ?? null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Calculation failed')
+      setResult(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const levelColor: Record<string, string> = {
+    critical: 'text-apple-red', high: 'text-apple-orange',
+    medium: 'text-apple-yellow', low: 'text-apple-green',
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <PageHeader title={t('risk.title')} description="Calculate composite risk scores" />
+      <Card className="mb-lg">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-lg mb-lg">
+          <input placeholder={t('risk.entity_placeholder')} value={entityId}
+            aria-label={t('risk.entity_placeholder')}
+            onChange={e => setEntityId(e.target.value)} className="input-field" />
+          <input placeholder={t('risk.country_placeholder')} value={country}
+            aria-label={t('risk.country_placeholder')}
+            onChange={e => setCountry(e.target.value)} className="input-field" />
+        </div>
+        <Button onClick={calculate} disabled={loading || !entityId.trim()} className="w-full">
+          {loading ? 'Calculating...' : t('risk.calculate')}
+        </Button>
+      </Card>
+
+      {loading && <LoadingSpinner />}
+      {error && (
+        <Card className="mb-lg">
+          <p role="alert" className="text-apple-red sf-body">{error}</p>
+        </Card>
+      )}
+      {result && <RiskResultCard result={result} levelColor={levelColor} t={t} />}
+    </div>
+  )
+}
+
+function RiskResultCard({ result, levelColor, t }: {
+  result: RiskResult; levelColor: Record<string, string>; t: (k: string) => string
+}) {
+  return (
+    <Card>
+      <div className="flex items-baseline gap-md mb-lg">
+        <span className="text-4xl font-bold">{(result.composite_score * 100).toFixed(0)}</span>
+        <span className={`text-lg font-medium ${levelColor[result.risk_level]}`}>
+          {result.risk_level.toUpperCase()}
+        </span>
+      </div>
+      {(result.factors ?? []).length > 0 && (
+        <div className="mb-lg">
+          <p className="sf-caption text-white/60 mb-sm">{t('risk.risk_factors')}</p>
+          <div className="flex flex-wrap gap-sm">
+            {result.factors.map(f => (
+              <span key={f} className="px-2 py-0.5 bg-apple-red/20 text-apple-red text-xs rounded">{f}</span>
+            ))}
+          </div>
+        </div>
+      )}
+      <div>
+        <p className="sf-caption text-white/60 mb-sm">{t('risk.score_breakdown')}</p>
+        {Object.entries(result.breakdown).map(([k, v]) => (
+          <div key={k} className="flex justify-between text-sm py-sm border-b border-white/[0.06]">
+            <span className="capitalize">{k.replace('_', ' ')}</span>
+            <span>{(v * 100).toFixed(1)}%</span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}

package/src/pages/SanctionsLists.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { PageHeader } from '../components/layout/PageHeader';
+import { Button } from '../components/ui/Button';
+import { RefreshCw, ShoppingBag } from 'lucide-react';
+import { useLists } from '../hooks/useLists';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import { ListCard } from '../components/lists/ListCard';
+import { api } from '../api/client';
+
+export function SanctionsLists() {
+  const { t } = useTranslation('lists');
+  const navigate = useNavigate();
+  const { lists, loading, error, refetch, triggerSync } = useLists();
+  const [reloading, setReloading] = useState(false);
+  const [reloadMsg, setReloadMsg] = useState('');
+
+  const reloadAll = useCallback(async () => {
+    setReloading(true);
+    setReloadMsg('');
+    try {
+      await api.post('/admin/lists/refresh', {});
+      setReloadMsg('Reload started. Lists will update in the background.');
+      setTimeout(() => refetch(), 3000);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setReloadMsg(`Error: ${msg}`);
+    } finally {
+      setReloading(false);
+    }
+  }, [refetch]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  const totalEntries = lists.reduce((acc, l) => acc + l.entity_count, 0);
+
+  return (
+    <div>
+      <PageHeader
+        title={t('title')}
+        description={`${lists.length} lists • ${totalEntries.toLocaleString()} ${t('entities')}`}
+      />
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-sm mb-md">
+        <Button variant="secondary" size="sm" onClick={() => navigate('/lists/marketplace')}
+          className="flex items-center justify-center gap-xs">
+          <ShoppingBag className="w-4 h-4" /> Browse Marketplace
+        </Button>
+        <Button variant="primary" size="sm" onClick={reloadAll}
+          disabled={reloading} className="flex items-center justify-center gap-xs">
+          <RefreshCw className={`w-4 h-4 ${reloading ? 'animate-spin' : ''}`} />
+          {reloading ? 'Reloading...' : 'Reload All Lists'}
+        </Button>
+        {reloadMsg && (
+          <span className={`sf-caption ${reloadMsg.startsWith('Error') ? 'text-apple-red' : 'text-apple-green'}`}>
+            {reloadMsg}
+          </span>
+        )}
+      </div>
+      {error && <p className="text-apple-red sf-caption mb-md" role="alert">{error.message}</p>}
+      <div className="space-y-md">
+        {lists.map((list) => (
+          <ListCard key={list.id} list={list} triggerSync={triggerSync} t={t} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/pages/ScreenEntity.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { ScreenEntity } from './ScreenEntity'
+
+const mockScreen = vi.fn()
+const mockClear = vi.fn()
+
+vi.mock('../hooks/useScreening', () => ({
+  useScreening: () => ({
+    result: null,
+    loading: false,
+    error: null,
+    screen: mockScreen,
+    clear: mockClear,
+  }),
+}))
+
+describe('ScreenEntity', () => {
+  it('renders page title', () => {
+    render(<ScreenEntity />)
+    expect(screen.getByRole('heading', { name: /Screen Entity/i })).toBeInTheDocument()
+  })
+
+  it('renders page description', () => {
+    render(<ScreenEntity />)
+    expect(screen.getByText('Perform manual entity screening')).toBeInTheDocument()
+  })
+
+  it('renders screening form', () => {
+    render(<ScreenEntity />)
+    expect(screen.getByPlaceholderText('First Name')).toBeInTheDocument()
+  })
+
+  it('renders screening layers list', () => {
+    render(<ScreenEntity />)
+    expect(screen.getByText('Screening Layers')).toBeInTheDocument()
+  })
+
+  it('does not show results section initially', () => {
+    render(<ScreenEntity />)
+    expect(screen.queryByText(/Screening Results/i)).not.toBeInTheDocument()
+  })
+
+  it('renders submit button', () => {
+    render(<ScreenEntity />)
+    const btn = screen.getByRole('button', { name: /screen entity/i })
+    expect(btn).toBeInTheDocument()
+  })
+
+  it('calls screen on form submit', async () => {
+    mockScreen.mockClear()
+    render(<ScreenEntity />)
+    await userEvent.type(screen.getByPlaceholderText('First Name'), 'John')
+    await userEvent.type(screen.getByPlaceholderText('Last Name'), 'Doe')
+    await userEvent.click(screen.getByRole('button', { name: /screen entity/i }))
+    await waitFor(() => {
+      expect(mockScreen).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('passes correct payload for individual screening', async () => {
+    mockScreen.mockClear()
+    render(<ScreenEntity />)
+    await userEvent.type(screen.getByPlaceholderText('First Name'), 'Jane')
+    await userEvent.type(screen.getByPlaceholderText('Last Name'), 'Smith')
+    await userEvent.click(screen.getByRole('button', { name: /screen entity/i }))
+    await waitFor(() => {
+      expect(mockScreen).toHaveBeenCalledWith(
+        expect.objectContaining({ entity_name: 'Jane Smith', entity_type: 'individual' }),
+      )
+    })
+  })
+
+  it('allows switching between individual and company types', () => {
+    render(<ScreenEntity />)
+    const tabs = screen.getAllByRole('button').filter(
+      btn => btn.textContent === 'Individual' || btn.textContent === 'Company'
+    )
+    expect(tabs.length).toBe(2)
+  })
+})

package/src/pages/ScreenEntity.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ScreeningForm } from '../components/screening/ScreeningForm';
+import { ScreeningLayersList } from '../components/screening/ScreeningLayersList';
+import { ScreenResults } from '../components/screening/ScreenResults';
+import { ScreeningQuotaBanner } from '../components/screening/ScreeningQuotaBanner';
+import { LimitReachedBanner } from '../components/screening/LimitReachedBanner';
+import { ScreeningProgress } from '../components/screening/ScreeningProgress';
+import { useScreening } from '../hooks/useScreening';
+import { ApiError } from '../api/client';
+import type { EntityType } from '../types';
+
+interface FormData {
+  firstName: string; lastName: string; companyName: string; dob: string; nationality: string;
+}
+
+export function ScreenEntity() {
+  const { t } = useTranslation('screening');
+  const navigate = useNavigate();
+  const { result, loading, error, screen, clear } = useScreening();
+  const [lastQuery, setLastQuery] = useState('');
+  const isLimitError = error instanceof ApiError && error.status === 402;
+
+  const handleSubmit = async (data: FormData, type: EntityType) => {
+    const name = type === 'individual' ? `${data.firstName} ${data.lastName}`.trim() : data.companyName;
+    setLastQuery(name);
+    try {
+      await screen({
+        entity_name: name, entity_type: type,
+        dob: data.dob || undefined, nationality: data.nationality || undefined,
+      });
+    } catch { /* error captured in useScreening state */ }
+  };
+
+  return (
+    <div>
+      <div className="text-center mb-xxl">
+        <div className="relative inline-flex items-center justify-center w-16 h-16 rounded-full bg-apple-blue/10 mb-lg">
+          <div className="absolute inset-0 rounded-full bg-apple-blue/20 blur-xl" />
+          <img src="/logo.svg" alt="AMLIQ" className="relative w-10 h-10" />
+        </div>
+        <h1 className="text-3xl font-bold tracking-tight gradient-text mb-sm">{t('title')}</h1>
+        <p className="sf-caption max-w-md mx-auto">{t('description')}</p>
+      </div>
+
+      <div className="max-w-4xl mx-auto mb-lg">
+        <ScreeningQuotaBanner />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-lg max-w-4xl mx-auto">
+        <div className="lg:col-span-2 glass-panel rounded-apple-lg p-lg glow-blue">
+          <ScreeningForm onSubmit={handleSubmit} loading={loading} />
+        </div>
+        <ScreeningLayersList />
+      </div>
+
+      {error && isLimitError && <LimitReachedBanner error={error} />}
+      {error && !isLimitError && (
+        <p className="text-apple-red sf-caption mt-md text-center" role="alert">{error.message}</p>
+      )}
+
+      {loading && (
+        <div className="mt-xxl">
+          <ScreeningProgress query={lastQuery} />
+        </div>
+      )}
+
+      {result && (
+        <div className="max-w-4xl mx-auto mt-xl">
+          <ScreenResults data={result} />
+        </div>
+      )}
+    </div>
+  );
+}