// LeadDetail.jsx — one data-driven detail page that works for any lead.
// Reads buildDetail(lead) and swaps type-specific content: a type badge, a
// phase chip (pre-claim only), the right key-data, signals, activity, the
// coverage hero (need / gap / recommended), and the left-rail anchor field.
// The primary action stays a single shared "Generate Automated Campaign".
// ----------------------------------------------------------------- left rail
const DetailNav = ({ onBack }) => (
onBack && onBack()} style={{ display: "flex", alignItems: "center", gap: 12, cursor: onBack ? "pointer" : "default" }}>
Producer Co-pilot
{["Leads", "Campaigns", "Reports"].map((item) => (
item === "Leads" && onBack && onBack()} style={{ background: "transparent", border: "none", padding: "4px 2px", cursor: item === "Leads" && onBack ? "pointer" : "default", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, color: "var(--helm-dark-grey)" }}>{item}
))}
{window.ProfileMenu ? (
) : (
MP
)}
);
const TypeBadge = ({ type }) => {
const m = CP_TYPE_META[type];
return (
{m.label}
);
};
const SendIcon = () =>
{action && (
{action === "send" &&
}{action === "phone" &&
}{action === "edit" &&
}
)}
);
const GenerateCampaignButton = ({ onClick }) => (
{ e.currentTarget.style.transform = "translateY(1px)"; }}
onMouseUp={(e) => { e.currentTarget.style.transform = "none"; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; }}>
);
const DetailLeftRail = ({ lead, detail, onGenerateCampaign }) => (
{lead.name}
{detail.phase && (
{detail.phase.label}
{detail.phase.desc}
)}
{onGenerateCampaign &&
}
{lead.contact.street}
{detail.anchor.value}{detail.anchor.sub && <>{detail.anchor.sub} }} action={detail.anchor.action} />
);
// ----------------------------------------------------------------- middle cards
const InfoCard = ({ children, style }) => (
{children}
);
const CardTitle = ({ children, accent }) => (
{children}
);
const ScoreRing = ({ score, caption }) => {
const tier = CP_scoreTier(score);
const c = 2 * Math.PI * 42;
const dash = (score / 100) * c;
return (
);
};
const CoverageBar = ({ hero }) => {
const { min, max, rec, current } = hero;
const pct = (v) => Math.max(0, Math.min(100, ((v - min) / (max - min)) * 100));
const recPct = pct(rec);
// band: gap (current→rec) for policyholder; otherwise a ±13% window around rec
const bandL = current != null ? pct(current) : Math.max(0, recPct - 13);
const bandR = current != null ? recPct : Math.min(100, recPct + 13);
return (
{hero.blurb}
{/* recommended label + pointer */}
{CP_money(rec)}
{/* track */}
{/* band */}
{/* current marker (gap leads) */}
{current != null && (
)}
{CP_money(min)}
{current != null && Now {CP_money(current)} }
{CP_money(max)}
);
};
const Kv = ({ k, v }) => (
);
const SignalRow = ({ s }) => (
{s.dir === "up" && ▲ }
{s.dir === "down" && ▼ }
{s.text}
{s.tag && (
{s.strong && ◎ }{s.tag}
)}
);
const ActIcon = ({ name }) => {
const common = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "var(--helm-dark-green)" };
if (name === "bank") return
{activity.map((a, i) => (
))}
Key data
{detail.keyData.map(([k, v]) =>
Signals
{detail.signals.map((s, i) =>
Activity
);
// ----------------------------------------------------------------- page
const LeadDetail = ({ lead, dim = false, onBack, onGenerateCampaign, children }) => {
const detail = CP_buildDetail(lead);
return (
);
};
Object.assign(window, { LeadDetail });
Producer Co-pilot