# UI Framework Decision: JARVIS Finance Dashboard

Datum: 2026-05-17

## Entscheidung

**Gewählt: PrimeVue 4 + Aura Theme + Chart.js via PrimeVue Chart.**

Die Migration erfolgt **inkrementell** innerhalb des bestehenden `frontend/`-Projekts. Es wird kein Sakai-Template kopiert, kein Routing ersetzt und kein Backend umgebaut. Sakai/Aura dienen als visuelle und strukturelle Inspiration: helle Oberfläche, kompakte Cards, Tabellen, Filterleisten, Dialoge, Badges und Charts.

## Kurzprüfung

| Kriterium | PrimeVue/Sakai/Aura | Vuestic Admin / Vuestic UI | Empfehlung |
| --- | --- | --- | --- |
| Tabellen | Sehr starke `DataTable`, Columns, Sort, Pagination, Selection | DataTable vorhanden, aber weniger Finance-App-Standard | PrimeVue |
| Charts | PrimeVue `Chart` auf Chart.js; Bar/Doughnut/Line sauber | Chart-Fähigkeiten vorhanden, aber nicht primärer Vorteil | PrimeVue |
| Forms/Wizards | Select, MultiSelect, DatePicker, InputText, Dialog, Toasts | Gute Forms | PrimeVue leicht vorne |
| Dialoge/Drawer | Dialog, Drawer, Sidebar verfügbar | Dialogs verfügbar | PrimeVue |
| Theme/Look | Aura Theme, Light-first möglich, Design Tokens gut kontrollierbar | Vuestic bringt eigenen Admin-Look | PrimeVue |
| Mobile | Responsive Komponenten + bestehende Tailwind-Breakpoints | Admin-Layout responsive | Gleichstand, PrimeVue flexibler integriert |
| Wartbarkeit | Große Community, Vue 3, Vite, TS-freundlich | Kleinere Ökosystemfläche | PrimeVue |
| KI-/Code-Kompatibilität | Komponenten/API sehr bekannt, gut generierbar | Ebenfalls okay, aber weniger verbreitet | PrimeVue |
| Integrationsaufwand | Niedrig: Plugin + lokale Komponenten, bestehende Routes bleiben | Mittel: Admin-Template wäre stärker eingreifend | PrimeVue |
| Lizenzrisiko | PrimeVue MIT, @primeuix/themes MIT, Chart.js MIT; Sakai als Inspiration, kein Kopieren | Vuestic UI MIT; `vuestic-admin` npm zeigt Security-placeholder | PrimeVue |

## Lizenznotizen

- `primevue`: MIT
- `@primeuix/themes`: MIT
- `chart.js`: MIT
- `primeicons`: MIT
- `vuestic-ui`: MIT
- `vuestic-admin` als npm package ist kein sinnvoller Template-Kandidat (`0.0.1-security` placeholder). Vuestic Admin darf höchstens als öffentliches Repo/Design-Inspiration geprüft werden, nicht blind kopiert.

## Integrationsweise

- PrimeVue wird in `src/main.ts` registriert.
- Aura wird über `@primeuix/themes/aura` als Theme-Preset genutzt.
- Chart.js wird zentral registriert.
- JARVIS Finance Light Tokens liegen in `src/style.css`:
  - primary: ruhiges Blau/Türkis
  - success: Grün
  - warning: Gelb/Orange
  - danger: Rot
  - surface/card: helles Grau/Weiss
  - text/muted: dunkles Grau / Graublau
  - radius: moderat
  - shadow: dezent
  - density: kompakt

## Refactored in diesem Sprint

- Budget Übersicht:
  - PrimeVue Cards für KPI-Leiste
  - PrimeVue Chart für Monats-Cashflow
  - Doughnut Chart für Top-Ausgabenkategorien
  - PrimeVue DataTable für letzte bestätigte Ausgaben
  - Tags/Badges für To-dos und kritische Kategorien

- Effektive Ausgaben:
  - PrimeVue Toolbar und Filter
  - PrimeVue DataTable für bestätigte Transaktionen
  - Kategorie als Tag
  - Betrag rechtsbündig
  - Row/Action Click öffnet PrimeVue Dialog
  - Kategorie-/Tags-Änderung bleibt auditierbar

- Buchungen prüfen:
  - PrimeVue Tabs, Toolbar, Cards, DataTable
  - Batch-Selection über Checkboxen
  - Inline Kategorie-Select
  - Status/Confidence als Tags
  - Dialog für Details/Split/Kategorieerstellung
  - technische IDs bleiben verborgen

- Budget vs Ist:
  - PrimeVue/Chart.js horizontales Bar Chart
  - Doughnut Kategorieanteile
  - kombinierter Monats-Cashflow Chart
  - Line Chart für Trend
  - PrimeVue DataTables für Top-Abweichungen

## Nicht gemacht

- Kein Big-Bang-Rewrite.
- Kein Sakai-Template kopiert.
- Keine fremden Assets übernommen.
- Keine Backend-Fachlogik geändert.
- Keine neuen Budget-/Import-Funktionen.
- Keine Migration von Crypto/Portfolio.
- Kein Dark Mode als Pflichtfeature.

## Später

- PrimeVue Drawer/Toast-Service feiner integrieren.
- Weitere Budgetseiten konsolidieren: Kategorieanalyse, Monatsvergleich.
- Optional Layout-Shell schrittweise hell/professionell machen.
- Optional ECharts nur falls Chart.js/PrimeVue Chart für Finance-Interaktion nicht reicht.