amliq-dashboard 2.0.0

package/src/components/screening/ScreenResults.tsx

@@ -0,0 +1,49 @@
+import { Card } from '../ui/Card'
+import { ScreeningResultRow } from './ScreeningResultRow'
+import { ShareResults } from './ShareResults'
+import type { ScreenResponse } from '../../types'
+
+export type { ScreenResponse }
+
+interface Props {
+  data: ScreenResponse
+}
+
+export function ScreenResults({ data }: Props) {
+  const matches = data.matches ?? []
+  const totalMatches = data.total_matches ?? matches.length
+
+  if (totalMatches === 0) {
+    return (
+      <Card className="text-center py-xxl">
+        <div className="text-apple-green text-3xl mb-md">&#10003;</div>
+        <p className="sf-headline text-apple-green">No Matches Found</p>
+        <p className="sf-caption mt-sm">
+          No sanctions matches for &ldquo;{data.query}&rdquo;
+        </p>
+        <div className="mt-lg flex justify-center">
+          <ShareResults data={data} />
+        </div>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-md">
+      <div className="flex items-center justify-between">
+        <p className="sf-body">
+          <span className="sf-headline">{totalMatches}</span> matches
+        </p>
+        <div className="flex items-center gap-md">
+          <span className="sf-caption text-white/50">
+            {data.processing_time_ms ?? 0}ms
+          </span>
+          <ShareResults data={data} />
+        </div>
+      </div>
+      {matches.map((m, i) => (
+        <ScreeningResultRow key={m.entity_id} match={m} index={i} />
+      ))}
+    </div>
+  )
+}

package/src/components/screening/ScreeningForm.test.tsx

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { ScreeningForm } from './ScreeningForm'
+
+describe('ScreeningForm', () => {
+  it('renders entity type selection', () => {
+    render(<ScreeningForm onSubmit={vi.fn()} />)
+    expect(screen.getByRole('button', { name: 'Individual' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Company' })).toBeInTheDocument()
+  })
+
+  it('renders individual fields by default', () => {
+    render(<ScreeningForm onSubmit={vi.fn()} />)
+    expect(screen.getByPlaceholderText('First Name')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Last Name')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Nationality')).toBeInTheDocument()
+  })
+
+  it('switches to company fields when company type selected', async () => {
+    render(<ScreeningForm onSubmit={vi.fn()} />)
+    const companyTab = screen.getByRole('button', { name: 'Company' })
+    await userEvent.click(companyTab)
+    expect(screen.getByPlaceholderText('Company Name')).toBeInTheDocument()
+    expect(screen.queryByPlaceholderText('First Name')).not.toBeInTheDocument()
+  })
+
+  it('submits individual form data', async () => {
+    const handler = vi.fn()
+    render(<ScreeningForm onSubmit={handler} />)
+
+    await userEvent.type(screen.getByPlaceholderText('First Name'), 'John')
+    await userEvent.type(screen.getByPlaceholderText('Last Name'), 'Doe')
+    await userEvent.type(screen.getByPlaceholderText('Nationality'), 'US')
+
+    await userEvent.click(screen.getByRole('button', { name: /screen entity/i }))
+
+    expect(handler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        firstName: 'John',
+        lastName: 'Doe',
+        nationality: 'US',
+      }),
+      'individual'
+    )
+  })
+
+  it('submits company form data', async () => {
+    const handler = vi.fn()
+    render(<ScreeningForm onSubmit={handler} />)
+
+    const companyTab = screen.getByRole('button', { name: 'Company' })
+    await userEvent.click(companyTab)
+
+    await userEvent.type(screen.getByPlaceholderText('Company Name'), 'Acme Corp')
+    await userEvent.click(screen.getByRole('button', { name: /screen entity/i }))
+
+    expect(handler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        companyName: 'Acme Corp',
+      }),
+      'company'
+    )
+  })
+
+  it('disables submit button when loading', () => {
+    render(<ScreeningForm onSubmit={vi.fn()} loading={true} />)
+    expect(screen.getByRole('button', { name: /screening/i })).toBeDisabled()
+  })
+
+  it('shows loading text when loading', () => {
+    render(<ScreeningForm onSubmit={vi.fn()} loading={true} />)
+    expect(screen.getByText('Screening...')).toBeInTheDocument()
+  })
+
+  it('prevents form submission with Enter key', async () => {
+    const handler = vi.fn()
+    render(<ScreeningForm onSubmit={handler} />)
+    const form = screen.getByPlaceholderText('First Name').closest('form')
+    await userEvent.type(form!, '{Enter}')
+    expect(handler).not.toHaveBeenCalled()
+  })
+})

package/src/components/screening/ScreeningForm.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Search } from 'lucide-react';
+import type { EntityType } from '../../types';
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  companyName: string;
+  dob: string;
+  nationality: string;
+}
+
+interface ScreeningFormProps {
+  onSubmit: (data: FormData, type: EntityType) => void;
+  loading?: boolean;
+}
+
+export function ScreeningForm({ onSubmit, loading }: ScreeningFormProps) {
+  const { t } = useTranslation('screening');
+  const [entityType, setEntityType] = useState<EntityType>('individual');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [data, setData] = useState<FormData>({
+    firstName: '', lastName: '', companyName: '', dob: '', nationality: '',
+  });
+
+  const tabClass = (active: boolean) =>
+    `flex-1 py-md text-center text-[14px] font-semibold rounded-apple-md transition-all cursor-pointer ${active
+      ? 'bg-gradient-to-r from-apple-blue to-[#00D4AA] text-white shadow-[0_0_16px_rgba(10,132,255,0.3)]'
+      : 'text-apple-label-secondary hover:text-white hover:bg-white/[0.04]'}`;
+
+  const validate = (): boolean => {
+    const errs: Record<string, string> = {};
+    if (entityType === 'individual') {
+      if (!data.firstName.trim()) errs.firstName = 'First name is required';
+      if (!data.lastName.trim()) errs.lastName = 'Last name is required';
+    } else {
+      if (!data.companyName.trim()) errs.companyName = 'Company name is required';
+    }
+    setErrors(errs);
+    return Object.keys(errs).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) onSubmit(data, entityType);
+  };
+
+  const inputCls = (field: string) =>
+    `input-field w-full ${errors[field] ? 'border-apple-red' : ''}`;
+
+  return (
+    <div className="card-vibrancy p-xl">
+      <div className="flex gap-sm p-xs bg-white/[0.03] rounded-apple-md mb-xl border border-white/[0.04]">
+        <button type="button" className={tabClass(entityType === 'individual')}
+          onClick={() => setEntityType('individual')}>{t('form.individual')}</button>
+        <button type="button" className={tabClass(entityType === 'company')}
+          onClick={() => setEntityType('company')}>{t('form.company')}</button>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-lg">
+        {entityType === 'individual' ? (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-lg">
+              <div>
+                <input type="text" required aria-label={t('form.first_name')}
+                  placeholder={t('form.first_name')} className={inputCls('firstName')}
+                  value={data.firstName} onChange={(e) => setData({ ...data, firstName: e.target.value })} />
+                {errors.firstName && <p className="text-apple-red text-xs mt-1">{errors.firstName}</p>}
+              </div>
+              <div>
+                <input type="text" required aria-label={t('form.last_name')}
+                  placeholder={t('form.last_name')} className={inputCls('lastName')}
+                  value={data.lastName} onChange={(e) => setData({ ...data, lastName: e.target.value })} />
+                {errors.lastName && <p className="text-apple-red text-xs mt-1">{errors.lastName}</p>}
+              </div>
+            </div>
+            <input type="date" aria-label={t('form.dob')} className="input-field w-full"
+              value={data.dob} onChange={(e) => setData({ ...data, dob: e.target.value })} />
+            <input type="text" aria-label={t('form.nationality')} placeholder={t('form.nationality')}
+              className="input-field w-full" value={data.nationality}
+              onChange={(e) => setData({ ...data, nationality: e.target.value })} />
+          </>
+        ) : (
+          <div>
+            <input type="text" required aria-label={t('form.company_name')}
+              placeholder={t('form.company_name')} className={inputCls('companyName')}
+              value={data.companyName} onChange={(e) => setData({ ...data, companyName: e.target.value })} />
+            {errors.companyName && <p className="text-apple-red text-xs mt-1">{errors.companyName}</p>}
+          </div>
+        )}
+        <button type="submit" disabled={loading}
+          className="button-primary w-full flex items-center justify-center gap-sm disabled:opacity-50 text-[15px] font-bold tracking-wide">
+          <Search className="w-5 h-5" />
+          {loading ? t('form.submitting') : t('form.submit')}
+        </button>
+      </form>
+    </div>
+  );
+}

package/src/components/screening/ScreeningLayersList.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { ScreeningLayersList } from './ScreeningLayersList'
+
+describe('ScreeningLayersList', () => {
+  it('renders title', () => {
+    render(<ScreeningLayersList />)
+    expect(screen.getByText(/screening layers/i)).toBeInTheDocument()
+  })
+
+  it('renders all four layer toggles', () => {
+    render(<ScreeningLayersList />)
+    expect(screen.getByText(/ofac sdn/i)).toBeInTheDocument()
+    expect(screen.getByText(/eu sanctions/i)).toBeInTheDocument()
+    expect(screen.getByText(/un consolidated/i)).toBeInTheDocument()
+    expect(screen.getByText(/custom lists/i)).toBeInTheDocument()
+  })
+
+  it('all toggles are checked by default', () => {
+    const { container } = render(<ScreeningLayersList />)
+    const greenToggles = container.querySelectorAll('div[class*="bg-apple-green"]')
+    expect(greenToggles.length).toBe(4)
+  })
+
+  it('toggles a layer off when clicked', async () => {
+    const { container } = render(<ScreeningLayersList />)
+    const toggles = container.querySelectorAll('div[class*="rounded-full"]')
+    await userEvent.click(toggles[0])
+    const greenToggles = container.querySelectorAll('div[class*="bg-apple-green"]')
+    expect(greenToggles.length).toBe(3)
+  })
+})

package/src/components/screening/ScreeningLayersList.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Shield, Globe, Flag, Database } from 'lucide-react';
+import { Card } from '../ui/Card';
+import { Toggle } from '../ui/Toggle';
+
+const layerConfig = [
+  { key: 'ofac', icon: Shield, color: 'text-apple-red', glow: 'shadow-[0_0_12px_rgba(255,69,58,0.15)]', label: 'layers.ofac_sdn' },
+  { key: 'eu', icon: Globe, color: 'text-apple-blue', glow: 'shadow-[0_0_12px_rgba(10,132,255,0.15)]', label: 'layers.eu_sanctions' },
+  { key: 'un', icon: Flag, color: 'text-apple-orange', glow: 'shadow-[0_0_12px_rgba(255,159,10,0.15)]', label: 'layers.un_consolidated' },
+  { key: 'custom', icon: Database, color: 'text-apple-green', glow: 'shadow-[0_0_12px_rgba(48,209,88,0.15)]', label: 'layers.custom_lists' },
+] as const;
+
+type LayerKey = (typeof layerConfig)[number]['key'];
+
+export function ScreeningLayersList() {
+  const { t } = useTranslation('screening');
+  const [layers, setLayers] = React.useState<Record<LayerKey, boolean>>({
+    ofac: true, eu: true, un: true, custom: true,
+  });
+
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('layers.title')}</h3>
+      <div className="space-y-sm">
+        {layerConfig.map(({ key, icon: Icon, color, glow, label }) => (
+          <div key={key}
+            className={`flex items-center gap-md p-md rounded-apple-md bg-white/[0.03]
+              border border-white/[0.04] transition-all hover:bg-white/[0.06]
+              ${layers[key] ? glow : ''}`}>
+            <div className={`w-8 h-8 rounded-full bg-white/[0.06] flex items-center justify-center flex-shrink-0`}>
+              <Icon className={`w-4 h-4 ${color}`} />
+            </div>
+            <div className="flex-1">
+              <Toggle
+                checked={layers[key]}
+                onChange={(v) => setLayers({ ...layers, [key]: v })}
+                label={t(label)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}

package/src/components/screening/ScreeningProgress.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react'
+import { Shield, Search, Fingerprint, Volume2, Hash, Sparkles, Network, Check } from 'lucide-react'
+
+const LAYERS = [
+  { icon: Search, label: 'Exact Match', desc: 'Unicode normalized comparison' },
+  { icon: Fingerprint, label: 'Fuzzy Match', desc: 'Jaro-Winkler similarity' },
+  { icon: Volume2, label: 'Phonetic', desc: 'Soundex + Double Metaphone' },
+  { icon: Hash, label: 'Token Match', desc: 'Jaccard coefficient' },
+  { icon: Sparkles, label: 'AI Embeddings', desc: 'pgvector semantic search' },
+  { icon: Network, label: 'Graph', desc: 'Relationship traversal' },
+] as const
+
+interface Props {
+  query: string
+}
+
+export function ScreeningProgress({ query }: Props) {
+  const [activeLayer, setActiveLayer] = useState(0)
+  const [completed, setCompleted] = useState<Set<number>>(new Set())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveLayer(prev => {
+        const next = prev + 1
+        if (next >= LAYERS.length) {
+          return 0
+        }
+        setCompleted(c => new Set([...c, prev]))
+        return next
+      })
+    }, 120)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="text-center mb-xl">
+        <div className="relative inline-flex items-center justify-center w-20 h-20 mb-md">
+          <div className="absolute inset-0 rounded-full bg-apple-blue/20 blur-2xl animate-pulse" />
+          <div className="absolute inset-0 rounded-full border-2 border-apple-blue/30 animate-ping" />
+          <Shield className="relative w-10 h-10 text-apple-blue" />
+        </div>
+        <h3 className="sf-headline text-white mb-xs">Screening in Progress</h3>
+        <p className="sf-caption text-apple-label-secondary">
+          Analyzing <span className="text-apple-blue font-medium">{query}</span> across 2.17M entities
+        </p>
+      </div>
+
+      <div className="space-y-sm">
+        {LAYERS.map((layer, i) => {
+          const isActive = i === activeLayer
+          const isDone = completed.has(i)
+          const Icon = layer.icon
+          return (
+            <div key={i}
+              className={`flex items-center gap-md p-md rounded-apple-md transition-all duration-300
+                ${isActive ? 'bg-apple-blue/10 border border-apple-blue/30 scale-[1.02]' : ''}
+                ${isDone && !isActive ? 'bg-white/[0.02] border border-white/[0.04]' : ''}
+                ${!isActive && !isDone ? 'bg-white/[0.01] border border-white/[0.02]' : ''}
+              `}>
+              <div className={`flex items-center justify-center w-9 h-9 rounded-apple-md transition-all
+                ${isActive ? 'bg-apple-blue text-white' : ''}
+                ${isDone && !isActive ? 'bg-apple-green/15 text-apple-green' : ''}
+                ${!isActive && !isDone ? 'bg-white/5 text-apple-label-tertiary' : ''}
+              `}>
+                {isDone && !isActive ? <Check className="w-4 h-4" /> : <Icon className={`w-4 h-4 ${isActive ? 'animate-pulse' : ''}`} />}
+              </div>
+              <div className="flex-1">
+                <p className={`text-sm font-medium transition-colors
+                  ${isActive ? 'text-white' : 'text-apple-label-secondary'}`}>
+                  {layer.label}
+                </p>
+                <p className="text-xs text-apple-label-tertiary">{layer.desc}</p>
+              </div>
+              {isActive && (
+                <div className="flex gap-xs">
+                  <span className="w-1.5 h-1.5 rounded-full bg-apple-blue animate-pulse" />
+                  <span className="w-1.5 h-1.5 rounded-full bg-apple-blue animate-pulse" style={{ animationDelay: '0.2s' }} />
+                  <span className="w-1.5 h-1.5 rounded-full bg-apple-blue animate-pulse" style={{ animationDelay: '0.4s' }} />
+                </div>
+              )}
+              {isDone && !isActive && (
+                <span className="text-xs text-apple-green font-medium">Done</span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/screening/ScreeningQuotaBanner.tsx

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ArrowUpCircle } from 'lucide-react'
+import { screeningApi, ScreeningQuota } from '../../api/screening'
+
+export function ScreeningQuotaBanner() {
+  const navigate = useNavigate()
+  const [quota, setQuota] = useState<ScreeningQuota | null>(null)
+
+  useEffect(() => {
+    screeningApi.getQuota().then(setQuota).catch(() => null)
+  }, [])
+
+  if (!quota) return null
+
+  // Unlimited plan or no enforcer
+  if (quota.limit < 0) return null
+
+  const pct = quota.limit > 0 ? (quota.used / quota.limit) * 100 : 0
+  const isLow = pct >= 80
+  const isExhausted = quota.remaining <= 0
+
+  const barColor = isExhausted
+    ? 'bg-apple-red'
+    : isLow
+      ? 'bg-amber-500'
+      : 'bg-apple-green'
+
+  const borderColor = isExhausted
+    ? 'border-apple-red/20'
+    : isLow
+      ? 'border-amber-500/20'
+      : 'border-white/[0.06]'
+
+  return (
+    <div className={`rounded-apple-md border ${borderColor} bg-white/[0.02] px-lg py-md`}>
+      <div className="flex items-center justify-between mb-xs">
+        <span className="text-xs text-apple-label-secondary">
+          {quota.used.toLocaleString()} / {quota.limit.toLocaleString()} screenings used
+        </span>
+        {isExhausted ? (
+          <button onClick={() => navigate('/billing')}
+            className="text-xs text-apple-blue hover:underline cursor-pointer font-medium">
+            Upgrade Plan
+          </button>
+        ) : isLow ? (
+          <span className="text-xs text-amber-400">
+            {quota.remaining.toLocaleString()} remaining
+          </span>
+        ) : (
+          <span className="text-xs text-apple-label-tertiary">
+            {quota.remaining.toLocaleString()} remaining
+          </span>
+        )}
+      </div>
+      <div className="w-full h-1.5 bg-white/10 rounded-full overflow-hidden">
+        <div
+          className={`h-full ${barColor} rounded-full transition-all duration-500`}
+          style={{ width: `${Math.min(pct, 100)}%` }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/screening/ScreeningResultCard.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { CircularConfidence } from './CircularConfidence';
+
+interface Result {
+  name: string;
+  confidence: number;
+}
+
+interface Props {
+  result: Result;
+  index: number;
+}
+
+export function ScreeningResultCard({ result, index }: Props) {
+  const { t } = useTranslation('screening');
+  const delay = `${index * 80}ms`;
+
+  return (
+    <div
+      className="card-vibrancy p-lg flex items-center gap-xl animate-fade-in"
+      style={{ animationDelay: delay }}
+    >
+      <CircularConfidence score={result.confidence} />
+      <div className="flex-1 min-w-0">
+        <h4 className="sf-headline truncate">{result.name}</h4>
+        <p className="sf-caption">{t('results.match_found')}</p>
+        <ConfidenceBar score={result.confidence} />
+      </div>
+    </div>
+  );
+}
+
+function ConfidenceBar({ score }: { score: number }) {
+  const color = score >= 80 ? 'from-apple-red to-apple-orange'
+    : score >= 60 ? 'from-apple-orange to-apple-yellow'
+    : 'from-apple-green to-apple-blue';
+
+  return (
+    <div className="mt-md h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
+      <div
+        className={`h-full bg-gradient-to-r ${color} rounded-full transition-all duration-500`}
+        style={{ width: `${score}%` }}
+      />
+    </div>
+  );
+}

package/src/components/screening/ScreeningResultRow.tsx

@@ -0,0 +1,45 @@
+import { Card } from '../ui/Card'
+import { MatchDetailHeader } from './MatchDetailHeader'
+import { MatchEntityInfo } from './MatchEntityInfo'
+import { MatchEvidenceBars } from './MatchEvidenceBars'
+import { MatchMetadata } from './MatchMetadata'
+import type { ScreenMatch } from '../../types'
+
+export type { ScreenMatch }
+
+interface Props {
+  match: ScreenMatch
+  index?: number
+}
+
+export function ScreeningResultRow({ match, index = 0 }: Props) {
+  const delay = `${index * 60}ms`
+
+  return (
+    <div className="animate-fade-in" style={{ animationDelay: delay }}>
+    <Card>
+      <div className="space-y-lg">
+        <MatchDetailHeader match={match} />
+
+        <div className="border-t border-white/[0.06] pt-md">
+          <MatchEntityInfo match={match} />
+        </div>
+
+        <div className="border-t border-white/[0.06] pt-md">
+          <MatchEvidenceBars layers={match.layers} />
+        </div>
+
+        {match.explanation && (
+          <p className="sf-caption text-white/50 italic">
+            {match.explanation}
+          </p>
+        )}
+
+        <div className="border-t border-white/[0.06] pt-md">
+          <MatchMetadata metadata={match.metadata} />
+        </div>
+      </div>
+    </Card>
+    </div>
+  )
+}

package/src/components/screening/ScreeningResults.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { ScreeningResults } from './ScreeningResults'
+
+const mockResults = [
+  { name: 'John Doe', confidence: 0.95 },
+  { name: 'Jane Smith', confidence: 0.72 },
+]
+
+describe('ScreeningResults', () => {
+  it('renders results title', () => {
+    render(<ScreeningResults results={mockResults} />)
+    expect(screen.getByText(/screening results/i)).toBeInTheDocument()
+  })
+
+  it('renders all result names', () => {
+    render(<ScreeningResults results={mockResults} />)
+    expect(screen.getByText('John Doe')).toBeInTheDocument()
+    expect(screen.getByText('Jane Smith')).toBeInTheDocument()
+  })
+
+  it('renders match description for each result', () => {
+    render(<ScreeningResults results={mockResults} />)
+    const matches = screen.getAllByText(/match found/i)
+    expect(matches).toHaveLength(2)
+  })
+
+  it('renders empty list for no results', () => {
+    const { container } = render(<ScreeningResults results={[]} />)
+    expect(container.querySelectorAll('[class*="space-y-md"] > div')).toHaveLength(0)
+  })
+
+  it('renders one result correctly', () => {
+    render(<ScreeningResults results={[{ name: 'Solo', confidence: 0.5 }]} />)
+    expect(screen.getByText('Solo')).toBeInTheDocument()
+  })
+})

package/src/components/screening/ScreeningResults.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScreeningResultCard } from './ScreeningResultCard';
+
+interface Result {
+  name: string;
+  confidence: number;
+}
+
+interface ResultsProps {
+  results: Result[];
+  processingTime?: number;
+}
+
+export function ScreeningResults({ results, processingTime }: ResultsProps) {
+  const { t } = useTranslation('screening');
+
+  return (
+    <div className="mt-xxl">
+      <div className="flex items-center justify-between mb-lg">
+        <h2 className="sf-headline text-xl">{t('results.title')}</h2>
+        {processingTime !== undefined && (
+          <span className="badge-blue">{processingTime}ms</span>
+        )}
+      </div>
+      <div className="space-y-md">
+        {results.map((result, idx) => (
+          <ScreeningResultCard key={idx} result={result} index={idx} />
+        ))}
+      </div>
+    </div>
+  );
+}