// Direction A — additional views (Calendar, Pipeline, Metrics, Digest, Table) // and the Task Detail slide-over panel. function ATableRow({ task: t, onOpen, onDelete }) { const [hovered, setHovered] = React.useState(false); const [confirming, setConfirming] = React.useState(false); React.useEffect(() => { if (!hovered) setConfirming(false); }, [hovered]); return ( { setHovered(true); e.currentTarget.style.background = A_TOKENS.paperDeep; }} onMouseLeave={(e) => { setHovered(false); e.currentTarget.style.background = 'transparent'; }} style={{ borderBottom: `1px solid ${A_TOKENS.lineSoft}`, cursor: 'pointer', background: 'transparent', transition: 'background .1s', }} > {t.title} {t.next_step || '—'} {t.category} {t.priority} {A_STATUS_META[t.status].glyph}{t.status} {hovered && ( )} ); } function ATable({ store, filter, onOpenTask }) { const visible = store.tasks.filter((t) => { if (filter.owner && filter.owner !== 'All' && t.owner !== filter.owner && t.owner !== 'Both') return false; if (filter.category && t.category !== filter.category) return false; if (filter.q && !(`${t.title} ${t.next_step}`.toLowerCase().includes(filter.q.toLowerCase()))) return false; return true; }); const priOrd = { High: 0, Medium: 1, Low: 2 }; visible.sort((a, b) => (priOrd[a.priority] - priOrd[b.priority]) || ((a.due_date || '9999') < (b.due_date || '9999') ? -1 : 1)); return (
{['', 'Task', 'Next step', 'Cat.', 'Owner', 'Priority', 'Status', 'Due', ''].map((h, i) => ( ))} {visible.map((t, i) => ( onOpenTask(t.id)} onDelete={store.deleteTask} /> ))}
{h}
); } // ─────── Calendar — 4-week grid of due dates ─────── function ACalendar({ store, filter, onOpenTask }) { const today = new Date(); today.setHours(0,0,0,0); const start = new Date(today); start.setDate(start.getDate() - start.getDay()); // Sunday of this week const days = Array.from({ length: 28 }, (_, i) => { const d = new Date(start); d.setDate(start.getDate() + i); return d; }); const tasksByDay = {}; store.tasks.forEach((t) => { if (!t.due_date) return; if (filter.owner && filter.owner !== 'All' && t.owner !== filter.owner && t.owner !== 'Both') return; if (filter.category && t.category !== filter.category) return; (tasksByDay[t.due_date] ||= []).push(t); }); const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; return (
{dayNames.map((d) => (
{d}
))}
{days.map((d, i) => { const iso = d.toISOString().slice(0, 10); const list = tasksByDay[iso] || []; const isToday = d.getTime() === today.getTime(); const isPast = d < today; return (
{d.getDate()} {d.getDate() === 1 && {d.toLocaleDateString(undefined, { month: 'short' })}} {isToday && TODAY}
{list.slice(0, 3).map((t) => (
onOpenTask(t.id)} style={{ fontSize: 11, lineHeight: 1.3, padding: '3px 6px', background: A_TOKENS.paperDeep, borderLeft: `2px solid ${A_CAT_COLOR[t.category]}`, color: A_TOKENS.ink, cursor: 'pointer', borderRadius: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }}>{t.title}
))} {list.length > 3 && (
+{list.length - 3} more
)}
); })}
); } // ─────── Pipeline — stages for Acquisition tasks ─────── function APipeline({ store, onOpenTask }) { const stages = ['To Do', 'In Progress', 'Waiting', 'Blocked', 'Done']; const stageLabels = { 'To Do': 'Identified', 'In Progress': 'Active', 'Waiting': 'Awaiting', 'Blocked': 'Stuck', 'Done': 'Closed' }; const acq = store.tasks.filter((t) => t.category === 'Acquisition'); const byStage = Object.fromEntries(stages.map((s) => [s, acq.filter((t) => t.status === s)])); return (
Acquisition pipeline
{acq.length} deals in motion
{/* funnel bar */}
{stages.map((s, i) => { const n = byStage[s].length; const pct = (n / Math.max(1, acq.length)) * 100; return (
{n} {stageLabels[s]}
); })}
{stages.map((s) => (
{stageLabels[s]}
{byStage[s].map((t) => (
onOpenTask(t.id)} style={{ background: A_TOKENS.card, border: `1px solid ${A_TOKENS.lineSoft}`, padding: '11px 12px', marginBottom: 8, cursor: 'pointer', borderRadius: 5, borderLeft: `3px solid ${A_CAT_COLOR.Acquisition}`, transition: 'box-shadow .1s, border-color .1s', }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = A_TOKENS.line; e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,.04)'; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = A_TOKENS.lineSoft; e.currentTarget.style.boxShadow = 'none'; }}>
{t.title}
))} {byStage[s].length === 0 && (
—
)}
))}
); } // ─────── Metrics ─────── function AMetrics({ store }) { const tasks = store.tasks; const active = tasks.filter((t) => t.status !== 'Done'); const overdue = active.filter((t) => t.due_date && new Date(t.due_date) < new Date(new Date().toDateString())); const dueWeek = active.filter((t) => { if (!t.due_date) return false; const d = new Date(t.due_date); const now = new Date(new Date().toDateString()); const wk = new Date(now); wk.setDate(wk.getDate() + 7); return d >= now && d <= wk; }); const byStatus = Object.fromEntries(window.MOCK.STATUSES.map((s) => [s, tasks.filter((t) => t.status === s).length])); const byCat = Object.fromEntries(window.MOCK.CATEGORIES.map((c) => [c, tasks.filter((t) => t.category === c).length])); const byOwner = { Phil: tasks.filter((t) => t.owner === 'Phil' || t.owner === 'Both').filter((t) => t.status !== 'Done').length, Bob: tasks.filter((t) => t.owner === 'Bob' || t.owner === 'Both').filter((t) => t.status !== 'Done').length }; const max = Math.max(1, ...Object.values(byCat)); const Stat = ({ label, value, sub, tone }) => (
{label}
{value}
{sub &&
{sub}
}
); return (
5 ? 'warn' : null} />
By category
{window.MOCK.CATEGORIES.map((c) => (
{c}
{byCat[c]}
))}
Flow — last 30 days
{/* Mock sparkline */} 20 10 0 {/* grid */} {[0, 1, 2, 3].map((i) => ( ))} {/* In Progress */} {/* Done */} {/* Overdue */}
ACTIVE DONE OVERDUE
); } // ─────── Weekly Digest preview ─────── function ADigest({ store, onOpenTask }) { const active = store.tasks.filter((t) => t.status !== 'Done'); const overdue = active.filter((t) => t.due_date && new Date(t.due_date) < new Date(new Date().toDateString())); const dueWeek = active.filter((t) => { if (!t.due_date) return false; const d = new Date(t.due_date); const now = new Date(new Date().toDateString()); const wk = new Date(now); wk.setDate(wk.getDate() + 7); return d >= now && d <= wk; }); const completed = store.tasks.filter((t) => t.status === 'Done'); const philTasks = active.filter((t) => t.owner === 'Phil' || t.owner === 'Both'); const bobTasks = active.filter((t) => t.owner === 'Bob' || t.owner === 'Both'); const Sec = ({ title, children }) => (
{title}
{children}
); const Item = ({ t }) => (
onOpenTask(t.id)} style={{ display: 'flex', gap: 10, padding: '7px 0', cursor: 'pointer', alignItems: 'center' }}>
{t.title}
); return (
Preview · Monday digest
Auto-generated every Monday at 7am. Sent to both of you. Summarizes what's overdue, what's due this week, what shipped, and where @mentions are waiting on you.
FROM: DASHBOARD · TO: PHIL, BOB · MONDAY 7:00 AM
Week of {new Date().toLocaleDateString(undefined, { month: 'long', day: 'numeric' })}
{active.length} active · {overdue.length} overdue · {completed.length} shipped all-time
{overdue.length > 0 && {overdue.map((t) => )}} {dueWeek.map((t) => )} {philTasks.slice(0, 5).map((t) => )} {bobTasks.slice(0, 5).map((t) => )}
); } Object.assign(window, { ATable, ACalendar, APipeline, AMetrics, ADigest });