@burdenoff/microfe-subscriberbot 2026.629.1 → 2026.706.2

package/dist/subscriberbot/pages/InvoicesPage.js

@@ -5,14 +5,15 @@ 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 { 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";
 //#region src/subscriberbot/pages/InvoicesPage.tsx
-var b = 25, x = [
+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 = [
 	{
 		value: "",
 		label: "All statuses"
@@ -45,130 +46,550 @@ var b = 25, x = [
 		value: "REFUNDED",
 		label: "Refunded"
 	}
-], S = new Set([
+], F = [
+	"ISSUED",
+	"DRAFT",
+	"OVERDUE",
+	"PAID",
+	"FAILED",
+	"CANCELLED",
+	"REFUNDED"
+], I = [
+	"CARD",
+	"BANK_ACCOUNT",
+	"PAYPAL",
+	"UPI",
+	"WALLET",
+	"OTHER"
+], L = 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,
+function R({ onClose: e }) {
+	let t = d(), n = g({ 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, {
+		title: "Create invoice",
+		onClose: e,
+		maxWidthClassName: "max-w-xl",
+		children: /* @__PURE__ */ k("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: l.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() } : {}
+				}, {
+					onSuccess: () => e(),
+					onError: (e) => E(e instanceof Error ? e.message : "Could not create invoice.")
+				});
+			},
+			className: "space-y-4",
+			children: [
+				T && /* @__PURE__ */ O("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", {
+					htmlFor: "inv-relationship",
+					className: N,
+					children: ["Relationship ", /* @__PURE__ */ O("span", {
+						className: "text-status-error-text",
+						children: "*"
+					})]
+				}), /* @__PURE__ */ k("select", {
+					id: "inv-relationship",
+					value: r,
+					onChange: (e) => i(e.target.value),
+					className: M,
+					required: !0,
+					children: [/* @__PURE__ */ O("option", {
+						value: "",
+						children: "— Select a relationship —"
+					}), n.map((e) => /* @__PURE__ */ O("option", {
+						value: e.id,
+						children: e.label
+					}, e.id))]
+				})] }),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-number",
+							className: N,
+							children: "Number"
+						}), /* @__PURE__ */ O("input", {
+							id: "inv-number",
+							type: "text",
+							value: a,
+							onChange: (e) => o(e.target.value),
+							placeholder: "INV-0001",
+							className: M
+						})] }),
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-status",
+							className: N,
+							children: "Status"
+						}), /* @__PURE__ */ O("select", {
+							id: "inv-status",
+							value: s,
+							onChange: (e) => c(e.target.value),
+							className: M,
+							children: F.map((e) => /* @__PURE__ */ O("option", {
+								value: e,
+								children: e.replace(/_/g, " ")
+							}, e))
+						})] }),
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-currency",
+							className: N,
+							children: "Currency"
+						}), /* @__PURE__ */ O("input", {
+							id: "inv-currency",
+							type: "text",
+							value: l,
+							onChange: (e) => u(e.target.value.toUpperCase()),
+							maxLength: 3,
+							className: M
+						})] })
+					]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-subtotal",
+							className: N,
+							children: "Subtotal"
+						}), /* @__PURE__ */ O("input", {
+							id: "inv-subtotal",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: f,
+							onChange: (e) => p(e.target.value),
+							className: M
+						})] }),
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-tax",
+							className: N,
+							children: "Tax"
+						}), /* @__PURE__ */ O("input", {
+							id: "inv-tax",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: m,
+							onChange: (e) => h(e.target.value),
+							className: M
+						})] }),
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "inv-total",
+							className: N,
+							children: "Total"
+						}), /* @__PURE__ */ O("input", {
+							id: "inv-total",
+							type: "number",
+							min: "0",
+							step: "0.01",
+							value: _,
+							onChange: (e) => y(e.target.value),
+							className: M
+						})] })
+					]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						htmlFor: "inv-issue",
+						className: N,
+						children: "Issue date"
+					}), /* @__PURE__ */ O("input", {
+						id: "inv-issue",
+						type: "date",
+						value: x,
+						onChange: (e) => S(e.target.value),
+						className: M
+					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						htmlFor: "inv-due",
+						className: N,
+						children: "Due date"
+					}), /* @__PURE__ */ O("input", {
+						id: "inv-due",
+						type: "date",
+						value: C,
+						onChange: (e) => w(e.target.value),
+						className: M
+					})] })]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "flex justify-end gap-3",
+					children: [/* @__PURE__ */ O("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", {
+						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 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, {
+		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", {
+			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() } : {},
+					...c.trim() ? { last4: c.trim() } : {},
+					...u.trim() ? { expiryMonth: Number(u) } : {},
+					...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: [
+				_ && /* @__PURE__ */ O("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: _
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ k("label", {
+						htmlFor: "pm-label",
+						className: N,
+						children: ["Label ", /* @__PURE__ */ O("span", {
+							className: "text-status-error-text",
+							children: "*"
+						})]
+					}), /* @__PURE__ */ O("input", {
+						id: "pm-label",
+						type: "text",
+						value: n,
+						onChange: (e) => r(e.target.value),
+						placeholder: "e.g. Personal Visa",
+						className: M,
+						required: !0
+					})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+						htmlFor: "pm-type",
+						className: N,
+						children: "Type"
+					}), /* @__PURE__ */ O("select", {
+						id: "pm-type",
+						value: i,
+						onChange: (e) => a(e.target.value),
+						className: M,
+						children: I.map((e) => /* @__PURE__ */ O("option", {
+							value: e,
+							children: e.replace(/_/g, " ")
+						}, e))
+					})] })]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-3",
+					children: [
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "pm-brand",
+							className: N,
+							children: "Brand"
+						}), /* @__PURE__ */ O("input", {
+							id: "pm-brand",
+							type: "text",
+							value: o,
+							onChange: (e) => s(e.target.value),
+							placeholder: "Visa, Amex…",
+							className: M
+						})] }),
+						/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+							htmlFor: "pm-last4",
+							className: N,
+							children: "Last 4"
+						}), /* @__PURE__ */ O("input", {
+							id: "pm-last4",
+							type: "text",
+							inputMode: "numeric",
+							maxLength: 4,
+							value: c,
+							onChange: (e) => l(e.target.value.replace(/\D/g, "")),
+							placeholder: "4242",
+							className: M
+						})] }),
+						/* @__PURE__ */ k("div", {
+							className: "grid grid-cols-2 gap-2",
+							children: [/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+								htmlFor: "pm-exp-month",
+								className: N,
+								children: "Exp. mo."
+							}), /* @__PURE__ */ O("input", {
+								id: "pm-exp-month",
+								type: "number",
+								min: "1",
+								max: "12",
+								value: u,
+								onChange: (e) => d(e.target.value),
+								placeholder: "12",
+								className: M
+							})] }), /* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("label", {
+								htmlFor: "pm-exp-year",
+								className: N,
+								children: "Exp. yr."
+							}), /* @__PURE__ */ O("input", {
+								id: "pm-exp-year",
+								type: "number",
+								min: "2024",
+								max: "2099",
+								value: p,
+								onChange: (e) => m(e.target.value),
+								placeholder: "2028",
+								className: M
+							})] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ k("label", {
+					className: "flex items-center gap-2 text-sm text-text-primary",
+					children: [/* @__PURE__ */ O("input", {
+						type: "checkbox",
+						checked: h,
+						onChange: (e) => g(e.target.checked),
+						className: "size-4 rounded border-border-subtle"
+					}), "Set as default"]
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "flex justify-end gap-3",
+					children: [/* @__PURE__ */ O("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", {
+						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 B() {
+	let { data: e, isLoading: t, isError: n, refetch: r } = h(), i = _(), [a, d] = b(!1), f = e ?? [];
+	return /* @__PURE__ */ k(u, {
+		title: "Payment methods",
+		description: "Which external cards and accounts pay for your subscriptions",
+		action: /* @__PURE__ */ k("button", {
+			type: "button",
+			onClick: () => d(!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: [t ? /* @__PURE__ */ O(l, { label: "Loading payment methods…" }) : n ? /* @__PURE__ */ O(c, {
+			message: "Could not load payment methods.",
+			onRetry: () => void r()
+		}) : f.length === 0 ? /* @__PURE__ */ O(s, {
+			illustration: "empty-data",
+			icon: /* @__PURE__ */ O(x, { 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__ */ 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) })]
+	});
+}
+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,
 		pagination: {
-			limit: b,
-			offset: w * b
+			limit: j,
+			offset: d * j
 		}
-	}), 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";
+	}), 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";
 		return {
 			outstandingCount: e.length,
 			outstandingTotal: e.reduce((e, t) => e + t.total, 0),
 			currency: t
 		};
-	}, [P]);
-	return /* @__PURE__ */ v(n, {
+	}, [I]);
+	return /* @__PURE__ */ k(n, {
 		title: "Invoices",
 		description: "Your billing ledger across every relationship",
+		actions: /* @__PURE__ */ k("button", {
+			type: "button",
+			onClick: () => v(!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__ */ _(y, {
+			/* @__PURE__ */ O(A, {
 				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", {
+			!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__ */ _(r, {
+				children: [/* @__PURE__ */ O(r, {
 					featured: !0,
-					icon: /* @__PURE__ */ _(h, {}),
-					value: i(I.outstandingTotal, I.currency, { maximumFractionDigits: 0 }),
+					icon: /* @__PURE__ */ O(w, {}),
+					value: i(V.outstandingTotal, V.currency, { maximumFractionDigits: 0 }),
 					label: "Outstanding (this page)"
-				}), /* @__PURE__ */ _(r, {
-					icon: /* @__PURE__ */ _(m, {}),
-					value: I.outstandingCount,
+				}), /* @__PURE__ */ O(r, {
+					icon: /* @__PURE__ */ O(S, {}),
+					value: V.outstandingCount,
 					label: "Open invoices (this page)"
 				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ O("div", {
 				className: "mt-6 flex flex-wrap items-center gap-3",
-				children: /* @__PURE__ */ _("select", {
-					value: E,
+				children: /* @__PURE__ */ O("select", {
+					"aria-label": "Filter by status",
+					value: h,
 					onChange: (e) => {
-						D(e.target.value), T(0);
+						g(e.target.value), f(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: P.map((e) => /* @__PURE__ */ O("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})
 			}),
-			k ? /* @__PURE__ */ _(l, { label: "Loading invoices…" }) : A ? /* @__PURE__ */ _(c, {
+			T ? /* @__PURE__ */ O(l, { label: "Loading invoices…" }) : E ? /* @__PURE__ */ O(c, {
 				message: "Could not load invoices.",
-				onRetry: () => void j()
-			}) : P.length === 0 ? /* @__PURE__ */ _("div", {
+				onRetry: () => void M()
+			}) : I.length === 0 ? /* @__PURE__ */ O("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ _(s, {
+				children: /* @__PURE__ */ O(s, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ _(h, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ O(w, { className: "h-12 w-12" }),
 					title: "No invoices",
-					description: E ? "No invoices match this status filter." : "Invoices from your relationships will appear here."
+					description: h ? "No invoices match this status filter." : "Invoices from your relationships will appear here — or create one manually.",
+					action: /* @__PURE__ */ O("button", {
+						type: "button",
+						onClick: () => v(!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__ */ k(D, { children: [/* @__PURE__ */ k("div", {
 				className: "mt-6 overflow-hidden rounded-lg border border-border-subtle bg-bg-surface",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ k("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__ */ O("span", { children: "Invoice" }),
+						/* @__PURE__ */ O("span", { children: "Status" }),
+						/* @__PURE__ */ O("span", {
 							className: "text-right",
 							children: "Total"
 						}),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ O("span", {
 							className: "text-right",
 							children: "Due"
 						}),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ O("span", {
 							className: "text-right",
 							children: "Action"
 						})
 					]
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ O("div", {
 					className: "divide-y divide-border-subtle",
-					children: P.map((e) => /* @__PURE__ */ v("div", {
+					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: [
-							/* @__PURE__ */ v("button", {
+							/* @__PURE__ */ k("button", {
 								type: "button",
-								onClick: () => C(`/relationships/${e.relationshipId}`),
+								onClick: () => u(`/relationships/${e.relationshipId}`),
 								className: "min-w-0 text-left",
-								children: [/* @__PURE__ */ _("p", {
+								children: [/* @__PURE__ */ O("p", {
 									className: "truncate text-sm font-medium text-text-primary",
 									children: e.number || `Invoice ${e.id.slice(0, 8)}`
-								}), /* @__PURE__ */ _("p", {
+								}), /* @__PURE__ */ O("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__ */ O("span", { children: /* @__PURE__ */ O(o, { status: e.status }) }),
+							/* @__PURE__ */ O("span", {
 								className: "text-sm font-semibold tabular-nums text-text-primary sm:text-right",
 								children: i(e.total, e.currency)
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ O("span", {
 								className: "text-xs text-text-secondary sm:text-right",
 								children: e.dueDate ? a(e.dueDate) : "—"
 							}),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ O("span", {
 								className: "sm:text-right",
-								children: S.has(e.status) ? /* @__PURE__ */ _("button", {
+								children: L.has(e.status) ? /* @__PURE__ */ O("button", {
 									type: "button",
-									disabled: N.isPending,
-									onClick: () => N.mutate(e.id),
+									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__ */ v("span", {
+								}) : e.paidAt ? /* @__PURE__ */ k("span", {
 									className: "text-xs text-text-secondary",
 									children: ["Paid ", a(e.paidAt)]
-								}) : /* @__PURE__ */ _("span", {
+								}) : /* @__PURE__ */ O("span", {
 									className: "text-xs text-text-secondary",
 									children: "—"
 								})
@@ -176,36 +597,38 @@ function C() {
 						]
 					}, e.id))
 				})]
-			}), /* @__PURE__ */ v("div", {
+			}), /* @__PURE__ */ k("div", {
 				className: "mt-4 flex items-center justify-between",
-				children: [/* @__PURE__ */ v("p", {
+				children: [/* @__PURE__ */ k("p", {
 					className: "text-xs text-text-secondary",
 					children: [
 						"Page ",
-						w + 1,
-						M ? " · refreshing…" : ""
+						d + 1,
+						N ? " · refreshing…" : ""
 					]
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ k("div", {
 					className: "flex gap-2",
-					children: [/* @__PURE__ */ _("button", {
+					children: [/* @__PURE__ */ O("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: () => f((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__ */ O("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: !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"),
 						children: "Next"
 					})]
 				})]
-			})] })
+			})] }),
+			/* @__PURE__ */ O(B, {}),
+			_ && /* @__PURE__ */ O(R, { onClose: () => v(!1) })
 		]
 	});
 }
 //#endregion
-export { C as InvoicesPage };
+export { V as InvoicesPage };
 
 //# sourceMappingURL=InvoicesPage.js.map