{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "expenses-1", "title": "Expenses 1: expense report", "author": "Ballmac ", "description": "An expense report you can finish: lines with category, amount and receipt, a total by category, rules checked as you go (receipt needed over a threshold, category limits), an add form, and Submit that lists what needs fixing.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/expenses-1/expenses-1.tsx", "content": "// Ballmac UI: Expenses 1. https://ui.ballmac.com/blocks/expenses-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { CircleAlert, CircleCheck, Loader2, Paperclip, Plus, Receipt, Send, Trash2, TriangleAlert } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Expenses1Category = { id: string; label: string; /** Most one expense in this category may be before it needs a look, in the report's currency. */ limit?: number }\n\ntype Expenses1Line = { id: string; date: string; merchant: string; category: string; amount: number; /** Name of the attached receipt file. */ receipt?: string; note?: string }\n\ntype Expenses1Props = Omit, \"title\"> &\n StateProps & {\n title?: string\n /** \"October trip to Lisbon\". */\n report?: string\n lines?: Expenses1Line[]\n categories?: Expenses1Category[]\n currency?: string\n locale?: string\n /** Amounts above this need a receipt. */\n receiptOver?: number\n /** Called when the report is submitted. Return a promise; reject to show the reason and keep the report open. */\n onSubmit?: (lines: Expenses1Line[], total: number) => void | Promise\n onChange?: (lines: Expenses1Line[]) => void\n }\n\nconst cats: Expenses1Category[] = [\n { id: \"travel\", label: \"Travel\" },\n { id: \"meals\", label: \"Meals\", limit: 75 },\n { id: \"lodging\", label: \"Lodging\", limit: 220 },\n { id: \"software\", label: \"Software\" },\n { id: \"other\", label: \"Other\" },\n]\nconst sample: Expenses1Line[] = [\n { id: \"e1\", date: \"2026-10-12\", merchant: \"TAP Air Portugal\", category: \"travel\", amount: 412.8, receipt: \"tap-ticket.pdf\" },\n { id: \"e2\", date: \"2026-10-12\", merchant: \"Airport taxi\", category: \"travel\", amount: 38, receipt: \"taxi.jpg\" },\n { id: \"e3\", date: \"2026-10-13\", merchant: \"Hotel Avenida\", category: \"lodging\", amount: 486, receipt: \"hotel-3-nights.pdf\", note: \"Three nights, 162 each\" },\n { id: \"e4\", date: \"2026-10-13\", merchant: \"Time Out Market\", category: \"meals\", amount: 92.4, receipt: \"dinner.jpg\", note: \"Dinner with the client team of four\" },\n { id: \"e5\", date: \"2026-10-14\", merchant: \"Café A Brasileira\", category: \"meals\", amount: 14.5 },\n { id: \"e6\", date: \"2026-10-14\", merchant: \"Conference wifi pass\", category: \"software\", amount: 49 },\n { id: \"e7\", date: \"2026-10-15\", merchant: \"Metro day pass\", category: \"travel\", amount: 9.6 },\n]\n\nconst barTone = [\"bg-chart-1\", \"bg-chart-2\", \"bg-chart-3\", \"bg-chart-4\", \"bg-chart-5\"]\n\nfunction Skel() {\n return (\n
\n \n \n
\n )\n}\n\n/**\n * An expense report you can finish: lines with merchant, date, category, amount and receipt, a total broken down by category, and rules that\n * are checked as you go: an amount over the receipt threshold needs a receipt, and a category with a limit flags what goes over it. Add a line\n * with the form, attach a receipt to any line, and Submit lists exactly what still needs fixing before it will send.\n */\nfunction Expenses1({\n title = \"Expense report\",\n report = \"October trip to Lisbon\",\n lines: linesProp = sample,\n categories = cats,\n currency = \"EUR\",\n locale = \"en-GB\",\n receiptOver = 25,\n onSubmit,\n onChange,\n state = \"ready\",\n onRetry,\n emptyState,\n errorState,\n className,\n ...props\n}: Expenses1Props) {\n const id = React.useId()\n const [lines, setLines] = React.useState(linesProp)\n React.useEffect(() => setLines(linesProp), [linesProp])\n const list = state === \"empty\" ? [] : lines\n const [form, setForm] = React.useState({ merchant: \"\", amount: \"\", date: \"2026-10-16\", category: categories[0]!.id })\n const [formError, setFormError] = React.useState()\n const [submitted, setSubmitted] = React.useState(false)\n const [sending, setSending] = React.useState(false)\n const [sendError, setSendError] = React.useState()\n const [tried, setTried] = React.useState(false)\n const money = (n: number) => new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(n)\n const dateFmt = React.useMemo(() => new Intl.DateTimeFormat(locale, { day: \"numeric\", month: \"short\", timeZone: \"UTC\" }), [locale])\n const catOf = (cid: string) => categories.find((c) => c.id === cid)\n const total = list.reduce((s, l) => s + l.amount, 0)\n\n const issues = (l: Expenses1Line) => {\n const out: string[] = []\n if (l.amount > receiptOver && !l.receipt) out.push(`Needs a receipt: it is over ${money(receiptOver)}`)\n const c = catOf(l.category)\n if (c?.limit && l.amount > c.limit) out.push(`Over the ${money(c.limit)} limit for ${c.label}`)\n return out\n }\n const missing = list.filter((l) => l.amount > receiptOver && !l.receipt)\n const byCat = categories.map((c, i) => ({ c, sum: list.filter((l) => l.category === c.id).reduce((s, l) => s + l.amount, 0), tone: barTone[i % barTone.length]! })).filter((x) => x.sum > 0)\n\n const set = (next: Expenses1Line[]) => {\n setLines(next)\n onChange?.(next)\n }\n function add(e: React.FormEvent) {\n e.preventDefault()\n const amount = Number(form.amount.replace(\",\", \".\"))\n if (!form.merchant.trim()) return setFormError(\"Say who you paid.\")\n if (!Number.isFinite(amount) || amount <= 0) return setFormError(\"Enter the amount as a number above zero.\")\n setFormError(undefined)\n set([...list, { id: `e${list.length + 1}${form.merchant.length}${Math.round(amount * 100)}`, date: form.date, merchant: form.merchant.trim(), category: form.category, amount }])\n setForm({ ...form, merchant: \"\", amount: \"\" })\n }\n async function send() {\n setTried(true)\n if (missing.length) return\n setSendError(undefined)\n setSending(true)\n try {\n await onSubmit?.(list, total)\n setSubmitted(true)\n } catch (e) {\n setSendError(e instanceof Error ? e.message : \"The report could not be sent. Nothing was lost, so try again.\")\n } finally {\n setSending(false)\n }\n }\n\n const content = !list.length && !submitted ? (\n
\n \n \n \n

{emptyState?.title ?? \"No expenses on this report\"}

\n

{emptyState?.description ?? \"Add what you paid for, with a receipt, and the total is worked out for you.\"}

\n {emptyState?.action}\n
\n ) : submitted ? (\n
\n \n \n \n

Report sent for approval

\n

\n {list.length} {list.length === 1 ? \"expense\" : \"expenses\"} totalling {money(total)} are with your manager. You will be told when it is approved.\n

\n
\n ) : (\n
\n
\n
\n
\n

{report}

\n

{money(total)}

\n
\n

\n {list.length} {list.length === 1 ? \"expense\" : \"expenses\"}\n

\n
\n
`${x.c.label} ${money(x.sum)}`).join(\", \")}`} className=\"bg-muted mt-5 flex h-3 overflow-hidden rounded-full\">\n {byCat.map((x) => (\n \n ))}\n
\n
    \n {byCat.map((x) => (\n
  • \n \n {x.c.label} {money(x.sum)}\n
    • \n ))}\n
\n
\n\n
\n

Expenses

\n
    \n {list.map((l) => {\n const probs = issues(l)\n return (\n
  • \n

    {dateFmt.format(Date.parse(`${l.date}T00:00:00Z`))}

    \n
    \n

    {l.merchant}

    \n

    \n {catOf(l.category)?.label ?? l.category}\n {l.receipt ? (\n \n \n {l.receipt}\n \n ) : (\n \n )}\n

    \n {l.note ?

    {l.note}

    : null}\n {probs.map((p) => (\n

    \n {p.startsWith(\"Needs\") ? : }\n {p}\n

    \n ))}\n
    \n
    \n

    {money(l.amount)}

    \n \n
    \n
    • \n )\n })}\n
\n\n
\n
\n \n setForm({ ...form, merchant: e.target.value })} placeholder=\"Merchant\" />\n
\n
\n \n setForm({ ...form, amount: e.target.value })} placeholder=\"0.00\" className=\"text-end tabular-nums\" />\n
\n
\n \n setForm({ ...form, date: e.target.value })} />\n
\n
\n

Category

\n \n
\n \n {formError ? (\n

\n {formError}\n

\n ) : null}\n
\n
\n\n
\n
\n {tried && missing.length ? (\n

\n \n {missing.length} {missing.length === 1 ? \"expense needs\" : \"expenses need\"} a receipt before you can send: {missing.map((m) => m.merchant).join(\", \")}.\n

\n ) : (\n

Receipts are needed for anything over {money(receiptOver)}.

\n )}\n {sendError ?

{sendError}

: null}\n
\n \n
\n
\n )\n\n return (\n
\n

\n {title}\n

\n } error={{ title: errorState?.title ?? \"The report could not be loaded\", description: errorState?.description ?? \"Nothing was changed. Check your connection and try again.\", ...errorState }}>\n {content}\n \n
\n )\n}\n\nexport { Expenses1, type Expenses1Props, type Expenses1Line, type Expenses1Category }\n", "type": "registry:component", "target": "@components/ballmac/blocks/expenses-1/expenses-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "expenses", "expense report", "receipts", "reimbursement", "travel", "finance", "approval", "spending", "claims" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "An expense report. ...} onSubmit={(lines, total) => Promise} />. The total and the category breakdown are worked out from the lines. A line over receiptOver without a receipt blocks Submit and is named in the message; a line over its category limit shows a warning but does not block. Adding a line validates the merchant and amount. Reject onSubmit to show the reason and stay open.", "whenToUse": [ "Employee expense claims and reimbursements", "Trip or project cost reports" ], "whenNotToUse": [ "A customer invoice (use invoice-1)", "Hours worked (use timesheet-1)" ], "composesWith": [ "timesheet-1", "invoice-1", "app-shell-1", "upload-1" ], "a11y": [ { "keys": "Tab, Enter", "action": "Each line's Attach receipt is a real file input labelled with the merchant; the add form fields all have visible labels" }, { "keys": "Problems", "action": "'Needs a receipt: it is over €25.00' and 'Over the €75.00 limit for Meals' are written beside an icon on the line, and Submit names what is missing" }, { "keys": "Breakdown", "action": "The category bar has a text equivalent listing each category and its amount" } ], "customization": [ "receiptOver and each category's limit are plain numbers in the report's currency", "Currency and dates follow the locale", "Removing a line says which one and its amount to a screen reader" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "expenses-1-loading", "trigger": "state=\"loading\"", "note": "A skeleton summary and list under the real heading, announced as loading." }, { "id": "empty", "title": "No expenses yet", "example": "expenses-1-empty", "trigger": "state=\"empty\" (or lines={[]})", "note": "Says to add what you paid for; emptyState sets the copy and can add a button." }, { "id": "error", "title": "Could not load", "example": "expenses-1-error", "trigger": "state=\"error\"", "note": "An alert saying nothing was changed, with Try again (onRetry). A failed submit says nothing was lost, in place beside the button." } ], "examples": [ "expenses-1-demo", "expenses-1-clean", "expenses-1-loading", "expenses-1-empty", "expenses-1-error" ], "url": "https://ui.ballmac.com/components/expenses-1" }, "categories": [ "blocks", "expenses" ], "type": "registry:block" }