// Deal Dashboard — Overview. NEW screen, mounts alongside the legacy Overview. // // Scope is the LOGGED-IN USER's own module. Two grains: // Module — aggregate single view of their module. // Sub-team — COMPARATIVE: every sub-team of their module shown side-by-side // (e.g. Deal Fees: Scheftz $1.35M | Burton $770K). Text shrinks // with the number of sub-teams. (Individual lives on another tab.) // // REAL: Deal Fees, Signed LOIs, Offers, Lead Progression & Outreach boxes + deltas, // both charts, BHAG closed-vs-target, Top Projects (live per-project activity). // PENDING (amber-flagged — wire after pipeline/projects Supabase tables, 7B-2): // Deal Fee Projection box, BHAG pipeline-EV segment. const { useState, useEffect, useMemo } = React; function _money(n) { if (n == null) return "—"; if (n === 0) return "$0"; const a = Math.abs(n); if (a >= 1000000) return `$${(n / 1000000).toFixed(2)}M`; if (a >= 1000) return `$${(n / 1000).toFixed(0)}K`; return `$${Math.round(n).toLocaleString()}`; } function _num(n) { return (Number(n) || 0).toLocaleString(); } function _d10(s) { return (s == null ? "" : String(s)).slice(0, 10); } function _inRange(d, from, to) { const x = _d10(d); return x && x >= from && x <= to; } function _mondayRange(weeks) { if (!weeks || !weeks.length) return null; const toMon = (f) => { const d = new Date(f + "T00:00:00Z"); d.setUTCDate(d.getUTCDate() - 4); return d.toISOString().slice(0, 10); }; const m = weeks.map(toMon).sort(); return { from: m[0], to: m[m.length - 1] }; } function _calRange(period, year) { const P = (window.VAULT_FIRM.PERIODS || []).find(p => p.id === period); if (P && P.quarter) { const q = P.quarter; const st = ["01-01", "04-01", "07-01", "10-01"][q - 1], en = ["03-31", "06-30", "09-30", "12-31"][q - 1]; return { from: `${year}-${st}`, to: `${year}-${en}` }; } return { from: `${year}-01-01`, to: `${year}-12-31` }; } const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const ENTITY_COLORS = ["#196EA7", "#5AA4D2", "#0D3E5C", "#84BBDE"]; function _shortLbl(s) { return String(s || "").replace(/\s*(Sub-?team|Team)\s*$/i, "").replace(/^.*— /, "").trim() || s; } function resolveUserScope(user) { const F = window.VAULT_FIRM; const pid = user && (user.personId || user.id); const all = (F.DEAL_PEOPLE || F.PEOPLE || (F.PEOPLE_BY_ID ? Object.values(F.PEOPLE_BY_ID) : [])); let me = (pid && F.PEOPLE_BY_ID) ? F.PEOPLE_BY_ID[pid] : null; if (!me && pid) me = F.PEOPLE_BY_ID[pid.replace(/^p_/, "")] || null; if (!me) me = all.find(p => p && ( p.id === pid || p.id === (pid || "").replace(/^p_/, "") || (user && user.email && p.email && p.email.toLowerCase() === user.email.toLowerCase()) || (user && user.name && p.name === user.name))) || null; const meId = (me && me.id) || pid || null; const moduleId = me ? me.subteam : null; const moduleLabel = ((F.SUBTEAMS.find(s => s.id === moduleId) || {}).label || "My module").replace(/^.*— /, ""); const mySubteams = (F.SUBSUBTEAMS || []).filter(s => s.parentSubteam === moduleId) .map(s => ({ id: s.id, label: _shortLbl(s.label), memberIds: s.memberIds || [] })); return { moduleId, moduleLabel, mySubteams, meId }; } function scopeParams(grain, id, U) { const none = { modules: null, subteams: null, individuals: null, scope: { subteam: [], subSubteam: [], individuals: [] } }; if (grain === "subteam") { if (!id) return none; return { modules: null, subteams: [id], individuals: null, scope: { subteam: [], subSubteam: [id], individuals: [] } }; } if (!U.moduleId) return none; return { modules: [U.moduleId.replace(/^st-/, "")], subteams: null, individuals: null, scope: { subteam: [U.moduleId], subSubteam: [], individuals: [] } }; } const DATASETS = { lead: { label: "Lead Progression", def: "confCalls", metrics: [["leads", "Leads"], ["confCalls", "Conf Calls"], ["visits", "Visits"], ["offers", "Offers"]] }, outreach: { label: "Outreach", def: "mailings", metrics: [["ntps", "New Target Profiles"], ["mailings", "Mailings"], ["calls", "Calls"]] }, }; function DealOverviewScreen({ period, setPeriod, year, setYear, user }) { const B = window.VAULT_BHAG; const U = useMemo(() => resolveUserScope(user), [user && (user.personId || user.id)]); const [grain, setGrain] = useState("module"); // module | subteam const [dataset, setDataset] = useState("lead"); const [metric, setMetric] = useState(DATASETS.lead.def); const [mode, setMode] = useState("annual"); // annual | quarterly const [offersVer, setOffersVer] = useState(0); useEffect(() => { const h = () => setOffersVer(v => v + 1); window.addEventListener("vault:offers-updated", h); return () => window.removeEventListener("vault:offers-updated", h); }, []); const entities = useMemo(() => { if (grain === "subteam" && U.mySubteams.length) { return U.mySubteams.map((s, i) => ({ id: s.id, label: s.label, color: ENTITY_COLORS[i % 4], params: scopeParams("subteam", s.id, U) })); } return [{ id: U.moduleId || "module", label: U.moduleLabel, color: ENTITY_COLORS[0], params: scopeParams("module", null, U) }]; }, [grain, U]); const projEV = useMemo(() => entities.reduce((sum, e) => sum + ((window.VaultOffersEV && B) ? window.VaultOffersEV.forScope(B.scopePersonSet(e.params.scope), year).potential : 0), 0), [entities, offersVer, year]); const signedByEntity = useMemo(() => Object.fromEntries(entities.map(e => [e.id, (window.VaultOffersEV && B) ? window.VaultOffersEV.forScope(B.scopePersonSet(e.params.scope), year).signed.count : 0])), [entities, offersVer, year]); const weeks = window.VaultPeriod.periodWeeks(period, year); const range = _mondayRange(weeks); const prevRange = _mondayRange(window.VaultPeriod.periodWeeks(period, year - 1)); const [data, setData] = useState({}); const [projStats, setProjStats] = useState([]); const [loading, setLoading] = useState(false); const eids = entities.map(e => e.id).join(","); useEffect(() => { if (!range) return; let cancel = false; setLoading(true); const yFrom = `${year}-01-01`, yTo = `${year}-12-31`; const modParams = scopeParams("module", null, U); const per = entities.map(e => Promise.all([ window.VaultAPI.getOverviewTotals(e.params.modules, e.params.subteams, e.params.individuals, range.from, range.to, null), window.VaultAPI.getOverviewTotals(e.params.modules, e.params.subteams, e.params.individuals, prevRange.from, prevRange.to, null), window.VaultAPI.getOverviewTimeseries(e.params.modules, e.params.subteams, e.params.individuals, yFrom, yTo, null), ]).then(([tc, tp, ts]) => [e.id, { tc, tp, ts }]).catch(() => [e.id, { tc: null, tp: null, ts: [] }])); Promise.all([ Promise.all(per), window.VaultAPI.getClosedDeals(), window.VaultAPI.getProjectsList(range.from, range.to).catch(() => []), ]).then(([pairs, allDeals, projList]) => { if (cancel) return; const map = {}; pairs.forEach(([id, d]) => { map[id] = d; }); const cal = _calRange(period, year), calPrev = _calRange(period, year - 1); entities.forEach(e => { const dmSet = B ? B.scopePersonSet(e.params.scope) : null; const scoped = (allDeals || []).filter(dd => B.dealInScope(dd, dmSet)); const inYear = scoped.filter(dd => _inRange(dd.closeDate, cal.from, cal.to)); map[e.id].feesCur = inYear.reduce((s, dd) => s + (Number(dd.fee) || 0), 0); map[e.id].closedCount = inYear.length; map[e.id].feesPrev = scoped.filter(dd => _inRange(dd.closeDate, calPrev.from, calPrev.to)).reduce((s, dd) => s + (Number(dd.fee) || 0), 0); }); setData(map); // ---- Top Projects: real per-project metric totals (Phase 7B-2) ---- // Pre-rank candidates cheaply by activityRows, fetch per-project activity // for the top 15, and sum every metric. Cached in projStats for this range, // so flipping the metric toggle re-ranks client-side and never refetches. // // This card is ALWAYS a single module-level card (it does not split by // sub-team the way the fee KPIs do), so scope = director ∈ module set. // The director (dm1) is the module owner (bscott for Scott), so this is // the authoritative owner test. It also drops cross-module bleed where one // of our people sits in another module's dm2/dm3 slot (e.g. ayacoel/nlittle // on a zdutra/bkaneko project). We deliberately do NOT match on dm2/dm3 // here — that broad match is right for sub-team FEE credit, but wrong for a // module-level project list. const modDm = B ? B.scopePersonSet(modParams.scope) : null; const inScope = (projList || []).filter(p => !modDm || modDm.has(p.directorId)); const candidates = inScope.slice().sort((a, b) => b.activityRows - a.activityRows).slice(0, 15); const ZERO = { leads: 0, confCalls: 0, visits: 0, offers: 0, ntps: 0, mailings: 0, calls: 0, dealFees: 0 }; Promise.all(candidates.map(p => window.VaultAPI.getProjectActivity(p.projectId, range.from, range.to) .then(rows => { const t = { ...ZERO }; (rows || []).forEach(r => { Object.keys(ZERO).forEach(k => { t[k] += Number(r[k]) || 0; }); }); return { projectId: p.projectId, name: p.projectName || "", ...t }; }) .catch(() => ({ projectId: p.projectId, name: p.projectName || "", ...ZERO })) )).then(stats => { if (!cancel) setProjStats(stats); }); setLoading(false); }).catch(() => { if (!cancel) setLoading(false); }); return () => { cancel = true; }; }, [eids, range && range.from, range && range.to, year]); const periodLabel = ((window.VAULT_FIRM.PERIODS.find(p => p.id === period)) || {}).label || period; const onAccent = (cells) => cells; // identity helper for readability const cellsFor = (valOf, prevOf) => entities.map(e => ({ label: e.label, color: e.color, value: valOf(data[e.id]), cur: valOf(data[e.id]), prev: prevOf ? prevOf(data[e.id]) : null, })); const ds = DATASETS[dataset]; return (
{/* Scope: Module (aggregate) | Sub-team (comparative) + period */}
{[["module", U.moduleLabel], ["subteam", "Sub-team"]].map(([g, lbl]) => ( ))}
{/* Row 1 — four KPI boxes (current snapshots; no % deltas here) */}
Current Deal Fees d && d.feesCur || 0)} fmt={_money} onAccent/>
Deal Fee ProjectionEST
{_money(projEV)}
open pipeline · full value if all close
Closed Deals
d && d.closedCount != null ? d.closedCount : 0)} fmt={_num}/>
Signed LOIs
({ label: e.label, color: e.color, value: signedByEntity[e.id] || 0 }))} fmt={_num}/>
{/* Row 2 — BHAG progress (per entity) */} {/* Row 3 — combined Lead Progression / Outreach + separate Top Projects */}
{[["annual", "Annual"], ["quarterly", "Quarterly"]].map(([m, l]) => ( ))}
{ds.metrics.map(([k, lbl]) => (
setMetric(k)}>
{lbl}
d && d.tc ? (d.tc[k] || 0) : 0, d => d && d.tp ? (d.tp[k] || 0) : 0)} fmt={_num} compact/>
))}
Reflects activities logged in the CRM. A stage a deal reached but that wasn't recorded as an activity won't appear here — so these counts can trail the live pipeline.
m[0] === metric)[1]} datasetLabel={ds.label}/>
); } // ---- delta chip (stock-ticker style) ------------------------------------ function Delta({ cur, prev, onAccent, small }) { if (prev == null) return null; if (prev === 0) return null; const pct = ((cur - prev) / prev) * 100, up = pct >= 0; const col = onAccent ? (up ? "#CFE8D6" : "#F4C6C6") : (up ? "var(--ok)" : "var(--risk)"); return {up ? "↗" : "↘"} {Math.abs(pct).toFixed(1)}%; } // ---- split value cells (1 = big; N = comparative columns) ---------------- function SplitCells({ cells, fmt, onAccent, compact }) { const n = cells.length; const tcol = onAccent ? "rgba(255,255,255,.96)" : "var(--ink)"; if (n === 1) { const c = cells[0]; return (
{fmt(c.value)}
); } const vSize = compact ? (n <= 2 ? 16 : n === 3 ? 14 : 12) : (n <= 2 ? 18 : n === 3 ? 15 : 12.5); return (
3 ? 6 : 9, alignItems: "flex-start", marginTop: 6 }}> {cells.map((c, i) => (
3 ? 6 : 9) : 0, borderLeft: i ? "1px solid " + (onAccent ? "rgba(255,255,255,.25)" : "var(--line)") : "none" }}>
{c.label}
{fmt(c.value)}
))}
); } // ---- BHAG section (per entity) ------------------------------------------ function BhagSection({ entities, data, period, year, periodLabel }) { const B = window.VAULT_BHAG; const rows = entities.map(e => { const key = B ? B.resolveKey(e.params.scope) : null; const target = (B && key && Number(year) === B.YEAR) ? B.annualTarget(key, "conservative", "fees") : null; return { label: e.label, color: e.color, target, fees: (data[e.id] && data[e.id].feesCur) || 0, scope: e.params.scope }; }).filter(r => r.target != null); return (
Progress to annual goal · {periodLabel} ▨ Open pipeline (potential)
{!rows.length &&
No goal set for this scope. BHAG targets exist only for the Scott module and its Scheftz / Burton sub-teams.
} {rows.map((r, i) => { const closedPct = Math.min(1, r.target > 0 ? r.fees / r.target : 0); const ev = (window.VAULT_BHAG && window.VaultOffersEV) ? window.VaultOffersEV.forScope(window.VAULT_BHAG.scopePersonSet(r.scope), year).potential : 0; const evPct = Math.min(Math.max(0, 1 - closedPct), r.target > 0 ? ev / r.target : 0); const pctTxt = r.target > 0 ? Math.round((r.fees / r.target) * 100) : 0; return (
{rows.length > 1 &&
{r.label} {_money(r.fees)} / {_money(r.target)}
}
{pctTxt}%{rows.length === 1 ? ` to ${_money(r.target)}` : ""}
); })}
); } // ---- chart (grouped bars, 1..4 entities) -------------------------------- function Chart({ entities, data, metric, mode, period }) { const activeQuarter = (window.VAULT_FIRM.PERIODS.find(p => p.id === period) || {}).quarter || (Math.floor(new Date().getMonth() / 3) + 1); const { labels, datasets } = useMemo(() => { const labels = []; const datasets = entities.map((e, i) => { const rows = (data[e.id] && data[e.id].ts) || []; let pts; if (mode === "annual") { const b = Array(12).fill(0); rows.forEach(r => { const mo = parseInt(_d10(r.week).slice(5, 7), 10) - 1; if (mo >= 0 && mo < 12) b[mo] += (Number(r[metric]) || 0); }); pts = b; if (i === 0) MONTHS.forEach(m => labels.push(m)); } else { const lo = (activeQuarter - 1) * 3, hi = lo + 2; const wk = rows.filter(r => { const mo = parseInt(_d10(r.week).slice(5, 7), 10) - 1; return mo >= lo && mo <= hi; }) .sort((a, b) => _d10(a.week) < _d10(b.week) ? -1 : 1); pts = wk.map(r => Number(r[metric]) || 0); if (i === 0) wk.forEach(r => labels.push(_d10(r.week).slice(5))); } return { label: e.label, color: e.color, data: pts }; }); return { labels, datasets }; }, [entities, data, metric, mode, activeQuarter]); if (!labels.length) return
No data for this selection.
; const w = 1100, h = 248, pad = { l: 46, r: 10, t: 12, b: 26 }; const innerW = w - pad.l - pad.r, innerH = h - pad.t - pad.b; const rawMax = Math.max(1, ...datasets.flatMap(d => d.data)); const maxV = rawMax <= 6 ? Math.max(1, Math.ceil(rawMax)) : rawMax; const groupW = innerW / labels.length; const barW = Math.min(groupW * 0.74 / datasets.length, 26); const fy = (v) => v >= 1000000 ? (v / 1000000).toFixed(1) + "M" : v >= 1000 ? Math.round(v / 1000) + "K" : Math.round(v); const ext = datasets.map(d => { let mn = Infinity, mx = -Infinity, minI = -1, maxI = -1; d.data.forEach((v, i) => { if (v > 0) { if (v < mn) { mn = v; minI = i; } if (v > mx) { mx = v; maxI = i; } } }); if (minI === maxI) minI = -1; return { minI, maxI }; }); const barFill = (di, gi, base) => gi === ext[di].maxI ? "var(--ok)" : gi === ext[di].minI ? "var(--risk)" : base; const barCenter = (di, gi) => pad.l + gi * groupW + groupW / 2 - (datasets.length * barW) / 2 + di * barW + barW / 2; const animKey = `${metric}|${mode}|${entities.map(e => e.id).join(",")}|${datasets.map(d => Math.round(d.data.reduce((a, b) => a + b, 0))).join("_")}`; const single = datasets.length === 1; const primaryTotal = single ? datasets[0].data.reduce((a, b) => a + b, 0) : 0; const coverage = mode === "annual" ? `${period === "ytd" ? "YTD" : "full year"} · by month` : `Q${activeQuarter} · by week`; const ticks = maxV <= 6 ? Array.from({ length: maxV + 1 }, (_, k) => k) : [0, maxV / 2, maxV]; return (
{datasets.length > 1 && datasets.map((d, i) => {d.label})}
{coverage}{single ? ` · ${primaryTotal} total` : ""}
{ticks.map((tv, i) => { const t = tv / maxV; return ( {fy(tv)} ); })} {labels.map((lab, gi) => { const gx = pad.l + gi * groupW; return {datasets.map((d, di) => { const v = d.data[gi] || 0, bh = (v / maxV) * innerH; const x = gx + groupW / 2 - (datasets.length * barW) / 2 + di * barW; return ; })} {lab} ; })} {datasets.map((d, di) => { const pts = d.data.map((v, gi) => ({ gi, v })).filter(p => p.v > 0).map(p => `${barCenter(di, p.gi).toFixed(1)},${(pad.t + innerH - (p.v / maxV) * innerH).toFixed(1)}`).join(" "); return pts ? : null; })}
); } // ---- Top Projects (separate card, Transactions-style) — live per-project totals function TopProjects({ projects, metric, metricLabel, datasetLabel }) { const rows = (projects || []) .map(p => ({ name: p.name || "Unnamed project", v: Number(p[metric]) || 0 })) .filter(r => r.v > 0) .sort((a, b) => b.v - a.v) .slice(0, 5); return (

Top Projects

by {metricLabel}
{rows.length === 0 ? (
No project activity in this period.
) : rows.map((r, i) => (
{i + 1}
{r.name}
{datasetLabel}
{r.v.toLocaleString()}
))}
); } window.DealOverviewScreen = DealOverviewScreen; window.VaultDealScope = { resolveUserScope, scopeParams };