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>
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user