# Vue Mobile UX Sprint Pattern — FinanceManager

Use when the user asks to make the Vue/FastAPI Finance dashboard usable on iPhone/iPad or other narrow screens without adding new finance features.

## Scope guard

- Treat this as a UX/responsiveness sprint, not a feature sprint.
- Do **not** start VISA/Migros/OCR/rule/duplicate/provider engines unless the user explicitly opens that scope.
- Normal render stays local DTO/read-model only: no provider calls, no API keys in `VITE_*`, no real data or runtime DB in Git.
- Preserve existing Preview → Confirm → Audit boundaries for any visible write actions.

## Implementation pattern

1. Inventory the shell/navigation and target pages: Command Center, Budgetstatus, Einkünfte, Effektive Ausgaben, Crypto, Portfolio/Equity, Wallets.
2. Add RED frontend tests first for mobile affordances:
   - desktop sidebar remains present at desktop breakpoints;
   - mobile bottom/hamburger navigation exposes only compact high-value routes;
   - every primary bottom item navigates with one tap: Home, Budget, Ausgaben, Crypto, Portfolio;
   - `Mehr` opens reliably and its entries navigate, especially Einkünfte;
   - no mobile nav item is accidentally disabled or covered by overlay/z-index issues;
   - Budgetstatus/Ausgaben/Crypto/Equity mobile card lists exist;
   - detail drawer has mobile bottom-sheet/fullscreen classes;
   - no long Decimal strings or technical IDs appear in mobile User Mode.
3. Keep Desktop behaviour intact: tables remain for `md`/`lg` and up.
4. On mobile, replace broad tables with Cards:
   - Budgetstatus cards: category, budget month, actual month, forecast, deviation, status/ampel.
   - Ausgaben cards: date, merchant/description, category, account, amount, status.
   - Einkünfte cards: name, source/person, type, monthly value, yearly value, status.
   - Crypto cards: coin, symbol, wallet count, CHF value, price status/allocation.
   - Equity/ETF cards: name, asset class/account, CHF value, valuation status.
   - Wallet cards: wallet name/type, coin count, CHF value, status.
5. Keep unavoidable large matrices/tables desktop-only or in a scoped detail area; do not make the main mobile screen horizontally scroll by default.
6. Make touch controls at least roughly 40px high (`min-h-10`, larger padding) and avoid hover-only interactions.
7. For iPhone bottom navigation, prefer touch-safe `<RouterLink>` anchors with `active-class` over custom `button + router.push` unless there is a strong reason. This avoids iOS tap/focus quirks and keeps navigation compatible with older Vue tests that mock only parts of `vue-router`.
8. Avoid `<details>/<summary>` for critical mobile nav menus. Use an explicit `Mehr` button + absolutely positioned panel with clear `z-index` (`z-[70]` bottom nav, higher for the panel) and safe-area bottom padding.
9. Keep stable test hooks for both the closed wrapper and opened panel (`mobile-more-menu`, `mobile-more-button`, `mobile-more-panel`). If legacy tests expect More-menu labels while closed, add an `sr-only` label index rather than changing visible UI.
10. Add Coming-soon text for roadmap items rather than fake buttons.
11. Use central formatters for money/percent/quantity; contract tests may need updates when DTO display output standardizes `0` to `0.00`.

## Browser / Tailscale sanity

- Restart stale FastAPI/Vite processes from the current checkout before browser sanity; old processes can mask route/class changes.
- Verify at least these routes return `200`: `/`, `/planning/budget/status`, `/planning/budget/income`, `/planning/budget/expenses/actual`, `/crypto`, `/equity`, `/wallets`.
- If real mobile viewport emulation tooling is unavailable, do not claim it was performed. State the limitation and rely on responsive-class tests plus route sanity.
- Always report local and Tailscale links; derive the latter with `tailscale ip -4`. Report `tailscale serve status` but do not force HTTPS/Serve changes unless requested.

## Verification gate

Run the normal FinanceManager gate before commit/push:

- `unset JARVIS_FINANCE_DB_PATH` before backend pytest unless a fixed DB path is intentionally required.
- Python compile and full `pytest`.
- Frontend `npm test -- --run` and `npm run build` from `frontend/`.
- `git diff --check`.
- Changed-source secret scan and `frontend/dist` secret scan.
- Git-safety: no runtime DBs, raw exports, reports, spreadsheets, credentials or API keys staged.
- Commit, push, verify remote hash equality, restart backend/frontend, verify local and Tailscale health.