// LeadsDashboard.jsx — the Producer Co-pilot list screen.
// Header renamed to "Producer Co-pilot". Three insight cards reframed around the
// broadened tool, a segmented control that swaps the WHOLE table per lead type,
// and per-type columns. Clicking any row calls onSelectLead(lead).
const { useState: useDashState, useEffect: useDashEffect } = React;
// ----------------------------------------------------------------- avatar
const LeadAvatar = ({ lead, size = 26, radius }) => {
const r = radius != null ? radius : Math.round(size * 0.28);
if (lead.img)
return 
;
return (
{CP_initials(lead.name)}
);
};
// ----------------------------------------------------------------- score pill
const ScorePill = ({ score }) => {
const p = CP_scoreTier(score);
return (
{score}
{p.label}
);
};
// ----------------------------------------------------------------- phase chip
const PhaseChip = ({ phase }) => {
const m = CP_PHASE_META[phase];
if (!m) return null;
return (
{m.label}
);
};
// ----------------------------------------------------------------- header
const CoPilotHeader = ({ active = "Leads" }) => (
Producer Co-pilot
{["Leads", "Campaigns", "Reports"].map((item) => (
{item}
))}
{window.ProfileMenu ? (
) : (
MP
)}
);
// ----------------------------------------------------------------- stat cards
const StatLeadsCard = () => {
const bars = [
{ m: "Dec", v: 0.46 }, { m: "Jan", v: 0.52 }, { m: "Feb", v: 0.6 },
{ m: "Mar", v: 0.7 }, { m: "Apr", v: 0.82 }, { m: "May", v: 0.96 },
];
return (
132
Active leads
+38 in the last 30 days
);
};
// donut showing the three-type lead mix
const MixDonut = () => {
const segs = [
{ frac: 0.35, color: "var(--helm-dark-purple)" }, // post-claim bene
{ frac: 0.29, color: "#70B6BA" }, // pre-claim bene
{ frac: 0.36, color: "var(--helm-chartreuse-2)" }, // policyholder gap
];
const r = 64, c = 2 * Math.PI * r;
let offset = 0;
return (
);
};
const StatMixCard = () => {
const legend = [
{ c: "var(--helm-dark-purple)", label: "Post-claim beneficiaries", n: 46 },
{ c: "#70B6BA", label: "Pre-claim beneficiaries", n: 38 },
{ c: "var(--helm-chartreuse-2)", label: "Policy owner gaps", n: 48 },
];
return (
Lead mix
Three pipelines, one inbox
{legend.map((l) => (
{l.label}
{l.n}
))}
);
};
const TopScoreRow = ({ lead, onClick }) => {
const [hover, setHover] = useDashState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", margin: "0 -8px", padding: "0 8px", borderRadius: 10, background: hover ? "rgba(0,29,0,0.06)" : "transparent", transition: "background 120ms ease" }}>
{lead.name}
{CP_TYPE_META[lead.type].label}
{lead.score}
Top conversion scores
Last 3 days
{top.map((l) => onSelectLead && onSelectLead(l)} />)}
);
};
// ----------------------------------------------------------------- segmented tabs
const TYPE_ORDER = ["policyholder_gap", "bene_pre", "bene_post"];
const TypeTabs = ({ active, onChange }) => (
{TYPE_ORDER.map((t) => {
const on = active === t;
const count = CP_leadsByType(t).length;
return (
);
})}
);
// ----------------------------------------------------------------- column configs
const M = CP_money;
const CampaignCell = ({ lead }) => lead.campaign
?
: —;
const COLUMNS = {
bene_post: {
grid: "40px 224fr 183fr 157fr 176fr 158fr 174fr 203fr",
cols: [
{ label: "Beneficiary name", get: (l) => },
{ label: "Policy owner", get: (l) => l.owner },
{ label: "Payout amount", get: (l) => M(l.received) },
{ label: "Payout date", get: (l) => l.payout },
{ label: "Identified need", get: (l) => l.engaged === false
? N/A
: M(l.recCoverage) },
{ label: "Campaign", get: (l) => },
{ label: "Conversion score", get: (l) => },
],
},
policyholder_gap: {
grid: "40px 230fr 150fr 149fr 149fr 162fr 237fr 194fr",
cols: [
{ label: "Policy owner name", get: (l) => },
{ label: "Policy #", get: (l) => l.policy },
{ label: "Coverage", get: (l) => M(l.currentCoverage) },
{ label: "Coverage gap", get: (l) => M(l.recCoverage - l.currentCoverage) },
{ label: "Campaign", get: (l) => },
{ label: "Lead phase", get: (l) => },
{ label: "Conversion score", get: (l) => },
],
},
bene_pre: {
grid: "40px 228fr 190fr 136fr 143fr 157fr 231fr 188fr",
cols: [
{ label: "Beneficiary name", get: (l) => },
{ label: "Policy owner", get: (l) => l.owner },
{ label: "Relationship", get: (l) => l.relation },
{ label: "Identified need", get: (l) => M(l.recCoverage) },
{ label: "Campaign", get: (l) => },
{ label: "Lead phase", get: (l) => },
{ label: "Conversion score", get: (l) => },
],
},
};
const CampaignChip = ({ c }) => (
Day {c.dayN}/{c.dayTotal}
);
const NameCell = ({ lead }) => (
{lead.name}
);
// ----------------------------------------------------------------- icons
const DropArrow = () => ;
const Checkbox = ({ checked, indeterminate }) => {
const on = checked || indeterminate;
return (
{checked && }
{!checked && indeterminate && }
);
};
// ----------------------------------------------------------------- table
const BulkBtn = ({ onClick, variant, icon, children }) => {
const styles = {
primary: { background: "var(--helm-chartreuse-2)", color: "var(--helm-white)", border: "none" },
soft: { background: "rgba(254,252,245,0.14)", color: "var(--helm-white)", border: "none" },
ghost: { background: "transparent", color: "var(--helm-white)", border: "1px solid rgba(254,252,245,0.32)" },
}[variant];
return (
);
};
const LeadsTable = ({ type, onSelectLead, onToast }) => {
const config = COLUMNS[type];
const [sel, setSel] = useDashState({});
const [archived, setArchived] = useDashState({});
const [hover, setHover] = useDashState(null);
useDashEffect(() => { setSel({}); }, [type]);
const rows = CP_leadsByType(type).filter((r) => !archived[r.id]);
const toggle = (id) => setSel((s) => ({ ...s, [id]: !s[id] }));
const selIds = rows.filter((r) => sel[r.id]).map((r) => r.id);
const selCount = selIds.length;
const allSelected = rows.length > 0 && selCount === rows.length;
const someSelected = selCount > 0 && !allSelected;
const toggleAll = () => {
if (allSelected || someSelected) { setSel({}); return; }
const m = {}; rows.forEach((r) => (m[r.id] = true)); setSel(m);
};
const plural = selCount > 1 ? "s" : "";
const doEmail = () => onToast(`Drafting emails to ${selCount} lead${plural}…`);
const doCampaign = () => onToast(`Generating a new campaign for ${selCount} lead${plural}…`);
const doArchive = () => {
setArchived((a) => { const n = { ...a }; selIds.forEach((id) => (n[id] = true)); return n; });
onToast(`Archived ${selCount} lead${plural}`);
setSel({});
};
const rightCols = new Set(config.cols.map((c, i) => (c.align === "right" ? i + 1 : -1)));
return (
0 ? 96 : 24 }}>
{/* header row */}
{config.cols.map((c, i) => (
{c.label}
))}
{/* data rows */}
{rows.map((r) => (
onSelectLead && onSelectLead(r)} onMouseEnter={() => setHover(r.id)} onMouseLeave={() => setHover(null)} style={{ display: "grid", gridTemplateColumns: config.grid, columnGap: 9, alignItems: "center", padding: "13px 32px", borderBottom: "1px solid var(--helm-dark-ecru)", cursor: "pointer", background: sel[r.id] ? "rgba(193,201,131,0.16)" : hover === r.id ? "var(--helm-ecru)" : "transparent", transition: "background 120ms ease" }}>
{ e.stopPropagation(); toggle(r.id); }} style={{ display: "flex", alignItems: "center" }}>
{config.cols.map((c, i) => (
{c.get(r)}
))}
))}
{/* bulk action bar */}
{selCount > 0 && (
{selCount} selected
}>Email leads
}>Generate campaign
}>Archive
)}
Leads
Search by anything
);
// ----------------------------------------------------------------- page
const NEW_COUNTS = { bene_post: 7, policyholder_gap: 9, bene_pre: 5 };
const LeadsDashboard = ({ onSelectLead }) => {
const [type, setType] = useDashState("policyholder_gap");
const [toast, setToast] = useDashState(null);
useDashEffect(() => {
if (!toast) return;
const t = setTimeout(() => setToast(null), 2800);
return () => clearTimeout(t);
}, [toast]);
const showToast = (msg) => setToast({ msg, id: Date.now() });
return (
{toast && (
{toast.msg}
)}
);
};
Object.assign(window, { LeadsDashboard, CoPilotHeader, ScorePill, PhaseChip, LeadAvatar });