# Feature 3.3 — Bet Tracker UI

## Overview
Dashboard for tracking bets, viewing performance, and discovering behavioral patterns. Shows win rate, ROI, and at 30+ bets, surfaces a behavioral pattern card with insights.

## Dependencies
- Feature 1.5 — Bet Submission API (`GET /api/bets`, `GET /api/bets/performance`, `PATCH /api/bets/:id/settle`)
- Feature 3.1 — Landing Page (shared layout, auth, design system)

## Page: /tracker

### Layout
```
┌──────────────────────────────────────────────┐
│  Header: BetonBLK logo + nav                 │
├──────────────────────────────────────────────┤
│                                              │
│  ┌─ Performance Cards ─────────────────────┐ │
│  │  [ROI: +8.3%] [Win Rate: 55%] [Bets: 40]│ │
│  │  Period: [Weekly ▼] [Monthly] [All Time] │ │
│  └─────────────────────────────────────────┘ │
│                                              │
│  ┌─ Behavioral Pattern Card ───────────────┐ │
│  │  (appears at 30+ bets)                  │ │
│  │  "You hit 68% on player points overs    │ │
│  │   but only 35% on rebounds. Consider     │ │
│  │   focusing on your edge."                │ │
│  └─────────────────────────────────────────┘ │
│                                              │
│  ┌─ Quick Submit ──────────────────────────┐ │
│  │  [📸 Screenshot] [✏️ Quick Slip]         │ │
│  └─────────────────────────────────────────┘ │
│                                              │
│  ┌─ Bet History ───────────────────────────┐ │
│  │  Filter: [All ▼] [DraftKings ▼]        │ │
│  │                                         │ │
│  │  ┌─ Bet Row ──────────────────────────┐ │ │
│  │  │ Jokic O26.5 pts | DK | $20        │ │ │
│  │  │ Status: PENDING  [Settle ▶]        │ │ │
│  │  └───────────────────────────────────┘ │ │
│  │                                         │ │
│  │  ┌─ Bet Row ──────────────────────────┐ │ │
│  │  │ 3-leg parlay | FD | $10            │ │ │
│  │  │ Status: WON ✅  +$81.18            │ │ │
│  │  └───────────────────────────────────┘ │ │
│  │                                         │ │
│  │  [Load More]                            │ │
│  └─────────────────────────────────────────┘ │
│                                              │
└──────────────────────────────────────────────┘
```

### Components

**PerformanceCards**
- 3 stat cards: ROI %, Win Rate %, Total Bets
- Period toggle: weekly / monthly / all_time
- Color: green if positive ROI, red if negative
- Calls `GET /api/bets/performance`

**BehavioralPatternCard**
- Only appears when sample_size >= 30
- Analyzes bet history to find:
  - Best stat type (highest win rate)
  - Worst stat type (lowest win rate)
  - Best book (highest ROI)
  - Streak data (current win/loss streak)
- Computed client-side from bet history data
- Card with insight text + recommendation

**QuickSubmitBar**
- Two buttons: Screenshot upload, Quick Slip form
- Screenshot: opens file picker → calls `POST /api/bets/screenshot` → confirm modal
- Quick Slip: opens inline form → calls `POST /api/bets/quickslip`

**BetHistory**
- Paginated list of bets from `GET /api/bets`
- Filters: status (all/pending/won/lost), book
- Each row shows: legs summary, book, amount, status, profit/loss
- Pending bets have a "Settle" button → opens settle modal

**SettleModal**
- Select outcome: Won / Lost / Push / Void
- For each leg: actual value input (optional, for detailed tracking)
- Submit → calls `PATCH /api/bets/:id/settle`
- On success: refreshes performance cards + bet row

**BetDetailExpander**
- Click a bet row to expand full details:
  - All legs with odds
  - Linked scan session grade (if any)
  - Placed at / Settled at timestamps
  - Profit calculation breakdown

### State
```
trackerState = {
  performance: { weekly: {}, monthly: {}, all_time: {} },
  selectedPeriod: 'monthly',
  bets: [],
  total: 0,
  filters: { status: null, book: null },
  page: 0,
  loading: false,
  patternCard: null,  // computed when bets.length >= 30
}
```

### Behavioral Pattern Analysis (Client-Side)
```
When bets.length >= 30 AND settled bets >= 30:
  1. Group bets by stat_type from slip_data.legs
  2. For each stat_type: compute win_rate
  3. Best = highest win_rate (min 5 bets in category)
  4. Worst = lowest win_rate (min 5 bets in category)
  5. Generate insight text:
     "You hit {best_rate}% on {best_stat} {best_dir}s
      but only {worst_rate}% on {worst_stat}. Consider
      focusing on your edge."
```

## Acceptance Criteria
1. Performance cards show ROI, win rate, and bet count for selected period
2. Period toggle switches between weekly/monthly/all_time
3. Behavioral pattern card appears at 30+ settled bets with personalized insight
4. Quick submit bar opens screenshot or quickslip flow
5. Bet history loads with pagination (20 per page)
6. Status and book filters work correctly
7. Settle modal updates bet status and refreshes performance
8. Bet detail expander shows full leg breakdown
9. Linked scan session grade shown when available
10. Positive ROI shown in green, negative in red
11. Responsive: works on mobile and desktop

## Test Plan
- Component tests: PerformanceCards renders correct values
- Component tests: BetHistory filters and paginates
- Component tests: SettleModal sends correct API call
- Integration: submit bet → appears in history → settle → performance updates
- Pattern card: appears at 30+ bets with correct insight
- Responsive: mobile layout usable