SWBS Admin-Dashboard

Das Admin-Dashboard ist eine Next.js 15 Client-Application die als CMS für alle Content-Typen der SWBS Platform dient. Technisch orientiert sich das Dashboard an modernen React-Patterns ohne den Overhead eines schwergewichtigen CMS.

State-Management: TanStack Query (React Query v5) als Server-State-Manager für alle API-Daten. Optimistische Updates für sofortiges UI-Feedback, automatische Cache-Invalidierung nach Mutationen, Pagination via Query-Keys.

Formulare: React Hook Form mit Zod-Validierung für alle Formulare. Multi-Tab-Formulare für komplexe Entities (z.B. Technologie-Formular mit DE, EN, Inhalt, SEO und Einstellungen-Tabs). Multi-Select mit Suche für Technologie-Verknüpfungen.

Komponenten: shadcn/ui als Basis-Komponentensystem (basierend auf Radix UI + Tailwind CSS). Eigene Media-Upload-Komponente für S3-Datei-Uploads. Tabellen mit Server-Side Pagination, Suche (300ms Debounce), Kategorie-Filter und A→Z/Z→A-Sortierung.

Technologie-Verwaltung: Vollständiger Editor für 200+ Technologien mit Use Cases, FAQs, Benefits, relatedTechnologies (Multi-Select-Suche über Slugs) und compatibility (Multi-Select über Namen). Alle Felder DE + EN zweisprachig.

Auth: JWT-basierte Authentication mit httpOnly-Cookie-Session. Protected Routes via Next.js Middleware. Refresh-Token-Rotation für lange Sessions.

Skalierbare Verwaltung von 200+ Technologien und 15+ Content-Typen in einem einzigen Dashboard ohne Performance-Probleme durch zu viele gleichzeitige API-Requests.

Server-Side Pagination auch im Admin: die Technologie-Tabelle lädt nur 25 Einträge pro Seite via useTechnologiesPage-Hook. Für Multi-Select-Felder (relatedTechnologies) wird useAllTechnologies genutzt das dynamisch alle Seiten basierend auf dem total-Feld lädt.