/* ========================================================= dashboard.jsx — main dashboard page ========================================================= */ function DashboardPage() { const { state, actions, derived } = useStore(); // Build XP-per-day sparkline for last 14 days const sparkData = useMemo(() => { const days = 14; const arr = Array.from({ length: days }, () => 0); state.events.forEach(e => { const day = new Date(e.day); const diff = Math.floor((Date.now() - day.getTime()) / 86400000); if (diff >= 0 && diff < days) arr[days - 1 - diff] += (e.xp || 0); }); return arr; }, [state.events]); // Weekly velocity (last 7d completions) const last7 = useMemo(() => { const cutoff = Date.now() - 7 * 86400000; return state.events.filter(e => e.type === "CHALLENGE_COMPLETED" && new Date(e.day).getTime() >= cutoff).length; }, [state.events]); // Tracker rollups const trackerRollup = useMemo(() => TRACKERS.map(t => { const done = completedOn(state, t.slug); return { ...t, done, total: t.count, ratio: t.count ? done / t.count : 0 }; }), [state.progress]); // Recent completions const recent = useMemo(() => { return state.events .filter(e => e.type === "CHALLENGE_COMPLETED") .sort((a,b) => b.ts.localeCompare(a.ts)) .slice(0, 6); }, [state.events]); // In-progress challenges const wip = useMemo(() => { return Object.entries(state.progress) .filter(([_, p]) => p.status === "wip") .map(([id, p]) => ({ ...CHALLENGE_BY_ID[id], _id: id, _p: p })) .filter(c => c.title); }, [state.progress]); // Recent achievement const recentAch = state.achievements.unlocked.slice(-3).reverse() .map(id => ACHIEVEMENTS.find(a => a.id === id)) .filter(Boolean); return (
// WELCOME BACK, {state.user.handle.toUpperCase()}} title={derived.streak > 0 ? <>You're on a {derived.streak}-day streak. : <>Let's start a streak today.} sub={`Level ${derived.lvl.level} · ${derived.xp.toLocaleString()} total XP · ${last7} challenges shipped this week.`} action={
} /> {/* KPI strip */}
// XP TOTAL} value={derived.xp.toLocaleString()} suffix="xp" color="var(--phos)" spark={sparkData} trend={{ up: true, label: `+${sparkData.slice(-7).reduce((a,b)=>a+b,0)} this week` }} /> // LEVEL} value={derived.lvl.level} suffix={`/ 50`} color="var(--cyan)" trend={{ up: true, label: `${Math.round((derived.lvl.into / derived.lvl.need) * 100)}% to L${derived.lvl.level + 1}` }} /> // STREAK} value={derived.streak} suffix="days" color="var(--amber)" trend={{ up: derived.streak >= 3, label: derived.streak >= 7 ? "hardcore" : derived.streak >= 3 ? "warming up" : "build it back" }} /> // COMPLETED} value={completedCount(state)} color="var(--mag)" trend={{ up: true, label: `${last7} in the last 7d` }} />
{/* Trackers + ring */}
SEE ALL →} />
// OVERALL
// WIP
{wip.length}
// AVG TIME
{Math.round(Object.values(state.progress).filter(p=>p.status==='done').reduce((a,b)=>a+(b.timeMin||0),0) / Math.max(1, completedCount(state)))}min
{/* Activity heatmap */} LESS MORE
} /> {/* Recent + WIP + Achievements */}
SEE ALL →} /> {recent.length === 0 ? ( ) : (
    {recent.map(ev => { const ch = CHALLENGE_BY_ID[ev.ref] || {}; const t = TRACKERS.find(x => x.slug === ev.platform); return (
  • {t?.short || "—"}
    {ev.label}
    {relTime(ev.day)} · {ch.tags?.slice(0,2).join(" · ") || "—"}
    +{ev.xp} XP
    • ); })}
)}
{wip.length === 0 ? ( ) : ( )} ALL →} /> {recentAch.length === 0 ? ( ) : (
    {recentAch.map(a => (
  • {a.title}
    {a.desc}
    +{a.xp}
    • ))}
)}
{/* Goals */} MANAGE → } /> {state.goals.length === 0 ? ( ) : (
{state.goals.map(g => { const ratio = Math.min(1, g.current / g.target); return (
// {g.scope?.toUpperCase()} · {g.kind?.toUpperCase()}
{g.label}
= 1 ? "" : "cyan"} />
{g.current} / {g.target} {Math.round(ratio * 100)}%
); })}
)} ); } function relTime(iso) { const then = new Date(iso).getTime(); const diff = (Date.now() - then) / 1000; if (diff < 60) return "just now"; if (diff < 3600) return Math.floor(diff/60) + "m ago"; if (diff < 86400) return Math.floor(diff/3600) + "h ago"; if (diff < 86400*7) return Math.floor(diff/86400) + "d ago"; if (diff < 86400*30) return Math.floor(diff/86400/7) + "w ago"; return Math.floor(diff/86400/30) + "mo ago"; } Object.assign(window, { DashboardPage, relTime });