From d0185448ab691fffc7aa694a0c1a71c99a386806 Mon Sep 17 00:00:00 2001 From: ValueOn AG Date: Wed, 10 Jun 2026 16:33:00 +0200 Subject: [PATCH] ui generic rendering - base --- TOPICS.md | 1 + b-reference/ui-nyla/layout.md | 372 ++++++++++++ c-work/1-plan/2026-06-layout-foundation.md | 438 ++++++++++++++ c-work/1-plan/2026-06-layout-regions.md | 592 +++++++++++++++++++ c-work/1-plan/2026-06-modal-consolidation.md | 108 ++++ c-work/_CHANGELOG.md | 26 + 6 files changed, 1537 insertions(+) create mode 100644 b-reference/ui-nyla/layout.md create mode 100644 c-work/1-plan/2026-06-layout-foundation.md create mode 100644 c-work/1-plan/2026-06-layout-regions.md create mode 100644 c-work/1-plan/2026-06-modal-consolidation.md diff --git a/TOPICS.md b/TOPICS.md index fc2a9f5..4fcaaf0 100644 --- a/TOPICS.md +++ b/TOPICS.md @@ -27,6 +27,7 @@ Lade immer zuerst diese Datei. Dann gezielt die passende(n) Referenz-Datei(en). | Billing & Subscriptions | b-reference/platform-core/billing.md | Abrechnung, Prepaid, State Machine | | Google Voice (STT/TTS) | b-reference/platform-core/voice-google.md | VoiceObjects, ConnectorGoogleSpeech, `/voice-google/stt/*`, CommCoach vs Teamsbot vs Agent | | Frontend Nyla | b-reference/ui-nyla/architecture.md | UI-Seiten, Komponenten, Hooks, Routing | +| Layout-System (StackLayout, Panel, LayoutTabs, ViewStack) | b-reference/ui-nyla/layout.md | Scroll-Vertrag, Panel-Varianten, Seiten-Aufbau-Muster, Migrations-Checkliste | | FormGenerator (Table, Form, Tree, Report) | b-reference/ui-nyla/formgenerator.md | Generische UI-Komponenten, Provider-Pattern, API-Anbindung | | Private LLM | b-reference/service-llm-private/architecture.md | Internes LLM, Neutralisierung | | Teams Bot | b-reference/teams-bot/architecture.md | Meeting-Bot, Browser-Bot WebSocket, Director Prompts (Hybrid Agent-Routing), MeetingModule + 5-Tab-UI, Dashboard-SSE, Live-Session-SSE + MFA | diff --git a/b-reference/ui-nyla/layout.md b/b-reference/ui-nyla/layout.md new file mode 100644 index 0000000..d6583e9 --- /dev/null +++ b/b-reference/ui-nyla/layout.md @@ -0,0 +1,372 @@ + + + + +# Layout-System -- Referenz + +## Uebersicht + +Das Layout-System definiert, wie jede Seite in ui-nyla strukturiert wird. Es ersetzt das manuelle Pattern (`adminPage`/`adminPageFill`/`pageHeader`/`tableContainer` aus `Admin.module.css`) und alle Ad-hoc-Tab-Implementierungen durch ein einheitliches Komponentensystem. + +Quell-Plan: `pagelayout_component_system_fd9fde3a.plan.md` (v3) + +| Komponente | Datei | Zweck | +|------------|-------|-------| +| `StackLayout` | `components/Layout/StackLayout.tsx` | Seiten-Container mit Slots (Header, Toolbar, Tabs, Body, Footer) | +| `Panel` | `components/Layout/Panel.tsx` | Typisierte Region (Card, Table, Dashboard, Toolbar, Editor, Wizard) mit Collapse/Expand | +| `LayoutTabs` | `components/Layout/LayoutTabs.tsx` | Einziges Tab-System, URL als Source-of-Truth | +| `ViewStack` | `components/Layout/ViewStack.tsx` | Master-Detail-Navigation (list/catalog/detail via URL) | +| `useScrollMode` | `hooks/useScrollMode.ts` | Scroll-Modus-Erkennung (bounded/document) | + +## Begriffe (WICHTIG, nicht verwechseln) + +Drei verschiedene Konzepte, die sauber getrennt werden muessen: + +| Begriff | Anzahl | Werte | Bedeutung | +|---------|--------|-------|-----------| +| **Slot** | 5 | Header, Toolbar, Tabs, Body, Footer | Benannte Bereiche des `StackLayout`-Seitenrahmens (Compound-Components, z.B. ``) | +| **StackLayout-Variant** | 4 | table, scroll, form, dashboard | Scroll-Verhalten der gesamten Seite (Prop `variant` an `StackLayout`) | +| **Region** | beliebig | — | Ein `Panel`-Inhaltsblock im Body. Das ist der collapsible/expandable Block, den der User sieht. | +| **Regionstyp** | 6 | card, table, dashboard, toolbar, editor, wizard | Die Variante einer Region (Prop `variant` an `Panel`) | + +Merksatz: +- Eine **Seite** = ein `StackLayout` (mit `variant` fuer Scroll) und seinen **Slots**. +- Jeder **Inhaltsblock** im Body = eine **Region** (ein `Panel` mit `variant` = Regionstyp). +- `toolbar` existiert sowohl als Slot (`StackLayout.Toolbar`) als auch als Regionstyp (`Panel variant="toolbar"`). In der Praxis werden Filter-/Action-Bars als **Region** (`Panel variant="toolbar"`) im Body platziert; der Slot `StackLayout.Toolbar` ist optional fuer seitenweite Toolbars. + +## Architektur-Prinzipien + +1. **URL ist Source-of-Truth** fuer Navigation (aktiver Tab, aktive View, entityId). Kein `useState` fuer Tabs. +2. **Jeder Seiteninhalt ist eine Region** (Panel mit Variant). Generische Aenderungen an einem Regionstyp wirken systemweit. +3. **Keine Fallbacks**: Fehlender Kontext = Error, nicht stiller Default. +4. **Kein RBAC im UI**: Sichtbarkeit via Backend-Flags. +5. **Persistence ist pluggable**: Panel-Collapse in localStorage, Navigation in URL, Daten in DB. + +## Scroll-Vertrag + +### Problem + +Die Layout-Kette ist durchgehend `overflow:hidden` mit `flex-shrink:0` fuer Chrome-Bereiche. Auf kleinen Viewports fuellt der Header die Seite, die Tabelle wird unbedienbar. + +### Loesung: scrollMode-Zustandsmaschine + +| 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. | + +### Mechanismus + +Hook `useScrollMode()` setzt `document.documentElement.dataset.scrollMode`. CSS-Module nutzen `:global(html[data-scroll-mode="document"])` als Selektor-Prefix. + +```tsx +import { useScrollMode } from '../../hooks/useScrollMode'; + +const MyPage = () => { + const scrollMode = useScrollMode(); + // scrollMode wird automatisch auf StackLayout propagiert + return ...; +}; +``` + +### Layout-Kette (verifiziert) + +``` +MainLayout.mainLayout height:100dvh; overflow:hidden +MainLayout.content overflow:hidden (desktop) / auto (mobile) +MainLayout.outletShell overflow-y:auto +FeatureLayout.featureContent overflow:hidden; flex:1 +FeatureView.viewContent overflow:auto; padding:1.5rem +StackLayout root data-scroll-mode + data-variant +Panel data-variant (card|table|dashboard|toolbar|editor|wizard) +FormGeneratorTable height:100%; flex:1; overflow:hidden +``` + +## StackLayout + +Container fuer eine gesamte Seite oder einen Tab-Inhalt. Compound-Component-Pattern mit benannten **Slots**. + +### Slots + +| Slot | Zweck | Beispiel | +|------|-------|---------| +| `Header` | Seitentitel, Breadcrumb | Immer sichtbar | +| `Toolbar` | Seitenweite Filter, Actions | Kontextbezogen (optional) | +| `Tabs` | LayoutTabs-Container | Tab-Navigation | +| `Body` | Hauptinhalt — enthaelt die Regionen (Panels) | Tabelle, Formular, Dashboard | +| `Footer` | Status, Aktionen | Optional | + +### StackLayout-Varianten (Scroll-Verhalten) + +| Variant | Body-Verhalten | +|---------|---------------| +| `table` | flex:1, min-height:0, bounded scroll | +| `scroll` | Normaler Scroll (Standard) | +| `form` | Scroll mit Padding | +| `dashboard` | Grid-freundlich, natuerliche Hoehe | + +### Beispiel: Tabellen-Seite + +```tsx + + +

Benutzer

+ + + + + + + + + + +``` + +## Panel (Region) + +Typisierter Container fuer jeden Inhaltsblock. Jede Panel-Instanz hat einen `variant`, der das Layout-Verhalten bestimmt. + +### Props + +| Prop | Typ | Default | Beschreibung | +|------|-----|---------|-------------| +| `variant` | `card \| table \| dashboard \| toolbar \| editor \| wizard` | `card` | Bestimmt CSS-Verhalten (Flex, Padding, Border) | +| `title` | `string \| ReactNode` | - | Header-Titel (wenn gesetzt, wird Header gerendert) | +| `subtitle` | `string \| ReactNode` | - | Untertitel im Header | +| `actions` | `ReactNode` | - | Action-Buttons im Header | +| `collapsible` | `boolean` | `false` | Collapse/Expand-Toggle im Header | +| `defaultCollapsed` | `boolean` | `false` | Initial-Zustand | +| `collapseKey` | `string` | - | localStorage-Key fuer Persistenz (`panel-collapse:{key}`) | + +### Varianten-Verhalten + +| Variant | flex | Padding | Border | Typischer Inhalt | +|---------|------|---------|--------|-----------------| +| `card` | - | 14px | Standard-Card | Info-Sektionen, Settings, Formulare | +| `table` | flex:1, min-height:0 | 0 | Standard-Card | FormGeneratorTable | +| `dashboard` | - | 14px | Standard-Card | KPI-Grid, Stats-Cards | +| `toolbar` | - | 8px 14px | kein Radius | Filter-Bar, Actions, kompakt | +| `editor` | flex:1, min-height:0 | 0 | Standard-Card | Code-Editor, Flow-Editor, Chat | +| `wizard` | - | 20px | Standard-Card | Wizard-Schritte | + +### Generische Aenderungen + +CSS-Aenderungen an `[data-variant="table"]` in `Panel.module.css` wirken auf ALLE Tabellen-Regionen im System. Beispiel: + +```css +/* Panel.module.css */ +.panel[data-variant="table"] .body { + min-height: 300px; /* wirkt systemweit fuer alle Tabellen */ +} +``` + +### Beispiel: Collapsible Dashboard + +```tsx + +
+ + +
+ +``` + +## LayoutTabs + +Einziges Tab-System. Ersetzt `UiComponents/Tabs` und alle manuellen Tab-Button-Implementierungen. + +### Props + +| Prop | Typ | Default | Beschreibung | +|------|-----|---------|-------------| +| `items` | `LayoutTabItem[]` | - | Tab-Definitionen | +| `urlParam` | `string` | - (kein Default) | URL-Search-Parameter fuer aktiven Tab | +| `defaultTab` | `string` | erstes Item | Fallback wenn URL-Param fehlt | +| `preserveSearchParams` | `boolean` | `true` | Andere URL-Params beim Tab-Wechsel erhalten | +| `aliasMap` | `Record` | - | URL-Wert -> Tab-ID Mapping | +| `syncUrl` | `boolean` | `!!urlParam` | Tab-Wechsel schreibt in URL (default: an, wenn `urlParam` gesetzt) | +| `lazy` | `boolean` | `false` | Wenn `true`: besuchte Tabs bleiben gemountet (`display:none`), State bleibt erhalten. Wenn `false`: nur aktiver Tab gemountet, Wechsel remountet (State-Verlust). Fuer Tab-Sets mit Formularen/Streams `lazy` setzen. | +| `collapsible` | `boolean` | `false` | Tab-Bar einklappbar | + +### LayoutTabItem + +```typescript +interface LayoutTabItem { + id: string; + label: string; + icon?: ReactNode; + group?: string; // Gruppierung (Kategorie-Titel) + disabled?: boolean; + render: () => ReactNode; +} +``` + +### Beispiel: Gruppierte Tabs + +```tsx + }, + { id: 'runs', label: 'Durchlaeufe', group: 'Ausfuehren', render: () => }, + { id: 'editor', label: 'Editor', group: 'Erstellen', render: () => }, + { id: 'templates', label: 'Vorlagen', group: 'Erstellen', render: () => }, + ]} +/> +``` + +## ViewStack + +Master-Detail-Navigation. Modi `list | catalog | detail` via URL-Parameter. + +### Props + +| Prop | Typ | Default | Beschreibung | +|------|-----|---------|-------------| +| `viewParam` | `string` | `'view'` | URL-Parameter fuer aktive View | +| `entityParam` | `string` | - | URL-Parameter fuer Entity-ID (z.B. `runId`) | +| `defaultView` | `ViewMode` | `'list'` | Fallback-View | + +### View-Modi + +| Modus | URL-Beispiel | Verhalten | +|-------|-------------|-----------| +| `list` | `/workflows` | Listenansicht (FormGeneratorTable) | +| `catalog` | `/workflows?view=catalog` | Katalog/Grid-Ansicht | +| `detail` | `/workflows?view=detail&runId=abc` | Detail-Ansicht mit Entity | + +## Seiten-Aufbau-Muster + +### Muster 1: Einfache Tabellen-Seite + +``` +StackLayout (variant="table") + └── Body + ├── Panel (variant="toolbar"): Header-Actions, Filter + └── Panel (variant="table", collapsible): FormGeneratorTable +``` + +Beispiele: AdminUsersPage, AdminMandatesPage, PromptsPage, ConnectionsPage + +### Muster 2: Dashboard-Seite + +``` +StackLayout (variant="dashboard") + └── Body + ├── Panel (variant="dashboard"): KPI-Grid + ├── Panel (variant="card", collapsible): Themen/Module + └── Panel (variant="card", collapsible): Details/Info +``` + +Beispiele: TrusteeDashboardView, CommcoachDashboardView, TeamsbotDashboardView + +### Muster 3: Seite mit Tabs + +``` +StackLayout (variant="table") + └── Body + ├── Panel (variant="toolbar"): Kontext-Filter (optional) + └── LayoutTabs (urlParam="tab") + ├── Tab "uebersicht": Panel (variant="dashboard") + Panel (variant="table") + └── Tab "settings": Panel (variant="card") +``` + +Beispiele: WorkflowAutomationHubPage, Settings, ComplianceAuditPage + +### Muster 4: Wizard-Seite + +``` +StackLayout (variant="form") + └── Body + ├── Panel (variant="toolbar"): Step-Indicator + Navigation + └── Panel (variant="wizard"): Step-Inhalt +``` + +Beispiele: AdminMandateWizardPage, AdminInvitationWizardPage + +### Muster 5: Editor/Chat-Seite + +``` +StackLayout (variant="scroll") + └── Body + └── Panel (variant="editor"): Editor/Chat (flex:1, volle Hoehe) +``` + +Beispiele: WorkflowEditorPage, ChatStream + +### Muster 6: Split-Layout (Phase 6b PanelLayout) + +``` +PanelLayout (config-getriebener Split-Tree) + ├── Panel links: Sidebar (collapsible, resizable) + ├── Panel mitte: Hauptinhalt + └── Panel rechts: Detail/Preview (collapsible, resizable) +``` + +Beispiele: WorkspacePage, FilesPage, CommcoachDossierView, RedmineBrowserView + +## Migrations-Checkliste + +Bei JEDER Seiten-Migration abarbeiten (Lessons aus Phase 4): + +### 1. Daten & API +- Mandantenfilter: "Alle" = kein `mandateId`-Param, Backend filtert per User-Mandatsliste +- Daten-Reload bei Kontextwechsel: Dependencies muessen `selectedMandateId` enthalten +- Metriken/Dashboard konsistent mit Tabelle: Gleicher Scope + +### 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 +- Keine redundanten Filter-Buttons (FormGeneratorTable hat eingebaute Filter) +- Kein RBAC im UI + +### 4. Backend RBAC +- Kein `isPlatformAdmin`-Bypass fuer Lesezugriffe +- Fail-closed: Fehlender Filter = leeres Ergebnis (`__impossible__`-Sentinel) +- `mandateId`-Validierung gegen `userMandateIds` + +### 5. Layout & UI +- StackLayout + Panel verwenden, URL als Source-of-Truth +- Panel fuer collapsible Bloecke +- scrollMode-Integration: min-height im document-Mode + +### 6. Keep-Alive (nur fuer registrierte Seiten) +- Pruefen ob Seite in `config/keepAliveRoutes.tsx` registriert ist +- Bei Wiedereinblenden Re-Measure/Re-Clamp ausloesen (Hoehe war `display:none` -> 0) +- `matchLocation`-Bedingung bei Tab-basierten Keep-Alive-Routes erhalten (z.B. `?tab=editor`) +- `scopeKey` (Mandant/Instanz) als React-`key` beibehalten — Scope-Wechsel = Neu-Mount +- Resize-/SSE-Listener-Cleanup darf persistenten State nicht zerstoeren + +## Anti-Patterns + +| Anti-Pattern | Stattdessen | +|-------------|-------------| +| `styles.adminPage` / `adminPageFill` | `StackLayout` mit passender Variante | +| `styles.tableContainer` | `Panel variant="table"` | +| `styles.pageHeader` mit inline Actions | `Panel variant="toolbar"` oder `StackLayout.Header` | +| Manuelle Tab-Buttons (`onClick`, `activeTab` State) | `LayoutTabs` mit `urlParam` | +| `UiComponents/Tabs` | `LayoutTabs` | +| `useState` fuer aktiven Tab | URL via `urlParam` | +| `isPlatformAdmin` Bypass im Backend | Mandate-scoped Filter mit fail-closed | +| `modalOverlay` CSS per Seite dupliziert | (siehe separater Modal-Konsolidierungsplan) | + +## Dateien + +| Datei | Zweck | +|-------|-------| +| `components/Layout/StackLayout.tsx` + `.module.css` | Seiten-Container | +| `components/Layout/Panel.tsx` + `.module.css` | Typisierte Region | +| `components/Layout/LayoutTabs.tsx` + `.module.css` | Tab-System | +| `components/Layout/ViewStack.tsx` + `.module.css` | Master-Detail | +| `components/Layout/types.ts` | Shared TypeScript-Typen | +| `hooks/useScrollMode.ts` | Scroll-Modus-Erkennung | +| `config/keepAliveRoutes.tsx` | Keep-Alive-Registrierung (persistente Seiten) | +| `layouts/MainLayout.tsx` + `.module.css` | App-Shell (Sidebar + Content) | +| `layouts/FeatureLayout.tsx` + `.module.css` | Feature-Chrome (Breadcrumb, Kontext) | +| `pages/FeatureView.tsx` + `.module.css` | View-Router fuer Feature-Instanzen | diff --git a/c-work/1-plan/2026-06-layout-foundation.md b/c-work/1-plan/2026-06-layout-foundation.md new file mode 100644 index 0000000..6fe7b6f --- /dev/null +++ b/c-work/1-plan/2026-06-layout-foundation.md @@ -0,0 +1,438 @@ + + + + +# 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 `` + 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 diff --git a/c-work/1-plan/2026-06-layout-regions.md b/c-work/1-plan/2026-06-layout-regions.md new file mode 100644 index 0000000..4021b08 --- /dev/null +++ b/c-work/1-plan/2026-06-layout-regions.md @@ -0,0 +1,592 @@ + + + + + +# Layout Regions — Seiten-Zuordnung + +Referenz-Dokument zum [Layout Foundation Gesamtplan](2026-06-layout-foundation.md). +Begriffe (Slot / Region / Variant) sind kanonisch in [`b-reference/ui-nyla/layout.md`](../../b-reference/ui-nyla/layout.md) definiert. + +Jede Seite ist ein `StackLayout`; jeder Inhaltsblock im Body ist eine **Region** (`Panel`). Die **Regionstypen** (Panel-Varianten): + +| Regionstyp (Panel-Variant) | Zweck | Collapse | Flex | +|---------|-------|----------|------| +| `card` | Info-Sektionen, Settings, allgemeine Bloecke | ja | nein | +| `table` | FormGeneratorTable, bounded scroll | ja | flex:1 | +| `dashboard` | KPI-Grid, Stats-Cards | ja | nein | +| `toolbar` | Filter-Bar, Actions-Bar, kompakt | nein | nein | +| `editor` | Code-Editor, Flow-Editor, Chat, Vollhoehe | ja | flex:1 | +| `wizard` | Wizard-Schritte | nein | nein | + +Seiten mit Tabs nutzen `LayoutTabs`. Modale Dialoge sind keine Regionen. + +### StackLayout-Variant pro Seite (Pflichtangabe) + +Jede Seite waehlt eine `StackLayout`-Variant (steuert Scroll-/Flex-Verhalten des Body). Regel nach Seitentyp: + +| Seitentyp | StackLayout variant | Begruendung | +|-----------|---------------------|-------------| +| Tabelle/Liste (FormGeneratorTable) | `table` | bounded scroll, interner Tabellen-Scroll, mind. ein `flex:1`-Panel (`table`/`editor`) | +| Wizard/Formular-Flow | `form` | natuerliche Hoehe, Seiten-Scroll | +| Chat/Editor/Stream | `scroll` | Vollhoehe, eigener Scrollbereich | +| KPI/Dashboard-Grid | `dashboard` | Karten-Grid, Seiten-Scroll | +| **Tabbed-Seite** | **richtet sich nach dominantem Tab-Inhalt** | siehe Regel unten | + +**Tabbed-Seiten-Regel (WICHTIG):** `variant="table"` setzt voraus, dass der Body ein `flex:1`-Panel (`table` oder `editor`) enthaelt — sonst scrollt die ganze Seite inkl. Header/Tabs statt nur des Bodys (sticky-Header-UX geht verloren). Daher: +- Tab-Set mit mind. einem FormGeneratorTable-Tab -> `variant="table"` +- Tab-Set nur aus `card`/`form`/`dashboard`-Panels (keine bounded Tabelle) -> **`variant="scroll"`** + +Pro tabbed Seite ist der StackLayout-Variant unten **explizit** angegeben; nicht raten. Referenz: `TrusteeDataTablesView` -> `table` (Tabellen-Tabs), `WorkflowAutomationHubPage` -> `table` (Runs/Workflows-Tabellen). + +### Referenz-Seiten (Gold-Standard, bereits migriert) + +Diese zwei Seiten sind die verbindliche Vorlage fuer alle Subagenten: + +#### TrusteeDataTablesView.tsx (Phase 4a) +- `StackLayout variant="table"` +- Slot Header: Breadcrumb (via FeatureLayout) +- **LayoutTabs** (gruppiert, `preserveSearchParams`): Stammdaten / Dokumente / Konfiguration / Daten aus Buchhaltungssystem +- Je Tab: Panel `table` (FormGeneratorTable via Wrapper; eingebettete Views OHNE eigenes StackLayout) + +#### WorkflowAutomationHubPage.tsx (Phase 4b) +- `StackLayout variant="table"` +- Slot Header: Titel + Kontext-Selektor (Mandant), Kontext via URL `?context=` +- **LayoutTabs** (`urlParam="tab"`, `lazy`): Workflows / Editor ([KEEP-ALIVE] `?tab=editor`) / Vorlagen / Durchlaeufe / Aufgaben +- Tab Durchlaeufe: **ViewStack** (`entityParam="runId"`) list -> detail + - Panel `dashboard` collapsible: Metrik-Karten + - Panel `table`: RunsTab FormGeneratorTable +- Tab Workflows: Panel `dashboard` collapsible (Metriken) + Panel `table` (WorkflowsTab) + +### Keep-Alive (Persistenz beim Verlassen/Zurueckkehren) + +Manche Seiten unmounten beim Verlassen **nicht** — sie behalten State, Scroll und laufende Prozesse (SSE, Streams). Registriert in `ui-nyla/src/config/keepAliveRoutes.tsx`; gerendert via `MainLayout.tsx` (per `display:none` versteckt statt unmounted). + +Seiten mit **`[KEEP-ALIVE]`**-Markierung unten muessen bei der Migration beachten: +- Beim Wiedereinblenden (`display:none` -> sichtbar) **Re-Measure/Re-Clamp** ausloesen (Hoehe war 0). +- Resize-/Scroll-Listener-Cleanup darf den persistenten State nicht zerstoeren. +- `scopeKey` (Mandant/Instanz) bleibt erhalten — beim Scope-Wechsel wird neu gemountet. + +Bereits registriert: WorkspacePage (pro Scope), CommcoachSessionView (pro Session-Scope), AdminLanguagesPage, AdminDatabaseHealthPage, WorkflowAutomationHubPage (nur `?tab=editor`). + +NEU zu registrieren (Teil dieser Migration): TeamsbotSessionView (pro Session-Scope), RedmineBrowserView. + +--- + +## Phase 5b — Trustee-Views + +### TrusteeAbschlussView.tsx +- **LayoutTabs**: Jahresabschluss, MWST-Abrechnung, Reporting Behoerden +- Je Tab: + - Panel `card`: Beschreibungstext / Coming-Soon-InfoBox + - Panel `card`: Workflow-Info + PeriodPicker + Aktion + Status + +### TrusteeAccountingSettingsView.tsx +- **LayoutTabs**: Verbindungseinstellungen, Buchhaltungsdaten importieren +- Tab Verbindungseinstellungen: + - Panel `card` collapsible: Status-Banner + - Panel `wizard`: 3-Schritt-Wizard (Buchhaltungssystem, Zugangsdaten, Aktionen) +- Tab Buchhaltungsdaten importieren: + - Panel `card`: Letzter-Import-Status + - Panel `card`: Import-Formular (PeriodPicker + Aktionen + Fortschritt) + - Panel `card`: Aktueller Datenbestand + +### TrusteeAnalyseView.tsx +- **LayoutTabs**: Budget-Vergleich, KPI-Dashboard, Cashflow-Rechnung, Prognose +- Je Tab: + - Panel `card`: Beschreibungstext + - Panel `card`: Workflow-Info + Upload (Budget) + PeriodPicker + Aktion + Status + +### TrusteeDashboardView.tsx +- Panel `dashboard`: Metriken-Grid (Positionen, Dokumente, Buchhaltung, Rolle) +- Panel `card`: QuickActionBoard +- Panel `card` collapsible: Instanz-Details (Info-Grid) + +### TrusteeDocumentsView.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren, Neues Dokument) +- Panel `table`: FormGeneratorTable + +### TrusteeExpenseImportView.tsx +- Panel `card`: Status-Box (Workflow aktiv/inaktiv) +- Panel `wizard`: 4-Schritt-Setup (Microsoft-Verbindung, SharePoint, Ordner-Browser, Speichern) + +### TrusteeImportProcessView.tsx +- **LayoutTabs**: Belege verarbeiten, Beleg hochladen, Daten einlesen +- Tab Belege: eingebettetes TrusteeExpenseImportView +- Tab Upload: eingebettetes TrusteeScanUploadView +- Tab Daten einlesen: Weiterleitung zu Settings + +### TrusteeInstanceRolesView.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren) +- Panel `card`: Erklaerungstext +- Panel `card`: Rollen-Liste (expandierbare Rollen-Cards mit AccessRulesEditor) + +### TrusteePositionDocumentsView.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren, Neue Verknuepfung) +- Panel `table`: FormGeneratorTable + +### TrusteePositionsView.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren, Neue Position) +- Panel `table`: FormGeneratorTable (mit Batch-Actions) + +### TrusteeScanUploadView.tsx +- Panel `card`: Beschreibungstext + Pipeline-Status +- Panel `card`: Drag-and-Drop Upload-Zone + Dateiliste + Start-Button + +### dataTables/TrusteeDataTab.tsx +- Panel `toolbar`: Aktualisieren-Button +- Panel `table`: FormGeneratorTable + +--- + +## Phase 5c — Admin-Seiten + +### AdminUsersPage.tsx +- Panel `toolbar`: Header-Actions (Zugriffsübersicht, Einladungen, Aktualisieren, Neuer Benutzer) +- Panel `table`: FormGeneratorTable + +### AdminUserMandatesPage.tsx +- Panel `toolbar`: Filter-Bar (Mandant-Select, Aktualisieren, Benutzer hinzufügen) +- Panel `table`: FormGeneratorTable + +### AdminUserAccessOverviewPage.tsx +- Panel `toolbar`: Filter-Bar (Benutzer-Select, Aktualisieren) +- Panel `card`: User-Info-Box (Name, E-Mail, Badges) +- **LayoutTabs**: Uebersicht, UI-Zugriff, Daten-Zugriff, Ressourcen + - Je Tab: Panel `card` mit Mandant-Hierarchie bzw. Zugriffs-Tabellen + +### AdminMandatesPage.tsx +- Panel `toolbar`: Header-Actions +- Panel `table`: FormGeneratorTable + +### AdminMandateRolesPage.tsx +- Panel `toolbar`: Filter-Bar (Mandant, Scope, Aktualisieren, Neue Rolle) +- Panel `card`: Info-Box (System-Templates) +- Panel `table`: FormGeneratorTable + +### AdminMandateRolePermissionsPage.tsx +- Panel `toolbar`: Header-Actions + Filter-Bar (Mandant, Bereich) +- Panel `card`: Info-Box +- Panel `card`: Rollen-Liste (expandierbare roleCards mit AccessRulesEditor) + +### AdminLogsPage.tsx +- Panel `toolbar`: Controls-Bar (Anzahl, Laden, Auto-Refresh) +- Panel `editor`: Log-Container (farbcodierte Log-Zeilen) + +### AdminLanguagesPage.tsx **[KEEP-ALIVE]** +- Panel `toolbar`: Toolbar (Reload, Suche, Aktionen, Export, Import, Neue Sprache) +- Panel `table`: FormGeneratorTable +- Keep-Alive: bleibt persistent (laufende Uebersetzungs-Prozesse/Progress-Overlay) + +### AdminInvitationsPage.tsx +- Panel `toolbar`: Filter-Bar (Mandant, Checkboxen, Aktualisieren, Neue Einladung) +- Panel `table`: FormGeneratorTable + +### AdminFeatureRolesPage.tsx +- Panel `toolbar`: Filter-Bar (Feature-Select, Aktualisieren, Neue Rolle) +- Panel `card`: Info-Box (Template-Rollen) +- Panel `table`: FormGeneratorTable + +### AdminFeatureInstanceUsersPage.tsx +- Panel `toolbar`: Filter-Bar (Mandant/Instanz-Select, Aktualisieren, Benutzer hinzufügen) +- Panel `card`: Info-Boxen (Kontext, Verfuegbare Rollen) +- Panel `table`: FormGeneratorTable + +### AdminFeatureAccessPage.tsx +- Panel `toolbar`: Filter-Bar (Mandant-Select, Aktualisieren, Neue Instanz) +- Panel `card`: Info-Box (Verfuegbare Features) +- Panel `table`: FormGeneratorTable + +### AdminDemoConfigPage.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren) +- Panel `dashboard`: Config-Card-Grid + +### AdminDatabaseHealthPage.tsx **[KEEP-ALIVE]** +- Keep-Alive: bleibt persistent (laufende Scan-/Cleanup-/Migration-Prozesse mit Logs) +- **LayoutTabs**: Statistiken, Orphan Cleanup, Legacy Cleanup, Migration +- Tab Statistiken: + - Panel `toolbar`: Filter-Bar (DB-Select, Aktualisieren) + - Panel `card`: Summary-Zeile + - Panel `table`: FormGeneratorTable +- Tab Orphans: + - Panel `toolbar`: Filter-Bar (DB, Checkboxen, Scan, Bereinigen) + - Panel `card`: Warn-Info-Box + - Panel `table`: FormGeneratorTable +- Tab Legacy Cleanup: + - Panel `toolbar`: Toolbar (Scan, Checkboxen, Loeschen) + - Panel `card`: Warn-Info-Box + - Panel `table`: FormGeneratorTable +- Tab Migration: + - Panel `card`: Backup-Section + - Panel `card`: Restore-Section (Drop-Zone, Validierung, Import) + +### AccessManagementHub.tsx +- Panel `toolbar`: Filter-Bar + View-Mode-Switch + Nav-Links +- Listenansicht: + - Panel `dashboard`: Overview-Stats-Cards + - Panel `dashboard`: Feature-Instanz-Grid +- Hierarchieansicht: + - Panel `card`: InstanceHierarchyView (Baumstruktur) + +### PermissionMatrix.tsx +- Panel `table`: Benutzer-Rollen-Matrix-Tabelle +- Panel `toolbar`: Footer (Benutzer hinzufuegen) + +### InstanceHierarchyView.tsx +- Panel `card`: Expandierbare Mandant/Feature/Instanz-Baumstruktur + +### InstanceDetailModal.tsx +- Modal (kein Panel) mit internen LayoutTabs: + - **LayoutTabs**: Benutzer, Rollen, Einstellungen + - Tab Benutzer: PermissionMatrix + - Tab Rollen: Rollen-Liste + Sync + - Tab Einstellungen: FormGeneratorForm + +### wizards/AdminMandateWizardPage.tsx +- Panel `wizard`: 4-Schritt-Wizard (Mandant, Benutzer, Feature-Instanzen, Feature-Benutzer) +- Panel `toolbar`: Step-Indicator + Navigation + +### wizards/AdminInvitationWizardPage.tsx +- Panel `wizard`: 4-Schritt-Wizard (Art, Mandant, Einladungen, Zusammenfassung) +- Panel `toolbar`: Step-Indicator + Navigation + +### wizards/FeatureInstanceWizard.tsx +- Modal mit Panel `wizard`: 3-Schritt-Wizard (Instanz erstellen, Rollen, Benutzer) + +--- + +## Phase 5d — Basedata-Seiten + +### ConnectionsPage.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren, Neue Verbindung) +- Panel `card` collapsible: Knowledge-Sync-Banner +- Panel `table`: FormGeneratorTable + +### FilesPage.tsx +- Panel `toolbar`: Header-Actions (Tree/Table-Toggles, Aktualisieren) +- Split-Layout (Phase 6b PanelLayout): + - Panel `card`: FormGeneratorTree (Eigene + Geteilt) + - Panel `table`: FormGeneratorTable (mit View-Mode-Toggle + Upload) + +### PromptsPage.tsx +- Panel `toolbar`: Header-Actions (Aktualisieren, Neuer Prompt) +- Panel `table`: FormGeneratorTable + +--- + +## Phase 5e — Feature-Views + +### Commcoach + +#### CommcoachAssistantView.tsx +- Panel `wizard`: Wizard (Modul-Typ, Thema, Persona, KPI, Zusammenfassung) +- Panel `toolbar`: Wizard-Header (Schritt-Indikator, Zurueck/Weiter) + +#### CommcoachDashboardView.tsx +- Panel `dashboard`: KPI-Grid (Streak, Sessions, Score, Zielfortschritt) +- Panel `card` collapsible: Aktive Coaching-Themen (Context-Karten-Grid) +- Panel `card` collapsible: Level/Auszeichnungen (Badge-Grid) +- Panel `card` collapsible: Tipp des Tages + +#### CommcoachDossierView.tsx **[TOT — nicht geroutet; Phase 7 klaeren, NICHT migrieren]** +- Split-Layout (Phase 6b PanelLayout): + - Panel `card`: UnifiedDataBar-Sidebar (Dateien, Quellen) + - Hauptbereich mit LayoutTabs: Coaching, Aufgaben, Sessions, Bewertungen + - Tab Coaching: Panel `editor` (Chat-Stream + Eingabe) + - Tab Aufgaben: Panel `card` (Task-Liste) + - Tab Sessions: Panel `card` (Timeline) + - Tab Scores: Panel `card` (Dimension-Balken) + +#### CommcoachModulesView.tsx +- Panel `toolbar`: Header (Filter, Neues Modul) +- Panel `card`: Modul-Liste (expandierbare Karten mit Session-Zeilen) + +#### CommcoachSessionView.tsx **[KEEP-ALIVE]** +- Keep-Alive: bleibt persistent pro Session-Scope (laufende Voice-/Chat-Session, SSE). `shellOverflowHidden: false` +- Split-Layout (Phase 6b PanelLayout): + - Panel `card`: UDB-Sidebar + - Panel `editor`: Session-Chat (Header, Nachrichten, Eingabe) + +#### CommcoachSettingsView.tsx +- **LayoutTabs**: Allgemein, Gespraechspartner +- Tab Allgemein: + - Panel `card`: Einstellungen-Formular (Stimme, Erinnerungen) +- Tab Gespraechspartner: + - Panel `toolbar`: Header-Actions + - Panel `table`: FormGeneratorTable + +### Teamsbot + +#### TeamsbotAssistantView.tsx +- Panel `wizard`: Wizard (Modul, Meeting-Config, Bot-Name, Zusammenfassung) +- Panel `toolbar`: Wizard-Header (Schritt-Indikator) + +#### TeamsbotDashboardView.tsx +- Panel `dashboard`: Hero-Header + Quick-Actions +- Panel `dashboard`: KPI-Grid (Module, Sitzungen, Segmente) +- Panel `card` collapsible: Module nach Aktivitaet (Modul-Karten-Grid) +- Panel `card` collapsible: Aktive Sitzungen (Session-Zeilen) + +#### TeamsbotModulesView.tsx +- Panel `toolbar`: Header (Modul anlegen, Meeting starten) +- Panel `card`: Modul-Liste (expandierbare Karten mit Session-Tabelle) + +#### TeamsbotSessionView.tsx **[KEEP-ALIVE — NEU zu registrieren]** +- Keep-Alive: muss NEU in `keepAliveRoutes.tsx` aufgenommen werden (laufende Live-Session, Transkript-SSE, Bot-Antworten). Analog zu CommcoachSessionView, pro Session-Scope. +- Split-Layout (Phase 6b PanelLayout): + - Panel `card`: UDB-Sidebar + - Panel `card`: Regieanweisungen-Panel + - Panel `editor`: Split-Content (Transkript + Bot-Antworten) + +#### TeamsbotSettingsView.tsx +- **LayoutTabs**: Bot-Einstellungen, System-Bots +- Tab Bot-Einstellungen: + - Panel `card`: Settings-Card (Identitaet, AI-Verhalten, Sprache, Erweitert) +- Tab System-Bots: + - Panel `table`: Bot-Tabelle + Anlegen-Formular + +### RealEstate + +#### RealEstateDashboardView.tsx **[TOT — Registry mappt `dashboard`->PekView; Phase 7]** +- Panel `dashboard`: Stats-Grid (Projekte, Parzellen, Rollen) +- Panel `card` collapsible: Instanz-Details (Info-Grid) + +#### RealEstateParcelsView.tsx **[TOT — nicht geroutet; Phase 7]** +- Panel `toolbar`: Header-Actions (Aktualisieren, Neue Parzelle) +- Panel `table`: FormGeneratorTable + +#### RealEstatePekView.tsx (Registry: `dashboard`) +- Panel `card`: PekLocationInput (Adresseingabe) +- Panel `editor`: PekMapView (Karte) + +#### RealEstateProjectsView.tsx **[TOT — nicht geroutet; Phase 7]** +- Panel `toolbar`: Header-Actions (Aktualisieren, Neues Projekt) +- Panel `table`: FormGeneratorTable + +#### RealEstateInstanceRolesPlaceholder.tsx +- Panel `card`: Info-Sektion (Hinweistext + Links) + +#### pek/PekMapView.tsx (eingebettet in RealEstatePekView, KEIN eigenes StackLayout) +- Panel `toolbar`: Checkbox-Zeile (Alle Parzellen, Abwaehlen) +- Panel `editor`: Karten-Container (MapView) +- Panel `card`: ParcelInfoPanel (Slide-out) + +#### pek/PekLocationInput.tsx (eingebettet in RealEstatePekView, KEIN eigenes StackLayout) +- Panel `toolbar`: Adress-/Parzellen-Eingabe + Suchen + Meine Position + +### Redmine + +#### RedmineBrowserView.tsx **[KEEP-ALIVE — NEU zu registrieren]** +- Keep-Alive: muss NEU in `keepAliveRoutes.tsx` aufgenommen werden (gesetzte Filter, ausgewaehltes Ticket, unsaved Edits im TicketEditor). +- Panel `toolbar`: Browser-Header (Titel, Ticket-Zaehler) +- Panel `toolbar`: Filter-Bar (Period, Status, Tracker, Zuweisung, Sprint) +- Split-Layout (Phase 6b PanelLayout): + - Panel `table`: Ticket-Baum-Grid + - Panel `editor`: RedmineTicketEditor + +#### RedmineSettingsView.tsx +- Panel `card` collapsible: Verbindung (URL, Projekt, API-Key, Aktionen) +- Panel `card` collapsible: Mirror-Sync (KV-Grid, Sync-Buttons) + +#### RedmineStatsView.tsx +- Panel `toolbar`: Heading/Untertitel +- Panel `card`: FormGeneratorReport (KPI-Grid, Charts, Filter) + +#### RedmineTicketEditor.tsx (eingebettet in RedmineBrowserView `editor`-Panel, KEIN eigenes StackLayout) +- Panel `toolbar`: Editor-Header (Tracker, Ticket-ID, Titel, Link) +- Panel `card`: Formular-Grid (alle Felder) +- Panel `toolbar`: Button-Row (Zuruecksetzen, Speichern) + +### Neutralization + +#### NeutralizationView.tsx +- **LayoutTabs**: Konfiguration, Spielwiese +- Tab Konfiguration: + - Panel `card`: Namen-Textarea + Speichern +- Tab Spielwiese: + - Panel `card`: Datei-Upload + - Panel `card`: Text-Eingabe/Ausgabe (Neutralisieren/Aufloesen) + - Panel `card`: SharePoint Quell/Ziel-Pfade + +--- + +## Phase 5f — Billing-Seiten + +### BillingDataView.tsx +- Panel `toolbar`: Kontext-Filter (Scope-Dropdown, Checkbox) +- **LayoutTabs**: Uebersicht, Diagramme, Transaktionen +- Tab Uebersicht: Panel `dashboard` (FormGeneratorReport KPI-Grid) +- Tab Diagramme: Panel `card` (Chart-Mode-Toggle, Gruppierung, FormGeneratorReport) +- Tab Transaktionen: Panel `table` (FormGeneratorTable) + +### BillingAdmin.tsx +- Panel `toolbar`: MandateSelector +- **LayoutTabs**: Abonnement, Einstellungen, Guthaben aufladen +- Tab Abonnement: Panel `card` (SubscriptionTab) +- Tab Einstellungen: Panel `card` (SettingsEditor) +- Tab Guthaben: Panel `card` (CreditAdder + StripeTopUp + AccountsOverview) + +### BillingMandateView.tsx +- Panel `card` collapsible: Mandanten-Guthaben (MandateBalanceTable) +- Panel `card` collapsible: Transaktionen (TransactionTable) + +### BillingUserView.tsx **[TOT — nicht geroutet; Phase 7]** +- Panel `toolbar`: Filter-Bar (Mandant/Benutzer) +- Panel `card` collapsible: Benutzer-Guthaben (UserBalanceTable) +- Panel `card` collapsible: Transaktionen (UserTransactionTable) + +### BillingTransactions.tsx **[TOT — nicht geroutet; Phase 7]** +- Panel `table`: FormGeneratorTable + +### BillingDashboard.tsx **[TOT — nicht geroutet; Phase 7]** +- Panel `dashboard`: Guthaben-Grid (BalanceCards) +- Panel `card` collapsible: Nutzungsstatistik (PeriodPicker + Charts) + +### BillingNav.tsx (Subkomponente, KEIN eigenes StackLayout) +- Panel `toolbar`: Route-Navigation (NavLinks) + +### AdminSubscriptionsPage.tsx +- Panel `toolbar`: Header-Actions (Enterprise-Abo erstellen) +- Panel `table`: FormGeneratorTable + +### SubscriptionTab.tsx +- Panel `card`: Aktuelles Abonnement +- Panel `card`: Geplanter Nachfolgeplan +- Panel `dashboard`: Verfuegbare Plaene (PlanCard-Grid) + +### EnterpriseDialog.tsx +- Modal (kein Panel): Formular (Mandant, Zeitraum, Preis, Limits) + +--- + +## Phase 5g — Top-Level-Seiten + +### Dashboard.tsx +- Panel `card`: OnboardingAssistant +- Panel `dashboard`: Mandanten-Sektionen (InstanceCard-Grid pro Mandant) + +### Settings.tsx +- **LayoutTabs**: Profil, Darstellung, Stimme & Sprache, Sicherheit, Datenschutz +- Tab Profil: Panel `card` (User-Info, Applikations-Info) +- Tab Darstellung: Panel `card` (Theme-Toggle, Sprach-Select) +- Tab Stimme: Panel `card` (STT-Sektion, TTS-Stimmen-Tabelle) +- Tab Sicherheit: Panel `card` (MFA-Settings) +- Tab Datenschutz: Panel `card` (GDPR-Link, Neutralization-Mappings) + +### Store.tsx +- Panel `card`: Subscription-Banner +- Panel `dashboard`: Feature-Card-Grid + +### IntegrationsOverviewPage.tsx +- Panel `card`: Intro +- Panel `card`: PORTA-Architektur-Diagramm (3 Schichten) + +### ComplianceAuditPage.tsx +- Panel `toolbar`: MandateSelector +- **LayoutTabs**: Audit-Log, AI-Datenfluss, Neutralisierung, Statistiken +- Tab Audit-Log: Panel `table` (FormGeneratorTable) +- Tab AI-Datenfluss: Panel `table` (FormGeneratorTable) +- Tab Statistiken: Panel `dashboard` (KPI-Grid + Charts) +- Tab Neutralisierung: Panel `table` (FormGeneratorTable) + +### RagInventoryPage.tsx +- Panel `toolbar`: Kontext-Filter (Scope-Select, Checkbox) +- Panel `card`: Totals-Leiste +- Panel `card`: Verbindungs-Karten (je Verbindung) +- Panel `card`: Feature-Daten-Karten (je Feature-Instanz) + +### GDPR.tsx +- Panel `card`: Datenrechte (3 Action-Cards) +- Panel `card`: Verarbeitungsinformationen (Info-Grid) + +### FeatureView.tsx +- Kein Panel (duenner Router-Wrapper, CSS pruefen) + +--- + +## Phase 5g2 — Auth-Seiten + +### Login.tsx, Register.tsx, PasswordResetRequest.tsx, Reset.tsx, InvitePage.tsx +- Eigenstaendiges Auth-Layout ohne MainLayout +- Kein Panel noetig — nur CSS-Modernisierung pruefen + +--- + +## Phase 5h — WorkflowAutomation Views + Sub-Tabs + +### WorkflowTemplatesPage.tsx +- Panel `toolbar`: Header (Scope-Filter-Buttons, Aktualisieren) +- Panel `table`: FormGeneratorTable + +### WorkflowEditorPage.tsx +- Panel `editor`: FlowEditor (delegiert an Komponente) + +### TemplatesTab.tsx +- Duenner Wrapper um WorkflowTemplatesPage (kein eigenes Panel) + +### EditorTab.tsx **[KEEP-ALIVE]** +- Keep-Alive: WorkflowAutomationHubPage bleibt persistent, wenn `?tab=editor` aktiv (unsaved Graph-Edits, FlowEditor-State). Migration muss `matchLocation`-Bedingung erhalten. +- Duenner Wrapper um WorkflowEditorPage (kein eigenes Panel) + +### TasksTab.tsx +- Panel `toolbar`: Header (Pending-Count, Aktualisieren) +- Panel `card`: Pending-Task-Cards (Workflow-Label, Aktionen) +- Panel `card` collapsible defaultCollapsed: Abgeschlossene Aufgaben + +### RunDetailTab.tsx +- Panel `toolbar`: Zurueck-Button +- Panel `card`: Run-Titel + Metadaten + Error-Banner +- Panel `card` collapsible: Ergebnisse (File-Downloads) +- Panel `card`: Schritte (Accordion-Liste) +- Panel `card` collapsible: Sonstige Dokumente + +--- + +## Phase 5i — Trustee Sub-Komponenten + +### dataTables/TrusteeDataTab.tsx +- (siehe oben, bereits dokumentiert) + +--- + +## Phase 5j — Workspace-Views + +### WorkspacePage.tsx **[KEEP-ALIVE]** +- Keep-Alive: bleibt persistent pro Mandant/Instanz-`scopeKey` (laufender Chat, Streams, offene Dateien). `requireMandateForMount: false`. Re-Measure der Split-Panels beim Wiedereinblenden zwingend. +- Split-Layout (Phase 6b PanelLayout, 3-Spalten): + - Links: Panel `card` collapsible (UnifiedDataBar) + - Mitte: Panel `editor` (ChatStream + WorkspaceInput) + - Rechts mit LayoutTabs: Aktivitaet, Vorschau + - Tab Aktivitaet: Panel `card` (ToolActivityLog) + - Tab Vorschau: Panel `card` (FilePreview) + +### WorkspaceEditorPage.tsx +- Panel `toolbar`: Header (Zurueck, Titel, Accept-All/Reject-All) +- Panel `toolbar`: File-Tab-Bar +- Panel `editor`: Monaco DiffEditor +- Panel `toolbar`: Footer (Datei-Metadaten, Accept/Reject) + +### WorkspaceSettingsPage.tsx +- Panel `card`: WorkspaceGeneralSettings (scrollbar) + +### WorkspaceGeneralSettings.tsx +- Panel `card`: Agenten-Konfiguration (Max Rounds, Reset) +- Panel `card`: KI-Einstellungen (Neutralisierung, Provider, Modelle) + +### WorkspaceInput.tsx +- Panel `toolbar`: Attachment-Chips (Dateien, Datenquellen) +- Panel `toolbar`: Prompt-Eingabe-Zeile (Textarea, Upload, Provider, Voice, Send) + +### ChatStream.tsx +- Panel `editor`: Scrollbare Nachrichtenliste + +### FilePreview.tsx +- Panel `card`: Datei-Metadaten-Header + Content-Bereich + +### NeutralizationPanel.tsx +- Panel `card` collapsible: Neutralisierter Text (Accordion) +- Panel `card` collapsible: Datenquellen-Liste +- Panel `table`: Platzhalter-Mappings-Tabelle + +### ToolActivityLog.tsx +- Panel `card`: Expandierbare Activity-Cards (Tool-Name, Status, Args, Result) diff --git a/c-work/1-plan/2026-06-modal-consolidation.md b/c-work/1-plan/2026-06-modal-consolidation.md new file mode 100644 index 0000000..2835702 --- /dev/null +++ b/c-work/1-plan/2026-06-modal-consolidation.md @@ -0,0 +1,108 @@ + + + + +# Modal-Konsolidierung + +## Beschreibung und Kontext + +Aktuell gibt es 3 verschiedene Modal-Implementierungen im System. Das ist nicht wartbar und fuehrt zu inkonsistentem Verhalten (Backdrop, ESC-Handling, Focus-Trap, Accessibility). + +## Ist-Zustand + +### 3 Modal-Patterns + +| Pattern | Komponente | Nutzung | +|---------|-----------|---------| +| `useConfirm()` Hook | `ConfirmDialog` | 6 Seiten (Bestaetigungs-Dialoge) | +| `usePrompt()` Hook | `PromptDialog` | 4 Seiten (Text-Eingabe-Dialoge) | +| `` Komponente | `UiComponents/Modal` | 1 Seite (EnterpriseDialog) | +| `div.modalOverlay` + CSS | Per Seite dupliziert | ~25 Seiten | + +### modalOverlay mit FormGeneratorForm (~15 Seiten) + +Overlay-Container ist per CSS-Modul dupliziert (`Admin.module.css`, `TrusteeViews.module.css`, etc.), Inhalt ist `FormGeneratorForm` — halbwegs standardisiert. + +Betroffene Seiten: +- Admin: AdminUsersPage, AdminUserMandatesPage, AdminMandatesPage, AdminMandateRolesPage, AdminInvitationsPage, AdminFeatureRolesPage, AdminFeatureInstanceUsersPage, AdminFeatureAccessPage +- Trustee: TrusteeDataTab, TrusteeDocumentsView, TrusteePositionsView, TrusteePositionDocumentsView +- Basedata: ConnectionsPage, FilesPage, PromptsPage +- Feature: CommcoachSettingsView, RealEstateParcelsView, RealEstateProjectsView + +### modalOverlay mit Custom-Inhalt (~10 Seiten) + +Diese Seiten haben Modale ohne FormGeneratorForm: + +| Seite | Inhalt | +|-------|--------| +| RunsTab | Run-Tracing Detail-Ansicht | +| NeutralizationView | SharePoint Ordner-Browser | +| InstanceDetailModal | Multi-Tab-Modal (UiComponents/Tabs) mit verschachtelten Sub-Modalen | +| AdminMandateRolePermissionsPage | Duplikate-Cleanup mit Custom-Tabellen | +| AdminFeatureAccessPage | Feature-Button-Grid zur Auswahl | +| AdminInvitationsPage | URL-Anzeige mit Copy-Button | +| AdminFeatureRolesPage | AccessRulesEditor (Berechtigungen) | +| FeatureInstanceWizard | 3-Schritt-Wizard im Modal | +| ComplianceAuditPage | Content-View (Input/Output) | +| TeamsbotModulesView | Inline confirmDialog (nicht Hook) | +| CommcoachModulesView | Inline confirmDialog (nicht Hook) | +| Settings | ProfileEditModal (mit FormGeneratorForm) | + +## Ziel + +- **Ein** Modal-Container fuer alle Anwendungsfaelle +- Backdrop, ESC, Focus-Trap, ARIA (`role="dialog"`, `aria-modal`) konsistent +- FormGeneratorForm-Modale: Zero-Boilerplate (kein manueller Overlay-Code auf der Seite) +- Custom-Modale: Gleicher Container, freier Inhalt +- `useConfirm` und `usePrompt` als spezialisierte Wrapper bleiben (sind bereits OK) + +## Entscheidungen + +| Datum | Entscheidung | Begruendung | +|-------|-------------|------------| +| 2026-06-10 | Separater Plan, nicht Teil des Layout-Refactoring | Modale sind Overlays, keine Seitenregionen. Unabhaengig loesbar. | + +## Vorgeschlagene Architektur + +### Bestehende `` Komponente erweitern + +`UiComponents/Modal/Modal.tsx` existiert bereits, wird aber nur von `EnterpriseDialog.tsx` genutzt. Diese Komponente wird zum Standard. + +### Stufen + +| Stufe | Aktion | +|-------|--------| +| 1 | `` Komponente pruefen: hat sie Backdrop, ESC, Focus-Trap, ARIA, Groessen-Varianten? Fehlende Features ergaenzen. | +| 2 | `useFormModal()` Hook erstellen: Oeffnet `` mit `` — ersetzt 15 Seiten mit modalOverlay+FormGeneratorForm | +| 3 | Custom-Modale auf `` migrieren (10 Seiten) | +| 4 | `modalOverlay`-CSS aus allen CSS-Modulen entfernen | +| 5 | `TeamsbotModulesView` und `CommcoachModulesView` auf `useConfirm()` Hook umstellen | + +## Betroffene Module + +- `components/UiComponents/Modal/Modal.tsx` + `.module.css` — erweitern +- Neuer Hook: `hooks/useFormModal.ts` +- ~25 Seiten: modalOverlay entfernen, durch `` oder `useFormModal()` ersetzen +- CSS-Module: `Admin.module.css`, `TrusteeViews.module.css`, etc. — modalOverlay-Klassen entfernen + +## Akzeptanzkriterien + +| # | Kriterium | Prio | +|---|-----------|------| +| 1 | Alle Modale nutzen `` als Container | must | +| 2 | ESC schliesst jeden Dialog | must | +| 3 | Backdrop-Click schliesst (ausser bei unsaved changes) | must | +| 4 | Focus-Trap aktiv bei offenem Modal | must | +| 5 | `aria-modal="true"` + `role="dialog"` auf jedem Modal | must | +| 6 | grep `modalOverlay` = 0 Treffer nach Abschluss | must | +| 7 | `npx tsc --noEmit` = 0 Fehler | must | + +## Abschluss + +- [ ] Modal-Komponente erweitert und dokumentiert +- [ ] useFormModal Hook erstellt +- [ ] Alle Seiten migriert +- [ ] CSS-Cleanup (modalOverlay entfernt) +- [ ] layout.md oder eigene modal.md Referenz aktualisiert +- [ ] CHANGELOG-Eintraege +- [ ] Dieses Dokument -> 4-done/ verschoben diff --git a/c-work/_CHANGELOG.md b/c-work/_CHANGELOG.md index ca5bcbd..45f26c2 100644 --- a/c-work/_CHANGELOG.md +++ b/c-work/_CHANGELOG.md @@ -14,6 +14,32 @@ Skip: reine Refactors, Formatting, Lint, Dep-Bumps, Test-only, Wiki-Tippfehler. ## 2026-06-10 +- 2026-06-10 | fix | ui-nyla | **ViewStack Back-Bug + Hub-Filter in URL**: ViewStack loescht beim Zurueck nicht mehr pauschal `tab` (brach Back bei in LayoutTabs verschachtelten ViewStacks); WorkflowAutomationHubPage haelt Kontext-/Mandantenfilter jetzt in URL (`?context=`) statt `useState`. (Aus Plan-Review.) +- 2026-06-10 | docs | wiki | **Layout-Plan Opus-Review-Korrekturen**: 2. Review (Opus 4.8). B1: StackLayout-Variant-Regel fuer tabbed Seiten (Card-Tabs -> `scroll`, nicht `table`) + explizite Variant-Pflicht. W1: L10 Filter-localStorage-Key MUSS Scope (mandate/instance) enthalten (Tenant-Leakage). W2: useDocumentTitle sichtbarkeits-gated (Keep-Alive). W3: L7 Detail-Breadcrumb in ViewStack statt FeatureLayout (Hub ist Top-Level). W4: tote Billing-Seiten aus 5f entfernt. W5: 5-pre-Freeze nur aeussere Struktur. W6: eingebettete Subkomponenten (Pek, RedmineTicketEditor, BillingNav) als 'kein eigenes StackLayout' markiert. N1: Gold-Standard-Header-Kommentar aktualisiert. N5: chatworkflow-PlaceholderViews -> Dead-Code. +- 2026-06-10 | docs | wiki | **Layout-Plan Review-Korrekturen**: Plan-Review per Subagent. Phasen ergaenzt (5-pre generische Infra L2/L7/L8/L10/L11 + Keep-Alive-Remeasure als GATE; 6b PanelLayout vor Split-Seiten; 4c als GATE), Doku-Drift gefixt (LayoutTabs `lazy`/`preserveSearchParams`/`syncUrl`-Defaults in layout.md an Code; L9 korrigiert), Dead-Code-Verifikation (RealEstate Dashboard/Parcels/Projects, CommcoachDossier, TrusteePositionDocuments, Billing Dashboard/Transactions/UserView, SolutionsView), Chatworkflow-Views nachgetragen, StackLayout-Variant-Regel + Referenzseiten in regions.md, Subagent-Hartregeln (i18n, Modals nicht anfassen, Dead-Code skip), grep-Kriterium um `adminPage` ergaenzt, Checklisten-Nummerierung korrigiert. +- 2026-06-10 | refactor | ui-nyla | **Tab-`subtitle`-Hack entfernt**: ungenutztes `subtitle` aus `LayoutTabItem` (Typ + Rendering + `.tabSubtitle`/`.tabContent` CSS) entfernt. In TrusteeDataTablesView den "Nur lesen"-Subtitle-Hack und das nur dafuer genutzte `readOnly`-Feld aus `TabDef` entfernt; Tabs zeigen jetzt nur den Tabellennamen (Read-only-Schutz bleibt in den Wrappern). Doku layout.md angepasst. +- 2026-06-10 | refactor | ui-nyla | **Ungenutztes Tab-`actions`-Feld entfernt (L12)**: `actions` aus `LayoutTabItem` (types.ts), Rendering in LayoutTabs.tsx und `.tabActions` CSS entfernt — war nirgends verwendet. +- 2026-06-10 | docs | wiki | **Logik-Fragen L1-L12 entschieden**: L1-L11 entschieden und in Migrations-Checklisten integriert (Loading-States pro Seite, Scroll-Restoration, PanelLayout in 6b, i18n-Pflicht, Token-Pflicht, ARIA/Breadcrumb/ViewStack-Toast/lazy generisch, Filter-/document.title-Persistenz). Nur L12 (Tab-Actions) offen. TeamsbotSessionView + RedmineBrowserView als NEU zu registrierende Keep-Alive-Seiten markiert. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | docs | wiki | **Keep-Alive + Offene Logik-Fragen im Layout-Plan**: Keep-Alive-Markierung pro Seite/Tab in layout-regions.md (WorkspacePage, CommcoachSession, AdminLanguages, AdminDatabaseHealth, WF-Editor-Tab); Keep-Alive-Checkliste in layout.md; 12 offene Logik-Fragen (L1-L12: Loading-States, Scroll-Restoration, PanelLayout, i18n, Dark-Theme, ARIA, Breadcrumb, ViewStack-Toast, lazy/Keep-Alive, Filter-Persistenz, document.title, Action-Lift) in layout-foundation.md dokumentiert. +- 2026-06-10 | docs | wiki | **Layout-System Referenz erstellt**: `b-reference/ui-nyla/layout.md` — Scroll-Vertrag, Panel-Varianten (card/table/dashboard/toolbar/editor/wizard), StackLayout, LayoutTabs, ViewStack, Seiten-Aufbau-Muster, Anti-Patterns, Migrations-Checkliste. TOPICS.md aktualisiert. +- 2026-06-10 | feat | ui-nyla | **Panel variant-Prop**: Panel-Komponente um `variant` (card/table/dashboard/toolbar/editor/wizard) und `collapseKey` (localStorage-Persistenz) erweitert. CSS-Aenderungen pro Variant wirken systemweit ueber `[data-variant]`. +- 2026-06-10 | docs | wiki | **Modal-Konsolidierungsplan erstellt**: `c-work/1-plan/2026-06-modal-consolidation.md` — Analyse aller 3 Modal-Patterns, 5-Stufen-Migrationsplan, Akzeptanzkriterien. +- 2026-06-10 | docs | wiki | **Layout Region-Zuordnung**: `c-work/1-plan/2026-06-layout-regions.md` — Explizite Panel-Variant-Zuordnung fuer alle 98 Seiten. +- 2026-06-10 | fix | ui-nyla | **RunsTab workflowIdLabel Fix**: `displayField: 'workflowLabel'` auf `'workflowIdLabel'` korrigiert (FK-Resolver-Konvention `{field}Label`). Workflow-Name wird jetzt in Durchlaeufe-Tabelle korrekt angezeigt. +- 2026-06-10 | fix | platform-core | **Template-Copy mandantuebergreifend**: `copyTemplateToUser` und `shareTemplate` luden Template via `getWorkflow()` (mandate-scoped) statt `db.getRecord()`. Templates aus anderen Mandanten/Scopes (system, mandate) konnten nicht kopiert werden. +- 2026-06-10 | feat | platform-core | **Editor Chat Messages Stub-Route**: `GET /{workflowId}/chat/messages` Endpoint angelegt (gibt `{"messages": []}` zurueck). Behebt 405 Method Not Allowed beim Oeffnen des Workflow-Editors. +- 2026-06-10 | docs | wiki | **Migrations-Checkliste fuer UI-Seitenrefactoring**: 7 Kategorien (Daten/API, FK-Labels, FormGeneratorTable, RBAC, fehlende Routen, Layout, Persistenz) basierend auf allen Issues aus Phase 4a/4b. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | fix | platform-core | **CRITICAL Mandantenisolation: isPlatformAdmin Bypass entfernt**: `_scopedWorkflowFilter`, `_scopedRunFilter`, `_getMetrics`, `_listTasks` gaben bei `isPlatformAdmin=True` keinen Filter zurueck (fail-open → alle Mandanten sichtbar). Jetzt: Lesezugriffe IMMER per Mandatsmitgliedschaft gefiltert. isPlatformAdmin nur fuer erhöhte Schreibrechte. +- 2026-06-10 | fix | platform-core | **CRITICAL fail-open Fixes**: Templates list/copy/share mandateId validiert; getRecentCompletedRuns full-table-scan durch wfId-Filter ersetzt; Workspace listFeatureDataSources leerer Filter abgesichert (kein mandateId → leeres Ergebnis statt alle FDS). +- 2026-06-10 | fix | platform-core | **TODO: Billing + RBAC roles mandateId IDOR**: `routeBilling.py` (scope=mandate + mandateId param) und `routeAdminRbacRules.py` (list_roles mandateId) pruefen mandateId nicht gegen User-Mitgliedschaft. Separater Fix noetig. +- 2026-06-10 | fix | ui-nyla | **Workflow-Automation Metriken**: Runs direkt per Mandate-Scope statt indirekt ueber Workflow-IDs gezaehlt; mandateId an Metrics-API gesendet; Tabs laden bei Mandant-Wechsel neu. +- 2026-06-10 | feat | ui-nyla | **StackLayout.Header collapsible**: Seitenkopf per Klick/Keyboard ein- und ausklappbar (Chevron, ARIA, optional localStorage via `collapseKey`). Trustee Daten-Tabellen + Workflow-Automation Hub nutzen es. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | refactor | ui-nyla | **WorkflowAutomationHubPage migriert (Phase 4b)**: `UiComponents/Tabs` + manuelles State-Management ersetzt durch StackLayout + LayoutTabs (URL-Sync, aliasMap) + ViewStack (runId→Detail statt Detail-als-Tab). `detail`-Tab eliminiert, Run-Detail lebt jetzt als ViewStack-View in Runs. URL ist Source-of-Truth (kein `activeTab`/`selectedRunId` State mehr). (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | feat | ui-nyla | **SolutionsView MVP (Phase 3)**: Skeleton-Komponente `SolutionsView` als erster Konsument der Layout-Primitive. ViewStack (list/catalog/detail) + LayoutTabs (Einstellungen/Testlauf/Laeufe/Ausgabe) + StackLayout. `settingsSchemaToFormAttributes()` Bruecke fuer FormGeneratorForm. In FeatureView als `trustee.solutions` registriert. Backend-Anbindung pending. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | refactor | ui-nyla | **TrusteeDataTablesView migriert (Phase 4a)**: `adminPage`/`adminPageFill` + inline Tab-Buttons ersetzt durch StackLayout + LayoutTabs. 13 Tabs mit 4 Gruppen, URL-Sync, Lazy-Mount, ARIA. ~100 Zeilen inline Styles eliminiert. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | feat | ui-nyla | **Layout-Primitive (Phase 2)**: 5 neue Komponenten in `components/Layout/`: `StackLayout` (compound, Header/Toolbar/Tabs/Body/Footer, 4 Varianten, scrollMode-Integration), `LayoutTabs` (ARIA, URL-Sync, Alias-Map, Lazy-Mount, Grouped), `ViewStack` (Master→Detail via URL-Entity-Vertrag, Back-Navigation), `Panel` (collapsible, ARIA), `persistence` (pluggable localStorage-Adapter). Barrel-Export via `index.ts`. (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | refactor | ui-nyla | **Feature-Chrome-Budget (Phase 1)**: Doppeltes Padding (`featureContent` 1.5rem + `viewContent` 1.5rem) auf einen Owner (`viewContent`) reduziert. Breadcrumb auf Mobile kondensiert (Mandatsname ausgeblendet, kompaktere Abstände). (c-work: 1-plan/2026-06-layout-foundation.md) +- 2026-06-10 | feat | ui-nyla | **Layout scrollMode-Spike (Phase 0)**: `useScrollMode` Hook + `data-scroll-mode` Attribut auf ``. Auf Mobile/kurzem Viewport (`<=1024px` oder `<=500px` Hoehe) wechselt die gesamte Layout-Kette (MainLayout, FeatureLayout, FeatureView, Admin, FormGeneratorTable) von bounded (overflow:hidden, interner Scroll) zu document (overflow:visible, Header scrollt weg). (c-work: 1-plan/2026-06-layout-foundation.md) - 2026-06-10 | fix | infra | **UI-int Downtime behoben**: nginx auf `porta-int-ui-nyla` crashte wegen DNS-Fehler waehrend `unattended-upgrades` (systemd-networkd Restart + nginx Restart gleichzeitig → `host not found in upstream`). Fix: nginx neugestartet, `needrestart` auf beiden UI-VMs (int + main) auf `'l'` (list-only) konfiguriert — Sicherheitspatches installieren sich weiterhin, Services werden nicht mehr automatisch neugestartet. - 2026-06-10 | chore | platform-core | **poweron-center.net entfernt**: CORS-Regex, env-Dateien und Auth-Kommentar bereinigt — nur noch poweron.swiss. - 2026-06-10 | test | platform-core | **Demo-Tests bereinigt**: 7 Testdateien geloescht die nur DB-Seed-Daten verifizierten (keine Code-Logik). Verbleibend: `test_demo_api.py` (Code-Discovery + Auth) und `test_demo_data_files.py` (Repo-Struktur).