feat: Features 3.2 + 3.3 — Scan UI + Bet Tracker
Scan UI (/scan): - Leg builder with player autocomplete, stat/line/direction/book - 2-12 legs, add/remove - Calls POST /api/scan/parlay, displays grade results - Color-coded grades (A/B/C/D), correlation flags, kill conditions - Scan counter, upgrade pitch modal at limit - New Scan / Save actions Bet Tracker (/tracker): - Performance cards: ROI, Win Rate, Bets with period toggle - Quick Slip form for fast bet entry - Bet history with status/book filters - Inline settle modal (won/lost/push/void) - Profit display on settled bets Shared API client library (lib/api.ts). Build clean: 9 static pages generated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,292 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import GradeCard from '@/components/GradeCard';
|
||||||
|
|
||||||
|
interface Leg {
|
||||||
|
player: string;
|
||||||
|
stat_type: string;
|
||||||
|
line: number | string;
|
||||||
|
direction: string;
|
||||||
|
book: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LegResult {
|
||||||
|
index: number;
|
||||||
|
player: string;
|
||||||
|
stat_type: string;
|
||||||
|
line: number;
|
||||||
|
direction: string;
|
||||||
|
grade: string;
|
||||||
|
confidence: number;
|
||||||
|
edge_pct: number;
|
||||||
|
kill_conditions: { code: string; reason: string }[];
|
||||||
|
reasoning_summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ScanResult {
|
||||||
|
scan_id: string;
|
||||||
|
parlay_grade: string;
|
||||||
|
parlay_confidence: number;
|
||||||
|
correlation_flags: { type: string; legs: number[]; detail: string; impact: string }[];
|
||||||
|
legs: LegResult[];
|
||||||
|
scan_count: number;
|
||||||
|
scans_remaining: number | null;
|
||||||
|
upgrade_pitch: {
|
||||||
|
hook: string;
|
||||||
|
insight: string;
|
||||||
|
cta: string;
|
||||||
|
tier_recommended: string;
|
||||||
|
founder_price: string;
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STAT_TYPES = ['points', 'rebounds', 'assists', 'threes', 'blocks', 'steals', 'pra', 'turnovers'];
|
||||||
|
const BOOKS = ['draftkings', 'fanduel', 'betmgm'];
|
||||||
|
|
||||||
|
const emptyLeg: Leg = { player: '', stat_type: 'points', line: '', direction: 'over', book: 'draftkings' };
|
||||||
|
|
||||||
|
export default function ScanPage() {
|
||||||
|
const [legs, setLegs] = useState<Leg[]>([{ ...emptyLeg }]);
|
||||||
|
const [results, setResults] = useState<ScanResult | null>(null);
|
||||||
|
const [scanning, setScanning] = useState(false);
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [playerSuggestions, setPlayerSuggestions] = useState<string[]>([]);
|
||||||
|
const [activeInput, setActiveInput] = useState(-1);
|
||||||
|
|
||||||
|
const updateLeg = (index: number, field: keyof Leg, value: string | number) => {
|
||||||
|
setLegs((prev) => prev.map((l, i) => (i === index ? { ...l, [field]: value } : l)));
|
||||||
|
};
|
||||||
|
|
||||||
|
const addLeg = () => {
|
||||||
|
if (legs.length < 12) setLegs([...legs, { ...emptyLeg }]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeLeg = (index: number) => {
|
||||||
|
if (legs.length > 1) setLegs(legs.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchPlayer = useCallback(async (name: string, index: number) => {
|
||||||
|
if (name.length < 2) { setPlayerSuggestions([]); return; }
|
||||||
|
setActiveInput(index);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${process.env.NEXT_PUBLIC_NBA_SERVICE_URL || 'http://localhost:8000'}/players/search?name=${encodeURIComponent(name)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
setPlayerSuggestions((data.results || []).map((r: any) => r.full_name).slice(0, 5));
|
||||||
|
} catch { setPlayerSuggestions([]); }
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const scan = async () => {
|
||||||
|
const validLegs = legs.filter((l) => l.player && l.line);
|
||||||
|
if (validLegs.length < 2) { setError('Add at least 2 legs'); return; }
|
||||||
|
|
||||||
|
setScanning(true);
|
||||||
|
setError('');
|
||||||
|
setResults(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'}/api/scan/parlay`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(typeof window !== 'undefined' && localStorage.getItem('sb-token')
|
||||||
|
? { Authorization: `Bearer ${localStorage.getItem('sb-token')}` }
|
||||||
|
: {}),
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ legs: validLegs.map((l) => ({ ...l, line: Number(l.line) })) }),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (!res.ok) throw new Error(data.error || 'Scan failed');
|
||||||
|
setResults(data);
|
||||||
|
} catch (e: any) {
|
||||||
|
setError(e.message);
|
||||||
|
} finally {
|
||||||
|
setScanning(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-8 px-4 max-w-3xl mx-auto">
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h1 className="text-3xl font-bold">Scan Parlay</h1>
|
||||||
|
{results && results.scans_remaining != null && (
|
||||||
|
<div className="text-sm text-[var(--text-muted)]">
|
||||||
|
<span className="font-mono">{results.scan_count}</span> of 5 scans used
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leg Builder */}
|
||||||
|
<div className="space-y-4 mb-6">
|
||||||
|
{legs.map((leg, i) => (
|
||||||
|
<div key={i} className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)]">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<span className="text-xs text-[var(--text-muted)] font-mono">Leg {i + 1}</span>
|
||||||
|
{legs.length > 1 && (
|
||||||
|
<button onClick={() => removeLeg(i)} className="text-xs text-[var(--grade-d)] hover:text-white">Remove</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
<div className="col-span-2 relative">
|
||||||
|
<input
|
||||||
|
placeholder="Player name"
|
||||||
|
value={leg.player}
|
||||||
|
onChange={(e) => {
|
||||||
|
updateLeg(i, 'player', e.target.value);
|
||||||
|
searchPlayer(e.target.value, i);
|
||||||
|
}}
|
||||||
|
onBlur={() => setTimeout(() => setPlayerSuggestions([]), 200)}
|
||||||
|
className="w-full px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)] focus:outline-none focus:border-[var(--accent)]"
|
||||||
|
/>
|
||||||
|
{activeInput === i && playerSuggestions.length > 0 && (
|
||||||
|
<div className="absolute z-10 top-full mt-1 w-full bg-[var(--card)] border border-[var(--border)] rounded-lg overflow-hidden">
|
||||||
|
{playerSuggestions.map((name) => (
|
||||||
|
<button
|
||||||
|
key={name}
|
||||||
|
onMouseDown={() => { updateLeg(i, 'player', name); setPlayerSuggestions([]); }}
|
||||||
|
className="block w-full text-left px-3 py-2 text-sm hover:bg-[var(--border)] transition"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
value={leg.stat_type}
|
||||||
|
onChange={(e) => updateLeg(i, 'stat_type', e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white"
|
||||||
|
>
|
||||||
|
{STAT_TYPES.map((s) => <option key={s} value={s}>{s}</option>)}
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.5"
|
||||||
|
placeholder="Line"
|
||||||
|
value={leg.line}
|
||||||
|
onChange={(e) => updateLeg(i, 'line', e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)]"
|
||||||
|
/>
|
||||||
|
<select
|
||||||
|
value={leg.direction}
|
||||||
|
onChange={(e) => updateLeg(i, 'direction', e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white"
|
||||||
|
>
|
||||||
|
<option value="over">Over</option>
|
||||||
|
<option value="under">Under</option>
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
value={leg.book}
|
||||||
|
onChange={(e) => updateLeg(i, 'book', e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white"
|
||||||
|
>
|
||||||
|
{BOOKS.map((b) => <option key={b} value={b}>{b}</option>)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 mb-8">
|
||||||
|
{legs.length < 12 && (
|
||||||
|
<button onClick={addLeg} className="px-4 py-2 text-sm border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition">
|
||||||
|
+ Add Leg
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={scan}
|
||||||
|
disabled={scanning || legs.filter((l) => l.player && l.line).length < 2}
|
||||||
|
className="flex-1 py-3 bg-[var(--accent)] text-white rounded-xl font-medium hover:opacity-90 transition disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{scanning ? 'Scanning...' : 'Scan Parlay'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <div className="p-4 mb-6 rounded-xl bg-[var(--grade-d)]/10 border border-[var(--grade-d)] text-[var(--grade-d)] text-sm">{error}</div>}
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
{results && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Overall Grade */}
|
||||||
|
<div className="p-6 rounded-2xl bg-[var(--card)] border border-[var(--border)] text-center">
|
||||||
|
<p className="text-sm text-[var(--text-muted)] mb-3">Parlay Grade</p>
|
||||||
|
<div className="flex justify-center mb-3">
|
||||||
|
<GradeCard grade={results.parlay_grade} confidence={results.parlay_confidence} />
|
||||||
|
</div>
|
||||||
|
{results.correlation_flags.length > 0 && (
|
||||||
|
<p className="text-xs text-[var(--text-muted)]">
|
||||||
|
{results.correlation_flags.length} correlation flag{results.correlation_flags.length > 1 ? 's' : ''} detected
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Individual Legs */}
|
||||||
|
{results.legs.map((leg) => (
|
||||||
|
<div key={leg.index} className="p-5 rounded-xl bg-[var(--card)] border border-[var(--border)]">
|
||||||
|
<div className="flex justify-between items-start mb-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold">{leg.player}</h3>
|
||||||
|
<p className="text-sm text-[var(--text-muted)]">
|
||||||
|
{leg.direction.charAt(0).toUpperCase() + leg.direction.slice(1)} {leg.line} {leg.stat_type}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<GradeCard grade={leg.grade} confidence={leg.confidence} />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-[var(--text-muted)] leading-relaxed mb-2">{leg.reasoning_summary}</p>
|
||||||
|
{leg.edge_pct !== 0 && (
|
||||||
|
<span className={`text-xs font-mono ${leg.edge_pct > 0 ? 'text-[var(--grade-a)]' : 'text-[var(--grade-d)]'}`}>
|
||||||
|
Edge: {leg.edge_pct > 0 ? '+' : ''}{leg.edge_pct}%
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{leg.kill_conditions.length > 0 && (
|
||||||
|
<div className="mt-2 flex flex-wrap gap-1">
|
||||||
|
{leg.kill_conditions.map((k) => (
|
||||||
|
<span key={k.code} className="px-2 py-0.5 text-xs bg-[var(--grade-d)]/10 text-[var(--grade-d)] rounded">
|
||||||
|
{k.code}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Correlations */}
|
||||||
|
{results.correlation_flags.length > 0 && (
|
||||||
|
<div className="p-5 rounded-xl bg-[var(--card)] border border-[var(--border)]">
|
||||||
|
<h3 className="font-semibold mb-3">Correlations</h3>
|
||||||
|
{results.correlation_flags.map((flag, i) => (
|
||||||
|
<div key={i} className="flex items-start gap-2 text-sm mb-2">
|
||||||
|
<span className={flag.impact === 'major_negative' ? 'text-[var(--grade-d)]' : flag.impact === 'positive' ? 'text-[var(--grade-a)]' : 'text-[var(--grade-c)]'}>
|
||||||
|
{flag.impact === 'major_negative' ? '!!' : flag.impact === 'positive' ? '+' : '!'}
|
||||||
|
</span>
|
||||||
|
<span className="text-[var(--text-muted)]">{flag.detail}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Upgrade Pitch */}
|
||||||
|
{results.upgrade_pitch && (
|
||||||
|
<div className="p-6 rounded-2xl bg-[var(--accent)]/10 border border-[var(--accent)]">
|
||||||
|
<p className="font-semibold mb-2">{results.upgrade_pitch.hook}</p>
|
||||||
|
<p className="text-sm text-[var(--text-muted)] mb-4">{results.upgrade_pitch.insight}</p>
|
||||||
|
<a href="#pricing" className="inline-block px-6 py-2 bg-[var(--accent)] text-white rounded-lg text-sm font-medium hover:opacity-90 transition">
|
||||||
|
{results.upgrade_pitch.cta}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => { setResults(null); setLegs([{ ...emptyLeg }]); }}
|
||||||
|
className="flex-1 py-3 border border-[var(--border)] rounded-xl text-sm hover:border-[var(--accent)] transition"
|
||||||
|
>
|
||||||
|
New Scan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,288 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
type Period = 'weekly' | 'monthly' | 'all_time';
|
||||||
|
|
||||||
|
interface PerfStats {
|
||||||
|
roi: number;
|
||||||
|
win_rate: number;
|
||||||
|
sample_size: number;
|
||||||
|
total_wagered: number;
|
||||||
|
total_profit: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Bet {
|
||||||
|
id: string;
|
||||||
|
amount: number;
|
||||||
|
potential_payout: number;
|
||||||
|
book: string;
|
||||||
|
bet_type: string;
|
||||||
|
status: string;
|
||||||
|
slip_data: { legs: any[]; total_odds?: number; scan_session_id?: string };
|
||||||
|
submission_method: string;
|
||||||
|
placed_at: string;
|
||||||
|
settled_at: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||||
|
|
||||||
|
function getAuthHeaders(): Record<string, string> {
|
||||||
|
const token = typeof window !== 'undefined' ? localStorage.getItem('sb-token') : null;
|
||||||
|
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TrackerPage() {
|
||||||
|
const [period, setPeriod] = useState<Period>('monthly');
|
||||||
|
const [performance, setPerformance] = useState<Record<Period, PerfStats | null>>({ weekly: null, monthly: null, all_time: null });
|
||||||
|
const [bets, setBets] = useState<Bet[]>([]);
|
||||||
|
const [total, setTotal] = useState(0);
|
||||||
|
const [statusFilter, setStatusFilter] = useState('');
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [settlingId, setSettlingId] = useState<string | null>(null);
|
||||||
|
const [settleStatus, setSettleStatus] = useState('won');
|
||||||
|
|
||||||
|
// Quick slip state
|
||||||
|
const [showQuickSlip, setShowQuickSlip] = useState(false);
|
||||||
|
const [slipPlayer, setSlipPlayer] = useState('');
|
||||||
|
const [slipStat, setSlipStat] = useState('points');
|
||||||
|
const [slipLine, setSlipLine] = useState('');
|
||||||
|
const [slipDirection, setSlipDirection] = useState('over');
|
||||||
|
const [slipOdds, setSlipOdds] = useState('-110');
|
||||||
|
const [slipAmount, setSlipAmount] = useState('');
|
||||||
|
const [slipBook, setSlipBook] = useState('draftkings');
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams({ limit: '20', offset: '0' });
|
||||||
|
if (statusFilter) params.set('status', statusFilter);
|
||||||
|
|
||||||
|
const [perfRes, betsRes] = await Promise.all([
|
||||||
|
fetch(`${API_BASE}/api/bets/performance`, { headers: getAuthHeaders() }),
|
||||||
|
fetch(`${API_BASE}/api/bets?${params}`, { headers: getAuthHeaders() }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (perfRes.ok) {
|
||||||
|
const perfData = await perfRes.json();
|
||||||
|
setPerformance(perfData);
|
||||||
|
}
|
||||||
|
if (betsRes.ok) {
|
||||||
|
const betsData = await betsRes.json();
|
||||||
|
setBets(betsData.bets || []);
|
||||||
|
setTotal(betsData.total || 0);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to fetch tracker data');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [statusFilter]);
|
||||||
|
|
||||||
|
useEffect(() => { fetchData(); }, [fetchData]);
|
||||||
|
|
||||||
|
const handleSettle = async (betId: string) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/bets/${betId}/settle`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: getAuthHeaders(),
|
||||||
|
body: JSON.stringify({ status: settleStatus }),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
setSettlingId(null);
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
} catch (e) { console.error('Settle failed'); }
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuickSlip = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${API_BASE}/api/bets/quickslip`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getAuthHeaders(),
|
||||||
|
body: JSON.stringify({
|
||||||
|
legs: [{ player: slipPlayer, stat_type: slipStat, line: Number(slipLine), direction: slipDirection, odds: Number(slipOdds) }],
|
||||||
|
amount: Number(slipAmount),
|
||||||
|
book: slipBook,
|
||||||
|
bet_type: 'straight',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
setShowQuickSlip(false);
|
||||||
|
setSlipPlayer(''); setSlipLine(''); setSlipAmount('');
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
} catch (e) { console.error('Quick slip failed'); }
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentPerf = performance[period];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-8 px-4 max-w-4xl mx-auto">
|
||||||
|
<h1 className="text-3xl font-bold mb-8">Bet Tracker</h1>
|
||||||
|
|
||||||
|
{/* Performance Cards */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex gap-2 mb-4">
|
||||||
|
{(['weekly', 'monthly', 'all_time'] as Period[]).map((p) => (
|
||||||
|
<button
|
||||||
|
key={p}
|
||||||
|
onClick={() => setPeriod(p)}
|
||||||
|
className={`px-3 py-1 text-sm rounded-lg transition ${period === p ? 'bg-[var(--accent)] text-white' : 'bg-[var(--card)] text-[var(--text-muted)] hover:text-white'}`}
|
||||||
|
>
|
||||||
|
{p === 'all_time' ? 'All Time' : p.charAt(0).toUpperCase() + p.slice(1)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)] text-center">
|
||||||
|
<div className={`text-2xl font-mono font-bold ${(currentPerf?.roi ?? 0) >= 0 ? 'text-[var(--grade-a)]' : 'text-[var(--grade-d)]'}`}>
|
||||||
|
{currentPerf ? `${currentPerf.roi > 0 ? '+' : ''}${currentPerf.roi}%` : '--'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--text-muted)] mt-1">ROI</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)] text-center">
|
||||||
|
<div className="text-2xl font-mono font-bold">
|
||||||
|
{currentPerf ? `${currentPerf.win_rate}%` : '--'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--text-muted)] mt-1">Win Rate</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)] text-center">
|
||||||
|
<div className="text-2xl font-mono font-bold">
|
||||||
|
{currentPerf?.sample_size ?? '--'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--text-muted)] mt-1">Bets</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Submit */}
|
||||||
|
<div className="flex gap-3 mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowQuickSlip(!showQuickSlip)}
|
||||||
|
className="px-4 py-2 text-sm border border-[var(--border)] rounded-lg hover:border-[var(--accent)] transition"
|
||||||
|
>
|
||||||
|
Quick Slip
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showQuickSlip && (
|
||||||
|
<form onSubmit={handleQuickSlip} className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)] mb-8 space-y-3">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||||
|
<input placeholder="Player" value={slipPlayer} onChange={(e) => setSlipPlayer(e.target.value)} required
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)]" />
|
||||||
|
<select value={slipStat} onChange={(e) => setSlipStat(e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white">
|
||||||
|
{['points', 'rebounds', 'assists', 'threes', 'blocks', 'steals', 'pra', 'turnovers'].map((s) => (
|
||||||
|
<option key={s} value={s}>{s}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<input type="number" step="0.5" placeholder="Line" value={slipLine} onChange={(e) => setSlipLine(e.target.value)} required
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)]" />
|
||||||
|
<select value={slipDirection} onChange={(e) => setSlipDirection(e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white">
|
||||||
|
<option value="over">Over</option><option value="under">Under</option>
|
||||||
|
</select>
|
||||||
|
<input type="number" placeholder="Odds (e.g. -110)" value={slipOdds} onChange={(e) => setSlipOdds(e.target.value)} required
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)]" />
|
||||||
|
<input type="number" step="0.01" placeholder="Amount ($)" value={slipAmount} onChange={(e) => setSlipAmount(e.target.value)} required
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white placeholder:text-[var(--text-muted)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<select value={slipBook} onChange={(e) => setSlipBook(e.target.value)}
|
||||||
|
className="px-3 py-2 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm text-white">
|
||||||
|
{['draftkings', 'fanduel', 'betmgm'].map((b) => <option key={b} value={b}>{b}</option>)}
|
||||||
|
</select>
|
||||||
|
<button type="submit" className="px-6 py-2 bg-[var(--accent)] text-white rounded-lg text-sm font-medium hover:opacity-90 transition">
|
||||||
|
Submit Bet
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bet History */}
|
||||||
|
<div className="mb-4 flex gap-2">
|
||||||
|
{['', 'pending', 'won', 'lost', 'push'].map((s) => (
|
||||||
|
<button
|
||||||
|
key={s}
|
||||||
|
onClick={() => setStatusFilter(s)}
|
||||||
|
className={`px-3 py-1 text-xs rounded-lg transition ${statusFilter === s ? 'bg-[var(--accent)] text-white' : 'bg-[var(--card)] text-[var(--text-muted)]'}`}
|
||||||
|
>
|
||||||
|
{s || 'All'}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{loading ? (
|
||||||
|
<p className="text-[var(--text-muted)] text-sm">Loading...</p>
|
||||||
|
) : bets.length === 0 ? (
|
||||||
|
<p className="text-[var(--text-muted)] text-sm">No bets yet. Submit your first bet above.</p>
|
||||||
|
) : (
|
||||||
|
bets.map((bet) => (
|
||||||
|
<div key={bet.id} className="p-4 rounded-xl bg-[var(--card)] border border-[var(--border)]">
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium">
|
||||||
|
{(bet.slip_data?.legs || []).map((l: any) =>
|
||||||
|
`${l.player} ${l.direction?.[0]?.toUpperCase() || ''}${l.line} ${l.stat_type}`
|
||||||
|
).join(' / ') || `${bet.bet_type} bet`}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--text-muted)] mt-1">
|
||||||
|
{bet.book} | ${bet.amount} | {new Date(bet.placed_at).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span className={`text-xs font-mono px-2 py-0.5 rounded ${
|
||||||
|
bet.status === 'won' ? 'bg-[var(--grade-a)]/10 text-[var(--grade-a)]' :
|
||||||
|
bet.status === 'lost' ? 'bg-[var(--grade-d)]/10 text-[var(--grade-d)]' :
|
||||||
|
'bg-[var(--border)] text-[var(--text-muted)]'
|
||||||
|
}`}>
|
||||||
|
{bet.status.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
{bet.status === 'won' && (
|
||||||
|
<div className="text-xs text-[var(--grade-a)] mt-1 font-mono">
|
||||||
|
+${(bet.potential_payout - bet.amount).toFixed(2)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{bet.status === 'pending' && (
|
||||||
|
<div className="mt-3 flex items-center gap-2">
|
||||||
|
{settlingId === bet.id ? (
|
||||||
|
<>
|
||||||
|
<select value={settleStatus} onChange={(e) => setSettleStatus(e.target.value)}
|
||||||
|
className="px-2 py-1 text-xs rounded bg-[var(--bg)] border border-[var(--border)] text-white">
|
||||||
|
<option value="won">Won</option>
|
||||||
|
<option value="lost">Lost</option>
|
||||||
|
<option value="push">Push</option>
|
||||||
|
<option value="void">Void</option>
|
||||||
|
</select>
|
||||||
|
<button onClick={() => handleSettle(bet.id)} className="px-3 py-1 text-xs bg-[var(--accent)] text-white rounded hover:opacity-90">
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
<button onClick={() => setSettlingId(null)} className="px-3 py-1 text-xs text-[var(--text-muted)]">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<button onClick={() => setSettlingId(bet.id)} className="text-xs text-[var(--accent)] hover:underline">
|
||||||
|
Settle
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{bets.length > 0 && bets.length < total && (
|
||||||
|
<button className="w-full mt-4 py-2 text-sm text-[var(--text-muted)] hover:text-white transition">
|
||||||
|
Load More
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
|
||||||
|
const NBA_SERVICE = process.env.NEXT_PUBLIC_NBA_SERVICE_URL || 'http://localhost:8000';
|
||||||
|
|
||||||
|
async function fetchAPI(path: string, options: RequestInit = {}) {
|
||||||
|
const token = typeof window !== 'undefined' ? localStorage.getItem('sb-token') : null;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(options.headers as Record<string, string> || {}),
|
||||||
|
};
|
||||||
|
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
|
||||||
|
const res = await fetch(`${API_BASE}${path}`, { ...options, headers });
|
||||||
|
if (!res.ok) {
|
||||||
|
const body = await res.json().catch(() => ({ error: res.statusText }));
|
||||||
|
const err = new Error(body.error || 'Request failed');
|
||||||
|
(err as any).status = res.status;
|
||||||
|
(err as any).body = body;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function scanParlay(legs: any[]) {
|
||||||
|
return fetchAPI('/api/scan/parlay', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ legs }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function searchPlayers(name: string) {
|
||||||
|
const res = await fetch(`${NBA_SERVICE}/players/search?name=${encodeURIComponent(name)}`);
|
||||||
|
if (!res.ok) return { results: [] };
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function submitQuickslip(data: any) {
|
||||||
|
return fetchAPI('/api/bets/quickslip', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getBets(params: Record<string, string> = {}) {
|
||||||
|
const qs = new URLSearchParams(params).toString();
|
||||||
|
return fetchAPI(`/api/bets?${qs}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function settleBet(betId: string, status: string) {
|
||||||
|
return fetchAPI(`/api/bets/${betId}/settle`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify({ status }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPerformance() {
|
||||||
|
return fetchAPI('/api/bets/performance');
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user