// Generic KPI strip variant for Vukasi (used on Overview + reused on routes)
// Plus the Toast system + Route shell template.
const { Sparkline, WidgetCard, Empty, ExtArrow, Monogram } = window.DC;
// ── Vukasi KPI Strip ────────────────────────────────────────────────────────
function VukasiKPIStrip({ kpis }) {
if (!kpis) return null;
const items = [
{ ...kpis.avgCPL, key: 'cpl', emphasis: true },
{ ...kpis.cpBooked, key: 'cpb', emphasis: false },
{ ...kpis.hookRate, key: 'hook', emphasis: false },
].filter(k => k.label);
const trendColor = (t) => t === 'good' ? 'var(--status-green)' : t === 'warn' ? 'var(--status-amber)' : 'var(--ink-soft)';
return (
{items.map((k, i) => (
{k.emphasis && (
Headline
)}
{k.label}
{k.value}
{k.delta}
·
{k.target}
{k.series && (
{k.prefix || ''}{k.series[0]}{k.suffix || ''} → {k.prefix || ''}{k.series[k.series.length-1]}{k.suffix || ''}
)}
))}
);
}
// ── Toast system ────────────────────────────────────────────────────────────
const ToastContext = React.createContext({ push: () => {} });
function ToastProvider({ children }) {
const [toasts, setToasts] = useState([]);
const push = useCallback((t) => {
const id = Math.random().toString(36).slice(2);
setToasts(prev => [...prev, { ...t, id }]);
setTimeout(() => setToasts(prev => prev.filter(x => x.id !== id)), t.durationMs || 5500);
}, []);
return (
{children}
{toasts.map(t => (
{t.initials || '✦'}
{t.title}
{t.body &&
{t.body}
}
))}
);
}
const useToast = () => React.useContext(ToastContext);
// ── Route page shell ────────────────────────────────────────────────────────
function RoutePage({
eyebrow, title, lastUpdated, dataSource,
rollupSummary, // optional inline string
rollupCards, // optional [{label, value, sub, tone}]
filters, // optional ReactNode (rendered top-right)
actions, // optional ReactNode (rendered top-right after filters)
children,
onBack,
}) {
return (
{(rollupSummary || rollupCards) && (
{rollupSummary && (
Rollup
{rollupSummary}
)}
{rollupCards && rollupCards.length > 0 && (
{rollupCards.map((c, i) => (
{c.label}
{c.value}
{c.sub &&
{c.sub}
}
))}
)}
{children}
);
}
// ── Phase 2 placeholder ─────────────────────────────────────────────────────
function PlaceholderRoute({ eyebrow, title, intent, willInclude, onBack }) {
return (
P2
Coming in Phase 2
{intent}
The shell is in place — header, rollup slot, and content area are all ready. The route works
as a destination already; we just haven't filled the working surface yet. Round 4 prioritized
building four routes deep over building all nine shallow.
{willInclude && (
Will include
{willInclude.map((w, i) => {w} )}
)}
);
}
// ── Filter pill bar ─────────────────────────────────────────────────────────
function PillBar({ value, onChange, options }) {
return (
{options.map(o => (
onChange(o.k)} style={{
padding: '5px 10px', border: '1px solid var(--border)',
background: value === o.k ? 'var(--ink)' : 'transparent',
color: value === o.k ? 'var(--paper-50)' : 'var(--ink-soft)',
fontSize: 10.5, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer',
}}>
{o.l}
{o.count !== undefined && {o.count} }
))}
);
}
// ── Read-only badge (Henry viewing Vukasi's routes) ───────────────────────────
function ReadOnlyBadge() {
return (
);
}
window.DC = Object.assign(window.DC || {}, {
VukasiKPIStrip, ToastProvider, useToast, RoutePage, PlaceholderRoute, PillBar, ReadOnlyBadge,
});