// Deal Pipeline screen — real targets from 8 module PDFs.
// Every column header supports both sort + filter (like Status) via a unified popover.
function PipelineScreen({ scope }) {
const F = window.VAULT_FIRM;
const { useState, useEffect, useMemo, useRef } = React;
const [rows, setRows] = useState(() => F.PIPELINE.map(r => ({ ...r })));
const [sortKey, setSortKey] = useState("status");
const [sortDir, setSortDir] = useState("desc");
// Per-column filter values (Set of allowed values, empty = all). Keys: status, module, dm, buyer
const [filters, setFilters] = useState({});
const [openFilter, setOpenFilter] = useState(null); // column key currently showing dropdown
const [search, setSearch] = useState("");
const [pageSize, setPageSize] = useState(150);
// Apply scope (module / subteam / individuals) on top of column filters
// Subteam scope matches the row's own `module` field (the deal's module attribution)
// by mapping subteam id → display label, so e.g. scope.subteam="st-bscott" pulls every
// row tagged module: "Scott" regardless of who owns it.
const subteamLabel = useMemo(() => {
if (!scope.subteam) return null;
const st = F.SUBTEAMS.find(s => s.id === scope.subteam);
return st ? st.label : null;
}, [scope.subteam]);
const visible = useMemo(() => {
let out = rows;
if (scope.module) {
const subLabels = new Set(F.SUBTEAMS.filter(s => s.moduleId === scope.module).map(s => s.label));
out = out.filter(r => subLabels.has(r.module));
}
if (scope.subteam && subteamLabel) {
out = out.filter(r => r.module === subteamLabel);
}
if (scope.individuals.length) {
out = out.filter(r => scope.individuals.includes(r.owner) || scope.individuals.includes(r.dm1) || scope.individuals.includes(r.dm2));
}
// Column filters
for (const [k, set] of Object.entries(filters)) {
if (!set || !set.size) continue;
out = out.filter(r => {
const v = colValue(r, k);
if (Array.isArray(v)) return v.some(x => set.has(x));
return set.has(v);
});
}
if (search.trim()) {
const s = search.trim().toLowerCase();
out = out.filter(r =>
(r.target || "").toLowerCase().includes(s) ||
(r.buyer || "").toLowerCase().includes(s) ||
(r.nextAction || "").toLowerCase().includes(s) ||
(r.dm1Name || "").toLowerCase().includes(s) ||
(r.dm2Name || "").toLowerCase().includes(s)
);
}
out = [...out].sort((a, b) => {
let av = a[sortKey], bv = b[sortKey];
if (sortKey === "dm") { av = a.dm1Name || ""; bv = b.dm1Name || ""; }
if (av == null) return 1;
if (bv == null) return -1;
if (typeof av === "number") return sortDir === "asc" ? av - bv : bv - av;
return sortDir === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
});
return out;
}, [rows, sortKey, sortDir, scope, filters, search]);
const update = (id, patch) => setRows(rs => rs.map(r => r.id === id ? { ...r, ...patch } : r));
const removeRow = (id) => setRows(rs => rs.filter(r => r.id !== id));
const addRow = () => {
const n = rows.length + 1;
setRows(rs => [...rs, {
id: `T-NEW-${n}`, target: "", buyer: "—", ebitda: null, sales: null,
status: 5.00, nextAction: "", dm1: null, dm2: null, dm1Name: null, dm2Name: null,
owner: F.PEOPLE[0]?.id, module: "Scott", subteam: F.SUBTEAMS[0]?.id, synth: false,
}]);
};
// Build option lists for each filterable column from full row set
function colValue(r, k) {
if (k === "status") return Number(r.status).toFixed(2);
if (k === "module") return r.module || "—";
if (k === "dm") return [r.dm1Name, r.dm2Name].filter(Boolean);
if (k === "buyer") return r.buyer || "—";
return r[k];
}
const optionsFor = useMemo(() => {
const cache = {};
function build(k) {
if (cache[k]) return cache[k];
const counts = new Map();
for (const r of rows) {
const v = colValue(r, k);
if (Array.isArray(v)) v.forEach(x => counts.set(x, (counts.get(x) || 0) + 1));
else if (v) counts.set(v, (counts.get(v) || 0) + 1);
}
const entries = Array.from(counts.entries());
if (k === "status") {
// Numeric status code — sort ascending (4.50, 5.00, … 9.00)
entries.sort((a, b) => parseFloat(a[0]) - parseFloat(b[0]));
} else {
// Text columns — alphabetical
entries.sort((a, b) => String(a[0]).localeCompare(String(b[0])));
}
cache[k] = entries;
return cache[k];
}
return { status: build("status"), module: build("module"), dm: build("dm"), buyer: build("buyer") };
}, [rows]);
// Status-based stat tiles (computed against visible/filtered)
const inRange = (r, lo, hi) => Number(r.status) >= lo && Number(r.status) <= hi;
const eq = (r, v) => Math.abs(Number(r.status) - v) < 0.01;
const dataWaitRe = /\b(data|diligence|dilligence|qof|q of e|info|materials|financials|cim)\b/i;
const stats = [
{ label: "Signed LOIs", value: visible.filter(r => eq(r, 9.0)).length, accent: true, status: "9.00" },
{ label: "Current Offers", value: visible.filter(r => inRange(r, 8.0, 9.0)).length },
{ label: "Pending Offer", value: visible.filter(r => inRange(r, 7.0, 7.5)).length },
{ label: "Visit", value: visible.filter(r => eq(r, 6.0)).length, status: "6.00" },
{ label: "Conference Call", value: visible.filter(r => eq(r, 5.5)).length, status: "5.50" },
{ label: "Waiting on Data", value: visible.filter(r => inRange(r, 4.7, 6.0) && dataWaitRe.test(r.nextAction || "")).length },
{ label: "Leads", value: visible.filter(r => eq(r, 5.0)).length, status: "5.00" },
{ label: "Push Needed", value: visible.filter(r => inRange(r, 4.6, 4.7)).length },
];
// Active filter chips at top
const activeChips = [];
for (const [k, set] of Object.entries(filters)) {
if (!set || !set.size) continue;
set.forEach(v => activeChips.push({ k, v }));
}
function clearChip(k, v) {
setFilters(prev => {
const next = { ...prev };
if (next[k]) {
const s = new Set(next[k]); s.delete(v);
next[k] = s.size ? s : null;
}
return next;
});
}
// Dropdown ref tracking — close on outside click
const ddRef = useRef(null);
useEffect(() => {
function onDoc(e) { if (ddRef.current && !ddRef.current.contains(e.target)) setOpenFilter(null); }
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
// Reset page size when filters change
useEffect(() => { setPageSize(150); }, [filters, search, scope]);
const Th = ({ k, label, w, filterable, align }) => {
const sorted = sortKey === k;
const filtered = filters[k] && filters[k].size > 0;
return (
|
{filterable && (
)}
{openFilter === k && (
setFilters(prev => ({ ...prev, [k]: set.size ? set : null }))}
onClose={() => setOpenFilter(null)}
label={label}
colKey={k}
/>
)}
|
);
};
return (
{/* Stats strip — clickable to toggle status filter */}
{stats.map(s => (
{
setFilters(prev => {
const cur = new Set(prev.status || []);
if (cur.has(s.status)) cur.delete(s.status); else cur.add(s.status);
return { ...prev, status: cur.size ? cur : null };
});
} : null}/>
))}
{/* Search + active filter chips */}
setSearch(e.target.value)}
placeholder="Search target, buyer, DM, action…"
style={{
width: 280, padding: "7px 10px 7px 30px", fontSize: 12.5,
border: "1px solid var(--line-2)", borderRadius: 6,
background: "var(--surface)", color: "var(--ink)", outline: "none",
}}/>
{activeChips.map(({ k, v }, i) => (
))}
{(activeChips.length > 0 || search) && (
)}
{visible.length.toLocaleString()} {visible.length === 1 ? "deal" : "deals"}
{visible.length > pageSize && ` · showing ${pageSize.toLocaleString()}`}
|
| |
|
| |
|
|
|
|
{visible.slice(0, pageSize).map(r => update(r.id, p)} onRemove={() => removeRow(r.id)}/>)}
{visible.length === 0 && | No targets match this scope. |
}
{visible.length > pageSize && (
{pageSize.toLocaleString()} of {visible.length.toLocaleString()}
)}
Filter by {label}
{selected.size > 0 && }
setQ(e.target.value)} placeholder="Search…"
style={{
width: "100%", padding: "5px 8px", fontSize: 11.5,
border: "1px solid var(--line-2)", borderRadius: 5,
background: "var(--surface-2)", color: "var(--ink)", outline: "none", marginBottom: 6,
}}/>
{filtered.length === 0 &&
No matches
}
{filtered.slice(0, 200).map(([v, n]) => (
))}
);
});
function StatTile({ label, value, accent, compact, active, onClick }) {
const interactive = !!onClick;
return (
);
}
function PipelineRow({ row, onChange, onRemove }) {
const F = window.VAULT_FIRM;
const status = F.STATUS_BY_CODE[Number(row.status).toFixed(2)] || F.STATUS[0];
const dm1 = F.PEOPLE_BY_ID[row.dm1];
const dm2 = F.PEOPLE_BY_ID[row.dm2];
return (
|
onChange({ target: v })} placeholder="Target name…" bold/>
|
onChange({ buyer: v })} placeholder="—"/>
|
{ const n = parseFloat(String(v).replace(/[^\d.]/g,"")); onChange({ ebitda: isNaN(n) ? null : n }); }}
placeholder="—"/>
|
{ const n = parseFloat(String(v).replace(/[^\d.]/g,"")); onChange({ sales: isNaN(n) ? null : n }); }}
placeholder="—"/>
|
onChange({ status: parseFloat(v) })}
options={F.STATUS.map(s => ({ value: s.code.toFixed(2), label: `${s.code.toFixed(2)} · ${s.label}` }))}
render={() => (
{Number(row.status).toFixed(2)}
{status.label}
)}/>
|
onChange({ nextAction: v })} placeholder="—"/>
|
{dm1 && }
{dm2 && }
{!dm1 && !dm2 && (row.dm1Name || row.dm2Name) && (
?
)}
{row.dm1Name && {row.dm1Name}}
{row.dm2Name && {row.dm2Name}}
{!row.dm1Name && !row.dm2Name && —}
|
{row.module || "—"}
|
|
);
}
function EditableText({ value, onChange, placeholder, bold }) {
const [editing, setEditing] = React.useState(false);
const [v, setV] = React.useState(value);
React.useEffect(() => setV(value), [value]);
if (editing) {
return (
setV(e.target.value)}
onBlur={() => { setEditing(false); onChange(v); }}
onKeyDown={(e) => { if (e.key === "Enter") { setEditing(false); onChange(v); } if (e.key === "Escape") { setEditing(false); setV(value); } }}
style={{
width: "100%", padding: "5px 7px", fontSize: 12.5,
border: "1px solid var(--accent)", borderRadius: 5,
background: "var(--surface)", color: "var(--ink)", outline: "none",
boxShadow: "0 0 0 3px var(--accent-soft)",
}}/>
);
}
return (
setEditing(true)} style={{ cursor: "text", display: "inline-block", padding: "2px 4px", borderRadius: 4, minWidth: 60, fontWeight: bold ? 600 : undefined }}>
{value || {placeholder}}
);
}
function EditableSelect({ value, onChange, options, render }) {
const [editing, setEditing] = React.useState(false);
if (editing) {
return (
);
}
return (
setEditing(true)} style={{ cursor: "pointer", display: "inline-block" }}>
{render(value)}
);
}
window.PipelineScreen = PipelineScreen;