@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,631 @@
+import { useBilling as e } from "../../../providers/BillingProvider.js";
+import { useBillingAccountSelection as t } from "../../../hooks/useBillingAccountSelection.js";
+import { formatCurrency as n, formatDate as r, formatInvoiceNumber as i, formatInvoiceStatus as a } from "../../../shared/utils/format.js";
+import { getInvoiceStatusColor as o, getStatusBadgeClasses as s } from "../../../shared/utils/status.js";
+import { useBillingPermissions as c } from "../../../hooks/useBillingPermissions.js";
+import { useGetDefaultBillingAccountDashboardQuery as l } from "../../../../generated/global-operations.js";
+import { useBillingNavigate as u } from "../../../hooks/useBillingNavigate.js";
+import { withBillingAccountId as d } from "../../../shared/utils/navigation.js";
+import { useInvoice as f, useInvoiceMutations as p } from "../hooks/useInvoices.js";
+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";
+//#region src/billing/modules/billing/pages/InvoiceDetailPage.tsx
+var y = () => {
+	let { t: y } = v(), b = (e, t) => {
+		let n = y(e);
+		return n === e ? t : n;
+	}, { invoiceId: x } = h(), S = u(), { orgId: C } = e(), w = c(), { selectedAccountId: T } = t({
+		orgId: C,
+		syncFromUrl: !0,
+		urlParamName: "billingAccountId"
+	}), { data: E } = l({ fetchPolicy: "cache-first" }), D = T ?? E?.getDefaultBillingAccount?.id ?? void 0, { invoice: O, isLoading: k, error: A, refetch: j } = f(x, D), { payInvoice: M, voidInvoice: N, isPaying: P, isVoiding: F } = p(), I = E?.getDefaultBillingAccount?.defaultPaymentMethod, [L, R] = m(null), z = async () => {
+		if (O) {
+			if (!I) {
+				R("Add and set a default payment method before paying this invoice.");
+				return;
+			}
+			if (!D) {
+				R("No billing account context");
+				return;
+			}
+			R(null);
+			try {
+				await M(O.id, I, D), await j();
+			} catch (e) {
+				R(e instanceof Error ? e.message : "Failed to pay invoice");
+			}
+		}
+	}, B = async () => {
+		if (O) {
+			if (!D) {
+				R("No billing account context");
+				return;
+			}
+			R(null);
+			try {
+				await N(O.id, D), await j();
+			} catch (e) {
+				R(e instanceof Error ? e.message : "Failed to void invoice");
+			}
+		}
+	};
+	if (!w.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",
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ g("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ g("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						})
+					})
+				}),
+				/* @__PURE__ */ g("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: b("billing.accessDenied.title", "Access Denied")
+				}),
+				/* @__PURE__ */ g("p", {
+					className: "text-sm text-muted-foreground max-w-sm",
+					children: b("billing.invoices.noViewPermission", "You don't have permission to view invoices.")
+				})
+			]
+		})
+	});
+	if (k) return /* @__PURE__ */ _("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ _("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ g("div", { className: "h-10 w-10 bg-muted animate-pulse rounded" }), /* @__PURE__ */ _("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ g("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-32 bg-muted animate-pulse rounded" })]
+			})]
+		}), /* @__PURE__ */ _("div", {
+			className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+			children: [/* @__PURE__ */ _("div", {
+				className: "lg:col-span-2 space-y-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "border border-border rounded-lg p-6 space-y-4",
+					children: [
+						/* @__PURE__ */ g("div", { className: "h-6 w-32 bg-muted animate-pulse rounded" }),
+						/* @__PURE__ */ g("div", { className: "h-4 w-full bg-muted animate-pulse rounded" }),
+						/* @__PURE__ */ g("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" })
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "border border-border rounded-lg p-6 space-y-4",
+					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }), [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ _("div", {
+						className: "flex items-center gap-4",
+						children: [
+							/* @__PURE__ */ g("div", { className: "h-4 flex-1 bg-muted animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-muted animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-16 bg-muted animate-pulse rounded" }),
+							/* @__PURE__ */ g("div", { className: "h-4 w-20 bg-muted animate-pulse rounded" })
+						]
+					}, e))]
+				})]
+			}), /* @__PURE__ */ g("div", {
+				className: "space-y-6",
+				children: /* @__PURE__ */ _("div", {
+					className: "border border-border rounded-lg p-6 space-y-4",
+					children: [/* @__PURE__ */ g("div", { className: "h-6 w-24 bg-muted animate-pulse rounded" }), [
+						1,
+						2,
+						3,
+						4
+					].map((e) => /* @__PURE__ */ _("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ g("div", { className: "h-3 w-20 bg-muted animate-pulse rounded" }), /* @__PURE__ */ g("div", { className: "h-4 w-28 bg-muted animate-pulse rounded" })]
+					}, e))]
+				})
+			})]
+		})]
+	});
+	if (A || !O) return /* @__PURE__ */ g("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ _("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ g("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ g("svg", {
+						className: "w-6 h-6 text-destructive",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ g("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+						})
+					})
+				}),
+				/* @__PURE__ */ g("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: b("billing.invoices.invoiceNotFound", "Invoice not found")
+				}),
+				/* @__PURE__ */ g("p", {
+					className: "text-sm text-muted-foreground",
+					children: A?.message || b("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", {
+						onClick: () => j(),
+						className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: "Try Again"
+					}), /* @__PURE__ */ g("button", {
+						onClick: () => S(d("/invoices", D)),
+						className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "Back to Invoices"
+					})]
+				})
+			]
+		})
+	});
+	let V = o(O.status), H = O.status === "OPEN", U = O.status === "DRAFT", W = O.items || [], G = O.total - O.amountPaid;
+	return /* @__PURE__ */ _("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex items-start gap-4",
+					children: [/* @__PURE__ */ g("button", {
+						onClick: () => S(d("/invoices", D)),
+						className: "p-2 -ml-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
+						children: /* @__PURE__ */ g("svg", {
+							className: "w-5 h-5",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ g("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M15 19l-7-7 7-7"
+							})
+						})
+					}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ _("h1", {
+							className: "text-2xl font-bold text-foreground",
+							children: ["Invoice ", i(O.invoiceNumber)]
+						}), /* @__PURE__ */ g("span", {
+							className: `px-2 py-1 text-xs font-medium rounded ${s(V)}`,
+							children: a(O.status)
+						})]
+					}), /* @__PURE__ */ _("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: [
+							"Created ",
+							r(O.createdAt, "short"),
+							O.dueDate && ` · Due ${r(O.dueDate, "short")}`
+						]
+					})] })]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-2 flex-wrap",
+					children: [
+						O.pdfUrl && /* @__PURE__ */ g("a", {
+							href: O.pdfUrl,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							children: "Download PDF"
+						}),
+						O.invoiceUrl && /* @__PURE__ */ g("a", {
+							href: O.invoiceUrl,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+							children: "View on Portal"
+						}),
+						H && w.canPayInvoice && /* @__PURE__ */ g("button", {
+							onClick: z,
+							disabled: P || !I,
+							className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50",
+							children: I ? P ? "Processing..." : "Pay Invoice" : "Default Payment Method Required"
+						}),
+						(H || U) && w.canVoidInvoice && /* @__PURE__ */ g("button", {
+							onClick: B,
+							disabled: F,
+							className: "px-4 py-2 text-sm font-medium border border-border text-destructive rounded-md hover:bg-destructive/10 transition-colors disabled:opacity-50",
+							children: F ? b("billing.invoices.voiding", "Voiding...") : b("billing.invoices.voidInvoice", "Void Invoice")
+						})
+					]
+				})]
+			}),
+			L && /* @__PURE__ */ g("div", {
+				className: "p-3 bg-destructive/10 border border-destructive/20 rounded-md",
+				children: /* @__PURE__ */ g("p", {
+					className: "text-sm text-destructive",
+					children: L
+				})
+			}),
+			/* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ _("div", {
+					className: "lg:col-span-2 space-y-6",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [
+								/* @__PURE__ */ g("div", {
+									className: "p-6 border-b border-border bg-muted/30",
+									children: /* @__PURE__ */ _("h2", {
+										className: "text-lg font-semibold text-foreground",
+										children: [
+											b("billing.invoices.lineItems", "Line Items"),
+											" (",
+											W.length,
+											")"
+										]
+									})
+								}),
+								W.length === 0 ? /* @__PURE__ */ g("div", {
+									className: "p-6",
+									children: /* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: b("billing.invoices.noLineItems", "No line items on this invoice.")
+									})
+								}) : /* @__PURE__ */ g("div", {
+									className: "overflow-x-auto",
+									children: /* @__PURE__ */ _("table", {
+										className: "w-full",
+										children: [/* @__PURE__ */ g("thead", {
+											className: "bg-muted/50",
+											children: /* @__PURE__ */ _("tr", { children: [
+												/* @__PURE__ */ g("th", {
+													className: "text-left px-4 py-3 text-sm font-medium text-muted-foreground",
+													children: "Description"
+												}),
+												/* @__PURE__ */ g("th", {
+													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													children: "Qty"
+												}),
+												/* @__PURE__ */ g("th", {
+													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													children: "Unit Price"
+												}),
+												/* @__PURE__ */ g("th", {
+													className: "text-right px-4 py-3 text-sm font-medium text-muted-foreground",
+													children: "Amount"
+												})
+											] })
+										}), /* @__PURE__ */ g("tbody", {
+											className: "divide-y divide-border",
+											children: W.map((e) => /* @__PURE__ */ _("tr", {
+												className: "hover:bg-muted/30 transition-colors",
+												children: [
+													/* @__PURE__ */ g("td", {
+														className: "px-4 py-4 text-sm text-foreground",
+														children: e.description
+													}),
+													/* @__PURE__ */ g("td", {
+														className: "px-4 py-4 text-sm text-muted-foreground text-right",
+														children: e.quantity
+													}),
+													/* @__PURE__ */ g("td", {
+														className: "px-4 py-4 text-sm text-muted-foreground text-right",
+														children: n(e.unitPrice, O.currency)
+													}),
+													/* @__PURE__ */ g("td", {
+														className: "px-4 py-4 text-sm font-medium text-foreground text-right",
+														children: n(e.amount, O.currency)
+													})
+												]
+											}, e.id))
+										})]
+									})
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "border-t border-border p-4",
+									children: /* @__PURE__ */ _("div", {
+										className: "max-w-xs ml-auto space-y-2",
+										children: [
+											/* @__PURE__ */ _("div", {
+												className: "flex items-center justify-between text-sm",
+												children: [/* @__PURE__ */ g("span", {
+													className: "text-muted-foreground",
+													children: b("billing.invoices.subtotal", "Subtotal")
+												}), /* @__PURE__ */ g("span", {
+													className: "text-foreground",
+													children: n(O.subtotal, O.currency)
+												})]
+											}),
+											/* @__PURE__ */ _("div", {
+												className: "flex items-center justify-between text-sm",
+												children: [/* @__PURE__ */ g("span", {
+													className: "text-muted-foreground",
+													children: b("billing.invoices.tax", "Tax")
+												}), /* @__PURE__ */ g("span", {
+													className: "text-foreground",
+													children: n(O.tax, O.currency)
+												})]
+											}),
+											/* @__PURE__ */ _("div", {
+												className: "flex items-center justify-between text-sm font-semibold border-t border-border pt-2",
+												children: [/* @__PURE__ */ g("span", {
+													className: "text-foreground",
+													children: b("billing.invoices.total", "Total")
+												}), /* @__PURE__ */ g("span", {
+													className: "text-foreground",
+													children: n(O.total, O.currency)
+												})]
+											}),
+											O.amountPaid > 0 && /* @__PURE__ */ _("div", {
+												className: "flex items-center justify-between text-sm",
+												children: [/* @__PURE__ */ g("span", {
+													className: "text-muted-foreground",
+													children: b("billing.invoices.amountPaid", "Amount Paid")
+												}), /* @__PURE__ */ _("span", {
+													className: "text-status-success-text",
+													children: ["-", n(O.amountPaid, O.currency)]
+												})]
+											}),
+											G > 0 && /* @__PURE__ */ _("div", {
+												className: "flex items-center justify-between text-sm font-semibold border-t border-border pt-2",
+												children: [/* @__PURE__ */ g("span", {
+													className: "text-foreground",
+													children: b("billing.invoices.amountDue", "Amount Due")
+												}), /* @__PURE__ */ g("span", {
+													className: "text-status-warning-text",
+													children: n(G, O.currency)
+												})]
+											})
+										]
+									})
+								})
+							]
+						}),
+						O.subscription && /* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-6 border-b border-border bg-muted/30",
+								children: /* @__PURE__ */ g("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: b("billing.invoices.subscription", "Subscription")
+								})
+							}), /* @__PURE__ */ g("div", {
+								className: "p-6 space-y-4",
+								children: /* @__PURE__ */ _("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "font-medium text-foreground",
+										children: O.subscription.plan?.name || "Unknown Plan"
+									}), /* @__PURE__ */ _("p", {
+										className: "text-sm text-muted-foreground mt-0.5",
+										children: [
+											"Subscription ID:",
+											" ",
+											/* @__PURE__ */ g("span", {
+												className: "font-mono text-xs",
+												children: O.subscription.id
+											})
+										]
+									})] }), /* @__PURE__ */ g("button", {
+										onClick: () => S(d(`/subscriptions/${O.subscription.id}`, D)),
+										className: "px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted rounded-md transition-colors",
+										children: "View"
+									})]
+								})
+							})]
+						}),
+						O.payment && /* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-6 border-b border-border bg-muted/30",
+								children: /* @__PURE__ */ g("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: b("billing.invoices.payment", "Payment")
+								})
+							}), /* @__PURE__ */ g("div", {
+								className: "p-6",
+								children: /* @__PURE__ */ _("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Payment ID"
+										}), /* @__PURE__ */ g("p", {
+											className: "font-mono text-sm text-foreground mt-0.5 break-all",
+											children: O.payment.id
+										})] }),
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Amount"
+										}), /* @__PURE__ */ g("p", {
+											className: "text-sm text-foreground mt-0.5",
+											children: n(O.payment.amount, O.payment.currency)
+										})] }),
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Status"
+										}), /* @__PURE__ */ g("p", {
+											className: "text-sm text-foreground mt-0.5 capitalize",
+											children: O.payment.status.toLowerCase()
+										})] }),
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Method"
+										}), /* @__PURE__ */ g("p", {
+											className: "text-sm text-foreground mt-0.5 capitalize",
+											children: O.payment.method.toLowerCase().replace(/_/g, " ")
+										})] }),
+										O.payment.provider && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Provider"
+										}), /* @__PURE__ */ g("p", {
+											className: "text-sm text-foreground mt-0.5 capitalize",
+											children: O.payment.provider
+										})] }),
+										O.payment.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+											className: "text-sm text-muted-foreground",
+											children: "Paid At"
+										}), /* @__PURE__ */ g("p", {
+											className: "text-sm text-foreground mt-0.5",
+											children: r(O.payment.paidAt, "short")
+										})] })
+									]
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-6 border-b border-border bg-muted/30",
+								children: /* @__PURE__ */ g("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: b("billing.invoices.details", "Details")
+								})
+							}), /* @__PURE__ */ _("div", {
+								className: "p-6 space-y-4",
+								children: [
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Invoice ID"
+									}), /* @__PURE__ */ g("p", {
+										className: "font-mono text-sm text-foreground mt-0.5 break-all",
+										children: O.id
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Invoice Number"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: i(O.invoiceNumber)
+									})] }),
+									O.itemDescription && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Description"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: O.itemDescription
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Status"
+									}), /* @__PURE__ */ g("span", {
+										className: `inline-flex mt-0.5 px-2 py-1 text-xs font-medium rounded ${s(V)}`,
+										children: a(O.status)
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Currency"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: O.currency
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Total"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm font-semibold text-foreground mt-0.5",
+										children: n(O.total, O.currency)
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Amount Paid"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-status-success-text mt-0.5",
+										children: n(O.amountPaid, O.currency)
+									})] }),
+									G > 0 && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Amount Due"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm font-semibold text-status-warning-text mt-0.5",
+										children: n(G, O.currency)
+									})] })
+								]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-6 border-b border-border bg-muted/30",
+								children: /* @__PURE__ */ g("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: b("billing.invoices.dates", "Dates")
+								})
+							}), /* @__PURE__ */ _("div", {
+								className: "p-6 space-y-4",
+								children: [
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Created"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: r(O.createdAt)
+									})] }),
+									O.dueDate && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Due Date"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: r(O.dueDate)
+									})] }),
+									O.paidAt && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Paid At"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: r(O.paidAt)
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Last Updated"
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-foreground mt-0.5",
+										children: r(O.updatedAt)
+									})] })
+								]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "border border-border rounded-lg bg-card overflow-hidden",
+							children: [/* @__PURE__ */ g("div", {
+								className: "p-6 border-b border-border bg-muted/30",
+								children: /* @__PURE__ */ g("h2", {
+									className: "text-lg font-semibold text-foreground",
+									children: b("billing.invoices.organization", "Organization")
+								})
+							}), /* @__PURE__ */ g("div", {
+								className: "p-6 space-y-4",
+								children: /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									className: "text-sm text-muted-foreground",
+									children: "Organization ID"
+								}), /* @__PURE__ */ g("p", {
+									className: "font-mono text-sm text-foreground mt-0.5 break-all",
+									children: O.orgId
+								})] })
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { y as InvoiceDetailPage };
+
+//# sourceMappingURL=InvoiceDetailPage.js.map