@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +1,770 @@
+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 "../../../shared/utils/index.js";
+import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
+import { CreditWithdrawalHistoryDocument as o, GetCreditBalanceByTypeDocument as s, RequestCreditWithdrawalDocument as c } from "../../../../generated/global-operations.js";
+import { useDefaultBillingAccount as te } from "../../subscriptions/hooks/useSubscriptions.js";
+import "../../subscriptions/hooks/index.js";
+import { addPayoutAccount as l, fetchPayoutAccounts as ne } from "../../earnings/api.js";
+import { useEffect as re, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/billing/modules/credits/pages/CreditWithdrawalPage.tsx
+async function ie(e, t) {
+	return (await i({
+		...t,
+		query: s,
+		variables: { billingAccountId: e }
+	})).getCreditBalanceByType;
+}
+async function ae(e, t) {
+	return (await i({
+		...t,
+		query: c,
+		variables: { input: e }
+	})).requestCreditWithdrawal;
+}
+async function oe(e, t) {
+	return (await i({
+		...t,
+		query: o,
+		variables: { billingAccountId: e }
+	})).myPayoutRequests.items;
+}
+var m = ({ label: e, value: t, description: n, highlight: r }) => /* @__PURE__ */ p("div", {
+	className: `border border-border rounded-lg p-5 ${r ? "bg-gradient-to-br from-primary/5 to-primary/10" : "bg-card"}`,
+	children: [
+		/* @__PURE__ */ f("p", {
+			className: "text-sm text-muted-foreground",
+			children: e
+		}),
+		/* @__PURE__ */ p("p", {
+			className: `text-2xl font-bold mt-1 ${r ? "text-primary" : "text-foreground"}`,
+			children: [
+				t.toLocaleString(),
+				" ",
+				/* @__PURE__ */ f("span", {
+					className: "text-base font-normal",
+					children: "credits"
+				})
+			]
+		}),
+		n && /* @__PURE__ */ f("p", {
+			className: "text-xs text-muted-foreground mt-1",
+			children: n
+		})
+	]
+});
+function se(e) {
+	switch (e.toUpperCase()) {
+		case "PAID": return t.success.text;
+		case "APPROVED":
+		case "PROCESSING": return t.info.text;
+		case "REQUESTED": return t.warning.text;
+		case "REJECTED":
+		case "FAILED":
+		case "CANCELED": return t.error.text;
+		default: return "text-muted-foreground";
+	}
+}
+function ce(e) {
+	switch (e.toUpperCase()) {
+		case "PAID": return `${t.success.bg} ${t.success.text}`;
+		case "APPROVED":
+		case "PROCESSING": return `${t.info.bg} ${t.info.text}`;
+		case "REQUESTED": return `${t.warning.bg} ${t.warning.text}`;
+		case "REJECTED":
+		case "FAILED":
+		case "CANCELED": return `${t.error.bg} ${t.error.text}`;
+		default: return "bg-muted text-muted-foreground";
+	}
+}
+var h = () => {
+	let i = a(), { billingAccount: o, isLoading: s } = te(), { apiGatewayUrl: c, authToken: h, orgId: g } = e(), { emit: _ } = n(), [v, le] = u(null), [ue, y] = u(!1), [b, x] = u(null), [de, fe] = u([]), [pe, S] = u(!1), [C, me] = u([]), [w, T] = u(!1), [E, D] = u(""), [O, k] = u(""), [A, j] = u(""), [M, N] = u(!1), [P, F] = u(null), [I, L] = u(!1), [R, z] = u(!1), [B, V] = u({
+		label: "",
+		type: "BANK_ACCOUNT",
+		accountNumber: "",
+		ifscCode: "",
+		routingNumber: "",
+		upiId: "",
+		country: "IN",
+		currency: "USD"
+	}), [H, U] = u(!1), [W, G] = u(null), K = o?.id, q = () => ({
+		apiGatewayUrl: c,
+		authToken: h,
+		orgId: g
+	}), J = async () => {
+		if (K) {
+			y(!0), x(null);
+			try {
+				le(await ie(K, q()));
+			} catch (e) {
+				x(e instanceof Error ? e.message : "Failed to load balance");
+			} finally {
+				y(!1);
+			}
+		}
+	}, Y = async () => {
+		if (K) {
+			S(!0);
+			try {
+				let e = await ne(K, q());
+				fe(e);
+				let t = e.find((e) => e.isDefault) ?? e[0];
+				t && D(t.id);
+			} catch {} finally {
+				S(!1);
+			}
+		}
+	}, X = async () => {
+		if (K) {
+			T(!0);
+			try {
+				me(await oe(K, q()));
+			} catch {} finally {
+				T(!1);
+			}
+		}
+	};
+	re(() => {
+		K && (J(), Y(), X());
+	}, [K]);
+	let he = async () => {
+		if (K) {
+			G(null), U(!0);
+			try {
+				let e = {};
+				B.type === "BANK_ACCOUNT" ? B.country === "IN" ? (e.accountNumber = B.accountNumber, e.ifscCode = B.ifscCode) : (e.accountNumber = B.accountNumber, e.routingNumber = B.routingNumber) : B.type === "UPI" && (e.upiId = B.upiId), await l({
+					billingAccountId: K,
+					label: B.label,
+					type: B.type,
+					country: B.country,
+					currency: B.currency,
+					accountDetails: e
+				}, q()), _("billing.payout_account.added", {
+					route: "/billing/credits/withdraw",
+					entityId: K,
+					source: "credit-withdrawal"
+				}), await Y(), z(!1), V({
+					label: "",
+					type: "BANK_ACCOUNT",
+					accountNumber: "",
+					ifscCode: "",
+					routingNumber: "",
+					upiId: "",
+					country: "IN",
+					currency: "USD"
+				});
+			} catch (e) {
+				G(e instanceof Error ? e.message : "Failed to add account");
+			} finally {
+				U(!1);
+			}
+		}
+	}, ge = async () => {
+		if (!K || !E) return;
+		let e = parseFloat(O);
+		if (!(!e || e <= 0)) {
+			F(null), N(!0);
+			try {
+				_("billing.credits.withdrawal_requested", {
+					route: "/billing/credits/withdraw",
+					entityId: (await ae({
+						billingAccountId: K,
+						creditAmount: e,
+						payoutAccountId: E,
+						notes: A || void 0
+					}, q())).id,
+					source: "credit-withdrawal",
+					amount: e
+				}), L(!0), k(""), j(""), await J(), await X();
+			} catch (e) {
+				F(e instanceof Error ? e.message : "Withdrawal request failed");
+			} finally {
+				N(!1);
+			}
+		}
+	};
+	if (!i.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",
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ f("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ f("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						})
+					})
+				}),
+				/* @__PURE__ */ f("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Access Denied"
+				}),
+				/* @__PURE__ */ f("p", {
+					className: "text-sm text-muted-foreground",
+					children: "You don't have permission to withdraw credits."
+				})
+			]
+		})
+	});
+	if (s && !o) return /* @__PURE__ */ p("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ f("div", { className: "h-8 w-64 bg-muted animate-pulse rounded" }), /* @__PURE__ */ f("div", {
+			className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
+			children: [
+				1,
+				2,
+				3,
+				4
+			].map((e) => /* @__PURE__ */ p("div", {
+				className: "border border-border rounded-lg p-5",
+				children: [/* @__PURE__ */ f("div", { className: "h-4 w-24 bg-muted animate-pulse rounded mb-2" }), /* @__PURE__ */ f("div", { className: "h-8 w-32 bg-muted animate-pulse rounded" })]
+			}, e))
+		})]
+	});
+	let Z = v?.withdrawable ?? 0, Q = parseFloat(O) || 0, _e = Q > 0 && Q <= Z, $ = de.filter((e) => e.status !== "ARCHIVED");
+	return /* @__PURE__ */ p("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
+				className: "text-2xl font-bold text-foreground",
+				children: "Withdraw Credits"
+			}), /* @__PURE__ */ f("p", {
+				className: "text-sm text-muted-foreground mt-1",
+				children: "Convert your withdrawable credits (purchased & earned) to a payout"
+			})] }),
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
+				children: ue ? [
+					1,
+					2,
+					3,
+					4
+				].map((e) => /* @__PURE__ */ p("div", {
+					className: "border border-border rounded-lg p-5",
+					children: [/* @__PURE__ */ f("div", { className: "h-4 w-20 bg-muted animate-pulse rounded mb-2" }), /* @__PURE__ */ f("div", { className: "h-8 w-28 bg-muted animate-pulse rounded" })]
+				}, e)) : b ? /* @__PURE__ */ f("div", {
+					className: "col-span-4 text-sm text-destructive",
+					children: b
+				}) : /* @__PURE__ */ p(d, { children: [
+					/* @__PURE__ */ f(m, {
+						label: "Purchased",
+						value: v?.purchased ?? 0,
+						description: "From credit purchases"
+					}),
+					/* @__PURE__ */ f(m, {
+						label: "Earned",
+						value: v?.earned ?? 0,
+						description: "From sales & referrals"
+					}),
+					/* @__PURE__ */ f(m, {
+						label: "Granted",
+						value: v?.granted ?? 0,
+						description: "Coupons & admin grants — non-withdrawable"
+					}),
+					/* @__PURE__ */ f(m, {
+						label: "Withdrawable",
+						value: Z,
+						description: "Purchased + earned",
+						highlight: !0
+					})
+				] })
+			}),
+			I && /* @__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", {
+						className: "w-5 h-5 shrink-0",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ f("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M5 13l4 4L19 7"
+						})
+					}),
+					/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+						className: "font-medium",
+						children: "Withdrawal request submitted"
+					}), /* @__PURE__ */ f("p", {
+						className: "text-sm opacity-80",
+						children: "Our team will review and process your request."
+					})] }),
+					/* @__PURE__ */ f("button", {
+						onClick: () => L(!1),
+						className: "ml-auto text-current opacity-60 hover:opacity-100",
+						children: /* @__PURE__ */ f("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M6 18L18 6M6 6l12 12"
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
+				children: [/* @__PURE__ */ p("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ p("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ f("h2", {
+								className: "text-base font-semibold text-foreground",
+								children: "Payout Account"
+							}), /* @__PURE__ */ f("button", {
+								onClick: () => z((e) => !e),
+								className: "text-sm text-primary hover:underline",
+								children: R ? "Cancel" : "+ Add new"
+							})]
+						}),
+						R && /* @__PURE__ */ p("div", {
+							className: "border border-border rounded-lg p-4 space-y-3 bg-muted/30",
+							children: [
+								/* @__PURE__ */ f("h3", {
+									className: "text-sm font-medium text-foreground",
+									children: "New Payout Account"
+								}),
+								/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-xs text-muted-foreground mb-1",
+									children: "Label"
+								}), /* @__PURE__ */ f("input", {
+									type: "text",
+									value: B.label,
+									onChange: (e) => V((t) => ({
+										...t,
+										label: e.target.value
+									})),
+									placeholder: "e.g. My Bank Account",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								})] }),
+								/* @__PURE__ */ p("div", {
+									className: "grid grid-cols-2 gap-3",
+									children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										className: "block text-xs text-muted-foreground mb-1",
+										children: "Type"
+									}), /* @__PURE__ */ p("select", {
+										value: B.type,
+										onChange: (e) => V((t) => ({
+											...t,
+											type: e.target.value
+										})),
+										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30",
+										children: [
+											/* @__PURE__ */ f("option", {
+												value: "BANK_ACCOUNT",
+												children: "Bank Account"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "UPI",
+												children: "UPI"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "WALLET",
+												children: "Wallet"
+											})
+										]
+									})] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										className: "block text-xs text-muted-foreground mb-1",
+										children: "Country"
+									}), /* @__PURE__ */ p("select", {
+										value: B.country,
+										onChange: (e) => V((t) => ({
+											...t,
+											country: e.target.value
+										})),
+										className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30",
+										children: [
+											/* @__PURE__ */ f("option", {
+												value: "IN",
+												children: "India"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "US",
+												children: "United States"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "GB",
+												children: "United Kingdom"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "SG",
+												children: "Singapore"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "AU",
+												children: "Australia"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "CA",
+												children: "Canada"
+											}),
+											/* @__PURE__ */ f("option", {
+												value: "DE",
+												children: "Germany"
+											})
+										]
+									})] })]
+								}),
+								B.type === "BANK_ACCOUNT" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-xs text-muted-foreground mb-1",
+									children: "Account Number"
+								}), /* @__PURE__ */ f("input", {
+									type: "text",
+									value: B.accountNumber,
+									onChange: (e) => V((t) => ({
+										...t,
+										accountNumber: e.target.value
+									})),
+									placeholder: "Account number",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								})] }), B.country === "IN" ? /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-xs text-muted-foreground mb-1",
+									children: "IFSC Code"
+								}), /* @__PURE__ */ f("input", {
+									type: "text",
+									value: B.ifscCode,
+									onChange: (e) => V((t) => ({
+										...t,
+										ifscCode: e.target.value.toUpperCase()
+									})),
+									placeholder: "e.g. SBIN0001234",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								})] }) : /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-xs text-muted-foreground mb-1",
+									children: "Routing Number"
+								}), /* @__PURE__ */ f("input", {
+									type: "text",
+									value: B.routingNumber,
+									onChange: (e) => V((t) => ({
+										...t,
+										routingNumber: e.target.value
+									})),
+									placeholder: "Routing / sort code",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								})] })] }),
+								B.type === "UPI" && /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-xs text-muted-foreground mb-1",
+									children: "UPI ID"
+								}), /* @__PURE__ */ f("input", {
+									type: "text",
+									value: B.upiId,
+									onChange: (e) => V((t) => ({
+										...t,
+										upiId: e.target.value
+									})),
+									placeholder: "yourname@upi",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								})] }),
+								W && /* @__PURE__ */ f("p", {
+									className: "text-xs text-destructive",
+									children: W
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => void he(),
+									disabled: H || !B.label,
+									className: "w-full py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									children: H ? "Saving…" : "Save Account"
+								})
+							]
+						}),
+						pe ? /* @__PURE__ */ f("div", {
+							className: "space-y-2",
+							children: [1, 2].map((e) => /* @__PURE__ */ f("div", { className: "h-16 border border-border rounded-lg bg-muted animate-pulse" }, e))
+						}) : $.length === 0 && !R ? /* @__PURE__ */ p("div", {
+							className: "flex flex-col items-center justify-center py-8 border border-dashed border-border rounded-lg",
+							children: [
+								/* @__PURE__ */ f("svg", {
+									className: "w-8 h-8 text-muted-foreground 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-muted-foreground",
+									children: "No payout accounts yet"
+								}),
+								/* @__PURE__ */ f("button", {
+									onClick: () => z(!0),
+									className: "mt-2 text-sm text-primary hover:underline",
+									children: "Add a bank account or UPI"
+								})
+							]
+						}) : /* @__PURE__ */ f("div", {
+							className: "space-y-2",
+							children: $.map((e) => /* @__PURE__ */ f("button", {
+								onClick: () => D(e.id),
+								className: `w-full text-left p-4 border rounded-lg transition-colors ${E === e.id ? "border-primary bg-primary/5" : "border-border bg-card hover:border-primary/40"}`,
+								children: /* @__PURE__ */ p("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
+										className: "text-sm font-medium text-foreground",
+										children: e.label
+									}), /* @__PURE__ */ p("p", {
+										className: "text-xs text-muted-foreground mt-0.5",
+										children: [
+											e.type.replaceAll("_", " "),
+											e.displayName ? ` · ${e.displayName}` : "",
+											e.accountLast4 ? ` ···${e.accountLast4}` : "",
+											e.country ? ` · ${e.country}` : ""
+										]
+									})] }), /* @__PURE__ */ p("div", {
+										className: "flex items-center gap-2",
+										children: [
+											e.isDefault && /* @__PURE__ */ f("span", {
+												className: "text-xs px-2 py-0.5 rounded bg-primary/10 text-primary font-medium",
+												children: "Default"
+											}),
+											/* @__PURE__ */ f("span", {
+												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()
+											}),
+											E === e.id && /* @__PURE__ */ f("svg", {
+												className: "w-4 h-4 text-primary shrink-0",
+												fill: "none",
+												viewBox: "0 0 24 24",
+												stroke: "currentColor",
+												children: /* @__PURE__ */ f("path", {
+													strokeLinecap: "round",
+													strokeLinejoin: "round",
+													strokeWidth: 2,
+													d: "M5 13l4 4L19 7"
+												})
+											})
+										]
+									})]
+								})
+							}, e.id))
+						})
+					]
+				}), /* @__PURE__ */ p("div", {
+					className: "space-y-4",
+					children: [/* @__PURE__ */ f("h2", {
+						className: "text-base font-semibold text-foreground",
+						children: "Request Withdrawal"
+					}), /* @__PURE__ */ p("div", {
+						className: "border border-border rounded-lg p-5 bg-card space-y-4",
+						children: [
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									className: "block text-sm font-medium text-foreground mb-1",
+									children: "Credits to Withdraw"
+								}),
+								/* @__PURE__ */ f("input", {
+									type: "number",
+									min: 1,
+									max: Z,
+									step: 1,
+									value: O,
+									onChange: (e) => k(e.target.value),
+									placeholder: "Enter credit amount",
+									className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30"
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: [
+										"Max withdrawable:",
+										" ",
+										/* @__PURE__ */ p("span", {
+											className: "font-medium",
+											children: [Z.toLocaleString(), " credits"]
+										})
+									]
+								}),
+								Q > 0 && Q > Z && /* @__PURE__ */ f("p", {
+									className: "text-xs text-destructive mt-1",
+									children: "Amount exceeds your withdrawable balance"
+								})
+							] }),
+							/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("label", {
+								className: "block text-sm font-medium text-foreground mb-1",
+								children: ["Notes ", /* @__PURE__ */ f("span", {
+									className: "text-muted-foreground font-normal",
+									children: "(optional)"
+								})]
+							}), /* @__PURE__ */ f("textarea", {
+								value: A,
+								onChange: (e) => j(e.target.value),
+								placeholder: "Any notes for this withdrawal request",
+								rows: 2,
+								className: "w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none"
+							})] }),
+							P && /* @__PURE__ */ f("div", {
+								className: "p-3 rounded-md bg-destructive/10 border border-destructive/20",
+								children: /* @__PURE__ */ f("p", {
+									className: "text-sm text-destructive",
+									children: P
+								})
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "pt-1 border-t border-border",
+								children: [/* @__PURE__ */ f("p", {
+									className: "text-xs text-muted-foreground mb-3",
+									children: "Credits will be converted to USD at the current credit rate. Withdrawals are reviewed before processing and may take 3–5 business days."
+								}), /* @__PURE__ */ f("button", {
+									onClick: () => void ge(),
+									disabled: M || !_e || !E || $.length === 0,
+									className: "w-full py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									children: M ? "Submitting…" : "Request Withdrawal"
+								})]
+							})
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ f("h2", {
+						className: "text-base font-semibold text-foreground",
+						children: "Withdrawal History"
+					}), /* @__PURE__ */ f("button", {
+						onClick: () => void X(),
+						className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+						"aria-label": "Refresh withdrawal history",
+						children: /* @__PURE__ */ f("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ f("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+							})
+						})
+					})]
+				}), w ? /* @__PURE__ */ f("div", {
+					className: "space-y-2",
+					children: [
+						1,
+						2,
+						3
+					].map((e) => /* @__PURE__ */ f("div", { className: "h-16 border border-border rounded-lg bg-muted animate-pulse" }, e))
+				}) : C.length === 0 ? /* @__PURE__ */ p("div", {
+					className: "flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg",
+					children: [/* @__PURE__ */ f("svg", {
+						className: "w-8 h-8 text-muted-foreground 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-muted-foreground",
+						children: "No withdrawal requests yet"
+					})]
+				}) : /* @__PURE__ */ f("div", {
+					className: "border border-border rounded-lg overflow-hidden",
+					children: /* @__PURE__ */ p("table", {
+						className: "w-full text-sm",
+						children: [/* @__PURE__ */ f("thead", {
+							className: "bg-muted/50 border-b border-border",
+							children: /* @__PURE__ */ p("tr", { children: [
+								/* @__PURE__ */ f("th", {
+									className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide",
+									children: "Amount"
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide",
+									children: "Status"
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden sm:table-cell",
+									children: "Payout Account"
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell",
+									children: "Requested"
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell",
+									children: "Completed"
+								})
+							] })
+						}), /* @__PURE__ */ f("tbody", {
+							className: "divide-y divide-border",
+							children: C.map((e) => /* @__PURE__ */ p("tr", {
+								className: "hover:bg-muted/30 transition-colors",
+								children: [
+									/* @__PURE__ */ p("td", {
+										className: "px-4 py-3 font-medium text-foreground",
+										children: [
+											e.requestedAmount.toLocaleString(),
+											" ",
+											e.currency
+										]
+									}),
+									/* @__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 ${ce(e.status)}`,
+											children: e.status.charAt(0) + e.status.slice(1).toLowerCase()
+										}), e.failureReason && /* @__PURE__ */ f("p", {
+											className: "text-xs text-destructive mt-0.5 max-w-[180px] truncate",
+											title: e.failureReason,
+											children: e.failureReason
+										})]
+									}),
+									/* @__PURE__ */ f("td", {
+										className: "px-4 py-3 text-muted-foreground hidden sm:table-cell",
+										children: e.payoutAccount ? /* @__PURE__ */ p("span", { children: [e.payoutAccount.label, e.payoutAccount.accountLast4 ? ` ···${e.payoutAccount.accountLast4}` : ""] }) : "—"
+									}),
+									/* @__PURE__ */ f("td", {
+										className: "px-4 py-3 text-muted-foreground hidden md:table-cell",
+										children: /* @__PURE__ */ f("span", {
+											title: r(e.createdAt, "long"),
+											children: ee(e.createdAt)
+										})
+									}),
+									/* @__PURE__ */ f("td", {
+										className: "px-4 py-3 text-muted-foreground hidden md:table-cell",
+										children: e.paidAt ? /* @__PURE__ */ f("span", {
+											className: se("PAID"),
+											children: r(e.paidAt, "short")
+										}) : "—"
+									})
+								]
+							}, e.id))
+						})]
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { h as CreditWithdrawalPage };
+
+//# sourceMappingURL=CreditWithdrawalPage.js.map