@burdenoff/microfe-billing 2026.830.1 → 2026.830.2

package/dist/billing/modules/billing/pages/InvoicesListPage.js

@@ -1,43 +1,40 @@
-import { StatusPill as e } from "../../../shared/ui/StatusPill.js";
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { StatusPill as t } from "../../../shared/ui/StatusPill.js";
 import "../../../shared/ui/index.js";
-import { formatCurrency as t, formatDate as n, formatInvoiceNumber as r, formatInvoiceStatus as i } from "../../../shared/utils/format.js";
-import { getInvoiceStatusColor as a } from "../../../shared/utils/status.js";
-import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
-import { useGetBillingAccountsByOrgQuery as s } from "../../../../generated/global-operations.js";
-import { useBillingNavigate as c } from "../../../hooks/useBillingNavigate.js";
-import { withBillingAccountId as l } from "../../../shared/utils/navigation.js";
-import { usePaginatedInvoices as u } from "../hooks/useInvoices.js";
-import { useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
-import { RotateCcw as h } from "lucide-react";
-import { useSearchParams as g } from "react-router";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { formatCurrency as n, formatDate as r, formatInvoiceNumber as i, formatInvoiceStatus as a } from "../../../shared/utils/format.js";
+import { getInvoiceStatusColor as o } from "../../../shared/utils/status.js";
+import { useBillingPermissions as s } from "../../../hooks/useBillingPermissions.js";
+import { useGetBillingAccountsByOrgQuery as c } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as l } from "../../../hooks/useBillingNavigate.js";
+import { withBillingAccountId as u } from "../../../shared/utils/navigation.js";
+import { usePaginatedInvoices as d } from "../hooks/useInvoices.js";
+import { useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
+import { RotateCcw as g } from "lucide-react";
+import { useSearchParams as _ } from "react-router";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
 import { IllustratedEmptyState as x, PagePurpose as S } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/billing/pages/InvoicesListPage.tsx
 var C = () => {
-	let { t: e } = b(), t = (t, n) => {
-		let r = e(t);
-		return r === t ? n : r;
-	}, n = c(), r = o(), [a] = g(), C = a.get("billingAccountId") ?? void 0, { data: T } = s({ fetchPolicy: "cache-first" }), E = f(() => T?.getBillingAccountsByOrg ?? [], [T]), [D, O] = m(C);
-	d(() => {
-		O(C);
-	}, [C]);
-	let k = f(() => (E.find((e) => e.isDefault) ?? E[0])?.id ?? void 0, [E]), A = D === void 0 ? k ?? null : D, [j, M] = m("all"), [N, P] = m(""), [F, I] = m(""), [L, R] = m(1), z = p(null);
-	d(() => (z.current && clearTimeout(z.current), z.current = setTimeout(() => {
-		I(N), R(1);
+	let t = e(), n = l(), r = s(), [i] = _(), o = i.get("billingAccountId") ?? void 0, { data: C } = c({ fetchPolicy: "cache-first" }), T = p(() => C?.getBillingAccountsByOrg ?? [], [C]), [E, D] = h(o);
+	f(() => {
+		D(o);
+	}, [o]);
+	let O = p(() => (T.find((e) => e.isDefault) ?? T[0])?.id ?? void 0, [T]), k = E === void 0 ? O ?? null : E, [A, j] = h("all"), [M, N] = h(""), [P, F] = h(""), [I, L] = h(1), R = m(null);
+	f(() => (R.current && clearTimeout(R.current), R.current = setTimeout(() => {
+		F(M), L(1);
 	}, 400), () => {
-		z.current && clearTimeout(z.current);
-	}), [N]);
-	let { invoices: B, totalPages: V, isLoading: H, error: U, refetch: W } = u({
-		billingAccountId: A ?? void 0,
-		status: j === "all" ? void 0 : j,
-		search: F || void 0,
-		page: L,
+		R.current && clearTimeout(R.current);
+	}), [M]);
+	let { invoices: z, totalPages: B, isLoading: V, error: H, refetch: U } = d({
+		billingAccountId: k ?? void 0,
+		status: A === "all" ? void 0 : A,
+		search: P || void 0,
+		page: I,
 		pageSize: 20
 	});
-	return r.canViewInvoices ? H && B.length === 0 ? /* @__PURE__ */ y("div", {
+	return r.canViewInvoices ? V && z.length === 0 ? /* @__PURE__ */ b("div", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ v("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ y("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", {
 			className: "space-y-3",
 			children: [
 				1,
@@ -45,30 +42,30 @@ var C = () => {
 				3,
 				4,
 				5
-			].map((e) => /* @__PURE__ */ v("div", {
+			].map((e) => /* @__PURE__ */ y("div", {
 				className: "border border-border-subtle rounded-lg p-4",
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ v("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", {
+					children: [/* @__PURE__ */ y("div", { className: "size-10 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ b("div", {
 						className: "flex-1 space-y-2",
-						children: [/* @__PURE__ */ v("div", { className: "h-4 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ v("div", { className: "h-3 w-48 bg-bg-sunken animate-pulse rounded" })]
+						children: [/* @__PURE__ */ y("div", { className: "h-4 w-32 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ y("div", { className: "h-3 w-48 bg-bg-sunken animate-pulse rounded" })]
 					})]
 				})
 			}, e))
 		})]
-	}) : U ? /* @__PURE__ */ v("div", {
+	}) : H ? /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "text-center space-y-4",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ y("div", {
 					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ y("svg", {
 						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -76,70 +73,70 @@ var C = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ y("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: t("billing.invoices.failedToLoad", "Failed to load invoices")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary",
-					children: U.message
+					children: H.message
 				}),
-				/* @__PURE__ */ v("button", {
+				/* @__PURE__ */ y("button", {
 					type: "button",
-					onClick: () => W(),
+					onClick: () => U(),
 					className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
-					children: "Try Again"
+					children: t("billing.common.tryAgain", "Try Again")
 				})
 			]
 		})
-	}) : /* @__PURE__ */ y("div", {
+	}) : /* @__PURE__ */ b("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ y("div", { children: [
-					/* @__PURE__ */ v("h1", {
+				children: [/* @__PURE__ */ b("div", { children: [
+					/* @__PURE__ */ y("h1", {
 						className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 						children: t("billing.invoices.title", "Invoices")
 					}),
-					/* @__PURE__ */ v("p", {
+					/* @__PURE__ */ y("p", {
 						className: "text-sm text-text-secondary mt-1",
 						children: t("billing.invoices.subtitle", "View and manage your billing invoices")
 					}),
-					/* @__PURE__ */ v(S, {
+					/* @__PURE__ */ y(S, {
 						className: "mt-3",
 						children: t("billing.invoices.purpose", "A record of everything you have been billed for — subscriptions, add-ons and one-off charges. Open an invoice to see line items, download the PDF, pay an outstanding amount, or request a refund.")
 					})
-				] }), /* @__PURE__ */ y("div", {
+				] }), /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ y("button", {
+					children: [/* @__PURE__ */ b("button", {
 						type: "button",
 						onClick: () => n("/refunds"),
 						className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-all duration-200",
-						children: [/* @__PURE__ */ v(h, { className: "size-4" }), t("billing.invoices.myRefunds", "My Refunds")]
-					}), E.length > 1 && /* @__PURE__ */ y("div", {
+						children: [/* @__PURE__ */ y(g, { className: "size-4" }), t("billing.invoices.myRefunds", "My Refunds")]
+					}), T.length > 1 && /* @__PURE__ */ b("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ v("label", {
+						children: [/* @__PURE__ */ y("label", {
 							className: "text-sm text-text-secondary whitespace-nowrap",
-							children: "Billing Account"
-						}), /* @__PURE__ */ y("select", {
-							value: A ?? "",
-							onChange: (e) => O(e.target.value || null),
+							children: t("billing.invoices.billingAccountLabel", "Billing Account")
+						}), /* @__PURE__ */ b("select", {
+							value: k ?? "",
+							onChange: (e) => D(e.target.value || null),
 							className: "text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-							children: [/* @__PURE__ */ v("option", {
+							children: [/* @__PURE__ */ y("option", {
 								value: "",
-								children: "All Accounts"
-							}), E.map((e) => /* @__PURE__ */ y("option", {
+								children: t("billing.invoices.allAccounts", "All Accounts")
+							}), T.map((e) => /* @__PURE__ */ b("option", {
 								value: e.id ?? "",
-								children: [e.name ?? e.email ?? e.id, e.isDefault ? " (Default)" : ""]
+								children: [e.name ?? e.email ?? e.id, e.isDefault ? t("billing.invoices.defaultSuffix", " (Default)") : ""]
 							}, e.id ?? ""))]
 						})]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ y("div", {
 					className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken flex-wrap",
 					children: [
 						"all",
@@ -147,129 +144,127 @@ var C = () => {
 						"PAID",
 						"DRAFT",
 						"VOID"
-					].map((e) => /* @__PURE__ */ v("button", {
+					].map((e) => /* @__PURE__ */ y("button", {
 						type: "button",
 						onClick: () => {
-							M(e), R(1);
+							j(e), L(1);
 						},
-						className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${j === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
-						children: e === "all" ? "All" : i(e)
+						className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${A === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
+						children: e === "all" ? "All" : a(e)
 					}, e))
-				}), /* @__PURE__ */ y("div", {
+				}), /* @__PURE__ */ b("div", {
 					className: "relative flex-1 min-w-0 w-full sm:max-w-md",
-					children: [/* @__PURE__ */ v("svg", {
+					children: [/* @__PURE__ */ y("svg", {
 						className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
 						})
-					}), /* @__PURE__ */ v("input", {
+					}), /* @__PURE__ */ y("input", {
 						type: "text",
 						placeholder: t("billing.invoices.searchPlaceholder", "Search by invoice number..."),
-						value: N,
-						onChange: (e) => P(e.target.value),
+						value: M,
+						onChange: (e) => N(e.target.value),
 						className: "w-full pl-[3.25rem] pr-4 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] focus:border-transparent"
 					})]
 				})]
 			}),
-			!H && B.length === 0 ? /* @__PURE__ */ v(x, {
-				illustration: j !== "all" || F ? "empty-search" : "empty-files",
+			!V && z.length === 0 ? /* @__PURE__ */ y(x, {
+				illustration: A !== "all" || P ? "empty-search" : "empty-files",
 				title: t("billing.invoices.noInvoicesFound", "No invoices found"),
-				description: j !== "all" || F ? t("billing.invoices.noInvoicesFiltered", "No invoices match your filters.") : t("billing.invoices.noInvoicesYet", "You don't have any invoices yet.")
-			}) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+				description: A !== "all" || P ? t("billing.invoices.noInvoicesFiltered", "No invoices match your filters.") : t("billing.invoices.noInvoicesYet", "You don't have any invoices yet.")
+			}) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("div", {
 				className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
-				children: /* @__PURE__ */ y("table", {
+				children: /* @__PURE__ */ b("table", {
 					className: "w-full",
-					children: [/* @__PURE__ */ v("thead", {
+					children: [/* @__PURE__ */ y("thead", {
 						className: "bg-bg-sunken",
-						children: /* @__PURE__ */ y("tr", { children: [
-							/* @__PURE__ */ v("th", {
+						children: /* @__PURE__ */ b("tr", { children: [
+							/* @__PURE__ */ y("th", {
 								className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
-								children: "Invoice"
+								children: t("billing.invoices.invoice", "Invoice")
 							}),
-							/* @__PURE__ */ v("th", {
+							/* @__PURE__ */ y("th", {
 								className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
-								children: "Status"
+								children: t("billing.common.status", "Status")
 							}),
-							!A && E.length > 1 && /* @__PURE__ */ v("th", {
+							!k && T.length > 1 && /* @__PURE__ */ y("th", {
 								className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden lg:table-cell",
-								children: "Account"
+								children: t("billing.common.account", "Account")
 							}),
-							/* @__PURE__ */ v("th", {
+							/* @__PURE__ */ y("th", {
 								className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden sm:table-cell",
-								children: "Date"
+								children: t("billing.common.date", "Date")
 							}),
-							/* @__PURE__ */ v("th", {
+							/* @__PURE__ */ y("th", {
 								className: "text-left px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted hidden md:table-cell",
-								children: "Due Date"
+								children: t("billing.common.dueDate", "Due Date")
 							}),
-							/* @__PURE__ */ v("th", {
+							/* @__PURE__ */ y("th", {
 								className: "text-right px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
-								children: "Amount"
+								children: t("billing.common.amount", "Amount")
 							}),
-							/* @__PURE__ */ v("th", {
+							/* @__PURE__ */ y("th", {
 								className: "text-right px-4 py-3 text-xs font-medium uppercase tracking-wide text-text-muted",
-								children: "Actions"
+								children: t("billing.common.actions", "Actions")
 							})
 						] })
-					}), /* @__PURE__ */ v("tbody", {
+					}), /* @__PURE__ */ y("tbody", {
 						className: "divide-y divide-border-subtle",
-						children: B.map((e) => /* @__PURE__ */ v(w, {
+						children: z.map((e) => /* @__PURE__ */ y(w, {
 							invoice: e,
-							onView: () => n(l(`/invoices/${e.id}`, e.billingAccountId)),
+							onView: () => n(u(`/invoices/${e.id}`, e.billingAccountId)),
 							canPay: r.canPayInvoice,
 							canVoid: r.canVoidInvoice,
-							showAccount: !A && E.length > 1,
-							accountName: E.find((t) => t.id === e.billingAccountId)?.name ?? null
+							showAccount: !k && T.length > 1,
+							accountName: T.find((t) => t.id === e.billingAccountId)?.name ?? null
 						}, e.id))
 					})]
 				})
-			}), V > 1 && /* @__PURE__ */ y("div", {
+			}), B > 1 && /* @__PURE__ */ b("div", {
 				className: "flex items-center justify-between pt-2",
 				children: [/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary",
-					children: [
-						"Page ",
-						L,
-						" of ",
-						V
-					]
-				}), /* @__PURE__ */ y("div", {
+					children: t("billing.common.pageOf", "Page {{page}} of {{totalPages}}", {
+						page: I,
+						totalPages: B
+					})
+				}), /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ v("button", {
+					children: [/* @__PURE__ */ y("button", {
 						type: "button",
-						onClick: () => R((e) => Math.max(1, e - 1)),
-						disabled: L <= 1,
+						onClick: () => L((e) => Math.max(1, e - 1)),
+						disabled: I <= 1,
 						className: "px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-button bg-bg-surface text-text-primary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
-						children: "Previous"
-					}), /* @__PURE__ */ v("button", {
+						children: t("billing.common.previous", "Previous")
+					}), /* @__PURE__ */ y("button", {
 						type: "button",
-						onClick: () => R((e) => Math.min(V, e + 1)),
-						disabled: L >= V,
+						onClick: () => L((e) => Math.min(B, e + 1)),
+						disabled: I >= B,
 						className: "px-3 py-1.5 text-sm font-medium border border-border-subtle rounded-button bg-bg-surface text-text-primary hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
-						children: "Next"
+						children: t("billing.common.next", "Next")
 					})]
 				})]
 			})] })
 		]
-	}) : /* @__PURE__ */ v("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: "text-center space-y-2",
 			children: [
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ y("div", {
 					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
-					children: /* @__PURE__ */ v("svg", {
+					children: /* @__PURE__ */ y("svg", {
 						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
-						children: /* @__PURE__ */ v("path", {
+						children: /* @__PURE__ */ y("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -277,103 +272,103 @@ var C = () => {
 						})
 					})
 				}),
-				/* @__PURE__ */ v("h2", {
+				/* @__PURE__ */ y("h2", {
 					className: "text-lg font-semibold text-text-primary",
 					children: t("billing.accessDenied.title", "Access Denied")
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary max-w-sm",
 					children: t("billing.invoices.noViewPermission", "You don't have permission to view invoices.")
 				})
 			]
 		})
 	});
-}, w = ({ invoice: o, onView: s, canPay: c, canVoid: l, showAccount: u = !1, accountName: d }) => {
-	let f = a(o.status), p = o.status === "OPEN", m = o.status === "DRAFT";
-	return /* @__PURE__ */ y("tr", {
+}, w = ({ invoice: s, onView: c, canPay: l, canVoid: u, showAccount: d = !1, accountName: f }) => {
+	let p = e(), m = o(s.status), h = s.status === "OPEN", g = s.status === "DRAFT";
+	return /* @__PURE__ */ b("tr", {
 		className: "hover:bg-bg-sunken transition-colors",
 		children: [
-			/* @__PURE__ */ y("td", {
+			/* @__PURE__ */ b("td", {
 				className: "p-4",
-				children: [o.invoiceUrl ? /* @__PURE__ */ v("a", {
-					href: o.invoiceUrl,
+				children: [s.invoiceUrl ? /* @__PURE__ */ y("a", {
+					href: s.invoiceUrl,
 					target: "_blank",
 					rel: "noopener noreferrer",
 					className: "font-medium text-text-primary hover:text-text-link transition-colors",
-					children: r(o.invoiceNumber)
-				}) : /* @__PURE__ */ v("button", {
+					children: i(s.invoiceNumber)
+				}) : /* @__PURE__ */ y("button", {
 					type: "button",
-					onClick: s,
+					onClick: c,
 					className: "font-medium text-text-primary hover:text-text-link transition-colors",
-					children: r(o.invoiceNumber)
-				}), (o.itemDescription ?? o.subscription?.plan?.name) && /* @__PURE__ */ v("p", {
+					children: i(s.invoiceNumber)
+				}), (s.itemDescription ?? s.subscription?.plan?.name) && /* @__PURE__ */ y("p", {
 					className: "text-sm text-text-secondary mt-0.5",
-					children: o.itemDescription ?? o.subscription?.plan?.name
+					children: s.itemDescription ?? s.subscription?.plan?.name
 				})]
 			}),
-			/* @__PURE__ */ v("td", {
+			/* @__PURE__ */ y("td", {
 				className: "p-4",
-				children: /* @__PURE__ */ v(e, {
-					status: f,
+				children: /* @__PURE__ */ y(t, {
+					status: m,
 					dot: !0,
-					children: i(o.status)
+					children: a(s.status)
 				})
 			}),
-			u && /* @__PURE__ */ v("td", {
+			d && /* @__PURE__ */ y("td", {
 				className: "p-4 hidden lg:table-cell",
-				children: d ? /* @__PURE__ */ v("span", {
+				children: f ? /* @__PURE__ */ y("span", {
 					className: "inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-bg-sunken text-text-secondary border border-border-subtle",
-					children: d
-				}) : /* @__PURE__ */ v("span", {
+					children: f
+				}) : /* @__PURE__ */ y("span", {
 					className: "text-sm text-text-secondary",
 					children: ", "
 				})
 			}),
-			/* @__PURE__ */ v("td", {
+			/* @__PURE__ */ y("td", {
 				className: "p-4 text-sm text-text-secondary hidden sm:table-cell",
-				children: n(o.createdAt, "short")
+				children: r(s.createdAt, "short")
 			}),
-			/* @__PURE__ */ v("td", {
+			/* @__PURE__ */ y("td", {
 				className: "p-4 text-sm text-text-secondary hidden md:table-cell",
-				children: o.dueDate ? n(o.dueDate, "short") : "—"
+				children: s.dueDate ? r(s.dueDate, "short") : "—"
 			}),
-			/* @__PURE__ */ v("td", {
+			/* @__PURE__ */ y("td", {
 				className: "p-4 text-right font-medium text-text-primary",
-				children: t(o.total, o.currency)
+				children: n(s.total, s.currency)
 			}),
-			/* @__PURE__ */ v("td", {
+			/* @__PURE__ */ y("td", {
 				className: "p-4 text-right",
-				children: /* @__PURE__ */ y("div", {
+				children: /* @__PURE__ */ b("div", {
 					className: "flex items-center justify-end gap-2",
 					children: [
-						o.invoiceUrl ? /* @__PURE__ */ v("a", {
-							href: o.invoiceUrl,
+						s.invoiceUrl ? /* @__PURE__ */ y("a", {
+							href: s.invoiceUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
 							className: "px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200",
-							children: "View"
-						}) : /* @__PURE__ */ v("button", {
+							children: p("billing.common.view", "View")
+						}) : /* @__PURE__ */ y("button", {
 							type: "button",
-							onClick: s,
+							onClick: c,
 							className: "px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200",
-							children: "View"
+							children: p("billing.common.view", "View")
 						}),
-						o.pdfUrl && /* @__PURE__ */ v("a", {
-							href: o.pdfUrl,
+						s.pdfUrl && /* @__PURE__ */ y("a", {
+							href: s.pdfUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
 							className: "px-3 py-1.5 text-sm font-medium text-text-link hover:bg-[var(--color-accent-softHover)] rounded-button transition-colors duration-200",
-							children: "PDF"
+							children: p("billing.common.pdf", "PDF")
 						}),
-						p && c && /* @__PURE__ */ v("button", {
+						h && l && /* @__PURE__ */ y("button", {
 							type: "button",
 							className: "px-3 py-1.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200",
-							children: "Pay"
+							children: p("billing.common.pay", "Pay")
 						}),
-						(p || m) && l && /* @__PURE__ */ v("button", {
+						(h || g) && u && /* @__PURE__ */ y("button", {
 							type: "button",
 							className: "px-3 py-1.5 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded-button transition-colors duration-200",
-							children: "Void"
+							children: p("billing.common.void", "Void")
 						})
 					]
 				})