Digitale Kran-Einsatzplanung

Herausforderung

Ein Windradhersteller koordinierte die Einsatzplanung seiner Kran-Teams über Excel-Tabellen. Installationen, Mobilisierungsphasen, Verzögerungen und Zeitpuffer wurden manuell verwaltet – bei wachsender Projektanzahl zunehmend fehleranfällig und unübersichtlich. Es fehlte eine zentrale, visuelle Oberfläche, die Abhängigkeiten sichtbar macht und als Grundlage für eine automatisierte Kostenoptimierung im Backend dient.

Ansatz

Die Lösung: ein webbasierter Scheduler auf Basis von Bryntum Scheduler – einer Enterprise-Timeline-Bibliothek für komplexe Gantt-artige Darstellungen. Das Frontend wurde mit Next.js 15 im App Router-Modus und React 19 umgesetzt. Bryntum als Client-only-Komponente wird dynamisch ohne SSR geladen. Für serverseitiges Daten-Caching kam TanStack React Query zum Einsatz, Lingui sorgt für durchgängige Zweisprachigkeit.

Meine Rolle

Ich habe das gesamte Frontend konzipiert und umgesetzt. Konkret:

Scheduler-Kern: Die zentrale Konfiguration definiert einen Wochen-/Monats-View-Preset mit deutschen Kalenderwochen, Custom-Event-Rendering nach Typ (Installation, Mobilisierung, Verzögerung, Puffer) und eine hierarchische Tree-Column für Krane mit eingebetteten Projekten.

Custom Event-Rendering: Im Renderer werden zusammengehörige Events visuell gruppiert – erste und letzte Events erhalten abgerundete Ecken, 1px-Lücken zwischen Events werden entfernt. Jeder Typ zeigt minimalen Text: „T" für Installation, „MB" für Mobilisierung, „D" für Verzögerung.

Interaktive Features: Das Kontextmenü erlaubt das Registrieren von Verzögerungen, Hinzufügen von Puffern und Löschen von Slots. Dabei werden alle nachfolgenden Events im selben Ressourcen-Strang automatisch um eine Woche verschoben – eine zentrale Planungslogik, die direkt im Frontend die Auswirkung von Änderungen sichtbar macht.

Eltern-Event-Berechnung: Eine Berechnungslogik ermittelt beim Laden der Daten automatisch die Zeitspanne jedes Krans aus den Zeitfenstern seiner Kind-Projekte und erzeugt ResourceTimeRanges, die auf der Elternzeile als Übersichtsbalken dargestellt werden.

Projekt-Info-Popup: Per Hover auf eine Ressource öffnet sich ein draggable Popup mit Projektmanager-Info und einer Kommentar-Sektion, die über React Query geladen wird.

Technische Highlights

Bryntum-Integration in Next.js 15: Bryntum Scheduler benötigt Browser-APIs und ist nicht SSR-kompatibel. Die Lösung: dynamischer Import via next/dynamic mit ssr: false, eingebettet in einen Wrapper, der die Scheduler-Instanz erst client-seitig rendert. Die Styles wurden über CSS-Variablen mit dem Tailwind-Farbsystem verbunden.

Event-Shifting-Logik: Beim Einfügen oder Löschen eines Events (Verzögerung/Puffer) werden alle chronologisch nachfolgenden Events im selben Ressourcen-Strang selektiert und um eine Woche verschoben. Das bildet die reale Planungslogik ab: eine Verzögerung betrifft alles Nachfolgende.

i18n mit Server/Client-Split: Die Lingui-Integration nutzt serverseitige Locale-Erkennung per Accept-Language-Header in der Next.js-Middleware, statische Routen-Generierung pro Sprache und client-seitige Übersetzungen via <Trans>-Makros.

Ergebnis

Das Frontend bildet die gesamte Kran-Einsatzplanung in einer einzigen Timeline-Ansicht ab. Die hierarchische Baumstruktur macht Zuordnungen zwischen Kranen und Projekten auf einen Blick sichtbar. Durch die klare REST-API-Anbindung dient die Oberfläche als Eingabeschicht für die Backend-seitige Optimierung, die automatisiert Kosten über alle Projekte hinweg minimiert. Die Zweisprachigkeit ermöglicht den Einsatz in internationalen Teams.