Equipment Management Tool

Entwicklung einer internen Webanwendung zur zentralen Verwaltung, Verfügbarkeitsprüfung und Buchung von Medientechnik.
- Oktober 2026
- Web & Digital
- Konzeption, UX/UI Design, Full-Stack-Entwicklung und Deployment
- TBF + Partner AG
- Next.js, React, Tailwind CSS, shadcn/ui, Prisma, MariaDB, Auth.js, Microsoft Entra ID, Vitest, Docker Swarm, GitLab CI/CD
Medientechnik zentral verwalten und buchen
Bei TBF + Partner wird unterschiedliche Medientechnik von mehreren Mitarbeitenden und Projekten genutzt. Damit Geräte, Verfügbarkeiten und Buchungen nicht an verschiedenen Orten gepflegt werden müssen, habe ich ein internes Equipment-Management-Tool entwickelt.
Die Anwendung bildet den gesamten Ablauf in einer zentralen Oberfläche ab:
Equipment finden → Informationen lesen → Verfügbarkeit prüfen → buchen
Mitarbeitende sehen, welche Geräte vorhanden sind, wo sie sich befinden und ob sie im gewünschten Zeitraum verfügbar sind. Die Materialverwaltung kann gleichzeitig das Inventar pflegen, Buchungen verwalten und auf gemeldete Probleme reagieren.
Meine Rolle
Ich begleitete das Projekt von der Konzeption bis zum produktiven Betrieb.
Zu meinen Aufgaben gehörten:
- Anforderungen und Benutzerabläufe strukturieren
- Informationsarchitektur und Bedienkonzept entwickeln
- Responsive Benutzeroberfläche gestalten
- Frontend und serverseitige Logik umsetzen
- Datenbank und Buchungsmodell entwickeln
- Microsoft-Login und Rollenverwaltung integrieren
- Tests für kritische Abläufe schreiben
- Automatisiertes Deployment und Backups einrichten
- Anwendung für den internen Betrieb dokumentieren
Dadurch entstand nicht nur eine Benutzeroberfläche, sondern eine vollständige Webanwendung mit Authentifizierung, Datenbank, Rechteverwaltung und eigener Betriebsumgebung.
Equipment einfach finden
Das Inventar bildet den zentralen Einstiegspunkt der Anwendung. Mitarbeitende können die vorhandene Medientechnik durchsuchen und nach Kategorie, Standort oder Verfügbarkeit filtern.
Neben allgemeinen Equipment-Einträgen werden auch die einzelnen Geräte erfasst. Jedes Gerät besitzt eine feste Nummer, optional eine Seriennummer und einen eigenen Zustand.
Mögliche Zustände sind unter anderem:
- Einsatzbereit
- In Reparatur
- Defekt
- Vermisst
- Verloren
- End of Life
- Nicht buchbar
Dadurch ist nicht nur sichtbar, welches Equipment grundsätzlich vorhanden ist, sondern auch, welche konkreten Geräte tatsächlich eingesetzt werden können.
Verfügbarkeit verständlich darstellen
Auf der Detailseite eines Equipments finden Mitarbeitende alle relevanten Informationen an einem Ort:
- Beschreibung und Verwendung
- Nutzungshinweise
- Standort und Wegbeschreibung
- Anzahl verfügbarer Geräte
- Aktuelle Belegung
- Nächste freie Zeiträume
- Zustand der einzelnen Geräte
Die Verfügbarkeit kann für ganze Tage oder für genaue Uhrzeiten geprüft werden. Bei zeitgebundenen Buchungen arbeitet das System mit 30-Minuten-Schritten.
Nicht einsatzbereite Geräte werden automatisch aus der verfügbaren Anzahl ausgeschlossen.
Mehrere Geräte gemeinsam buchen
Das Buchungsformular unterstützt sowohl einzelne Geräte als auch umfangreichere Reservierungen.
Mitarbeitende können:
- Mehrere Exemplare desselben Equipments buchen
- Verschiedene Equipments in einem Vorgang kombinieren
- Einen gemeinsamen Zeitraum und ein gemeinsames Projekt angeben
- Ganztägige oder zeitlich begrenzte Buchungen erstellen
- Weitere Geräte nachträglich für denselben Zeitraum ergänzen
Vor dem Abschluss zeigt die Anwendung eine Zusammenfassung. Das System weist anschliessend automatisch passende freie Einzelgeräte zu.
Alle Geräte eines Buchungsvorgangs werden gemeinsam geprüft. Ist eines der gewünschten Equipments nicht ausreichend verfügbar, wird keine unvollständige Teilbuchung erstellt.
Buchungen im Blick behalten
Im Bereich «Meine Buchungen» sehen Mitarbeitende ihre aktiven, kommenden, vergangenen und stornierten Reservierungen.
Buchungen können abhängig vom Status:
- Bearbeitet
- Storniert
- Wiederhergestellt
- Gelöscht
- Um weitere Geräte ergänzt werden
Mehrere gemeinsam reservierte Geräte erscheinen als zusammengehöriger Eintrag. Für jede Buchung kann ausserdem ein gemeinsamer Kalendereintrag für Outlook, Apple Kalender oder Google Kalender heruntergeladen werden.
Probleme direkt melden
Defekte Geräte oder fehlendes Zubehör können direkt auf der jeweiligen Equipment-Seite gemeldet werden.
Offene Meldungen sind für andere Mitarbeitende sichtbar. So wird verhindert, dass ein bekanntes Problem mehrfach entdeckt oder ein nicht vollständiges Gerät ohne Hinweis weitergegeben wird.
Die Materialverwaltung kann Meldungen prüfen, mit einer Notiz versehen und als erledigt markieren.
Verwaltung und Rollen
Die Anwendung unterscheidet zwischen drei Rollen:
- Mitarbeitende: Equipment suchen, buchen und eigene Buchungen verwalten
- Materialverwaltung: Inventar, Buchungen, Meldungen, Kategorien und Standorte pflegen
- Admin: Zusätzlich Benutzer, Rollen, Sperren und das Änderungsprotokoll verwalten
Administratoren und die Materialverwaltung können zwischen der Verwaltungs- und Mitarbeiteransicht wechseln. Dadurch lässt sich jederzeit kontrollieren, wie die Anwendung für reguläre Nutzerinnen und Nutzer aussieht.
Die Berechtigungen werden nicht nur in der Navigation, sondern auch serverseitig geprüft.
Werkzeug für die Materialverwaltung
Das Verwaltungs-Dashboard bündelt die wichtigsten Informationen für den täglichen Betrieb.
Es zeigt unter anderem:
- Aktuelle Kennzahlen
- Heute abzuholende Geräte
- Heute zurückzugebende Geräte
- Offene Problemmeldungen
- Unvollständige Equipment-Einträge
Die Materialverwaltung kann Equipment hinzufügen, bearbeiten oder als Vorlage duplizieren. Kategorien und Standorte lassen sich direkt in der Anwendung pflegen.
Für die Weiterverarbeitung steht ein CSV-Export zur Verfügung, der die aktuelle Suche und die gesetzten Filter berücksichtigt.
Sichere Anmeldung
Die Anmeldung erfolgt über das bestehende Microsoft-Konto von TBF + Partner. Dafür ist die Anwendung mit Microsoft Entra ID verbunden.
Beim ersten Login wird automatisch ein Benutzerkonto innerhalb der Anwendung angelegt. Rollen und Berechtigungen können anschliessend im Administrationsbereich verwaltet werden.
Ein Änderungsprotokoll dokumentiert wichtige Aktionen wie Anmeldungen, Buchungen, Rollenänderungen, Sperren und Anpassungen am Inventar.
Gestaltung und Barrierefreiheit
Die Benutzeroberfläche orientiert sich am Corporate Design von TBF + Partner. Farben, Typografie und Abstände werden zentral verwaltet und konsistent in der gesamten Anwendung eingesetzt.
Benutzerinnen und Benutzer können zwischen mehreren Darstellungen wählen:
- Hell
- Dunkel
- Hoher Kontrast
Für Administratoren existiert zusätzlich das experimentelle Theme «Vice City». Die gewählte Darstellung wird lokal im Browser gespeichert.
Technische Umsetzung
Die Anwendung wurde mit Next.js und React entwickelt. Server Components und Server Actions übernehmen sowohl die Darstellung als auch die serverseitige Anwendungslogik.
Zum technischen Aufbau gehören:
- Next.js 16 für Frontend und Serverlogik
- React 19 für die Benutzeroberfläche
- Tailwind CSS 4 und shadcn/ui für das UI-System
- Prisma ORM für den Datenzugriff
- MariaDB für Inventar, Buchungen und Benutzer
- Auth.js und Microsoft Entra ID für die Anmeldung
- Vitest für automatisierte Tests
- Docker Swarm und Traefik für den Betrieb
- GitLab CI/CD und Portainer für automatische Deployments
Da Frontend und Serverlogik gemeinsam in Next.js umgesetzt sind, benötigt das Projekt kein separates Backend.
Zuverlässige Buchungslogik
Ein wichtiger Teil der Entwicklung war die zuverlässige Zuweisung einzelner Geräte.
Jede Reservierung belegt ein konkretes Gerät. Bei mehreren gleichzeitigen Anfragen verhindert eine transaktionsbasierte Prüfung, dass dasselbe Gerät doppelt vergeben wird.
Beim Bearbeiten, Stornieren oder Wiederherstellen einer Buchung wird die Verfügbarkeit erneut serverseitig geprüft. Nicht einsatzbereite Geräte werden dabei automatisch ausgeschlossen.
Qualität und Betrieb
Kritische Funktionen werden durch 171 automatisierte Tests abgedeckt.
Getestet werden unter anderem:
- Anmeldung und Berechtigungen
- Verfügbarkeitsberechnung
- Überschneidungen von Buchungen
- Mehrfachbuchungen
- Gerätezuweisung
- Kalenderexport
- CSV-Export
- Bild-Uploads
- Benutzer- und Rollenverwaltung
- Gerätezustände
- Themes und Kontrastdarstellung
Bei jedem Push prüft GitLab automatisch Codequalität, Typen und Tests. Änderungen auf dem Hauptbranch werden als Docker-Image gebaut und über Portainer auf dem Server aktualisiert.
Datenbank und hochgeladene Equipment-Bilder werden zusätzlich jede Nacht automatisch gesichert.
Ergebnis
Entstanden ist eine zentrale Anwendung, welche die Verwaltung und Ausleihe von Medientechnik nachvollziehbar abbildet.
Mitarbeitende können selbstständig prüfen, welche Geräte verfügbar sind, und ihre Buchungen verwalten. Gleichzeitig erhält die Materialverwaltung einen aktuellen Überblick über Inventar, Gerätezustände, Reservierungen und offene Probleme.

