// dashboard.jsx — updated with focus timer linking, weekly focus breakdown, intention card, Eisenhower const { useState, useEffect, useRef } = React; // ─── Focus session data (Supabase) ──────────────────────────────────────────── if (!window.FOCUS_LOG) window.FOCUS_LOG = {}; // legacy, retained for task time refs async function fetchFocusSessions() { const uid = window.getActiveUserId ? await window.getActiveUserId() : null; if (!uid) return []; const { data, error } = await window._supabase .from('focus_sessions') .select('id, duration_minutes, label, subject, linked_kind, started_at, created_at') .eq('user_id', uid) .order('created_at', { ascending: false }); if (error) { console.error('Failed to load focus sessions:', error.message); return []; } return data || []; } function focusYmd(d) { return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`; } function focusWeekStart() { const d = new Date(); d.setHours(0,0,0,0); d.setDate(d.getDate() - ((d.getDay()+6)%7)); return d; } function fmtMins(m) { return `${Math.floor(m/60)}h ${m%60}m`; } // ─── Shared focus-timer helpers (the live timer state lives in App) ──────────── // Wall-clock remaining (seconds) for the shared timer object, so the countdown // stays accurate across collapse, navigation, and background-tab throttling. function focusTimerRemaining(t) { if (!t) return 0; if (t.paused) return t.remainingSec || 0; if (t.endsAt == null) return t.remainingSec || 0; return Math.max(0, Math.round((t.endsAt - Date.now()) / 1000)); } // Elapsed seconds for either mode — countdown (totalSec − remaining) or stopwatch (count up). function focusTimerElapsed(t) { if (!t) return 0; if (t.mode === 'stopwatch') { const base = t.baseElapsedSec || 0; if (t.paused || t.runStartMs == null) return Math.round(base); return Math.round(base + (Date.now() - t.runStartMs) / 1000); } return Math.max(0, (t.totalSec || 0) - focusTimerRemaining(t)); } // Forces a 1s re-render only while `active`, so per-second ticking is localised // to the components actually showing a countdown (not the whole app tree). function useNowTick(active) { const [, setN] = React.useState(0); React.useEffect(() => { if (!active) return; const id = setInterval(() => setN((n) => n + 1), 1000); return () => clearInterval(id); }, [active]); } Object.assign(window, { fetchFocusSessions, focusYmd, focusWeekStart, fmtMins, focusTimerRemaining, focusTimerElapsed, useNowTick }); // ─── Focus Timer with task-linking ──────────────────────────────────────────── function FocusTimerModal({ tasks, goals, setTasks, onStart, onClose }) { const [q, setQ] = useState(''); const [selected, setSelected] = useState(null); const [newGoalId, setNewGoalId] = useState(''); const [savingNew, setSavingNew] = useState(false); const [errNew, setErrNew] = useState(''); const options = tasks .filter(t => !t.is_completed) .map(t => ({ id:t.id, label:t.title, subject:t.subject, kind:'task' })); const filtered = options.filter(o => q==='' || o.label.toLowerCase().includes(q.toLowerCase())); const noTaskMatch = q.trim() !== '' && filtered.filter(o => o.kind === 'task').length === 0; const createTask = async () => { setErrNew(''); setSavingNew(true); const { data: { user } } = await window._supabase.auth.getUser(); const { data, error } = await window._supabase.from('tasks').insert({ user_id: user.id, title: q.trim(), priority: 'Routine', goal_id: newGoalId || null, order_index: 0, }).select('*, roadmap_step:roadmap_steps(title, goal_id)').single(); setSavingNew(false); if (error) { setErrNew(error.message); return; } const mapped = window.mapTaskRow ? window.mapTaskRow(data) : data; if (setTasks) setTasks(ts => [mapped, ...ts]); setSelected({ id: data.id, label: data.title, subject: data.subject || null, kind: 'task' }); setNewGoalId(''); setQ(''); }; return ( <>
Start a focus session
Link this session to a task to track your time.
search setQ(e.target.value)} />
{['task'].map(kind => { const items = filtered.filter(o=>o.kind===kind); if (!items.length) return null; return (
Tasks
{items.map(o => ( ))}
); })} {noTaskMatch && (
No task matches "{q.trim()}". Create it?
{goals.length > 0 && (
Link to goal (optional)
)} {errNew &&
{errNew}
}
)}
); } const DashPomodoro = ({ gameMode, tasks, goals, setTasks, focusRows, focus }) => { const [durationMin, setDurationMin] = useState(25); const [mode, setMode] = useState('timer'); // 'timer' (countdown) | 'stopwatch' (count up) const [linkedItem, setLinkedItem] = useState(null); // setup-only display const [showPicker, setShowPicker] = useState(false); const [saving, setSaving] = useState(false); const [savedNote, setSavedNote] = useState(''); const t = focus && focus.state; const isRunning = !!t && t.running; useNowTick(isRunning && !t.paused); const adjust = (delta) => { if (isRunning) return; setDurationMin(d => Math.min(120, Math.max(5, d + delta))); }; const startWith = (item) => { setLinkedItem(item); setShowPicker(false); focus.start(item, durationMin, mode); }; const handleSave = async () => { if (saving) return; setSaving(true); const r = await focus.save(); setSaving(false); setLinkedItem(null); if (r) { setSavedNote(`✓ Saved ${r.elapsedMin}m${r.linked ? ' to "' + r.linked.label + '"' : ''}`); setTimeout(() => setSavedNote(''), 4000); } }; const isStopwatch = isRunning ? t.mode === 'stopwatch' : mode === 'stopwatch'; const shownSec = isRunning ? (isStopwatch ? window.focusTimerElapsed(t) : window.focusTimerRemaining(t)) : (isStopwatch ? 0 : durationMin * 60); const mm = String(Math.floor(shownSec/60)).padStart(2,'0'); const ss = String(shownSec%60).padStart(2,'0'); const pct = isRunning ? (isStopwatch ? 100 : (t.totalSec ? (1 - window.focusTimerRemaining(t)/t.totalSec) * 100 : 0)) : 0; const done = isRunning && !isStopwatch && window.focusTimerRemaining(t) <= 0; const shownLink = isRunning ? t.linked : linkedItem; const greenBtn = { flex:1, justifyContent:'center', background:'var(--teal-600)', color:'#fff', borderColor:'var(--teal-600)' }; const weekMin = (focusRows || []).filter(r => new Date(r.started_at || r.created_at) >= focusWeekStart()).reduce((a, r) => a + (r.duration_minutes || 0), 0); const ringColor = done ? 'var(--teal-600)' : isRunning && t.paused ? 'var(--text-3)' : 'var(--accent)'; return ( <>
{/* Header */}
Focus session
{fmtMins(weekMin)} this week
{/* Circular ring via conic-gradient */}
{mm}:{ss}
{shownLink ? (
{shownLink.label}
) : (
{isRunning && t.paused ? 'paused' : (isStopwatch ? 'stopwatch' : 'pomodoro')}
)}
{/* Mode toggle + duration adjuster (idle only) */} {!isRunning && (
{mode === 'timer' ?
{durationMin} min
:
Counts up — save whenever you're done.
}
)} {done &&
Time's up — saving your session…
} {savedNote &&
{savedNote}
} {/* Controls */}
{isRunning ? ( <> ) : ( )}
{showPicker && setShowPicker(false)} />} ); }; // ─── Weekly Focus Breakdown ─────────────────────────────────────────────────── const DashFocusBreakdown = ({ focusRows }) => { const ws = focusWeekStart(); const week = (focusRows || []).filter(r => new Date(r.started_at || r.created_at) >= ws); const bySubj = {}; week.forEach(r => { const k = r.subject || 'General'; bySubj[k] = (bySubj[k] || 0) + (r.duration_minutes || 0); }); const list = Object.entries(bySubj).map(([subject, minutes]) => ({ subject, minutes })).sort((a, b) => b.minutes - a.minutes); const total = list.reduce((a, s) => a + s.minutes, 0); const maxMin = Math.max(...list.map(s => s.minutes), 1); return (
Focus this week · by subject
Total: {fmtMins(total)}
{list.length === 0 ? (
No focus time logged this week yet. Start a focus session and hit Save to track it here.
) : (
{list.map(s => { const color = SUBJECTS[s.subject] || '#888'; return (
{s.subject} {fmtMins(s.minutes)}
); })}
)}
); }; // ─── Consistency this week (full-width) ────────────────────────────────────── // A day counts as "active" if there was any focus session, completed task, or // attended session that day. Reuses already-fetched data — no new queries. const DashConsistency = ({ focusRows, tasks, sessions }) => { const ws = focusWeekStart(); // Monday 00:00 local const todayY = focusYmd(new Date()); const days = []; for (let i = 0; i < 7; i++) { const d = new Date(ws); d.setDate(ws.getDate() + i); days.push({ ymd: focusYmd(d), dow: d.toLocaleDateString('en-US', { weekday: 'short' }), num: d.getDate() }); } const act = {}; const mark = (ymd, kind) => { if (!ymd) return; (act[ymd] = act[ymd] || {})[kind] = true; }; (focusRows || []).forEach((r) => mark(focusYmd(new Date(r.started_at || r.created_at)), 'focus')); (tasks || []).forEach((t) => { const c = t.completed_at || t.completedAt; if (t.is_completed && c) mark(focusYmd(new Date(c)), 'task'); }); (sessions || []).forEach((s) => { if (s.status === 'past' && s.dateISO) mark(s.dateISO, 'session'); }); const isActive = (ymd) => !!act[ymd]; const activeCount = days.filter((d) => isActive(d.ymd)).length; return (
Consistency this week
{activeCount} of 7 days active · Mon–Sun
bolt A task, focus session, or session counts
{days.map((d) => { const active = isActive(d.ymd); const isToday = d.ymd === todayY; const future = d.ymd > todayY; return (
{d.dow}
{active ? check : {d.num}}
{active ? 'Active' : future ? '—' : 'Rest'}
); })}
); }; // ─── Streak ─────────────────────────────────────────────────────────────────── const DashStreak = ({ days, gameMode }) => (
local_fire_department
Streak
{days} weekdays
{gameMode==='loud' &&
On fire
}
); // ─── XP progress modal (opened from the XP tile or Level card) ──────────────── function XpProgressModal({ member, onClose }) { const t = xpTier(member.xp || 0); return ( <>
Your XP progress
{t.name}
Tier {t.tier} of 8 · {(t.xp || 0).toLocaleString()} XP total
{/* Progress to next tier */}
{t.isMax ? 'Top tier reached' : `Progress to ${t.next.name}`} {t.isMax ? '100%' : `${Math.round(t.pct)}%`}
{t.isMax ? <>You've reached {t.name} — the highest tier. Keep earning XP to stay on top. : <>You need {t.toNext.toLocaleString()} more XP to reach {t.next.name}.}
{/* All tiers */}
All tiers
{XP_TIERS.map((lt, i) => { const achieved = i <= t.index; const current = i === t.index; return (
{achieved ? {current ? 'star' : 'check'} : lt.tier}
{lt.name}
{lt.min.toLocaleString()} XP
); })}
); } // ─── Level ──────────────────────────────────────────────────────────────────── const DashLevel = ({ member, onOpenXp }) => { const t = xpTier(member.xp); return (
Level
open_in_full
{t.name}
Tier {t.tier} / 8
{t.xp.toLocaleString()} XP {t.isMax ? 'Max Tier Reached' : `${t.toNext.toLocaleString()} to ${t.next.name}`}
{XP_TIERS.map((lt,i) => (
{lt.tier}
))}
); }; // ─── Upcoming session card ──────────────────────────────────────────────────── const startMsOf = (s) => { const d = new Date(s.date + 'T00:00'); d.setHours(Math.floor(s.startH), Math.round((s.startH % 1) * 60), 0, 0); return d.getTime(); }; const DashUpcoming = ({ onJoin }) => { const [sessions, setSessions] = useState([]); const [loading, setLoading] = useState(true); const [modalOpen, setModalOpen] = useState(false); const [now, setNow] = useState(Date.now()); useEffect(() => { let active = true; window.fetchCalSessions().then(rows => { if (active) { setSessions(rows); setLoading(false); } }); return () => { active = false; }; }, []); useEffect(() => { const t = setInterval(() => setNow(Date.now()), 60000); return () => clearInterval(t); }, []); const s = sessions.filter(x => x.status === 'upcoming').sort((a, b) => startMsOf(a) - startMsOf(b))[0]; if (loading) { return (
Next up
Loading…
); } if (!s) { return (
Next up
No upcoming sessions
You're all caught up. Your mentor will schedule your next session soon.
); } const remaining = Math.max(0, Math.round((startMsOf(s) - now) / 60000)); const days = Math.floor(remaining / 1440); const h = Math.floor(remaining % 1440 / 60), m = remaining % 60; const countdown = days > 0 ? `${days}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`; const dateLabel = new Date(s.date + 'T12:00').toLocaleDateString('en-US', { weekday:'short', month:'short', day:'numeric' }); const timeLabel = `${fmtH(s.startH)} – ${fmtH(s.endH)} GST`; return ( <>
setModalOpen(true)}>
Next up · click to view agenda
{s.type}
{dateLabel} · {timeLabel}
{s.title}
{s.mentor}
Your mentor
Starts in
{countdown}
{modalOpen && setModalOpen(false)} isAdmin={false} />} ); }; // ─── Recent Wins feed ───────────────────────────────────────────────────────── const DashWins = () => { const [wins, setWins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { let active = true; (async () => { const { data } = await window._supabase .from('wins') .select('id, title, subject, author_name, created_at') .eq('is_public', true) .order('created_at', { ascending: false }) .limit(4); if (active) { setWins(data || []); setLoading(false); } })(); return () => { active = false; }; }, []); const timeAgo = (iso) => { const diff = Date.now() - new Date(iso).getTime(); const m = Math.floor(diff / 60000), h = Math.floor(m / 60), d = Math.floor(h / 24); if (d > 0) return d + 'd ago'; if (h > 0) return h + 'h ago'; if (m > 0) return m + 'm ago'; return 'just now'; }; return (
Recent Wins
{loading ? (
Loading…
) : wins.length === 0 ? (
No wins shared yet.
) : wins.map((w, i) => { const color = SUBJECTS[w.subject] || 'var(--teal-600)'; return (
0 ? '1px solid var(--border)' : 'none' }}>
emoji_events
{w.author_name || 'Member'} · {w.title}
{timeAgo(w.created_at)}
); })}
); }; // ─── Stats row ──────────────────────────────────────────────────────────────── // Headline stat tiles (Stitch dashboard): XP Total · Streak · Active Tasks · Upcoming Sessions. const DashStats = ({ member, tasks, goals, focusRows, sessions, onOpenXp }) => { const [attend, setAttend] = useState({ townHall: 0, oneToOne: 0 }); useEffect(() => { let active = true; (async () => { const uid = window.getActiveUserId ? await window.getActiveUserId() : null; if (!uid) return; const { data } = await window._supabase .from('points_log').select('source') .eq('user_id', uid).in('source', ['town_hall', 'one_to_one']); if (!active) return; const c = { townHall: 0, oneToOne: 0 }; (data || []).forEach((r) => { if (r.source === 'town_hall') c.townHall++; else if (r.source === 'one_to_one') c.oneToOne++; }); setAttend(c); })(); return () => { active = false; }; }, [member.firstName]); const tier = xpTier(member.xp || 0); const tasksDone = (tasks || []).filter((t) => t.is_completed).length; const activeTasks = (tasks || []).filter((t) => !t.is_completed).length; const upcoming = (sessions || []).filter((s) => s.status === 'upcoming').length; const streak = member.streakDays || 0; const tiles = [ { icon:'military_tech', iconColor:'var(--accent)', fill:1, tag: tier.name, tagColor:'var(--accent)', label:'XP Total', value:(member.xp || 0).toLocaleString(), suffix:`Tier ${tier.tier}`, }, { icon:'local_fire_department', iconColor:'var(--coral)', fill:1, tag:'Current', tagColor:'var(--text-3)', label:'Streak', value:streak, suffix: streak === 1 ? 'weekday' : 'weekdays', }, { icon:'task_alt', iconColor:'var(--teal-600)', fill:0, tag:`${tasksDone} done`, tagColor:'var(--teal-600)', label:'Active Tasks', value:activeTasks, suffix:'in progress', }, { icon:'calendar_today', iconColor:'var(--accent)', fill:0, tag: upcoming > 0 ? 'Scheduled' : 'None', tagColor: upcoming > 0 ? 'var(--coral)' : 'var(--text-3)', label:'Upcoming Sessions', value:upcoming, suffix:'scheduled', }, ]; return (
{tiles.map((t) => { const clickable = t.label === 'XP Total'; return (
{t.icon} {t.tag}
{t.label}
{t.value} {t.suffix}
); })}
); }; // ─── Weekly bar chart ───────────────────────────────────────────────────────── const DashWeeklyChart = () => { const days = ['M','T','W','T','F','S','S']; const values = [45,72,34,88,56,12,0]; const max = Math.max(...values); return (
Activity this week
307 min · +28% vs last week
On pace
{values.map((v,i) => (
{days[i]}
))}
); }; // ─── Quick Tasks peek ───────────────────────────────────────────────────────── const DashTasksPeek = ({ tasks, onGoTasks }) => { const incomplete = (tasks || []).filter(t => !t.is_completed); const top = [...incomplete].sort((a,b) => a.dueSort - b.dueSort).slice(0, 4); return (
{/* Header */}
Quick Tasks
{incomplete.length} remaining
{/* Task list */} {top.length === 0 ? (
task_alt
All caught up!
) : (
{top.map((t, i) => { const pc = PRIORITY_CONFIG && PRIORITY_CONFIG[t.priority]; const subjectColor = SUBJECTS[t.subject] || 'var(--border-strong)'; return (
0 ? '1px solid var(--border)' : 'none' }}> {/* Mini checkbox circle */}
{t.title}
{pc && ( {t.priority} )} {t.due && {t.due}}
{/* Subject color dot */}
); })}
)} {/* CTA */}
); }; // ─── Main Dashboard ─────────────────────────────────────────────────────────── // Smart Overview — a dynamic welcome line built from the member's real // tasks (today / overdue), today's calendar sessions, and yesterday's wins. // Falls back to a small set of generic templates when the day is empty. function buildSmartOverview({ tasks, sessions, now }) { const ymd = (d) => { const x = new Date(d); return `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, '0')}-${String(x.getDate()).padStart(2, '0')}`; }; const todayY = ymd(now); const y = new Date(now); y.setDate(y.getDate() - 1); const yestY = ymd(y); const open = (tasks || []).filter((t) => !t.is_completed); const dueToday = open.filter((t) => t.due_date && ymd(t.due_date) === todayY); const overdue = open.filter((t) => t.due_date && ymd(t.due_date) < todayY); const doneYesterday = (tasks || []).filter((t) => t.is_completed && t.completed_at && ymd(t.completed_at) === yestY); const sessionsToday = (sessions || []).filter((s) => s.status === 'upcoming' && s.dateISO === todayY); const join = (arr) => arr.length <= 1 ? (arr[0] || '') : arr.slice(0, -1).join(', ') + ' and ' + arr[arr.length - 1]; const parts = []; if (doneYesterday.length) { parts.push(`Nice work — you finished ${doneYesterday.length} task${doneYesterday.length > 1 ? 's' : ''} yesterday.`); } const todayBits = []; if (overdue.length) todayBits.push(`${overdue.length} overdue task${overdue.length > 1 ? 's' : ''}`); if (dueToday.length) todayBits.push(`${dueToday.length} task${dueToday.length > 1 ? 's' : ''} due today`); if (sessionsToday.length === 1) todayBits.push(`a session at ${sessionsToday[0].time || 'today'}`); else if (sessionsToday.length > 1) todayBits.push(`${sessionsToday.length} sessions`); if (todayBits.length) { parts.push(`Today you have ${join(todayBits)}.`); } else if (!doneYesterday.length) { const generic = [ 'Nothing scheduled today — a clear runway to get ahead on what matters most.', 'Your day is open. A great chance to make progress on a bigger goal.', ]; parts.push(generic[new Date(now).getDate() % generic.length]); } else { parts.push('Nothing due today — enjoy the breathing room, or get a head start on tomorrow.'); } return parts.join(' '); } function DashboardScreen({ member, onJoin, onGoto, gameMode, intention, onClearIntention, tasks, goals, setTasks, focus, focusTick }) { const now = new Date(); const today = now.toLocaleDateString('en-US', { weekday:'long', month:'long', day:'numeric' }); const hr = now.getHours(); const greeting = hr < 12 ? 'Good morning' : hr < 18 ? 'Good afternoon' : 'Good evening'; const [focusRows, setFocusRows] = useState([]); const [sessions, setSessions] = useState([]); const [xpOpen, setXpOpen] = useState(false); const reloadFocus = () => fetchFocusSessions().then(setFocusRows); useEffect(() => { reloadFocus(); }, [focusTick]); useEffect(() => { if (window.fetchListSessions) window.fetchListSessions().then(setSessions); }, []); const overview = buildSmartOverview({ tasks, sessions, now }); return ( <> {/* Page header — Welcome row */}
{greeting} · {today}

Welcome back, {member.firstName}.

{overview}
{/* Today's Intention card — Stitch right-side card */} {intention && (
calendar_today
Today's Intention
{intention}
)}
{/* Headline stat tiles */} setXpOpen(true)} /> {/* Bento grid — left widgets column (8) + right feed column (4) */}
{/* Left column: Quick Tasks + Focus Timer, then Eisenhower */}
onGoto('tasks')} />
{/* Right column: Level, next session, recent wins */}
setXpOpen(true)} />
{/* Full-width consistency strip */} {xpOpen && setXpOpen(false)} />} ); } Object.assign(window, { DashboardScreen });