@burdenoff/microfe-billing 2026.624.2 → 2026.625.1

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

@@ -12,12 +12,13 @@ import { GetTransactionDocument as l } from "../../../../generated/global-operat
 import { useRefunds as u } from "../hooks/useRefunds.js";
 import "../hooks/index.js";
 import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { AlertTriangle as g, Ban as _, CheckCircle as v, ChevronLeft as y, ChevronRight as b, Clock as x, Download as S, Eye as C, Filter as w, Loader2 as T, MoreHorizontal as E, Play as ee, Plus as te, RefreshCw as D, RotateCcw as O, Search as k, SkipForward as A, X as j, XCircle as M } from "lucide-react";
-import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
-import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { useApolloClient as I } from "@apollo/client/react";
+import { AlertTriangle as g, Ban as _, CheckCircle as v, ChevronLeft as y, ChevronRight as b, Clock as x, Download as S, Eye as C, Filter as w, Loader2 as T, MoreHorizontal as E, Play as D, Plus as ee, RefreshCw as O, RotateCcw as k, Search as A, SkipForward as j, X as M, XCircle as N } from "lucide-react";
+import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
+import { useI18n as te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { CTAOverflowMenu as ne, ResponsiveTable as re } from "@burdenoff/fe-libs/ui";
+import { useApolloClient as L } from "@apollo/client/react";
 //#region src/billing/modules/billing/pages/RefundsPage.tsx
-var L = {
+var R = {
 	PENDING: {
 		label: "Pending",
 		color: "yellow",
@@ -36,19 +37,19 @@ var L = {
 	FAILED: {
 		label: "Failed",
 		color: "red",
-		icon: M
+		icon: N
 	},
 	SKIPPED: {
 		label: "Skipped",
 		color: "gray",
 		icon: _
 	}
-}, R = {
+}, z = {
 	MANUAL: "Manual",
 	WEBHOOK_RECOVERY: "Webhook Recovery",
 	SUBSCRIPTION_CANCEL: "Subscription Cancel",
 	DUPLICATE_PAYMENT: "Duplicate Payment"
-}, re = ["stripe", "razorpay"], z = (e) => {
+}, ie = ["stripe", "razorpay"], B = (e) => {
 	let t = {
 		yellow: `${r.warning.bg} ${r.warning.text}`,
 		blue: `${r.info.bg} ${r.info.text}`,
@@ -57,7 +58,7 @@ var L = {
 		gray: `${r.neutral.bg} ${r.neutral.text}`
 	};
 	return t[e] || t.gray;
-}, ie = ({ record: e, onViewDetails: t, onProcess: n, onSkip: i, onRetry: a, isProcessing: o }) => {
+}, ae = ({ record: e, onViewDetails: t, onProcess: n, onSkip: i, onRetry: a, isProcessing: o }) => {
 	let [s, c] = h(!1), l = m(null);
 	f(() => {
 		let e = (e) => {
@@ -66,62 +67,62 @@ var L = {
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
 	let u = e.status === "PENDING", d = e.status === "PENDING", p = e.status === "FAILED";
-	return /* @__PURE__ */ F("div", {
+	return /* @__PURE__ */ I("div", {
 		className: "relative",
 		ref: l,
-		children: [/* @__PURE__ */ P("button", {
+		children: [/* @__PURE__ */ F("button", {
 			type: "button",
 			onClick: () => c(!s),
 			disabled: o,
 			className: "p-1.5 rounded-md hover:bg-bg-sunken/50 transition-colors disabled:opacity-50",
 			"aria-label": "Refund actions",
-			children: o ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin text-text-muted" }) : /* @__PURE__ */ P(E, { className: "size-4 text-text-muted" })
-		}), s && /* @__PURE__ */ F("div", {
+			children: o ? /* @__PURE__ */ F(T, { className: "size-4 animate-spin text-text-muted" }) : /* @__PURE__ */ F(E, { className: "size-4 text-text-muted" })
+		}), s && /* @__PURE__ */ I("div", {
 			className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] bg-bg-elevated border border-border-subtle rounded-input shadow-[var(--shadow-elevation-3)] py-1",
 			children: [
-				/* @__PURE__ */ F("button", {
+				/* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => {
 						t(), c(!1);
 					},
 					className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken/50 transition-colors",
-					children: [/* @__PURE__ */ P(C, { className: "size-4" }), "View Details"]
+					children: [/* @__PURE__ */ F(C, { className: "size-4" }), "View Details"]
 				}),
-				u && /* @__PURE__ */ F("button", {
+				u && /* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => {
 						n(), c(!1);
 					},
 					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.success.text} hover:bg-bg-sunken/50 transition-colors`,
-					children: [/* @__PURE__ */ P(ee, { className: "size-4" }), "Process Refund"]
+					children: [/* @__PURE__ */ F(D, { className: "size-4" }), "Process Refund"]
 				}),
-				d && /* @__PURE__ */ F("button", {
+				d && /* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => {
 						i(), c(!1);
 					},
 					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.warning.text} hover:bg-bg-sunken/50 transition-colors`,
-					children: [/* @__PURE__ */ P(A, { className: "size-4" }), "Skip Refund"]
+					children: [/* @__PURE__ */ F(j, { className: "size-4" }), "Skip Refund"]
 				}),
-				p && /* @__PURE__ */ F("button", {
+				p && /* @__PURE__ */ I("button", {
 					type: "button",
 					onClick: () => {
 						a(), c(!1);
 					},
 					className: `w-full flex items-center gap-2 px-3 py-2 text-sm ${r.info.text} hover:bg-bg-sunken/50 transition-colors`,
-					children: [/* @__PURE__ */ P(O, { className: "size-4" }), "Retry Refund"]
+					children: [/* @__PURE__ */ F(k, { className: "size-4" }), "Retry Refund"]
 				})
 			]
 		})]
 	});
-}, B = {
+}, V = {
 	provider: "stripe",
 	gatewayPaymentId: "",
 	amount: 0,
 	currency: "USD"
-}, ae = ({ isOpen: e, onClose: t, onSubmit: n, isSubmitting: r }) => {
-	let i = I(), [o, s] = h(""), [c, u] = h(null), [f, p] = h(null), [m, g] = h(!1), [_, y] = h(B), b = () => {
-		s(""), u(null), p(null), y(B);
+}, oe = ({ isOpen: e, onClose: t, onSubmit: n, isSubmitting: r }) => {
+	let i = L(), [o, s] = h(""), [c, u] = h(null), [f, p] = h(null), [m, g] = h(!1), [_, y] = h(V), b = () => {
+		s(""), u(null), p(null), y(V);
 	}, x = () => {
 		b(), t();
 	}, S = d(async (e) => {
@@ -135,7 +136,7 @@ var L = {
 					fetchPolicy: "network-only"
 				}), n = e?.getTransaction ?? null;
 				if (!n) {
-					p("Transaction not found. Check the ID and try again."), y(B);
+					p("Transaction not found. Check the ID and try again."), y(V);
 					return;
 				}
 				let r = n.metadata, a = typeof r?.total == "number" ? r.total : n.amount;
@@ -164,7 +165,7 @@ var L = {
 					notes: ""
 				});
 			} catch {
-				p("Failed to look up transaction. Ensure the ID is correct."), y(B);
+				p("Failed to look up transaction. Ensure the ID is correct."), y(V);
 			} finally {
 				g(!1);
 			}
@@ -174,36 +175,36 @@ var L = {
 	};
 	if (!e) return null;
 	let w = c?.totalAmount ?? void 0, E = w !== void 0 && _.amount > w + .01;
-	return /* @__PURE__ */ F("div", {
+	return /* @__PURE__ */ I("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
-		children: [/* @__PURE__ */ P("div", {
+		children: [/* @__PURE__ */ F("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: x
-		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
-			children: [/* @__PURE__ */ F("div", {
+		}), /* @__PURE__ */ I("div", {
+			className: "relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
+			children: [/* @__PURE__ */ I("div", {
 				className: "flex items-center justify-between p-4 border-b border-border-subtle",
-				children: [/* @__PURE__ */ P("h2", {
+				children: [/* @__PURE__ */ F("h2", {
 					className: "text-lg font-semibold",
 					children: "Create Manual Refund"
-				}), /* @__PURE__ */ P("button", {
+				}), /* @__PURE__ */ F("button", {
 					type: "button",
 					onClick: x,
 					className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
-					children: /* @__PURE__ */ P(j, { className: "size-5" })
+					children: /* @__PURE__ */ F(M, { className: "size-5" })
 				})]
-			}), /* @__PURE__ */ F("form", {
+			}), /* @__PURE__ */ I("form", {
 				onSubmit: C,
 				className: "p-4 space-y-4",
 				children: [
-					/* @__PURE__ */ F("div", { children: [
-						/* @__PURE__ */ P("label", {
+					/* @__PURE__ */ I("div", { children: [
+						/* @__PURE__ */ F("label", {
 							className: "block text-sm font-medium mb-1",
 							children: "Transaction ID *"
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "flex gap-2",
-							children: [/* @__PURE__ */ P("input", {
+							children: [/* @__PURE__ */ F("input", {
 								type: "text",
 								value: o,
 								onChange: (e) => {
@@ -213,106 +214,106 @@ var L = {
 								className: "flex-1 px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 								placeholder: "Paste transaction UUID...",
 								required: !0
-							}), /* @__PURE__ */ P("button", {
+							}), /* @__PURE__ */ F("button", {
 								type: "button",
 								onClick: () => S(o),
 								disabled: !o.trim() || m,
 								className: "px-3 py-2 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors disabled:opacity-50 flex items-center gap-1 text-sm",
-								children: m ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ P(k, { className: "size-4" })
+								children: m ? /* @__PURE__ */ F(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ F(A, { className: "size-4" })
 							})]
 						}),
-						f && /* @__PURE__ */ P("p", {
+						f && /* @__PURE__ */ F("p", {
 							className: "text-xs text-status-error-text mt-1",
 							children: f
 						}),
-						m && /* @__PURE__ */ P("p", {
+						m && /* @__PURE__ */ F("p", {
 							className: "text-xs text-text-muted mt-1",
 							children: "Looking up transaction…"
 						})
 					] }),
-					c && /* @__PURE__ */ F(N, { children: [
-						/* @__PURE__ */ F("div", {
+					c && /* @__PURE__ */ I(P, { children: [
+						/* @__PURE__ */ I("div", {
 							className: "p-3 bg-status-success-bg-subtle border border-border-subtle rounded-md text-sm space-y-1",
-							children: [/* @__PURE__ */ F("div", {
+							children: [/* @__PURE__ */ I("div", {
 								className: "flex items-center gap-2 text-status-success-text font-medium",
-								children: [/* @__PURE__ */ P(v, { className: "size-4" }), "Transaction found"]
-							}), /* @__PURE__ */ F("div", {
+								children: [/* @__PURE__ */ F(v, { className: "size-4" }), "Transaction found"]
+							}), /* @__PURE__ */ I("div", {
 								className: "text-text-muted grid grid-cols-2 gap-x-4 gap-y-0.5 mt-1",
 								children: [
-									/* @__PURE__ */ F("span", { children: [
+									/* @__PURE__ */ I("span", { children: [
 										"Account:",
 										" ",
-										/* @__PURE__ */ F("span", {
+										/* @__PURE__ */ I("span", {
 											className: "text-text-primary font-mono text-xs",
 											children: [c.billingAccountId.slice(0, 16), "…"]
 										})
 									] }),
-									/* @__PURE__ */ F("span", { children: [
+									/* @__PURE__ */ I("span", { children: [
 										"Paid:",
 										" ",
-										/* @__PURE__ */ P("span", {
+										/* @__PURE__ */ F("span", {
 											className: "text-text-primary",
 											children: a(c.totalAmount, c.currency)
 										})
 									] }),
-									/* @__PURE__ */ F("span", { children: [
+									/* @__PURE__ */ I("span", { children: [
 										"Provider:",
 										" ",
-										/* @__PURE__ */ P("span", {
+										/* @__PURE__ */ F("span", {
 											className: "text-text-primary capitalize",
 											children: _.provider
 										})
 									] }),
-									/* @__PURE__ */ F("span", { children: ["Currency: ", /* @__PURE__ */ P("span", {
+									/* @__PURE__ */ I("span", { children: ["Currency: ", /* @__PURE__ */ F("span", {
 										className: "text-text-primary",
 										children: c.currency
 									})] })
 								]
 							})]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-3",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Provider"
-							}), /* @__PURE__ */ P("div", {
+							}), /* @__PURE__ */ F("div", {
 								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm capitalize",
 								children: _.provider
-							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+							})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Currency"
-							}), /* @__PURE__ */ P("div", {
+							}), /* @__PURE__ */ F("div", {
 								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm",
 								children: _.currency
 							})] })]
 						}),
-						/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 							className: "block text-xs font-medium text-text-muted mb-1",
 							children: "Gateway Payment ID"
-						}), /* @__PURE__ */ P("div", {
+						}), /* @__PURE__ */ F("div", {
 							className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm font-mono truncate",
 							children: _.gatewayPaymentId
 						})] }),
-						_.purchaseType && /* @__PURE__ */ F("div", {
+						_.purchaseType && /* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-3",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Purchase Type"
-							}), /* @__PURE__ */ P("div", {
+							}), /* @__PURE__ */ F("div", {
 								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm",
 								children: _.purchaseType
-							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+							})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 								className: "block text-xs font-medium text-text-muted mb-1",
 								children: "Purchase Detail"
-							}), /* @__PURE__ */ P("div", {
+							}), /* @__PURE__ */ F("div", {
 								className: "px-3 py-2 border border-border-subtle rounded-md bg-bg-sunken/30 text-sm truncate",
 								children: _.purchaseDetail || "—"
 							})] })]
 						}),
-						/* @__PURE__ */ F("div", { children: [
-							/* @__PURE__ */ F("label", {
+						/* @__PURE__ */ I("div", { children: [
+							/* @__PURE__ */ I("label", {
 								className: "block text-sm font-medium mb-1",
-								children: ["Refund Amount *", /* @__PURE__ */ F("span", {
+								children: ["Refund Amount *", /* @__PURE__ */ I("span", {
 									className: "text-xs text-text-muted ml-1",
 									children: [
 										"(max ",
@@ -321,7 +322,7 @@ var L = {
 									]
 								})]
 							}),
-							/* @__PURE__ */ P("input", {
+							/* @__PURE__ */ F("input", {
 								type: "number",
 								step: "0.01",
 								min: "0.01",
@@ -334,7 +335,7 @@ var L = {
 								className: `w-full px-3 py-2 border rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] ${E ? "border-status-error-text" : "border-border-subtle"}`,
 								required: !0
 							}),
-							E && /* @__PURE__ */ F("p", {
+							E && /* @__PURE__ */ I("p", {
 								className: "text-xs text-status-error-text mt-1",
 								children: [
 									"Amount cannot exceed the original payment of",
@@ -343,10 +344,10 @@ var L = {
 								]
 							})
 						] }),
-						/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 							className: "block text-sm font-medium mb-1",
 							children: "Reason"
-						}), /* @__PURE__ */ P("input", {
+						}), /* @__PURE__ */ F("input", {
 							type: "text",
 							value: _.reason || "",
 							onChange: (e) => y({
@@ -356,10 +357,10 @@ var L = {
 							className: "w-full px-3 py-2 border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							placeholder: "Reason for refund"
 						})] }),
-						/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 							className: "block text-sm font-medium mb-1",
 							children: "Notes"
-						}), /* @__PURE__ */ P("textarea", {
+						}), /* @__PURE__ */ F("textarea", {
 							value: _.notes || "",
 							onChange: (e) => y({
 								..._,
@@ -370,67 +371,67 @@ var L = {
 							placeholder: "Internal notes"
 						})] })
 					] }),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ I("div", {
 						className: "flex gap-2 pt-2",
-						children: [/* @__PURE__ */ P("button", {
+						children: [/* @__PURE__ */ F("button", {
 							type: "button",
 							onClick: x,
 							className: "flex-1 py-2 px-4 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors",
 							children: "Cancel"
-						}), /* @__PURE__ */ F("button", {
+						}), /* @__PURE__ */ I("button", {
 							type: "submit",
 							disabled: r || !c || !_.gatewayPaymentId || _.amount <= 0 || E,
 							className: "flex-1 py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2",
-							children: [r && /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }), "Create Refund"]
+							children: [r && /* @__PURE__ */ F(T, { className: "size-4 animate-spin" }), "Create Refund"]
 						})]
 					})
 				]
 			})]
 		})]
 	});
-}, oe = ({ isOpen: e, record: t, onClose: n, onSubmit: i, isSubmitting: o }) => {
+}, se = ({ isOpen: e, record: t, onClose: n, onSubmit: i, isSubmitting: o }) => {
 	let [s, c] = h("");
-	return !e || !t ? null : /* @__PURE__ */ F("div", {
+	return !e || !t ? null : /* @__PURE__ */ I("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
-		children: [/* @__PURE__ */ P("div", {
+		children: [/* @__PURE__ */ F("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: n
-		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-md w-full mx-4",
-			children: [/* @__PURE__ */ F("div", {
+		}), /* @__PURE__ */ I("div", {
+			className: "relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] max-w-md w-full mx-4",
+			children: [/* @__PURE__ */ I("div", {
 				className: "flex items-center justify-between p-4 border-b border-border-subtle",
-				children: [/* @__PURE__ */ P("h2", {
+				children: [/* @__PURE__ */ F("h2", {
 					className: "text-lg font-semibold",
 					children: "Skip Refund"
-				}), /* @__PURE__ */ P("button", {
+				}), /* @__PURE__ */ F("button", {
 					type: "button",
 					onClick: n,
 					className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
-					children: /* @__PURE__ */ P(j, { className: "size-5" })
+					children: /* @__PURE__ */ F(M, { className: "size-5" })
 				})]
-			}), /* @__PURE__ */ F("form", {
+			}), /* @__PURE__ */ I("form", {
 				onSubmit: async (e) => {
 					e.preventDefault(), await i(s), c("");
 				},
 				className: "p-4 space-y-4",
 				children: [
-					/* @__PURE__ */ P("div", {
+					/* @__PURE__ */ F("div", {
 						className: `p-3 ${r.warning.bg} border ${r.warning.border} rounded-md`,
-						children: /* @__PURE__ */ F("div", {
+						children: /* @__PURE__ */ I("div", {
 							className: "flex items-start gap-2",
-							children: [/* @__PURE__ */ P(g, { className: `size-5 ${r.warning.icon} mt-0.5` }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ F(g, { className: `size-5 ${r.warning.icon} mt-0.5` }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: `text-sm font-medium ${r.warning.text}`,
 								children: "You are about to skip this refund"
-							}), /* @__PURE__ */ F("p", {
+							}), /* @__PURE__ */ I("p", {
 								className: `text-sm ${r.warning.text} mt-1`,
 								children: ["Amount: ", a(t.amount, t.currency)]
 							})] })]
 						})
 					}),
-					/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+					/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 						className: "block text-sm font-medium mb-1",
 						children: "Reason for skipping *"
-					}), /* @__PURE__ */ P("textarea", {
+					}), /* @__PURE__ */ F("textarea", {
 						value: s,
 						onChange: (e) => c(e.target.value),
 						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface resize-none",
@@ -438,180 +439,180 @@ var L = {
 						placeholder: "Explain why this refund is being skipped...",
 						required: !0
 					})] }),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ I("div", {
 						className: "flex gap-2",
-						children: [/* @__PURE__ */ P("button", {
+						children: [/* @__PURE__ */ F("button", {
 							type: "button",
 							onClick: n,
 							className: "flex-1 py-2 px-4 border border-border-subtle rounded-md hover:bg-bg-sunken/50 transition-colors",
 							children: "Cancel"
-						}), /* @__PURE__ */ F("button", {
+						}), /* @__PURE__ */ I("button", {
 							type: "submit",
 							disabled: o || !s.trim(),
 							className: `flex-1 py-2 px-4 ${r.warning.dot} text-action-primary-text rounded-md hover:opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2`,
-							children: [o && /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }), "Skip Refund"]
+							children: [o && /* @__PURE__ */ F(T, { className: "size-4 animate-spin" }), "Skip Refund"]
 						})]
 					})
 				]
 			})]
 		})]
 	});
-}, se = ({ record: e, onClose: t }) => {
+}, ce = ({ record: e, onClose: t }) => {
 	if (!e) return null;
-	let n = L[e.status].icon;
-	return /* @__PURE__ */ F("div", {
+	let n = R[e.status].icon;
+	return /* @__PURE__ */ I("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
-		children: [/* @__PURE__ */ P("div", {
+		children: [/* @__PURE__ */ F("div", {
 			className: "absolute inset-0 bg-overlay-scrim",
 			onClick: t
-		}), /* @__PURE__ */ F("div", {
-			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
+		}), /* @__PURE__ */ I("div", {
+			className: "relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] max-w-lg w-full mx-4 max-h-[90vh] overflow-auto",
 			children: [
-				/* @__PURE__ */ F("div", {
+				/* @__PURE__ */ I("div", {
 					className: "flex items-center justify-between p-4 border-b border-border-subtle",
-					children: [/* @__PURE__ */ P("h2", {
+					children: [/* @__PURE__ */ F("h2", {
 						className: "text-lg font-semibold",
 						children: "Refund Details"
-					}), /* @__PURE__ */ P("button", {
+					}), /* @__PURE__ */ F("button", {
 						type: "button",
 						onClick: t,
 						className: "p-1 rounded-md hover:bg-bg-sunken/50 transition-colors",
-						children: /* @__PURE__ */ P(j, { className: "size-5" })
+						children: /* @__PURE__ */ F(M, { className: "size-5" })
 					})]
 				}),
-				/* @__PURE__ */ F("div", {
+				/* @__PURE__ */ I("div", {
 					className: "p-4 space-y-4",
 					children: [
-						/* @__PURE__ */ F("div", {
-							className: `flex items-center gap-2 p-3 rounded-md ${z(L[e.status].color)}`,
-							children: [/* @__PURE__ */ P(n, { className: "size-5" }), /* @__PURE__ */ P("span", {
+						/* @__PURE__ */ I("div", {
+							className: `flex items-center gap-2 p-3 rounded-md ${B(R[e.status].color)}`,
+							children: [/* @__PURE__ */ F(n, { className: "size-5" }), /* @__PURE__ */ F("span", {
 								className: "font-medium",
-								children: L[e.status].label
+								children: R[e.status].label
 							})]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Refund ID"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm font-mono break-all",
 								children: e.id
-							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Source"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm",
-								children: R[e.source]
+								children: z[e.source]
 							})] })]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Amount"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-lg font-semibold",
 								children: a(e.amount, e.currency)
-							})] }), /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							})] }), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Provider"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm capitalize",
 								children: e.provider
 							})] })]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Gateway Payment ID"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm font-mono break-all",
 								children: e.gatewayPaymentId
-							})] }), e.gatewayOrderId && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							})] }), e.gatewayOrderId && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Gateway Order ID"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm font-mono break-all",
 								children: e.gatewayOrderId
 							})] })]
 						}),
-						e.gatewayRefundId && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+						e.gatewayRefundId && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 							className: "text-xs text-text-muted mb-1",
 							children: "Gateway Refund ID"
-						}), /* @__PURE__ */ P("p", {
+						}), /* @__PURE__ */ F("p", {
 							className: "text-sm font-mono break-all",
 							children: e.gatewayRefundId
 						})] }),
-						(e.purchaseType || e.purchaseDetail) && /* @__PURE__ */ F("div", {
+						(e.purchaseType || e.purchaseDetail) && /* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [e.purchaseType && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [e.purchaseType && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Purchase Type"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm",
 								children: e.purchaseType
-							})] }), e.purchaseDetail && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							})] }), e.purchaseDetail && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Purchase Detail"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm",
 								children: e.purchaseDetail
 							})] })]
 						}),
-						e.reason && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+						e.reason && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 							className: "text-xs text-text-muted mb-1",
 							children: "Reason"
-						}), /* @__PURE__ */ P("p", {
+						}), /* @__PURE__ */ F("p", {
 							className: "text-sm",
 							children: e.reason
 						})] }),
-						e.notes && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+						e.notes && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 							className: "text-xs text-text-muted mb-1",
 							children: "Notes"
-						}), /* @__PURE__ */ P("p", {
+						}), /* @__PURE__ */ F("p", {
 							className: "text-sm",
 							children: e.notes
 						})] }),
-						e.errorMessage && /* @__PURE__ */ F("div", {
+						e.errorMessage && /* @__PURE__ */ I("div", {
 							className: `p-3 ${r.error.bg} border ${r.error.border} rounded-md`,
-							children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ F("p", {
 								className: `text-xs ${r.error.text} mb-1`,
 								children: "Error Message"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: `text-sm ${r.error.text}`,
 								children: e.errorMessage
 							})]
 						}),
-						/* @__PURE__ */ F("div", {
+						/* @__PURE__ */ I("div", {
 							className: "grid grid-cols-2 gap-4 pt-2 border-t border-border-subtle",
-							children: [/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Created At"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm",
 								children: o(e.createdAt)
-							})] }), e.processedAt && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+							})] }), e.processedAt && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 								className: "text-xs text-text-muted mb-1",
 								children: "Processed At"
-							}), /* @__PURE__ */ P("p", {
+							}), /* @__PURE__ */ F("p", {
 								className: "text-sm",
 								children: o(e.processedAt)
 							})] })]
 						}),
-						e.retryCount > 0 && /* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("p", {
+						e.retryCount > 0 && /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
 							className: "text-xs text-text-muted mb-1",
 							children: "Retry Count"
-						}), /* @__PURE__ */ P("p", {
+						}), /* @__PURE__ */ F("p", {
 							className: "text-sm",
 							children: e.retryCount
 						})] })
 					]
 				}),
-				/* @__PURE__ */ P("div", {
+				/* @__PURE__ */ F("div", {
 					className: "p-4 border-t border-border-subtle",
-					children: /* @__PURE__ */ P("button", {
+					children: /* @__PURE__ */ F("button", {
 						type: "button",
 						onClick: t,
 						className: "w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bgHover transition-colors",
@@ -621,7 +622,7 @@ var L = {
 			]
 		})]
 	});
-}, V = {
+}, H = {
 	PENDING: {
 		label: "Pending",
 		status: "PENDING"
@@ -638,87 +639,177 @@ var L = {
 		label: "All",
 		status: void 0
 	}
-}, H = () => {
-	let { t: l } = ne(), d = (e, t) => {
-		let n = l(e);
+}, U = () => {
+	let { t: r } = te(), l = (e, t) => {
+		let n = r(e);
 		return n === e ? t : n;
-	}, f = c(), [m, g] = h("PENDING"), [_, v] = h(""), [x, C] = h({}), [E, ee] = h(!1), [O, A] = h(null), [M, N] = h(!1), [I, B] = h(!1), [H, U] = h(null), [ce, W] = h(null), { records: G, stats: K, pagination: q, isLoading: le, recordsError: J, unprocessedWebhooks: Y, refetch: X, goToNextPage: ue, goToPreviousPage: de, setFilters: Z, createRefundRecord: fe, processRefund: pe, skipRefund: me, retryRefund: he, createRefundRecordsFromFailedWebhooks: ge, isCreating: _e, isProcessing: ve, isCreatingFromWebhooks: Q } = u({ filters: p(() => ({
-		...x,
-		status: V[m].status
+	}, d = c(), [f, m] = h("PENDING"), [g, _] = h(""), [v, x] = h({}), [C, E] = h(!1), [D, k] = h(null), [j, N] = h(!1), [P, L] = h(!1), [V, U] = h(null), [le, W] = h(null), { records: G, stats: K, pagination: q, isLoading: ue, recordsError: J, unprocessedWebhooks: Y, refetch: X, goToNextPage: de, goToPreviousPage: fe, setFilters: Z, createRefundRecord: pe, processRefund: me, skipRefund: he, retryRefund: ge, createRefundRecordsFromFailedWebhooks: _e, isCreating: ve, isProcessing: ye, isCreatingFromWebhooks: Q } = u({ filters: p(() => ({
+		...v,
+		status: H[f].status
 	}), [
-		m,
-		x.source,
-		x.provider,
-		x.billingAccountId,
-		x.fromDate,
-		x.toDate
+		f,
+		v.source,
+		v.provider,
+		v.billingAccountId,
+		v.fromDate,
+		v.toDate
 	]) });
-	if (!f.canViewPayments) return /* @__PURE__ */ P(e, { message: "You don't have permission to view refunds." });
-	if (J && s(J)) return /* @__PURE__ */ P("div", {
+	if (!d.canViewPayments) return /* @__PURE__ */ F(e, { message: "You don't have permission to view refunds." });
+	if (J && s(J)) return /* @__PURE__ */ F("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ P(i, {
+		children: /* @__PURE__ */ F(i, {
 			title: "Server Unavailable",
 			message: "Unable to load refunds. The server might be down or experiencing issues.",
 			onRetry: () => X(),
 			showRetry: !0
 		})
 	});
-	let ye = (e) => {
-		g(e), C({}), v("");
+	let be = (e) => {
+		m(e), x({}), _("");
 	}, $ = (e, t) => {
 		if (e === "status") return;
 		let n = {
-			...x,
+			...v,
 			[e]: t || void 0
 		};
-		C(n), Z({
+		x(n), Z({
 			...n,
-			status: V[m].status
+			status: H[f].status
 		});
-	}, be = async (e) => {
+	}, xe = async (e) => {
 		try {
-			await fe(e), N(!1);
+			await pe(e), N(!1);
 		} catch (e) {
 			console.error("Failed to create refund:", e);
 		}
-	}, xe = async (e) => {
+	}, Se = async (e) => {
 		W(e.id);
 		try {
-			let t = await pe(e.id);
+			let t = await me(e.id);
 			!t.success && t.error && console.error("Refund processing failed:", t.error);
 		} catch (e) {
 			console.error("Failed to process refund:", e);
 		} finally {
 			W(null);
 		}
-	}, Se = async (e) => {
-		if (H) try {
-			await me(H.id, e), B(!1), U(null);
+	}, Ce = async (e) => {
+		if (V) try {
+			await he(V.id, e), L(!1), U(null);
 		} catch (e) {
 			console.error("Failed to skip refund:", e);
 		}
-	}, Ce = async (e) => {
+	}, we = async (e) => {
 		W(e.id);
 		try {
-			let t = await he(e.id);
+			let t = await ge(e.id);
 			!t.success && t.error && console.error("Refund retry failed:", t.error);
 		} catch (e) {
 			console.error("Failed to retry refund:", e);
 		} finally {
 			W(null);
 		}
-	}, we = async () => {
+	}, Te = async () => {
 		try {
-			await ge();
+			await _e();
 		} catch (e) {
 			console.error("Failed to create refunds from webhooks:", e);
 		}
-	}, Te = _ ? G.filter((e) => e.gatewayPaymentId.toLowerCase().includes(_.toLowerCase()) || e.gatewayOrderId?.toLowerCase().includes(_.toLowerCase()) || e.reason?.toLowerCase().includes(_.toLowerCase())) : G;
-	return le ? /* @__PURE__ */ F("div", {
+	}, Ee = g ? G.filter((e) => e.gatewayPaymentId.toLowerCase().includes(g.toLowerCase()) || e.gatewayOrderId?.toLowerCase().includes(g.toLowerCase()) || e.reason?.toLowerCase().includes(g.toLowerCase())) : G, De = [
+		{
+			key: "date",
+			header: "Date",
+			priority: "primary",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ I("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ F("span", {
+					className: "text-sm text-text-primary",
+					children: o(e.createdAt).split(" ")[0]
+				}), /* @__PURE__ */ F("span", {
+					className: "text-xs text-text-muted",
+					children: o(e.createdAt).split(" ")[1]
+				})]
+			})
+		},
+		{
+			key: "status",
+			header: "Status",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => {
+				let t = R[e.status].icon;
+				return /* @__PURE__ */ I("span", {
+					className: `inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded ${B(R[e.status].color)}`,
+					children: [/* @__PURE__ */ F(t, { className: "size-3" }), /* @__PURE__ */ F("span", {
+						className: "hidden sm:inline",
+						children: R[e.status].label
+					})]
+				});
+			}
+		},
+		{
+			key: "source",
+			header: "Source",
+			priority: "hidden-on-mobile",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "text-sm text-text-muted",
+				children: z[e.source]
+			})
+		},
+		{
+			key: "provider",
+			header: "Provider",
+			priority: "hidden-on-mobile",
+			cellClassName: "whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "text-sm text-text-primary capitalize",
+				children: e.provider
+			})
+		},
+		{
+			key: "paymentId",
+			header: "Payment ID",
+			cellClassName: "whitespace-nowrap max-w-[120px] sm:max-w-[200px] truncate",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "text-sm font-mono text-text-muted",
+				children: e.gatewayPaymentId
+			})
+		},
+		{
+			key: "amount",
+			header: "Amount",
+			headerClassName: "text-right",
+			cellClassName: "text-right whitespace-nowrap",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "text-sm font-medium tabular-nums",
+				children: a(e.amount, e.currency)
+			})
+		},
+		{
+			key: "reason",
+			header: "Reason",
+			priority: "hidden-on-mobile",
+			cellClassName: "max-w-[200px] truncate",
+			cell: (e) => /* @__PURE__ */ F("span", {
+				className: "text-sm text-text-muted",
+				children: e.reason || "-"
+			})
+		}
+	], Oe = (e) => /* @__PURE__ */ F(ae, {
+		record: e,
+		onViewDetails: () => k(e),
+		onProcess: () => Se(e),
+		onSkip: () => {
+			U(e), L(!0);
+		},
+		onRetry: () => we(e),
+		isProcessing: le === e.id
+	});
+	return ue ? /* @__PURE__ */ I("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ P("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
-			/* @__PURE__ */ P("div", {
+			/* @__PURE__ */ F("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }),
+			/* @__PURE__ */ F("div", {
 				className: "grid grid-cols-5 gap-4",
 				children: [
 					1,
@@ -726,9 +817,9 @@ var L = {
 					3,
 					4,
 					5
-				].map((e) => /* @__PURE__ */ P("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-lg" }, e))
+				].map((e) => /* @__PURE__ */ F("div", { className: "h-24 bg-bg-sunken animate-pulse rounded-lg" }, e))
 			}),
-			/* @__PURE__ */ P("div", {
+			/* @__PURE__ */ F("div", {
 				className: "space-y-2",
 				children: [
 					1,
@@ -736,56 +827,46 @@ var L = {
 					3,
 					4,
 					5
-				].map((e) => /* @__PURE__ */ P("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
+				].map((e) => /* @__PURE__ */ F("div", { className: "h-16 bg-bg-sunken animate-pulse rounded" }, e))
 			})
 		]
-	}) : /* @__PURE__ */ F("div", {
+	}) : /* @__PURE__ */ I("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ P(t, {
-				title: d("billing.refunds.title", "Refund Management"),
+			/* @__PURE__ */ F(t, {
+				title: l("billing.refunds.title", "Refund Management"),
 				description: "View and manage refund records",
-				actions: /* @__PURE__ */ F("div", {
-					className: "flex items-center gap-2",
-					children: [
-						Y.length > 0 && /* @__PURE__ */ F("button", {
-							type: "button",
-							onClick: we,
-							disabled: Q,
-							className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border ${r.warning.border} ${r.warning.bg} ${r.warning.text} hover:opacity-90 transition-colors disabled:opacity-50`,
-							children: [
-								Q ? /* @__PURE__ */ P(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ P(S, { className: "size-4" }),
-								"Import ",
-								Y.length,
-								" Failed Webhooks"
-							]
-						}),
-						/* @__PURE__ */ F("button", {
-							type: "button",
-							onClick: () => X(),
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 transition-colors",
-							children: [/* @__PURE__ */ P(D, { className: "size-4" }), "Refresh"]
-						}),
-						/* @__PURE__ */ F("button", {
-							type: "button",
-							onClick: () => N(!0),
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-button bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover transition-colors",
-							children: [/* @__PURE__ */ P(te, { className: "size-4" }), "Create Manual Refund"]
-						})
-					]
+				actions: /* @__PURE__ */ F(ne, {
+					primary: {
+						label: "Create Manual Refund",
+						onSelect: () => N(!0),
+						icon: /* @__PURE__ */ F(ee, { className: "size-4" })
+					},
+					actions: [...Y.length > 0 ? [{
+						label: `Import ${Y.length} Failed Webhooks`,
+						onSelect: Te,
+						disabled: Q,
+						icon: Q ? /* @__PURE__ */ F(T, { className: "size-4 animate-spin" }) : /* @__PURE__ */ F(S, { className: "size-4" })
+					}] : [], {
+						label: "Refresh",
+						onSelect: () => {
+							X();
+						},
+						icon: /* @__PURE__ */ F(O, { className: "size-4" })
+					}]
 				})
 			}),
-			/* @__PURE__ */ P("div", {
+			/* @__PURE__ */ F("div", {
 				className: "border-b border-border-subtle",
-				children: /* @__PURE__ */ P("div", {
+				children: /* @__PURE__ */ F("div", {
 					className: "flex flex-wrap gap-2 sm:gap-0",
-					children: Object.keys(V).map((e) => {
-						let t = m === e, n = K ? e === "PENDING" ? K.pending : e === "COMPLETED" ? K.completed : e === "FAILED" ? K.failed : K.pending + K.processing + K.completed + K.failed + K.skipped : 0;
-						return /* @__PURE__ */ F("button", {
+					children: Object.keys(H).map((e) => {
+						let t = f === e, n = K ? e === "PENDING" ? K.pending : e === "COMPLETED" ? K.completed : e === "FAILED" ? K.failed : K.pending + K.processing + K.completed + K.failed + K.skipped : 0;
+						return /* @__PURE__ */ I("button", {
 							type: "button",
-							onClick: () => ye(e),
+							onClick: () => be(e),
 							className: `flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${t ? "border-action-primary-bg text-text-link" : "border-transparent text-text-muted hover:text-text-primary hover:border-border-subtle"}`,
-							children: [V[e].label, K && /* @__PURE__ */ P("span", {
+							children: [H[e].label, K && /* @__PURE__ */ F("span", {
 								className: `px-2 py-0.5 text-xs rounded-full ${t ? "bg-[var(--color-accent-soft)] text-text-link" : "bg-bg-sunken text-text-muted"}`,
 								children: n
 							})]
@@ -793,96 +874,96 @@ var L = {
 					})
 				})
 			}),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ I("div", {
 				className: "flex flex-col sm:flex-row gap-4",
 				children: [
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ I("div", {
 						className: "relative flex-1",
-						children: [/* @__PURE__ */ P(k, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted" }), /* @__PURE__ */ P("input", {
+						children: [/* @__PURE__ */ F(A, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted" }), /* @__PURE__ */ F("input", {
 							type: "text",
 							placeholder: "Search by payment ID, order ID, or reason...",
-							value: _,
-							onChange: (e) => v(e.target.value),
+							value: g,
+							onChange: (e) => _(e.target.value),
 							className: "w-full pl-[3.25rem] pr-4 py-2 border border-border-subtle rounded-md bg-bg-surface"
 						})]
 					}),
-					/* @__PURE__ */ F("button", {
+					/* @__PURE__ */ I("button", {
 						type: "button",
-						onClick: () => ee(!E),
-						className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${E ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link" : "border-border-subtle bg-bg-surface hover:bg-bg-sunken/50"}`,
+						onClick: () => E(!C),
+						className: `inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md border transition-colors ${C ? "border-action-primary-bg bg-[var(--color-accent-soft)] text-text-link" : "border-border-subtle bg-bg-surface hover:bg-bg-sunken/50"}`,
 						children: [
-							/* @__PURE__ */ P(w, { className: "size-4" }),
+							/* @__PURE__ */ F(w, { className: "size-4" }),
 							"Filters",
-							Object.values(x).filter(Boolean).length > 0 && /* @__PURE__ */ P("span", {
+							Object.values(v).filter(Boolean).length > 0 && /* @__PURE__ */ F("span", {
 								className: "px-1.5 py-0.5 text-xs rounded-full bg-action-primary-bg text-action-primary-text",
-								children: Object.values(x).filter(Boolean).length
+								children: Object.values(v).filter(Boolean).length
 							})
 						]
 					}),
-					Object.values(x).filter(Boolean).length > 0 && /* @__PURE__ */ F("button", {
+					Object.values(v).filter(Boolean).length > 0 && /* @__PURE__ */ I("button", {
 						type: "button",
 						onClick: () => {
-							C({}), Z({});
+							x({}), Z({});
 						},
 						className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md text-text-muted hover:text-text-primary transition-colors",
-						children: [/* @__PURE__ */ P(j, { className: "size-4" }), "Clear"]
+						children: [/* @__PURE__ */ F(M, { className: "size-4" }), "Clear"]
 					})
 				]
 			}),
-			E && /* @__PURE__ */ F("div", {
+			C && /* @__PURE__ */ I("div", {
 				className: "p-4 border border-border-subtle rounded-lg bg-bg-sunken/30 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 				children: [
-					/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+					/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 						className: "block text-sm font-medium mb-1",
 						children: "Source"
-					}), /* @__PURE__ */ F("select", {
-						value: x.source || "",
+					}), /* @__PURE__ */ I("select", {
+						value: v.source || "",
 						onChange: (e) => $("source", e.target.value),
 						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
-						children: [/* @__PURE__ */ P("option", {
+						children: [/* @__PURE__ */ F("option", {
 							value: "",
 							children: "All Sources"
-						}), Object.entries(R).map(([e, t]) => /* @__PURE__ */ P("option", {
+						}), Object.entries(z).map(([e, t]) => /* @__PURE__ */ F("option", {
 							value: e,
 							children: t
 						}, e))]
 					})] }),
-					/* @__PURE__ */ F("div", { children: [/* @__PURE__ */ P("label", {
+					/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("label", {
 						className: "block text-sm font-medium mb-1",
 						children: "Provider"
-					}), /* @__PURE__ */ F("select", {
-						value: x.provider || "",
+					}), /* @__PURE__ */ I("select", {
+						value: v.provider || "",
 						onChange: (e) => $("provider", e.target.value),
 						className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface",
-						children: [/* @__PURE__ */ P("option", {
+						children: [/* @__PURE__ */ F("option", {
 							value: "",
 							children: "All Providers"
-						}), re.map((e) => /* @__PURE__ */ P("option", {
+						}), ie.map((e) => /* @__PURE__ */ F("option", {
 							value: e,
 							children: e.charAt(0).toUpperCase() + e.slice(1)
 						}, e))]
 					})] }),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ I("div", {
 						className: "sm:col-span-2 lg:col-span-1",
-						children: [/* @__PURE__ */ P("label", {
+						children: [/* @__PURE__ */ F("label", {
 							className: "block text-sm font-medium mb-1",
 							children: "Date Range"
-						}), /* @__PURE__ */ F("div", {
+						}), /* @__PURE__ */ I("div", {
 							className: "flex flex-col sm:flex-row items-start sm:items-center gap-2",
 							children: [
-								/* @__PURE__ */ P("input", {
+								/* @__PURE__ */ F("input", {
 									type: "date",
-									value: x.fromDate ? x.fromDate.split("T")[0] : "",
+									value: v.fromDate ? v.fromDate.split("T")[0] : "",
 									onChange: (e) => $("fromDate", e.target.value ? new Date(e.target.value).toISOString() : void 0),
 									className: "w-full sm:flex-1 p-2 border border-border-subtle rounded-md bg-bg-surface text-sm"
 								}),
-								/* @__PURE__ */ P("span", {
+								/* @__PURE__ */ F("span", {
 									className: "text-text-muted hidden sm:inline",
 									children: "-"
 								}),
-								/* @__PURE__ */ P("input", {
+								/* @__PURE__ */ F("input", {
 									type: "date",
-									value: x.toDate ? x.toDate.split("T")[0] : "",
+									value: v.toDate ? v.toDate.split("T")[0] : "",
 									onChange: (e) => $("toDate", e.target.value ? new Date(e.target.value).toISOString() : void 0),
 									className: "w-full sm:flex-1 p-2 border border-border-subtle rounded-md bg-bg-surface text-sm"
 								})
@@ -891,119 +972,22 @@ var L = {
 					})
 				]
 			}),
-			Te.length === 0 ? /* @__PURE__ */ P(n, {
-				icon: /* @__PURE__ */ P(D, { className: "size-6 text-text-muted" }),
+			Ee.length === 0 ? /* @__PURE__ */ F(n, {
+				icon: /* @__PURE__ */ F(O, { className: "size-6 text-text-muted" }),
 				title: "No refund records found",
-				description: Object.values(x).filter(Boolean).length > 0 ? "Try adjusting your filters." : m === "PENDING" ? "No pending refunds to process." : "Refund records will appear here when created."
-			}) : /* @__PURE__ */ P("div", {
+				description: Object.values(v).filter(Boolean).length > 0 ? "Try adjusting your filters." : f === "PENDING" ? "No pending refunds to process." : "Refund records will appear here when created."
+			}) : /* @__PURE__ */ F("div", {
 				className: "border border-border-subtle rounded-lg overflow-hidden",
-				children: /* @__PURE__ */ P("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ F("table", {
-						className: "w-full min-w-[400px]",
-						children: [/* @__PURE__ */ P("thead", {
-							className: "bg-bg-sunken/50",
-							children: /* @__PURE__ */ F("tr", { children: [
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap",
-									children: "Date"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap",
-									children: "Status"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden sm:table-cell",
-									children: "Source"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden md:table-cell",
-									children: "Provider"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap",
-									children: "Payment ID"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-right text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap",
-									children: "Amount"
-								}),
-								/* @__PURE__ */ P("th", {
-									className: "text-left text-sm font-medium text-text-muted px-3 py-2 whitespace-nowrap hidden lg:table-cell",
-									children: "Reason"
-								}),
-								/* @__PURE__ */ P("th", { className: "p-2 w-10" })
-							] })
-						}), /* @__PURE__ */ P("tbody", {
-							className: "divide-y divide-border-subtle",
-							children: Te.map((e) => {
-								let t = L[e.status].icon;
-								return /* @__PURE__ */ F("tr", {
-									className: "hover:bg-bg-sunken/30 transition-colors",
-									children: [
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-text-primary whitespace-nowrap",
-											children: /* @__PURE__ */ F("div", {
-												className: "flex flex-col",
-												children: [/* @__PURE__ */ P("span", { children: o(e.createdAt).split(" ")[0] }), /* @__PURE__ */ P("span", {
-													className: "text-xs text-text-muted",
-													children: o(e.createdAt).split(" ")[1]
-												})]
-											})
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 whitespace-nowrap",
-											children: /* @__PURE__ */ F("span", {
-												className: `inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded ${z(L[e.status].color)}`,
-												children: [/* @__PURE__ */ P(t, { className: "size-3" }), /* @__PURE__ */ P("span", {
-													className: "hidden sm:inline",
-													children: L[e.status].label
-												})]
-											})
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-text-muted whitespace-nowrap hidden sm:table-cell",
-											children: R[e.source]
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-text-primary capitalize whitespace-nowrap hidden md:table-cell",
-											children: e.provider
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm font-mono text-text-muted whitespace-nowrap max-w-[120px] sm:max-w-[200px] truncate",
-											children: e.gatewayPaymentId
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-right font-medium whitespace-nowrap",
-											children: a(e.amount, e.currency)
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "px-3 py-2 text-sm text-text-muted max-w-[200px] truncate hidden lg:table-cell",
-											children: e.reason || "-"
-										}),
-										/* @__PURE__ */ P("td", {
-											className: "p-2 text-center",
-											children: /* @__PURE__ */ P(ie, {
-												record: e,
-												onViewDetails: () => A(e),
-												onProcess: () => xe(e),
-												onSkip: () => {
-													U(e), B(!0);
-												},
-												onRetry: () => Ce(e),
-												isProcessing: ce === e.id
-											})
-										})
-									]
-								}, e.id);
-							})
-						})]
-					})
+				children: /* @__PURE__ */ F(re, {
+					columns: De,
+					data: Ee,
+					rowKey: (e) => e.id,
+					rowActions: Oe
 				})
 			}),
-			q.totalCount > 0 && /* @__PURE__ */ F("div", {
+			q.totalCount > 0 && /* @__PURE__ */ I("div", {
 				className: "flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-border-subtle pt-4",
-				children: [/* @__PURE__ */ F("p", {
+				children: [/* @__PURE__ */ I("p", {
 					className: "text-sm text-text-muted text-center sm:text-left",
 					children: [
 						"Showing ",
@@ -1016,33 +1000,33 @@ var L = {
 						q.totalCount,
 						" refunds"
 					]
-				}), /* @__PURE__ */ F("div", {
+				}), /* @__PURE__ */ I("div", {
 					className: "flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ F("button", {
+						/* @__PURE__ */ I("button", {
 							type: "button",
-							onClick: de,
+							onClick: fe,
 							disabled: !q.hasPrevious,
 							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-							children: [/* @__PURE__ */ P(y, { className: "size-4" }), /* @__PURE__ */ P("span", {
+							children: [/* @__PURE__ */ F(y, { className: "size-4" }), /* @__PURE__ */ F("span", {
 								className: "hidden sm:inline",
 								children: "Previous"
 							})]
 						}),
-						/* @__PURE__ */ F("span", {
+						/* @__PURE__ */ I("span", {
 							className: "text-sm text-text-muted px-2",
 							children: [
-								/* @__PURE__ */ P("span", {
+								/* @__PURE__ */ F("span", {
 									className: "hidden sm:inline",
 									children: "Page "
 								}),
 								q.page + 1,
 								" ",
-								/* @__PURE__ */ P("span", {
+								/* @__PURE__ */ F("span", {
 									className: "hidden sm:inline",
 									children: "of"
 								}),
-								/* @__PURE__ */ P("span", {
+								/* @__PURE__ */ F("span", {
 									className: "sm:hidden",
 									children: "/"
 								}),
@@ -1050,42 +1034,42 @@ var L = {
 								Math.ceil(q.totalCount / q.pageSize)
 							]
 						}),
-						/* @__PURE__ */ F("button", {
+						/* @__PURE__ */ I("button", {
 							type: "button",
-							onClick: ue,
+							onClick: de,
 							disabled: !q.hasMore,
 							className: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-button border border-border-subtle bg-bg-surface hover:bg-bg-sunken/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-							children: [/* @__PURE__ */ P("span", {
+							children: [/* @__PURE__ */ F("span", {
 								className: "hidden sm:inline",
 								children: "Next"
-							}), /* @__PURE__ */ P(b, { className: "size-4" })]
+							}), /* @__PURE__ */ F(b, { className: "size-4" })]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ P(ae, {
-				isOpen: M,
+			/* @__PURE__ */ F(oe, {
+				isOpen: j,
 				onClose: () => N(!1),
-				onSubmit: be,
-				isSubmitting: _e
+				onSubmit: xe,
+				isSubmitting: ve
 			}),
-			/* @__PURE__ */ P(oe, {
-				isOpen: I,
-				record: H,
+			/* @__PURE__ */ F(se, {
+				isOpen: P,
+				record: V,
 				onClose: () => {
-					B(!1), U(null);
+					L(!1), U(null);
 				},
-				onSubmit: Se,
-				isSubmitting: ve
+				onSubmit: Ce,
+				isSubmitting: ye
 			}),
-			/* @__PURE__ */ P(se, {
-				record: O,
-				onClose: () => A(null)
+			/* @__PURE__ */ F(ce, {
+				record: D,
+				onClose: () => k(null)
 			})
 		]
 	});
 };
 //#endregion
-export { H as RefundsPage };
+export { U as RefundsPage };
 
 //# sourceMappingURL=RefundsPage.js.map