Warming up. Check back once predictions roll in.
);
}
const W = 680, H = 200;
const pad = { l: 38, r: 16, t: 20, b: 30 };
const iW = W - pad.l - pad.r;
const iH = H - pad.t - pad.b;
const xStep = iW / (data.length - 1);
const pts = data.map((d, i) => [pad.l + i * xStep, pad.t + (1 - d.idx / 100) * iH]);
const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' ');
const area = `${line} L ${pts[pts.length-1][0]} ${pad.t + iH} L ${pts[0][0]} ${pad.t + iH} Z`;
const ticks = [0, 25, 50, 75, 100];
return (
No data yet.
;
}
const sorted = [...matches].sort((a, b) => b.share - a.share).slice(0, 5);
return (
{/* Header bar */}
My Predictions
{phase !== 'phone' && (
)}
{/* ── Step 1: enter phone ── */}
{phase === 'phone' && (
Enter your Maldivian mobile number to see your bills and predictions.
{err &&
{err}
}
)}
{/* ── Step 2: select bill ── */}
{phase === 'bills' && (
{bills.length} bill{bills.length !== 1 ? 's' : ''} found for {phone}. Select one and enter its amount to unlock predictions.
{bills.map(b => (
))}
{selectedBill && (
{ setAmount(e.target.value); setErr(''); }}
onKeyDown={e => e.key === 'Enter' && verifyBill()}
inputMode="decimal"
/>
)}
{err &&
{err}
}
)}
{/* ── Step 3: results ── */}
{phase === 'results' && data && (() => {
// Compute streak: consecutive correct picks (all bills, ordered by submittedAt)
const allPreds = data.bills.flatMap(b => b.predictions)
.filter(p => p.outcome !== 'pending')
.sort((a, b) => new Date(a.submittedAt) - new Date(b.submittedAt));
let streak = 0;
for (let i = allPreds.length - 1; i >= 0; i--) {
if (allPreds[i].outcome === 'correct') streak++;
else break;
}
const totalSettled = data.overall.settled || 0;
const totalCorrect = data.overall.correct || 0;
const badges = [];
if (streak >= 5) badges.push({ icon: '🔥', label: streak + ' in a row!', color: '#c2410c' });
else if (streak >= 3) badges.push({ icon: '⚡', label: streak + ' streak', color: 'var(--orange)' });
if (totalCorrect >= totalSettled && totalSettled >= 3) badges.push({ icon: '🎯', label: 'Perfect round', color: 'var(--success)' });
else if (data.overall.accuracyPct >= 80 && totalSettled >= 3) badges.push({ icon: '🏆', label: '80%+ accuracy', color: 'var(--success)' });
return (
{/* Streak badges */}
{badges.length > 0 && (
{badges.map((b, i) => (
{b.icon} {b.label}
))}
)}
{/* Identity row */}
{phone}
{data.customerName && (
{data.customerName}
)}
{data.bills.length} bill{data.bills.length !== 1 ? 's' : ''}
{/* Overall summary */}
Overall Summary
{[
{ label: 'Total picks', val: data.overall.total, color: 'var(--ink)' },
{ label: 'Settled', val: data.overall.settled, color: 'var(--grey-500)' },
{ label: 'Correct', val: data.overall.correct, color: 'var(--success)' },
{ label: 'Accuracy', val: data.overall.accuracyPct != null ? data.overall.accuracyPct + '%' : 'N/A', color: 'var(--orange)' },
].map(s => (
))}
{/* Per-bill sections */}
{data.bills.map(b => (
{/* Bill header */}
{b.bill}
MVR {Number(b.amountMyr).toLocaleString('en', { minimumFractionDigits: 2 })}
{b.usedVotes}/{b.maxVotes} picks used
{b.summary && b.summary.settled > 0 && (
= 50 ? '#4ade80' : 'var(--orange-light)' }}>
{b.summary.accuracyPct}% correct
)}
{/* Vote usage bar */}
0 ? Math.round((b.usedVotes / b.maxVotes) * 100) + '%' : '0%',
height: '100%', background: 'var(--orange)', borderRadius: 999,
}} />
{/* Predictions list */}
{b.predictions.length === 0 ? (
No predictions yet on this bill.
) : (
{b.predictions.map((p, i) => {
const oc = OUTCOME_CFG[p.outcome] || OUTCOME_CFG.pending;
const parts = (p.matchLabel || '').split(' vs ');
const pickLabel = p.pick === 'A' ? parts[0] : p.pick === 'B' ? parts[1] : 'Draw';
const resultLabel = p.winner ? (p.winner === 'A' ? parts[0] : p.winner === 'B' ? parts[1] : 'Draw') : null;
return (
-
{p.matchLabel || 'Match ' + p.matchId}
Picked: {pickLabel || p.pick}
{resultLabel && Result: {resultLabel}}
{p.submittedAt && Locked {new Date(p.submittedAt).toLocaleString('en-MV', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true })}}
{p.changedAt && Changed {new Date(p.changedAt).toLocaleString('en-MV', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true })}}
{oc.label}
{p.outcome === 'correct' && (
)}
);
})}
)}
))}
);
})()}
{/* Share card modal */}
{shareItem && (
setShareItem(null)}
/>
)}
);
}
/* ── Recent picks live feed strip ── */
function RecentPicksFeed() {
const [picks, setPicks] = useState([]);
const PICK_COLORS = { A: 'var(--ink)', DRAW: 'var(--grey-500)', B: 'var(--orange)' };
const PICK_EMOJI = { A: 'A', DRAW: '=', B: 'B' };
function load() {
fetch('/api/recent-picks?limit=14')
.then(r => r.ok ? r.json() : null)
.then(d => { if (d && d.picks) setPicks(d.picks); })
.catch(() => {});
}
useEffect(() => {
load();
const id = setInterval(load, 12000);
return () => clearInterval(id);
}, []);
if (picks.length === 0) return null;
const doubled = [...picks, ...picks]; // seamless loop
return (
{doubled.map((p, i) => (
{PICK_EMOJI[p.pick] || p.pick}
{p.matchLabel}
{p.ago}
{'|'}
))}
);
}
/* ── Odds-style row ── */
function OddsRow({ pA, pDraw, pB, nameA, nameB }) {
const toOdds = (pct) => pct > 0 ? (100 / pct).toFixed(2) : 'N/A';
const items = [
{ label: nameA || 'Team A', odds: toOdds(pA), pct: pA },
{ label: 'Draw', odds: toOdds(pDraw), pct: pDraw },
{ label: nameB || 'Team B', odds: toOdds(pB), pct: pB },
];
const bestIdx = [pA, pDraw, pB].indexOf(Math.max(pA, pDraw, pB));
return (
{items.map((it, i) => (
))}
);
}
/* ── Winner card ── */
function WinnerCard({ name, phone }) {
const initial = name ? name.trim()[0].toUpperCase() : '?';
return (
);
}
/* ── Draw winners section (public) ── */
function DrawWinnersSection() {
const [winners, setWinners] = useState([]);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
fetch('/api/draw-winners')
.then(r => r.json())
.then(d => { setWinners(Array.isArray(d) ? d : []); setLoaded(true); })
.catch(() => setLoaded(true));
}, []);
if (!loaded || winners.length === 0) return null;
const campaign = winners.filter(w => w.prize_type === 'campaign');
const weekly = winners.filter(w => w.prize_type === 'weekly')
.sort((a, b) => (a.scope_key || '').localeCompare(b.scope_key || ''));
const matchday = winners.filter(w => w.prize_type === 'matchday');
// Group matchday by scope_key, ascending order
const mdMap = {};
matchday.forEach(w => {
if (!mdMap[w.scope_key]) mdMap[w.scope_key] = { label: w.scope_label || w.scope_key, ws: [] };
mdMap[w.scope_key].ws.push(w);
});
const mdGroups = Object.entries(mdMap)
.sort((a, b) => a[0].localeCompare(b[0]))
.map(([, g]) => g);
const colStyle = {
background: '#fff', border: '1px solid var(--grey-200)',
borderRadius: 10, padding: '18px 20px',
boxShadow: '0 2px 8px rgba(17,6,24,0.05)',
};
const headStyle = { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 };
const subLabel = { fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--grey-500)', fontWeight: 700, marginBottom: 6 };
return (
{/* Column 1 — Match Day */}
⚽
Match Day Winners
{mdGroups.length === 0
?
Draw pending
: mdGroups.map(group => (
{group.label}
{group.ws.map(w =>
)}
))
}
{/* Column 2 — Weekly */}
⭐
Weekly Winners
{weekly.length === 0
?
Draw pending
: weekly.map(w => (
{w.scope_label &&
{w.scope_label}
}
))
}
{/* Column 3 — Grand Prize */}
0
? 'linear-gradient(135deg, #78350f 0%, #92400e 100%)'
: '#fff',
border: campaign.length > 0 ? '2px solid #f59e0b' : '1px solid var(--grey-200)',
boxShadow: campaign.length > 0 ? '0 8px 32px rgba(245,158,11,0.15)' : colStyle.boxShadow,
}}>
🏆
0 ? '#fcd34d' : 'inherit' }}>
Grand Prize
{campaign.length === 0
?
Draw pending
: campaign.map(w => (
{w.winner_name.trim()[0].toUpperCase()}
{w.winner_name}
{w.winner_phone}
))
}
);
}
/* ── Settled match accordion row ── */
function SettledMatchRow({ match }) {
if (!match) return null;
const [open, setOpen] = React.useState(false);
const parts = (match.label || '').split(/\s+vs\.?\s+/i);
const nameA = parts[0] || 'Team A';
const nameB = parts[1] || 'Team B';
const cfg = VERDICT_CFG[match.verdict] || VERDICT_CFG.SPLIT;
const correct = match.actual && match.actual.correct;
return (
{open && (
{[
{ label: nameA, pct: match.pA, color: 'var(--ink)' },
{ label: 'Draw', pct: match.pDraw, color: 'var(--grey-400)' },
{ label: nameB, pct: match.pB, color: 'var(--orange)' },
].map(function(seg, i) { return (
); })}
{match.actual &&
}
)}
);
}
/* ── Main dashboard page ── */
function DashboardPage() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [tick, setTick] = useState(0);
const [teamFilter, setTeamFilter] = useState('all');
useEffect(() => {
let cancel = false;
setLoading(prev => prev || true);
fetch('/api/dashboard-stats')
.then(r => r.json())
.then(d => { if (!cancel) { setData(d); setLoading(false); setError(null); } })
.catch(e => { if (!cancel) { setError('Could not load stats.'); setLoading(false); } });
return () => { cancel = true; };
}, [tick]);
// Auto-refresh every 45 seconds
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 45000);
return () => clearInterval(id);
}, []);
if (loading && !data) return
;
if (error && !data) {
return (
Could not load stats
Check your connection and try again.
);
}
const pulse = data.pulse || {};
const matches = data.matches || [];
const momentum = data.momentum || [];
const accuracy = data.accuracy || null;
const topPredictors = data.topPredictors || [];
const dirSub = {
up: 'More predictions this week vs last',
down: 'Slower week than the previous',
flat: 'Consistent pace week over week',
};
return (
{/* ── Campaign banner ── */}
{/* ── Page band ── */}
The crowd
has spoken.}
right={}
/>
{/* ── Section 1: Campaign Pulse ── */}
}
sub="Mean winning pick % across all matches"
accent="orange"
/>
}
sub="Bills that have cast at least one vote"
accent="ink"
/>
}
sub={dirSub[pulse.momentumDir] || dirSub.flat}
accent="green"
/>
Where the crowd stands on every tracked match.
{matches.length > 0 && (() => {
const allTeams = [...new Set(
matches.flatMap(m =>
(m.label || '').split(/\s+vs\.?\s+/i).map(t => t.trim()).filter(Boolean)
)
)].sort();
return (
);
})()}
{(() => {
const filtered = teamFilter === 'all'
? matches
: matches.filter(m => {
const parts = (m.label || '').split(/\s+vs\.?\s+/i).map(t => t.trim());
return parts.some(t => t.toLowerCase() === teamFilter.toLowerCase());
});
if (matches.length === 0) {
return (
No predictions yet
Verdicts appear once predictions are submitted.
);
}
if (filtered.length === 0) {
return (
No matches for {teamFilter}
Try a different team filter.
);
}
const openMatches = filtered.filter(m => !m.actual).sort((a, b) => {
const fa = MATCHES.find(x => x.id === a.id);
const fb = MATCHES.find(x => x.id === b.id);
return (fa ? fa.kickoffMs : 0) - (fb ? fb.kickoffMs : 0); // ascending
});
const settledMatches = filtered.filter(m => !!m.actual).sort((a, b) => {
const fa = MATCHES.find(x => x.id === a.id);
const fb = MATCHES.find(x => x.id === b.id);
return (fb ? fb.kickoffMs : 0) - (fa ? fa.kickoffMs : 0); // most recent settled first
});
return (
{openMatches.length > 0 && (
0 ? 20 : 0 }} className="verdict-grid">
{openMatches.map((m, i) => (
))}
)}
{settledMatches.length > 0 && (
{openMatches.length > 0 && (
Results — {settledMatches.length} settled
)}
{settledMatches.map((m) => (
))}
)}
);
})()}
{/* ── Section 4: Crowd Track Record ── */}