Uslimato Experience

Überblick

Uslimato Experience ist die neue Designsprache der Uslimato-App. Sie läuft parallel zum klassischen Design — du kannst jederzeit im Header oder im Avatar-Menü zwischen beiden Modi wechseln. Beim Umschalten werden keine Daten verschoben, neu geladen oder migriert.

Die Experience richtet sich an Teams, die sich einen helleren, fokussierteren Arbeitsplatz wünschen: eine warm-graue Sidebar, Uslimato-grüne Akzente, abgerundete Karten, einen App-Launcher, ein globales Erstellen-Menü, einen dedizierten Admin-Kontext sowie eine globale Command Palette.

Umschalten

Du kannst an drei Stellen wechseln:

• Header-Icon: ein Sparkle-Icon (Experience aktiv) oder Gauge-Icon (Klassisch aktiv) rechts im Header wechselt den Modus mit einem Klick.
• Avatar-Dropdown → Design: ein Segmented-Control mit Klassisch / Experience im Avatar-Menü.
• Command Palette: mit ⌘K / Strg + K öffnen und nach Uslimato Experience umschalten suchen.

Deine Auswahl wird in deiner Browser-Sitzung gespeichert. Sie überlebt Neuladen im selben Tab und wird beim Schließen des Browsers zurückgesetzt — eine frische Sitzung startet standardmäßig im klassischen Modus.

Was sich ändert

Die Experience ist eine visuelle Transformation — alle Daten, Routen, Berechtigungen und Features verhalten sich in beiden Modi identisch.

• Palette: der Akzent bleibt in der Experience auf Uslimato-Grün (#03a900) — konsistent mit der Produkt-Marke. Ein hellerer Uslimato-Grün-Gradient (#b3e8b3 → #03a900 → #034d01) wird auf Hero- und Admin-Strip-Flächen eingesetzt.
• Flächen: warme Produktgrautöne werden durch Zinc-Neutrals ersetzt (#09090b → #fafafa), für einen straffen Kontrast.
• Shell: die Sidebar ist eine helle Fläche mit gruppierter Navigation und Favoriten-Sektion. Die TopBar ist eine dunkle Command-Fläche mit App-Launcher (9-Dot), Breadcrumb, Command-Palette-Suche, Tenant-Switcher, grünem Erstellen-Button, Benachrichtigungen, Admin-Kontext-Toggle (Zahnrad) und Avatar-Menü.
• Controls: Primärbuttons sind pillförmig; Karten haben einen größeren Corner-Radius und sanftere Schatten.
• Typografie: die Experience folgt dem Brand-Guide — Century Gothic (bevorzugt, lizenziert, lokal installiert) für Wortmarke und Display-Elemente, mit Poppins 400 als freigegebenem Webfont-Fallback. JetBrains Mono bleibt für IDs und Counts.
• Logo: die Experience-Shell rendert die brand-konforme Tidal-Wortmarke — die SVG-Gradient-Kurve aus unserem Brand-Guide (#6ee7b7 → #10b981 → #064e3b) kombiniert mit der Century-Gothic-Wortmarke. Der klassische Shell behält seine PNG-Lockups unverändert.

Das Erstellen-Menü

Der grüne Erstellen-Button in der TopBar öffnet ein kontextuelles Menü mit den häufigsten Einsprungpunkten:

Eintrag	Wirkung
Asset anlegen	Öffnet den Einbuch-Flow (/assets?create=1).
Ticket erstellen	Öffnet den Ticket-Erstellen-Dialog auf /tickets (ITSM-Lizenz erforderlich).
Prozess starten	Öffnet den Movement-Assistenten auf /movements.
Benutzer einladen	Öffnet den Einladungs-Dialog auf /users.

Einträge sind berechtigungs-gesteuert — es erscheinen nur Aktionen, die der/die Nutzer:in tatsächlich ausführen darf.

Produkt- ↔ Admin-Kontext

Das Zahnrad-Icon in der TopBar (nur sichtbar für Nutzer mit der admin-Berechtigung) schaltet die Shell zwischen zwei Kontexten um:

• Produkt-Kontext — die Arbeitsansicht: Dashboard, Assets, Prozesse, Movements, Tickets, Katalog, Standorte, Favoriten.
• Admin-Kontext — die Tenant-Administrations-Ansicht: Allgemein, Branding, Module, Benutzer & Rollen, Standorte, Billing, Integrationen, API & Webhooks.

Die Auswahl wird in deiner Browser-Sitzung gespeichert. Ein Akzent-Streifen unter der TopBar sowie ein Pill-Badge im Breadcrumb-Bereich machen den aktuellen Kontext unmissverständlich.

App Shelf (Ökosystem-Launcher)

Der 9-Dot-Button ganz links in der TopBar öffnet den App Shelf. Die Einträge sind in drei Gruppen gegliedert:

• Arbeitsbereich — Kern-Produkt-Module. Einträge, die eine Plan-Feature-Flag voraussetzen (z. B. Prozesse / Movements benötigen processes), erscheinen disabled mit Tooltip-Hinweis, falls dein Plan das Feature nicht beinhaltet.
• Add-ons — ITSM-Tickets und das Self-Service-Desk. Disabled mit Tooltip, wenn die ITSM-Add-on-Lizenz nicht aktiv ist oder die jeweilige Feature-Flag ausgeschaltet ist.
• Ökosystem — externe Tools (Dokumentation, Developer-Portal, das HGE Uslimato Plattform-Team). das HGE Uslimato Plattform-Team ist nur für Nutzer:innen mit dem is_super_admin-Claim sichtbar. Externe Einträge öffnen in einem neuen Tab.

Der Launcher lädt seinen Lizenz-Kontext beim ersten Öffnen (kein zusätzlicher Request pro Seitenaufruf). Ist der Lizenz-Endpunkt nicht erreichbar, werden alle Einträge als "enabled" gerendert (Fail-Open-Fallback) — die tatsächliche Durchsetzung bleibt an den Backend-Routen.

Prozess-Editor — Schritt-Bibliothek

Die linke Toolbar des Prozess-Editors ist nun eine vollständige Schritt-Bibliothek (n8n-style). Jeder Schritt-Typ erscheint als beschriftete Karte mit Icon-Chip und Such-Filter. Redakteur:innen können:

• Eine Karte anklicken, um den Schritt ans Ende des Flows zu hängen (tastaturfreundlich).
• Eine Karte auf die Leinwand ziehen (Drag-Drop), um sie irgendwo einzufügen (natives HTML5-DnD, keine Drittbibliothek).
• Per Suche nach Label (DE/EN) oder interner Step-Type-Key filtern.
• Karten sind gruppiert: Eingaben, Bestätigungen, Identität.

Das zugrundeliegende Prozess-Schema bleibt unverändert — nur die Oberfläche des Editors wurde überarbeitet. Read-only-Ansichten blenden die Bibliothek weiterhin aus.

Tenant-Branding

Admins können Akzentfarbe und Wordmark-Text ihres Tenants über /branding anpassen:

• Die Akzent-Override wird automatisch auf die gesamte App angewendet — beide Shells (klassisch + Experience) übernehmen das automatisch.
• Die Wordmark-Override ersetzt den „uslimato"-Text im Tidal-Lockup app-weit. Die Tidal-Gradient-Kurve bleibt unverändert (kein tenant-eigenes Logo in dieser Iteration).
• Beide Felder lassen sich einzeln zurücksetzen; ein leerer Akzent fällt auf Uslimato-Grün #03a900 zurück, ein leerer Wordmark-Text auf uslimato.

Alle Werte sind auf Mandantenebene isoliert — jeder Tenant sieht ausschließlich sein eigenes Branding.

Der Logo-Upload folgt in einem späteren Release.

Favoriten

Der Stern-Button an jedem Sidebar-Nav-Eintrag fügt diesen Bereich zur Favoriten-Shortcut-Gruppe oben in der Sidebar hinzu. Favoriten werden server-seitig gespeichert und sind auf Mandantenebene isoliert — jeder Tenant hat seine eigene Favoriten-Liste.

Offline- / First-Load-Verhalten: Die Liste wird zunächst lokal geladen und anschließend im Hintergrund mit dem Server abgeglichen. Ein Netzwerk- oder Permission-Fehler lässt die lokale Liste unangetastet — ein Pin geht nie durch eine instabile Verbindung verloren.

Benachrichtigungen

Das Glocken-Icon in der TopBar öffnet deinen persönlichen Notification-Feed. Jeder Eintrag wird in dem Moment erzeugt, in dem etwas mit dir oder einer deiner Entitäten passiert — es ist kein Lesen des Audit-Logs. Der Feed aktualisiert sich alle zwei Minuten automatisch, damit das TopBar-Badge immer den aktuellen Ungelesen-Zähler zeigt.

• Ein akzentfarbener Badge auf der Glocke zeigt den echten server-seitigen Ungelesen-Zähler.
• Beim Öffnen der Liste werden alle Benachrichtigungen automatisch als gelesen markiert — der Badge leert sich sichtbar. Ein Klick auf einen einzelnen Eintrag markiert diesen zusätzlich als gelesen.
• Ein Klick auf einen Eintrag navigiert zur betroffenen Entität (Asset, Ticket, Movement, Benutzer oder Prozess).
• Offline- oder Server-Aussetzer haben keinen Einfluss auf bereits gelesene Benachrichtigungen — der Gelesen-Status wird serverseitig gespeichert.

Auslöser (Trigger-Points)

In Phase 2 werden die Benachrichtigungen an die geschäftskritischen Ereignisse angebunden, damit der Feed echte Betriebsereignisse abbildet:

• Asset zugewiesen — wenn ein Asset erstellt oder einem anderen Benutzer zugewiesen wird, erhält der neue Zuweisungsempfänger eine Benachrichtigung.
• Bewegung abgeschlossen — wenn eine Bewegung abgeschlossen wird, wird der aktuelle Zuweisungsempfänger jedes betroffenen Assets benachrichtigt.
• Ticket zugewiesen — wenn ein Ticket erstellt oder einem anderen Benutzer zugewiesen wird, erhält der neue Zuweisungsempfänger eine Benachrichtigung (ITSM-Add-on erforderlich).
• Ticket-Status geändert — Statuswechsel benachrichtigen den aktuellen Zuweisungsempfänger (ITSM-Add-on erforderlich).

Selbstzuweisungen werden unterdrückt — wenn du dir selbst etwas zuweist, wird keine Benachrichtigung erzeugt. Alle Benachrichtigungen sind auf Mandantenebene isoliert — du siehst nur Benachrichtigungen aus deinem eigenen Tenant.

Command Palette

Mit Experience kommt eine Jira-ähnliche Command Palette dazu, geöffnet mit ⌘K / Strg + K. Sie gruppiert nach Navigieren (Seiten ansteuern) und Aktionen (Modi umschalten, Theme wechseln, Abmelden). Pfeiltasten zum Navigieren, Enter zum Ausführen.

Sobald mindestens zwei Zeichen eingegeben werden, sucht die Palette automatisch parallel nach Assets und Benutzern. Bis zu fünf passende Assets (primär: Asset-Name, sekundär: Asset-Tag und Typ) und vier passende Benutzer (primär: Anzeigename, sekundär: E-Mail) werden als wählbare Einträge unter eigenen Gruppen Assets und Benutzer angezeigt — die bestehenden Navigieren- / Aktionen-Einträge werden dabei auf den Substring-Treffer gefiltert. Ein Klick oder Enter navigiert zur Detailseite des Assets oder Benutzers. Die Suche ist auf Mandantenebene isoliert — es werden nur Treffer aus deinem eigenen Tenant angezeigt.

Was gleich bleibt

• Alle Berechtigungen und RBAC-Regeln sind unverändert.
• Alle Daten-Pfade (Assets, Tickets, Movements, Prozesse, Users) funktionieren identisch.
• Dark Mode und Light Mode funktionieren weiterhin — das neue Design passt sich beiden an.
• Das Backend bleibt unberührt — keine API-Änderungen.
• Die Tenant-Isolation und alle Sicherheits-Garantien sind unverändert.
• Keine Drittherstellermarken — die Tidal-Wortmarke ist die in-house SVG-Lockup aus unserem eigenen Brand-Guide.

Accessibility

• Der Modus-Toggle ist ein echtes <button> mit aria-pressed.
• Der Farbkontrast erfüllt WCAG AA in Light und Dark.
• Die Command Palette ist vollständig tastaturbedienbar.
• Touch-Targets bleiben auf Mobile ≥ 44 × 44 px.

Roadmap

Die Experience wird in Wellen ausgerollt. Das Design-System-Fundament (Tokens, Primitives, Shell, Command Palette, Erstellen-Menü, Admin-Kontext-Toggle) ist ab sofort produktiv. Der bildschirmspezifische Feinschliff folgt in weiteren Releases:

• In-App Notification Center
• Favoriten & Saved Views
• App Shelf / Ökosystem-Launcher
• Tenant-Branding (Admin)
• Visueller Workflow Builder
• Self-Service-Portal „Mein Arbeitsplatz"
• Asset-Detail Full-Edit (Tab-basiert)
• Erweitertes User-Profil
• Lifecycle-Kanban-Board
• Modul-Management (Admin)

Falls dir eine visuelle Regression auffällt, wechsle jederzeit zurück ins klassische Design — deine Arbeit bleibt davon unberührt.