{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "claims-1", "title": "Claims 1: claim tracker", "author": "Ballmac ", "description": "An insurance claim tracker: each claim and its stage in words, a line of five stages that stops at the decision when a claim is declined, and the things still needed from the customer with a place to answer each.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/claims-1/claims-1.tsx", "content": "// Ballmac UI: Claims 1. https://ui.ballmac.com/blocks/claims-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, CircleAlert, FileText, Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\nconst STAGES = [\"Received\", \"In review\", \"Assessed\", \"Decided\", \"Paid\"] as const\ntype Claims1Stage = (typeof STAGES)[number]\n\ntype Claims1Request = { id: string; text: string; /** Set once the customer has answered. */ answer?: string }\ntype Claims1Claim = {\n id: string\n /** For example \"CLM-20418\". */\n number: string\n title: string\n stage: Claims1Stage\n /** Set when a claim was turned down. The stages after \"Decided\" are then not reached. */\n declined?: boolean\n amount: number\n updated: string\n /** What the insurer needs from the customer before it can go on. */\n requests?: Claims1Request[]\n}\n\ntype Claims1Props = Omit, \"title\"> &\n StateProps & {\n claims?: Claims1Claim[]\n title?: string\n currency?: string\n /** Called with the answer to a request. Reject and the request stays open with the message. */\n onAnswer?: (claimId: string, requestId: string, answer: string) => void | Promise\n }\n\nconst claims: Claims1Claim[] = [\n { id: \"c1\", number: \"CLM-20418\", title: \"Water damage in the kitchen\", stage: \"In review\", amount: 4200, updated: \"Today, 09:12\", requests: [{ id: \"r1\", text: \"A photo of the burst pipe and the damaged cabinets.\" }, { id: \"r2\", text: \"The plumber's invoice or quote.\", answer: \"Uploaded invoice from Hale Plumbing, 14 Oct.\" }] },\n { id: \"c2\", number: \"CLM-19877\", title: \"Cracked windscreen\", stage: \"Paid\", amount: 380, updated: \"6 Oct\" },\n { id: \"c3\", number: \"CLM-19302\", title: \"Stolen bicycle\", stage: \"Decided\", declined: true, amount: 1100, updated: \"28 Sep\" },\n]\n\nfunction Skel() {\n return (\n
\n
{[0, 1, 2].map((i) => )}
\n \n
\n )\n}\n\n/**\n * An insurance claim tracker: each claim and where it is, a clear line of stages, and the things still needed from the customer with a place to answer.\n * A declined claim stops its line at the decision and says so; stages are written as words, never only drawn.\n */\nfunction Claims1({ claims: list = claims, title = \"Your claims\", currency = \"USD\", onAnswer, state = \"ready\", onRetry, emptyState, errorState, className, ...props }: Claims1Props) {\n const id = React.useId()\n const [sel, setSel] = React.useState(list[0]?.id ?? \"\")\n const [answers, setAnswers] = React.useState>({})\n const [done, setDone] = React.useState>({})\n const [busy, setBusy] = React.useState(null)\n const [err, setErr] = React.useState<{ key: string; text: string } | null>(null)\n const view = state === \"ready\" && list.length === 0 ? \"empty\" : state\n const money = (n: number) => new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency, maximumFractionDigits: 0 }).format(n)\n const claim = list.find((c) => c.id === sel) ?? list[0]\n const open = (c: Claims1Claim) => (c.requests ?? []).filter((r) => !r.answer && !done[`${c.id}:${r.id}`]).length\n\n async function send(c: Claims1Claim, r: Claims1Request) {\n const key = `${c.id}:${r.id}`\n const text = (answers[key] ?? \"\").trim()\n if (!text) { setErr({ key, text: \"Write your answer first.\" }); return }\n setBusy(key)\n setErr(null)\n try {\n await onAnswer?.(c.id, r.id, text)\n setDone((d) => ({ ...d, [key]: text }))\n } catch (e) {\n setErr({ key, text: e instanceof Error ? e.message : \"Your answer was not sent. It is still here.\" })\n } finally {\n setBusy(null)\n }\n }\n\n return (\n
\n

{title}

\n } empty={{ title: \"No claims yet\", description: \"When you make a claim, you can follow it here.\", ...emptyState }} error={{ title: \"Your claims could not be loaded\", description: \"Nothing was changed. Check your connection and try again.\", ...errorState }}>\n {claim && (\n
\n
    \n {list.map((c) => {\n const n = open(c)\n return (\n
  • \n \n
    • \n )\n })}\n
\n\n
\n

{claim.number}

\n

{claim.title}

\n

Claimed {money(claim.amount)} ยท updated {claim.updated}

\n\n
    \n {STAGES.map((s, i) => {\n const at = STAGES.indexOf(claim.stage)\n const reached = i <= at\n const lost = claim.declined && i === at\n const cut = claim.declined && i > at\n return (\n
  1. \n \n \n {lost ? \"Declined\" : s}\n {cut ? \" (not reached)\" : reached && i < at ? \" (done)\" : i === at ? \" (now)\" : \" (to come)\"}\n \n
    2. \n )\n })}\n
\n {claim.declined &&

This claim was declined. If you disagree, reply to the decision letter within 30 days.

}\n\n

What we need from you

\n {(claim.requests ?? []).length === 0 ? (\n

Nothing needed from you right now.

\n ) : (\n
    \n {(claim.requests ?? []).map((r) => {\n const key = `${claim.id}:${r.id}`\n const answer = r.answer ?? done[key]\n return (\n
  • \n

    {r.text}

    \n {answer ? (\n

    Your answer: {answer}

    \n ) : (\n
    \n \n