) : (
)}
);
}
function VendorChip({ name, status, amount, tone }) {
return (
{status}
{name}
{fmt$(amount)}
);
}
function WeekStrip() {
const { active: tasks } = useTasks();
// Build the current Mon-Sun week (today highlighted), with a dot when an
// active task or payment falls on that day.
const today = new Date();
const day = today.getDay(); // 0=Sun..6=Sat
const mondayOffset = day === 0 ? -6 : 1 - day;
const monday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + mondayOffset);
const labels = ['M','T','W','T','F','S','S'];
// tasks-by-day index for dot rendering and upcoming list
const taskByDay = {};
(tasks || []).forEach(t => {
const dt = t.dueISO ? new Date(t.dueISO) : null;
if (!dt) return;
const k = dt.toDateString();
(taskByDay[k] ||= []).push(t);
});
const days = labels.map((d, i) => {
const dt = new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + i);
const isToday = dt.toDateString() === today.toDateString();
const list = taskByDay[dt.toDateString()] || [];
const dot = list.some(t => t.kind === 'payment') ? W.clay
: list.length ? W.rose
: null;
return { d, n: dt.getDate(), dot, today: isToday, dt, list };
});
// Upcoming list · top 2 active tasks (kept simple; works even without ISO dates).
// Falls back to task.due text for the day label so we cover both the
// demo data (string `due` field like "Due Friday") and parsed dates.
const upcoming = (tasks || [])
.filter(t => !t.done && t.title)
.slice(0, 2)
.map(t => ({
task: t,
// Try to derive a short weekday from dueISO; otherwise use `due` directly.
dayLabel: t.dueISO
? ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][new Date(t.dueISO).getDay()]
: (t.due || '').replace(/^Due /, '').slice(0, 6),
}));
return (