@burdenoff/microfe-billing 2026.625.4 → 2026.626.1

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

@@ -11,48 +11,48 @@ import { useState as m } from "react";
 import { useParams as h } from "react-router-dom";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { useI18n as v } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ResponsiveTable as y } from "@burdenoff/fe-libs/ui";
+import { EmphasisPanel as y, NextSteps as b, PagePurpose as x, ResponsiveTable as S } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/billing/pages/InvoiceDetailPage.tsx
-var b = () => {
-	let { t: b } = v(), x = (e, t) => {
-		let n = b(e);
+var C = () => {
+	let { t: C } = v(), w = (e, t) => {
+		let n = C(e);
 		return n === e ? t : n;
-	}, { invoiceId: S } = h(), C = u(), { orgId: w } = e(), T = c(), { selectedAccountId: E } = t({
-		orgId: w,
+	}, { invoiceId: T } = h(), E = u(), { orgId: D } = e(), O = c(), { selectedAccountId: k } = t({
+		orgId: D,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), { data: D } = l({ fetchPolicy: "cache-first" }), O = E ?? D?.getDefaultBillingAccount?.id ?? void 0, { invoice: k, isLoading: A, error: j, refetch: M } = f(S, O), { payInvoice: N, voidInvoice: P, isPaying: F, isVoiding: I } = p(), L = D?.getDefaultBillingAccount?.defaultPaymentMethod, [R, z] = m(null), B = async () => {
-		if (k) {
-			if (!L) {
-				z("Add and set a default payment method before paying this invoice.");
+	}), { data: A } = l({ fetchPolicy: "cache-first" }), j = k ?? A?.getDefaultBillingAccount?.id ?? void 0, { invoice: M, isLoading: N, error: P, refetch: F } = f(T, j), { payInvoice: I, voidInvoice: L, isPaying: R, isVoiding: z } = p(), B = A?.getDefaultBillingAccount?.defaultPaymentMethod, [V, H] = m(null), U = async () => {
+		if (M) {
+			if (!B) {
+				H("Add and set a default payment method before paying this invoice.");
 				return;
 			}
-			if (!O) {
-				z("No billing account context");
+			if (!j) {
+				H("No billing account context");
 				return;
 			}
-			z(null);
+			H(null);
 			try {
-				await N(k.id, L, O), await M();
+				await I(M.id, B, j), await F();
 			} catch (e) {
-				z(e instanceof Error ? e.message : "Failed to pay invoice");
+				H(e instanceof Error ? e.message : "Failed to pay invoice");
 			}
 		}
-	}, V = async () => {
-		if (k) {
-			if (!O) {
-				z("No billing account context");
+	}, W = async () => {
+		if (M) {
+			if (!j) {
+				H("No billing account context");
 				return;
 			}
-			z(null);
+			H(null);
 			try {
-				await P(k.id, O), await M();
+				await L(M.id, j), await F();
 			} catch (e) {
-				z(e instanceof Error ? e.message : "Failed to void invoice");
+				H(e instanceof Error ? e.message : "Failed to void invoice");
 			}
 		}
 	};
-	if (!T.canViewInvoices) return /* @__PURE__ */ g("div", {
+	if (!O.canViewInvoices) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-2",
@@ -74,16 +74,16 @@ var b = () => {
 				}),
 				/* @__PURE__ */ g("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: x("billing.accessDenied.title", "Access Denied")
+					children: w("billing.accessDenied.title", "Access Denied")
 				}),
 				/* @__PURE__ */ g("p", {
 					className: "text-sm text-text-secondary max-w-sm",
-					children: x("billing.invoices.noViewPermission", "You don't have permission to view invoices.")
+					children: w("billing.invoices.noViewPermission", "You don't have permission to view invoices.")
 				})
 			]
 		})
 	});
-	if (A) return /* @__PURE__ */ _("div", {
+	if (N) return /* @__PURE__ */ _("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ _("div", {
 			className: "flex items-center gap-4",
@@ -135,7 +135,7 @@ var b = () => {
 			})]
 		})]
 	});
-	if (j || !k) return /* @__PURE__ */ g("div", {
+	if (P || !M) return /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ _("div", {
 			className: "text-center space-y-4",
@@ -157,22 +157,22 @@ var b = () => {
 				}),
 				/* @__PURE__ */ g("h2", {
 					className: "text-lg font-semibold text-text-primary",
-					children: x("billing.invoices.invoiceNotFound", "Invoice not found")
+					children: w("billing.invoices.invoiceNotFound", "Invoice not found")
 				}),
 				/* @__PURE__ */ g("p", {
 					className: "text-sm text-text-secondary",
-					children: j?.message || x("billing.invoices.invoiceNotFoundMessage", "The invoice you are looking for does not exist.")
+					children: P?.message || w("billing.invoices.invoiceNotFoundMessage", "The invoice you are looking for does not exist.")
 				}),
 				/* @__PURE__ */ _("div", {
 					className: "flex items-center justify-center gap-3",
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: () => M(),
+						onClick: () => F(),
 						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"
 					}), /* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: () => C(d("/invoices", O)),
+						onClick: () => E(d("/invoices", j)),
 						className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 						children: "Back to Invoices"
 					})]
@@ -180,7 +180,69 @@ var b = () => {
 			]
 		})
 	});
-	let H = o(k.status), U = k.status === "OPEN", W = k.status === "DRAFT", G = k.items || [], K = k.total - k.amountPaid;
+	let G = o(M.status), K = M.status === "OPEN", q = M.status === "DRAFT", J = M.items || [], Y = M.total - M.amountPaid, X = [
+		{
+			key: "description",
+			header: "Description",
+			priority: "primary",
+			cell: (e) => e.description
+		},
+		{
+			key: "quantity",
+			header: "Qty",
+			headerClassName: "text-right",
+			cellClassName: "text-right",
+			cell: (e) => /* @__PURE__ */ g("span", {
+				className: "tabular-nums",
+				children: e.quantity
+			})
+		},
+		{
+			key: "unitPrice",
+			header: "Unit Price",
+			headerClassName: "text-right",
+			cellClassName: "text-right",
+			cell: (e) => /* @__PURE__ */ g("span", {
+				className: "tabular-nums",
+				children: n(e.unitPrice, M.currency)
+			})
+		},
+		{
+			key: "amount",
+			header: "Amount",
+			headerClassName: "text-right",
+			cellClassName: "text-right font-medium",
+			cell: (e) => /* @__PURE__ */ g("span", {
+				className: "tabular-nums",
+				children: n(e.amount, M.currency)
+			})
+		}
+	], Z = [
+		...K && O.canPayInvoice ? [{
+			id: "pay",
+			label: "Pay this invoice",
+			description: B ? "Settle the outstanding amount with your default payment method." : "Add a default payment method first, then pay.",
+			onClick: U
+		}] : [],
+		...M.pdfUrl ? [{
+			id: "download",
+			label: "Download the PDF",
+			description: "Save a copy of this invoice for your records.",
+			href: M.pdfUrl
+		}] : [],
+		...M.subscription ? [{
+			id: "view-subscription",
+			label: "View the related subscription",
+			description: "See the plan and quotas this invoice billed for.",
+			onClick: () => E(d(`/subscriptions/${M.subscription.id}`, j))
+		}] : [],
+		{
+			id: "request-refund",
+			label: "Have an issue? Request a refund",
+			description: "Raise a refund request for a charge on this account.",
+			onClick: () => E(d("/refunds", j))
+		}
+	];
 	return /* @__PURE__ */ _("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
@@ -190,7 +252,7 @@ var b = () => {
 					className: "flex items-start gap-4",
 					children: [/* @__PURE__ */ g("button", {
 						type: "button",
-						onClick: () => C(d("/invoices", O)),
+						onClick: () => E(d("/invoices", j)),
 						className: "p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 						children: /* @__PURE__ */ g("svg", {
 							className: "size-5",
@@ -204,62 +266,69 @@ var b = () => {
 								d: "M15 19l-7-7 7-7"
 							})
 						})
-					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ _("h1", {
-							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-							children: ["Invoice ", i(k.invoiceNumber)]
-						}), /* @__PURE__ */ g("span", {
-							className: `px-2 py-1 text-xs font-medium rounded ${s(H)}`,
-							children: a(k.status)
-						})]
-					}), /* @__PURE__ */ _("p", {
-						className: "text-sm text-text-secondary mt-1",
-						children: [
-							"Created ",
-							r(k.createdAt, "short"),
-							k.dueDate && ` · Due ${r(k.dueDate, "short")}`
-						]
-					})] })]
+					}), /* @__PURE__ */ _("div", { children: [
+						/* @__PURE__ */ _("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ _("h1", {
+								className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+								children: ["Invoice ", i(M.invoiceNumber)]
+							}), /* @__PURE__ */ g("span", {
+								className: `px-2 py-1 text-xs font-medium rounded ${s(G)}`,
+								children: a(M.status)
+							})]
+						}),
+						/* @__PURE__ */ _("p", {
+							className: "text-sm text-text-secondary mt-1",
+							children: [
+								"Created ",
+								r(M.createdAt, "short"),
+								M.dueDate && ` · Due ${r(M.dueDate, "short")}`
+							]
+						}),
+						/* @__PURE__ */ g(x, {
+							className: "mt-3",
+							children: w("billing.invoices.detailPurpose", "The full breakdown of a single invoice — its line items, taxes, what has been paid and what is still due. Use it to download the PDF, pay an outstanding balance, jump to the subscription it covers, or raise a refund.")
+						})
+					] })]
 				}), /* @__PURE__ */ _("div", {
 					className: "flex items-center gap-2 flex-wrap",
 					children: [
-						k.pdfUrl && /* @__PURE__ */ g("a", {
-							href: k.pdfUrl,
+						M.pdfUrl && /* @__PURE__ */ g("a", {
+							href: M.pdfUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
 							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 							children: "Download PDF"
 						}),
-						k.invoiceUrl && /* @__PURE__ */ g("a", {
-							href: k.invoiceUrl,
+						M.invoiceUrl && /* @__PURE__ */ g("a", {
+							href: M.invoiceUrl,
 							target: "_blank",
 							rel: "noopener noreferrer",
 							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 							children: "View on Portal"
 						}),
-						U && T.canPayInvoice && /* @__PURE__ */ g("button", {
+						K && O.canPayInvoice && /* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: B,
-							disabled: F || !L,
+							onClick: U,
+							disabled: R || !B,
 							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 disabled:opacity-50",
-							children: L ? F ? "Processing..." : "Pay Invoice" : "Default Payment Method Required"
+							children: B ? R ? "Processing..." : "Pay Invoice" : "Default Payment Method Required"
 						}),
-						(U || W) && T.canVoidInvoice && /* @__PURE__ */ g("button", {
+						(K || q) && O.canVoidInvoice && /* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: V,
-							disabled: I,
+							onClick: W,
+							disabled: z,
 							className: "px-4 py-2 text-sm font-medium border border-border-subtle text-status-error-text rounded-button hover:bg-status-error-bg-subtle transition-colors disabled:opacity-50",
-							children: I ? x("billing.invoices.voiding", "Voiding...") : x("billing.invoices.voidInvoice", "Void Invoice")
+							children: z ? w("billing.invoices.voiding", "Voiding...") : w("billing.invoices.voidInvoice", "Void Invoice")
 						})
 					]
 				})]
 			}),
-			R && /* @__PURE__ */ g("div", {
+			V && /* @__PURE__ */ g("div", {
 				className: "p-3 bg-status-error-bg-subtle border border-status-error-border rounded-button",
 				children: /* @__PURE__ */ g("p", {
 					className: "text-sm text-status-error-text",
-					children: R
+					children: V
 				})
 			}),
 			/* @__PURE__ */ _("div", {
@@ -267,68 +336,31 @@ var b = () => {
 				children: [/* @__PURE__ */ _("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						/* @__PURE__ */ _("div", {
-							className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
+						/* @__PURE__ */ _(y, {
+							className: "overflow-hidden p-0",
 							children: [
 								/* @__PURE__ */ g("div", {
-									className: "p-6 border-b border-border-subtle bg-bg-sunken",
+									className: "p-6 border-b border-border-subtle",
 									children: /* @__PURE__ */ _("h2", {
 										className: "text-lg font-semibold text-text-primary",
 										children: [
-											x("billing.invoices.lineItems", "Line Items"),
+											w("billing.invoices.lineItems", "Line Items"),
 											" (",
-											G.length,
+											J.length,
 											")"
 										]
 									})
 								}),
-								G.length === 0 ? /* @__PURE__ */ g("div", {
+								J.length === 0 ? /* @__PURE__ */ g("div", {
 									className: "p-6",
 									children: /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
-										children: x("billing.invoices.noLineItems", "No line items on this invoice.")
+										children: w("billing.invoices.noLineItems", "No line items on this invoice.")
 									})
-								}) : /* @__PURE__ */ g(y, {
-									data: G,
+								}) : /* @__PURE__ */ g(S, {
+									data: J,
 									rowKey: (e) => e.id,
-									columns: [
-										{
-											key: "description",
-											header: "Description",
-											priority: "primary",
-											cell: (e) => e.description
-										},
-										{
-											key: "quantity",
-											header: "Qty",
-											headerClassName: "text-right",
-											cellClassName: "text-right",
-											cell: (e) => /* @__PURE__ */ g("span", {
-												className: "tabular-nums",
-												children: e.quantity
-											})
-										},
-										{
-											key: "unitPrice",
-											header: "Unit Price",
-											headerClassName: "text-right",
-											cellClassName: "text-right",
-											cell: (e) => /* @__PURE__ */ g("span", {
-												className: "tabular-nums",
-												children: n(e.unitPrice, k.currency)
-											})
-										},
-										{
-											key: "amount",
-											header: "Amount",
-											headerClassName: "text-right",
-											cellClassName: "text-right font-medium",
-											cell: (e) => /* @__PURE__ */ g("span", {
-												className: "tabular-nums",
-												children: n(e.amount, k.currency)
-											})
-										}
-									]
+									columns: X
 								}),
 								/* @__PURE__ */ g("div", {
 									className: "border-t border-border-subtle p-4",
@@ -339,50 +371,50 @@ var b = () => {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
 													className: "text-text-secondary",
-													children: x("billing.invoices.subtotal", "Subtotal")
+													children: w("billing.invoices.subtotal", "Subtotal")
 												}), /* @__PURE__ */ g("span", {
 													className: "text-text-primary",
-													children: n(k.subtotal, k.currency)
+													children: n(M.subtotal, M.currency)
 												})]
 											}),
 											/* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
 													className: "text-text-secondary",
-													children: x("billing.invoices.tax", "Tax")
+													children: w("billing.invoices.tax", "Tax")
 												}), /* @__PURE__ */ g("span", {
 													className: "text-text-primary",
-													children: n(k.tax, k.currency)
+													children: n(M.tax, M.currency)
 												})]
 											}),
 											/* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2",
 												children: [/* @__PURE__ */ g("span", {
 													className: "text-text-primary",
-													children: x("billing.invoices.total", "Total")
+													children: w("billing.invoices.total", "Total")
 												}), /* @__PURE__ */ g("span", {
 													className: "text-text-primary",
-													children: n(k.total, k.currency)
+													children: n(M.total, M.currency)
 												})]
 											}),
-											k.amountPaid > 0 && /* @__PURE__ */ _("div", {
+											M.amountPaid > 0 && /* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm",
 												children: [/* @__PURE__ */ g("span", {
 													className: "text-text-secondary",
-													children: x("billing.invoices.amountPaid", "Amount Paid")
+													children: w("billing.invoices.amountPaid", "Amount Paid")
 												}), /* @__PURE__ */ _("span", {
 													className: "text-status-success-text",
-													children: ["-", n(k.amountPaid, k.currency)]
+													children: ["-", n(M.amountPaid, M.currency)]
 												})]
 											}),
-											K > 0 && /* @__PURE__ */ _("div", {
+											Y > 0 && /* @__PURE__ */ _("div", {
 												className: "flex items-center justify-between text-sm font-semibold border-t border-border-subtle pt-2",
 												children: [/* @__PURE__ */ g("span", {
 													className: "text-text-primary",
-													children: x("billing.invoices.amountDue", "Amount Due")
+													children: w("billing.invoices.amountDue", "Amount Due")
 												}), /* @__PURE__ */ g("span", {
 													className: "text-status-warning-text",
-													children: n(K, k.currency)
+													children: n(Y, M.currency)
 												})]
 											})
 										]
@@ -390,13 +422,13 @@ var b = () => {
 								})
 							]
 						}),
-						k.subscription && /* @__PURE__ */ _("div", {
+						M.subscription && /* @__PURE__ */ _("div", {
 							className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
 								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: x("billing.invoices.subscription", "Subscription")
+									children: w("billing.invoices.subscription", "Subscription")
 								})
 							}), /* @__PURE__ */ g("div", {
 								className: "p-6 space-y-4",
@@ -404,7 +436,7 @@ var b = () => {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "font-medium text-text-primary",
-										children: k.subscription.plan?.name || "Unknown Plan"
+										children: M.subscription.plan?.name || "Unknown Plan"
 									}), /* @__PURE__ */ _("p", {
 										className: "text-sm text-text-secondary mt-0.5",
 										children: [
@@ -412,25 +444,25 @@ var b = () => {
 											" ",
 											/* @__PURE__ */ g("span", {
 												className: "font-mono text-xs",
-												children: k.subscription.id
+												children: M.subscription.id
 											})
 										]
 									})] }), /* @__PURE__ */ g("button", {
 										type: "button",
-										onClick: () => C(d(`/subscriptions/${k.subscription.id}`, O)),
+										onClick: () => E(d(`/subscriptions/${M.subscription.id}`, j)),
 										className: "px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-sunken rounded-button transition-colors",
 										children: "View"
 									})]
 								})
 							})]
 						}),
-						k.payment && /* @__PURE__ */ _("div", {
+						M.payment && /* @__PURE__ */ _("div", {
 							className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
 								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: x("billing.invoices.payment", "Payment")
+									children: w("billing.invoices.payment", "Payment")
 								})
 							}), /* @__PURE__ */ g("div", {
 								className: "p-6",
@@ -442,42 +474,42 @@ var b = () => {
 											children: "Payment ID"
 										}), /* @__PURE__ */ g("p", {
 											className: "font-mono text-sm text-text-primary mt-0.5 break-all",
-											children: k.payment.id
+											children: M.payment.id
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm text-text-secondary",
 											children: "Amount"
 										}), /* @__PURE__ */ g("p", {
 											className: "text-sm text-text-primary mt-0.5",
-											children: n(k.payment.amount, k.payment.currency)
+											children: n(M.payment.amount, M.payment.currency)
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm text-text-secondary",
 											children: "Status"
 										}), /* @__PURE__ */ g("p", {
 											className: "text-sm text-text-primary mt-0.5 capitalize",
-											children: k.payment.status.toLowerCase()
+											children: M.payment.status.toLowerCase()
 										})] }),
 										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm text-text-secondary",
 											children: "Method"
 										}), /* @__PURE__ */ g("p", {
 											className: "text-sm text-text-primary mt-0.5 capitalize",
-											children: k.payment.method.toLowerCase().replace(/_/g, " ")
+											children: M.payment.method.toLowerCase().replace(/_/g, " ")
 										})] }),
-										k.payment.provider && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										M.payment.provider && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm text-text-secondary",
 											children: "Provider"
 										}), /* @__PURE__ */ g("p", {
 											className: "text-sm text-text-primary mt-0.5 capitalize",
-											children: k.payment.provider
+											children: M.payment.provider
 										})] }),
-										k.payment.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										M.payment.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 											className: "text-sm text-text-secondary",
 											children: "Paid At"
 										}), /* @__PURE__ */ g("p", {
 											className: "text-sm text-text-primary mt-0.5",
-											children: r(k.payment.paidAt, "short")
+											children: r(M.payment.paidAt, "short")
 										})] })
 									]
 								})
@@ -487,13 +519,17 @@ var b = () => {
 				}), /* @__PURE__ */ _("div", {
 					className: "space-y-6",
 					children: [
+						/* @__PURE__ */ g(b, {
+							storageKey: "billing-invoice-detail",
+							steps: Z
+						}),
 						/* @__PURE__ */ _("div", {
 							className: "border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden",
 							children: [/* @__PURE__ */ g("div", {
 								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: x("billing.invoices.details", "Details")
+									children: w("billing.invoices.details", "Details")
 								})
 							}), /* @__PURE__ */ _("div", {
 								className: "p-6 space-y-4",
@@ -503,56 +539,56 @@ var b = () => {
 										children: "Invoice ID"
 									}), /* @__PURE__ */ g("p", {
 										className: "font-mono text-sm text-text-primary mt-0.5 break-all",
-										children: k.id
+										children: M.id
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Invoice Number"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: i(k.invoiceNumber)
+										children: i(M.invoiceNumber)
 									})] }),
-									k.itemDescription && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									M.itemDescription && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Description"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: k.itemDescription
+										children: M.itemDescription
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Status"
 									}), /* @__PURE__ */ g("span", {
-										className: `inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${s(H)}`,
-										children: a(k.status)
+										className: `inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${s(G)}`,
+										children: a(M.status)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Currency"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: k.currency
+										children: M.currency
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Total"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm font-semibold text-text-primary mt-0.5",
-										children: n(k.total, k.currency)
+										children: n(M.total, M.currency)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Amount Paid"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-status-success-text mt-0.5",
-										children: n(k.amountPaid, k.currency)
+										children: n(M.amountPaid, M.currency)
 									})] }),
-									K > 0 && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									Y > 0 && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Amount Due"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm font-semibold text-status-warning-text mt-0.5",
-										children: n(K, k.currency)
+										children: n(Y, M.currency)
 									})] })
 								]
 							})]
@@ -563,7 +599,7 @@ var b = () => {
 								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: x("billing.invoices.dates", "Dates")
+									children: w("billing.invoices.dates", "Dates")
 								})
 							}), /* @__PURE__ */ _("div", {
 								className: "p-6 space-y-4",
@@ -573,28 +609,28 @@ var b = () => {
 										children: "Created"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: r(k.createdAt)
+										children: r(M.createdAt)
 									})] }),
-									k.dueDate && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									M.dueDate && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Due Date"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: r(k.dueDate)
+										children: r(M.dueDate)
 									})] }),
-									k.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									M.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Paid At"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: r(k.paidAt)
+										children: r(M.paidAt)
 									})] }),
 									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "text-sm text-text-secondary",
 										children: "Last Updated"
 									}), /* @__PURE__ */ g("p", {
 										className: "text-sm text-text-primary mt-0.5",
-										children: r(k.updatedAt)
+										children: r(M.updatedAt)
 									})] })
 								]
 							})]
@@ -605,7 +641,7 @@ var b = () => {
 								className: "p-6 border-b border-border-subtle bg-bg-sunken",
 								children: /* @__PURE__ */ g("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: x("billing.invoices.organization", "Organization")
+									children: w("billing.invoices.organization", "Organization")
 								})
 							}), /* @__PURE__ */ g("div", {
 								className: "p-6 space-y-4",
@@ -614,7 +650,7 @@ var b = () => {
 									children: "Organization ID"
 								}), /* @__PURE__ */ g("p", {
 									className: "font-mono text-sm text-text-primary mt-0.5 break-all",
-									children: k.orgId
+									children: M.orgId
 								})] })
 							})]
 						})
@@ -625,6 +661,6 @@ var b = () => {
 	});
 };
 //#endregion
-export { b as InvoiceDetailPage };
+export { C as InvoiceDetailPage };
 
 //# sourceMappingURL=InvoiceDetailPage.js.map