{total > 0 && {tTable('totalRecords', { count: total })}}
diff --git a/src/credits/credit-detail-viewer.tsx b/src/credits/credit-detail-viewer.tsx
new file mode 100644
index 0000000..4105f9d
--- /dev/null
+++ b/src/credits/credit-detail-viewer.tsx
@@ -0,0 +1,250 @@
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from '@/components/ui/drawer';
+import { Separator } from '@/components/ui/separator';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { formatDate } from '@/lib/formatter';
+import {
+ ClockIcon,
+ GiftIcon,
+ MinusCircleIcon,
+ RefreshCwIcon,
+ ShoppingCartIcon,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { CREDIT_TRANSACTION_TYPE } from './types';
+
+// Define the credit transaction interface (matching the one in the table)
+export interface CreditTransaction {
+ id: string;
+ userId: string;
+ type: string;
+ description: string | null;
+ amount: number;
+ remainingAmount: number | null;
+ paymentId: string | null;
+ expirationDate: Date | null;
+ expirationDateProcessedAt: Date | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface CreditDetailViewerProps {
+ transaction: CreditTransaction;
+}
+
+export function CreditDetailViewer({ transaction }: CreditDetailViewerProps) {
+ const t = useTranslations('Dashboard.settings.credits.transactions');
+ const isMobile = useIsMobile();
+
+ // Get transaction type icon
+ const getTransactionTypeIcon = (type: string) => {
+ switch (type) {
+ case CREDIT_TRANSACTION_TYPE.MONTHLY_REFRESH:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.REGISTER_GIFT:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.PURCHASE:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.USAGE:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.EXPIRE:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.SUBSCRIPTION_RENEWAL:
+ return
;
+ case CREDIT_TRANSACTION_TYPE.LIFETIME_MONTHLY:
+ return
;
+ default:
+ return null;
+ }
+ };
+
+ // Get transaction type badge variant
+ const getTransactionTypeBadgeVariant = (type: string) => {
+ switch (type) {
+ case CREDIT_TRANSACTION_TYPE.REGISTER_GIFT:
+ case CREDIT_TRANSACTION_TYPE.PURCHASE:
+ case CREDIT_TRANSACTION_TYPE.MONTHLY_REFRESH:
+ case CREDIT_TRANSACTION_TYPE.SUBSCRIPTION_RENEWAL:
+ case CREDIT_TRANSACTION_TYPE.LIFETIME_MONTHLY:
+ return 'outline' as const;
+ case CREDIT_TRANSACTION_TYPE.USAGE:
+ case CREDIT_TRANSACTION_TYPE.EXPIRE:
+ return 'destructive' as const;
+ default:
+ return 'outline' as const;
+ }
+ };
+
+ // Get transaction type display name
+ const getTransactionTypeDisplayName = (type: string) => {
+ switch (type) {
+ case CREDIT_TRANSACTION_TYPE.MONTHLY_REFRESH:
+ return t('types.MONTHLY_REFRESH');
+ case CREDIT_TRANSACTION_TYPE.REGISTER_GIFT:
+ return t('types.REGISTER_GIFT');
+ case CREDIT_TRANSACTION_TYPE.PURCHASE:
+ return t('types.PURCHASE');
+ case CREDIT_TRANSACTION_TYPE.USAGE:
+ return t('types.USAGE');
+ case CREDIT_TRANSACTION_TYPE.EXPIRE:
+ return t('types.EXPIRE');
+ case CREDIT_TRANSACTION_TYPE.SUBSCRIPTION_RENEWAL:
+ return t('types.SUBSCRIPTION_RENEWAL');
+ case CREDIT_TRANSACTION_TYPE.LIFETIME_MONTHLY:
+ return t('types.LIFETIME_MONTHLY');
+ default:
+ return type;
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {t('detailViewer.title')}
+
+
+
+
+ {/* Transaction Type Badge */}
+
+ {getTransactionTypeIcon(transaction.type)}
+ {getTransactionTypeDisplayName(transaction.type)}
+
+
+
+ {/* Basic Information */}
+
+
+
+ {t('columns.amount')}:
+
+ 0 ? 'text-green-600' : 'text-red-600'
+ }`}
+ >
+ {transaction.amount > 0 ? '+' : ''}
+ {transaction.amount.toLocaleString()}
+
+
+
+ {transaction.remainingAmount !== null && (
+
+
+ {t('columns.remainingAmount')}:
+
+
+ {transaction.remainingAmount.toLocaleString()}
+
+
+ )}
+
+ {transaction.description && (
+
+
+ {t('columns.description')}:
+
+ {transaction.description}
+
+ )}
+
+ {transaction.paymentId && (
+
+
+ {t('columns.paymentId')}:
+
+ {
+ navigator.clipboard.writeText(transaction.paymentId!);
+ toast.success(t('paymentIdCopied'));
+ }}
+ >
+ {transaction.paymentId}
+
+
+ )}
+
+ {transaction.expirationDate && (
+
+
+ {t('columns.expirationDate')}:
+
+ {formatDate(transaction.expirationDate)}
+
+ )}
+
+ {transaction.expirationDateProcessedAt && (
+
+
+ {t('columns.expirationDateProcessedAt')}:
+
+
+ {formatDate(transaction.expirationDateProcessedAt)}
+
+
+ )}
+
+
+
+
+
+ {/* Timestamps */}
+
+
+
+ {t('columns.createdAt')}:
+
+ {formatDate(transaction.createdAt)}
+
+
+
+ {t('columns.updatedAt')}:
+
+ {formatDate(transaction.updatedAt)}
+
+
+
+ );
+}
diff --git a/src/payment/provider/stripe.ts b/src/payment/provider/stripe.ts
index bc76455..d364ee7 100644
--- a/src/payment/provider/stripe.ts
+++ b/src/payment/provider/stripe.ts
@@ -828,7 +828,7 @@ export class StripeProvider implements PaymentProvider {
userId,
amount: Number.parseInt(credits),
type: CREDIT_TRANSACTION_TYPE.PURCHASE,
- description: `Credit package purchase: ${packageId} - ${credits} credits for $${amount}`,
+ description: `+${credits} credits for package ${packageId} (${amount})`,
paymentId: session.id,
expireDays: creditPackage.expireDays,
});