# 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). ### Tabbed-Seiten — StackLayout-Variant (Uebersicht) | Seite | StackLayout variant | Begruendung | |-------|---------------------|------------| | TrusteeDataTablesView | `table` | Dominante Tabellen-Tabs | | WorkflowAutomationHubPage | `table` | Runs/Workflows-Tabellen + Editor `editor` | | TrusteeAbschlussView | `scroll` | Nur `card`-Tabs (Workflow-Formulare) | | TrusteeAccountingSettingsView | `scroll` | Wizard + `card`-Tabs | | TrusteeAnalyseView | `scroll` | Nur `card`-Tabs | | TrusteeImportProcessView | `scroll` | Eingebettete Wizard/`card`-Tabs | | AdminUserAccessOverviewPage | `scroll` | Zugriffs-Hierarchie/`card`-Tabs | | AdminDatabaseHealthPage | `table` | Statistiken/Orphans/Legacy mit Tabellen | | InstanceDetailModal | `scroll` | Modal, Matrix + Rollen-`card` | | CommcoachDashboardView | `scroll` | Dashboard-`card`-Tabs | | CommcoachSettingsView | `scroll` | Settings-`card`-Tabs | | TeamsbotSettingsView | `scroll` | Settings-`card`-Tabs | | NeutralizationView | `scroll` | Konfiguration + Spielwiese | | BillingDataView | `table` | Transaktionen-Tab mit Tabelle | | BillingAdmin | `scroll` | Diagramme/`card`-Tabs | | BillingMandateView | `scroll` | Abo/Einstellungen/`card` | | Settings | `scroll` | Profil/Formular-Tabs | | ComplianceAuditPage | `table` | Audit-Log-Tabelle + ViewStack | | WorkspacePage | `scroll` | Chat/Editor-Split, rechte Tabs `card` | ### 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)