{ e.preventDefault(); setIsDragOver(true); }}
onDragLeave={() => setIsDragOver(false)}
onDrop={e => {
e.preventDefault();
setIsDragOver(false);
const fromIdx = parseInt(e.dataTransfer.getData("text/plain"), 10);
if (!isNaN(fromIdx) && fromIdx !== planIdx) onPlanReorder(fromIdx, planIdx);
}}
style={{
display: "flex",
flexDirection: "column",
borderTop: `4px solid ${colors.accent}`,
minWidth: 0,
overflow: "visible",
outline: isDragOver ? `2px dashed ${colors.accent}` : "none",
outlineOffset: isDragOver ? 4 : 0,
transition: "outline 120ms",
}}>
{ e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(planIdx)); }}
style={{ padding: "12px 14px", borderBottom: `1px solid ${colors.line}`, background: colors.soft, cursor: "grab", userSelect: "none" }}
title="Drag to reorder Plans">
{plan.label || "Untitled Plan"}
setEditingOwners(!editingOwners)} className="btn ghost small" title="Edit owners"
style={{ padding: "2px 6px", fontSize: 11 }}>
{editingOwners ? "Done" : "Edit"}
onPlanClear(plan.id)} className="btn ghost small" title="Clear all rows for this week"
style={{ padding: "2px 6px", fontSize: 11, color: "var(--muted)" }}>Clear
onPlanDelete(plan.id)} className="btn ghost small" title="Delete plan (all weeks)"
style={{ color: "var(--risk)", padding: "2px 6px", fontSize: 11 }}>×
{editingOwners ? (
onPlanPatch(plan.id, { ownerIds: ids })}
/>
) : (
{plan.ownerIds && plan.ownerIds.length > 0
? plan.ownerIds.map(id => modulePeople.find(p => p.id === id)?.name || id).join(", ")
: No owners assigned — click Edit }
)}
{SECTIONS.map(section => (
g.section === section.key).sort((a, b) => (a.rank || 0) - (b.rank || 0))}
modulePeople={modulePeople}
projects={projects}
colors={colors}
onAdd={() => onGoalAdd(plan.id, section.key)}
onPatch={onGoalPatch}
onDelete={onGoalDelete}
/>
))}
{/* Goal vs Actual — separated from sections with breathing room */}
{ownerIds.length > 0 && (
Goal vs Actual (this Plan)
)}
{/* Spacer so the parent
below closes correctly */}
);
}
// ---------- Mini stat row inside a Plan ----------
function MiniStatRow({ label, goal, actual, color, vaultOnly }) {
const pct = goal > 0 ? Math.min(100, Math.round((actual / goal) * 100)) : 0;
return (
{label}
{actual}
{goal == null
? · goal on Goals page
: / {goal} }
{vaultOnly && (Vault) }
);
}
// ---------- Module-wide stat helper ----------
function ModuleStat({ label, addon, platform, vaultOnly }) {
const total = (addon || 0) + (platform || 0);
return (
{label}
{total}
{!vaultOnly && (
{addon}A · {platform}P
)}
);
}
// Persisted collapse state for goal sections — survives page navigation and reload,
// and broadcasts so the side-by-side plan columns stay in sync.
const RESEARCH_COLLAPSE_KEY = "vault.research.collapsed";
function loadCollapseMap() {
try { return JSON.parse(localStorage.getItem(RESEARCH_COLLAPSE_KEY) || "{}") || {}; }
catch (e) { return {}; }
}
function setSectionCollapsed(key, val) {
const m = loadCollapseMap(); m[key] = val;
try { localStorage.setItem(RESEARCH_COLLAPSE_KEY, JSON.stringify(m)); } catch (e) {}
window.dispatchEvent(new CustomEvent("vault:research-collapse"));
}
// ---------- Section inside a Plan ----------
function PlanSection({ section, rows, modulePeople, projects, colors, onAdd, onPatch, onDelete }) {
const showCount = section.key === "research";
const showType = (section.key === "mailings" || section.key === "approval");
const showAction = section.key === "marketing_deck";
const [collapsed, setCollapsed] = React.useState(() => !!loadCollapseMap()[section.key]);
React.useEffect(() => {
const h = () => setCollapsed(!!loadCollapseMap()[section.key]);
window.addEventListener("vault:research-collapse", h);
return () => window.removeEventListener("vault:research-collapse", h);
}, [section.key]);
return (
setSectionCollapsed(section.key, !collapsed)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", flex: 1, minWidth: 0 }}>
▾
{section.label}{collapsed && rows.length > 0 ? ` (${rows.length})` : ""}
{section.description}
+ Add
{!collapsed && (rows.length === 0 ? (
No rows yet. Click + Add.
) : (
{rows.map((r, idx) => (
))}
);
}
const selectStyleSmall = {
padding: "3px 6px",
border: "1px solid var(--line-2)",
borderRadius: 4,
fontFamily: "inherit",
fontSize: 11,
background: "var(--surface)",
color: "var(--ink)",
minWidth: 0,
};
// Secondary-tier control style — the calm strip of settings under each project name.
const stripCtl = {
padding: "4px 8px",
border: "1px solid var(--line-2)",
borderRadius: 6,
fontFamily: "inherit",
fontSize: 12,
background: "var(--surface)",
color: "var(--ink)",
minWidth: 0,
height: 28,
};
function initialsOf(name) {
if (!name) return "?";
const p = String(name).trim().split(/\s+/);
return ((p[0] ? p[0][0] : "") + (p[1] ? p[1][0] : "")).toUpperCase() || "?";
}
function OwnerAvatar({ person }) {
if (!person) return (
+
);
return (
{initialsOf(person.name)}
);
}
function fmtShortDate(d) {
if (!d) return "\u2014";
const dt = new Date(String(d).slice(0, 10) + "T00:00:00");
if (isNaN(dt)) return "\u2014";
return dt.toLocaleDateString("en-US", { month: "short", day: "numeric" });
}
// A quiet, aligned cell that becomes an editable control on click (Linear/Airtable pattern).
function EditCell({ width, title, children, editor }) {
const [editing, setEditing] = React.useState(false);
if (editing) {
return
{editor(() => setEditing(false))} ;
}
return (
setEditing(true)} title={title}
style={{ flex: `0 0 ${width}px`, display: "inline-flex", justifyContent: "flex-end", alignItems: "center", cursor: "pointer", borderRadius: 6 }}>
{children}
);
}
function CompactRow({ row, idx, section, modulePeople, projects, showCount, showType, showAction, showSentDate, showCycle, showMailingCount, onPatch, onDelete }) {
const sectionKey = section ? section.key : null;
const isMailing = sectionKey === "mailings";
const [hover, setHover] = React.useState(false);
const owner = modulePeople.find(p => p.id === row.ownerId)
|| (window.VAULT_FIRM && window.VAULT_FIRM.PEOPLE_BY_ID ? window.VAULT_FIRM.PEOPLE_BY_ID[row.ownerId] : null)
|| null;
const isPlatform = row.type === "P";
const typePill = { fontSize: 11, padding: "2px 8px", borderRadius: 10, whiteSpace: "nowrap",
color: isPlatform ? "#72243E" : "#0C447C", background: isPlatform ? "#FBEAF0" : "#E6F1FB" };
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", borderTop: idx === 0 ? "none" : "1px solid var(--line-2)" }}>
onPatch(row.id, { done: e.target.checked })}
title={isMailing ? "Sent?" : "Done?"}
style={{ cursor: "pointer", width: 15, height: 15, flexShrink: 0, accentColor: "var(--accent)" }}/>
onPatch(row.id, { projectName: name })} compact/>
(
{ onPatch(row.id, { ownerId: e.target.value || null }); done(); }}
style={{ ...stripCtl, minWidth: 130 }}>
Owner…
{modulePeople.map(p => ({p.name} ))}
)}>
{showType && (
(
{ onPatch(row.id, { type: e.target.value }); done(); }} style={{ ...stripCtl }}>
Add-on
Platform
)}>
{isPlatform ? "Platform" : "Add-on"}
)}
{showCycle && (
(
{ onPatch(row.id, { cycle: e.target.value }); done(); }} style={{ ...stripCtl }}>
{Object.entries(OUTREACH_CYCLES).map(([k, v]) => ({k} ))}
)}>
{row.cycle || DEFAULT_CYCLE}
)}
{(showCount || showMailingCount || sectionKey === "approval") && (
(
{row.targetCount != null ? ("L" + row.targetCount) : "L\u2014"}
)}
{showSentDate && (
(
{fmtShortDate(row.doneDate)}
)}
{showAction && (
(
{ onPatch(row.id, { action: e.target.value }); done(); }} style={{ ...stripCtl, width: 180 }}>
{MARKETING_DECK_ACTIONS.map(a => {a} )}
)}>
{row.action || MARKETING_DECK_ACTIONS[0]}
)}
onDelete(row.id)} className="btn ghost small"
style={{ color: "var(--risk)", padding: "2px 6px", fontSize: 13, flexShrink: 0, opacity: hover ? 1 : 0.3, transition: "opacity .12s" }}
title="Delete row">×
);
}
// ---------- Owner multi-select ----------
function OwnerMultiSelect({ value, people, onChange }) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
useEffect(() => {
if (!open) return;
const onClick = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
document.addEventListener("mousedown", onClick);
return () => document.removeEventListener("mousedown", onClick);
}, [open]);
const selected = new Set(value || []);
const toggle = (id) => {
const next = new Set(selected);
if (next.has(id)) next.delete(id);
else next.add(id);
onChange([...next]);
};
return (
setOpen(!open)} className="btn ghost small"
style={{ fontSize: 11, padding: "3px 8px" }}>
{selected.size === 0 ? "Pick owners…" : `${selected.size} selected`}
{open && (
{people.map(p => (
e.currentTarget.style.background = "var(--surface-2)"}
onMouseLeave={e => e.currentTarget.style.background = "var(--surface)"}>
{p.name}
))}
)}
);
}
// ---------- ProjectPicker (portal-based to escape clipping) ----------
function ProjectPicker({ value, projects, onChange, compact }) {
const [open, setOpen] = useState(false);
const [text, setText] = useState(value || "");
const inputRef = useRef(null);
const [pos, setPos] = useState(null);
useEffect(() => { setText(value || ""); }, [value]);
const recalcPos = useCallback(() => {
if (!inputRef.current) return;
const r = inputRef.current.getBoundingClientRect();
setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 240) });
}, []);
useEffect(() => {
if (!open) return;
recalcPos();
const onScroll = () => recalcPos();
window.addEventListener("scroll", onScroll, true);
window.addEventListener("resize", recalcPos);
return () => {
window.removeEventListener("scroll", onScroll, true);
window.removeEventListener("resize", recalcPos);
};
}, [open, recalcPos]);
useEffect(() => {
if (!open) return;
const onClick = (e) => {
if (inputRef.current && inputRef.current.contains(e.target)) return;
if (e.target.closest && e.target.closest("[data-projectpicker-dropdown]")) return;
setOpen(false);
};
document.addEventListener("mousedown", onClick);
return () => document.removeEventListener("mousedown", onClick);
}, [open]);
const filtered = useMemo(() => {
const q = (text || "").trim().toLowerCase();
if (!q) return projects.slice(0, 15);
return projects.filter(p => (p.name || "").toLowerCase().includes(q)).slice(0, 15);
}, [text, projects]);
const commit = (val) => {
setText(val);
setOpen(false);
if (val !== value) onChange(val);
};
return (
<>
setOpen(true)}
onChange={e => { setText(e.target.value); setOpen(true); }}
onKeyDown={e => {
if (e.key === "Enter") { e.preventDefault(); commit((text || "").trim()); }
if (e.key === "Escape") { setText(value || ""); setOpen(false); }
}}
style={{
width: "100%",
padding: compact ? "3px 6px" : "4px 8px",
border: "1px solid var(--line-2)",
borderRadius: 4,
fontFamily: "inherit",
fontSize: compact ? 11.5 : 12,
background: "var(--surface)",
color: "var(--ink)",
outline: "none",
}}
/>
{open && pos && ReactDOM.createPortal(
{filtered.length === 0 ? (
{text && text.trim() ? `Press Enter to use "${text.trim()}"` : "No projects in this module"}
) : filtered.map(p => (
{ e.preventDefault(); commit(p.name); }}
style={{
padding: "6px 10px",
cursor: "pointer",
borderBottom: "1px solid var(--line-2)",
background: "var(--surface)",
color: "var(--ink)",
}}
onMouseEnter={e => e.currentTarget.style.background = "var(--surface-2)"}
onMouseLeave={e => e.currentTarget.style.background = "var(--surface)"}
>
{p.name}
{(p.type || p.peg) && (
{[p.type, p.peg].filter(Boolean).join(" · ")}
)}
))}
,
document.body
)}
);
}
// ---------- Goal vs Actual ----------
function GoalVsActualCard({ label, goal, actualA, actualP, loading, analystCount, accentColor, vaultBased }) {
const actualTotal = (actualA || 0) + (actualP || 0);
const progressPct = goal > 0 ? Math.min(100, Math.round((actualTotal / goal) * 100)) : 0;
const avgPerAnalyst = analystCount > 0 ? Math.round(actualTotal / analystCount) : 0;
return (
{actualTotal}
actual
goal: {goal}
{progressPct}% of goal
{vaultBased ? Vault-tracked : {actualA || 0}A · {actualP || 0}P }
Avg/analyst: {avgPerAnalyst} across {analystCount} people
);
}
// ---------- Cadence Forecast ----------
function CadenceForecast({ forecast, onPatchMailing, weekStart }) {
const F = window.VAULT_FIRM;
const [ownerFilter, setOwnerFilter] = useState("");
// Hooks first, before any early return.
const ownerOptions = useMemo(() => {
const ids = new Set();
forecast.forEach(f => { if (f.mailing.ownerId) ids.add(f.mailing.ownerId); });
return [...ids].map(id => ({ id, name: F.PEOPLE_BY_ID[id]?.name || id }))
.sort((a, b) => a.name.localeCompare(b.name));
}, [forecast]);
// Column widths (resizable, persisted per user in localStorage), shared across both tables
const CADENCE_COL_DEFAULTS = { due: 110, code: 60, project: 240, owner: 120, type: 70, bounced: 110, fixed: 100 };
const { widths: cadenceWidths, setWidth: setCadenceWidth } =
window.useColumnWidths("cadence", CADENCE_COL_DEFAULTS);
if (forecast.length === 0) {
return (
No upcoming actions forecasted. Forecast is built from completed mailings in the past 5 weeks
(Initial Mailing M1 cycle by default). Mark mailings as Done to populate this.
);
}
// Week bounds based on the VIEWED week (weekStart is Monday of that week).
// Sunday-end = Monday + 6 days. "Weekly Process Actions" = everything that falls
// Monday..Sunday of the viewed week, regardless of whether it\'s past or future.
// "Beyond this week" = anything after the viewed Sunday.
// Anything before the viewed Monday is intentionally hidden (deep history).
const weekEnd = (() => {
const d = new Date(weekStart + "T00:00:00Z");
d.setUTCDate(d.getUTCDate() + 6);
return d.toISOString().slice(0, 10);
})();
const thisWeek = forecast.filter(f => f.dueDate >= weekStart && f.dueDate <= weekEnd);
const later = forecast.filter(f => f.dueDate > weekEnd);
const visibleThisWeek = ownerFilter
? thisWeek.filter(f => f.mailing.ownerId === ownerFilter)
: thisWeek;
const visibleLater = ownerFilter
? later.filter(f => f.mailing.ownerId === ownerFilter)
: later;
return (
<>
Note: Bounced Emails and Bounces Fixed fields appear on each cycle's first email step
(E1 for M1, eM1 for eM1, E5 for M2, eM2 for eM2, eCM1 for Custom). Bounces Fixed totals
roll up into the Module-wide "Bounced Emails Fixed" stat.
Filter:
setOwnerFilter(e.target.value)}
style={{ padding: "5px 8px", border: "1px solid var(--line-2)", borderRadius: 4, fontFamily: "inherit", fontSize: 12, background: "var(--surface)", color: "var(--ink)" }}>
All owners
{ownerOptions.map(o => {o.name} )}
{visibleThisWeek.length > 0 ? (
) : (
Weekly Process Actions
No actions in this week{ownerFilter && " for selected owner"}.
)}
{visibleLater.length > 0 ? (
) : (
Beyond this week
No actions in this window{ownerFilter && " for selected owner"}.
)}
);
}
function ForecastTable({ title, rows, onPatchMailing, widths, setWidth }) {
const F = window.VAULT_FIRM;
const [localEdits, setLocalEdits] = useState({});
const saveTimers = useRef({});
// Helper: renders a resizable
const RTh = ({ col, label, title }) => {
const w = widths ? widths[col] : null;
return (
{label}
{setWidth && }
);
};
const onBounceChange = (mailingId, field, value) => {
setLocalEdits(prev => ({ ...prev, [mailingId + ":" + field]: value }));
// Debounce save by 600ms
const key = mailingId + ":" + field;
if (saveTimers.current[key]) clearTimeout(saveTimers.current[key]);
saveTimers.current[key] = setTimeout(() => {
const numeric = value === "" ? 0 : parseInt(value) || 0;
onPatchMailing(mailingId, { [field]: numeric });
}, 600);
};
const getValue = (mailingId, field, fallback) => {
const key = mailingId + ":" + field;
return key in localEdits ? localEdits[key] : (fallback ?? "");
};
return (
{title}
{rows.length} action{rows.length === 1 ? "" : "s"}
{rows.map((f, i) => {
const ownerLabel = f.step.owner === "MC" ? "Marketing" : (f.mailing.ownerId ? (F.PEOPLE_BY_ID[f.mailing.ownerId]?.name || f.mailing.ownerId) : "Unassigned");
const dueDate = new Date(f.dueDate + "T00:00:00Z").toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" });
const isInitialEmail = f.isInitialEmail;
return (
{dueDate}
{f.step.code}
{f.mailing.projectName || — }
{ownerLabel}
{f.step.type}
{isInitialEmail ? (
— }
{isInitialEmail ? (
— }
);
})}
);
}
window.ResearchScreen = ResearchScreen;