# Global PrimeVue UI Migration Sprint v1

Datum: 2026-05-17

## Ziel

Das Vue User Dashboard nutzt PrimeVue/Aura Light als gemeinsame UI-Basis. Der Sprint bleibt eine UI/UX-Konsolidierung: keine neuen Fachfunktionen, keine Provider, keine Importquellen, keine Backend-Fachlogik.

## Scope

Umgesetzt:

- Globale App Shell auf helle PrimeVue/Aura-Optik umgestellt.
- Sidebar und Mobile Navigation im User Flow neu gruppiert.
- Prominente Terminal-/Runtime-Hinweise reduziert; lokale Daten dürfen automatisch geladen werden.
- Wiederverwendbare UI-Bausteine unter `frontend/src/components/ui/` erstellt.
- Route-based code splitting im Vue Router aktiviert.
- Kategorieanalyse und Monatsvergleich auf PrimeVue/Chart.js angeglichen.
- Bestehende Budget-PrimeVue-Seiten an das neue Shell-/Token-System angebunden.
- Alte Dark-UI-Klassen in User-Dashboard-Seiten entfernt bzw. auf Light-Oberfläche umgebogen.

Nicht umgesetzt:

- Kein Big-Bang-Backend-Rewrite.
- Kein Sakai-Template-Import.
- Keine fremden Assets.
- Keine neuen Budget-/Import-/Provider-Funktionen.
- Kein vollwertiger Dark Mode.

## Shared UI Components

Neue gemeinsame Komponenten:

- `PageHeader`
- `KpiCard`
- `StatusBadge`
- `DataQualityBadge`
- `FilterToolbar`
- `PrimeDataTable`
- `MoneyValue`
- `PercentValue`
- `EmptyState`
- `ConfirmDialog`
- `DetailDialog`
- `ChartPanel`
- `ActionToolbar`
- `SectionCard`
- `LoadingState`
- `ErrorState`

Diese Komponenten dienen als Basis für folgende UI-Sprints, damit Tabellen, Cards, Dialoge, Badges und Page Headers nicht pro Seite neu erfunden werden. Man kann schlechte UX durchaus demokratisieren, muss es aber nicht.

## Navigation

User Mode Navigation:

- Command Center
- Portfolio
- Crypto
- Aktien & ETFs
- Wallets
- Budget
- Transaktionen
- Analyse
- Reports

Budget-Unterpunkte:

- Budget Übersicht
- Budgetstatus
- Budget vs Ist
- Effektive Ausgaben
- Buchungen prüfen
- Effektive Einnahmen
- Kategorien & Tags
- Konten
- Excel übernehmen / Seed Review

Admin/Debug bleibt nicht Teil des normalen User Flow.

## Charts

- PrimeVue `Chart` mit Chart.js.
- Kategorieanalyse: Doughnut für Kategorieanteile.
- Monatsvergleich: kombinierter Bar/Line-Chart für Einnahmen, Ausgaben und Netto.
- Budget vs Ist war bereits im vorherigen Sprint auf Chart.js/PrimeVue migriert.

## Bundle / Code Splitting

Vorher lag der PrimeVue/Chart.js-Build stärker in einem großen Entry-Bundle. In v1 wurde der Router auf lazy-loaded Pages umgestellt.

Build-Ergebnis nach Migration:

- Kein Vite `chunk size limit` Warning mehr.
- Schwere Teile liegen nun in Route-/Library-Chunks, u. a. `datatable`, `tag`, `dialog`, Page-Chunks.
- Weitere Optimierung möglich: Chart-Komponenten dynamisch nur in Analyse-Seiten importieren, falls später nötig.

## Safety

- Keine Runtime-DB ins Git.
- Keine echten Daten ins Git.
- Keine API-Keys ins Frontend.
- Keine Fachlogik am Backend geändert.
- Tests prüfen die neue Shell, Shared Components, Lazy Routes und Entfernung alter Dark-User-Dashboard-Klassen.

## Später

- Weitere Seiten tiefer auf Shared Components refactoren statt nur Light-Styling angleichen.
- PrimeVue `Drawer`/`Toast` flächiger einsetzen.
- Position hinzufügen als echter PrimeVue Stepper/Wizard nachziehen.
- Reports mit finalem Reportmodell ausbauen, ohne Fake-Buttons.