teamwallet/docs/superpowers/plans/2026-08-01-team-cash-flow-presentation.md

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.