view data fixes

apps/website/lib/view-models/WalletTransactionViewModel.ts

@@ -1,46 +1,31 @@
-// Export the DTO type that WalletTransactionViewModel expects
-export type FullTransactionDto = {
-  id: string;
-  type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize' | 'deposit';
-  description: string;
-  amount: number;
-  fee: number;
-  netAmount: number;
-  date: Date;
-  status: 'completed' | 'pending' | 'failed';
-  reference?: string;
-};
-
 import { ViewModel } from "../contracts/view-models/ViewModel";
+import { CurrencyDisplay } from "../display-objects/CurrencyDisplay";
+import { DateDisplay } from "../display-objects/DateDisplay";
+import { TransactionTypeDisplay } from "../display-objects/TransactionTypeDisplay";
+import type { WalletTransactionViewData } from "../view-data/WalletTransactionViewData";
 
 export class WalletTransactionViewModel extends ViewModel {
-  id: string;
-  type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize' | 'deposit';
-  description: string;
-  amount: number;
-  fee: number;
-  netAmount: number;
-  date: Date;
-  status: 'completed' | 'pending' | 'failed';
-  reference?: string;
+  private readonly data: WalletTransactionViewData;
 
-  constructor(dto: FullTransactionDto) {
+  constructor(data: WalletTransactionViewData) {
     super();
-    this.id = dto.id;
-    this.type = dto.type;
-    this.description = dto.description;
-    this.amount = dto.amount;
-    this.fee = dto.fee;
-    this.netAmount = dto.netAmount;
-    this.date = dto.date;
-    this.status = dto.status;
-    this.reference = dto.reference;
+    this.data = data;
   }
 
+  get id(): string { return this.data.id; }
+  get type(): string { return this.data.type; }
+  get description(): string { return this.data.description; }
+  get amount(): number { return this.data.amount; }
+  get fee(): number { return this.data.fee; }
+  get netAmount(): number { return this.data.netAmount; }
+  get date(): string { return this.data.date; }
+  get status(): string { return this.data.status; }
+  get reference(): string | undefined { return this.data.reference; }
+
   /** UI-specific: Formatted amount with sign */
   get formattedAmount(): string {
     const sign = this.amount > 0 ? '+' : '';
-    return `${sign}$${Math.abs(this.amount).toFixed(2)}`;
+    return `${sign}${CurrencyDisplay.format(Math.abs(this.amount))}`;
   }
 
   /** UI-specific: Amount color */
@@ -50,16 +35,16 @@ export class WalletTransactionViewModel extends ViewModel {
 
   /** UI-specific: Type display */
   get typeDisplay(): string {
-    return this.type.charAt(0).toUpperCase() + this.type.slice(1);
+    return TransactionTypeDisplay.format(this.type);
   }
 
   /** UI-specific: Formatted date */
   get formattedDate(): string {
-    return this.date.toLocaleDateString();
+    return DateDisplay.formatShort(this.date);
   }
 
   /** UI-specific: Is incoming */
   get isIncoming(): boolean {
     return this.amount > 0;
   }
-}
+}