@burdenoff/microfe-proserviceworld 2026.706.2 → 2026.706.3

package/dist/proserviceworld/pages/InvoicesPage.js

@@ -1,133 +1,148 @@
 import { useClients as e, useCreateInvoice as t, useEngagements as n, useInvoices as r, useMarkInvoicePaid as i } from "../hooks/useProServiceWorldApi.js";
-import { Banner as a, Empty as o, ErrorState as s, Field as c, LoadingBlock as l, MetricCard as u, Modal as d, NativeSelect as f, PageHeader as p, SectionCard as m, StatusPill as h, TableWrap as g, Td as _, TextArea as v, TextInput as y, Th as b, enumOptions as x, fmtDate as S, fmtMoney as C } from "../components/ui.js";
-import { useMemo as w, useState as T } from "react";
-import { CheckCircle2 as E, Plus as D, Receipt as O } from "lucide-react";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
-import { Button as M } from "@burdenoff/fe-libs/ui";
+import { cn as a } from "../utils/cn.js";
+import { Banner as o, Empty as s, ErrorState as c, Field as l, LoadingBlock as u, MetricCard as d, Modal as f, NativeSelect as p, PageHeader as m, SectionCard as h, StatusPill as g, TableWrap as _, Td as v, TextArea as y, TextInput as b, Th as x, enumOptions as S, fmtDate as C, fmtMoney as w } from "../components/ui.js";
+import { useMemo as T, useState as E } from "react";
+import { AlertCircle as D, CheckCircle2 as O, Plus as k, Receipt as A, Wallet as j } from "lucide-react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { Button as F } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/InvoicesPage.tsx
-var N = [
+var I = [
 	"DRAFT",
 	"SENT",
 	"PAID",
 	"OVERDUE",
 	"CANCELLED"
-], P = () => {
-	let [t, n] = T(""), [c, d] = T(!1), [v, y] = T(null), { data: k, isLoading: P, error: I, refetch: L } = r({ status: t || void 0 }), R = i(), z = e({ pagination: { limit: 100 } }), B = w(() => new Map((z.data?.items ?? []).map((e) => [e.id, e.name])), [z.data]), V = (k?.items ?? []).filter((e) => e.status === "SENT" || e.status === "OVERDUE").reduce((e, t) => e + t.total, 0), H = (k?.items ?? []).filter((e) => e.status === "PAID").reduce((e, t) => e + t.total, 0);
-	return /* @__PURE__ */ j("div", {
+], L = () => {
+	let [t, n] = E(""), [l, f] = E(!1), [y, b] = E(null), { data: M, isLoading: L, error: z, refetch: B } = r({ status: t || void 0 }), V = i(), H = e({ pagination: { limit: 100 } }), U = T(() => new Map((H.data?.items ?? []).map((e) => [e.id, e.name])), [H.data]), W = (M?.items ?? []).filter((e) => e.status === "SENT" || e.status === "OVERDUE"), G = (M?.items ?? []).filter((e) => e.status === "PAID"), K = W.reduce((e, t) => e + t.total, 0), q = G.reduce((e, t) => e + t.total, 0);
+	return /* @__PURE__ */ P("div", {
 		className: "space-y-6",
 		children: [
-			/* @__PURE__ */ A(p, {
+			/* @__PURE__ */ N(m, {
 				title: "Invoices",
 				subtitle: "Assemble invoices from time, milestones and fixed-fee schedules — and track what's outstanding.",
-				icon: /* @__PURE__ */ A(O, { className: "h-6 w-6" }),
-				actions: /* @__PURE__ */ j(M, {
-					onClick: () => d(!0),
-					children: [/* @__PURE__ */ A(D, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
+				icon: /* @__PURE__ */ N(A, { className: "h-6 w-6" }),
+				actions: /* @__PURE__ */ P(F, {
+					onClick: () => f(!0),
+					children: [/* @__PURE__ */ N(k, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
 				})
 			}),
-			v && /* @__PURE__ */ A(a, {
-				tone: v.tone,
-				onClose: () => y(null),
-				children: v.text
+			y && /* @__PURE__ */ N(o, {
+				tone: y.tone,
+				onClose: () => b(null),
+				children: y.text
 			}),
-			/* @__PURE__ */ j("div", {
-				className: "grid grid-cols-3 gap-3",
+			/* @__PURE__ */ P("div", {
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-3",
 				children: [
-					/* @__PURE__ */ A(u, {
+					/* @__PURE__ */ N(d, {
 						label: "Invoices",
-						value: k?.totalCount ?? 0
+						value: M?.totalCount ?? 0,
+						icon: /* @__PURE__ */ N(A, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ A(u, {
+					/* @__PURE__ */ N(d, {
 						label: "Outstanding",
-						value: C(V),
+						value: w(K),
+						hint: `${W.length} sent + overdue`,
+						icon: /* @__PURE__ */ N(D, { className: "h-4 w-4" }),
 						tone: "warning"
 					}),
-					/* @__PURE__ */ A(u, {
+					/* @__PURE__ */ N(d, {
 						label: "Collected",
-						value: C(H),
+						value: w(q),
+						hint: `${G.length} paid`,
+						icon: /* @__PURE__ */ N(j, { className: "h-4 w-4" }),
 						tone: "success"
 					})
 				]
 			}),
-			/* @__PURE__ */ A("div", {
+			/* @__PURE__ */ N("div", {
 				className: "flex justify-end",
-				children: /* @__PURE__ */ j(f, {
+				children: /* @__PURE__ */ P(p, {
 					value: t,
 					onChange: (e) => n(e.target.value),
 					className: "sm:w-48",
-					children: [/* @__PURE__ */ A("option", {
+					children: [/* @__PURE__ */ N("option", {
 						value: "",
 						children: "All statuses"
-					}), x(N)]
+					}), S(I)]
 				})
 			}),
-			P ? /* @__PURE__ */ A(l, {}) : I ? /* @__PURE__ */ A(s, {
-				error: I,
-				onRetry: () => void L()
-			}) : !k || k.items.length === 0 ? /* @__PURE__ */ A(o, {
+			L ? /* @__PURE__ */ N(u, {}) : z ? /* @__PURE__ */ N(c, {
+				error: z,
+				onRetry: () => void B()
+			}) : !M || M.items.length === 0 ? /* @__PURE__ */ N(s, {
 				title: "No invoices yet",
 				description: "Raise an invoice for a client to start tracking receivables.",
-				icon: /* @__PURE__ */ A(O, { className: "h-8 w-8" }),
-				action: /* @__PURE__ */ j(M, {
-					onClick: () => d(!0),
-					children: [/* @__PURE__ */ A(D, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
+				icon: /* @__PURE__ */ N(A, { className: "h-8 w-8" }),
+				action: /* @__PURE__ */ P(F, {
+					onClick: () => f(!0),
+					children: [/* @__PURE__ */ N(k, { className: "mr-1.5 h-4 w-4" }), "New invoice"]
 				})
-			}) : /* @__PURE__ */ A(m, {
+			}) : /* @__PURE__ */ N(h, {
 				title: "Invoices",
-				children: /* @__PURE__ */ j(g, { children: [/* @__PURE__ */ A("thead", { children: /* @__PURE__ */ j("tr", { children: [
-					/* @__PURE__ */ A(b, { children: "Number" }),
-					/* @__PURE__ */ A(b, { children: "Client" }),
-					/* @__PURE__ */ A(b, { children: "Total" }),
-					/* @__PURE__ */ A(b, { children: "Status" }),
-					/* @__PURE__ */ A(b, { children: "Due" }),
-					/* @__PURE__ */ A(b, {
+				children: /* @__PURE__ */ P(_, { children: [/* @__PURE__ */ N("thead", { children: /* @__PURE__ */ P("tr", { children: [
+					/* @__PURE__ */ N(x, { children: "Number" }),
+					/* @__PURE__ */ N(x, { children: "Client" }),
+					/* @__PURE__ */ N(x, { children: "Total" }),
+					/* @__PURE__ */ N(x, { children: "Status" }),
+					/* @__PURE__ */ N(x, { children: "Due" }),
+					/* @__PURE__ */ N(x, {
 						className: "text-right",
 						children: "Actions"
 					})
-				] }) }), /* @__PURE__ */ A("tbody", { children: k.items.map((e) => /* @__PURE__ */ j("tr", {
-					className: "hover:bg-bg-sunken/50",
+				] }) }), /* @__PURE__ */ N("tbody", { children: M.items.map((e) => /* @__PURE__ */ P("tr", {
+					className: "transition-colors hover:bg-bg-sunken/60",
 					children: [
-						/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A("span", {
+						/* @__PURE__ */ N(v, { children: /* @__PURE__ */ N("span", {
 							className: "font-medium text-text-primary",
 							children: e.number
 						}) }),
-						/* @__PURE__ */ A(_, { children: B.get(e.clientId) ?? "—" }),
-						/* @__PURE__ */ A(_, { children: C(e.total, e.currency) }),
-						/* @__PURE__ */ A(_, { children: /* @__PURE__ */ A(h, { status: e.status }) }),
-						/* @__PURE__ */ A(_, { children: S(e.dueDate) }),
-						/* @__PURE__ */ A(_, {
+						/* @__PURE__ */ N(v, {
+							className: "text-text-primary",
+							children: U.get(e.clientId) ?? "—"
+						}),
+						/* @__PURE__ */ N(v, {
+							className: "whitespace-nowrap font-semibold text-text-primary",
+							children: w(e.total, e.currency)
+						}),
+						/* @__PURE__ */ N(v, { children: /* @__PURE__ */ N(g, { status: e.status }) }),
+						/* @__PURE__ */ N(v, {
+							className: a("whitespace-nowrap", e.status === "OVERDUE" && "font-medium text-status-error-text"),
+							children: C(e.dueDate)
+						}),
+						/* @__PURE__ */ N(v, {
 							className: "text-right",
-							children: e.status !== "PAID" && e.status !== "CANCELLED" && /* @__PURE__ */ j(M, {
+							children: e.status !== "PAID" && e.status !== "CANCELLED" && /* @__PURE__ */ P(F, {
 								variant: "ghost",
 								size: "sm",
-								disabled: R.isPending,
-								onClick: () => R.mutate(e.id, {
-									onSuccess: () => y({
+								disabled: V.isPending,
+								onClick: () => V.mutate(e.id, {
+									onSuccess: () => b({
 										tone: "success",
 										text: `${e.number} marked paid.`
 									}),
-									onError: (e) => y({
+									onError: (e) => b({
 										tone: "danger",
 										text: e instanceof Error ? e.message : "Failed."
 									})
 								}),
-								children: [/* @__PURE__ */ A(E, { className: "mr-1 h-4 w-4" }), "Mark paid"]
+								children: [/* @__PURE__ */ N(O, { className: "mr-1 h-4 w-4" }), "Mark paid"]
 							})
 						})
 					]
 				}, e.id)) })] })
 			}),
-			c && /* @__PURE__ */ A(F, {
-				onClose: () => d(!1),
-				onSaved: (e) => y({
+			l && /* @__PURE__ */ N(R, {
+				onClose: () => f(!1),
+				onSaved: (e) => b({
 					tone: "success",
 					text: `${e} created.`
 				})
 			})
 		]
 	});
-}, F = ({ onClose: r, onSaved: i }) => {
-	let o = t(), s = e({ pagination: { limit: 100 } }), [l, u] = T({
+}, R = ({ onClose: r, onSaved: i }) => {
+	let a = t(), s = e({ pagination: { limit: 100 } }), [c, u] = E({
 		clientId: "",
 		engagementId: "",
 		number: "",
@@ -137,159 +152,159 @@ var N = [
 		issueDate: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
 		dueDate: "",
 		notes: ""
-	}), [p, m] = T(null), h = n({
-		clientId: l.clientId || void 0,
+	}), [d, m] = E(null), h = n({
+		clientId: c.clientId || void 0,
 		pagination: { limit: 100 }
 	}), g = (e) => (t) => u((n) => ({
 		...n,
 		[e]: t.target.value
-	})), _ = (Number(l.subtotal) || 0) + (Number(l.taxAmount) || 0);
-	return /* @__PURE__ */ A(d, {
+	})), _ = (Number(c.subtotal) || 0) + (Number(c.taxAmount) || 0);
+	return /* @__PURE__ */ N(f, {
 		open: !0,
 		onClose: r,
 		title: "New invoice",
-		footer: /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(M, {
+		footer: /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(F, {
 			variant: "outline",
 			onClick: r,
-			disabled: o.isPending,
+			disabled: a.isPending,
 			children: "Cancel"
-		}), /* @__PURE__ */ A(M, {
+		}), /* @__PURE__ */ N(F, {
 			onClick: () => {
-				if (m(null), !l.clientId) return m("Select a client.");
-				if (!l.number.trim()) return m("Invoice number is required.");
-				o.mutate({
-					clientId: l.clientId,
-					engagementId: l.engagementId || null,
-					number: l.number.trim(),
-					currency: l.currency || "USD",
-					subtotal: Number(l.subtotal) || 0,
-					taxAmount: Number(l.taxAmount) || 0,
+				if (m(null), !c.clientId) return m("Select a client.");
+				if (!c.number.trim()) return m("Invoice number is required.");
+				a.mutate({
+					clientId: c.clientId,
+					engagementId: c.engagementId || null,
+					number: c.number.trim(),
+					currency: c.currency || "USD",
+					subtotal: Number(c.subtotal) || 0,
+					taxAmount: Number(c.taxAmount) || 0,
 					total: _,
-					issueDate: l.issueDate ? new Date(l.issueDate).toISOString() : null,
-					dueDate: l.dueDate ? new Date(l.dueDate).toISOString() : null,
-					notes: l.notes.trim() || null
+					issueDate: c.issueDate ? new Date(c.issueDate).toISOString() : null,
+					dueDate: c.dueDate ? new Date(c.dueDate).toISOString() : null,
+					notes: c.notes.trim() || null
 				}, {
 					onSuccess: () => {
-						i(l.number.trim()), r();
+						i(c.number.trim()), r();
 					},
 					onError: (e) => m(e instanceof Error ? e.message : "Failed.")
 				});
 			},
-			disabled: o.isPending,
-			children: o.isPending ? "Creating…" : "Create invoice"
+			disabled: a.isPending,
+			children: a.isPending ? "Creating…" : "Create invoice"
 		})] }),
-		children: /* @__PURE__ */ j("div", {
+		children: /* @__PURE__ */ P("div", {
 			className: "space-y-3",
 			children: [
-				p && /* @__PURE__ */ A(a, {
+				d && /* @__PURE__ */ N(o, {
 					tone: "danger",
-					children: p
+					children: d
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-2 gap-3",
-					children: [/* @__PURE__ */ A(c, {
+					children: [/* @__PURE__ */ N(l, {
 						label: "Client",
 						required: !0,
-						children: /* @__PURE__ */ j(f, {
-							value: l.clientId,
+						children: /* @__PURE__ */ P(p, {
+							value: c.clientId,
 							onChange: g("clientId"),
-							children: [/* @__PURE__ */ A("option", {
+							children: [/* @__PURE__ */ N("option", {
 								value: "",
 								children: "Select…"
-							}), s.data?.items.map((e) => /* @__PURE__ */ A("option", {
+							}), s.data?.items.map((e) => /* @__PURE__ */ N("option", {
 								value: e.id,
 								children: e.name
 							}, e.id))]
 						})
-					}), /* @__PURE__ */ A(c, {
+					}), /* @__PURE__ */ N(l, {
 						label: "Number",
 						required: !0,
-						children: /* @__PURE__ */ A(y, {
-							value: l.number,
+						children: /* @__PURE__ */ N(b, {
+							value: c.number,
 							onChange: g("number"),
 							placeholder: "INV-2026-014"
 						})
 					})]
 				}),
-				/* @__PURE__ */ A(c, {
+				/* @__PURE__ */ N(l, {
 					label: "Engagement (optional)",
-					children: /* @__PURE__ */ j(f, {
-						value: l.engagementId,
+					children: /* @__PURE__ */ P(p, {
+						value: c.engagementId,
 						onChange: g("engagementId"),
-						disabled: !l.clientId,
-						children: [/* @__PURE__ */ A("option", {
+						disabled: !c.clientId,
+						children: [/* @__PURE__ */ N("option", {
 							value: "",
 							children: "None"
-						}), h.data?.items.map((e) => /* @__PURE__ */ A("option", {
+						}), h.data?.items.map((e) => /* @__PURE__ */ N("option", {
 							value: e.id,
 							children: e.name
 						}, e.id))]
 					})
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-3 gap-3",
 					children: [
-						/* @__PURE__ */ A(c, {
+						/* @__PURE__ */ N(l, {
 							label: "Subtotal",
-							children: /* @__PURE__ */ A(y, {
+							children: /* @__PURE__ */ N(b, {
 								type: "number",
 								min: "0",
-								value: l.subtotal,
+								value: c.subtotal,
 								onChange: g("subtotal")
 							})
 						}),
-						/* @__PURE__ */ A(c, {
+						/* @__PURE__ */ N(l, {
 							label: "Tax",
-							children: /* @__PURE__ */ A(y, {
+							children: /* @__PURE__ */ N(b, {
 								type: "number",
 								min: "0",
-								value: l.taxAmount,
+								value: c.taxAmount,
 								onChange: g("taxAmount")
 							})
 						}),
-						/* @__PURE__ */ A(c, {
+						/* @__PURE__ */ N(l, {
 							label: "Currency",
-							children: /* @__PURE__ */ A(y, {
-								value: l.currency,
+							children: /* @__PURE__ */ N(b, {
+								value: c.currency,
 								onChange: g("currency"),
 								maxLength: 3
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ P("div", {
 					className: "rounded-lg bg-bg-sunken px-3 py-2 text-sm text-text-secondary",
 					children: [
 						"Total:",
 						" ",
-						/* @__PURE__ */ A("span", {
+						/* @__PURE__ */ N("span", {
 							className: "font-semibold text-text-primary",
-							children: C(_, l.currency)
+							children: w(_, c.currency)
 						})
 					]
 				}),
-				/* @__PURE__ */ j("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-2 gap-3",
-					children: [/* @__PURE__ */ A(c, {
+					children: [/* @__PURE__ */ N(l, {
 						label: "Issue date",
-						children: /* @__PURE__ */ A(y, {
+						children: /* @__PURE__ */ N(b, {
 							type: "date",
-							value: l.issueDate,
+							value: c.issueDate,
 							onChange: g("issueDate")
 						})
-					}), /* @__PURE__ */ A(c, {
+					}), /* @__PURE__ */ N(l, {
 						label: "Due date",
-						children: /* @__PURE__ */ A(y, {
+						children: /* @__PURE__ */ N(b, {
 							type: "date",
-							value: l.dueDate,
+							value: c.dueDate,
 							onChange: g("dueDate")
 						})
 					})]
 				}),
-				/* @__PURE__ */ A(c, {
+				/* @__PURE__ */ N(l, {
 					label: "Notes",
-					children: /* @__PURE__ */ A(v, {
-						value: l.notes,
+					children: /* @__PURE__ */ N(y, {
+						value: c.notes,
 						onChange: g("notes")
 					})
 				})
@@ -298,6 +313,6 @@ var N = [
 	});
 };
 //#endregion
-export { P as InvoicesPage };
+export { L as InvoicesPage };
 
 //# sourceMappingURL=InvoicesPage.js.map

package/dist/proserviceworld/pages/InvoicesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InvoicesPage.js","names":[],"sources":["../../../src/proserviceworld/pages/InvoicesPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus, Receipt, CheckCircle2 } from 'lucide-react';\nimport {\n  useInvoices,\n  useCreateInvoice,\n  useMarkInvoicePaid,\n  useClients,\n  useEngagements,\n  type PswInvoiceStatus,\n} from '../hooks/useProServiceWorldApi';\nimport {\n  PageHeader,\n  SectionCard,\n  LoadingBlock,\n  ErrorState,\n  Empty,\n  StatusPill,\n  Modal,\n  Field,\n  TextInput,\n  TextArea,\n  NativeSelect,\n  Banner,\n  MetricCard,\n  TableWrap,\n  Th,\n  Td,\n  enumOptions,\n  fmtDate,\n  fmtMoney,\n} from '../components/ui';\n\nconst STATUSES: PswInvoiceStatus[] = ['DRAFT', 'SENT', 'PAID', 'OVERDUE', 'CANCELLED'];\n\nexport const InvoicesPage: FC = () => {\n  const [statusFilter, setStatusFilter] = useState<PswInvoiceStatus | ''>('');\n  const [creating, setCreating] = useState(false);\n  const [banner, setBanner] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);\n  const { data, isLoading, error, refetch } = useInvoices({ status: statusFilter || undefined });\n  const markPaid = useMarkInvoicePaid();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const clientName = useMemo(\n    () => new Map((clients.data?.items ?? []).map((c) => [c.id, c.name])),\n    [clients.data]\n  );\n\n  const outstanding = (data?.items ?? [])\n    .filter((i) => i.status === 'SENT' || i.status === 'OVERDUE')\n    .reduce((s, i) => s + i.total, 0);\n  const collected = (data?.items ?? [])\n    .filter((i) => i.status === 'PAID')\n    .reduce((s, i) => s + i.total, 0);\n\n  return (\n    <div className=\"space-y-6\">\n      <PageHeader\n        title=\"Invoices\"\n        subtitle=\"Assemble invoices from time, milestones and fixed-fee schedules — and track what's outstanding.\"\n        icon={<Receipt className=\"h-6 w-6\" />}\n        actions={\n          <Button onClick={() => setCreating(true)}>\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            New invoice\n          </Button>\n        }\n      />\n\n      {banner && (\n        <Banner tone={banner.tone} onClose={() => setBanner(null)}>\n          {banner.text}\n        </Banner>\n      )}\n\n      <div className=\"grid grid-cols-3 gap-3\">\n        <MetricCard label=\"Invoices\" value={data?.totalCount ?? 0} />\n        <MetricCard label=\"Outstanding\" value={fmtMoney(outstanding)} tone=\"warning\" />\n        <MetricCard label=\"Collected\" value={fmtMoney(collected)} tone=\"success\" />\n      </div>\n\n      <div className=\"flex justify-end\">\n        <NativeSelect\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value as PswInvoiceStatus | '')}\n          className=\"sm:w-48\"\n        >\n          <option value=\"\">All statuses</option>\n          {enumOptions(STATUSES)}\n        </NativeSelect>\n      </div>\n\n      {isLoading ? (\n        <LoadingBlock />\n      ) : error ? (\n        <ErrorState error={error} onRetry={() => void refetch()} />\n      ) : !data || data.items.length === 0 ? (\n        <Empty\n          title=\"No invoices yet\"\n          description=\"Raise an invoice for a client to start tracking receivables.\"\n          icon={<Receipt className=\"h-8 w-8\" />}\n          action={\n            <Button onClick={() => setCreating(true)}>\n              <Plus className=\"mr-1.5 h-4 w-4\" />\n              New invoice\n            </Button>\n          }\n        />\n      ) : (\n        <SectionCard title=\"Invoices\">\n          <TableWrap>\n            <thead>\n              <tr>\n                <Th>Number</Th>\n                <Th>Client</Th>\n                <Th>Total</Th>\n                <Th>Status</Th>\n                <Th>Due</Th>\n                <Th className=\"text-right\">Actions</Th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.items.map((i) => (\n                <tr key={i.id} className=\"hover:bg-bg-sunken/50\">\n                  <Td>\n                    <span className=\"font-medium text-text-primary\">{i.number}</span>\n                  </Td>\n                  <Td>{clientName.get(i.clientId) ?? '—'}</Td>\n                  <Td>{fmtMoney(i.total, i.currency)}</Td>\n                  <Td>\n                    <StatusPill status={i.status} />\n                  </Td>\n                  <Td>{fmtDate(i.dueDate)}</Td>\n                  <Td className=\"text-right\">\n                    {i.status !== 'PAID' && i.status !== 'CANCELLED' && (\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        disabled={markPaid.isPending}\n                        onClick={() =>\n                          markPaid.mutate(i.id, {\n                            onSuccess: () =>\n                              setBanner({ tone: 'success', text: `${i.number} marked paid.` }),\n                            onError: (e) =>\n                              setBanner({\n                                tone: 'danger',\n                                text: e instanceof Error ? e.message : 'Failed.',\n                              }),\n                          })\n                        }\n                      >\n                        <CheckCircle2 className=\"mr-1 h-4 w-4\" />\n                        Mark paid\n                      </Button>\n                    )}\n                  </Td>\n                </tr>\n              ))}\n            </tbody>\n          </TableWrap>\n        </SectionCard>\n      )}\n\n      {creating && (\n        <InvoiceModal\n          onClose={() => setCreating(false)}\n          onSaved={(n) => setBanner({ tone: 'success', text: `${n} created.` })}\n        />\n      )}\n    </div>\n  );\n};\n\nconst InvoiceModal: FC<{ onClose: () => void; onSaved: (number: string) => void }> = ({\n  onClose,\n  onSaved,\n}) => {\n  const create = useCreateInvoice();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const [form, setForm] = useState({\n    clientId: '',\n    engagementId: '',\n    number: '',\n    currency: 'USD',\n    subtotal: '',\n    taxAmount: '',\n    issueDate: new Date().toISOString().slice(0, 10),\n    dueDate: '',\n    notes: '',\n  });\n  const [err, setErr] = useState<string | null>(null);\n  const engagements = useEngagements({\n    clientId: form.clientId || undefined,\n    pagination: { limit: 100 },\n  });\n  const set = (k: keyof typeof form) => (e: { target: { value: string } }) =>\n    setForm((f) => ({ ...f, [k]: e.target.value }));\n  const total = (Number(form.subtotal) || 0) + (Number(form.taxAmount) || 0);\n\n  const submit = () => {\n    setErr(null);\n    if (!form.clientId) return setErr('Select a client.');\n    if (!form.number.trim()) return setErr('Invoice number is required.');\n    create.mutate(\n      {\n        clientId: form.clientId,\n        engagementId: form.engagementId || null,\n        number: form.number.trim(),\n        currency: form.currency || 'USD',\n        subtotal: Number(form.subtotal) || 0,\n        taxAmount: Number(form.taxAmount) || 0,\n        total,\n        issueDate: form.issueDate ? new Date(form.issueDate).toISOString() : null,\n        dueDate: form.dueDate ? new Date(form.dueDate).toISOString() : null,\n        notes: form.notes.trim() || null,\n      },\n      {\n        onSuccess: () => {\n          onSaved(form.number.trim());\n          onClose();\n        },\n        onError: (e) => setErr(e instanceof Error ? e.message : 'Failed.'),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      open\n      onClose={onClose}\n      title=\"New invoice\"\n      footer={\n        <>\n          <Button variant=\"outline\" onClick={onClose} disabled={create.isPending}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={create.isPending}>\n            {create.isPending ? 'Creating…' : 'Create invoice'}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"space-y-3\">\n        {err && <Banner tone=\"danger\">{err}</Banner>}\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Client\" required>\n            <NativeSelect value={form.clientId} onChange={set('clientId')}>\n              <option value=\"\">Select…</option>\n              {clients.data?.items.map((c) => (\n                <option key={c.id} value={c.id}>\n                  {c.name}\n                </option>\n              ))}\n            </NativeSelect>\n          </Field>\n          <Field label=\"Number\" required>\n            <TextInput value={form.number} onChange={set('number')} placeholder=\"INV-2026-014\" />\n          </Field>\n        </div>\n        <Field label=\"Engagement (optional)\">\n          <NativeSelect\n            value={form.engagementId}\n            onChange={set('engagementId')}\n            disabled={!form.clientId}\n          >\n            <option value=\"\">None</option>\n            {engagements.data?.items.map((e) => (\n              <option key={e.id} value={e.id}>\n                {e.name}\n              </option>\n            ))}\n          </NativeSelect>\n        </Field>\n        <div className=\"grid grid-cols-3 gap-3\">\n          <Field label=\"Subtotal\">\n            <TextInput type=\"number\" min=\"0\" value={form.subtotal} onChange={set('subtotal')} />\n          </Field>\n          <Field label=\"Tax\">\n            <TextInput type=\"number\" min=\"0\" value={form.taxAmount} onChange={set('taxAmount')} />\n          </Field>\n          <Field label=\"Currency\">\n            <TextInput value={form.currency} onChange={set('currency')} maxLength={3} />\n          </Field>\n        </div>\n        <div className=\"rounded-lg bg-bg-sunken px-3 py-2 text-sm text-text-secondary\">\n          Total:{' '}\n          <span className=\"font-semibold text-text-primary\">{fmtMoney(total, form.currency)}</span>\n        </div>\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Issue date\">\n            <TextInput type=\"date\" value={form.issueDate} onChange={set('issueDate')} />\n          </Field>\n          <Field label=\"Due date\">\n            <TextInput type=\"date\" value={form.dueDate} onChange={set('dueDate')} />\n          </Field>\n        </div>\n        <Field label=\"Notes\">\n          <TextArea value={form.notes} onChange={set('notes')} />\n        </Field>\n      </div>\n    </Modal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"InvoicesPage.js","names":[],"sources":["../../../src/proserviceworld/pages/InvoicesPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus, Receipt, CheckCircle2, AlertCircle, Wallet } from 'lucide-react';\nimport {\n  useInvoices,\n  useCreateInvoice,\n  useMarkInvoicePaid,\n  useClients,\n  useEngagements,\n  type PswInvoiceStatus,\n} from '../hooks/useProServiceWorldApi';\nimport {\n  PageHeader,\n  SectionCard,\n  LoadingBlock,\n  ErrorState,\n  Empty,\n  StatusPill,\n  Modal,\n  Field,\n  TextInput,\n  TextArea,\n  NativeSelect,\n  Banner,\n  MetricCard,\n  TableWrap,\n  Th,\n  Td,\n  enumOptions,\n  fmtDate,\n  fmtMoney,\n} from '../components/ui';\nimport { cn } from '../utils/cn';\n\nconst STATUSES: PswInvoiceStatus[] = ['DRAFT', 'SENT', 'PAID', 'OVERDUE', 'CANCELLED'];\n\nexport const InvoicesPage: FC = () => {\n  const [statusFilter, setStatusFilter] = useState<PswInvoiceStatus | ''>('');\n  const [creating, setCreating] = useState(false);\n  const [banner, setBanner] = useState<{ tone: 'success' | 'danger'; text: string } | null>(null);\n  const { data, isLoading, error, refetch } = useInvoices({ status: statusFilter || undefined });\n  const markPaid = useMarkInvoicePaid();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const clientName = useMemo(\n    () => new Map((clients.data?.items ?? []).map((c) => [c.id, c.name])),\n    [clients.data]\n  );\n\n  const outstandingInvoices = (data?.items ?? []).filter(\n    (i) => i.status === 'SENT' || i.status === 'OVERDUE'\n  );\n  const paidInvoices = (data?.items ?? []).filter((i) => i.status === 'PAID');\n  const outstanding = outstandingInvoices.reduce((s, i) => s + i.total, 0);\n  const collected = paidInvoices.reduce((s, i) => s + i.total, 0);\n\n  return (\n    <div className=\"space-y-6\">\n      <PageHeader\n        title=\"Invoices\"\n        subtitle=\"Assemble invoices from time, milestones and fixed-fee schedules — and track what's outstanding.\"\n        icon={<Receipt className=\"h-6 w-6\" />}\n        actions={\n          <Button onClick={() => setCreating(true)}>\n            <Plus className=\"mr-1.5 h-4 w-4\" />\n            New invoice\n          </Button>\n        }\n      />\n\n      {banner && (\n        <Banner tone={banner.tone} onClose={() => setBanner(null)}>\n          {banner.text}\n        </Banner>\n      )}\n\n      <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n        <MetricCard\n          label=\"Invoices\"\n          value={data?.totalCount ?? 0}\n          icon={<Receipt className=\"h-4 w-4\" />}\n        />\n        <MetricCard\n          label=\"Outstanding\"\n          value={fmtMoney(outstanding)}\n          hint={`${outstandingInvoices.length} sent + overdue`}\n          icon={<AlertCircle className=\"h-4 w-4\" />}\n          tone=\"warning\"\n        />\n        <MetricCard\n          label=\"Collected\"\n          value={fmtMoney(collected)}\n          hint={`${paidInvoices.length} paid`}\n          icon={<Wallet className=\"h-4 w-4\" />}\n          tone=\"success\"\n        />\n      </div>\n\n      <div className=\"flex justify-end\">\n        <NativeSelect\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value as PswInvoiceStatus | '')}\n          className=\"sm:w-48\"\n        >\n          <option value=\"\">All statuses</option>\n          {enumOptions(STATUSES)}\n        </NativeSelect>\n      </div>\n\n      {isLoading ? (\n        <LoadingBlock />\n      ) : error ? (\n        <ErrorState error={error} onRetry={() => void refetch()} />\n      ) : !data || data.items.length === 0 ? (\n        <Empty\n          title=\"No invoices yet\"\n          description=\"Raise an invoice for a client to start tracking receivables.\"\n          icon={<Receipt className=\"h-8 w-8\" />}\n          action={\n            <Button onClick={() => setCreating(true)}>\n              <Plus className=\"mr-1.5 h-4 w-4\" />\n              New invoice\n            </Button>\n          }\n        />\n      ) : (\n        <SectionCard title=\"Invoices\">\n          <TableWrap>\n            <thead>\n              <tr>\n                <Th>Number</Th>\n                <Th>Client</Th>\n                <Th>Total</Th>\n                <Th>Status</Th>\n                <Th>Due</Th>\n                <Th className=\"text-right\">Actions</Th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.items.map((i) => (\n                <tr key={i.id} className=\"transition-colors hover:bg-bg-sunken/60\">\n                  <Td>\n                    <span className=\"font-medium text-text-primary\">{i.number}</span>\n                  </Td>\n                  <Td className=\"text-text-primary\">{clientName.get(i.clientId) ?? '—'}</Td>\n                  <Td className=\"whitespace-nowrap font-semibold text-text-primary\">\n                    {fmtMoney(i.total, i.currency)}\n                  </Td>\n                  <Td>\n                    <StatusPill status={i.status} />\n                  </Td>\n                  <Td\n                    className={cn(\n                      'whitespace-nowrap',\n                      i.status === 'OVERDUE' && 'font-medium text-status-error-text'\n                    )}\n                  >\n                    {fmtDate(i.dueDate)}\n                  </Td>\n                  <Td className=\"text-right\">\n                    {i.status !== 'PAID' && i.status !== 'CANCELLED' && (\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        disabled={markPaid.isPending}\n                        onClick={() =>\n                          markPaid.mutate(i.id, {\n                            onSuccess: () =>\n                              setBanner({ tone: 'success', text: `${i.number} marked paid.` }),\n                            onError: (e) =>\n                              setBanner({\n                                tone: 'danger',\n                                text: e instanceof Error ? e.message : 'Failed.',\n                              }),\n                          })\n                        }\n                      >\n                        <CheckCircle2 className=\"mr-1 h-4 w-4\" />\n                        Mark paid\n                      </Button>\n                    )}\n                  </Td>\n                </tr>\n              ))}\n            </tbody>\n          </TableWrap>\n        </SectionCard>\n      )}\n\n      {creating && (\n        <InvoiceModal\n          onClose={() => setCreating(false)}\n          onSaved={(n) => setBanner({ tone: 'success', text: `${n} created.` })}\n        />\n      )}\n    </div>\n  );\n};\n\nconst InvoiceModal: FC<{ onClose: () => void; onSaved: (number: string) => void }> = ({\n  onClose,\n  onSaved,\n}) => {\n  const create = useCreateInvoice();\n  const clients = useClients({ pagination: { limit: 100 } });\n  const [form, setForm] = useState({\n    clientId: '',\n    engagementId: '',\n    number: '',\n    currency: 'USD',\n    subtotal: '',\n    taxAmount: '',\n    issueDate: new Date().toISOString().slice(0, 10),\n    dueDate: '',\n    notes: '',\n  });\n  const [err, setErr] = useState<string | null>(null);\n  const engagements = useEngagements({\n    clientId: form.clientId || undefined,\n    pagination: { limit: 100 },\n  });\n  const set = (k: keyof typeof form) => (e: { target: { value: string } }) =>\n    setForm((f) => ({ ...f, [k]: e.target.value }));\n  const total = (Number(form.subtotal) || 0) + (Number(form.taxAmount) || 0);\n\n  const submit = () => {\n    setErr(null);\n    if (!form.clientId) return setErr('Select a client.');\n    if (!form.number.trim()) return setErr('Invoice number is required.');\n    create.mutate(\n      {\n        clientId: form.clientId,\n        engagementId: form.engagementId || null,\n        number: form.number.trim(),\n        currency: form.currency || 'USD',\n        subtotal: Number(form.subtotal) || 0,\n        taxAmount: Number(form.taxAmount) || 0,\n        total,\n        issueDate: form.issueDate ? new Date(form.issueDate).toISOString() : null,\n        dueDate: form.dueDate ? new Date(form.dueDate).toISOString() : null,\n        notes: form.notes.trim() || null,\n      },\n      {\n        onSuccess: () => {\n          onSaved(form.number.trim());\n          onClose();\n        },\n        onError: (e) => setErr(e instanceof Error ? e.message : 'Failed.'),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      open\n      onClose={onClose}\n      title=\"New invoice\"\n      footer={\n        <>\n          <Button variant=\"outline\" onClick={onClose} disabled={create.isPending}>\n            Cancel\n          </Button>\n          <Button onClick={submit} disabled={create.isPending}>\n            {create.isPending ? 'Creating…' : 'Create invoice'}\n          </Button>\n        </>\n      }\n    >\n      <div className=\"space-y-3\">\n        {err && <Banner tone=\"danger\">{err}</Banner>}\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Client\" required>\n            <NativeSelect value={form.clientId} onChange={set('clientId')}>\n              <option value=\"\">Select…</option>\n              {clients.data?.items.map((c) => (\n                <option key={c.id} value={c.id}>\n                  {c.name}\n                </option>\n              ))}\n            </NativeSelect>\n          </Field>\n          <Field label=\"Number\" required>\n            <TextInput value={form.number} onChange={set('number')} placeholder=\"INV-2026-014\" />\n          </Field>\n        </div>\n        <Field label=\"Engagement (optional)\">\n          <NativeSelect\n            value={form.engagementId}\n            onChange={set('engagementId')}\n            disabled={!form.clientId}\n          >\n            <option value=\"\">None</option>\n            {engagements.data?.items.map((e) => (\n              <option key={e.id} value={e.id}>\n                {e.name}\n              </option>\n            ))}\n          </NativeSelect>\n        </Field>\n        <div className=\"grid grid-cols-3 gap-3\">\n          <Field label=\"Subtotal\">\n            <TextInput type=\"number\" min=\"0\" value={form.subtotal} onChange={set('subtotal')} />\n          </Field>\n          <Field label=\"Tax\">\n            <TextInput type=\"number\" min=\"0\" value={form.taxAmount} onChange={set('taxAmount')} />\n          </Field>\n          <Field label=\"Currency\">\n            <TextInput value={form.currency} onChange={set('currency')} maxLength={3} />\n          </Field>\n        </div>\n        <div className=\"rounded-lg bg-bg-sunken px-3 py-2 text-sm text-text-secondary\">\n          Total:{' '}\n          <span className=\"font-semibold text-text-primary\">{fmtMoney(total, form.currency)}</span>\n        </div>\n        <div className=\"grid grid-cols-2 gap-3\">\n          <Field label=\"Issue date\">\n            <TextInput type=\"date\" value={form.issueDate} onChange={set('issueDate')} />\n          </Field>\n          <Field label=\"Due date\">\n            <TextInput type=\"date\" value={form.dueDate} onChange={set('dueDate')} />\n          </Field>\n        </div>\n        <Field label=\"Notes\">\n          <TextArea value={form.notes} onChange={set('notes')} />\n        </Field>\n      </div>\n    </Modal>\n  );\n};\n"],"mappings":"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"}