taskmanager/README.md

# 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

```bash
# Dependencies installieren
npm install
```

### 2. Environment Variables einrichten

Erstelle eine `.env` Datei im Root-Verzeichnis:

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

Generiere `NEXTAUTH_SECRET`:
```bash
openssl rand -base64 32
```

### 3. Datenbank Setup

```bash
# 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

```bash
npm run dev
```

Die Anwendung läuft nun auf [http://localhost:3000](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

```bash
# 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

```bash
# Container im Hintergrund starten
docker-compose up -d

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

### 3. Datenbank initialisieren

```bash
# 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](http://localhost:3000)

### Container-Management

```bash
# 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:

```bash
# Lokal
npx prisma studio

# In Docker
docker-compose exec app npx prisma studio
```

Studio läuft auf [http://localhost:5555](http://localhost:5555)

## Datenbank-Migrations

### Neue Migration erstellen

```bash
# 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

```bash
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

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

# Prüfe Logs
docker-compose logs db

# Restart Container
docker-compose restart db
```

### Migration-Fehler

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

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

### Port bereits belegt

```bash
# 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.