amliq-dashboard 2.0.0

package/src/pages/platform/Overview.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { api } from '../../api/client'
+
+interface PlatformStats {
+  total_tenants: number
+  total_screenings: number
+}
+
+export default function PlatformOverview() {
+  const { t } = useTranslation('platform')
+  const [stats, setStats] = useState<PlatformStats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    api.get<PlatformStats>('/platform/overview')
+      .then(d => setStats(d ?? null))
+      .catch((err) => setError(err?.message || 'Failed to load'))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>
+  }
+
+  if (error) {
+    return (
+      <div className="p-xl text-center">
+        <p className="sf-body text-apple-red mb-md">{error}</p>
+        <p className="sf-caption text-apple-label-secondary">
+          This page requires admin access.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <PageHeader title={t('overview.title')} />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-lg">
+        <StatCard label={t('overview.total_tenants')} value={stats?.total_tenants ?? 0} />
+        <StatCard label={t('overview.total_screenings')} value={stats?.total_screenings ?? 0} />
+      </div>
+    </div>
+  )
+}
+
+function StatCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="card-vibrancy p-xl">
+      <p className="sf-caption mb-xs">{label}</p>
+      <p className="text-3xl font-bold">{value.toLocaleString()}</p>
+    </div>
+  )
+}

package/src/pages/platform/Users.tsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Shield, Mail, User } from 'lucide-react'
+import { PageHeader } from '../../components/layout/PageHeader'
+import { LoadingSpinner } from '../../components/ui/LoadingSpinner'
+import { Badge } from '../../components/ui/Badge'
+import { SearchField } from '../../components/ui/SearchField'
+import { api } from '../../api/client'
+
+interface PlatformUser {
+  id: string
+  email: string
+  name?: string
+  role: string
+  tenant_id?: string
+}
+
+const roleColor: Record<string, 'red' | 'blue' | 'green' | 'orange' | 'gray'> = {
+  admin: 'red', analyst: 'blue', auditor: 'orange', viewer: 'gray',
+}
+
+export default function PlatformUsers() {
+  const { t } = useTranslation('platform')
+  const [users, setUsers] = useState<PlatformUser[]>([])
+  const [search, setSearch] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.get<{ users: PlatformUser[] }>('/platform/users')
+      .then(d => setUsers(d?.users ?? []))
+      .catch(() => setUsers([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) return <div className="flex items-center justify-center h-96"><LoadingSpinner /></div>
+
+  const q = search.toLowerCase()
+  const filtered = users.filter(u =>
+    (u.email ?? '').toLowerCase().includes(q) ||
+    (u.name ?? '').toLowerCase().includes(q)
+  )
+
+  return (
+    <div>
+      <PageHeader title={t('users.title')} description={`${users.length} users`} />
+      <div className="mb-lg">
+        <SearchField placeholder={t('users.search_placeholder')} value={search} onChange={setSearch} />
+      </div>
+
+      {/* Desktop table */}
+      <div className="hidden md:block">
+        <UsersTable users={filtered} t={t} />
+      </div>
+
+      {/* Mobile cards */}
+      <div className="md:hidden space-y-sm">
+        {filtered.map(u => <UserCard key={u.id} user={u} />)}
+      </div>
+
+      {filtered.length === 0 && (
+        <p className="text-center py-xl text-apple-label-tertiary sf-body">No users found</p>
+      )}
+    </div>
+  )
+}
+
+function UsersTable({ users, t }: { users: PlatformUser[]; t: (k: string) => string }) {
+  return (
+    <div className="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">{t('users.email')}</th>
+            <th className="px-lg py-md">Name</th>
+            <th className="px-lg py-md">{t('users.role')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(u => (
+            <tr key={u.id} className="border-b border-white/5 hover:bg-white/5 transition-colors">
+              <td className="px-lg py-md sf-body text-white">{u.email}</td>
+              <td className="px-lg py-md sf-body text-white">{u.name ?? '—'}</td>
+              <td className="px-lg py-md">
+                <Badge size="sm" color={roleColor[u.role] ?? 'gray'}>{u.role}</Badge>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function UserCard({ user }: { user: PlatformUser }) {
+  const initials = (user.name ?? user.email).slice(0, 2).toUpperCase()
+  return (
+    <div className="glass-panel rounded-apple-lg p-lg">
+      <div className="flex items-center gap-md">
+        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-apple-blue/20 flex items-center justify-center">
+          <span className="text-sm font-semibold text-apple-blue">{initials}</span>
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="sf-body text-white font-medium truncate">{user.name ?? '—'}</p>
+          <p className="sf-caption text-apple-label-secondary truncate">{user.email}</p>
+        </div>
+        <Badge size="sm" color={roleColor[user.role] ?? 'gray'}>{user.role}</Badge>
+      </div>
+    </div>
+  )
+}

package/src/pages/reporting/ComplianceReport.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react'
+import { api } from '../../api/client'
+
+interface Metrics {
+  screenings_performed: number
+  alerts_generated: number
+  cases_opened: number
+  cases_closed: number
+  sars_filed: number
+  false_positive_rate: number
+  avg_resolution_hours: number
+}
+
+const defaultMetrics: Metrics = {
+  screenings_performed: 0, alerts_generated: 0,
+  cases_opened: 0, cases_closed: 0, sars_filed: 0,
+  false_positive_rate: 0, avg_resolution_hours: 0,
+}
+
+export function ComplianceReport() {
+  const [metrics, setMetrics] = useState<Metrics>(defaultMetrics)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    api.get<Metrics>('/reports/dashboard')
+      .then(d => setMetrics(d ?? defaultMetrics))
+      .catch(() => setMetrics(defaultMetrics))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const cards = [
+    { label: 'Screenings Performed', value: metrics.screenings_performed },
+    { label: 'Alerts Generated', value: metrics.alerts_generated },
+    { label: 'Cases Opened', value: metrics.cases_opened },
+    { label: 'Cases Closed', value: metrics.cases_closed },
+    { label: 'SARs Filed', value: metrics.sars_filed },
+    { label: 'False Positive Rate', value: `${(metrics.false_positive_rate * 100).toFixed(1)}%` },
+    { label: 'Avg Resolution (hrs)', value: metrics.avg_resolution_hours.toFixed(1) },
+  ]
+
+  const handleExport = () => {
+    window.print()
+  }
+
+  if (loading) {
+    return (
+      <div className="px-md py-lg sm:p-8 max-w-6xl mx-auto">
+        <p className="text-apple-label-secondary text-center py-12">Loading report...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="px-md py-lg sm:p-8 max-w-6xl mx-auto">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-md mb-6">
+        <h1 className="text-xl sm:text-2xl font-semibold">Monthly Compliance Report</h1>
+        <button className="btn-apple-secondary w-full sm:w-auto" onClick={handleExport}>
+          Export as PDF
+        </button>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        {cards.map(c => (
+          <div key={c.label} className="card-vibrancy p-4">
+            <p className="text-sm text-apple-label-secondary">{c.label}</p>
+            <p className="text-2xl font-bold mt-1">{c.value}</p>
+          </div>
+        ))}
+      </div>
+      <div className="card-vibrancy p-6 mb-6">
+        <h2 className="text-lg font-medium mb-4">Screening Trend</h2>
+        <div className="h-32 flex items-end gap-1">
+          {Array.from({ length: 12 }, (_, i) => {
+            const h = Math.max(8, Math.random() * 100)
+            return (
+              <div key={i} className="flex-1 bg-apple-blue/60 rounded-t"
+                style={{ height: `${h}%` }}
+                title={`Month ${i + 1}`} />
+            )
+          })}
+        </div>
+        <div className="flex justify-between text-xs text-apple-label-secondary mt-2">
+          <span>Jan</span><span>Jun</span><span>Dec</span>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="card-vibrancy p-6">
+          <h2 className="text-lg font-medium mb-3">Alert Volume</h2>
+          <p className="text-3xl font-bold">{metrics.alerts_generated}</p>
+          <p className="text-sm text-apple-label-secondary mt-1">Total this period</p>
+        </div>
+        <div className="card-vibrancy p-6">
+          <h2 className="text-lg font-medium mb-3">Resolution Time</h2>
+          <p className="text-3xl font-bold">{metrics.avg_resolution_hours.toFixed(1)}h</p>
+          <p className="text-sm text-apple-label-secondary mt-1">Average per case</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/reporting/SARForm.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import { api } from '../../api/client'
+
+const activityTypes = [
+  { value: 'structuring', label: 'Structuring' },
+  { value: 'money_laundering', label: 'Money Laundering' },
+  { value: 'terrorist_financing', label: 'Terrorist Financing' },
+  { value: 'fraud', label: 'Fraud' },
+  { value: 'identity_theft', label: 'Identity Theft' },
+]
+
+const regulators = ['FinCEN', 'FCA', 'MAS']
+
+const statusColors: Record<string, string> = {
+  draft: 'bg-apple-gray/20 text-apple-gray',
+  review: 'bg-apple-orange/20 text-apple-orange',
+  filed: 'bg-apple-green/20 text-apple-green',
+  acknowledged: 'bg-apple-blue/20 text-apple-blue',
+}
+
+export function SARForm() {
+  const [caseId, setCaseId] = useState('')
+  const [subject, setSubject] = useState('')
+  const [subjectType, setSubjectType] = useState('individual')
+  const [activity, setActivity] = useState('structuring')
+  const [regulator, setRegulator] = useState('FinCEN')
+  const [narrative, setNarrative] = useState('')
+  const [status, setStatus] = useState('draft')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      const res = await api.post<{ sar: { id: string; filing_status: string } }>(
+        '/reports/sar',
+        { case_id: caseId, subject_name: subject, subject_type: subjectType, activity_type: activity, regulator },
+      )
+      setStatus(res?.sar?.filing_status ?? 'draft')
+    } catch { /* handled by client */ }
+    setLoading(false)
+  }
+
+  return (
+    <div className="px-md py-lg sm:p-8 max-w-3xl mx-auto">
+      <h1 className="text-xl sm:text-2xl font-semibold mb-6">Suspicious Activity Report</h1>
+      <div className="mb-4 flex items-center gap-2">
+        <span className="text-sm">Status:</span>
+        <span className={`px-2 py-1 text-xs rounded-full ${statusColors[status] ?? ''}`}>
+          {status.toUpperCase()}
+        </span>
+      </div>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <label className="block">
+            <span className="text-sm text-apple-label-secondary">Case ID</span>
+            <input className="input-apple w-full" value={caseId} onChange={e => setCaseId(e.target.value)} required />
+          </label>
+          <label className="block">
+            <span className="text-sm text-apple-label-secondary">Subject Name</span>
+            <input className="input-apple w-full" value={subject} onChange={e => setSubject(e.target.value)} required />
+          </label>
+          <label className="block">
+            <span className="text-sm text-apple-label-secondary">Subject Type</span>
+            <select className="input-apple w-full" value={subjectType} onChange={e => setSubjectType(e.target.value)}>
+              <option value="individual">Individual</option>
+              <option value="entity">Entity</option>
+            </select>
+          </label>
+          <label className="block">
+            <span className="text-sm text-apple-label-secondary">Activity Type</span>
+            <select className="input-apple w-full" value={activity} onChange={e => setActivity(e.target.value)}>
+              {activityTypes.map(at => <option key={at.value} value={at.value}>{at.label}</option>)}
+            </select>
+          </label>
+          <label className="block">
+            <span className="text-sm text-apple-label-secondary">Regulatory Body</span>
+            <select className="input-apple w-full" value={regulator} onChange={e => setRegulator(e.target.value)}>
+              {regulators.map(r => <option key={r} value={r}>{r}</option>)}
+            </select>
+          </label>
+        </div>
+        <label className="block">
+          <span className="text-sm text-apple-label-secondary">Narrative Summary</span>
+          <textarea className="input-apple w-full h-32" value={narrative} onChange={e => setNarrative(e.target.value)}
+            placeholder="AI-generated narrative will appear here. You can edit before filing." />
+        </label>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <button type="submit" className="btn-apple-primary w-full sm:w-auto" disabled={loading}>
+            {loading ? 'Generating...' : 'Generate SAR'}
+          </button>
+          <button type="button" className="btn-apple-secondary w-full sm:w-auto" onClick={() => setStatus('review')}>
+            Submit for Review
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

package/src/routes/appRoutes.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import { ProtectedRoute } from '../components/layout/ProtectedRoute'
+import {
+  Dashboard, AlertQueue, AlertDetailPage, ScreenEntity,
+  Configuration, Analytics, AuditTrail, Monitoring,
+  BatchJobs, SanctionsLists, ListsMarketplace, Login, Signup,
+  LandingPage, BillingPage, Onboarding,
+  AdminTenants, TenantDetail, SystemHealth, DataSources,
+  AdminOperations, AdminScheduledTasks,
+  Team, TermsOfService, PrivacyPolicy, ForgotPassword,
+  APIKeysPage, WebhooksPage, CryptoScreening, TxnScreening,
+  MFASetup, ResetPassword, TaskHistory,
+} from './lazyPages'
+
+type PWrapper = ({ children }: { children: React.ReactNode }) => JSX.Element
+
+export function appRoutes(
+  P: PWrapper,
+  PublicLayout: React.ComponentType<{ children: React.ReactNode }>,
+  DashboardLayout: React.ComponentType<{ children: React.ReactNode }>,
+) {
+  return (
+    <>
+      <Route path="/" element={<PublicLayout><LandingPage /></PublicLayout>} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/signup" element={<Signup />} />
+      <Route path="/forgot-password" element={<ForgotPassword />} />
+      <Route path="/terms" element={<PublicLayout><TermsOfService /></PublicLayout>} />
+      <Route path="/privacy" element={<PublicLayout><PrivacyPolicy /></PublicLayout>} />
+      <Route path="/dashboard" element={<P><Dashboard /></P>} />
+      <Route path="/alerts" element={<P><AlertQueue /></P>} />
+      <Route path="/alerts/:id" element={<P><AlertDetailPage /></P>} />
+      <Route path="/screen" element={<P><ScreenEntity /></P>} />
+      <Route path="/config" element={<P><Configuration /></P>} />
+      <Route path="/analytics" element={<P><Analytics /></P>} />
+      <Route path="/audit" element={<P><AuditTrail /></P>} />
+      <Route path="/monitoring" element={<P><Monitoring /></P>} />
+      <Route path="/batch" element={<P><BatchJobs /></P>} />
+      <Route path="/lists" element={<P><SanctionsLists /></P>} />
+      <Route path="/lists/marketplace" element={<P><ListsMarketplace /></P>} />
+      <Route path="/billing" element={
+        <ProtectedRoute><DashboardLayout><BillingPage /></DashboardLayout></ProtectedRoute>
+      } />
+      <Route path="/onboarding" element={<ProtectedRoute><Onboarding /></ProtectedRoute>} />
+      <Route path="/admin/tenants" element={<P><AdminTenants /></P>} />
+      <Route path="/admin/tenants/:id" element={<P><TenantDetail /></P>} />
+      <Route path="/admin/health" element={<P><SystemHealth /></P>} />
+      <Route path="/admin/data-sources" element={<P><DataSources /></P>} />
+      <Route path="/admin/operations" element={<P><AdminOperations /></P>} />
+      <Route path="/admin/tasks" element={<P><AdminScheduledTasks /></P>} />
+      <Route path="/team" element={<P><Team /></P>} />
+      <Route path="/keys" element={<P><APIKeysPage /></P>} />
+      <Route path="/webhooks" element={<P><WebhooksPage /></P>} />
+      <Route path="/settings/mfa" element={<P><MFASetup /></P>} />
+      <Route path="/tasks" element={<P><TaskHistory /></P>} />
+      <Route path="/reset-password" element={<ResetPassword />} />
+    </>
+  )
+}

package/src/routes/compliance.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import {
+  CaseManagement, CaseDetail, RiskAssessment, UBOChain,
+  EDDWorkflow, TransactionMonitoring, AdverseMedia, PEPScreening,
+  SARForm, ComplianceReport, CryptoScreeningPage, TxnScreeningPage,
+} from './lazyCompliance'
+
+type PWrapper = ({ children }: { children: React.ReactNode }) => JSX.Element
+
+export function complianceRoutes(P: PWrapper) {
+  return (
+    <>
+      <Route path="/compliance/cases" element={<P><CaseManagement /></P>} />
+      <Route path="/compliance/cases/:id" element={<P><CaseDetail /></P>} />
+      <Route path="/compliance/risk" element={<P><RiskAssessment /></P>} />
+      <Route path="/compliance/ubo/:id" element={<P><UBOChain /></P>} />
+      <Route path="/compliance/edd/:id" element={<P><EDDWorkflow /></P>} />
+      <Route path="/compliance/txn" element={<P><TransactionMonitoring /></P>} />
+      <Route path="/compliance/media" element={<P><AdverseMedia /></P>} />
+      <Route path="/compliance/pep" element={<P><PEPScreening /></P>} />
+      <Route path="/compliance/sar" element={<P><SARForm /></P>} />
+      <Route path="/compliance/report" element={<P><ComplianceReport /></P>} />
+      <Route path="/compliance/crypto" element={<P><CryptoScreeningPage /></P>} />
+      <Route path="/compliance/txn-screen" element={<P><TxnScreeningPage /></P>} />
+    </>
+  )
+}

package/src/routes/lazyCompliance.ts

@@ -0,0 +1,34 @@
+import { lazy } from 'react'
+
+export const CaseManagement = lazy(() =>
+  import('../pages/CaseManagement').then(m => ({ default: m.CaseManagement }))
+)
+export const CaseDetail = lazy(() =>
+  import('../pages/CaseDetail').then(m => ({ default: m.CaseDetail }))
+)
+export const RiskAssessment = lazy(() =>
+  import('../pages/RiskAssessment').then(m => ({ default: m.RiskAssessment }))
+)
+export const UBOChain = lazy(() =>
+  import('../pages/UBOChain').then(m => ({ default: m.UBOChain }))
+)
+export const EDDWorkflow = lazy(() =>
+  import('../pages/EDDWorkflow').then(m => ({ default: m.EDDWorkflow }))
+)
+export const TransactionMonitoring = lazy(() =>
+  import('../pages/TransactionMonitoring').then(m => ({ default: m.TransactionMonitoring }))
+)
+export const AdverseMedia = lazy(() =>
+  import('../pages/AdverseMedia').then(m => ({ default: m.AdverseMedia }))
+)
+export const PEPScreening = lazy(() =>
+  import('../pages/PEPScreening').then(m => ({ default: m.PEPScreening }))
+)
+export const SARForm = lazy(() =>
+  import('../pages/reporting/SARForm').then(m => ({ default: m.SARForm }))
+)
+export const ComplianceReport = lazy(() =>
+  import('../pages/reporting/ComplianceReport').then(m => ({ default: m.ComplianceReport }))
+)
+export const CryptoScreeningPage = lazy(() => import('../pages/CryptoScreening'))
+export const TxnScreeningPage = lazy(() => import('../pages/TxnScreening'))

package/src/routes/lazyPages.ts

@@ -0,0 +1,35 @@
+import { lazy } from 'react'
+
+export const Dashboard = lazy(() => import('../pages/Dashboard').then(m => ({ default: m.Dashboard })))
+export const AlertQueue = lazy(() => import('../pages/AlertQueue').then(m => ({ default: m.AlertQueue })))
+export const AlertDetailPage = lazy(() => import('../pages/AlertDetailPage').then(m => ({ default: m.AlertDetailPage })))
+export const ScreenEntity = lazy(() => import('../pages/ScreenEntity').then(m => ({ default: m.ScreenEntity })))
+export const Configuration = lazy(() => import('../pages/Configuration').then(m => ({ default: m.Configuration })))
+export const Analytics = lazy(() => import('../pages/Analytics').then(m => ({ default: m.Analytics })))
+export const AuditTrail = lazy(() => import('../pages/AuditTrail').then(m => ({ default: m.AuditTrail })))
+export const Monitoring = lazy(() => import('../pages/Monitoring').then(m => ({ default: m.Monitoring })))
+export const BatchJobs = lazy(() => import('../pages/BatchJobs').then(m => ({ default: m.BatchJobs })))
+export const SanctionsLists = lazy(() => import('../pages/SanctionsLists').then(m => ({ default: m.SanctionsLists })))
+export const Login = lazy(() => import('../pages/Login').then(m => ({ default: m.Login })))
+export const Signup = lazy(() => import('../pages/Signup').then(m => ({ default: m.Signup })))
+export const LandingPage = lazy(() => import('../pages/marketing/LandingPage'))
+export const BillingPage = lazy(() => import('../pages/billing/BillingPage'))
+export const Onboarding = lazy(() => import('../pages/Onboarding'))
+export const AdminTenants = lazy(() => import('../pages/admin/Tenants'))
+export const TenantDetail = lazy(() => import('../pages/admin/TenantDetail'))
+export const SystemHealth = lazy(() => import('../pages/admin/SystemHealth'))
+export const DataSources = lazy(() => import('../pages/admin/DataSources'))
+export const AdminOperations = lazy(() => import('../pages/admin/Operations'))
+export const AdminScheduledTasks = lazy(() => import('../pages/admin/ScheduledTasks'))
+export const Team = lazy(() => import('../pages/Team'))
+export const TermsOfService = lazy(() => import('../pages/legal/TermsOfService'))
+export const PrivacyPolicy = lazy(() => import('../pages/legal/PrivacyPolicy'))
+export const ForgotPassword = lazy(() => import('../pages/ForgotPassword'))
+export const ListsMarketplace = lazy(() => import('../pages/ListsMarketplace').then(m => ({ default: m.ListsMarketplace })))
+export const APIKeysPage = lazy(() => import('../pages/APIKeys'))
+export const WebhooksPage = lazy(() => import('../pages/Webhooks'))
+export const CryptoScreening = lazy(() => import('../pages/CryptoScreening'))
+export const TxnScreening = lazy(() => import('../pages/TxnScreening'))
+export const MFASetup = lazy(() => import('../pages/MFASetup'))
+export const ResetPassword = lazy(() => import('../pages/ResetPassword'))
+export const TaskHistory = lazy(() => import('../pages/TaskHistory'))

package/src/routes/lazyPlatform.ts

@@ -0,0 +1,5 @@
+import { lazy } from 'react'
+
+export const PlatformOverview = lazy(() => import('../pages/platform/Overview'))
+export const PlatformUsers = lazy(() => import('../pages/platform/Users'))
+export const PlatformAPIKeys = lazy(() => import('../pages/platform/APIKeys'))

package/src/routes/platform.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import { PlatformOverview, PlatformUsers, PlatformAPIKeys } from './lazyPlatform'
+
+type PWrapper = ({ children }: { children: React.ReactNode }) => JSX.Element
+
+export function platformRoutes(P: PWrapper) {
+  return (
+    <>
+      <Route path="/platform/overview" element={<P><PlatformOverview /></P>} />
+      <Route path="/platform/users" element={<P><PlatformUsers /></P>} />
+      <Route path="/platform/keys" element={<P><PlatformAPIKeys /></P>} />
+    </>
+  )
+}

package/src/styles/effects.css

@@ -0,0 +1,76 @@
+/* Animations */
+@keyframes spin-smooth { to { transform: rotate(360deg); } }
+.spinner { animation: spin-smooth 1s linear infinite; }
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in { animation: fade-in 0.3s ease-out both; }
+
+@keyframes glow-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+
+@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
+.marquee-track { animation: marquee 30s linear infinite; }
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes border-glow-pulse {
+  0%, 100% { border-color: rgba(10,132,255,0.2); }
+  50% { border-color: rgba(10,132,255,0.5); }
+}
+
+/* Glass surfaces */
+.glass {
+  backdrop-filter: blur(16px);
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.06);
+}
+
+.glass-panel {
+  backdrop-filter: blur(24px) saturate(180%);
+  background: rgba(18, 18, 26, 0.6);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
+}
+
+/* Glow effects */
+.glow-blue { box-shadow: 0 0 20px rgba(10,132,255,0.15), 0 0 40px rgba(10,132,255,0.05); }
+.glow-green { box-shadow: 0 0 20px rgba(48,209,88,0.15), 0 0 40px rgba(48,209,88,0.05); }
+.glow-accent { box-shadow: 0 0 20px rgba(0,212,170,0.15), 0 0 40px rgba(0,212,170,0.05); }
+.glow-red { box-shadow: 0 0 30px rgba(255,69,58,0.15), 0 0 60px rgba(255,69,58,0.05); }
+.glow-orange { box-shadow: 0 0 30px rgba(255,159,10,0.15), 0 0 60px rgba(255,159,10,0.05); }
+
+/* Stat card glow */
+.stat-glow {
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 30px rgba(10,132,255,0.08);
+  transition: box-shadow 0.3s ease;
+}
+.stat-glow:hover {
+  box-shadow: 0 0 0 1px rgba(10,132,255,0.2), 0 0 40px rgba(10,132,255,0.12);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Shimmer loading effect */
+.shimmer {
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s ease-in-out infinite;
+}
+
+/* Animated border glow */
+.border-glow {
+  border: 1px solid rgba(10,132,255,0.2);
+  animation: border-glow-pulse 3s ease-in-out infinite;
+}

package/src/test/setup.ts

@@ -0,0 +1,25 @@
+import { vi } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import '../i18n/config'
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+})
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))