amliq-dashboard 2.0.0

package/src/pages/admin/Operations.tsx

@@ -0,0 +1,103 @@
+import { useState, useRef, useEffect } from 'react'
+import { Database, RefreshCw, Fingerprint, Globe, Wallet } from 'lucide-react'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { TerminalBar, TermLine, BlinkingCursor, now } from './opsTerminal'
+import { runTaskOp, runDirectOp } from './opsRunners'
+import type { LogLine } from './opsTerminal'
+
+const ops = [
+  { id: 'migrate', name: 'migrate', label: 'Run Migrations',
+    desc: 'Apply pending DB schema migrations', icon: Database,
+    endpoint: '/admin/ops/migrate', color: '#60A5FA', method: 'post' },
+  { id: 'seed', name: 'seed_extra', label: 'Seed Extra',
+    desc: 'Normalize & enrich entity metadata', icon: RefreshCw,
+    endpoint: '/admin/ops/seed', color: '#34D399', method: 'post' },
+  { id: 'sync-fp', name: 'sync_fingerprints', label: 'Sync Fingerprints',
+    desc: 'Rebuild search fingerprint index', icon: Fingerprint,
+    endpoint: '/admin/ops/sync-fingerprints', color: '#FBBF24', method: 'post' },
+  { id: 'sync-crypto', name: 'sync_crypto', label: 'Sync Crypto Wallets',
+    desc: 'Sync sanctioned wallet addresses (OFAC + NBCTF)', icon: Wallet,
+    endpoint: '/admin/ops/sync-crypto', color: '#A78BFA', method: 'post' },
+  { id: 'test-il', name: 'test_il_sources', label: 'Test IL Sources',
+    desc: 'Test connectivity to Israeli gov sanctions sources', icon: Globe,
+    endpoint: '/admin/ops/test-fetch', color: '#F472B6', method: 'get' },
+] as const
+
+export default function AdminOperations() {
+  const [lines, setLines] = useState<LogLine[]>([
+    { ts: now(), text: 'AMLIQ Admin Console v2.0 — ready', type: 'out' },
+  ])
+  const [running, setRunning] = useState<string | null>(null)
+  const termRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    termRef.current?.scrollTo(0, termRef.current.scrollHeight)
+  }, [lines])
+
+  const addLine = (text: string, type: LogLine['type'] = 'out') =>
+    setLines(prev => [...prev, { ts: now(), text, type }])
+
+  const runOp = async (op: typeof ops[number]) => {
+    if (running) return
+    setRunning(op.id)
+    addLine(`$ amliq ${op.name}`, 'cmd')
+    addLine(`Starting ${op.label}...`)
+    try {
+      if (op.method === 'get') {
+        await runDirectOp(op.endpoint, addLine)
+      } else {
+        await runTaskOp(op.endpoint, op.name, addLine)
+      }
+    } catch (err) {
+      addLine(err instanceof Error ? err.message : 'Request failed', 'err')
+    } finally {
+      setRunning(null)
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="Admin Operations"
+        description="System maintenance console (admin only)"
+      />
+      <div className="flex flex-wrap gap-sm mb-lg">
+        {ops.map(op => (
+          <OpButton key={op.id} op={op} running={running}
+            onClick={() => runOp(op)} />
+        ))}
+      </div>
+      <div className="rounded-apple-lg overflow-hidden border border-white/10"
+        style={{ background: '#0D1117' }}>
+        <TerminalBar />
+        <div ref={termRef}
+          className="p-md font-mono text-[13px] leading-relaxed overflow-y-auto
+            max-h-[60vh] min-h-[300px] scroll-smooth"
+          style={{ color: '#C9D1D9' }}>
+          {lines.map((line, i) => <TermLine key={i} line={line} />)}
+          {running && <BlinkingCursor />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function OpButton({ op, running, onClick }: {
+  op: typeof ops[number]; running: string | null; onClick: () => void
+}) {
+  const Icon = op.icon
+  const active = running === op.id
+  return (
+    <button onClick={onClick} disabled={running !== null}
+      className="flex items-center gap-sm px-lg py-sm rounded-apple-lg
+        border border-white/10 hover:border-white/20
+        disabled:opacity-40 disabled:cursor-not-allowed
+        transition-all cursor-pointer"
+      style={{ borderColor: active ? op.color : undefined }}>
+      <Icon className="w-4 h-4" style={{ color: op.color }} />
+      <span className="text-sm font-medium">{op.label}</span>
+      {active && <span className="w-2 h-2 rounded-full animate-pulse"
+        style={{ background: op.color }} />}
+    </button>
+  )
+}

package/src/pages/admin/ScheduledTasks.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect } from 'react'
+import { Clock, CheckCircle, XCircle, Loader } from 'lucide-react'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { Badge } from '../../components/ui/Badge'
+import { api } from '../../api/client'
+
+interface TaskEntry {
+  id: string
+  task_name: string
+  tenant_id?: string
+  trigger: string
+  status: 'running' | 'success' | 'failed' | 'canceled'
+  started_at: string
+  ended_at?: string
+  duration_ms: number
+  output?: string
+  error?: string
+  actor_id?: string
+}
+
+export default function ScheduledTasks() {
+  const [tasks, setTasks] = useState<TaskEntry[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const fetchTasks = () => {
+    api.get<{ tasks: TaskEntry[] }>('/admin/tasks?limit=100')
+      .then(d => setTasks(d?.tasks ?? []))
+      .catch(() => setTasks([]))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    fetchTasks()
+    const iv = setInterval(fetchTasks, 10_000)
+    return () => clearInterval(iv)
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title="Scheduled Tasks"
+        description={`${tasks.length} task executions`}
+      />
+
+      {/* Desktop table */}
+      <div className="hidden md:block glass-panel rounded-apple-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-apple-label-secondary border-b border-white/10">
+              <th className="px-lg py-md">Task</th>
+              <th className="px-lg py-md">Trigger</th>
+              <th className="px-lg py-md">Status</th>
+              <th className="px-lg py-md">Duration</th>
+              <th className="px-lg py-md">Started</th>
+              <th className="px-lg py-md">Output</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tasks.map(t => (
+              <TaskRow key={t.id} task={t} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile cards */}
+      <div className="md:hidden space-y-sm">
+        {tasks.map(t => (
+          <TaskCard key={t.id} task={t} />
+        ))}
+      </div>
+
+      {tasks.length === 0 && (
+        <p className="text-center py-xl text-apple-label-tertiary sf-body">
+          No task executions yet
+        </p>
+      )}
+    </div>
+  )
+}
+
+function TaskRow({ task }: { task: TaskEntry }) {
+  return (
+    <tr className="border-b border-white/5 hover:bg-white/5">
+      <td className="px-lg py-md font-medium">{task.task_name}</td>
+      <td className="px-lg py-md">
+        <Badge size="sm" color={task.trigger === 'manual' ? 'blue' : 'gray'}>
+          {task.trigger}
+        </Badge>
+      </td>
+      <td className="px-lg py-md"><StatusBadge status={task.status} /></td>
+      <td className="px-lg py-md">{formatDuration(task.duration_ms)}</td>
+      <td className="px-lg py-md text-apple-label-secondary text-xs">
+        {new Date(task.started_at).toLocaleString()}
+      </td>
+      <td className="px-lg py-md text-xs max-w-[200px] truncate">
+        {task.error || task.output || '—'}
+      </td>
+    </tr>
+  )
+}
+
+function TaskCard({ task }: { task: TaskEntry }) {
+  return (
+    <div className="glass-panel rounded-apple-lg p-lg">
+      <div className="flex items-center justify-between mb-sm">
+        <span className="font-medium text-sm">{task.task_name}</span>
+        <StatusBadge status={task.status} />
+      </div>
+      <div className="flex items-center gap-sm mb-xs">
+        <Badge size="sm" color={task.trigger === 'manual' ? 'blue' : 'gray'}>
+          {task.trigger}
+        </Badge>
+        <span className="sf-caption text-apple-label-secondary">
+          {formatDuration(task.duration_ms)}
+        </span>
+      </div>
+      {(task.output || task.error) && (
+        <p className="sf-caption text-apple-label-tertiary mt-xs truncate">
+          {task.error || task.output}
+        </p>
+      )}
+    </div>
+  )
+}
+
+function StatusBadge({ status }: { status: TaskEntry['status'] }) {
+  const map = {
+    running: { color: 'blue' as const, Icon: Loader },
+    success: { color: 'green' as const, Icon: CheckCircle },
+    failed:  { color: 'red' as const, Icon: XCircle },
+    canceled: { color: 'gray' as const, Icon: Clock },
+  }
+  const { color, Icon } = map[status] ?? map.canceled
+  return (
+    <Badge size="sm" color={color}>
+      <Icon className="w-3 h-3 mr-1 inline" />{status}
+    </Badge>
+  )
+}
+
+function formatDuration(ms: number): string {
+  if (!ms) return '—'
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}

package/src/pages/admin/SystemHealth.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageHeader } from '../../components/layout/PageHeader'
+
+interface HealthData { status: string; version: string; time: string }
+interface ReadyData { ready: boolean; database: string }
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8080'
+
+export function SystemHealth() {
+  const { t } = useTranslation('admin')
+  const [health, setHealth] = useState<HealthData | null>(null)
+  const [ready, setReady] = useState<ReadyData | null>(null)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    Promise.all([
+      fetch(`${API_BASE}/health`).then(r => r.json()),
+      fetch(`${API_BASE}/ready`).then(r => r.json()),
+    ])
+      .then(([h, r]) => {
+        setHealth(h.data ?? h ?? null)
+        setReady(r.data ?? r ?? null)
+      })
+      .catch(() => setError(t('health.fetch_error')))
+  }, [])
+
+  if (error) return <p className="p-xl text-apple-red sf-body">{error}</p>
+
+  return (
+    <div>
+      <PageHeader title={t('health.title')} />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-lg">
+        <StatusCard title={t('health.api_status')}
+          value={health?.status ?? 'loading'} ok={health?.status === 'healthy'} />
+        <StatusCard title={t('health.database')}
+          value={ready?.database ?? 'loading'} ok={ready?.database === 'connected'} />
+        <StatusCard title={t('health.version')}
+          value={health?.version ?? '-'} ok={true} />
+      </div>
+    </div>
+  )
+}
+
+function StatusCard({ title, value, ok }: {
+  title: string; value: string; ok: boolean
+}) {
+  const color = ok ? 'text-apple-green' : 'text-apple-red'
+  const bg = ok ? 'bg-apple-green/10' : 'bg-apple-red/10'
+  return (
+    <div className={`card-vibrancy p-xl ${bg}`}>
+      <p className="sf-caption mb-xs">{title}</p>
+      <p className={`sf-headline text-xl ${color}`}>{value}</p>
+    </div>
+  )
+}
+
+export default SystemHealth

package/src/pages/admin/TenantDetail.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { ScreeningSection, ConfigSection } from '../../components/admin/TenantCards'
+import { api } from '../../api/client'
+
+interface TenantInfo {
+  tenant: { ID: string; Name: string; DisplayName: string }
+  screening_count: number
+}
+
+export function TenantDetail() {
+  const { t } = useTranslation('admin')
+  const { id } = useParams<{ id: string }>()
+  const [data, setData] = useState<TenantInfo | null>(null)
+  const [threshold, setThreshold] = useState('75')
+
+  useEffect(() => {
+    api.get<TenantInfo>(`/admin/tenants/${id}`)
+      .then(d => setData(d))
+      .catch(() => setData(null))
+  }, [id])
+
+  const saveConfig = () => {
+    api.put(`/admin/tenants/${id}/config`, {
+      match_threshold: parseFloat(threshold) / 100,
+    })
+  }
+
+  if (!data) {
+    return (
+      <p className="sf-body p-xl" role="status" aria-live="polite">
+        {t('tenant_detail.loading')}
+      </p>
+    )
+  }
+
+  return (
+    <div>
+      <PageHeader
+        title={data.tenant.DisplayName}
+        description={data.tenant.ID}
+      />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-lg">
+        <ScreeningSection
+          label={t('tenant_detail.screening_history')}
+          count={data.screening_count}
+          t={t}
+        />
+        <ConfigSection
+          threshold={threshold}
+          setThreshold={setThreshold}
+          onSave={saveConfig}
+          t={t}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default TenantDetail

package/src/pages/admin/Tenants.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest'
+
+describe('AdminTenants', () => {
+  it('should have the correct page title', () => {
+    expect(true).toBe(true)
+  })
+
+  it('should filter tenants by search', () => {
+    const tenants = [
+      { id: '1', name: 'acme', display_name: 'Acme Corp' },
+      { id: '2', name: 'beta', display_name: 'Beta Inc' },
+    ]
+    const search = 'acme'
+    const filtered = tenants.filter(
+      t => t.name.includes(search) || t.display_name.toLowerCase().includes(search)
+    )
+    expect(filtered).toHaveLength(1)
+    expect(filtered[0].name).toBe('acme')
+  })
+})

package/src/pages/admin/Tenants.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { SearchField } from '../../components/ui/SearchField'
+import { api } from '../../api/client'
+
+interface TenantSummary {
+  id: string
+  name: string
+  display_name: string
+  created_at: string
+}
+
+export function AdminTenants() {
+  const { t } = useTranslation('admin')
+  const [tenants, setTenants] = useState<TenantSummary[]>([])
+  const [search, setSearch] = useState('')
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    api.get<{ tenants: TenantSummary[] }>('/admin/tenants')
+      .then(d => setTenants(d?.tenants ?? []))
+      .catch(() => setTenants([]))
+  }, [])
+
+  const q = search.toLowerCase()
+  const filtered = tenants.filter(
+    t => (t.name ?? '').toLowerCase().includes(q)
+      || (t.display_name ?? '').toLowerCase().includes(q)
+  )
+
+  return (
+    <div>
+      <PageHeader title={t('tenants.title')} />
+      <div className="mb-lg">
+        <SearchField
+          placeholder={t('tenants.search_placeholder')}
+          value={search}
+          onChange={setSearch}
+        />
+      </div>
+      <div className="card-vibrancy divide-y divide-white/10">
+        {filtered.map(t => (
+          <button key={t.id}
+            onClick={() => navigate(`/admin/tenants/${t.id}`)}
+            className="w-full text-left px-lg py-md flex items-center
+              justify-between hover:bg-white/5 transition-colors cursor-pointer">
+            <span className="sf-headline">{t.display_name || t.name}</span>
+            <span className="sf-caption">{t.id}</span>
+          </button>
+        ))}
+        {filtered.length === 0 && (
+          <p className="sf-caption text-center py-xl">
+            {t('tenants.search_placeholder')}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AdminTenants

package/src/pages/admin/opsRunners.ts

@@ -0,0 +1,81 @@
+import { api } from '../../api/client'
+import type { LogLine } from './opsTerminal'
+
+type AddLine = (text: string, type?: LogLine['type']) => void
+
+interface TaskEntry {
+  id: string
+  task_name: string
+  status: 'running' | 'success' | 'failed'
+  started_at: string
+  ended_at?: string
+  duration_ms: number
+  output?: string
+  error?: string
+}
+
+interface OpResult { task_id: string; message: string }
+
+interface FetchTestResult {
+  name: string; url: string; status: string
+  bytes: number; elapsed: string; error?: string
+}
+
+export async function runTaskOp(endpoint: string, name: string, addLine: AddLine) {
+  const res = await api.post<OpResult>(endpoint, {})
+  addLine(`Task queued: ${res?.task_id ?? 'unknown'}`)
+  addLine('Polling for result...')
+  await pollTask(res?.task_id ?? '', name, addLine)
+}
+
+export async function runDirectOp(endpoint: string, addLine: AddLine) {
+  const data = await api.get<{ results: FetchTestResult[]; total: number }>(endpoint)
+  if (!data?.results) {
+    addLine('No results returned', 'err')
+    return
+  }
+  addLine(`Testing ${data.total} Israeli gov sources...`)
+  addLine('')
+  for (const r of data.results) {
+    if (r.status === 'OK') {
+      addLine(`OK   ${r.name}: ${r.bytes} bytes (${r.elapsed})`, 'ok')
+    } else {
+      addLine(`FAIL ${r.name}: ${r.error ?? 'unknown'} (${r.elapsed})`, 'err')
+    }
+  }
+  addLine('')
+  const ok = data.results.filter(r => r.status === 'OK').length
+  const fail = data.results.length - ok
+  if (fail === 0) {
+    addLine(`All ${ok} sources reachable`, 'ok')
+  } else {
+    addLine(`${ok} OK, ${fail} FAILED out of ${data.results.length}`, 'err')
+  }
+}
+
+async function pollTask(taskId: string, taskName: string, addLine: AddLine) {
+  for (let i = 0; i < 30; i++) {
+    await new Promise(r => setTimeout(r, 2000))
+    try {
+      const data = await api.get<{ tasks: TaskEntry[] }>('/admin/tasks?limit=20')
+      const task = (data?.tasks ?? []).find(t => t.id === taskId)
+      if (!task) { addLine(`Waiting for ${taskName}...`); continue }
+      if (task.status === 'running') {
+        addLine(`[${taskName}] still running... (${(i + 1) * 2}s)`)
+        continue
+      }
+      if (task.status === 'success') {
+        if (task.output) addLine(task.output)
+        addLine(`[${taskName}] completed in ${task.duration_ms}ms`, 'ok')
+        return
+      }
+      if (task.status === 'failed') {
+        addLine(`[${taskName}] FAILED: ${task.error || 'unknown'}`, 'err')
+        return
+      }
+    } catch {
+      addLine('Poll error, retrying...', 'err')
+    }
+  }
+  addLine(`[${taskName}] timed out after 60s`, 'err')
+}

package/src/pages/admin/opsTerminal.tsx

@@ -0,0 +1,63 @@
+import { ChevronRight, Terminal } from 'lucide-react'
+
+export type LogLine = {
+  ts: string
+  text: string
+  type: 'cmd' | 'out' | 'err' | 'ok'
+}
+
+export function TerminalBar() {
+  return (
+    <div className="flex items-center gap-sm px-md py-sm border-b border-white/10"
+      style={{ background: '#161B22' }}>
+      <div className="flex gap-[6px]">
+        <span className="w-3 h-3 rounded-full bg-[#FF5F56]" />
+        <span className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
+        <span className="w-3 h-3 rounded-full bg-[#27C93F]" />
+      </div>
+      <div className="flex items-center gap-xs ml-md">
+        <Terminal className="w-3.5 h-3.5 text-white/40" />
+        <span className="text-xs text-white/40 font-mono">amliq-admin</span>
+      </div>
+    </div>
+  )
+}
+
+export function TermLine({ line }: { line: LogLine }) {
+  const colors: Record<LogLine['type'], string> = {
+    cmd: '#58A6FF', out: '#C9D1D9', err: '#F85149', ok: '#3FB950',
+  }
+  return (
+    <div className="flex gap-sm items-start">
+      <span className="text-white/20 text-[11px] shrink-0 select-none w-[52px] text-right">
+        {line.ts}
+      </span>
+      {line.type === 'cmd' && (
+        <ChevronRight className="w-3.5 h-3.5 shrink-0 mt-[2px]"
+          style={{ color: '#3FB950' }} />
+      )}
+      <span style={{ color: colors[line.type] }}
+        className={line.type === 'cmd' ? 'font-semibold' : ''}>
+        {line.text}
+      </span>
+    </div>
+  )
+}
+
+export function BlinkingCursor() {
+  return (
+    <div className="flex gap-sm items-center mt-xs">
+      <span className="text-white/20 text-[11px] w-[52px] text-right select-none">
+        {now()}
+      </span>
+      <ChevronRight className="w-3.5 h-3.5 text-[#3FB950]" />
+      <span className="w-2 h-4 bg-[#58A6FF] animate-pulse rounded-sm" />
+    </div>
+  )
+}
+
+export function now() {
+  return new Date().toLocaleTimeString('en-US', {
+    hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit',
+  })
+}

package/src/pages/billing/ActiveSubscriptions.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getSubscriptions } from '../../api/billing'
+import { SubscriptionCard } from './SubscriptionCard'
+import { Subscription } from '../../types/billing'
+
+export function ActiveSubscriptions() {
+  const { t } = useTranslation('billing')
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getSubscriptions()
+      .then(subs => setSubscriptions(Array.isArray(subs) ? subs : []))
+      .catch(() => setSubscriptions([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return <div className="sf-body text-apple-label-secondary">{t('subscriptions.loading')}</div>
+  }
+
+  if (subscriptions.length === 0) {
+    return (
+      <div className="text-center py-lg rounded-apple-lg border border-white/10 bg-white/5">
+        <p className="sf-body text-apple-label-secondary mb-md">{t('subscriptions.no_subscriptions')}</p>
+        <button className="px-lg py-sm bg-apple-blue hover:bg-apple-blue/80 text-white rounded-apple-md sf-body transition-colors cursor-pointer">
+          {t('add_product')}
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-lg">
+      {subscriptions.map(sub => (
+        <SubscriptionCard key={sub.id} subscription={sub} />
+      ))}
+    </div>
+  )
+}