438 lines
26 KiB
Markdown
438 lines
26 KiB
Markdown
<!-- status: build -->
|
|
<!-- started: 2026-06-10 -->
|
|
<!-- component: ui-nyla -->
|
|
|
|
# Layout Foundation — Gesamtplan
|
|
|
|
## Beschreibung und Kontext
|
|
|
|
Auf kleinen Viewports/Mobile fuellt der statische Header die Seite komplett aus. Die `FormGeneratorTable` wird unbedienbar. Ursache: die gesamte Ahnenkette ist `overflow:hidden` mit `flex-shrink:0` fuer Chrome-Bereiche.
|
|
|
|
Strukturproblem: Manuelles Layout-Pattern (`adminPage`/`adminPageFill`/`pageHeader`/`tableContainer`), 15+ Ad-hoc-Tab-Implementierungen, Workspace komplett Inline mit lokalem `_useResizable`, keine Persistenz.
|
|
|
|
Strategisches Ziel: Einheitliche Layout-Architektur fuer alle Seiten (Feature-Views, Admin, Basedata, Systemkomponenten). Die Solution-Schicht L3/L4 wird als **separater** Plan umgesetzt.
|
|
|
|
Referenz-Plan: `pagelayout_component_system_fd9fde3a.plan.md` (v3)
|
|
|
|
**Region-Zuordnung pro Seite**: [`2026-06-layout-regions.md`](2026-06-layout-regions.md) — definiert fuer jede Seite explizit, welche Panel-Varianten und LayoutTabs eingesetzt werden.
|
|
|
|
## Fokus und kritische Details
|
|
|
|
- **Scroll-Mode** ist das hoechste Risiko — Phase 0 war gating (erledigt)
|
|
- Doppeltes Padding (featureContent + viewContent je 1.5rem) frisst Platz (erledigt)
|
|
- FormGeneratorTable braucht bounded height fuer internen Scroll (Desktop) aber natural height (Mobile)
|
|
- Master->Detail auf derselben Seite: Liste UND Detail-Formular muessen bedienbar sein
|
|
- Keep-Alive-Routes (Workspace) sind `position:absolute` — Phase 6 (eigener Scope)
|
|
- **Migrations-Checkliste** (Abschnitt unten) bei JEDER Seite abarbeiten — Lessons aus Phase 4
|
|
|
|
## Ziel und Nicht-Ziele
|
|
|
|
- Ziel: Alle Seiten auf StackLayout/LayoutTabs/Panel migrieren
|
|
- Ziel: UiComponents/Tabs und Ad-hoc-Tab-Implementierungen eliminieren
|
|
- Ziel: Admin.module.css Layout-Klassen eliminieren (Button/Form/Modal bleiben)
|
|
- Explizit NICHT in diesem Plan: SolutionsView (eigener Plan als Systemkomponente)
|
|
|
|
## Betroffene Module
|
|
|
|
- Frontend: Layout-Kette (MainLayout, FeatureLayout, FeatureView), Admin.module.css, FormGeneratorTable
|
|
- Primitives: `ui-nyla/src/components/Layout/*` (bereits erstellt)
|
|
- Hooks: `ui-nyla/src/hooks/useScrollMode.ts` (bereits erstellt)
|
|
- DB-Migration: nein
|
|
- Andere Komponenten: nein
|
|
|
|
## Entscheidungen
|
|
|
|
| Datum | Entscheidung | Begruendung |
|
|
|-------|-------------|------------|
|
|
| 2026-06-10 | scrollMode via `data-scroll-mode` auf `<html>` + CSS `:global()` | CSS-Module-kompatibel, keine Prop-Drilling, ein Hook steuert alles |
|
|
| 2026-06-10 | Breakpoints: `max-width:1024px` OR `max-height:500px` -> document mode | Matching bestehender Mobile-Breakpoint + extrem kurze Desktop-Fenster |
|
|
| 2026-06-10 | SolutionsView als Systemkomponente, nicht Feature-View | Solutions ist mandantuebergreifend wie WorkflowAutomation |
|
|
| 2026-06-10 | SolutionsView-Stub entfernen, Neuaufbau in eigenem Plan | Kein Placeholder-Code ohne Backend |
|
|
| 2026-06-10 | composer-2.5-fast fuer repetitive Seiten-Migrationen | Schnell und guenstig fuer Pattern-Anwendung auf viele Dateien |
|
|
| 2026-06-10 | Desktop-Sidebar: collapsible + resizable | Mehr Platz fuer Content, User-Kontrolle ueber Sidebar-Breite |
|
|
| 2026-06-10 | Panel bekommt `variant`-Prop (card/table/dashboard/toolbar/editor/wizard) | Generische Styles pro Regionstyp, systemweite Aenderungen an einem Ort |
|
|
| 2026-06-10 | Generische Infra (5-pre) + PanelLayout (6b) VOR Massenmigration | Subagenten koennen Checkliste sonst nicht erfuellen; verhindert inkonsistente Layouts |
|
|
| 2026-06-10 | ViewStack verwaltet nur eigene URL-Params (kein `tab`-Delete) | Behebt Back-Bug bei in LayoutTabs verschachtelten ViewStacks |
|
|
| 2026-06-10 | Kontextfilter via URL (`?context=`) statt useState | URL-als-Source-of-Truth konsequent; teilbare Links |
|
|
| 2026-06-10 | Tote/nicht-geroutete Seiten -> Phase 7, nicht Migration | Keine Arbeit an Dead-Code; erst Routing klaeren |
|
|
|
|
## Scroll-Vertrag
|
|
|
|
### Modi
|
|
|
|
| Modus | Bedingung | Verhalten |
|
|
|-------|-----------|-----------|
|
|
| `bounded` | viewport > 1024px Breite UND > 500px Hoehe | `overflow:hidden`-Kette intakt, Tabelle scrollt intern, Header bleibt sichtbar |
|
|
| `document` | viewport <= 1024px ODER <= 500px Hoehe | `overflow:visible`-Kette, Seite scrollt als Dokument, Header scrollt weg, Tabelle waechst natuerlich |
|
|
|
|
### CSS-Mechanismus
|
|
|
|
Hook `useScrollMode()` setzt `document.documentElement.dataset.scrollMode`.
|
|
CSS-Module nutzen `:global(html[data-scroll-mode="document"])` als Selektor-Prefix.
|
|
|
|
## Phasen-Uebersicht
|
|
|
|
| Phase | Inhalt | Status |
|
|
|-------|--------|--------|
|
|
| 0 | Scroll-Mode-Spike | erledigt |
|
|
| 1 | Feature-Chrome-Budget | erledigt |
|
|
| 2 | Primitive (Panel, LayoutTabs, ViewStack, StackLayout, Persistence) | erledigt |
|
|
| 3 | ~~SolutionsView MVP~~ | entfernt (falsch als Feature-View, eigener Plan) |
|
|
| 4a | TrusteeDataTablesView -> StackLayout + LayoutTabs | erledigt |
|
|
| 4b | WorkflowAutomationHubPage -> StackLayout + LayoutTabs + ViewStack | erledigt |
|
|
| 4c | **GATE** Korrekturen: RunsTab/WorkflowsTab tableContainer, SolutionsView loeschen, Hub-Filter in URL (erledigt), ViewStack tab-delete-Fix (erledigt) | offen |
|
|
| 4d | Panel um `variant`-Prop erweitern (card, table, dashboard, toolbar, editor, wizard) | erledigt |
|
|
| 5a | Doku-Sync: layout.md (erstellt, Defaults gefixt), formgenerator.md, TOPICS.md (erstellt), Region-Specs vervollstaendigen | teilw. erledigt |
|
|
| **5-pre** | **GATE** Generische Infrastruktur bauen (L2/L7/L8/L10/L11 + Keep-Alive-Remeasure) — MUSS vor 5b stehen | offen |
|
|
| 6b | **vorgezogen vor 5d/5e/5j**: PanelLayout-MVP (config-getriebener Split-Tree) ODER Interim-Split-Pattern dokumentieren | offen |
|
|
| 5b | Trustee-Views migrieren (8 geroutete Seiten; eingebettete separat in 5i) | offen |
|
|
| 5c | Admin-Seiten migrieren (21 Seiten) | offen |
|
|
| 5d | Basedata-Seiten migrieren (3 Seiten; FilesPage Split -> 6b) | offen |
|
|
| 5e | Feature-Views migrieren: Commcoach (5 geroutet), Teamsbot (5), RealEstate (2 geroutet + pek-Subkomp.), Redmine (4), Neutralization (1), Chatworkflow (3) | offen |
|
|
| 5f | Billing-Seiten migrieren (nur geroutete; siehe Dead-Code-Verifikation) | offen |
|
|
| 5g | Top-Level-Seiten migrieren (8 Seiten) | offen |
|
|
| 5g2 | Auth-Seiten pruefen (5 Seiten, eigenes Layout) | offen |
|
|
| 5h | WorkflowAutomation: Hub-Chrome + WorkflowsTab/RunsTab + Views + Sub-Tabs | offen |
|
|
| 5i | Trustee Sub-Komponenten (TrusteeDataTab, eingebettete Positions/Documents-Views als Panel-Body-only) | offen |
|
|
| 5j | Workspace-Views migrieren (9 Seiten; Split -> 6b) | offen |
|
|
| 6a | Navigation: Desktop-Sidebar collapse + resize | offen |
|
|
| 7 | Cleanup: grep-gated Loeschen alter Layout-Klassen, UiComponents/Tabs, **tote Seiten (siehe Dead-Code-Verifikation)** | offen |
|
|
|
|
## Umsetzungs-Checkliste
|
|
|
|
### Phase 4c — Korrekturen (sofort)
|
|
|
|
- [ ] SolutionsView aus FeatureView.tsx deregistrieren (Import + Map-Eintrag `trustee.solutions`)
|
|
- [ ] `src/pages/views/solutions/` komplett loeschen (SolutionsView.tsx + .module.css)
|
|
- [ ] RunsTab: `styles.tableContainer` entfernen
|
|
- [ ] WorkflowsTab: `styles.tableContainer` entfernen
|
|
- [x] Hub-Kontextfilter `selectedMandateId` von `useState` auf URL (`?context=`) — erledigt
|
|
- [x] ViewStack: pauschales `next.delete('tab')` entfernt (Back-Bug bei nested Tabs) — erledigt
|
|
- [ ] TypeScript-Build pruefen
|
|
|
|
### Phase 5a — Dokumentation
|
|
|
|
- [x] `wiki/b-reference/ui-nyla/layout.md` erstellt (Scroll-Modi, Layout-Kette, Primitive, Migrations-Checkliste); Defaults an Code angeglichen
|
|
- [ ] `wiki/b-reference/ui-nyla/formgenerator.md` aktualisieren (Page Layout Chain, hookData.refetch, FK-Labels)
|
|
- [x] `wiki/TOPICS.md` aktualisiert
|
|
- [ ] CHANGELOG-Eintraege (laufend)
|
|
- [ ] Region-Specs vervollstaendigen (StackLayout-Variant pro tabbed Seite explizit)
|
|
|
|
### Phase 5-pre — Generische Infrastruktur (GATE, vor allen Massenmigrationen)
|
|
|
|
Diese Bausteine MUESSEN existieren, bevor Subagenten die Migrations-Checkliste erfuellen koennen. Sonst entscheidet jeder Subagent anders bzw. die Checkliste ist nicht umsetzbar.
|
|
|
|
- [ ] **`useDocumentTitle`-Hook** (L11): setzt `${appName} - ${seitentitel}`. MUSS sichtbarkeits-/aktiv-route-gated sein (nur setzen wenn eigene Route aktiv) — sonst ueberschreibt eine versteckte Keep-Alive-Seite mit SSE/State-Updates den Titel der sichtbaren Seite. Hardcoded Auth-Titel (Login/Register/Reset) auf Hook + `t()` umstellen.
|
|
- [ ] **Scroll-Restoration** (L2): generischer Mechanismus (Hook/Layout) — Position merken, bei fehlendem Ziel auf Top. Fuer document- UND bounded-Scroll.
|
|
- [ ] **ViewStack URL-Validierung + Toast** (L8): bei ungueltiger `view`/`entity`-Kombi Toast + sauberer Fallback (statt stillem Resolve).
|
|
- [ ] **Detail-Breadcrumb** (L7, niedrige Prio): generisch im ViewStack/Header-Slot (NICHT FeatureLayout). ViewStack hat bereits `detailHeader`; nur ergaenzen falls Crumb-Kette gewuenscht.
|
|
- [ ] **Filter/Search-Persistenz-Contract** (L10): FormGeneratorTable-Filter in localStorage (scoped key).
|
|
- [ ] **Keep-Alive Re-Measure-Hook**: generischer `useVisibilityRemeasure` statt ad-hoc in FormGeneratorTable (Hoehe nach `display:none` -> 0).
|
|
- [ ] **Referenz-Migration als Gold-Standard fixieren — nur AEUSSERE Struktur** (StackLayout-Variant, LayoutTabs, ViewStack, Kontext-via-URL): TrusteeDataTablesView + WorkflowAutomationHubPage. Die Panel-isierung der Tab-Bodies (RunsTab/WorkflowsTab in 4c/5h, TrusteeDataTab in 5i) ist NICHT Teil des Freeze, da sie erst spaeter migriert werden.
|
|
|
|
### Phase 5b — Trustee-Views (geroutet; Subagent composer-2.5-fast)
|
|
|
|
Nur via FeatureView-Registry geroutete Views. Eingebettete (Positions/Documents) siehe 5i. Tote siehe Dead-Code-Verifikation.
|
|
|
|
- [ ] TrusteeAbschlussView.tsx — inline Tab-Buttons -> LayoutTabs
|
|
- [ ] TrusteeAccountingSettingsView.tsx — inline Tab-Buttons -> LayoutTabs
|
|
- [ ] TrusteeAnalyseView.tsx — inline Tab-Buttons -> LayoutTabs
|
|
- [ ] TrusteeDashboardView.tsx — dashboardView CSS -> StackLayout
|
|
- [ ] TrusteeImportProcessView.tsx — inline Tab-Buttons -> LayoutTabs
|
|
- [ ] TrusteeInstanceRolesView.tsx — viewContainer CSS -> StackLayout
|
|
- [ ] TrusteeExpenseImportView.tsx — inline Layout -> StackLayout (Routing pruefen: nicht in Registry)
|
|
- [ ] TrusteeScanUploadView.tsx — inline Layout -> StackLayout (Routing pruefen: nicht in Registry)
|
|
|
|
### Phase 5c — Admin-Seiten (21 Seiten, Subagent composer-2.5-fast)
|
|
|
|
- [ ] AdminUsersPage.tsx
|
|
- [ ] AdminUserMandatesPage.tsx
|
|
- [ ] AdminUserAccessOverviewPage.tsx — manuelle Tab-Buttons -> LayoutTabs
|
|
- [ ] AdminMandatesPage.tsx
|
|
- [ ] AdminMandateRolesPage.tsx
|
|
- [ ] AdminMandateRolePermissionsPage.tsx
|
|
- [ ] AdminLogsPage.tsx
|
|
- [ ] AdminLanguagesPage.tsx
|
|
- [ ] AdminInvitationsPage.tsx
|
|
- [ ] AdminFeatureRolesPage.tsx
|
|
- [ ] AdminFeatureInstanceUsersPage.tsx
|
|
- [ ] AdminFeatureAccessPage.tsx
|
|
- [ ] AdminDemoConfigPage.tsx
|
|
- [ ] AdminDatabaseHealthPage.tsx — UiComponents/Tabs -> LayoutTabs
|
|
- [ ] AccessManagementHub.tsx
|
|
- [ ] PermissionMatrix.tsx
|
|
- [ ] InstanceHierarchyView.tsx
|
|
- [ ] InstanceDetailModal.tsx
|
|
- [ ] wizards/AdminMandateWizardPage.tsx
|
|
- [ ] wizards/AdminInvitationWizardPage.tsx
|
|
- [ ] wizards/FeatureInstanceWizard.tsx
|
|
|
|
### Phase 5d — Basedata-Seiten (3 Seiten, Subagent composer-2.5-fast)
|
|
|
|
- [ ] ConnectionsPage.tsx — adminPage/adminPageFill -> StackLayout
|
|
- [ ] FilesPage.tsx — adminPage/adminPageFill -> StackLayout
|
|
- [ ] PromptsPage.tsx — adminPage/adminPageFill -> StackLayout
|
|
|
|
### Phase 5e — Weitere Feature-Views (Subagent composer-2.5-fast)
|
|
|
|
Nur geroutete Views (FeatureView-Registry). Tote siehe Dead-Code-Verifikation.
|
|
|
|
Commcoach (5 geroutet):
|
|
- [ ] CommcoachAssistantView.tsx
|
|
- [ ] CommcoachDashboardView.tsx
|
|
- [ ] CommcoachModulesView.tsx
|
|
- [ ] CommcoachSessionView.tsx ([KEEP-ALIVE]; Split -> 6b)
|
|
- [ ] CommcoachSettingsView.tsx — manuelle Tabs -> LayoutTabs
|
|
|
|
Teamsbot (5):
|
|
- [ ] TeamsbotAssistantView.tsx
|
|
- [ ] TeamsbotDashboardView.tsx
|
|
- [ ] TeamsbotModulesView.tsx
|
|
- [ ] TeamsbotSessionView.tsx ([KEEP-ALIVE NEU]; Split -> 6b)
|
|
- [ ] TeamsbotSettingsView.tsx — manuelle Tabs -> LayoutTabs
|
|
|
|
RealEstate (2 geroutet + Subkomponenten):
|
|
- [ ] RealEstatePekView.tsx (Registry: `dashboard`)
|
|
- [ ] RealEstateInstanceRolesPlaceholder.tsx (Registry: `instance-roles`)
|
|
- [ ] pek/PekMapView.tsx — Subkomponente von PekView
|
|
- [ ] pek/PekLocationInput.tsx — Subkomponente von PekView
|
|
|
|
Chatworkflow (3 geroutet, aber reine PlaceholderViews in FeatureView):
|
|
- [ ] NICHT migrieren solange Platzhalter — entweder echte Implementierung abwarten oder Phase 7. In Dead-Code-Verifikation aufgenommen.
|
|
|
|
Redmine (4):
|
|
- [ ] RedmineBrowserView.tsx ([KEEP-ALIVE NEU]; Split -> 6b)
|
|
- [ ] RedmineSettingsView.tsx
|
|
- [ ] RedmineStatsView.tsx
|
|
- [ ] RedmineTicketEditor.tsx — Subkomponente von BrowserView
|
|
|
|
Neutralization (1):
|
|
- [ ] NeutralizationView.tsx — UiComponents/Tabs -> LayoutTabs
|
|
|
|
### Phase 5f — Billing-Seiten (nur geroutete, Subagent composer-2.5-fast)
|
|
|
|
Geroutet in App.tsx: BillingDataView, BillingAdmin, BillingMandateView, AdminSubscriptionsPage. `BillingDashboard`/`BillingTransactions`/`BillingUserView` sind tot (siehe Dead-Code-Verifikation) -> Phase 7, NICHT migrieren.
|
|
|
|
- [ ] BillingDataView.tsx
|
|
- [ ] BillingAdmin.tsx
|
|
- [ ] BillingMandateView.tsx
|
|
- [ ] AdminSubscriptionsPage.tsx
|
|
- [ ] BillingNav.tsx — Subkomponente (von BillingMandateView genutzt), KEIN eigenes StackLayout
|
|
- [ ] SubscriptionTab.tsx — Subkomponente von AdminSubscriptionsPage
|
|
- [ ] EnterpriseDialog.tsx — Modal, nur falls vom Modal-Plan beruehrt
|
|
|
|
### Phase 5g — Top-Level-Seiten (8 Seiten)
|
|
|
|
- [ ] Dashboard.tsx (export DashboardPage)
|
|
- [ ] Settings.tsx (export SettingsPage)
|
|
- [ ] Store.tsx (export StorePage)
|
|
- [ ] IntegrationsOverviewPage.tsx
|
|
- [ ] ComplianceAuditPage.tsx
|
|
- [ ] RagInventoryPage.tsx
|
|
- [ ] GDPR.tsx (export GDPRPage)
|
|
- [ ] FeatureView.tsx — View-Router/Container, CSS pruefen
|
|
|
|
### Phase 5g2 — Auth-Seiten (5 Seiten, eigenes Layout ohne MainLayout)
|
|
|
|
- [ ] Login.tsx — Standalone, kein Feature-Chrome
|
|
- [ ] Register.tsx — Standalone, kein Feature-Chrome
|
|
- [ ] PasswordResetRequest.tsx — Standalone, kein Feature-Chrome
|
|
- [ ] Reset.tsx — Standalone, kein Feature-Chrome
|
|
- [ ] InvitePage.tsx — Standalone, kein Feature-Chrome
|
|
|
|
### Phase 5h — WorkflowAutomation Views + Sub-Tabs (6 Seiten)
|
|
|
|
- [ ] views/workflowAutomation/WorkflowTemplatesPage.tsx — adminPage -> StackLayout
|
|
- [ ] views/workflowAutomation/WorkflowEditorPage.tsx — inline flex -> StackLayout
|
|
- [ ] tabs/TemplatesTab.tsx
|
|
- [ ] tabs/EditorTab.tsx
|
|
- [ ] tabs/TasksTab.tsx — Admin.module.css -> StackLayout
|
|
- [ ] tabs/RunDetailTab.tsx — Admin.module.css -> StackLayout
|
|
|
|
### Phase 5i — Trustee Sub-Komponenten
|
|
|
|
- [ ] dataTables/TrusteeDataTab.tsx — eingebettet in TrusteeDataTablesView
|
|
- [ ] components/index.ts — leer, ggf. loeschen in Phase 7
|
|
|
|
### Phase 5j — Workspace-Views (9 Seiten)
|
|
|
|
- [ ] WorkspacePage.tsx — Custom 3-Column Split -> StackLayout + PanelLayout-Vorbereitung
|
|
- [ ] WorkspaceEditorPage.tsx — inline flex -> StackLayout
|
|
- [ ] WorkspaceSettingsPage.tsx — inline flex -> StackLayout
|
|
- [ ] WorkspaceGeneralSettings.tsx — Settings-Layout
|
|
- [ ] WorkspaceInput.tsx — Chat-Input-Komponente
|
|
- [ ] ChatStream.tsx — Chat-Stream-Panel
|
|
- [ ] FilePreview.tsx — Datei-Vorschau-Panel
|
|
- [ ] NeutralizationPanel.tsx — Neutralisierungs-Panel
|
|
- [ ] ToolActivityLog.tsx — Tool-Activity-Log-Panel
|
|
|
|
### Phase 6a — Navigation: Desktop-Sidebar collapse + resize
|
|
|
|
Aktueller Stand: Sidebar ist fix 280px, nicht ausblendbar (Desktop), nicht breitenverstellbar.
|
|
Mobile (<=1024px) hat bereits Overlay-Hamburger-Menu — das bleibt.
|
|
|
|
- [ ] **Collapse-Toggle**: Button im Sidebar-Header oder am Rand, klappt Sidebar auf Icon-Only-Breite (~60px)
|
|
- [ ] **Resize-Handle**: Drag-Handle am rechten Rand der Sidebar, Breite zwischen min (~180px) und max (~400px) einstellbar
|
|
- [ ] **Persistenz**: Collapse-State und Breite in localStorage speichern (`sidebar-collapsed`, `sidebar-width`)
|
|
- [ ] **Keyboard-Shortcut**: z.B. `Ctrl+B` zum Toggling (wie VS Code)
|
|
- [ ] **CSS-Transition**: Smooth animation fuer Collapse (200-300ms ease)
|
|
- [ ] **Content-Bereich reagiert**: `flex: 1` auf Content bleibt, passt sich automatisch an
|
|
- [ ] **Logo-Bereich**: Im collapsed State nur Icon, kein Text
|
|
- [ ] **Navigation-Items**: Im collapsed State nur Icons, Tooltip bei Hover
|
|
- [ ] **UserSection**: Im collapsed State kompakt (nur Avatar)
|
|
- [ ] Betrifft: `MainLayout.tsx`, `MainLayout.module.css`, `MandateNavigation.tsx`, `UserSection.tsx`
|
|
|
|
### Phase 7 — Cleanup (nach Phase 5)
|
|
|
|
- [ ] grep-Pruefung: Null-Nutzung von `adminPage`/`adminPageFill`/`pageHeader`/`tableContainer` Layout-Klassen (inkl. `adminPage` ohne Suffix)
|
|
- [ ] Tote Seiten aus Dead-Code-Verifikation loeschen oder integrieren
|
|
- [ ] Admin.module.css: Layout-Klassen entfernen (Button/Form/Modal bleiben)
|
|
- [ ] UiComponents/Tabs: Null-Nutzung pruefen, dann loeschen
|
|
- [ ] Finale TypeScript-Build-Pruefung
|
|
- [ ] Finale Lint-Pruefung aller geaenderter Dateien
|
|
- [ ] Aenderungs-Zusammenfassung erstellen
|
|
|
|
## Dead-Code-Verifikation (vor Migration klaeren, NICHT migrieren)
|
|
|
|
Diese Dateien sind weder via FeatureView-Registry geroutet noch irgendwo importiert (Stand 2026-06-10). Sie gehoeren NICHT in die Migrations-Batches, sondern in Phase 7 Cleanup — entweder loeschen oder bewusst (re-)integrieren.
|
|
|
|
| Datei | Befund | Aktion |
|
|
|-------|--------|--------|
|
|
| `views/realestate/RealEstateDashboardView.tsx` | Registry mappt `dashboard` -> RealEstatePekView; nirgends importiert | loeschen ODER integrieren |
|
|
| `views/realestate/RealEstateParcelsView.tsx` | Nicht in Registry, nirgends importiert | loeschen ODER integrieren |
|
|
| `views/realestate/RealEstateProjectsView.tsx` | Nicht in Registry, nirgends importiert | loeschen ODER integrieren |
|
|
| `views/commcoach/CommcoachDossierView.tsx` | Nicht in Registry; nur CSS von SessionView genutzt | loeschen ODER integrieren |
|
|
| `views/trustee/TrusteePositionDocumentsView.tsx` | Nicht in Registry, nirgends importiert | loeschen ODER integrieren |
|
|
| `billing/BillingDashboard.tsx` | Nicht in App.tsx-Routen, nirgends importiert | Routing klaeren / loeschen |
|
|
| `billing/BillingTransactions.tsx` | Nicht in App.tsx-Routen, nirgends importiert | Routing klaeren / loeschen |
|
|
| `billing/BillingUserView.tsx` | Nicht in App.tsx-Routen, nirgends importiert | Routing klaeren / loeschen |
|
|
| `views/solutions/SolutionsView.tsx` | Noch in trustee-Registry (`solutions`); eigener Plan | in 4c deregistrieren + loeschen |
|
|
| `chatworkflow` Dashboard/Runs/Files | Geroutet, aber reine PlaceholderViews | erst bei echter Implementierung migrieren |
|
|
|
|
Eingebettet (KEIN eigenes StackLayout, als Panel-Body in 5i behandeln): `TrusteePositionsView`, `TrusteeDocumentsView` (Tab-Inhalte in TrusteeDataTablesView via Wrapper).
|
|
|
|
## Migrations-Checkliste pro Seite
|
|
|
|
Erfahrungen aus der Migration von TrusteeDataTablesView und WorkflowAutomationHubPage.
|
|
|
|
### 1. Daten & API
|
|
|
|
- [ ] **Mandantenfilter**: "Alle" = kein `mandateId`-Param, Backend filtert per User-Mandatsliste.
|
|
- [ ] **Daten-Reload bei Kontextwechsel**: `useEffect`/`useCallback`-Dependencies muessen `selectedMandateId` enthalten.
|
|
- [ ] **Metriken/Dashboard konsistent mit Tabelle**: Gleicher Scope fuer Dashboard-Zahlen und Tabelle.
|
|
|
|
### 2. FK-Label-Resolution
|
|
|
|
- [ ] **displayField-Konvention**: `{fieldName}Label` (z.B. `workflowId` -> `workflowIdLabel`).
|
|
- [ ] **enrichRowsWithFkLabels in ALLEN Pfaden**: Standard + filterValues.
|
|
- [ ] **Cross-Mandate FK-Lookup**: `getRecord()` statt mandate-scoped Methoden.
|
|
|
|
### 3. FormGeneratorTable Integration
|
|
|
|
- [ ] **hookData.refetch als einziger Datenpfad**: `apiEndpoint` nur fuer CSV/Filtervalues.
|
|
- [ ] **Keine redundanten Filter-Buttons**: FormGeneratorTable hat eingebaute Filter.
|
|
- [ ] **Kein RBAC im UI**: Sichtbarkeit via Backend-Flags.
|
|
|
|
### 4. Backend RBAC (bei jeder Migration pruefen)
|
|
|
|
- [ ] **Kein isPlatformAdmin-Bypass fuer Lesezugriffe**.
|
|
- [ ] **Fail-closed**: Fehlender Filter = leeres Ergebnis (`__impossible__`-Sentinel).
|
|
- [ ] **mandateId-Validierung** gegen `userMandateIds`.
|
|
|
|
### 5. Fehlende API-Routen
|
|
|
|
- [ ] **Alle Frontend-API-Aufrufe pruefen**: Keine 405 Method Not Allowed.
|
|
|
|
### 6. Layout & UI
|
|
|
|
- [ ] **StackLayout + LayoutTabs verwenden**: URL als Source-of-Truth.
|
|
- [ ] **Panel fuer collapsible Bloecke**.
|
|
- [ ] **scrollMode-Integration**: min-height im document-Mode.
|
|
- [ ] **Grouped Tabs**: Kategorie-Titel auf eigener Zeile.
|
|
- [ ] **Loading/Error/Empty-States** (L1): pro Seite als Parameter belassen, NICHT generisch standardisieren.
|
|
- [ ] **Scroll-Position** (L2): Position merken; wenn Ziel nicht mehr existiert, auf Top.
|
|
- [ ] **Dark-Theme-Tokens** (L5): NUR CSS-Tokens, keine hardcoded Farben. Bestehende hardcoded Farben der beruehrten Seite gleich mitbereinigen.
|
|
|
|
### 7. Persistenz & State
|
|
|
|
- [ ] **Tab-State via URL**, nicht `useState`.
|
|
- [ ] **Kontext-/Mandantenfilter via URL** (`?context=`), nicht `useState` (Referenz: Hub).
|
|
- [ ] **Panel-Collapse-State** optional via `collapseKey` in localStorage.
|
|
- [ ] **Keine stale Closures** bei Mandant-Wechsel.
|
|
- [ ] **Tabellen-Filter/Suche** (L10): in localStorage persistieren. **Key MUSS `mandateId:instanceId` (bzw. `scopeKey`) enthalten** — sonst werden bei Mandantenwechsel fremde Filterwerte (FK-IDs) wiederhergestellt = Tenant-Leakage. Fail-closed: kein Scope -> keine Persistenz.
|
|
|
|
### 8. Keep-Alive (nur registrierte Seiten)
|
|
|
|
- [ ] **Pruefen** ob Seite in `config/keepAliveRoutes.tsx` registriert ist.
|
|
- [ ] **Re-Measure** beim Wiedereinblenden (Hoehe war `display:none` -> 0) via generischem Hook (5-pre).
|
|
- [ ] **matchLocation-Bedingung** erhalten (z.B. `?tab=editor`).
|
|
- [ ] **scopeKey** als React-`key` beibehalten (Scope-Wechsel = Neu-Mount).
|
|
- [ ] **Listener-Cleanup** zerstoert persistenten State nicht.
|
|
|
|
### 9. i18n (HARTE REGEL)
|
|
|
|
- [ ] **Keine hardcoded Strings** (L4): ALLE Chrome-Texte via `t()`. Subagenten duerfen niemals Klartext-Strings einsetzen.
|
|
|
|
### 10. Modals (NICHT in diesem Plan anfassen)
|
|
|
|
- [ ] **`modalOverlay`/Modal-Code NICHT migrieren** — laeuft im separaten Modal-Konsolidierungsplan. Nur Seiten-Layout (StackLayout/Panel/Tabs) anfassen, Modals unveraendert lassen, um Doppel-Diffs/Merge-Konflikte zu vermeiden.
|
|
|
|
## Entschiedene Logik-Fragen
|
|
|
|
| # | Thema | Entscheidung |
|
|
|---|-------|-------------|
|
|
| L1 | Loading/Error/Empty-States | Pro Seite als Parameter belassen, nicht generisch standardisieren |
|
|
| L2 | Scroll-Position | Position merken; wenn Ziel nicht mehr existiert -> Top |
|
|
| L3 | PanelLayout / verstellbare Splits | Collapse/Expand ist bereits generisch (Panel/LayoutTabs). Verstellbare Splits einmal generisch in Phase 6b bauen, danach keine Seitenanpassung mehr noetig |
|
|
| L4 | i18n | HART: keine hardcoded Strings, alles via `t()` |
|
|
| L5 | Dark-Theme-Tokens | Token-Pflicht, hardcoded Farben beruehrter Seiten gleich bereinigen |
|
|
| L6 | ARIA/Focus | Generisch in den Primitiven (LayoutTabs/ViewStack/PanelLayout), nicht pro Seite |
|
|
| L7 | Detail-Breadcrumb | ViewStack rendert bereits eigenen `detailHeader` (Back + Titel). Breadcrumb-Erweiterung NICHT in FeatureLayout (Hub ist Top-Level ohne FeatureLayout) — generisch im ViewStack/StackLayout.Header-Slot loesen, damit auch Top-Level-Seiten greifen. Niedrige Prio (aktuell nur Hub betroffen) |
|
|
| L8 | ViewStack Toast | Generisch: Toast bei ungueltiger URL-Kombi nachruesten |
|
|
| L9 | LayoutTabs `lazy` vs Keep-Alive | Generisch: Komponenten-Default bleibt `lazy=false` (nur aktiver Tab gemountet). Pro Seite `lazy` SETZEN bei Tab-Sets mit Formularen/Streams/State, da `lazy=true` besuchte Tabs gemountet haelt (State bleibt). Referenz: WorkflowAutomationHubPage setzt `lazy` |
|
|
| L10 | Filter/Search-Persistenz | In localStorage persistieren; Key MUSS Scope (`mandateId:instanceId`) enthalten, sonst Tenant-Leakage. Fail-closed ohne Scope |
|
|
| L11 | document.title | Generischer `useDocumentTitle`-Hook; setzt pro Seite den Zusatz, Ergebnis immer `${appName} - ${seitentitel}`. Hardcoded Auth-Titel (Login/Register/Reset) dabei bereinigen (auch i18n) |
|
|
|
|
Alle Logik-Fragen entschieden.
|
|
|
|
## Subagent-Strategie
|
|
|
|
Fuer Phase 5b-5j werden **composer-2.5-fast Subagenten** eingesetzt (ERST nach 5-pre + 6b):
|
|
- Jeder Subagent migriert eine Batch von Seiten (z.B. alle Trustee-Views)
|
|
- Auftrag pro Subagent: konkretes Pattern anwenden (adminPage -> StackLayout, manuelle Tabs -> LayoutTabs)
|
|
- Migrations-Checkliste + Region-Spec (`2026-06-layout-regions.md`) als verbindliche Referenz mitgeben
|
|
- Ergebnis: Liste aller geaenderter Dateien + Beschreibung
|
|
- Hauptagent prueft Build + Lint nach jeder Batch
|
|
|
|
**Harte Regeln im Subagent-Auftrag (sonst inkonsistent):**
|
|
- Keine hardcoded Strings — alles via `t()` (L4).
|
|
- `modalOverlay`/Modals NICHT anfassen (separater Plan).
|
|
- Tote Seiten (Dead-Code-Verifikation) NICHT migrieren.
|
|
- StackLayout-Variant + Panel-Varianten exakt aus der Region-Spec uebernehmen, nicht raten.
|
|
- Tab-/Kontext-State via URL, Filter via localStorage — nie `useState`.
|
|
- Nur CSS-Tokens, keine hardcoded Farben (L5).
|
|
|
|
## Akzeptanzkriterien
|
|
|
|
| # | Kriterium (Given-When-Then) | Prio |
|
|
|---|---------------------------|------|
|
|
| 1 | Given Feature-Route auf iPhone SE (375x667) When Seite laedt Then Header scrollt weg, Tabelle bedienbar | must |
|
|
| 2 | Given Feature-Route auf Desktop (1920x1080) When Seite laedt Then Tabelle scrollt intern, Header sichtbar | must |
|
|
| 3 | Given Resize von Desktop zu schmalem Fenster When Breakpoint ueberschritten Then scrollMode wechselt live | must |
|
|
| 4 | Given beliebige migrierte Seite When Tab gewechselt Then URL wird aktualisiert, kein useState fuer Tab | must |
|
|
| 5 | Given `npx tsc --noEmit` When nach Abschluss Then 0 Fehler | must |
|
|
| 6 | Given grep `adminPage\|adminPageFill\|pageHeader\|tableContainer` When nach Phase 7 Then 0 Treffer in Layout-Nutzung | must |
|
|
| 7 | Given grep `UiComponents/Tabs` When nach Phase 7 Then 0 Treffer | must |
|
|
|
|
## Links
|
|
|
|
- Plan v3: `pagelayout_component_system_fd9fde3a.plan.md`
|
|
- Solution-Plaene (eigener Scope): `c-work/0-ideas/2026-06-CustomerCases-step3-*`
|
|
|
|
## Abschluss
|
|
|
|
- [ ] b-reference/ui-nyla/layout.md erstellt
|
|
- [ ] formgenerator.md "Page Layout Chain" aktualisiert
|
|
- [ ] TOPICS.md aktualisiert
|
|
- [ ] Aenderungs-Zusammenfassung aller migrierten Seiten
|
|
- [ ] Dieses Dokument -> 4-done/ verschoben
|