bastian/teamwallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: define team cash flow presentation

Browse Source
This commit is contained in:
Bastian Wagner
2026-08-01 19:48:50 +02:00
parent 6eab6251d5
commit 4e6b945eec
2 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/superpowers/plans/2026-08-01-team-cash-flow-presentation.md Normal file
View File

@@ -0,0 +1,70 @@
# 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.

23
docs/superpowers/specs/2026-08-01-team-cash-flow-presentation-design.md Normal file
View File

@@ -0,0 +1,23 @@
# Team Cash Flow Presentation Design
## Goal
Display transaction amounts consistently from the team wallet's perspective in every modern-frontend transaction history.
## Semantics
- A player payment and a team-wallet credit are real inflows: green with an explicit plus sign.
- A team-wallet expense and a negative player-payment reversal are real outflows: red with a mathematical minus sign.
- Player fines, levies, fees, and player credits do not move team-wallet cash: grey and unsigned.
- Unknown transaction types are neutral to avoid claiming a cash movement that the application cannot prove.
- Player payouts remain general team-wallet expenses with the player's name in the note; no new transaction type is introduced.
## Design
Replace the existing debit-only amount helper with a context-aware cash-flow presenter. A shared standalone Angular component owns formatting, semantic color, signs, and accessible labels. Cashbox and overview activities pass `team` or `player` based on `isTeamWalletTransaction`; private and public player histories always pass `player`.
No backend API, database, balance calculation, booking form, balance card, or legacy-frontend behavior changes.
## Accessibility and Testing
The visible amount uses `+`, `−`, or no sign and Material semantic color tokens. The amount exposes an accessible German label identifying Einzahlung, Auszahlung, or keine Kassenbewegung. Unit tests cover numeric, string, and object transaction types plus reversals and unknown types; component and view tests prove consistent rendering in all four histories.