## Sprint 20C frontend implementation map

**Base inspected:** `0e2cd9f7291e941050a21e52b0c56d4f59ea6b7a`  
**Recommended scope:** one small shared setup component, existing pages only; no new route or state store.

### 1. Performance setup

- **New:** `frontend/src/components/performance/PerformanceSetupCard.vue`
  - Replace the inline setup block currently in `PortfolioPerformancePanel.vue`.
  - Exactly one compact card with source rows in fixed order:
    1. **True Wealth**
    2. **Crypto**
    3. **PostFinance**
  - Each row: source name, simple status badge, one short metric line, one primary action.
  - Only one source action editor/preview may be expanded at once.
  - Preview → Confirm for activation/backfill; never confirm directly.
  - Put fingerprints, reason codes, run IDs, scheduler details and blockers inside closed `<details>`.
  - Mobile: stacked rows and full-width 44px actions; tablet/desktop: status, metrics and action in columns.

- **Modify:** `frontend/src/components/performance/PortfolioPerformancePanel.vue`
  - Keep period/scope controls, five metrics and chart.
  - Replace lines 30–44 inline setup markup and `setupTasks` with `PerformanceSetupCard`.
  - Pass coverage, selected period and daily-job status; reload coverage/performance after confirmed actions.
  - Preserve unavailable-as-unknown behavior and the single-card invariant.

- **Modify:** `frontend/src/api/portfolio.ts`
  - Add typed clients for existing backend contracts:
    - `POST /api/portfolio/performance/activation/preview`
    - `POST /api/portfolio/performance/activation/confirm`
    - `POST /api/portfolio/performance/backfill/preview`
    - `POST /api/portfolio/performance/backfill/confirm`
  - Add `PerformanceSource`, activation preview/confirm, backfill preview/confirm/run types matching `api/schemas/performance_activation.py`.
  - Keep `getDailyValuationJobStatus()` and coverage calls read-only.
  - Do not expose fingerprints or reason codes in normal UI copy.

- **Modify:** `frontend/src/components/portfolio-data/DataIngestionReconciliationPanel.vue`
  - Remove the current second prominent “Täglicher Bewertungsabschluss” setup card.
  - Retain job/source/reconciliation diagnostics only under a collapsed technical `<details>` section.
  - Keep PostFinance import workflow unchanged.
  - This prevents `/portfolio/performance` and `/portfolio/data` from presenting competing setup experiences.

### 2. True Wealth cashflow/nullflow entry

- **Modify:** `frontend/src/pages/TrueWealthPage.vue`
  - Add one compact “Kapitalfluss erfassen” action beside manual total-value/import actions.
  - Progressive form fields:
    - date
    - mode: **Einzahlung**, **Auszahlung**, **Kein externer Kapitalfluss**
    - amount and currency only for deposit/withdrawal
    - required evidence/note
  - Use Preview → Confirm → Audit.
  - Nullflow must be an explicit dated attestation, not a numeric zero cashflow.
  - After confirm, refresh True Wealth summary and performance coverage.
  - Keep technical payload/fingerprint data collapsed.

- **Modify:** `frontend/src/api/truewealth.ts`
  - Add cashflow/nullflow request, preview, confirm and history types/functions once the backend contract lands.
  - **Current-base dependency:** no True Wealth manual cashflow/nullflow endpoint or schema exists at `0e2cd9f`; frontend implementation must not guess a route or emulate this through manual total values.
  - Prefer a dedicated backend Preview/Confirm contract rather than overloading:
    - `/api/truewealth/manual-values/*`
    - performance activation’s broad `attest_complete_external_flows` flag.

### 3. Tests

- **New:** `frontend/src/components/performance/PerformanceSetupCard.test.ts`
  - Fixed True Wealth → Crypto → PostFinance order.
  - Exactly one setup card and one expanded action at a time.
  - Status/action/metrics remain plain-language.
  - Preview precedes confirm; stale/error states do not imply success.
  - Diagnostics closed by default; no reason codes/fingerprints in visible text.

- **Update:** `frontend/src/components/performance/PortfolioPerformancePanel.test.ts`
  - Preserve five metrics and unknown-not-zero assertions.
  - Update task-order/link expectations.
  - Verify refresh after activation/backfill confirmation.
  - Assert no duplicate setup card.

- **Update:** `frontend/src/components/portfolio-data/DataIngestionReconciliationPanel.test.ts`
  - Daily-job diagnostics remain available but collapsed.
  - Assert no second prominent performance setup card.
  - Preserve PostFinance file → preview → confirm tests.

- **Update:** `frontend/src/pages/CashTrueWealthManagement.test.ts`
  - Deposit, withdrawal and nullflow payloads.
  - Amount required only for monetary flows.
  - Nullflow is explicit and never serialized as amount `0`.
  - Preview/confirm IDs are forwarded exactly; refresh and audit receipt follow confirm.

- **Optional structural test:** `frontend/src/pages/MobileUx.test.ts`
  - Assert stacked/full-width mobile classes and 44px minimum controls.
  - Real browser acceptance remains necessary because the repository has no checked-in Playwright dependency.

### Responsive acceptance

- **1440px:** one compact three-row setup card; actions aligned right; five metrics remain readable.
- **820px:** source rows may use two columns; no clipped diagnostics or horizontal overflow.
- **390px:** single-column rows, full-width controls/actions, no tables, no horizontal overflow, collapsed diagnostics.
- At every width: one setup card, source order unchanged, unavailable values never rendered as zero.

### Findings / repository state

- Existing setup order is currently **PostFinance → True Wealth → Crypto**.
- Activation/backfill backend endpoints already exist but have no frontend client or UI.
- Daily-job diagnostics currently create a second setup-like card under Data & Diagnose.
- True Wealth supports manual total values and official imports, but not manual cashflow/nullflow entry.
- **Files modified:** none; read-only analysis only.
- Final worktree remained clean at exact base `0e2cd9f`.