{stat('Today', window.fmtMins(todayMin), `${todayRows.length} ${todayRows.length===1?'session':'sessions'}`)}
{stat('This week', window.fmtMins(weekMin), `${weekRows.length} ${weekRows.length===1?'session':'sessions'}`)}
{stat('Total focus', window.fmtMins(totalMin))}
{stat('Sessions', String(rows.length), 'all time')}
Most focused time of day
{byHour.map((mins,h) => (
0?'var(--accent)':'var(--bg-sunken)', borderRadius:2 }} />
))}
12 AM6 AM12 PM6 PM11 PM
Weekly rhythm
{grid.map((rowArr,di) => (
{DOW[di]}
{rowArr.map((mins,h) => (
0?'var(--accent)':'var(--bg-sunken)', opacity: mins>0?(0.25+0.75*(mins/maxCell)):1 }} />
))}
))}
12 AM → 11 PM
Focus in {yr}
Less
{[0,0.3,0.55,0.78,1].map((op,i) => )}
More
{weeks.map((wk,wi) => (
{wk.map((d,dyi) => {
const inYear = d.getFullYear()===yr;
const mins = inYear ? (dayMap[window.focusYmd(d)]||0) : 0;
return
;
})}
))}
Focus records
{rows.slice(0,15).map((r,i) => {
const d = when(r);
return (
timer
{r.label || 'Focus session'}
{d.toLocaleDateString('en-US',{month:'short',day:'numeric'})} · {d.toLocaleTimeString('en-US',{hour:'numeric',minute:'2-digit'})}{r.subject ? ' · '+r.subject : ''}
{window.fmtMins(r.duration_minutes||0)}
);
})}
);
}
function mapTaskRow(t) {
return {
...t,
subtasks: [],
points: 50,
subject: t.subject || 'General',
due: t.due_date ? new Date(t.due_date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) : null,
dueSort: t.due_date ? Math.ceil((new Date(t.due_date) - new Date()) / 86400000) : 999,
priority: t.priority || 'Routine',
};
}
function CreateItemModal({ goals, defaultKind, onClose, onTaskCreated, onGoalCreated }) {
const [kind, setKind] = React.useState(defaultKind || 'task');
const [title, setTitle] = React.useState('');
const [description, setDescription] = React.useState('');
const [subject, setSubject] = React.useState('');
const [priority, setPriority] = React.useState('Routine');
const [dueDate, setDueDate] = React.useState('');
const [goalId, setGoalId] = React.useState('');
const [targetDate, setTargetDate] = React.useState('');
const [goalTasks, setGoalTasks] = React.useState([]);
const [saving, setSaving] = React.useState(false);
const [err, setErr] = React.useState('');
const addGoalTask = () => setGoalTasks(g => [...g, { title: '', due: '' }]);
const updateGoalTask = (i, field, val) => setGoalTasks(g => g.map((t, j) => j === i ? { ...t, [field]: val } : t));
const removeGoalTask = (i) => setGoalTasks(g => g.filter((_, j) => j !== i));
const submit = async () => {
setErr('');
if (!title.trim()) { setErr('Please enter a title.'); return; }
setSaving(true);
const { data: { user } } = await window._supabase.auth.getUser();
if (kind === 'task') {
const { data, error } = await window._supabase.from('tasks').insert({
user_id: user.id,
title: title.trim(),
notes: description.trim() || null,
subject: subject || null,
priority,
due_date: dueDate || null,
goal_id: goalId || null,
order_index: 0,
}).select('*, roadmap_step:roadmap_steps(title, goal_id)').single();
setSaving(false);
if (error) { setErr(error.message); return; }
onTaskCreated(mapTaskRow(data));
} else {
const { data: goal, error } = await window._supabase.from('goals').insert({
user_id: user.id,
title: title.trim(),
description: description.trim() || null,
target_date: targetDate || null,
status: 'active',
}).select().single();
if (error) { setSaving(false); setErr(error.message); return; }
let createdTasks = [];
const rows = goalTasks.filter(t => t.title.trim()).map(t => ({
user_id: user.id, title: t.title.trim(), due_date: t.due || null,
goal_id: goal.id, priority: 'Routine', order_index: 0,
}));
if (rows.length) {
const { data: tdata, error: terr } = await window._supabase.from('tasks').insert(rows).select('*, roadmap_step:roadmap_steps(title, goal_id)');
if (terr) { setSaving(false); setErr('Goal created, but adding tasks failed: ' + terr.message); return; }
createdTasks = (tdata || []).map(mapTaskRow);
}
setSaving(false);
onGoalCreated(goal, createdTasks);
}
onClose();
};
return (
<>