npm - @burdenoff/microfe-billing - Versions diffs - 2026.526.1 → 2026.528.1 - Mend

@burdenoff/microfe-billing 2026.526.1 → 2026.528.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

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

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

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

@@ -26,9 +26,9 @@ var m = () => {
 			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",
+					className: "size-12 mx-auto rounded-full bg-muted flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-6 h-6 text-muted-foreground",
+						className: "size-6 text-muted-foreground",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -68,9 +68,9 @@ var m = () => {
 			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",
+					className: "size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-6 h-6 text-destructive",
+						className: "size-6 text-destructive",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -91,6 +91,7 @@ var m = () => {
 					children: T.message
 				}),
 				/* @__PURE__ */ d("button", {
+					type: "button",
 					onClick: () => E(),
 					className: "px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 					children: "Try Again"
@@ -113,10 +114,11 @@ var m = () => {
 				})] }), /* @__PURE__ */ f("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ f("button", {
+						type: "button",
 						onClick: () => r("/credits/withdraw"),
 						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
 						children: [/* @__PURE__ */ d("svg", {
-							className: "w-4 h-4",
+							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -128,10 +130,11 @@ var m = () => {
 							})
 						}), "Withdraw"]
 					}), /* @__PURE__ */ f("button", {
+						type: "button",
 						onClick: () => r("/checkout/credits"),
 						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors",
 						children: [/* @__PURE__ */ d("svg", {
-							className: "w-4 h-4",
+							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -194,6 +197,7 @@ var m = () => {
 						30,
 						90
 					].map((e) => /* @__PURE__ */ f("button", {
+						type: "button",
 						onClick: () => _(e),
 						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${g === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 						children: [e, "d"]
@@ -207,6 +211,7 @@ var m = () => {
 						"adjustment",
 						"granted"
 					].map((e) => /* @__PURE__ */ d("button", {
+						type: "button",
 						onClick: () => y(e),
 						className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors capitalize ${v === e ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 						children: e === "all" ? "All" : t(e)
@@ -217,9 +222,9 @@ var m = () => {
 				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",
+						className: "size-12 rounded-full bg-muted flex items-center justify-center mb-4",
 						children: /* @__PURE__ */ d("svg", {
-							className: "w-6 h-6 text-muted-foreground",
+							className: "size-6 text-muted-foreground",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -245,6 +250,7 @@ var m = () => {
 				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", {
+						type: "button",
 						onClick: () => x((e) => e + 1),
 						className: "px-4 py-2 text-sm font-medium border border-border text-foreground rounded-md hover:bg-muted transition-colors",
 						children: "Load More"
@@ -259,9 +265,9 @@ var m = () => {
 		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}`,
+				className: `size-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}`,
+					className: `size-5 ${e.success.icon}`,
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -272,7 +278,7 @@ var m = () => {
 						d: "M12 4v16m8-8H4"
 					})
 				}) : /* @__PURE__ */ d("svg", {
-					className: `w-5 h-5 ${e.warning.icon}`,
+					className: `size-5 ${e.warning.icon}`,
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",

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

	@@ -1 +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';\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'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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"}
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=\"size-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n <svg\n className=\"size-6 text-muted-foreground\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n <p className=\"text-sm text-muted-foreground max-w-sm\">\n You don'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=\"size-12 mx-auto rounded-full bg-destructive/10 flex items-center justify-center\">\n <svg\n className=\"size-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 type=\"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 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 text-foreground rounded-md hover:bg-muted 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-primary text-primary-foreground rounded-md hover:bg-primary/90 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 <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 type=\"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 type=\"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=\"size-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n <svg\n className=\"size-6 text-muted-foreground\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 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 type=\"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={`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-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/dashboard/components/ActiveSubscriptionCard.js CHANGED Viewed

@@ -27,8 +27,8 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 			className: "flex flex-col items-center text-center py-4",
 			children: [
 				/* @__PURE__ */ f("div", {
-					className: "w-16 h-16 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4",
-					children: /* @__PURE__ */ f(d, { className: "w-8 h-8 text-primary" })
+					className: "size-16 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-4",
+					children: /* @__PURE__ */ f(d, { className: "size-8 text-primary" })
 				}),
 				/* @__PURE__ */ f("h3", {
 					className: "text-lg font-semibold text-foreground mb-2",
@@ -39,9 +39,10 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 					children: "Subscribe to a plan to unlock premium features and get the most out of your account"
 				}),
 				y && /* @__PURE__ */ p("button", {
+					type: "button",
 					onClick: y,
 					className: "inline-flex items-center gap-2 px-6 py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors",
-					children: ["Browse Plans", /* @__PURE__ */ f(i, { className: "w-4 h-4" })]
+					children: ["Browse Plans", /* @__PURE__ */ f(i, { className: "size-4" })]
 				})
 			]
 		})
@@ -54,7 +55,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 				className: `px-4 py-2 ${e.warning.container} border-b`,
 				children: /* @__PURE__ */ p("div", {
 					className: `flex items-center gap-2 ${e.warning.text}`,
-					children: [/* @__PURE__ */ f(r, { className: "w-4 h-4" }), /* @__PURE__ */ p("span", {
+					children: [/* @__PURE__ */ f(r, { className: "size-4" }), /* @__PURE__ */ p("span", {
 						className: "text-sm font-medium",
 						children: [
 							"Your subscription expires in ",
@@ -72,8 +73,8 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 					children: [/* @__PURE__ */ p("div", {
 						className: "flex items-start gap-4",
 						children: [/* @__PURE__ */ f("div", {
-							className: "w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center flex-shrink-0",
-							children: /* @__PURE__ */ f(l, { className: "w-6 h-6 text-primary-foreground" })
+							className: "size-12 rounded-lg bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center flex-shrink-0",
+							children: /* @__PURE__ */ f(l, { className: "size-6 text-primary-foreground" })
 						}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
 							className: "flex items-center gap-2 flex-wrap",
 							children: [/* @__PURE__ */ f("h3", {
@@ -94,10 +95,12 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 					}), /* @__PURE__ */ p("div", {
 						className: "flex items-center gap-2",
 						children: [v && /* @__PURE__ */ f("button", {
+							type: "button",
 							onClick: v,
 							className: "px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-muted transition-colors",
 							children: "Manage"
 						}), _ && !D && /* @__PURE__ */ f("button", {
+							type: "button",
 							onClick: _,
 							className: "px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors",
 							children: "Upgrade"
@@ -117,7 +120,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 								children: "Started"
 							}), /* @__PURE__ */ p("p", {
 								className: "text-sm font-medium text-foreground flex items-center gap-2",
-								children: [/* @__PURE__ */ f(a, { className: "w-4 h-4 text-muted-foreground" }), C(h.startDate)]
+								children: [/* @__PURE__ */ f(a, { className: "size-4 text-muted-foreground" }), C(h.startDate)]
 							})]
 						}),
 						/* @__PURE__ */ p("div", {
@@ -127,7 +130,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 								children: D ? "Expired" : "Ends"
 							}), /* @__PURE__ */ p("p", {
 								className: `text-sm font-medium flex items-center gap-2 ${D ? t.error.text : E ? t.warning.text : "text-foreground"}`,
-								children: [/* @__PURE__ */ f(o, { className: "w-4 h-4" }), C(h.endDate)]
+								children: [/* @__PURE__ */ f(o, { className: "size-4" }), C(h.endDate)]
 							})]
 						}),
 						/* @__PURE__ */ p("div", {
@@ -137,7 +140,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 								children: "Auto Renewal"
 							}), /* @__PURE__ */ p("p", {
 								className: "text-sm font-medium text-foreground flex items-center gap-2",
-								children: [/* @__PURE__ */ f(u, { className: `w-4 h-4 ${h.autoRenewal ? t.success.icon : "text-muted-foreground"}` }), h.autoRenewal ? "Enabled" : "Disabled"]
+								children: [/* @__PURE__ */ f(u, { className: `size-4 ${h.autoRenewal ? t.success.icon : "text-muted-foreground"}` }), h.autoRenewal ? "Enabled" : "Disabled"]
 							})]
 						}),
 						/* @__PURE__ */ p("div", {
@@ -147,7 +150,7 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 								children: "Payment Via"
 							}), /* @__PURE__ */ p("p", {
 								className: "text-sm font-medium text-foreground flex items-center gap-2",
-								children: [h.paymentGateway === "CREDITS" ? /* @__PURE__ */ f(s, { className: `w-4 h-4 ${t.warning.icon}` }) : /* @__PURE__ */ f(c, { className: "w-4 h-4 text-muted-foreground" }), h.paymentGateway === "CREDITS" ? "Credits" : h.paymentGateway === "STRIPE" ? "Stripe" : h.paymentGateway === "RAZORPAY" ? "Razorpay" : h.paymentGateway || "N/A"]
+								children: [h.paymentGateway === "CREDITS" ? /* @__PURE__ */ f(s, { className: `size-4 ${t.warning.icon}` }) : /* @__PURE__ */ f(c, { className: "size-4 text-muted-foreground" }), h.paymentGateway === "CREDITS" ? "Credits" : h.paymentGateway === "STRIPE" ? "Stripe" : h.paymentGateway === "RAZORPAY" ? "Razorpay" : h.paymentGateway || "N/A"]
 							})]
 						})
 					]
@@ -171,9 +174,10 @@ var h = ({ subscription: h, onViewDetails: g, onUpgrade: _, onManage: v, onPurch
 			g && /* @__PURE__ */ f("footer", {
 				className: "px-4 sm:px-6 py-3 border-t border-border bg-muted/30",
 				children: /* @__PURE__ */ p("button", {
+					type: "button",
 					onClick: g,
 					className: "w-full flex items-center justify-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors",
-					children: ["View Subscription Details", /* @__PURE__ */ f(i, { className: "w-4 h-4" })]
+					children: ["View Subscription Details", /* @__PURE__ */ f(i, { className: "size-4" })]
 				})
 			})
 		]