Files

T

builtbykev bfa8345ebf feat: Feature 3.1 — Landing page + blog + Phase 3 specs

Next.js 14+ web app in web/ directory:
- Landing page: Hero, How It Works, Features, 3-tier Pricing with
  founder badges, Footer with email capture
- Blog system: MDX-powered, /blog index + /blog/[slug] pages,
  reading time, Open Graph tags, JSON-LD structured data
- Auth pages: /login + /signup (Supabase Auth ready)
- Design system: dark theme, grade colors (A/B/C/D), BetonBLK voice
- 1 seed blog post: "How to Read Line Movement Like a Sharp"
- Specs for 3.2 (Scan UI), 3.3 (Bet Tracker), 3.4 (Stripe)

Build passes clean: 7 static pages generated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-22 09:43:38 -04:00

6.6 KiB

Raw Blame History

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

Performance cards show ROI, win rate, and bet count for selected period
Period toggle switches between weekly/monthly/all_time
Behavioral pattern card appears at 30+ settled bets with personalized insight
Quick submit bar opens screenshot or quickslip flow
Bet history loads with pagination (20 per page)
Status and book filters work correctly
Settle modal updates bet status and refreshes performance
Bet detail expander shows full leg breakdown
Linked scan session grade shown when available
Positive ROI shown in green, negative in red
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

6.6 KiB Raw Blame History