Fraud Detection Dashboard

Real-time fraud detection dashboard with risk scoring and alert management.

Preview · Fraud Detection Dashboard

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:400px;width:100%">
  <div class="hstack" style="flex-wrap:wrap">
    <div class="card stat" style="flex:1;min-width:130px"><span class="card-label">Risk Score</span><span class="card-value" style="color:var(--success)">Low</span><span class="card-delta up">32 / 100</span></div>
    <div class="card stat" style="flex:1;min-width:130px"><span class="card-label">Alerts Today</span><span class="card-value">7</span><span class="card-delta down">+3 from yesterday</span></div>
  </div>
  <div role="alert" data-variant="warning">2 transactions flagged for manual review.</div>
</div>

React

import { PrimusAmlDashboard } from '@/components/ui/primus-aml-dashboard';

const alerts = [
  {
    id: '1',
    alertType: 'suspicious_transaction',
    severity: 'high',
    status: 'new',
    accountId: 'acc-001',
    accountName: 'Acme Corp',
    amount: 75000,
    description: 'Large international wire outside normal pattern',
    createdAt: new Date().toISOString(),
  },
];

<PrimusAmlDashboard
  alerts={alerts}
  onAlertClick={(alert) => console.log('Alert clicked', alert.id)}
  onStatusChange={(alertId, status) => console.log(alertId, status)}
/>

Angular

<primus-fraud-detection-dashboard [riskScore]="32"
  [alerts]="fraudAlerts" [apiUrl]="'https://api.yourdomain.com'">
</primus-fraud-detection-dashboard>

Props

Prop	Type	Default	Description
alerts	AmlAlert[]	required	AML alerts to display
onAlertClick	(alert: AmlAlert) => void	—	Called when an alert row is clicked
onStatusChange	(alertId: string, status: string) => void	—	Called when an alert status is updated

TypeScript interfaces

interface AmlAlert {
  id:          string;
  alertType:   'suspicious_transaction' | 'threshold_breach' | 'pattern_match' | 'watchlist_hit';
  severity:    'low' | 'medium' | 'high' | 'critical';
  status:      'new' | 'investigating' | 'escalated' | 'resolved' | 'false_positive';
  accountId:   string;
  accountName: string;
  amount?:     number;
  description: string;
  createdAt:   string;   // ISO 8601
  assignee?:   string;
}

Version history

See the Changelog for version history and breaking changes.