Aufgabenplaner

Ein modernes Task-Management-System gebaut mit Next.js 14, TypeScript, Prisma, PostgreSQL und NextAuth.js.

Features

• ✅ Rollenbasierte Zugriffskontrolle: BEARBEITER, PFLEGER, VORGESETZTER, ADMIN
• ✅ Task-Management: Erstellen, Bearbeiten, Löschen von Aufgaben
• ✅ Kommentare: Kommunikation zu Aufgaben
• ✅ Datei-Uploads: Anhänge zu Aufgaben (PDF, JPG, PNG, DOCX, XLSX)
• ✅ Kalender-Ansicht: Visualisierung der Aufgaben mit react-big-calendar
• ✅ Benutzerverwaltung: Verwaltung von Benutzern (nur VORGESETZTER & ADMIN)
• ✅ Dark/Light Mode: Theme-Unterstützung
• ✅ Responsive Design: Desktop & Mobile optimiert
• ✅ shadcn/ui Components: Moderne UI-Komponenten

Tech Stack

• Framework: Next.js 14 (App Router)
• Sprache: TypeScript
• Datenbank: PostgreSQL
• ORM: Prisma
• Authentifizierung: NextAuth.js
• UI: shadcn/ui + Tailwind CSS
• Animationen: Framer Motion
• Formulare: React Hook Form + Zod
• State Management: TanStack Query
• Kalender: react-big-calendar

Voraussetzungen

• Node.js 20 oder höher
• PostgreSQL 15 oder höher (oder Docker)
• npm oder yarn

Lokale Entwicklung

1. Repository klonen und Dependencies installieren

# Dependencies installieren
npm install

2. Environment Variables einrichten

Erstelle eine .env Datei im Root-Verzeichnis:

DATABASE_URL="postgresql://user:password@localhost:5432/aufgabenplaner_db"
NEXTAUTH_SECRET="dein-geheimer-schluessel-hier"
NEXTAUTH_URL="http://localhost:3000"

Generiere NEXTAUTH_SECRET:

openssl rand -base64 32

3. Datenbank Setup

# Prisma Client generieren
npx prisma generate

# Datenbank-Migrationen ausführen
npx prisma migrate dev

# Datenbank mit Beispieldaten füllen
npx prisma db seed

4. Development Server starten

npm run dev

Die Anwendung läuft nun auf http://localhost:3000

Standard-Zugangsdaten

Nach dem Seeding ist folgender Admin-Account verfügbar:

• Email: admin@taskmanager.de
• Passwort: admin123

⚠️ Wichtig: Ändern Sie diese Zugangsdaten in Production!

Production Deployment mit Docker

1. Environment Variables vorbereiten

# Template kopieren
cp .env.production.example .env.production

# .env.production bearbeiten und folgende Werte anpassen:
# - DB_PASSWORD: Sicheres Passwort für PostgreSQL
# - NEXTAUTH_SECRET: Generieren mit openssl rand -base64 32
# - NEXTAUTH_URL: Deine Production URL (z.B. https://aufgabenplaner.example.com)

2. Container bauen und starten

# Container im Hintergrund starten
docker-compose up -d

# Logs anschauen
docker-compose logs -f app

3. Datenbank initialisieren

# Migrations ausführen
docker-compose exec app npx prisma migrate deploy

# Datenbank seeden (erstellt Admin-User)
docker-compose exec app npx prisma db seed

Die Anwendung läuft nun auf http://localhost:3000

Container-Management

# Container stoppen
docker-compose down

# Container stoppen und Volumes löschen (⚠️ löscht alle Daten!)
docker-compose down -v

# Container neu bauen
docker-compose build --no-cache

# Logs anschauen
docker-compose logs -f app
docker-compose logs -f db

# Shell im Container öffnen
docker-compose exec app sh

Prisma Studio

Prisma Studio ist ein visuelles Tool zur Verwaltung der Datenbank:

# Lokal
npx prisma studio

# In Docker
docker-compose exec app npx prisma studio

Studio läuft auf http://localhost:5555

Datenbank-Migrations

Neue Migration erstellen

# Lokal
npx prisma migrate dev --name migration_name

# In Docker (nicht empfohlen, besser lokal entwickeln)
docker-compose exec app npx prisma migrate dev --name migration_name

Migrations in Production anwenden

docker-compose exec app npx prisma migrate deploy

Projekt-Struktur

src/
├── app/                      # Next.js App Router
│   ├── (auth)/              # Auth-Gruppe (Login)
│   ├── (dashboard)/         # Dashboard-Gruppe (protected)
│   │   ├── page.tsx        # Dashboard Startseite
│   │   ├── tasks/          # Aufgaben-Seiten
│   │   ├── calendar/       # Kalender-Seite
│   │   └── users/          # Benutzerverwaltung
│   └── api/                # API Routes
│       ├── auth/           # NextAuth API
│       ├── tasks/          # Task CRUD
│       └── users/          # User CRUD
├── components/             # React Komponenten
│   ├── calendar/          # Kalender-Komponenten
│   ├── layout/            # Layout-Komponenten
│   ├── shared/            # Gemeinsame Komponenten
│   ├── tasks/             # Task-Komponenten
│   ├── ui/                # shadcn/ui Komponenten
│   └── users/             # User-Komponenten
├── hooks/                 # Custom React Hooks
├── lib/                   # Utility-Funktionen
│   ├── auth.ts           # NextAuth Konfiguration
│   ├── permissions.ts    # Permission-System
│   ├── prisma.ts         # Prisma Client
│   └── validations/      # Zod Schemas
├── types/                # TypeScript Types
└── middleware.ts         # Next.js Middleware (Auth & Permissions)

prisma/
├── schema.prisma         # Datenbank-Schema
└── seed.ts              # Seed-Daten

Berechtigungssystem

Rollen

1. BEARBEITER: Kann nur eigene zugewiesene Aufgaben sehen und Status ändern
2. PFLEGER: Kann alle Aufgaben sehen, erstellen, bearbeiten und löschen
3. VORGESETZTER: Wie PFLEGER + Benutzerverwaltung
4. ADMIN: Volle Berechtigung + Benutzer löschen

Benutzerrollen im Detail

Bearbeiter

• Kann nur zugewiesene Aufgaben sehen (keine Übersicht aller Aufgaben)
• Kann Status eigener Aufgaben ändern (UNERLEDIGT → IN_BEARBEITUNG → ERLEDIGT)
• Kann Kommentare zu eigenen Aufgaben schreiben
• Kann Dateien zu eigenen Aufgaben hochladen
• Kein Zugriff auf:
  • Aufgaben erstellen
  • Aufgaben bearbeiten (außer Status)
  • Aufgaben löschen
  • Benutzerverwaltung

Pfleger

• Kann alle Aufgaben sehen (Dashboard-Übersicht)
• Kann Aufgaben erstellen und allen Benutzern zuweisen
• Kann Aufgaben bearbeiten (Ort, Beschreibung, Frist, Zuständigkeit, Status)
• Kann Aufgaben löschen
• Kann Kommentare schreiben
• Kann Dateien hochladen
• Kein Zugriff auf:
  • Benutzerverwaltung

Vorgesetzter

• Alle Rechte von Pfleger
• Kann Benutzerverwaltung aufrufen
• Kann neue Benutzer anlegen
• Kann Benutzer bearbeiten (Name, Email, Passwort, Rolle)
• Kein Zugriff auf:
  • Benutzer löschen

Admin

• Alle Rechte von Vorgesetzter
• Kann Benutzer löschen
• Hat volle System-Rechte

Berechtigungen

Aktion	BEARBEITER	PFLEGER	VORGESETZTER	ADMIN
Eigene Tasks sehen	✅	✅	✅	✅
Alle Tasks sehen	❌	✅	✅	✅
Task erstellen	❌	✅	✅	✅
Task bearbeiten	❌	✅	✅	✅
Task-Status ändern	✅	✅	✅	✅
Task löschen	❌	✅	✅	✅
Kommentare hinzufügen	✅	✅	✅	✅
Dateien hochladen	✅	✅	✅	✅
Benutzer verwalten	❌	❌	✅	✅
Benutzer löschen	❌	❌	❌	✅

Sicherheit

• ✅ Passwörter werden mit bcrypt gehashed (12 Rounds)
• ✅ JWT-basierte Session mit NextAuth.js
• ✅ CSRF-Schutz durch NextAuth.js
• ✅ Role-basierte Zugriffskontrolle auf API- und UI-Ebene
• ✅ Input-Validierung mit Zod
• ✅ SQL-Injection-Schutz durch Prisma
• ✅ XSS-Schutz durch React
• ✅ File-Upload-Validierung (Dateityp & Größe)

Performance-Optimierungen

• ✅ Server-Side Rendering (SSR)
• ✅ Static Site Generation (SSG) wo möglich
• ✅ Optimistic Updates mit TanStack Query
• ✅ Image Optimization mit next/image
• ✅ Code Splitting
• ✅ Database Indexing (Prisma)
• ✅ Standalone Output für Docker (minimale Image-Größe)

Error Handling & Loading States

Error Boundaries

Die Anwendung verwendet Next.js Error Boundaries für robuste Fehlerbehandlung:

• Global Error Boundary (app/error.tsx): Fängt unerwartete Fehler auf
• 404 Page (app/not-found.tsx): Zeigt freundliche Fehlerseite für nicht gefundene Routen
• Toast Notifications: Benutzerfreundliche Fehler- und Erfolgsmeldungen mit sonner

Loading States

Skeleton Components sorgen für bessere UX während Ladezeiten:

• Global Loading (app/loading.tsx): Layout-Skeleton mit Header, Sidebar, Content
• Task List Loading (app/(dashboard)/tasks/loading.tsx): TaskListSkeleton
• Task Detail Loading (app/(dashboard)/tasks/[id]/loading.tsx): TaskDetailSkeleton
• Calendar Loading (app/(dashboard)/calendar/loading.tsx): CalendarSkeleton

File Upload Validation

• Max Dateigröße: 10MB
• Erlaubte Typen: PDF, JPG, PNG, DOCX, XLSX
• Filename Sanitization: Entfernt gefährliche Zeichen
• Client & Server Validierung: Doppelte Absicherung

Testing Checklist

Authentifizierung

• Login funktioniert mit korrekten Credentials
• Login schlägt fehl mit falschen Credentials
• Logout funktioniert und leitet zu Login weiter
• Session bleibt erhalten beim Reload
• Nicht-authentifizierte Benutzer werden zu /login weitergeleitet

Rollenbasierte Berechtigungen

• Bearbeiter sieht nur zugewiesene Aufgaben
• Bearbeiter kann nur Status ändern (keine vollständige Bearbeitung)
• Pfleger sieht alle Aufgaben
• Pfleger kann Aufgaben erstellen, bearbeiten, löschen
• Vorgesetzter hat Zugriff auf Benutzerverwaltung
• Vorgesetzter kann Benutzer erstellen und bearbeiten (nicht löschen)
• Admin kann Benutzer löschen
• Middleware blockiert unautorisierte Zugriffe auf /users

Task Management

• Erstellen: Neue Tasks können erstellt werden (Pfleger+)
• Ansehen: Tasks werden korrekt angezeigt
• Bearbeiten: Task-Details können geändert werden (Pfleger+)
• Status ändern: Status kann geändert werden (alle Rollen)
• Löschen: Tasks können gelöscht werden (Pfleger+)
• Überfällige Tasks: Werden rot markiert bei überschrittener Frist

Kommentare

• Kommentare können hinzugefügt werden
• Kommentare werden mit Avatar und Timestamp angezeigt
• Relative Zeitangaben (z.B. "vor 3 Stunden") funktionieren

File Upload

• Dateien können hochgeladen werden
• Validierung funktioniert (Dateityp, Größe)
• Dateien werden korrekt angezeigt
• Download-Links funktionieren
• Fehlermeldungen bei ungültigen Dateien

Kalender

• Tasks werden im Kalender angezeigt
• Status-Farben sind korrekt (Rot/Gelb/Grün)
• Filter nach Status funktioniert
• Filter nach Zuständigkeit funktioniert
• Click auf Event öffnet Task-Detail-Dialog
• Navigation zur Task-Detailseite funktioniert

Benutzerverwaltung

• Benutzerliste wird angezeigt (nur für Vorgesetzte/Admins)
• Neue Benutzer können erstellt werden
• Benutzer können bearbeitet werden
• Benutzer können gelöscht werden (nur Admin)
• E-Mail-Duplikate werden verhindert
• Passwort wird korrekt gehashed

Responsive Design

• Desktop: Sidebar links, Content rechts
• Mobile: Sheet Sidebar, Hamburger Menu
• Alle Seiten sind mobile-optimiert
• Touch-Gesten funktionieren

Dark/Light Mode

• Theme-Toggle funktioniert
• Theme bleibt erhalten beim Reload
• Alle Komponenten sind in beiden Modi lesbar

Loading & Error States

• Loading Skeletons werden angezeigt
• Error Boundaries fangen Fehler ab
• 404 Page wird bei ungültigen Routes angezeigt
• Toast Notifications zeigen Fehler/Erfolg

Troubleshooting

Datenbank-Verbindungsfehler

# Prüfe ob PostgreSQL läuft
docker-compose ps

# Prüfe Logs
docker-compose logs db

# Restart Container
docker-compose restart db

Migration-Fehler

# Reset Datenbank (⚠️ löscht alle Daten!)
npx prisma migrate reset

# Oder in Docker:
docker-compose exec app npx prisma migrate reset

Port bereits belegt

# Port 3000 oder 5432 bereits belegt?
# Ändere die Ports in docker-compose.yml:
ports:
  - "3001:3000"  # Für App
  - "5433:5432"  # Für DB

Lizenz

Dieses Projekt ist für interne Nutzung bestimmt.

Support

Bei Fragen oder Problemen öffne ein Issue im Repository.