Day {task.day} · {task.category}
×
{task.title}
{task.priority}
{dueText}
{task.countries && task.countries.length === 1 && (
{task.countries[0] === 'us' ? '🇺🇸 US only' : '🇨🇦 CA only'}
)}
${task.short}` }} />
{task.subItems && task.subItems.length > 0 && (
Steps
{task.subItems.map((s, i) => {
const key = `${task.id}-${i}`;
const done = subState[key];
return (
);
})}
)}
{task.links && task.links.length > 0 && (
)}
Close
onToggle(task.id)}>
{task.done ? '↩ Mark not done' : '✓ Mark as done'}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// DASHBOARD
// ═══════════════════════════════════════════════════════════════════════════
function Dashboard({ profile, onEditProfile, onReset }) {
const allTasks = useMemo(() => tasksForProfile(profile), [profile]);
const [done, setDone] = useState(() => loadState().done || {});
const [subDone, setSubDone] = useState(() => loadState().subDone || {});
const [activeWeek, setActiveWeek] = useState(() => {
const day = daysBetween(profile.arrivalDate, todayISO()) + 1;
if (day <= 7) return 1;
if (day <= 14) return 2;
if (day <= 21) return 3;
return 4;
});
const [openTaskId, setOpenTaskId] = useState(null);
const [showExport, setShowExport] = useState(false);
useEffect(() => {
const s = loadState();
saveState({ ...s, done, subDone });
}, [done, subDone]);
const tasks = useMemo(() => allTasks.map(t => ({ ...t, done: !!done[t.id] })), [allTasks, done]);
const toggleDone = (id) => setDone(d => ({ ...d, [id]: !d[id] }));
const toggleSub = (k) => setSubDone(s => ({ ...s, [k]: !s[k] }));
const currentDay = daysBetween(profile.arrivalDate, todayISO()) + 1;
const isFuture = currentDay < 1;
const isDone = currentDay > 30;
// Today's focus: 3 highest-priority not-done tasks closest to today
const focusTasks = useMemo(() => {
return [...tasks]
.filter(t => !t.done)
.sort((a, b) => {
const pri = { high: 0, medium: 1, low: 2 };
if (pri[a.priority] !== pri[b.priority]) return pri[a.priority] - pri[b.priority];
return Math.abs(daysBetween(todayISO(), a.dueDate)) - Math.abs(daysBetween(todayISO(), b.dueDate));
})
.slice(0, 3);
}, [tasks]);
const weekTasks = tasks.filter(t => t.week === activeWeek);
const weekProgress = (w) => {
const wt = tasks.filter(t => t.week === w);
const dn = wt.filter(t => t.done).length;
return { done: dn, total: wt.length };
};
// Group week tasks by category
const grouped = useMemo(() => {
const g = {};
weekTasks.forEach(t => { (g[t.category] = g[t.category] || []).push(t); });
return g;
}, [weekTasks]);
// Timeline strip data — 30 days
const stripDays = Array.from({ length: 30 }, (_, i) => {
const date = addDays(profile.arrivalDate, i);
const dayTasks = tasks.filter(t => t.day === i + 1);
const dayDone = dayTasks.filter(t => t.done).length;
const isPast = daysBetween(todayISO(), date) < 0;
const isToday = date === todayISO();
return { day: i + 1, date, tasks: dayTasks, done: dayDone, isPast, isToday };
});
const greeting = (() => {
const h = new Date().getHours();
if (h < 12) return 'Good morning';
if (h < 18) return 'Good afternoon';
return 'Good evening';
})();
const totalDone = tasks.filter(t => t.done).length;
const totalTasks = tasks.length;
const allDone = totalDone === totalTasks && totalTasks > 0;
const openTask = tasks.find(t => t.id === openTaskId);
return (
{/* Hero */}
{greeting}, {profile.name} .
{isFuture
? `You land in ${Math.abs(currentDay - 1)} days. Here's everything to do before takeoff and your first month in ${profile.city}.`
: isDone
? `You've crossed day 30 in ${profile.city}. Nice work — keep going through anything left below.`
: `Day ${currentDay} of 30 in ${profile.city}. Below are your tasks for this week, plus the few you still owe yourself.`}
{isFuture ? 'Days until arrival' : isDone ? 'Days since arrival' : 'Day'}
{isFuture ? Math.abs(currentDay - 1) : isDone ? currentDay - 1 : currentDay}
{!isFuture && !isDone && / 30 }
Arrival · {fmtDate(profile.arrivalDate)} · {profile.country === 'us' ? '🇺🇸' : '🇨🇦'} {profile.city}
{/* Today / Up next */}
{isFuture ? 'Before you fly' : 'Today and up next'}
{totalDone}/{totalTasks} done · {Math.round(totalDone/Math.max(1,totalTasks)*100)}%
{focusTasks.length === 0 ? (
All caught up. Beautiful.
You've ticked off every task. Treat yourself to a samosa.
) : (
{focusTasks.map(t => {
const days = daysBetween(todayISO(), t.dueDate);
const pill = days < 0 ? 'urgent' : days <= 1 ? 'due' : 'flexible';
const pillText = days < 0 ? `${Math.abs(days)}d late` : days === 0 ? 'Today' : days === 1 ? 'Tomorrow' : `In ${days}d`;
return (
setOpenTaskId(t.id)}>
{t.category}
{pillText}
{t.title}
{t.short}
Day {t.day} · {fmtDate(t.dueDate)}
Open →
);
})}
)}
{/* Weeks */}
The full plan , week by week
setShowExport(true)}>
↓ Export to to-do app
{[1,2,3,4].map(w => {
const p = weekProgress(w);
return (
setActiveWeek(w)}>
WEEK {w}
{w === 1 ? 'Bearings' : w === 2 ? 'Identity & admin' : w === 3 ? 'Credit & comfort' : 'Settle in'}
{p.done} / {p.total} done
);
})}
{Object.entries(grouped).map(([cat, items]) => (
{cat} · {items.length} task{items.length > 1 ? 's' : ''}
{items.map(t => (
setOpenTaskId(t.id)}>
{ e.stopPropagation(); toggleDone(t.id); }}>
{t.title}
{t.short}
{t.priority === 'high' && priority }
D{t.day} · {fmtDate(t.dueDate)}
›
))}
))}
{/* Timeline strip */}
30-day overview
Hover a day for details
{stripDays.map(d => (
0 && 'has-tasks',
d.tasks.length > 0 && d.done === d.tasks.length && 'has-done',
d.isPast && 'past',
d.isToday && 'today',
].filter(Boolean).join(' ')}
title={`Day ${d.day} · ${fmtDate(d.date)} · ${d.tasks.length} task${d.tasks.length !== 1 ? 's' : ''}${d.tasks.length ? ` (${d.done} done)` : ''}`}
>
))}
Day 1 · {fmtDate(profile.arrivalDate)}
Day 30 · {fmtDate(addDays(profile.arrivalDate, 29))}
setOpenTaskId(null)}
onToggle={(id) => { toggleDone(id); setOpenTaskId(null); }}
onToggleSub={toggleSub}
subState={subDone}
/>
{showExport && setShowExport(false)} />}
);
}
// ═══════════════════════════════════════════════════════════════════════════
// APP SHELL
// ═══════════════════════════════════════════════════════════════════════════
function App() {
const [state, setState] = useState(loadState);
const [editing, setEditing] = useState(false);
const setProfile = (profile) => {
const next = { ...state, profile };
setState(next);
saveState(next);
setEditing(false);
};
const reset = () => {
if (confirm('Reset your plan? This deletes all progress and your profile.')) {
localStorage.removeItem(STORAGE_KEY);
setState({});
}
};
if (!state.profile || editing) {
return (
<>
setEditing(true)} onReset={reset} hideProfile={!state.profile} />
setEditing(true)} onReset={reset} />
setEditing(true)} onReset={reset} />
);
}
function TopBar({ profile, onEdit, onReset, hideProfile }) {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render(