@burdenoff/microfe-subscriberbot 2026.706.1 → 2026.706.3

package/dist/subscriberbot/pages/InvoicesPage.js

@@ -5,14 +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 } from "../components/StateViews.js";
-import { useInvoices as u, useMarkInvoicePaid as d } from "../hooks/useSubscriberBotApi.js";
-import { useMemo as f, useState as p } from "react";
-import { FileText as m, Receipt as h } from "lucide-react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { PagePurpose as y } 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 b = 25, x = [
+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"
@@ -45,130 +47,637 @@ var b = 25, x = [
 		value: "REFUNDED",
 		label: "Refunded"
 	}
-], S = new Set([
+], V = [
+	"ISSUED",
+	"DRAFT",
+	"OVERDUE",
+	"PAID",
+	"FAILED",
+	"CANCELLED",
+	"REFUNDED"
+], H = [
+	"CARD",
+	"BANK_ACCOUNT",
+	"PAYPAL",
+	"UPI",
+	"WALLET",
+	"OTHER"
+], U = new Set([
 	"ISSUED",
 	"OVERDUE",
 	"FAILED"
-]);
-function C() {
-	let { navigateTo: C } = e(), [w, T] = p(0), [E, D] = p(""), { data: O, isLoading: k, isError: A, refetch: j, isFetching: M } = u({
-		status: E || void 0,
+]), 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] = 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__ */ P("form", {
+			onSubmit: (n) => {
+				if (n.preventDefault(), E(null), !r) {
+					E("Select the relationship this invoice belongs to.");
+					return;
+				}
+				t.mutate({
+					relationshipId: r,
+					status: s,
+					currency: u.trim() || "USD",
+					...a.trim() ? { number: a.trim() } : {},
+					...f.trim() ? { subtotal: Number(f) } : {},
+					...m.trim() ? { taxAmount: Number(m) } : {},
+					..._.trim() ? { total: Number(_) } : {},
+					...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.")
+				});
+			},
+			className: "space-y-4",
+			children: [
+				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__ */ P("div", { children: [/* @__PURE__ */ P("label", {
+					htmlFor: "inv-relationship",
+					className: z,
+					children: ["Relationship ", /* @__PURE__ */ N("span", {
+						className: "text-status-error-text",
+						children: "*"
+					})]
+				}), /* @__PURE__ */ P("select", {
+					id: "inv-relationship",
+					value: r,
+					onChange: (e) => i(e.target.value),
+					className: R,
+					required: !0,
+					children: [/* @__PURE__ */ N("option", {
+						value: "",
+						children: "— Select a relationship —"
+					}), n.map((e) => /* @__PURE__ */ N("option", {
+						value: e.id,
+						children: e.label
+					}, e.id))]
+				})] }),
+				/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-number",
+							className: z,
+							children: "Number"
+						}), /* @__PURE__ */ N("input", {
+							id: "inv-number",
+							type: "text",
+							value: a,
+							onChange: (e) => o(e.target.value),
+							placeholder: "INV-0001",
+							className: R
+						})] }),
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-status",
+							className: z,
+							children: "Status"
+						}), /* @__PURE__ */ N("select", {
+							id: "inv-status",
+							value: s,
+							onChange: (e) => l(e.target.value),
+							className: R,
+							children: V.map((e) => /* @__PURE__ */ N("option", {
+								value: e,
+								children: e.replace(/_/g, " ")
+							}, e))
+						})] }),
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-currency",
+							className: z,
+							children: "Currency"
+						}), /* @__PURE__ */ N("input", {
+							id: "inv-currency",
+							type: "text",
+							value: u,
+							onChange: (e) => d(e.target.value.toUpperCase()),
+							maxLength: 3,
+							className: R
+						})] })
+					]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-subtotal",
+							className: z,
+							children: "Subtotal"
+						}), /* @__PURE__ */ N("input", {
+							id: "inv-subtotal",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: f,
+							onChange: (e) => p(e.target.value),
+							className: R
+						})] }),
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-tax",
+							className: z,
+							children: "Tax"
+						}), /* @__PURE__ */ N("input", {
+							id: "inv-tax",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: m,
+							onChange: (e) => g(e.target.value),
+							className: R
+						})] }),
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "inv-total",
+							className: z,
+							children: "Total"
+						}), /* @__PURE__ */ N("input", {
+							id: "inv-total",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: _,
+							onChange: (e) => v(e.target.value),
+							className: R
+						})] })
+					]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+						htmlFor: "inv-issue",
+						className: z,
+						children: "Issue date"
+					}), /* @__PURE__ */ N("input", {
+						id: "inv-issue",
+						type: "date",
+						value: y,
+						onChange: (e) => x(e.target.value),
+						className: R
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+						htmlFor: "inv-due",
+						className: z,
+						children: "Due date"
+					}), /* @__PURE__ */ N("input", {
+						id: "inv-due",
+						type: "date",
+						value: S,
+						onChange: (e) => w(e.target.value),
+						className: R
+					})] })]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "flex justify-end gap-3",
+					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__ */ 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",
+						children: t.isPending ? "Creating…" : "Create invoice"
+					})]
+				})
+			]
+		})
+	});
+}
+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__ */ P("form", {
+			onSubmit: (r) => {
+				if (r.preventDefault(), y(null), !n.trim()) {
+					y("A label is required.");
+					return;
+				}
+				t.mutate({
+					label: n.trim(),
+					type: i,
+					isDefault: h,
+					...o.trim() ? { brand: o.trim() } : {},
+					...l.trim() ? { last4: l.trim() } : {},
+					...d.trim() ? { expiryMonth: Number(d) } : {},
+					...p.trim() ? { expiryYear: Number(p) } : {}
+				}, {
+					onSuccess: () => e(),
+					onError: (e) => y(e instanceof Error ? e.message : "Could not add payment method.")
+				});
+			},
+			className: "space-y-4",
+			children: [
+				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: v
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("label", {
+						htmlFor: "pm-label",
+						className: z,
+						children: ["Label ", /* @__PURE__ */ N("span", {
+							className: "text-status-error-text",
+							children: "*"
+						})]
+					}), /* @__PURE__ */ N("input", {
+						id: "pm-label",
+						type: "text",
+						value: n,
+						onChange: (e) => r(e.target.value),
+						placeholder: "e.g. Personal Visa",
+						className: R,
+						required: !0
+					})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+						htmlFor: "pm-type",
+						className: z,
+						children: "Type"
+					}), /* @__PURE__ */ N("select", {
+						id: "pm-type",
+						value: i,
+						onChange: (e) => a(e.target.value),
+						className: R,
+						children: H.map((e) => /* @__PURE__ */ N("option", {
+							value: e,
+							children: e.replace(/_/g, " ")
+						}, e))
+					})] })]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "pm-brand",
+							className: z,
+							children: "Brand"
+						}), /* @__PURE__ */ N("input", {
+							id: "pm-brand",
+							type: "text",
+							value: o,
+							onChange: (e) => s(e.target.value),
+							placeholder: "Visa, Amex…",
+							className: R
+						})] }),
+						/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+							htmlFor: "pm-last4",
+							className: z,
+							children: "Last 4"
+						}), /* @__PURE__ */ N("input", {
+							id: "pm-last4",
+							type: "text",
+							inputMode: "numeric",
+							maxLength: 4,
+							value: l,
+							onChange: (e) => u(e.target.value.replace(/\D/g, "")),
+							placeholder: "4242",
+							className: R
+						})] }),
+						/* @__PURE__ */ P("div", {
+							className: "grid grid-cols-2 gap-2",
+							children: [/* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+								htmlFor: "pm-exp-month",
+								className: z,
+								children: "Exp. mo."
+							}), /* @__PURE__ */ N("input", {
+								id: "pm-exp-month",
+								type: "number",
+								min: "1",
+								max: "12",
+								value: d,
+								onChange: (e) => f(e.target.value),
+								placeholder: "12",
+								className: R
+							})] }), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ N("label", {
+								htmlFor: "pm-exp-year",
+								className: z,
+								children: "Exp. yr."
+							}), /* @__PURE__ */ N("input", {
+								id: "pm-exp-year",
+								type: "number",
+								min: "2024",
+								max: "2099",
+								value: p,
+								onChange: (e) => m(e.target.value),
+								placeholder: "2028",
+								className: R
+							})] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ P("label", {
+					className: "flex items-center gap-2 text-sm text-text-primary",
+					children: [/* @__PURE__ */ N("input", {
+						type: "checkbox",
+						checked: h,
+						onChange: (e) => _(e.target.checked),
+						className: "size-4 rounded border-border-subtle"
+					}), "Set as default"]
+				}),
+				/* @__PURE__ */ P("div", {
+					className: "flex justify-end gap-3",
+					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__ */ 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",
+						children: t.isPending ? "Adding…" : "Add payment method"
+					})]
+				})
+			]
+		})
+	});
+}
+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__ */ P("button", {
+			type: "button",
+			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__ */ N(O, { className: "h-3.5 w-3.5" }), " Add payment method"]
+		}),
+		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__ */ N(s, {
+			illustration: "empty-data",
+			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__ */ 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"]
+						})]
+					})]
+				}, e.id);
+			})
+		}), a && /* @__PURE__ */ N(K, { onClose: () => c(!1) })]
+	});
+}
+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: b,
-			offset: w * b
+			limit: L,
+			offset: d * L
 		}
-	}), N = d(), P = f(() => O?.items ?? [], [O]), F = O?.pageInfo.hasMore ?? !1, I = f(() => {
-		let e = P.filter((e) => S.has(e.status)), t = P[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
 		};
-	}, [P]);
-	return /* @__PURE__ */ v(n, {
+	}, [H]);
+	return /* @__PURE__ */ P(n, {
 		title: "Invoices",
 		description: "Your billing ledger across every relationship",
+		actions: /* @__PURE__ */ P("button", {
+			type: "button",
+			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__ */ N(O, { className: "h-4 w-4" }), " Create invoice"]
+		}),
 		children: [
-			/* @__PURE__ */ _(y, {
+			/* @__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."
 			}),
-			!k && !A && P.length > 0 && /* @__PURE__ */ v("div", {
-				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: [/* @__PURE__ */ _(r, {
-					featured: !0,
-					icon: /* @__PURE__ */ _(h, {}),
-					value: i(I.outstandingTotal, I.currency, { maximumFractionDigits: 0 }),
-					label: "Outstanding (this page)"
-				}), /* @__PURE__ */ _(r, {
-					icon: /* @__PURE__ */ _(m, {}),
-					value: I.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__ */ _("div", {
+			/* @__PURE__ */ N("div", {
 				className: "mt-6 flex flex-wrap items-center gap-3",
-				children: /* @__PURE__ */ _("select", {
-					value: E,
+				children: /* @__PURE__ */ N("select", {
+					"aria-label": "Filter by status",
+					value: g,
 					onChange: (e) => {
-						D(e.target.value), T(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: x.map((e) => /* @__PURE__ */ _("option", {
+					children: B.map((e) => /* @__PURE__ */ N("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})
 			}),
-			k ? /* @__PURE__ */ _(l, { label: "Loading invoices…" }) : A ? /* @__PURE__ */ _(c, {
+			A ? /* @__PURE__ */ N(u, { label: "Loading invoices…" }) : j ? /* @__PURE__ */ N(l, {
 				message: "Could not load invoices.",
-				onRetry: () => void j()
-			}) : P.length === 0 ? /* @__PURE__ */ _("div", {
+				onRetry: () => void R()
+			}) : H.length === 0 ? /* @__PURE__ */ N("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ _(s, {
+				children: /* @__PURE__ */ N(s, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ _(h, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ N(k, { className: "h-12 w-12" }),
 					title: "No invoices",
-					description: E ? "No invoices match this status filter." : "Invoices from your relationships will appear here."
+					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: () => 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__ */ v(g, { children: [/* @__PURE__ */ v("div", {
+			}) : /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ P("div", {
 				className: "mt-6 overflow-hidden rounded-lg border border-border-subtle bg-bg-surface",
-				children: [/* @__PURE__ */ v("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__ */ _("span", { children: "Invoice" }),
-						/* @__PURE__ */ _("span", { children: "Status" }),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ N("span", { children: "Invoice" }),
+						/* @__PURE__ */ N("span", { children: "Status" }),
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Total"
 						}),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Due"
 						}),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ N("span", {
 							className: "text-right",
 							children: "Action"
 						})
 					]
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ N("div", {
 					className: "divide-y divide-border-subtle",
-					children: P.map((e) => /* @__PURE__ */ v("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__ */ v("button", {
+							/* @__PURE__ */ P("button", {
 								type: "button",
-								onClick: () => C(`/relationships/${e.relationshipId}`),
+								onClick: () => c(`/relationships/${e.relationshipId}`),
 								className: "min-w-0 text-left",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ N("p", {
 									className: "truncate text-sm font-medium text-text-primary",
 									children: e.number || `Invoice ${e.id.slice(0, 8)}`
-								}), /* @__PURE__ */ _("p", {
+								}), /* @__PURE__ */ N("p", {
 									className: "text-xs text-text-secondary",
 									children: e.issueDate ? `Issued ${a(e.issueDate)}` : "—"
 								})]
 							}),
-							/* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(o, { status: e.status }) }),
-							/* @__PURE__ */ _("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__ */ _("span", {
+							/* @__PURE__ */ N("span", {
 								className: "text-xs text-text-secondary sm:text-right",
 								children: e.dueDate ? a(e.dueDate) : "—"
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ N("span", {
 								className: "sm:text-right",
-								children: S.has(e.status) ? /* @__PURE__ */ _("button", {
+								children: U.has(e.status) ? /* @__PURE__ */ P("button", {
 									type: "button",
-									disabled: N.isPending,
-									onClick: () => N.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__ */ v("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__ */ _("span", {
+								}) : /* @__PURE__ */ N("span", {
 									className: "text-xs text-text-secondary",
 									children: "—"
 								})
@@ -176,36 +685,38 @@ function C() {
 						]
 					}, e.id))
 				})]
-			}), /* @__PURE__ */ v("div", {
+			}), /* @__PURE__ */ P("div", {
 				className: "mt-4 flex items-center justify-between",
-				children: [/* @__PURE__ */ v("p", {
+				children: [/* @__PURE__ */ P("p", {
 					className: "text-xs text-text-secondary",
 					children: [
 						"Page ",
-						w + 1,
-						M ? " · refreshing…" : ""
+						d + 1,
+						z ? " · refreshing…" : ""
 					]
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ P("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ _("button", {
+					children: [/* @__PURE__ */ N("button", {
 						type: "button",
-						disabled: w === 0,
-						onClick: () => T((e) => Math.max(0, e - 1)),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", w === 0 ? "cursor-not-allowed text-text-secondary opacity-50" : "text-text-primary hover:bg-bg-sunken"),
+						disabled: d === 0,
+						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__ */ _("button", {
+					}), /* @__PURE__ */ N("button", {
 						type: "button",
-						disabled: !F,
-						onClick: () => T((e) => e + 1),
-						className: t("rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium", F ? "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__ */ N(q, {}),
+			b && /* @__PURE__ */ N(G, { onClose: () => x(!1) })
 		]
 	});
 }
 //#endregion
-export { C as InvoicesPage };
+export { J as InvoicesPage };
 
 //# sourceMappingURL=InvoicesPage.js.map