amliq-dashboard 2.0.0

package/src/components/auth/LoginForm.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import SignInButtons from './SignInButtons';
+import AuthDivider from './AuthDivider';
+
+interface Props {
+  email: string;
+  password: string;
+  error: string;
+  loading: boolean;
+  onEmailChange: (v: string) => void;
+  onPasswordChange: (v: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+}
+
+export function LoginForm({ email, password, error, loading, onEmailChange, onPasswordChange, onSubmit }: Props) {
+  const { t } = useTranslation('auth');
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="text-center">
+        <h2 className="text-xl font-semibold text-white mb-2">{t('login.title')}</h2>
+        <p className="text-sm text-apple-label-secondary">{t('login.subtitle')}</p>
+      </div>
+
+      <SignInButtons action="sign_in" />
+      <AuthDivider />
+
+      {error && (
+        <div role="alert" className="p-3 bg-apple-red/10 border border-apple-red/20 rounded-apple-md">
+          <p className="text-apple-red text-sm">{error}</p>
+        </div>
+      )}
+
+      <form onSubmit={onSubmit} className="space-y-4">
+        <input type="email" value={email} onChange={(e) => onEmailChange(e.target.value)}
+          required aria-label="Email" autoComplete="email" pattern="[^\s@]+@[^\s@]+\.[^\s@]+"
+          placeholder={t('login.email_placeholder')} className="input-field w-full" />
+        <div>
+          <input type="password" value={password} onChange={(e) => onPasswordChange(e.target.value)}
+            required aria-label="Password" autoComplete="current-password"
+            placeholder={t('login.password_placeholder')} className="input-field w-full" />
+          <div className="flex justify-end mt-1.5">
+            <Link to="/forgot-password" className="text-xs text-apple-blue hover:underline cursor-pointer">
+              {t('login.forgot_password')}
+            </Link>
+          </div>
+        </div>
+        <button type="submit" disabled={loading} aria-busy={loading}
+          className="button-primary w-full text-center disabled:opacity-50">
+          {loading ? t('login.submitting') : t('login.submit')}
+        </button>
+      </form>
+
+      <p className="text-center text-xs text-apple-label-tertiary">
+        {t('login.no_account')}{' '}
+        <Link to="/signup" className="text-apple-blue hover:underline cursor-pointer">{t('login.start_trial')}</Link>
+      </p>
+    </div>
+  );
+}

package/src/components/auth/LoginLeftPanel.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Shield, Layers, Globe } from 'lucide-react';
+
+export function LoginLeftPanel() {
+  const { t } = useTranslation('auth');
+  const features = [
+    { icon: Shield, text: t('login_panel.feature_ai') },
+    { icon: Globe, text: t('login_panel.feature_lists', { listCount: 7 }) },
+    { icon: Layers, text: t('login_panel.feature_speed') },
+  ];
+
+  return (
+    <div className="hidden lg:flex lg:w-1/2 flex-col justify-center px-16 relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-apple-blue/8 via-transparent to-apple-green/5" />
+      <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-apple-blue/5 rounded-full blur-3xl" />
+      <div className="absolute bottom-1/3 right-1/4 w-48 h-48 bg-apple-green/5 rounded-full blur-3xl" />
+
+      <div className="relative z-10">
+        <Link to="/" className="flex items-center gap-2 mb-12">
+          <img src="/logo.svg" alt="AMLIQ" className="h-10 w-10" />
+        </Link>
+        <h1 className="text-4xl font-bold text-white tracking-tight mb-4">
+          {t('login_panel.welcome')}
+        </h1>
+        <p className="text-apple-label-secondary mb-10 max-w-md leading-relaxed">
+          {t('login_panel.description')}
+        </p>
+        <div className="space-y-5">
+          {features.map(({ icon: Icon, text }) => (
+            <div key={text} className="flex items-center gap-3">
+              <div className="flex items-center justify-center w-8 h-8 rounded-apple-md bg-apple-blue/10">
+                <Icon className="h-4 w-4 text-apple-blue" />
+              </div>
+              <span className="text-[14px] text-white">{text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/auth/PasswordStrength.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+interface PasswordStrengthProps {
+  password: string
+}
+
+export function PasswordStrength({ password }: PasswordStrengthProps) {
+  const hasLen = password.length >= 8
+  const hasUpper = /[A-Z]/.test(password)
+  const hasNum = /\d/.test(password)
+  const rules = [
+    { ok: hasLen, label: 'At least 8 characters' },
+    { ok: hasUpper, label: 'One uppercase letter' },
+    { ok: hasNum, label: 'One number' },
+  ]
+  if (!password) return null
+  return (
+    <ul className="mt-1.5 ml-1 space-y-0.5">
+      {rules.map(r => (
+        <li key={r.label} className={`text-xs ${r.ok ? 'text-apple-green' : 'text-apple-label-tertiary'}`}>
+          {r.ok ? '\u2713' : '\u2022'} {r.label}
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/components/auth/SignInButtons.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const btnBase = 'flex w-full items-center justify-center gap-3 rounded-lg border px-4 py-3 text-sm font-medium transition cursor-pointer'
+
+interface Props {
+  action: 'sign_in' | 'sign_up'
+}
+
+export default function SignInButtons({ action }: Props) {
+  const { t } = useTranslation('auth')
+  const apiBase = import.meta.env.VITE_API_URL || 'http://localhost:8080'
+  const tKey = action === 'sign_in' ? 'oauth.continue_with' : 'oauth.sign_up_with'
+
+  const handleOAuth = (provider: string) => {
+    window.location.href = `${apiBase}/auth/oauth/${provider}`
+  }
+
+  return (
+    <div className="space-y-3">
+      <button onClick={() => handleOAuth('google')}
+        className={`${btnBase} border-white/10 bg-white text-[#080B0F] hover:bg-gray-50`}>
+        <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
+        {t(tKey, { provider: 'Google' })}
+      </button>
+
+      <button onClick={() => handleOAuth('github')}
+        className={`${btnBase} border-white/10 bg-[#24292F] text-white hover:bg-[#32383F]`}>
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+        {t(tKey, { provider: 'GitHub' })}
+      </button>
+
+      <button onClick={() => handleOAuth('microsoft')}
+        className={`${btnBase} border-white/10 bg-[#2D2D30] text-white hover:bg-[#3A3A3D]`}>
+        <svg className="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.4 24H0V12.6h11.4V24z" fill="#00A4EF"/><path d="M24 24H12.6V12.6H24V24z" fill="#FFB900"/><path d="M11.4 11.4H0V0h11.4v11.4z" fill="#F25022"/><path d="M24 11.4H12.6V0H24v11.4z" fill="#7FBA00"/></svg>
+        {t(tKey, { provider: 'Microsoft' })}
+      </button>
+
+      <button onClick={() => handleOAuth('linkedin')}
+        className={`${btnBase} border-white/10 bg-[#2D2D30] text-white hover:bg-[#3A3A3D]`}>
+        <svg className="h-5 w-5" fill="#0A66C2" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+        {t(tKey, { provider: 'LinkedIn' })}
+      </button>
+    </div>
+  )
+}

package/src/components/auth/SignupLeftPanel.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { CheckCircle } from 'lucide-react'
+
+export function SignupLeftPanel() {
+  const { t } = useTranslation('auth')
+  const perks = [
+    t('signup_panel.perk_ai'),
+    t('signup_panel.perk_lists', { listCount: 7 }),
+    t('signup_panel.perk_compliance'),
+    t('signup_panel.perk_speed'),
+  ]
+  return (
+    <div className="hidden lg:flex lg:w-1/2 flex-col justify-center px-16 border-r border-white/10">
+      <Link to="/" className="mb-12">
+        <img src="/logo.svg" alt="AMLIQ" className="h-10 w-10" />
+      </Link>
+      <h1 className="text-4xl font-bold text-white tracking-tight mb-4">
+        {t('signup_panel.tagline')}
+      </h1>
+      <p className="text-apple-label-secondary mb-8 max-w-md leading-relaxed">
+        {t('signup_panel.description')}
+      </p>
+      <div className="space-y-4">
+        {perks.map((text) => (
+          <div key={text} className="flex items-center gap-3">
+            <CheckCircle className="h-4 w-4 text-apple-green shrink-0" />
+            <span className="text-sm text-white">{text}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/auth/countries.ts

@@ -0,0 +1,17 @@
+export const COUNTRIES = [
+  { code: 'US', name: 'United States' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'IL', name: 'Israel' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'FR', name: 'France' },
+  { code: 'CH', name: 'Switzerland' },
+  { code: 'SG', name: 'Singapore' },
+  { code: 'HK', name: 'Hong Kong' },
+  { code: 'AE', name: 'United Arab Emirates' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'NL', name: 'Netherlands' },
+  { code: 'LU', name: 'Luxembourg' },
+  { code: 'IE', name: 'Ireland' },
+]

package/src/components/charts/AreaChart.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { Card } from '../ui/Card';
+import type { ChartDataPoint } from '../../types';
+
+interface ChartProps {
+  title: string;
+  data: ChartDataPoint[];
+}
+
+export function AreaChartComponent({ title, data }: ChartProps) {
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{title}</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <AreaChart data={data}>
+          <defs>
+            <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#0A84FF" stopOpacity={0.35} />
+              <stop offset="50%" stopColor="#0A84FF" stopOpacity={0.1} />
+              <stop offset="100%" stopColor="#0A84FF" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id="strokeGrad" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0%" stopColor="#0A84FF" />
+              <stop offset="100%" stopColor="#00D4AA" />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke="rgba(255,255,255,0.04)" strokeDasharray="none" />
+          <XAxis dataKey="date" stroke="transparent" tick={{ fill: 'rgba(255,255,255,0.35)', fontSize: 11 }} tickLine={false} />
+          <YAxis stroke="transparent" tick={{ fill: 'rgba(255,255,255,0.35)', fontSize: 11 }} tickLine={false} />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'rgba(20,20,30,0.95)', border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: '12px', backdropFilter: 'blur(20px)', boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+            }}
+            labelStyle={{ color: '#FFFFFF', fontWeight: 600 }}
+            itemStyle={{ color: '#0A84FF' }}
+          />
+          <Area type="monotone" dataKey="value" stroke="url(#strokeGrad)" fillOpacity={1}
+            fill="url(#areaGrad)" strokeWidth={2.5} dot={false} activeDot={{ r: 5, fill: '#0A84FF', stroke: '#fff', strokeWidth: 2 }} />
+        </AreaChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

package/src/components/charts/BarChart.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { Card } from '../ui/Card';
+
+interface BarData {
+  level: string;
+  count: number;
+  percentage: number;
+}
+
+interface ChartProps {
+  title: string;
+  data: BarData[];
+}
+
+export function BarChartComponent({ title, data }: ChartProps) {
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{title}</h3>
+      <ResponsiveContainer width="100%" height={250}>
+        <BarChart data={data} layout="vertical">
+          <defs>
+            <linearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0%" stopColor="#0A84FF" stopOpacity={0.9} />
+              <stop offset="100%" stopColor="#00D4AA" stopOpacity={0.8} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke="rgba(255,255,255,0.04)" strokeDasharray="none" horizontal={false} />
+          <XAxis type="number" stroke="transparent"
+            tick={{ fill: 'rgba(255,255,255,0.35)', fontSize: 11 }} tickLine={false} />
+          <YAxis dataKey="level" type="category" stroke="transparent"
+            tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12, fontWeight: 500 }}
+            tickLine={false} width={80} />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: 'rgba(20,20,30,0.95)', border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: '12px', boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+            }}
+            labelStyle={{ color: '#FFFFFF', fontWeight: 600 }}
+            itemStyle={{ color: '#0A84FF' }}
+            cursor={{ fill: 'rgba(255,255,255,0.03)' }}
+          />
+          <Bar dataKey="count" fill="url(#barGrad)" radius={[0, 8, 8, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}

package/src/components/charts/DonutChart.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { PieChart, Pie, Cell, Legend, Tooltip, ResponsiveContainer } from 'recharts';
+import { Card } from '../ui/Card';
+
+interface DonutData {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface ChartProps {
+  title: string;
+  data: DonutData[];
+}
+
+export function DonutChart({ title, data }: ChartProps) {
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{title}</h3>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className="w-24 h-24 rounded-full bg-apple-blue/5 blur-2xl" />
+        </div>
+        <ResponsiveContainer width="100%" height={250}>
+          <PieChart>
+            <Pie data={data} cx="50%" cy="50%" innerRadius={60} outerRadius={90}
+              paddingAngle={3} dataKey="value" strokeWidth={0}>
+              {data.map((entry) => (
+                <Cell key={`cell-${entry.name}`} fill={entry.color} />
+              ))}
+            </Pie>
+            <Tooltip contentStyle={{
+              backgroundColor: 'rgba(20,20,30,0.95)', border: '1px solid rgba(255,255,255,0.1)',
+              borderRadius: '12px', boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+            }} />
+            <Legend wrapperStyle={{ paddingTop: '16px' }} iconType="circle" iconSize={8}
+              formatter={(value) => (
+                <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '12px', fontWeight: 500, letterSpacing: '0.02em' }}>
+                  {value}
+                </span>
+              )} />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}

package/src/components/compliance/CaseActions.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { api } from '../../api/client'
+
+interface Props {
+  caseId: string
+  status: string
+  validTransitions: string[]
+  onAction: () => void
+}
+
+const statusColors: Record<string, string> = {
+  in_review: 'bg-apple-blue',
+  escalated: 'bg-apple-orange',
+  pending_info: 'bg-apple-yellow text-black',
+  resolved: 'bg-apple-green',
+  false_positive: 'bg-apple-green',
+  true_match: 'bg-apple-red',
+  closed: 'bg-apple-bg-tertiary text-apple-label-secondary',
+}
+
+export function CaseActions({ caseId, status, validTransitions, onAction }: Props) {
+  const { t } = useTranslation('compliance')
+  const [comment, setComment] = useState('')
+  const [assignee, setAssignee] = useState('')
+
+  const handleTransition = async (toStatus: string) => {
+    await api.put(`/cases/${caseId}/transition`, { to_status: toStatus, comment })
+    setComment('')
+    onAction()
+  }
+
+  const handleAssign = async () => {
+    if (!assignee) return
+    await api.put(`/cases/${caseId}/assign`, { user_id: assignee })
+    setAssignee('')
+    onAction()
+  }
+
+  return (
+    <div className="mb-8">
+      <div className="flex gap-2 mb-4 flex-wrap">
+        {validTransitions.map(s => (
+          <button key={s} onClick={() => handleTransition(s)}
+            aria-label={`Transition to ${s}`}
+            className={`px-4 py-2 text-white rounded-apple-md text-sm cursor-pointer
+              transition-colors hover:opacity-80 focus-visible:outline-2
+              focus-visible:outline-offset-2 focus-visible:outline-apple-blue
+              ${statusColors[s] || 'bg-apple-blue'}`}>
+            {s.replace(/_/g, ' ')}
+          </button>
+        ))}
+      </div>
+      <div className="flex gap-2 mb-4">
+        <input value={comment} onChange={e => setComment(e.target.value)}
+          placeholder={t('case_detail.add_comment')}
+          className="flex-1 px-3 py-2 rounded-apple-md bg-apple-bg-secondary text-sm
+            border border-white/10 focus:outline-apple-blue" />
+      </div>
+      <div className="flex gap-2">
+        <input value={assignee} onChange={e => setAssignee(e.target.value)}
+          placeholder={t('case_detail.assign_to')}
+          className="px-3 py-2 rounded-apple-md bg-apple-bg-secondary text-sm
+            border border-white/10 focus:outline-apple-blue" />
+        <button onClick={handleAssign}
+          aria-label={t('case_detail.assign')}
+          className="px-4 py-2 bg-apple-blue text-white rounded-apple-md text-sm
+            cursor-pointer hover:opacity-80">
+          {t('case_detail.assign')}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/compliance/CaseTimeline.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { api } from '../../api/client'
+
+interface TimelineEvent {
+  id: number
+  event_type: string
+  actor: string
+  details: string
+  created_at: string
+}
+
+interface Comment {
+  id: string
+  content: string
+  created_at: string
+}
+
+interface Props {
+  caseId: string
+  comments: Comment[]
+}
+
+export function CaseTimeline({ caseId, comments }: Props) {
+  const { t } = useTranslation('compliance')
+  const [events, setEvents] = useState<TimelineEvent[]>([])
+
+  useEffect(() => {
+    api.get<{ events: TimelineEvent[] }>(`/cases/${caseId}/timeline`)
+      .then(d => setEvents(d?.events ?? []))
+      .catch(() => setEvents([]))
+  }, [caseId])
+
+  const allItems = [
+    ...events.map(e => ({ type: 'event' as const, time: e.created_at, data: e })),
+    ...comments.map(c => ({ type: 'comment' as const, time: c.created_at, data: c })),
+  ].sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+
+  return (
+    <div className="mt-8">
+      <h2 className="text-lg font-medium mb-4">{t('case_detail.timeline')}</h2>
+      <div className="space-y-3">
+        {allItems.map((item, i) => (
+          <div key={i} className="border-l-2 border-apple-blue/30 pl-4 py-2">
+            {item.type === 'event' ? (
+              <div>
+                <span className="text-xs font-medium text-apple-blue">{item.data.event_type}</span>
+                <p className="text-sm">{(item.data as TimelineEvent).details}</p>
+                <p className="text-xs text-apple-label-tertiary">
+                  {(item.data as TimelineEvent).actor} - {item.time}
+                </p>
+              </div>
+            ) : (
+              <div>
+                <span className="text-xs font-medium text-apple-green">Comment</span>
+                <p className="text-sm">{(item.data as Comment).content}</p>
+                <p className="text-xs text-apple-label-tertiary">{item.time}</p>
+              </div>
+            )}
+          </div>
+        ))}
+        {allItems.length === 0 && (
+          <p className="text-apple-label-secondary text-sm">{t('case_detail.no_activity')}</p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/compliance/MediaResultCard.tsx

@@ -0,0 +1,87 @@
+import { useTranslation } from 'react-i18next'
+
+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
+}
+
+interface Props {
+  hit: MediaHit
+  onReview: (id: string, status: string) => void
+}
+
+const categoryColors: Record<string, string> = {
+  financial_crime: 'bg-apple-red/20 text-apple-red',
+  money_laundering: 'bg-apple-red/20 text-apple-red',
+  terrorism: 'bg-apple-red/30 text-apple-red',
+  fraud: 'bg-apple-orange/20 text-apple-orange',
+  bribery_corruption: 'bg-apple-orange/20 text-apple-orange',
+  bribery: 'bg-apple-orange/20 text-apple-orange',
+  sanctions: 'bg-apple-red/20 text-apple-red',
+  tax_evasion: 'bg-apple-yellow/20 text-apple-yellow',
+  cybercrime: 'bg-apple-purple/20 text-apple-purple',
+  regulatory_action: 'bg-apple-blue/20 text-apple-blue',
+}
+
+function riskColor(score: number): string {
+  if (score >= 0.8) return 'text-apple-red'
+  if (score >= 0.5) return 'text-apple-orange'
+  return 'text-apple-green'
+}
+
+export function MediaResultCard({ hit, onReview }: Props) {
+  const { t } = useTranslation('compliance')
+  const cats = hit.categories ?? (hit.category ? [hit.category] : [])
+  const score = hit.risk_score ?? (hit.severity / 10)
+
+  return (
+    <div className="card-vibrancy p-4">
+      <div className="flex justify-between items-start mb-2">
+        <div className="flex-1">
+          <a href={hit.url} target="_blank" rel="noopener noreferrer"
+            aria-label={`${t('adverse_media.view_article')}: ${hit.title}`}
+            className="font-medium text-apple-blue hover:underline">
+            {hit.title}
+          </a>
+          {hit.entity_name && (
+            <span className="ml-2 text-xs text-apple-label-tertiary">{hit.entity_name}</span>
+          )}
+        </div>
+        <span className={`text-sm font-medium ${riskColor(score)}`}>
+          {(score * 100).toFixed(0)}%
+        </span>
+      </div>
+      {hit.snippet && <p className="text-sm text-apple-label-secondary mb-2">{hit.snippet}</p>}
+      <div className="flex gap-2 text-xs mb-3 flex-wrap">
+        {cats.map(c => (
+          <span key={c} className={`px-2 py-0.5 rounded ${
+            categoryColors[c] || 'bg-apple-bg-tertiary text-apple-label-secondary'}`}>
+            {c.replace(/_/g, ' ')}
+          </span>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <button onClick={() => onReview(hit.id, 'relevant')}
+          className="px-3 py-1 text-xs bg-apple-red/20 text-apple-red rounded cursor-pointer hover:opacity-80">
+          {t('adverse_media.relevant')}
+        </button>
+        <button onClick={() => onReview(hit.id, 'irrelevant')}
+          className="px-3 py-1 text-xs bg-apple-green/20 text-apple-green rounded cursor-pointer hover:opacity-80">
+          {t('adverse_media.irrelevant')}
+        </button>
+        <button onClick={() => onReview(hit.id, 'escalated')}
+          className="px-3 py-1 text-xs bg-apple-orange/20 text-apple-orange rounded cursor-pointer hover:opacity-80">
+          {t('adverse_media.escalate')}
+        </button>
+      </div>
+    </div>
+  )
+}