@burdenoff/microfe-billing 2026.625.3 → 2026.625.5

package/dist/billing/modules/credits/pages/CreditWithdrawalPage.js

@@ -1,41 +1,41 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { statusTokens as t } from "../../../shared/utils/tokens.js";
 import { useBillingEventEmitter as n } from "../../../hooks/useBillingEventEmitter.js";
-import { formatDate as r, formatRelativeTime as ee } from "../../../shared/utils/format.js";
-import { directBillingGraphqlRequest as i } from "../../../shared/utils/directBillingGraphql.js";
+import { formatDate as r, formatRelativeTime as i } from "../../../shared/utils/format.js";
+import { directBillingGraphqlRequest as a } from "../../../shared/utils/directBillingGraphql.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as te } from "../../../hooks/useBillingPermissions.js";
-import { CreditWithdrawalHistoryDocument as a, GetCreditBalanceByTypeDocument as o, RequestCreditWithdrawalDocument as s, useGetCostOfCreditsCheckoutQuery as ne } from "../../../../generated/global-operations.js";
-import { useDefaultBillingAccount as re } from "../../subscriptions/hooks/useSubscriptions.js";
+import { useBillingPermissions as ee } from "../../../hooks/useBillingPermissions.js";
+import { CreditWithdrawalHistoryDocument as o, GetCreditBalanceByTypeDocument as s, RequestCreditWithdrawalDocument as c, useGetCostOfCreditsCheckoutQuery as te } from "../../../../generated/global-operations.js";
+import { useDefaultBillingAccount as ne } from "../../subscriptions/hooks/useSubscriptions.js";
 import "../../subscriptions/hooks/index.js";
-import { addPayoutAccount as ie, fetchPayoutAccounts as c } from "../../earnings/api.js";
+import { addPayoutAccount as re, fetchPayoutAccounts as ie } from "../../earnings/api.js";
 import { useEffect as l, useState as u } from "react";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { EmphasisPanel as m, IllustratedEmptyState as h, PagePurpose as ae } from "@burdenoff/fe-libs/ui";
 //#region src/billing/modules/credits/pages/CreditWithdrawalPage.tsx
-async function ae(e, t) {
-	return (await i({
+async function oe(e, t) {
+	return (await a({
 		...t,
-		query: o,
+		query: s,
 		variables: { billingAccountId: e }
 	})).getCreditBalanceByType;
 }
-async function oe(e, t) {
-	return (await i({
+async function se(e, t) {
+	return (await a({
 		...t,
-		query: s,
+		query: c,
 		variables: { input: e }
 	})).requestCreditWithdrawal;
 }
-async function se(e, t) {
-	return (await i({
+async function ce(e, t) {
+	return (await a({
 		...t,
-		query: a,
+		query: o,
 		variables: { billingAccountId: e }
 	})).myPayoutRequests.items;
 }
-var m = ({ label: e, value: t, description: n, highlight: r }) => /* @__PURE__ */ p("div", {
-	className: `border border-border-subtle rounded-lg p-5 ${r ? "bg-gradient-to-br from-[var(--color-accent-soft)] to-[var(--color-accent-soft)]" : "bg-bg-surface"}`,
-	children: [
+var g = ({ label: e, value: t, description: n, highlight: r }) => {
+	let i = /* @__PURE__ */ p(d, { children: [
 		/* @__PURE__ */ f("p", {
 			className: "text-sm text-text-secondary",
 			children: e
@@ -55,9 +55,16 @@ var m = ({ label: e, value: t, description: n, highlight: r }) => /* @__PURE__ *
 			className: "text-xs text-text-secondary mt-1",
 			children: n
 		})
-	]
-});
-function ce(e) {
+	] });
+	return r ? /* @__PURE__ */ f(m, {
+		className: "p-5",
+		children: i
+	}) : /* @__PURE__ */ f("div", {
+		className: "border border-border-subtle rounded-lg p-5 bg-bg-surface",
+		children: i
+	});
+};
+function le(e) {
 	switch (e.toUpperCase()) {
 		case "PAID": return t.success.text;
 		case "APPROVED":
@@ -69,7 +76,7 @@ function ce(e) {
 		default: return "text-text-secondary";
 	}
 }
-function le(e) {
+function ue(e) {
 	switch (e.toUpperCase()) {
 		case "PAID": return `${t.success.bg} ${t.success.text}`;
 		case "APPROVED":
@@ -81,8 +88,8 @@ function le(e) {
 		default: return "bg-bg-sunken text-text-secondary";
 	}
 }
-var h = () => {
-	let i = te(), { billingAccount: a, isLoading: o } = re(), { apiGatewayUrl: s, authToken: h, orgId: ue } = e(), { emit: g } = n(), [_, de] = u(null), [fe, v] = u(!1), [y, b] = u(null), [pe, me] = u([]), [he, x] = u(!1), [S, ge] = u([]), [_e, C] = u(!1), [w, T] = u(""), [E, D] = u(""), [O, k] = u(""), [A, j] = u(!1), [M, N] = u(null), [ve, P] = u(!1), [F, I] = u(!1), [L, R] = u({
+var de = () => {
+	let a = ee(), { billingAccount: o, isLoading: s } = ne(), { apiGatewayUrl: c, authToken: m, orgId: de } = e(), { emit: _ } = n(), [v, fe] = u(null), [pe, y] = u(!1), [b, x] = u(null), [me, he] = u([]), [ge, S] = u(!1), [C, _e] = u([]), [ve, w] = u(!1), [T, E] = u(""), [D, O] = u(""), [k, A] = u(""), [j, M] = u(!1), [N, P] = u(null), [ye, F] = u(!1), [I, L] = u(!1), [R, z] = u({
 		label: "",
 		type: "BANK_ACCOUNT",
 		accountHolderName: "",
@@ -92,73 +99,73 @@ var h = () => {
 		upiId: "",
 		country: "",
 		currency: "USD"
-	}), [z, B] = u(!1), [V, H] = u(null), U = a?.id, W = () => ({
-		apiGatewayUrl: s,
-		authToken: h,
-		orgId: ue
-	}), G = async () => {
-		if (U) {
-			v(!0), b(null);
+	}), [B, V] = u(!1), [H, U] = u(null), W = o?.id, G = () => ({
+		apiGatewayUrl: c,
+		authToken: m,
+		orgId: de
+	}), K = async () => {
+		if (W) {
+			y(!0), x(null);
 			try {
-				de(await ae(U, W()));
+				fe(await oe(W, G()));
 			} catch (e) {
-				b(e instanceof Error ? e.message : "Failed to load balance");
+				x(e instanceof Error ? e.message : "Failed to load balance");
 			} finally {
-				v(!1);
+				y(!1);
 			}
 		}
-	}, K = async () => {
-		if (U) {
-			x(!0);
+	}, q = async () => {
+		if (W) {
+			S(!0);
 			try {
-				let e = await c(U, W());
-				me(e);
+				let e = await ie(W, G());
+				he(e);
 				let t = e.find((e) => e.isDefault) ?? e[0];
-				t && T(t.id);
+				t && E(t.id);
 			} catch {} finally {
-				x(!1);
+				S(!1);
 			}
 		}
-	}, q = async () => {
-		if (U) {
-			C(!0);
+	}, J = async () => {
+		if (W) {
+			w(!0);
 			try {
-				ge(await se(U, W()));
+				_e(await ce(W, G()));
 			} catch {} finally {
-				C(!1);
+				w(!1);
 			}
 		}
 	};
 	l(() => {
-		U && (G(), K(), q());
-	}, [U]), l(() => {
-		a?.currency && R((e) => ({
+		W && (K(), q(), J());
+	}, [W]), l(() => {
+		o?.currency && z((e) => ({
 			...e,
-			currency: a.currency ?? "USD"
+			currency: o.currency ?? "USD"
 		}));
-	}, [a?.currency]);
-	let ye = async () => {
-		if (U) {
-			H(null), B(!0);
+	}, [o?.currency]);
+	let be = async () => {
+		if (W) {
+			U(null), V(!0);
 			try {
-				let e = L.country.trim().toUpperCase() === "IN" || L.country.trim().toLowerCase() === "india";
-				await ie({
-					billingAccountId: U,
-					label: L.label,
-					type: L.type,
-					accountHolderName: L.accountHolderName,
-					country: L.country || void 0,
-					currency: L.currency,
-					...L.type === "BANK_ACCOUNT" && {
-						accountNumber: L.accountNumber,
-						...e ? { ifsc: L.ifscCode } : { routingNumber: L.routingNumber }
+				let e = R.country.trim().toUpperCase() === "IN" || R.country.trim().toLowerCase() === "india";
+				await re({
+					billingAccountId: W,
+					label: R.label,
+					type: R.type,
+					accountHolderName: R.accountHolderName,
+					country: R.country || void 0,
+					currency: R.currency,
+					...R.type === "BANK_ACCOUNT" && {
+						accountNumber: R.accountNumber,
+						...e ? { ifsc: R.ifscCode } : { routingNumber: R.routingNumber }
 					},
-					...L.type === "UPI" && { upiId: L.upiId }
-				}, W()), g("billing.payout_account.added", {
+					...R.type === "UPI" && { upiId: R.upiId }
+				}, G()), _("billing.payout_account.added", {
 					route: "/billing/credits/withdraw",
-					entityId: U,
+					entityId: W,
 					source: "credit-withdrawal"
-				}), await K(), I(!1), R({
+				}), await q(), L(!1), z({
 					label: "",
 					type: "BANK_ACCOUNT",
 					accountHolderName: "",
@@ -170,42 +177,42 @@ var h = () => {
 					currency: "USD"
 				});
 			} catch (e) {
-				H(e instanceof Error ? e.message : "Failed to add account");
+				U(e instanceof Error ? e.message : "Failed to add account");
 			} finally {
-				B(!1);
+				V(!1);
 			}
 		}
-	}, be = async () => {
-		if (!U || !w) return;
-		let e = parseFloat(E);
+	}, xe = async () => {
+		if (!W || !T) return;
+		let e = parseFloat(D);
 		if (!(!e || e <= 0)) {
-			N(null), j(!0);
+			P(null), M(!0);
 			try {
-				g("billing.credits.withdrawal_requested", {
+				_("billing.credits.withdrawal_requested", {
 					route: "/billing/credits/withdraw",
-					entityId: (await oe({
-						billingAccountId: U,
+					entityId: (await se({
+						billingAccountId: W,
 						creditAmount: e,
-						payoutAccountId: w,
-						notes: O || void 0
-					}, W())).id,
+						payoutAccountId: T,
+						notes: k || void 0
+					}, G())).id,
 					source: "credit-withdrawal",
 					amount: e
-				}), P(!0), D(""), k(""), await G(), await q();
+				}), F(!0), O(""), A(""), await K(), await J();
 			} catch (e) {
-				N(e instanceof Error ? e.message : "Withdrawal request failed");
+				P(e instanceof Error ? e.message : "Withdrawal request failed");
 			} finally {
-				j(!1);
+				M(!1);
 			}
 		}
-	}, J = a?.currency ?? "USD", Y = parseFloat(E) || 0, { data: xe, loading: X } = ne({
+	}, Y = o?.currency ?? "USD", X = parseFloat(D) || 0, { data: Se, loading: Ce } = te({
 		variables: {
-			creditAmount: Y,
-			currency: J
+			creditAmount: X,
+			currency: Y
 		},
-		skip: Y <= 0 || !a
-	}), Z = xe?.getCostOfCredits?.amount;
-	if (!i.canWithdrawCredits) return /* @__PURE__ */ f("div", {
+		skip: X <= 0 || !o
+	}), Z = Se?.getCostOfCredits?.amount;
+	if (!a.canWithdrawCredits) return /* @__PURE__ */ f("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ p("div", {
 			className: "text-center space-y-2",
@@ -236,7 +243,7 @@ var h = () => {
 			]
 		})
 	});
-	if (!o && !a) return /* @__PURE__ */ f("div", {
+	if (!s && !o) return /* @__PURE__ */ f("div", {
 		className: "flex items-center justify-center h-full min-h-[400px]",
 		children: /* @__PURE__ */ p("div", {
 			className: "text-center space-y-2",
@@ -249,7 +256,7 @@ var h = () => {
 			})]
 		})
 	});
-	if (o && !a) return /* @__PURE__ */ p("div", {
+	if (s && !o) return /* @__PURE__ */ p("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [/* @__PURE__ */ f("div", { className: "h-8 w-64 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ f("div", {
 			className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
@@ -264,20 +271,27 @@ var h = () => {
 			}, e))
 		})]
 	});
-	let Q = _?.withdrawable ?? 0, Se = Y > 0 && Y <= Q, $ = pe.filter((e) => e.status !== "ARCHIVED");
+	let Q = v?.withdrawable ?? 0, we = X > 0 && X <= Q, $ = me.filter((e) => e.status !== "ARCHIVED");
 	return /* @__PURE__ */ p("div", {
 		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
-				className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
-				children: "Withdraw Credits"
-			}), /* @__PURE__ */ f("p", {
-				className: "text-sm text-text-secondary mt-1",
-				children: "Convert your withdrawable credits (purchased & earned) to a payout"
-			})] }),
+			/* @__PURE__ */ p("div", { children: [
+				/* @__PURE__ */ f("h1", {
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
+					children: "Withdraw Credits"
+				}),
+				/* @__PURE__ */ f("p", {
+					className: "text-sm text-text-secondary mt-1",
+					children: "Convert your withdrawable credits (purchased & earned) to a payout"
+				}),
+				/* @__PURE__ */ f(ae, {
+					className: "mt-3",
+					children: "Turn the credits you bought or earned (from sales and referrals) back into real money. Add a bank account or UPI as a payout destination, request a withdrawal for any amount up to your withdrawable balance, and track each request here until it is paid. Granted credits (coupons, admin grants) are not withdrawable."
+				})
+			] }),
 			/* @__PURE__ */ f("div", {
 				className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
-				children: fe ? [
+				children: pe ? [
 					1,
 					2,
 					3,
@@ -285,26 +299,26 @@ var h = () => {
 				].map((e) => /* @__PURE__ */ p("div", {
 					className: "border border-border-subtle rounded-lg p-5",
 					children: [/* @__PURE__ */ f("div", { className: "h-4 w-20 bg-bg-sunken animate-pulse rounded mb-2" }), /* @__PURE__ */ f("div", { className: "h-8 w-28 bg-bg-sunken animate-pulse rounded" })]
-				}, e)) : y ? /* @__PURE__ */ f("div", {
+				}, e)) : b ? /* @__PURE__ */ f("div", {
 					className: "col-span-4 text-sm text-status-error-text",
-					children: y
+					children: b
 				}) : /* @__PURE__ */ p(d, { children: [
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ f(g, {
 						label: "Purchased",
-						value: _?.purchased ?? 0,
+						value: v?.purchased ?? 0,
 						description: "From credit purchases"
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ f(g, {
 						label: "Earned",
-						value: _?.earned ?? 0,
+						value: v?.earned ?? 0,
 						description: "From sales & referrals"
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ f(g, {
 						label: "Granted",
-						value: _?.granted ?? 0,
+						value: v?.granted ?? 0,
 						description: "Coupons & admin grants — non-withdrawable"
 					}),
-					/* @__PURE__ */ f(m, {
+					/* @__PURE__ */ f(g, {
 						label: "Withdrawable",
 						value: Q,
 						description: "Purchased + earned",
@@ -312,7 +326,7 @@ var h = () => {
 					})
 				] })
 			}),
-			ve && /* @__PURE__ */ p("div", {
+			ye && /* @__PURE__ */ p("div", {
 				className: "flex items-center gap-3 p-4 rounded-lg bg-status-success-bg-subtle border border-status-success-border text-status-success-text",
 				children: [
 					/* @__PURE__ */ f("svg", {
@@ -336,7 +350,7 @@ var h = () => {
 					})] }),
 					/* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => P(!1),
+						onClick: () => F(!1),
 						className: "ml-auto text-current opacity-60 hover:opacity-100",
 						children: /* @__PURE__ */ f("svg", {
 							className: "size-4",
@@ -365,12 +379,12 @@ var h = () => {
 								children: "Payout Account"
 							}), /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => I((e) => !e),
+								onClick: () => L((e) => !e),
 								className: "text-sm text-text-link hover:underline",
-								children: F ? "Cancel" : "+ Add new"
+								children: I ? "Cancel" : "+ Add new"
 							})]
 						}),
-						F && /* @__PURE__ */ p("div", {
+						I && /* @__PURE__ */ p("div", {
 							className: "border border-border-subtle rounded-lg p-4 space-y-3 bg-bg-sunken",
 							children: [
 								/* @__PURE__ */ f("h3", {
@@ -382,8 +396,8 @@ var h = () => {
 									children: "Label"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.label,
-									onChange: (e) => R((t) => ({
+									value: R.label,
+									onChange: (e) => z((t) => ({
 										...t,
 										label: e.target.value
 									})),
@@ -395,8 +409,8 @@ var h = () => {
 									children: "Account Holder Name"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.accountHolderName,
-									onChange: (e) => R((t) => ({
+									value: R.accountHolderName,
+									onChange: (e) => z((t) => ({
 										...t,
 										accountHolderName: e.target.value
 									})),
@@ -409,8 +423,8 @@ var h = () => {
 										className: "block text-xs text-text-secondary mb-1",
 										children: "Type"
 									}), /* @__PURE__ */ p("select", {
-										value: L.type,
-										onChange: (e) => R((t) => ({
+										value: R.type,
+										onChange: (e) => z((t) => ({
 											...t,
 											type: e.target.value
 										})),
@@ -427,8 +441,8 @@ var h = () => {
 										children: "Country"
 									}), /* @__PURE__ */ f("input", {
 										type: "text",
-										value: L.country,
-										onChange: (e) => R((t) => ({
+										value: R.country,
+										onChange: (e) => z((t) => ({
 											...t,
 											country: e.target.value
 										})),
@@ -436,25 +450,25 @@ var h = () => {
 										className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 									})] })]
 								}),
-								L.type === "BANK_ACCOUNT" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								R.type === "BANK_ACCOUNT" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 									className: "block text-xs text-text-secondary mb-1",
 									children: "Account Number"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.accountNumber,
-									onChange: (e) => R((t) => ({
+									value: R.accountNumber,
+									onChange: (e) => z((t) => ({
 										...t,
 										accountNumber: e.target.value
 									})),
 									placeholder: "Account number",
 									className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-								})] }), L.country.trim().toUpperCase() === "IN" || L.country.trim().toLowerCase() === "india" ? /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								})] }), R.country.trim().toUpperCase() === "IN" || R.country.trim().toLowerCase() === "india" ? /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 									className: "block text-xs text-text-secondary mb-1",
 									children: "IFSC Code"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.ifscCode,
-									onChange: (e) => R((t) => ({
+									value: R.ifscCode,
+									onChange: (e) => z((t) => ({
 										...t,
 										ifscCode: e.target.value.toUpperCase()
 									})),
@@ -465,75 +479,59 @@ var h = () => {
 									children: "Routing Number"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.routingNumber,
-									onChange: (e) => R((t) => ({
+									value: R.routingNumber,
+									onChange: (e) => z((t) => ({
 										...t,
 										routingNumber: e.target.value
 									})),
 									placeholder: "Routing / sort code",
 									className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] })] }),
-								L.type === "UPI" && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+								R.type === "UPI" && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
 									className: "block text-xs text-text-secondary mb-1",
 									children: "UPI ID"
 								}), /* @__PURE__ */ f("input", {
 									type: "text",
-									value: L.upiId,
-									onChange: (e) => R((t) => ({
+									value: R.upiId,
+									onChange: (e) => z((t) => ({
 										...t,
 										upiId: e.target.value
 									})),
 									placeholder: "yourname@upi",
 									className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								})] }),
-								V && /* @__PURE__ */ f("p", {
+								H && /* @__PURE__ */ f("p", {
 									className: "text-xs text-status-error-text",
-									children: V
+									children: H
 								}),
 								/* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => void ye(),
-									disabled: z || !L.label || !L.accountHolderName,
+									onClick: () => void be(),
+									disabled: B || !R.label || !R.accountHolderName,
 									className: "w-full py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									children: z ? "Saving…" : "Save Account"
+									children: B ? "Saving…" : "Save Account"
 								})
 							]
 						}),
-						he ? /* @__PURE__ */ f("div", {
+						ge ? /* @__PURE__ */ f("div", {
 							className: "space-y-2",
 							children: [1, 2].map((e) => /* @__PURE__ */ f("div", { className: "h-16 border border-border-subtle rounded-lg bg-bg-sunken animate-pulse" }, e))
-						}) : $.length === 0 && !F ? /* @__PURE__ */ p("div", {
-							className: "flex flex-col items-center justify-center py-8 border border-dashed border-border-subtle rounded-lg",
-							children: [
-								/* @__PURE__ */ f("svg", {
-									className: "size-8 text-text-secondary mb-2",
-									fill: "none",
-									viewBox: "0 0 24 24",
-									stroke: "currentColor",
-									children: /* @__PURE__ */ f("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 1.5,
-										d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-									})
-								}),
-								/* @__PURE__ */ f("p", {
-									className: "text-sm text-text-secondary",
-									children: "No payout accounts yet"
-								}),
-								/* @__PURE__ */ f("button", {
-									type: "button",
-									onClick: () => I(!0),
-									className: "mt-2 text-sm text-text-link hover:underline",
-									children: "Add a bank account or UPI"
-								})
-							]
+						}) : $.length === 0 && !I ? /* @__PURE__ */ f(h, {
+							illustration: "empty-generic",
+							title: "No payout accounts yet",
+							description: "Add a bank account or UPI to receive your withdrawn credits.",
+							action: /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => L(!0),
+								className: "px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors",
+								children: "Add a bank account or UPI"
+							})
 						}) : /* @__PURE__ */ f("div", {
 							className: "space-y-2",
 							children: $.map((e) => /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => T(e.id),
-								className: `w-full text-left p-4 border rounded-lg transition-colors ${w === e.id ? "border-border-strong bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface hover:border-border-strong"}`,
+								onClick: () => E(e.id),
+								className: `w-full text-left p-4 border rounded-lg transition-colors ${T === e.id ? "border-border-strong bg-[var(--color-accent-soft)]" : "border-border-subtle bg-bg-surface hover:border-border-strong"}`,
 								children: /* @__PURE__ */ p("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
@@ -558,7 +556,7 @@ var h = () => {
 												className: `text-xs px-2 py-0.5 rounded font-medium ${e.status === "ACTIVE" ? `${t.success.bg} ${t.success.text}` : e.status === "PENDING_VERIFICATION" ? `${t.warning.bg} ${t.warning.text}` : `${t.error.bg} ${t.error.text}`}`,
 												children: e.status.replaceAll("_", " ").toLowerCase()
 											}),
-											w === e.id && /* @__PURE__ */ f("svg", {
+											T === e.id && /* @__PURE__ */ f("svg", {
 												className: "size-4 text-text-link shrink-0",
 												fill: "none",
 												viewBox: "0 0 24 24",
@@ -594,8 +592,8 @@ var h = () => {
 									min: 1,
 									max: Q,
 									step: 1,
-									value: E,
-									onChange: (e) => D(e.target.value),
+									value: D,
+									onChange: (e) => O(e.target.value),
 									placeholder: "Enter credit amount",
 									className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 								}),
@@ -610,16 +608,16 @@ var h = () => {
 										})
 									]
 								}),
-								Y > 0 && Y <= Q && /* @__PURE__ */ f("p", {
+								X > 0 && X <= Q && /* @__PURE__ */ f("p", {
 									className: "text-xs text-text-secondary mt-1",
-									children: X ? "Calculating…" : Z == null ? null : /* @__PURE__ */ p(d, { children: [
+									children: Ce ? "Calculating…" : Z == null ? null : /* @__PURE__ */ p(d, { children: [
 										"Estimated payout:",
 										" ",
 										/* @__PURE__ */ f("span", {
 											className: "font-semibold text-text-primary",
 											children: Z.toLocaleString(void 0, {
 												style: "currency",
-												currency: J,
+												currency: Y,
 												minimumFractionDigits: 2,
 												maximumFractionDigits: 2
 											})
@@ -628,7 +626,7 @@ var h = () => {
 										"at the current credit rate"
 									] })
 								}),
-								Y > 0 && Y > Q && /* @__PURE__ */ f("p", {
+								X > 0 && X > Q && /* @__PURE__ */ f("p", {
 									className: "text-xs text-status-error-text mt-1",
 									children: "Amount exceeds your withdrawable balance"
 								})
@@ -640,17 +638,17 @@ var h = () => {
 									children: "(optional)"
 								})]
 							}), /* @__PURE__ */ f("textarea", {
-								value: O,
-								onChange: (e) => k(e.target.value),
+								value: k,
+								onChange: (e) => A(e.target.value),
 								placeholder: "Any notes for this withdrawal request",
 								rows: 2,
 								className: "w-full px-3 py-2 text-sm border border-border-subtle rounded-button bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
 							})] }),
-							M && /* @__PURE__ */ f("div", {
+							N && /* @__PURE__ */ f("div", {
 								className: "p-3 rounded-button bg-status-error-bg-subtle border border-status-error-border",
 								children: /* @__PURE__ */ f("p", {
 									className: "text-sm text-status-error-text",
-									children: M
+									children: N
 								})
 							}),
 							/* @__PURE__ */ p("div", {
@@ -659,15 +657,15 @@ var h = () => {
 									className: "text-xs text-text-secondary mb-3",
 									children: [
 										"Credits will be converted to ",
-										J,
+										Y,
 										" at the current credit rate. Withdrawals are reviewed before processing and may take 3–5 business days."
 									]
 								}), /* @__PURE__ */ f("button", {
 									type: "button",
-									onClick: () => void be(),
-									disabled: A || !Se || !w || $.length === 0,
+									onClick: () => void xe(),
+									disabled: j || !we || !T || $.length === 0,
 									className: "w-full py-2.5 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									children: A ? "Submitting…" : "Request Withdrawal"
+									children: j ? "Submitting…" : "Request Withdrawal"
 								})]
 							})
 						]
@@ -683,7 +681,7 @@ var h = () => {
 						children: "Withdrawal History"
 					}), /* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => void q(),
+						onClick: () => void J(),
 						className: "text-sm text-text-secondary hover:text-text-primary transition-colors",
 						"aria-label": "Refresh withdrawal history",
 						children: /* @__PURE__ */ f("svg", {
@@ -699,30 +697,17 @@ var h = () => {
 							})
 						})
 					})]
-				}), _e ? /* @__PURE__ */ f("div", {
+				}), ve ? /* @__PURE__ */ f("div", {
 					className: "space-y-2",
 					children: [
 						1,
 						2,
 						3
 					].map((e) => /* @__PURE__ */ f("div", { className: "h-16 border border-border-subtle rounded-lg bg-bg-sunken animate-pulse" }, e))
-				}) : S.length === 0 ? /* @__PURE__ */ p("div", {
-					className: "flex flex-col items-center justify-center py-10 border border-dashed border-border-subtle rounded-lg",
-					children: [/* @__PURE__ */ f("svg", {
-						className: "size-8 text-text-secondary mb-2",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor",
-						children: /* @__PURE__ */ f("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 1.5,
-							d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-						})
-					}), /* @__PURE__ */ f("p", {
-						className: "text-sm text-text-secondary",
-						children: "No withdrawal requests yet"
-					})]
+				}) : C.length === 0 ? /* @__PURE__ */ f(h, {
+					illustration: "empty-data",
+					title: "No withdrawal requests yet",
+					description: "Once you request a withdrawal, its status will appear here."
 				}) : /* @__PURE__ */ f("div", {
 					className: "border border-border-subtle rounded-lg overflow-hidden",
 					children: /* @__PURE__ */ p("table", {
@@ -753,7 +738,7 @@ var h = () => {
 							] })
 						}), /* @__PURE__ */ f("tbody", {
 							className: "divide-y divide-border-subtle",
-							children: S.map((e) => /* @__PURE__ */ p("tr", {
+							children: C.map((e) => /* @__PURE__ */ p("tr", {
 								className: "hover:bg-bg-sunken transition-colors",
 								children: [
 									/* @__PURE__ */ p("td", {
@@ -767,7 +752,7 @@ var h = () => {
 									/* @__PURE__ */ p("td", {
 										className: "px-4 py-3",
 										children: [/* @__PURE__ */ f("span", {
-											className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${le(e.status)}`,
+											className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${ue(e.status)}`,
 											children: e.status.charAt(0) + e.status.slice(1).toLowerCase()
 										}), e.failureReason && /* @__PURE__ */ f("p", {
 											className: "text-xs text-status-error-text mt-0.5 max-w-[180px] truncate",
@@ -783,13 +768,13 @@ var h = () => {
 										className: "px-4 py-3 text-text-secondary hidden md:table-cell",
 										children: /* @__PURE__ */ f("span", {
 											title: r(e.createdAt, "long"),
-											children: ee(e.createdAt)
+											children: i(e.createdAt)
 										})
 									}),
 									/* @__PURE__ */ f("td", {
 										className: "px-4 py-3 text-text-secondary hidden md:table-cell",
 										children: e.paidAt ? /* @__PURE__ */ f("span", {
-											className: ce("PAID"),
+											className: le("PAID"),
 											children: r(e.paidAt, "short")
 										}) : "—"
 									})
@@ -803,6 +788,6 @@ var h = () => {
 	});
 };
 //#endregion
-export { h as CreditWithdrawalPage };
+export { de as CreditWithdrawalPage };
 
 //# sourceMappingURL=CreditWithdrawalPage.js.map