71 lines
4.7 KiB
Markdown
71 lines
4.7 KiB
Markdown
# 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.
|