@burdenoff/microfe-planmagnet 2026.928.4 → 2026.928.6

package/dist/planmagnet/budgets/ExpenseControls.js

@@ -0,0 +1,366 @@
+import { throwOnError as e } from "../utils/mutationResult.js";
+import { ConfirmButton as t, ErrorLine as n } from "../controls/ConfirmButton.js";
+import { WorkItemSearchSelect as r } from "../controls/Pickers.js";
+import { toDateInputValue as i, todayInputValue as a } from "../time/timeShared.js";
+import { useState as o } from "react";
+import { Pencil as s, Plus as c, Trash2 as l } from "lucide-react";
+import { gql as u } from "@apollo/client";
+import { useMutation as d } from "@apollo/client/react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as m, Input as h, ResponsiveDialog as g, ResponsiveDialogContent as _, ResponsiveDialogDescription as v, ResponsiveDialogFooter as y, ResponsiveDialogHeader as b, ResponsiveDialogTitle as x, ResponsiveDialogTrigger as S } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/budgets/ExpenseControls.tsx
+var C = u`
+  mutation ExpenseControlsLog($input: PlanmagnetLogExpenseInput!) {
+    planmagnetLogExpense(input: $input) {
+      id
+      budgetId
+      description
+      amount
+      category
+      date
+      workItemId
+      referenceUrl
+      createdAt
+    }
+  }
+`, w = u`
+  mutation ExpenseControlsUpdate($id: ID!, $input: PlanmagnetUpdateExpenseInput!) {
+    planmagnetUpdateExpense(id: $id, input: $input) {
+      id
+      description
+      amount
+      category
+      date
+      workItemId
+      referenceUrl
+      updatedAt
+    }
+  }
+`, T = u`
+  mutation ExpenseControlsDelete($id: ID!) {
+    planmagnetDeleteExpense(id: $id)
+  }
+`, E = (e, t) => e instanceof Error ? e.message : t;
+function D({ budgetId: t, projectId: i, refetchQueries: s }) {
+	let l = {
+		description: "",
+		amount: "",
+		category: "",
+		date: a(),
+		workItemId: "",
+		referenceUrl: ""
+	}, [u, w] = o(!1), [T, D] = o(l), [O, k] = o(null), [A, { loading: j }] = d(C, {
+		refetchQueries: s,
+		awaitRefetchQueries: !0
+	}), M = Number(T.amount), N = !j && T.description.trim() !== "" && Number.isFinite(M) && M >= 0 && !!T.date, P = async () => {
+		k(null);
+		try {
+			await e(A({ variables: { input: {
+				budgetId: t,
+				description: T.description.trim(),
+				amount: M,
+				date: T.date,
+				...T.category.trim() ? { category: T.category.trim() } : {},
+				...T.workItemId ? { workItemId: T.workItemId } : {},
+				...T.referenceUrl.trim() ? { referenceUrl: T.referenceUrl.trim() } : {}
+			} } })), w(!1), D(l);
+		} catch (e) {
+			k(E(e, "The expense could not be logged."));
+		}
+	};
+	return /* @__PURE__ */ p(g, {
+		open: u,
+		onOpenChange: (e) => {
+			w(e), e ? D(l) : k(null);
+		},
+		children: [/* @__PURE__ */ f(S, {
+			asChild: !0,
+			children: /* @__PURE__ */ p(m, {
+				size: "sm",
+				"data-testid": "log-expense-open",
+				children: [/* @__PURE__ */ f(c, { className: "mr-1 h-4 w-4" }), "Log expense"]
+			})
+		}), /* @__PURE__ */ p(_, {
+			className: "max-w-lg",
+			children: [
+				/* @__PURE__ */ p(b, { children: [/* @__PURE__ */ f(x, { children: "Log an expense" }), /* @__PURE__ */ f(v, { children: "Logged against this budget; its spent total updates immediately." })] }),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "log-expense-description",
+							className: "text-sm font-medium",
+							children: "Description"
+						}), /* @__PURE__ */ f(h, {
+							id: "log-expense-description",
+							className: "mt-1",
+							value: T.description,
+							onChange: (e) => D({
+								...T,
+								description: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ p("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								htmlFor: "log-expense-amount",
+								className: "text-sm font-medium",
+								children: "Amount"
+							}), /* @__PURE__ */ f(h, {
+								id: "log-expense-amount",
+								className: "mt-1",
+								type: "number",
+								min: "0",
+								step: "0.01",
+								inputMode: "decimal",
+								value: T.amount,
+								onChange: (e) => D({
+									...T,
+									amount: e.target.value
+								})
+							})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								htmlFor: "log-expense-date",
+								className: "text-sm font-medium",
+								children: "Date"
+							}), /* @__PURE__ */ f(h, {
+								id: "log-expense-date",
+								className: "mt-1",
+								type: "date",
+								value: T.date,
+								onChange: (e) => D({
+									...T,
+									date: e.target.value
+								})
+							})] })]
+						}),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "log-expense-category",
+							className: "text-sm font-medium",
+							children: "Category (optional)"
+						}), /* @__PURE__ */ f(h, {
+							id: "log-expense-category",
+							className: "mt-1",
+							placeholder: "e.g. Travel, Software, Contractors",
+							value: T.category,
+							onChange: (e) => D({
+								...T,
+								category: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "log-expense-work-item",
+							className: "text-sm font-medium",
+							children: "Work item (optional)"
+						}), /* @__PURE__ */ f("div", {
+							className: "mt-1",
+							children: /* @__PURE__ */ f(r, {
+								id: "log-expense-work-item",
+								projectId: i,
+								value: T.workItemId,
+								onChange: (e) => D({
+									...T,
+									workItemId: e
+								})
+							})
+						})] }),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "log-expense-reference",
+							className: "text-sm font-medium",
+							children: "Receipt / reference URL (optional)"
+						}), /* @__PURE__ */ f(h, {
+							id: "log-expense-reference",
+							className: "mt-1",
+							type: "url",
+							placeholder: "https://…",
+							value: T.referenceUrl,
+							onChange: (e) => D({
+								...T,
+								referenceUrl: e.target.value
+							})
+						})] }),
+						O && /* @__PURE__ */ f(n, { message: O })
+					]
+				}),
+				/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f(m, {
+					variant: "outline",
+					onClick: () => w(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ f(m, {
+					onClick: () => void P(),
+					disabled: !N,
+					"data-testid": "log-expense-submit",
+					children: j ? "Logging…" : "Log expense"
+				})] })
+			]
+		})]
+	});
+}
+function O({ expense: t, refetchQueries: r }) {
+	let a = {
+		description: t.description,
+		amount: String(t.amount),
+		category: t.category ?? "",
+		date: i(t.date),
+		referenceUrl: t.referenceUrl ?? ""
+	}, [c, l] = o(!1), [u, v] = o(a), [C, T] = o(null), [D, { loading: O }] = d(w, {
+		refetchQueries: r,
+		awaitRefetchQueries: !0
+	}), k = Number(u.amount), A = !O && u.description.trim() !== "" && Number.isFinite(k) && k >= 0, j = async () => {
+		T(null);
+		let n = {};
+		if (u.description.trim() !== a.description && (n.description = u.description.trim()), k !== t.amount && (n.amount = k), u.category.trim() !== a.category.trim() && (n.category = u.category.trim() || null), u.date !== a.date && (n.date = u.date), u.referenceUrl.trim() !== a.referenceUrl.trim() && (n.referenceUrl = u.referenceUrl.trim() || null), Object.keys(n).length === 0) {
+			l(!1);
+			return;
+		}
+		try {
+			await e(D({ variables: {
+				id: t.id,
+				input: n
+			} })), l(!1);
+		} catch (e) {
+			T(E(e, "The expense could not be saved."));
+		}
+	};
+	return /* @__PURE__ */ p(g, {
+		open: c,
+		onOpenChange: (e) => {
+			l(e), e ? v(a) : T(null);
+		},
+		children: [/* @__PURE__ */ f(S, {
+			asChild: !0,
+			children: /* @__PURE__ */ f(m, {
+				size: "sm",
+				variant: "outline",
+				"aria-label": `Edit ${t.description}`,
+				"data-testid": "expense-edit",
+				children: /* @__PURE__ */ f(s, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ p(_, {
+			className: "max-w-lg",
+			children: [
+				/* @__PURE__ */ f(b, { children: /* @__PURE__ */ f(x, { children: "Edit expense" }) }),
+				/* @__PURE__ */ p("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "edit-expense-description",
+							className: "text-sm font-medium",
+							children: "Description"
+						}), /* @__PURE__ */ f(h, {
+							id: "edit-expense-description",
+							className: "mt-1",
+							value: u.description,
+							onChange: (e) => v({
+								...u,
+								description: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ p("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								htmlFor: "edit-expense-amount",
+								className: "text-sm font-medium",
+								children: "Amount"
+							}), /* @__PURE__ */ f(h, {
+								id: "edit-expense-amount",
+								className: "mt-1",
+								type: "number",
+								min: "0",
+								step: "0.01",
+								inputMode: "decimal",
+								value: u.amount,
+								onChange: (e) => v({
+									...u,
+									amount: e.target.value
+								})
+							})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								htmlFor: "edit-expense-date",
+								className: "text-sm font-medium",
+								children: "Date"
+							}), /* @__PURE__ */ f(h, {
+								id: "edit-expense-date",
+								className: "mt-1",
+								type: "date",
+								value: u.date,
+								onChange: (e) => v({
+									...u,
+									date: e.target.value
+								})
+							})] })]
+						}),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "edit-expense-category",
+							className: "text-sm font-medium",
+							children: "Category"
+						}), /* @__PURE__ */ f(h, {
+							id: "edit-expense-category",
+							className: "mt-1",
+							value: u.category,
+							onChange: (e) => v({
+								...u,
+								category: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+							htmlFor: "edit-expense-reference",
+							className: "text-sm font-medium",
+							children: "Receipt / reference URL"
+						}), /* @__PURE__ */ f(h, {
+							id: "edit-expense-reference",
+							className: "mt-1",
+							type: "url",
+							value: u.referenceUrl,
+							onChange: (e) => v({
+								...u,
+								referenceUrl: e.target.value
+							})
+						})] }),
+						C && /* @__PURE__ */ f(n, { message: C })
+					]
+				}),
+				/* @__PURE__ */ p(y, { children: [/* @__PURE__ */ f(m, {
+					variant: "outline",
+					onClick: () => l(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ f(m, {
+					onClick: () => void j(),
+					disabled: !A,
+					"data-testid": "edit-expense-save",
+					children: O ? "Saving…" : "Save"
+				})] })
+			]
+		})]
+	});
+}
+function k({ id: r, description: i, refetchQueries: a }) {
+	let [s, { loading: c }] = d(T, {
+		refetchQueries: a,
+		awaitRefetchQueries: !0
+	}), [u, m] = o(null), h = async () => {
+		m(null);
+		try {
+			await e(s({ variables: { id: r } }));
+		} catch (e) {
+			m(E(e, "The expense could not be deleted."));
+		}
+	};
+	return /* @__PURE__ */ p("div", {
+		className: "flex flex-col items-end gap-1",
+		children: [/* @__PURE__ */ f(t, {
+			label: "",
+			ariaLabel: `Delete ${i}`,
+			variant: "outline",
+			icon: /* @__PURE__ */ f(l, { className: "h-4 w-4" }),
+			title: "Delete this expense?",
+			description: "The budget's spent total is adjusted back down. This cannot be undone here.",
+			confirmLabel: "Delete expense",
+			destructive: !0,
+			disabled: c,
+			onConfirm: () => void h()
+		}), u && /* @__PURE__ */ f(n, { message: u })]
+	});
+}
+//#endregion
+export { k as DeleteExpenseButton, O as EditExpenseDialog, D as LogExpenseDialog };
+
+//# sourceMappingURL=ExpenseControls.js.map

package/dist/planmagnet/budgets/ExpenseControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpenseControls.js","names":[],"sources":["../../../src/planmagnet/budgets/ExpenseControls.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation } from '@apollo/client/react';\nimport {\n  Button,\n  Input,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport { Pencil, Plus, Trash2 } from 'lucide-react';\nimport { WorkItemSearchSelect } from '../controls/Pickers';\nimport { throwOnError } from '../utils/mutationResult';\nimport { ConfirmButton, ErrorLine } from '../controls/ConfirmButton';\nimport { todayInputValue, toDateInputValue } from '../time/timeShared';\n\n/**\n * Expense controls (BOFF-8047): log an expense against a budget, edit one, delete one.\n *\n * `spentAmount` on the parent budget is maintained by the SERVICE (increment on log, adjust on edit,\n * decrement on delete — `BudgetService.logExpense`/`updateExpense`/`deleteExpense`), inside a transaction\n * for edit. This UI never computes or sends a budget total itself; it only refetches the budget after a\n * write so the meter reflects the server's number.\n */\n\nconst LOG_EXPENSE = gql`\n  mutation ExpenseControlsLog($input: PlanmagnetLogExpenseInput!) {\n    planmagnetLogExpense(input: $input) {\n      id\n      budgetId\n      description\n      amount\n      category\n      date\n      workItemId\n      referenceUrl\n      createdAt\n    }\n  }\n`;\n\nconst UPDATE_EXPENSE = gql`\n  mutation ExpenseControlsUpdate($id: ID!, $input: PlanmagnetUpdateExpenseInput!) {\n    planmagnetUpdateExpense(id: $id, input: $input) {\n      id\n      description\n      amount\n      category\n      date\n      workItemId\n      referenceUrl\n      updatedAt\n    }\n  }\n`;\n\nconst DELETE_EXPENSE = gql`\n  mutation ExpenseControlsDelete($id: ID!) {\n    planmagnetDeleteExpense(id: $id)\n  }\n`;\n\nconst messageOf = (e: unknown, fallback: string) => (e instanceof Error ? e.message : fallback);\n\n/** Log an expense against a budget. */\nexport function LogExpenseDialog({\n  budgetId,\n  projectId,\n  refetchQueries,\n}: {\n  budgetId: string;\n  /** Narrows the optional \"work item\" search to the budget's own project, when known. */\n  projectId?: string;\n  refetchQueries: string[];\n}) {\n  const empty = {\n    description: '',\n    amount: '',\n    category: '',\n    date: todayInputValue(),\n    workItemId: '',\n    referenceUrl: '',\n  };\n  const [open, setOpen] = useState(false);\n  const [form, setForm] = useState(empty);\n  const [error, setError] = useState<string | null>(null);\n  const [log, { loading }] = useMutation(LOG_EXPENSE, {\n    refetchQueries,\n    awaitRefetchQueries: true,\n  });\n\n  const amount = Number(form.amount);\n  const canSubmit =\n    !loading &&\n    form.description.trim() !== '' &&\n    Number.isFinite(amount) &&\n    amount >= 0 &&\n    !!form.date;\n\n  const submit = async () => {\n    setError(null);\n    try {\n      await throwOnError(\n        log({\n          variables: {\n            input: {\n              budgetId,\n              description: form.description.trim(),\n              amount,\n              date: form.date,\n              ...(form.category.trim() ? { category: form.category.trim() } : {}),\n              ...(form.workItemId ? { workItemId: form.workItemId } : {}),\n              ...(form.referenceUrl.trim() ? { referenceUrl: form.referenceUrl.trim() } : {}),\n            },\n          },\n        })\n      );\n      setOpen(false);\n      setForm(empty);\n    } catch (e) {\n      setError(messageOf(e, 'The expense could not be logged.'));\n    }\n  };\n\n  return (\n    <ResponsiveDialog\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (next) setForm(empty);\n        else setError(null);\n      }}\n    >\n      <ResponsiveDialogTrigger asChild>\n        <Button size=\"sm\" data-testid=\"log-expense-open\">\n          <Plus className=\"mr-1 h-4 w-4\" />\n          Log expense\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Log an expense</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            Logged against this budget; its spent total updates immediately.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n        <div className=\"space-y-3\">\n          <div>\n            <label htmlFor=\"log-expense-description\" className=\"text-sm font-medium\">\n              Description\n            </label>\n            <Input\n              id=\"log-expense-description\"\n              className=\"mt-1\"\n              value={form.description}\n              onChange={(e) => setForm({ ...form, description: e.target.value })}\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div>\n              <label htmlFor=\"log-expense-amount\" className=\"text-sm font-medium\">\n                Amount\n              </label>\n              <Input\n                id=\"log-expense-amount\"\n                className=\"mt-1\"\n                type=\"number\"\n                min=\"0\"\n                step=\"0.01\"\n                inputMode=\"decimal\"\n                value={form.amount}\n                onChange={(e) => setForm({ ...form, amount: e.target.value })}\n              />\n            </div>\n            <div>\n              <label htmlFor=\"log-expense-date\" className=\"text-sm font-medium\">\n                Date\n              </label>\n              <Input\n                id=\"log-expense-date\"\n                className=\"mt-1\"\n                type=\"date\"\n                value={form.date}\n                onChange={(e) => setForm({ ...form, date: e.target.value })}\n              />\n            </div>\n          </div>\n          <div>\n            <label htmlFor=\"log-expense-category\" className=\"text-sm font-medium\">\n              Category (optional)\n            </label>\n            <Input\n              id=\"log-expense-category\"\n              className=\"mt-1\"\n              placeholder=\"e.g. Travel, Software, Contractors\"\n              value={form.category}\n              onChange={(e) => setForm({ ...form, category: e.target.value })}\n            />\n          </div>\n          <div>\n            <label htmlFor=\"log-expense-work-item\" className=\"text-sm font-medium\">\n              Work item (optional)\n            </label>\n            <div className=\"mt-1\">\n              <WorkItemSearchSelect\n                id=\"log-expense-work-item\"\n                projectId={projectId}\n                value={form.workItemId}\n                onChange={(workItemId) => setForm({ ...form, workItemId })}\n              />\n            </div>\n          </div>\n          <div>\n            <label htmlFor=\"log-expense-reference\" className=\"text-sm font-medium\">\n              Receipt / reference URL (optional)\n            </label>\n            <Input\n              id=\"log-expense-reference\"\n              className=\"mt-1\"\n              type=\"url\"\n              placeholder=\"https://…\"\n              value={form.referenceUrl}\n              onChange={(e) => setForm({ ...form, referenceUrl: e.target.value })}\n            />\n          </div>\n          {error && <ErrorLine message={error} />}\n        </div>\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>\n            Cancel\n          </Button>\n          <Button\n            onClick={() => void submit()}\n            disabled={!canSubmit}\n            data-testid=\"log-expense-submit\"\n          >\n            {loading ? 'Logging…' : 'Log expense'}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n\nexport interface ExpenseValues {\n  id: string;\n  description: string;\n  amount: number;\n  category: string | null;\n  date: string;\n  referenceUrl: string | null;\n}\n\n/** Edit an expense's description, amount, category, date or reference URL. Only changed fields are sent. */\nexport function EditExpenseDialog({\n  expense,\n  refetchQueries,\n}: {\n  expense: ExpenseValues;\n  refetchQueries: string[];\n}) {\n  const initial = {\n    description: expense.description,\n    amount: String(expense.amount),\n    category: expense.category ?? '',\n    date: toDateInputValue(expense.date),\n    referenceUrl: expense.referenceUrl ?? '',\n  };\n  const [open, setOpen] = useState(false);\n  const [form, setForm] = useState(initial);\n  const [error, setError] = useState<string | null>(null);\n  const [update, { loading }] = useMutation(UPDATE_EXPENSE, {\n    refetchQueries,\n    awaitRefetchQueries: true,\n  });\n\n  const amount = Number(form.amount);\n  const canSubmit =\n    !loading && form.description.trim() !== '' && Number.isFinite(amount) && amount >= 0;\n\n  const save = async () => {\n    setError(null);\n    const input: Record<string, unknown> = {};\n    if (form.description.trim() !== initial.description)\n      input.description = form.description.trim();\n    if (amount !== expense.amount) input.amount = amount;\n    if (form.category.trim() !== initial.category.trim())\n      input.category = form.category.trim() || null;\n    if (form.date !== initial.date) input.date = form.date;\n    if (form.referenceUrl.trim() !== initial.referenceUrl.trim())\n      input.referenceUrl = form.referenceUrl.trim() || null;\n    if (Object.keys(input).length === 0) {\n      setOpen(false);\n      return;\n    }\n    try {\n      await throwOnError(update({ variables: { id: expense.id, input } }));\n      setOpen(false);\n    } catch (e) {\n      setError(messageOf(e, 'The expense could not be saved.'));\n    }\n  };\n\n  return (\n    <ResponsiveDialog\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (next) setForm(initial);\n        else setError(null);\n      }}\n    >\n      <ResponsiveDialogTrigger asChild>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          aria-label={`Edit ${expense.description}`}\n          data-testid=\"expense-edit\"\n        >\n          <Pencil className=\"h-4 w-4\" />\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Edit expense</ResponsiveDialogTitle>\n        </ResponsiveDialogHeader>\n        <div className=\"space-y-3\">\n          <div>\n            <label htmlFor=\"edit-expense-description\" className=\"text-sm font-medium\">\n              Description\n            </label>\n            <Input\n              id=\"edit-expense-description\"\n              className=\"mt-1\"\n              value={form.description}\n              onChange={(e) => setForm({ ...form, description: e.target.value })}\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div>\n              <label htmlFor=\"edit-expense-amount\" className=\"text-sm font-medium\">\n                Amount\n              </label>\n              <Input\n                id=\"edit-expense-amount\"\n                className=\"mt-1\"\n                type=\"number\"\n                min=\"0\"\n                step=\"0.01\"\n                inputMode=\"decimal\"\n                value={form.amount}\n                onChange={(e) => setForm({ ...form, amount: e.target.value })}\n              />\n            </div>\n            <div>\n              <label htmlFor=\"edit-expense-date\" className=\"text-sm font-medium\">\n                Date\n              </label>\n              <Input\n                id=\"edit-expense-date\"\n                className=\"mt-1\"\n                type=\"date\"\n                value={form.date}\n                onChange={(e) => setForm({ ...form, date: e.target.value })}\n              />\n            </div>\n          </div>\n          <div>\n            <label htmlFor=\"edit-expense-category\" className=\"text-sm font-medium\">\n              Category\n            </label>\n            <Input\n              id=\"edit-expense-category\"\n              className=\"mt-1\"\n              value={form.category}\n              onChange={(e) => setForm({ ...form, category: e.target.value })}\n            />\n          </div>\n          <div>\n            <label htmlFor=\"edit-expense-reference\" className=\"text-sm font-medium\">\n              Receipt / reference URL\n            </label>\n            <Input\n              id=\"edit-expense-reference\"\n              className=\"mt-1\"\n              type=\"url\"\n              value={form.referenceUrl}\n              onChange={(e) => setForm({ ...form, referenceUrl: e.target.value })}\n            />\n          </div>\n          {error && <ErrorLine message={error} />}\n        </div>\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => void save()} disabled={!canSubmit} data-testid=\"edit-expense-save\">\n            {loading ? 'Saving…' : 'Save'}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n\n/** Delete an expense, with confirmation. */\nexport function DeleteExpenseButton({\n  id,\n  description,\n  refetchQueries,\n}: {\n  id: string;\n  description: string;\n  refetchQueries: string[];\n}) {\n  const [remove, { loading }] = useMutation(DELETE_EXPENSE, {\n    refetchQueries,\n    awaitRefetchQueries: true,\n  });\n  const [error, setError] = useState<string | null>(null);\n\n  const onDelete = async () => {\n    setError(null);\n    try {\n      await throwOnError(remove({ variables: { id } }));\n    } catch (e) {\n      setError(messageOf(e, 'The expense could not be deleted.'));\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col items-end gap-1\">\n      <ConfirmButton\n        label=\"\"\n        ariaLabel={`Delete ${description}`}\n        variant=\"outline\"\n        icon={<Trash2 className=\"h-4 w-4\" />}\n        title=\"Delete this expense?\"\n        description=\"The budget's spent total is adjusted back down. This cannot be undone here.\"\n        confirmLabel=\"Delete expense\"\n        destructive\n        disabled={loading}\n        onConfirm={() => void onDelete()}\n      />\n      {error && <ErrorLine message={error} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/planmagnet/budgets/ProjectBudgetsSummary.d.ts

@@ -0,0 +1,5 @@
+export declare function ProjectBudgetsSummary({ workspaceId, projectId, }: {
+    workspaceId?: string | null;
+    projectId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ProjectBudgetsSummary.d.ts.map

package/dist/planmagnet/budgets/ProjectBudgetsSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectBudgetsSummary.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/budgets/ProjectBudgetsSummary.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,qBAAqB,CAAC,EACpC,WAAW,EACX,SAAS,GACV,EAAE;IACD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;CACnB,2CA+EA"}

package/dist/planmagnet/budgets/ProjectBudgetsSummary.js

@@ -0,0 +1,112 @@
+import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
+import { BUDGET_STATE_STYLE as t, budgetState as n, budgetUsage as r, money as i } from "./budgetMath.js";
+import { detailPath as a } from "../utils/rowNavigation.js";
+import { CreateBudgetDialog as o } from "./BudgetControls.js";
+import { ArrowRight as s, Wallet as c } from "lucide-react";
+import { gql as l } from "@apollo/client";
+import { useQuery as u } from "@apollo/client/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Button as p, Card as m, CardContent as h, CardHeader as g, CardTitle as _ } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/budgets/ProjectBudgetsSummary.tsx
+var v = l`
+  query ProjectBudgetsSummary($workspaceId: ID!, $projectId: String!) {
+    planmagnetBudgets(
+      workspaceId: $workspaceId
+      filter: { projectId: $projectId }
+      pagination: { first: 3 }
+    ) {
+      items {
+        id
+        name
+        status
+        plannedAmount
+        spentAmount
+        currency
+      }
+      totalCount
+    }
+  }
+`;
+function y({ workspaceId: l, projectId: y }) {
+	let b = e(), { data: x, loading: S, error: C } = u(v, {
+		variables: {
+			workspaceId: l,
+			projectId: y
+		},
+		skip: !l || !y
+	}), w = x?.planmagnetBudgets.items ?? [], T = x?.planmagnetBudgets.totalCount ?? 0;
+	return /* @__PURE__ */ f(m, { children: [/* @__PURE__ */ f(g, {
+		className: "flex flex-row items-center justify-between space-y-0",
+		children: [/* @__PURE__ */ f(_, {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ d(c, { className: "h-4 w-4" }),
+				"Budget",
+				T === 1 ? "" : "s",
+				" ",
+				x ? `(${T})` : ""
+			]
+		}), /* @__PURE__ */ d(o, {
+			presetProjectId: y,
+			onCreated: (e) => b(a("/projects/budget-detail-page", e)),
+			triggerSize: "sm"
+		})]
+	}), /* @__PURE__ */ f(h, {
+		className: "space-y-2",
+		children: [
+			S && !x && /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground",
+				children: "Loading…"
+			}),
+			C && /* @__PURE__ */ f("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: ["Budgets could not be loaded: ", C.message]
+			}),
+			x && w.length === 0 && /* @__PURE__ */ d("p", {
+				className: "text-sm text-muted-foreground",
+				children: "No budget for this project yet."
+			}),
+			w.map((e) => {
+				let o = r(e.plannedAmount, e.spentAmount), s = t[n(o)], c = o === null ? null : Math.round(o * 100);
+				return /* @__PURE__ */ f("button", {
+					type: "button",
+					className: "block w-full rounded-md border p-2 text-left hover:border-primary transition-colors",
+					onClick: () => b(a("/projects/budget-detail-page", e.id)),
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex items-center justify-between gap-2 text-sm",
+						children: [/* @__PURE__ */ d("span", {
+							className: "truncate font-medium",
+							children: e.name
+						}), /* @__PURE__ */ f("span", {
+							className: "shrink-0 tabular-nums text-muted-foreground",
+							children: [
+								i(e.spentAmount, e.currency),
+								" /",
+								" ",
+								i(e.plannedAmount, e.currency)
+							]
+						})]
+					}), /* @__PURE__ */ d("div", {
+						className: `mt-1.5 h-1.5 w-full overflow-hidden rounded-full ${s.track}`,
+						children: /* @__PURE__ */ d("div", {
+							className: `h-full rounded-full ${s.fill}`,
+							style: { width: `${Math.min(c ?? 0, 100)}%` }
+						})
+					})]
+				}, e.id);
+			}),
+			T > 0 && /* @__PURE__ */ f(p, {
+				size: "sm",
+				variant: "ghost",
+				className: "mt-1 w-full justify-between",
+				onClick: () => b(`/projects/budgets-page?projectId=${encodeURIComponent(y)}`),
+				children: ["View all budgets", /* @__PURE__ */ d(s, { className: "h-4 w-4" })]
+			})
+		]
+	})] });
+}
+//#endregion
+export { y as ProjectBudgetsSummary };
+
+//# sourceMappingURL=ProjectBudgetsSummary.js.map

package/dist/planmagnet/budgets/ProjectBudgetsSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectBudgetsSummary.js","names":[],"sources":["../../../src/planmagnet/budgets/ProjectBudgetsSummary.tsx"],"sourcesContent":["import { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport { ArrowRight, Wallet } from 'lucide-react';\nimport { budgetState, budgetUsage, BUDGET_STATE_STYLE, money } from './budgetMath';\nimport { CreateBudgetDialog } from './BudgetControls';\nimport { usePlanMagnetNavigate } from '../providers/PlanMagnetProvider';\nimport { detailPath } from '../utils/rowNavigation';\n\n/**\n * The Project Detail entry point into Budgets (BOFF-8047, rule 2): a budget is a per-project record, and a\n * PM opens a project expecting to see (and start) its budget from there, not only from a separate top-level\n * list. Shows up to 3 budgets with their meter; \"View all\" carries the project filter into the full page.\n */\n\nconst PROJECT_BUDGETS = gql`\n  query ProjectBudgetsSummary($workspaceId: ID!, $projectId: String!) {\n    planmagnetBudgets(\n      workspaceId: $workspaceId\n      filter: { projectId: $projectId }\n      pagination: { first: 3 }\n    ) {\n      items {\n        id\n        name\n        status\n        plannedAmount\n        spentAmount\n        currency\n      }\n      totalCount\n    }\n  }\n`;\n\ninterface BudgetRow {\n  id: string;\n  name: string;\n  status: string;\n  plannedAmount: number;\n  spentAmount: number;\n  currency: string;\n}\n\nexport function ProjectBudgetsSummary({\n  workspaceId,\n  projectId,\n}: {\n  workspaceId?: string | null;\n  projectId: string;\n}) {\n  const navigate = usePlanMagnetNavigate();\n  const { data, loading, error } = useQuery<{\n    planmagnetBudgets: { items: BudgetRow[]; totalCount: number };\n  }>(PROJECT_BUDGETS, {\n    variables: { workspaceId, projectId },\n    skip: !workspaceId || !projectId,\n  });\n\n  const budgets = data?.planmagnetBudgets.items ?? [];\n  const total = data?.planmagnetBudgets.totalCount ?? 0;\n  const viewAll = () =>\n    navigate(`/projects/budgets-page?projectId=${encodeURIComponent(projectId)}`);\n\n  return (\n    <Card>\n      <CardHeader className=\"flex flex-row items-center justify-between space-y-0\">\n        <CardTitle className=\"flex items-center gap-2\">\n          <Wallet className=\"h-4 w-4\" />\n          Budget{total === 1 ? '' : 's'} {data ? `(${total})` : ''}\n        </CardTitle>\n        <CreateBudgetDialog\n          presetProjectId={projectId}\n          onCreated={(id) => navigate(detailPath('/projects/budget-detail-page', id))}\n          triggerSize=\"sm\"\n        />\n      </CardHeader>\n      <CardContent className=\"space-y-2\">\n        {loading && !data && <p className=\"text-sm text-muted-foreground\">Loading…</p>}\n        {error && (\n          <p role=\"alert\" className=\"text-sm text-destructive\">\n            Budgets could not be loaded: {error.message}\n          </p>\n        )}\n        {data && budgets.length === 0 && (\n          <p className=\"text-sm text-muted-foreground\">No budget for this project yet.</p>\n        )}\n        {budgets.map((budget) => {\n          const usage = budgetUsage(budget.plannedAmount, budget.spentAmount);\n          const state = budgetState(usage);\n          const style = BUDGET_STATE_STYLE[state];\n          const percent = usage === null ? null : Math.round(usage * 100);\n          return (\n            <button\n              key={budget.id}\n              type=\"button\"\n              className=\"block w-full rounded-md border p-2 text-left hover:border-primary transition-colors\"\n              onClick={() => navigate(detailPath('/projects/budget-detail-page', budget.id))}\n            >\n              <div className=\"flex items-center justify-between gap-2 text-sm\">\n                <span className=\"truncate font-medium\">{budget.name}</span>\n                <span className=\"shrink-0 tabular-nums text-muted-foreground\">\n                  {money(budget.spentAmount, budget.currency)} /{' '}\n                  {money(budget.plannedAmount, budget.currency)}\n                </span>\n              </div>\n              <div className={`mt-1.5 h-1.5 w-full overflow-hidden rounded-full ${style.track}`}>\n                <div\n                  className={`h-full rounded-full ${style.fill}`}\n                  style={{ width: `${Math.min(percent ?? 0, 100)}%` }}\n                />\n              </div>\n            </button>\n          );\n        })}\n        {total > 0 && (\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            className=\"mt-1 w-full justify-between\"\n            onClick={viewAll}\n          >\n            View all budgets\n            <ArrowRight className=\"h-4 w-4\" />\n          </Button>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;AAeA,IAAM,IAAkB,CAAG;;;;;;;;;;;;;;;;;;;AA6B3B,SAAgB,EAAsB,EACpC,gBACA,gBAIC;CACD,IAAM,IAAW,GAAuB,EAClC,EAAE,SAAM,YAAS,aAAU,EAE9B,GAAiB;EAClB,WAAW;GAAE;GAAa;GAAW;EACrC,MAAM,CAAC,KAAe,CAAC;EACxB,CAAC,EAEI,IAAU,GAAM,kBAAkB,SAAS,EAAE,EAC7C,IAAQ,GAAM,kBAAkB,cAAc;AAIpD,QACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAY,WAAU;YAAtB,CACE,kBAAC,GAAD;GAAW,WAAU;aAArB;IACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA;;IACvB,MAAU,IAAI,KAAK;IAAI;IAAE,IAAO,IAAI,EAAM,KAAK;IAC5C;MACZ,kBAAC,GAAD;GACE,iBAAiB;GACjB,YAAY,MAAO,EAAS,EAAW,gCAAgC,EAAG,CAAC;GAC3E,aAAY;GACZ,CAAA,CACS;KACb,kBAAC,GAAD;EAAa,WAAU;YAAvB;GACG,KAAW,CAAC,KAAQ,kBAAC,KAAD;IAAG,WAAU;cAAgC;IAAY,CAAA;GAC7E,KACC,kBAAC,KAAD;IAAG,MAAK;IAAQ,WAAU;cAA1B,CAAqD,iCACrB,EAAM,QAClC;;GAEL,KAAQ,EAAQ,WAAW,KAC1B,kBAAC,KAAD;IAAG,WAAU;cAAgC;IAAmC,CAAA;GAEjF,EAAQ,KAAK,MAAW;IACvB,IAAM,IAAQ,EAAY,EAAO,eAAe,EAAO,YAAY,EAE7D,IAAQ,EADA,EAAY,EAAM,GAE1B,IAAU,MAAU,OAAO,OAAO,KAAK,MAAM,IAAQ,IAAI;AAC/D,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAU;KACV,eAAe,EAAS,EAAW,gCAAgC,EAAO,GAAG,CAAC;eAJhF,CAME,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAwB,EAAO;OAAY,CAAA,EAC3D,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG,EAAM,EAAO,aAAa,EAAO,SAAS;QAAC;QAAG;QAC9C,EAAM,EAAO,eAAe,EAAO,SAAS;QACxC;SACH;SACN,kBAAC,OAAD;MAAK,WAAW,oDAAoD,EAAM;gBACxE,kBAAC,OAAD;OACE,WAAW,uBAAuB,EAAM;OACxC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,KAAW,GAAG,IAAI,CAAC,IAAI;OACnD,CAAA;MACE,CAAA,CACC;OAlBF,EAAO,GAkBL;KAEX;GACD,IAAQ,KACP,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,WAAU;IACV,eA1DR,EAAS,oCAAoC,mBAAmB,EAAU,GAAG;cAsDvE,CAKC,oBAEC,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CAC3B;;GAEC;IACT,EAAA,CAAA"}

package/dist/planmagnet/budgets/budgetMath.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType } from 'react';
+
+/**
+ * Budget math and the meter's visual language, shared by every screen that shows a
+ * budget's spend against its plan: the Analytics "Budget performance" card
+ * (`analytics/DeliveryHealthCards.tsx`) and the Budgets list/detail pages (BOFF-8047).
+ *
+ * Kept in one place so the two surfaces can never disagree about what "near limit" or
+ * "over budget" means — they read the same thresholds and the same colour/icon pairing.
+ */
+export type BudgetState = 'no-plan' | 'on-track' | 'near-limit' | 'over-budget';
+/** Share of the plan spent; `null` when there is no plan to measure against. */
+export declare function budgetUsage(planned: number, spent: number): number | null;
+export declare function budgetState(usage: number | null): BudgetState;
+export declare const BUDGET_STATE_STYLE: Record<BudgetState, {
+    track: string;
+    fill: string;
+    icon: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    text: string;
+}>;
+/** Money, in the budget's own currency. Falls back to a plain number when the currency code is not recognised. */
+export declare function money(amount: number, currency: string): string;
+//# sourceMappingURL=budgetMath.d.ts.map

package/dist/planmagnet/budgets/budgetMath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"budgetMath.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/budgets/budgetMath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C;;;;;;;GAOG;AAEH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;AAEhF,gFAAgF;AAChF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGzE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,WAAW,CAM7D;AAED,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX;IACE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACrE,IAAI,EAAE,MAAM,CAAC;CACd,CA0BF,CAAC;AAEF,kHAAkH;AAClH,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAW9D"}

package/dist/planmagnet/budgets/budgetMath.js

@@ -0,0 +1,49 @@
+import { AlertOctagon as e, AlertTriangle as t, CheckCircle2 as n, CircleDashed as r } from "lucide-react";
+//#region src/planmagnet/budgets/budgetMath.ts
+function i(e, t) {
+	return !Number.isFinite(e) || e <= 0 ? null : t / e;
+}
+function a(e) {
+	return e === null ? "no-plan" : e <= .85 ? "on-track" : e <= 1 ? "near-limit" : "over-budget";
+}
+var o = {
+	"no-plan": {
+		track: "bg-muted",
+		fill: "bg-muted",
+		icon: r,
+		text: "text-muted-foreground"
+	},
+	"on-track": {
+		track: "bg-primary/15",
+		fill: "bg-primary",
+		icon: n,
+		text: "text-muted-foreground"
+	},
+	"near-limit": {
+		track: "bg-status-warning-subtle",
+		fill: "bg-status-warning",
+		icon: t,
+		text: "text-status-warning-text"
+	},
+	"over-budget": {
+		track: "bg-status-error-subtle",
+		fill: "bg-status-error",
+		icon: e,
+		text: "text-status-error-text"
+	}
+};
+function s(e, t) {
+	try {
+		return new Intl.NumberFormat(void 0, {
+			style: "currency",
+			currency: t,
+			maximumFractionDigits: 0
+		}).format(e);
+	} catch {
+		return `${Math.round(e).toLocaleString()} ${t}`;
+	}
+}
+//#endregion
+export { o as BUDGET_STATE_STYLE, a as budgetState, i as budgetUsage, s as money };
+
+//# sourceMappingURL=budgetMath.js.map

package/dist/planmagnet/budgets/budgetMath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"budgetMath.js","names":[],"sources":["../../../src/planmagnet/budgets/budgetMath.ts"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { AlertOctagon, AlertTriangle, CheckCircle2, CircleDashed } from 'lucide-react';\n\n/**\n * Budget math and the meter's visual language, shared by every screen that shows a\n * budget's spend against its plan: the Analytics \"Budget performance\" card\n * (`analytics/DeliveryHealthCards.tsx`) and the Budgets list/detail pages (BOFF-8047).\n *\n * Kept in one place so the two surfaces can never disagree about what \"near limit\" or\n * \"over budget\" means — they read the same thresholds and the same colour/icon pairing.\n */\n\nexport type BudgetState = 'no-plan' | 'on-track' | 'near-limit' | 'over-budget';\n\n/** Share of the plan spent; `null` when there is no plan to measure against. */\nexport function budgetUsage(planned: number, spent: number): number | null {\n  if (!Number.isFinite(planned) || planned <= 0) return null;\n  return spent / planned;\n}\n\nexport function budgetState(usage: number | null): BudgetState {\n  // Without a plan there is nothing to be on track AGAINST — say so, rather\n  // than reporting a comforting \"On track\" the numbers cannot support.\n  if (usage === null) return 'no-plan';\n  if (usage <= 0.85) return 'on-track';\n  return usage <= 1 ? 'near-limit' : 'over-budget';\n}\n\nexport const BUDGET_STATE_STYLE: Record<\n  BudgetState,\n  {\n    track: string;\n    fill: string;\n    icon: ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;\n    text: string;\n  }\n> = {\n  'no-plan': {\n    track: 'bg-muted',\n    fill: 'bg-muted',\n    icon: CircleDashed,\n    text: 'text-muted-foreground',\n  },\n  'on-track': {\n    track: 'bg-primary/15',\n    fill: 'bg-primary',\n    icon: CheckCircle2,\n    text: 'text-muted-foreground',\n  },\n  'near-limit': {\n    track: 'bg-status-warning-subtle',\n    fill: 'bg-status-warning',\n    icon: AlertTriangle,\n    text: 'text-status-warning-text',\n  },\n  'over-budget': {\n    track: 'bg-status-error-subtle',\n    fill: 'bg-status-error',\n    icon: AlertOctagon,\n    text: 'text-status-error-text',\n  },\n};\n\n/** Money, in the budget's own currency. Falls back to a plain number when the currency code is not recognised. */\nexport function money(amount: number, currency: string): string {\n  try {\n    return new Intl.NumberFormat(undefined, {\n      style: 'currency',\n      currency,\n      maximumFractionDigits: 0,\n    }).format(amount);\n  } catch {\n    // An unrecognised currency code must not blank the whole table.\n    return `${Math.round(amount).toLocaleString()} ${currency}`;\n  }\n}\n"],"mappings":";;AAeA,SAAgB,EAAY,GAAiB,GAA8B;AAEzE,QADI,CAAC,OAAO,SAAS,EAAQ,IAAI,KAAW,IAAU,OAC/C,IAAQ;;AAGjB,SAAgB,EAAY,GAAmC;AAK7D,QAFI,MAAU,OAAa,YACvB,KAAS,MAAa,aACnB,KAAS,IAAI,eAAe;;AAGrC,IAAa,IAQT;CACF,WAAW;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,YAAY;EACV,OAAO;EACP,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,cAAc;EACZ,OAAO;EACP,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACD,eAAe;EACb,OAAO;EACP,MAAM;EACN,MAAM;EACN,MAAM;EACP;CACF;AAGD,SAAgB,EAAM,GAAgB,GAA0B;AAC9D,KAAI;AACF,SAAO,IAAI,KAAK,aAAa,KAAA,GAAW;GACtC,OAAO;GACP;GACA,uBAAuB;GACxB,CAAC,CAAC,OAAO,EAAO;SACX;AAEN,SAAO,GAAG,KAAK,MAAM,EAAO,CAAC,gBAAgB,CAAC,GAAG"}