more fancy excel export

.env.template

@@ -1,16 +1,29 @@
-# === SCHICHTPLANER DOCKER COMPOSE ENVIRONMENT VARIABLES ===
-# Diese Datei wird von docker-compose automatisch geladen
+# .env.template
+# ============================================
+# DOCKER COMPOSE ENVIRONMENT TEMPLATE
+# Copy this file to .env and adjust values
+# ============================================
 
-# Security
-JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
-NODE_ENV=${NODE_ENV:-production}
+# Application settings
+NODE_ENV=production
+JWT_SECRET=your-secret-key-please-change
+HOSTNAME=localhost
+
+# Security & Network
+TRUST_PROXY_ENABLED=false
+TRUSTED_PROXY_IPS=127.0.0.1,::1
+FORCE_HTTPS=false
 
 # Database
-DB_PATH=${DB_PATH:-/app/data/database.db}
+DATABASE_PATH=/app/data/schichtplaner.db
 
-# Server
-PORT=${PORT:-3002}
+# Optional features
+ENABLE_PRO=false
+DEBUG=false
 
-# App Configuration
-APP_TITLE="Shift Planning App"
-ENABLE_PRO=${ENABLE_PRO:-false}
+# Port configuration
+APP_PORT=3002
+
+# ============================================
+# END OF TEMPLATE
+# ============================================

.github/workflows/docker.yml

@@ -83,9 +83,13 @@ jobs:
         with:
           node-version: '20'
 
+      - name: Create package-lock.json
+        working-directory: .
+        run: npm i --package-lock-only
+
       - name: Install backend dependencies
         working-directory: ./backend
-        run: npm install
+        run: npm ci
 
       - name: Run TypeScript check
         working-directory: ./backend

.gitignore

@@ -57,6 +57,7 @@ yarn-error.log*
 # Build outputs
 dist/
 build/
+package-lock.json
 
 # Environment variables
 .env

Dockerfile

@@ -1,22 +1,17 @@
 # Single stage build for workspaces
-FROM node:20-bullseye AS builder
+FROM node:20-bookworm AS builder
 
 WORKDIR /app
 
-# Install Python + OR-Tools
-RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
-  && pip install --no-cache-dir ortools
-
-# Create symlink so python3 is callable as python
-RUN ln -sf /usr/bin/python3 /usr/bin/python
-
 # Copy root package files first
 COPY package*.json ./
 COPY tsconfig.base.json ./
 COPY ecosystem.config.cjs ./
 
 # Install root dependencies
-RUN npm install --only=production
+#RUN npm install --only=production
+RUN npm i --package-lock-only
+RUN npm ci
 
 # Copy workspace files
 COPY backend/ ./backend/
@@ -30,10 +25,7 @@ RUN npm install --workspace=frontend
 RUN npm run build --only=production --workspace=backend
 
 # Build frontend
-RUN npm run build --workspace=frontend
-
-# Verify Python and OR-Tools installation
-RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
+RUN npm run build --only=production --workspace=frontend
 
 # Production stage
 FROM node:20-bookworm
@@ -57,7 +49,20 @@ COPY --from=builder /app/frontend/dist/ ./frontend-build/
 COPY --from=builder /app/ecosystem.config.cjs ./
 
 COPY --from=builder /app/backend/src/database/ ./dist/database/
-COPY --from=builder /app/backend/src/database/ ./database/
+# should be obsolete with the line above
+#COPY --from=builder /app/backend/src/database/ ./database/
+
+COPY --from=builder /app/backend/src/python-scripts/ ./python-scripts/
+
+# Install Python + OR-Tools
+RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
+  && pip install --no-cache-dir --break-system-packages ortools
+
+# Create symlink so python3 is callable as python
+RUN ln -sf /usr/bin/python3 /usr/bin/python
+
+# Verify Python and OR-Tools installation
+RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
 
 # Copy init script and env template
 COPY docker-init.sh /usr/local/bin/

backend/package.json

@@ -4,7 +4,8 @@
   "type": "module",
   "scripts": {
     "dev": "npm run build && npx tsx src/server.ts",
-    "build": "tsc", 
+    "dev:single": "cross-env NODE_ENV=development TRUST_PROXY_ENABLED=false npx tsx src/server.ts",
+    "build": "tsc",
     "start": "node dist/server.js",
     "prestart": "npm run build",
     "test": "jest",
@@ -14,6 +15,8 @@
   },
   "dependencies": {
     "@types/bcrypt": "^6.0.0",
+    "@types/node": "24.9.2",
+    "vite": "7.1.12",
     "bcrypt": "^6.0.0",
     "bcryptjs": "^2.4.3",
     "express": "^4.18.2",
@@ -22,7 +25,10 @@
     "uuid": "^9.0.0",
     "express-rate-limit": "8.1.0",
     "helmet": "8.1.0",
-    "express-validator": "7.3.0"
+    "express-validator": "7.3.0",
+    "exceljs": "4.4.0",
+    "pdfkit": "0.12.3",
+    "@types/pdfkit": "^0.12.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",
@@ -32,6 +38,7 @@
     "@types/jest": "^29.5.0",
     "ts-node": "^10.9.0",
     "typescript": "^5.0.0",
-    "tsx": "^4.0.0"
+    "tsx": "^4.0.0",
+    "cross-env": "10.1.0"
   }
 }

backend/src/controllers/authController.ts

@@ -64,7 +64,7 @@ export const login = async (req: Request, res: Response) => {
       return res.status(400).json({ error: 'E-Mail und Passwort sind erforderlich' });
     }
 
-    // UPDATED: Get user from database with role from employee_roles table
+    // Get user from database with role from employee_roles table
     const user = await db.get<any>(
       `SELECT 
         e.id, e.email, e.password, e.firstname, e.lastname, 
@@ -155,7 +155,7 @@ export const getCurrentUser = async (req: Request, res: Response) => {
       return res.status(401).json({ error: 'Nicht authentifiziert' });
     }
 
-    // UPDATED: Get user with role from employee_roles table
+    // Get user with role from employee_roles table
     const user = await db.get<any>(
       `SELECT 
         e.id, e.email, e.firstname, e.lastname,

backend/src/controllers/employeeController.ts

@@ -18,17 +18,17 @@ function generateEmail(firstname: string, lastname: string): string {
 
   const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
   const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
-  
+
   return `${cleanFirstname}.${cleanLastname}@sp.de`;
 }
 
 export const getEmployees = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     console.log('🔍 Fetching employees - User:', req.user);
-    
+
     const { includeInactive } = req.query;
     const includeInactiveFlag = includeInactive === 'true';
-    
+
     let query = `
       SELECT 
         e.id, e.email, e.firstname, e.lastname, 
@@ -43,13 +43,13 @@ export const getEmployees = async (req: AuthRequest, res: Response): Promise<voi
       FROM employees e
       LEFT JOIN employee_roles er ON e.id = er.employee_id
     `;
-    
+
     if (!includeInactiveFlag) {
       query += ' WHERE e.is_active = 1';
     }
-    
+
     query += ' ORDER BY e.firstname, e.lastname';
-    
+
     const employees = await db.all<any>(query);
 
     // Format employees with proper field names and roles array
@@ -132,12 +132,12 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
       password: '***hidden***'
     });
 
-    const { 
-      password, 
-      firstname, 
-      lastname, 
+    const {
+      password,
+      firstname,
+      lastname,
       roles = ['user'],
-      employeeType, 
+      employeeType,
       contractType,
       canWorkAlone = false,
       isTrainee = false
@@ -146,21 +146,21 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
     // Validation
     if (!password || !firstname || !lastname || !employeeType) {
       console.log('❌ Validation failed: Missing required fields');
-      res.status(400).json({ 
-        error: 'Password, firstname, lastname und employeeType sind erforderlich' 
+      res.status(400).json({
+        error: 'Password, firstname, lastname und employeeType sind erforderlich'
       });
       return;
     }
 
     // ✅ ENHANCED: Validate employee type exists and get category info
-    const employeeTypeInfo = await db.get<{type: string, category: string, has_contract_type: number}>(
+    const employeeTypeInfo = await db.get<{ type: string, category: string, has_contract_type: number }>(
       'SELECT type, category, has_contract_type FROM employee_types WHERE type = ?',
       [employeeType]
     );
 
     if (!employeeTypeInfo) {
-      res.status(400).json({ 
-        error: `Ungültiger employeeType: ${employeeType}. Gültige Typen: manager, personell, apprentice, guest` 
+      res.status(400).json({
+        error: `Ungültiger employeeType: ${employeeType}. Gültige Typen: manager, personell, apprentice, guest`
       });
       return;
     }
@@ -169,22 +169,22 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
     if (employeeTypeInfo.has_contract_type === 1) {
       // Internal types require contract type
       if (!contractType) {
-        res.status(400).json({ 
-          error: `contractType ist erforderlich für employeeType: ${employeeType}` 
+        res.status(400).json({
+          error: `contractType ist erforderlich für employeeType: ${employeeType}`
         });
         return;
       }
       if (!['small', 'large', 'flexible'].includes(contractType)) {
-        res.status(400).json({ 
-          error: `Ungültiger contractType: ${contractType}. Gültige Werte: small, large, flexible` 
+        res.status(400).json({
+          error: `Ungültiger contractType: ${contractType}. Gültige Werte: small, large, flexible`
         });
         return;
       }
     } else {
       // External types (guest) should not have contract type
       if (contractType) {
-        res.status(400).json({ 
-          error: `contractType ist nicht erlaubt für employeeType: ${employeeType}` 
+        res.status(400).json({
+          error: `contractType ist nicht erlaubt für employeeType: ${employeeType}`
         });
         return;
       }
@@ -192,8 +192,8 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
 
     // ✅ ENHANCED: isTrainee validation - only applicable for personell type
     if (isTrainee && employeeType !== 'personell') {
-      res.status(400).json({ 
-        error: `isTrainee ist nur für employeeType 'personell' erlaubt` 
+      res.status(400).json({
+        error: `isTrainee ist nur für employeeType 'personell' erlaubt`
       });
       return;
     }
@@ -204,11 +204,11 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
 
     // Check if generated email already exists
     const existingUser = await db.get<any>('SELECT id FROM employees WHERE email = ? AND is_active = 1', [email]);
-    
+
     if (existingUser) {
       console.log('❌ Generated email already exists:', email);
-      res.status(409).json({ 
-        error: `Employee with email ${email} already exists. Please use different firstname/lastname.` 
+      res.status(409).json({
+        error: `Employee with email ${email} already exists. Please use different firstname/lastname.`
       });
       return;
     }
@@ -228,12 +228,12 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
           is_active, is_trainee
         ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
         [
-          employeeId, 
-          email, 
-          hashedPassword, 
-          firstname, 
-          lastname, 
-          employeeType, 
+          employeeId,
+          email,
+          hashedPassword,
+          firstname,
+          lastname,
+          employeeType,
           contractType, // Will be NULL for external types
           canWorkAlone ? 1 : 0,
           1,
@@ -302,9 +302,9 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
     const { id } = req.params;
     const { firstname, lastname, roles, isActive, employeeType, contractType, canWorkAlone, isTrainee } = req.body;
 
-    console.log('📝 Update Employee Request:', { 
-      id, firstname, lastname, roles, isActive, 
-      employeeType, contractType, canWorkAlone, isTrainee 
+    console.log('📝 Update Employee Request:', {
+      id, firstname, lastname, roles, isActive,
+      employeeType, contractType, canWorkAlone, isTrainee
     });
 
     // Check if employee exists and get current data
@@ -321,10 +321,10 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
         'SELECT role FROM employee_roles WHERE employee_id = ?',
         [currentUser.userId]
       );
-      
+
       const isCurrentlyAdmin = currentUserRoles.some(role => role.role === 'admin');
       const willBeAdmin = roles.includes('admin');
-      
+
       if (isCurrentlyAdmin && !willBeAdmin) {
         res.status(400).json({ error: 'You cannot remove your own admin role' });
         return;
@@ -372,8 +372,8 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
       );
 
       if (!validEmployeeType) {
-        res.status(400).json({ 
-          error: `Ungültiger employeeType: ${employeeType}` 
+        res.status(400).json({
+          error: `Ungültiger employeeType: ${employeeType}`
         });
         return;
       }
@@ -385,16 +385,16 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
       const newFirstname = firstname || existingEmployee.firstname;
       const newLastname = lastname || existingEmployee.lastname;
       email = generateEmail(newFirstname, newLastname);
-      
+
       // Check if new email already exists (for another employee)
       const emailExists = await db.get<any>(
-        'SELECT id FROM employees WHERE email = ? AND id != ? AND is_active = 1', 
+        'SELECT id FROM employees WHERE email = ? AND id != ? AND is_active = 1',
         [email, id]
       );
-      
+
       if (emailExists) {
-        res.status(409).json({ 
-          error: `Cannot update name - email ${email} already exists for another employee` 
+        res.status(409).json({
+          error: `Cannot update name - email ${email} already exists for another employee`
         });
         return;
       }
@@ -423,7 +423,7 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
       if (roles) {
         // Delete existing roles
         await db.run('DELETE FROM employee_roles WHERE employee_id = ?', [id]);
-        
+
         // Insert new roles
         for (const role of roles) {
           await db.run(
@@ -541,18 +541,18 @@ export const deleteEmployee = async (req: AuthRequest, res: Response): Promise<v
     try {
       // 1. Remove availabilities
       await db.run('DELETE FROM employee_availability WHERE employee_id = ?', [id]);
-      
+
       // 2. Remove from assigned_shifts (JSON field cleanup)
       interface AssignedShift {
         id: string;
         assigned_employees: string;
       }
-      
+
       const assignedShifts = await db.all<AssignedShift>(
-        'SELECT id, assigned_employees FROM scheduled_shifts WHERE json_extract(assigned_employees, "$") LIKE ?', 
+        'SELECT id, assigned_employees FROM scheduled_shifts WHERE json_extract(assigned_employees, "$") LIKE ?',
         [`%${id}%`]
       );
-      
+
       for (const shift of assignedShifts) {
         try {
           const employeesArray: string[] = JSON.parse(shift.assigned_employees || '[]');
@@ -581,7 +581,7 @@ export const deleteEmployee = async (req: AuthRequest, res: Response): Promise<v
 
       await db.run('COMMIT');
       console.log('✅ Successfully deleted employee:', existingEmployee.email);
-      
+
       res.status(204).send();
 
     } catch (error) {
@@ -655,23 +655,23 @@ export const updateAvailabilities = async (req: AuthRequest, res: Response): Pro
     }
 
     // Validate contract type requirements
-    const availableCount = availabilities.filter((avail: any) => 
+    const availableCount = availabilities.filter((avail: any) =>
       avail.preferenceLevel === 1 || avail.preferenceLevel === 2
     ).length;
 
     const contractType = existingEmployee.contract_type;
-    
+
     // Apply contract type minimum requirements
     if (contractType === 'small' && availableCount < 2) {
-      res.status(400).json({ 
-        error: 'Employees with small contract must have at least 2 available shifts' 
+      res.status(400).json({
+        error: 'Employees with small contract must have at least 2 available shifts'
       });
       return;
     }
 
     if (contractType === 'large' && availableCount < 3) {
-      res.status(400).json({ 
-        error: 'Employees with large contract must have at least 3 available shifts' 
+      res.status(400).json({
+        error: 'Employees with large contract must have at least 3 available shifts'
       });
       return;
     }
@@ -742,12 +742,12 @@ export const changePassword = async (req: AuthRequest, res: Response): Promise<v
 
     // Get the current user from the auth middleware
     const currentUser = (req as AuthRequest).user;
-    
+
     // Check if user is changing their own password or is an admin
     if (currentUser?.userId !== id && currentUser?.role !== 'admin') {
       res.status(403).json({ error: 'You can only change your own password' });
       return;
-    } 
+    }
 
     // Check if employee exists and get password
     const employee = await db.get<{ password: string }>('SELECT password FROM employees WHERE id = ?', [id]);
@@ -756,8 +756,8 @@ export const changePassword = async (req: AuthRequest, res: Response): Promise<v
       return;
     }
 
-    // For non-admin users, verify current password
-    if (currentUser?.role !== 'admin') {
+    // Verify current password
+    if (employee) {
       const isValidPassword = await bcrypt.compare(currentPassword, employee.password);
       if (!isValidPassword) {
         res.status(400).json({ error: 'Current password is incorrect' });
@@ -766,8 +766,8 @@ export const changePassword = async (req: AuthRequest, res: Response): Promise<v
     }
 
     // Validate new password
-    if (!newPassword || newPassword.length < 6) {
-      res.status(400).json({ error: 'New password must be at least 6 characters long' });
+    if (!newPassword || newPassword.length < 8) {
+      res.status(400).json({ error: 'New password must be at least 8 characters long' });
       return;
     }
 
@@ -798,13 +798,13 @@ export const updateLastLogin = async (req: AuthRequest, res: Response): Promise<
     // Update last_login with current timestamp
     const currentTimestamp = new Date().toISOString();
     await db.run(
-      'UPDATE employees SET last_login = ? WHERE id = ?', 
+      'UPDATE employees SET last_login = ? WHERE id = ?',
       [currentTimestamp, id]
     );
 
     console.log(`✅ Last login updated for employee ${id}: ${currentTimestamp}`);
-    
-    res.json({ 
+
+    res.json({
       message: 'Last login updated successfully',
       lastLogin: currentTimestamp
     });
@@ -825,7 +825,7 @@ const checkAdminCount = async (employeeId: string, newRoles: string[]): Promise<
     );
 
     const currentAdminCount = adminCountResult?.count || 0;
-    
+
     // Check ALL current roles for the employee
     const currentEmployeeRoles = await db.all<{ role: string }>(
       `SELECT role FROM employee_roles WHERE employee_id = ?`,

backend/src/controllers/setupController.ts

@@ -16,7 +16,7 @@ function generateEmail(firstname: string, lastname: string): string {
 
   const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
   const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
-  
+
   return `${cleanFirstname}.${cleanLastname}@sp.de`;
 }
 
@@ -31,15 +31,15 @@ export const checkSetupStatus = async (req: Request, res: Response): Promise<voi
     );
 
     console.log('Admin exists check:', adminExists);
-    
+
     const needsSetup = !adminExists || adminExists['COUNT(*)'] === 0;
-    
+
     res.json({
       needsSetup: needsSetup
     });
   } catch (error) {
     console.error('Error checking setup status:', error);
-    res.status(500).json({ 
+    res.status(500).json({
       error: 'Internal server error during setup check'
     });
   }
@@ -75,8 +75,8 @@ export const setupAdmin = async (req: Request, res: Response): Promise<void> =>
     }
 
     // Password length validation
-    if (password.length < 6) {
-      res.status(400).json({ error: 'Das Passwort muss mindestens 6 Zeichen lang sein' });
+    if (password.length < 8) {
+      res.status(400).json({ error: 'Das Passwort muss mindestens 8 Zeichen lang sein' });
       return;
     }
 
@@ -125,15 +125,15 @@ export const setupAdmin = async (req: Request, res: Response): Promise<void> =>
     } catch (dbError) {
       await db.run('ROLLBACK');
       console.error('❌ Database error during admin creation:', dbError);
-      res.status(500).json({ 
+      res.status(500).json({
         error: 'Fehler beim Erstellen des Admin-Accounts'
       });
     }
   } catch (error) {
     console.error('❌ Error in setup:', error);
-    
+
     if (!res.headersSent) {
-      res.status(500).json({ 
+      res.status(500).json({
         error: 'Ein unerwarteter Fehler ist aufgetreten'
       });
     }

backend/src/controllers/shiftPlanController.ts

@@ -2,12 +2,14 @@
 import { Request, Response } from 'express';
 import { v4 as uuidv4 } from 'uuid';
 import { db } from '../services/databaseService.js';
-import { 
-  CreateShiftPlanRequest, 
+import {
+  CreateShiftPlanRequest,
   UpdateShiftPlanRequest,
 } from '../models/ShiftPlan.js';
 import { AuthRequest } from '../middleware/auth.js';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
+import ExcelJS from 'exceljs';
+import PDFDocument from 'pdfkit';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`
@@ -182,7 +184,7 @@ export const getShiftPlan = async (req: Request, res: Response): Promise<void> =
 export const createDefaultTemplate = async (userId: string): Promise<string> => {
   try {
     const planId = uuidv4();
-    
+
     await db.run('BEGIN TRANSACTION');
 
     try {
@@ -278,7 +280,7 @@ export const createShiftPlan = async (req: Request, res: Response): Promise<void
            VALUES (?, ?, ?, ?, ?, ?)`,
           [timeSlotId, planId, timeSlot.name, timeSlot.startTime, timeSlot.endTime, timeSlot.description || '']
         );
-        
+
         // Store the mapping if the timeSlot had a temporary ID
         if ((timeSlot as any).id) {
           timeSlotIdMap.set((timeSlot as any).id, timeSlotId);
@@ -289,12 +291,12 @@ export const createShiftPlan = async (req: Request, res: Response): Promise<void
       for (const shift of shifts) {
         const shiftId = uuidv4();
         let finalTimeSlotId = shift.timeSlotId;
-        
+
         // If timeSlotId exists in mapping, use the new ID
         if (timeSlotIdMap.has(shift.timeSlotId)) {
           finalTimeSlotId = timeSlotIdMap.get(shift.timeSlotId)!;
         }
-        
+
         await db.run(
           `INSERT INTO shifts (id, plan_id, day_of_week, time_slot_id, required_employees, color) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -368,7 +370,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
       // Insert time slots and create mapping
       for (const timeSlot of preset.timeSlots) {
         const timeSlotId = uuidv4();
-        
+
         await db.run(
           `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -381,7 +383,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
           timeSlotMap.set((timeSlot as any).timeSlotId, timeSlotId);
         }
         timeSlotMap.set(timeSlot.name, timeSlotId);
-        
+
         console.log(`✅ Created time slot: ${timeSlot.name} -> ${timeSlotId}`);
       }
 
@@ -391,14 +393,14 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
       let shiftCount = 0;
       for (const shift of preset.shifts) {
         const shiftId = uuidv4();
-        
+
         // Try to find the timeSlotId using different strategies
         let timeSlotId = timeSlotMap.get(shift.timeSlotId);
-        
+
         if (!timeSlotId) {
           // Fallback: try to find by name or other properties
           console.warn(`⚠️ Time slot not found by ID: ${shift.timeSlotId}, trying fallback...`);
-          
+
           // Look for time slot by name or other matching logic
           for (const [key, value] of timeSlotMap.entries()) {
             if (key.includes(shift.timeSlotId) || shift.timeSlotId.includes(key)) {
@@ -421,7 +423,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
            VALUES (?, ?, ?, ?, ?, ?)`,
           [shiftId, planId, shift.dayOfWeek, timeSlotId, shift.requiredEmployees, shift.color || '#3498db']
         );
-        
+
         shiftCount++;
         console.log(`✅ Created shift ${shiftCount}: day ${shift.dayOfWeek}, timeSlot ${timeSlotId}`);
       }
@@ -592,6 +594,26 @@ async function getShiftPlanById(planId: string): Promise<any> {
     `, [planId]);
   }
 
+  // Load employees without role column + join with employee_roles
+  const employees = await db.all<any>(`
+    SELECT 
+      e.id, 
+      e.firstname, 
+      e.lastname, 
+      e.email, 
+      e.employee_type,
+      e.contract_type,
+      e.can_work_alone,
+      e.is_trainee,
+      e.is_active as isActive,
+      GROUP_CONCAT(er.role) as roles
+    FROM employees e
+    LEFT JOIN employee_roles er ON e.id = er.employee_id
+    WHERE e.is_active = 1
+    GROUP BY e.id
+    ORDER BY e.firstname, e.lastname
+  `, []);
+
   return {
     ...plan,
     isTemplate: plan.is_template === 1,
@@ -629,15 +651,28 @@ async function getShiftPlanById(planId: string): Promise<any> {
       requiredEmployees: shift.required_employees,
       assignedEmployees: JSON.parse(shift.assigned_employees || '[]'),
       timeSlotName: shift.time_slot_name
+    })),
+    // Include employees with proper role handling
+    employees: employees.map(emp => ({
+      id: emp.id,
+      firstname: emp.firstname,
+      lastname: emp.lastname,
+      email: emp.email,
+      employeeType: emp.employee_type,
+      contractType: emp.contract_type,
+      canWorkAlone: emp.can_work_alone === 1,
+      isTrainee: emp.is_trainee === 1,
+      isActive: emp.isActive === 1,
+      roles: emp.roles ? emp.roles.split(',') : [] // Convert comma-separated roles to array
     }))
   };
 }
 
 // Helper function to generate scheduled shifts from template
-export const generateScheduledShifts = async(planId: string, startDate: string, endDate: string): Promise<void> => {
+export const generateScheduledShifts = async (planId: string, startDate: string, endDate: string): Promise<void> => {
   try {
     console.log(`🔄 Generating scheduled shifts for Plan ${planId} from ${startDate} to ${endDate}`);
-    
+
     // Get plan with shifts and time slots
     const plan = await getShiftPlanById(planId);
     if (!plan) {
@@ -661,7 +696,7 @@ export const generateScheduledShifts = async(planId: string, startDate: string,
 
       for (const shift of shiftsForDay) {
         const scheduledShiftId = uuidv4();
-        
+
         await db.run(
           `INSERT INTO scheduled_shifts (id, plan_id, date, time_slot_id, required_employees, assigned_employees) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -674,13 +709,13 @@ export const generateScheduledShifts = async(planId: string, startDate: string,
             JSON.stringify([]) // Start with empty assignments
           ]
         );
-        
+
         console.log(`✅ Created scheduled shift: ${scheduledShiftId}`);
       }
     }
 
     console.log(`✅ Scheduled shifts generated for Plan ${planId}`);
-    
+
   } catch (error) {
     console.error('❌ Error generating scheduled shifts:', error);
     throw error;
@@ -726,7 +761,7 @@ export const generateScheduledShiftsForPlan = async (req: Request, res: Response
 
     // Return updated plan
     const updatedPlan = await getShiftPlanById(id);
-    
+
     console.log('✅ Successfully generated scheduled shifts:', {
       scheduledShifts: updatedPlan.scheduledShifts?.length || 0
     });
@@ -760,7 +795,7 @@ export const regenerateScheduledShifts = async (req: Request, res: Response): Pr
     }
 
     console.log(`✅ Regenerated scheduled shifts for plan ${id}`);
-    
+
     // Return updated plan
     const updatedPlan = await getShiftPlanById(id);
     res.json(updatedPlan);
@@ -774,7 +809,7 @@ export const regenerateScheduledShifts = async (req: Request, res: Response): Pr
 export const getScheduledShiftsFromPlan = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     const { planId } = req.params;
-    
+
     const shifts = await db.all(
       `SELECT * FROM scheduled_shifts WHERE plan_id = ? ORDER BY date, time_slot_id`,
       [planId]
@@ -806,7 +841,7 @@ export const getScheduledShiftsFromPlan = async (req: AuthRequest, res: Response
 export const getScheduledShift = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     const { id } = req.params;
-    
+
     const shift = await db.get(
       'SELECT * FROM scheduled_shifts WHERE id = ?',
       [id]
@@ -834,10 +869,10 @@ export const updateScheduledShift = async (req: AuthRequest, res: Response): Pro
     const { id } = req.params;
     const { assignedEmployees } = req.body;
 
-    console.log('🔄 Updating scheduled shift:', { 
-      id, 
+    console.log('🔄 Updating scheduled shift:', {
+      id,
       assignedEmployees,
-      body: req.body 
+      body: req.body
     });
 
     if (!Array.isArray(assignedEmployees)) {
@@ -862,8 +897,8 @@ export const updateScheduledShift = async (req: AuthRequest, res: Response): Pro
     );
 
     console.log('✅ Scheduled shift updated successfully');
-    
-    res.json({ 
+
+    res.json({
       message: 'Scheduled shift updated successfully',
       id: id,
       assignedEmployees: assignedEmployees
@@ -918,9 +953,9 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
 
       console.log(`✅ Successfully cleared all assignments for plan ${id}`);
 
-      res.json({ 
-        message: 'Assignments cleared successfully', 
-        clearedShifts: scheduledShifts.length 
+      res.json({
+        message: 'Assignments cleared successfully',
+        clearedShifts: scheduledShifts.length
       });
 
     } catch (error) {
@@ -932,4 +967,595 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
     console.error('❌ Error clearing assignments:', error);
     res.status(500).json({ error: 'Internal server error' });
   }
-};
+};
+
+
+// Helper interfaces for export
+interface ExportDay {
+  id: number;
+  name: string;
+}
+
+interface ExportTimeSlot {
+  id: string;
+  name: string;
+  startTime: string;
+  endTime: string;
+  shiftsByDay: { [dayId: number]: any };
+}
+
+interface ExportTimetableData {
+  days: ExportDay[];
+  allTimeSlots: ExportTimeSlot[];
+}
+
+function getTimetableDataForExport(plan: any): ExportTimetableData {
+  const weekdays = [
+    { id: 1, name: 'Montag' },
+    { id: 2, name: 'Dienstag' },
+    { id: 3, name: 'Mittwoch' },
+    { id: 4, name: 'Donnerstag' },
+    { id: 5, name: 'Freitag' },
+    { id: 6, name: 'Samstag' },
+    { id: 7, name: 'Sonntag' }
+  ];
+
+  if (!plan.shifts || !plan.timeSlots) {
+    return { days: [], allTimeSlots: [] };
+  }
+
+  // Create a map for quick time slot lookups with proper typing
+  const timeSlotMap = new Map<string, any>();
+  plan.timeSlots.forEach((ts: any) => {
+    timeSlotMap.set(ts.id, ts);
+  });
+
+  // Group shifts by day
+  const shiftsByDay: { [dayId: number]: any[] } = plan.shifts.reduce((acc: any, shift: any) => {
+    if (!acc[shift.dayOfWeek]) {
+      acc[shift.dayOfWeek] = [];
+    }
+
+    const timeSlot = timeSlotMap.get(shift.timeSlotId);
+    const enhancedShift = {
+      ...shift,
+      timeSlotName: timeSlot?.name,
+      startTime: timeSlot?.startTime,
+      endTime: timeSlot?.endTime
+    };
+
+    acc[shift.dayOfWeek].push(enhancedShift);
+    return acc;
+  }, {});
+
+  // Sort shifts within each day by start time
+  Object.keys(shiftsByDay).forEach(day => {
+    const dayNum = parseInt(day);
+    shiftsByDay[dayNum].sort((a: any, b: any) => {
+      const timeA = a.startTime || '';
+      const timeB = b.startTime || '';
+      return timeA.localeCompare(timeB);
+    });
+  });
+
+  // Get unique days that have shifts
+  const days: ExportDay[] = Array.from(new Set(plan.shifts.map((shift: any) => shift.dayOfWeek)))
+    .sort()
+    .map(dayId => {
+      return weekdays.find(day => day.id === dayId) || { id: dayId as number, name: `Tag ${dayId}` };
+    });
+
+  // Get all unique time slots (rows) by collecting from all shifts
+  const allTimeSlotsMap = new Map<string, ExportTimeSlot>();
+  days.forEach(day => {
+    shiftsByDay[day.id]?.forEach((shift: any) => {
+      const timeSlot = timeSlotMap.get(shift.timeSlotId);
+      if (timeSlot && !allTimeSlotsMap.has(timeSlot.id)) {
+        const exportTimeSlot: ExportTimeSlot = {
+          id: timeSlot.id,
+          name: timeSlot.name,
+          startTime: timeSlot.startTime,
+          endTime: timeSlot.endTime,
+          shiftsByDay: {}
+        };
+        allTimeSlotsMap.set(timeSlot.id, exportTimeSlot);
+      }
+    });
+  });
+
+  // Populate shifts for each time slot by day
+  days.forEach(day => {
+    shiftsByDay[day.id]?.forEach((shift: any) => {
+      const timeSlot = allTimeSlotsMap.get(shift.timeSlotId);
+      if (timeSlot) {
+        timeSlot.shiftsByDay[day.id] = shift;
+      }
+    });
+  });
+
+  // Convert to array and sort by start time
+  const allTimeSlots = Array.from(allTimeSlotsMap.values()).sort((a: ExportTimeSlot, b: ExportTimeSlot) => {
+    return (a.startTime || '').localeCompare(b.startTime || '');
+  });
+
+  return { days, allTimeSlots };
+}
+
+// Export shift plan to Excel
+export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+    console.log('📊 Starting Excel export for plan:', id);
+
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create workbook
+    const workbook = new ExcelJS.Workbook();
+    workbook.creator = 'Schichtplaner System';
+    workbook.created = new Date();
+
+    /* -------------------------------------------------------------------------- */
+    /*                           🧾 1. Summary Sheet                              */
+    /* -------------------------------------------------------------------------- */
+    const summarySheet = workbook.addWorksheet('Planübersicht');
+    summarySheet.columns = [
+      { header: 'Eigenschaft', key: 'property', width: 25 },
+      { header: 'Wert', key: 'value', width: 35 }
+    ];
+
+    summarySheet.addRows([
+      { property: 'Plan Name', value: plan.name },
+      { property: 'Beschreibung', value: plan.description || 'Keine' },
+      { property: 'Zeitraum', value: `${plan.startDate} bis ${plan.endDate}` },
+      { property: 'Status', value: plan.status },
+      { property: 'Erstellt von', value: plan.created_by_name || 'Unbekannt' },
+      { property: 'Erstellt am', value: new Date(plan.createdAt).toLocaleString('de-DE') },
+      { property: 'Anzahl Schichten', value: plan.scheduledShifts?.length || 0 },
+      { property: 'Anzahl Mitarbeiter', value: plan.employees?.length || 0 }
+    ]);
+
+    // Style header
+    const header1 = summarySheet.getRow(1);
+    header1.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+    header1.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
+    summarySheet.columns.forEach(col => (col.alignment = { vertical: 'middle', wrapText: true }));
+
+    /* -------------------------------------------------------------------------- */
+    /*                        📅 2. Timetable / Schichtplan Sheet                 */
+    /* -------------------------------------------------------------------------- */
+    const timetableSheet = workbook.addWorksheet('Schichtplan');
+    const timetableData = getTimetableDataForExport(plan);
+    const { days, allTimeSlots } = timetableData;
+
+    // Header
+    const headerRow = ['Schicht (Zeit)', ...days.map(d => d.name)];
+    const header = timetableSheet.addRow(headerRow);
+    header.eachCell(cell => {
+      cell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
+      cell.alignment = { horizontal: 'center', vertical: 'middle' };
+      cell.border = {
+        top: { style: 'thin' },
+        left: { style: 'thin' },
+        bottom: { style: 'thin' },
+        right: { style: 'thin' }
+      };
+    });
+
+    // Content rows
+    for (const timeSlot of allTimeSlots) {
+      const rowData: any[] = [`${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`];
+
+      for (const day of days) {
+        const shift = timeSlot.shiftsByDay[day.id];
+        if (!shift) {
+          rowData.push('Keine Schicht');
+          continue;
+        }
+
+        const scheduledShift = plan.scheduledShifts?.find(
+          (s: any) => getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
+        );
+
+        if (scheduledShift && scheduledShift.assignedEmployees?.length > 0) {
+          const employees = scheduledShift.assignedEmployees.map((empId: string) => {
+            const emp = plan.employees?.find((e: any) => e.id === empId);
+            if (!emp) return { text: 'Unbekannt', color: 'FF888888' };
+
+            if (emp.isTrainee)
+              return { text: `${emp.firstname} ${emp.lastname} (T)`, color: 'FFCDA8F0' };
+            if (emp.employee_type === 'manager')
+              return { text: `${emp.firstname} ${emp.lastname} (M)`, color: 'FFCC0000' };
+            return { text: `${emp.firstname} ${emp.lastname}`, color: 'FF642AB5' };
+          });
+          rowData.push(employees);
+        } else {
+          const shiftsForSlot =
+            plan.shifts?.filter(
+              (s: any) => s.dayOfWeek === day.id && s.timeSlotId === timeSlot.id
+            ) || [];
+          const totalRequired = shiftsForSlot.reduce(
+            (sum: number, s: any) => sum + s.requiredEmployees,
+            0
+          );
+          rowData.push(totalRequired === 0 ? '-' : `0/${totalRequired}`);
+        }
+      }
+
+      const row = timetableSheet.addRow(rowData);
+
+      row.eachCell((cell, colNumber) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+        cell.alignment = { vertical: 'top', wrapText: true };
+
+        if (cell.value === 'Keine Schicht') {
+          cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFEDEDED' } };
+          cell.font = { color: { argb: 'FF888888' }, italic: true };
+        }
+
+        if (Array.isArray(cell.value)) {
+          cell.value = {
+            richText: cell.value.map((e: any) => ({
+              text: e.text + '\n',
+              font: { color: { argb: e.color } }
+            }))
+          };
+        }
+
+        if (colNumber === 1) {
+          cell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
+        }
+      });
+    }
+
+    // Adjust layout
+    timetableSheet.eachRow((row, i) => (row.height = i === 1 ? 30 : 70));
+    timetableSheet.columns.forEach(col => {
+      let max = 12;
+      col.eachCell?.({ includeEmpty: true }, c => {
+        const len = typeof c.value === 'string' ? c.value.length : 10;
+        if (len > max) max = len;
+      });
+      col.width = Math.min(max + 5, 40);
+    });
+
+    // Add legend row at bottom
+    const legendRow = timetableSheet.addRow([
+      'Legende:',
+      '■ Manager',
+      '■ Trainee',
+      '■ Mitarbeiter',
+      '■ Keine Schicht'
+    ]);
+
+    // Style each square with its respective color
+    legendRow.getCell(1).font = { bold: true };
+    legendRow.getCell(2).font = { color: { argb: 'FFCC0000' } };   // Red = Manager
+    legendRow.getCell(3).font = { color: { argb: 'FFCDA8F0' } };   // Purple = Trainee
+    legendRow.getCell(4).font = { color: { argb: 'FF642AB5' } };   // Blue = Mitarbeiter
+    legendRow.getCell(5).font = { color: { argb: 'FF888888' } };   // Gray = Keine Schicht
+
+    legendRow.eachCell(cell => {
+      cell.alignment = { vertical: 'middle', horizontal: 'left' };
+      cell.font = { ...cell.font, italic: true };
+    });
+
+    /* -------------------------------------------------------------------------- */
+    /*                        👥 3. Employee Overview Sheet                       */
+    /* -------------------------------------------------------------------------- */
+    const employeeSheet = workbook.addWorksheet('Mitarbeiterübersicht');
+    employeeSheet.columns = [
+      { header: 'Name', key: 'name', width: 25 },
+      { header: 'E-Mail', key: 'email', width: 25 },
+      { header: 'Rolle', key: 'role', width: 18 },
+      { header: 'Mitarbeiter Typ', key: 'type', width: 15 },
+      { header: 'Vertragstyp', key: 'contract', width: 18 },
+      { header: 'Trainee', key: 'trainee', width: 10 }
+    ];
+
+    plan.employees?.forEach((e: any) =>
+      employeeSheet.addRow({
+        name: `${e.firstname} ${e.lastname}`,
+        email: e.email,
+        role: e.roles?.join(', ') || 'Benutzer',
+        type: e.employee_type || 'Unbekannt',
+        contract: e.contractType || 'Nicht angegeben',
+        trainee: e.isTrainee ? 'Ja' : 'Nein'
+      })
+    );
+
+    const empHeader = employeeSheet.getRow(1);
+    empHeader.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+    empHeader.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF34495E' } };
+    empHeader.alignment = { horizontal: 'center', vertical: 'middle' };
+
+    /* -------------------------------------------------------------------------- */
+    /*                            📤 4. Send Response                             */
+    /* -------------------------------------------------------------------------- */
+    const fileName = `Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.xlsx`;
+    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+    await workbook.xlsx.write(res);
+
+    console.log('✅ Excel export completed for plan:', id);
+  } catch (error) {
+    console.error('❌ Error exporting to Excel:', error);
+    res.status(500).json({ error: 'Internal server error during Excel export' });
+  }
+};
+
+export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📄 Starting PDF export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create PDF document
+    const doc = new PDFDocument({ margin: 50 });
+
+    // Set response headers
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf"`);
+
+    // Pipe PDF to response
+    doc.pipe(res);
+
+    // Add title
+    doc.fontSize(20).font('Helvetica-Bold').text(`Schichtplan: ${plan.name}`, 50, 50);
+    doc.fontSize(12).font('Helvetica').text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')}`, 50, 80);
+
+    // Plan summary
+    let yPosition = 120;
+    doc.fontSize(14).font('Helvetica-Bold').text('Plan Informationen', 50, yPosition);
+    yPosition += 30;
+
+    doc.fontSize(10).font('Helvetica');
+    doc.text(`Plan Name: ${plan.name}`, 50, yPosition);
+    yPosition += 20;
+
+    if (plan.description) {
+      doc.text(`Beschreibung: ${plan.description}`, 50, yPosition);
+      yPosition += 20;
+    }
+
+    doc.text(`Zeitraum: ${plan.startDate} bis ${plan.endDate}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Status: ${plan.status}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt von: ${plan.created_by_name || 'Unbekannt'}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt am: ${plan.createdAt}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Schichten: ${plan.scheduledShifts?.length || 0}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Mitarbeiter: ${plan.employees?.length || 0}`, 50, yPosition);
+    yPosition += 40;
+
+    // Get timetable data for PDF
+    const timetableData = getTimetableDataForExport(plan);
+    const { days, allTimeSlots } = timetableData;
+
+    // Add timetable section
+    doc.addPage();
+    doc.fontSize(16).font('Helvetica-Bold').text('Schichtplan Timetable', 50, 50);
+
+    let currentY = 80;
+
+    // Define column widths
+    const timeSlotColWidth = 100;
+    const dayColWidth = (500 - timeSlotColWidth) / days.length;
+
+    // Table headers
+    doc.fontSize(10).font('Helvetica-Bold');
+
+    // Time slot header
+    doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+    doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
+
+    // Day headers
+    days.forEach((day, index) => {
+      const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
+      doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+      doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
+    });
+
+    doc.fillColor('black');
+    currentY += 20;
+
+    // Time slot rows
+    allTimeSlots.forEach((timeSlot, rowIndex) => {
+      // Check if we need a new page
+      if (currentY > 650) {
+        doc.addPage();
+        currentY = 50;
+
+        // Redraw headers on new page
+        doc.fontSize(10).font('Helvetica-Bold');
+        doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+        doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
+
+        days.forEach((day, index) => {
+          const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
+          doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+          doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
+        });
+
+        doc.fillColor('black');
+        currentY += 20;
+      }
+
+      // Alternate row background
+      const rowBgColor = rowIndex % 2 === 0 ? '#f8f9fa' : 'white';
+
+      // Time slot cell
+      doc.rect(50, currentY, timeSlotColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
+      doc.fontSize(9).font('Helvetica-Bold').text(timeSlot.name, 55, currentY + 5, { width: timeSlotColWidth - 10 });
+      doc.fontSize(8).font('Helvetica').text(`${timeSlot.startTime} - ${timeSlot.endTime}`, 55, currentY + 18, { width: timeSlotColWidth - 10 });
+
+      // Day cells
+      days.forEach((day, colIndex) => {
+        const xPos = 50 + timeSlotColWidth + (colIndex * dayColWidth);
+        const shift = timeSlot.shiftsByDay[day.id];
+
+        doc.rect(xPos, currentY, dayColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
+
+        if (!shift) {
+          doc.fontSize(8).font('Helvetica-Oblique').fillColor('#ccc').text('Keine Schicht', xPos + 5, currentY + 15, {
+            width: dayColWidth - 10,
+            align: 'center'
+          });
+        } else {
+          // Get assignments for this time slot and day
+          const scheduledShift = plan.scheduledShifts?.find((scheduled: any) => {
+            const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
+            return scheduledDayOfWeek === day.id &&
+              scheduled.timeSlotId === timeSlot.id;
+          });
+
+          doc.fillColor('black').fontSize(8).font('Helvetica');
+
+          if (scheduledShift && scheduledShift.assignedEmployees.length > 0) {
+            let textY = currentY + 5;
+            scheduledShift.assignedEmployees.forEach((empId: string, empIndex: number) => {
+              if (textY < currentY + 35) { // Don't overflow cell
+                const employee = plan.employees?.find((emp: any) => emp.id === empId);
+                if (employee) {
+                  let roleIndicator = '';
+                  if (employee.isTrainee) {
+                    roleIndicator = ' (T)';
+                    doc.fillColor('#cda8f0'); // Trainee color
+                  } else if (employee.employee_type === 'manager') {
+                    roleIndicator = ' (M)';
+                    doc.fillColor('#CC0000'); // Manager color
+                  } else {
+                    doc.fillColor('#642ab5'); // Regular personnel color
+                  }
+
+                  const name = `${employee.firstname} ${employee.lastname}${roleIndicator}`;
+                  doc.text(name, xPos + 5, textY, { width: dayColWidth - 10, align: 'left' });
+                  textY += 10;
+                }
+              }
+            });
+            doc.fillColor('black');
+          } else {
+            // Show required count like in React component
+            const shiftsForSlot = plan.shifts?.filter((s: any) =>
+              s.dayOfWeek === day.id &&
+              s.timeSlotId === timeSlot.id
+            ) || [];
+            const totalRequired = shiftsForSlot.reduce((sum: number, s: any) => sum + s.requiredEmployees, 0);
+            const displayText = totalRequired === 0 ? '-' : `0/${totalRequired}`;
+
+            doc.fillColor('#666').fontSize(9).font('Helvetica-Oblique')
+              .text(displayText, xPos + 5, currentY + 15, { width: dayColWidth - 10, align: 'center' });
+            doc.fillColor('black');
+          }
+        }
+      });
+
+      currentY += 40;
+    });
+
+    // Add employee overview page
+    doc.addPage();
+    doc.fontSize(16).font('Helvetica-Bold').text('Mitarbeiterübersicht', 50, 50);
+
+    currentY = 80;
+
+    // Table headers
+    doc.fontSize(10).font('Helvetica-Bold');
+    doc.text('Name', 50, currentY);
+    doc.text('E-Mail', 200, currentY);
+    doc.text('Rolle', 350, currentY);
+    doc.text('Typ', 450, currentY);
+    currentY += 15;
+
+    // Horizontal line
+    doc.moveTo(50, currentY).lineTo(550, currentY).stroke();
+    currentY += 10;
+
+    doc.fontSize(9).font('Helvetica');
+
+    plan.employees?.forEach((employee: any) => {
+      if (currentY > 700) {
+        doc.addPage();
+        currentY = 50;
+        // Re-add headers
+        doc.fontSize(10).font('Helvetica-Bold');
+        doc.text('Name', 50, currentY);
+        doc.text('E-Mail', 200, currentY);
+        doc.text('Rolle', 350, currentY);
+        doc.text('Typ', 450, currentY);
+        currentY += 25;
+      }
+
+      doc.text(`${employee.firstname} ${employee.lastname}`, 50, currentY);
+      doc.text(employee.email, 200, currentY, { width: 140 });
+      doc.text(employee.roles?.join(', ') || 'Benutzer', 350, currentY, { width: 90 });
+      doc.text(employee.employeeType, 450, currentY);
+
+      currentY += 20;
+    });
+
+    // Add footer to each page
+    const pages = doc.bufferedPageRange();
+    for (let i = 0; i < pages.count; i++) {
+      doc.switchToPage(i);
+
+      doc.fontSize(8).font('Helvetica');
+      doc.text(
+        `Seite ${i + 1} von ${pages.count} • Erstellt am: ${new Date().toLocaleString('de-DE')} • Schichtplaner System`,
+        50,
+        800,
+        { align: 'center', width: 500 }
+      );
+    }
+
+    // Finalize PDF
+    doc.end();
+
+    console.log('✅ PDF export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to PDF:', error);
+    res.status(500).json({ error: 'Internal server error during PDF export' });
+  }
+};
+
+// Helper function to get day of week from date string
+function getDayOfWeek(dateString: string): number {
+  const date = new Date(dateString);
+  return date.getDay() === 0 ? 7 : date.getDay();
+}
+
+// Helper function to get German day names
+function getGermanDayName(dayIndex: number): string {
+  const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+  return days[dayIndex];
+}

backend/src/middleware/Validation/Employee.md

@@ -23,7 +23,7 @@
 ### \[CREATE\] Employee
 * `firstname` 1-100 characters and must not be empty
 * `lastname` 1-100 characters and must not be empty
-* `password` must be at least 6 characters (in create mode)
+* `password` must be at least 8 characters (in create mode)
 * `employeeType` must be `manager`, `personell`, `apprentice`, or `guest`
 * `canWorkAlone` optional boolean
 * `isTrainee` optional boolean

backend/src/middleware/auth.ts

@@ -51,4 +51,36 @@ export const requireRole = (roles: string[]) => {
     console.log(`✅ Role check passed for user: ${req.user.email}, role: ${req.user.role}`);
     next();
   };
-};
+};
+
+export const getClientIP = (req: Request): string => {
+  const trustedHeader = process.env.TRUSTED_PROXY_HEADER || 'x-forwarded-for';
+  const forwarded = req.headers[trustedHeader];
+  const realIp = req.headers['x-real-ip'];
+  
+  if (forwarded) {
+    if (Array.isArray(forwarded)) {
+      return forwarded[0].split(',')[0].trim();
+    } else if (typeof forwarded === 'string') {
+      return forwarded.split(',')[0].trim();
+    }
+  }
+  
+  if (realIp) {
+    return realIp.toString();
+  }
+  
+  return req.socket.remoteAddress || req.ip || 'unknown';
+};
+
+export const ipSecurityCheck = (req: AuthRequest, res: Response, next: NextFunction): void => {
+  const clientIP = getClientIP(req);
+  
+  // Log suspicious activity
+  const suspiciousPaths = ['/api/auth/login', '/api/auth/register'];
+  if (suspiciousPaths.includes(req.path)) {
+    console.log(`🔐 Auth attempt from IP: ${clientIP}, Path: ${req.path}`);
+  }
+  
+  next();
+}

backend/src/middleware/rateLimit.ts

@@ -1,6 +1,46 @@
 import rateLimit from 'express-rate-limit';
 import { Request } from 'express';
 
+// Secure IP extraction that works with proxy settings
+const getClientIP = (req: Request): string => {
+  // Read from environment which header to trust
+  const trustedHeader = process.env.TRUSTED_PROXY_HEADER || 'x-forwarded-for';
+  
+  const forwarded = req.headers[trustedHeader];
+  const realIp = req.headers['x-real-ip'];
+  const cfConnectingIp = req.headers['cf-connecting-ip']; // Cloudflare
+  
+  // If we have a forwarded header and trust proxy is configured
+  if (forwarded) {
+    if (Array.isArray(forwarded)) {
+      const firstIP = forwarded[0].split(',')[0].trim();
+      console.log(`🔍 Extracted IP from ${trustedHeader}: ${firstIP} (from: ${forwarded[0]})`);
+      return firstIP;
+    } else if (typeof forwarded === 'string') {
+      const firstIP = forwarded.split(',')[0].trim();
+      console.log(`🔍 Extracted IP from ${trustedHeader}: ${firstIP} (from: ${forwarded})`);
+      return firstIP;
+    }
+  }
+  
+  // Cloudflare support
+  if (cfConnectingIp) {
+    console.log(`🔍 Using Cloudflare IP: ${cfConnectingIp}`);
+    return cfConnectingIp.toString();
+  }
+  
+  // Fallback to x-real-ip
+  if (realIp) {
+    console.log(`🔍 Using x-real-ip: ${realIp}`);
+    return realIp.toString();
+  }
+  
+  // Final fallback to connection remote address
+  const remoteAddress = req.socket.remoteAddress || req.ip || 'unknown';
+  console.log(`🔍 Using remote address: ${remoteAddress}`);
+  return remoteAddress;
+};
+
 // Helper to check if request should be limited
 const shouldSkipLimit = (req: Request): boolean => {
   const skipPaths = [
@@ -14,35 +54,92 @@ const shouldSkipLimit = (req: Request): boolean => {
     return true;
   }
   
+  // Skip for whitelisted IPs from environment
+  const whitelist = process.env.RATE_LIMIT_WHITELIST?.split(',') || [];
+  const clientIP = getClientIP(req);
+  if (whitelist.includes(clientIP)) {
+    console.log(`✅ IP whitelisted: ${clientIP}`);
+    return true;
+  }
+  
   return skipPaths.includes(req.path);
 };
 
+// Environment-based configuration
+const getRateLimitConfig = () => {
+  const isProduction = process.env.NODE_ENV === 'production';
+  
+  return {
+    windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes default
+    max: isProduction 
+      ? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000')  // Stricter in production
+      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '5000'), // More lenient in development
+    
+    // Development-specific relaxations
+    skip: (req: Request) => {
+      // Skip all GET requests in development for easier testing
+      if (!isProduction && req.method === 'GET') {
+        return true;
+      }
+      
+      return shouldSkipLimit(req);
+    }
+  };
+};
+
 // Main API limiter - nur für POST/PUT/DELETE
 export const apiLimiter = rateLimit({
-  windowMs: 15 * 60 * 1000, // 15 minutes
-  max: 200, // 200 non-GET requests per 15 minutes
+  ...getRateLimitConfig(),
   message: { 
     error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen' 
   },
   standardHeaders: true,
   legacyHeaders: false,
-  skip: (req) => {
-    // ✅ Skip für GET requests (Data Fetching)
-    if (req.method === 'GET') return true;
+  keyGenerator: (req) => getClientIP(req),
+  handler: (req, res) => {
+    const clientIP = getClientIP(req);
+    console.warn(`🚨 Rate limit exceeded for IP: ${clientIP}, Path: ${req.path}, Method: ${req.method}`);
     
-    // ✅ Skip für Health/Status Checks
-    return shouldSkipLimit(req);
+    res.status(429).json({ 
+      error: 'Zu viele Anfragen',
+      message: 'Bitte versuchen Sie es später erneut',
+      retryAfter: '15 Minuten',
+      clientIP: process.env.NODE_ENV === 'development' ? clientIP : undefined // Only expose IP in dev
+    });
   }
 });
 
 // Strict limiter for auth endpoints
 export const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: 5,
+  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '100'),
   message: { 
     error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut' 
   },
   standardHeaders: true,
   legacyHeaders: false,
   skipSuccessfulRequests: true,
+  keyGenerator: (req) => getClientIP(req),
+  handler: (req, res) => {
+    const clientIP = getClientIP(req);
+    console.warn(`🚨 Auth rate limit exceeded for IP: ${clientIP}`);
+    
+    res.status(429).json({ 
+      error: 'Zu viele Login-Versuche',
+      message: 'Aus Sicherheitsgründen wurde Ihr Konto temporär gesperrt',
+      retryAfter: '15 Minuten'
+    });
+  }
+});
+
+// Separate limiter for expensive endpoints
+export const expensiveEndpointLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '100'),
+  message: {
+    error: 'Zu viele Anfragen für diese Ressource'
+  },
+  standardHeaders: true,
+  legacyHeaders: false,
+  keyGenerator: (req) => getClientIP(req)
 });

backend/src/middleware/validation.ts

@@ -73,7 +73,7 @@ export const validateEmployee = [
   body('contractType')
     .custom((value, { req }) => {
       const employeeType = req.body.employeeType;
-      
+
       // Manager, apprentice => contractType must be flexible
       if (['manager', 'apprentice'].includes(employeeType)) {
         if (value !== 'flexible') {
@@ -92,7 +92,7 @@ export const validateEmployee = [
           throw new Error(`contractType must be 'small' or 'large' for employeeType: ${employeeType}`);
         }
       }
-      
+
       return true;
     }),
 
@@ -156,7 +156,7 @@ export const validateEmployeeUpdate = [
     .custom((value, { req }) => {
       const employeeType = req.body.employeeType;
       if (!employeeType) return true; // Skip if employeeType not provided
-      
+
       // Same validation logic as create
       if (['manager', 'apprentice'].includes(employeeType)) {
         if (value !== 'flexible') {
@@ -173,7 +173,7 @@ export const validateEmployeeUpdate = [
           throw new Error(`contractType must be 'small' or 'large' for employeeType: ${employeeType}`);
         }
       }
-      
+
       return true;
     }),
 
@@ -209,7 +209,7 @@ export const validateChangePassword = [
     .isLength({ min: 1 })
     .withMessage('Current password is required for self-password change'),
 
-  body('password')
+  body('newPassword')
     .isLength({ min: 8 })
     .withMessage('Password must be at least 8 characters')
     .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])/)
@@ -217,7 +217,7 @@ export const validateChangePassword = [
 
   body('confirmPassword')
     .custom((value, { req }) => {
-      if (value !== req.body.password) {
+      if (value !== req.body.newPassword) {
         throw new Error('Passwords do not match');
       }
       return true;
@@ -465,7 +465,7 @@ export const validateAvailabilities = [
     .withMessage('Availabilities must be an array')
     .custom((availabilities, { req }) => {
       // Count available shifts (preference level 1 or 2)
-      const availableCount = availabilities.filter((avail: any) => 
+      const availableCount = availabilities.filter((avail: any) =>
         avail.preferenceLevel === 1 || avail.preferenceLevel === 2
       ).length;
 
@@ -473,7 +473,7 @@ export const validateAvailabilities = [
       if (availableCount === 0) {
         throw new Error('At least one available shift is required');
       }
-      
+
       return true;
     }),
 

backend/src/models/helpers/employeeHelpers.ts

@@ -14,16 +14,16 @@ function generateEmail(firstname: string, lastname: string): string {
 
   const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
   const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
-  
+
   return `${cleanFirstname}.${cleanLastname}@sp.de`;
 }
 
-// UPDATED: Validation for new employee model with employee types
+// Validation for new employee model with employee types
 export function validateEmployeeData(employee: CreateEmployeeRequest): string[] {
   const errors: string[] = [];
 
-  if (employee.password?.length < 6) {
-    errors.push('Password must be at least 6 characters long');
+  if (employee.password?.length < 8) {
+    errors.push('Password must be at least 8 characters long');
   }
 
   if (!employee.firstname?.trim() || employee.firstname.trim().length < 2) {
@@ -71,17 +71,17 @@ export function generateEmployeeEmail(firstname: string, lastname: string): stri
   return generateEmail(firstname, lastname);
 }
 
-// UPDATED: Business logic helpers for new employee types
-export const isManager = (employee: Employee): boolean => 
+// Business logic helpers for new employee types
+export const isManager = (employee: Employee): boolean =>
   employee.employeeType === 'manager';
 
-export const isPersonell = (employee: Employee): boolean => 
+export const isPersonell = (employee: Employee): boolean =>
   employee.employeeType === 'personell';
 
-export const isApprentice = (employee: Employee): boolean => 
+export const isApprentice = (employee: Employee): boolean =>
   employee.employeeType === 'apprentice';
 
-export const isGuest = (employee: Employee): boolean => 
+export const isGuest = (employee: Employee): boolean =>
   employee.employeeType === 'guest';
 
 export const isInternal = (employee: Employee): boolean =>
@@ -90,25 +90,25 @@ export const isInternal = (employee: Employee): boolean =>
 export const isExternal = (employee: Employee): boolean =>
   employee.employeeType === 'guest';
 
-// UPDATED: Trainee logic - now based on isTrainee field for personell type
-export const isTrainee = (employee: Employee): boolean => 
+// Trainee logic - now based on isTrainee field for personell type
+export const isTrainee = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && employee.isTrainee;
 
-export const isExperienced = (employee: Employee): boolean => 
+export const isExperienced = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && !employee.isTrainee;
 
 // Role-based helpers
-export const isAdmin = (employee: Employee): boolean => 
+export const isAdmin = (employee: Employee): boolean =>
   employee.roles?.includes('admin') || false;
 
-export const isMaintenance = (employee: Employee): boolean => 
+export const isMaintenance = (employee: Employee): boolean =>
   employee.roles?.includes('maintenance') || false;
 
-export const isUser = (employee: Employee): boolean => 
+export const isUser = (employee: Employee): boolean =>
   employee.roles?.includes('user') || false;
 
-// UPDATED: Work alone permission - managers and experienced personell can work alone
-export const canEmployeeWorkAlone = (employee: Employee): boolean => 
+// Work alone permission - managers and experienced personell can work alone
+export const canEmployeeWorkAlone = (employee: Employee): boolean =>
   employee.canWorkAlone && (isManager(employee) || isExperienced(employee));
 
 // Helper for full name display
@@ -134,7 +134,7 @@ export function validateAvailabilityData(availability: Omit<EmployeeAvailability
   return errors;
 }
 
-// UPDATED: Helper to get employee type category
+// Helper to get employee type category
 export const getEmployeeCategory = (employee: Employee): 'internal' | 'external' => {
   return isInternal(employee) ? 'internal' : 'external';
 };

backend/src/models/helpers/shiftPlanHelpers.ts

@@ -78,7 +78,7 @@ export function calculateTotalRequiredEmployees(plan: ShiftPlan): number {
   return plan.shifts.reduce((total, shift) => total + shift.requiredEmployees, 0);
 }
 
-// UPDATED: Get scheduled shift by date and time slot
+// Get scheduled shift by date and time slot
 export function getScheduledShiftByDateAndTime(
   plan: ShiftPlan, 
   date: string, 

backend/src/models/scheduling.ts

@@ -2,7 +2,7 @@
 import { Employee } from './Employee.js';
 import { ShiftPlan } from './ShiftPlan.js';
 
-// Updated Availability interface to match new schema
+// Availability interface
 export interface Availability {
   id: string;
   employeeId: string;

backend/src/routes/employees.ts

@@ -11,15 +11,15 @@ import {
   changePassword,
   updateLastLogin
 } from '../controllers/employeeController.js';
-import { 
-  handleValidationErrors, 
-  validateEmployee, 
-  validateEmployeeUpdate, 
+import {
+  handleValidationErrors,
+  validateEmployee,
+  validateEmployeeUpdate,
   validateChangePassword,
   validateId,
   validateEmployeeId,
   validateAvailabilities,
-  validatePagination 
+  validatePagination
 } from '../middleware/validation.js';
 
 const router = express.Router();
@@ -28,18 +28,18 @@ const router = express.Router();
 router.use(authMiddleware);
 
 // Employee CRUD Routes
-router.get('/', validatePagination, handleValidationErrors, getEmployees);
+router.get('/', validatePagination, handleValidationErrors, authMiddleware, getEmployees);
 router.get('/:id', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), getEmployee);
 router.post('/', validateEmployee, handleValidationErrors, requireRole(['admin']), createEmployee);
 router.put('/:id', validateId, validateEmployeeUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateEmployee);
 router.delete('/:id', validateId, handleValidationErrors, requireRole(['admin']), deleteEmployee);
 
 // Password & Login Routes
-router.put('/:id/password', validateId, validateChangePassword, handleValidationErrors, changePassword);
-router.put('/:id/last-login', validateId, handleValidationErrors, updateLastLogin);
+router.put('/:id/password', validateId, validateChangePassword, handleValidationErrors, authMiddleware, changePassword);
+router.put('/:id/last-login', validateId, handleValidationErrors, authMiddleware, updateLastLogin);
 
 // Availability Routes
-router.get('/:employeeId/availabilities', validateEmployeeId, handleValidationErrors, getAvailabilities);
-router.put('/:employeeId/availabilities', validateEmployeeId, validateAvailabilities, handleValidationErrors, updateAvailabilities);
+router.get('/:employeeId/availabilities', validateEmployeeId, handleValidationErrors, authMiddleware, getAvailabilities);
+router.put('/:employeeId/availabilities', validateEmployeeId, validateAvailabilities, handleValidationErrors, authMiddleware, updateAvailabilities);
 
 export default router;

backend/src/routes/shiftPlans.ts

@@ -7,7 +7,9 @@ import {
   updateShiftPlan, 
   deleteShiftPlan,
   createFromPreset,
-  clearAssignments
+  clearAssignments,
+  exportShiftPlanToExcel,
+  exportShiftPlanToPDF
 } from '../controllers/shiftPlanController.js';
 import { 
   validateShiftPlan, 
@@ -30,4 +32,7 @@ router.put('/:id', validateId, validateShiftPlanUpdate, handleValidationErrors,
 router.delete('/:id', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShiftPlan);
 router.post('/:id/clear-assignments', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), clearAssignments);
 
+router.get('/:id/export/excel', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToExcel);
+router.get('/:id/export/pdf', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToPDF);
+
 export default router;

backend/src/scripts/applyMigration.ts

@@ -53,7 +53,7 @@ async function markMigrationAsApplied(migrationName: string) {
   );
 }
 
-// UPDATED: Function to handle schema changes for the new employee type system
+// Function to handle schema changes for the new employee type system
 async function applySchemaUpdates() {
   console.log('🔄 Applying schema updates for new employee type system...');
   
@@ -80,7 +80,7 @@ async function applySchemaUpdates() {
       PRAGMA table_info(employees)
     `);
     
-    // FIXED: Check for employee_type column (not roles column)
+    // Check for employee_type column (not roles column)
     const hasEmployeeType = employeesTableInfo.some((col: TableColumnInfo) => col.name === 'employee_type');
     const hasIsTrainee = employeesTableInfo.some((col: TableColumnInfo) => col.name === 'is_trainee');
     

backend/src/scripts/initializeDatabase.ts

@@ -33,10 +33,10 @@ export async function initializeDatabase(): Promise<void> {
 
   console.log(`✅ Using schema at: ${schemaPath}`);
   const schema = fs.readFileSync(schemaPath, 'utf8');
-  
+
   try {
     console.log('Starting database initialization...');
-    
+
     try {
       const existingAdmin = await db.get<{ count: number }>(
         `SELECT COUNT(*) as count 
@@ -44,7 +44,7 @@ export async function initializeDatabase(): Promise<void> {
          JOIN employee_roles er ON e.id = er.employee_id
          WHERE er.role = 'admin' AND e.is_active = 1`
       );
-      
+
       if (existingAdmin && existingAdmin.count > 0) {
         console.log('✅ Database already initialized with admin user');
         return;
@@ -52,23 +52,23 @@ export async function initializeDatabase(): Promise<void> {
     } catch (error) {
       console.log('ℹ️ Database tables might not exist yet, creating schema...');
     }
-    
+
     // Get list of existing tables
     interface TableInfo {
       name: string;
     }
-    
+
     try {
       const existingTables = await db.all<TableInfo>(
         "SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%'"
       );
-      
+
       console.log('Existing tables found:', existingTables.map(t => t.name).join(', ') || 'none');
-      
-      // UPDATED: Drop tables in correct dependency order for new schema
+
+      // Drop tables in correct dependency order for new schema
       const tablesToDrop = [
         'employee_availability',
-        'shift_assignments', 
+        'shift_assignments',
         'scheduled_shifts',
         'shifts',
         'time_slots',
@@ -79,7 +79,7 @@ export async function initializeDatabase(): Promise<void> {
         'shift_plans',
         'applied_migrations'
       ];
-      
+
       for (const table of tablesToDrop) {
         if (existingTables.some(t => t.name === table)) {
           console.log(`Dropping table: ${table}`);
@@ -94,17 +94,41 @@ export async function initializeDatabase(): Promise<void> {
       console.error('Error checking/dropping existing tables:', error);
       // Continue with schema creation even if table dropping fails
     }
-    
-    // Execute schema creation in a transaction
-    await db.run('BEGIN EXCLUSIVE TRANSACTION');
-    
-    // Execute each statement separately for better error reporting
-    const statements = schema
+
+    // NEU: PRAGMA-Anweisungen außerhalb der Transaktion ausführen
+    console.log('Executing PRAGMA statements outside transaction...');
+    const pragmaStatements = schema
       .split(';')
       .map(stmt => stmt.trim())
       .filter(stmt => stmt.length > 0)
+      .filter(stmt => stmt.toUpperCase().startsWith('PRAGMA'))
+      .map(stmt => {
+        return stmt.split('\n')
+          .filter(line => !line.trim().startsWith('--'))
+          .join('\n')
+          .trim();
+      });
+
+    for (const statement of pragmaStatements) {
+      try {
+        console.log('Executing PRAGMA:', statement);
+        await db.run(statement);
+      } catch (error) {
+        console.warn('PRAGMA statement might have failed:', statement, error);
+        // Continue even if PRAGMA fails
+      }
+    }
+
+    // Schema-Erstellung in Transaktion
+    await db.run('BEGIN EXCLUSIVE TRANSACTION');
+
+    // Nur die CREATE TABLE und andere Anweisungen (ohne PRAGMA)
+    const schemaStatements = schema
+      .split(';')
+      .map(stmt => stmt.trim())
+      .filter(stmt => stmt.length > 0)
+      .filter(stmt => !stmt.toUpperCase().startsWith('PRAGMA'))
       .map(stmt => {
-        // Remove any single-line comments
         return stmt.split('\n')
           .filter(line => !line.trim().startsWith('--'))
           .join('\n')
@@ -112,7 +136,7 @@ export async function initializeDatabase(): Promise<void> {
       })
       .filter(stmt => stmt.length > 0);
 
-    for (const statement of statements) {
+    for (const statement of schemaStatements) {
       try {
         console.log('Executing statement:', statement.substring(0, 50) + '...');
         await db.run(statement);
@@ -123,8 +147,8 @@ export async function initializeDatabase(): Promise<void> {
         throw error;
       }
     }
-    
-    // UPDATED: Insert default data in correct order
+
+    // Insert default data in correct order
     try {
       console.log('Inserting default employee types...');
       await db.run(`INSERT OR IGNORE INTO employee_types (type, category, has_contract_type) VALUES ('manager', 'internal', 1)`);
@@ -132,7 +156,7 @@ export async function initializeDatabase(): Promise<void> {
       await db.run(`INSERT OR IGNORE INTO employee_types (type, category, has_contract_type) VALUES ('apprentice', 'internal', 1)`);
       await db.run(`INSERT OR IGNORE INTO employee_types (type, category, has_contract_type) VALUES ('guest', 'external', 0)`);
       console.log('✅ Default employee types inserted');
-      
+
       console.log('Inserting default roles...');
       await db.run(`INSERT OR IGNORE INTO roles (role, authority_level, description) VALUES ('admin', 100, 'Vollzugriff')`);
       await db.run(`INSERT OR IGNORE INTO roles (role, authority_level, description) VALUES ('maintenance', 50, 'Wartungszugriff')`);
@@ -143,13 +167,13 @@ export async function initializeDatabase(): Promise<void> {
       await db.run('ROLLBACK');
       throw error;
     }
-    
+
     await db.run('COMMIT');
     console.log('✅ Database schema successfully initialized');
-    
+
     // Give a small delay to ensure all transactions are properly closed
     await new Promise(resolve => setTimeout(resolve, 100));
-    
+
   } catch (error) {
     console.error('Error during database initialization:', error);
     throw error;

backend/src/server.ts

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'url';
 import { initializeDatabase } from './scripts/initializeDatabase.js';
 import fs from 'fs';
 import helmet from 'helmet';
+import type { ViteDevServer } from 'vite';
 
 // Route imports
 import authRoutes from './routes/auth.js';
@@ -13,7 +14,12 @@ import shiftPlanRoutes from './routes/shiftPlans.js';
 import setupRoutes from './routes/setup.js';
 import scheduledShifts from './routes/scheduledShifts.js';
 import schedulingRoutes from './routes/scheduling.js';
-import { authLimiter, apiLimiter } from './middleware/rateLimit.js';
+import { 
+  apiLimiter, 
+  authLimiter, 
+  expensiveEndpointLimiter
+} from './middleware/rateLimit.js';
+import { ipSecurityCheck as authIpCheck } from './middleware/auth.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -22,7 +28,50 @@ const app = express();
 const PORT = 3002;
 const isDevelopment = process.env.NODE_ENV === 'development';
 
-app.set('trust proxy', true);
+app.use(authIpCheck);
+
+let vite: ViteDevServer | undefined;
+
+if (isDevelopment) {
+  // Dynamically import and setup Vite middleware
+  const setupViteDevServer = async () => {
+    try {
+      const { createServer } = await import('vite');
+      vite = await createServer({
+        server: { middlewareMode: true },
+        appType: 'spa'
+      });
+      app.use(vite.middlewares);
+      console.log('🔧 Vite dev server integrated with Express');
+    } catch (error) {
+      console.warn('⚠️ Vite integration failed, using static files:', error);
+    }
+  };
+  setupViteDevServer();
+}
+
+const configureStaticFiles = () => {
+  const staticConfig = {
+    maxAge: '1y',
+    etag: false,
+    immutable: true,
+    index: false
+  };
+
+  // Serve frontend build
+  const frontendPath = '/app/frontend-build';
+  if (fs.existsSync(frontendPath)) {
+    console.log('✅ Serving frontend from:', frontendPath);
+    app.use(express.static(frontendPath, staticConfig));
+  }
+
+  // Serve premium assets if available
+  const premiumPath = '/app/premium-dist';
+  if (fs.existsSync(premiumPath)) {
+    console.log('✅ Serving premium assets from:', premiumPath);
+    app.use('/premium-assets', express.static(premiumPath, staticConfig));
+  }
+};
 
 // Security configuration
 if (process.env.NODE_ENV === 'production') {
@@ -34,6 +83,51 @@ if (process.env.NODE_ENV === 'production') {
   }
 }
 
+const configureTrustProxy = (): string | string[] | boolean | number => {
+  const trustedProxyIps = process.env.TRUSTED_PROXY_IPS;
+  const trustProxyEnabled = process.env.TRUST_PROXY_ENABLED !== 'false';
+
+  // If explicitly disabled
+  if (!trustProxyEnabled) {
+    console.log('🔒 Trust proxy: Disabled');
+    return false;
+  }
+
+  // If specific IPs are provided via environment variable
+  if (trustedProxyIps) {
+    console.log('🔒 Trust proxy: Using configured IPs:', trustedProxyIps);
+    
+    // Handle comma-separated list of IPs/CIDR ranges
+    if (trustedProxyIps.includes(',')) {
+      return trustedProxyIps.split(',').map(ip => ip.trim());
+    }
+    
+    // Handle single IP/CIDR
+    return trustedProxyIps.trim();
+  }
+
+  // Default behavior for reverse proxy setup
+  console.log('🔒 Trust proxy: Using reverse proxy defaults (trust all)');
+  return true; // Trust all proxies when behind nginx
+};
+
+app.set('trust proxy', configureTrustProxy());
+
+app.use((req, res, next) => {
+  const protocol = req.headers['x-forwarded-proto'] || req.protocol;
+  const isHttps = protocol === 'https';
+  
+  // Add security warning for HTTP requests
+  if (!isHttps && process.env.NODE_ENV === 'production') {
+    res.setHeader('X-Security-Warning', 'This application is being accessed over HTTP. For secure communication, please use HTTPS.');
+    
+    // Log HTTP access in production
+    console.warn(`⚠️  HTTP access detected: ${req.method} ${req.path} from ${req.ip}`);
+  }
+  
+  next();
+});
+
 // Security headers
 app.use(helmet({
   contentSecurityPolicy: {
@@ -47,9 +141,14 @@ app.use(helmet({
       objectSrc: ["'none'"],
       mediaSrc: ["'self'"],
       frameSrc: ["'none'"],
+      upgradeInsecureRequests: process.env.FORCE_HTTPS === 'true' ? [] : null
     },
   },
-  hsts: false,
+  hsts: {
+    maxAge: 31536000,
+    includeSubDomains: true,
+    preload: true
+  }, // Enable HSTS for HTTPS
   crossOriginEmbedderPolicy: false
 }));
 
@@ -66,9 +165,12 @@ app.use(express.json());
 
 // Rate limiting - weniger restriktiv in Development
 if (process.env.NODE_ENV === 'production') {
+  console.log('🔒 Applying production rate limiting');
   app.use('/api/', apiLimiter);
 } else {
-  console.log('🔧 Development: Rate limiting relaxed');
+  console.log('🔧 Development: Relaxed rate limiting applied');
+  // In development, you might want to be more permissive
+  app.use('/api/', apiLimiter);
 }
 
 // API Routes
@@ -77,12 +179,12 @@ app.use('/api/auth', authLimiter, authRoutes);
 app.use('/api/employees', employeeRoutes);
 app.use('/api/shift-plans', shiftPlanRoutes);
 app.use('/api/scheduled-shifts', scheduledShifts);
-app.use('/api/scheduling', schedulingRoutes);
+app.use('/api/scheduling', expensiveEndpointLimiter, schedulingRoutes);
 
 // Health route
 app.get('/api/health', (req: express.Request, res: express.Response) => {
-  res.json({ 
-    status: 'OK', 
+  res.json({
+    status: 'OK',
     message: 'Backend läuft!',
     timestamp: new Date().toISOString(),
     mode: process.env.NODE_ENV || 'development'
@@ -118,6 +220,7 @@ const findFrontendBuildPath = (): string | null => {
 };
 
 const frontendBuildPath = findFrontendBuildPath();
+configureStaticFiles();
 
 if (frontendBuildPath) {
   app.use(express.static(frontendBuildPath));
@@ -130,46 +233,65 @@ if (frontendBuildPath) {
 }
 
 // Root route
-app.get('/', (req, res) => {
-  if (!frontendBuildPath) {
-    if (isDevelopment) {
-      return res.redirect('http://localhost:3003');
+app.get('/', async (req, res) => {
+  // In development with Vite middleware
+  if (vite) {
+    try {
+      const template = fs.readFileSync(
+        path.resolve(__dirname, '../../frontend/index.html'),
+        'utf-8'
+      );
+      const html = await vite.transformIndexHtml(req.url, template);
+      res.send(html);
+    } catch (error) {
+      res.status(500).send('Vite dev server error');
     }
-    return res.status(500).send('Frontend build not found');
+    return;
   }
-  
+
+  // Fallback to static file serving
+  if (!frontendBuildPath) {
+    return res.status(500).send('Frontend not available');
+  }
+
   const indexPath = path.join(frontendBuildPath, 'index.html');
   res.sendFile(indexPath);
 });
 
 // Client-side routing fallback
-app.get('*', (req, res) => {
+app.get('*', (req, res, next) => {
+  // Skip API routes
   if (req.path.startsWith('/api/')) {
-    return res.status(404).json({ error: 'API endpoint not found' });
+    return next();
   }
-  
-  if (!frontendBuildPath) {
-    if (isDevelopment) {
-      return res.redirect(`http://localhost:3003${req.path}`);
-    }
-    return res.status(500).json({ error: 'Frontend application not available' });
+
+  // Skip file extensions (assets)
+  if (req.path.match(/\.[a-z0-9]+$/i)) {
+    return next();
   }
+
+  // Serve React app for all other routes
+  const frontendPath = '/app/frontend-build';
+  const indexPath = path.join(frontendPath, 'index.html');
   
-  const indexPath = path.join(frontendBuildPath, 'index.html');
-  res.sendFile(indexPath);
+  if (fs.existsSync(indexPath)) {
+    res.sendFile(indexPath);
+  } else {
+    res.status(404).send('Frontend not available');
+  }
 });
 
 // Error handling
 app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
   console.error('Error:', err);
-  
+
   if (process.env.NODE_ENV === 'production') {
-    res.status(500).json({ 
+    res.status(500).json({
       error: 'Internal server error',
       message: 'Something went wrong'
     });
   } else {
-    res.status(500).json({ 
+    res.status(500).json({
       error: 'Internal server error',
       message: err.message,
       stack: err.stack

docker-compose.yml

@@ -6,17 +6,22 @@ services:
     image: ghcr.io/donpat1to/schichtenplaner:v1.0.0
     environment:
       - NODE_ENV=production
-      - JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
-    ports:
-      - "3002:3002"
+      - JWT_SECRET=${JWT_SECRET}
+      - TRUST_PROXY_ENABLED=true
+      - TRUSTED_PROXY_IPS=nginx-proxy,172.0.0.0/8,10.0.0.0/8,192.168.0.0/16
+      - FORCE_HTTPS=${FORCE_HTTPS:-false}
+    networks:
+      - app-network
     volumes:
       - app_data:/app/data
     restart: unless-stopped
     healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3002/api/health"]
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:3002/api/health"]
       interval: 30s
       timeout: 10s
       retries: 3
+    expose:
+      - "3002"
 
 volumes:
   app_data:

docker-init.sh

@@ -3,17 +3,15 @@ set -e
 
 echo "🚀 Container Initialisierung gestartet..."
 
-# Funktion zum Generieren eines sicheren Secrets
 generate_secret() {
     length=$1
     tr -dc 'A-Za-z0-9!@#$%^&*()_+-=' < /dev/urandom | head -c $length
 }
 
-# Prüfe ob .env existiert
+# Create .env if it doesn't exist
 if [ ! -f /app/.env ]; then
     echo "📝 Erstelle .env Datei..."
     
-    # Verwende vorhandenes JWT_SECRET oder generiere ein neues
     if [ -z "$JWT_SECRET" ] || [ "$JWT_SECRET" = "your-secret-key-please-change" ]; then
         export JWT_SECRET=$(generate_secret 64)
         echo "🔑 Automatisch sicheres JWT Secret generiert"
@@ -21,30 +19,37 @@ if [ ! -f /app/.env ]; then
         echo "🔑 Verwende vorhandenes JWT Secret aus Umgebungsvariable"
     fi
     
-    # Erstelle .env aus Template mit envsubst
-    envsubst < /app/.env.template > /app/.env
-    echo "✅ .env Datei erstellt"
+    # Create .env with all proxy settings
+    cat > /app/.env << EOF
+NODE_ENV=production
+JWT_SECRET=${JWT_SECRET}
+TRUST_PROXY_ENABLED=${TRUST_PROXY_ENABLED:-true}
+TRUSTED_PROXY_IPS=${TRUSTED_PROXY_IPS:-172.0.0.0/8,10.0.0.0/8,192.168.0.0/16}
+HOSTNAME=${HOSTNAME:-localhost}
+EOF
     
+    echo "✅ .env Datei erstellt"
 else
     echo "ℹ️  .env Datei existiert bereits"
     
-    # Wenn .env existiert, aber JWT_SECRET Umgebungsvariable gesetzt ist, aktualisiere sie
+    # Update JWT_SECRET if provided
     if [ -n "$JWT_SECRET" ] && [ "$JWT_SECRET" != "your-secret-key-please-change" ]; then
         echo "🔑 Aktualisiere JWT Secret in .env Datei"
-        # Aktualisiere nur das JWT_SECRET in der .env Datei
         sed -i "s/^JWT_SECRET=.*/JWT_SECRET=$JWT_SECRET/" /app/.env
     fi
 fi
 
-# Validiere dass JWT_SECERT nicht der Standardwert ist
+# Validate JWT_SECRET
 if grep -q "JWT_SECRET=your-secret-key-please-change" /app/.env; then
     echo "❌ FEHLER: Standard JWT Secret in .env gefunden!"
     echo "❌ Bitte setzen Sie JWT_SECRET Umgebungsvariable"
     exit 1
 fi
 
-# Setze sichere Berechtigungen
 chmod 600 /app/.env
 
+echo "🔧 Proxy Configuration:"
+echo "   - TRUST_PROXY_ENABLED: ${TRUST_PROXY_ENABLED:-true}"
+echo "   - TRUSTED_PROXY_IPS: ${TRUSTED_PROXY_IPS:-172.0.0.0/8,10.0.0.0/8,192.168.0.0/16}"
 echo "🔧 Starte Anwendung..."
 exec "$@"

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/donpat1to.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Shift Planning App</title>
   </head>

frontend/package.json

@@ -7,7 +7,9 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.28.0",
-    "date-fns": "4.1.0"
+    "date-fns": "4.1.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "vite": "^6.0.7"
   },
   "devDependencies": {
     "@types/node": "20.19.23",
@@ -25,10 +27,12 @@
     "esbuild": "^0.21.0",
     "terser": "5.44.0",
     "babel-plugin-transform-remove-console": "6.9.4",
-    "framer-motion": "12.23.24"
+    "framer-motion": "12.23.24",
+    "file-saver": "2.0.5",
+    "@types/file-saver": "2.0.5"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite dev",
     "build": "tsc && vite build",
     "preview": "vite preview"
   }

frontend/src/App.tsx

@@ -15,6 +15,8 @@ import EmployeeManagement from './pages/Employees/EmployeeManagement';
 import Settings from './pages/Settings/Settings';
 import Help from './pages/Help/Help';
 import Setup from './pages/Setup/Setup';
+import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
+import SecurityWarning from './components/SecurityWarning/SecurityWarning';
 
 // Free Footer Link Pages (always available)
 import FAQ from './components/Layout/FooterLinks/FAQ/FAQ';
@@ -160,14 +162,17 @@ const AppContent: React.FC = () => {
 
 function App() {
   return (
-    <NotificationProvider>
-      <AuthProvider>
-        <Router>
-          <NotificationContainer />
-          <AppContent />
-        </Router>
-      </AuthProvider>
-    </NotificationProvider>
+    <ErrorBoundary>
+      <NotificationProvider>
+        <AuthProvider>
+          <Router>
+            <SecurityWarning />
+            <NotificationContainer />
+            <AppContent />
+          </Router>
+        </AuthProvider>
+      </NotificationProvider>
+    </ErrorBoundary>
   );
 }
 

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,101 @@
+// src/components/ErrorBoundary/ErrorBoundary.tsx
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('🚨 Application Error:', error);
+    console.error('📋 Error Details:', errorInfo);
+    
+    // In production, send to your error reporting service
+    // logErrorToService(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback || (
+        <div style={{ 
+          padding: '40px', 
+          textAlign: 'center',
+          fontFamily: 'Arial, sans-serif'
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '20px' }}>⚠️</div>
+          <h2>Oops! Something went wrong</h2>
+          <p style={{ margin: '20px 0', color: '#666' }}>
+            We encountered an unexpected error. Please try refreshing the page.
+          </p>
+          <div style={{ marginTop: '30px' }}>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#007bff',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                marginRight: '10px'
+              }}
+            >
+              Refresh Page
+            </button>
+            <button
+              onClick={() => this.setState({ hasError: false })}
+              style={{
+                padding: '10px 20px',
+                backgroundColor: '#6c757d',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}
+            >
+              Try Again
+            </button>
+          </div>
+          {process.env.NODE_ENV === 'development' && this.state.error && (
+            <details style={{ 
+              marginTop: '20px', 
+              textAlign: 'left',
+              background: '#f8f9fa',
+              padding: '15px',
+              borderRadius: '4px'
+            }}>
+              <summary>Error Details (Development)</summary>
+              <pre style={{ 
+                whiteSpace: 'pre-wrap',
+                fontSize: '12px',
+                color: '#dc3545'
+              }}>
+                {this.state.error.stack}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/components/SecurityWarning/SecurityWarning.tsx

@@ -0,0 +1,59 @@
+// src/components/SecurityWarning/SecurityWarning.tsx
+import React, { useState, useEffect } from 'react';
+
+const SecurityWarning: React.FC = () => {
+  const [isHttp, setIsHttp] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    // Check if current protocol is HTTP
+    const checkProtocol = () => {
+      setIsHttp(window.location.protocol === 'http:');
+    };
+
+    checkProtocol();
+    window.addEventListener('load', checkProtocol);
+    
+    return () => window.removeEventListener('load', checkProtocol);
+  }, []);
+
+  if (!isHttp || isDismissed) {
+    return null;
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: '#ff6b35',
+      color: 'white',
+      padding: '10px 20px',
+      textAlign: 'center',
+      zIndex: 10000,
+      fontSize: '14px',
+      fontWeight: 'bold',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+    }}>
+      ⚠️ SECURITY WARNING: This site is being accessed over HTTP. 
+      For secure communication, please use HTTPS.
+      <button 
+        onClick={() => setIsDismissed(true)}
+        style={{
+          marginLeft: '15px',
+          background: 'rgba(255,255,255,0.2)',
+          border: '1px solid white',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '3px',
+          cursor: 'pointer'
+        }}
+      >
+        Dismiss
+      </button>
+    </div>
+  );
+};
+
+export default SecurityWarning;

frontend/src/contexts/AuthContext.tsx

@@ -49,12 +49,21 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const checkSetupStatus = async (): Promise<void> => {
     try {
       console.log('🔍 Checking setup status...');
-      const response = await fetch(`${API_BASE_URL}/setup/status`);
+      const startTime = Date.now();
+      
+      const response = await fetch(`${API_BASE_URL}/setup/status`, {
+        signal: AbortSignal.timeout(5000)
+      });
+      
+      console.log(`✅ Setup status response received in ${Date.now() - startTime}ms`);
+      
       if (!response.ok) {
+        console.error('❌ Setup status response not OK:', response.status, response.statusText);
         throw new Error('Setup status check failed');
       }
+      
       const data = await response.json();
-      console.log('✅ Setup status response:', data);
+      console.log('✅ Setup status response data:', data);
       setNeedsSetup(data.needsSetup === true);
     } catch (error) {
       console.error('❌ Error checking setup status:', error);
@@ -95,7 +104,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     }
   };
 
-  // Add the updateUser function
   const updateUser = (userData: Employee) => {
     console.log('🔄 Updating user in auth context:', userData);
     setUser(userData);
@@ -161,6 +169,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     initializeAuth();
   }, []);
 
+  const calculatedNeedsSetup = needsSetup === null ? true : needsSetup;
+
   const value: AuthContextType = {
     user,
     login,
@@ -168,7 +178,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     hasRole,
     loading,
     refreshUser,
-    needsSetup: needsSetup === null ? true : needsSetup,
+    needsSetup: calculatedNeedsSetup,
     checkSetupStatus,
     updateUser,
   };

frontend/src/design/DesignSystem.txt

@@ -19,6 +19,8 @@ export const designTokens = {
       9: '#cda8f0',
       10: '#ebd7fa',
     },
+
+    manager: '#CC0000',
     
     // Semantic Colors
     primary: '#51258f',

frontend/src/hooks/useBackendValidation.ts

@@ -33,35 +33,19 @@ export const useBackendValidation = () => {
         const result = await apiCall();
         return result;
       } catch (error: any) {
-        if (error.validationErrors) {
+        if (error.validationErrors && Array.isArray(error.validationErrors)) {
           setValidationErrors(error.validationErrors);
-          
-          // Show specific validation error messages
-          if (error.validationErrors.length > 0) {
-            // Show the first validation error as the main notification
-            const firstError = error.validationErrors[0];
-            showNotification({
-              type: 'error',
-              title: 'Validierungsfehler',
-              message: firstError.message
-            });
 
-            // If there are multiple errors, show additional notifications for each
-            if (error.validationErrors.length > 1) {
-              // Wait a bit before showing additional notifications to avoid overlap
-              setTimeout(() => {
-                error.validationErrors.slice(1).forEach((validationError: ValidationError, index: number) => {
-                  setTimeout(() => {
-                    showNotification({
-                      type: 'error',
-                      title: 'Weiterer Fehler',
-                      message: validationError.message
-                    });
-                  }, index * 300); // Stagger the notifications
-                });
-              }, 500);
-            }
-          }
+          // Show specific validation error messages from backend
+          error.validationErrors.forEach((validationError: ValidationError, index: number) => {
+            setTimeout(() => {
+              showNotification({
+                type: 'error',
+                title: 'Validierungsfehler',
+                message: `${validationError.field ? `${validationError.field}: ` : ''}${validationError.message}`
+              });
+            }, index * 500); // Stagger the notifications
+          });
         } else {
           // Show notification for other errors
           showNotification({

frontend/src/models/defaults/employeeDefaults.ts

@@ -102,7 +102,7 @@ export const AVAILABILITY_PREFERENCES = {
 } as const;
 
 // Default availability for new employees (all shifts unavailable as level 3)
-// UPDATED: Now uses shiftId instead of timeSlotId + dayOfWeek
+// Now uses shiftId instead of timeSlotId + dayOfWeek
 export function createDefaultAvailabilities(employeeId: string, planId: string, shiftIds: string[]): Omit<EmployeeAvailability, 'id'>[] {
   const availabilities: Omit<EmployeeAvailability, 'id'>[] = [];
   

frontend/src/models/helpers/employeeHelpers.ts

@@ -14,16 +14,16 @@ function generateEmail(firstname: string, lastname: string): string {
 
   const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
   const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
-  
+
   return `${cleanFirstname}.${cleanLastname}@sp.de`;
 }
 
-// UPDATED: Validation for new employee model with employee types
+// Validation for new employee model with employee types
 export function validateEmployeeData(employee: CreateEmployeeRequest): string[] {
   const errors: string[] = [];
 
-  if (employee.password?.length < 6) {
-    errors.push('Password must be at least 6 characters long');
+  if (employee.password?.length < 8) {
+    errors.push('Password must be at least 8 characters long');
   }
 
   if (!employee.firstname?.trim() || employee.firstname.trim().length < 2) {
@@ -71,17 +71,17 @@ export function generateEmployeeEmail(firstname: string, lastname: string): stri
   return generateEmail(firstname, lastname);
 }
 
-// UPDATED: Business logic helpers for new employee types
-export const isManager = (employee: Employee): boolean => 
+// Business logic helpers for new employee types
+export const isManager = (employee: Employee): boolean =>
   employee.employeeType === 'manager';
 
-export const isPersonell = (employee: Employee): boolean => 
+export const isPersonell = (employee: Employee): boolean =>
   employee.employeeType === 'personell';
 
-export const isApprentice = (employee: Employee): boolean => 
+export const isApprentice = (employee: Employee): boolean =>
   employee.employeeType === 'apprentice';
 
-export const isGuest = (employee: Employee): boolean => 
+export const isGuest = (employee: Employee): boolean =>
   employee.employeeType === 'guest';
 
 export const isInternal = (employee: Employee): boolean =>
@@ -90,25 +90,25 @@ export const isInternal = (employee: Employee): boolean =>
 export const isExternal = (employee: Employee): boolean =>
   employee.employeeType === 'guest';
 
-// UPDATED: Trainee logic - now based on isTrainee field for personell type
-export const isTrainee = (employee: Employee): boolean => 
+// Trainee logic - now based on isTrainee field for personell type
+export const isTrainee = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && employee.isTrainee;
 
-export const isExperienced = (employee: Employee): boolean => 
+export const isExperienced = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && !employee.isTrainee;
 
 // Role-based helpers
-export const isAdmin = (employee: Employee): boolean => 
+export const isAdmin = (employee: Employee): boolean =>
   employee.roles?.includes('admin') || false;
 
-export const isMaintenance = (employee: Employee): boolean => 
+export const isMaintenance = (employee: Employee): boolean =>
   employee.roles?.includes('maintenance') || false;
 
-export const isUser = (employee: Employee): boolean => 
+export const isUser = (employee: Employee): boolean =>
   employee.roles?.includes('user') || false;
 
-// UPDATED: Work alone permission - managers and experienced personell can work alone
-export const canEmployeeWorkAlone = (employee: Employee): boolean => 
+// Work alone permission - managers and experienced personell can work alone
+export const canEmployeeWorkAlone = (employee: Employee): boolean =>
   employee.canWorkAlone && (isManager(employee) || isExperienced(employee));
 
 // Helper for full name display
@@ -134,7 +134,7 @@ export function validateAvailabilityData(availability: Omit<EmployeeAvailability
   return errors;
 }
 
-// UPDATED: Helper to get employee type category
+// Helper to get employee type category
 export const getEmployeeCategory = (employee: Employee): 'internal' | 'external' => {
   return isInternal(employee) ? 'internal' : 'external';
 };

frontend/src/models/helpers/shiftPlanHelpers.ts

@@ -78,7 +78,7 @@ export function calculateTotalRequiredEmployees(plan: ShiftPlan): number {
   return plan.shifts.reduce((total, shift) => total + shift.requiredEmployees, 0);
 }
 
-// UPDATED: Get scheduled shift by date and time slot
+// Get scheduled shift by date and time slot
 export function getScheduledShiftByDateAndTime(
   plan: ShiftPlan, 
   date: string, 

frontend/src/models/scheduling.ts

@@ -2,7 +2,7 @@
 import { Employee } from './Employee.js';
 import { ShiftPlan } from './ShiftPlan.js';
 
-// Updated Availability interface to match new schema
+// Availability interface to match
 export interface Availability {
   id: string;
   employeeId: string;

frontend/src/pages/Auth/Login.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/Auth/Login.tsx - UPDATED PASSWORD SECTION
+// frontend/src/pages/Auth/Login.tsx
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';

frontend/src/pages/Employees/components/EmployeeForm.tsx

@@ -23,12 +23,12 @@ interface EmployeeFormData {
   lastname: string;
   email: string;
   password: string;
-  
+
   // Step 2: Mitarbeiterkategorie
   employeeType: EmployeeType;
   contractType: ContractType | undefined;
   isTrainee: boolean;
-  
+
   // Step 3: Berechtigungen & Status
   roles: string[];
   canWorkAlone: boolean;
@@ -64,12 +64,12 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
     canWorkAlone: false,
     isActive: true
   });
-  
+
   const [passwordForm, setPasswordForm] = useState<PasswordFormData>({
     newPassword: '',
     confirmPassword: ''
   });
-  
+
   const [showPasswordSection, setShowPasswordSection] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
@@ -116,7 +116,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
 
     const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
     const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
-    
+
     return `${cleanFirstname}.${cleanLastname}@sp.de`;
   };
 
@@ -177,7 +177,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
   const goToNextStep = (): void => {
     setError('');
     clearErrors(); // Clear previous validation errors
-    
+
     if (!validateCurrentStep(currentStep)) {
       return;
     }
@@ -198,7 +198,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
   const handleStepChange = (stepIndex: number): void => {
     setError('');
     clearErrors(); // Clear validation errors when changing steps
-    
+
     // Nur erlauben, zu bereits validierten Schritten zu springen
     if (stepIndex <= currentStep + 1) {
       // Vor dem Wechsel validieren
@@ -212,7 +212,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
   // ===== FORM HANDLER =====
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value, type } = e.target;
-    
+
     setFormData(prev => ({
       ...prev,
       [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
@@ -264,9 +264,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
     }
 
     // Determine if can work alone based on employee type
-    const canWorkAlone = employeeType === 'manager' || 
-                        (employeeType === 'personell' && !formData.isTrainee);
-    
+    const canWorkAlone = employeeType === 'manager' ||
+      (employeeType === 'personell' && !formData.isTrainee);
+
     // Reset isTrainee if not personell
     const isTrainee = employeeType === 'personell' ? formData.isTrainee : false;
 
@@ -311,9 +311,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
           canWorkAlone: formData.canWorkAlone,
           isTrainee: formData.isTrainee
         };
-        
+
         // Use executeWithValidation ONLY for the API call
-        await executeWithValidation(() => 
+        await executeWithValidation(() =>
           employeeService.createEmployee(createData)
         );
       } else if (employee) {
@@ -327,9 +327,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
           isActive: formData.isActive,
           isTrainee: formData.isTrainee
         };
-        
+
         // Use executeWithValidation for the update call
-        await executeWithValidation(() => 
+        await executeWithValidation(() =>
           employeeService.updateEmployee(employee.id, updateData)
         );
 
@@ -343,12 +343,13 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
           await executeWithValidation(() =>
             employeeService.changePassword(employee.id, {
               currentPassword: '',
-              newPassword: passwordForm.newPassword
+              newPassword: passwordForm.newPassword,
+              confirmPassword: passwordForm.confirmPassword
             })
           );
         }
       }
-      
+
       return Promise.resolve();
     } catch (err: any) {
       // Only set error if it's not a validation error (validation errors are handled by the hook)
@@ -364,9 +365,9 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
   const isStepCompleted = (stepIndex: number): boolean => {
     switch (stepIndex) {
       case 0:
-        return !!formData.firstname.trim() && 
-               !!formData.lastname.trim();
-               // REMOVE: (mode === 'edit' || formData.password.length >= 6)
+        return !!formData.firstname.trim() &&
+          !!formData.lastname.trim();
+      // REMOVE: (mode === 'edit' || formData.password.length >= 6)
       case 1:
         return !!formData.employeeType;
       case 2:
@@ -391,7 +392,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
     validationErrors,
     getFieldError,
     hasErrors,
-    
+
     // Actions
     goToNextStep,
     goToPrevStep,
@@ -405,7 +406,7 @@ const useEmployeeForm = (mode: 'create' | 'edit', employee?: Employee) => {
     handleSubmit,
     setShowPasswordSection,
     clearErrors,
-    
+
     // Helpers
     isStepCompleted
   };
@@ -430,8 +431,8 @@ interface StepContentProps {
   hasErrors: (fieldName?: string) => boolean;
 }
 
-const Step1Content: React.FC<StepContentProps> = ({ 
-  formData, 
+const Step1Content: React.FC<StepContentProps> = ({
+  formData,
   onInputChange,
   emailPreview,
   mode
@@ -439,9 +440,9 @@ const Step1Content: React.FC<StepContentProps> = ({
   <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
       <div>
-        <label style={{ 
-          display: 'block', 
-          marginBottom: '0.5rem', 
+        <label style={{
+          display: 'block',
+          marginBottom: '0.5rem',
           fontWeight: '600',
           color: '#495057'
         }}>
@@ -465,9 +466,9 @@ const Step1Content: React.FC<StepContentProps> = ({
       </div>
 
       <div>
-        <label style={{ 
-          display: 'block', 
-          marginBottom: '0.5rem', 
+        <label style={{
+          display: 'block',
+          marginBottom: '0.5rem',
           fontWeight: '600',
           color: '#495057'
         }}>
@@ -493,17 +494,17 @@ const Step1Content: React.FC<StepContentProps> = ({
 
     {/* Email Preview */}
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
         E-Mail Adresse (automatisch generiert)
       </label>
-      <div style={{ 
-        padding: '0.75rem', 
-        backgroundColor: '#e9ecef', 
+      <div style={{
+        padding: '0.75rem',
+        backgroundColor: '#e9ecef',
         border: '1px solid #ced4da',
         borderRadius: '6px',
         color: '#495057',
@@ -512,8 +513,8 @@ const Step1Content: React.FC<StepContentProps> = ({
       }}>
         {emailPreview || 'max.mustermann@sp.de'}
       </div>
-      <div style={{ 
-        fontSize: '0.875rem', 
+      <div style={{
+        fontSize: '0.875rem',
         color: '#6c757d',
         marginTop: '0.25rem'
       }}>
@@ -523,9 +524,9 @@ const Step1Content: React.FC<StepContentProps> = ({
 
     {mode === 'create' && (
       <div>
-        <label style={{ 
-          display: 'block', 
-          marginBottom: '0.5rem', 
+        <label style={{
+          display: 'block',
+          marginBottom: '0.5rem',
           fontWeight: '600',
           color: '#495057'
         }}>
@@ -546,8 +547,8 @@ const Step1Content: React.FC<StepContentProps> = ({
           }}
           placeholder="Passwort eingeben"
         />
-        <div style={{ 
-          fontSize: '0.875rem', 
+        <div style={{
+          fontSize: '0.875rem',
           color: '#6c757d',
           marginTop: '0.25rem'
         }}>
@@ -558,7 +559,7 @@ const Step1Content: React.FC<StepContentProps> = ({
   </div>
 );
 
-const Step2Content: React.FC<StepContentProps> = ({ 
+const Step2Content: React.FC<StepContentProps> = ({
   formData,
   onEmployeeTypeChange,
   onTraineeChange,
@@ -581,11 +582,11 @@ const Step2Content: React.FC<StepContentProps> = ({
       {/* Mitarbeiter Kategorie */}
       <div>
         <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3>
-        
+
         {employeeTypeError && (
-          <div style={{ 
-            color: '#dc3545', 
-            fontSize: '0.875rem', 
+          <div style={{
+            color: '#dc3545',
+            fontSize: '0.875rem',
             marginBottom: '1rem',
             padding: '0.5rem',
             backgroundColor: '#f8d7da',
@@ -595,10 +596,10 @@ const Step2Content: React.FC<StepContentProps> = ({
             {employeeTypeError}
           </div>
         )}
-        
+
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
           {Object.values(EMPLOYEE_TYPE_CONFIG).map(type => (
-            <div 
+            <div
               key={type.value}
               style={{
                 display: 'flex',
@@ -626,16 +627,16 @@ const Step2Content: React.FC<StepContentProps> = ({
                 }}
               />
               <div style={{ flex: 1 }}>
-                <div style={{ 
-                  fontWeight: 'bold', 
+                <div style={{
+                  fontWeight: 'bold',
                   color: '#2c3e50',
                   marginBottom: '4px',
                   fontSize: '16px'
                 }}>
                   {type.label}
                 </div>
-                <div style={{ 
-                  fontSize: '14px', 
+                <div style={{
+                  fontSize: '14px',
                   color: '#7f8c8d',
                   lineHeight: '1.4'
                 }}>
@@ -658,10 +659,10 @@ const Step2Content: React.FC<StepContentProps> = ({
 
         {/* Trainee checkbox for personell type */}
         {formData.employeeType === 'personell' && (
-          <div style={{ 
+          <div style={{
             marginTop: '1rem',
-            display: 'flex', 
-            alignItems: 'center', 
+            display: 'flex',
+            alignItems: 'center',
             gap: '10px',
             padding: '1rem',
             border: '1px solid #e0e0e0',
@@ -692,11 +693,11 @@ const Step2Content: React.FC<StepContentProps> = ({
       {hasRole(['admin']) && showContractType && (
         <div>
           <h3 style={{ margin: '0 0 1rem 0', color: '#0c5460' }}>📝 Vertragstyp</h3>
-          
+
           {contractTypeError && (
-            <div style={{ 
-              color: '#dc3545', 
-              fontSize: '0.875rem', 
+            <div style={{
+              color: '#dc3545',
+              fontSize: '0.875rem',
               marginBottom: '1rem',
               padding: '0.5rem',
               backgroundColor: '#f8d7da',
@@ -706,16 +707,16 @@ const Step2Content: React.FC<StepContentProps> = ({
               {contractTypeError}
             </div>
           )}
-          
+
           <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
             {contractTypeOptions.map(contract => {
               const isFlexibleDisabled = contract.value === 'flexible' && formData.employeeType === 'personell';
-              const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') && 
-                                        (formData.employeeType === 'manager' || formData.employeeType === 'apprentice');
+              const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') &&
+                (formData.employeeType === 'manager' || formData.employeeType === 'apprentice');
               const isDisabled = isFlexibleDisabled || isSmallLargeDisabled;
-              
+
               return (
-                <div 
+                <div
                   key={contract.value}
                   style={{
                     display: 'flex',
@@ -745,8 +746,8 @@ const Step2Content: React.FC<StepContentProps> = ({
                     }}
                   />
                   <div style={{ flex: 1 }}>
-                    <div style={{ 
-                      fontWeight: 'bold', 
+                    <div style={{
+                      fontWeight: 'bold',
                       color: '#2c3e50',
                       marginBottom: '4px',
                       fontSize: '16px'
@@ -773,8 +774,8 @@ const Step2Content: React.FC<StepContentProps> = ({
                         </span>
                       )}
                     </div>
-                    <div style={{ 
-                      fontSize: '14px', 
+                    <div style={{
+                      fontSize: '14px',
                       color: '#7f8c8d',
                       lineHeight: '1.4'
                     }}>
@@ -801,7 +802,7 @@ const Step2Content: React.FC<StepContentProps> = ({
   );
 };
 
-const Step3Content: React.FC<StepContentProps> = ({ 
+const Step3Content: React.FC<StepContentProps> = ({
   formData,
   onInputChange,
   onRoleChange,
@@ -816,11 +817,11 @@ const Step3Content: React.FC<StepContentProps> = ({
       {/* Eigenständigkeit */}
       <div>
         <h3 style={{ margin: '0 0 1rem 0', color: '#495057' }}>🎯 Eigenständigkeit</h3>
-        
+
         {canWorkAloneError && (
-          <div style={{ 
-            color: '#dc3545', 
-            fontSize: '0.875rem', 
+          <div style={{
+            color: '#dc3545',
+            fontSize: '0.875rem',
             marginBottom: '1rem',
             padding: '0.5rem',
             backgroundColor: '#f8d7da',
@@ -830,10 +831,10 @@ const Step3Content: React.FC<StepContentProps> = ({
             {canWorkAloneError}
           </div>
         )}
-        
-        <div style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
+
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
           gap: '15px',
           padding: '1rem',
           border: '1px solid #e0e0e0',
@@ -847,16 +848,16 @@ const Step3Content: React.FC<StepContentProps> = ({
             checked={formData.canWorkAlone}
             onChange={onInputChange}
             disabled={formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)}
-            style={{ 
-              width: '20px', 
+            style={{
+              width: '20px',
               height: '20px',
               opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
             }}
           />
           <div style={{ flex: 1 }}>
-            <label htmlFor="canWorkAlone" style={{ 
-              fontWeight: 'bold', 
-              color: '#2c3e50', 
+            <label htmlFor="canWorkAlone" style={{
+              fontWeight: 'bold',
+              color: '#2c3e50',
               display: 'block',
               opacity: (formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) ? 0.5 : 1
             }}>
@@ -864,11 +865,11 @@ const Step3Content: React.FC<StepContentProps> = ({
               {(formData.employeeType === 'manager' || (formData.employeeType === 'personell' && formData.isTrainee)) && ' (Automatisch festgelegt)'}
             </label>
             <div style={{ fontSize: '14px', color: '#7f8c8d' }}>
-              {formData.employeeType === 'manager' 
+              {formData.employeeType === 'manager'
                 ? 'Chefs sind automatisch als eigenständig markiert.'
                 : formData.employeeType === 'personell' && formData.isTrainee
-                ? 'Auszubildende können nicht als eigenständig markiert werden.'
-                : 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.'
+                  ? 'Auszubildende können nicht als eigenständig markiert werden.'
+                  : 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.'
               }
             </div>
           </div>
@@ -890,11 +891,11 @@ const Step3Content: React.FC<StepContentProps> = ({
       {hasRole(['admin']) && (
         <div>
           <h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>⚙️ Systemrollen</h3>
-          
+
           {rolesError && (
-            <div style={{ 
-              color: '#dc3545', 
-              fontSize: '0.875rem', 
+            <div style={{
+              color: '#dc3545',
+              fontSize: '0.875rem',
               marginBottom: '1rem',
               padding: '0.5rem',
               backgroundColor: '#f8d7da',
@@ -904,10 +905,10 @@ const Step3Content: React.FC<StepContentProps> = ({
               {rolesError}
             </div>
           )}
-          
+
           <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
             {ROLE_CONFIG.map(role => (
-              <div 
+              <div
                 key={role.value}
                 style={{
                   display: 'flex',
@@ -951,7 +952,7 @@ const Step3Content: React.FC<StepContentProps> = ({
   );
 };
 
-const Step4Content: React.FC<StepContentProps> = ({ 
+const Step4Content: React.FC<StepContentProps> = ({
   formData,
   passwordForm,
   onInputChange,
@@ -970,7 +971,7 @@ const Step4Content: React.FC<StepContentProps> = ({
       {/* Passwort ändern */}
       <div>
         <h3 style={{ margin: '0 0 1rem 0', color: '#856404' }}>🔒 Passwort zurücksetzen</h3>
-        
+
         {!showPasswordSection ? (
           <button
             type="button"
@@ -1009,10 +1010,10 @@ const Step4Content: React.FC<StepContentProps> = ({
                 placeholder="Mindestens 6 Zeichen"
               />
               {newPasswordError && (
-                <div style={{ 
-                  color: '#dc3545', 
-                  fontSize: '0.875rem', 
-                  marginTop: '0.25rem' 
+                <div style={{
+                  color: '#dc3545',
+                  fontSize: '0.875rem',
+                  marginTop: '0.25rem'
                 }}>
                   {newPasswordError}
                 </div>
@@ -1039,10 +1040,10 @@ const Step4Content: React.FC<StepContentProps> = ({
                 placeholder="Passwort wiederholen"
               />
               {confirmPasswordError && (
-                <div style={{ 
-                  color: '#dc3545', 
-                  fontSize: '0.875rem', 
-                  marginTop: '0.25rem' 
+                <div style={{
+                  color: '#dc3545',
+                  fontSize: '0.875rem',
+                  marginTop: '0.25rem'
                 }}>
                   {confirmPasswordError}
                 </div>
@@ -1074,9 +1075,9 @@ const Step4Content: React.FC<StepContentProps> = ({
 
       {/* Aktiv Status */}
       {mode === 'edit' && (
-        <div style={{ 
-          display: 'flex', 
-          alignItems: 'center', 
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
           gap: '10px',
           padding: '1rem',
           border: `1px solid ${isActiveError ? '#dc3545' : '#e0e0e0'}`,
@@ -1099,10 +1100,10 @@ const Step4Content: React.FC<StepContentProps> = ({
               Inaktive Mitarbeiter können sich nicht anmelden und werden nicht für Schichten eingeplant.
             </div>
             {isActiveError && (
-              <div style={{ 
-                color: '#dc3545', 
-                fontSize: '0.875rem', 
-                marginTop: '0.25rem' 
+              <div style={{
+                color: '#dc3545',
+                fontSize: '0.875rem',
+                marginTop: '0.25rem'
               }}>
                 {isActiveError}
               </div>
@@ -1151,9 +1152,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
 
   // Inline Step Indicator Komponente (wie in Setup.tsx)
   const StepIndicator: React.FC = () => (
-    <div style={{ 
-      display: 'flex', 
-      justifyContent: 'space-between', 
+    <div style={{
+      display: 'flex',
+      justifyContent: 'space-between',
       alignItems: 'center',
       marginBottom: '2.5rem',
       position: 'relative',
@@ -1169,18 +1170,18 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
         backgroundColor: '#e9ecef',
         zIndex: 1
       }} />
-      
+
       {steps.map((step, index) => {
         const isCompleted = index < currentStep;
         const isCurrent = index === currentStep;
         const isClickable = index <= currentStep + 1;
-        
+
         return (
-          <div 
+          <div
             key={step.id}
-            style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
               zIndex: 2,
               position: 'relative',
@@ -1210,18 +1211,18 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
             >
               {index + 1}
             </button>
-            
+
             <div style={{ textAlign: 'center' }}>
-              <div style={{ 
-                fontSize: '14px', 
+              <div style={{
+                fontSize: '14px',
                 fontWeight: isCurrent ? '600' : '400',
                 color: isCurrent ? '#51258f' : '#6c757d'
               }}>
                 {step.title}
               </div>
               {step.subtitle && (
-                <div style={{ 
-                  fontSize: '12px', 
+                <div style={{
+                  fontSize: '12px',
                   color: '#6c757d',
                   marginTop: '2px'
                 }}>
@@ -1275,8 +1276,8 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
       showNotification({ // Changed from addNotification to showNotification
         type: 'success',
         title: 'Erfolg',
-        message: mode === 'create' 
-          ? 'Mitarbeiter wurde erfolgreich erstellt' 
+        message: mode === 'create'
+          ? 'Mitarbeiter wurde erfolgreich erstellt'
           : 'Mitarbeiter wurde erfolgreich aktualisiert'
       });
       onSuccess();
@@ -1287,11 +1288,11 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
 
   const getNextButtonText = (): string => {
     if (loading) return '⏳ Wird gespeichert...';
-    
+
     if (currentStep === steps.length - 1) {
       return mode === 'create' ? 'Mitarbeiter erstellen' : 'Änderungen speichern';
     }
-    
+
     return 'Weiter →';
   };
 
@@ -1307,8 +1308,8 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
       border: '1px solid #e0e0e0',
       boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
     }}>
-      <h2 style={{ 
-        margin: '0 0 1.5rem 0', 
+      <h2 style={{
+        margin: '0 0 1.5rem 0',
         color: '#2c3e50',
         borderBottom: '2px solid #f0f0f0',
         paddingBottom: '1rem',
@@ -1322,16 +1323,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
 
       {/* Aktueller Schritt Titel und Beschreibung */}
       <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
-        <h3 style={{ 
-          fontSize: '1.25rem', 
-          fontWeight: 'bold', 
+        <h3 style={{
+          fontSize: '1.25rem',
+          fontWeight: 'bold',
           marginBottom: '0.5rem',
           color: '#2c3e50'
         }}>
           {steps[currentStep].title}
         </h3>
         {steps[currentStep].subtitle && (
-          <p style={{ 
+          <p style={{
             color: '#6c757d',
             fontSize: '1rem'
           }}>
@@ -1346,9 +1347,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
       </div>
 
       {/* Navigations-Buttons */}
-      <div style={{ 
-        marginTop: '2rem', 
-        display: 'flex', 
+      <div style={{
+        marginTop: '2rem',
+        display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center'
       }}>
@@ -1368,7 +1369,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
         >
           {currentStep === 0 ? 'Abbrechen' : '← Zurück'}
         </button>
-        
+
         <button
           onClick={isLastStep ? handleFinalSubmit : goToNextStep}
           disabled={loading}
@@ -1390,16 +1391,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
 
       {/* Zusätzliche Informationen */}
       {isLastStep && !loading && (
-        <div style={{ 
-          marginTop: '1.5rem', 
-          textAlign: 'center', 
-          color: '#6c757d', 
+        <div style={{
+          marginTop: '1.5rem',
+          textAlign: 'center',
+          color: '#6c757d',
           fontSize: '0.9rem',
           padding: '1rem',
           backgroundColor: '#f8f9fa',
           borderRadius: '6px'
         }}>
-          {mode === 'create' 
+          {mode === 'create'
             ? 'Überprüfen Sie alle Daten, bevor Sie den Mitarbeiter erstellen'
             : 'Überprüfen Sie alle Änderungen, bevor Sie sie speichern'
           }

frontend/src/pages/Employees/components/EmployeeList.tsx

@@ -15,7 +15,7 @@ interface EmployeeListProps {
 type SortField = 'name' | 'employeeType' | 'canWorkAlone' | 'role' | 'lastLogin';
 type SortDirection = 'asc' | 'desc';
 
-// FIXED: Use the actual employee types from the Employee interface
+// Use the actual employee types from the Employee interface
 type EmployeeType = 'manager' | 'personell' | 'apprentice' | 'guest';
 
 const EmployeeList: React.FC<EmployeeListProps> = ({
@@ -130,7 +130,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
   const getEmployeeTypeBadge = (type: EmployeeType, isTrainee: boolean = false) => {
     const config = EMPLOYEE_TYPE_CONFIG[type];
 
-    // FIXED: Updated color mapping for actual employee types
+    // Color mapping for actual employee types
     const bgColor =
       type === 'manager'
         ? '#fadbd8' // light red
@@ -326,7 +326,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         </div>
 
         {sortedEmployees.map(employee => {
-          // FIXED: Type assertion to ensure type safety
+          // Type assertion to ensure type safety
           const employeeType = getEmployeeTypeBadge(employee.employeeType as EmployeeType, employee.isTrainee);
           const independence = getIndependenceBadge(employee.canWorkAlone);
           const roleInfo = getRoleBadge(employee.roles);

frontend/src/pages/Settings/Settings.tsx

@@ -1,8 +1,9 @@
-// frontend/src/pages/Settings/Settings.tsx - UPDATED WITH NEW STYLES
+// frontend/src/pages/Settings/Settings.tsx - UPDATED WITH VALIDATION STRATEGY
 import React, { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import { employeeService } from '../../services/employeeService';
 import { useNotification } from '../../contexts/NotificationContext';
+import { useBackendValidation } from '../../hooks/useBackendValidation';
 import AvailabilityManager from '../Employees/components/AvailabilityManager';
 import { Employee } from '../../models/Employee';
 import { styles } from './type/SettingsType';
@@ -10,11 +11,12 @@ import { styles } from './type/SettingsType';
 const Settings: React.FC = () => {
   const { user: currentUser, updateUser } = useAuth();
   const { showNotification } = useNotification();
+  const { executeWithValidation, clearErrors, isSubmitting } = useBackendValidation();
+
   const [activeTab, setActiveTab] = useState<'profile' | 'password' | 'availability'>('profile');
-  const [loading, setLoading] = useState(false);
   const [showAvailabilityManager, setShowAvailabilityManager] = useState(false);
-  
-  // Profile form state - updated for firstname/lastname
+
+  // Profile form state
   const [profileForm, setProfileForm] = useState({
     firstname: currentUser?.firstname || '',
     lastname: currentUser?.lastname || ''
@@ -73,7 +75,7 @@ const Settings: React.FC = () => {
     }));
   };
 
-  // Password visibility handlers for current password
+  // Password visibility handlers
   const handleCurrentPasswordMouseDown = () => {
     currentPasswordTimeoutRef.current = setTimeout(() => {
       setShowCurrentPassword(true);
@@ -88,7 +90,6 @@ const Settings: React.FC = () => {
     setShowCurrentPassword(false);
   };
 
-  // Password visibility handlers for new password
   const handleNewPasswordMouseDown = () => {
     newPasswordTimeoutRef.current = setTimeout(() => {
       setShowNewPassword(true);
@@ -103,7 +104,6 @@ const Settings: React.FC = () => {
     setShowNewPassword(false);
   };
 
-  // Password visibility handlers for confirm password
   const handleConfirmPasswordMouseDown = () => {
     confirmPasswordTimeoutRef.current = setTimeout(() => {
       setShowConfirmPassword(true);
@@ -129,7 +129,6 @@ const Settings: React.FC = () => {
     cleanup();
   };
 
-  // Prevent context menu
   const handleContextMenu = (e: React.MouseEvent) => {
     e.preventDefault();
   };
@@ -138,40 +137,46 @@ const Settings: React.FC = () => {
     e.preventDefault();
     if (!currentUser) return;
 
-    // Validation
-    if (!profileForm.firstname.trim() || !profileForm.lastname.trim()) {
+    // BASIC FRONTEND VALIDATION: Only check required fields
+    if (!profileForm.firstname.trim()) {
       showNotification({
         type: 'error',
         title: 'Fehler',
-        message: 'Vorname und Nachname sind erforderlich'
+        message: 'Vorname ist erforderlich'
+      });
+      return;
+    }
+
+    if (!profileForm.lastname.trim()) {
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Nachname ist erforderlich'
       });
       return;
     }
 
     try {
-      setLoading(true);
-      await employeeService.updateEmployee(currentUser.id, {
-        firstname: profileForm.firstname.trim(),
-        lastname: profileForm.lastname.trim()
-      });
+      // Use executeWithValidation to handle backend validation
+      await executeWithValidation(async () => {
+        const updatedEmployee = await employeeService.updateEmployee(currentUser.id, {
+          firstname: profileForm.firstname.trim(),
+          lastname: profileForm.lastname.trim()
+        });
 
-      // Update the auth context with new user data
-      const updatedUser = await employeeService.getEmployee(currentUser.id);
-      updateUser(updatedUser);
+        // Update the auth context with new user data
+        updateUser(updatedEmployee);
 
-      showNotification({
-        type: 'success',
-        title: 'Erfolg',
-        message: 'Profil erfolgreich aktualisiert'
+        showNotification({
+          type: 'success',
+          title: 'Erfolg',
+          message: 'Profil erfolgreich aktualisiert'
+        });
       });
-    } catch (error: any) {
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: error.message || 'Profil konnte nicht aktualisiert werden'
-      });
-    } finally {
-      setLoading(false);
+    } catch (error) {
+      // Backend validation errors are already handled by executeWithValidation
+      // We only need to handle unexpected errors here
+      console.error('Unexpected error:', error);
     }
   };
 
@@ -179,12 +184,30 @@ const Settings: React.FC = () => {
     e.preventDefault();
     if (!currentUser) return;
 
-    // Validation
-    if (passwordForm.newPassword.length < 6) {
+    // BASIC FRONTEND VALIDATION: Only check minimum requirements
+    if (!passwordForm.currentPassword) {
       showNotification({
         type: 'error',
         title: 'Fehler',
-        message: 'Das neue Passwort muss mindestens 6 Zeichen lang sein'
+        message: 'Aktuelles Passwort ist erforderlich'
+      });
+      return;
+    }
+
+    if (!passwordForm.newPassword) {
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Neues Passwort ist erforderlich'
+      });
+      return;
+    }
+
+    if (passwordForm.newPassword.length < 8) {
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Das neue Passwort muss mindestens 8 Zeichen lang sein'
       });
       return;
     }
@@ -199,34 +222,30 @@ const Settings: React.FC = () => {
     }
 
     try {
-      setLoading(true);
-      
-      // Use the actual password change endpoint
-      await employeeService.changePassword(currentUser.id, {
-        currentPassword: passwordForm.currentPassword,
-        newPassword: passwordForm.newPassword
-      });
+      // Use executeWithValidation to handle backend validation
+      await executeWithValidation(async () => {
+        await employeeService.changePassword(currentUser.id, {
+          currentPassword: passwordForm.currentPassword,
+          newPassword: passwordForm.newPassword,
+          confirmPassword: passwordForm.confirmPassword
+        });
 
-      showNotification({
-        type: 'success',
-        title: 'Erfolg',
-        message: 'Passwort erfolgreich geändert'
-      });
+        showNotification({
+          type: 'success',
+          title: 'Erfolg',
+          message: 'Passwort erfolgreich geändert'
+        });
 
-      // Clear password form
-      setPasswordForm({
-        currentPassword: '',
-        newPassword: '',
-        confirmPassword: ''
+        // Clear password form
+        setPasswordForm({
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: ''
+        });
       });
-    } catch (error: any) {
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: error.message || 'Passwort konnte nicht geändert werden'
-      });
-    } finally {
-      setLoading(false);
+    } catch (error) {
+      // Backend validation errors are already handled by executeWithValidation
+      console.error('Unexpected error:', error);
     }
   };
 
@@ -243,12 +262,18 @@ const Settings: React.FC = () => {
     setShowAvailabilityManager(false);
   };
 
+  // Clear validation errors when switching tabs
+  const handleTabChange = (tab: 'profile' | 'password' | 'availability') => {
+    clearErrors();
+    setActiveTab(tab);
+  };
+
   if (!currentUser) {
-    return <div style={{ 
-      textAlign: 'center', 
-      padding: '3rem', 
-      color: '#666', 
-      fontSize: '1.1rem' 
+    return <div style={{
+      textAlign: 'center',
+      padding: '3rem',
+      color: '#666',
+      fontSize: '1.1rem'
     }}>Nicht eingeloggt</div>;
   }
 
@@ -270,10 +295,10 @@ const Settings: React.FC = () => {
           <h1 style={styles.title}>Einstellungen</h1>
           <div style={styles.subtitle}>Verwalten Sie Ihre Kontoeinstellungen und Präferenzen</div>
         </div>
-        
+
         <div style={styles.tabs}>
           <button
-            onClick={() => setActiveTab('profile')}
+            onClick={() => handleTabChange('profile')}
             style={{
               ...styles.tab,
               ...(activeTab === 'profile' ? styles.tabActive : {})
@@ -299,9 +324,9 @@ const Settings: React.FC = () => {
               <span style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '2px' }}>Persönliche Informationen</span>
             </div>
           </button>
-          
+
           <button
-            onClick={() => setActiveTab('password')}
+            onClick={() => handleTabChange('password')}
             style={{
               ...styles.tab,
               ...(activeTab === 'password' ? styles.tabActive : {})
@@ -327,9 +352,9 @@ const Settings: React.FC = () => {
               <span style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '2px' }}>Sicherheitseinstellungen</span>
             </div>
           </button>
-          
+
           <button
-            onClick={() => setActiveTab('availability')}
+            onClick={() => handleTabChange('availability')}
             style={{
               ...styles.tab,
               ...(activeTab === 'availability' ? styles.tabActive : {})
@@ -369,7 +394,7 @@ const Settings: React.FC = () => {
                 Verwalten Sie Ihre persönlichen Informationen und Kontaktdaten
               </p>
             </div>
-            
+
             <form onSubmit={handleProfileUpdate} style={{ marginTop: '2rem' }}>
               <div style={styles.formGrid}>
                 {/* Read-only information */}
@@ -480,28 +505,28 @@ const Settings: React.FC = () => {
               <div style={styles.actions}>
                 <button
                   type="submit"
-                  disabled={loading || !profileForm.firstname.trim() || !profileForm.lastname.trim()}
+                  disabled={isSubmitting || !profileForm.firstname.trim() || !profileForm.lastname.trim()}
                   style={{
                     ...styles.button,
                     ...styles.buttonPrimary,
-                    ...((loading || !profileForm.firstname.trim() || !profileForm.lastname.trim()) ? styles.buttonDisabled : {})
+                    ...((isSubmitting || !profileForm.firstname.trim() || !profileForm.lastname.trim()) ? styles.buttonDisabled : {})
                   }}
                   onMouseEnter={(e) => {
-                    if (!loading && profileForm.firstname.trim() && profileForm.lastname.trim()) {
+                    if (!isSubmitting && profileForm.firstname.trim() && profileForm.lastname.trim()) {
                       e.currentTarget.style.background = styles.buttonPrimaryHover.background;
                       e.currentTarget.style.transform = styles.buttonPrimaryHover.transform;
                       e.currentTarget.style.boxShadow = styles.buttonPrimaryHover.boxShadow;
                     }
                   }}
                   onMouseLeave={(e) => {
-                    if (!loading && profileForm.firstname.trim() && profileForm.lastname.trim()) {
+                    if (!isSubmitting && profileForm.firstname.trim() && profileForm.lastname.trim()) {
                       e.currentTarget.style.background = styles.buttonPrimary.background;
                       e.currentTarget.style.transform = 'none';
                       e.currentTarget.style.boxShadow = styles.buttonPrimary.boxShadow;
                     }
                   }}
                 >
-                  {loading ? '⏳ Wird gespeichert...' : 'Profil aktualisieren'}
+                  {isSubmitting ? '⏳ Wird gespeichert...' : 'Profil aktualisieren'}
                 </button>
               </div>
             </form>
@@ -517,7 +542,7 @@ const Settings: React.FC = () => {
                 Aktualisieren Sie Ihr Passwort für erhöhte Sicherheit
               </p>
             </div>
-            
+
             <form onSubmit={handlePasswordUpdate} style={{ marginTop: '2rem' }}>
               <div style={styles.formGridCompact}>
                 {/* Current Password Field */}
@@ -575,9 +600,9 @@ const Settings: React.FC = () => {
                       value={passwordForm.newPassword}
                       onChange={handlePasswordChange}
                       required
-                      minLength={6}
+                      minLength={8}
                       style={styles.fieldInputWithIcon}
-                      placeholder="Mindestens 6 Zeichen"
+                      placeholder="Mindestens 8 Zeichen"
                       onFocus={(e) => {
                         e.target.style.borderColor = '#1a1325';
                         e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
@@ -606,7 +631,7 @@ const Settings: React.FC = () => {
                     </button>
                   </div>
                   <div style={styles.fieldHint}>
-                    Das Passwort muss mindestens 6 Zeichen lang sein.
+                    Das Passwort muss mindestens 8 Zeichen lang sein.
                   </div>
                 </div>
 
@@ -657,28 +682,28 @@ const Settings: React.FC = () => {
               <div style={styles.actions}>
                 <button
                   type="submit"
-                  disabled={loading || !passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword}
+                  disabled={isSubmitting || !passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword}
                   style={{
                     ...styles.button,
                     ...styles.buttonPrimary,
-                    ...((loading || !passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) ? styles.buttonDisabled : {})
+                    ...((isSubmitting || !passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) ? styles.buttonDisabled : {})
                   }}
                   onMouseEnter={(e) => {
-                    if (!loading && passwordForm.currentPassword && passwordForm.newPassword && passwordForm.confirmPassword) {
+                    if (!isSubmitting && passwordForm.currentPassword && passwordForm.newPassword && passwordForm.confirmPassword) {
                       e.currentTarget.style.background = styles.buttonPrimaryHover.background;
                       e.currentTarget.style.transform = styles.buttonPrimaryHover.transform;
                       e.currentTarget.style.boxShadow = styles.buttonPrimaryHover.boxShadow;
                     }
                   }}
                   onMouseLeave={(e) => {
-                    if (!loading && passwordForm.currentPassword && passwordForm.newPassword && passwordForm.confirmPassword) {
+                    if (!isSubmitting && passwordForm.currentPassword && passwordForm.newPassword && passwordForm.confirmPassword) {
                       e.currentTarget.style.background = styles.buttonPrimary.background;
                       e.currentTarget.style.transform = 'none';
                       e.currentTarget.style.boxShadow = styles.buttonPrimary.boxShadow;
                     }
                   }}
                 >
-                  {loading ? '⏳ Wird geändert...' : 'Passwort ändern'}
+                  {isSubmitting ? '⏳ Wird geändert...' : 'Passwort ändern'}
                 </button>
               </div>
             </form>
@@ -694,16 +719,16 @@ const Settings: React.FC = () => {
                 Legen Sie Ihre persönliche Verfügbarkeit für Schichtpläne fest
               </p>
             </div>
-            
+
             <div style={styles.availabilityCard}>
               <div style={styles.availabilityIcon}>📅</div>
               <h3 style={styles.availabilityTitle}>Verfügbarkeit verwalten</h3>
               <p style={styles.availabilityDescription}>
                 Hier können Sie Ihre persönliche Verfügbarkeit für Schichtpläne festlegen.
-                Legen Sie für jeden Tag und jede Schicht fest, ob Sie bevorzugt, möglicherweise 
+                Legen Sie für jeden Tag und jede Schicht fest, ob Sie bevorzugt, möglicherweise
                 oder nicht verfügbar sind.
               </p>
-              
+
               <button
                 onClick={() => setShowAvailabilityManager(true)}
                 style={{

frontend/src/pages/Settings/type/SettingsType.tsx

@@ -1,275 +1,275 @@
-// frontend/src/pages/Settings/type/SettingsType.tsx - CORRECTED
+// frontend/src/pages/Settings/type/SettingsType.tsx
 export const styles = {
-    container: {
-      display: 'flex',
-      minHeight: 'calc(100vh - 120px)',
-      background: '#FBFAF6',
-      padding: '2rem',
-      maxWidth: '1200px',
-      margin: '0 auto',
-      gap: '2rem',
-    },
-    sidebar: {
-      width: '280px',
-      background: '#FBFAF6',
-      borderRadius: '16px',
-      border: '1px solid rgba(255, 255, 255, 0.8)',
-      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
-      padding: '1.5rem',
-      height: 'fit-content',
-      position: 'sticky' as const,
-      top: '2rem',
-    },
-    header: {
-      marginBottom: '2rem',
-      paddingBottom: '1.5rem',
-      borderBottom: '1px solid rgba(26, 19, 37, 0.1)',
-    },
-    title: {
-      fontSize: '1.5rem',
-      fontWeight: 600,
-      color: '#161718',
-      margin: '0 0 0.5rem 0',
-    },
-    subtitle: {
-      fontSize: '0.95rem',
-      color: '#666',
-      fontWeight: 400,
-      lineHeight: 1.5,
-    },
-    tabs: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      gap: '0.5rem',
-    },
-    tab: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1rem',
-      padding: '1rem 1.25rem',
-      background: 'transparent',
-      color: '#666',
-      border: 'none',
-      borderRadius: '8px',
-      cursor: 'pointer',
-      fontWeight: 500,
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      textAlign: 'left' as const,
-      width: '100%',
-    },
-    tabActive: {
-      background: '#51258f',
-      color: '#FBFAF6',
-      boxShadow: '0 4px 12px rgba(26, 19, 37, 0.15)',
-    },
-    tabHover: {
-      background: 'rgba(81, 37, 143, 0.1)',
-      color: '#1a1325',
-      transform: 'translateX(4px)',
-    },
-    content: {
-      flex: 1,
-      background: '#FBFAF6',
-      padding: '2.5rem',
-      borderRadius: '16px',
-      border: '1px solid rgba(255, 255, 255, 0.8)',
-      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
-      backdropFilter: 'blur(10px)',
-      minHeight: '100px',
-    },
-    section: {
-      marginBottom: '2rem',
-    },
-    sectionTitle: {
-      fontSize: '1.75rem',
-      fontWeight: 600,
-      color: '#161718',
-      margin: '0 0 0.5rem 0',
-    },
-    sectionDescription: {
-      color: '#666',
-      fontSize: '1rem',
-      margin: 0,
-      lineHeight: 1.5,
-    },
-    formGrid: {
-      display: 'grid',
-      gap: '1.5rem',
-    },
-    formGridCompact: {
-      display: 'grid',
-      gap: '1.5rem',
-      maxWidth: '500px',
-    },
-    infoCard: {
-      padding: '1.5rem',
-      background: 'rgba(26, 19, 37, 0.02)',
-      borderRadius: '12px',
-      border: '1px solid rgba(26, 19, 37, 0.1)',
-    },
-    infoCardTitle: {
-      fontSize: '1rem',
-      fontWeight: 600,
-      color: '#1a1325',
-      margin: '0 0 1rem 0',
-    },
-    infoGrid: {
-      display: 'grid',
-      gridTemplateColumns: '1fr 1fr',
-      gap: '1rem',
-    },
-    field: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      gap: '0.5rem',
-      width: '100%',
-    },
-    fieldLabel: {
-      fontSize: '0.9rem',
-      fontWeight: 600,
-      color: '#161718',
-      width: '100%',
-    },
-    fieldInputContainer: {
-      position: 'relative' as const,
-      width: '100%',
-    },
-    fieldInput: {
-      padding: '0.875rem 1rem',
-      border: '1.5px solid #e8e8e8',
-      borderRadius: '8px',
-      fontSize: '0.95rem',
-      background: '#FBFAF6',
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      color: '#161718',
-      width: '100%',
-      boxSizing: 'border-box' as const,
-    },
-    fieldInputWithIcon: {
-      padding: '0.875rem 1rem',
-      border: '1.5px solid #e8e8e8',
-      borderRadius: '8px',
-      fontSize: '0.95rem',
-      background: '#FBFAF6',
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      color: '#161718',
-      width: '100%',
-      paddingRight: '40px',
-      boxSizing: 'border-box' as const,
-    },
-    fieldInputDisabled: {
-      padding: '0.875rem 1rem',
-      border: '1.5px solid rgba(26, 19, 37, 0.1)',
-      borderRadius: '8px',
-      fontSize: '0.95rem',
-      background: 'rgba(26, 19, 37, 0.05)',
-      color: '#666',
-      cursor: 'not-allowed',
-      width: '100%',
-      boxSizing: 'border-box' as const,
-    },
-    fieldHint: {
-      fontSize: '0.8rem',
-      color: '#888',
-      marginTop: '0.25rem',
-      width: '100%',
-    },
-    passwordToggleButton: {
-      position: 'absolute' as const,
-      right: '10px',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      background: 'none',
-      border: 'none',
-      cursor: 'pointer',
-      padding: '5px',
-      borderRadius: '4px',
-      transition: 'background-color 0.2s',
-      userSelect: 'none' as const,
-      WebkitUserSelect: 'none' as const,
-      touchAction: 'manipulation' as const,
-    },
-    actions: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      marginTop: '2.5rem',
-      paddingTop: '1.5rem',
-      borderTop: '1px solid rgba(26, 19, 37, 0.1)',
-    },
-    button: {
-      padding: '0.875rem 2rem',
-      border: 'none',
-      borderRadius: '8px',
-      fontSize: '0.95rem',
-      fontWeight: 600,
-      cursor: 'pointer',
-      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-      position: 'relative' as const,
-      overflow: 'hidden' as const,
-    },
-    buttonPrimary: {
-      background: '#1a1325',
-      color: '#FBFAF6',
-      boxShadow: '0 2px 8px rgba(26, 19, 37, 0.2)',
-    },
-    buttonPrimaryHover: {
-      background: '#24163a',
-      transform: 'translateY(-1px)',
-      boxShadow: '0 4px 16px rgba(26, 19, 37, 0.3)',
-    },
-    buttonDisabled: {
-      background: '#ccc',
-      color: '#666',
-      cursor: 'not-allowed',
-      transform: 'none',
-      boxShadow: 'none',
-    },
-    availabilityCard: {
-      padding: '3rem 2rem',
-      textAlign: 'center' as const,
-      background: 'rgba(26, 19, 37, 0.03)',
-      borderRadius: '16px',
-      border: '2px dashed rgba(26, 19, 37, 0.1)',
-      backdropFilter: 'blur(10px)',
-    },
-    availabilityIcon: {
-      fontSize: '3rem',
-      marginBottom: '1.5rem',
-      opacity: 0.8,
-    },
-    availabilityTitle: {
-      fontSize: '1.5rem',
-      fontWeight: 600,
-      color: '#161718',
-      margin: '0 0 1rem 0',
-    },
-    availabilityDescription: {
-      color: '#666',
-      marginBottom: '2rem',
-      lineHeight: 1.6,
-      maxWidth: '500px',
-      marginLeft: 'auto',
-      marginRight: 'auto',
-    },
-    infoHint: {
-      padding: '1.25rem',
-      background: 'rgba(26, 19, 37, 0.05)',
-      border: '1px solid rgba(26, 19, 37, 0.1)',
-      borderRadius: '12px',
-      fontSize: '0.9rem',
-      color: '#161718',
-      textAlign: 'left' as const,
-      maxWidth: '400px',
-      margin: '0 auto',
-    },
-    infoList: {
-      margin: '0.75rem 0 0 1rem',
-      padding: 0,
-      listStyle: 'none',
-    },
-    infoListItem: {
-      marginBottom: '0.5rem',
-      position: 'relative' as const,
-      paddingLeft: '1rem',
-    },
-  };
+  container: {
+    display: 'flex',
+    minHeight: 'calc(100vh - 120px)',
+    background: '#FBFAF6',
+    padding: '2rem',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    gap: '2rem',
+  },
+  sidebar: {
+    width: '280px',
+    background: '#FBFAF6',
+    borderRadius: '16px',
+    border: '1px solid rgba(255, 255, 255, 0.8)',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
+    padding: '1.5rem',
+    height: 'fit-content',
+    position: 'sticky' as const,
+    top: '2rem',
+  },
+  header: {
+    marginBottom: '2rem',
+    paddingBottom: '1.5rem',
+    borderBottom: '1px solid rgba(26, 19, 37, 0.1)',
+  },
+  title: {
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    color: '#161718',
+    margin: '0 0 0.5rem 0',
+  },
+  subtitle: {
+    fontSize: '0.95rem',
+    color: '#666',
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+  tabs: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '0.5rem',
+  },
+  tab: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '1rem',
+    padding: '1rem 1.25rem',
+    background: 'transparent',
+    color: '#666',
+    border: 'none',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    fontWeight: 500,
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    textAlign: 'left' as const,
+    width: '100%',
+  },
+  tabActive: {
+    background: '#51258f',
+    color: '#FBFAF6',
+    boxShadow: '0 4px 12px rgba(26, 19, 37, 0.15)',
+  },
+  tabHover: {
+    background: 'rgba(81, 37, 143, 0.1)',
+    color: '#1a1325',
+    transform: 'translateX(4px)',
+  },
+  content: {
+    flex: 1,
+    background: '#FBFAF6',
+    padding: '2.5rem',
+    borderRadius: '16px',
+    border: '1px solid rgba(255, 255, 255, 0.8)',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
+    backdropFilter: 'blur(10px)',
+    minHeight: '100px',
+  },
+  section: {
+    marginBottom: '2rem',
+  },
+  sectionTitle: {
+    fontSize: '1.75rem',
+    fontWeight: 600,
+    color: '#161718',
+    margin: '0 0 0.5rem 0',
+  },
+  sectionDescription: {
+    color: '#666',
+    fontSize: '1rem',
+    margin: 0,
+    lineHeight: 1.5,
+  },
+  formGrid: {
+    display: 'grid',
+    gap: '1.5rem',
+  },
+  formGridCompact: {
+    display: 'grid',
+    gap: '1.5rem',
+    maxWidth: '500px',
+  },
+  infoCard: {
+    padding: '1.5rem',
+    background: 'rgba(26, 19, 37, 0.02)',
+    borderRadius: '12px',
+    border: '1px solid rgba(26, 19, 37, 0.1)',
+  },
+  infoCardTitle: {
+    fontSize: '1rem',
+    fontWeight: 600,
+    color: '#1a1325',
+    margin: '0 0 1rem 0',
+  },
+  infoGrid: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '1rem',
+  },
+  field: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: '0.5rem',
+    width: '100%',
+  },
+  fieldLabel: {
+    fontSize: '0.9rem',
+    fontWeight: 600,
+    color: '#161718',
+    width: '100%',
+  },
+  fieldInputContainer: {
+    position: 'relative' as const,
+    width: '100%',
+  },
+  fieldInput: {
+    padding: '0.875rem 1rem',
+    border: '1.5px solid #e8e8e8',
+    borderRadius: '8px',
+    fontSize: '0.95rem',
+    background: '#FBFAF6',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    color: '#161718',
+    width: '100%',
+    boxSizing: 'border-box' as const,
+  },
+  fieldInputWithIcon: {
+    padding: '0.875rem 1rem',
+    border: '1.5px solid #e8e8e8',
+    borderRadius: '8px',
+    fontSize: '0.95rem',
+    background: '#FBFAF6',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    color: '#161718',
+    width: '100%',
+    paddingRight: '40px',
+    boxSizing: 'border-box' as const,
+  },
+  fieldInputDisabled: {
+    padding: '0.875rem 1rem',
+    border: '1.5px solid rgba(26, 19, 37, 0.1)',
+    borderRadius: '8px',
+    fontSize: '0.95rem',
+    background: 'rgba(26, 19, 37, 0.05)',
+    color: '#666',
+    cursor: 'not-allowed',
+    width: '100%',
+    boxSizing: 'border-box' as const,
+  },
+  fieldHint: {
+    fontSize: '0.8rem',
+    color: '#888',
+    marginTop: '0.25rem',
+    width: '100%',
+  },
+  passwordToggleButton: {
+    position: 'absolute' as const,
+    right: '10px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '5px',
+    borderRadius: '4px',
+    transition: 'background-color 0.2s',
+    userSelect: 'none' as const,
+    WebkitUserSelect: 'none' as const,
+    touchAction: 'manipulation' as const,
+  },
+  actions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '2.5rem',
+    paddingTop: '1.5rem',
+    borderTop: '1px solid rgba(26, 19, 37, 0.1)',
+  },
+  button: {
+    padding: '0.875rem 2rem',
+    border: 'none',
+    borderRadius: '8px',
+    fontSize: '0.95rem',
+    fontWeight: 600,
+    cursor: 'pointer',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    position: 'relative' as const,
+    overflow: 'hidden' as const,
+  },
+  buttonPrimary: {
+    background: '#1a1325',
+    color: '#FBFAF6',
+    boxShadow: '0 2px 8px rgba(26, 19, 37, 0.2)',
+  },
+  buttonPrimaryHover: {
+    background: '#24163a',
+    transform: 'translateY(-1px)',
+    boxShadow: '0 4px 16px rgba(26, 19, 37, 0.3)',
+  },
+  buttonDisabled: {
+    background: '#ccc',
+    color: '#666',
+    cursor: 'not-allowed',
+    transform: 'none',
+    boxShadow: 'none',
+  },
+  availabilityCard: {
+    padding: '3rem 2rem',
+    textAlign: 'center' as const,
+    background: 'rgba(26, 19, 37, 0.03)',
+    borderRadius: '16px',
+    border: '2px dashed rgba(26, 19, 37, 0.1)',
+    backdropFilter: 'blur(10px)',
+  },
+  availabilityIcon: {
+    fontSize: '3rem',
+    marginBottom: '1.5rem',
+    opacity: 0.8,
+  },
+  availabilityTitle: {
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    color: '#161718',
+    margin: '0 0 1rem 0',
+  },
+  availabilityDescription: {
+    color: '#666',
+    marginBottom: '2rem',
+    lineHeight: 1.6,
+    maxWidth: '500px',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  infoHint: {
+    padding: '1.25rem',
+    background: 'rgba(26, 19, 37, 0.05)',
+    border: '1px solid rgba(26, 19, 37, 0.1)',
+    borderRadius: '12px',
+    fontSize: '0.9rem',
+    color: '#161718',
+    textAlign: 'left' as const,
+    maxWidth: '400px',
+    margin: '0 auto',
+  },
+  infoList: {
+    margin: '0.75rem 0 0 1rem',
+    padding: 0,
+    listStyle: 'none',
+  },
+  infoListItem: {
+    marginBottom: '0.5rem',
+    position: 'relative' as const,
+    paddingLeft: '1rem',
+  },
+};

frontend/src/pages/Setup/Setup.tsx

@@ -32,7 +32,7 @@ const useSetup = () => {
 
   const steps: SetupStep[] = [
     {
-      id: 'profile-setup', 
+      id: 'profile-setup',
       title: 'Profilinformationen',
       subtitle: 'Geben Sie Ihre persönlichen Daten ein'
     },
@@ -62,8 +62,8 @@ const useSetup = () => {
   };
 
   const validateStep2 = (): boolean => {
-    if (formData.password.length < 6) {
-      setError('Das Passwort muss mindestens 6 Zeichen lang sein.');
+    if (formData.password.length < 8) {
+      setError('Das Passwort muss mindestens 8 Zeichen lang sein.');
       return false;
     }
     if (formData.password !== formData.confirmPassword) {
@@ -87,7 +87,7 @@ const useSetup = () => {
   // ===== NAVIGATIONS-FUNKTIONEN =====
   const goToNextStep = async (): Promise<void> => {
     setError('');
-    
+
     if (!validateCurrentStep(currentStep)) {
       return;
     }
@@ -111,7 +111,7 @@ const useSetup = () => {
 
   const handleStepChange = (stepIndex: number): void => {
     setError('');
-    
+
     // Nur erlauben, zu bereits validierten Schritten zu springen
     // oder zum nächsten Schritt nach dem aktuellen
     if (stepIndex <= currentStep + 1) {
@@ -163,7 +163,7 @@ const useSetup = () => {
 
       // Setup Status neu prüfen
       await checkSetupStatus();
-      
+
     } catch (err: any) {
       console.error('❌ Setup error:', err);
       setError(err.message || 'Ein unerwarteter Fehler ist aufgetreten');
@@ -177,7 +177,7 @@ const useSetup = () => {
     if (!formData.firstname.trim() || !formData.lastname.trim()) {
       return 'vorname.nachname@sp.de';
     }
-    
+
     const cleanFirstname = formData.firstname.toLowerCase().replace(/[^a-z0-9]/g, '');
     const cleanLastname = formData.lastname.toLowerCase().replace(/[^a-z0-9]/g, '');
     return `${cleanFirstname}.${cleanLastname}@sp.de`;
@@ -186,8 +186,8 @@ const useSetup = () => {
   const isStepCompleted = (stepIndex: number): boolean => {
     switch (stepIndex) {
       case 0:
-        return formData.password.length >= 6 && 
-               formData.password === formData.confirmPassword;
+        return formData.password.length >= 8 &&
+          formData.password === formData.confirmPassword;
       case 1:
         return !!formData.firstname.trim() && !!formData.lastname.trim();
       default:
@@ -202,13 +202,13 @@ const useSetup = () => {
     loading,
     error,
     steps,
-    
+
     // Actions
     goToNextStep,
     goToPrevStep,
     handleStepChange,
     handleInputChange,
-    
+
     // Helpers
     getEmailPreview,
     isStepCompleted
@@ -223,16 +223,16 @@ interface StepContentProps {
   currentStep: number;
 }
 
-const Step1Content: React.FC<StepContentProps> = ({ 
-  formData, 
+const Step1Content: React.FC<StepContentProps> = ({
+  formData,
   onInputChange,
-  getEmailPreview 
+  getEmailPreview
 }) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
@@ -257,9 +257,9 @@ const Step1Content: React.FC<StepContentProps> = ({
     </div>
 
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
@@ -284,17 +284,17 @@ const Step1Content: React.FC<StepContentProps> = ({
     </div>
 
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
         Automatisch generierte E-Mail
       </label>
-      <div style={{ 
-        padding: '0.75rem', 
-        backgroundColor: '#e9ecef', 
+      <div style={{
+        padding: '0.75rem',
+        backgroundColor: '#e9ecef',
         border: '1px solid #ced4da',
         borderRadius: '6px',
         color: '#495057',
@@ -303,8 +303,8 @@ const Step1Content: React.FC<StepContentProps> = ({
       }}>
         {getEmailPreview()}
       </div>
-      <div style={{ 
-        fontSize: '0.875rem', 
+      <div style={{
+        fontSize: '0.875rem',
         color: '#6c757d',
         marginTop: '0.25rem'
       }}>
@@ -315,15 +315,15 @@ const Step1Content: React.FC<StepContentProps> = ({
 );
 
 
-const Step2Content: React.FC<StepContentProps> = ({ 
-  formData, 
-  onInputChange 
+const Step2Content: React.FC<StepContentProps> = ({
+  formData,
+  onInputChange
 }) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
@@ -342,16 +342,16 @@ const Step2Content: React.FC<StepContentProps> = ({
           fontSize: '1rem',
           transition: 'border-color 0.3s ease'
         }}
-        placeholder="Mindestens 6 Zeichen"
+        placeholder="Mindestens 8 Zeichen"
         required
         autoComplete="new-password"
       />
     </div>
-    
+
     <div>
-      <label style={{ 
-        display: 'block', 
-        marginBottom: '0.5rem', 
+      <label style={{
+        display: 'block',
+        marginBottom: '0.5rem',
         fontWeight: '600',
         color: '#495057'
       }}>
@@ -378,26 +378,26 @@ const Step2Content: React.FC<StepContentProps> = ({
   </div>
 );
 
-const Step3Content: React.FC<StepContentProps> = ({ 
+const Step3Content: React.FC<StepContentProps> = ({
   formData,
-  getEmailPreview 
+  getEmailPreview
 }) => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-    <div style={{ 
-      backgroundColor: '#f8f9fa', 
-      padding: '1.5rem', 
+    <div style={{
+      backgroundColor: '#f8f9fa',
+      padding: '1.5rem',
       borderRadius: '8px',
       border: '1px solid #e9ecef'
     }}>
-      <h3 style={{ 
-        marginBottom: '1rem', 
+      <h3 style={{
+        marginBottom: '1rem',
         color: '#2c3e50',
         fontSize: '1.1rem',
         fontWeight: '600'
       }}>
         Zusammenfassung
       </h3>
-      
+
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <span style={{ color: '#6c757d' }}>E-Mail:</span>
@@ -413,15 +413,15 @@ const Step3Content: React.FC<StepContentProps> = ({
         </div>
       </div>
     </div>
-    
-    <div style={{ 
+
+    <div style={{
       padding: '1rem',
       backgroundColor: '#e7f3ff',
       borderRadius: '6px',
       border: '1px solid #b6d7e8',
       color: '#2c3e50'
     }}>
-      <strong>💡 Wichtig:</strong> Nach dem Setup können Sie sich mit Ihrer 
+      <strong>💡 Wichtig:</strong> Nach dem Setup können Sie sich mit Ihrer
       automatisch generierten E-Mail anmelden.
     </div>
   </div>
@@ -464,7 +464,7 @@ const Setup: React.FC = () => {
 
   const getNextButtonText = (): string => {
     if (loading) return '⏳ Wird verarbeitet...';
-    
+
     switch (currentStep) {
       case 0:
         return 'Weiter →';
@@ -479,9 +479,9 @@ const Setup: React.FC = () => {
 
   // Inline Step Indicator Komponente
   const StepIndicator: React.FC = () => (
-    <div style={{ 
-      display: 'flex', 
-      justifyContent: 'space-between', 
+    <div style={{
+      display: 'flex',
+      justifyContent: 'space-between',
       alignItems: 'center',
       marginBottom: '2.5rem',
       position: 'relative',
@@ -497,18 +497,18 @@ const Setup: React.FC = () => {
         backgroundColor: '#e9ecef',
         zIndex: 1
       }} />
-      
+
       {steps.map((step, index) => {
         const isCompleted = index < currentStep;
         const isCurrent = index === currentStep;
         const isClickable = index <= currentStep + 1;
-        
+
         return (
-          <div 
+          <div
             key={step.id}
-            style={{ 
-              display: 'flex', 
-              flexDirection: 'column', 
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
               alignItems: 'center',
               zIndex: 2,
               position: 'relative',
@@ -538,10 +538,10 @@ const Setup: React.FC = () => {
             >
               {index + 1}
             </button>
-            
+
             <div style={{ textAlign: 'center' }}>
-              <div style={{ 
-                fontSize: '14px', 
+              <div style={{
+                fontSize: '14px',
                 fontWeight: isCurrent ? '600' : '400',
                 color: isCurrent ? '#51258f' : '#6c757d'
               }}>
@@ -555,8 +555,8 @@ const Setup: React.FC = () => {
   );
 
   return (
-    <div style={{ 
-      minHeight: '100vh', 
+    <div style={{
+      minHeight: '100vh',
       backgroundColor: '#f8f9fa',
       display: 'flex',
       alignItems: 'center',
@@ -573,15 +573,15 @@ const Setup: React.FC = () => {
         border: '1px solid #e9ecef'
       }}>
         <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
-          <h1 style={{ 
-            fontSize: '2rem', 
-            fontWeight: 'bold', 
+          <h1 style={{
+            fontSize: '2rem',
+            fontWeight: 'bold',
             marginBottom: '0.5rem',
             color: '#2c3e50'
           }}>
             🚀 Erstkonfiguration
           </h1>
-          <p style={{ 
+          <p style={{
             color: '#6c757d',
             fontSize: '1.1rem',
             marginBottom: '2rem'
@@ -592,16 +592,16 @@ const Setup: React.FC = () => {
 
         {/* Aktueller Schritt Titel und Beschreibung */}
         <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
-          <h2 style={{ 
-            fontSize: '1.5rem', 
-            fontWeight: 'bold', 
+          <h2 style={{
+            fontSize: '1.5rem',
+            fontWeight: 'bold',
             marginBottom: '0.5rem',
             color: '#2c3e50'
           }}>
             {steps[currentStep].title}
           </h2>
           {steps[currentStep].subtitle && (
-            <p style={{ 
+            <p style={{
               color: '#6c757d',
               fontSize: '1rem'
             }}>
@@ -633,9 +633,9 @@ const Setup: React.FC = () => {
         </div>
 
         {/* Navigations-Buttons */}
-        <div style={{ 
-          marginTop: '2rem', 
-          display: 'flex', 
+        <div style={{
+          marginTop: '2rem',
+          display: 'flex',
           justifyContent: 'space-between',
           alignItems: 'center'
         }}>
@@ -655,7 +655,7 @@ const Setup: React.FC = () => {
           >
             ← Zurück
           </button>
-          
+
           <button
             onClick={goToNextStep}
             disabled={loading}
@@ -677,10 +677,10 @@ const Setup: React.FC = () => {
 
         {/* Zusätzliche Informationen */}
         {currentStep === 2 && !loading && (
-          <div style={{ 
-            marginTop: '1.5rem', 
-            textAlign: 'center', 
-            color: '#6c757d', 
+          <div style={{
+            marginTop: '1.5rem',
+            textAlign: 'center',
+            color: '#6c757d',
             fontSize: '0.9rem',
             padding: '1rem',
             backgroundColor: '#f8f9fa',

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/ShiftPlans/ShiftPlanView.tsx - UPDATED
+// frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
@@ -10,6 +10,7 @@ import { ShiftPlan, TimeSlot, ScheduledShift } from '../../models/ShiftPlan';
 import { Employee, EmployeeAvailability } from '../../models/Employee';
 import { useNotification } from '../../contexts/NotificationContext';
 import { formatDate, formatTime } from '../../utils/foramatters';
+import { saveAs } from 'file-saver';
 
 // Local interface extensions (same as AvailabilityManager)
 interface ExtendedTimeSlot extends TimeSlot {
@@ -54,6 +55,7 @@ const ShiftPlanView: React.FC = () => {
   const [scheduledShifts, setScheduledShifts] = useState<ScheduledShift[]>([]);
   const [showAssignmentPreview, setShowAssignmentPreview] = useState(false);
   const [recreating, setRecreating] = useState(false);
+  const [exporting, setExporting] = useState(false);
 
   useEffect(() => {
     loadShiftPlanData();
@@ -240,6 +242,66 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
+  const handleExportExcel = async () => {
+    if (!shiftPlan) return;
+
+    try {
+      setExporting(true);
+      
+      // Call the export service
+      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+      
+      // Use file-saver to download the file
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      
+      showNotification({
+        type: 'success',
+        title: 'Export erfolgreich',
+        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
+      });
+      
+    } catch (error) {
+      console.error('Error exporting to Excel:', error);
+      showNotification({
+        type: 'error',
+        title: 'Export fehlgeschlagen',
+        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleExportPDF = async () => {
+    if (!shiftPlan) return;
+
+    try {
+      setExporting(true);
+      
+      // Call the PDF export service
+      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+      
+      // Use file-saver to download the file
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      
+      showNotification({
+        type: 'success',
+        title: 'Export erfolgreich',
+        message: 'Der Schichtplan wurde als PDF exportiert.'
+      });
+      
+    } catch (error) {
+      console.error('Error exporting to PDF:', error);
+      showNotification({
+        type: 'error',
+        title: 'Export fehlgeschlagen',
+        message: 'Der PDF-Export konnte nicht durchgeführt werden.'
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
   const loadShiftPlanData = async () => {
     if (!id) return;
     
@@ -399,12 +461,12 @@ const ShiftPlanView: React.FC = () => {
       console.log('- Scheduled Shifts:', scheduledShifts.length);
 
       // DEBUG: Show shift pattern IDs
-      if (shiftPlan.shifts) {
+      /*if (shiftPlan.shifts) {
         console.log('📋 SHIFT PATTERN IDs:');
         shiftPlan.shifts.forEach((shift, index) => {
           console.log(`   ${index + 1}. ${shift.id} (Day ${shift.dayOfWeek}, TimeSlot ${shift.timeSlotId})`);
         });
-      }
+      }*/
 
       const constraints = {
         enforceNoTraineeAlone: true,
@@ -650,6 +712,20 @@ const ShiftPlanView: React.FC = () => {
     return employeesWithoutAvailabilities.length === 0;
   };
 
+  const canPublishAssignment = (): boolean => {
+    if (!assignmentResult) return false;
+    
+    // Check if assignment was successful
+    if (assignmentResult.success === false) return false;
+    
+    // Check if there are any critical violations
+    const hasCriticalViolations = assignmentResult.violations.some(v => 
+      v.includes('ERROR:') || v.includes('KRITISCH:')
+    );
+    
+    return !hasCriticalViolations;
+  };
+
   const getAvailabilityStatus = () => {
     const totalEmployees = employees.length;
     const employeesWithAvailabilities = new Set(
@@ -820,9 +896,6 @@ const ShiftPlanView: React.FC = () => {
                     <div style={{ fontSize: '14px', color: '#666' }}>
                       {formatTime(timeSlot.startTime)} - {formatTime(timeSlot.endTime)}
                     </div>
-                    <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
-                      ID: {timeSlot.id.substring(0, 8)}...
-                    </div>
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
@@ -846,7 +919,55 @@ const ShiftPlanView: React.FC = () => {
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
                     
                     let assignedEmployees: string[] = [];
-                    let displayText = '';
+                    let displayContent: React.ReactNode = null;
+
+                    // Helper function to create employee boxes
+                    const createEmployeeBoxes = (employeeIds: string[]) => {
+                      return employeeIds.map(empId => {
+                        const employee = employees.find(emp => emp.id === empId);
+                        if (!employee) return null;
+                        
+                        // Determine background color based on employee role
+                        let backgroundColor = '#642ab5'; // Default: non-trainee personnel (purple)
+                        
+                        if (employee.isTrainee) {
+                          backgroundColor = '#cda8f0'; // Trainee
+                        } else if (employee.roles?.includes('manager')) {
+                          backgroundColor = '#CC0000'; // Manager
+                        }
+                        
+                        return (
+                          <div
+                            key={empId}
+                            style={{
+                              backgroundColor,
+                              color: 'white',
+                              padding: '4px 8px',
+                              borderRadius: '4px',
+                              marginBottom: '2px',
+                              fontSize: '12px',
+                              textAlign: 'center',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis'
+                            }}
+                            title={`${employee.firstname} ${employee.lastname}${employee.isTrainee ? ' (Trainee)' : ''}`}
+                          >
+                            {employee.firstname} {employee.lastname}
+                          </div>
+                        );
+                      }).filter(Boolean);
+                    };
+
+                    // Helper function to get fallback content
+                    const getFallbackContent = () => {
+                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                        s.dayOfWeek === weekday.id && 
+                        s.timeSlotId === timeSlot.id
+                      ) || [];
+                      const totalRequired = shiftsForSlot.reduce((sum, s) => sum + s.requiredEmployees, 0);
+                      return totalRequired === 0 ? '-' : `0/${totalRequired}`;
+                    };
 
                     if (shiftPlan?.status === 'published') {
                       // For published plans, use actual assignments from scheduled shifts
@@ -859,15 +980,21 @@ const ShiftPlanView: React.FC = () => {
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
                         
-                        // DEBUG: Log if we're still seeing old data
+                        // Log if we're still seeing old data
                         if (assignedEmployees.length > 0) {
                           console.warn(`⚠️ Found non-empty assignments for ${weekday.name} ${timeSlot.name}:`, assignedEmployees);
                         }
                         
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
@@ -879,30 +1006,26 @@ const ShiftPlanView: React.FC = () => {
                       
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     }
 
-                    // If no assignments yet, show empty or required count
-                    if (!displayText) {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
-                        s.dayOfWeek === weekday.id && 
-                        s.timeSlotId === timeSlot.id
-                      ) || [];
-                      
-                      const totalRequired = shiftsForSlot.reduce((sum, s) => 
-                        sum + s.requiredEmployees, 0);
-                      
-                      // Show "0/2" instead of just "0" to indicate it's empty
-                      displayText = `0/${totalRequired}`;
-                      
-                      // Optional: Show empty state more clearly
-                      if (totalRequired === 0) {
-                        displayText = '-';
-                      }
+                    // If no display content set yet, use fallback
+                    if (!displayContent) {
+                      displayContent = (
+                        <div style={{ color: '#666', fontStyle: 'italic' }}>
+                          {getFallbackContent()}
+                        </div>
+                      );
                     }
 
                     return (
@@ -937,7 +1060,7 @@ const ShiftPlanView: React.FC = () => {
                           </div>
                         )}
 
-                        {displayText}
+                        {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
                         <div style={{ 
@@ -947,8 +1070,6 @@ const ShiftPlanView: React.FC = () => {
                           textAlign: 'left',
                           fontFamily: 'monospace'
                         }}>
-                          <div>Shift: {shift.id.substring(0, 6)}...</div>
-                          <div>Day: {shift.dayOfWeek}</div>
                           {!isValidShift && (
                             <div style={{ color: '#e74c3c', fontWeight: 'bold' }}>
                               VALIDATION ERROR
@@ -963,7 +1084,6 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
-
       </div>
     );
   };
@@ -1005,7 +1125,50 @@ const ShiftPlanView: React.FC = () => {
           </div>
         </div>
           <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-            {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+            <>
+              <button
+                onClick={handleExportExcel}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#27ae60',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                {exporting ? '🔄' : '📊'} {exporting ? 'Exportiert...' : 'Excel Export'}
+              </button>
+              
+              <button
+                onClick={handleExportPDF}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#e74c3c',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                {exporting ? '🔄' : '📄'} {exporting ? 'Exportiert...' : 'PDF Export'}
+              </button>
+            </>
+          )}
+          
+          {/* "Zuweisungen neu berechnen" button */}
+          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
               disabled={recreating}
@@ -1118,7 +1281,7 @@ const ShiftPlanView: React.FC = () => {
         </div>
       )}
 
-      {/* Assignment Preview Modal - FIXED CONDITION */}
+      {/* Assignment Preview Modal */}
       {(showAssignmentPreview || assignmentResult) && (
         <div style={{
           position: 'fixed',
@@ -1197,15 +1360,13 @@ const ShiftPlanView: React.FC = () => {
               </div>
             )}
               
-            {/* KORRIGIERTE ZUSAMMENFASSUNG */}
+            {/* ZUSAMMENFASSUNG */}
             {assignmentResult && (
               <div style={{ marginBottom: '20px' }}>
                 <h4>Zusammenfassung:</h4>
                 
                 {/* Entscheidung basierend auf tatsächlichen kritischen Problemen */}
-                {assignmentResult.violations.filter(v => 
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length === 0 ? (
+                {(assignmentResult.violations.length === 0) || assignmentResult.success == true ? (
                   <div style={{
                     padding: '15px',
                     backgroundColor: '#d4edda',
@@ -1288,32 +1449,24 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
               
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
-                disabled={publishing || (assignmentResult ? assignmentResult.violations.filter(v => 
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length > 0 : true)}
+                disabled={publishing || !canPublishAssignment()}
                 style={{
                   padding: '10px 20px',
-                  backgroundColor: assignmentResult ? (assignmentResult.violations.filter(v => 
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? '#2ecc71' : '#95a5a6') : '#95a5a6',
+                  backgroundColor: canPublishAssignment() ? '#2ecc71' : '#95a5a6',
                   color: 'white',
                   border: 'none',
                   borderRadius: '4px',
-                  cursor: assignmentResult ? (assignmentResult.violations.filter(v => 
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? 'pointer' : 'not-allowed') : 'not-allowed',
+                  cursor: canPublishAssignment() ? 'pointer' : 'not-allowed',
                   fontWeight: 'bold',
                   fontSize: '16px'
                 }}
               >
                 {publishing ? 'Veröffentliche...' : (
                   assignmentResult ? (
-                    assignmentResult.violations.filter(v => 
-                      v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                    ).length === 0 
+                    canPublishAssignment() 
                       ? 'Schichtplan veröffentlichen' 
                       : 'Kritische Probleme müssen behoben werden'
                   ) : 'Lade Zuordnungen...'

frontend/src/services/apiClient.ts

@@ -0,0 +1,135 @@
+import { ValidationError, ErrorService } from './errorService';
+
+export class ApiError extends Error {
+  public validationErrors: ValidationError[];
+  public statusCode: number;
+  public originalError?: any;
+
+  constructor(message: string, validationErrors: ValidationError[] = [], statusCode: number = 0, originalError?: any) {
+    super(message);
+    this.name = 'ApiError';
+    this.validationErrors = validationErrors;
+    this.statusCode = statusCode;
+    this.originalError = originalError;
+  }
+}
+
+export class ApiClient {
+  private baseURL: string;
+
+  constructor() {
+    this.baseURL = import.meta.env.VITE_API_URL || '/api';
+  }
+
+  private getAuthHeaders(): HeadersInit {
+    const token = localStorage.getItem('token');
+    return token ? { 'Authorization': `Bearer ${token}` } : {};
+  }
+
+  private async handleApiResponse<T>(response: Response, responseType: 'json' | 'blob' = 'json'): Promise<T> {
+    if (!response.ok) {
+      let errorData;
+      
+      try {
+        // Try to parse error response as JSON
+        const responseText = await response.text();
+        errorData = responseText ? JSON.parse(responseText) : {};
+      } catch {
+        // If not JSON, create a generic error object
+        errorData = { error: `HTTP ${response.status}: ${response.statusText}` };
+      }
+      
+      // Extract validation errors using your existing ErrorService
+      const validationErrors = ErrorService.extractValidationErrors(errorData);
+
+      if (validationErrors.length > 0) {
+        // Throw error with validationErrors property for useBackendValidation hook
+        throw new ApiError(
+          errorData.error || 'Validation failed',
+          validationErrors,
+          response.status,
+          errorData
+        );
+      }
+
+      // Throw regular error for non-validation errors
+      throw new ApiError(
+        errorData.error || errorData.message || `HTTP error! status: ${response.status}`,
+        [],
+        response.status,
+        errorData
+      );
+    }
+
+    // Handle blob responses (for file downloads)
+    if (responseType === 'blob') {
+      return response.blob() as Promise<T>;
+    }
+
+    // For successful JSON responses, try to parse as JSON
+    try {
+      const responseText = await response.text();
+      return responseText ? JSON.parse(responseText) : {} as T;
+    } catch (error) {
+      // If response is not JSON but request succeeded (e.g., 204 No Content)
+      return {} as T;
+    }
+  }
+
+  async request<T>(endpoint: string, options: RequestInit = {}, responseType: 'json' | 'blob' = 'json'): Promise<T> {
+    const url = `${this.baseURL}${endpoint}`;
+    
+    const config: RequestInit = {
+      headers: {
+        'Content-Type': 'application/json',
+        ...this.getAuthHeaders(),
+        ...options.headers,
+      },
+      ...options,
+    };
+
+    try {
+      const response = await fetch(url, config);
+      return await this.handleApiResponse<T>(response, responseType);
+    } catch (error) {
+      // Re-throw the error to be caught by useBackendValidation
+      if (error instanceof ApiError) {
+        throw error;
+      }
+      
+      // Wrap non-ApiError errors
+      throw new ApiError(
+        error instanceof Error ? error.message : 'Unknown error occurred',
+        [],
+        0,
+        error
+      );
+    }
+  }
+
+  // Standardized HTTP methods
+  get = <T>(endpoint: string) => this.request<T>(endpoint);
+  
+  post = <T>(endpoint: string, data?: any) => 
+    this.request<T>(endpoint, { 
+      method: 'POST', 
+      body: data ? JSON.stringify(data) : undefined 
+    });
+  
+  put = <T>(endpoint: string, data?: any) => 
+    this.request<T>(endpoint, { 
+      method: 'PUT', 
+      body: data ? JSON.stringify(data) : undefined 
+    });
+  
+  patch = <T>(endpoint: string, data?: any) => 
+    this.request<T>(endpoint, { 
+      method: 'PATCH', 
+      body: data ? JSON.stringify(data) : undefined 
+    });
+  
+  delete = <T>(endpoint: string) => 
+    this.request<T>(endpoint, { method: 'DELETE' });
+}
+
+export const apiClient = new ApiClient();

frontend/src/services/authService.ts

@@ -1,6 +1,5 @@
-// frontend/src/services/authService.ts
 import { Employee } from '../models/Employee';
-const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+import { apiClient } from './apiClient';
 
 export interface LoginRequest {
   email: string;
@@ -24,18 +23,7 @@ class AuthService {
   private token: string | null = null;
 
   async login(credentials: LoginRequest): Promise<AuthResponse> {
-    const response = await fetch(`${API_BASE_URL}/auth/login`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(credentials)
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(errorData.error || 'Login fehlgeschlagen');
-    }
-
-    const data: AuthResponse = await response.json();
+    const data = await apiClient.post<AuthResponse>('/auth/login', credentials);
     this.token = data.token;
     localStorage.setItem('token', data.token);
     localStorage.setItem('employee', JSON.stringify(data.employee));
@@ -43,17 +31,7 @@ class AuthService {
   }
 
   async register(userData: RegisterRequest): Promise<AuthResponse> {
-    const response = await fetch(`${API_BASE_URL}/employees`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(userData)
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(errorData.error || 'Registrierung fehlgeschlagen');
-    }
-
+    await apiClient.post('/employees', userData);
     return this.login({
       email: userData.email,
       password: userData.password
@@ -67,34 +45,23 @@ class AuthService {
 
   async fetchCurrentEmployee(): Promise<Employee | null> {
     const token = this.getToken();
-    if (!token) {
-      return null;
-    }
+    if (!token) return null;
 
     try {
-      const response = await fetch(`${API_BASE_URL}/auth/me`, {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        const user = data.user;
-        localStorage.setItem('user', JSON.stringify(user));
-        return user;
-      }
+      const data = await apiClient.get<{ user: Employee }>('/auth/me');
+      localStorage.setItem('user', JSON.stringify(data.user));
+      return data.user;
     } catch (error) {
       console.error('Error fetching current user:', error);
+      return null;
     }
-
-    return null;
   }
 
   logout(): void {
     this.token = null;
     localStorage.removeItem('token');
     localStorage.removeItem('user');
+    localStorage.removeItem('employee');
   }
 
   getToken(): string | null {

frontend/src/services/employeeService.ts

@@ -1,154 +1,58 @@
-// frontend/src/services/employeeService.ts
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest, EmployeeAvailability } from '../models/Employee';
-import { ErrorService, ValidationError } from './errorService';
-
-const API_BASE_URL = '/api';
-
-const getAuthHeaders = () => {
-  const token = localStorage.getItem('token');
-  return {
-    'Content-Type': 'application/json',
-    'Authorization': `Bearer ${token}`
-  };
-};
+import { apiClient } from './apiClient';
 
 export class EmployeeService {
-  private async handleApiResponse<T>(response: Response): Promise<T> {
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      const validationErrors = ErrorService.extractValidationErrors(errorData);
-      
-      if (validationErrors.length > 0) {
-        const error = new Error('Validation failed');
-        (error as any).validationErrors = validationErrors;
-        throw error;
-      }
-      
-      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-    }
-    
-    return response.json();
-  }
-
   async getEmployees(includeInactive: boolean = false): Promise<Employee[]> {
     console.log('🔄 Fetching employees from API...');
-    
-    const token = localStorage.getItem('token');
-    console.log('🔑 Token exists:', !!token);
-    
-    const response = await fetch(`${API_BASE_URL}/employees?includeInactive=${includeInactive}`, {
-      headers: getAuthHeaders(),
-    });
-    
-    console.log('📡 Response status:', response.status);
-    
-    if (!response.ok) {
-      const errorText = await response.text();
-      console.error('❌ API Error:', errorText);
-      throw new Error('Failed to fetch employees');
+
+    try {
+      const employees = await apiClient.get<Employee[]>(`/employees?includeInactive=${includeInactive}`);
+      console.log('✅ Employees received:', employees.length);
+      return employees;
+    } catch (error) {
+      console.error('❌ Error fetching employees:', error);
+      throw error; // Let useBackendValidation handle this
     }
-    
-    const employees = await response.json();
-    console.log('✅ Employees received:', employees.length);
-    
-    return employees;
   }
 
   async getEmployee(id: string): Promise<Employee> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}`, {
-      headers: getAuthHeaders(),
-    });
-    
-    if (!response.ok) {
-      throw new Error('Failed to fetch employee');
-    }
-    
-    return response.json();
+    return apiClient.get<Employee>(`/employees/${id}`);
   }
 
   async createEmployee(employee: CreateEmployeeRequest): Promise<Employee> {
-    const response = await fetch(`${API_BASE_URL}/employees`, {
-      method: 'POST',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(employee),
-    });
-    
-    return this.handleApiResponse<Employee>(response);
+    return apiClient.post<Employee>('/employees', employee);
   }
 
   async updateEmployee(id: string, employee: UpdateEmployeeRequest): Promise<Employee> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}`, {
-      method: 'PUT',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(employee),
-    });
-    
-    return this.handleApiResponse<Employee>(response);
+    return apiClient.put<Employee>(`/employees/${id}`, employee);
   }
 
   async deleteEmployee(id: string): Promise<void> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}`, {
-      method: 'DELETE',
-      headers: getAuthHeaders(),
-    });
-    
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to delete employee');
-    }
+    await apiClient.delete(`/employees/${id}`);
   }
 
   async getAvailabilities(employeeId: string): Promise<EmployeeAvailability[]> {
-    const response = await fetch(`${API_BASE_URL}/employees/${employeeId}/availabilities`, {
-      headers: getAuthHeaders(),
-    });
-    
-    if (!response.ok) {
-      throw new Error('Failed to fetch availabilities');
-    }
-    
-    return response.json();
+    return apiClient.get<EmployeeAvailability[]>(`/employees/${employeeId}/availabilities`);
   }
 
-  async updateAvailabilities(employeeId: string, data: { planId: string, availabilities: Omit<EmployeeAvailability, 'id' | 'employeeId'>[] }): Promise<EmployeeAvailability[]> {
+  async updateAvailabilities(
+    employeeId: string, 
+    data: { planId: string, availabilities: Omit<EmployeeAvailability, 'id' | 'employeeId'>[] }
+  ): Promise<EmployeeAvailability[]> {
     console.log('🔄 Updating availabilities for employee:', employeeId);
-    const response = await fetch(`${API_BASE_URL}/employees/${employeeId}/availabilities`, {
-      method: 'PUT',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-    
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to update availabilities');
-    }
-    
-    return response.json();
+    return apiClient.put<EmployeeAvailability[]>(`/employees/${employeeId}/availabilities`, data);
   }
 
-  async changePassword(id: string, data: { currentPassword: string, newPassword: string }): Promise<void> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}/password`, {
-      method: 'PUT',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-    
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to change password');
-    }
+  async changePassword(
+    id: string, 
+    data: { currentPassword: string, newPassword: string, confirmPassword: string }
+  ): Promise<void> {
+    return apiClient.put<void>(`/employees/${id}/password`, data);
   }
 
   async updateLastLogin(employeeId: string): Promise<void> {
     try {
-      const response = await fetch(`${API_BASE_URL}/employees/${employeeId}/last-login`, {
-        method: 'PATCH',
-        headers: getAuthHeaders(),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update last login');
-      }
+      await apiClient.patch(`/employees/${employeeId}/last-login`);
     } catch (error) {
       console.error('Error updating last login:', error);
       throw error;

frontend/src/services/shiftAssignmentService.ts

@@ -1,65 +1,15 @@
-// frontend/src/services/shiftAssignmentService.ts - WEEKLY PATTERN VERSION
 import { ShiftPlan, ScheduledShift } from '../models/ShiftPlan';
 import { Employee, EmployeeAvailability } from '../models/Employee';
-import { authService } from './authService';
 import { AssignmentResult, ScheduleRequest } from '../models/scheduling';
-
-const API_BASE_URL = '/api';
-
-// Helper function to get auth headers
-const getAuthHeaders = () => {
-  const token = localStorage.getItem('token');
-  return {
-    'Content-Type': 'application/json',
-    ...(token && { 'Authorization': `Bearer ${token}` })
-  };
-};
+import { apiClient } from './apiClient';
 
 export class ShiftAssignmentService {
   async updateScheduledShift(id: string, updates: { assignedEmployees: string[] }): Promise<void> {
     try {
-      //console.log('🔄 Updating scheduled shift via API:', { id, updates });
+      console.log('🔄 Updating scheduled shift via API:', { id, updates });
       
-      const response = await fetch(`${API_BASE_URL}/scheduled-shifts/${id}`, {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          ...authService.getAuthHeaders()
-        },
-        body: JSON.stringify(updates)
-      });
-
-      // First, check if we got any response
-      if (!response.ok) {
-        // Try to get error message from response
-        const responseText = await response.text();
-        console.error('❌ Server response:', responseText);
-        
-        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
-        
-        // Try to parse as JSON if possible
-        try {
-          const errorData = JSON.parse(responseText);
-          errorMessage = errorData.error || errorMessage;
-        } catch (e) {
-          // If not JSON, use the text as is
-          errorMessage = responseText || errorMessage;
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      // Try to parse successful response
-      const responseText = await response.text();
-      let result;
-      try {
-        result = responseText ? JSON.parse(responseText) : {};
-      } catch (e) {
-        console.warn('⚠️ Response was not JSON, but request succeeded');
-        result = { message: 'Update successful' };
-      }
-      
-      console.log('✅ Scheduled shift updated successfully:', result);
+      await apiClient.put(`/scheduled-shifts/${id}`, updates);
+      console.log('✅ Scheduled shift updated successfully');
       
     } catch (error) {
       console.error('❌ Error updating scheduled shift:', error);
@@ -69,48 +19,16 @@ export class ShiftAssignmentService {
 
   async getScheduledShift(id: string): Promise<any> {
     try {
-      const response = await fetch(`${API_BASE_URL}/scheduled-shifts/${id}`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      if (!response.ok) {
-        const responseText = await response.text();
-        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
-        
-        try {
-          const errorData = JSON.parse(responseText);
-          errorMessage = errorData.error || errorMessage;
-        } catch (e) {
-          errorMessage = responseText || errorMessage;
-        }
-        
-        throw new Error(errorMessage);
-      }
-
-      const responseText = await response.text();
-      return responseText ? JSON.parse(responseText) : {};
+      return await apiClient.get(`/scheduled-shifts/${id}`);
     } catch (error) {
       console.error('Error fetching scheduled shift:', error);
       throw error;
     }
   }
 
-  // New method to get all scheduled shifts for a plan
   async getScheduledShiftsForPlan(planId: string): Promise<ScheduledShift[]> {
     try {
-      const response = await fetch(`${API_BASE_URL}/scheduled-shifts/plan/${planId}`, {
-        headers: {
-          'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-      });
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch scheduled shifts: ${response.status}`);
-      }
-
-      const shifts = await response.json();
+      const shifts = await apiClient.get<ScheduledShift[]>(`/scheduled-shifts/plan/${planId}`);
       
       // DEBUG: Check the structure of returned shifts
       console.log('🔍 SCHEDULED SHIFTS STRUCTURE:', shifts.slice(0, 3));
@@ -132,21 +50,7 @@ export class ShiftAssignmentService {
   }
 
   private async callSchedulingAPI(request: ScheduleRequest): Promise<AssignmentResult> {
-    const response = await fetch(`${API_BASE_URL}/scheduling/generate-schedule`, {
-      method: 'POST',
-      headers: {
-          'Content-Type': 'application/json',
-          ...authService.getAuthHeaders()
-        },
-      body: JSON.stringify(request)
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json();
-      throw new Error(errorData.error || 'Scheduling failed');
-    }
-
-    return response.json();
+    return await apiClient.post<AssignmentResult>('/scheduling/generate-schedule', request);
   }
 
   async assignShifts(

frontend/src/services/shiftPlanService.ts

@@ -1,199 +1,115 @@
-// frontend/src/services/shiftPlanService.ts
-import { authService } from './authService';
 import { ShiftPlan, CreateShiftPlanRequest } from '../models/ShiftPlan';
-import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults';  
-
-const API_BASE_URL = '/api/shift-plans';
-
-// Helper function to get auth headers
-const getAuthHeaders = () => {
-  const token = localStorage.getItem('token');
-  return {
-    'Content-Type': 'application/json',
-    ...(token && { 'Authorization': `Bearer ${token}` })
-  };
-};
-
-// Helper function to handle responses
-const handleResponse = async (response: Response) => {
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
-    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-  }
-  return response.json();
-};
+import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults';
+import { apiClient } from './apiClient';
 
 export const shiftPlanService = {
   async getShiftPlans(): Promise<ShiftPlan[]> {
-    const response = await fetch(API_BASE_URL, {
-      headers: {
-        'Content-Type': 'application/json',
-        ...authService.getAuthHeaders()
-      }
-    });
-    
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
+    try {
+      const plans = await apiClient.get<ShiftPlan[]>('/shift-plans');
+      
+      // Ensure scheduledShifts is always an array
+      return plans.map((plan: any) => ({
+        ...plan,
+        scheduledShifts: plan.scheduledShifts || []
+      }));
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        // You might want to import and use authService here if needed
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Fehler beim Laden der Schichtpläne');
     }
-    
-    const plans = await response.json();
-    
-    // Ensure scheduledShifts is always an array
-    return plans.map((plan: any) => ({
-      ...plan,
-      scheduledShifts: plan.scheduledShifts || []
-    }));
   },
 
   async getShiftPlan(id: string): Promise<ShiftPlan> {
-    const response = await fetch(`${API_BASE_URL}/${id}`, {
-      headers: {
-        'Content-Type': 'application/json',
-        ...authService.getAuthHeaders()
-      }
-    });
-    
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
+    try {
+      return await apiClient.get<ShiftPlan>(`/shift-plans/${id}`);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Schichtplan nicht gefunden');
     }
-    
-    return await response.json();
   },
 
   async createShiftPlan(plan: CreateShiftPlanRequest): Promise<ShiftPlan> {
-    const response = await fetch(API_BASE_URL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        ...authService.getAuthHeaders()
-      },
-      body: JSON.stringify(plan)
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
+    try {
+      return await apiClient.post<ShiftPlan>('/shift-plans', plan);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Fehler beim Erstellen des Schichtplans');
     }
-
-    return response.json();
   },
 
   async updateShiftPlan(id: string, plan: Partial<ShiftPlan>): Promise<ShiftPlan> {
-    const response = await fetch(`${API_BASE_URL}/${id}`, {
-      method: 'PUT',
-      headers: {
-        'Content-Type': 'application/json',
-        ...authService.getAuthHeaders()
-      },
-      body: JSON.stringify(plan)
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
+    try {
+      return await apiClient.put<ShiftPlan>(`/shift-plans/${id}`, plan);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Fehler beim Aktualisieren des Schichtplans');
     }
-
-    return response.json();
   },
 
   async deleteShiftPlan(id: string): Promise<void> {
-    const response = await fetch(`${API_BASE_URL}/${id}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json',
-        ...authService.getAuthHeaders()
-      }
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
+    try {
+      await apiClient.delete(`/shift-plans/${id}`);
+    } catch (error: any) {
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Fehler beim Löschen des Schichtplans');
     }
   },
 
-  // Get specific template or plan
-  getTemplate: async (id: string): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE_URL}/${id}`, {
-      headers: getAuthHeaders()
-    });
-    return handleResponse(response);
+  async getTemplate(id: string): Promise<ShiftPlan> {
+    return await apiClient.get<ShiftPlan>(`/shift-plans/${id}`);
   },
 
-
-  async regenerateScheduledShifts(planId: string):Promise<void> {
+  async regenerateScheduledShifts(planId: string): Promise<void> {
     try {
-        console.log('🔄 Attempting to regenerate scheduled shifts...');
-        
-        // You'll need to add this API endpoint to your backend
-        const response = await fetch(`${API_BASE_URL}/${planId}/regenerate-shifts`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
-        }
-        });
-
-        if (response.ok) {
-        console.log('✅ Scheduled shifts regenerated');
-        } else {
-        console.error('❌ Failed to regenerate shifts');
-        }
+      console.log('🔄 Attempting to regenerate scheduled shifts...');
+      await apiClient.post(`/shift-plans/${planId}/regenerate-shifts`);
+      console.log('✅ Scheduled shifts regenerated');
     } catch (error) {
-        console.error('❌ Error regenerating shifts:', error);
+      console.error('❌ Error regenerating shifts:', error);
+      throw error;
     }
   },
 
-  // Create new plan
-  createPlan: async (data: CreateShiftPlanRequest): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE_URL}`, {
-      method: 'POST',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-    return handleResponse(response);
+  async createPlan(data: CreateShiftPlanRequest): Promise<ShiftPlan> {
+    return await apiClient.post<ShiftPlan>('/shift-plans', data);
   },
 
-  createFromPreset: async (data: {
+  async createFromPreset(data: {
     presetName: string;
     name: string;
     startDate: string;
     endDate: string;
     isTemplate?: boolean;
-  }): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE_URL}/from-preset`, {
-      method: 'POST',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-    
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
-      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+  }): Promise<ShiftPlan> {
+    try {
+      return await apiClient.post<ShiftPlan>('/shift-plans/from-preset', data);
+    } catch (error: any) {
+      throw new Error(error.message || `HTTP error! status: ${error.statusCode}`);
     }
-    
-    return response.json();
   },
 
-  getTemplatePresets: async (): Promise<{name: string, label: string, description: string}[]> => {
-    // name = label
-     return Object.entries(TEMPLATE_PRESETS).map(([key, preset]) => ({
+  async getTemplatePresets(): Promise<{name: string, label: string, description: string}[]> {
+    return Object.entries(TEMPLATE_PRESETS).map(([key, preset]) => ({
       name: key,
       label: preset.name,
       description: preset.description
@@ -203,25 +119,67 @@ export const shiftPlanService = {
   async clearAssignments(planId: string): Promise<void> {
     try {
       console.log('🔄 Clearing assignments for plan:', planId);
-      
-      const response = await fetch(`${API_BASE_URL}/${planId}/clear-assignments`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...authService.getAuthHeaders()
-        }
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
-        throw new Error(errorData.error || `Failed to clear assignments: ${response.status}`);
-      }
-
+      await apiClient.post(`/shift-plans/${planId}/clear-assignments`);
       console.log('✅ Assignments cleared successfully');
-      
     } catch (error) {
       console.error('❌ Error clearing assignments:', error);
       throw error;
     }
   },
+
+  async exportShiftPlanToExcel(planId: string): Promise<Blob> {
+    try {
+      console.log('📊 Exporting shift plan to Excel:', planId);
+      
+      // Use the apiClient with blob response handling
+      const blob = await apiClient.request<Blob>(`/shift-plans/${planId}/export/excel`, {
+        method: 'GET',
+      }, 'blob');
+      
+      console.log('✅ Excel export successful');
+      return blob;
+    } catch (error: any) {
+      console.error('❌ Error exporting to Excel:', error);
+      
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      
+      if (error.statusCode === 404) {
+        throw new Error('Schichtplan nicht gefunden');
+      }
+      
+      throw new Error('Fehler beim Excel-Export des Schichtplans');
+    }
+  },
+
+  async exportShiftPlanToPDF(planId: string): Promise<Blob> {
+    try {
+      console.log('📄 Exporting shift plan to PDF:', planId);
+      
+      // Use the apiClient with blob response handling
+      const blob = await apiClient.request<Blob>(`/shift-plans/${planId}/export/pdf`, {
+        method: 'GET',
+      }, 'blob');
+      
+      console.log('✅ PDF export successful');
+      return blob;
+    } catch (error: any) {
+      console.error('❌ Error exporting to PDF:', error);
+      
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      
+      if (error.statusCode === 404) {
+        throw new Error('Schichtplan nicht gefunden');
+      }
+      
+      throw new Error('Fehler beim PDF-Export des Schichtplans');
+    }
+  },
 };

frontend/vite.config.ts

@@ -1,29 +1,18 @@
-// vite.config.ts
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
 
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production'
-  const isDevelopment = mode === 'development'
-
   const env = loadEnv(mode, process.cwd(), '')
 
-  // 🆕 WICHTIG: Relative Pfade für Production
-  const clientEnv = {
-    NODE_ENV: mode,
-    ENABLE_PRO: env.ENABLE_PRO || 'false',
-    VITE_APP_TITLE: env.APP_TITLE || 'Shift Planning App',
-    VITE_API_URL: isProduction ? '/api' : '/api',
-  }
-
   return {
     plugins: [react()],
 
-    server: {
+    // Development proxy
+    server: isProduction ? undefined : {
       port: 3003,
       host: true,
-      //open: isDevelopment,
       proxy: {
         '/api': {
           target: 'http://localhost:3002',
@@ -33,25 +22,38 @@ export default defineConfig(({ mode }) => {
       }
     },
 
+    // Production build optimized for Express serving
     build: {
       outDir: 'dist',
-      sourcemap: isDevelopment,
-      base: isProduction ? '/' : '/',
+      sourcemap: false, // Disable in production
+      minify: 'terser',
+      
+      // Bundle optimization
       rollupOptions: {
         output: {
+          // Efficient chunking
+          manualChunks: {
+            vendor: ['react', 'react-dom', 'react-router-dom'],
+            utils: ['date-fns']
+          },
+          // Cache-friendly naming
           chunkFileNames: 'assets/[name]-[hash].js',
           entryFileNames: 'assets/[name]-[hash].js',
           assetFileNames: 'assets/[name]-[hash].[ext]',
         }
       },
-      minify: isProduction ? 'terser' : false,
-      terserOptions: isProduction ? {
+      
+      // Performance optimizations
+      terserOptions: {
         compress: {
           drop_console: true,
           drop_debugger: true,
-          pure_funcs: ['console.log', 'console.debug', 'console.info']
+          pure_funcs: ['console.log', 'console.debug']
         }
-      } : undefined,
+      },
+      
+      // Reduce chunking overhead
+      chunkSizeWarningLimit: 800
     },
 
     resolve: {
@@ -67,9 +69,11 @@ export default defineConfig(({ mode }) => {
       }
     },
 
-    define: Object.keys(clientEnv).reduce((acc, key) => {
-      acc[`import.meta.env.${key}`] = JSON.stringify(clientEnv[key])
-      return acc
-    }, {} as Record<string, string>)
+    // Environment variables
+    define: {
+      'import.meta.env.VITE_API_URL': JSON.stringify(isProduction ? '/api' : '/api'),
+      'import.meta.env.ENABLE_PRO': JSON.stringify(env.ENABLE_PRO || 'false'),
+      'import.meta.env.NODE_ENV': JSON.stringify(mode)
+    }
   }
 })

package.json

@@ -9,9 +9,13 @@
   "scripts": {
     "docker:build": "docker build -t schichtplan-app .",
     "docker:run": "docker run -p 3002:3002 schichtplan-app",
-    "build:all": "npm run build --workspace=backend && npm run build --workspace=frontend"
+    "build:all": "npm run build --workspace=backend && npm run build --workspace=frontend",
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
+    "dev:frontend": "cd frontend && npm run dev",
+    "dev:backend": "cd backend && npm run dev:single"
   },
   "devDependencies": {
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "concurrently": "9.2.1"
   }
 }