@burdenoff/microfe-billing 2026.623.3 → 2026.624.2

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

@@ -8,15 +8,46 @@ import { useBillingEventEmitter as a } from "../../../hooks/useBillingEventEmitt
 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 l } from "../../../hooks/useBillingPermissions.js";
-import { useGetDefaultBillingAccountSettingsQuery as u } from "../../../../generated/global-operations.js";
-import { addPayoutAccount as d, archivePayoutAccount as f, fetchPayoutAccounts as p, fetchPayoutRequests as m, requestPayout as h, setDefaultPayoutAccount as g, updatePayoutAccount as _ } from "../api.js";
-import { useEffect as v, useMemo as y, useState as b } from "react";
-import { Landmark as x, RefreshCw as S, Send as C } from "lucide-react";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { useBillingPermissions as ee } from "../../../hooks/useBillingPermissions.js";
+import { useGetDefaultBillingAccountSettingsQuery as l } from "../../../../generated/global-operations.js";
+import { addPayoutAccount as u, archivePayoutAccount as te, fetchPayoutAccounts as ne, fetchPayoutRequests as re, requestPayout as d, setDefaultPayoutAccount as f, updatePayoutAccount as p } from "../api.js";
+import { useEffect as m, useMemo as ie, useState as h } from "react";
+import { Landmark as g, RefreshCw as _, Send as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { AlertDialog as S, AlertDialogAction as C, AlertDialogCancel as w, AlertDialogContent as T, AlertDialogDescription as ae, AlertDialogFooter as oe, AlertDialogHeader as se, AlertDialogTitle as E, ResponsiveTable as D } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/earnings/pages/PayoutsPage.tsx
-var D = () => {
-	let D = l(), { emit: O } = a(), { apiGatewayUrl: k, authToken: A, orgId: j } = e(), { data: M } = u({}), N = M?.getDefaultBillingAccount?.id, [P, F] = b([]), [I, L] = b([]), [R, z] = b(!0), [B, V] = b(null), [H, U] = b({
+var O = [
+	{
+		key: "amount",
+		header: "Amount",
+		priority: "primary",
+		cell: (e) => /* @__PURE__ */ b("span", {
+			className: "tabular-nums",
+			children: o(e.requestedAmount, e.currency)
+		})
+	},
+	{
+		key: "provider",
+		header: "Provider",
+		cell: (e) => e.provider
+	},
+	{
+		key: "status",
+		header: "Status",
+		cell: (e) => e.status
+	},
+	{
+		key: "account",
+		header: "Account",
+		cell: (e) => e.payoutAccount?.label || "-"
+	},
+	{
+		key: "created",
+		header: "Created",
+		cell: (e) => s(e.createdAt)
+	}
+], k = () => {
+	let o = ee(), { emit: s } = a(), { apiGatewayUrl: k, authToken: A, orgId: j } = e(), { data: M } = l({}), N = M?.getDefaultBillingAccount?.id, [P, F] = h([]), [I, L] = h([]), [R, z] = h(!0), [B, V] = h(null), [H, U] = h({
 		label: "",
 		type: "BANK_ACCOUNT",
 		providerPreference: "AUTO",
@@ -28,7 +59,7 @@ var D = () => {
 		routingNumber: "",
 		ifsc: "",
 		upiId: ""
-	}), [W, G] = b(""), [K, q] = b(""), [J, Y] = b(null), X = y(() => ({
+	}), [W, G] = h(""), [K, q] = h(""), [J, Y] = h(null), [X, Z] = h(null), Q = ie(() => ({
 		apiGatewayUrl: k,
 		authToken: A,
 		orgId: j
@@ -36,11 +67,11 @@ var D = () => {
 		k,
 		A,
 		j
-	]), Z = async () => {
+	]), $ = async () => {
 		if (N) {
 			z(!0), V(null);
 			try {
-				let [e, t] = await Promise.all([p(N, X), m(N, X)]);
+				let [e, t] = await Promise.all([ne(N, Q), re(N, Q)]);
 				F(e), L(t), !K && e[0]?.id && q(e[0].id);
 			} catch (e) {
 				V(e instanceof Error ? e : /* @__PURE__ */ Error("Failed to load payout data"));
@@ -49,26 +80,26 @@ var D = () => {
 			}
 		}
 	};
-	if (v(() => {
-		Z();
-	}, [N, X]), !D.canManagePaymentMethods) return /* @__PURE__ */ T(t, { message: "You don't have permission to manage payout accounts." });
-	if (B && c(B)) return /* @__PURE__ */ T(i, {
+	if (m(() => {
+		$();
+	}, [N, Q]), !o.canManagePaymentMethods) return /* @__PURE__ */ b(t, { message: "You don't have permission to manage payout accounts." });
+	if (B && c(B)) return /* @__PURE__ */ b(i, {
 		title: "Payout data unavailable",
 		message: B.message,
-		onRetry: () => void Z(),
+		onRetry: () => void $(),
 		showRetry: !0
 	});
-	let Q = async () => {
+	let ce = async () => {
 		if (!N) return;
 		let e = {
 			billingAccountId: N,
 			...H
 		};
-		J ? (await _(J, e, X), O("billing.payout_account.updated", {
+		J ? (await p(J, e, Q), s("billing.payout_account.updated", {
 			route: "/billing/payouts",
 			entityId: J,
 			source: "payouts"
-		})) : (await d(e, X), O("billing.payout_account.added", {
+		})) : (await u(e, Q), s("billing.payout_account.added", {
 			route: "/billing/payouts",
 			entityId: N,
 			source: "payouts"
@@ -84,16 +115,16 @@ var D = () => {
 			routingNumber: "",
 			ifsc: "",
 			upiId: ""
-		}), Y(null), await Z();
-	}, $ = async (e) => {
-		await g(e, X), await Z();
-	}, ee = async (e) => {
-		window.confirm("Archive this payout account?") && (await f(e, X), O("billing.payout_account.archived", {
+		}), Y(null), await $();
+	}, le = async (e) => {
+		await f(e, Q), await $();
+	}, ue = async (e) => {
+		await te(e, Q), s("billing.payout_account.archived", {
 			route: "/billing/payouts",
 			entityId: e,
 			source: "payouts"
-		}), await Z());
-	}, te = (e) => {
+		}), await $();
+	}, de = (e) => {
 		Y(e.id), U((t) => ({
 			...t,
 			label: e.label,
@@ -108,151 +139,151 @@ var D = () => {
 			ifsc: "",
 			upiId: ""
 		}));
-	}, ne = async () => {
-		!N || !K || !W || (await h({
+	}, fe = async () => {
+		!N || !K || !W || (await d({
 			billingAccountId: N,
 			payoutAccountId: K,
 			amount: Number(W),
 			currency: P.find((e) => e.id === K)?.currency || "USD"
-		}, X), O("billing.payout.requested", {
+		}, Q), s("billing.payout.requested", {
 			route: "/billing/payouts",
 			entityId: K,
 			source: "payouts",
 			amount: Number(W),
 			currency: P.find((e) => e.id === K)?.currency || "USD"
-		}), G(""), await Z());
+		}), G(""), await $());
 	};
-	return /* @__PURE__ */ E("div", {
+	return /* @__PURE__ */ x("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ T(n, {
+			/* @__PURE__ */ b(n, {
 				title: "Payouts",
 				description: "Register payout accounts, request withdrawals, and track disbursement status."
 			}),
-			B && !c(B) ? /* @__PURE__ */ T("div", {
-				className: "rounded-lg border border-border bg-card p-4 text-sm text-destructive",
+			B && !c(B) ? /* @__PURE__ */ b("div", {
+				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm text-status-error-text",
 				children: B.message
 			}) : null,
-			/* @__PURE__ */ E("div", {
+			/* @__PURE__ */ x("div", {
 				className: "grid gap-6 xl:grid-cols-[1.05fr,1.95fr]",
-				children: [/* @__PURE__ */ E("section", {
-					className: "rounded-lg border border-border bg-card p-4",
+				children: [/* @__PURE__ */ x("section", {
+					className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
 					children: [
-						/* @__PURE__ */ T("h2", {
-							className: "mb-4 text-lg font-semibold text-foreground",
+						/* @__PURE__ */ b("h2", {
+							className: "mb-4 text-lg font-semibold text-text-primary",
 							children: J ? "Edit payout account" : "Add payout account"
 						}),
-						/* @__PURE__ */ E("div", {
+						/* @__PURE__ */ x("div", {
 							className: "space-y-3",
 							children: [
-								/* @__PURE__ */ T("input", {
+								/* @__PURE__ */ b("input", {
 									value: H.label,
 									onChange: (e) => U((t) => ({
 										...t,
 										label: e.target.value
 									})),
 									placeholder: "Label",
-									className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+									className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ x("div", {
 									className: "grid gap-3 md:grid-cols-2",
-									children: [/* @__PURE__ */ E("select", {
+									children: [/* @__PURE__ */ x("select", {
 										value: H.type,
 										onChange: (e) => U((t) => ({
 											...t,
 											type: e.target.value
 										})),
-										className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground",
+										className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
 										children: [
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "BANK_ACCOUNT",
 												children: "Bank account"
 											}),
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "UPI",
 												children: "UPI"
 											}),
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "WALLET",
 												children: "Wallet"
 											})
 										]
-									}), /* @__PURE__ */ E("select", {
+									}), /* @__PURE__ */ x("select", {
 										value: H.providerPreference,
 										onChange: (e) => U((t) => ({
 											...t,
 											providerPreference: e.target.value
 										})),
-										className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground",
+										className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
 										children: [
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "AUTO",
 												children: "Auto"
 											}),
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "STRIPE",
 												children: "Stripe"
 											}),
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "RAZORPAY",
 												children: "Razorpay"
 											}),
-											/* @__PURE__ */ T("option", {
+											/* @__PURE__ */ b("option", {
 												value: "MANUAL",
 												children: "Manual"
 											})
 										]
 									})]
 								}),
-								/* @__PURE__ */ E("div", {
+								/* @__PURE__ */ x("div", {
 									className: "grid gap-3 md:grid-cols-2",
-									children: [/* @__PURE__ */ T("input", {
+									children: [/* @__PURE__ */ b("input", {
 										value: H.country,
 										onChange: (e) => U((t) => ({
 											...t,
 											country: e.target.value.toUpperCase()
 										})),
 										placeholder: "Country",
-										className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-									}), /* @__PURE__ */ T("input", {
+										className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
+									}), /* @__PURE__ */ b("input", {
 										value: H.currency,
 										onChange: (e) => U((t) => ({
 											...t,
 											currency: e.target.value.toUpperCase()
 										})),
 										placeholder: "Currency",
-										className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+										className: "rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})]
 								}),
-								/* @__PURE__ */ T("input", {
+								/* @__PURE__ */ b("input", {
 									value: H.accountHolderName,
 									onChange: (e) => U((t) => ({
 										...t,
 										accountHolderName: e.target.value
 									})),
 									placeholder: "Account holder name",
-									className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+									className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 								}),
-								H.type === "BANK_ACCOUNT" ? /* @__PURE__ */ E(w, { children: [
-									/* @__PURE__ */ T("input", {
+								H.type === "BANK_ACCOUNT" ? /* @__PURE__ */ x(y, { children: [
+									/* @__PURE__ */ b("input", {
 										value: H.bankName,
 										onChange: (e) => U((t) => ({
 											...t,
 											bankName: e.target.value
 										})),
 										placeholder: "Bank name",
-										className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									}),
-									/* @__PURE__ */ T("input", {
+									/* @__PURE__ */ b("input", {
 										value: H.accountNumber,
 										onChange: (e) => U((t) => ({
 											...t,
 											accountNumber: e.target.value
 										})),
 										placeholder: "Account number",
-										className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									}),
-									/* @__PURE__ */ T("input", {
+									/* @__PURE__ */ b("input", {
 										value: H.country === "IN" ? H.ifsc : H.routingNumber,
 										onChange: (e) => U((t) => t.country === "IN" ? {
 											...t,
@@ -262,26 +293,26 @@ var D = () => {
 											routingNumber: e.target.value
 										}),
 										placeholder: H.country === "IN" ? "IFSC" : "Routing number",
-										className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})
-								] }) : H.type === "UPI" ? /* @__PURE__ */ T("input", {
+								] }) : H.type === "UPI" ? /* @__PURE__ */ b("input", {
 									value: H.upiId,
 									onChange: (e) => U((t) => ({
 										...t,
 										upiId: e.target.value
 									})),
 									placeholder: "UPI ID",
-									className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+									className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 								}) : null
 							]
 						}),
-						/* @__PURE__ */ E("button", {
+						/* @__PURE__ */ x("button", {
 							type: "button",
-							onClick: () => void Q(),
-							className: "mt-4 inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
-							children: [/* @__PURE__ */ T(x, { className: "size-4" }), J ? "Update payout account" : "Save payout account"]
+							onClick: () => void ce(),
+							className: "mt-4 inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+							children: [/* @__PURE__ */ b(g, { className: "size-4" }), J ? "Update payout account" : "Save payout account"]
 						}),
-						J ? /* @__PURE__ */ T("button", {
+						J ? /* @__PURE__ */ b("button", {
 							type: "button",
 							onClick: () => {
 								Y(null), U({
@@ -298,39 +329,39 @@ var D = () => {
 									upiId: ""
 								});
 							},
-							className: "mt-4 ml-3 inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground",
+							className: "mt-4 ml-3 inline-flex items-center gap-2 rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary",
 							children: "Cancel edit"
 						}) : null
 					]
-				}), /* @__PURE__ */ E("section", {
+				}), /* @__PURE__ */ x("section", {
 					className: "space-y-4",
-					children: [/* @__PURE__ */ E("div", {
-						className: "rounded-lg border border-border bg-card p-4",
+					children: [/* @__PURE__ */ x("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
 						children: [
-							/* @__PURE__ */ E("div", {
+							/* @__PURE__ */ x("div", {
 								className: "mb-4 flex items-center justify-between",
-								children: [/* @__PURE__ */ T("h2", {
-									className: "text-lg font-semibold text-foreground",
+								children: [/* @__PURE__ */ b("h2", {
+									className: "text-lg font-semibold text-text-primary",
 									children: "Request payout"
-								}), /* @__PURE__ */ E("button", {
+								}), /* @__PURE__ */ x("button", {
 									type: "button",
-									onClick: () => void Z(),
-									className: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground",
-									children: [/* @__PURE__ */ T(S, { className: "size-4" }), "Refresh"]
+									onClick: () => void $(),
+									className: "inline-flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary",
+									children: [/* @__PURE__ */ b(_, { className: "size-4" }), "Refresh"]
 								})]
 							}),
-							P.length === 0 && !R ? /* @__PURE__ */ T(r, {
-								icon: /* @__PURE__ */ T(x, { className: "size-8" }),
+							P.length === 0 && !R ? /* @__PURE__ */ b(r, {
+								icon: /* @__PURE__ */ b(g, { className: "size-8" }),
 								title: "No payout accounts yet",
 								description: "Add a payout account before requesting a withdrawal."
-							}) : /* @__PURE__ */ E("div", {
+							}) : /* @__PURE__ */ x("div", {
 								className: "space-y-3",
 								children: [
-									/* @__PURE__ */ T("select", {
+									/* @__PURE__ */ b("select", {
 										value: K,
 										onChange: (e) => q(e.target.value),
-										className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground",
-										children: P.map((e) => /* @__PURE__ */ E("option", {
+										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary",
+										children: P.map((e) => /* @__PURE__ */ x("option", {
 											value: e.id,
 											children: [
 												e.label,
@@ -341,36 +372,36 @@ var D = () => {
 											]
 										}, e.id))
 									}),
-									/* @__PURE__ */ T("input", {
+									/* @__PURE__ */ b("input", {
 										value: W,
 										onChange: (e) => G(e.target.value),
 										placeholder: "Amount",
-										className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+										className: "w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									}),
-									/* @__PURE__ */ E("button", {
+									/* @__PURE__ */ x("button", {
 										type: "button",
-										onClick: () => void ne(),
-										className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
-										children: [/* @__PURE__ */ T(C, { className: "size-4" }), "Request payout"]
+										onClick: () => void fe(),
+										className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+										children: [/* @__PURE__ */ b(v, { className: "size-4" }), "Request payout"]
 									})
 								]
 							}),
-							P.length > 0 ? /* @__PURE__ */ E("div", {
-								className: "mt-4 space-y-3 rounded-md border border-border bg-background/60 p-3",
-								children: [/* @__PURE__ */ T("h3", {
-									className: "text-sm font-semibold text-foreground",
+							P.length > 0 ? /* @__PURE__ */ x("div", {
+								className: "mt-4 space-y-3 rounded-md border border-border-subtle bg-bg-surface/60 p-3",
+								children: [/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
 									children: "Saved payout accounts"
-								}), P.map((e) => /* @__PURE__ */ E("div", {
-									className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-border/70 bg-card px-3 py-2 text-sm",
-									children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ E("p", {
-										className: "font-medium text-foreground",
+								}), P.map((e) => /* @__PURE__ */ x("div", {
+									className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-border-subtle/70 bg-bg-surface px-3 py-2 text-sm",
+									children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("p", {
+										className: "font-medium text-text-primary",
 										children: [
 											e.label,
 											" ",
 											e.isDefault ? "• Default" : ""
 										]
-									}), /* @__PURE__ */ E("p", {
-										className: "text-muted-foreground",
+									}), /* @__PURE__ */ x("p", {
+										className: "text-text-secondary",
 										children: [
 											e.providerPreference,
 											" · ",
@@ -378,25 +409,25 @@ var D = () => {
 											" · ",
 											e.status
 										]
-									})] }), /* @__PURE__ */ E("div", {
+									})] }), /* @__PURE__ */ x("div", {
 										className: "flex flex-wrap gap-2",
 										children: [
-											/* @__PURE__ */ T("button", {
+											/* @__PURE__ */ b("button", {
 												type: "button",
-												onClick: () => te(e),
-												className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground",
+												onClick: () => de(e),
+												className: "rounded-md border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary",
 												children: "Edit"
 											}),
-											e.isDefault ? null : /* @__PURE__ */ T("button", {
+											e.isDefault ? null : /* @__PURE__ */ b("button", {
 												type: "button",
-												onClick: () => void $(e.id),
-												className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground",
+												onClick: () => void le(e.id),
+												className: "rounded-md border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary",
 												children: "Make default"
 											}),
-											/* @__PURE__ */ T("button", {
+											/* @__PURE__ */ b("button", {
 												type: "button",
-												onClick: () => void ee(e.id),
-												className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-destructive",
+												onClick: () => Z(e.id),
+												className: "rounded-md border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text",
 												children: "Archive"
 											})
 										]
@@ -404,77 +435,40 @@ var D = () => {
 								}, e.id))]
 							}) : null
 						]
-					}), /* @__PURE__ */ E("div", {
-						className: "rounded-lg border border-border bg-card p-4",
-						children: [/* @__PURE__ */ T("h2", {
-							className: "mb-4 text-lg font-semibold text-foreground",
+					}), /* @__PURE__ */ x("div", {
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
+						children: [/* @__PURE__ */ b("h2", {
+							className: "mb-4 text-lg font-semibold text-text-primary",
 							children: "Payout requests"
-						}), I.length === 0 && !R ? /* @__PURE__ */ T(r, {
-							icon: /* @__PURE__ */ T(C, { className: "size-8" }),
+						}), I.length === 0 && !R ? /* @__PURE__ */ b(r, {
+							icon: /* @__PURE__ */ b(v, { className: "size-8" }),
 							title: "No payout requests yet",
 							description: "Your payout requests and processing updates will appear here."
-						}) : /* @__PURE__ */ T("div", {
-							className: "overflow-x-auto",
-							children: /* @__PURE__ */ E("table", {
-								className: "min-w-full text-sm",
-								children: [/* @__PURE__ */ T("thead", { children: /* @__PURE__ */ E("tr", {
-									className: "border-b border-border text-left text-muted-foreground",
-									children: [
-										/* @__PURE__ */ T("th", {
-											className: "px-3 py-2",
-											children: "Amount"
-										}),
-										/* @__PURE__ */ T("th", {
-											className: "px-3 py-2",
-											children: "Provider"
-										}),
-										/* @__PURE__ */ T("th", {
-											className: "px-3 py-2",
-											children: "Status"
-										}),
-										/* @__PURE__ */ T("th", {
-											className: "px-3 py-2",
-											children: "Account"
-										}),
-										/* @__PURE__ */ T("th", {
-											className: "px-3 py-2",
-											children: "Created"
-										})
-									]
-								}) }), /* @__PURE__ */ T("tbody", { children: I.map((e) => /* @__PURE__ */ E("tr", {
-									className: "border-b border-border/70 text-foreground",
-									children: [
-										/* @__PURE__ */ T("td", {
-											className: "px-3 py-2 font-medium",
-											children: o(e.requestedAmount, e.currency)
-										}),
-										/* @__PURE__ */ T("td", {
-											className: "px-3 py-2",
-											children: e.provider
-										}),
-										/* @__PURE__ */ T("td", {
-											className: "px-3 py-2",
-											children: e.status
-										}),
-										/* @__PURE__ */ T("td", {
-											className: "px-3 py-2",
-											children: e.payoutAccount?.label || "-"
-										}),
-										/* @__PURE__ */ T("td", {
-											className: "px-3 py-2",
-											children: s(e.createdAt)
-										})
-									]
-								}, e.id)) })]
-							})
+						}) : /* @__PURE__ */ b(D, {
+							data: I,
+							rowKey: (e) => e.id,
+							columns: O
 						})]
 					})]
 				})]
+			}),
+			/* @__PURE__ */ b(S, {
+				open: X !== null,
+				onOpenChange: (e) => {
+					e || Z(null);
+				},
+				children: /* @__PURE__ */ x(T, { children: [/* @__PURE__ */ x(se, { children: [/* @__PURE__ */ b(E, { children: "Archive payout account?" }), /* @__PURE__ */ b(ae, { children: "Archive this payout account? You can add a new one at any time." })] }), /* @__PURE__ */ x(oe, { children: [/* @__PURE__ */ b(w, { children: "Cancel" }), /* @__PURE__ */ b(C, {
+					onClick: () => {
+						let e = X;
+						Z(null), e && ue(e);
+					},
+					children: "Archive"
+				})] })] })
 			})
 		]
 	});
 };
 //#endregion
-export { D as PayoutsPage };
+export { k as PayoutsPage };
 
 //# sourceMappingURL=PayoutsPage.js.map