@burdenoff/microfe-billing 2026.510.114

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

@@ -0,0 +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} from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport {\n  fetchPayoutAccounts,\n  addPayoutAccount,\n  type PayoutAccount,\n  type PayoutRequest,\n} from '../../earnings/api';\nimport { formatDate, formatRelativeTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditBalanceByType } from '../../../shared/types';\n\n// ============================================================================\n// API helpers (credit-specific)\n// ============================================================================\n\ninterface GatewayContext {\n  apiGatewayUrl?: string;\n  authToken?: string;\n  orgId?: string;\n}\n\nasync function fetchCreditBalanceByType(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<CreditBalanceByType> {\n  const data = await directBillingGraphqlRequest<\n    { getCreditBalanceByType: CreditBalanceByType },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: GetCreditBalanceByTypeDocument,\n    variables: { billingAccountId },\n  });\n  return data.getCreditBalanceByType;\n}\n\nasync function requestCreditWithdrawal(\n  input: {\n    billingAccountId: string;\n    creditAmount: number;\n    payoutAccountId: string;\n    currency?: string;\n    notes?: string;\n  },\n  ctx: GatewayContext\n): Promise<{ id: string; status: string; requestedAmount: number; currency: string }> {\n  const data = await directBillingGraphqlRequest<\n    {\n      requestCreditWithdrawal: {\n        id: string;\n        status: string;\n        requestedAmount: number;\n        currency: string;\n      };\n    },\n    { input: typeof input }\n  >({\n    ...ctx,\n    query: RequestCreditWithdrawalDocument,\n    variables: { input },\n  });\n  return data.requestCreditWithdrawal;\n}\n\nasync function fetchCreditWithdrawalHistory(\n  billingAccountId: string,\n  ctx: GatewayContext\n): Promise<PayoutRequest[]> {\n  const data = await directBillingGraphqlRequest<\n    { myPayoutRequests: { items: PayoutRequest[] } },\n    { billingAccountId: string }\n  >({\n    ...ctx,\n    query: CreditWithdrawalHistoryDocument,\n    variables: { billingAccountId },\n  });\n  return data.myPayoutRequests.items;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface BalanceCardProps {\n  label: string;\n  value: number;\n  description?: string;\n  highlight?: boolean;\n}\n\nconst BalanceCard: FC<BalanceCardProps> = ({ label, value, description, highlight }) => (\n  <div\n    className={`border border-border rounded-lg p-5 ${\n      highlight ? 'bg-gradient-to-br from-primary/5 to-primary/10' : 'bg-card'\n    }`}\n  >\n    <p className=\"text-sm text-muted-foreground\">{label}</p>\n    <p className={`text-2xl font-bold mt-1 ${highlight ? 'text-primary' : 'text-foreground'}`}>\n      {value.toLocaleString()} <span className=\"text-base font-normal\">credits</span>\n    </p>\n    {description && <p className=\"text-xs text-muted-foreground mt-1\">{description}</p>}\n  </div>\n);\n\nfunction getWithdrawalStatusColor(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return statusTokens.success.text;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return statusTokens.info.text;\n    case 'REQUESTED':\n      return statusTokens.warning.text;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return statusTokens.error.text;\n    default:\n      return 'text-muted-foreground';\n  }\n}\n\nfunction getWithdrawalStatusBg(status: string): string {\n  switch (status.toUpperCase()) {\n    case 'PAID':\n      return `${statusTokens.success.bg} ${statusTokens.success.text}`;\n    case 'APPROVED':\n    case 'PROCESSING':\n      return `${statusTokens.info.bg} ${statusTokens.info.text}`;\n    case 'REQUESTED':\n      return `${statusTokens.warning.bg} ${statusTokens.warning.text}`;\n    case 'REJECTED':\n    case 'FAILED':\n    case 'CANCELED':\n      return `${statusTokens.error.bg} ${statusTokens.error.text}`;\n    default:\n      return 'bg-muted text-muted-foreground';\n  }\n}\n\n// ============================================================================\n// Main Page\n// ============================================================================\n\nexport const CreditWithdrawalPage: FC = () => {\n  const permissions = useBillingPermissions();\n  const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n  const { emit } = useBillingEventEmitter();\n\n  // Balance state\n  const [balance, setBalance] = useState<CreditBalanceByType | null>(null);\n  const [isLoadingBalance, setIsLoadingBalance] = useState(false);\n  const [balanceError, setBalanceError] = useState<string | null>(null);\n\n  // Payout accounts state\n  const [payoutAccounts, setPayoutAccounts] = useState<PayoutAccount[]>([]);\n  const [isLoadingAccounts, setIsLoadingAccounts] = useState(false);\n\n  // Withdrawal history state\n  const [history, setHistory] = useState<PayoutRequest[]>([]);\n  const [isLoadingHistory, setIsLoadingHistory] = useState(false);\n\n  // Withdrawal form state\n  const [selectedAccountId, setSelectedAccountId] = useState<string>('');\n  const [creditAmount, setCreditAmount] = useState<string>('');\n  const [notes, setNotes] = useState<string>('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [submitSuccess, setSubmitSuccess] = useState(false);\n\n  // New payout account form state\n  const [showAddAccount, setShowAddAccount] = useState(false);\n  const [accountForm, setAccountForm] = useState({\n    label: '',\n    type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' | 'UPI' | 'WALLET',\n    accountNumber: '',\n    ifscCode: '',\n    routingNumber: '',\n    upiId: '',\n    country: 'IN',\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  const handleAddAccount = async () => {\n    if (!billingAccountId) return;\n    setAddAccountError(null);\n    setIsAddingAccount(true);\n    try {\n      const details: Record<string, string> = {};\n      if (accountForm.type === 'BANK_ACCOUNT') {\n        if (accountForm.country === 'IN') {\n          details.accountNumber = accountForm.accountNumber;\n          details.ifscCode = accountForm.ifscCode;\n        } else {\n          details.accountNumber = accountForm.accountNumber;\n          details.routingNumber = accountForm.routingNumber;\n        }\n      } else if (accountForm.type === 'UPI') {\n        details.upiId = accountForm.upiId;\n      }\n\n      await addPayoutAccount(\n        {\n          billingAccountId,\n          label: accountForm.label,\n          type: accountForm.type,\n          country: accountForm.country,\n          currency: accountForm.currency,\n          accountDetails: details,\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',\n        accountNumber: '',\n        ifscCode: '',\n        routingNumber: '',\n        upiId: '',\n        country: 'IN',\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  // 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=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground\">\n            You don&apos;t have permission to withdraw credits.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (isLoadingAccount && !billingAccount) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <div className=\"h-8 w-64 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n          {[1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-5\">\n              <div className=\"h-4 w-24 bg-muted animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const withdrawable = balance?.withdrawable ?? 0;\n  const amount = parseFloat(creditAmount) || 0;\n  const amountValid = amount > 0 && amount <= withdrawable;\n  const activeAccounts = payoutAccounts.filter((a) => a.status !== 'ARCHIVED');\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold text-foreground\">Withdraw Credits</h1>\n        <p className=\"text-sm text-muted-foreground mt-1\">\n          Convert your withdrawable credits (purchased &amp; earned) to a payout\n        </p>\n      </div>\n\n      {/* Balance breakdown */}\n      <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n        {isLoadingBalance ? (\n          [1, 2, 3, 4].map((i) => (\n            <div key={i} className=\"border border-border rounded-lg p-5\">\n              <div className=\"h-4 w-20 bg-muted animate-pulse rounded mb-2\" />\n              <div className=\"h-8 w-28 bg-muted animate-pulse rounded\" />\n            </div>\n          ))\n        ) : balanceError ? (\n          <div className=\"col-span-4 text-sm text-destructive\">{balanceError}</div>\n        ) : (\n          <>\n            <BalanceCard\n              label=\"Purchased\"\n              value={balance?.purchased ?? 0}\n              description=\"From credit purchases\"\n            />\n            <BalanceCard\n              label=\"Earned\"\n              value={balance?.earned ?? 0}\n              description=\"From sales & referrals\"\n            />\n            <BalanceCard\n              label=\"Granted\"\n              value={balance?.granted ?? 0}\n              description=\"Coupons & admin grants — non-withdrawable\"\n            />\n            <BalanceCard\n              label=\"Withdrawable\"\n              value={withdrawable}\n              description=\"Purchased + earned\"\n              highlight\n            />\n          </>\n        )}\n      </div>\n\n      {/* Success banner */}\n      {submitSuccess && (\n        <div className=\"flex items-center gap-3 p-4 rounded-lg bg-status-success-bg-subtle border border-status-success-border text-status-success-text\">\n          <svg className=\"w-5 h-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            onClick={() => setSubmitSuccess(false)}\n            className=\"ml-auto text-current opacity-60 hover:opacity-100\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M6 18L18 6M6 6l12 12\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n\n      {/* Main two-column layout */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        {/* Left: Payout account management */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-base font-semibold text-foreground\">Payout Account</h2>\n            <button\n              onClick={() => setShowAddAccount((v) => !v)}\n              className=\"text-sm text-primary hover:underline\"\n            >\n              {showAddAccount ? 'Cancel' : '+ Add new'}\n            </button>\n          </div>\n\n          {/* Add account form */}\n          {showAddAccount && (\n            <div className=\"border border-border rounded-lg p-4 space-y-3 bg-muted/30\">\n              <h3 className=\"text-sm font-medium text-foreground\">New Payout Account</h3>\n\n              <div>\n                <label className=\"block text-xs text-muted-foreground mb-1\">Label</label>\n                <input\n                  type=\"text\"\n                  value={accountForm.label}\n                  onChange={(e) => setAccountForm((f) => ({ ...f, label: e.target.value }))}\n                  placeholder=\"e.g. My Bank Account\"\n                  className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                />\n              </div>\n\n              <div className=\"grid grid-cols-2 gap-3\">\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">Type</label>\n                  <select\n                    value={accountForm.type}\n                    onChange={(e) =>\n                      setAccountForm((f) => ({\n                        ...f,\n                        type: e.target.value as typeof accountForm.type,\n                      }))\n                    }\n                    className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                  >\n                    <option value=\"BANK_ACCOUNT\">Bank Account</option>\n                    <option value=\"UPI\">UPI</option>\n                    <option value=\"WALLET\">Wallet</option>\n                  </select>\n                </div>\n\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">Country</label>\n                  <select\n                    value={accountForm.country}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, country: e.target.value }))}\n                    className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                  >\n                    <option value=\"IN\">India</option>\n                    <option value=\"US\">United States</option>\n                    <option value=\"GB\">United Kingdom</option>\n                    <option value=\"SG\">Singapore</option>\n                    <option value=\"AU\">Australia</option>\n                    <option value=\"CA\">Canada</option>\n                    <option value=\"DE\">Germany</option>\n                  </select>\n                </div>\n              </div>\n\n              {accountForm.type === 'BANK_ACCOUNT' && (\n                <>\n                  <div>\n                    <label className=\"block text-xs text-muted-foreground mb-1\">\n                      Account Number\n                    </label>\n                    <input\n                      type=\"text\"\n                      value={accountForm.accountNumber}\n                      onChange={(e) =>\n                        setAccountForm((f) => ({ ...f, accountNumber: e.target.value }))\n                      }\n                      placeholder=\"Account number\"\n                      className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                    />\n                  </div>\n                  {accountForm.country === 'IN' ? (\n                    <div>\n                      <label className=\"block text-xs text-muted-foreground mb-1\">IFSC Code</label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.ifscCode}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, ifscCode: e.target.value.toUpperCase() }))\n                        }\n                        placeholder=\"e.g. SBIN0001234\"\n                        className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                      />\n                    </div>\n                  ) : (\n                    <div>\n                      <label className=\"block text-xs text-muted-foreground mb-1\">\n                        Routing Number\n                      </label>\n                      <input\n                        type=\"text\"\n                        value={accountForm.routingNumber}\n                        onChange={(e) =>\n                          setAccountForm((f) => ({ ...f, routingNumber: e.target.value }))\n                        }\n                        placeholder=\"Routing / sort code\"\n                        className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                      />\n                    </div>\n                  )}\n                </>\n              )}\n\n              {accountForm.type === 'UPI' && (\n                <div>\n                  <label className=\"block text-xs text-muted-foreground mb-1\">UPI ID</label>\n                  <input\n                    type=\"text\"\n                    value={accountForm.upiId}\n                    onChange={(e) => setAccountForm((f) => ({ ...f, upiId: e.target.value }))}\n                    placeholder=\"yourname@upi\"\n                    className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n                  />\n                </div>\n              )}\n\n              {addAccountError && <p className=\"text-xs text-destructive\">{addAccountError}</p>}\n\n              <button\n                onClick={() => void handleAddAccount()}\n                disabled={isAddingAccount || !accountForm.label}\n                className=\"w-full py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n              >\n                {isAddingAccount ? 'Saving…' : 'Save Account'}\n              </button>\n            </div>\n          )}\n\n          {/* Existing accounts */}\n          {isLoadingAccounts ? (\n            <div className=\"space-y-2\">\n              {[1, 2].map((i) => (\n                <div\n                  key={i}\n                  className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n                />\n              ))}\n            </div>\n          ) : activeAccounts.length === 0 && !showAddAccount ? (\n            <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border rounded-lg\">\n              <svg\n                className=\"w-8 h-8 text-muted-foreground mb-2\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n                />\n              </svg>\n              <p className=\"text-sm text-muted-foreground\">No payout accounts yet</p>\n              <button\n                onClick={() => setShowAddAccount(true)}\n                className=\"mt-2 text-sm text-primary hover:underline\"\n              >\n                Add a bank account or UPI\n              </button>\n            </div>\n          ) : (\n            <div className=\"space-y-2\">\n              {activeAccounts.map((account) => (\n                <button\n                  key={account.id}\n                  onClick={() => setSelectedAccountId(account.id)}\n                  className={`w-full text-left p-4 border rounded-lg transition-colors ${\n                    selectedAccountId === account.id\n                      ? 'border-primary bg-primary/5'\n                      : 'border-border bg-card hover:border-primary/40'\n                  }`}\n                >\n                  <div className=\"flex items-center justify-between\">\n                    <div>\n                      <p className=\"text-sm font-medium text-foreground\">{account.label}</p>\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {account.type.replaceAll('_', ' ')}\n                        {account.displayName ? ` · ${account.displayName}` : ''}\n                        {account.accountLast4 ? ` ···${account.accountLast4}` : ''}\n                        {account.country ? ` · ${account.country}` : ''}\n                      </p>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      {account.isDefault && (\n                        <span className=\"text-xs px-2 py-0.5 rounded bg-primary/10 text-primary font-medium\">\n                          Default\n                        </span>\n                      )}\n                      <span\n                        className={`text-xs px-2 py-0.5 rounded font-medium ${\n                          account.status === 'ACTIVE'\n                            ? `${statusTokens.success.bg} ${statusTokens.success.text}`\n                            : account.status === 'PENDING_VERIFICATION'\n                              ? `${statusTokens.warning.bg} ${statusTokens.warning.text}`\n                              : `${statusTokens.error.bg} ${statusTokens.error.text}`\n                        }`}\n                      >\n                        {account.status.replaceAll('_', ' ').toLowerCase()}\n                      </span>\n                      {selectedAccountId === account.id && (\n                        <svg\n                          className=\"w-4 h-4 text-primary shrink-0\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M5 13l4 4L19 7\"\n                          />\n                        </svg>\n                      )}\n                    </div>\n                  </div>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Right: Withdrawal request form */}\n        <div className=\"space-y-4\">\n          <h2 className=\"text-base font-semibold text-foreground\">Request Withdrawal</h2>\n\n          <div className=\"border border-border rounded-lg p-5 bg-card space-y-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">\n                Credits to Withdraw\n              </label>\n              <input\n                type=\"number\"\n                min={1}\n                max={withdrawable}\n                step={1}\n                value={creditAmount}\n                onChange={(e) => setCreditAmount(e.target.value)}\n                placeholder=\"Enter credit amount\"\n                className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n              />\n              <p className=\"text-xs text-muted-foreground mt-1\">\n                Max withdrawable:{' '}\n                <span className=\"font-medium\">{withdrawable.toLocaleString()} credits</span>\n              </p>\n              {amount > 0 && amount > withdrawable && (\n                <p className=\"text-xs text-destructive mt-1\">\n                  Amount exceeds your withdrawable balance\n                </p>\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-foreground mb-1\">\n                Notes <span className=\"text-muted-foreground font-normal\">(optional)</span>\n              </label>\n              <textarea\n                value={notes}\n                onChange={(e) => setNotes(e.target.value)}\n                placeholder=\"Any notes for this withdrawal request\"\n                rows={2}\n                className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none\"\n              />\n            </div>\n\n            {submitError && (\n              <div className=\"p-3 rounded-md bg-destructive/10 border border-destructive/20\">\n                <p className=\"text-sm text-destructive\">{submitError}</p>\n              </div>\n            )}\n\n            <div className=\"pt-1 border-t border-border\">\n              <p className=\"text-xs text-muted-foreground mb-3\">\n                Credits will be converted to USD at the current credit rate. Withdrawals are\n                reviewed before processing and may take 3–5 business days.\n              </p>\n              <button\n                onClick={() => void handleWithdraw()}\n                disabled={\n                  isSubmitting || !amountValid || !selectedAccountId || activeAccounts.length === 0\n                }\n                className=\"w-full py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n              >\n                {isSubmitting ? 'Submitting…' : 'Request Withdrawal'}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Withdrawal history */}\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <h2 className=\"text-base font-semibold text-foreground\">Withdrawal History</h2>\n          <button\n            onClick={() => void loadHistory()}\n            className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label=\"Refresh withdrawal history\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n              />\n            </svg>\n          </button>\n        </div>\n\n        {isLoadingHistory ? (\n          <div className=\"space-y-2\">\n            {[1, 2, 3].map((i) => (\n              <div\n                key={i}\n                className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n              />\n            ))}\n          </div>\n        ) : history.length === 0 ? (\n          <div className=\"flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg\">\n            <svg\n              className=\"w-8 h-8 text-muted-foreground mb-2\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n              />\n            </svg>\n            <p className=\"text-sm text-muted-foreground\">No withdrawal requests yet</p>\n          </div>\n        ) : (\n          <div className=\"border border-border rounded-lg overflow-hidden\">\n            <table className=\"w-full text-sm\">\n              <thead className=\"bg-muted/50 border-b border-border\">\n                <tr>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n                    Amount\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n                    Status\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden sm:table-cell\">\n                    Payout Account\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n                    Requested\n                  </th>\n                  <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n                    Completed\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {history.map((req) => (\n                  <tr key={req.id} className=\"hover:bg-muted/30 transition-colors\">\n                    <td className=\"px-4 py-3 font-medium text-foreground\">\n                      {req.requestedAmount.toLocaleString()} {req.currency}\n                    </td>\n                    <td className=\"px-4 py-3\">\n                      <span\n                        className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getWithdrawalStatusBg(req.status)}`}\n                      >\n                        {req.status.charAt(0) + req.status.slice(1).toLowerCase()}\n                      </span>\n                      {req.failureReason && (\n                        <p\n                          className=\"text-xs text-destructive mt-0.5 max-w-[180px] truncate\"\n                          title={req.failureReason}\n                        >\n                          {req.failureReason}\n                        </p>\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden sm:table-cell\">\n                      {req.payoutAccount ? (\n                        <span>\n                          {req.payoutAccount.label}\n                          {req.payoutAccount.accountLast4\n                            ? ` ···${req.payoutAccount.accountLast4}`\n                            : ''}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n                      <span title={formatDate(req.createdAt, 'long')}>\n                        {formatRelativeTime(req.createdAt)}\n                      </span>\n                    </td>\n                    <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n                      {req.paidAt ? (\n                        <span className={getWithdrawalStatusColor('PAID')}>\n                          {formatDate(req.paidAt, 'short')}\n                        </span>\n                      ) : (\n                        '—'\n                      )}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/credits/pages/CreditsPage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export declare const CreditsPage: FC;
+//# sourceMappingURL=CreditsPage.d.ts.map

package/dist/billing/modules/credits/pages/CreditsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsPage.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/credits/pages/CreditsPage.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAoB1C,eAAO,MAAM,WAAW,EAAE,EAmQzB,CAAC"}

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

@@ -0,0 +1,324 @@
+import { statusTokens as e } from "../../../shared/utils/tokens.js";
+import { formatCreditTransactionType as t, formatDate as n, formatRelativeTime as r } from "../../../shared/utils/format.js";
+import { getCreditTransactionStatusColor as i, getStatusBadgeClasses as a } from "../../../shared/utils/status.js";
+import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
+import { useBillingNavigate as s } from "../../../hooks/useBillingNavigate.js";
+import { useCreditTransactions as c } from "../hooks/useCredits.js";
+import { useDefaultBillingAccount as l } from "../../subscriptions/hooks/useSubscriptions.js";
+import "../../subscriptions/hooks/index.js";
+import { useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/billing/modules/credits/pages/CreditsPage.tsx
+var m = () => {
+	let { t: e } = p(), n = (t, n) => {
+		let r = e(t);
+		return r === t ? n : r;
+	}, r = s(), i = o(), { billingAccount: a, isLoading: m } = l(), [g, _] = u(30), [v, y] = u("all"), [b, x] = u(1), { transactions: S, pagination: C, isLoading: w, error: T, refetch: E } = c({
+		billingAccountId: a?.id || "",
+		days: g,
+		page: b,
+		pageSize: 20
+	});
+	if (!i.canViewCredits) return /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ f("div", {
+			className: "text-center space-y-2",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center",
+					children: /* @__PURE__ */ d("svg", {
+						className: "w-6 h-6 text-muted-foreground",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ d("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						})
+					})
+				}),
+				/* @__PURE__ */ d("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Access Denied"
+				}),
+				/* @__PURE__ */ d("p", {
+					className: "text-sm text-muted-foreground max-w-sm",
+					children: "You don't have permission to view credits."
+				})
+			]
+		})
+	});
+	let D = m || w, O = S.filter((e) => v === "all" ? !0 : e.type === v);
+	if (D && !a) return /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [/* @__PURE__ */ d("div", { className: "h-8 w-48 bg-muted animate-pulse rounded" }), /* @__PURE__ */ d("div", {
+			className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+			children: /* @__PURE__ */ f("div", {
+				className: "border border-border rounded-lg p-6",
+				children: [/* @__PURE__ */ d("div", { className: "h-6 w-24 bg-muted animate-pulse rounded mb-2" }), /* @__PURE__ */ d("div", { className: "h-10 w-32 bg-muted animate-pulse rounded" })]
+			})
+		})]
+	});
+	if (T) return /* @__PURE__ */ d("div", {
+		className: "flex items-center justify-center h-full min-h-[400px]",
+		children: /* @__PURE__ */ f("div", {
+			className: "text-center space-y-4",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
+					children: /* @__PURE__ */ d("svg", {
+						className: "w-6 h-6 text-destructive",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ d("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							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"
+						})
+					})
+				}),
+				/* @__PURE__ */ d("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Failed to load credits"
+				}),
+				/* @__PURE__ */ d("p", {
+					className: "text-sm text-muted-foreground",
+					children: T.message
+				}),
+				/* @__PURE__ */ d("button", {
+					onClick: () => E(),
+					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+					children: "Try Again"
+				})
+			]
+		})
+	});
+	let k = a?.creditAmount || 0;
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+					className: "text-2xl font-bold text-foreground",
+					children: n("billing.credits.title", "Credits")
+				}), /* @__PURE__ */ d("p", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: "Manage your credit balance and view transaction history"
+				})] }), /* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ f("button", {
+						onClick: () => r("/credits/withdraw"),
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: [/* @__PURE__ */ d("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								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"
+							})
+						}), "Withdraw"]
+					}), /* @__PURE__ */ f("button", {
+						onClick: () => r("/checkout/credits"),
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
+						children: [/* @__PURE__ */ d("svg", {
+							className: "w-4 h-4",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M12 4v16m8-8H4"
+							})
+						}), "Purchase Credits"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
+				children: [/* @__PURE__ */ f("div", {
+					className: "border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-6",
+					children: [
+						/* @__PURE__ */ d("p", {
+							className: "text-sm text-muted-foreground",
+							children: "Available Balance"
+						}),
+						/* @__PURE__ */ f("p", {
+							className: "text-3xl font-bold text-foreground mt-2",
+							children: [k.toLocaleString(), " Credits"]
+						}),
+						/* @__PURE__ */ d("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: a?.name
+						})
+					]
+				}), /* @__PURE__ */ f("div", {
+					className: "border border-border rounded-lg bg-card p-6",
+					children: [
+						/* @__PURE__ */ f("p", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								"Transactions (",
+								g,
+								"d)"
+							]
+						}),
+						/* @__PURE__ */ d("p", {
+							className: "text-2xl font-bold text-foreground mt-2",
+							children: C.totalCount
+						}),
+						/* @__PURE__ */ d("p", {
+							className: "text-sm text-muted-foreground mt-2",
+							children: "Total transactions"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				children: [/* @__PURE__ */ d("div", {
+					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [
+						7,
+						30,
+						90
+					].map((e) => /* @__PURE__ */ f("button", {
+						onClick: () => _(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${g === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						children: [e, "d"]
+					}, e))
+				}), /* @__PURE__ */ d("div", {
+					className: "inline-flex rounded-lg border border-border p-1 bg-muted/50",
+					children: [
+						"all",
+						"purchase",
+						"usage",
+						"adjustment",
+						"granted"
+					].map((e) => /* @__PURE__ */ d("button", {
+						onClick: () => y(e),
+						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${v === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+						children: e === "all" ? "All" : t(e)
+					}, e))
+				})]
+			}),
+			O.length === 0 ? /* @__PURE__ */ f("div", {
+				className: "flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4",
+						children: /* @__PURE__ */ d("svg", {
+							className: "w-6 h-6 text-muted-foreground",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								strokeWidth: 2,
+								d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							})
+						})
+					}),
+					/* @__PURE__ */ d("h3", {
+						className: "text-lg font-medium text-foreground",
+						children: "No transactions found"
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: v === "all" ? "No credit transactions in this period." : "No transactions match your filter."
+					})
+				]
+			}) : /* @__PURE__ */ f("div", {
+				className: "space-y-3",
+				children: [O.map((e) => /* @__PURE__ */ d(h, { transaction: e }, e.id)), C.hasMore && /* @__PURE__ */ d("div", {
+					className: "flex justify-center pt-4",
+					children: /* @__PURE__ */ d("button", {
+						onClick: () => x((e) => e + 1),
+						className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
+						children: "Load More"
+					})
+				})]
+			})
+		]
+	});
+}, h = ({ transaction: o }) => {
+	let s = i(o.status), c = o.type === "purchase" || o.type === "adjustment" || o.type === "granted";
+	return /* @__PURE__ */ f("div", {
+		className: "flex items-center gap-4 p-4 border border-border rounded-lg bg-card hover:shadow-sm transition-shadow",
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: `w-10 h-10 rounded-full flex items-center justify-center ${c ? e.success.bg : e.warning.bg}`,
+				children: c ? /* @__PURE__ */ d("svg", {
+					className: `w-5 h-5 ${e.success.icon}`,
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ d("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M12 4v16m8-8H4"
+					})
+				}) : /* @__PURE__ */ d("svg", {
+					className: `w-5 h-5 ${e.warning.icon}`,
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ d("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M20 12H4"
+					})
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "flex-1 min-w-0",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ d("p", {
+						className: "font-medium text-foreground capitalize",
+						children: t(o.type)
+					}), /* @__PURE__ */ d("span", {
+						className: `px-2 py-0.5 text-xs font-medium rounded ${a(s)}`,
+						children: o.status
+					})]
+				}), /* @__PURE__ */ f("p", {
+					className: "text-sm text-muted-foreground mt-0.5",
+					children: [
+						r(o.createdAt),
+						" • ",
+						n(o.createdAt, "short")
+					]
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "text-right",
+				children: /* @__PURE__ */ f("p", {
+					className: `font-semibold ${c ? e.success.text : "text-foreground"}`,
+					children: [
+						c ? "+" : "-",
+						o.amount.toLocaleString(),
+						" credits"
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { m as CreditsPage };
+
+//# sourceMappingURL=CreditsPage.js.map

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

@@ -0,0 +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';\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=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n          <p className=\"text-sm text-muted-foreground 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 p-6\">\n        <div className=\"h-8 w-48 bg-muted animate-pulse rounded\" />\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div className=\"border border-border rounded-lg p-6\">\n            <div className=\"h-6 w-24 bg-muted animate-pulse rounded mb-2\" />\n            <div className=\"h-10 w-32 bg-muted 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=\"w-12 h-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n            <svg\n              className=\"w-6 h-6 text-destructive\"\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-foreground\">Failed to load credits</h2>\n          <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n          <button\n            onClick={() => refetch()}\n            className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 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 p-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 font-bold text-foreground\">\n            {tr('billing.credits.title', 'Credits')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            Manage your credit balance and view transaction history\n          </p>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <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 text-foreground rounded-md hover:bg-muted transition-colors\"\n          >\n            <svg className=\"w-4 h-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            onClick={() => navigateTo('/checkout/credits')}\n            className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\n          >\n            <svg className=\"w-4 h-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        <div className=\"border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-6\">\n          <p className=\"text-sm text-muted-foreground\">Available Balance</p>\n          <p className=\"text-3xl font-bold text-foreground mt-2\">\n            {creditBalance.toLocaleString()} Credits\n          </p>\n          <p className=\"text-sm text-muted-foreground mt-2\">{billingAccount?.name}</p>\n        </div>\n\n        <div className=\"border border-border rounded-lg bg-card p-6\">\n          <p className=\"text-sm text-muted-foreground\">Transactions ({days}d)</p>\n          <p className=\"text-2xl font-bold text-foreground mt-2\">{pagination.totalCount}</p>\n          <p className=\"text-sm text-muted-foreground 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\">\n        {/* Time Range */}\n        <div className=\"inline-flex rounded-lg border border-border p-1 bg-muted/50\">\n          {[7, 30, 90].map((d) => (\n            <button\n              key={d}\n              onClick={() => setDays(d)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${\n                days === d\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\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 p-1 bg-muted/50\">\n          {(['all', 'purchase', 'usage', 'adjustment', 'granted'] as FilterType[]).map((type) => (\n            <button\n              key={type}\n              onClick={() => setFilterType(type)}\n              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${\n                filterType === type\n                  ? 'bg-background text-foreground shadow-sm'\n                  : 'text-muted-foreground hover:text-foreground'\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        <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border rounded-lg\">\n          <div className=\"w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n            <svg\n              className=\"w-6 h-6 text-muted-foreground\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"text-lg font-medium text-foreground\">No transactions found</h3>\n          <p className=\"text-sm text-muted-foreground mt-1\">\n            {filterType !== 'all'\n              ? 'No transactions match your filter.'\n              : 'No credit transactions in this period.'}\n          </p>\n        </div>\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                onClick={() => setPage((p) => p + 1)}\n                className=\"px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted 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 rounded-lg bg-card hover:shadow-sm transition-shadow\">\n      {/* Icon */}\n      <div\n        className={`w-10 h-10 rounded-full flex items-center justify-center ${\n          isCredit ? statusTokens.success.bg : statusTokens.warning.bg\n        }`}\n      >\n        {isCredit ? (\n          <svg\n            className={`w-5 h-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={`w-5 h-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-foreground 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-muted-foreground 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 className={`font-semibold ${isCredit ? statusTokens.success.text : 'text-foreground'}`}>\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/credits/pages/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Credits Module - Pages
+ */
+export { CreditsPage } from './CreditsPage';
+export { CreditTransactionsPage } from './CreditTransactionsPage';
+export { AdminCreditsPage } from './AdminCreditsPage';
+export { CreditWithdrawalPage } from './CreditWithdrawalPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/billing/modules/credits/pages/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/credits/pages/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,4 @@
+import "./CreditsPage.js";
+import "./CreditTransactionsPage.js";
+import "./AdminCreditsPage.js";
+import "./CreditWithdrawalPage.js";

package/dist/billing/modules/dashboard/components/ActiveSubscriptionCard.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BillingSubscription } from '../../../shared/types';
+
+interface ActiveSubscriptionCardProps {
+    subscription: BillingSubscription | null;
+    onViewDetails?: () => void;
+    onUpgrade?: () => void;
+    onManage?: () => void;
+    onPurchasePlan?: () => void;
+    className?: string;
+}
+export declare const ActiveSubscriptionCard: FC<ActiveSubscriptionCardProps>;
+export {};
+//# sourceMappingURL=ActiveSubscriptionCard.d.ts.map

package/dist/billing/modules/dashboard/components/ActiveSubscriptionCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveSubscriptionCard.d.ts","sourceRoot":"","sources":["../../../../../src/billing/modules/dashboard/components/ActiveSubscriptionCard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AAYzC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAIjE,UAAU,2BAA2B;IACnC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA6OlE,CAAC"}