/* Admin views — Overview, Matches, Create, Settle, Draw. */ /* ============================================================ OVERVIEW ============================================================ */ function StatCard({ label, value, accent = 'orange', delta }) { const colors = { orange: 'var(--orange)', ink: 'var(--ink)', green: 'var(--success)', grey: 'var(--grey-400)', }; return (
{label}
{value}
{delta && (
{delta}
)}
); } function AdminOverview({ ctx }) { const t = DASHBOARD.totals; const open = ctx.matchesState.filter(m => m.status === 'OPEN'); const closed = ctx.matchesState.filter(m => m.status === 'CLOSED'); const settled = ctx.matchesState.filter(m => m.status === 'SETTLED'); return ( ctx.goTab('create')}>New match ctx.goTab('draw')}>Run lucky draw
} > {/* Top stats */}
} accent="orange" delta="+ 632 today" />
{/* Two-column: activity + quick controls */}
{/* Activity feed */} Last 24h} padding={0} > {/* Quick panels */}
{(() => { const next = [...ctx.matchesState] .filter(m => m.status !== 'SETTLED' && m.status !== 'CLOSED') .sort((a, b) => a.kickoffMs - b.kickoffMs)[0]; if (!next) return
No upcoming matches.
; return (
{next.teamA.name}
vs
{next.teamB.name}
Kicks off in
); })()}
{DASHBOARD.byOutlet.map((o, i) => { const max = Math.max(...DASHBOARD.byOutlet.map(x => x.count)); return (
{o.outlet} {o.count.toLocaleString()}
); })}
); } /* ============================================================ MATCHES LIST ============================================================ */ function AdminMatches({ ctx }) { const [q, setQ] = useState(''); const [filter, setFilter] = useState('ALL'); const filtered = ctx.matchesState.filter(m => { if (filter !== 'ALL' && m.status !== filter) return false; if (q) { const Q = q.toLowerCase(); return (m.teamA.name + ' ' + m.teamB.name + ' ' + m.stage + ' ' + m.venue).toLowerCase().includes(Q); } return true; }); const filters = ['ALL', 'OPEN', 'SCHEDULED', 'CLOSED', 'SETTLED']; const counts = filters.reduce((acc, f) => { acc[f] = f === 'ALL' ? ctx.matchesState.length : ctx.matchesState.filter(m => m.status === f).length; return acc; }, {}); function fakeCsv(label) { ctx.setToast({ message: `CSV "${label}" queued for download.`, tone: 'info' }); } function deleteMatch(id) { ctx.setMatchesState(s => s.filter(m => m.id !== id)); ctx.setToast({ message: 'Match removed.', tone: 'success' }); } return ( fakeCsv('all_predictions.csv')}>Export all predictions ctx.goTab('create')}>Schedule new
} > {/* Filter bar */}
setQ(e.target.value)} placeholder="Search by team, stage, venue…" style={{ ...inputStyle, paddingLeft: 36 }} />
{filters.map(f => { const active = filter === f; return ( ); })}
{/* Table */}
{filtered.map(m => { const predCount = SAMPLE_PREDICTIONS.filter(p => p.matchId === m.id).length; return ( ); })} {filtered.length === 0 && ( )}
Match Stage Kickoff Status Predictions Actions
{m.teamA.name} vs {m.teamB.name}
{m.venue}
 {m.stage}
{formatKickoff(m.kickoffAt)}
{(m.status === 'OPEN' || m.status === 'SCHEDULED') && (
)} 		{predCount.toLocaleString()}
fakeCsv(`match_${m.id}_predictions.csv`)} icon="receipt" /> {m.status === 'CLOSED' && ( ctx.goTab('settle')} icon="check" tone="orange" /> )} {m.status === 'SETTLED' && ( ctx.goTab('draw')} icon="trophy" tone="orange" /> )} deleteMatch(m.id)} icon="bolt" tone="danger" />
No matches match those filters.
); } function Th({ children, align = 'left' }) { return ( {children} ); } function Td({ children, align = 'left' }) { return {children}; } function IconBtn({ icon, title, onClick, tone = 'default' }) { const palette = { default: { bg: '#fff', fg: 'var(--grey-700)', bd: 'var(--grey-300)' }, orange: { bg: 'var(--orange-50)', fg: 'var(--orange-dark)', bd: 'var(--orange)' }, danger: { bg: '#fff', fg: '#b91c1c', bd: '#fecaca' }, }[tone]; return ( ); } /* ============================================================ CREATE MATCH ============================================================ */ function AdminCreate({ ctx }) { const teamKeys = Object.keys(TEAMS); const [teamA, setTeamA] = useState(''); const [teamB, setTeamB] = useState(''); const [kickoff, setKickoff] = useState(''); const [stage, setStage] = useState('Group Stage'); const [venue, setVenue] = useState(''); const ok = teamA && teamB && teamA !== teamB && kickoff; function submit() { if (!ok) return; const ko = new Date(kickoff); const newMatch = { id: Math.max(...ctx.matchesState.map(m => m.id)) + 1, teamA: TEAMS[teamA], teamB: TEAMS[teamB], teamAKey: teamA, teamBKey: teamB, kickoffAt: ko, kickoffMs: ko.getTime(), stage, venue: venue || '—', status: ko.getTime() - Date.now() > HOURS(24) ? 'SCHEDULED' : 'OPEN', settled: null, }; ctx.setMatchesState(s => [...s, newMatch]); ctx.setToast({ message: `Match created: ${newMatch.teamA.name} vs ${newMatch.teamB.name}`, tone: 'success' }); setTeamA(''); setTeamB(''); setKickoff(''); setStage('Group Stage'); setVenue(''); } return (
({ value: k, label: TEAMS[k].name }))} placeholder="Select team A" /> k !== teamA).map(k => ({ value: k, label: TEAMS[k].name }))} placeholder="Select team B" />
Kickoff (your local time) setKickoff(e.target.value)} style={inputStyle} />
({ value: s, label: s }))} />
Venue (optional) setVenue(e.target.value)} placeholder="e.g. MetLife Stadium, New Jersey" style={inputStyle} />
Create match { setTeamA(''); setTeamB(''); setKickoff(''); setVenue(''); }}>Reset
How it'll look}> {(teamA && teamB) ? (
{stage}
{TEAMS[teamA].name}
{TEAMS[teamB].name}
{kickoff ? formatKickoff(new Date(kickoff)) : 'Set a kickoff time…'} {venue && <> · {venue}}
) : (
Pick two teams to see the preview.
)}
); } function FormLabel({ children }) { return
{children}
; } function FormSelect({ label, value, onChange, options, placeholder }) { return (
{label}
); } /* ============================================================ SETTLE ============================================================ */ function AdminSettle({ ctx }) { const candidates = ctx.matchesState.filter(m => m.status === 'CLOSED' || m.status === 'OPEN'); const [mid, setMid] = useState(''); const [result, setResult] = useState(null); // 'A' | 'DRAW' | 'B' const [scoreA, setScoreA] = useState(''); const [scoreB, setScoreB] = useState(''); const match = candidates.find(m => m.id === Number(mid)); function settle() { if (!match || !result) return; const winner = result === 'A' ? match.teamA.name : result === 'B' ? match.teamB.name : 'Draw'; ctx.setMatchesState(s => s.map(m => m.id === match.id ? { ...m, status: 'SETTLED', settled: { winner: result === 'A' ? match.teamAKey : result === 'B' ? match.teamBKey : null, scoreA: Number(scoreA) || 0, scoreB: Number(scoreB) || 0, draw: result === 'DRAW', } } : m)); ctx.setToast({ message: `Settled: ${match.teamA.name} ${scoreA || 0}–${scoreB || 0} ${match.teamB.name} · ${winner}`, tone: 'success' }); setMid(''); setResult(null); setScoreA(''); setScoreB(''); } return ( {candidates.length === 0 ? (
No matches awaiting a result.
) : ( <>
({ value: String(m.id), label: `${m.teamA.name} vs ${m.teamB.name} · ${m.stage} · ${m.status}`, }))} />
{match && (
Final result
setResult('A')} kind="team" flag={match.teamA.flag} label={`${match.teamA.name} wins`} /> setResult('DRAW')} kind="draw" label="Draw" /> setResult('B')} kind="team" flag={match.teamB.flag} label={`${match.teamB.name} wins`} />
{match.teamA.name} score setScoreA(e.target.value)} className="font-mono" style={inputStyle} />
{match.teamB.name} score setScoreB(e.target.value)} className="font-mono" style={inputStyle} />
Mark match settled { setMid(''); setResult(null); }}>Cancel
⚠ This action is irreversible. It will flag {SAMPLE_PREDICTIONS.filter(p => p.matchId === match.id).length} predictions as correct / incorrect and unlock the lucky draw.
)} )} ); } function SettleBtn({ selected, onClick, kind, flag, label }) { return ( ); } /* ============================================================ DRAW ============================================================ */ function AdminDraw({ ctx }) { const settled = ctx.matchesState.filter(m => m.status === 'SETTLED'); const [mid, setMid] = useState(''); const [n, setN] = useState(5); const [rolling, setRolling] = useState(false); const [winners, setWinners] = useState(null); const match = settled.find(m => m.id === Number(mid)); function rollDraw() { if (!match) return; setRolling(true); setWinners(null); setTimeout(() => { const pool = SAMPLE_PREDICTIONS.filter(p => p.matchId === match.id && p.isCorrect); const shuffled = [...pool].sort(() => Math.random() - 0.5); setWinners({ pool: pool.length, picks: shuffled.slice(0, Math.min(n, pool.length)) }); setRolling(false); ctx.setToast({ message: `${Math.min(n, pool.length)} winners drawn from ${pool.length} correct predictions.`, tone: 'success' }); }, 1100); } return ( {settled.length === 0 ? (
No settled matches yet. Settle one first.
) : ( <>
({ value: String(m.id), label: `${m.teamA.name} vs ${m.teamB.name} · ${m.stage}` }))} />
Number of winners
setN(Number(e.target.value))} style={{ flex: 1 }} /> setN(Math.max(1, Math.min(50, Number(e.target.value) || 1)))} className="font-mono" style={{ ...inputStyle, width: 70, padding: '8px 10px', textAlign: 'center' }} />
{rolling ? 'Rolling…' : '🎲 Run lucky draw'}
{/* Results */} {winners && (
Lucky draw winners
{winners.picks.length} from a pool of {winners.pool}
ctx.setToast({ message: 'Winners CSV queued.', tone: 'info' })}>Export winners CSV
{winners.picks.map((w, i) => ( ))}
#NameMobileOutletBillPick
{String(i + 1).padStart(2,'0')} {w.customerName} {w.customerPhone} {w.outlet} {w.billNumber} {w.pick}
)} )} ); } Object.assign(window, { AdminOverview, AdminMatches, AdminCreate, AdminSettle, AdminDraw, Th, Td, IconBtn, FormLabel, FormSelect, StatCard, });