Frontend – Use Cases

UC-FE-001 – Anmelden

Beschreibung

Ein Nutzer öffnet die PWA und meldet sich mit Benutzername und Passwort an.

Ziel

Gültiges JWT-Token wird im localStorage gespeichert, Nutzer sieht Startseite.

Ablauf

Nutzer öffnet die App — LoginPage wird angezeigt (kein Token vorhanden)
Nutzer gibt Zugangsdaten ein und bestätigt
Token wird gespeichert, Nutzer- und Servicedaten werden geladen
Startseite mit verfügbaren Service-Karten wird angezeigt

Fehlerfall

Falsche Zugangsdaten: Fehlermeldung, kein Token gesetzt

Abhängigkeiten

AUTH-001, FE-004

UC-FE-002 – Abmelden

Beschreibung

Ein angemeldeter Nutzer beendet seine Sitzung.

Ziel

Token und gespeicherter Tab werden aus localStorage entfernt, LoginPage erscheint.

Ablauf

Nutzer klickt auf „Abmelden" (Sidebar-Footer oder Topbar)
Token wird gelöscht, State wird zurückgesetzt
LoginPage wird angezeigt

Abhängigkeiten

FE-004

UC-FE-003 – Zwischen Tabs navigieren

Beschreibung

Ein Nutzer wechselt zu einem anderen Service-Tab.

Ziel

Inhalt des gewählten Tabs wird angezeigt, aktiver Tab wird hervorgehoben und persistiert.

Ablauf

Nutzer klickt auf einen Tab in der Sidebar
Aktiver Tab wird in localStorage gespeichert
Content-Bereich zeigt den entsprechenden Service

Abhängigkeiten

FE-002, FE-007

UC-FE-004 – Startseite aufrufen

Beschreibung

Ein Nutzer öffnet die Startseite und sieht verfügbare Services.

Ziel

Service-Karten werden entsprechend der eigenen Berechtigungen angezeigt.

Ablauf

Nutzer navigiert zur Startseite
Begrüßungstext mit Tageszeit und Nutzernamen wird angezeigt
Verfügbare Services als klickbare Karten erscheinen
Klick auf Karte navigiert direkt zum Service

Abhängigkeiten

FE-003, FE-005

UC-FE-005 – Trading-Gruppe aufklappen

Beschreibung

Ein Nutzer öffnet die Trading-Gruppe in der Navigation und wählt einen Unter-Tab.

Ziel

Korrekte Ansicht des gewählten Trading-Tabs wird geladen.

Ablauf

Nutzer klickt auf „Trading" in der Sidebar
Gruppe expandiert, vier Unter-Tabs erscheinen
Nutzer wählt Unter-Tab (z.B. Trend-Analyse)
Content-Bereich zeigt die entsprechende Ansicht

Abhängigkeiten

FE-002, FE-008

UC-FE-006 – Dokumentation einsehen

Beschreibung

Ein Nutzer öffnet den Dokumentations-Tab und liest die technische Dokumentation.

Ziel

Dokumentations-Seite wird als Vollbild-iframe eingebettet angezeigt.

Ablauf

Nutzer klickt auf „Dokumentation"
Content-Bereich wechselt auf fullscreen-Modus (kein Padding)
Eingebettete Doku-Seite wird geladen

Abhängigkeiten

FE-009

UC-FE-007 – Admin-Bereich öffnen

Beschreibung

Ein Administrator öffnet einen der Admin-Tabs (Benutzerverwaltung, Log-Anzeige, Systemverwaltung).

Ziel

Admin-Inhalt wird korrekt angezeigt, für Nicht-Admins sind die Tabs unsichtbar.

Ablauf

Admin-Nutzer sieht in der Sidebar die drei Admin-Tabs
Klick auf einen Tab lädt die entsprechende Admin-Ansicht
Nicht-Admin sieht die Tabs nicht (clientseitig gefiltert)

Abhängigkeiten

FE-006, ROLE-001

UC-FE-008 – Sitzung automatisch beenden (401)

Beschreibung

Das Token ist abgelaufen oder ungültig — die App meldet den Nutzer automatisch ab.

Ziel

Nutzer wird ohne manuellen Eingriff zur LoginPage weitergeleitet.

Ablauf

Nutzer führt eine API-Aktion aus
API antwortet mit HTTP 401
Frontend löscht Token und navigiert zur LoginPage

Abhängigkeiten

FE-004, AUTH-001

UC-FE-009 – Mobil navigieren

Beschreibung

Ein Nutzer öffnet die PWA auf einem mobilen Gerät.

Ziel

Sidebar öffnet sich per Hamburger-Button, schließt nach Tab-Auswahl automatisch.

Ablauf

Nutzer öffnet die App auf Smartphone
Sidebar ist standardmäßig eingeklappt
Nutzer öffnet Sidebar per Hamburger-Icon in der Topbar
Nutzer wählt Tab — Sidebar schließt sich automatisch

Abhängigkeiten

FE-001, FE-010

UC-FE-010 – Desktop-Layout navigieren

Beschreibung

Ein Nutzer öffnet die App im Desktop-Browser und navigiert über die persistente linke Sidebar.

Ziel

Die App ist auf Desktop-Bildschirmen (ab 768px Breite) vollständig und ergonomisch nutzbar. Inhalte nutzen den verfügbaren Platz, die Navigation ist dauerhaft sichtbar.

Ablauf

Nutzer öffnet die App im Desktop-Browser (Viewport ≥ 768px)
Linke Sidebar mit Wordmark und Navigationspunkten ist dauerhaft eingeblendet
Kein Hamburger-Button, keine Bottom Navigation sichtbar
Nutzer klickt einen Navigationspunkt — Content-Bereich rechts aktualisiert sich
Aktiver Navigationspunkt wird durch 3px linke Akzent-Border hervorgehoben
Bei Navigationsgruppen (Trading, Admin) erscheinen Unter-Tabs als horizontale Tab-Leiste oberhalb des Inhalts

Fehlerfall

Viewport unter 768px: Layout wechselt automatisch zurück auf mobile Bottom Navigation

Abhängigkeiten

FE-011, FE-001, FE-003

Changelog

Version	Datum	Änderungen
1.0	2026-06-25	Initiale Version