// claims.jsx - claims tracking + FNOL filing wizard + rich detail (exported to window) const { useState: useStateCl, useEffect: useEffectCl } = React; const INCIDENT_TYPES = [ { id: "accident", label: "Accident", icon: "car" }, { id: "theft", label: "Theft / burglary", icon: "vault" }, { id: "fire", label: "Fire", icon: "alert" }, { id: "water", label: "Water / flood", icon: "ship" }, { id: "damage", label: "Accidental damage", icon: "cog" }, { id: "other", label: "Something else", icon: "doc" }, ]; function Claims({ claims, assets, onFileClaim, onChat, onInsure, openId }) { const D = window.VC_DATA; const { t } = window.useT(); const [openCl, setOpenCl] = useStateCl(claims[0] || null); const [fnol, setFnol] = useStateCl(false); useEffectCl(() => { if (openId) { const c = claims.find((x) => x.id === openId); if (c) setOpenCl(c); } }, [openId, claims]); useEffectCl(() => { if (openCl && !claims.find((c) => c.id === openCl.id)) setOpenCl(claims[0] || null); }, [claims]); return (

Claims

{t("cl.subtitle")}

setFnol(true)}>{t("cl.fileClaim")}
{/* stat strip */}
c.status !== "Settled").length} icon="clock" /> c.status === "Settled").length} icon="check" tone="success" /> s + c.loss, 0))} icon="trend" />
{claims.map((c) => { const active = openCl?.id === c.id; return (
setOpenCl(c)} style={{ padding: 16, borderRadius: 18, cursor: "pointer", background: "var(--surface)", border: "1.5px solid " + (active ? "var(--accent)" : "var(--border)"), boxShadow: active ? "var(--shadow-md)" : "var(--shadow-sm)", transition: "all .2s", animation: c.isNew ? "vc-drop-in .7s var(--ease) both" : "none", }}>
{c.id}
{c.asset}
{c.type} · {c.date} {D.fmtNaira(c.loss)}
); })} {claims.length === 0 &&
No claims yet - that's good news.
}
{openCl && }
setFnol(false)} onInsure={(a) => { setFnol(false); onInsure && onInsure(a); }} onSubmit={(c) => { setFnol(false); onFileClaim(c); setTimeout(() => setOpenCl(c), 100); }} />
); } function ClaimStat({ label, value, icon, tone }) { const c = tone === "success" ? "var(--success)" : tone === "accent" ? "var(--accent)" : "var(--text)"; return (
{value}
{label}
); } function StatusPill({ status }) { const settled = status === "Settled"; return {status}; } function MiniTrack({ stage }) { const total = window.VC_DATA.CLAIM_STAGES.length; return (
{Array.from({ length: total }).map((_, i) => (
))}
); } /* ---------------- rich detail ---------------- */ function ClaimDetail({ claim, onChat }) { const D = window.VC_DATA; const stages = D.CLAIM_STAGES; const excess = Math.round(claim.loss * 0.1); const approved = claim.loss - excess; const settled = claim.status === "Settled"; const docs = claim.docs || ["Incident report", "Photos of damage", "Police report"]; const activity = buildActivity(claim); return (
{claim.id}

{claim.asset}

{claim.type} · Reported {claim.date}

{/* payout breakdown */}
Payout breakdown
Adjuster: Kunle Adeyemi
{/* timeline */}
Progress
{stages.map((s, i) => { const done = i < claim.stage, current = i === claim.stage; return (
{done ? : {i + 1}} {i < stages.length - 1 && }
{s}
{done ? "Completed" : current ? "In progress - Cova is on it" : "Pending"}
); })}
{/* documents */}
Documents
{docs.map((d, i) => (
{d}
))}
{/* activity */}
Activity
{activity.map((a, i) => (
{a.who} {a.text}
{a.time}
))}
onChat(`What's the status of claim ${claim.id}?`)}>Ask Cova about this claim
); } function PayRow({ k, v, c, big }) { return (
{k} {v}
); } function buildActivity(claim) { const base = [{ who: "Cova", bot: true, text: "logged your claim and notified " + (claim.insurer || "your insurer") + ".", time: claim.date }]; if (claim.stage >= 1) base.push({ who: "You", bot: false, text: "uploaded supporting documents.", time: "1 day later" }); if (claim.stage >= 2) base.push({ who: "Cova", bot: true, text: "scheduled a further assessment.", time: "2 days later" }); if (claim.stage >= 3) base.push({ who: "Cova", bot: true, text: "submitted the assessed report to the insurer.", time: "4 days later" }); if (claim.stage >= 4) base.push({ who: "Insurer", bot: false, text: "approved the settlement amount.", time: "6 days later" }); return base.reverse(); } /* ---------------- FNOL wizard ---------------- */ function FnolWizard({ open, assets, onClose, onSubmit, onInsure }) { const D = window.VC_DATA; const [stp, setStp] = useStateCl(0); const [asset, setAsset] = useStateCl(null); const [type, setType] = useStateCl(null); const [date, setDate] = useStateCl("2026-06-05"); const [loss, setLoss] = useStateCl(""); const [desc, setDesc] = useStateCl(""); const [submitting, setSubmitting] = useStateCl(false); const [evidence, setEvidence] = useStateCl([]); // uploaded docs {id, kind, name} const [uploadingKind, setUploadingKind] = useStateCl(""); useEffectCl(() => { if (open) { setStp(0); setAsset(null); setType(null); setLoss(""); setDesc(""); setSubmitting(false); setEvidence([]); setUploadingKind(""); } }, [open]); // Claim evidence is real: files upload to the asset's document store // (/api/documents), where Cova also reads images to support the claim. const uploadEvidence = (kind, e) => { const file = e.target.files && e.target.files[0]; e.target.value = ""; if (!file || !asset) return; if (file.size > 6 * 1024 * 1024) return; const reader = new FileReader(); reader.onload = () => { setUploadingKind(kind); fetch("/api/documents", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ assetId: asset.id, kind, name: file.name, dataUrl: reader.result }) }) .then((r) => r.json()) .then((doc) => { if (doc && doc.id) setEvidence((xs) => [...xs, { id: doc.id, kind, name: file.name }]); }) .catch(() => {}) .finally(() => setUploadingKind("")); }; reader.readAsDataURL(file); }; // A claim can only proceed on an asset that actually has cover. Uninsured // assets never start the claim flow — we route the customer to insure instead. const insured = !!(asset && asset.insurer); const canNext = (stp === 0 && insured) || (stp === 1 && type) || stp === 2; const submit = () => { setSubmitting(true); const lossN = window.parseAmount(loss) || Math.round((asset?.replacement || 5000000) * 0.15); const claim = { id: "CL-2026-00" + (40 + Math.floor(Math.random() * 50)), assetId: asset.id, // the real vault asset — lets the backend persist + triage it asset: asset.name, type: INCIDENT_TYPES.find((x) => x.id === type)?.label || "Incident", loss: lossN, status: "In progress", date: new Date().toISOString().slice(0, 10), stage: 0, insurer: asset.insurer, isNew: true, note: desc, docs: ["Incident report", ...(desc ? ["Your description"] : []), ...evidence.map((ev) => ev.name)], }; setTimeout(() => onSubmit(claim), 1500); }; const titles = ["Which asset is affected?", "What happened?", "Tell us more", "Review & submit"]; return ( {!submitting ? (

File a claim

{titles.map((_, i) =>
)}

{titles[stp]}

{stp === 0 && (
{assets.map((a) => { const on = asset?.id === a.id; return ( ); })} {asset && !insured && (
{asset.name} isn't insured
There's no cover to claim against yet. Let's get it protected first. I can set up cover for it in a minute.
)}
)} {stp === 1 && (
{INCIDENT_TYPES.map((it) => { const on = type === it.id; return ( ); })}
)} {stp === 2 && (