@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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

@@ -1 +1 @@
-{"version":3,"file":"CreditWithdrawalPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditWithdrawalPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credit Withdrawal Page\n * Allows users to withdraw withdrawable credits (purchased + earned) to a payout account.\n */\n\nimport { useState, useEffect, type FC } from 'react';\nimport {\n  CreditWithdrawalHistoryDocument,\n  GetCreditBalanceByTypeDocument,\n  RequestCreditWithdrawalDocument,\n  useGetCostOfCreditsCheckoutQuery,\n} from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport {\n  fetchPayoutAccounts,\n  addPayoutAccount,\n  type PayoutAccount,\n  type PayoutRequest,\n} from '../../earnings/api';\nimport { formatDate, formatRelativeTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditBalanceByType } from '../../../shared/types';\n\n// ============================================================================\n// API helpers (credit-specific)\n// ============================================================================\n\ninterface GatewayContext {\n  apiGatewayUrl?: string;\n  authToken?: string;\n  orgId?: string;\n}\n\nasync function fetchCreditBalanceByType(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<CreditBalanceByType> {\n  const data = await directBillingGraphqlRequest<\n    { getCreditBalanceByType: CreditBalanceByType },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: GetCreditBalanceByTypeDocument,\n    variables: { billingAccountId },\n  });\n  return data.getCreditBalanceByType;\n}\n\nasync function requestCreditWithdrawal(\n  input: {\n    billingAccountId: string;\n    creditAmount: number;\n    payoutAccountId: string;\n    currency?: string;\n    notes?: string;\n  },\n  ctx: GatewayContext\n): Promise<{ id: string; status: string; requestedAmount: number; currency: string }> {\n  const data = await directBillingGraphqlRequest<\n    {\n      requestCreditWithdrawal: {\n        id: string;\n        status: string;\n        requestedAmount: number;\n        currency: string;\n      };\n    },\n    { input: typeof input }\n  >({\n    ...ctx,\n    query: RequestCreditWithdrawalDocument,\n    variables: { input },\n  });\n  return data.requestCreditWithdrawal;\n}\n\nasync function fetchCreditWithdrawalHistory(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<PayoutRequest[]> {\n  const data = await directBillingGraphqlRequest<\n    { myPayoutRequests: { items: PayoutRequest[] } },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: CreditWithdrawalHistoryDocument,\n    variables: { billingAccountId },\n  });\n  return data.myPayoutRequests.items;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface BalanceCardProps {\n  label: string;\n  value: number;\n  description?: string;\n  highlight?: boolean;\n}\n\nconst BalanceCard: FC<BalanceCardProps> = ({ label, value, description, highlight }) => (\n  <div\n    className={`border border-border rounded-lg p-5 ${\n      highlight ? 'bg-gradient-to-br from-primary/5 to-primary/10' : 'bg-card'\n    }`}\n  >\n    <p className=\"text-sm text-muted-foreground\">{label}</p>\n    <p className={`text-2xl font-bold mt-1 ${highlight ? 'text-primary' : 'text-foreground'}`}>\n      {value.toLocaleString()} <span className=\"text-base font-normal\">credits</span>\n    </p>\n    {description && <p className=\"text-xs text-muted-foreground mt-1\">{description}</p>}\n  </div>\n);\n\nfunction getWithdrawalStatusColor(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return statusTokens.success.text;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return statusTokens.info.text;\n    case 'REQUESTED':\n      return statusTokens.warning.text;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return statusTokens.error.text;\n    default:\n      return 'text-muted-foreground';\n  }\n}\n\nfunction getWithdrawalStatusBg(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return `${statusTokens.success.bg} ${statusTokens.success.text}`;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return `${statusTokens.info.bg} ${statusTokens.info.text}`;\n    case 'REQUESTED':\n      return `${statusTokens.warning.bg} ${statusTokens.warning.text}`;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return `${statusTokens.error.bg} ${statusTokens.error.text}`;\n    default:\n      return 'bg-muted text-muted-foreground';\n  }\n}\n\n// ============================================================================\n// Main Page\n// ============================================================================\n\nexport const CreditWithdrawalPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n  const { emit } = useBillingEventEmitter();\n\n  // Balance state\n  const [balance, setBalance] = useState<CreditBalanceByType | null>(null);\n  const [isLoadingBalance, setIsLoadingBalance] = useState(false);\n  const [balanceError, setBalanceError] = useState<string | null>(null);\n\n  // Payout accounts state\n  const [payoutAccounts, setPayoutAccounts] = useState<PayoutAccount[]>([]);\n  const [isLoadingAccounts, setIsLoadingAccounts] = useState(false);\n\n  // Withdrawal history state\n  const [history, setHistory] = useState<PayoutRequest[]>([]);\n  const [isLoadingHistory, setIsLoadingHistory] = useState(false);\n\n  // Withdrawal form state\n  const [selectedAccountId, setSelectedAccountId] = useState<string>('');\n  const [creditAmount, setCreditAmount] = useState<string>('');\n  const [notes, setNotes] = useState<string>('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [submitSuccess, setSubmitSuccess] = useState(false);\n\n  // New payout account form state\n  const [showAddAccount, setShowAddAccount] = useState(false);\n  const [accountForm, setAccountForm] = useState({\n    label: '',\n    type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' | 'UPI',\n    accountHolderName: '',\n    accountNumber: '',\n    ifscCode: '',\n    routingNumber: '',\n    upiId: '',\n    country: '',\n    currency: 'USD',\n  });\n  const [isAddingAccount, setIsAddingAccount] = useState(false);\n  const [addAccountError, setAddAccountError] = useState<string | null>(null);\n\n  const billingAccountId = billingAccount?.id;\n\n  const getCtx = (): GatewayContext => ({\n    apiGatewayUrl,\n    authToken,\n    orgId,\n  });\n\n  const loadBalance = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingBalance(true);\n    setBalanceError(null);\n    try {\n      const b = await fetchCreditBalanceByType(billingAccountId, getCtx());\n      setBalance(b);\n    } catch (e) {\n      setBalanceError(e instanceof Error ? e.message : 'Failed to load balance');\n    } finally {\n      setIsLoadingBalance(false);\n    }\n  };\n\n  const loadAccounts = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingAccounts(true);\n    try {\n      const accounts = await fetchPayoutAccounts(billingAccountId, getCtx());\n      setPayoutAccounts(accounts);\n      const defaultAcc = accounts.find((a) => a.isDefault) ?? accounts[0];\n      if (defaultAcc) setSelectedAccountId(defaultAcc.id);\n    } catch {\n      // silently fail - user will see empty state\n    } finally {\n      setIsLoadingAccounts(false);\n    }\n  };\n\n  const loadHistory = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingHistory(true);\n    try {\n      const items = await fetchCreditWithdrawalHistory(billingAccountId, getCtx());\n      setHistory(items);\n    } catch {\n      // silently fail\n    } finally {\n      setIsLoadingHistory(false);\n    }\n  };\n\n  useEffect(() => {\n    if (billingAccountId) {\n      void loadBalance();\n      void loadAccounts();\n      void loadHistory();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [billingAccountId]);\n\n  // Sync payout account currency to billing account currency when it loads\n  useEffect(() => {\n    if (billingAccount?.currency) {\n      setAccountForm((f) => ({ ...f, currency: billingAccount.currency ?? 'USD' }));\n    }\n  }, [billingAccount?.currency]);\n\n  const handleAddAccount = async () => {\n    if (!billingAccountId) return;\n    setAddAccountError(null);\n    setIsAddingAccount(true);\n    try {\n      const isIndia =\n        accountForm.country.trim().toUpperCase() === 'IN' ||\n        accountForm.country.trim().toLowerCase() === 'india';\n\n      await addPayoutAccount(\n        {\n          billingAccountId,\n          label: accountForm.label,\n          type: accountForm.type,\n          accountHolderName: accountForm.accountHolderName,\n          country: accountForm.country || undefined,\n          currency: accountForm.currency,\n          ...(accountForm.type === 'BANK_ACCOUNT' && {\n            accountNumber: accountForm.accountNumber,\n            ...(isIndia\n              ? { ifsc: accountForm.ifscCode }\n              : { routingNumber: accountForm.routingNumber }),\n          }),\n          ...(accountForm.type === 'UPI' && { upiId: accountForm.upiId }),\n        },\n        getCtx()\n      );\n      emit('billing.payout_account.added', {\n        route: '/billing/credits/withdraw',\n        entityId: billingAccountId,\n        source: 'credit-withdrawal',\n      });\n      await loadAccounts();\n      setShowAddAccount(false);\n      setAccountForm({\n        label: '',\n        type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' | 'UPI',\n        accountHolderName: '',\n        accountNumber: '',\n        ifscCode: '',\n        routingNumber: '',\n        upiId: '',\n        country: '',\n        currency: 'USD',\n      });\n    } catch (e) {\n      setAddAccountError(e instanceof Error ? e.message : 'Failed to add account');\n    } finally {\n      setIsAddingAccount(false);\n    }\n  };\n\n  const handleWithdraw = async () => {\n    if (!billingAccountId || !selectedAccountId) return;\n    const amount = parseFloat(creditAmount);\n    if (!amount || amount <= 0) return;\n\n    setSubmitError(null);\n    setIsSubmitting(true);\n    try {\n      const withdrawal = await requestCreditWithdrawal(\n        {\n          billingAccountId,\n          creditAmount: amount,\n          payoutAccountId: selectedAccountId,\n          notes: notes || undefined,\n        },\n        getCtx()\n      );\n      emit('billing.credits.withdrawal_requested', {\n        route: '/billing/credits/withdraw',\n        entityId: withdrawal.id,\n        source: 'credit-withdrawal',\n        amount,\n      });\n      setSubmitSuccess(true);\n      setCreditAmount('');\n      setNotes('');\n      await loadBalance();\n      await loadHistory();\n    } catch (e) {\n      setSubmitError(e instanceof Error ? e.message : 'Withdrawal request failed');\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const accountCurrency = billingAccount?.currency ?? 'USD';\n  const withdrawAmount = parseFloat(creditAmount) || 0;\n\n  const { data: costData, loading: isFetchingCost } = useGetCostOfCreditsCheckoutQuery({\n    variables: { creditAmount: withdrawAmount, currency: accountCurrency },\n    skip: withdrawAmount <= 0 || !billingAccount,\n  });\n\n  const estimatedPayout = costData?.getCostOfCredits?.amount;\n\n  // Permission check\n  if (!permissions.canWithdrawCredits) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                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\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground\">\n            You don&apos;t have permission to withdraw credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!isLoadingAccount && !billingAccount) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-foreground\">No Billing Account</h2>\n          <p className=\"text-sm text-muted-foreground\">\n            You need a billing account to withdraw credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (isLoadingAccount && !billingAccount) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-64 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-5\">\n              <div className=\"h-4 w-24 bg-muted animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const withdrawable = balance?.withdrawable ?? 0;\n  const amountValid = withdrawAmount > 0 && withdrawAmount <= withdrawable;\n  const activeAccounts = payoutAccounts.filter((a) => a.status !== 'ARCHIVED');\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold text-foreground\">Withdraw Credits</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Convert your withdrawable credits (purchased &amp; earned) to a payout\n        </p>\n      </div>\n\n      {/* Balance breakdown */}\n      <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n        {isLoadingBalance ? (\n          [1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-5\">\n              <div className=\"h-4 w-20 bg-muted animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-28 bg-muted animate-pulse rounded\" />\n            </div>\n          ))\n        ) : balanceError ? (\n          <div className=\"col-span-4 text-sm text-destructive\">{balanceError}</div>\n        ) : (\n          <>\n            <BalanceCard\n              label=\"Purchased\"\n              value={balance?.purchased ?? 0}\n              description=\"From credit purchases\"\n            />\n            <BalanceCard\n              label=\"Earned\"\n              value={balance?.earned ?? 0}\n              description=\"From sales & referrals\"\n            />\n            <BalanceCard\n              label=\"Granted\"\n              value={balance?.granted ?? 0}\n              description=\"Coupons & admin grants — non-withdrawable\"\n            />\n            <BalanceCard\n              label=\"Withdrawable\"\n              value={withdrawable}\n              description=\"Purchased + earned\"\n              highlight\n            />\n          </>\n        )}\n      </div>\n\n      {/* Success banner */}\n      {submitSuccess && (\n        <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\">\n          <svg className=\"size-5 shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n          <div>\n            <p className=\"font-medium\">Withdrawal request submitted</p>\n            <p className=\"text-sm opacity-80\">Our team will review and process your request.</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setSubmitSuccess(false)}\n            className=\"ml-auto text-current opacity-60 hover:opacity-100\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n\n      {/* Main two-column layout */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        {/* Left: Payout account management */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-base font-semibold text-foreground\">Payout Account</h2>\n            <button\n              type=\"button\"\n              onClick={() => setShowAddAccount((v) => !v)}\n              className=\"text-sm text-primary hover:underline\"\n            >\n              {showAddAccount ? 'Cancel' : '+ Add new'}\n            </button>\n          </div>\n\n          {/* Add account form */}\n          {showAddAccount && (\n            <div className=\"border border-border rounded-lg p-4 space-y-3 bg-muted/30\">\n              <h3 className=\"text-sm font-medium text-foreground\">New Payout Account</h3>\n\n              <div>\n                <label className=\"block text-xs text-muted-foreground mb-1\">Label</label>\n                <input\n                  type=\"text\"\n                  value={accountForm.label}\n                  onChange={(e) => setAccountForm((f) => ({ ...f, label: e.target.value }))}\n                  placeholder=\"e.g. My Bank Account\"\n                  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\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-xs text-muted-foreground mb-1\">\n                  Account Holder Name\n                </label>\n                <input\n                  type=\"text\"\n                  value={accountForm.accountHolderName}\n                  onChange={(e) =>\n                    setAccountForm((f) => ({ ...f, accountHolderName: e.target.value }))\n                  }\n                  placeholder=\"Full name as on bank account\"\n                  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\"\n                />\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">Type</label>\n                  <select\n                    value={accountForm.type}\n                    onChange={(e) =>\n                      setAccountForm((f) => ({\n                        ...f,\n                        type: e.target.value as typeof accountForm.type,\n                      }))\n                    }\n                    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\"\n                  >\n                    <option value=\"BANK_ACCOUNT\">Bank Account</option>\n                    <option value=\"UPI\">UPI</option>\n                  </select>\n                </div>\n\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">Country</label>\n                  <input\n                    type=\"text\"\n                    value={accountForm.country}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, country: e.target.value }))}\n                    placeholder=\"e.g. India, US, UK\"\n                    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\"\n                  />\n                </div>\n              </div>\n\n              {accountForm.type === 'BANK_ACCOUNT' && (\n                <>\n                  <div>\n                    <label className=\"block text-xs text-muted-foreground mb-1\">\n                      Account Number\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={accountForm.accountNumber}\n                      onChange={(e) =>\n                        setAccountForm((f) => ({ ...f, accountNumber: e.target.value }))\n                      }\n                      placeholder=\"Account number\"\n                      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\"\n                    />\n                  </div>\n                  {accountForm.country.trim().toUpperCase() === 'IN' ||\n                  accountForm.country.trim().toLowerCase() === 'india' ? (\n                    <div>\n                      <label className=\"block text-xs text-muted-foreground mb-1\">IFSC Code</label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.ifscCode}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, ifscCode: e.target.value.toUpperCase() }))\n                        }\n                        placeholder=\"e.g. SBIN0001234\"\n                        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\"\n                      />\n                    </div>\n                  ) : (\n                    <div>\n                      <label className=\"block text-xs text-muted-foreground mb-1\">\n                        Routing Number\n                      </label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.routingNumber}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, routingNumber: e.target.value }))\n                        }\n                        placeholder=\"Routing / sort code\"\n                        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\"\n                      />\n                    </div>\n                  )}\n                </>\n              )}\n\n              {accountForm.type === 'UPI' && (\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">UPI ID</label>\n                  <input\n                    type=\"text\"\n                    value={accountForm.upiId}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, upiId: e.target.value }))}\n                    placeholder=\"yourname@upi\"\n                    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\"\n                  />\n                </div>\n              )}\n\n              {addAccountError && <p className=\"text-xs text-destructive\">{addAccountError}</p>}\n\n              <button\n                type=\"button\"\n                onClick={() => void handleAddAccount()}\n                disabled={isAddingAccount || !accountForm.label || !accountForm.accountHolderName}\n                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\"\n              >\n                {isAddingAccount ? 'Saving…' : 'Save Account'}\n              </button>\n            </div>\n          )}\n\n          {/* Existing accounts */}\n          {isLoadingAccounts ? (\n            <div className=\"space-y-2\">\n              {[1, 2].map((i) => (\n                <div\n                  key={i}\n                  className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n                />\n              ))}\n            </div>\n          ) : activeAccounts.length === 0 && !showAddAccount ? (\n            <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border rounded-lg\">\n              <svg\n                className=\"size-8 text-muted-foreground mb-2\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  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\"\n                />\n              </svg>\n              <p className=\"text-sm text-muted-foreground\">No payout accounts yet</p>\n              <button\n                type=\"button\"\n                onClick={() => setShowAddAccount(true)}\n                className=\"mt-2 text-sm text-primary hover:underline\"\n              >\n                Add a bank account or UPI\n              </button>\n            </div>\n          ) : (\n            <div className=\"space-y-2\">\n              {activeAccounts.map((account) => (\n                <button\n                  type=\"button\"\n                  key={account.id}\n                  onClick={() => setSelectedAccountId(account.id)}\n                  className={`w-full text-left p-4 border rounded-lg transition-colors ${\n                    selectedAccountId === account.id\n                      ? 'border-primary bg-primary/5'\n                      : 'border-border bg-card hover:border-primary/40'\n                  }`}\n                >\n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <p className=\"text-sm font-medium text-foreground\">{account.label}</p>\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {account.type.replaceAll('_', ' ')}\n                        {account.displayName ? ` · ${account.displayName}` : ''}\n                        {account.accountLast4 ? ` ···${account.accountLast4}` : ''}\n                        {account.country ? ` · ${account.country}` : ''}\n                      </p>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      {account.isDefault && (\n                        <span className=\"text-xs px-2 py-0.5 rounded bg-primary/10 text-primary font-medium\">\n                          Default\n                        </span>\n                      )}\n                      <span\n                        className={`text-xs px-2 py-0.5 rounded font-medium ${\n                          account.status === 'ACTIVE'\n                            ? `${statusTokens.success.bg} ${statusTokens.success.text}`\n                            : account.status === 'PENDING_VERIFICATION'\n                              ? `${statusTokens.warning.bg} ${statusTokens.warning.text}`\n                              : `${statusTokens.error.bg} ${statusTokens.error.text}`\n                        }`}\n                      >\n                        {account.status.replaceAll('_', ' ').toLowerCase()}\n                      </span>\n                      {selectedAccountId === account.id && (\n                        <svg\n                          className=\"size-4 text-primary shrink-0\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      )}\n                    </div>\n                  </div>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Right: Withdrawal request form */}\n        <div className=\"space-y-4\">\n          <h2 className=\"text-base font-semibold text-foreground\">Request Withdrawal</h2>\n\n          <div className=\"border border-border rounded-lg p-5 bg-card space-y-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">\n                Credits to Withdraw\n              </label>\n              <input\n                type=\"number\"\n                min={1}\n                max={withdrawable}\n                step={1}\n                value={creditAmount}\n                onChange={(e) => setCreditAmount(e.target.value)}\n                placeholder=\"Enter credit amount\"\n                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\"\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Max withdrawable:{' '}\n                <span className=\"font-medium\">{withdrawable.toLocaleString()} credits</span>\n              </p>\n              {withdrawAmount > 0 && withdrawAmount <= withdrawable && (\n                <p className=\"text-xs text-muted-foreground mt-1\">\n                  {isFetchingCost ? (\n                    'Calculating…'\n                  ) : estimatedPayout != null ? (\n                    <>\n                      Estimated payout:{' '}\n                      <span className=\"font-semibold text-foreground\">\n                        {estimatedPayout.toLocaleString(undefined, {\n                          style: 'currency',\n                          currency: accountCurrency,\n                          minimumFractionDigits: 2,\n                          maximumFractionDigits: 2,\n                        })}\n                      </span>{' '}\n                      at the current credit rate\n                    </>\n                  ) : null}\n                </p>\n              )}\n              {withdrawAmount > 0 && withdrawAmount > withdrawable && (\n                <p className=\"text-xs text-destructive mt-1\">\n                  Amount exceeds your withdrawable balance\n                </p>\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">\n                Notes <span className=\"text-muted-foreground font-normal\">(optional)</span>\n              </label>\n              <textarea\n                value={notes}\n                onChange={(e) => setNotes(e.target.value)}\n                placeholder=\"Any notes for this withdrawal request\"\n                rows={2}\n                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\"\n              />\n            </div>\n\n            {submitError && (\n              <div className=\"p-3 rounded-md bg-destructive/10 border border-destructive/20\">\n                <p className=\"text-sm text-destructive\">{submitError}</p>\n              </div>\n            )}\n\n            <div className=\"pt-1 border-t border-border\">\n              <p className=\"text-xs text-muted-foreground mb-3\">\n                Credits will be converted to {accountCurrency} at the current credit rate.\n                Withdrawals are reviewed before processing and may take 3–5 business days.\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => void handleWithdraw()}\n                disabled={\n                  isSubmitting || !amountValid || !selectedAccountId || activeAccounts.length === 0\n                }\n                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\"\n              >\n                {isSubmitting ? 'Submitting…' : 'Request Withdrawal'}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Withdrawal history */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"text-base font-semibold text-foreground\">Withdrawal History</h2>\n          <button\n            type=\"button\"\n            onClick={() => void loadHistory()}\n            className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label=\"Refresh withdrawal history\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                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\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        {isLoadingHistory ? (\n          <div className=\"space-y-2\">\n            {[1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n              />\n            ))}\n          </div>\n        ) : history.length === 0 ? (\n          <div className=\"flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg\">\n            <svg\n              className=\"size-8 text-muted-foreground mb-2\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                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\"\n              />\n            </svg>\n            <p className=\"text-sm text-muted-foreground\">No withdrawal requests yet</p>\n          </div>\n        ) : (\n          <div className=\"border border-border rounded-lg overflow-hidden\">\n            <table className=\"w-full text-sm\">\n              <thead className=\"bg-muted/50 border-b border-border\">\n                <tr>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n                    Amount\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n                    Status\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden sm:table-cell\">\n                    Payout Account\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n                    Requested\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n                    Completed\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {history.map((req) => (\n                  <tr key={req.id} className=\"hover:bg-muted/30 transition-colors\">\n                    <td className=\"px-4 py-3 font-medium text-foreground\">\n                      {req.requestedAmount.toLocaleString()} {req.currency}\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getWithdrawalStatusBg(req.status)}`}\n                      >\n                        {req.status.charAt(0) + req.status.slice(1).toLowerCase()}\n                      </span>\n                      {req.failureReason && (\n                        <p\n                          className=\"text-xs text-destructive mt-0.5 max-w-[180px] truncate\"\n                          title={req.failureReason}\n                        >\n                          {req.failureReason}\n                        </p>\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden sm:table-cell\">\n                      {req.payoutAccount ? (\n                        <span>\n                          {req.payoutAccount.label}\n                          {req.payoutAccount.accountLast4\n                            ? ` ···${req.payoutAccount.accountLast4}`\n                            : ''}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n                      <span title={formatDate(req.createdAt, 'long')}>\n                        {formatRelativeTime(req.createdAt)}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n                      {req.paidAt ? (\n                        <span className={getWithdrawalStatusColor('PAID')}>\n                          {formatDate(req.paidAt, 'short')}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreditWithdrawalPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditWithdrawalPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credit Withdrawal Page\n * Allows users to withdraw withdrawable credits (purchased + earned) to a payout account.\n */\n\nimport { useState, useEffect, type FC } from 'react';\nimport {\n  CreditWithdrawalHistoryDocument,\n  GetCreditBalanceByTypeDocument,\n  RequestCreditWithdrawalDocument,\n  useGetCostOfCreditsCheckoutQuery,\n} from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport {\n  fetchPayoutAccounts,\n  addPayoutAccount,\n  type PayoutAccount,\n  type PayoutRequest,\n} from '../../earnings/api';\nimport { formatDate, formatRelativeTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditBalanceByType } from '../../../shared/types';\n\n// ============================================================================\n// API helpers (credit-specific)\n// ============================================================================\n\ninterface GatewayContext {\n  apiGatewayUrl?: string;\n  authToken?: string;\n  orgId?: string;\n}\n\nasync function fetchCreditBalanceByType(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<CreditBalanceByType> {\n  const data = await directBillingGraphqlRequest<\n    { getCreditBalanceByType: CreditBalanceByType },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: GetCreditBalanceByTypeDocument,\n    variables: { billingAccountId },\n  });\n  return data.getCreditBalanceByType;\n}\n\nasync function requestCreditWithdrawal(\n  input: {\n    billingAccountId: string;\n    creditAmount: number;\n    payoutAccountId: string;\n    currency?: string;\n    notes?: string;\n  },\n  ctx: GatewayContext\n): Promise<{ id: string; status: string; requestedAmount: number; currency: string }> {\n  const data = await directBillingGraphqlRequest<\n    {\n      requestCreditWithdrawal: {\n        id: string;\n        status: string;\n        requestedAmount: number;\n        currency: string;\n      };\n    },\n    { input: typeof input }\n  >({\n    ...ctx,\n    query: RequestCreditWithdrawalDocument,\n    variables: { input },\n  });\n  return data.requestCreditWithdrawal;\n}\n\nasync function fetchCreditWithdrawalHistory(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<PayoutRequest[]> {\n  const data = await directBillingGraphqlRequest<\n    { myPayoutRequests: { items: PayoutRequest[] } },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: CreditWithdrawalHistoryDocument,\n    variables: { billingAccountId },\n  });\n  return data.myPayoutRequests.items;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface BalanceCardProps {\n  label: string;\n  value: number;\n  description?: string;\n  highlight?: boolean;\n}\n\nconst BalanceCard: FC<BalanceCardProps> = ({ label, value, description, highlight }) => (\n  <div\n    className={`border border-border-subtle rounded-lg p-5 ${\n      highlight\n        ? 'bg-gradient-to-br from-[var(--color-accent-soft)] to-[var(--color-accent-soft)]'\n        : 'bg-bg-surface'\n    }`}\n  >\n    <p className=\"text-sm text-text-secondary\">{label}</p>\n    <p className={`text-2xl font-bold mt-1 ${highlight ? 'text-text-link' : 'text-text-primary'}`}>\n      {value.toLocaleString()} <span className=\"text-base font-normal\">credits</span>\n    </p>\n    {description && <p className=\"text-xs text-text-secondary mt-1\">{description}</p>}\n  </div>\n);\n\nfunction getWithdrawalStatusColor(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return statusTokens.success.text;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return statusTokens.info.text;\n    case 'REQUESTED':\n      return statusTokens.warning.text;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return statusTokens.error.text;\n    default:\n      return 'text-text-secondary';\n  }\n}\n\nfunction getWithdrawalStatusBg(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return `${statusTokens.success.bg} ${statusTokens.success.text}`;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return `${statusTokens.info.bg} ${statusTokens.info.text}`;\n    case 'REQUESTED':\n      return `${statusTokens.warning.bg} ${statusTokens.warning.text}`;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return `${statusTokens.error.bg} ${statusTokens.error.text}`;\n    default:\n      return 'bg-bg-sunken text-text-secondary';\n  }\n}\n\n// ============================================================================\n// Main Page\n// ============================================================================\n\nexport const CreditWithdrawalPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n  const { emit } = useBillingEventEmitter();\n\n  // Balance state\n  const [balance, setBalance] = useState<CreditBalanceByType | null>(null);\n  const [isLoadingBalance, setIsLoadingBalance] = useState(false);\n  const [balanceError, setBalanceError] = useState<string | null>(null);\n\n  // Payout accounts state\n  const [payoutAccounts, setPayoutAccounts] = useState<PayoutAccount[]>([]);\n  const [isLoadingAccounts, setIsLoadingAccounts] = useState(false);\n\n  // Withdrawal history state\n  const [history, setHistory] = useState<PayoutRequest[]>([]);\n  const [isLoadingHistory, setIsLoadingHistory] = useState(false);\n\n  // Withdrawal form state\n  const [selectedAccountId, setSelectedAccountId] = useState<string>('');\n  const [creditAmount, setCreditAmount] = useState<string>('');\n  const [notes, setNotes] = useState<string>('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [submitSuccess, setSubmitSuccess] = useState(false);\n\n  // New payout account form state\n  const [showAddAccount, setShowAddAccount] = useState(false);\n  const [accountForm, setAccountForm] = useState({\n    label: '',\n    type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' | 'UPI',\n    accountHolderName: '',\n    accountNumber: '',\n    ifscCode: '',\n    routingNumber: '',\n    upiId: '',\n    country: '',\n    currency: 'USD',\n  });\n  const [isAddingAccount, setIsAddingAccount] = useState(false);\n  const [addAccountError, setAddAccountError] = useState<string | null>(null);\n\n  const billingAccountId = billingAccount?.id;\n\n  const getCtx = (): GatewayContext => ({\n    apiGatewayUrl,\n    authToken,\n    orgId,\n  });\n\n  const loadBalance = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingBalance(true);\n    setBalanceError(null);\n    try {\n      const b = await fetchCreditBalanceByType(billingAccountId, getCtx());\n      setBalance(b);\n    } catch (e) {\n      setBalanceError(e instanceof Error ? e.message : 'Failed to load balance');\n    } finally {\n      setIsLoadingBalance(false);\n    }\n  };\n\n  const loadAccounts = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingAccounts(true);\n    try {\n      const accounts = await fetchPayoutAccounts(billingAccountId, getCtx());\n      setPayoutAccounts(accounts);\n      const defaultAcc = accounts.find((a) => a.isDefault) ?? accounts[0];\n      if (defaultAcc) setSelectedAccountId(defaultAcc.id);\n    } catch {\n      // silently fail - user will see empty state\n    } finally {\n      setIsLoadingAccounts(false);\n    }\n  };\n\n  const loadHistory = async () => {\n    if (!billingAccountId) return;\n    setIsLoadingHistory(true);\n    try {\n      const items = await fetchCreditWithdrawalHistory(billingAccountId, getCtx());\n      setHistory(items);\n    } catch {\n      // silently fail\n    } finally {\n      setIsLoadingHistory(false);\n    }\n  };\n\n  useEffect(() => {\n    if (billingAccountId) {\n      void loadBalance();\n      void loadAccounts();\n      void loadHistory();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [billingAccountId]);\n\n  // Sync payout account currency to billing account currency when it loads\n  useEffect(() => {\n    if (billingAccount?.currency) {\n      setAccountForm((f) => ({ ...f, currency: billingAccount.currency ?? 'USD' }));\n    }\n  }, [billingAccount?.currency]);\n\n  const handleAddAccount = async () => {\n    if (!billingAccountId) return;\n    setAddAccountError(null);\n    setIsAddingAccount(true);\n    try {\n      const isIndia =\n        accountForm.country.trim().toUpperCase() === 'IN' ||\n        accountForm.country.trim().toLowerCase() === 'india';\n\n      await addPayoutAccount(\n        {\n          billingAccountId,\n          label: accountForm.label,\n          type: accountForm.type,\n          accountHolderName: accountForm.accountHolderName,\n          country: accountForm.country || undefined,\n          currency: accountForm.currency,\n          ...(accountForm.type === 'BANK_ACCOUNT' && {\n            accountNumber: accountForm.accountNumber,\n            ...(isIndia\n              ? { ifsc: accountForm.ifscCode }\n              : { routingNumber: accountForm.routingNumber }),\n          }),\n          ...(accountForm.type === 'UPI' && { upiId: accountForm.upiId }),\n        },\n        getCtx()\n      );\n      emit('billing.payout_account.added', {\n        route: '/billing/credits/withdraw',\n        entityId: billingAccountId,\n        source: 'credit-withdrawal',\n      });\n      await loadAccounts();\n      setShowAddAccount(false);\n      setAccountForm({\n        label: '',\n        type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' | 'UPI',\n        accountHolderName: '',\n        accountNumber: '',\n        ifscCode: '',\n        routingNumber: '',\n        upiId: '',\n        country: '',\n        currency: 'USD',\n      });\n    } catch (e) {\n      setAddAccountError(e instanceof Error ? e.message : 'Failed to add account');\n    } finally {\n      setIsAddingAccount(false);\n    }\n  };\n\n  const handleWithdraw = async () => {\n    if (!billingAccountId || !selectedAccountId) return;\n    const amount = parseFloat(creditAmount);\n    if (!amount || amount <= 0) return;\n\n    setSubmitError(null);\n    setIsSubmitting(true);\n    try {\n      const withdrawal = await requestCreditWithdrawal(\n        {\n          billingAccountId,\n          creditAmount: amount,\n          payoutAccountId: selectedAccountId,\n          notes: notes || undefined,\n        },\n        getCtx()\n      );\n      emit('billing.credits.withdrawal_requested', {\n        route: '/billing/credits/withdraw',\n        entityId: withdrawal.id,\n        source: 'credit-withdrawal',\n        amount,\n      });\n      setSubmitSuccess(true);\n      setCreditAmount('');\n      setNotes('');\n      await loadBalance();\n      await loadHistory();\n    } catch (e) {\n      setSubmitError(e instanceof Error ? e.message : 'Withdrawal request failed');\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const accountCurrency = billingAccount?.currency ?? 'USD';\n  const withdrawAmount = parseFloat(creditAmount) || 0;\n\n  const { data: costData, loading: isFetchingCost } = useGetCostOfCreditsCheckoutQuery({\n    variables: { creditAmount: withdrawAmount, currency: accountCurrency },\n    skip: withdrawAmount <= 0 || !billingAccount,\n  });\n\n  const estimatedPayout = costData?.getCostOfCredits?.amount;\n\n  // Permission check\n  if (!permissions.canWithdrawCredits) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <div className=\"size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                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\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You don&apos;t have permission to withdraw credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!isLoadingAccount && !billingAccount) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-2\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">No Billing Account</h2>\n          <p className=\"text-sm text-text-secondary\">\n            You need a billing account to withdraw credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (isLoadingAccount && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-64 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-5\">\n              <div className=\"h-4 w-24 bg-bg-sunken animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-32 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const withdrawable = balance?.withdrawable ?? 0;\n  const amountValid = withdrawAmount > 0 && withdrawAmount <= withdrawable;\n  const activeAccounts = payoutAccounts.filter((a) => a.status !== 'ARCHIVED');\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n          Withdraw Credits\n        </h1>\n        <p className=\"text-sm text-text-secondary mt-1\">\n          Convert your withdrawable credits (purchased &amp; earned) to a payout\n        </p>\n      </div>\n\n      {/* Balance breakdown */}\n      <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n        {isLoadingBalance ? (\n          [1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border-subtle rounded-lg p-5\">\n              <div className=\"h-4 w-20 bg-bg-sunken animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-28 bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          ))\n        ) : balanceError ? (\n          <div className=\"col-span-4 text-sm text-status-error-text\">{balanceError}</div>\n        ) : (\n          <>\n            <BalanceCard\n              label=\"Purchased\"\n              value={balance?.purchased ?? 0}\n              description=\"From credit purchases\"\n            />\n            <BalanceCard\n              label=\"Earned\"\n              value={balance?.earned ?? 0}\n              description=\"From sales & referrals\"\n            />\n            <BalanceCard\n              label=\"Granted\"\n              value={balance?.granted ?? 0}\n              description=\"Coupons & admin grants — non-withdrawable\"\n            />\n            <BalanceCard\n              label=\"Withdrawable\"\n              value={withdrawable}\n              description=\"Purchased + earned\"\n              highlight\n            />\n          </>\n        )}\n      </div>\n\n      {/* Success banner */}\n      {submitSuccess && (\n        <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\">\n          <svg className=\"size-5 shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n          <div>\n            <p className=\"font-medium\">Withdrawal request submitted</p>\n            <p className=\"text-sm opacity-80\">Our team will review and process your request.</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setSubmitSuccess(false)}\n            className=\"ml-auto text-current opacity-60 hover:opacity-100\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n\n      {/* Main two-column layout */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        {/* Left: Payout account management */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-base font-semibold text-text-primary\">Payout Account</h2>\n            <button\n              type=\"button\"\n              onClick={() => setShowAddAccount((v) => !v)}\n              className=\"text-sm text-text-link hover:underline\"\n            >\n              {showAddAccount ? 'Cancel' : '+ Add new'}\n            </button>\n          </div>\n\n          {/* Add account form */}\n          {showAddAccount && (\n            <div className=\"border border-border-subtle rounded-lg p-4 space-y-3 bg-bg-sunken\">\n              <h3 className=\"text-sm font-medium text-text-primary\">New Payout Account</h3>\n\n              <div>\n                <label className=\"block text-xs text-text-secondary mb-1\">Label</label>\n                <input\n                  type=\"text\"\n                  value={accountForm.label}\n                  onChange={(e) => setAccountForm((f) => ({ ...f, label: e.target.value }))}\n                  placeholder=\"e.g. My Bank Account\"\n                  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)]\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-xs text-text-secondary mb-1\">\n                  Account Holder Name\n                </label>\n                <input\n                  type=\"text\"\n                  value={accountForm.accountHolderName}\n                  onChange={(e) =>\n                    setAccountForm((f) => ({ ...f, accountHolderName: e.target.value }))\n                  }\n                  placeholder=\"Full name as on bank account\"\n                  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)]\"\n                />\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label className=\"block text-xs text-text-secondary mb-1\">Type</label>\n                  <select\n                    value={accountForm.type}\n                    onChange={(e) =>\n                      setAccountForm((f) => ({\n                        ...f,\n                        type: e.target.value as typeof accountForm.type,\n                      }))\n                    }\n                    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)]\"\n                  >\n                    <option value=\"BANK_ACCOUNT\">Bank Account</option>\n                    <option value=\"UPI\">UPI</option>\n                  </select>\n                </div>\n\n                <div>\n                  <label className=\"block text-xs text-text-secondary mb-1\">Country</label>\n                  <input\n                    type=\"text\"\n                    value={accountForm.country}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, country: e.target.value }))}\n                    placeholder=\"e.g. India, US, UK\"\n                    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)]\"\n                  />\n                </div>\n              </div>\n\n              {accountForm.type === 'BANK_ACCOUNT' && (\n                <>\n                  <div>\n                    <label className=\"block text-xs text-text-secondary mb-1\">Account Number</label>\n                    <input\n                      type=\"text\"\n                      value={accountForm.accountNumber}\n                      onChange={(e) =>\n                        setAccountForm((f) => ({ ...f, accountNumber: e.target.value }))\n                      }\n                      placeholder=\"Account number\"\n                      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)]\"\n                    />\n                  </div>\n                  {accountForm.country.trim().toUpperCase() === 'IN' ||\n                  accountForm.country.trim().toLowerCase() === 'india' ? (\n                    <div>\n                      <label className=\"block text-xs text-text-secondary mb-1\">IFSC Code</label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.ifscCode}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, ifscCode: e.target.value.toUpperCase() }))\n                        }\n                        placeholder=\"e.g. SBIN0001234\"\n                        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)]\"\n                      />\n                    </div>\n                  ) : (\n                    <div>\n                      <label className=\"block text-xs text-text-secondary mb-1\">\n                        Routing Number\n                      </label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.routingNumber}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, routingNumber: e.target.value }))\n                        }\n                        placeholder=\"Routing / sort code\"\n                        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)]\"\n                      />\n                    </div>\n                  )}\n                </>\n              )}\n\n              {accountForm.type === 'UPI' && (\n                <div>\n                  <label className=\"block text-xs text-text-secondary mb-1\">UPI ID</label>\n                  <input\n                    type=\"text\"\n                    value={accountForm.upiId}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, upiId: e.target.value }))}\n                    placeholder=\"yourname@upi\"\n                    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)]\"\n                  />\n                </div>\n              )}\n\n              {addAccountError && (\n                <p className=\"text-xs text-status-error-text\">{addAccountError}</p>\n              )}\n\n              <button\n                type=\"button\"\n                onClick={() => void handleAddAccount()}\n                disabled={isAddingAccount || !accountForm.label || !accountForm.accountHolderName}\n                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\"\n              >\n                {isAddingAccount ? 'Saving…' : 'Save Account'}\n              </button>\n            </div>\n          )}\n\n          {/* Existing accounts */}\n          {isLoadingAccounts ? (\n            <div className=\"space-y-2\">\n              {[1, 2].map((i) => (\n                <div\n                  key={i}\n                  className=\"h-16 border border-border-subtle rounded-lg bg-bg-sunken animate-pulse\"\n                />\n              ))}\n            </div>\n          ) : activeAccounts.length === 0 && !showAddAccount ? (\n            <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border-subtle rounded-lg\">\n              <svg\n                className=\"size-8 text-text-secondary mb-2\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  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\"\n                />\n              </svg>\n              <p className=\"text-sm text-text-secondary\">No payout accounts yet</p>\n              <button\n                type=\"button\"\n                onClick={() => setShowAddAccount(true)}\n                className=\"mt-2 text-sm text-text-link hover:underline\"\n              >\n                Add a bank account or UPI\n              </button>\n            </div>\n          ) : (\n            <div className=\"space-y-2\">\n              {activeAccounts.map((account) => (\n                <button\n                  type=\"button\"\n                  key={account.id}\n                  onClick={() => setSelectedAccountId(account.id)}\n                  className={`w-full text-left p-4 border rounded-lg transition-colors ${\n                    selectedAccountId === account.id\n                      ? 'border-border-strong bg-[var(--color-accent-soft)]'\n                      : 'border-border-subtle bg-bg-surface hover:border-border-strong'\n                  }`}\n                >\n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">{account.label}</p>\n                      <p className=\"text-xs text-text-secondary mt-0.5\">\n                        {account.type.replaceAll('_', ' ')}\n                        {account.displayName ? ` · ${account.displayName}` : ''}\n                        {account.accountLast4 ? ` ···${account.accountLast4}` : ''}\n                        {account.country ? ` · ${account.country}` : ''}\n                      </p>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      {account.isDefault && (\n                        <span className=\"text-xs px-2 py-0.5 rounded bg-[var(--color-accent-soft)] text-text-link font-medium\">\n                          Default\n                        </span>\n                      )}\n                      <span\n                        className={`text-xs px-2 py-0.5 rounded font-medium ${\n                          account.status === 'ACTIVE'\n                            ? `${statusTokens.success.bg} ${statusTokens.success.text}`\n                            : account.status === 'PENDING_VERIFICATION'\n                              ? `${statusTokens.warning.bg} ${statusTokens.warning.text}`\n                              : `${statusTokens.error.bg} ${statusTokens.error.text}`\n                        }`}\n                      >\n                        {account.status.replaceAll('_', ' ').toLowerCase()}\n                      </span>\n                      {selectedAccountId === account.id && (\n                        <svg\n                          className=\"size-4 text-text-link shrink-0\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      )}\n                    </div>\n                  </div>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Right: Withdrawal request form */}\n        <div className=\"space-y-4\">\n          <h2 className=\"text-base font-semibold text-text-primary\">Request Withdrawal</h2>\n\n          <div className=\"border border-border-subtle rounded-lg p-5 bg-bg-surface space-y-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                Credits to Withdraw\n              </label>\n              <input\n                type=\"number\"\n                min={1}\n                max={withdrawable}\n                step={1}\n                value={creditAmount}\n                onChange={(e) => setCreditAmount(e.target.value)}\n                placeholder=\"Enter credit amount\"\n                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)]\"\n              />\n              <p className=\"text-xs text-text-secondary mt-1\">\n                Max withdrawable:{' '}\n                <span className=\"font-medium\">{withdrawable.toLocaleString()} credits</span>\n              </p>\n              {withdrawAmount > 0 && withdrawAmount <= withdrawable && (\n                <p className=\"text-xs text-text-secondary mt-1\">\n                  {isFetchingCost ? (\n                    'Calculating…'\n                  ) : estimatedPayout != null ? (\n                    <>\n                      Estimated payout:{' '}\n                      <span className=\"font-semibold text-text-primary\">\n                        {estimatedPayout.toLocaleString(undefined, {\n                          style: 'currency',\n                          currency: accountCurrency,\n                          minimumFractionDigits: 2,\n                          maximumFractionDigits: 2,\n                        })}\n                      </span>{' '}\n                      at the current credit rate\n                    </>\n                  ) : null}\n                </p>\n              )}\n              {withdrawAmount > 0 && withdrawAmount > withdrawable && (\n                <p className=\"text-xs text-status-error-text mt-1\">\n                  Amount exceeds your withdrawable balance\n                </p>\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                Notes <span className=\"text-text-secondary font-normal\">(optional)</span>\n              </label>\n              <textarea\n                value={notes}\n                onChange={(e) => setNotes(e.target.value)}\n                placeholder=\"Any notes for this withdrawal request\"\n                rows={2}\n                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\"\n              />\n            </div>\n\n            {submitError && (\n              <div className=\"p-3 rounded-button bg-status-error-bg-subtle border border-status-error-border\">\n                <p className=\"text-sm text-status-error-text\">{submitError}</p>\n              </div>\n            )}\n\n            <div className=\"pt-1 border-t border-border-subtle\">\n              <p className=\"text-xs text-text-secondary mb-3\">\n                Credits will be converted to {accountCurrency} at the current credit rate.\n                Withdrawals are reviewed before processing and may take 3–5 business days.\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => void handleWithdraw()}\n                disabled={\n                  isSubmitting || !amountValid || !selectedAccountId || activeAccounts.length === 0\n                }\n                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\"\n              >\n                {isSubmitting ? 'Submitting…' : 'Request Withdrawal'}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Withdrawal history */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"text-base font-semibold text-text-primary\">Withdrawal History</h2>\n          <button\n            type=\"button\"\n            onClick={() => void loadHistory()}\n            className=\"text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            aria-label=\"Refresh withdrawal history\"\n          >\n            <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                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\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        {isLoadingHistory ? (\n          <div className=\"space-y-2\">\n            {[1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-16 border border-border-subtle rounded-lg bg-bg-sunken animate-pulse\"\n              />\n            ))}\n          </div>\n        ) : history.length === 0 ? (\n          <div className=\"flex flex-col items-center justify-center py-10 border border-dashed border-border-subtle rounded-lg\">\n            <svg\n              className=\"size-8 text-text-secondary mb-2\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                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\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">No withdrawal requests yet</p>\n          </div>\n        ) : (\n          <div className=\"border border-border-subtle rounded-lg overflow-hidden\">\n            <table className=\"w-full text-sm\">\n              <thead className=\"bg-bg-sunken border-b border-border-subtle\">\n                <tr>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wide\">\n                    Amount\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wide\">\n                    Status\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wide hidden sm:table-cell\">\n                    Payout Account\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wide hidden md:table-cell\">\n                    Requested\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wide hidden md:table-cell\">\n                    Completed\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border-subtle\">\n                {history.map((req) => (\n                  <tr key={req.id} className=\"hover:bg-bg-sunken transition-colors\">\n                    <td className=\"px-4 py-3 font-medium text-text-primary\">\n                      {req.requestedAmount.toLocaleString()} {req.currency}\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getWithdrawalStatusBg(req.status)}`}\n                      >\n                        {req.status.charAt(0) + req.status.slice(1).toLowerCase()}\n                      </span>\n                      {req.failureReason && (\n                        <p\n                          className=\"text-xs text-status-error-text mt-0.5 max-w-[180px] truncate\"\n                          title={req.failureReason}\n                        >\n                          {req.failureReason}\n                        </p>\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-text-secondary hidden sm:table-cell\">\n                      {req.payoutAccount ? (\n                        <span>\n                          {req.payoutAccount.label}\n                          {req.payoutAccount.accountLast4\n                            ? ` ···${req.payoutAccount.accountLast4}`\n                            : ''}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-text-secondary hidden md:table-cell\">\n                      <span title={formatDate(req.createdAt, 'long')}>\n                        {formatRelativeTime(req.createdAt)}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-3 text-text-secondary hidden md:table-cell\">\n                      {req.paidAt ? (\n                        <span className={getWithdrawalStatusColor('PAID')}>\n                          {formatDate(req.paidAt, 'short')}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -26,9 +26,9 @@ var m = () => {
 			className: "text-center space-y-2",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "size-6 text-muted-foreground",
+						className: "size-6 text-text-secondary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -41,11 +41,11 @@ var m = () => {
 					})
 				}),
 				/* @__PURE__ */ d("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Access Denied"
 				}),
 				/* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground max-w-sm",
+					className: "text-sm text-text-secondary max-w-sm",
 					children: "You don't have permission to view credits."
 				})
 			]
@@ -53,12 +53,12 @@ var m = () => {
 	});
 	let D = m || w, O = S.filter((e) => v === "all" ? !0 : e.type === v);
 	if (D && !a) return /* @__PURE__ */ f("div", {
-		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", {
+		className: "space-y-6 px-6 lg:px-8 py-6",
+		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-bg-sunken animate-pulse rounded" }), /* @__PURE__ */ d("div", {
 			className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
 			children: /* @__PURE__ */ f("div", {
-				className: "border border-border rounded-lg p-6",
-				children: [/* @__PURE__ */ d("div", { className: "h-6 w-24 bg-muted animate-pulse rounded mb-2" }), /* @__PURE__ */ d("div", { className: "h-10 w-32 bg-muted animate-pulse rounded" })]
+				className: "border border-border-subtle rounded-lg p-6",
+				children: [/* @__PURE__ */ d("div", { className: "h-6 w-24 bg-bg-sunken animate-pulse rounded mb-2" }), /* @__PURE__ */ d("div", { className: "h-10 w-32 bg-bg-sunken animate-pulse rounded" })]
 			})
 		})]
 	});
@@ -68,9 +68,9 @@ var m = () => {
 			className: "text-center space-y-4",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					className: "size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "size-6 text-destructive",
+						className: "size-6 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -83,17 +83,17 @@ var m = () => {
 					})
 				}),
 				/* @__PURE__ */ d("h2", {
-					className: "text-lg font-semibold text-foreground",
+					className: "text-lg font-semibold text-text-primary",
 					children: "Failed to load credits"
 				}),
 				/* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: T.message
 				}),
 				/* @__PURE__ */ d("button", {
 					type: "button",
 					onClick: () => E(),
-					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					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: "Try Again"
 				})
 			]
@@ -101,22 +101,22 @@ var m = () => {
 	});
 	let k = a?.creditAmount || 0;
 	return /* @__PURE__ */ f("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 px-6 lg:px-8 py-6",
 		children: [
 			/* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
-					className: "text-2xl font-bold text-foreground",
+					className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary",
 					children: n("billing.credits.title", "Credits")
 				}), /* @__PURE__ */ d("p", {
-					className: "text-sm text-muted-foreground mt-1",
+					className: "text-sm text-text-secondary mt-1",
 					children: "Manage your credit balance and view transaction history"
 				})] }), /* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => r("/credits/withdraw"),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 						children: [/* @__PURE__ */ d("svg", {
 							className: "size-4",
 							fill: "none",
@@ -132,7 +132,7 @@ var m = () => {
 					}), /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => r("/checkout/credits"),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						className: "inline-flex items-center gap-2 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: [/* @__PURE__ */ d("svg", {
 							className: "size-4",
 							fill: "none",
@@ -151,26 +151,26 @@ var m = () => {
 			/* @__PURE__ */ f("div", {
 				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 				children: [/* @__PURE__ */ f("div", {
-					className: "border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-6",
+					className: "border border-border-subtle rounded-lg bg-gradient-to-br from-[var(--color-accent-soft)] to-[var(--color-accent-soft)] p-6",
 					children: [
 						/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: "Available Balance"
 						}),
 						/* @__PURE__ */ f("p", {
-							className: "text-3xl font-bold text-foreground mt-2",
+							className: "text-3xl font-bold text-text-primary mt-2",
 							children: [k.toLocaleString(), " Credits"]
 						}),
 						/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground mt-2",
+							className: "text-sm text-text-secondary mt-2",
 							children: a?.name
 						})
 					]
 				}), /* @__PURE__ */ f("div", {
-					className: "border border-border rounded-lg bg-card p-6",
+					className: "border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 p-5",
 					children: [
 						/* @__PURE__ */ f("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: [
 								"Transactions (",
 								g,
@@ -178,20 +178,20 @@ var m = () => {
 							]
 						}),
 						/* @__PURE__ */ d("p", {
-							className: "text-2xl font-bold text-foreground mt-2",
+							className: "text-2xl md:text-3xl font-semibold tracking-tight text-text-primary mt-2",
 							children: C.totalCount
 						}),
 						/* @__PURE__ */ d("p", {
-							className: "text-sm text-muted-foreground mt-2",
+							className: "text-sm text-text-secondary mt-2",
 							children: "Total transactions"
 						})
 					]
 				})]
 			}),
 			/* @__PURE__ */ f("div", {
-				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle",
 				children: [/* @__PURE__ */ d("div", {
-					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken",
 					children: [
 						7,
 						30,
@@ -199,11 +199,11 @@ var m = () => {
 					].map((e) => /* @__PURE__ */ f("button", {
 						type: "button",
 						onClick: () => _(e),
-						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${g === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${g === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						children: [e, "d"]
 					}, e))
 				}), /* @__PURE__ */ d("div", {
-					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					className: "inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken",
 					children: [
 						"all",
 						"purchase",
@@ -213,18 +213,18 @@ var m = () => {
 					].map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => y(e),
-						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${v === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						className: `px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${v === e ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary"}`,
 						children: e === "all" ? "All" : t(e)
 					}, e))
 				})]
 			}),
 			O.length === 0 ? /* @__PURE__ */ f("div", {
-				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-lg",
 				children: [
 					/* @__PURE__ */ d("div", {
-						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						className: "size-12 rounded-full bg-bg-sunken flex items-center justify-center mb-4",
 						children: /* @__PURE__ */ d("svg", {
-							className: "size-6 text-muted-foreground",
+							className: "size-6 text-text-secondary",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -237,11 +237,11 @@ var m = () => {
 						})
 					}),
 					/* @__PURE__ */ d("h3", {
-						className: "text-lg font-medium text-foreground",
+						className: "text-lg font-medium text-text-primary",
 						children: "No transactions found"
 					}),
 					/* @__PURE__ */ d("p", {
-						className: "text-sm text-muted-foreground mt-1",
+						className: "text-sm text-text-secondary mt-1",
 						children: v === "all" ? "No credit transactions in this period." : "No transactions match your filter."
 					})
 				]
@@ -252,7 +252,7 @@ var m = () => {
 					children: /* @__PURE__ */ d("button", {
 						type: "button",
 						onClick: () => x((e) => e + 1),
-						className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						className: "px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors",
 						children: "Load More"
 					})
 				})]
@@ -262,7 +262,7 @@ var m = () => {
 }, h = ({ transaction: o }) => {
 	let s = i(o.status), c = o.type === "purchase" || o.type === "adjustment" || o.type === "granted";
 	return /* @__PURE__ */ f("div", {
-		className: "flex items-center gap-4 p-4 border border-border rounded-lg bg-card hover:shadow-sm transition-shadow",
+		className: "flex items-center gap-4 p-4 border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow",
 		children: [
 			/* @__PURE__ */ d("div", {
 				className: `size-10 rounded-full flex items-center justify-center ${c ? e.success.bg : e.warning.bg}`,
@@ -295,14 +295,14 @@ var m = () => {
 				children: [/* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ d("p", {
-						className: "font-medium text-foreground capitalize",
+						className: "font-medium text-text-primary capitalize",
 						children: t(o.type)
 					}), /* @__PURE__ */ d("span", {
 						className: `px-2 py-0.5 text-xs font-medium rounded ${a(s)}`,
 						children: o.status
 					})]
 				}), /* @__PURE__ */ f("p", {
-					className: "text-sm text-muted-foreground mt-0.5",
+					className: "text-sm text-text-secondary mt-0.5",
 					children: [
 						r(o.createdAt),
 						" • ",
@@ -313,7 +313,7 @@ var m = () => {
 			/* @__PURE__ */ d("div", {
 				className: "text-right",
 				children: /* @__PURE__ */ f("p", {
-					className: `font-semibold ${c ? e.success.text : "text-foreground"}`,
+					className: `font-semibold ${c ? e.success.text : "text-text-primary"}`,
 					children: [
 						c ? "+" : "-",
 						o.amount.toLocaleString(),