feat(transaction): add transaction retrieval and DTO mapping

frontend/src/app/feature/home/home.component.html

@@ -100,11 +100,11 @@
         <div class="space-y-3">
           <div
             class="flex justify-between items-center"
-            *ngFor="let transaction of recentTransactions"
+            *ngFor="let transaction of recentTransactions|async"
           >
             <div>
               <p class="text-sm font-medium">{{ transaction.type }}</p>
-              <p class="text-xs text-text-secondary">{{ transaction.date }}</p>
+              <p class="text-xs text-text-secondary">{{ transaction.createdAt | date }}</p>
             </div>
             <span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
               {{ transaction.amount | currency: 'EUR' }}

frontend/src/app/feature/home/home.component.ts

@@ -1,16 +1,18 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { CurrencyPipe, NgFor } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { AsyncPipe, CurrencyPipe, DatePipe, NgFor } from '@angular/common';
 import { DepositComponent } from '../deposit/deposit.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ConfirmationComponent } from '@shared/components/confirmation/confirmation.component';
 import { Transaction } from 'app/model/Transaction';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { Game } from 'app/model/Game';
+import { Observable, of } from 'rxjs';
+import { TransactionService } from '@service/transaction.service';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent],
+  imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent, AsyncPipe, DatePipe],
   templateUrl: './home.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -74,7 +76,7 @@ export default class HomeComponent implements OnInit {
 
   allGames: Game[] = [...this.featuredGames];
 
-  recentTransactions: Transaction[] = [];
+  recentTransactions: Observable<Transaction[]> = inject(TransactionService).getUsersTransactions(5);
 
   openDepositModal() {
     this.isDepositModalOpen = true;

frontend/src/app/feature/transaction-history/transaction-history.component.html

@@ -0,0 +1 @@
+<p>transaction-history works!</p>

frontend/src/app/feature/transaction-history/transaction-history.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { TransactionService } from '@service/transaction.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  standalone: true,
+  selector: 'app-transaction-history',
+  imports: [],
+  templateUrl: './transaction-history.component.html',
+  styleUrl: './transaction-history.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TransactionHistoryComponent {
+  private transactionService: TransactionService = inject(TransactionService);
+
+  transactions$: Observable<> = this.transactionService.getUsersTransactions();
+}

frontend/src/app/model/Transaction.ts

@@ -2,5 +2,5 @@ export interface Transaction {
   id: string;
   type: string;
   amount: number;
-  date: string;
+  createdAt: string;
 }

frontend/src/app/service/transaction.service.ts

@@ -0,0 +1,19 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TransactionService {
+  private http: HttpClient = inject(HttpClient);
+
+  public getUsersTransactions(limit: number|null = null) {
+    const baseUrl = '/backend/user/transactions';
+
+    if (limit !== null) {
+      return this.http.get<any[]>(`${baseUrl}?limit=${limit}`);
+    }
+
+    return this.http.get<any[]>(`${baseUrl}`);
+  }
+}