@burdenoff/microfe-billing 2026.517.1 → 2026.517.2

package/dist/billing/modules/earnings/pages/PayoutAdminPage.js

@@ -1,273 +1,563 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { AccessDenied as t } from "../../../shared/components/AccessDenied.js";
 import { PageHeader as n } from "../../../shared/components/PageHeader.js";
-import { StatCard as r } from "../../../shared/components/StatCard.js";
-import { EmptyState as i } from "../../../shared/components/EmptyState.js";
-import { ServerError as a } from "../../../shared/components/ServerError.js";
+import { EmptyState as r } from "../../../shared/components/EmptyState.js";
+import { ServerError as i } from "../../../shared/components/ServerError.js";
 import "../../../shared/components/index.js";
-import { useBillingEventEmitter as o } from "../../../hooks/useBillingEventEmitter.js";
-import { formatCurrency as s, formatDateTime as c } from "../../../shared/utils/format.js";
-import { isServerError as l } from "../../../shared/utils/error.js";
+import { useBillingEventEmitter as a } from "../../../hooks/useBillingEventEmitter.js";
+import { formatCurrency as o, formatDateTime as s } from "../../../shared/utils/format.js";
+import { isServerError as c } from "../../../shared/utils/error.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as u } from "../../../hooks/useBillingPermissions.js";
-import { approvePayoutRequest as d, fetchAdminPayoutRequests as f, fetchAdminPayoutSummary as p, processPayoutRequest as m, rejectPayoutRequest as h } from "../api.js";
-import { useEffect as g, useMemo as _, useState as v } from "react";
-import { AlertTriangle as y, CheckCircle2 as b, PlayCircle as x, RefreshCw as S, XCircle as C } from "lucide-react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { useBillingPermissions as l } from "../../../hooks/useBillingPermissions.js";
+import { approvePayoutRequest as u, fetchAdminPayoutRequests as d, fetchAdminPayoutSummary as f, markPayoutPaid as p, rejectPayoutRequest as m } from "../api.js";
+import { useEffect as h, useMemo as g, useState as _ } from "react";
+import { AlertTriangle as v, Banknote as y, CheckCircle2 as b, ChevronDown as x, ChevronUp as S, Clock as C, CreditCard as w, ReceiptText as T, RefreshCw as E, XCircle as D } from "lucide-react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/billing/modules/earnings/pages/PayoutAdminPage.tsx
-var E = () => {
-	let E = u(), { emit: D } = o(), { apiGatewayUrl: O, authToken: k, orgId: A } = e(), [j, M] = v(null), [N, P] = v([]), [F, I] = v(!0), [L, R] = v(null), z = _(() => ({
-		apiGatewayUrl: O,
-		authToken: k,
-		orgId: A
+var j = {
+	REQUESTED: "Requested",
+	APPROVED: "Approved",
+	REJECTED: "Rejected",
+	PROCESSING: "Processing",
+	PAID: "Paid",
+	FAILED: "Failed",
+	CANCELED: "Canceled"
+}, M = {
+	REQUESTED: "bg-warning-surface text-warning-foreground",
+	APPROVED: "bg-info-surface text-info-foreground",
+	REJECTED: "bg-destructive/10 text-destructive",
+	PROCESSING: "bg-info-surface text-info-foreground",
+	PAID: "bg-success-surface text-success-foreground",
+	FAILED: "bg-destructive/10 text-destructive",
+	CANCELED: "bg-muted text-muted-foreground"
+};
+function N({ status: e }) {
+	return /* @__PURE__ */ k("span", {
+		className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${M[e] ?? "bg-muted text-muted-foreground"}`,
+		children: j[e] ?? e
+	});
+}
+function P({ account: e }) {
+	let [t, n] = _(!1), r = e.accountDetails;
+	return /* @__PURE__ */ A("div", {
+		className: "rounded-md border border-border bg-muted/40 p-3 text-sm",
+		children: [/* @__PURE__ */ A("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex items-center gap-2 text-foreground font-medium",
+				children: [
+					/* @__PURE__ */ k(w, { className: "h-4 w-4 text-muted-foreground" }),
+					e.displayName ?? e.label,
+					/* @__PURE__ */ A("span", {
+						className: "text-xs text-muted-foreground font-normal",
+						children: [
+							"(",
+							e.type === "UPI" ? "UPI" : "Bank",
+							" · ",
+							e.country ?? "Unknown",
+							" ·",
+							" ",
+							e.currency,
+							")"
+						]
+					})
+				]
+			}), r && /* @__PURE__ */ k("button", {
+				type: "button",
+				onClick: () => n((e) => !e),
+				className: "text-muted-foreground hover:text-foreground",
+				children: k(t ? S : x, { className: "h-4 w-4" })
+			})]
+		}), t && r && /* @__PURE__ */ A("div", {
+			className: "mt-2 grid gap-1 text-xs",
+			children: [
+				r.accountHolderName && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "Account holder"
+					}), /* @__PURE__ */ k("span", {
+						className: "text-foreground",
+						children: r.accountHolderName
+					})]
+				}),
+				r.bankName && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "Bank"
+					}), /* @__PURE__ */ k("span", {
+						className: "text-foreground",
+						children: r.bankName
+					})]
+				}),
+				e.accountLast4 && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "Account (last 4)"
+					}), /* @__PURE__ */ A("span", {
+						className: "text-foreground font-mono",
+						children: ["••••", e.accountLast4]
+					})]
+				}),
+				r.ifsc && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "IFSC"
+					}), /* @__PURE__ */ k("span", {
+						className: "text-foreground font-mono",
+						children: r.ifsc
+					})]
+				}),
+				r.routingNumberLast4 && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "Routing (last 4)"
+					}), /* @__PURE__ */ A("span", {
+						className: "text-foreground font-mono",
+						children: ["••••", r.routingNumberLast4]
+					})]
+				}),
+				r.upiIdMasked && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "UPI ID"
+					}), /* @__PURE__ */ k("span", {
+						className: "text-foreground font-mono",
+						children: r.upiIdMasked
+					})]
+				}),
+				r.swift && /* @__PURE__ */ A("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ k("span", {
+						className: "text-muted-foreground w-32 shrink-0",
+						children: "SWIFT"
+					}), /* @__PURE__ */ k("span", {
+						className: "text-foreground font-mono",
+						children: r.swift
+					})]
+				})
+			]
+		})]
+	});
+}
+function F({ request: e, onApprove: t, onReject: n, onMarkPaid: r }) {
+	let i = e.status === "REQUESTED" || e.status === "REJECTED", a = e.status === "REQUESTED" || e.status === "APPROVED", c = e.status === "APPROVED" || e.status === "PROCESSING";
+	return /* @__PURE__ */ A("div", {
+		className: "rounded-lg border border-border bg-card p-5 space-y-4",
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ A("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ A("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ k("span", {
+							className: "text-xl font-semibold text-foreground",
+							children: o(e.requestedAmount, e.currency)
+						}), /* @__PURE__ */ k(N, { status: e.status })]
+					}), /* @__PURE__ */ A("div", {
+						className: "text-xs text-muted-foreground space-x-2",
+						children: [
+							/* @__PURE__ */ A("span", { children: ["Requested ", s(e.createdAt)] }),
+							e.requesterUserId && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k("span", { children: "·" }), /* @__PURE__ */ A("span", { children: ["by ", e.requesterUserId] })] }),
+							/* @__PURE__ */ k("span", { children: "·" }),
+							/* @__PURE__ */ A("span", {
+								className: "font-mono text-xs",
+								children: [e.id.slice(0, 8), "…"]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ A("div", {
+					className: "flex flex-wrap gap-2",
+					children: [
+						i && /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => t(e),
+							className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground",
+							children: [/* @__PURE__ */ k(b, { className: "h-3.5 w-3.5" }), "Approve"]
+						}),
+						c && /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => r(e),
+							className: "inline-flex items-center gap-1.5 rounded-md bg-success-surface border border-success-border px-3 py-1.5 text-xs font-medium text-success-foreground",
+							children: [/* @__PURE__ */ k(y, { className: "h-3.5 w-3.5" }), "Mark as Paid"]
+						}),
+						a && /* @__PURE__ */ A("button", {
+							type: "button",
+							onClick: () => n(e),
+							className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-destructive",
+							children: [/* @__PURE__ */ k(D, { className: "h-3.5 w-3.5" }), "Reject"]
+						})
+					]
+				})]
+			}),
+			e.payoutAccount && /* @__PURE__ */ k(P, { account: e.payoutAccount }),
+			e.userNotes && /* @__PURE__ */ A("div", {
+				className: "rounded-md bg-muted/40 border border-border px-3 py-2 text-sm",
+				children: [/* @__PURE__ */ k("span", {
+					className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+					children: "User note"
+				}), /* @__PURE__ */ k("p", {
+					className: "mt-1 text-foreground",
+					children: e.userNotes
+				})]
+			}),
+			(e.internalNotes ?? e.failureReason ?? e.externalReference) && /* @__PURE__ */ A("div", {
+				className: "grid gap-1 text-xs text-muted-foreground",
+				children: [
+					e.externalReference && /* @__PURE__ */ A("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ k(T, { className: "h-3.5 w-3.5 mt-px shrink-0" }), /* @__PURE__ */ A("span", { children: ["Ref: ", /* @__PURE__ */ k("span", {
+							className: "font-mono text-foreground",
+							children: e.externalReference
+						})] })]
+					}),
+					e.internalNotes && /* @__PURE__ */ A("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ k("span", {
+							className: "shrink-0",
+							children: "Internal note:"
+						}), /* @__PURE__ */ k("span", {
+							className: "text-foreground",
+							children: e.internalNotes
+						})]
+					}),
+					e.failureReason && /* @__PURE__ */ A("div", {
+						className: "flex gap-2 text-destructive",
+						children: [/* @__PURE__ */ k(v, { className: "h-3.5 w-3.5 mt-px shrink-0" }), /* @__PURE__ */ k("span", { children: e.failureReason })]
+					})
+				]
+			}),
+			(e.paidAt ?? e.processedAt) && /* @__PURE__ */ A("div", {
+				className: "flex flex-wrap gap-4 text-xs text-muted-foreground",
+				children: [e.processedAt && /* @__PURE__ */ A("span", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ k(C, { className: "h-3 w-3" }),
+						"Processed ",
+						s(e.processedAt)
+					]
+				}), e.paidAt && /* @__PURE__ */ A("span", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ k(b, { className: "h-3 w-3" }),
+						"Paid ",
+						s(e.paidAt)
+					]
+				})]
+			})
+		]
+	});
+}
+function I({ summary: e }) {
+	return /* @__PURE__ */ A("div", {
+		className: "grid gap-3 sm:grid-cols-3",
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: "rounded-lg border border-border bg-card p-4",
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "text-xs text-muted-foreground uppercase tracking-wide",
+						children: "Pending payout"
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "mt-1 text-lg font-semibold text-foreground",
+						children: o(e.totalRequestedAmount, "USD")
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "text-xs text-muted-foreground mt-0.5",
+						children: [e.pendingCount, " requests"]
+					})
+				]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "rounded-lg border border-border bg-card p-4",
+				children: [/* @__PURE__ */ k("div", {
+					className: "text-xs text-muted-foreground uppercase tracking-wide",
+					children: "Processing"
+				}), /* @__PURE__ */ k("div", {
+					className: "mt-1 text-lg font-semibold text-foreground",
+					children: o(e.totalProcessingAmount, "USD")
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "rounded-lg border border-border bg-card p-4",
+				children: [
+					/* @__PURE__ */ k("div", {
+						className: "text-xs text-muted-foreground uppercase tracking-wide",
+						children: "Total paid"
+					}),
+					/* @__PURE__ */ k("div", {
+						className: "mt-1 text-lg font-semibold text-foreground",
+						children: o(e.totalPaidAmount, "USD")
+					}),
+					e.failedCount > 0 && /* @__PURE__ */ A("div", {
+						className: "text-xs text-destructive mt-0.5",
+						children: [e.failedCount, " failed"]
+					})
+				]
+			})
+		]
+	});
+}
+function L({ dialog: e, onClose: t, onConfirm: n }) {
+	let [r, i] = _(""), [a, s] = _(""), [c, l] = _(""), [u, d] = _(!1), f = async () => {
+		e.type === "reject" && !a.trim() || (d(!0), await n({
+			notes: r.trim() || void 0,
+			reason: a.trim() || void 0,
+			externalReference: c.trim() || void 0
+		}), d(!1));
+	};
+	return /* @__PURE__ */ k("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+		children: /* @__PURE__ */ A("div", {
+			className: "w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg space-y-4",
+			children: [
+				/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("h3", {
+					className: "text-base font-semibold text-foreground",
+					children: {
+						approve: "Approve withdrawal request",
+						reject: "Reject withdrawal request",
+						mark_paid: "Mark as paid"
+					}[e.type]
+				}), /* @__PURE__ */ A("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: [
+						o(e.amount, e.currency),
+						" · ",
+						e.accountLabel
+					]
+				})] }),
+				e.type === "mark_paid" && /* @__PURE__ */ A("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ A("div", { children: [
+						/* @__PURE__ */ k("label", {
+							className: "text-xs font-medium text-foreground block mb-1",
+							children: "Transaction reference / UTR number"
+						}),
+						/* @__PURE__ */ k("input", {
+							type: "text",
+							value: c,
+							onChange: (e) => l(e.target.value),
+							placeholder: "e.g. UTR123456789012, TXN_abc123",
+							className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+						}),
+						/* @__PURE__ */ k("p", {
+							className: "text-xs text-muted-foreground mt-1",
+							children: "Enter the bank reference number so the user can verify the transfer."
+						})
+					] }), /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
+						className: "text-xs font-medium text-foreground block mb-1",
+						children: "Internal notes (optional)"
+					}), /* @__PURE__ */ k("textarea", {
+						value: r,
+						onChange: (e) => i(e.target.value),
+						rows: 2,
+						placeholder: "Any internal notes about this payment…",
+						className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+					})] })]
+				}),
+				e.type === "approve" && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
+					className: "text-xs font-medium text-foreground block mb-1",
+					children: "Internal notes (optional)"
+				}), /* @__PURE__ */ k("textarea", {
+					value: r,
+					onChange: (e) => i(e.target.value),
+					rows: 3,
+					placeholder: "e.g. Verified bank details, approved for transfer…",
+					className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+				})] }),
+				e.type === "reject" && /* @__PURE__ */ A("div", { children: [/* @__PURE__ */ A("label", {
+					className: "text-xs font-medium text-foreground block mb-1",
+					children: ["Reason for rejection ", /* @__PURE__ */ k("span", {
+						className: "text-destructive",
+						children: "*"
+					})]
+				}), /* @__PURE__ */ k("textarea", {
+					value: a,
+					onChange: (e) => s(e.target.value),
+					rows: 3,
+					placeholder: "e.g. Invalid bank details provided, please re-submit with correct IFSC…",
+					className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+				})] }),
+				/* @__PURE__ */ A("div", {
+					className: "flex justify-end gap-2 pt-2",
+					children: [/* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: t,
+						disabled: u,
+						className: "rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground disabled:opacity-50",
+						children: "Cancel"
+					}), /* @__PURE__ */ k("button", {
+						type: "button",
+						onClick: () => void f(),
+						disabled: u || e.type === "reject" && !a.trim(),
+						className: `rounded-md px-4 py-2 text-sm font-medium disabled:opacity-50 ${e.type === "reject" ? "bg-destructive text-destructive-foreground" : "bg-primary text-primary-foreground"}`,
+						children: u ? "Saving…" : e.type === "approve" ? "Approve" : e.type === "reject" ? "Reject" : "Confirm Payment"
+					})]
+				})
+			]
+		})
+	});
+}
+var R = () => {
+	let o = l(), { emit: s } = a(), { apiGatewayUrl: v, authToken: y, orgId: x } = e(), [S, C] = _(null), [w, T] = _([]), [D, O] = _(!0), [j, M] = _(null), [N, P] = _("pending"), [R, z] = _(null), B = g(() => ({
+		apiGatewayUrl: v,
+		authToken: y,
+		orgId: x
 	}), [
-		O,
-		k,
-		A
-	]), B = async () => {
-		I(!0), R(null);
+		v,
+		y,
+		x
+	]), V = async () => {
+		O(!0), M(null);
 		try {
-			let [e, t] = await Promise.all([p(z), f(z)]);
-			M(e), P(t);
+			let [e, t] = await Promise.all([f(B), d(B)]);
+			C(e), T(t);
 		} catch (e) {
-			R(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load payout queue"));
+			M(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load payout queue"));
 		} finally {
-			I(!1);
+			O(!1);
 		}
 	};
-	if (g(() => {
-		B();
-	}, [z]), !E.isBillingAdmin) return /* @__PURE__ */ w(t, { message: "You don't have permission to manage payouts." });
-	if (L && l(L)) return /* @__PURE__ */ w(a, {
+	if (h(() => {
+		V();
+	}, [B]), !o.isBillingAdmin) return /* @__PURE__ */ k(t, { message: "You don't have permission to manage payouts." });
+	if (j && c(j)) return /* @__PURE__ */ k(i, {
 		title: "Payout queue unavailable",
-		message: L.message,
-		onRetry: () => void B(),
+		message: j.message,
+		onRetry: () => void V(),
 		showRetry: !0
 	});
-	let V = j ? [
-		{
-			title: "Requested",
-			value: s(j.totalRequestedAmount, "USD"),
-			icon: /* @__PURE__ */ w(y, { className: "h-5 w-5" })
-		},
+	let H = w.filter((e) => e.status === "REQUESTED"), U = w.filter((e) => e.status === "APPROVED" || e.status === "PROCESSING"), W = w.filter((e) => [
+		"PAID",
+		"REJECTED",
+		"FAILED",
+		"CANCELED"
+	].includes(e.status)), G = [
 		{
-			title: "Processing",
-			value: s(j.totalProcessingAmount, "USD"),
-			icon: /* @__PURE__ */ w(x, { className: "h-5 w-5" })
+			id: "pending",
+			label: "Pending",
+			count: H.length
 		},
 		{
-			title: "Paid",
-			value: s(j.totalPaidAmount, "USD"),
-			icon: /* @__PURE__ */ w(b, { className: "h-5 w-5" })
+			id: "approved",
+			label: "Approved",
+			count: U.length
 		},
 		{
-			title: "Failed",
-			value: j.failedCount,
-			icon: /* @__PURE__ */ w(C, { className: "h-5 w-5" })
+			id: "history",
+			label: "History",
+			count: W.length
 		}
-	] : [], H = async (e) => {
-		await d(e, window.prompt("Approval notes (optional)") ?? null, z), D("billing.payout.approved", {
-			route: "/billing/payouts",
-			entityId: e,
-			source: "payout-admin"
-		}), await B();
-	}, U = async (e) => {
-		let t = window.prompt("Reason for rejection");
-		t && (await h(e, t, z), D("billing.payout.rejected", {
-			route: "/billing/payouts",
-			entityId: e,
-			source: "payout-admin",
-			reason: t
-		}), await B());
-	}, W = async (e) => {
-		await m(e, z), D("billing.payout.processed", {
-			route: "/billing/payouts",
-			entityId: e,
-			source: "payout-admin"
-		}), await B();
+	], K = N === "pending" ? H : N === "approved" ? U : W, q = (e, t) => {
+		z({
+			type: e,
+			requestId: t.id,
+			amount: t.requestedAmount,
+			currency: t.currency,
+			accountLabel: t.payoutAccount?.displayName ?? t.payoutAccount?.label ?? "Unknown account"
+		});
 	};
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ A("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ w(n, {
+			/* @__PURE__ */ k(n, {
 				title: "Payout queue",
-				description: "Approve, reject, and process payout requests across all earnings sources.",
-				actions: /* @__PURE__ */ T("button", {
+				description: "Review withdrawal requests, verify bank details, and mark payments as paid once transferred.",
+				actions: /* @__PURE__ */ A("button", {
 					type: "button",
-					onClick: () => void B(),
+					onClick: () => void V(),
 					className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground",
-					children: [/* @__PURE__ */ w(S, { className: "h-4 w-4" }), "Refresh"]
+					children: [/* @__PURE__ */ k(E, { className: `h-4 w-4 ${D ? "animate-spin" : ""}` }), "Refresh"]
 				})
 			}),
-			F ? /* @__PURE__ */ w("div", {
-				className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
+			S && !D && /* @__PURE__ */ k(I, { summary: S }),
+			D && /* @__PURE__ */ k("div", {
+				className: "grid gap-3 sm:grid-cols-3",
 				children: [
 					1,
 					2,
-					3,
-					4
-				].map((e) => /* @__PURE__ */ w("div", { className: "h-28 animate-pulse rounded-lg border border-border bg-card" }, e))
-			}) : j ? /* @__PURE__ */ T("div", {
-				className: "space-y-4",
-				children: [/* @__PURE__ */ w("div", {
-					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
-					children: V.map((e) => /* @__PURE__ */ w(r, {
-						label: e.title,
-						value: e.value,
-						icon: e.icon
-					}, e.title))
-				}), /* @__PURE__ */ T("div", {
-					className: "grid gap-4 xl:grid-cols-2",
-					children: [/* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-4",
-						children: [/* @__PURE__ */ w("h3", {
-							className: "mb-3 text-sm font-semibold text-foreground",
-							children: "Status breakdown"
-						}), /* @__PURE__ */ w("div", {
-							className: "space-y-2 text-sm",
-							children: (j.statusBreakdown || []).map((e) => /* @__PURE__ */ T("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ w("span", {
-									className: "text-muted-foreground",
-									children: e.status
-								}), /* @__PURE__ */ T("span", {
-									className: "font-medium text-foreground",
-									children: [
-										e.count,
-										" · ",
-										s(e.totalAmount, "USD")
-									]
-								})]
-							}, e.status))
-						})]
-					}), /* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border bg-card p-4",
-						children: [/* @__PURE__ */ w("h3", {
-							className: "mb-3 text-sm font-semibold text-foreground",
-							children: "Provider breakdown"
-						}), /* @__PURE__ */ w("div", {
-							className: "space-y-2 text-sm",
-							children: (j.providerBreakdown || []).map((e) => /* @__PURE__ */ T("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ w("span", {
-									className: "text-muted-foreground",
-									children: e.provider
-								}), /* @__PURE__ */ T("span", {
-									className: "font-medium text-foreground",
-									children: [
-										e.count,
-										" · ",
-										s(e.totalAmount, "USD")
-									]
-								})]
-							}, e.provider))
+					3
+				].map((e) => /* @__PURE__ */ k("div", { className: "h-20 animate-pulse rounded-lg border border-border bg-card" }, e))
+			}),
+			j && !c(j) && /* @__PURE__ */ k("div", {
+				className: "rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive",
+				children: j.message
+			}),
+			/* @__PURE__ */ k("div", {
+				className: "border-b border-border",
+				children: /* @__PURE__ */ k("div", {
+					className: "flex gap-0",
+					children: G.map((e) => /* @__PURE__ */ A("button", {
+						type: "button",
+						onClick: () => P(e.id),
+						className: `flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors ${N === e.id ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+						children: [e.label, e.count > 0 && /* @__PURE__ */ k("span", {
+							className: `rounded-full px-1.5 py-0.5 text-xs ${N === e.id ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`,
+							children: e.count
 						})]
-					})]
-				})]
-			}) : null,
-			L && !l(L) ? /* @__PURE__ */ w("div", {
-				className: "rounded-lg border border-border bg-card p-4 text-sm text-destructive",
-				children: L.message
-			}) : null,
-			/* @__PURE__ */ T("section", {
-				className: "rounded-lg border border-border bg-card p-4",
-				children: [/* @__PURE__ */ w("h2", {
-					className: "mb-4 text-lg font-semibold text-foreground",
-					children: "Requests"
-				}), N.length === 0 && !F ? /* @__PURE__ */ w(i, {
-					icon: /* @__PURE__ */ w(x, { className: "h-8 w-8" }),
-					title: "No payout requests",
-					description: "New payout requests will appear in this queue."
-				}) : /* @__PURE__ */ w("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ T("table", {
-						className: "min-w-full text-sm",
-						children: [/* @__PURE__ */ w("thead", { children: /* @__PURE__ */ T("tr", {
-							className: "border-b border-border text-left text-muted-foreground",
-							children: [
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Amount"
-								}),
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Provider"
-								}),
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Status"
-								}),
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Account"
-								}),
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Created"
-								}),
-								/* @__PURE__ */ w("th", {
-									className: "px-3 py-2",
-									children: "Actions"
-								})
-							]
-						}) }), /* @__PURE__ */ w("tbody", { children: N.map((e) => /* @__PURE__ */ T("tr", {
-							className: "border-b border-border/70 text-foreground",
-							children: [
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2 font-medium",
-									children: s(e.requestedAmount, e.currency)
-								}),
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2",
-									children: e.provider
-								}),
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2",
-									children: e.status
-								}),
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2",
-									children: e.payoutAccount?.label || "-"
-								}),
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2",
-									children: c(e.createdAt)
-								}),
-								/* @__PURE__ */ w("td", {
-									className: "px-3 py-2",
-									children: /* @__PURE__ */ T("div", {
-										className: "flex flex-wrap gap-2",
-										children: [
-											e.status === "REQUESTED" || e.status === "REJECTED" ? /* @__PURE__ */ w("button", {
-												type: "button",
-												onClick: () => void H(e.id),
-												className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground",
-												children: "Approve"
-											}) : null,
-											e.status === "REQUESTED" || e.status === "APPROVED" ? /* @__PURE__ */ w("button", {
-												type: "button",
-												onClick: () => void U(e.id),
-												className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-destructive",
-												children: "Reject"
-											}) : null,
-											e.status === "APPROVED" ? /* @__PURE__ */ w("button", {
-												type: "button",
-												onClick: () => void W(e.id),
-												className: "rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground",
-												children: "Process"
-											}) : null
-										]
-									})
-								})
-							]
-						}, e.id)) })]
-					})
-				})]
+					}, e.id))
+				})
+			}),
+			N === "approved" && U.length > 0 && /* @__PURE__ */ A("div", {
+				className: "rounded-lg border border-info-border bg-info-surface px-4 py-3 text-sm text-info-foreground",
+				children: [
+					/* @__PURE__ */ k("strong", { children: "How to pay:" }),
+					" Click the account row to expand bank/UPI details → transfer the exact amount via your bank → click ",
+					/* @__PURE__ */ k("strong", { children: "Mark as Paid" }),
+					" and enter the UTR / transaction reference number."
+				]
+			}),
+			D ? /* @__PURE__ */ k("div", {
+				className: "space-y-4",
+				children: [1, 2].map((e) => /* @__PURE__ */ k("div", { className: "h-40 animate-pulse rounded-lg border border-border bg-card" }, e))
+			}) : K.length === 0 ? /* @__PURE__ */ k(r, {
+				icon: /* @__PURE__ */ k(b, { className: "h-8 w-8" }),
+				title: N === "pending" ? "No pending requests" : N === "approved" ? "No approved requests awaiting payment" : "No history yet",
+				description: N === "pending" ? "New withdrawal requests will appear here." : N === "approved" ? "Approve pending requests first, then send payment and mark as paid." : "Completed and rejected requests will appear here."
+			}) : /* @__PURE__ */ k("div", {
+				className: "space-y-4",
+				children: K.map((e) => /* @__PURE__ */ k(F, {
+					request: e,
+					onApprove: (e) => q("approve", e),
+					onReject: (e) => q("reject", e),
+					onMarkPaid: (e) => q("mark_paid", e)
+				}, e.id))
+			}),
+			R && /* @__PURE__ */ k(L, {
+				dialog: R,
+				onClose: () => z(null),
+				onConfirm: async (e) => {
+					if (R) try {
+						R.type === "approve" ? (await u(R.requestId, e.notes ?? null, B), s("billing.payout.approved", {
+							route: "/billing/payouts",
+							entityId: R.requestId,
+							source: "payout-admin"
+						})) : R.type === "reject" ? (await m(R.requestId, e.reason ?? "", B), s("billing.payout.rejected", {
+							route: "/billing/payouts",
+							entityId: R.requestId,
+							source: "payout-admin",
+							reason: e.reason
+						})) : R.type === "mark_paid" && (await p(R.requestId, e.externalReference ?? null, e.notes ?? null, B), s("billing.payout.processed", {
+							route: "/billing/payouts",
+							entityId: R.requestId,
+							source: "payout-admin"
+						})), z(null), await V();
+					} catch (e) {
+						M(e instanceof Error ? e : /* @__PURE__ */ Error("Action failed"));
+					}
+				}
 			})
 		]
 	});
 };
 //#endregion
-export { E as PayoutAdminPage };
+export { R as PayoutAdminPage };
 
 //# sourceMappingURL=PayoutAdminPage.js.map