amliq-dashboard 2.0.0

package/src/components/alerts/AlertActions.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CheckCircle2, XCircle, AlertTriangle, Zap } from 'lucide-react';
+import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
+
+interface AlertActionsProps {
+  onConfirm?: () => void;
+  onFalsePositive?: () => void;
+  onEscalate?: () => void;
+  onDraftAI?: () => void;
+  disabled?: boolean;
+}
+
+export function AlertActions({
+  onConfirm,
+  onFalsePositive,
+  onEscalate,
+  onDraftAI,
+  disabled,
+}: AlertActionsProps) {
+  const { t } = useTranslation('alerts');
+  const [showReason, setShowReason] = useState(false);
+
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('actions.title')}</h3>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-md">
+        <Button
+          variant="primary"
+          onClick={onConfirm}
+          disabled={disabled}
+          className="flex items-center justify-center gap-sm"
+        >
+          <CheckCircle2 className="w-4 h-4" />
+          <span className="hidden md:inline">{t('actions.confirm')}</span>
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={onFalsePositive}
+          disabled={disabled}
+          className="flex items-center justify-center gap-sm"
+        >
+          <XCircle className="w-4 h-4" />
+          <span className="hidden md:inline">{t('actions.false_positive')}</span>
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={onEscalate}
+          disabled={disabled}
+          className="flex items-center justify-center gap-sm"
+        >
+          <AlertTriangle className="w-4 h-4" />
+          <span className="hidden md:inline">{t('actions.escalate')}</span>
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={onDraftAI}
+          disabled={disabled}
+          className="flex items-center justify-center gap-sm"
+        >
+          <Zap className="w-4 h-4" />
+          <span className="hidden md:inline">{t('actions.ai_draft')}</span>
+        </Button>
+      </div>
+    </Card>
+  );
+}

package/src/components/alerts/AlertCard.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { AlertCard } from './AlertCard'
+import { createMockAlert } from '../../test/utils'
+
+describe('AlertCard', () => {
+  it('renders alert name', () => {
+    const alert = createMockAlert({
+      entity: {
+        id: 'ent1',
+        type: 'individual',
+        name: {
+          firstName: 'John',
+          lastName: 'Doe',
+          aliases: [],
+        },
+        identifiers: [],
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+    })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('John Doe')).toBeInTheDocument()
+  })
+
+  it('renders entity type', () => {
+    const alert = createMockAlert({ entity: { id: 'ent1', type: 'company', name: { firstName: '', lastName: '', aliases: [] }, identifiers: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() } })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('company')).toBeInTheDocument()
+  })
+
+  it('renders status badge', () => {
+    const alert = createMockAlert({ status: 'investigating' })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('Investigating')).toBeInTheDocument()
+  })
+
+  it('renders priority badge', () => {
+    const alert = createMockAlert({ priority: 'critical' })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('CRITICAL')).toBeInTheDocument()
+  })
+
+  it('renders risk level badge', () => {
+    const alert = createMockAlert({ riskLevel: 'high' })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('Risk: high')).toBeInTheDocument()
+  })
+
+  it('renders alert notes', () => {
+    const alert = createMockAlert({ notes: 'Suspicious transaction pattern detected' })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('Suspicious transaction pattern detected')).toBeInTheDocument()
+  })
+
+  it('renders matched count', () => {
+    const alert = createMockAlert({ matchedCount: 5 })
+    render(<AlertCard alert={alert} />)
+    expect(screen.getByText('5 matches')).toBeInTheDocument()
+  })
+
+  it('renders creation date', () => {
+    const dateStr = '2024-01-15T10:00:00.000Z'
+    const alert = createMockAlert({ createdAt: dateStr })
+    render(<AlertCard alert={alert} />)
+    const date = new Date(dateStr).toLocaleDateString()
+    expect(screen.getByText(date)).toBeInTheDocument()
+  })
+
+  it('calls onClick handler when clicked', async () => {
+    const handler = vi.fn()
+    const alert = createMockAlert()
+    render(<AlertCard alert={alert} onClick={handler} />)
+    await userEvent.click(screen.getByText(alert.entity.name.firstName + ' ' + alert.entity.name.lastName).closest('div')!)
+    expect(handler).toHaveBeenCalledOnce()
+  })
+
+  it('renders different risk level colors', () => {
+    const { rerender } = render(<AlertCard alert={createMockAlert({ riskLevel: 'critical' })} />)
+    expect(screen.getByText('Risk: critical')).toHaveClass('bg-apple-red/20', 'text-apple-red')
+
+    rerender(<AlertCard alert={createMockAlert({ riskLevel: 'low' })} />)
+    expect(screen.getByText('Risk: low')).toHaveClass('bg-apple-green/20', 'text-apple-green')
+  })
+})

package/src/components/alerts/AlertCard.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChevronRight } from 'lucide-react';
+import { Badge } from '../ui/Badge';
+import { StatusBadge } from '../data/StatusBadge';
+import type { Alert } from '../../types';
+
+interface AlertCardProps {
+  alert: Alert;
+  onClick?: () => void;
+}
+
+const borderColors: Record<string, string> = {
+  critical: 'border-l-apple-red',
+  high: 'border-l-apple-orange',
+  medium: 'border-l-apple-yellow',
+  low: 'border-l-apple-green',
+};
+
+const glowColors: Record<string, string> = {
+  critical: 'hover:shadow-[0_0_24px_rgba(255,69,58,0.12)]',
+  high: 'hover:shadow-[0_0_24px_rgba(255,159,10,0.12)]',
+  medium: 'hover:shadow-[0_0_20px_rgba(255,214,10,0.08)]',
+  low: 'hover:shadow-[0_0_20px_rgba(48,209,88,0.08)]',
+};
+
+const riskBadgeColor: Record<string, 'red' | 'orange' | 'green'> = {
+  critical: 'red', high: 'orange', medium: 'orange', low: 'green',
+};
+
+export function AlertCard({ alert, onClick }: AlertCardProps) {
+  const { t } = useTranslation('alerts');
+  const fullName = alert.entity.name.fullName
+    || `${alert.entity.name.firstName} ${alert.entity.name.lastName}`;
+
+  return (
+    <button type="button" onClick={onClick}
+      className={`w-full text-left card-vibrancy p-lg border-l-[3px] ${borderColors[alert.riskLevel]}
+        ${glowColors[alert.riskLevel]} hover:bg-white/[0.04] hover:-translate-y-0.5
+        transition-all cursor-pointer group`}>
+      <div className="flex items-center justify-between gap-lg mb-md">
+        <div className="flex-1 min-w-0">
+          <h3 className="sf-headline truncate" title={fullName}>{fullName}</h3>
+          <p className="sf-caption mt-xs">{alert.entity.type}</p>
+        </div>
+        <ChevronRight className="w-5 h-5 text-apple-label-tertiary flex-shrink-0 group-hover:text-white transition-colors" />
+      </div>
+      <div className="flex flex-wrap gap-sm mb-md">
+        <StatusBadge status={alert.status} type="status" />
+        <StatusBadge priority={alert.priority} type="priority" />
+        <Badge color={riskBadgeColor[alert.riskLevel]} size="sm">{t('card.risk')} {alert.riskLevel}</Badge>
+      </div>
+      <p className="sf-caption line-clamp-2 mb-md" title={alert.notes}>{alert.notes}</p>
+      <div className="flex justify-between">
+        <p className="sf-caption">{alert.matchedCount} matches</p>
+        <p className="sf-caption text-apple-label-tertiary/60">{new Date(alert.createdAt).toLocaleDateString()}</p>
+      </div>
+    </button>
+  );
+}

package/src/components/alerts/AlertDetailSidebar.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import { Badge } from '../ui/Badge';
+import { StatusBadge } from '../data/StatusBadge';
+import type { Alert } from '../../types';
+
+interface SidebarProps {
+  alert: Alert;
+}
+
+export function AlertDetailSidebar({ alert }: SidebarProps) {
+  const { t } = useTranslation('alerts');
+  const riskColor = { critical: 'red', high: 'orange', medium: 'orange', low: 'green' } as any;
+
+  return (
+    <div className="space-y-lg">
+      <Card>
+        <h3 className="sf-headline mb-lg">{t('sidebar.status')}</h3>
+        <div className="space-y-md">
+          <div>
+            <p className="sf-caption mb-xs">{t('sidebar.current_status')}</p>
+            <StatusBadge status={alert.status} type="status" />
+          </div>
+          <div>
+            <p className="sf-caption mb-xs">{t('sidebar.priority')}</p>
+            <StatusBadge priority={alert.priority} type="priority" />
+          </div>
+          <div>
+            <p className="sf-caption mb-xs">{t('sidebar.risk_level')}</p>
+            <Badge color={riskColor[alert.riskLevel]}>{alert.riskLevel}</Badge>
+          </div>
+          {alert.investigator && (
+            <div>
+              <p className="sf-caption mb-xs">{t('sidebar.investigator')}</p>
+              <p className="sf-body">{alert.investigator}</p>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <Card>
+        <h3 className="sf-headline mb-lg">{t('sidebar.timeline')}</h3>
+        <div className="space-y-md text-sm">
+          <div>
+            <p className="sf-caption">Created</p>
+            <p className="sf-body">{new Date(alert.createdAt).toLocaleString()}</p>
+          </div>
+          <div>
+            <p className="sf-caption">Updated</p>
+            <p className="sf-body">{new Date(alert.updatedAt).toLocaleString()}</p>
+          </div>
+          {alert.duoAt && (
+            <div>
+              <p className="sf-caption">Due</p>
+              <p className="sf-body">{new Date(alert.duoAt).toLocaleString()}</p>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/components/alerts/AlertFilters.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { AlertFilters } from './AlertFilters'
+
+describe('AlertFilters', () => {
+  const renderFilters = () => render(
+    <AlertFilters
+      selectedStatus={[]}
+      selectedPriority={[]}
+      onStatusChange={vi.fn()}
+      onPriorityChange={vi.fn()}
+      onReset={vi.fn()}
+    />
+  )
+
+  it('renders all filter buttons', () => {
+    renderFilters()
+    expect(screen.getByRole('button', { name: /open/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /critical/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /reset/i })).toBeInTheDocument()
+  })
+
+  it('calls filter handlers on button click', async () => {
+    const statusHandler = vi.fn()
+    const priorityHandler = vi.fn()
+    render(
+      <AlertFilters
+        selectedStatus={[]}
+        selectedPriority={[]}
+        onStatusChange={statusHandler}
+        onPriorityChange={priorityHandler}
+        onReset={vi.fn()}
+      />
+    )
+    const openBtn = Array.from(screen.getAllByRole('button')).find(btn => btn.textContent === 'open')
+    const criticalBtn = Array.from(screen.getAllByRole('button')).find(btn => btn.textContent === 'critical')
+    await userEvent.click(openBtn!)
+    await userEvent.click(criticalBtn!)
+    expect(statusHandler).toHaveBeenCalled()
+    expect(priorityHandler).toHaveBeenCalled()
+  })
+
+  it('highlights selected filters and renders reset', () => {
+    render(
+      <AlertFilters
+        selectedStatus={['open']}
+        selectedPriority={['critical']}
+        onStatusChange={vi.fn()}
+        onPriorityChange={vi.fn()}
+        onReset={vi.fn()}
+      />
+    )
+    const openBtn = Array.from(screen.getAllByRole('button')).find(btn => btn.textContent === 'open')
+    expect(openBtn).toHaveClass('bg-apple-blue')
+    expect(screen.getByRole('button', { name: /reset/i })).toBeInTheDocument()
+  })
+
+  it('calls onReset when reset button clicked', async () => {
+    const handler = vi.fn()
+    render(
+      <AlertFilters
+        selectedStatus={['open']}
+        selectedPriority={['critical']}
+        onStatusChange={vi.fn()}
+        onPriorityChange={vi.fn()}
+        onReset={handler}
+      />
+    )
+    await userEvent.click(screen.getByRole('button', { name: /reset/i }))
+    expect(handler).toHaveBeenCalledOnce()
+  })
+})

package/src/components/alerts/AlertFilters.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '../ui/Badge';
+import { Button } from '../ui/Button';
+import { Card } from '../ui/Card';
+import type { AlertStatus, AlertPriority } from '../../types';
+
+interface AlertFiltersProps {
+  selectedStatus: AlertStatus[];
+  selectedPriority: AlertPriority[];
+  onStatusChange: (status: AlertStatus[]) => void;
+  onPriorityChange: (priority: AlertPriority[]) => void;
+  onReset: () => void;
+}
+
+const statuses: AlertStatus[] = ['open', 'investigating', 'resolved', 'archived'];
+const priorities: AlertPriority[] = ['critical', 'high', 'medium', 'low'];
+
+export function AlertFilters({
+  selectedStatus,
+  selectedPriority,
+  onStatusChange,
+  onPriorityChange,
+  onReset,
+}: AlertFiltersProps) {
+  const { t } = useTranslation('alerts');
+  const toggleStatus = (status: AlertStatus) => {
+    if (selectedStatus.includes(status)) {
+      onStatusChange(selectedStatus.filter((s) => s !== status));
+    } else {
+      onStatusChange([...selectedStatus, status]);
+    }
+  };
+
+  const togglePriority = (priority: AlertPriority) => {
+    if (selectedPriority.includes(priority)) {
+      onPriorityChange(selectedPriority.filter((p) => p !== priority));
+    } else {
+      onPriorityChange([...selectedPriority, priority]);
+    }
+  };
+
+  return (
+    <Card>
+      <div className="space-y-lg">
+        <div>
+          <p className="sf-caption mb-md">{t('filters.status')}</p>
+          <div className="flex flex-wrap gap-sm">
+            {statuses.map((status) => (
+              <button
+                key={status}
+                onClick={() => toggleStatus(status)}
+                aria-pressed={selectedStatus.includes(status)}
+                className={`px-md py-xs rounded-full transition-all text-sf-caption font-semibold cursor-pointer text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-blue ${
+                  selectedStatus.includes(status) ? 'bg-apple-blue' : 'bg-white/10 hover:bg-white/15'
+                }`}
+              >
+                {t(`filters.${status}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <p className="sf-caption mb-md">{t('filters.priority')}</p>
+          <div className="flex flex-wrap gap-sm">
+            {priorities.map((priority) => (
+              <button
+                key={priority}
+                onClick={() => togglePriority(priority)}
+                aria-pressed={selectedPriority.includes(priority)}
+                className={`px-md py-xs rounded-full transition-all text-sf-caption font-semibold cursor-pointer text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-blue ${
+                  selectedPriority.includes(priority) ? 'bg-apple-blue' : 'bg-white/10 hover:bg-white/15'
+                }`}
+              >
+                {t(`filters.${priority}`)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <Button variant="secondary" size="sm" onClick={onReset} className="w-full">
+          Reset
+        </Button>
+      </div>
+    </Card>
+  );
+}

package/src/components/alerts/EntityDetailsCard.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { EntityDetailsCard } from './EntityDetailsCard'
+import { createMockAlert } from '../../test/utils'
+
+describe('EntityDetailsCard', () => {
+  it('renders entity type', () => {
+    const alert = createMockAlert()
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.getByText('individual')).toBeInTheDocument()
+  })
+
+  it('renders match count', () => {
+    const alert = createMockAlert({ matchedCount: 7 })
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.getByText('7')).toBeInTheDocument()
+  })
+
+  it('shows N/A when nationality is missing', () => {
+    const alert = createMockAlert()
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.getByText('N/A')).toBeInTheDocument()
+  })
+
+  it('renders nationality when provided', () => {
+    const alert = createMockAlert({
+      entity: {
+        id: 'e-1', type: 'individual',
+        name: { firstName: 'John', lastName: 'Doe', aliases: [] },
+        identifiers: [], nationality: 'US',
+        createdAt: '2026-01-01T00:00:00Z', updatedAt: '2026-01-01T00:00:00Z',
+      },
+    })
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.getByText('US')).toBeInTheDocument()
+  })
+
+  it('renders date of birth when provided', () => {
+    const alert = createMockAlert({
+      entity: {
+        id: 'e-1', type: 'individual',
+        name: { firstName: 'John', lastName: 'Doe', aliases: [] },
+        identifiers: [], dob: '1990-01-15',
+        createdAt: '2026-01-01T00:00:00Z', updatedAt: '2026-01-01T00:00:00Z',
+      },
+    })
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.getByText(/1990/)).toBeInTheDocument()
+  })
+
+  it('hides dob section when not provided', () => {
+    const alert = createMockAlert()
+    render(<EntityDetailsCard alert={alert} />)
+    expect(screen.queryByText(/date of birth/i)).not.toBeInTheDocument()
+  })
+
+  it('renders heading', () => {
+    render(<EntityDetailsCard alert={createMockAlert()} />)
+    expect(screen.getByText(/entity details/i)).toBeInTheDocument()
+  })
+})

package/src/components/alerts/EntityDetailsCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import type { Alert } from '../../types';
+
+interface Props {
+  alert: Alert;
+}
+
+export function EntityDetailsCard({ alert }: Props) {
+  const { t } = useTranslation('alerts');
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('entity_details.title')}</h3>
+      <div className="grid grid-cols-2 gap-lg">
+        <div>
+          <p className="sf-caption mb-xs">{t('entity_details.type')}</p>
+          <p className="sf-body capitalize">{alert.entity.type}</p>
+        </div>
+        <div>
+          <p className="sf-caption mb-xs">{t('entity_details.nationality')}</p>
+          <p className="sf-body">{alert.entity.nationality || 'N/A'}</p>
+        </div>
+        {alert.entity.dob && (
+          <div>
+            <p className="sf-caption mb-xs">{t('entity_details.dob')}</p>
+            <p className="sf-body">{new Date(alert.entity.dob).toLocaleDateString()}</p>
+          </div>
+        )}
+        <div>
+          <p className="sf-caption mb-xs">{t('entity_details.matches_found')}</p>
+          <p className="sf-body">{alert.matchedCount}</p>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/alerts/NotesCard.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { NotesCard } from './NotesCard'
+
+describe('NotesCard', () => {
+  it('renders textarea with notes value', () => {
+    render(<NotesCard notes="Existing notes" onNotesChange={vi.fn()} />)
+    expect(screen.getByDisplayValue('Existing notes')).toBeInTheDocument()
+  })
+
+  it('renders empty textarea when notes empty', () => {
+    render(<NotesCard notes="" onNotesChange={vi.fn()} />)
+    const textarea = screen.getByRole('textbox')
+    expect(textarea).toHaveValue('')
+  })
+
+  it('calls onNotesChange when typing', async () => {
+    const handler = vi.fn()
+    render(<NotesCard notes="" onNotesChange={handler} />)
+    await userEvent.type(screen.getByRole('textbox'), 'new note')
+    expect(handler).toHaveBeenCalled()
+  })
+
+  it('renders save button', () => {
+    render(<NotesCard notes="" onNotesChange={vi.fn()} />)
+    expect(screen.getByRole('button', { name: /save notes/i })).toBeInTheDocument()
+  })
+
+  it('has accessible label on textarea', () => {
+    render(<NotesCard notes="" onNotesChange={vi.fn()} />)
+    expect(screen.getByLabelText(/investigation notes/i)).toBeInTheDocument()
+  })
+
+  it('renders title heading', () => {
+    render(<NotesCard notes="" onNotesChange={vi.fn()} />)
+    expect(screen.getByText(/investigation notes/i)).toBeInTheDocument()
+  })
+})

package/src/components/alerts/NotesCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '../ui/Card';
+import { Button } from '../ui/Button';
+
+interface NotesCardProps {
+  notes: string;
+  onNotesChange: (notes: string) => void;
+}
+
+export function NotesCard({ notes, onNotesChange }: NotesCardProps) {
+  const { t } = useTranslation('alerts');
+  return (
+    <Card>
+      <h3 className="sf-headline mb-lg">{t('notes.title')}</h3>
+      <textarea
+        value={notes}
+        onChange={(e) => onNotesChange(e.target.value)}
+        aria-label={t('notes.title')}
+        className="input-field w-full h-24 mb-md"
+        placeholder={t('notes.placeholder')}
+      />
+      <Button variant="primary" size="sm">
+        {t('notes.save')}
+      </Button>
+    </Card>
+  );
+}

package/src/components/auth/AuthDivider.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function AuthDivider() {
+  const { t } = useTranslation('auth')
+  return (
+    <div className="relative my-6">
+      <div className="absolute inset-0 flex items-center">
+        <div className="w-full border-t border-white/10" />
+      </div>
+      <div className="relative flex justify-center text-sm">
+        <span className="px-4 bg-apple-bg-secondary text-apple-label-secondary">
+          {t('oauth.or_continue_email')}
+        </span>
+      </div>
+    </div>
+  )
+}