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 { FraudDetectionDashboard } from 'primus-react-ui';

<FraudDetectionDashboard apiUrl="https://api.yourdomain.com" />

Angular

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

Props

Prop	Type	Default	Description
apiUrl	string	—	API base URL
riskScore	number	—	Angular: risk score 0–100

Props — full reference

Prop	Type	Default	Description
apiUrl	string	—	API base URL
riskScore	number	—	Angular: current risk score 0–100
alerts	FraudAlert[]	—	Angular: alert list
refreshInterval	number	30000	Auto-refresh interval ms

interface FraudAlert {
  id:          string;
  severity:    'low' | 'medium' | 'high' | 'critical';
  description: string;
  timestamp:   string | Date;
  status:      'open' | 'investigating' | 'resolved';
}

Version history

See the Changelog for version history and breaking changes.