wiki/c-work/4-done/2026-06-layout-regions.md

Layout Regions — Seiten-Zuordnung

Referenz-Dokument zum Layout Foundation Gesamtplan. Begriffe (Slot / Region / Variant) sind kanonisch in 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)