@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,587 @@
+import { AccessDenied as e } from "../../../shared/components/AccessDenied.js";
+import { PageHeader as t } from "../../../shared/components/PageHeader.js";
+import { EmptyState as n } from "../../../shared/components/EmptyState.js";
+import { ServerError as r } from "../../../shared/components/ServerError.js";
+import "../../../shared/components/index.js";
+import { formatCurrency as i, formatDateTime as a } from "../../../shared/utils/format.js";
+import { getStatusBadgeClasses as o, getTransactionStatusColor as s } from "../../../shared/utils/status.js";
+import { isServerError as c } from "../../../shared/utils/error.js";
+import "../../../shared/utils/index.js";
+import { useBillingPermissions as l } from "../../../hooks/useBillingPermissions.js";
+import { nativeImpact as u, nativeOpenUrl as d } from "../../../../utils/nativeBridge.js";
+import { useBillingNavigate as f } from "../../../hooks/useBillingNavigate.js";
+import { useTransactions as p } from "../hooks/useTransactions.js";
+import "../hooks/index.js";
+import { useEffect as m, useRef as h, useState as g } from "react";
+import { ArrowLeft as _, Calendar as v, CheckCircle as y, ChevronLeft as b, ChevronRight as x, CreditCard as S, Eye as C, FileText as w, Mail as T, MoreHorizontal as E, Wallet as D, X as O, XCircle as k } from "lucide-react";
+import { useParams as A } from "react-router-dom";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { useI18n as P } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/billing/pages/TransactionsPage.tsx
+var F = {
+	payment: "Payment",
+	refund: "Refund",
+	adjustment: "Adjustment"
+}, I = (e) => F[e.toLowerCase()] ?? e, L = ({ transaction: e, onViewDetails: t, onViewInvoice: n, hasInvoiceUrl: r }) => {
+	let [i, a] = g(!1), o = h(null);
+	return m(() => {
+		let e = (e) => {
+			o.current && !o.current.contains(e.target) && a(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []), /* @__PURE__ */ N("div", {
+		className: "relative overflow-visible",
+		ref: o,
+		children: [/* @__PURE__ */ M("button", {
+			onClick: () => a(!i),
+			className: "p-1.5 rounded-md hover:bg-muted/50 transition-colors",
+			"aria-label": "Transaction actions",
+			children: /* @__PURE__ */ M(E, { className: "w-4 h-4 text-muted-foreground" })
+		}), i && /* @__PURE__ */ N("div", {
+			className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-popover border border-border rounded-md shadow-lg py-1",
+			children: [/* @__PURE__ */ N("button", {
+				onClick: () => {
+					t(), a(!1);
+				},
+				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted/50 transition-colors whitespace-nowrap",
+				children: [/* @__PURE__ */ M(C, { className: "w-4 h-4" }), "View Details"]
+			}), e.type === "payment" && r && /* @__PURE__ */ N("button", {
+				onClick: () => {
+					n(), a(!1);
+				},
+				className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-foreground hover:bg-muted/50 transition-colors whitespace-nowrap",
+				children: [/* @__PURE__ */ M(w, { className: "w-4 h-4" }), "View Invoice"]
+			})]
+		})]
+	});
+}, R = ({ transaction: e, onClose: t, onViewInvoice: n, invoiceUrl: r, invoiceProvider: c }) => {
+	if (!e) return null;
+	let l = e.metadata, f = l?.subtotal, p = l?.taxAmount, m = l?.taxRate, h = l?.taxType, g = l?.total, _ = l?.invoiceNumber, v = l?.invoiceStatus, y = e.type === "refund", b = l?.refundRecordId, x = l?.originalTransactionId, S = l?.creditNoteId, C = l?.creditNoteNumber, T = l?.creditNotePdfUrl, E = l?.reason, D = l?.purchaseType, k = l?.purchaseDetail, A = g && p !== void 0 && p > 0;
+	return /* @__PURE__ */ N("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center",
+		children: [/* @__PURE__ */ M("div", {
+			className: "absolute inset-0 bg-overlay-scrim",
+			onClick: t
+		}), /* @__PURE__ */ N("div", {
+			className: "relative bg-background border border-border rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-auto",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "transaction-details-title",
+			children: [
+				/* @__PURE__ */ N("div", {
+					className: "flex items-center justify-between p-4 border-b border-border",
+					children: [/* @__PURE__ */ M("h2", {
+						id: "transaction-details-title",
+						className: "text-lg font-semibold",
+						children: "Transaction Details"
+					}), /* @__PURE__ */ M("button", {
+						onClick: t,
+						className: "p-1 rounded-md hover:bg-muted/50 transition-colors",
+						"aria-label": "Close transaction details",
+						children: /* @__PURE__ */ M(O, { className: "w-5 h-5" })
+					})]
+				}),
+				/* @__PURE__ */ N("div", {
+					className: "p-4 space-y-4",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-1",
+								children: "Transaction ID"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-sm font-mono break-all",
+								children: e.id
+							})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-1",
+								children: "Type"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-sm capitalize",
+								children: I(e.type)
+							})] })]
+						}),
+						/* @__PURE__ */ M("div", {
+							className: "space-y-2",
+							children: A ? /* @__PURE__ */ N(j, { children: [
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ M("span", {
+										className: "text-muted-foreground",
+										children: "Subtotal"
+									}), /* @__PURE__ */ M("span", { children: i(f || e.amount, e.currency) })]
+								}),
+								p > 0 && /* @__PURE__ */ N("div", {
+									className: "flex justify-between text-sm",
+									children: [/* @__PURE__ */ N("span", {
+										className: "text-muted-foreground",
+										children: [
+											h || "Tax",
+											" ",
+											m ? `(${(m * 100).toFixed(0)}%)` : ""
+										]
+									}), /* @__PURE__ */ M("span", { children: i(p, e.currency) })]
+								}),
+								/* @__PURE__ */ N("div", {
+									className: "flex justify-between text-sm font-semibold border-t border-border pt-2",
+									children: [/* @__PURE__ */ M("span", { children: "Total" }), /* @__PURE__ */ N("span", {
+										className: e.type === "refund" ? "text-status-error-text" : "",
+										children: [e.type === "refund" ? "-" : "", i(g, e.currency)]
+									})]
+								})
+							] }) : /* @__PURE__ */ N("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground mb-1",
+									children: "Amount"
+								}), /* @__PURE__ */ N("p", {
+									className: `text-sm font-medium ${e.type === "refund" ? "text-status-error-text" : ""}`,
+									children: [e.type === "refund" ? "-" : "", i(g || e.amount, e.currency)]
+								})] }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground mb-1",
+									children: "Status"
+								}), /* @__PURE__ */ M("span", {
+									className: `px-2 py-0.5 text-xs font-medium rounded ${o(s(e.status))}`,
+									children: e.status
+								})] })]
+							})
+						}),
+						A && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Status"
+						}), /* @__PURE__ */ M("span", {
+							className: `px-2 py-0.5 text-xs font-medium rounded ${o(s(e.status))}`,
+							children: e.status
+						})] }),
+						/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Date & Time"
+						}), /* @__PURE__ */ M("p", {
+							className: "text-sm",
+							children: a(e.createdAt)
+						})] }),
+						e.description && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Description"
+						}), /* @__PURE__ */ M("p", {
+							className: "text-sm",
+							children: e.description
+						})] }),
+						_ && /* @__PURE__ */ N("div", {
+							className: "p-3 bg-muted/50 rounded-lg space-y-2",
+							children: [
+								/* @__PURE__ */ N("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+										className: "text-xs text-muted-foreground mb-1",
+										children: "Invoice"
+									}), /* @__PURE__ */ M("p", {
+										className: "text-sm font-mono",
+										children: _
+									})] }), v && /* @__PURE__ */ M("span", {
+										className: `px-2 py-0.5 text-xs font-medium rounded ${v === "PAID" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-status-warning-bg-subtle text-status-warning-text"}`,
+										children: v
+									})]
+								}),
+								c && /* @__PURE__ */ N("p", {
+									className: "text-xs text-muted-foreground",
+									children: ["Provider: ", c]
+								}),
+								r && n && /* @__PURE__ */ N("button", {
+									onClick: () => n(e),
+									className: "flex items-center gap-2 text-sm text-primary hover:underline",
+									children: [/* @__PURE__ */ M(w, { className: "w-4 h-4" }), "View Invoice"]
+								})
+							]
+						}),
+						!_ && r && n && /* @__PURE__ */ M("div", {
+							className: "p-3 bg-muted/50 rounded-lg",
+							children: /* @__PURE__ */ N("button", {
+								onClick: () => n(e),
+								className: "flex items-center gap-2 text-sm text-primary hover:underline",
+								children: [
+									/* @__PURE__ */ M(w, { className: "w-4 h-4" }),
+									"View Invoice ",
+									c && `(${c})`
+								]
+							})
+						}),
+						y && (S || E || D) && /* @__PURE__ */ N("div", {
+							className: "p-3 bg-status-error-bg-subtle/20 border border-border-subtle rounded-lg space-y-3",
+							children: [
+								/* @__PURE__ */ N("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ M("div", { className: "w-1.5 h-1.5 rounded-full bg-status-error-bg" }), /* @__PURE__ */ M("p", {
+										className: "text-sm font-semibold text-status-error-text",
+										children: "Refund Information"
+									})]
+								}),
+								C && /* @__PURE__ */ N("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+										className: "text-xs text-status-error-text mb-1",
+										children: "Credit Note"
+									}), /* @__PURE__ */ M("p", {
+										className: "text-sm font-mono text-status-error-text",
+										children: C
+									})] }), T && /* @__PURE__ */ N("button", {
+										onClick: () => {
+											u("light"), d(T);
+										},
+										className: "flex items-center gap-2 text-sm text-status-error-text hover:underline",
+										children: [/* @__PURE__ */ M(w, { className: "w-4 h-4" }), "Download Credit Note PDF"]
+									})]
+								}),
+								D && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-status-error-text mb-1",
+									children: "Purchase Type"
+								}), /* @__PURE__ */ N("p", {
+									className: "text-sm text-status-error-text",
+									children: [D, k && ` - ${k}`]
+								})] }),
+								E && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-status-error-text mb-1",
+									children: "Reason"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-sm text-status-error-text",
+									children: E
+								})] }),
+								x && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-status-error-text mb-1",
+									children: "Original Transaction"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-sm font-mono text-status-error-text break-all",
+									children: x
+								})] }),
+								b && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+									className: "text-xs text-status-error-text mb-1",
+									children: "Refund Record ID"
+								}), /* @__PURE__ */ M("p", {
+									className: "text-sm font-mono text-status-error-text break-all",
+									children: b
+								})] })
+							]
+						}),
+						e.stripePaymentId && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Stripe Payment ID"
+						}), /* @__PURE__ */ M("p", {
+							className: "text-sm font-mono break-all",
+							children: e.stripePaymentId
+						})] }),
+						e.razorpayPaymentId && /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+							className: "text-xs text-muted-foreground mb-1",
+							children: "Razorpay Payment ID"
+						}), /* @__PURE__ */ M("p", {
+							className: "text-sm font-mono break-all",
+							children: e.razorpayPaymentId
+						})] })
+					]
+				}),
+				/* @__PURE__ */ M("div", {
+					className: "p-4 border-t border-border",
+					children: /* @__PURE__ */ M("button", {
+						onClick: t,
+						className: "w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: "Close"
+					})
+				})
+			]
+		})]
+	});
+}, z = () => {
+	let { t: m } = P(), h = (e, t) => {
+		let n = m(e);
+		return n === e ? t : n;
+	}, { billingAccountId: C } = A(), E = l(), O = f(), { billingAccount: j, transactions: z, pagination: B, isLoading: V, error: H, refetch: U, goToNextPage: W, goToPreviousPage: G } = p(C), [K, q] = g("all"), [J, Y] = g(null), X = (e) => {
+		let t = e.metadata;
+		return t?.zohoBooksInvoiceUrl ? t.zohoBooksInvoiceUrl : t?.invoiceUrl ? t.invoiceUrl : t?.invoicePdf ? t.invoicePdf : null;
+	}, Z = (e) => {
+		let t = e.metadata;
+		return t?.total && typeof t.total == "number" ? t.total : e.amount;
+	}, ee = (e) => {
+		let t = e.metadata;
+		return t?.zohoBooksInvoiceUrl ? "Zoho Books" : t?.invoiceUrl || t?.invoicePdf ? "Stripe" : null;
+	}, Q = (e) => {
+		let t = X(e);
+		t ? (u("light"), d(t)) : O("/invoices");
+	};
+	if (!E.canViewPayments) return /* @__PURE__ */ M(e, { message: h("billing.transactions.noPermission", "You don't have permission to view transaction history.") });
+	if (!C) return /* @__PURE__ */ M("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ M(n, {
+			icon: /* @__PURE__ */ M("svg", {
+				className: "w-6 h-6 text-muted-foreground",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				stroke: "currentColor",
+				children: /* @__PURE__ */ M("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"
+				})
+			}),
+			title: h("billing.transactions.noAccountSelected", "No billing account selected"),
+			description: h("billing.transactions.noAccountSelectedDesc", "Please select a billing account from the overview page to view transactions.")
+		})
+	});
+	if (H && c(H)) return /* @__PURE__ */ M("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ M(r, {
+			title: h("billing.transactions.serverUnavailable", "Server Unavailable"),
+			message: h("billing.transactions.serverUnavailableMessage", "Unable to load transactions. The server might be down or experiencing issues."),
+			onRetry: () => U(),
+			showRetry: !0
+		})
+	});
+	let $ = K === "all" ? z : z.filter((e) => e.type === K);
+	return V ? /* @__PURE__ */ N("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ M("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ M("div", {
+			className: "space-y-2",
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((e) => /* @__PURE__ */ M("div", { className: "h-16 bg-muted animate-pulse rounded" }, e))
+		})]
+	}) : /* @__PURE__ */ N("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ N("button", {
+				onClick: () => O("/overview"),
+				className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+				children: [/* @__PURE__ */ M(_, { className: "w-4 h-4" }), "Back to Overview"]
+			}),
+			/* @__PURE__ */ M(t, {
+				title: h("billing.transactions.title", "Transaction History"),
+				description: j ? `Transactions for ${j.name}` : "View all your billing transactions"
+			}),
+			j && /* @__PURE__ */ M("div", {
+				className: "border border-border rounded-lg p-4 bg-card",
+				children: /* @__PURE__ */ N("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4",
+					children: [
+						/* @__PURE__ */ N("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ M(S, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [
+								/* @__PURE__ */ M("p", {
+									className: "text-xs text-muted-foreground mb-0.5",
+									children: "Account"
+								}),
+								/* @__PURE__ */ M("p", {
+									className: "text-sm font-medium",
+									children: j.name
+								}),
+								j.isActive ? /* @__PURE__ */ N("span", {
+									className: "inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-success-bg-subtle text-status-success-text",
+									children: [/* @__PURE__ */ M(y, { className: "w-3 h-3" }), "Active"]
+								}) : /* @__PURE__ */ N("span", {
+									className: "inline-flex items-center gap-1 mt-1 px-1.5 py-0.5 text-xs font-medium rounded bg-status-error-bg-subtle text-status-error-text",
+									children: [/* @__PURE__ */ M(k, { className: "w-3 h-3" }), "Inactive"]
+								})
+							] })]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ M(T, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Email"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-sm font-medium break-all",
+								children: j.billingEmail || j.email
+							})] })]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ M(D, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Credits Balance"
+							}), /* @__PURE__ */ N("p", {
+								className: "text-sm font-semibold text-foreground",
+								children: [(j.creditAmount || 0).toLocaleString(), " Credits"]
+							})] })]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ M(w, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Tax ID"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-sm font-medium",
+								children: j.taxId || "-"
+							})] })]
+						}),
+						/* @__PURE__ */ N("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ M(v, { className: "w-4 h-4 text-muted-foreground mt-0.5" }), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
+								className: "text-xs text-muted-foreground mb-0.5",
+								children: "Member Since"
+							}), /* @__PURE__ */ M("p", {
+								className: "text-sm font-medium",
+								children: j.createdAt ? a(j.createdAt) : "-"
+							})] })]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "flex items-center gap-4",
+				children: /* @__PURE__ */ M("div", {
+					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [
+						"all",
+						"payment",
+						"refund",
+						"adjustment"
+					].map((e) => /* @__PURE__ */ M("button", {
+						onClick: () => q(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${K === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						children: e === "all" ? "All" : F[e]
+					}, e))
+				})
+			}),
+			$.length === 0 ? /* @__PURE__ */ M(n, {
+				icon: /* @__PURE__ */ M("svg", {
+					className: "w-6 h-6 text-muted-foreground",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ M("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+					})
+				}),
+				title: h("billing.transactions.noTransactionsFound", "No transactions found"),
+				description: K === "all" ? h("billing.transactions.noTransactionsYet", "Your transaction history will appear here.") : h("billing.transactions.noTransactionsFiltered", "No transactions match your filter.")
+			}) : /* @__PURE__ */ M("div", {
+				className: "border border-border rounded-lg overflow-visible",
+				children: /* @__PURE__ */ N("table", {
+					className: "w-full",
+					children: [/* @__PURE__ */ M("thead", {
+						className: "bg-muted/50",
+						children: /* @__PURE__ */ N("tr", { children: [
+							/* @__PURE__ */ M("th", {
+								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								children: "Date"
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								children: "Type"
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-left text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								children: "Description"
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-right text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								children: "Amount"
+							}),
+							/* @__PURE__ */ M("th", {
+								className: "text-center text-sm font-medium text-muted-foreground px-3 py-2 whitespace-nowrap",
+								children: "Status"
+							}),
+							/* @__PURE__ */ M("th", { className: "px-2 py-2 w-10" })
+						] })
+					}), /* @__PURE__ */ M("tbody", {
+						className: "divide-y divide-border",
+						children: $.map((e) => /* @__PURE__ */ N("tr", {
+							className: "hover:bg-muted/30 transition-colors",
+							children: [
+								/* @__PURE__ */ M("td", {
+									className: "px-3 py-2 text-sm text-foreground whitespace-nowrap",
+									children: a(e.createdAt)
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "px-3 py-2 text-sm text-foreground capitalize whitespace-nowrap",
+									children: I(e.type)
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "px-3 py-2 text-sm text-muted-foreground",
+									children: e.description ?? "-"
+								}),
+								/* @__PURE__ */ N("td", {
+									className: `px-3 py-2 text-sm text-right font-medium whitespace-nowrap ${e.type === "refund" ? "text-status-error-text" : "text-foreground"}`,
+									children: [e.type === "refund" ? "-" : "", i(Z(e), e.currency)]
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "px-3 py-2 text-center whitespace-nowrap",
+									children: /* @__PURE__ */ M("span", {
+										className: `px-1.5 py-0.5 text-xs font-medium rounded ${o(s(e.status))}`,
+										children: e.status
+									})
+								}),
+								/* @__PURE__ */ M("td", {
+									className: "px-2 py-2 text-center",
+									children: /* @__PURE__ */ M(L, {
+										transaction: e,
+										onViewDetails: () => Y(e),
+										onViewInvoice: () => Q(e),
+										hasInvoiceUrl: !!X(e)
+									})
+								})
+							]
+						}, e.id))
+					})]
+				})
+			}),
+			B.totalCount > 0 && /* @__PURE__ */ N("div", {
+				className: "flex items-center justify-between border-t border-border pt-4",
+				children: [/* @__PURE__ */ N("p", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Showing ",
+						B.page * B.pageSize + 1,
+						" to",
+						" ",
+						Math.min((B.page + 1) * B.pageSize, B.totalCount),
+						" of",
+						" ",
+						B.totalCount,
+						" transactions"
+					]
+				}), /* @__PURE__ */ N("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ N("button", {
+							onClick: G,
+							disabled: !B.hasPrevious,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: [/* @__PURE__ */ M(b, { className: "w-4 h-4" }), "Previous"]
+						}),
+						/* @__PURE__ */ N("span", {
+							className: "text-sm text-muted-foreground px-2",
+							children: [
+								"Page ",
+								B.page + 1,
+								" of ",
+								Math.ceil(B.totalCount / B.pageSize)
+							]
+						}),
+						/* @__PURE__ */ N("button", {
+							onClick: W,
+							disabled: !B.hasMore,
+							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md border border-border bg-background hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: ["Next", /* @__PURE__ */ M(x, { className: "w-4 h-4" })]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ M(R, {
+				transaction: J,
+				onClose: () => Y(null),
+				onViewInvoice: Q,
+				invoiceUrl: J ? X(J) : null,
+				invoiceProvider: J ? ee(J) : null
+			})
+		]
+	});
+};
+//#endregion
+export { z as TransactionsPage };
+
+//# sourceMappingURL=TransactionsPage.js.map