amliq-dashboard 2.0.0

package/src/pages/TxnScreening.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react'
+import { PageHeader } from '../components/layout/PageHeader'
+import { Card } from '../components/ui/Card'
+import { Button } from '../components/ui/Button'
+import { Badge } from '../components/ui/Badge'
+import { LoadingSpinner } from '../components/ui/LoadingSpinner'
+import { api } from '../api/client'
+
+interface TxnResult {
+  decision: string; txn_id: string; risk_flags: string[];
+  sender_hits: any[]; receiver_hits: any[];
+  case_id: string; processing_ms: number;
+}
+
+export function TxnScreening() {
+  const [form, setForm] = useState({
+    txn_id: '', sender_name: '', sender_country: '',
+    receiver_name: '', receiver_country: '',
+    amount_cents: 0, currency: 'USD',
+  })
+  const [result, setResult] = useState<TxnResult | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const set = (k: string, v: string | number) => setForm({ ...form, [k]: v })
+
+  const screen = async () => {
+    if (!form.sender_name.trim()) return
+    setLoading(true); setError(''); setResult(null)
+    try {
+      const d = await api.post<TxnResult>('/txn/screen', form)
+      setResult(d)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Screening failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="Transaction Screening"
+        description="Screen payment sender & receiver against sanctions + FATF lists" />
+      <Card className="mb-lg">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-md mb-md">
+          <input placeholder="Sender name *" value={form.sender_name}
+            onChange={e => set('sender_name', e.target.value)} className="input-field" />
+          <input placeholder="Sender country (e.g. IR)" value={form.sender_country}
+            onChange={e => set('sender_country', e.target.value)} className="input-field" />
+          <input placeholder="Receiver name" value={form.receiver_name}
+            onChange={e => set('receiver_name', e.target.value)} className="input-field" />
+          <input placeholder="Receiver country" value={form.receiver_country}
+            onChange={e => set('receiver_country', e.target.value)} className="input-field" />
+          <input placeholder="Amount (cents)" type="number" value={form.amount_cents || ''}
+            onChange={e => set('amount_cents', +e.target.value)} className="input-field" />
+          <select value={form.currency} onChange={e => set('currency', e.target.value)} className="input-field">
+            {['USD', 'EUR', 'GBP', 'ILS', 'CHF', 'JPY'].map(c => <option key={c}>{c}</option>)}
+          </select>
+        </div>
+        <Button onClick={screen} disabled={loading || !form.sender_name.trim()} className="w-full">
+          {loading ? 'Screening...' : 'Screen Transaction'}
+        </Button>
+      </Card>
+
+      {loading && <LoadingSpinner />}
+      {error && <Card><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+      {result && <TxnResultCard result={result} />}
+    </div>
+  )
+}
+
+function TxnResultCard({ result }: { result: TxnResult }) {
+  const isClear = result.decision === 'CLEAR'
+  return (
+    <Card>
+      <div className="flex items-center justify-between mb-lg">
+        <span className={`text-2xl font-bold ${isClear ? 'text-apple-green' : 'text-apple-red'}`}>
+          {result.decision}
+        </span>
+        <span className="sf-caption text-white/40">{result.processing_ms}ms</span>
+      </div>
+
+      {result.risk_flags?.length > 0 && (
+        <div className="flex flex-wrap gap-sm mb-lg">
+          {result.risk_flags.map(f => <Badge key={f} color="red" size="sm">{f}</Badge>)}
+        </div>
+      )}
+
+      {result.case_id && (
+        <div className="p-md bg-apple-orange/10 border border-apple-orange/20 rounded-apple-md mb-lg">
+          <p className="sf-caption text-apple-orange">Case auto-created: <strong>{result.case_id}</strong></p>
+        </div>
+      )}
+
+      {result.sender_hits?.length > 0 && <HitsSection title="Sender Matches" hits={result.sender_hits} />}
+      {result.receiver_hits?.length > 0 && <HitsSection title="Receiver Matches" hits={result.receiver_hits} />}
+
+      {isClear && (
+        <div className="text-center py-lg">
+          <span className="text-3xl">✓</span>
+          <p className="sf-headline text-apple-green mt-sm">Transaction cleared</p>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+function HitsSection({ title, hits }: { title: string; hits: any[] }) {
+  return (
+    <div className="mb-lg">
+      <p className="sf-caption text-white/50 mb-sm">{title}</p>
+      {hits.map((h: any, i: number) => (
+        <div key={i} className="p-md bg-apple-red/5 border border-apple-red/10 rounded-apple-md mb-sm">
+          <p className="sf-headline">{h.entity_name}</p>
+          <div className="flex gap-sm mt-xs">
+            <Badge color="red" size="sm">{h.list_id}</Badge>
+            <Badge color="blue" size="sm">{Math.round((h.confidence ?? 0) * 100)}%</Badge>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default TxnScreening

package/src/pages/UBOChain.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import { UBOChain } from './UBOChain'
+
+beforeEach(() => {
+  global.fetch = vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({
+        data: {
+          owners: [
+            { id: 'ubo_1', owner_name: 'Jane Smith', nationality: 'US',
+              ownership_pct: 30, is_direct_owner: true, is_pep: false },
+          ],
+          total_ownership_pct: 30,
+        },
+      }),
+    })
+  ) as any
+})
+
+describe('UBOChain', () => {
+  it('renders title after load', async () => {
+    render(
+      <MemoryRouter initialEntries={['/compliance/ubo/org_1']}>
+        <Routes>
+          <Route path="/compliance/ubo/:id" element={<UBOChain />} />
+        </Routes>
+      </MemoryRouter>
+    )
+    await waitFor(() => {
+      expect(screen.getByText('Beneficial Ownership')).toBeInTheDocument()
+    })
+  })
+})

package/src/pages/UBOChain.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { api } from '../api/client'
+
+interface Owner {
+  id: string
+  owner_name: string
+  nationality: string
+  ownership_pct: number
+  is_direct_owner: boolean
+  is_pep: boolean
+}
+
+export function UBOChain() {
+  const { t } = useTranslation('compliance')
+  const { id } = useParams<{ id: string }>()
+  const [owners, setOwners] = useState<Owner[]>([])
+  const [totalPct, setTotalPct] = useState(0)
+
+  useEffect(() => {
+    if (!id) return
+    api.get<{ owners: Owner[]; total_ownership_pct: number }>(`/ubo/${id}`)
+      .then(d => {
+        setOwners(d?.owners ?? [])
+        setTotalPct(d?.total_ownership_pct ?? 0)
+      })
+      .catch(() => { setOwners([]); setTotalPct(0) })
+  }, [id])
+
+  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('ubo.title')}</h1>
+      <p className="text-apple-label-secondary mb-6">{t('ubo.organization')} {id}</p>
+      <div className="card-vibrancy p-6 mb-4">
+        <div className="flex justify-between items-center mb-4">
+          <span className="text-sm text-apple-label-secondary">{t('ubo.total_identified')}</span>
+          <span className="text-lg font-bold">{totalPct.toFixed(1)}%</span>
+        </div>
+        <div className="w-full bg-apple-bg-tertiary rounded-full h-3 mb-6">
+          <div className="bg-apple-blue h-3 rounded-full"
+            style={{ width: `${Math.min(totalPct, 100)}%` }} />
+        </div>
+        {owners.map(o => (
+          <div key={o.id} className="flex flex-col sm:flex-row sm:items-center justify-between py-3 border-b border-white/10 gap-xs">
+            <div>
+              <p className="font-medium">{o.owner_name}</p>
+              <p className="text-xs text-apple-label-secondary">
+                {o.nationality} {o.is_direct_owner ? t('ubo.direct') : t('ubo.indirect')}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              {o.is_pep && (
+                <span className="text-xs px-2 py-0.5 bg-apple-orange/20 text-apple-orange rounded">
+                  {t('ubo.pep_badge')}
+                </span>
+              )}
+              <span className="font-mono text-sm">{o.ownership_pct}%</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/pages/Webhooks.tsx

@@ -0,0 +1,137 @@
+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 Webhook {
+  id: string; url: string; events: string[]; active: boolean; created_at: string;
+}
+
+const EVENT_TYPES = [
+  'screening.completed', 'screening.match_found',
+  'alert.created', 'alert.resolved',
+  'case.created', 'case.escalated',
+  'list.updated', 'entity.added', 'entity.removed',
+]
+
+export function Webhooks() {
+  const [hooks, setHooks] = useState<Webhook[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showForm, setShowForm] = useState(false)
+
+  const load = useCallback(async () => {
+    try {
+      const d = await api.get<{ subscriptions: Webhook[] }>('/webhooks/subscriptions')
+      setHooks(d?.subscriptions ?? [])
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const remove = async (id: string) => {
+    if (!confirm('Delete this webhook?')) return
+    try { await api.del(`/webhooks/subscriptions/${id}`); load() }
+    catch (err) { setError(err instanceof Error ? err.message : 'Delete failed') }
+  }
+
+  const test = async () => {
+    try {
+      await api.post('/webhooks/test', {})
+      alert('Test webhook sent!')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Test failed')
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="Webhooks" description="Receive real-time notifications when events occur" />
+      <Card className="mb-lg">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-md">
+          <p className="sf-body text-white/60">Get notified on screening matches, alerts, and list updates</p>
+          <div className="flex gap-sm w-full sm:w-auto">
+            <Button variant="secondary" onClick={test} className="flex-1 sm:flex-none">Test</Button>
+            <Button onClick={() => setShowForm(true)} className="flex-1 sm:flex-none">Add Webhook</Button>
+          </div>
+        </div>
+      </Card>
+
+      {showForm && <WebhookForm onSave={() => { setShowForm(false); load() }}
+        onCancel={() => setShowForm(false)} setError={setError} />}
+
+      {error && <Card className="mb-lg"><p role="alert" className="text-apple-red sf-body">{error}</p></Card>}
+      {loading && <LoadingSpinner />}
+      {!loading && hooks.length === 0 && !showForm && <EmptyState title="No webhooks configured" />}
+
+      {!loading && hooks.length > 0 && (
+        <Card>
+          {hooks.map(h => (
+            <div key={h.id} className="flex flex-col sm:flex-row sm:items-center justify-between px-lg py-md border-b border-white/[0.04] last:border-0 gap-sm">
+              <div className="min-w-0 flex-1">
+                <code className="text-sm text-white/80 break-all block">{h.url}</code>
+                <div className="flex gap-xs mt-xs flex-wrap">
+                  {(h.events ?? []).map(e => <Badge key={e} size="sm" color="blue">{e}</Badge>)}
+                </div>
+              </div>
+              <button onClick={() => remove(h.id)}
+                className="text-apple-red/60 hover:text-apple-red text-sm cursor-pointer self-end sm:self-center shrink-0">Delete</button>
+            </div>
+          ))}
+        </Card>
+      )}
+    </div>
+  )
+}
+
+function WebhookForm({ onSave, onCancel, setError }: {
+  onSave: () => void; onCancel: () => void; setError: (e: string) => void
+}) {
+  const [url, setUrl] = useState('')
+  const [events, setEvents] = useState<string[]>(['screening.match_found'])
+  const [saving, setSaving] = useState(false)
+
+  const toggle = (evt: string) =>
+    setEvents(events.includes(evt) ? events.filter(e => e !== evt) : [...events, evt])
+
+  const save = async () => {
+    if (!url.trim()) return
+    setSaving(true)
+    try { await api.post('/webhooks/subscribe', { url, events }); onSave() }
+    catch (err) { setError(err instanceof Error ? err.message : 'Save failed') }
+    finally { setSaving(false) }
+  }
+
+  return (
+    <Card className="mb-lg">
+      <input value={url} onChange={e => setUrl(e.target.value)}
+        placeholder="https://your-server.com/webhook" className="input-field w-full mb-md" />
+      <p className="sf-caption text-white/50 mb-sm">Events:</p>
+      <div className="flex flex-wrap gap-sm mb-lg">
+        {EVENT_TYPES.map(evt => (
+          <button key={evt} onClick={() => toggle(evt)}
+            className={`px-md py-xs rounded-full text-xs cursor-pointer transition-colors ${
+              events.includes(evt) ? 'bg-apple-blue text-white' : 'bg-white/[0.04] text-white/50'}`}>
+            {evt}
+          </button>
+        ))}
+      </div>
+      <div className="flex gap-sm">
+        <Button onClick={save} disabled={saving || !url.trim()}>
+          {saving ? 'Saving...' : 'Save'}
+        </Button>
+        <Button variant="secondary" onClick={onCancel}>Cancel</Button>
+      </div>
+    </Card>
+  )
+}
+
+export default Webhooks

package/src/pages/admin/DataSources.tsx

@@ -0,0 +1,230 @@
+import { useEffect, useState, useRef } from 'react'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { Card } from '../../components/ui/Card'
+import { Button } from '../../components/ui/Button'
+import { Badge } from '../../components/ui/Badge'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { api } from '../../api/client'
+
+interface LoadedSource {
+  list_id: string
+  count: number
+}
+
+interface SourcesData {
+  loaded: LoadedSource[]
+  total_entities: number
+  total_peps: number
+  total_profiles: number
+  available_count: number
+}
+
+interface UploadResult {
+  filename: string
+  list_id: string
+  imported: number
+  parsed: number
+}
+
+export function DataSources() {
+  const [data, setData] = useState<SourcesData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [uploading, setUploading] = useState(false)
+  const [uploadResult, setUploadResult] = useState<UploadResult | null>(null)
+  const [error, setError] = useState('')
+  const [refreshing, setRefreshing] = useState(false)
+  const fileRef = useRef<HTMLInputElement>(null!)
+  const [listId, setListId] = useState('icij_offshore')
+
+  const fetchSources = async () => {
+    try {
+      const d = await api.get<SourcesData>('/admin/data-sources')
+      setData(d)
+    } catch {
+      setError('Failed to load data sources')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => { fetchSources() }, [])
+
+  const handleUpload = async () => {
+    const file = fileRef.current?.files?.[0]
+    if (!file) return
+    setUploading(true)
+    setUploadResult(null)
+    setError('')
+    try {
+      const form = new FormData()
+      form.append('file', file)
+      form.append('list_id', listId)
+      const resp = await uploadFile(form)
+      setUploadResult(resp)
+      fetchSources()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Upload failed')
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    try {
+      await api.post('/admin/lists/refresh', {})
+      fetchSources()
+    } catch {
+      setError('Refresh failed')
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  if (loading) return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>
+
+  return (
+    <div>
+      <PageHeader
+        title="Data Sources"
+        description="Manage sanctions lists, PEP databases, and custom entity sources"
+      />
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-lg mb-xl">
+        <StatCard label="Total Entities" value={data?.total_entities ?? 0} />
+        <StatCard label="PEP Profiles" value={data?.total_peps ?? 0} />
+        <StatCard label="Total Profiles" value={data?.total_profiles ?? 0} color="blue" />
+        <StatCard label="Active Lists" value={data?.loaded?.length ?? 0} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-lg">
+        <div className="lg:col-span-2">
+          <SourcesTable sources={data?.loaded ?? []} />
+        </div>
+        <div className="space-y-lg">
+          <UploadCard
+            fileRef={fileRef}
+            listId={listId}
+            setListId={setListId}
+            uploading={uploading}
+            onUpload={handleUpload}
+            result={uploadResult}
+          />
+          <Card>
+            <h3 className="sf-headline mb-md">Sync Lists</h3>
+            <p className="sf-caption text-white/60 mb-lg">
+              Re-download all sanctions lists from official sources
+            </p>
+            <Button onClick={handleRefresh} disabled={refreshing} className="w-full">
+              {refreshing ? 'Syncing...' : 'Sync All Lists'}
+            </Button>
+          </Card>
+        </div>
+      </div>
+
+      {error && (
+        <Card className="mt-lg">
+          <p className="text-apple-red sf-body">{error}</p>
+        </Card>
+      )}
+    </div>
+  )
+}
+
+function StatCard({ label, value, color = 'green' }: {
+  label: string; value: number; color?: string
+}) {
+  const cls = color === 'blue' ? 'text-apple-blue' : 'text-apple-green'
+  return (
+    <Card>
+      <p className="sf-caption text-white/60">{label}</p>
+      <p className={`sf-headline text-2xl ${cls}`}>
+        {value.toLocaleString()}
+      </p>
+    </Card>
+  )
+}
+
+function SourcesTable({ sources }: { sources: LoadedSource[] }) {
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">Loaded Sources</h3>
+      <div className="space-y-sm">
+        {sources.map(s => (
+          <div key={s.list_id}
+            className="flex items-center justify-between p-md rounded-apple-md bg-white/[0.03]">
+            <div className="flex items-center gap-md">
+              <Badge color={s.list_id.startsWith('ofac') ? 'red' : 'blue'} size="sm">
+                {s.list_id}
+              </Badge>
+            </div>
+            <span className="sf-body font-semibold">
+              {s.count.toLocaleString()}
+            </span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}
+
+function UploadCard({ fileRef, listId, setListId, uploading, onUpload, result }: {
+  fileRef: React.RefObject<HTMLInputElement>
+  listId: string
+  setListId: (v: string) => void
+  uploading: boolean
+  onUpload: () => void
+  result: UploadResult | null
+}) {
+  return (
+    <Card>
+      <h3 className="sf-headline mb-md">Upload CSV</h3>
+      <p className="sf-caption text-white/60 mb-lg">
+        Import ICIJ, custom lists, or any CSV with entity names
+      </p>
+      <input
+        ref={fileRef}
+        type="file"
+        accept=".csv"
+        className="w-full mb-md text-sm text-white/60 file:mr-4 file:py-2 file:px-4
+          file:rounded-apple file:border-0 file:bg-apple-blue/20 file:text-apple-blue
+          file:font-semibold file:cursor-pointer"
+      />
+      <input
+        type="text"
+        value={listId}
+        onChange={e => setListId(e.target.value)}
+        placeholder="List ID (e.g. icij_offshore)"
+        className="input-field w-full mb-md"
+      />
+      <Button onClick={onUpload} disabled={uploading} className="w-full">
+        {uploading ? 'Uploading...' : 'Upload & Import'}
+      </Button>
+      {result && (
+        <div className="mt-md p-md rounded-apple-md bg-apple-green/10">
+          <p className="sf-caption text-apple-green">
+            Imported {result.imported.toLocaleString()} entities from {result.filename}
+          </p>
+        </div>
+      )}
+    </Card>
+  )
+}
+
+async function uploadFile(form: FormData): Promise<UploadResult> {
+  const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8080'
+  const token = localStorage.getItem('amliq_token')
+  const resp = await fetch(`${API_BASE}/api/v1/admin/data-sources/upload`, {
+    method: 'POST',
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+    body: form,
+  })
+  if (!resp.ok) {
+    const body = await resp.json().catch(() => ({}))
+    throw new Error(body.message || 'Upload failed')
+  }
+  const json = await resp.json()
+  return json.data ?? json
+}
+
+export default DataSources