# Vue UX Reference Analysis for JARVIS Finance Dashboard

Scope: UX-/architecture inspiration only. No code, assets, screenshots, visual branding, or proprietary implementation details are copied.

## Reference analysis

### ezBookkeeping

- Self-hosted/local-first: strong fit for JARVIS because the runtime DB remains local and FastAPI is only a thin read-only boundary.
- Multi-currency: relevant pattern is clear base-currency display with original-currency context only where it helps decision-making.
- Budget/bookkeeping structure: accounts, categories, and simple ledgers are useful later, but out of v0.
- Account/category organisation: inspire future Cash/Budget navigation, not current portfolio write flows.
- Mobile/desktop: responsive cards before tables; tables must have surrounding context and empty states.
- Relevance: later Budget, Cashflow, Accounts, Income/Expense, local data sovereignty.

### NewLedger

- Accounting dashboard: relevant as a business-app command center: KPI cards, compact charts, status, and drill-downs.
- P&L/cashflow/receivables: not implemented in v0, but informs future cashflow modules.
- Quasar/Vue structure: confirms componentized shell, route pages, and state boundaries; we stay with Vite/Tailwind for lower overhead.
- Pinia/state management: useful later once cross-page state grows; v0 remains simple local page state.
- Transaction management: only informs detail/table UX; no transaction writes now.
- Relevance: Command Center, portfolio/cashflow cards, transaction/detail patterns.

### VueStash

- Budgeting UX: clear budget cards, progress, and cashflow summaries are relevant later.
- Cashflow planning: useful for Health Reserve and Cashflow Ladder, out of v0.
- Offline/privacy-first: strongly aligned; normal page render must not trigger provider calls or leak secrets. Vue may auto-load only local FastAPI/runtime data.
- Vue/Vite/TypeScript/Tailwind: confirms our selected stack.
- Simple operation: use automatic local data load, visible status, and `Aktualisieren` over fake action buttons.
- Relevance: later Budget module, Liquiditätsplanung, Health Reserve, Cashflow Ladder.

### Financial Freedom

- Net-worth and goals: relevant to strategic planning, but v0 only shows current allocation.
- FIRE/financial independence planning: later scenario/projection module, not v0.
- Self-hosted/data sovereignty: aligned with local runtime DB and no browser secrets.
- Goal/planning dashboard: inspires future strategic monthly review and target views.
- Relevance: Vermögensziele, portfolio development, real return/inflation comparisons, monthly review.

### Fare

- Net-worth charts: applicable to Command Center and Portfolio page as read-only allocation summaries.
- Asset allocation: adopt in v0 as simple local CSS bars, no chart library overhead.
- Transactions list: later; current slice has positions/wallets only.
- Growth rate/FI projection: later roadmap only.
- Dashboard with portfolio + future planning: informs page layout: KPI cards, chart/context, table, drawer.
- Relevance: Command Center charts, asset allocation, portfolio development, later scenario view.

## Design matrix

| Reference | Good pattern | Why relevant | MVP | Later | JARVIS implementation |
|---|---|---|---|---|---|
| ezBookkeeping | Self-hosted/local-first | JARVIS runtime DB stays local | yes | yes | local FastAPI read boundary, no browser secrets |
| ezBookkeeping | Multi-currency clarity | CHF base plus original currency where useful | yes | yes | CHF KPI cards; equity/cash rows keep currency context |
| ezBookkeeping | Accounts/categories | Future cash/budget organisation | no | yes | Cash/Budget module later |
| NewLedger | Business command center | Decision-grade overview | yes | yes | KPI cards + allocation + top positions + data quality |
| NewLedger | Detail-first business UX | Avoid endless tables | yes | yes | row click opens read-only drawer |
| NewLedger | Pinia for complex data | Useful when page state grows | no | yes | defer until write/review flows exist |
| VueStash | Privacy/offline-first | No secrets, no provider calls from render | yes | yes | auto-load local FastAPI/runtime data only; no frontend keys |
| VueStash | Budget/cashflow cards | Health Reserve and ladder later | no | yes | roadmap only |
| Financial Freedom | Net worth/goals | Strategic finance planning | no | yes | future goals/projections pages |
| Financial Freedom | Self-hosted ownership | User data sovereignty | yes | yes | local-only runtime assumptions in copy and architecture |
| Fare | Asset allocation chart | Portfolio overview | yes | yes | Command Center, Crypto, Portfolio allocation bars |
| Fare | Top positions + projections | Current decision context vs future planning | partial | yes | top positions in v0; projections deferred |

## JARVIS UI Design System

### Navigation

- Command Center
- Portfolio
- Crypto
- Aktien & ETFs
- Wallets
- Cash / Budget later
- Reports
- Settings/Admin separately; Streamlit remains Admin/Fallback.

### Main components

- Summary Cards: primary metric, optional hint, subtle status accent.
- Allocation Charts: CSS-only bars for v0; no external chart library needed.
- Position Table: compact rows, context columns, row click for detail.
- Detail Drawer: read-only drill-down, no write buttons.
- Action Bar: currently explicit local data load/status only; no mutations.
- Timeline/History: future module.
- Data Quality Badge: concise user-facing state.
- Review/Confirm Modal: future four-eyes workflow, not v0.
- Empty State: explain what is missing without fake buttons.
- Toast/Status Messages: small local load/error messages, not a notification system yet.

### Layout sketch

1. Left navigation remains stable.
2. Top page header explains scope and read-only mode.
3. Action/status bar offers explicit local data load where data is needed.
4. KPI cards show the financial summary first.
5. Allocation/context chart sits before long tables.
6. Main table is grouped or filtered by meaningful financial concepts.
7. Detail drawer opens on row selection.
8. No endless tables without chart/context/empty state.

### Component hierarchy

```text
App
└─ AppLayout
   ├─ SidebarNav
   └─ RouterView page
      ├─ PageIntro / load status copy
      ├─ SummaryCard[]
      ├─ AllocationBars
      ├─ PositionTable
      └─ DetailDrawer
```

## Deferred roadmap only

- Budgeting
- Cashflow Planner
- Financial Freedom / FIRE Projection
- Goals
- Scenario Planning
- Forecasts
- recurring expenses/income
- Watchlist scoring
- Decision Journal UI