Demo Dashboard

Interactive Streamlit dashboard for testing and demonstrating the fraud detection system.

Starting the Dashboard

# Ensure the API is running first
uvicorn src.api.main:app --reload --port 8000

# Start the dashboard
streamlit run dashboard.py --server.port 8501

Open http://localhost:8501 in your browser.

Dashboard Layout

Sidebar: System Status

Real-time health indicators:

IndicatorDescription
System StatusOverall health (Healthy/Degraded/Down)
RedisVelocity counter store connection
PostgreSQLEvidence storage connection
PolicyPolicy engine status
Policy VersionCurrent active policy version

Main Area: Transaction Simulator

Attack Presets

One-click presets to demonstrate different fraud scenarios:

PresetDescriptionExpected Result
Normal TransactionTypical $50 purchaseALLOW
Card Testing AttackSmall $1 amount from datacenter IPREVIEW or BLOCK
Velocity Attack$1500 from new accountFRICTION or REVIEW
Geographic AnomalyUS card transacting from NigeriaREVIEW
Bot/Emulator AttackEmulated device via TorBLOCK
Friendly Fraud RiskHigh-value from dispute-prone userFRICTION

Custom Transaction Fields

Fine-tune transaction parameters:

  • Amount - Transaction value in USD
  • Service ID - Telco service identifier
  • Event Subtype - sim_activation, topup, device_upgrade, sim_swap, etc.
  • Card Token - Tokenized card reference
  • User ID - Customer identifier
  • Device Emulator - Toggle emulated device flag
  • Device Rooted - Toggle rooted/jailbroken flag
  • IP Datacenter - Toggle datacenter IP flag
  • IP Tor - Toggle Tor exit node flag
  • IP VPN - Toggle VPN flag

Decision Display

Decision Badge

Large colored badge showing the decision:

DecisionColorMeaning
ALLOWGreenTransaction approved
FRICTIONYellowRequest additional verification
REVIEWOrangeQueue for manual review
BLOCKRedTransaction declined

Score Gauges

Four interactive gauge charts:

  1. Overall Risk - Combined risk score (0-100%)
  2. Criminal Score - Criminal fraud probability
  3. Friendly Fraud - Friendly fraud probability
  4. Bot Score - Automation detection score

Color thresholds:

  • 0-30%: Green (low risk)
  • 30-60%: Yellow (medium risk)
  • 60-80%: Orange (elevated risk)
  • 80-100%: Red (high risk)

Signal Details

Expandable section showing:

  • Triggered detection signals
  • Individual detector scores
  • Feature values used in decision
  • Policy rules that matched

Analytics Tab

Decision Distribution

Pie chart showing decision breakdown:

  • Percentage of ALLOW vs FRICTION vs REVIEW vs BLOCK
  • Updated in real-time as transactions are processed

Hourly Volume

Bar chart showing:

  • Transaction volume per hour
  • Decision distribution over time
  • Useful for identifying attack patterns

Latency Metrics

Line chart displaying:

  • P50 latency (median)
  • P95 latency
  • P99 latency
  • Target threshold line (10ms)

Decision History Tab

Table showing recent decisions:

ColumnDescription
TimestampWhen decision was made
Transaction IDUnique identifier
AmountTransaction value
DecisionALLOW/FRICTION/REVIEW/BLOCK
Overall RiskCombined risk score
SignalsTriggered detectors
LatencyProcessing time

Features:

  • Sort by any column
  • Filter by decision type
  • Export to CSV
  • Click row for full details

Policy Inspector Tab

Current Policy

Displays the active policy configuration:

version: "1.0"

thresholds:
  block: 80
  review: 60
  friction: 40

rules:
  - name: high_value_new_user
    condition: amount > 500 AND user_age_days < 7
    action: FRICTION

Policy Actions

  • View Full YAML - See complete policy file
  • Reload Policy - Hot-reload from disk
  • Version History - See previous policy versions

Demo Scenarios

Scenario 1: Normal Operations

  1. Select "Normal Transaction" preset
  2. Click "Submit Transaction"
  3. Observe ALLOW decision with low scores
  4. View decision in history

Scenario 2: Card Testing Attack

  1. Select "Card Testing Attack" preset
  2. Submit multiple times rapidly
  3. Watch scores increase with each submission
  4. Eventually triggers REVIEW then BLOCK
  5. Demonstrates velocity detection

Scenario 3: Bot Attack

  1. Select "Bot/Emulator Attack" preset
  2. Submit transaction
  3. Immediate BLOCK decision
  4. View signals: bot_detected, tor_exit_node

Scenario 4: Policy Change

  1. Edit config/policy.yaml
  2. Change friction threshold from 40 to 30
  3. Click "Reload Policy" in dashboard
  4. Submit borderline transaction
  5. Observe changed decision behavior

Keyboard Shortcuts

ShortcutAction
EnterSubmit transaction
RReload policy
CClear form
HToggle history panel

Tips for Demos

  1. Start clean - Reset Redis counters before demos
  2. Tell a story - Walk through attack - detection - block
  3. Show the numbers - Explain what scores mean
  4. Live reload - Demonstrate policy changes take effect instantly
  5. Show evidence - Pull up stored evidence for a blocked transaction