From 81be3478ff20567f8eac82bc26a66452fee2a419 Mon Sep 17 00:00:00 2001 From: Agent Zero Date: Mon, 17 Aug 2026 11:03:16 +0200 Subject: [PATCH] feat(help): help page with tree navigation, 6 help articles, routes in StartLayout --- frontend/src/pages/Help.tsx | 156 ++++++++++++++++++++ frontend/src/pages/StartPage.tsx | 2 +- frontend/src/pages/help/HelpContacts.tsx | 25 ++++ frontend/src/pages/help/HelpLogin.tsx | 23 +++ frontend/src/pages/help/HelpMailSetup.tsx | 25 ++++ frontend/src/pages/help/HelpNavigation.tsx | 29 ++++ frontend/src/pages/help/HelpPlaceholder.tsx | 17 +++ frontend/src/pages/help/HelpWelcome.tsx | 33 +++++ frontend/src/routes/index.tsx | 19 +++ 9 files changed, 328 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/Help.tsx create mode 100644 frontend/src/pages/help/HelpContacts.tsx create mode 100644 frontend/src/pages/help/HelpLogin.tsx create mode 100644 frontend/src/pages/help/HelpMailSetup.tsx create mode 100644 frontend/src/pages/help/HelpNavigation.tsx create mode 100644 frontend/src/pages/help/HelpPlaceholder.tsx create mode 100644 frontend/src/pages/help/HelpWelcome.tsx diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx new file mode 100644 index 0000000..1fde4b7 --- /dev/null +++ b/frontend/src/pages/Help.tsx @@ -0,0 +1,156 @@ +import React, { useState } from 'react'; +import { NavLink, Outlet, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { useUIStore } from '@/store/uiStore'; +import { ChevronRight, ChevronDown, BookOpen, Users, Calendar, Mail, FolderOpen, Settings, Shield, Zap, Bot } from 'lucide-react'; + +interface HelpNode { + title: string; + path?: string; + icon?: React.ReactNode; + children?: HelpNode[]; +} + +const HELP_TREE: HelpNode[] = [ + { + title: 'Erste Schritte', + icon: , + children: [ + { title: 'Willkommen', path: '/help/welcome' }, + { title: 'Login & Anmeldung', path: '/help/login' }, + { title: 'Navigation', path: '/help/navigation' }, + ], + }, + { + title: 'Kontakte', + icon: , + children: [ + { title: 'Kontakte verwalten', path: '/help/contacts' }, + { title: 'Kontaktpersonen', path: '/help/contact-persons' }, + { title: 'Import & Export', path: '/help/import-export' }, + { title: 'Duplikate finden', path: '/help/dedup' }, + ], + }, + { + title: 'Kalender', + icon: , + children: [ + { title: 'Termine erstellen', path: '/help/calendar' }, + { title: 'Kanban-Ansicht', path: '/help/calendar-kanban' }, + ], + }, + { + title: 'E-Mail', + icon: , + children: [ + { title: 'Postfach einrichten', path: '/help/mail-setup' }, + { title: 'Mails verwalten', path: '/help/mail-usage' }, + { title: 'Signaturen & Vorlagen', path: '/help/mail-signatures' }, + ], + }, + { + title: 'Dateien (DMS)', + icon: , + children: [ + { title: 'Dateien hochladen', path: '/help/dms-upload' }, + { title: 'Ordner & Berechtigungen', path: '/help/dms-folders' }, + ], + }, + { + title: 'Einstellungen', + icon: , + children: [ + { title: 'Stammdaten', path: '/help/settings-stammdaten' }, + { title: 'Benutzerverwaltung', path: '/help/settings-users' }, + { title: 'Rollen & Rechte', path: '/help/settings-roles' }, + { title: 'Plugins', path: '/help/settings-plugins' }, + ], + }, + { + title: 'Sicherheit', + icon: , + children: [ + { title: 'Passwörter', path: '/help/security-passwords' }, + { title: 'Datenschutz (DSGVO)', path: '/help/security-gdpr' }, + ], + }, + { + title: 'Automation & KI', + icon: , + children: [ + { title: 'KI-Assistent', path: '/help/ai-assistant' }, + { title: 'Workflows', path: '/help/workflows' }, + { title: 'Automation', path: '/help/automation' }, + ], + }, +]; + +function TreeItem({ node, depth }: { node: HelpNode; depth: number }) { + const [expanded, setExpanded] = useState(depth < 1); + const hasChildren = node.children && node.children.length > 0; + const paddingLeft = depth * 16 + 12; + + if (hasChildren) { + return ( +
+ + {expanded && ( +
+ {node.children!.map((child) => ( + + ))} +
+ )} +
+ ); + } + + return ( + + `flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors min-h-touch ${ + isActive + ? 'bg-primary-100 text-primary-700 font-medium' + : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900' + }` + } + style={{ paddingLeft: paddingLeft + 20 }} + > + {node.icon} + {node.title} + + ); +} + +export function HelpPage() { + const { t } = useTranslation(); + const sidebarOpen = useUIStore((state) => state.sidebarOpen); + + return ( +
+ +
+ +
+
+ ); +} diff --git a/frontend/src/pages/StartPage.tsx b/frontend/src/pages/StartPage.tsx index 98aead4..d0b1bf0 100644 --- a/frontend/src/pages/StartPage.tsx +++ b/frontend/src/pages/StartPage.tsx @@ -40,7 +40,7 @@ export function StartPage() { const menuItems = [ { id: 'workspaces', label: 'Workspaces', icon: , active: true }, { id: 'settings', label: 'Einstellungen', icon: , onClick: () => navigate('/settings') }, - { id: 'help', label: 'Hilfe', icon: , onClick: () => window.open('/docs', '_blank') }, + { id: 'help', label: 'Hilfe', icon: , onClick: () => navigate('/help/welcome') }, ]; return ( diff --git a/frontend/src/pages/help/HelpContacts.tsx b/frontend/src/pages/help/HelpContacts.tsx new file mode 100644 index 0000000..6064022 --- /dev/null +++ b/frontend/src/pages/help/HelpContacts.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +export function HelpContactsPage() { + return ( +
+

Kontakte verwalten

+

Kontakte erstellen

+

+ Gehen Sie zu Kontakte und klicken Sie auf "Neuer Kontakt". Füllen Sie die Felder aus und speichern Sie. Sie können Firmen und Personen anlegen. +

+

Kontaktpersonen

+

+ Jeder Firma können mehrere Kontaktpersonen zugeordnet werden. Öffnen Sie eine Firma und fügen Sie Personen hinzu. +

+

Tags

+

+ Verwenden Sie Tags um Kontakte zu kategorisieren. Tags können frei vergeben werden und helfen bei der Filterung. +

+

Ordner

+

+ Organisieren Sie Kontakte in Ordnern. Ordner können verschachtelt werden und eigene Berechtigungen haben. +

+
+ ); +} diff --git a/frontend/src/pages/help/HelpLogin.tsx b/frontend/src/pages/help/HelpLogin.tsx new file mode 100644 index 0000000..2dd0b06 --- /dev/null +++ b/frontend/src/pages/help/HelpLogin.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export function HelpLoginPage() { + return ( +
+

Login & Anmeldung

+

Anmeldung

+

+ Rufen Sie die LeoCRM-URL auf (z.B. https://crm.media-on.de) und melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an. +

+

Passwort vergessen?

+

+ Klicken Sie auf der Login-Seite auf "Passwort vergessen". Sie erhalten eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts. +

+

Sicherheit

+
    +
  • Ihre Sitzung wird über ein sicheres HttpOnly-Cookie verwaltet
    • +
  • Nach Inaktivität wird die Sitzung automatisch beendet
    • +
  • Passwörter werden mit bcrypt (cost=12) verschlüsselt gespeichert
    • +
+
+ ); +} diff --git a/frontend/src/pages/help/HelpMailSetup.tsx b/frontend/src/pages/help/HelpMailSetup.tsx new file mode 100644 index 0000000..e9348d4 --- /dev/null +++ b/frontend/src/pages/help/HelpMailSetup.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +export function HelpMailSetupPage() { + return ( +
+

Postfach einrichten

+

IMAP-Konto hinzufügen

+

+ Gehen Sie zu Einstellungen → Email und klicken Sie auf "Konto hinzufügen". Geben Sie Ihre IMAP- und SMTP-Serverdaten ein. +

+

Benötigte Daten

+
    +
  • IMAP-Server (z.B. imap.example.com)
    • +
  • IMAP-Port (meist 993 für SSL)
    • +
  • SMTP-Server (z.B. smtp.example.com)
    • +
  • SMTP-Port (meist 587 für TLS)
    • +
  • E-Mail-Adresse und Passwort
    • +
+

Synchronisation

+

+ Nach dem Einrichten wird Ihr Postfach automatisch synchronisiert. Neue E-Mails werden im Hintergrund abgerufen. +

+
+ ); +} diff --git a/frontend/src/pages/help/HelpNavigation.tsx b/frontend/src/pages/help/HelpNavigation.tsx new file mode 100644 index 0000000..15f0e5b --- /dev/null +++ b/frontend/src/pages/help/HelpNavigation.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +export function HelpNavigationPage() { + return ( +
+

Navigation

+

Startseite

+

+ Nach dem Login gelangen Sie zur Startseite. Hier können Sie einen Workspace auswählen oder zu den Einstellungen und der Hilfe navigieren. +

+

Workspace

+

+ Ein Workspace ist Ihr Arbeitsbereich mit Sidebar-Navigation. Hier finden Sie Kontakte, Kalender, E-Mail und alle anderen Module. +

+

Sidebar

+

+ Das Hamburger-Menü oben links blendet die Seitenleiste ein und aus. Die Sidebar zeigt alle verfügbaren Module. +

+

Zurück-Pfeil

+

+ Rechts neben dem Hamburger-Menü finden Sie einen Zurück-Pfeil, der Sie zurück zur Startseite bringt. +

+

Globale Suche

+

+ Verwenden Sie die Lupe oben oder Strg+K um das Kommando-Palette zu öffnen und schnell nach Kontakten, Mails oder Dateien zu suchen. +

+
+ ); +} diff --git a/frontend/src/pages/help/HelpPlaceholder.tsx b/frontend/src/pages/help/HelpPlaceholder.tsx new file mode 100644 index 0000000..ecfdd85 --- /dev/null +++ b/frontend/src/pages/help/HelpPlaceholder.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; + +export function HelpPlaceholderPage() { + const params = useParams(); + return ( +
+

Hilfe

+

+ Diese Hilfeseite ({params['*'] || 'unbekannt'}) wird gerade erstellt. Schauen Sie später wieder vorbei. +

+

+ Wählen Sie ein Thema aus dem Menü links um weitere Hilfe-Artikel zu lesen. +

+
+ ); +} diff --git a/frontend/src/pages/help/HelpWelcome.tsx b/frontend/src/pages/help/HelpWelcome.tsx new file mode 100644 index 0000000..5ff0df8 --- /dev/null +++ b/frontend/src/pages/help/HelpWelcome.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +export function HelpWelcomePage() { + return ( +
+

Willkommen bei LeoCRM

+

+ LeoCRM ist ein selbst-gehostetes CRM-System für kleine Vertriebsteams. Es bietet Kontakte, Kalender, E-Mail, Dateiverwaltung und mehr — alles in einer Anwendung. +

+

Hauptfunktionen

+
    +
  • Kontakte verwalten — Firmen, Personen, Kontaktdaten zentral speichern
    • +
  • Kalender — Termine, Aufgaben und Erinnerungen
    • +
  • E-Mail — IMAP-Postfächer synchronisieren, direkt antworten
    • +
  • Dateien (DMS) — Dokumente hochladen, teilen und verwalten
    • +
  • KI-Assistent — Intelligente Hilfe bei der Arbeit
    • +
  • Workflows — Automatisierte Prozesse
    • +
+

Erste Schritte

+
    +
  1. Melden Sie sich mit Ihren Zugangsdaten an
    2. +
  2. Wählen Sie einen Workspace auf der Startseite
    3. +
  3. Beginnen Sie mit dem Anlegen von Kontakten
    4. +
  4. Richten Sie Ihr E-Mail-Postfach unter Einstellungen → Email ein
    5. +
+
+

+ 💡 Tipp: Nutzen Sie die globale Suche (Lupe oben) oder das Kommando-Palette (Strg+K) um schnell zu finden was Sie brauchen. +

+
+
+ ); +} diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index b4c149b..e340124 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -70,6 +70,13 @@ const WorkspaceManagerPage = React.lazy(() => import('@/pages/SettingsWorkspaces const SettingsRechtePage = React.lazy(() => import('@/pages/SettingsRechte').then(m => ({ default: m.SettingsRechtePage }))); const NoAccessPage = React.lazy(() => import('@/pages/NoAccessPage').then(m => ({ default: m.NoAccessPage }))); const StartPage = React.lazy(() => import('@/pages/StartPage').then(m => ({ default: m.StartPage }))); +const HelpPage = React.lazy(() => import('@/pages/Help').then(m => ({ default: m.HelpPage }))); +const HelpWelcomePage = React.lazy(() => import('@/pages/help/HelpWelcome').then(m => ({ default: m.HelpWelcomePage }))); +const HelpLoginPage = React.lazy(() => import('@/pages/help/HelpLogin').then(m => ({ default: m.HelpLoginPage }))); +const HelpNavigationPage = React.lazy(() => import('@/pages/help/HelpNavigation').then(m => ({ default: m.HelpNavigationPage }))); +const HelpContactsPage = React.lazy(() => import('@/pages/help/HelpContacts').then(m => ({ default: m.HelpContactsPage }))); +const HelpMailSetupPage = React.lazy(() => import('@/pages/help/HelpMailSetup').then(m => ({ default: m.HelpMailSetupPage }))); +const HelpPlaceholderPage = React.lazy(() => import('@/pages/help/HelpPlaceholder').then(m => ({ default: m.HelpPlaceholderPage }))); const ApiDocsPage = React.lazy(() => import('@/pages/ApiDocs').then(m => ({ default: m.ApiDocsPage }))); /** Centered spinner fallback for lazy-loaded routes */ @@ -139,6 +146,18 @@ const router = createBrowserRouter([ ), children: [ { path: '/start', element: withSuspense() }, + { + path: '/help', + element: withSuspense(), + children: [ + { path: 'welcome', element: withSuspense() }, + { path: 'login', element: withSuspense() }, + { path: 'navigation', element: withSuspense() }, + { path: 'contacts', element: withSuspense() }, + { path: 'mail-setup', element: withSuspense() }, + { path: '*', element: withSuspense() }, + ], + }, { path: '/settings', element: {withSuspense()},