Option D: React Flow Connected Diagram

Compact single-line transactions with show/hide toggle · 20 sample transactions (10 matched, 10 unmatched)

✓ Pros

  • Compact single-line transactions - handles 100s of items
  • Show/hide matched toggle - focus on unmatched during onboarding
  • Visual connections make relationships crystal clear
  • Pan and zoom for large datasets
  • Unmatched items have red dot + dashed lines (obvious gaps)
  • Click any node for direct action (no menus)

✗ Cons

  • More complex to implement
  • Layout algorithm needed for auto-positioning
  • Performance with 500+ nodes needs testing
  • Bundle size increase (~50kb)
  • Many edges can look cluttered (may need grouping)

💡 Onboarding Workflow

1. Hide matched
Uncheck "Show matched" to focus on unassigned transactions
2. Click unmatched
Opens Create Rule form with pattern pre-filled
3. Assign to item
Select budget item, save rule
4. Repeat
Transaction disappears from unmatched list
Compact rows = 28px height · Can display 100+ transactions in viewport