Cases
Aufgaben per Drag-and-drop auf Tage und Personen verteilen: ein individuelles Planungstool mit React und TYPO3 für eine mittelständische Full-Service-Agentur.
In einer Agentur mit vielen parallelen Kundenprojekten geht es bei der Planung vor allem um zwei Fragen: Wer übernimmt eine Aufgabe und wann hat diese Person dafür noch Kapazität? Für eine mittelständische Full-Service-Agentur habe ich dafür ein webbasiertes Planungstool als Individualsoftware entwickelt.
Im Mittelpunkt steht ein horizontal scrollbarer Wochenkalender. Aufgaben werden als Karten dargestellt und lassen sich per Drag-and-drop zwischen Tagen, Personen und Jobs verschieben. Das Frontend ist als React-Anwendung umgesetzt, TYPO3 übernimmt im Hintergrund die Verwaltung und Bereitstellung der Daten.
Der Mitarbeiter-Kalender zeigt das Team, gruppiert nach Abteilungen. Die Spalten bilden die einzelnen Tage ab, bis zu 16 Wochen im Voraus. Für jede Person wird die geplante Arbeitszeit der verfügbaren Tageskapazität gegenübergestellt.
Ist jemand bereits vollständig verplant oder überbucht, wird das direkt in der Übersicht sichtbar.
Wer überbucht ist, sieht das rot.
Der Job-Kalender zeigt dieselben Aufgaben aus einer anderen Perspektive. Hier stehen nicht die Mitarbeitenden, sondern die aktiven Jobs im Mittelpunkt, gruppiert nach Kunden. Beide Ansichten greifen auf dieselben Aufgabenkarten zurück.
Auf jeder Karte stehen die wichtigsten Informationen zur Aufgabe: Titel, Job, zuständige Person, Aufwand und Priorität.
Wird eine Karte auf einen anderen Tag gezogen, ändert sich der geplante Termin. Wird sie in eine andere Zeile verschoben, kann damit gleichzeitig die zuständige Person oder der zugehörige Job geändert werden. Die Änderung wird im Hintergrund gespeichert und ist unmittelbar in beiden Kalenderansichten sichtbar.
Neben Aufgaben berücksichtigt die Planung auch Notizen und Abwesenheiten wie Urlaub oder Homeoffice. Abwesenheiten werden als Kapazitätsblocker berücksichtigt und reduzieren automatisch die verfügbare Zeit einer Person.
Das Planungstool selbst ist als React-Anwendung umgesetzt. TYPO3 übernimmt dabei keine Darstellung der Oberfläche, sondern stellt die benötigten Daten über eine REST-Schnittstelle bereit.
Über TYPO3 werden unter anderem Mitarbeitende, Kunden, Jobs und Feiertage verwaltet. Auch Anmeldung, Rollen und Berechtigungen laufen über das TYPO3-Backend. Dadurch konnten vorhandene Funktionen des CMS genutzt werden, anstatt Benutzer- und Rechteverwaltung für die Anwendung neu zu entwickeln.
Die React-Anwendung lädt die benötigten Daten und verarbeitet Filterungen und Ansichten direkt im Browser. Dadurch lassen sich Kalender und Wochen schnell wechseln, ohne für jede Aktion erneut Daten vom Server laden zu müssen.
Das Ergebnis ist eine Planung, die zwei Dinge miteinander verbindet: die verfügbare Kapazität des Teams und die Aufgaben der laufenden Kundenprojekte.
Durch die beiden Kalenderansichten kann die Agentur entweder von den Mitarbeitenden oder von den Jobs aus planen. Aufgaben lassen sich direkt verschieben, Kapazitäten werden dabei unmittelbar berücksichtigt und Änderungen stehen allen Ansichten ohne zusätzliche Pflege zur Verfügung.