/* fraud-dashboard.jsx — Main dashboard view for fraud scoring */ const FraudDashboard = ({ transactions, alerts, metrics, mobile, demoRegion }) => { const regionCfg = REGION_CONFIG[demoRegion]; return (
{/* Greeting */}
Fraud Monitoring Center
Real-time transaction scoring · {regionCfg ? regionCfg.label : 'All regions'}
{!mobile && (
Scoring engine online · {metrics?.avgLatencyMs || 0}ms avg latency
)}
{/* KPI Row */}
} /> a.status !== 'resolved').length || 0} sub={`${alerts?.filter(a => a.severity === 'critical').length || 0} critical`} subColor={ACME.danger} accent="#EF4444" mobile={mobile} icon={} /> } /> } />
{/* Main Grid */}
{/* Left Column */}
{/* Recent Alerts */}
{(alerts || []).filter(a => a.status !== 'resolved').slice(0, 5).map((alert) => (
e.currentTarget.style.background = '#F9FAFB'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{alert.type}
{alert.description}
{alert.amount > 0 ? `$${alert.amount.toLocaleString()}` : '—'}
{formatTimeAgo(alert.timestamp)}
))}
{/* Transaction Feed */}
{/* Table Header */}
Transaction {!mobile && Merchant} Amount {!mobile && Region} Risk Status
{(transactions || []).slice(0, 10).map((txn) => (
e.currentTarget.style.background = '#F9FAFB'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{txn.id}
{mobile ? txn.merchant : `${txn.accountId} · ${txn.channel}`}
{!mobile && {txn.merchant}} {txn.currency === 'USD' ? '$' : txn.currency === 'EUR' ? '€' : txn.currency === 'GBP' ? '£' : ''}{txn.amount.toLocaleString()} {!mobile && {txn.region}}
))}
{/* Right Column */}
{/* Risk Distribution */}
{['low', 'medium', 'high', 'critical'].map((level) => { const count = metrics?.byRisk?.[level] || 0; const total = metrics?.totalScanned || 1; const pct = Math.round(count / total * 100); const colors = { low: '#10B981', medium: '#3B82F6', high: '#F59E0B', critical: '#EF4444' }; return (
{level}
{pct}%
); })}
{/* Model Info */}
{[ { label: 'Model', value: 'phi-4-ft-acme-fraud-v2' }, { label: 'Precision', value: '96.8%' }, { label: 'Recall', value: '94.2%' }, { label: 'F1 Score', value: '95.5%' }, { label: 'Avg Latency', value: `${metrics?.avgLatencyMs || 0}ms` }, ].map(({ label, value }) => (
{label} {value}
))}
); }; window.FraudDashboard = FraudDashboard;