@burdenoff/microfe-subscriberbot 2026.706.2 → 2026.706.3

package/dist/subscriberbot/pages/InvoicesPage.js

@@ -5,15 +5,16 @@ import { MetricsCard as r } from "../components/MetricsCard.js";
 import { formatCurrency as i, formatDate as a } from "../utils/formatters.js";
 import { StatusBadge as o } from "../components/StatusBadge.js";
 import { EmptyState as s } from "../components/EmptyState.js";
-import { ErrorView as c, LoadingView as l, Section as u } from "../components/StateViews.js";
-import { useCreateInvoice as d, useCreatePaymentInstrument as f, useInvoices as p, useMarkInvoicePaid as m, usePaymentInstruments as h, useRelationships as g, useRemovePaymentInstrument as _ } from "../hooks/useSubscriberBotApi.js";
-import { Modal as v } from "../components/Modal.js";
-import { useMemo as y, useState as b } from "react";
-import { CreditCard as x, FileText as S, Plus as C, Receipt as w, Star as T, Trash2 as E } from "lucide-react";
-import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
-import { PagePurpose as A } from "@burdenoff/fe-libs/ui";
+import { Modal as c } from "../components/Modal.js";
+import { ErrorView as l, LoadingView as u, Section as d } from "../components/StateViews.js";
+import { CHART_COLORS as f, Donut as p, Legend as m } from "../components/viz.js";
+import { useCreateInvoice as h, useCreatePaymentInstrument as g, useInvoices as _, useMarkInvoicePaid as v, usePaymentInstruments as y, useRelationships as b, useRemovePaymentInstrument as x } from "../hooks/useSubscriberBotApi.js";
+import { useMemo as S, useState as C } from "react";
+import { AlertTriangle as w, CheckCircle2 as T, CreditCard as E, FileText as D, Plus as O, Receipt as k, Star as A, Trash2 as j } from "lucide-react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import { GlassCard as F, PagePurpose as I } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/InvoicesPage.tsx
-var j = 25, M = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", N = "mb-1 block text-xs font-medium text-text-secondary", P = [
+var L = 25, R = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", z = "mb-1 block text-xs font-medium text-text-secondary", B = [
 	{
 		value: "",
 		label: "All statuses"
@@ -46,7 +47,7 @@ var j = 25, M = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 		value: "REFUNDED",
 		label: "Refunded"
 	}
-], F = [
+], V = [
 	"ISSUED",
 	"DRAFT",
 	"OVERDUE",
@@ -54,28 +55,36 @@ var j = 25, M = "w-full rounded-lg border border-border-subtle bg-bg-surface px-
 	"FAILED",
 	"CANCELLED",
 	"REFUNDED"
-], I = [
+], H = [
 	"CARD",
 	"BANK_ACCOUNT",
 	"PAYPAL",
 	"UPI",
 	"WALLET",
 	"OTHER"
-], L = new Set([
+], U = new Set([
 	"ISSUED",
 	"OVERDUE",
 	"FAILED"
-]);
-function R({ onClose: e }) {
-	let t = d(), n = g({ pagination: {
+]), W = {
+	PAID: "var(--color-status-success-text)",
+	OVERDUE: "var(--color-status-error-text)",
+	FAILED: "var(--color-status-error-text)",
+	ISSUED: "var(--color-chart-1)",
+	DRAFT: "var(--color-text-secondary)",
+	CANCELLED: "var(--color-chart-4)",
+	REFUNDED: "var(--color-status-warning-text)"
+};
+function G({ onClose: e }) {
+	let t = h(), n = b({ pagination: {
 		limit: 100,
 		offset: 0
-	} }).data?.items ?? [], [r, i] = b(""), [a, o] = b(""), [s, c] = b("ISSUED"), [l, u] = b("USD"), [f, p] = b(""), [m, h] = b(""), [_, y] = b(""), [x, S] = b(""), [C, w] = b(""), [T, E] = b(null);
-	return /* @__PURE__ */ O(v, {
+	} }).data?.items ?? [], [r, i] = C(""), [a, o] = C(""), [s, l] = C("ISSUED"), [u, d] = C("USD"), [f, p] = C(""), [m, g] = C(""), [_, v] = C(""), [y, x] = C(""), [S, w] = C(""), [T, E] = C(null);
+	return /* @__PURE__ */ N(c, {
 		title: "Create invoice",
 		onClose: e,
 		maxWidthClassName: "max-w-xl",
-		children: /* @__PURE__ */ k("form", {
+		children: /* @__PURE__ */ P("form", {
 			onSubmit: (n) => {
 				if (n.preventDefault(), E(null), !r) {
 					E("Select the relationship this invoice belongs to.");
@@ -84,13 +93,13 @@ function R({ onClose: e }) {
 				t.mutate({
 					relationshipId: r,
 					status: s,
-					currency: l.trim() || "USD",
+					currency: u.trim() || "USD",
 					...a.trim() ? { number: a.trim() } : {},
 					...f.trim() ? { subtotal: Number(f) } : {},
 					...m.trim() ? { taxAmount: Number(m) } : {},
 					..._.trim() ? { total: Number(_) } : {},
-					...x ? { issueDate: new Date(x).toISOString() } : {},
-					...C ? { dueDate: new Date(C).toISOString() } : {}
+					...y ? { issueDate: new Date(y).toISOString() } : {},
+					...S ? { dueDate: new Date(S).toISOString() } : {}
 				}, {
 					onSuccess: () => e(),
 					onError: (e) => E(e instanceof Error ? e.message : "Could not create invoice.")
@@ -98,150 +107,150 @@ function R({ onClose: e }) {
 			},
 			className: "space-y-4",
 			children: [
-				T && /* @__PURE__ */ O("div", {
+				T && /* @__PURE__ */ N("div", {
 					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
 					children: T
 				}),
-				/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("label", {
+				/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 					htmlFor: "inv-relationship",
-					className: N,
-					children: ["Relationship ", /* @__PURE__ */ O("span", {
+					className: z,
+					children: ["Relationship ", /* @__PURE__ */ N("span", {
 						className: "text-status-error-text",
 						children: "*"
 					})]
-				}), /* @__PURE__ */ k("select", {
+				}), /* @__PURE__ */ P("select", {
 					id: "inv-relationship",
 					value: r,
 					onChange: (e) => i(e.target.value),
-					className: M,
+					className: R,
 					required: !0,
-					children: [/* @__PURE__ */ O("option", {
+					children: [/* @__PURE__ */ N("option", {
 						value: "",
 						children: "— Select a relationship —"
-					}), n.map((e) => /* @__PURE__ */ O("option", {
+					}), n.map((e) => /* @__PURE__ */ N("option", {
 						value: e.id,
 						children: e.label
 					}, e.id))]
 				})] }),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-number",
-							className: N,
+							className: z,
 							children: "Number"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "inv-number",
 							type: "text",
 							value: a,
 							onChange: (e) => o(e.target.value),
 							placeholder: "INV-0001",
-							className: M
+							className: R
 						})] }),
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-status",
-							className: N,
+							className: z,
 							children: "Status"
-						}), /* @__PURE__ */ O("select", {
+						}), /* @__PURE__ */ N("select", {
 							id: "inv-status",
 							value: s,
-							onChange: (e) => c(e.target.value),
-							className: M,
-							children: F.map((e) => /* @__PURE__ */ O("option", {
+							onChange: (e) => l(e.target.value),
+							className: R,
+							children: V.map((e) => /* @__PURE__ */ N("option", {
 								value: e,
 								children: e.replace(/_/g, " ")
 							}, e))
 						})] }),
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-currency",
-							className: N,
+							className: z,
 							children: "Currency"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "inv-currency",
 							type: "text",
-							value: l,
-							onChange: (e) => u(e.target.value.toUpperCase()),
+							value: u,
+							onChange: (e) => d(e.target.value.toUpperCase()),
 							maxLength: 3,
-							className: M
+							className: R
 						})] })
 					]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-subtotal",
-							className: N,
+							className: z,
 							children: "Subtotal"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "inv-subtotal",
 							type: "number",
 							min: "0",
 							step: "0.01",
 							value: f,
 							onChange: (e) => p(e.target.value),
-							className: M
+							className: R
 						})] }),
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-tax",
-							className: N,
+							className: z,
 							children: "Tax"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "inv-tax",
 							type: "number",
 							min: "0",
 							step: "0.01",
 							value: m,
-							onChange: (e) => h(e.target.value),
-							className: M
+							onChange: (e) => g(e.target.value),
+							className: R
 						})] }),
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "inv-total",
-							className: N,
+							className: z,
 							children: "Total"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "inv-total",
 							type: "number",
 							min: "0",
 							step: "0.01",
 							value: _,
-							onChange: (e) => y(e.target.value),
-							className: M
+							onChange: (e) => v(e.target.value),
+							className: R
 						})] })
 					]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "inv-issue",
-						className: N,
+						className: z,
 						children: "Issue date"
-					}), /* @__PURE__ */ O("input", {
+					}), /* @__PURE__ */ N("input", {
 						id: "inv-issue",
 						type: "date",
-						value: x,
-						onChange: (e) => S(e.target.value),
-						className: M
-					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						value: y,
+						onChange: (e) => x(e.target.value),
+						className: R
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "inv-due",
-						className: N,
+						className: z,
 						children: "Due date"
-					}), /* @__PURE__ */ O("input", {
+					}), /* @__PURE__ */ N("input", {
 						id: "inv-due",
 						type: "date",
-						value: C,
+						value: S,
 						onChange: (e) => w(e.target.value),
-						className: M
+						className: R
 					})] })]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ O("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: e,
 						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 						children: "Cancel"
-					}), /* @__PURE__ */ O("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "submit",
 						disabled: t.isPending,
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
@@ -252,14 +261,14 @@ function R({ onClose: e }) {
 		})
 	});
 }
-function z({ onClose: e }) {
-	let t = f(), [n, r] = b(""), [i, a] = b("CARD"), [o, s] = b(""), [c, l] = b(""), [u, d] = b(""), [p, m] = b(""), [h, g] = b(!1), [_, y] = b(null);
-	return /* @__PURE__ */ O(v, {
+function K({ onClose: e }) {
+	let t = g(), [n, r] = C(""), [i, a] = C("CARD"), [o, s] = C(""), [l, u] = C(""), [d, f] = C(""), [p, m] = C(""), [h, _] = C(!1), [v, y] = C(null);
+	return /* @__PURE__ */ N(c, {
 		title: "Add payment method",
 		description: "A passive annotation of which external card/account pays for a subscription — no full card numbers or CVV.",
 		onClose: e,
 		maxWidthClassName: "max-w-xl",
-		children: /* @__PURE__ */ k("form", {
+		children: /* @__PURE__ */ P("form", {
 			onSubmit: (r) => {
 				if (r.preventDefault(), y(null), !n.trim()) {
 					y("A label is required.");
@@ -270,8 +279,8 @@ function z({ onClose: e }) {
 					type: i,
 					isDefault: h,
 					...o.trim() ? { brand: o.trim() } : {},
-					...c.trim() ? { last4: c.trim() } : {},
-					...u.trim() ? { expiryMonth: Number(u) } : {},
+					...l.trim() ? { last4: l.trim() } : {},
+					...d.trim() ? { expiryMonth: Number(d) } : {},
 					...p.trim() ? { expiryYear: Number(p) } : {}
 				}, {
 					onSuccess: () => e(),
@@ -280,91 +289,91 @@ function z({ onClose: e }) {
 			},
 			className: "space-y-4",
 			children: [
-				_ && /* @__PURE__ */ O("div", {
+				v && /* @__PURE__ */ N("div", {
 					className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
-					children: _
+					children: v
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("label", {
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
 						htmlFor: "pm-label",
-						className: N,
-						children: ["Label ", /* @__PURE__ */ O("span", {
+						className: z,
+						children: ["Label ", /* @__PURE__ */ N("span", {
 							className: "text-status-error-text",
 							children: "*"
 						})]
-					}), /* @__PURE__ */ O("input", {
+					}), /* @__PURE__ */ N("input", {
 						id: "pm-label",
 						type: "text",
 						value: n,
 						onChange: (e) => r(e.target.value),
 						placeholder: "e.g. Personal Visa",
-						className: M,
+						className: R,
 						required: !0
-					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 						htmlFor: "pm-type",
-						className: N,
+						className: z,
 						children: "Type"
-					}), /* @__PURE__ */ O("select", {
+					}), /* @__PURE__ */ N("select", {
 						id: "pm-type",
 						value: i,
 						onChange: (e) => a(e.target.value),
-						className: M,
-						children: I.map((e) => /* @__PURE__ */ O("option", {
+						className: R,
+						children: H.map((e) => /* @__PURE__ */ N("option", {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e))
 					})] })]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "pm-brand",
-							className: N,
+							className: z,
 							children: "Brand"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "pm-brand",
 							type: "text",
 							value: o,
 							onChange: (e) => s(e.target.value),
 							placeholder: "Visa, Amex…",
-							className: M
+							className: R
 						})] }),
-						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 							htmlFor: "pm-last4",
-							className: N,
+							className: z,
 							children: "Last 4"
-						}), /* @__PURE__ */ O("input", {
+						}), /* @__PURE__ */ N("input", {
 							id: "pm-last4",
 							type: "text",
 							inputMode: "numeric",
 							maxLength: 4,
-							value: c,
-							onChange: (e) => l(e.target.value.replace(/\D/g, "")),
+							value: l,
+							onChange: (e) => u(e.target.value.replace(/\D/g, "")),
 							placeholder: "4242",
-							className: M
+							className: R
 						})] }),
-						/* @__PURE__ */ k("div", {
+						/* @__PURE__ */ P("div", {
 							className: "grid grid-cols-2 gap-2",
-							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 								htmlFor: "pm-exp-month",
-								className: N,
+								className: z,
 								children: "Exp. mo."
-							}), /* @__PURE__ */ O("input", {
+							}), /* @__PURE__ */ N("input", {
 								id: "pm-exp-month",
 								type: "number",
 								min: "1",
 								max: "12",
-								value: u,
-								onChange: (e) => d(e.target.value),
+								value: d,
+								onChange: (e) => f(e.target.value),
 								placeholder: "12",
-								className: M
-							})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+								className: R
+							})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
 								htmlFor: "pm-exp-year",
-								className: N,
+								className: z,
 								children: "Exp. yr."
-							}), /* @__PURE__ */ O("input", {
+							}), /* @__PURE__ */ N("input", {
 								id: "pm-exp-year",
 								type: "number",
 								min: "2024",
@@ -372,28 +381,28 @@ function z({ onClose: e }) {
 								value: p,
 								onChange: (e) => m(e.target.value),
 								placeholder: "2028",
-								className: M
+								className: R
 							})] })]
 						})
 					]
 				}),
-				/* @__PURE__ */ k("label", {
+				/* @__PURE__ */ P("label", {
 					className: "flex items-center gap-2 text-sm text-text-primary",
-					children: [/* @__PURE__ */ O("input", {
+					children: [/* @__PURE__ */ N("input", {
 						type: "checkbox",
 						checked: h,
-						onChange: (e) => g(e.target.checked),
+						onChange: (e) => _(e.target.checked),
 						className: "size-4 rounded border-border-subtle"
 					}), "Set as default"]
 				}),
-				/* @__PURE__ */ k("div", {
+				/* @__PURE__ */ P("div", {
 					className: "flex justify-end gap-3",
-					children: [/* @__PURE__ */ O("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						onClick: e,
 						className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
 						children: "Cancel"
-					}), /* @__PURE__ */ O("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "submit",
 						disabled: t.isPending,
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
@@ -404,192 +413,271 @@ function z({ onClose: e }) {
 		})
 	});
 }
-function B() {
-	let { data: e, isLoading: t, isError: n, refetch: r } = h(), i = _(), [a, d] = b(!1), f = e ?? [];
-	return /* @__PURE__ */ k(u, {
+function q() {
+	let { data: e, isLoading: t, isError: n, refetch: r } = y(), i = x(), [a, c] = C(!1), f = e ?? [];
+	return /* @__PURE__ */ P(d, {
 		title: "Payment methods",
 		description: "Which external cards and accounts pay for your subscriptions",
-		action: /* @__PURE__ */ k("button", {
+		action: /* @__PURE__ */ P("button", {
 			type: "button",
-			onClick: () => d(!0),
+			onClick: () => c(!0),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken",
-			children: [/* @__PURE__ */ O(C, { className: "h-3.5 w-3.5" }), " Add payment method"]
+			children: [/* @__PURE__ */ N(O, { className: "h-3.5 w-3.5" }), " Add payment method"]
 		}),
-		children: [t ? /* @__PURE__ */ O(l, { label: "Loading payment methods…" }) : n ? /* @__PURE__ */ O(c, {
+		children: [t ? /* @__PURE__ */ N(u, { label: "Loading payment methods…" }) : n ? /* @__PURE__ */ N(l, {
 			message: "Could not load payment methods.",
 			onRetry: () => void r()
-		}) : f.length === 0 ? /* @__PURE__ */ O(s, {
+		}) : f.length === 0 ? /* @__PURE__ */ N(s, {
 			illustration: "empty-data",
-			icon: /* @__PURE__ */ O(x, { className: "h-12 w-12" }),
+			icon: /* @__PURE__ */ N(E, { className: "h-12 w-12" }),
 			title: "No payment methods",
 			description: "Annotate which card or account pays for each subscription. No full card numbers are stored."
-		}) : /* @__PURE__ */ O("div", {
-			className: "divide-y divide-border-subtle rounded-lg border border-border-subtle bg-bg-surface",
-			children: f.map((e) => /* @__PURE__ */ k("div", {
-				className: "flex items-center justify-between gap-3 p-3",
-				children: [/* @__PURE__ */ k("div", {
-					className: "flex min-w-0 items-center gap-2",
-					children: [/* @__PURE__ */ O(x, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ k("div", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ k("p", {
-							className: "flex items-center gap-1.5 truncate text-sm font-medium text-text-primary",
-							children: [e.label, e.isDefault && /* @__PURE__ */ O(T, { className: "h-3 w-3 fill-current text-status-warning-text" })]
-						}), /* @__PURE__ */ O("p", {
-							className: "text-xs text-text-secondary",
-							children: [
-								e.brand,
-								e.last4 ? `•••• ${e.last4}` : null,
-								e.expiryMonth && e.expiryYear ? `${e.expiryMonth}/${e.expiryYear}` : null
-							].filter(Boolean).join(" · ") || e.type.replace(/_/g, " ")
+		}) : /* @__PURE__ */ N("div", {
+			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
+			children: f.map((e) => {
+				let t = [e.expiryMonth && e.expiryYear ? `Exp ${String(e.expiryMonth).padStart(2, "0")}/${String(e.expiryYear).slice(-2)}` : null].filter(Boolean);
+				return /* @__PURE__ */ P(F, {
+					treatment: "metric",
+					className: "flex flex-col gap-4 p-4",
+					children: [/* @__PURE__ */ P("div", {
+						className: "flex items-start justify-between gap-2",
+						children: [/* @__PURE__ */ P("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ N("span", {
+								className: "grid h-9 w-12 place-items-center rounded-md bg-[var(--color-accent-soft)] text-text-primary",
+								children: /* @__PURE__ */ N(E, {
+									className: "h-4 w-4",
+									"aria-hidden": !0
+								})
+							}), /* @__PURE__ */ P("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ P("p", {
+									className: "flex items-center gap-1.5 truncate text-sm font-semibold text-text-primary",
+									children: [e.brand || e.label, e.isDefault && /* @__PURE__ */ P("span", {
+										className: "inline-flex items-center gap-1 rounded-full bg-status-success-bg-subtle px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-status-success-text",
+										children: [/* @__PURE__ */ N(A, {
+											className: "h-2.5 w-2.5 fill-current",
+											"aria-hidden": !0
+										}), "Default"]
+									})]
+								}), /* @__PURE__ */ N("p", {
+									className: "font-mono text-sm tracking-[0.15em] text-text-secondary",
+									children: e.last4 ? `•••• ${e.last4}` : e.type.replace(/_/g, " ")
+								})]
+							})]
+						}), /* @__PURE__ */ N(o, { status: e.status })]
+					}), /* @__PURE__ */ P("div", {
+						className: "mt-auto flex items-center justify-between border-t border-border-subtle pt-3",
+						children: [/* @__PURE__ */ N("p", {
+							className: "truncate text-xs text-text-secondary",
+							children: [e.label, ...t].filter(Boolean).join(" · ")
+						}), /* @__PURE__ */ P("button", {
+							type: "button",
+							"aria-label": `Remove ${e.label}`,
+							disabled: i.isPending,
+							onClick: () => i.mutate(e.id),
+							className: "inline-flex shrink-0 items-center gap-1 rounded-lg border border-border-subtle px-2.5 py-1 text-xs font-medium text-text-secondary hover:border-status-error-text/40 hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50",
+							children: [/* @__PURE__ */ N(j, {
+								className: "h-3.5 w-3.5",
+								"aria-hidden": !0
+							}), "Remove"]
 						})]
 					})]
-				}), /* @__PURE__ */ k("div", {
-					className: "flex shrink-0 items-center gap-2",
-					children: [/* @__PURE__ */ O(o, { status: e.status }), /* @__PURE__ */ O("button", {
-						type: "button",
-						"aria-label": `Remove ${e.label}`,
-						disabled: i.isPending,
-						onClick: () => i.mutate(e.id),
-						className: "rounded-lg border border-border-subtle p-1.5 text-text-secondary hover:bg-status-error-bg-subtle hover:text-status-error-text disabled:opacity-50",
-						children: /* @__PURE__ */ O(E, { className: "h-4 w-4" })
-					})]
-				})]
-			}, e.id))
-		}), a && /* @__PURE__ */ O(z, { onClose: () => d(!1) })]
+				}, e.id);
+			})
+		}), a && /* @__PURE__ */ N(K, { onClose: () => c(!1) })]
 	});
 }
-function V() {
-	let { navigateTo: u } = e(), [d, f] = b(0), [h, g] = b(""), [_, v] = b(!1), { data: x, isLoading: T, isError: E, refetch: M, isFetching: N } = p({
-		status: h || void 0,
+function J() {
+	let { navigateTo: c } = e(), [d, h] = C(0), [g, y] = C(""), [b, x] = C(!1), { data: E, isLoading: A, isError: j, refetch: R, isFetching: z } = _({
+		status: g || void 0,
 		pagination: {
-			limit: j,
-			offset: d * j
+			limit: L,
+			offset: d * L
 		}
-	}), F = m(), I = y(() => x?.items ?? [], [x]), z = x?.pageInfo.hasMore ?? !1, V = y(() => {
-		let e = I.filter((e) => L.has(e.status)), t = I[0]?.currency ?? "USD";
+	}), V = v(), H = S(() => E?.items ?? [], [E]), K = E?.pageInfo.hasMore ?? !1, J = S(() => {
+		let e = H.filter((e) => U.has(e.status)), t = H[0]?.currency ?? "USD", n = /* @__PURE__ */ new Map();
+		for (let e of H) n.set(e.status, (n.get(e.status) ?? 0) + 1);
+		let r = Array.from(n.entries()).sort((e, t) => t[1] - e[1]).map(([e, t], n) => ({
+			label: e.charAt(0) + e.slice(1).toLowerCase(),
+			value: t,
+			color: W[e] ?? f[n % f.length]
+		}));
 		return {
 			outstandingCount: e.length,
 			outstandingTotal: e.reduce((e, t) => e + t.total, 0),
+			paidCount: H.filter((e) => e.status === "PAID").length,
+			overdueCount: H.filter((e) => e.status === "OVERDUE").length,
+			distribution: r,
 			currency: t
 		};
-	}, [I]);
-	return /* @__PURE__ */ k(n, {
+	}, [H]);
+	return /* @__PURE__ */ P(n, {
 		title: "Invoices",
 		description: "Your billing ledger across every relationship",
-		actions: /* @__PURE__ */ k("button", {
+		actions: /* @__PURE__ */ P("button", {
 			type: "button",
-			onClick: () => v(!0),
+			onClick: () => x(!0),
 			className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-			children: [/* @__PURE__ */ O(C, { className: "h-4 w-4" }), " Create invoice"]
+			children: [/* @__PURE__ */ N(O, { className: "h-4 w-4" }), " Create invoice"]
 		}),
 		children: [
-			/* @__PURE__ */ O(A, {
+			/* @__PURE__ */ N(I, {
 				className: "mb-4",
 				children: "Every invoice from your recurring relationships in one ledger. Filter by status and settle issued or overdue invoices directly."
 			}),
-			!T && !E && I.length > 0 && /* @__PURE__ */ k("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: [/* @__PURE__ */ O(r, {
-					featured: !0,
-					icon: /* @__PURE__ */ O(w, {}),
-					value: i(V.outstandingTotal, V.currency, { maximumFractionDigits: 0 }),
-					label: "Outstanding (this page)"
-				}), /* @__PURE__ */ O(r, {
-					icon: /* @__PURE__ */ O(S, {}),
-					value: V.outstandingCount,
-					label: "Open invoices (this page)"
+			!A && !j && H.length > 0 && /* @__PURE__ */ P("div", {
+				className: "grid grid-cols-1 gap-4 lg:grid-cols-3",
+				children: [/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-2",
+					children: [
+						/* @__PURE__ */ N(r, {
+							featured: !0,
+							icon: /* @__PURE__ */ N(k, {}),
+							value: i(J.outstandingTotal, J.currency, { maximumFractionDigits: 0 }),
+							label: "Outstanding · this page"
+						}),
+						/* @__PURE__ */ N(r, {
+							icon: /* @__PURE__ */ N(D, {}),
+							value: J.outstandingCount,
+							label: "Open invoices"
+						}),
+						/* @__PURE__ */ N(r, {
+							icon: /* @__PURE__ */ N(w, {}),
+							value: J.overdueCount,
+							label: "Overdue",
+							...J.overdueCount > 0 ? { trend: "down" } : {}
+						}),
+						/* @__PURE__ */ N(r, {
+							icon: /* @__PURE__ */ N(T, {}),
+							value: J.paidCount,
+							label: "Paid",
+							...J.paidCount > 0 ? { trend: "up" } : {}
+						})
+					]
+				}), /* @__PURE__ */ P(F, {
+					treatment: "insight",
+					className: "p-6",
+					children: [
+						/* @__PURE__ */ N("p", {
+							className: "text-sm font-semibold text-text-primary",
+							children: "Status breakdown"
+						}),
+						/* @__PURE__ */ N("p", {
+							className: "text-xs text-text-secondary",
+							children: "Across the invoices on this page"
+						}),
+						/* @__PURE__ */ P("div", {
+							className: "mt-4 flex flex-col items-center gap-5 sm:flex-row sm:items-center lg:flex-col xl:flex-row",
+							children: [/* @__PURE__ */ N(p, {
+								data: J.distribution,
+								size: 132,
+								thickness: 16,
+								centerLabel: String(H.length),
+								centerSub: "invoices",
+								className: "shrink-0"
+							}), /* @__PURE__ */ N(m, {
+								data: J.distribution,
+								className: "w-full min-w-0 flex-1",
+								valueFormat: (e) => String(e)
+							})]
+						})
+					]
 				})]
 			}),
-			/* @__PURE__ */ O("div", {
+			/* @__PURE__ */ N("div", {
 				className: "mt-6 flex flex-wrap items-center gap-3",
-				children: /* @__PURE__ */ O("select", {
+				children: /* @__PURE__ */ N("select", {
 					"aria-label": "Filter by status",
-					value: h,
+					value: g,
 					onChange: (e) => {
-						g(e.target.value), f(0);
+						y(e.target.value), h(0);
 					},
 					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: P.map((e) => /* @__PURE__ */ O("option", {
+					children: B.map((e) => /* @__PURE__ */ N("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})
 			}),
-			T ? /* @__PURE__ */ O(l, { label: "Loading invoices…" }) : E ? /* @__PURE__ */ O(c, {
+			A ? /* @__PURE__ */ N(u, { label: "Loading invoices…" }) : j ? /* @__PURE__ */ N(l, {
 				message: "Could not load invoices.",
-				onRetry: () => void M()
-			}) : I.length === 0 ? /* @__PURE__ */ O("div", {
+				onRetry: () => void R()
+			}) : H.length === 0 ? /* @__PURE__ */ N("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ O(s, {
+				children: /* @__PURE__ */ N(s, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ O(w, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ N(k, { className: "h-12 w-12" }),
 					title: "No invoices",
-					description: h ? "No invoices match this status filter." : "Invoices from your relationships will appear here — or create one manually.",
-					action: /* @__PURE__ */ O("button", {
+					description: g ? "No invoices match this status filter." : "Invoices from your relationships will appear here — or create one manually.",
+					action: /* @__PURE__ */ N("button", {
 						type: "button",
-						onClick: () => v(!0),
+						onClick: () => x(!0),
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
 						children: "Create invoice"
 					})
 				})
-			}) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ k("div", {
+			}) : /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P("div", {
 				className: "mt-6 overflow-hidden rounded-lg border border-border-subtle bg-bg-surface",
-				children: [/* @__PURE__ */ k("div", {
+				children: [/* @__PURE__ */ P("div", {
 					className: "hidden grid-cols-[1.5fr_1fr_1fr_1fr_auto] gap-4 border-b border-border-subtle bg-bg-sunken px-4 py-2.5 text-xs font-medium text-text-secondary sm:grid",
 					children: [
-						/* @__PURE__ */ O("span", { children: "Invoice" }),
-						/* @__PURE__ */ O("span", { children: "Status" }),
-						/* @__PURE__ */ O("span", {
+						/* @__PURE__ */ N("span", { children: "Invoice" }),
+						/* @__PURE__ */ N("span", { children: "Status" }),
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Total"
 						}),
-						/* @__PURE__ */ O("span", {
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Due"
 						}),
-						/* @__PURE__ */ O("span", {
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Action"
 						})
 					]
-				}), /* @__PURE__ */ O("div", {
+				}), /* @__PURE__ */ N("div", {
 					className: "divide-y divide-border-subtle",
-					children: I.map((e) => /* @__PURE__ */ k("div", {
-						className: "grid grid-cols-1 gap-2 px-4 py-3 sm:grid-cols-[1.5fr_1fr_1fr_1fr_auto] sm:items-center sm:gap-4",
+					children: H.map((e) => /* @__PURE__ */ P("div", {
+						className: "grid grid-cols-1 gap-2 px-4 py-3 transition-colors hover:bg-bg-sunken/50 sm:grid-cols-[1.5fr_1fr_1fr_1fr_auto] sm:items-center sm:gap-4",
 						children: [
-							/* @__PURE__ */ k("button", {
+							/* @__PURE__ */ P("button", {
 								type: "button",
-								onClick: () => u(`/relationships/${e.relationshipId}`),
+								onClick: () => c(`/relationships/${e.relationshipId}`),
 								className: "min-w-0 text-left",
-								children: [/* @__PURE__ */ O("p", {
+								children: [/* @__PURE__ */ N("p", {
 									className: "truncate text-sm font-medium text-text-primary",
 									children: e.number || `Invoice ${e.id.slice(0, 8)}`
-								}), /* @__PURE__ */ O("p", {
+								}), /* @__PURE__ */ N("p", {
 									className: "text-xs text-text-secondary",
 									children: e.issueDate ? `Issued ${a(e.issueDate)}` : "—"
 								})]
 							}),
-							/* @__PURE__ */ O("span", { children: /* @__PURE__ */ O(o, { status: e.status }) }),
-							/* @__PURE__ */ O("span", {
+							/* @__PURE__ */ N("span", { children: /* @__PURE__ */ N(o, { status: e.status }) }),
+							/* @__PURE__ */ N("span", {
 								className: "text-sm font-semibold tabular-nums text-text-primary sm:text-right",
 								children: i(e.total, e.currency)
 							}),
-							/* @__PURE__ */ O("span", {
+							/* @__PURE__ */ N("span", {
 								className: "text-xs text-text-secondary sm:text-right",
 								children: e.dueDate ? a(e.dueDate) : "—"
 							}),
-							/* @__PURE__ */ O("span", {
+							/* @__PURE__ */ N("span", {
 								className: "sm:text-right",
-								children: L.has(e.status) ? /* @__PURE__ */ O("button", {
+								children: U.has(e.status) ? /* @__PURE__ */ P("button", {
 									type: "button",
-									disabled: F.isPending,
-									onClick: () => F.mutate(e.id),
-									className: "rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
-									children: "Mark paid"
-								}) : e.paidAt ? /* @__PURE__ */ k("span", {
+									disabled: V.isPending,
+									onClick: () => V.mutate(e.id),
+									className: "inline-flex items-center gap-1.5 rounded-lg border border-status-success-text/30 bg-status-success-bg-subtle px-3 py-1.5 text-xs font-medium text-status-success-text hover:opacity-90 disabled:opacity-50",
+									children: [/* @__PURE__ */ N(T, {
+										className: "h-3.5 w-3.5",
+										"aria-hidden": !0
+									}), "Mark paid"]
+								}) : e.paidAt ? /* @__PURE__ */ P("span", {
 									className: "text-xs text-text-secondary",
 									children: ["Paid ", a(e.paidAt)]
-								}) : /* @__PURE__ */ O("span", {
+								}) : /* @__PURE__ */ N("span", {
 									className: "text-xs text-text-secondary",
 									children: "—"
 								})
@@ -597,38 +685,38 @@ function V() {
 						]
 					}, e.id))
 				})]
-			}), /* @__PURE__ */ k("div", {
+			}), /* @__PURE__ */ P("div", {
 				className: "mt-4 flex items-center justify-between",
-				children: [/* @__PURE__ */ k("p", {
+				children: [/* @__PURE__ */ P("p", {
 					className: "text-xs text-text-secondary",
 					children: [
 						"Page ",
 						d + 1,
-						N ? " · refreshing…" : ""
+						z ? " · refreshing…" : ""
 					]
-				}), /* @__PURE__ */ k("div", {
+				}), /* @__PURE__ */ P("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ O("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
 						disabled: d === 0,
-						onClick: () => f((e) => Math.max(0, e - 1)),
+						onClick: () => h((e) => Math.max(0, e - 1)),
 						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", d === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
 						children: "Previous"
-					}), /* @__PURE__ */ O("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "button",
-						disabled: !z,
-						onClick: () => f((e) => e + 1),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", z ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
+						disabled: !K,
+						onClick: () => h((e) => e + 1),
+						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", K ? "text-text-primary hover:bg-bg-sunken" : "cursor-not-allowed text-text-secondary opacity-50"),
 						children: "Next"
 					})]
 				})]
 			})] }),
-			/* @__PURE__ */ O(B, {}),
-			_ && /* @__PURE__ */ O(R, { onClose: () => v(!1) })
+			/* @__PURE__ */ N(q, {}),
+			b && /* @__PURE__ */ N(G, { onClose: () => x(!1) })
 		]
 	});
 }
 //#endregion
-export { V as InvoicesPage };
+export { J as InvoicesPage };
 
 //# sourceMappingURL=InvoicesPage.js.map