# Team Cash Flow Presentation Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Present every modern-frontend transaction history from the team wallet's cash-flow perspective.

**Architecture:** Replace the debit-only helper with a context-aware pure presenter and render it through one shared standalone Angular component. All four histories consume the component, while backend contracts and financial calculations remain untouched.

**Tech Stack:** Angular 21, standalone components, signals, Angular Material, Vitest.

## Global Constraints

- Modify only `myteamwallet_frontend_modern` plus this feature's documentation.
- Do not modify the backend, database, legacy frontend, balance calculations, forms, or transaction APIs.
- Inflows are green and visibly prefixed with `+`; outflows are red and prefixed with `−`; non-cash entries are grey and unsigned.
- Player payment is an inflow unless its stored amount is negative, in which case it is an outflow reversal.
- Team credit is an inflow; team expense is an outflow.
- Player credit, fine, levy, fee, and unknown types are neutral.
- Use Material theme tokens and expose a German accessible direction label; color must not be the only signal.

---

### Task 1: Central cash-flow semantics and amount component

**Files:**
- Modify: `myteamwallet_frontend_modern/src/app/models/transaction-amount.ts`
- Modify: `myteamwallet_frontend_modern/src/app/models/transaction-amount.spec.ts`
- Create: `myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.ts`
- Create: `myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.html`
- Create: `myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.scss`
- Create: `myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.spec.ts`

**Interfaces:**
- Produce `CashFlowDirection = 'inflow' | 'outflow' | 'neutral'`.
- Produce `CashFlowContext = 'player' | 'team'`.
- Produce `CashFlowPresentation { direction; amount; sign }`, where amount is absolute and sign is `'+' | '−' | ''`.
- Produce `presentCashFlow(amount, type, context): CashFlowPresentation`.
- Produce standalone `TransactionAmount` with required `amount`, `type`, and `context` inputs.

- [ ] Write table-driven helper tests with hand-derived expectations for numeric, string, and object types, payment reversal, and unknown type.
- [ ] Write component tests proving visible signs, semantic classes, currency output, and German accessible labels.
- [ ] Run the two focused specs and confirm they fail because the presenter and component do not exist.
- [ ] Implement the minimal pure presenter and standalone component using `CurrencyPipe`, `LOCALE_ID: de-DE`, `var(--mat-sys-primary)`, `var(--mat-sys-error)`, and `var(--mat-sys-on-surface-variant)`.
- [ ] Run the focused specs until green, format only touched files, and commit the task.

### Task 2: Adopt the shared presentation in every history

**Files:**
- Modify/Test: `myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.*`
- Modify/Test: `myteamwallet_frontend_modern/src/app/features/team/overview/overview.*`
- Modify/Test: `myteamwallet_frontend_modern/src/app/features/team/members/player-detail.*`
- Modify/Test: `myteamwallet_frontend_modern/src/app/features/public-team/public-player.*`

**Interfaces:**
- Consume `TransactionAmount` from Task 1.
- Combined `TeamActivity` rows pass `context = activity.isTeamWalletTransaction ? 'team' : 'player'`.
- Private and public player rows pass `context = 'player'`.

- [ ] Extend the four view specs so the old signed-number rendering fails for inflow, outflow, and neutral entries.
- [ ] Run the focused view specs and confirm expected failures.
- [ ] Import and render `TransactionAmount` in all four standalone components; remove obsolete `displayAmount` methods, helper imports, and local positive/negative amount styling.
- [ ] Run the focused view specs until green and format only touched files.
- [ ] Run the complete modern-frontend suite, TypeScript check, Angular build, and `git diff --check`.
- [ ] Confirm the feature range contains no backend or legacy-frontend paths, then commit the task.

### Task 3: Review and finish

- [ ] Request task-level and full-range read-only reviews; fix Critical/Important findings and re-run covering tests.
- [ ] Re-run the full modern-frontend suite, TypeScript check, build, and scope/diff checks on final HEAD.
- [ ] Use the branch-finishing workflow and preserve the worktree until the user chooses integration.