amliq-dashboard 2.0.0

package/src/pages/APIKeys.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect, useCallback } 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 { EmptyState } from '../components/ui/EmptyState'
+import { api } from '../api/client'
+
+interface APIKey {
+  id: string; product: string; prefix: string;
+  rate_limit: number; created_at: string; revoked: boolean;
+}
+
+export function APIKeys() {
+  const [keys, setKeys] = useState<APIKey[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [newKey, setNewKey] = useState('')
+  const [generating, setGenerating] = useState(false)
+
+  const load = useCallback(async () => {
+    try {
+      const d = await api.get<{ keys: APIKey[] }>('/keys')
+      setKeys(d?.keys ?? [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load keys')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const generate = async () => {
+    setGenerating(true); setNewKey(''); setError('')
+    try {
+      const d = await api.post<{ key: string }>('/keys', { product: 'api' })
+      setNewKey(d.key)
+      load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Generate failed')
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  const revoke = async (id: string) => {
+    if (!confirm('Revoke this key? This cannot be undone.')) return
+    try {
+      await api.del(`/keys/${id}`)
+      load()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Revoke failed')
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="API Keys" description="Generate and manage API keys for your integrations" />
+      <Card className="mb-lg">
+        <div className="flex items-center justify-between">
+          <p className="sf-body text-white/60">Generate a new API key for your application</p>
+          <Button onClick={generate} disabled={generating}>
+            {generating ? 'Generating...' : 'Generate Key'}
+          </Button>
+        </div>
+        {newKey && <NewKeyBanner keyValue={newKey} />}
+      </Card>
+
+      {error && <Card className="mb-lg"><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+      {loading && <LoadingSpinner />}
+      {!loading && keys.length === 0 && <EmptyState title="No API keys yet" />}
+
+      {!loading && keys.length > 0 && (
+        <Card>
+          {keys.map(k => (
+            <KeyRow key={k.id} apiKey={k} onRevoke={revoke} />
+          ))}
+        </Card>
+      )}
+    </div>
+  )
+}
+
+function NewKeyBanner({ keyValue }: { keyValue: string }) {
+  const [copied, setCopied] = useState(false)
+  const copy = () => { navigator.clipboard.writeText(keyValue); setCopied(true) }
+  return (
+    <div className="mt-lg p-lg rounded-apple-md bg-apple-green/10 border border-apple-green/20">
+      <p className="sf-caption text-apple-green font-semibold mb-sm">Key generated — save it now!</p>
+      <div className="flex items-center gap-md">
+        <code className="text-sm text-white bg-black/30 px-md py-sm rounded flex-1 font-mono truncate">{keyValue}</code>
+        <Button size="sm" onClick={copy}>{copied ? 'Copied!' : 'Copy'}</Button>
+      </div>
+    </div>
+  )
+}
+
+function KeyRow({ apiKey, onRevoke }: { apiKey: APIKey; onRevoke: (id: string) => void }) {
+  return (
+    <div className="flex items-center justify-between px-lg py-md border-b border-white/[0.04] last:border-0">
+      <div>
+        <code className="text-sm text-white/80 font-mono">{apiKey.prefix}</code>
+        <p className="sf-caption text-white/40 mt-xs">{new Date(apiKey.created_at).toLocaleDateString()}</p>
+      </div>
+      <div className="flex items-center gap-md">
+        <Badge color="blue" size="sm">{apiKey.product}</Badge>
+        {apiKey.revoked ? (
+          <Badge color="red" size="sm">Revoked</Badge>
+        ) : (
+          <button onClick={() => onRevoke(apiKey.id)}
+            className="text-apple-red/60 hover:text-apple-red text-sm cursor-pointer">Revoke</button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default APIKeys

package/src/pages/AddMonitorModal.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+interface Props { onClose: () => void; onAdd?: (p: { name: string; riskLevel: string; frequency: string }) => void; onCreated?: () => void; onUpdate?: () => void }
+export default function AddMonitorModal({ onClose, onAdd, onCreated }: Props) {
+  const [name, setName] = useState('');
+  const [risk, setRisk] = useState('medium');
+  const [freq, setFreq] = useState('daily');
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-zinc-900 border border-white/10 rounded-xl p-6 w-full max-w-md" onClick={e => e.stopPropagation()}>
+        <h2 className="text-white text-lg font-semibold mb-4">Add to Monitoring</h2>
+        <input value={name} onChange={e => setName(e.target.value)} placeholder="Entity name"
+          className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 text-sm text-white mb-3" />
+        <select value={risk} onChange={e => setRisk(e.target.value)}
+          className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 text-sm text-white mb-3">
+          <option value="low">Low Risk</option><option value="medium">Medium Risk</option>
+          <option value="high">High Risk</option><option value="critical">Critical</option>
+        </select>
+        <select value={freq} onChange={e => setFreq(e.target.value)}
+          className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 text-sm text-white mb-3">
+          <option value="realtime">Real-time</option><option value="daily">Daily</option><option value="weekly">Weekly</option>
+        </select>
+        <div className="flex gap-3 mt-4">
+          <button type="button" onClick={onClose} className="flex-1 px-4 py-2 border border-zinc-700 rounded text-sm text-zinc-300">Cancel</button>
+          <button type="button" onClick={() => { if (name) { onAdd?.({ name, riskLevel: risk, frequency: freq }); onCreated?.(); } }}
+            className="flex-1 px-4 py-2 bg-blue-600 rounded text-sm text-white">Add</button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/AdverseMedia.test.tsx

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

package/src/pages/AdverseMedia.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { api } from '../api/client'
+import { MediaResultCard } from '../components/compliance/MediaResultCard'
+
+interface MediaHit {
+  id: string
+  entity_name: string
+  category: string
+  categories: string[]
+  title: string
+  snippet: string
+  url: string
+  risk_score: number
+  severity: number
+  review_status: string
+  detected_at: string
+}
+
+const CATEGORIES = [
+  'fraud', 'money_laundering', 'terrorism', 'sanctions',
+  'bribery', 'tax_evasion', 'cybercrime', 'human_trafficking',
+  'drug_trafficking', 'corruption',
+]
+
+export function AdverseMedia() {
+  const { t } = useTranslation('compliance')
+  const [hits, setHits] = useState<MediaHit[]>([])
+  const [searchName, setSearchName] = useState('')
+  const [activeFilter, setActiveFilter] = useState<string | null>(null)
+
+  useEffect(() => {
+    api.get<{ hits: MediaHit[] }>('/media/unreviewed')
+      .then(d => setHits(d?.hits ?? []))
+      .catch(() => setHits([]))
+  }, [])
+
+  const handleScan = async () => {
+    if (!searchName.trim()) return
+    const d = await api.post<{ hits: MediaHit[] }>('/media/scan', { entity_name: searchName })
+    setHits(d?.hits ?? [])
+  }
+
+  const handleReview = async (hitId: string, status: string) => {
+    await api.put(`/media/results/${hitId}/review`, { status })
+    setHits(prev => prev.filter(h => h.id !== hitId))
+  }
+
+  const filtered = activeFilter
+    ? hits.filter(h => h.category === activeFilter || h.categories?.includes(activeFilter!))
+    : hits
+
+  return (
+    <div className="px-md py-lg sm:p-8 max-w-6xl mx-auto">
+      <h1 className="text-xl sm:text-2xl font-semibold mb-6">{t('adverse_media.title')}</h1>
+      <div className="flex flex-col sm:flex-row gap-2 mb-6">
+        <input value={searchName} onChange={e => setSearchName(e.target.value)}
+          placeholder={t('adverse_media.search_entity')}
+          className="flex-1 px-4 py-2 rounded-apple-md bg-apple-bg-secondary text-sm
+            border border-white/10 focus:outline-apple-blue"
+          onKeyDown={e => e.key === 'Enter' && handleScan()} />
+        <button onClick={handleScan} aria-label={t('adverse_media.scan')}
+          className="px-6 py-2 bg-apple-blue text-white rounded-apple-md text-sm
+            cursor-pointer hover:opacity-80">
+          {t('adverse_media.scan')}
+        </button>
+      </div>
+      <div className="flex gap-2 mb-6 flex-wrap">
+        {CATEGORIES.map(cat => (
+          <button key={cat} onClick={() => setActiveFilter(activeFilter === cat ? null : cat)}
+            className={`px-3 py-1 rounded-full text-xs cursor-pointer transition-colors
+              ${activeFilter === cat
+                ? 'bg-apple-blue text-white'
+                : 'bg-apple-bg-tertiary text-apple-label-secondary hover:bg-apple-bg-secondary'}`}>
+            {cat.replace(/_/g, ' ')}
+          </button>
+        ))}
+      </div>
+      <div className="space-y-3">
+        {filtered.map(h => (
+          <MediaResultCard key={h.id} hit={h} onReview={handleReview} />
+        ))}
+        {filtered.length === 0 && (
+          <p className="text-apple-label-secondary text-center py-8">{t('adverse_media.no_hits')}</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/pages/AlertDetailPage.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowLeft } from 'lucide-react';
+import { PageHeader } from '../components/layout/PageHeader';
+import { Card } from '../components/ui/Card';
+import { Button } from '../components/ui/Button';
+import { AlertActions } from '../components/alerts/AlertActions';
+import { AlertDetailSidebar } from '../components/alerts/AlertDetailSidebar';
+import { EntityDetailsCard } from '../components/alerts/EntityDetailsCard';
+import { NotesCard } from '../components/alerts/NotesCard';
+import { alertsApi } from '../api/alerts';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import type { Alert } from '../types';
+
+export function AlertDetailPage() {
+  const navigate = useNavigate();
+  const { t } = useTranslation('alerts');
+  const { id } = useParams();
+  const [alert, setAlert] = useState<Alert | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notes, setNotes] = useState('');
+
+  useEffect(() => {
+    if (!id) return;
+    alertsApi.get(id).then((a) => { setAlert(a); setNotes(a.notes || ''); })
+      .catch(() => setAlert(null))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <div className="flex justify-center h-96"><LoadingSpinner /></div>;
+  if (!alert) {
+    return (
+      <div>
+        <Button onClick={() => navigate('/alerts')} className="mb-lg">
+          <ArrowLeft className="w-4 h-4 mr-sm" /> Back
+        </Button>
+        <Card>{t('detail.not_found')}</Card>
+      </div>
+    );
+  }
+
+  const name = alert.entity?.name?.fullName || alert.id;
+
+  return (
+    <div>
+      <div className="mb-lg">
+        <Button variant="secondary" onClick={() => navigate('/alerts')}>
+          <ArrowLeft className="w-4 h-4 mr-sm" /> Back
+        </Button>
+      </div>
+      <PageHeader title={name} />
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-lg mb-xxl">
+        <div className="lg:col-span-2 space-y-lg">
+          <EntityDetailsCard alert={alert} />
+          <NotesCard notes={notes} onNotesChange={setNotes} />
+          <AlertActions onConfirm={() => {}} onFalsePositive={() => {}}
+            onEscalate={() => {}} onDraftAI={() => {}} />
+        </div>
+        <AlertDetailSidebar alert={alert} />
+      </div>
+    </div>
+  );
+}

package/src/pages/AlertQueue.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { AlertQueue } from './AlertQueue'
+import { createMockAlert } from '../test/utils'
+
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => vi.fn(),
+}))
+
+vi.mock('../hooks/useAlerts', () => ({
+  useAlerts: vi.fn(() => ({
+    alerts: [
+      createMockAlert({ id: '1', status: 'open', priority: 'critical' }),
+      createMockAlert({ id: '2', status: 'investigating', priority: 'high' }),
+      createMockAlert({ id: '3', status: 'resolved', priority: 'medium' }),
+    ],
+    loading: false,
+    error: null,
+    refetch: vi.fn(),
+    resolve: vi.fn(),
+  })),
+}))
+
+describe('AlertQueue', () => {
+  it('renders page title', () => {
+    render(<AlertQueue />)
+    expect(screen.getByText('Alert Queue')).toBeInTheDocument()
+  })
+
+  it('renders alert cards', async () => {
+    render(<AlertQueue />)
+    await waitFor(() => {
+      expect(screen.getAllByText(/John Doe/i).length).toBeGreaterThan(0)
+    })
+  })
+
+  it('renders alert filters component', () => {
+    render(<AlertQueue />)
+    expect(screen.getByText('Status')).toBeInTheDocument()
+    expect(screen.getByText('Priority')).toBeInTheDocument()
+  })
+
+  it('renders reset button in filters', () => {
+    render(<AlertQueue />)
+    expect(screen.getByRole('button', { name: /reset/i })).toBeInTheDocument()
+  })
+})

package/src/pages/AlertQueue.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ShieldAlert } from 'lucide-react';
+import { AlertCard } from '../components/alerts/AlertCard';
+import { AlertFilters } from '../components/alerts/AlertFilters';
+import { Button } from '../components/ui/Button';
+import { Badge } from '../components/ui/Badge';
+import { useAlerts } from '../hooks/useAlerts';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import { EmptyState } from '../components/ui/EmptyState';
+import type { AlertStatus, AlertPriority } from '../types';
+
+export function AlertQueue() {
+  const navigate = useNavigate();
+  const { t } = useTranslation('alerts');
+  const { alerts, loading, error } = useAlerts();
+  const [selectedStatus, setSelectedStatus] = useState<AlertStatus[]>([]);
+  const [selectedPriority, setSelectedPriority] = useState<AlertPriority[]>([]);
+
+  const filtered = alerts.filter((a) => {
+    if (selectedStatus.length && !selectedStatus.includes(a.status)) return false;
+    if (selectedPriority.length && !selectedPriority.includes(a.priority)) return false;
+    return true;
+  });
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>;
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-lg">
+      <div className="md:col-span-1 glass-panel rounded-apple-lg p-lg md:sticky md:top-24 md:self-start">
+        <AlertFilters
+          selectedStatus={selectedStatus} selectedPriority={selectedPriority}
+          onStatusChange={setSelectedStatus} onPriorityChange={setSelectedPriority}
+          onReset={() => { setSelectedStatus([]); setSelectedPriority([]); }}
+        />
+      </div>
+      <div className="md:col-span-3">
+        <div className="flex items-center gap-md mb-xxl">
+          <h1 className="sf-title gradient-text">{t('queue.title')}</h1>
+          <Badge color="red" size="sm">{filtered.length}</Badge>
+        </div>
+        {error && <p role="alert" className="text-apple-red mb-md">{error.message}</p>}
+        {filtered.length === 0 ? (
+          <EmptyState
+            title={t('queue.no_alerts')}
+            description={t('queue.all_clear')}
+            icon={<ShieldAlert className="w-16 h-16 mx-auto text-apple-green/40" />}
+            action={<Button onClick={() => navigate('/')}>Dashboard</Button>}
+          />
+        ) : (
+          <div className="space-y-md">
+            {filtered.map((alert) => (
+              <AlertCard key={alert.id} alert={alert} onClick={() => navigate(`/alerts/${alert.id}`)} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pages/Analytics.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageHeader } from '../components/layout/PageHeader';
+import { AreaChartComponent } from '../components/charts/AreaChart';
+import { DonutChart } from '../components/charts/DonutChart';
+import { BarChartComponent } from '../components/charts/BarChart';
+import { useAnalytics } from '../hooks/useAnalytics';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+
+export function Analytics() {
+  const { t } = useTranslation('analytics');
+  const { analytics, loading, error } = useAnalytics();
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>;
+  }
+
+  if (error) {
+    return <p className="text-apple-red sf-caption" role="alert">{error.message}</p>;
+  }
+
+  if (!analytics) {
+    return (
+      <div>
+        <PageHeader title={t('title')} description={t('description')} />
+        <div className="glass-panel rounded-apple-lg p-xxl text-center">
+          <p className="sf-body text-apple-label-secondary mb-sm">No screening data yet</p>
+          <p className="sf-caption text-apple-label-tertiary">Run your first screening to see analytics here.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-lg">
+      <PageHeader title={t('title')} description={t('description')} />
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-lg">
+        <div className="glass-panel rounded-apple-lg p-md glow-blue">
+          <AreaChartComponent title={t('charts.screening_volume')} data={analytics.screeningVolume} />
+        </div>
+        <div className="glass-panel rounded-apple-lg p-md glow-green">
+          <DonutChart title={t('charts.alert_disposition')} data={analytics.dispositionBreakdown} />
+        </div>
+      </div>
+      <div className="glass-panel rounded-apple-lg p-md glow-orange">
+        <BarChartComponent title={t('charts.risk_distribution')} data={analytics.riskDistribution} />
+      </div>
+    </div>
+  );
+}

package/src/pages/AuditTrail.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageHeader } from '../components/layout/PageHeader';
+import { Card } from '../components/ui/Card';
+import { Badge } from '../components/ui/Badge';
+import { useAudit } from '../hooks/useAudit';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+
+type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'gray' | 'purple'
+
+const actionColors: Record<string, BadgeColor> = {
+  screen_initiated: 'blue',
+  alert_created: 'orange',
+  alert_resolved: 'green',
+  config_updated: 'purple',
+  list_imported: 'blue',
+  export_generated: 'green',
+};
+
+export function AuditTrail() {
+  const { t } = useTranslation('audit');
+  const { entries, loading, error } = useAudit();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader title={t('title')} description={t('description')} />
+      {error && <p className="text-apple-red sf-caption mb-md" role="alert">{error.message}</p>}
+      <Card>
+        {entries.length === 0 && (
+          <div className="text-center py-xl">
+            <p className="sf-body text-apple-label-secondary mb-sm">No audit entries yet</p>
+            <p className="sf-caption text-apple-label-tertiary">Actions will be recorded here as you use the platform.</p>
+          </div>
+        )}
+        <div className="space-y-md">
+          {entries.map((entry) => (
+            <div key={entry.id} className="flex items-start justify-between p-md bg-apple-bg-tertiary rounded-apple-md">
+              <div className="flex-1">
+                <div className="flex items-center gap-md mb-xs">
+                  <Badge color={actionColors[entry.action] ?? 'gray'}>
+                    {entry.action.replace('_', ' ')}
+                  </Badge>
+                  <span className="sf-caption">{entry.actor}</span>
+                </div>
+                <p className="sf-body">{entry.target}</p>
+                <p className="sf-caption mt-xs">
+                  {new Date(entry.timestamp).toLocaleString()}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/pages/BatchJobs.tsx

@@ -0,0 +1,79 @@
+import React 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 { Upload } from 'lucide-react';
+import { useApi } from '../hooks/useApi';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import { Badge } from '../components/ui/Badge';
+import { api } from '../api/client';
+
+interface BatchJob {
+  batch_id: string;
+  status: string;
+  entity_count: number;
+  created_at: string;
+}
+
+type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'gray' | 'purple';
+const statusColors: Record<string, BadgeColor> = {
+  completed: 'green', running: 'blue',
+  pending: 'orange', failed: 'red',
+};
+
+export function BatchJobs() {
+  const { t } = useTranslation('batch');
+  const { data, loading, error } = useApi<{ jobs: BatchJob[] }>(
+    () => api.get('/batch'),
+  );
+  const jobs = data?.jobs ?? [];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title={t('title')}
+        description={t('description')}
+        action={
+          <Button variant="primary" className="flex items-center gap-sm">
+            <Upload className="w-4 h-4" />
+            {t('new_job')}
+          </Button>
+        }
+      />
+      {error && <p className="text-apple-red sf-caption mb-md">{error.message}</p>}
+      {jobs.length === 0 && !error && (
+        <Card>
+          <p className="text-center sf-body text-apple-label-secondary py-lg">
+            {t('no_jobs', { defaultValue: 'No batch jobs yet. Upload a file to start.' })}
+          </p>
+        </Card>
+      )}
+      <div className="space-y-md">
+        {jobs.map((job) => (
+          <Card key={job.batch_id}>
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="sf-headline">{job.batch_id}</h3>
+                <p className="sf-caption mt-xs">
+                  {job.entity_count} entities &bull; {new Date(job.created_at).toLocaleString()}
+                </p>
+              </div>
+              <Badge color={statusColors[job.status] ?? 'orange'}>
+                {job.status}
+              </Badge>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}