feat: use cash flow presentation in transaction histories

myteamwallet_frontend_modern/src/app/features/public-team/public-player.html

@@ -21,8 +21,8 @@
   } @else {
     <div class="transactions">
       @for (transaction of transactions(); track transaction.id) {
-        <mat-card
+        <mat-card>
-          ><div class="icon"><mat-icon>receipt_long</mat-icon></div>
+          <div class="icon"><mat-icon>receipt_long</mat-icon></div>
           <div>
             <strong>{{ typeLabel(transaction) }}</strong
             ><span>{{ transaction.date | date: 'dd.MM.yyyy' }}</span>
@@ -30,10 +30,14 @@
               <small>{{ transaction.note }}</small>
             }
           </div>
-          <strong class="amount">{{
+          <strong>
-            displayAmount(transaction) | currency: 'EUR'
+            <app-transaction-amount
-          }}</strong></mat-card
+              [amount]="transaction.amount"
-        >
+              [type]="transaction.type"
+              context="player"
+            />
+          </strong>
+        </mat-card>
       }
     </div>
   }

myteamwallet_frontend_modern/src/app/features/public-team/public-player.scss

@@ -74,9 +74,6 @@ main {
 .transactions small {
   color: var(--mat-sys-on-surface-variant);
 }
-.amount {
-  font-variant-numeric: tabular-nums;
-}
 .state {
   min-height: 300px;
   display: grid;

myteamwallet_frontend_modern/src/app/features/public-team/public-player.spec.ts

@@ -32,6 +32,20 @@ describe('PublicPlayer', () => {
                   {
                     id: 1,
                     date: '2026-07-31',
+                    amount: 12,
+                    note: 'Beitrag',
+                    type: { id: 0, name: 'payment' },
+                  },
+                  {
+                    id: 2,
+                    date: '2026-07-30',
+                    amount: -3,
+                    note: 'Korrektur',
+                    type: { id: 0, name: 'payment' },
+                  },
+                  {
+                    id: 3,
+                    date: '2026-07-29',
                     amount: 5,
                     note: 'Training',
                     type: { id: 11, name: 'fine' },
@@ -48,6 +62,17 @@ describe('PublicPlayer', () => {
 
     expect(fixture.nativeElement.textContent).toContain('Ada Lovelace');
     expect(fixture.nativeElement.textContent).toContain('Training');
-    expect(fixture.nativeElement.textContent).toContain('-5,00');
+    const amounts = [
+      ...fixture.nativeElement.querySelectorAll(
+        'app-transaction-amount [data-testid="transaction-amount"]',
+      ),
+    ] as HTMLElement[];
+    expect(amounts).toHaveLength(3);
+    expect(amounts[0].classList).toContain('inflow');
+    expect(amounts[1].classList).toContain('outflow');
+    expect(amounts[2].classList).toContain('neutral');
+    expect(
+      amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
+    ).toEqual(['+', '−', '']);
   });
 });

myteamwallet_frontend_modern/src/app/features/public-team/public-player.ts

@@ -1,4 +1,4 @@
-import { CurrencyPipe, DatePipe, registerLocaleData } from '@angular/common';
+import { DatePipe, registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import { Component, LOCALE_ID, inject, signal } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -8,21 +8,21 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { PublicTeamApi } from '../../core/team/public-team-api';
 import { PlayerTransaction } from '../../models/transaction.model';
-import { signedTransactionAmount } from '../../models/transaction-amount';
 import { PublicPlayer as PublicPlayerModel } from '../../models/public-access.model';
+import { TransactionAmount } from '../../shared/transaction-amount/transaction-amount';
 
 registerLocaleData(localeDe);
 
 @Component({
   selector: 'app-public-player',
   imports: [
-    CurrencyPipe,
     DatePipe,
     RouterLink,
     MatButtonModule,
     MatCardModule,
     MatIconModule,
     MatProgressSpinnerModule,
+    TransactionAmount,
   ],
   providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
   templateUrl: './public-player.html',
@@ -72,8 +72,4 @@ export class PublicPlayer {
       )[type] ?? type
     );
   }
-
-  protected displayAmount(transaction: PlayerTransaction): number {
-    return signedTransactionAmount(transaction.amount, transaction.type);
-  }
 }

myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.html

@@ -167,7 +167,13 @@
               <small>{{ activity.note }}</small>
             }
           </div>
-          <strong class="amount">{{ displayAmount(activity) | currency: 'EUR' }}</strong>
+          <strong>
+            <app-transaction-amount
+              [amount]="activity.amount"
+              [type]="activity.type"
+              [context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
+            />
+          </strong>
           @if (canReverse(activity)) {
             <button
               mat-icon-button

myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.scss

@@ -37,12 +37,7 @@ h1 {
   gap: 4px;
   min-width: 160px;
 
-  background: linear-gradient(
+  background: linear-gradient(135deg, #5ca34c 0%, #4f8f46 55%, #3f7f3c 100%);
-    135deg,
-    #5ca34c 0%,
-    #4f8f46 55%,
-    #3f7f3c 100%
-  );
 
   color: #ffffff;
 }
@@ -135,9 +130,6 @@ form button {
 .activity-copy small {
   color: var(--mat-sys-on-surface-variant);
 }
-.amount {
-  font-variant-numeric: tabular-nums;
-}
 .state {
   min-height: 160px;
   display: grid;

myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.spec.ts

@@ -49,9 +49,26 @@ describe('Cashbox', () => {
       id: 9,
       date: '2026-07-31T10:00:00.000Z',
       amount: 12,
+      type: 'payment',
+      note: 'Beitrag',
+      playerName: 'Bea Test',
+      isTeamWalletTransaction: false,
+    },
+    {
+      id: 10,
+      date: '2026-07-30T10:00:00.000Z',
+      amount: 8,
+      type: 'expense',
+      note: 'Material',
+      isTeamWalletTransaction: true,
+    },
+    {
+      id: 11,
+      date: '2026-07-29T10:00:00.000Z',
+      amount: 5,
       type: 'fine',
       note: 'Training',
-      playerName: 'Bea Test',
+      playerName: 'Alex Muster',
       isTeamWalletTransaction: false,
     },
   ];
@@ -105,9 +122,7 @@ describe('Cashbox', () => {
           provide: ActivatedRoute,
           useValue: {
             snapshot: {
-              queryParamMap: convertToParamMap(
+              queryParamMap: convertToParamMap(penaltyIdParam ? { penaltyId: penaltyIdParam } : {}),
-                penaltyIdParam ? { penaltyId: penaltyIdParam } : {},
-              ),
             },
           },
         },
@@ -137,10 +152,26 @@ describe('Cashbox', () => {
     const { fixture } = await setup();
 
     expect(fixture.nativeElement.textContent).toContain('Bea Test');
-    expect(fixture.nativeElement.textContent).toContain('-12,00');
     expect(fixture.nativeElement.querySelector('[data-testid="player-booking"]')).not.toBeNull();
   });
 
+  it('renders inflow, outflow, and neutral activity amounts with their cash-flow meaning', async () => {
+    const { fixture } = await setup();
+    const amounts = [
+      ...fixture.nativeElement.querySelectorAll(
+        'app-transaction-amount [data-testid="transaction-amount"]',
+      ),
+    ] as HTMLElement[];
+
+    expect(amounts).toHaveLength(3);
+    expect(amounts[0].classList).toContain('inflow');
+    expect(amounts[1].classList).toContain('outflow');
+    expect(amounts[2].classList).toContain('neutral');
+    expect(
+      amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
+    ).toEqual(['+', '−', '']);
+  });
+
   it('submits cent-preserving split transactions for selected players', async () => {
     const { component, createPlayerTransactions, refreshTeam } = await setup();
     component['playerForm'].setValue({

myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.ts

@@ -24,8 +24,8 @@ import {
   TeamActivity,
 } from '../../../models/transaction.model';
 import { ConfirmDialog, ConfirmDialogData } from '../../../shared/confirm-dialog/confirm-dialog';
+import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
 import { splitAmounts } from './transaction-calculation';
-import { signedTransactionAmount } from '../../../models/transaction-amount';
 
 registerLocaleData(localeDe);
 
@@ -46,6 +46,7 @@ const HIGH_AMOUNT_CONFIRM_THRESHOLD = 300;
     MatProgressSpinnerModule,
     MatSelectModule,
     MatSnackBarModule,
+    TransactionAmount,
   ],
   providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
   templateUrl: './cashbox.html',
@@ -62,9 +63,8 @@ export class Cashbox {
   private readonly teamStore = inject(TeamStore);
   private readonly transactionsApi = inject(TransactionsApi);
   private loadedTeamId: number | null = null;
-  private pendingPenaltyId: number | null = Number(
+  private pendingPenaltyId: number | null =
-    this.route.snapshot.queryParamMap.get('penaltyId'),
+    Number(this.route.snapshot.queryParamMap.get('penaltyId')) || null;
-  ) || null;
 
   protected readonly team = this.teamStore.team;
   protected readonly activities = signal<TeamActivity[]>([]);
@@ -239,10 +239,6 @@ export class Cashbox {
     );
   }
 
-  protected displayAmount(activity: TeamActivity): number {
-    return signedTransactionAmount(activity.amount, activity.type);
-  }
-
   private createPlayerTransactions(transactions: CreatePlayerTransaction[]): void {
     this.saving.set(true);
     this.transactionsApi.createPlayerTransactions(transactions).subscribe({

myteamwallet_frontend_modern/src/app/features/team/members/player-detail.html

@@ -49,9 +49,13 @@
                 >{{ transaction.date | date: 'dd.MM.yyyy' }} · {{ typeName(transaction) }}</span
               >
             </div>
-            <strong [class.negative]="displayAmount(transaction) < 0">{{
+            <strong>
-              displayAmount(transaction) | currency: 'EUR'
+              <app-transaction-amount
-            }}</strong>
+                [amount]="transaction.amount"
+                [type]="transaction.type"
+                context="player"
+              />
+            </strong>
           </article>
         }
       </div>

myteamwallet_frontend_modern/src/app/features/team/members/player-detail.spec.ts

@@ -38,7 +38,11 @@ describe('PlayerDetail', () => {
     };
   }
 
-  async function create(team: ReturnType<typeof makeTeam>, user: unknown) {
+  async function create(
+    team: ReturnType<typeof makeTeam>,
+    user: unknown,
+    transactions: unknown[] = [],
+  ) {
     refreshTeam = vi.fn();
     currentUser = signal(user);
     closeDialog = new Subject<boolean>();
@@ -50,7 +54,10 @@ describe('PlayerDetail', () => {
         provideHttpClient(),
         provideHttpClientTesting(),
         provideRouter([]),
-        { provide: TeamStore, useValue: { team: signal(team), loading: signal(false), refreshTeam } },
+        {
+          provide: TeamStore,
+          useValue: { team: signal(team), loading: signal(false), refreshTeam },
+        },
         { provide: AuthStore, useValue: { currentUser } },
         { provide: MatDialog, useValue: dialog },
         {
@@ -62,7 +69,7 @@ describe('PlayerDetail', () => {
     const fixture = TestBed.createComponent(PlayerDetail);
     fixture.detectChanges();
     httpMock = TestBed.inject(HttpTestingController);
-    httpMock.expectOne(`${teamsApiUrl}/players/7/transactions`).flush([]);
+    httpMock.expectOne(`${teamsApiUrl}/players/7/transactions`).flush(transactions);
     await fixture.whenStable();
     fixture.detectChanges();
     return fixture;
@@ -71,26 +78,59 @@ describe('PlayerDetail', () => {
   afterEach(() => httpMock.verify());
 
   it('renders the selected player and transaction history', async () => {
-    const fixture = await create(
+    const fixture = await create(makeTeam({ balance: -12 }), { id: 99, role: { id: 2 } });
-      makeTeam({ balance: -12 }),
-      { id: 99, role: { id: 2 } },
-    );
     expect(fixture.nativeElement.textContent).toContain('Alex Muster');
     expect(fixture.nativeElement.textContent).toContain('-12,00');
   });
 
+  it('renders player inflow, reversal outflow, and neutral amounts with their cash-flow meaning', async () => {
+    const fixture = await create(makeTeam(), { id: 99, role: { id: 2 } }, [
+      {
+        id: 1,
+        date: '2026-07-31',
+        amount: 12,
+        type: { id: 0, name: 'payment' },
+      },
+      {
+        id: 2,
+        date: '2026-07-30',
+        amount: -3,
+        type: { id: 0, name: 'payment' },
+      },
+      {
+        id: 3,
+        date: '2026-07-29',
+        amount: 5,
+        type: { id: 11, name: 'fine' },
+      },
+    ]);
+    const amounts = [
+      ...fixture.nativeElement.querySelectorAll(
+        'app-transaction-amount [data-testid="transaction-amount"]',
+      ),
+    ] as HTMLElement[];
+
+    expect(amounts).toHaveLength(3);
+    expect(amounts[0].classList).toContain('inflow');
+    expect(amounts[1].classList).toContain('outflow');
+    expect(amounts[2].classList).toContain('neutral');
+    expect(
+      amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
+    ).toEqual(['+', '−', '']);
+  });
+
   it('hides the manage controls for a user without team-manager rights', async () => {
     const fixture = await create(makeTeam(), { id: 99, role: { id: 2 } });
-    const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
+    const button = [...fixture.nativeElement.querySelectorAll('button')].find(
-      b.textContent?.includes('Deaktivieren'),
+      (b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
     );
     expect(button).toBeUndefined();
   });
 
   it('shows the manage controls for a global admin', async () => {
     const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
-    const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
+    const button = [...fixture.nativeElement.querySelectorAll('button')].find(
-      b.textContent?.includes('Deaktivieren'),
+      (b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
     );
     expect(button).toBeDefined();
   });
@@ -100,16 +140,16 @@ describe('PlayerDetail', () => {
       makeTeam({ user: { id: 42 }, teamRole: { id: 3, name: 'captain' } }),
       { id: 42, role: { id: 2 } },
     );
-    const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
+    const button = [...fixture.nativeElement.querySelectorAll('button')].find(
-      b.textContent?.includes('Deaktivieren'),
+      (b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
     );
     expect(button).toBeDefined();
   });
 
   it('deactivates the player on confirm and refreshes the team', async () => {
     const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
-    const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
+    const button = [...fixture.nativeElement.querySelectorAll('button')].find(
-      b.textContent?.includes('Deaktivieren'),
+      (b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
     ) as HTMLButtonElement;
     button.click();
 
@@ -128,8 +168,8 @@ describe('PlayerDetail', () => {
 
   it('does not call the API when the confirmation dialog is dismissed', async () => {
     const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
-    const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
+    const button = [...fixture.nativeElement.querySelectorAll('button')].find(
-      b.textContent?.includes('Deaktivieren'),
+      (b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
     ) as HTMLButtonElement;
     button.click();
     closeDialog.next(false);

myteamwallet_frontend_modern/src/app/features/team/members/player-detail.ts

@@ -15,8 +15,8 @@ import { AuthStore } from '../../../core/auth/auth-store';
 import { TeamStore } from '../../../core/team/team-store';
 import { TeamsApi } from '../../../core/team/teams-api';
 import { PlayerTransaction } from '../../../models/transaction.model';
-import { signedTransactionAmount } from '../../../models/transaction-amount';
 import { ConfirmDialog } from '../../../shared/confirm-dialog/confirm-dialog';
+import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
 
 registerLocaleData(localeDe);
 
@@ -32,6 +32,7 @@ registerLocaleData(localeDe);
     MatIconModule,
     MatProgressSpinnerModule,
     MatSelectModule,
+    TransactionAmount,
   ],
   providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
   templateUrl: './player-detail.html',
@@ -88,10 +89,6 @@ export class PlayerDetail {
       : (transaction.type?.name ?? 'Buchung');
   }
 
-  protected displayAmount(transaction: PlayerTransaction): number {
-    return signedTransactionAmount(transaction.amount, transaction.type);
-  }
-
   protected changeActive(): void {
     const team = this.team();
     const player = this.player();
@@ -117,7 +114,9 @@ export class PlayerDetail {
           .subscribe({
             next: () => this.teamStore.refreshTeam(),
             error: (error: HttpErrorResponse) =>
-              this.mutationError.set(this.errorMessage(error, 'Status konnte nicht geändert werden.')),
+              this.mutationError.set(
+                this.errorMessage(error, 'Status konnte nicht geändert werden.'),
+              ),
           });
       });
   }

myteamwallet_frontend_modern/src/app/features/team/overview/overview.html

@@ -43,9 +43,13 @@
             ><span>{{ activity.note || activity.type }}</span
             ><small>{{ activity.date | date: 'dd.MM.yyyy' }}</small>
           </div>
-          <strong class="activity__amount" [class.negative]="displayAmount(activity) < 0">{{
+          <strong>
-            displayAmount(activity) | currency: 'EUR'
+            <app-transaction-amount
-          }}</strong>
+              [amount]="activity.amount"
+              [type]="activity.type"
+              [context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
+            />
+          </strong>
         </article>
       }
     </div>

myteamwallet_frontend_modern/src/app/features/team/overview/overview.scss

@@ -44,12 +44,7 @@ h2 {
 .balance-card--primary {
   // background: var(--mat-sys-primary-container);
   // color: var(--mat-sys-on-primary-container);
-  background: linear-gradient(
+  background: linear-gradient(135deg, #5ca34c 0%, #4f8f46 55%, #3f7f3c 100%);
-    135deg,
-    #5ca34c 0%,
-    #4f8f46 55%,
-    #3f7f3c 100%
-  );
 
   color: #ffffff;
 }
@@ -76,7 +71,6 @@ h2 {
   border-radius: 14px;
   background: var(--mat-sys-secondary-container);
   color: var(--mat-sys-on-secondary-container);
-
 }
 .activity__copy {
   display: flex;
@@ -90,12 +84,6 @@ h2 {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.activity__amount {
-  color: var(--mat-sys-primary);
-}
-.activity__amount.negative {
-  color: var(--mat-sys-error);
-}
 .state {
   min-height: 180px;
   display: flex;

myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts

@@ -43,11 +43,28 @@ describe('Overview', () => {
           id: 1,
           date: '2026-07-31',
           amount: 12,
-          type: 'fine',
+          type: 'payment',
           note: 'Beitrag',
           playerName: 'Alex',
           isTeamWalletTransaction: false,
         },
+        {
+          id: 2,
+          date: '2026-07-30',
+          amount: 8,
+          type: 'expense',
+          note: 'Material',
+          isTeamWalletTransaction: true,
+        },
+        {
+          id: 3,
+          date: '2026-07-29',
+          amount: 5,
+          type: 'fine',
+          note: 'Training',
+          playerName: 'Bea',
+          isTeamWalletTransaction: false,
+        },
       ]);
     await fixture.whenStable();
     fixture.detectChanges();
@@ -55,7 +72,18 @@ describe('Overview', () => {
     expect(fixture.nativeElement.textContent).toContain('125,00');
     expect(fixture.nativeElement.textContent).toContain('Alex');
     expect(fixture.nativeElement.textContent).toContain('Beitrag');
-    expect(fixture.nativeElement.textContent).toContain('-12,00');
+    const amounts = [
+      ...fixture.nativeElement.querySelectorAll(
+        'app-transaction-amount [data-testid="transaction-amount"]',
+      ),
+    ] as HTMLElement[];
+    expect(amounts).toHaveLength(3);
+    expect(amounts[0].classList).toContain('inflow');
+    expect(amounts[1].classList).toContain('outflow');
+    expect(amounts[2].classList).toContain('neutral');
+    expect(
+      amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
+    ).toEqual(['+', '−', '']);
 
     routeParams.next(convertToParamMap({ id: '6' }));
     TestBed.inject(HttpTestingController)

myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts

@@ -9,7 +9,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TeamStore } from '../../../core/team/team-store';
 import { TransactionsApi } from '../../../core/team/transactions-api';
 import { TeamActivity } from '../../../models/transaction.model';
-import { signedTransactionAmount } from '../../../models/transaction-amount';
+import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
 import { of } from 'rxjs';
 import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
 
@@ -17,7 +17,14 @@ registerLocaleData(localeDe);
 
 @Component({
   selector: 'app-overview',
-  imports: [CurrencyPipe, DatePipe, MatCardModule, MatIconModule, MatProgressSpinnerModule],
+  imports: [
+    CurrencyPipe,
+    DatePipe,
+    MatCardModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    TransactionAmount,
+  ],
   providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
   templateUrl: './overview.html',
   styleUrl: './overview.scss',
@@ -60,8 +67,4 @@ export class Overview {
   protected activityIcon(activity: TeamActivity): string {
     return activity.isTeamWalletTransaction ? 'account_balance' : 'person';
   }
-
-  protected displayAmount(activity: TeamActivity): number {
-    return signedTransactionAmount(activity.amount, activity.type);
-  }
 }