/* Module C, firm portfolio scope: Maturity Heatmap + Playbook Library (+ shared PlaybookDetail). */ function HeatCell({ score, delta, onClick }) { if (score == null) return —; const band = VCP.scoreBand(score); return ; } function MaturityHeatmap({ state, go }) { const [search, setSearch] = useState(""); const [fund, setFund] = useState(""); const [trend, setTrend] = useState(""); const [minS, setMinS] = useState(""); const [quick, setQuick] = useState("all"); const [sortPillar, setSortPillar] = useState(null); const [selected, setSelected] = useState([]); const [compare, setCompare] = useState(false); const [showTrend, setShowTrend] = useState(false); const [drill, setDrill] = useState(null); // {company, pillar} const [hidden, setHidden] = useState({}); // trend chart legend const pillars = VCP.PILLAR_KEYS; const overallDelta = c => +(c.overallSeries[c.overallSeries.length - 1] - c.overallSeries[0]).toFixed(1); let cos = VCP.companies.filter(c => { if (search && !c.name.toLowerCase().includes(search.toLowerCase())) return false; if (fund && c.fund !== fund) return false; if (trend && VCP.trendOf(c.overallSeries) !== trend) return false; if (minS && c.maturity < +minS) return false; if (quick === "top" && c.maturity < 4.0) return false; if (quick === "attention" && c.maturity >= 2.5) return false; if (quick === "improved" && overallDelta(c) < 0.5) return false; return true; }); if (sortPillar) { cos = [...cos].sort((a, b) => (sortPillar === "trend" ? overallDelta(b) - overallDelta(a) : b.pillars[sortPillar][0] - a.pillars[sortPillar][0])); } const scopeCos = VCP.companies; // totals computed across all const pillarMean = (list, p) => { const v = list.map(c => c.pillars[p][0]); return v.reduce((a, b) => a + b, 0) / v.length; }; const fundCos = f => scopeCos.filter(c => c.fund === f); const toggleSel = id => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]); const quickFilters = [ { v: "all", l: "All" }, { v: "top", l: "Top performers" }, { v: "attention", l: "Need attention" }, { v: "improved", l: "Most improved" }, ]; return
{/* filter bar */}
toggleSel(c.id)} />} go({ route: "co-valuecreation", companyId: c.id })} style={{ padding: "8px 12px", borderBottom: "1px solid var(--line-soft)", position: "sticky", left: 0, background: "var(--surface-card)", cursor: "pointer" }}>
{c.name}
{c.fundLabel.replace("Northbridge ", "")}
{pillars.map(p => setDrill({ company: c, pillar: p })} />)} )} {/* Totals */} {VCP.FUNDS.map(f => )}
{/* deep-link drawer */} setDrill(null)} width={440} eyebrow={drill && drill.company.name + " · Module C"} title={drill ? drill.pillar : ""} footer={drill && <> { go({ route: "co-valuecreation", companyId: drill.company.id }); setDrill(null); }}>Company matrix { go({ door: "portco", route: "pc-assessment", companyId: drill.company.id, deeplink: { pillar: drill.pillar } }); setDrill(null); }}>Open in assessment}> {drill && } {/* compare modal */} = 2 && false} /> {compare && selected.length >= 2 && VCP.companyById(id))} pillars={pillars} onClose={() => setSelected([])} />} ; } function hHead(w) { return { padding: "9px 8px", fontSize: 10.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: "var(--ink-soft)", textAlign: "center", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap", background: "var(--surface-deep)", width: w }; } function TotalRow({ label, cos, pillars, pillarMean, compare, bold }) { return {compare && } {label} {pillars.map(p => { const m = pillarMean(cos, p); const band = VCP.scoreBand(m); return {m.toFixed(1)}; })} ; } function DrillContent({ company, pillar }) { const pillarDef = VCP.PILLARS.find(p => p.key === pillar); // synth subpillar scores around the pillar score const base = company.pillars[pillar][0]; const isHeliosTech = company.id === "helios" && pillar === "Technology"; const subs = pillarDef.subpillars.map((sp, i) => { let s = isHeliosTech ? VCP.heliosTechSubpillars[sp] : Math.max(1, Math.min(5, +(base + ((i % 3) - 1) * 0.3).toFixed(1))); return { sp, s }; }); return
Pillar score, {pillar} 0.05 ? "up" : company.pillars[pillar][1] < -0.05 ? "down" : "stable"} delta={company.pillars[pillar][1]} />
Subpillars · 25Q2
{subs.map(({ sp, s }) =>
{sp}
)}
Opening the assessment crosses into the company's own door: the same QRAP they fill, scoped to this pillar. The scores above roll up from those answers.
; } function CompareModal() { return null; } function CompareSheet({ companies, pillars, onClose }) { return c.name).join(" · ")} width={620} footer={Close}> {companies.map(c => )} {pillars.map(p => { const vals = companies.map(c => c.pillars[p][0]); const best = Math.max(...vals), worst = Math.min(...vals); return {companies.map((c, i) => )}; })} {companies.map(c => )}
Pillar{c.short}
{p} {vals[i].toFixed(1)}
Overall{c.maturity.toFixed(1)}
; } /* ---------- Playbook Library ---------- */ function PlaybookLibrary({ readOnly, go }) { const [openP, setOpenP] = useState({ "Technology": true }); const [detail, setDetail] = useState(null); return
{!readOnly &&
window.vcpToast?.("Add playbook (demo)")}>Add playbook
}
{VCP.playbookLibrary.map(grp => { const total = grp.subpillars.reduce((a, s) => a + s.count, 0); const open = openP[grp.pillar]; return
{open &&
{grp.subpillars.map(sp =>
{sp.name} {sp.count > 0 ? : —}
)}
}
; })}
setDetail(null)} width={540} eyebrow={detail && detail.pillar + " · " + detail.subpillar} title={detail ? detail.name : ""}> {detail && }
; } function PlaybookDetail({ pb, readOnly }) { const [tab, setTab] = useState("overview"); return
{pb.status} {pb.priority} priority {pb.timeline}
{[["Timeline", pb.timeline], ["Contacts + advisors", (pb.firmExperts.length + pb.externalAdvisors.length)], ["Priority", pb.priority]].map(([l, v]) =>
{l}
{v}
)}
{tab === "overview" &&

{pb.description}

Project goal
{pb.goal}
Maps to subpillars
{pb.subpillarChips.map(c => {c.pillar} › {c.sp})}
Linked projects
{pb.linkedProjects.map(lp =>
{lp.name}{lp.company} {!readOnly && }
)} {!readOnly && window.vcpToast?.("Link project (demo)")}>Link project}
} {tab === "actions" &&
Recommended advisor
{pb.recommendedAdvisor}
{pb.actions.map(a =>
{a.n}
{a.name}
{a.deliverable}
{a.priority} {a.duration}
)}
} {tab === "people" &&
Firm experts
{pb.firmExperts.map(n => )}
External advisors
{pb.externalAdvisors.map(n => )}
} {tab === "docs" && }
; } function ContactRow({ name, sub, external, recommended, onClick }) { return ; } function DocList({ docs, readOnly }) { return
{!readOnly && window.vcpToast?.("Upload to SharePoint (demo)")}>Upload}
{docs.map((d, i) =>
{d.name}
{d.by} · {d.modified}{d.folder ? " · " + d.folder : ""}
{d.size} window.vcpToast?.("Downloading " + d.name)} />
)}
; } function ValueCreationFirm({ state, go }) { const [tab, setTab] = useState("heatmap"); return
{tab === "heatmap" ? : }
; } Object.assign(window, { ValueCreationFirm, PlaybookLibrary, PlaybookDetail, ContactRow, DocList, HeatCell });