// Routes batch 2: /blockers, /goals, /transcripts, /tasks, /wins
const { Monogram, Sparkline, Empty, ExtArrow, RoutePage, PillBar, ReadOnlyBadge } = window.DC;
const fmtAgo2 = (iso) => {
const m = Math.round((new Date('2026-04-29T09:00:00Z') - new Date(iso)) / 60000);
if (m < 60) return `${m}m ago`;
const h = Math.round(m/60); return h < 24 ? `${h}h ago` : `${Math.round(h/24)}d ago`;
};
// ── Henry · /blockers ───────────────────────────────────────────────────────
function BlockersRoute({ blockers, setBlockers, onBack }) {
const history = window.DC_DATA.BLOCKER_HISTORY;
const [tab, setTab] = useState('active');
const [filter, setFilter] = useState('all');
const aged = blockers.filter(b => b.ageDays > 5);
const counts = {
me: blockers.filter(b => b.owner === 'me').length,
team: blockers.filter(b => b.owner === 'team').length,
client: blockers.filter(b => b.owner === 'client').length,
external: blockers.filter(b => b.owner === 'external').length,
};
const visible = filter === 'all' ? blockers
: filter === 'aged' ? aged
: blockers.filter(b => b.owner === filter);
return (
5d', value: aged.length, sub: 'auto-flagged', tone: aged.length ? 'red' : null },
{ label: 'On Henry', value: counts.me, sub: 'awaiting your call', tone: counts.me ? 'amber' : null },
{ label: 'External', value: counts.external, sub: 'vendors / 3rd party' },
]}
filters={
{[{k:'active',l:`Active (${blockers.length})`},{k:'history',l:`Resolved (${history.length})`}].map(t => (
))}
}
actions={tab === 'active' && (
)}>
{tab === 'active' ? (
{['', 'Title', 'Owner', 'Client', 'Age', ''].map(h => (
| {h} |
))}
{visible.map(b => {
const isAged = b.ageDays > 5;
return (
|
{b.title} |
{b.owner}
{b.ownerName}
|
{b.client || '—'} |
{isAged && '⚑ '}{b.ageDays}d
|
|
);
})}
) : (
{['Title', 'Owner', 'Resolved', 'Days open'].map(h => (
| {h} |
))}
{history.map(h => (
| {h.title} |
{h.owner}{h.ownerName}
|
{h.resolvedDate} |
{h.daysOpen}d |
))}
)}
);
}
// ── Henry · /goals ──────────────────────────────────────────────────────────
function GoalsRoute({ goals, onBack }) {
const detail = window.DC_DATA.GOAL_DETAIL;
const goalEntries = Object.entries(goals);
return (
{goalEntries.length} goals tracked this quarter · weekly review every Friday}>
{goalEntries.map(([k, g]) => {
const d = detail[k];
const pct = Math.min(100, Math.round((g.current / g.target) * 100));
const fmt = (v) => `${g.prefix || ''}${v.toLocaleString()}${g.suffix || ''}`;
const fillColor = pct >= 90 ? 'var(--status-green)' : pct >= 60 ? 'var(--gold-deep)' : 'var(--status-amber)';
return (
{g.label}
{fmt(g.current)}
/ {fmt(g.target)}
{pct}%
{d && d.trajectory && (
Trajectory · last 7 weeks
{fmt(d.trajectory[0])}
{fmt(d.trajectory[d.trajectory.length - 1])}
)}
{d && d.contributing && (
Contributing actions
{d.contributing.map((c, i) => {
const color = c.status === 'won' ? 'var(--status-green)' : c.status === 'risk' ? 'var(--status-red)' : 'var(--gold-deep)';
return (
-
{c.date}
● {c.status}
{c.text}
{c.owner}
);
})}
)}
);
})}
StatusTaskClientDuePriority
{visible.map((t, i) => renderRow(t, i, i === visible.length - 1))}
{visible.length === 0 &&
}
) : (
{[
{ k: 'overdue', l: 'Overdue', color: 'var(--status-red)' },
{ k: 'today', l: 'Due today', color: 'var(--status-amber)' },
{ k: 'this_week', l: 'This week', color: 'var(--ink-soft)' },
].map(col => {
const items = tasks.filter(t => t.status === col.k);
return (
);
})}
{[{k:'archive',l:'Trophy case'},{k:'patterns',l:'Patterns'}].map(t => (
))}
}>
{tab === 'archive' ? (
{wins.map(w => (
{w.client}
{w.date}
{w.metric}
{w.value}
{w.vsTarget}
{w.testimonialDrafted ? (
● Testimonial drafted
) : (
)}
{w.shareable && }
))}
Patterns Cole extracted from the wins archive. Each one is a candidate to roll into more accounts.
{patterns.map((p, i) => (
-
{p.pattern}
{p.winsCount} wins
{p.lift}
{!readOnly && }
))}
)}
);
}
// ── Vukasi · /neglected ─────────────────────────────────────────────────────
const SOURCE_META = {
meta: { l: 'Meta Ads', color: 'var(--gold-deep)' },
ghl: { l: 'GHL', color: 'var(--forest-700)' },
clickup: { l: 'ClickUp', color: 'var(--ink-soft)' },
call: { l: 'Call', color: 'var(--status-green)' },
note: { l: 'Note', color: 'var(--status-amber)' },
};
function NeglectedRoute({ accounts, onPickClient, onBack, readOnly = false }) {
const detail = window.DC_DATA.NEGLECTED_DETAIL;
const rules = window.DC_DATA.NEGLECT_RULES;
const [tab, setTab] = useState('list');
const [selected, setSelected] = useState({});
const [filter, setFilter] = useState('all');
const { push } = window.DC.useToast ? window.DC.useToast() : { push: () => {} };
const sorted = [...accounts].sort((a, b) => b.daysNeglected - a.daysNeglected);
const counts = {
breach: sorted.filter(r => r.daysNeglected > 18).length,
warn: sorted.filter(r => r.daysNeglected > 14 && r.daysNeglected <= 18).length,
quiet: sorted.filter(r => r.daysNeglected <= 14).length,
};
const visible = filter === 'all' ? sorted
: filter === 'breach' ? sorted.filter(r => r.daysNeglected > 18)
: filter === 'warn' ? sorted.filter(r => r.daysNeglected > 14 && r.daysNeglected <= 18)
: sorted;
const selectedCount = Object.values(selected).filter(Boolean).length;
const toggleAll = () => {
if (selectedCount === visible.length) setSelected({});
else { const m = {}; visible.forEach(r => m[r.slug] = true); setSelected(m); }
};
return (
18d', value: counts.breach, sub: 'auto-flagged red', tone: counts.breach ? 'red' : null },
{ label: 'Warn 14-18d', value: counts.warn, sub: 'one cadence missed', tone: counts.warn ? 'amber' : null },
{ label: 'Total quiet', value: sorted.length, sub: 'all accounts > 14d' },
{ label: 'Selected', value: selectedCount, sub: selectedCount ? 'ready for bulk action' : 'pick rows to bulk-act' },
]}
filters={
{readOnly && }
{[{k:'list',l:`Register (${sorted.length})`},...(readOnly?[]:[{k:'rules',l:'Rules'}])].map(t => (
))}
}
actions={tab === 'list' && !readOnly && (
{selectedCount > 0 && (
)}
)}>
{tab === 'list' ? (
{!readOnly ? 0} onChange={toggleAll} /> : }
AccountDaysLast
{visible.map(r => {
const tone = r.daysNeglected > 18 ? 'var(--status-red)' : r.daysNeglected > 14 ? 'var(--status-amber)' : 'var(--ink)';
const bg = r.daysNeglected > 18 ? 'rgba(154,42,42,.04)' : 'transparent';
return (
18 ? '3px solid var(--status-red)' : '3px solid transparent',
}} onClick={() => onPickClient && onPickClient(r.slug)}>
{!readOnly ?
e.stopPropagation()}
onChange={e => setSelected(s => ({ ...s, [r.slug]: e.target.checked }))} /> :
}
{r.name}
{r.lastActivity}
{r.daysNeglected}d
{r.lastActivityDate}
);
})}
{visible.length === 0 &&
}
) : (
Tunable thresholds for the neglect monitor. Each one feeds the auto-flag logic on the register tab.
{rules.map((r, i) => (
-
{r.l}
{r.current}
{r.desc}
))}
)}
);
}
window.DC = Object.assign(window.DC || {}, {
BlockersRoute, GoalsRoute, TranscriptsRoute, TasksRoute, WinsRoute, NeglectedRoute,
});