amliq-dashboard 2.0.0

package/src/components/ui/Toast.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useCallback, createContext, useContext } from 'react'
+import { CheckCircle, AlertCircle, Info, X } from 'lucide-react'
+import clsx from 'clsx'
+
+type ToastType = 'success' | 'error' | 'info'
+interface ToastItem { id: number; message: string; type: ToastType }
+
+interface ToastContextValue {
+  toast: (message: string, type?: ToastType) => void
+}
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} })
+export const useToast = () => useContext(ToastContext)
+
+let nextId = 0
+
+const icons: Record<ToastType, typeof Info> = {
+  success: CheckCircle, error: AlertCircle, info: Info,
+}
+
+const accents: Record<ToastType, string> = {
+  success: 'bg-green-500', error: 'bg-red-500', info: 'bg-blue-500',
+}
+
+const iconColors: Record<ToastType, string> = {
+  success: 'text-green-400', error: 'text-red-400', info: 'text-blue-400',
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [items, setItems] = useState<ToastItem[]>([])
+
+  const toast = useCallback((message: string, type: ToastType = 'info') => {
+    const id = nextId++
+    setItems(prev => [...prev, { id, message, type }])
+    setTimeout(() => setItems(prev => prev.filter(t => t.id !== id)), 4000)
+  }, [])
+
+  const dismiss = (id: number) => setItems(prev => prev.filter(t => t.id !== id))
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm" aria-live="polite">
+        {items.map(item => {
+          const Icon = icons[item.type]
+          return (
+            <div key={item.id} role="alert"
+              className="flex items-start gap-3 px-4 py-3 rounded-xl
+                bg-[rgba(18,18,26,0.9)] backdrop-blur-xl border border-white/[0.08]
+                shadow-[0_8px_30px_rgba(0,0,0,0.4)] text-sm
+                animate-[slideInRight_0.3s_ease-out]"
+              style={{ overflow: 'hidden', position: 'relative' }}>
+              {/* accent stripe */}
+              <div className={clsx(
+                'absolute left-0 top-0 bottom-0 w-[3px] rounded-l-xl',
+                accents[item.type],
+              )} />
+              <div className={clsx(
+                'w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5',
+                `${accents[item.type]}/10`,
+              )}>
+                <Icon className={clsx('w-4 h-4', iconColors[item.type])} />
+              </div>
+              <p className="text-white/90 flex-1 leading-relaxed">{item.message}</p>
+              <button type="button" onClick={() => dismiss(item.id)}
+                className="text-white/30 hover:text-white/60 transition-colors cursor-pointer mt-0.5">
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )
+        })}
+      </div>
+    </ToastContext.Provider>
+  )
+}

package/src/components/ui/Toggle.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi } from 'vitest'
+import { Toggle } from './Toggle'
+
+describe('Toggle', () => {
+  it('renders toggle with checked state', () => {
+    const { container } = render(
+      <Toggle checked={true} onChange={vi.fn()} />
+    )
+    const toggle = container.querySelector('div[class*="bg-apple-green"]')
+    expect(toggle).toBeInTheDocument()
+  })
+
+  it('renders toggle with unchecked state', () => {
+    const { container } = render(
+      <Toggle checked={false} onChange={vi.fn()} />
+    )
+    const toggle = container.querySelector('div[class*="bg-apple-bg-tertiary"]')
+    expect(toggle).toBeInTheDocument()
+  })
+
+  it('calls onChange when clicked', async () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <Toggle checked={false} onChange={handler} />
+    )
+    const toggleDiv = container.querySelector('div[class*="rounded-full"]')
+    await userEvent.click(toggleDiv!)
+    expect(handler).toHaveBeenCalledWith(true)
+  })
+
+  it('toggles between true and false', async () => {
+    const handler = vi.fn()
+    const { rerender, container } = render(
+      <Toggle checked={false} onChange={handler} />
+    )
+    const toggleDiv = container.querySelector('div[class*="rounded-full"]')
+    await userEvent.click(toggleDiv!)
+    expect(handler).toHaveBeenCalledWith(true)
+
+    rerender(<Toggle checked={true} onChange={handler} />)
+    await userEvent.click(toggleDiv!)
+    expect(handler).toHaveBeenCalledWith(false)
+  })
+
+  it('renders with label', () => {
+    render(<Toggle checked={true} onChange={vi.fn()} label="Enable feature" />)
+    expect(screen.getByText('Enable feature')).toBeInTheDocument()
+  })
+
+  it('does not call onChange when disabled', async () => {
+    const handler = vi.fn()
+    const { container } = render(
+      <Toggle checked={false} onChange={handler} disabled={true} />
+    )
+    const toggleDiv = container.querySelector('div[class*="rounded-full"]')
+    await userEvent.click(toggleDiv!)
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('applies disabled styling', () => {
+    const { container } = render(
+      <Toggle checked={false} onChange={vi.fn()} disabled={true} />
+    )
+    const toggleDiv = container.querySelector('div[class*="rounded-full"]')
+    expect(toggleDiv).toHaveClass('opacity-50', 'cursor-not-allowed')
+  })
+
+  it('slides indicator to the right when checked', () => {
+    const { container } = render(
+      <Toggle checked={true} onChange={vi.fn()} />
+    )
+    const span = container.querySelector('span[class*="translate-x"]')
+    expect(span).toHaveClass('translate-x-7')
+  })
+
+  it('slides indicator to the left when unchecked', () => {
+    const { container } = render(
+      <Toggle checked={false} onChange={vi.fn()} />
+    )
+    const span = container.querySelector('span[class*="translate-x"]')
+    expect(span).toHaveClass('translate-x-0.5')
+  })
+})

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+export function Toggle({ checked, onChange, label, disabled }: ToggleProps) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      if (!disabled) onChange(!checked);
+    }
+  };
+
+  return (
+    <label className="flex items-center gap-md cursor-pointer">
+      <div
+        role="switch"
+        aria-checked={checked}
+        aria-disabled={disabled}
+        aria-label={label}
+        tabIndex={disabled ? -1 : 0}
+        onClick={() => !disabled && onChange(!checked)}
+        onKeyDown={handleKeyDown}
+        className={clsx(
+          'relative inline-flex h-8 w-14 items-center rounded-full transition-colors',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-blue',
+          checked ? 'bg-apple-green' : 'bg-apple-bg-tertiary',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+      >
+        <span
+          className={clsx(
+            'inline-block h-7 w-7 transform rounded-full bg-white transition-transform',
+            checked ? 'translate-x-7' : 'translate-x-0.5'
+          )}
+        />
+      </div>
+      {label && <span className="sf-body">{label}</span>}
+    </label>
+  );
+}

package/src/context/AuthContext.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { authApi, AuthResponse } from '../api/auth';
+
+interface User {
+  id: string;
+  email: string;
+  role: string;
+  tenant_id: string;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  loginWithToken: (token: string) => Promise<void>;
+  signup: (email: string, password: string, orgName: string, country: string) => Promise<void>;
+  logout: () => void;
+  isAuthenticated: boolean;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
+  return ctx;
+}
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem('amliq_token');
+    if (!token) { setLoading(false); return; }
+    authApi.me().then(setUser).catch(() => localStorage.removeItem('amliq_token'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const resp = await authApi.login({ email, password });
+    localStorage.setItem('amliq_token', resp.token);
+    setUser(resp.user);
+  }, []);
+
+  const loginWithToken = useCallback(async (token: string) => {
+    localStorage.setItem('amliq_token', token);
+    const me = await authApi.me();
+    setUser(me);
+  }, []);
+
+  const signup = useCallback(async (
+    email: string, password: string, orgName: string, country: string,
+  ) => {
+    const resp = await authApi.signup({ email, password, org_name: orgName, country });
+    localStorage.setItem('amliq_token', resp.token);
+    setUser(resp.user);
+  }, []);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem('amliq_token');
+    setUser(null);
+    window.location.href = '/login';
+  }, []);
+
+  const value: AuthContextValue = {
+    user, loading, login, loginWithToken, signup, logout,
+    isAuthenticated: !!user,
+  };
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

package/src/data/pepProfiles.ts

@@ -0,0 +1,76 @@
+export interface PEPProfile {
+  id: string
+  name: string
+  position: string
+  country: string
+  tier: 'Tier1' | 'Tier2' | 'Tier3' | 'Tier4'
+  riskWeight: number
+  isActive: boolean
+  startDate: string
+  endDate?: string
+  aliases: string[]
+  sanctions: string[]
+}
+
+export const SAMPLE_PEP_PROFILES: PEPProfile[] = [
+  {
+    id: 'PEP-001', name: 'Vladimir V. Putin', position: 'President',
+    country: 'Russia', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2000-05-07', aliases: ['Путин Владимир Владимирович'],
+    sanctions: ['OFAC SDN', 'EU Consolidated', 'UK Sanctions'],
+  },
+  {
+    id: 'PEP-002', name: 'Xi Jinping', position: 'President',
+    country: 'China', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2013-03-14', aliases: ['习近平'],
+    sanctions: [],
+  },
+  {
+    id: 'PEP-003', name: 'Mohammed bin Salman', position: 'Crown Prince',
+    country: 'Saudi Arabia', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2017-06-21', aliases: ['MBS', 'محمد بن سلمان'],
+    sanctions: [],
+  },
+  {
+    id: 'PEP-004', name: 'Sergei Lavrov', position: 'Foreign Minister',
+    country: 'Russia', tier: 'Tier2', riskWeight: 0.8, isActive: true,
+    startDate: '2004-03-09', aliases: ['Лавров Сергей Викторович'],
+    sanctions: ['OFAC SDN', 'EU Consolidated'],
+  },
+  {
+    id: 'PEP-005', name: 'Hassan Nasrallah', position: 'Secretary General',
+    country: 'Lebanon', tier: 'Tier2', riskWeight: 0.8, isActive: false,
+    startDate: '1992-02-16', endDate: '2024-09-27',
+    aliases: ['حسن نصر الله'], sanctions: ['OFAC SDN'],
+  },
+  {
+    id: 'PEP-006', name: 'Elvira Nabiullina', position: 'Central Bank Governor',
+    country: 'Russia', tier: 'Tier2', riskWeight: 0.8, isActive: true,
+    startDate: '2013-06-24', aliases: ['Набиуллина Эльвира'],
+    sanctions: ['EU Consolidated'],
+  },
+  {
+    id: 'PEP-007', name: 'Kim Jong-un', position: 'Supreme Leader',
+    country: 'North Korea', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2011-12-30', aliases: ['김정은'],
+    sanctions: ['OFAC SDN', 'UN Consolidated', 'EU Consolidated'],
+  },
+  {
+    id: 'PEP-008', name: 'Bashar al-Assad', position: 'Former President',
+    country: 'Syria', tier: 'Tier1', riskWeight: 1.0, isActive: false,
+    startDate: '2000-07-17', endDate: '2024-12-08',
+    aliases: ['بشار الأسد'], sanctions: ['OFAC SDN', 'EU Consolidated'],
+  },
+  {
+    id: 'PEP-009', name: 'Recep Tayyip Erdogan', position: 'President',
+    country: 'Turkey', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2014-08-28', aliases: ['رجب طيب أردوغان'],
+    sanctions: [],
+  },
+  {
+    id: 'PEP-010', name: 'Nikolai Patrushev', position: 'Security Council Secretary',
+    country: 'Russia', tier: 'Tier2', riskWeight: 0.8, isActive: true,
+    startDate: '2008-05-12', aliases: ['Патрушев Николай'],
+    sanctions: ['OFAC SDN', 'EU Consolidated', 'UK Sanctions'],
+  },
+]

package/src/data/pepProfilesExtra.ts

@@ -0,0 +1,58 @@
+import type { PEPProfile } from './pepProfiles'
+
+export const PEP_PROFILES_EXTRA: PEPProfile[] = [
+  {
+    id: 'PEP-011', name: 'Benjamin Netanyahu', position: 'Prime Minister',
+    country: 'Israel', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2022-12-29', aliases: ['Bibi', 'בנימין נתניהו'],
+    sanctions: [],
+  },
+  {
+    id: 'PEP-012', name: 'Bill Clinton', position: 'Former President',
+    country: 'United States', tier: 'Tier1', riskWeight: 0.6, isActive: false,
+    startDate: '1993-01-20', endDate: '2001-01-20',
+    aliases: ['William Jefferson Clinton'], sanctions: [],
+  },
+  {
+    id: 'PEP-013', name: 'Joe Biden', position: 'President',
+    country: 'United States', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2021-01-20', aliases: ['Joseph Robinette Biden Jr.'],
+    sanctions: [],
+  },
+  {
+    id: 'PEP-014', name: 'Emmanuel Macron', position: 'President',
+    country: 'France', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2017-05-14', aliases: ['Макрон'], sanctions: [],
+  },
+  {
+    id: 'PEP-015', name: 'Donald Trump', position: 'President',
+    country: 'United States', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2025-01-20', aliases: ['DJT'], sanctions: [],
+  },
+  {
+    id: 'PEP-016', name: 'Olaf Scholz', position: 'Chancellor',
+    country: 'Germany', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2021-12-08', aliases: [], sanctions: [],
+  },
+  {
+    id: 'PEP-017', name: 'Narendra Modi', position: 'Prime Minister',
+    country: 'India', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2014-05-26', aliases: ['नरेन्द्र मोदी'], sanctions: [],
+  },
+  {
+    id: 'PEP-018', name: 'Keir Starmer', position: 'Prime Minister',
+    country: 'United Kingdom', tier: 'Tier1', riskWeight: 1.0, isActive: true,
+    startDate: '2024-07-05', aliases: [], sanctions: [],
+  },
+  {
+    id: 'PEP-019', name: 'Yair Lapid', position: 'Opposition Leader',
+    country: 'Israel', tier: 'Tier2', riskWeight: 0.7, isActive: true,
+    startDate: '2023-01-01', aliases: ['יאיר לפיד'], sanctions: [],
+  },
+  {
+    id: 'PEP-020', name: 'Hillary Clinton', position: 'Former Secretary of State',
+    country: 'United States', tier: 'Tier2', riskWeight: 0.6, isActive: false,
+    startDate: '2009-01-21', endDate: '2013-02-01',
+    aliases: ['Hillary Rodham Clinton'], sanctions: [],
+  },
+]

package/src/hooks/useAlerts.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from 'react';
+import { alertsApi } from '../api/alerts';
+import type { Alert } from '../types';
+
+export function useAlerts() {
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchAlerts = useCallback(async () => {
+    setLoading(true);
+    try {
+      const resp = await alertsApi.list();
+      if (!resp) { setAlerts([]); return; }
+      setAlerts(Array.isArray(resp) ? resp : resp?.data ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAlerts();
+  }, [fetchAlerts]);
+
+  const resolve = useCallback(
+    async (id: string, resolution: string, notes: string) => {
+      await alertsApi.resolve(id, { resolution, notes });
+      await fetchAlerts();
+    },
+    [fetchAlerts],
+  );
+
+  return { alerts, loading, error, refetch: fetchAlerts, resolve };
+}

package/src/hooks/useAnalytics.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { analyticsApi } from '../api/analytics';
+import type { DashboardAnalytics } from '../types';
+
+export function useAnalytics() {
+  const [analytics, setAnalytics] = useState<DashboardAnalytics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    analyticsApi
+      .getDashboard()
+      .then((data) => { if (mounted) setAnalytics(data); })
+      .catch((err) => {
+        if (mounted) setError(err instanceof Error ? err : new Error(String(err)));
+      })
+      .finally(() => { if (mounted) setLoading(false); });
+    return () => { mounted = false; };
+  }, []);
+
+  return { analytics, loading, error };
+}

package/src/hooks/useApi.test.ts

@@ -0,0 +1,79 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import { useApi } from './useApi'
+
+describe('useApi', () => {
+  it('sets initial loading state to true', () => {
+    const fetchFn = vi.fn(() => new Promise<any>(() => {}))
+    const { result } = renderHook(() => useApi(fetchFn))
+    expect(result.current.loading).toBe(true)
+  })
+
+  it('fetches data successfully', async () => {
+    const fetchFn = vi.fn().mockResolvedValue({ data: 'test' })
+    const { result } = renderHook(() => useApi(fetchFn))
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.data).toEqual({ data: 'test' })
+    expect(result.current.error).toBeNull()
+  })
+
+  it('handles fetch errors', async () => {
+    const error = new Error('Network error')
+    const fetchFn = vi.fn().mockRejectedValue(error)
+    const { result } = renderHook(() => useApi(fetchFn))
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.data).toBeNull()
+    expect(result.current.error).toEqual(error)
+  })
+
+  it('converts non-Error objects to Error', async () => {
+    const fetchFn = vi.fn().mockRejectedValue('string error')
+    const { result } = renderHook(() => useApi(fetchFn))
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(result.current.error).toBeInstanceOf(Error)
+    expect(result.current.error?.message).toBe('string error')
+  })
+
+  it('respects dependencies array', async () => {
+    const fetchFn = vi.fn().mockResolvedValue({ id: 1 })
+    const { rerender } = renderHook(
+      ({ id }) => useApi(fetchFn, [id]),
+      { initialProps: { id: 1 } }
+    )
+
+    await waitFor(() => {
+      expect(fetchFn).toHaveBeenCalledTimes(1)
+    })
+
+    rerender({ id: 1 })
+    expect(fetchFn).toHaveBeenCalledTimes(1)
+
+    rerender({ id: 2 })
+    await waitFor(() => {
+      expect(fetchFn).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('provides refetch function', async () => {
+    const fetchFn = vi.fn().mockResolvedValue({ value: 1 })
+    const { result } = renderHook(() => useApi(fetchFn))
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false)
+    })
+
+    expect(typeof result.current.refetch).toBe('function')
+  })
+})

package/src/hooks/useApi.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+export function useApi<T>(
+  fetchFn: () => Promise<T>,
+  deps: any[] = []
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    setError(null);
+
+    fetchFn()
+      .then((result) => {
+        if (mounted) setData(result);
+      })
+      .catch((err) => {
+        if (mounted) setError(err instanceof Error ? err : new Error(String(err)));
+      })
+      .finally(() => {
+        if (mounted) setLoading(false);
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, deps);
+
+  return { data, loading, error, refetch: () => fetchFn() };
+}

package/src/hooks/useAudit.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, useCallback } from 'react';
+import { auditApi } from '../api/audit';
+import type { AuditEntry } from '../types';
+
+export function useAudit() {
+  const [entries, setEntries] = useState<AuditEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchAudit = useCallback(async () => {
+    setLoading(true);
+    try {
+      const resp = await auditApi.list();
+      const data = resp as { entries?: AuditEntry[] };
+      setEntries(data?.entries ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAudit();
+  }, [fetchAudit]);
+
+  return { entries, loading, error, refetch: fetchAudit };
+}

package/src/hooks/useBilling.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect, useCallback } from 'react'
+import * as billingApi from '../api/billing'
+import type { Subscription, Invoice } from '../types/billing'
+
+export function useBilling() {
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
+  const [invoices, setInvoices] = useState<Invoice[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true)
+    try {
+      const [subs, invs] = await Promise.all([
+        billingApi.getSubscriptions(),
+        billingApi.getInvoices(),
+      ])
+      setSubscriptions(subs ?? [])
+      setInvoices(invs ?? [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load billing')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { fetchAll() }, [fetchAll])
+
+  const checkout = useCallback(async (
+    product: string, planId: string, promo?: string,
+  ) => {
+    const { checkoutUrl } = await billingApi.createCheckout(product, planId, promo)
+    window.location.href = checkoutUrl
+  }, [])
+
+  return { subscriptions, invoices, loading, error, refetch: fetchAll, checkout }
+}