## Ergebnis: Frontend-/UX-Inventur Sprint 16 ### 1. Routing und Navigation **Kanonische Household-Routen** - `/household` → `HouseholdOverviewPage.vue` - `/household/transactions` → `HouseholdTransactionsPage.vue` - `/household/review` → `HouseholdReviewPage.vue` - `/household/imports` → `HouseholdImportsPage.vue` Quelle: `frontend/src/router/index.ts:32-35,57-60` **Alias-/Legacy-Routen** - Übersicht: `/planning/budget` → `/household` - Buchungen: `/planning/budget/transactions` → `/household/transactions` - Einnahmen/Ausgaben: `/planning/budget/income/actual` und `/planning/budget/expenses/actual` → `/household/transactions` mit `type`-Query - Prüfung: - `/planning/budget/expenses/review` - `/planning/budget/review-backlog` - `/planning/budget/import-review` → `/household/review` - Import: - `/planning/budget/import` - `/planning/budget/imports` - `/planning/budget/monthly-import` - `/planning/budget/visa-import` → `/household/imports` Quelle: `frontend/src/router/index.ts:38-39,61,64,76,78,80-85,93-94,101` **Wichtiger Befund:** `BudgetImportReviewPage.vue` ist nicht geroutet. Insbesondere `/planning/budget/import-review` lädt nicht diese Seite, sondern leitet auf `HouseholdReviewPage.vue` um (`router/index.ts:83`). **Aktuelle Navigation widerspricht „nur Zu prüfen / Alle Buchungen“:** - HouseholdTabs zeigt vier Einträge: Übersicht, Transaktionen, Prüfen, Importe (`components/household/HouseholdTabs.vue:14-19`). - Globale Household-Navigation hat zusätzlich Budgetstatus, Transfers, Konten und Kategorien (`navigation/userNav.ts:49-57`). - Desktop, Mobile-Drawer und Mobile-„Mehr“ werden aus dieser Quelle erzeugt (`components/SidebarNav.vue:8-43,68-101`). --- ### 2. Aktive Household-Seiten #### `HouseholdReviewPage.vue` - Zeigt **klassifikationsbasierte Gruppen**, keine einzelnen Buchungen (`pages/HouseholdReviewPage.vue:8-27`). - Acht Aktionsbuttons pro Gruppe: Transfer, Einnahme, Ausgabe, Duplikat, Kategorie, Aufteilen, Migros verknüpfen, Ignorieren (`:42-46`). - Preview→Confirm mit Fingerprint-Bindung ist vorhanden (`:58-72`). - Keine Checkbox-Auswahl, keine Sammelbestätigung über frei gewählte Buchungen. - Keine Inline-Kategorieauswahl. - Kein Kontextmenü und kein Drawer. - Verwendet nur `Button`, `Message`, `HouseholdTabs` (`:35-40`). #### `HouseholdTransactionsPage.vue` - Bestätigte Buchungen als responsive Kartenliste (`:22-28`). - Sieben Filter inkl. Prüfstatus (`:6-16`), obwohl Backend für produktive Buchungen immer `reviewed` liefert und `open/ignored` explizit leer macht (`src/.../household_import.py:1035-1071`). - Keine Zeilenaktionen, Kategorieänderung oder Detailansicht. - Verwendet `Button`, `Message`, `Tag`, `HouseholdTabs` (`:37-44`). #### `HouseholdImportsPage.vue` - Lokaler CSV-Read, Mapping, Preview→Confirm und Verlauf (`:10-41,87-125`). - Dateiname wird bewusst nur als `"selected"` gehalten (`:94-95`) und nicht angezeigt. - `source_reference` wird nicht gerendert, aber erneut an Preview/Confirm gesendet (`:97-100,116`). - Verwendet `Button`, `Message`, `Tag`, `HouseholdTabs` (`:45-51`). #### `HouseholdOverviewPage.vue` - Fünf KPIs und drei Status-/Next-Step-Karten (`:16-42,60-68`). - Monat wird in URL gehalten (`:55-56,69-76`). - Verwendet `Message`, `Tag`, `HouseholdTabs` (`:46-53`). --- ### 3. `BudgetImportReviewPage.vue`: vorhandene Wiederverwendung Die ungeroutete Legacy-Seite enthält bereits fast alle benötigten Mechaniken: - **Checkbox-Selektion und „alle sichtbaren“**: `:71-72,155,190` - **Inline-Kategorie-Select**: `:77,200` - **Bulk-Kategorie**: `:28,37-39,201` - **Sammelbestätigung mit Preview-Dialog**: `:38,41,101-110,202-203` - **Einzelaktionen** wie bestätigen, ignorieren, Transfer, Split und Duplikat-Override: `:82,191-215` - **Kategoriebaum/Optionsaufbereitung**: `:152-154` - **Pinia-Store für Kandidaten und Summary**: `stores/budgetReviewStore.ts:4-17` Verwendete UI-Bausteine: PrimeVue `Button`, `Card`, `Column`, `DataTable`, `Dialog`, `InputText`, `Message`, `Select`, `Tabs`, `Tag`, `Toolbar`, Confirm und Toast (`BudgetImportReviewPage.vue:116-134`). **Aber die Seite ist kein geeigneter unveränderter Zielzustand:** - 20 Quell-/Techniktabs statt zwei Nutzersichten (`:148-151`). - „Confidence“ wird direkt angezeigt (`:79,178`). - `source_type` und `source_file_label` werden direkt angezeigt (`:74`). - `classification`, `rule_name`, `review_reason` und `notes` werden sichtbar (`:78-80`). - Typ-Labels geben technische Codes wie `investment_transfer`, `credit_card_payment` und `covered_by_source` zurück (`:181-185`). - Der generische Detaildialog zeigt nahezu alle DTO-Felder; nur fünf Schlüssel sind ausgeblendet (`:88-92,166-167`). Dadurch können Kandidaten-ID, Dateiname, Confidence, Classification, Review-Reason und Verknüpfungs-IDs erscheinen. - Bulk-Konflikte zeigen rohe `reason`-Codes (`:109`). - Einzelaktionen sind als große Button-Gruppe statt Kontextmenü organisiert (`:82`). - Desktop-DataTable nutzt auf kleinen Screens nur horizontalen Scroll (`:71`), keine mobile Karten-/Drawer-Komposition. --- ### 4. API-Clientverträge #### Safe Household-Client `frontend/src/api/household.ts:3-133` definiert reduzierte DTOs für: - Übersicht und Status - bestätigte Transaktionen - gruppierte Reviews - Importoptionen, Preview, Confirm und Verlauf Endpunkte: `frontend/src/api/household.ts:142-155`. **Contract-Lücke für Sprint 16:** `HouseholdReviewGroup` enthält nur Gruppenschlüssel, Titel, Summe, vorgeschlagene Aktion und unterstützte Aktionen (`:45-58`). Es fehlen: - einzelne Kandidaten/Buchungen - stabile UI-Auswahl-ID - Händler, Datum und Betrag pro Zeile - aktuelle/vorgeschlagene Kategorie - Kategorieoptionen - Auswahl-/Batch-Preview für beliebige Zeilen - row-spezifische Menüaktionen Damit sind Inline-Kategorie, kontextuelles Zeilenmenü und frei wählbare Sammelbestätigung über den aktuellen Household-Contract nicht umsetzbar. #### Legacy Budget-Client - Kandidatenmodell mit allen Roh-/Technikfeldern: `frontend/src/api/budget.ts:54-55` - Kategorieänderung: `:193-194` - Einzel-Confirm/Ignore/Reopen/Typ: `:188-197` - Batch-Preview und Batch-Aktion: `:201-207` - Split/Kategorie erstellen: `:208-209` - Kategorien/Konten: `:145-146` Mehrere Schreibverträge sind nur als `unknown` bzw. `Record` typisiert (`:188-209`). Für Sprint 16 sollte mindestens der tatsächlich verwendete Batch-/Action-Subset explizit typisiert werden. #### Technische Codes auf der kanonischen Household-Seite Auch der reduzierte Contract garantiert noch keine ausschließlich fachlichen Texte: - Backend erzeugt Gruppentitel direkt aus `classification.replace("_", " ").title()` (`src/jarvis_finance/services/household_import.py:1088-1114`). - UI zeigt `group.proposed_action` als Fallback (`HouseholdReviewPage.vue:10`). - Transaktionsseite fällt bei unbekannten Typen/Status auf den Rohwert zurück (`HouseholdTransactionsPage.vue:54-55`). - Importverlauf und Overview zeigen rohe `status`-Werte (`HouseholdImportsPage.vue:38`; `HouseholdOverviewPage.vue:68`). --- ### 5. Drawer-/Menü-Wiederverwendung Ein responsiver, zugänglicher Drawer existiert bereits: - `frontend/src/components/DetailDrawer.vue:1-65` - Mobile Bottom Sheet, Desktop-Seitendrawer (`:15`) - Dialog-Semantik, Escape, Fokusfalle und Fokus-Rückgabe (`:9-16,40-64`) Er wird von den Household-Seiten und `BudgetImportReviewPage` aktuell **nicht verwendet**. Vor Wiederverwendung muss das fest codierte Eyebrow „Positionsdetails“ generalisiert werden (`:21`). Ein dediziertes Household-Kontextmenü existiert nicht. Minimal möglich wäre ein kleiner Icon-Button pro Buchung plus Menü-/Drawer-State; Detail- und komplexe Aktionen können in den vorhandenen `DetailDrawer` wandern. --- ### 6. Responsive CSS und Tests **Household-CSS** `frontend/src/style.css:39-126` enthält eine eigenständige responsive Household-Schicht: - Desktop-Grids und Karten: `:46-94` - Breakpoints 1100/900/700/420 px: `:99-126` - Mobile: einspaltige Buchungen, 2×2 Tabs, reduzierte KPI-/Impact-Grids und 44px Review-Aktionen (`:109-126`) Die CSS-Basis ist gut wiederverwendbar. Für Sprint 16 fehlen Styles für: - Auswahlzustand/Checkbox-Zeile - kompakte Zwei-Tab-Leiste - Zeilen-Kontextbutton - Drawer-Inhalt - sticky Sammelaktionsleiste auf Mobile **Tests** - Household-Routen, Übersicht, Filter, Preview/Confirm und Import-Sicherheit: `pages/HouseholdUx.test.ts:52-129` - API-Importvertrag: `api/household.test.ts:5-31` - globale Navigation: `navigation/UserNavigationSmoke.test.ts:8-61` - Mobile Drawer/Bottom Nav: `components/SidebarNav.mobile.test.ts:10-48` - Legacy Inline-Kategorie, Bulk-Kategorie, Batch-Preview, Duplikate und Transfers: `pages/BudgetImportProductionV2.test.ts:47-147` - Legacy-Feldschutz nur gegen wenige konkrete Schlüssel: `pages/BudgetUxV2.test.ts:150-172` **Testlücken / Zielkonflikte** - Household-Test erwartet weiterhin alle vier Household-Routen/Tabs und acht Review-Aktionen. - Keine Tests für die gewünschte Zwei-Tab-IA. - Keine kanonischen Household-Tests für Checkboxen, Inline-Kategorie, Kontextmenü/Drawer oder Sammelbestätigung. - Legacy-Test erwartet sogar technische Texte wie `subscription_auto` und `duplicate_candidate_blocked` (`BudgetImportProductionV2.test.ts:58,97`). - Keine echte Viewport-/Computed-Layout-Prüfung der Household-Seiten; geprüft werden überwiegend CSS-Klassen. Gezielt ausgeführt: **6 Testdateien, 30 Tests bestanden**. Bei Legacy-Page-Tests erscheinen lediglich Vue-Warnungen wegen fehlender Router-Injection im isolierten Mount. --- ## Minimale Änderungsflächen für Sprint 16 1. **IA auf zwei Nutzersichten reduzieren** - `components/household/HouseholdTabs.vue:14-19` - `navigation/userNav.ts:49-57` - ggf. Root-/Aliasentscheidung in `router/index.ts:57-101` - Alte URLs aus Kompatibilitätsgründen als Redirects behalten. 2. **Kanonische Review-Seite zur Buchungs-Inbox umbauen** - `pages/HouseholdReviewPage.vue:8-76` - Aus `BudgetImportReviewPage.vue` wiederverwenden: Auswahl, Kategorieoptionen, Batch-Preview/-Confirm und Aktionshandler. - Komplexe Einzelaktionen in `components/DetailDrawer.vue` statt großer Buttonmatrix. 3. **Safe zeilenbasierter Clientvertrag** - `api/household.ts:45-66,142-146` erweitern oder einen strikt gemappten Budget-Kandidaten-Client einführen. - Nicht das vollständige `BudgetTransactionCandidate`-DTO ungefiltert in den Drawer geben. - Batch- und Menü-Action-Payloads explizit typisieren. 4. **Alle sichtbaren Codes zentral fachlich mappen** - Keine Fallback-Ausgabe auf rohe Status-/Typ-/Classification-Werte. - Besonders `HouseholdReviewPage.vue:10`, `HouseholdTransactionsPage.vue:54-55`, `HouseholdImportsPage.vue:38`, `HouseholdOverviewPage.vue:68`. - `BudgetImportReviewPage.vue:74,78-80,166-185` nicht unverändert übernehmen. 5. **Tests migrieren** - `HouseholdUx.test.ts` zur kanonischen Sprint-16-Akzeptanz ausbauen. - Bulk-/Inline-/Duplicate-Mechanik aus `BudgetImportProductionV2.test.ts` übernehmen, technische Text-Erwartungen entfernen. - Drawer-Fokus, Escape, Mobile-Komposition und „keine Codes/Confidence/Referenzen“ explizit prüfen. ### Read-only-Status Ich habe keine Dateien erstellt oder geändert. `git diff --stat` und `git diff --check` sind leer. Während der Inventur erschienen unabhängig davon untracked `.venv` und `docs/sprint16-smart-household-version-bound-inventory.md`; diese stammen nicht aus meiner Arbeit. HEAD blieb unverändert auf `852aac4a8060d2dfec716fc630560a11d297abde`.