@burdenoff/microfe-billing 2026.821.1 → 2026.825.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';\nimport { PagePurpose, EmphasisPanel, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\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  const body = (\n    <>\n      <p className=\"text-sm text-text-secondary\">{label}</p>\n      <p\n        className={`text-2xl font-bold mt-1 ${highlight ? 'text-text-link' : 'text-text-primary'}`}\n      >\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    </>\n  );\n  // The withdrawable balance is the single most important figure on this page —\n  // render it as the page's one emphasis zone.\n  if (highlight) {\n    return <EmphasisPanel className=\"p-5\">{body}</EmphasisPanel>;\n  }\n  return <div className=\"border border-border-subtle rounded-lg p-5 bg-bg-surface\">{body}</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        <PagePurpose className=\"mt-3\">\n          Turn the credits you bought or earned (from sales and referrals) back into real money. Add\n          a bank account or UPI as a payout destination, request a withdrawal for any amount up to\n          your withdrawable balance, and track each request here until it is paid. Granted credits\n          (coupons, admin grants) are not withdrawable.\n        </PagePurpose>\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            <IllustratedEmptyState\n              illustration=\"empty-generic\"\n              title=\"No payout accounts yet\"\n              description=\"Add a bank account or UPI to receive your withdrawn credits.\"\n              action={\n                <button\n                  type=\"button\"\n                  onClick={() => setShowAddAccount(true)}\n                  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\"\n                >\n                  Add a bank account or UPI\n                </button>\n              }\n            />\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          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No withdrawal requests yet\"\n            description=\"Once you request a withdrawal, its status will appear here.\"\n          />\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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"}
+{"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';\nimport { PagePurpose, EmphasisPanel, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\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  const body = (\n    <>\n      <p className=\"text-sm text-text-secondary\">{label}</p>\n      <p\n        className={`text-2xl font-bold mt-1 ${highlight ? 'text-text-link' : 'text-text-primary'}`}\n      >\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    </>\n  );\n  // The withdrawable balance is the single most important figure on this page —\n  // render it as the page's one emphasis zone.\n  if (highlight) {\n    return <EmphasisPanel className=\"p-5\">{body}</EmphasisPanel>;\n  }\n  return <div className=\"border border-border-subtle rounded-lg p-5 bg-bg-surface\">{body}</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        <PagePurpose className=\"mt-3\">\n          Turn the credits you bought or earned (from sales and referrals) back into real money. Add\n          a bank account or UPI as a payout destination, request a withdrawal for any amount up to\n          your withdrawable balance, and track each request here until it is paid. Granted credits\n          (coupons, admin grants) are not withdrawable.\n        </PagePurpose>\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            <IllustratedEmptyState\n              illustration=\"empty-generic\"\n              title=\"No payout accounts yet\"\n              description=\"Add a bank account or UPI to receive your withdrawn credits.\"\n              action={\n                <button\n                  type=\"button\"\n                  onClick={() => setShowAddAccount(true)}\n                  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\"\n                >\n                  Add a bank account or UPI\n                </button>\n              }\n            />\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          <IllustratedEmptyState\n            illustration=\"empty-data\"\n            title=\"No withdrawal requests yet\"\n            description=\"Once you request a withdrawal, its status will appear here.\"\n          />\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.map

@@ -1 +1 @@
-{"version":3,"file":"CreditsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credits Page\n * Displays credit balance and transaction history\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatDate,\n  formatRelativeTime,\n  formatCreditTransactionType,\n} from '../../../shared/utils/format';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { EmphasisPanel, PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccount?.id || '',\n    days,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\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 max-w-sm\">\n            You don&apos;t have permission to view credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions = transactions.filter((tx) => {\n    if (filterType === 'all') return true;\n    return tx.type === filterType;\n  });\n\n  // Loading state\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div className=\"border border-border-subtle rounded-lg p-6\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded mb-2\" />\n            <div className=\"h-10 w-32 bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load credits</h2>\n          <p className=\"text-sm text-text-secondary\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            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\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const creditBalance = billingAccount?.creditAmount || 0;\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.credits.title', 'Credits')}\n          </h1>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            Manage your credit balance and view transaction history\n          </p>\n          <PagePurpose className=\"mt-3\">\n            {tr(\n              'billing.credits.purpose',\n              'Credits are prepaid balance you can spend on usage and purchases instead of paying per invoice. See your available balance, top it up, withdraw unused credits, and review every credit purchase, grant and deduction over time.'\n            )}\n          </PagePurpose>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/credits/withdraw')}\n            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\"\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=\"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            Withdraw\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/checkout/credits')}\n            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\"\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=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Purchase Credits\n          </button>\n        </div>\n      </div>\n\n      {/* Balance Card */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <EmphasisPanel className=\"p-6\">\n          <p className=\"text-sm text-text-secondary\">Available Balance</p>\n          <p className=\"text-3xl font-bold tabular-nums text-text-primary mt-2\">\n            {creditBalance.toLocaleString()} Credits\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">{billingAccount?.name}</p>\n        </EmphasisPanel>\n\n        <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5\">\n          <p className=\"text-sm text-text-secondary\">Transactions ({days}d)</p>\n          <p className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary mt-2\">\n            {pagination.totalCount}\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">Total transactions</p>\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => setDays(d)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment', 'granted'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => setFilterType(type)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <IllustratedEmptyState\n          illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n          title=\"No transactions found\"\n          description={\n            filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'No credit transactions in this period.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((tx) => (\n            <TransactionRow key={tx.id} transaction={tx} />\n          ))}\n\n          {/* Pagination */}\n          {pagination.hasMore && (\n            <div className=\"flex justify-center pt-4\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((p) => p + 1)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Load More\n              </button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Transaction Row Component\n// ============================================================================\n\ninterface TransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst TransactionRow: FC<TransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n  const isCredit =\n    transaction.type === 'purchase' ||\n    transaction.type === 'adjustment' ||\n    transaction.type === 'granted';\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center ${\n          isCredit ? statusTokens.success.bg : statusTokens.warning.bg\n        }`}\n      >\n        {isCredit ? (\n          <svg\n            className={`size-5 ${statusTokens.success.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n          </svg>\n        ) : (\n          <svg\n            className={`size-5 ${statusTokens.warning.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n          </svg>\n        )}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDate(transaction.createdAt, 'short')}\n        </p>\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right\">\n        <p\n          className={`font-semibold ${isCredit ? statusTokens.success.text : 'text-text-primary'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {transaction.amount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CreditsPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditsPage.tsx"],"sourcesContent":["/**\n * Credits Module - Credits Page\n * Displays credit balance and transaction history\n */\n\nimport { useState, type FC } from 'react';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useCreditTransactions } from '../hooks/useCredits';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport {\n  formatDate,\n  formatRelativeTime,\n  formatCreditTransactionType,\n} from '../../../shared/utils/format';\nimport {\n  getCreditTransactionStatusColor,\n  getStatusBadgeClasses,\n} from '../../../shared/utils/status';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditTransaction, CreditTransactionType } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { EmphasisPanel, PagePurpose, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\n\ntype FilterType = 'all' | CreditTransactionType;\n\nexport const CreditsPage: FC = () => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const navigateTo = useBillingNavigate();\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n\n  const [days, setDays] = useState(30);\n  const [filterType, setFilterType] = useState<FilterType>('all');\n  const [page, setPage] = useState(1);\n\n  const {\n    transactions,\n    pagination,\n    isLoading: isLoadingTransactions,\n    error,\n    refetch,\n  } = useCreditTransactions({\n    billingAccountId: billingAccount?.id || '',\n    days,\n    page,\n    pageSize: 20,\n  });\n\n  // Permission check\n  if (!permissions.canViewCredits) {\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 max-w-sm\">\n            You don&apos;t have permission to view credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  const isLoading = isLoadingAccount || isLoadingTransactions;\n\n  // Filter transactions\n  const filteredTransactions = transactions.filter((tx) => {\n    if (filterType === 'all') return true;\n    return tx.type === filterType;\n  });\n\n  // Loading state\n  if (isLoading && !billingAccount) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div className=\"border border-border-subtle rounded-lg p-6\">\n            <div className=\"h-6 w-24 bg-bg-sunken animate-pulse rounded mb-2\" />\n            <div className=\"h-10 w-32 bg-bg-sunken animate-pulse rounded\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n        <div className=\"text-center space-y-4\">\n          <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n            <svg\n              className=\"size-6 text-status-error-text\"\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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load credits</h2>\n          <p className=\"text-sm text-text-secondary\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={() => refetch()}\n            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\"\n          >\n            Try Again\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const creditBalance = billingAccount?.creditAmount || 0;\n\n  return (\n    <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n            {tr('billing.credits.title', 'Credits')}\n          </h1>\n          <p className=\"text-sm text-text-secondary mt-1\">\n            Manage your credit balance and view transaction history\n          </p>\n          <PagePurpose className=\"mt-3\">\n            {tr(\n              'billing.credits.purpose',\n              'Credits are prepaid balance you can spend on usage and purchases instead of paying per invoice. See your available balance, top it up, withdraw unused credits, and review every credit purchase, grant and deduction over time.'\n            )}\n          </PagePurpose>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/credits/withdraw')}\n            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\"\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=\"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            Withdraw\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/checkout/credits')}\n            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\"\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=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n            Purchase Credits\n          </button>\n        </div>\n      </div>\n\n      {/* Balance Card */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <EmphasisPanel className=\"p-6\">\n          <p className=\"text-sm text-text-secondary\">Available Balance</p>\n          <p className=\"text-3xl font-bold tabular-nums text-text-primary mt-2\">\n            {creditBalance.toLocaleString()} Credits\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">{billingAccount?.name}</p>\n        </EmphasisPanel>\n\n        <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5\">\n          <p className=\"text-sm text-text-secondary\">Transactions ({days}d)</p>\n          <p className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary mt-2\">\n            {pagination.totalCount}\n          </p>\n          <p className=\"text-sm text-text-secondary mt-2\">Total transactions</p>\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center gap-4 pb-4 border-b border-border-subtle\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {[7, 30, 90].map((d) => (\n            <button\n              type=\"button\"\n              key={d}\n              onClick={() => setDays(d)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors ${\n                days === d\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {d}d\n            </button>\n          ))}\n        </div>\n\n        {/* Transaction Type Filter */}\n        <div className=\"inline-flex rounded-lg border border-border-subtle p-1 bg-bg-sunken\">\n          {(['all', 'purchase', 'usage', 'adjustment', 'granted'] as FilterType[]).map((type) => (\n            <button\n              type=\"button\"\n              key={type}\n              onClick={() => setFilterType(type)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-button transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary'\n              }`}\n            >\n              {type === 'all' ? 'All' : formatCreditTransactionType(type as CreditTransactionType)}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Transactions List */}\n      {filteredTransactions.length === 0 ? (\n        <IllustratedEmptyState\n          illustration={filterType !== 'all' ? 'empty-search' : 'empty-data'}\n          title=\"No transactions found\"\n          description={\n            filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'No credit transactions in this period.'\n          }\n        />\n      ) : (\n        <div className=\"space-y-3\">\n          {filteredTransactions.map((tx) => (\n            <TransactionRow key={tx.id} transaction={tx} />\n          ))}\n\n          {/* Pagination */}\n          {pagination.hasMore && (\n            <div className=\"flex justify-center pt-4\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((p) => p + 1)}\n                className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Load More\n              </button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Transaction Row Component\n// ============================================================================\n\ninterface TransactionRowProps {\n  transaction: CreditTransaction;\n}\n\nconst TransactionRow: FC<TransactionRowProps> = ({ transaction }) => {\n  const statusColor = getCreditTransactionStatusColor(transaction.status);\n  const isCredit =\n    transaction.type === 'purchase' ||\n    transaction.type === 'adjustment' ||\n    transaction.type === 'granted';\n\n  return (\n    <div className=\"flex items-center gap-4 p-4 border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`size-10 rounded-full flex items-center justify-center ${\n          isCredit ? statusTokens.success.bg : statusTokens.warning.bg\n        }`}\n      >\n        {isCredit ? (\n          <svg\n            className={`size-5 ${statusTokens.success.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n          </svg>\n        ) : (\n          <svg\n            className={`size-5 ${statusTokens.warning.icon}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n          </svg>\n        )}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <p className=\"font-medium text-text-primary capitalize\">\n            {formatCreditTransactionType(transaction.type)}\n          </p>\n          <span\n            className={`px-2 py-0.5 text-xs font-medium rounded ${getStatusBadgeClasses(statusColor)}`}\n          >\n            {transaction.status}\n          </span>\n        </div>\n        <p className=\"text-sm text-text-secondary mt-0.5\">\n          {formatRelativeTime(transaction.createdAt)} • {formatDate(transaction.createdAt, 'short')}\n        </p>\n      </div>\n\n      {/* Amount */}\n      <div className=\"text-right\">\n        <p\n          className={`font-semibold ${isCredit ? statusTokens.success.text : 'text-text-primary'}`}\n        >\n          {isCredit ? '+' : '-'}\n          {transaction.amount.toLocaleString()} credits\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/dashboard/components/ActiveSubscriptionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveSubscriptionCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/ActiveSubscriptionCard.tsx"],"sourcesContent":["/**\n * Active Subscription Card Component\n * Displays the active subscription details with renewal info\n */\n\nimport { type FC, useMemo } from 'react';\nimport {\n  Crown,\n  Calendar,\n  ArrowRight,\n  RefreshCw,\n  Clock,\n  CreditCard,\n  Zap,\n  AlertTriangle,\n  Coins,\n} from 'lucide-react';\nimport type { BillingSubscription } from '../../../shared/types';\nimport { statusTokens, alertTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface ActiveSubscriptionCardProps {\n  subscription: BillingSubscription | null;\n  onViewDetails?: () => void;\n  onUpgrade?: () => void;\n  onManage?: () => void;\n  onPurchasePlan?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const ActiveSubscriptionCard: FC<ActiveSubscriptionCardProps> = ({\n  subscription,\n  onViewDetails,\n  onUpgrade,\n  onManage,\n  onPurchasePlan,\n  className = '',\n  dataTour,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const formatDate = (dateString: string | undefined) => {\n    if (!dateString) return 'N/A';\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    });\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const daysUntilEnd = useMemo(() => {\n    if (!subscription?.endDate) return null;\n    const end = new Date(subscription.endDate);\n    const now = new Date();\n    const diff = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));\n    return diff;\n  }, [subscription?.endDate]);\n\n  const isExpiringSoon = daysUntilEnd !== null && daysUntilEnd <= 7 && daysUntilEnd > 0;\n  const isExpired = daysUntilEnd !== null && daysUntilEnd <= 0;\n\n  const getStatusColor = () => {\n    if (isExpired) return `${statusTokens.error.text} ${statusTokens.error.bg}`;\n    if (isExpiringSoon) return `${statusTokens.warning.text} ${statusTokens.warning.bg}`;\n    return `${statusTokens.success.text} ${statusTokens.success.bg}`;\n  };\n\n  const getStatusText = () => {\n    if (isExpired) return 'Expired';\n    if (isExpiringSoon) return 'Expiring Soon';\n    return 'Active';\n  };\n\n  // No subscription state\n  if (!subscription) {\n    return (\n      <section\n        data-tour={dataTour}\n        className={`border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 ${className}`}\n      >\n        <div className=\"flex flex-col items-center text-center py-4\">\n          <div className=\"size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <Zap className=\"size-8 text-text-link\" />\n          </div>\n          <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('billing.overview.noActiveSubscription', 'No Active Subscription')}\n          </h3>\n          <p className=\"text-sm text-text-secondary mb-6 max-w-sm\">\n            Subscribe to a plan to unlock premium features and get the most out of your account\n          </p>\n          {onPurchasePlan && (\n            <button\n              type=\"button\"\n              onClick={onPurchasePlan}\n              className=\"inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n            >\n              Browse Plans\n              <ArrowRight className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  const plan = subscription.plan;\n\n  return (\n    <section\n      data-tour={dataTour}\n      className={`border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden ${className}`}\n    >\n      {/* Expiring Soon Banner */}\n      {isExpiringSoon && (\n        <div className={`px-4 py-2 ${alertTokens.warning.container} border-b`}>\n          <div className={`flex items-center gap-2 ${alertTokens.warning.text}`}>\n            <AlertTriangle className=\"size-4\" />\n            <span className=\"text-sm font-medium\">\n              Your subscription expires in {daysUntilEnd} day{daysUntilEnd !== 1 ? 's' : ''}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Header */}\n      <header className=\"p-4 sm:p-6 border-b border-border-subtle\">\n        <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"size-12 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0\">\n              <Crown className=\"size-6 text-action-primary-text\" />\n            </div>\n            <div>\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {plan?.name || 'Subscription'}\n                </h3>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}\n                >\n                  {getStatusText()}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                {plan && formatCurrency(plan.price, plan.currency)} / {plan?.duration || 'month'}\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {onManage && (\n              <button\n                type=\"button\"\n                onClick={onManage}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Manage\n              </button>\n            )}\n            {onUpgrade && !isExpired && (\n              <button\n                type=\"button\"\n                onClick={onUpgrade}\n                className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Upgrade\n              </button>\n            )}\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 sm:p-6\">\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n          {/* Start Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Started\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <Calendar className=\"size-4 text-text-secondary\" />\n              {formatDate(subscription.startDate)}\n            </p>\n          </div>\n\n          {/* End Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              {isExpired ? 'Expired' : 'Ends'}\n            </p>\n            <p\n              className={`text-sm font-medium flex items-center gap-2 ${isExpired ? statusTokens.error.text : isExpiringSoon ? statusTokens.warning.text : 'text-text-primary'}`}\n            >\n              <Clock className=\"size-4\" />\n              {formatDate(subscription.endDate)}\n            </p>\n          </div>\n\n          {/* Auto Renewal */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Auto Renewal\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <RefreshCw\n                className={`size-4 ${subscription.autoRenewal ? statusTokens.success.icon : 'text-text-secondary'}`}\n              />\n              {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n            </p>\n          </div>\n\n          {/* Payment Gateway */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Via\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              {subscription.paymentGateway === 'CREDITS' ? (\n                <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              ) : (\n                <CreditCard className=\"size-4 text-text-secondary\" />\n              )}\n              {subscription.paymentGateway === 'CREDITS'\n                ? 'Credits'\n                : subscription.paymentGateway === 'STRIPE'\n                  ? 'Stripe'\n                  : subscription.paymentGateway === 'RAZORPAY'\n                    ? 'Razorpay'\n                    : subscription.paymentGateway || 'N/A'}\n            </p>\n          </div>\n        </div>\n\n        {/* Next Billing */}\n        {subscription.nextBillingDate && subscription.autoRenewal && !isExpired && (\n          <div className=\"mt-6 p-4 rounded-lg bg-bg-sunken border border-border-subtle\">\n            <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2\">\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.overview.nextBillingDate', 'Next billing date')}\n                </p>\n                <p className=\"text-xs text-text-secondary\">You&apos;ll be charged automatically</p>\n              </div>\n              <p className=\"text-sm font-semibold text-text-primary\">\n                {formatDate(subscription.nextBillingDate)}\n              </p>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Footer */}\n      {onViewDetails && (\n        <footer className=\"px-4 sm:px-6 py-3 border-t border-border-subtle bg-bg-sunken\">\n          <button\n            type=\"button\"\n            onClick={onViewDetails}\n            className=\"w-full flex items-center justify-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View Subscription Details\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </footer>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ActiveSubscriptionCard.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/components/ActiveSubscriptionCard.tsx"],"sourcesContent":["/**\n * Active Subscription Card Component\n * Displays the active subscription details with renewal info\n */\n\nimport { type FC, useMemo } from 'react';\nimport {\n  Crown,\n  Calendar,\n  ArrowRight,\n  RefreshCw,\n  Clock,\n  CreditCard,\n  Zap,\n  AlertTriangle,\n  Coins,\n} from 'lucide-react';\nimport type { BillingSubscription } from '../../../shared/types';\nimport { statusTokens, alertTokens } from '../../../shared/utils/tokens';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface ActiveSubscriptionCardProps {\n  subscription: BillingSubscription | null;\n  onViewDetails?: () => void;\n  onUpgrade?: () => void;\n  onManage?: () => void;\n  onPurchasePlan?: () => void;\n  className?: string;\n  /** Optional tour anchor applied to the section root (for onboarding tours). */\n  dataTour?: string;\n}\n\nexport const ActiveSubscriptionCard: FC<ActiveSubscriptionCardProps> = ({\n  subscription,\n  onViewDetails,\n  onUpgrade,\n  onManage,\n  onPurchasePlan,\n  className = '',\n  dataTour,\n}) => {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const formatDate = (dateString: string | undefined) => {\n    if (!dateString) return 'N/A';\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    });\n  };\n\n  const formatCurrency = (amount: number, currency: string) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: currency || 'USD',\n      minimumFractionDigits: 2,\n    }).format(amount);\n  };\n\n  const daysUntilEnd = useMemo(() => {\n    if (!subscription?.endDate) return null;\n    const end = new Date(subscription.endDate);\n    const now = new Date();\n    const diff = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));\n    return diff;\n  }, [subscription?.endDate]);\n\n  const isExpiringSoon = daysUntilEnd !== null && daysUntilEnd <= 7 && daysUntilEnd > 0;\n  const isExpired = daysUntilEnd !== null && daysUntilEnd <= 0;\n\n  const getStatusColor = () => {\n    if (isExpired) return `${statusTokens.error.text} ${statusTokens.error.bg}`;\n    if (isExpiringSoon) return `${statusTokens.warning.text} ${statusTokens.warning.bg}`;\n    return `${statusTokens.success.text} ${statusTokens.success.bg}`;\n  };\n\n  const getStatusText = () => {\n    if (isExpired) return 'Expired';\n    if (isExpiringSoon) return 'Expiring Soon';\n    return 'Active';\n  };\n\n  // No subscription state\n  if (!subscription) {\n    return (\n      <section\n        data-tour={dataTour}\n        className={`border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 ${className}`}\n      >\n        <div className=\"flex flex-col items-center text-center py-4\">\n          <div className=\"size-16 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n            <Zap className=\"size-8 text-text-link\" />\n          </div>\n          <h3 className=\"text-lg font-semibold text-text-primary mb-2\">\n            {tr('billing.overview.noActiveSubscription', 'No Active Subscription')}\n          </h3>\n          <p className=\"text-sm text-text-secondary mb-6 max-w-sm\">\n            Subscribe to a plan to unlock premium features and get the most out of your account\n          </p>\n          {onPurchasePlan && (\n            <button\n              type=\"button\"\n              onClick={onPurchasePlan}\n              className=\"inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n            >\n              Browse Plans\n              <ArrowRight className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </section>\n    );\n  }\n\n  const plan = subscription.plan;\n\n  return (\n    <section\n      data-tour={dataTour}\n      className={`border border-border-seam rounded-card bg-bg-surface bg-accent-wash shadow-[var(--shadow-pop)] overflow-hidden ${className}`}\n    >\n      {/* Expiring Soon Banner */}\n      {isExpiringSoon && (\n        <div className={`px-4 py-2 ${alertTokens.warning.container} border-b`}>\n          <div className={`flex items-center gap-2 ${alertTokens.warning.text}`}>\n            <AlertTriangle className=\"size-4\" />\n            <span className=\"text-sm font-medium\">\n              Your subscription expires in {daysUntilEnd} day{daysUntilEnd !== 1 ? 's' : ''}\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Header */}\n      <header className=\"p-4 sm:p-6 border-b border-border-subtle\">\n        <div className=\"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"size-12 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0\">\n              <Crown className=\"size-6 text-action-primary-text\" />\n            </div>\n            <div>\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {plan?.name || 'Subscription'}\n                </h3>\n                <span\n                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}\n                >\n                  {getStatusText()}\n                </span>\n              </div>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                {plan && formatCurrency(plan.price, plan.currency)} / {plan?.duration || 'month'}\n              </p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {onManage && (\n              <button\n                type=\"button\"\n                onClick={onManage}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n              >\n                Manage\n              </button>\n            )}\n            {onUpgrade && !isExpired && (\n              <button\n                type=\"button\"\n                onClick={onUpgrade}\n                className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg rounded-button hover:bg-action-primary-bgHover transition-colors\"\n              >\n                Upgrade\n              </button>\n            )}\n          </div>\n        </div>\n      </header>\n\n      {/* Body */}\n      <div className=\"p-4 sm:p-6\">\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n          {/* Start Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Started\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <Calendar className=\"size-4 text-text-secondary\" />\n              {formatDate(subscription.startDate)}\n            </p>\n          </div>\n\n          {/* End Date */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              {isExpired ? 'Expired' : 'Ends'}\n            </p>\n            <p\n              className={`text-sm font-medium flex items-center gap-2 ${isExpired ? statusTokens.error.text : isExpiringSoon ? statusTokens.warning.text : 'text-text-primary'}`}\n            >\n              <Clock className=\"size-4\" />\n              {formatDate(subscription.endDate)}\n            </p>\n          </div>\n\n          {/* Auto Renewal */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Auto Renewal\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              <RefreshCw\n                className={`size-4 ${subscription.autoRenewal ? statusTokens.success.icon : 'text-text-secondary'}`}\n              />\n              {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n            </p>\n          </div>\n\n          {/* Payment Gateway */}\n          <div className=\"space-y-1.5\">\n            <p className=\"text-xs font-medium text-text-secondary uppercase tracking-wide\">\n              Payment Via\n            </p>\n            <p className=\"text-sm font-medium text-text-primary flex items-center gap-2\">\n              {subscription.paymentGateway === 'CREDITS' ? (\n                <Coins className={`size-4 ${statusTokens.warning.icon}`} />\n              ) : (\n                <CreditCard className=\"size-4 text-text-secondary\" />\n              )}\n              {subscription.paymentGateway === 'CREDITS'\n                ? 'Credits'\n                : subscription.paymentGateway === 'STRIPE'\n                  ? 'Stripe'\n                  : subscription.paymentGateway === 'RAZORPAY'\n                    ? 'Razorpay'\n                    : subscription.paymentGateway || 'N/A'}\n            </p>\n          </div>\n        </div>\n\n        {/* Next Billing */}\n        {subscription.nextBillingDate && subscription.autoRenewal && !isExpired && (\n          <div className=\"mt-6 p-4 rounded-lg bg-bg-sunken border border-border-subtle\">\n            <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2\">\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {tr('billing.overview.nextBillingDate', 'Next billing date')}\n                </p>\n                <p className=\"text-xs text-text-secondary\">You&apos;ll be charged automatically</p>\n              </div>\n              <p className=\"text-sm font-semibold text-text-primary\">\n                {formatDate(subscription.nextBillingDate)}\n              </p>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Footer */}\n      {onViewDetails && (\n        <footer className=\"px-4 sm:px-6 py-3 border-t border-border-subtle bg-bg-sunken\">\n          <button\n            type=\"button\"\n            onClick={onViewDetails}\n            className=\"w-full flex items-center justify-center gap-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n          >\n            View Subscription Details\n            <ArrowRight className=\"size-4\" />\n          </button>\n        </footer>\n      )}\n    </section>\n  );\n};\n"],"mappings":"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"}