leocrm/UI_OVERHAUL_PLAN.md

LeoCRM UI-Overhaul-Plan (v2)

Erstellt: 2026-08-21 Aktualisiert: 2026-08-21 — AI Assistent Integration hinzugefügt Status: Planung — nicht gestartet Leitlinie: Auf bestehendem Code aufbauen, 3-Spalten-Explorer-Layout als Standard, keine parallelen Systeme

---

Standard-Layout (Referenz: ContactsList.tsx)

Alle Explorer-Plugins nutzen das 3-Spalten-Layout aus den UI-Design-Guidelines:

┌─────────────┬──────────────────┬──────────────────────┐
│   Tree      │   Liste/Ansicht   │   Detail             │
│  (224px)    │   (flex-1)        │   (flex-1 / 60%)     │
│ ResizablePanel│  ResizablePanel   │   ResizablePanel     │
└─────────────┴──────────────────┴──────────────────────┘

• Toolbar oben: PluginToolbar mit Filter-Dropdowns, Ansichts-Umschaltern, Aktion-Buttons
• Linke Spalte: ResizablePanel mit Baumansicht (Ordner, Kategorien, Kalender)
• Mitte: Liste, Karten, Kalender-Ansicht — mehrere Ansichten umschaltbar
• Rechts: Detail-Bereich für ausgewähltes Element

---

Phase 1: Echte Bugs fixen (2-3 Tage)

1.1 Kontakte — Liste aktualisiert nach Speichern nicht

• Datei: frontend/src/pages/ContactsList.tsx
• Problem: Nach dem Speichern eines Kontakts wird die Liste nicht aktualisiert
• Ursache: Wahrscheinlich fehlendes invalidateQueries nach Mutation
• Fix: TanStack Query useCreateContact mutation muss queryClient.invalidateQueries({ queryKey: ['contacts'] }) im onSuccess haben
• Aufwand: 1 Stunde

1.2 Kontakte — Drag-Drop von Kontakten in Ordner nicht möglich

• Datei: frontend/src/pages/ContactsList.tsx, frontend/src/components/contacts/
• Problem: Drag-Drop von Kontakten in Ordner funktioniert nicht
• Fix: HTML5 Drag-Drop API auf Tree-Nodes implementieren, onDrop handler der updateContact({ folder_id }) aufruft
• Aufwand: 3 Stunden

1.3 Kontakte — Verschieben-Dialog funktioniert nicht

• Datei: frontend/src/components/contacts/MoveDialog.tsx (oder ähnlich)
• Problem: Ordner-Auswahl im Verschieben-Dialog leer oder broken
• Fix: Ordner-API aufrufen und im Dialog anzeigen, Auswahl speichern
• Aufwand: 2 Stunden

1.4 Wiki — Artikel kann nicht gespeichert werden

• Datei: frontend/src/pages/Wiki.tsx, frontend/src/api/knowledge.ts
• Problem: Speichern-Button funktioniert nicht oder API gibt Fehler zurück
• Diagnose: API-Endpunkt prüfen (POST /api/v1/wiki/articles oder PATCH /api/v1/wiki/articles/:id), Frontend-Mutation prüfen
• Fix: Je nach Diagnose — API-Fehler oder Frontend-Mutation-Fehler
• Aufwand: 2 Stunden

1.5 Kalender — Dialog schließt nicht nach Speichern

• Datei: frontend/src/pages/Calendar.tsx, frontend/src/components/calendar/AppointmentEditForm.tsx
• Problem: Nach dem Speichern eines Termins schließt sich der Dialog nicht
• Fix: onSuccess handler muss setEditingEvent(null) oder setShowDialog(false) aufrufen
• Aufwand: 30 Minuten

1.6 Kommunikation — Chats können nicht angelegt werden

• Datei: frontend/src/pages/Communication.tsx
• Problem: "Neuer Chat" Button funktioniert nicht oder API gibt Fehler
• Diagnose: API-Endpunkt prüfen (POST /api/v1/comm/conversations), Frontend-Mutation prüfen
• Fix: Je nach Diagnose
• Aufwand: 2 Stunden

1.7 Wiki — Doppelt im Menü

• Datei: frontend/src/routes/index.tsx, frontend/src/components/layout/ (Navigation)
• Problem: Wiki erscheint zweimal im Menü
• Diagnose: Route /wiki und möglicherweise Help-Subroute oder Plugin-Route
• Fix: Doppelte Route entfernen
• Aufwand: 30 Minuten

Gesamtaufwand Phase 1: ~13 Stunden (2-3 Tage)

---

Phase 2: AI Assistent in Kommunikation integrieren (2-3 Tage)

Problem

Der AI Assistent ist ein paralleles System das die Kommunikation-Plattform dupliziert:

• AI Assistant Tabellen: ai_conversations, ai_messages (app/models/ai_conversation.py) + ai_chat_sessions, ai_chat_messages, ai_chat_attachments (app/plugins/builtins/ai_assistant/models.py) — 5 Tabellen
• AI Assistant Frontend: AIAssistant.tsx, AIAssistantStandalone.tsx, SessionList.tsx, ChatWindow.tsx — eigene UI
• AI Assistant API: /api/v1/ai/sessions, /api/v1/ai/sessions/:id/messages, /api/v1/ai/sessions/:id/stream — eigene API
• Kommunikation hat schon AI-Chat: comm_conversations mit conversation_type='ai', streamChat() aus @/api/ai, categorizeConversation() mit 'KI Chats' Kategorie, new-ai-chat Toolbar-Button

2.1 Daten-Migration (Backend)

• Migration 0137: Migriere ai_chat_sessions → comm_conversations (conversation_type='ai')
  • ai_chat_sessions.id → comm_conversations.id
  • ai_chat_sessions.title → comm_conversations.title
  • ai_chat_sessions.tenant_id → comm_conversations.tenant_id
  • ai_chat_sessions.user_id → comm_conversations.owner_id
  • ai_chat_sessions.agent_id → comm_conversations.metadata.agent_id
  • ai_chat_sessions.created_at → comm_conversations.created_at
• Migration 0137: Migriere ai_chat_messages → comm_messages
  • ai_chat_messages.id → comm_messages.id
  • ai_chat_messages.session_id → comm_messages.conversation_id
  • ai_chat_messages.role → comm_messages.sender_type ('user' → 'user', 'assistant' → 'ai')
  • ai_chat_messages.content → comm_messages.content
  • ai_chat_messages.tenant_id → comm_messages.tenant_id
• Migration 0137: Migriere ai_conversations → comm_conversations (falls Daten vorhanden)
• Migration 0137: Migriere ai_messages → comm_messages (falls Daten vorhanden)
• Migration 0137: Drop ai_conversations, ai_messages, ai_chat_sessions, ai_chat_messages, ai_chat_attachments Tabellen
• Aufwand: 1 Tag

2.2 Backend — AI Chat API auf Communication umleiten

• Datei: app/plugins/builtins/ai_assistant/routes.py
• Änderung: POST /api/v1/ai/sessions → erstellt comm_conversations mit conversation_type='ai' statt ai_chat_sessions
• Änderung: GET /api/v1/ai/sessions/:id/messages → liest aus comm_messages statt ai_chat_messages
• Änderung: POST /api/v1/ai/sessions/:id/stream → bleibt erhalten (streaming endpoint) aber speichert messages in comm_messages
• Aufwand: 4 Stunden

2.3 Frontend — AI Assistant Page entfernen

• Entfernen: frontend/src/pages/AIAssistant.tsx
• Entfernen: frontend/src/pages/AIAssistantStandalone.tsx
• Entfernen: frontend/src/components/ai/SessionList.tsx
• Entfernen: frontend/src/components/ai/ChatWindow.tsx
• Route anpassen: /ai-assistant → gelöscht (kein Redirect nötig)
• Route anpassen: /ai-assistant-standalone → gelöscht (kein Redirect nötig)
• Navigation: AI Assistent Menüpunkt entfernen, AI Chat bleibt unter Kommunikation
• Aufwand: 2 Stunden

2.4 Frontend — Communication AI-Chat verbessern

• Datei: frontend/src/pages/Communication.tsx
• Änderung: AI Chat Sessions aus comm_conversations laden (statt ai/sessions API)
• Änderung: streamChat() bleibt erhalten aber Session-ID ist jetzt comm_conversation_id
• Änderung: AI Chat Messages aus comm_messages laden
• Aufwand: 4 Stunden

2.5 Backend — ai_assistant plugin models aufräumen

• Entfernen: AIChatSession, AIChatMessage, AIChatAttachment Models aus app/plugins/builtins/ai_assistant/models.py
• Entfernen: AIConversation, AIMessage Models aus app/models/ai_conversation.py
• Behalten: AIProvider, AIModel, AIPreset, AIChatFolder Models (für Settings)
• Behalten: ai_assistant plugin routes für Settings (providers, models, presets)
• Aufwand: 2 Stunden

2.6 Unified Search — AI Chat Provider anpassen

• Datei: app/plugins/builtins/unified_search/providers/ai_chat_provider.py
• Änderung: Search auf comm_messages (conversation_type='ai') statt ai_chat_messages
• Aufwand: 1 Stunde

Gesamtaufwand Phase 2: ~2-3 Tage

---

Phase 3: Wiki UI-Überarbeitung (3-4 Tage)

3.1 WYSIWYG Editor

• Datei: frontend/src/components/wiki/WikiEditor.tsx (neu zu bauen)
• Anforderung: WYSIWYG Editor mit allen Möglichkeiten, wie Notion — Bedienelemente über dem Textblock
• Technologie: Tiptap (ProseMirror-basiert, React-integration, Notion-ähnliche UX)
  • @tiptap/react, @tiptap/starter-kit, @tiptap/extension-*
  • Floating Toolbar über dem Textblock (wie Notion)
  • Markdown-Export für Backend-Speicherung
• Aufwand: 2 Tage

3.2 Wiki Layout — 3-Spalten

• Datei: frontend/src/pages/Wiki.tsx (umbauen)
• Anforderung: Toolbar oben, links Baummenü (Kategorien), Mitte Textbereich
• Aufbau:
  • Toolbar: View/Edit Mode Toggle (oben rechts), Suche, Neuer Artikel
  • Links: WikiBrowser (existiert schon) — Baumansicht mit Kategorien
  • Mitte: WYSIWYG Editor (Edit Mode) oder gerenderte Ansicht (View Mode)
  • Kein separater Detail-Bereich — Artikel wird in der Mitte angezeigt
• Aufwand: 1 Tag

3.3 View/Edit Mode Toggle

• Datei: frontend/src/pages/Wiki.tsx
• Anforderung: Button oben rechts in der Toolbar der zwischen View und Edit Mode wechselt
• Im Edit Mode: WYSIWYG Editor mit Floating Toolbar
• Im View Mode: Gerenderte Markdown-Ansicht (wie jetzt, aber schöner)
• Aufwand: 2 Stunden

Gesamtaufwand Phase 3: ~3-4 Tage

---

Phase 4: Tasks UI-Überarbeitung (2-3 Tage)

4.1 Tasks Layout — 3-Spalten wie Kontakte

• Datei: frontend/src/pages/Tasks.tsx (kompletter Umbau, 419 → ~600 Zeilen)
• Anforderung: Linke Sidebar Baumansicht, Mitte Liste mit mehreren Ansichten, rechts Detailbereich
• Aufbau:
  • Toolbar: PluginToolbar mit Filter-Dropdowns (Status, Priorität, Zuweisung, Fällig), Ansichts-Umschalter (Liste/Kanban), Neuer Task
  • Links: Baumansicht — nach Status (Offen/In Bearbeitung/Erledigt), nach Priorität, nach Zuweisung, nach Liste/Goal
  • Mitte: Liste (Tabelle) oder Kanban-Board — umschaltbar
  • Rechts: TaskDetail — ausgewählter Task mit Beschreibung, Subtasks, Zuweisung, Fälligkeit
• Aufwand: 2-3 Tage

Gesamtaufwand Phase 4: ~2-3 Tage

---

Phase 5: Kalender UI-Überarbeitung (1 Tag)

5.1 Toolbar und Filter standardisieren

• Datei: frontend/src/pages/Calendar.tsx (anpassen, 759 Zeilen)
• Problem: Drucken-Button und Filter-Leiste über dem Kalender entsprechen nicht dem Standard
• Fix:
  • Filter in PluginToolbar als Dropdowns (wie Kontakte)
  • Drucken-Button in PluginToolbar
  • Ansichts-Umschalter (Tag/Woche/Monat/Range) in PluginToolbar
• Aufwand: 4 Stunden

5.2 Kalender-Auswahl fixen

• Datei: frontend/src/components/calendar/CalendarTree.tsx
• Problem: Einzelnes An- und Abwählen von Kalendern funktioniert nicht richtig
• Fix: Checkbox-Toggle Logik reparieren — visibleCalendars Set korrekt verwalten
• Aufwand: 2 Stunden

Gesamtaufwand Phase 5: ~1 Tag

---

Phase 6: Tags Umstrukturierung (2 Tage)

6.1 Tags in Settings verschieben

• Datei: frontend/src/pages/Tags.tsx → frontend/src/pages/SettingsTags.tsx (neu)
• Route: /settings/tags statt /tags
• Anforderung: Tags gehören in die Einstellungen, bei System
• Aufwand: 2 Stunden

6.2 Tags Baumstruktur

• Datei: frontend/src/pages/SettingsTags.tsx (neu)
• Anforderung: Baumstruktur um Tags zu sortieren (Parent-Child Beziehung)
• Backend: tags Tabelle braucht parent_id Spalte (Migration 0138)
• Frontend: TreeView Komponente für Tags
• Aufwand: 1 Tag

6.3 Pro Tag einstellbar wo er verfügbar ist

• Datei: frontend/src/pages/SettingsTags.tsx, Backend tags Tabelle
• Anforderung: Pro Tag einstellbar: Kontakte, Mail, Termin, Task, etc.
• Backend: tag_applications Tabelle (tag_id, entity_type) oder JSON-Spalte applicable_to in tags (Migration 0138)
• Frontend: Multi-Select im Tag-Editor
• Aufwand: 4 Stunden

6.4 Symbol und Farbe pro Tag

• Datei: frontend/src/pages/SettingsTags.tsx, Backend tags Tabelle
• Anforderung: Symbol (Icon) und Farbe pro Tag einstellbar
• Backend: icon Spalte in tags (Migration 0138), color existiert schon
• Frontend: Icon-Picker und Color-Picker im Tag-Editor
• Aufwand: 4 Stunden

Gesamtaufwand Phase 6: ~2 Tage

---

Phase 7: Reports UI-Überarbeitung (2 Tage)

7.1 Reports Layout — 3-Spalten wie Kontakte

• Datei: frontend/src/pages/Reports.tsx (Umbau, 433 Zeilen)
• Anforderung: Linke Sidebar mit Baumstruktur (Ordner zum Sortieren), Mitte verschiedene Ansichten (Liste/Karten), rechts Detailbereich
• Aufbau:
  • Toolbar: PluginToolbar mit Filter, Ansichts-Umschalter, Neuer Report
  • Links: Baumansicht — nach Ordner/Gruppe sortierbar
  • Mitte: Liste oder Karten-Ansicht — umschaltbar
  • Rechts: ReportDetail — ausgewählter Report mit Vorschau
• Backend: reports Tabelle braucht folder_id Spalte (Migration 0139) für Ordner-Sortierung
• Aufwand: 2 Tage

Gesamtaufwand Phase 7: ~2 Tage

---

Phase 8: Kommunikation UI-Überarbeitung (2-3 Tage)

8.1 Baumstruktur verbessern und Ordner

• Datei: frontend/src/pages/Communication.tsx (anpassen, 859 Zeilen)
• Anforderung: Baumstruktur größer/übersichtlicher, Ordner für Chats
• Aufbau:
  • Links: Baumansicht mit Ordnern — System, AI, Kollegen, Custom Ordner
  • Baum breiter: ResizablePanel initialWidth=280 statt 224
  • Ordner: comm_conversation_folders Tabelle oder folder_id in comm_conversations (Migration 0140)
• Aufwand: 1-2 Tage

8.2 AI Chat in Kommunikation (nach Phase 2)

• AI Chats werden als eigener Baum-Knoten 'KI Chats' in Communication angezeigt
• Neuer AI Chat Button in Toolbar erstellt comm_conversation mit conversation_type='ai'
• streamChat() wird aufgerufen mit comm_conversation_id als Session-ID
• AI Messages werden in comm_messages gespeichert
• Aufwand: in Phase 2

Gesamtaufwand Phase 8: ~1-2 Tage (Phase 2 vorab)

---

Phase 9: Strukturelle Änderungen (0.5 Tage)

9.1 System Dashboard als eigener Menüpunkt

• Datei: frontend/src/routes/index.tsx, Navigation
• Problem: System Dashboard ist unter Settings, soll eigener Punkt auf Startseite-Ebene sein
• Fix: Route /system-dashboard existiert schon — muss in Navigation als Top-Level Menüpunkt angezeigt werden
• Aufwand: 1 Stunde

9.2 Mail — Postfach mit IMAP anlegen testen

• Datei: frontend/src/pages/Mail.tsx, frontend/src/pages/MailSettings.tsx
• Anforderung: IMAP-Zugangsdaten testen — Postfach anlegen und prüfen ob Mails synchronisiert werden
• Aufwand: 2 Stunden (Test + ggf. Bugfix)

Gesamtaufwand Phase 9: ~0.5 Tage

---

Zusammenfassung

Phase	Inhalt	Aufwand	Migration	Abhängigkeit
1	Echte Bugs fixen	2-3 Tage	Keine	Keine
2	AI Assistent → Kommunikation	2-3 Tage	0137	Phase 1.6
3	Wiki UI + WYSIWYG	3-4 Tage	Keine	Phase 1.4
4	Tasks UI neu	2-3 Tage	Keine	Keine
5	Kalender UI	1 Tag	Keine	Phase 1.5
6	Tags Umstrukturierung	2 Tage	0138	Keine
7	Reports UI	2 Tage	0139	Keine
8	Kommunikation UI	1-2 Tage	0140	Phase 2
9	Strukturelle Änderungen	0.5 Tage	Keine	Keine

Gesamtaufwand: ~17-22 Tage

Reihenfolge:

1. Phase 1 (Bugs) — zuerst, damit grundlegende Funktionen arbeiten
2. Phase 9 (Strukturelle Änderungen) — schnell, wenig Aufwand
3. Phase 5 (Kalender) — kleines Update, baut auf Phase 1 auf
4. Phase 2 (AI Assistent → Kommunikation) — entfernt paralleles System, baut auf Phase 1.6 auf
5. Phase 6 (Tags) — unabhängig, Backend + Frontend
6. Phase 4 (Tasks) — großer Umbau, unabhängig
7. Phase 3 (Wiki) — größter Umbau (WYSIWYG Editor), baut auf Phase 1 auf
8. Phase 7 (Reports) — großer Umbau, unabhängig
9. Phase 8 (Kommunikation) — baut auf Phase 2 auf

Migrationen:

• 0137: AI Assistent Tabellen → comm_conversations/comm_messages + Drop alte Tabellen
• 0138: Tags: parent_id, applicable_to, icon Spalten
• 0139: Reports: folder_id Spalte
• 0140: Communication: comm_conversation_folders Tabelle oder folder_id in comm_conversations

Was ich NICHT tun werde:

• Keine Massen-Scripts die neue Fehler verursachen
• Keine Änderungen ohne Verifizierung gegen Produktion
• Keine neuen Plugins wenn bestehende erweitert werden können
• Keine neuen Pages wenn bestehende umgebaut werden können
• Jede Änderung wird mit tsc und API-Test verifiziert

Was ich brauche:

• IMAP-Zugangsdaten: Für Mail-Postfach-Test (Phase 9.2)