/* Madison Renewal Engine — shared component library.
Status vocabulary, condition cards, evidence, artifacts, timeline, gates,
source health, automation state, shadow treatment, tables, states. */
const { useState, useEffect, useRef, useMemo, useContext, createContext, Fragment } = React;
const MCtx = createContext({});
const useApp = () => useContext(MCtx);
/* ---------- icons ---------- */
const IP = {
'chevron-right': {IP[n] || IP.dot} ;
}
/* ---------- formatting ---------- */
const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const pad = (n) => (n < 10 ? '0' + n : '' + n);
function dt(at, withTime) {
if (!at) return '—';
const d = new Date(at);
return MON[d.getMonth()] + ' ' + d.getDate() + (withTime === false ? '' : ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()));
}
function rel(at) {
if (!at) return '—';
const m = (window.MD.TODAY - new Date(at)) / 6e4;
if (m < 2) return 'just now';
if (m < 60) return Math.round(m) + 'm ago';
if (m < 1440) return Math.round(m / 60) + 'h ago';
return Math.round(m / 1440) + 'd ago';
}
const money = (n) => (n === null || n === undefined ? '—' : '$' + n.toLocaleString('en-US'));
const pct = (n) => Math.round(n * 100) + '%';
const dayStr = (n) => (n === null || n === undefined ? '—' : n + 'd');
/* ---------- primitives ---------- */
function Pill({ tone = 'slate', children, sq, ico, title }) {
return {ico ? ;
}
const STAGE_TONE = { 'Renewal Created': '#A3ABBC', 'RAQ Sent': '#A3ABBC', 'RAQ In Progress': '#6E7481', 'Submission Prep': '#6E7481', 'Sent to Underwriting': '#2267EA', 'With Underwriting': '#2267EA', 'Sent to Actuarial': '#E79800', 'Pricing With Client': '#9355D1', 'Selection Received': '#09BD87', 'COI Sent': '#09BD87', Invoiced: '#0B8A64', Renewed: '#0D1318' };
function Stage({ v, since }) {
return {cat} ; }
const OWE_ICON = { Client: 'user', Advisor: 'users', AmRisk: 'building', Underwriting: 'shield', Accounting: 'receipt', 'Madison judgment': 'scale' };
function Owe({ v }) { return {v ? ; }
function Dp({ k, days, compact }) {
const d = days === undefined ? window.MD.daysTo(window.MD.dl(k)) : days;
const tone = d < 0 ? 'crit' : d <= 14 ? 'crit' : d <= 30 ? 'tight' : 'ok';
const fill = d < 0 ? 3 : d <= 14 ? 3 : d <= 30 ? 2 : 1;
return
{[0, 1, 2].map((i) =>
{d < 0 ? Math.abs(d) + 'd over' : d + 'd'}{compact ? '' : k ? {' ' + k.slice(0, 3)} : null}
;
}
function Src({ v, children }) { return = hot ? 'hot' : v >= warm ? 'warm' : '')}>{v}d ; }
function Bar({ parts }) { return {parts.map((p, i) => ; }
/* ---------- engine state / disposition ---------- */
const DISP_TONE = { 'Draft ready': 'blue', 'Draft ready · source stale': 'amber', 'Internal ageing': 'slate', Escalated: 'red', 'Routing recommended': 'red', 'On hold': 'amber', Suppressed: 'slate', 'Hold — conflicting evidence': 'amber', 'Hold — advisor currency': 'amber', 'Await external response': 'slate', 'No action required': 'slate', Closed: 'slate' };
function EngineState({ v }) {
const t = DISP_TONE[v] || (v && v.indexOf('Close Chain') === 0 ? 'purple' : 'slate');
return {v} ;
}
function Priority({ v }) { return {v} ; }
/* ---------- condition card ---------- */
function CondCard({ c, r, onAct, dense }) {
const app = useApp();
const done = c.status === 'resolved';
const held = c.status === 'held';
const tone = done ? 'done' : c.internal ? 'int' : c.pressure === 'crit' || c.pressure === 'overdue' ? 'crit' : 'tight';
const unverified = app.staleEmail && !done;
return
{c.item}
{done ?
Resolved : held ?
Held : null}
{c.internal && !done ?
Internal : null}
{c.conf === 'conflicting' ?
Sources disagree : null}
{unverified && c.conf === 'stale-source' ?
Response unverified : null}
{c.label}
{!dense &&
Owing
Open since {dt(window.MD.ago(c.age), false)} Last attempt {c.lastAttempt === null ? '—' : c.lastAttempt === 0 ? 'today' : c.lastAttempt + 'd ago'} {c.attempts} total
Deadline
Status {done ? 'Resolved ' + dt(c.resolved.at, false) : held ? 'Held' : 'Open'}
}
{done ?
Resolved by {c.resolved.by} — {c.resolved.how}
:
{c.override ? <>Held by {c.override.by} · {c.override.reason}Next {c.next} app.openEvidence({ title: c.cat + ' · ' + c.item, sub: r ? r.account : '', items: c.evidence, cond: c })}>Why? · {c.evidence.length} sources
}
;
}
/* ---------- recommended action ---------- */
function RecModule({ r, onOpenDraft, compact }) {
const app = useApp();
const rec = r.rec; if (!rec) return null;
const draft = window.MD.drafts.find((d) => d.renewal === r.id && d.state !== 'sent' && d.state !== 'discarded');
const ICO = { 'Draft outreach': 'edit', Hold: 'pause', Consolidate: 'layers', 'Internal escalation': 'arrow-up', 'Recommend routing': 'split', Suppress: 'ban', 'Await external response': 'clock', 'Review exception': 'alert', 'No action required': 'check' };
return
{rec.action}
{rec.consolidate ?
Consolidation recommended : null}
{rec.exception ?
Exception {rec.exception} : null}
Engine · {rel(r.lastEval)}
Why now
{rec.why.map((w, i) =>
If nothing happens: {rec.ifNothing}
{draft && draft.state !== 'suppressed' ?
onOpenDraft ? onOpenDraft(draft.id) : app.nav('#/chase/' + draft.id)}> : null}
{draft && draft.state === 'suppressed' ?
Draft suppressed : null}
{rec.exception ?
app.nav('#/exceptions/' + rec.exception)}> : null}
;
}
/* ---------- evidence ---------- */
const EV_ICON = { salesforce: 'database', email: 'mail', engine: 'activity', amrisk: 'building', accounting: 'receipt', user: 'user' };
function EvidenceList({ items }) {
if (!items || !items.length) return No evidence recorded.
;
return {items.map((e) =>
{e.label} {e.type}
{e.detail}
{dt(e.at)}
)}
e.stopPropagation()}>
{d.cond ?
Condition held open because no artifact satisfying {d.cond.item} has been observed. Source completeness: {d.cond.conf} .
: null}
{d.note ?
{d.note}
: null}
Evidence · {(d.items || []).length}
{d.children}
;
}
/* ---------- timeline ---------- */
const SRC_LABEL = { salesforce: 'Salesforce', email: 'Email', engine: 'Engine', user: 'Madison user', amrisk: 'AmRisk', accounting: 'Accounting' };
function Timeline({ events, filter, onFilter }) {
const srcs = ['salesforce', 'email', 'engine', 'user', 'amrisk', 'accounting'];
const list = (events || []).filter((e) => !filter || filter === 'all' || e.src === filter).slice().sort((a, b) => new Date(b.at) - new Date(a.at));
return
{onFilter ?
onFilter('all')}>All
{srcs.map((s) => onFilter(s)}>{SRC_LABEL[s]} )}
: null}
{list.map((e, i) =>
{dt(e.at)}
{e.title}
{e.detail ?
{e.detail}
: null}
)}
{!list.length ?
No events from this source.
: null}
{a.name} {a.authoritative ?
Authoritative : null}
{a.type} · {a.source} · {dt(a.at, false)} {a.version ? <>· {a.version} : null}{a.confidence ? <>· match {a.confidence} : null}
{f[1]}
{onOpen ?
onOpen(a)}>Inspect : null}
;
}
/* ---------- close chain ---------- */
const CLOSE_STATES = ['SELECTION_RECEIVED', 'LOCK_PENDING', 'LOCK_RECEIVED', 'SELECTION_VERIFYING', 'SELECTION_VERIFIED', 'GRID_STAGED', 'GRID_APPROVED', 'BILLING_STATE_READY', 'PAYMENT_PENDING', 'RECEIPT_CONFIRMED', 'RELEASE_ELIGIBLE'];
const CLOSE_LABEL = { SELECTION_RECEIVED: 'Selection received', LOCK_PENDING: 'Lock pending', LOCK_RECEIVED: 'Lock received', SELECTION_VERIFYING: 'Verifying', SELECTION_VERIFIED: 'Verified', GRID_STAGED: 'Grid staged', GRID_APPROVED: 'Grid approved', BILLING_STATE_READY: 'Billing ready', PAYMENT_PENDING: 'Payment pending', RECEIPT_CONFIRMED: 'Receipt confirmed', RELEASE_ELIGIBLE: 'Release eligible', GRID_REJECTED: 'Grid rejected', EXCEPTION: 'Exception' };
function Rail({ state, bad, compact }) {
const idx = CLOSE_STATES.indexOf(state);
const show = compact ? CLOSE_STATES.filter((s, i) => i >= Math.max(0, idx - 1) && i <= idx + 1) : CLOSE_STATES;
return {show.map((s, i) => {
const si = CLOSE_STATES.indexOf(s);
const cls = si < idx ? 'done' : si === idx ? (bad ? 'bad now' : 'now') : '';
return {i ? ;
})}
;
}
function ShadowBar({ where }) {
return
2026 SHADOW
Stage and compare only — no production policy, coverage, invoice, or release writes.
{where || 'Close Chain'} · cutover decision 2027
;
}
const GATE_TONE = { approved: ['green', 'check', 'Approved'], exists: ['green', 'check', 'Exists'], valid: ['green', 'check', 'Valid'], confirmed: ['green', 'check', 'Confirmed'], clear: ['green', 'check', 'None'], pending: ['red', 'x', 'Pending'], blocking: ['red', 'alert', 'Blocking'], warn: ['amber', 'alert', 'Review'], 'expected-later': ['amber', 'clock', 'Expected later'], unverified: ['amber', 'info', 'Unverified'], missing: ['red', 'alert', 'Missing unexpectedly'] };
function GateRow({ label, v, note }) {
const g = GATE_TONE[v] || ['slate', 'info', v];
return
{label}
{note ?
{note} : null}
{g[2]}
;
}
function gateOpen(g) { return g && g.grid === 'approved' && (g.policy === 'exists') && g.billing === 'valid' && g.receipt === 'confirmed' && g.exceptions === 'clear'; }
function gateReason(g) {
if (!g) return 'Close Chain has not started for this renewal.';
const r = [];
if (g.grid !== 'approved') r.push('coverage grid is not approved');
if (g.policy !== 'exists') r.push('policy record is ' + (GATE_TONE[g.policy] ? GATE_TONE[g.policy][2].toLowerCase() : g.policy));
if (g.billing !== 'valid') r.push('billing state is not valid');
if (g.receipt !== 'confirmed') r.push('receipt has not been confirmed');
if (g.exceptions !== 'clear') r.push('an unresolved exception is open');
return r.length ? r[0][0].toUpperCase() + r[0].slice(1) + (r.length > 1 ? ' (+' + (r.length - 1) + ' more)' : '') + '.' : '';
}
const VROW = { exact: ['green', 'Exact match'], map: ['amber', 'Mapping required'], mismatch: ['red', 'Value mismatch'], 'miss-ws': ['red', 'Missing from worksheet'], 'miss-lk': ['red', 'Missing from lock'], uncertain: ['amber', 'Parse uncertain'], unsupported: ['red', 'Unsupported layout'], corrected: ['green', 'Corrected · matches lock'], conflict: ['red', 'Correction conflicts with lock'] };
function VState({ v }) { const t = VROW[v] || ['slate', v]; return {t[1]} ; }
/* ---------- source health ---------- */
function healthState(app) {
const h = window.MD.health;
if (!app.sfWrites) return { tone: 'bad', label: 'Salesforce writes suspended' };
if (app.staleEmail) return { tone: 'warn', label: 'Email observation stale' };
if (h.email.groups.some((g) => g.state === 'stale')) return { tone: 'warn', label: '1 mailbox group stale' };
return { tone: 'ok', label: 'Sources current' };
}
function SourceChip() {
const app = useApp();
const s = healthState(app);
return app.nav('#/system')}>
;
}
function StaleNote({ what }) {
return Response status currently unverified. {what || 'Email observation for the Advisor Services mailbox group is stale (last observed 5h 40m ago).'} Absence of a reply is not treated as fact.
;
}
/* ---------- automation ---------- */
const AUTO_TONE = { 'Autopilot Enabled': ['green', 'play'], 'Eligible for Consideration': ['blue', 'info'], 'Review Required': ['slate', 'user'], 'Autopilot Suspended': ['amber', 'pause'] };
function AutoState({ v }) { const t = AUTO_TONE[v] || ['slate', 'info']; return {v} ; }
/* ---------- exceptions ---------- */
function Sev({ v }) { return {v === 'high' ? 'High' : v === 'medium' ? 'Medium' : 'Low'} ; }
/* ---------- permissions ---------- */
function can(app, action) { return app.user.can.indexOf(action) >= 0; }
function Gated({ action, children, label }) {
const app = useApp();
if (can(app, action)) return children;
return
;
}
/* ---------- tables & states ---------- */
function Th({ id, sort, setSort, children, right, w }) {
const on = sort && sort.k === id;
return setSort && setSort({ k: id, d: on && sort.d === 'asc' ? 'desc' : 'asc' })} style={{ textAlign: right ? 'right' : 'left', width: w }}>
{children}{on ? {sort.d === 'asc' ? '↑' : '↓'} : null}
;
}
function Empty({ ico, title, note, action }) {
return ;
}
function TableSkeleton({ rows = 8, cols = 7 }) {
return {Array.from({ length: rows }).map((_, i) => {Array.from({ length: cols }).map((__, j) => )}
;
}
function Toast() {
const app = useApp();
if (!app.toast) return null;
return {app.toast.msg} {app.toast.undo ? Undo : null}
;
}
function Menu({ children, onClose, style }) {
const ref = useRef();
useEffect(() => {
const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
setTimeout(() => document.addEventListener('mousedown', h), 0);
return () => document.removeEventListener('mousedown', h);
}, []);
return {children}
;
}
function Sel({ v, set, opts, label, all }) {
return
set(e.target.value)}>
{label}
{opts.map((o) => {o} )}
;
}
function Kpis({ items, active, onPick }) {
return {items.map((k) => onPick(k.id)}>
{k.label} {k.n} {k.note}
)}
;
}
function Views({ items, v, set }) {
return {items.map((x) => set(x.id)}>{x.label}{x.n} )}
;
}
function Tabs({ items, v, set }) {
return {items.map((x) => set(x.id)}>{x.label}{x.n !== undefined ? {x.n} : ''} )}
;
}
function Sub({ title, note, right, children }) {
return
{title} {note ? {note} : null}{right} {children}