// Parent dashboard โ wired to real store.
function Dashboard({ onOpenKid }) {
const s = window.useStore();
const kids = s.kids;
const total = kids.reduce((acc, k) => acc + (k.points || 0), 0);
// Compute today's delta + week delta + longest streak from history
const now = Date.now();
const dayMs = 24 * 60 * 60 * 1000;
const startToday = startOfDay(new Date()).getTime();
const startWeek = now - 7 * dayMs;
const todayDelta = s.history.filter(h => h.ts >= startToday).reduce((a, h) => a + h.delta, 0);
const weekDelta = s.history.filter(h => h.ts >= startWeek ).reduce((a, h) => a + h.delta, 0);
const longestStreak = Math.max(0, ...kids.map(k => k.bestDaily || k.streak || 0));
// MVP = kid with highest 7-day delta
const weekByKid = {};
s.history.forEach(h => {
if (h.ts < startWeek) return;
weekByKid[h.kid_id] = (weekByKid[h.kid_id] || 0) + h.delta;
});
let mvpKid = null, mvpDelta = 0;
kids.forEach(k => {
const d = weekByKid[k.id] || 0;
if (d > mvpDelta) { mvpDelta = d; mvpKid = k; }
});
if (!mvpKid) mvpKid = kids[0];
const meta = (s.user && s.user.user_metadata) || {};
const firstName = (meta.full_name || meta.name || s.user?.email || '').split(/[\s@]/)[0] || 'friend';
const todayLabel = new Date().toLocaleDateString([], { weekday: 'long', day: 'numeric', month: 'short' });
return (
Your kids
Today across the family.
{kids.map((kid) => onOpenKid?.(kid.id)} />)}
);
}
function startOfDay(d) {
const x = new Date(d); x.setHours(0,0,0,0); return x;
}
function greetingFor(d) {
const h = d.getHours();
if (h < 12) return 'Good morning';
if (h < 18) return 'Good afternoon';
return 'Good evening';
}
function DashStat({ label, value, suffix, color }) {
return (
{label}
{value}
{suffix && {suffix}}
);
}
function KidCard({ kid, onOpen }) {
const c = window.KID_COLORS_V3[kid.color] || window.KID_COLORS_V3.mango;
const goal = kid.goalAt || kid.goal || 50;
const progress = Math.min(100, Math.round((kid.points / goal) * 100));
return (
{kid.name}
{kid.streak > 0 && (
๐ฅ {kid.streak} day streak
)}
Stars earned
{kid.points}
of {goal} for next reward
{Math.max(0, goal - kid.points)} stars to go
);
}
function MvpCard({ kid, delta }) {
const c = window.KID_COLORS_V3[kid.color] || window.KID_COLORS_V3.mango;
return (
๐ Week's MVP
{kid.name}.
{delta > 0 ? `Leading the family this week with ${delta} stars earned.` : 'No big movers this week yet โ early days!'}
{delta >= 0 ? `+${delta}` : delta}
this week
);
}
function ActivityList({ history, kids, onUndo }) {
if (!history.length) {
return (
No activity yet โ mark a task to get started.
);
}
return (
{history.map((it, i) => {
const kid = kids.find(k => k.id === it.kid_id);
if (!kid) return null;
return (
{it.emoji}
{kid.name}
ยท {it.task}
{it.day} ยท {it.when}
0 ? 'var(--success)' : 'var(--alert)',
}}>{it.delta > 0 ? `+${it.delta}` : it.delta}
);
})}