added dropdown menu

.env.template

@@ -1,16 +1,29 @@
-# === SCHICHTPLANER DOCKER COMPOSE ENVIRONMENT VARIABLES ===
+# .env.template
-# Diese Datei wird von docker-compose automatisch geladen
+# ============================================
+# DOCKER COMPOSE ENVIRONMENT TEMPLATE
+# Copy this file to .env and adjust values
+# ============================================
 
-# Security
+# Application settings
-JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
+NODE_ENV=production
-NODE_ENV=${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
+# Optional features
-PORT=${PORT:-3002}
+ENABLE_PRO=false
+DEBUG=false
 
-# App Configuration
+# Port configuration
-APP_TITLE="Shift Planning App"
+APP_PORT=3002
-ENABLE_PRO=${ENABLE_PRO:-false}
+
+# ============================================
+# 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
+RUN npm run build --only=production --workspace=frontend
-
-# Verify Python and OR-Tools installation
-RUN python -c "from ortools.sat.python import cp_model; print('OR-Tools installed successfully')"
 
 # 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,9 @@
     "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",
+    "playwright": "^1.37.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",
@@ -32,6 +37,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/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
+  ...getRateLimitConfig(),
-  max: 200, // 200 non-GET requests per 15 minutes
   message: { 
     error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen' 
   },
   standardHeaders: true,
   legacyHeaders: false,
-  skip: (req) => {
+  keyGenerator: (req) => getClientIP(req),
-    // ✅ Skip für GET requests (Data Fetching)
+  handler: (req, res) => {
-    if (req.method === 'GET') return true;
+    const clientIP = getClientIP(req);
+    console.warn(`🚨 Rate limit exceeded for IP: ${clientIP}, Path: ${req.path}, Method: ${req.method}`);
     
-    // ✅ Skip für Health/Status Checks
+    res.status(429).json({ 
-    return shouldSkipLimit(req);
+      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/models/helpers/employeeHelpers.ts

@@ -18,7 +18,7 @@ function generateEmail(firstname: string, lastname: string): string {
   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[] = [];
 
@@ -71,7 +71,7 @@ export function generateEmployeeEmail(firstname: string, lastname: string): stri
   return generateEmail(firstname, lastname);
 }
 
-// UPDATED: Business logic helpers for new employee types
+// Business logic helpers for new employee types
 export const isManager = (employee: Employee): boolean =>
   employee.employeeType === 'manager';
 
@@ -90,7 +90,7 @@ 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
+// Trainee logic - now based on isTrainee field for personell type
 export const isTrainee = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && employee.isTrainee;
 
@@ -107,7 +107,7 @@ export const isMaintenance = (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
+// Work alone permission - managers and experienced personell can work alone
 export const canEmployeeWorkAlone = (employee: Employee): boolean =>
   employee.canWorkAlone && (isManager(employee) || isExperienced(employee));
 
@@ -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/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/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({ 
+  res.json({
-    status: 'OK', 
+    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) => {
+app.get('/', async (req, res) => {
-  if (!frontendBuildPath) {
+  // In development with Vite middleware
-    if (isDevelopment) {
+  if (vite) {
-      return res.redirect('http://localhost:3003');
+    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) {
+  // Skip file extensions (assets)
-    if (isDevelopment) {
+  if (req.path.match(/\.[a-z0-9]+$/i)) {
-      return res.redirect(`http://localhost:3003${req.path}`);
+    return next();
-    }
-    return res.status(500).json({ error: 'Frontend application not available' });
   }
+
+  // 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');
+  if (fs.existsSync(indexPath)) {
-  res.sendFile(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}
+      - JWT_SECRET=${JWT_SECRET}
-    ports:
+      - TRUST_PROXY_ENABLED=true
-      - "3002:3002"
+      - 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
+    # Create .env with all proxy settings
-    envsubst < /app/.env.template > /app/.env
+    cat > /app/.env << EOF
-    echo "✅ .env Datei erstellt"
+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>
+    <ErrorBoundary>
-      <AuthProvider>
+      <NotificationProvider>
-        <Router>
+        <AuthProvider>
-          <NotificationContainer />
+          <Router>
-          <AppContent />
+            <SecurityWarning />
-        </Router>
+            <NotificationContainer />
-      </AuthProvider>
+            <AppContent />
-    </NotificationProvider>
+          </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/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

@@ -18,7 +18,7 @@ function generateEmail(firstname: string, lastname: string): string {
   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[] = [];
 
@@ -71,7 +71,7 @@ export function generateEmployeeEmail(firstname: string, lastname: string): stri
   return generateEmail(firstname, lastname);
 }
 
-// UPDATED: Business logic helpers for new employee types
+// Business logic helpers for new employee types
 export const isManager = (employee: Employee): boolean =>
   employee.employeeType === 'manager';
 
@@ -90,7 +90,7 @@ 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
+// Trainee logic - now based on isTrainee field for personell type
 export const isTrainee = (employee: Employee): boolean =>
   employee.employeeType === 'personell' && employee.isTrainee;
 
@@ -107,7 +107,7 @@ export const isMaintenance = (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
+// Work alone permission - managers and experienced personell can work alone
 export const canEmployeeWorkAlone = (employee: Employee): boolean =>
   employee.canWorkAlone && (isManager(employee) || isExperienced(employee));
 
@@ -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/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/ShiftPlans/ShiftPlanCreate.tsx

@@ -18,7 +18,7 @@ const ShiftPlanCreate: React.FC = () => {
   const [searchParams] = useSearchParams();
   const { showNotification } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [planName, setPlanName] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
@@ -35,9 +35,9 @@ const ShiftPlanCreate: React.FC = () => {
       console.log('🔄 Lade verfügbare Vorlagen-Presets...');
       const data = await shiftPlanService.getTemplatePresets();
       console.log('✅ Presets geladen:', data);
-      
+
       setPresets(data);
-      
+
       // Setze das erste Preset als Standard, falls vorhanden
       if (data.length > 0) {
         setSelectedPreset(data[0].name);
@@ -75,7 +75,7 @@ const ShiftPlanCreate: React.FC = () => {
     if (!endDate) {
       showNotification({
         type: 'error',
-        title: 'Fehlende Angaben', 
+        title: 'Fehlende Angaben',
         message: 'Bitte wählen Sie ein Enddatum'
       });
       return;
@@ -115,14 +115,14 @@ const ShiftPlanCreate: React.FC = () => {
       });
 
       console.log('✅ Plan erstellt:', createdPlan);
-      
+
       // Erfolgsmeldung und Weiterleitung
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan erfolgreich erstellt!'
       });
-      
+
       setTimeout(() => {
         navigate(`/shift-plans/${createdPlan.id}`);
       }, 1500);
@@ -146,20 +146,20 @@ const ShiftPlanCreate: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <h1>Neuen Schichtplan erstellen</h1>
-        <button 
+        <button
-          onClick={() => navigate(-1)} 
+          onClick={() => navigate(-1)}
           className={styles.backButton}
           disabled={isSubmitting}
         >
           Zurück
         </button>
       </div>
-      
+
       <div className={styles.form}>
         <div className={styles.formGroup}>
           <label>Plan Name:</label>
-          <input 
+          <input
-            type="text" 
+            type="text"
             value={planName}
             onChange={(e) => setPlanName(e.target.value)}
             placeholder="z.B. KW 42 2025"
@@ -171,8 +171,8 @@ const ShiftPlanCreate: React.FC = () => {
         <div className={styles.dateGroup}>
           <div className={styles.formGroup}>
             <label>Von:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={startDate}
               onChange={(e) => setStartDate(e.target.value)}
               className={styles.input}
@@ -182,8 +182,8 @@ const ShiftPlanCreate: React.FC = () => {
 
           <div className={styles.formGroup}>
             <label>Bis:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={endDate}
               onChange={(e) => setEndDate(e.target.value)}
               className={styles.input}
@@ -194,8 +194,8 @@ const ShiftPlanCreate: React.FC = () => {
 
         <div className={styles.formGroup}>
           <label>Vorlage verwenden:</label>
-          <select 
+          <select
-            value={selectedPreset} 
+            value={selectedPreset}
             onChange={(e) => setSelectedPreset(e.target.value)}
             className={`${styles.select} ${presets.length === 0 ? styles.empty : ''}`}
             disabled={isSubmitting}
@@ -207,7 +207,7 @@ const ShiftPlanCreate: React.FC = () => {
               </option>
             ))}
           </select>
-          
+
           {selectedPreset && (
             <div className={styles.presetDescription}>
               {getSelectedPresetDescription()}
@@ -222,9 +222,9 @@ const ShiftPlanCreate: React.FC = () => {
         </div>
 
         <div className={styles.actions}>
-          <button 
+          <button
-            onClick={handleCreate} 
+            onClick={handleCreate}
-            className={styles.createButton} 
+            className={styles.createButton}
             disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
           >
             {isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -1,5 +1,5 @@
-// frontend/src/pages/ShiftPlans/ShiftPlanView.tsx - UPDATED
+// frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { shiftPlanService } from '../../services/shiftPlanService';
@@ -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 {
@@ -44,7 +45,7 @@ const ShiftPlanView: React.FC = () => {
   const navigate = useNavigate();
   const { hasRole, user } = useAuth();
   const { showNotification } = useNotification();
-  
+
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [employees, setEmployees] = useState<Employee[]>([]);
   const [availabilities, setAvailabilities] = useState<EmployeeAvailability[]>([]);
@@ -54,19 +55,23 @@ const ShiftPlanView: React.FC = () => {
   const [scheduledShifts, setScheduledShifts] = useState<ScheduledShift[]>([]);
   const [showAssignmentPreview, setShowAssignmentPreview] = useState(false);
   const [recreating, setRecreating] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [exportType, setExportType] = useState<'pdf' | 'excel' | null>(null);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     loadShiftPlanData();
-    
+
     // Event Listener für Verfügbarkeits-Änderungen
     const handleAvailabilityChange = () => {
       console.log('📢 Verfügbarkeiten wurden geändert - lade Daten neu...');
       reloadAvailabilities();
     };
-    
+
     // Globales Event für Verfügbarkeits-Änderungen
     window.addEventListener('availabilitiesChanged', handleAvailabilityChange);
-    
+
     return () => {
       window.removeEventListener('availabilitiesChanged', handleAvailabilityChange);
     };
@@ -82,7 +87,7 @@ const ShiftPlanView: React.FC = () => {
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);
-    
+
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
@@ -97,17 +102,17 @@ const ShiftPlanView: React.FC = () => {
 
   const debugAvailabilityShiftIds = () => {
     if (!availabilities.length) return;
-    
+
     console.log('🔍 AVAILABILITY SHIFT ID ANALYSIS:');
     const uniqueShiftIds = [...new Set(availabilities.map(a => a.shiftId))];
-    
+
     console.log(`Unique shift IDs in availabilities: ${uniqueShiftIds.length}`);
     uniqueShiftIds.forEach(shiftId => {
       const count = availabilities.filter(a => a.shiftId === shiftId).length;
       const pref1 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 1).length;
       const pref2 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 2).length;
       const pref3 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 3).length;
-      
+
       console.log(`   ${shiftId}: ${count} total (✅${pref1} 🔶${pref2} ❌${pref3})`);
     });
   };
@@ -119,6 +124,12 @@ const ShiftPlanView: React.FC = () => {
     }
   }, [availabilities]);
 
+  useEffect(() => {
+    if (dropdownRef.current) {
+      setDropdownWidth(dropdownRef.current.offsetWidth);
+    }
+  }, [exportType]);
+
   // Create a data structure that maps days to their shifts with time slot info - SAME AS AVAILABILITYMANAGER
   const getTimetableData = () => {
     if (!shiftPlan || !shiftPlan.shifts || !shiftPlan.timeSlots) {
@@ -133,7 +144,7 @@ const ShiftPlanView: React.FC = () => {
       if (!acc[shift.dayOfWeek]) {
         acc[shift.dayOfWeek] = [];
       }
-      
+
       const timeSlot = timeSlotMap.get(shift.timeSlotId);
       const enhancedShift: ExtendedShift = {
         ...shift,
@@ -142,7 +153,7 @@ const ShiftPlanView: React.FC = () => {
         endTime: timeSlot?.endTime,
         displayName: timeSlot ? `${timeSlot.name} (${formatTime(timeSlot.startTime)}-${formatTime(timeSlot.endTime)})` : shift.id
       };
-      
+
       acc[shift.dayOfWeek].push(enhancedShift);
       return acc;
     }, {} as Record<number, ExtendedShift[]>);
@@ -202,11 +213,11 @@ const ShiftPlanView: React.FC = () => {
     }
 
     const validationErrors: string[] = [];
-    
+
     // Check for missing time slots - SAME VALIDATION AS AVAILABILITYMANAGER
     const usedTimeSlotIds = new Set(shiftPlan.shifts.map(s => s.timeSlotId));
     const availableTimeSlotIds = new Set(shiftPlan.timeSlots.map(ts => ts.id));
-    
+
     usedTimeSlotIds.forEach(timeSlotId => {
       if (!availableTimeSlotIds.has(timeSlotId)) {
         validationErrors.push(`Zeitslot ${timeSlotId} wird verwendet, existiert aber nicht in timeSlots`);
@@ -240,12 +251,45 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
+  const handleExport = async () => {
+    if (!shiftPlan || !exportType) return;
+
+    try {
+      setExporting(true);
+
+      let blob: Blob;
+      if (exportType === 'excel') {
+        blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+        saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      } else {
+        blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+        saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      }
+
+      showNotification({
+        type: 'success',
+        title: 'Export erfolgreich',
+        message: `Der Schichtplan wurde als ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
+      });
+
+    } catch (error) {
+      console.error(`Error exporting to ${exportType}:`, error);
+      showNotification({
+        type: 'error',
+        title: 'Export fehlgeschlagen',
+        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-Export konnte nicht durchgeführt werden.`
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
   const loadShiftPlanData = async () => {
     if (!id) return;
-    
+
     try {
       setLoading(true);
-      
+
       // Load plan and employees first
       const [plan, employeesData] = await Promise.all([
         shiftPlanService.getShiftPlan(id),
@@ -258,7 +302,7 @@ const ShiftPlanView: React.FC = () => {
       // CRITICAL: Load scheduled shifts and verify they exist
       const shiftsData = await shiftAssignmentService.getScheduledShiftsForPlan(id);
       console.log('📋 Loaded scheduled shifts:', shiftsData.length);
-      
+
       if (shiftsData.length === 0) {
         console.warn('⚠️ No scheduled shifts found for plan:', id);
         showNotification({
@@ -272,21 +316,21 @@ const ShiftPlanView: React.FC = () => {
 
       // Load availabilities - USING THE SAME LOGIC AS AVAILABILITYMANAGER
       console.log('🔄 LADE VERFÜGBARKEITEN FÜR PLAN:', id);
-      
+
       const availabilityPromises = employeesData
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter to only include availabilities for the current plan - SAME LOGIC AS AVAILABILITYMANAGER
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       console.log('✅ VERFÜGBARKEITEN FÜR DIESEN PLAN:', planAvailabilities.length);
-      
+
       setAvailabilities(planAvailabilities);
 
       // Run validation
@@ -312,7 +356,7 @@ const ShiftPlanView: React.FC = () => {
 
     try {
       setRecreating(true);
-      
+
       if (!window.confirm('Möchten Sie die aktuellen Zuweisungen wirklich zurücksetzen? Alle vorhandenen Zuweisungen werden gelöscht.')) {
         return;
       }
@@ -343,7 +387,7 @@ const ShiftPlanView: React.FC = () => {
       // STEP 4: CRITICAL - Force reload of scheduled shifts to get EMPTY assignments
       const refreshedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
       setScheduledShifts(refreshedShifts); // Update state with EMPTY assignments
-      
+
       // STEP 5: Clear any previous assignment results
       setAssignmentResult(null);
       setShowAssignmentPreview(false);
@@ -383,9 +427,9 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(true);
       setAssignmentResult(null); // Reset previous results
       setShowAssignmentPreview(false); // Reset preview
-      
+
       console.log('🔄 STARTING ASSIGNMENT PREVIEW...');
-      
+
       // FORCE COMPLETE REFRESH - don't rely on cached state
       const [refreshedEmployees, refreshedAvailabilities] = await Promise.all([
         employeeService.getEmployees().then(emps => emps.filter(emp => emp.isActive)),
@@ -399,12 +443,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,
@@ -414,7 +458,7 @@ const ShiftPlanView: React.FC = () => {
       };
 
       console.log('🧠 Calling shift assignment service...');
-      
+
       // Use the freshly loaded data, not the state
       const result = await shiftAssignmentService.assignShifts(
         shiftPlan,
@@ -435,7 +479,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔍 ASSIGNMENTS BY SHIFT PATTERN:');
       Object.entries(result.assignments).forEach(([shiftId, empIds]) => {
         const shiftPattern = shiftPlan.shifts?.find(s => s.id === shiftId);
-        
+
         if (shiftPattern) {
           console.log(`   ✅ Shift Pattern: ${shiftId}`);
           console.log(`      - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
@@ -451,7 +495,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔄 Setting assignment result and showing preview...');
       setAssignmentResult(result);
       setShowAssignmentPreview(true);
-      
+
       console.log('✅ Assignment preview ready, modal should be visible');
 
     } catch (error) {
@@ -465,18 +509,18 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(false);
     }
   };
-  
+
   const handlePublish = async () => {
     if (!shiftPlan || !assignmentResult) return;
 
     try {
       setPublishing(true);
-      
+
       console.log('🔄 Starting to publish assignments...');
-      
+
       // Get fresh scheduled shifts
       const updatedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
-      
+
       if (!updatedShifts || updatedShifts.length === 0) {
         throw new Error('No scheduled shifts found in the plan');
       }
@@ -486,19 +530,19 @@ const ShiftPlanView: React.FC = () => {
 
       const updatePromises = updatedShifts.map(async (scheduledShift) => {
         const dayOfWeek = getDayOfWeek(scheduledShift.date);
-        
+
         // Find the corresponding shift pattern for this day and time slot
-        const shiftPattern = shiftPlan?.shifts?.find(shift => 
+        const shiftPattern = shiftPlan?.shifts?.find(shift =>
-          shift.dayOfWeek === dayOfWeek && 
+          shift.dayOfWeek === dayOfWeek &&
           shift.timeSlotId === scheduledShift.timeSlotId
         );
-        
+
         let assignedEmployees: string[] = [];
-        
+
         if (shiftPattern) {
           assignedEmployees = assignmentResult.assignments[shiftPattern.id] || [];
           console.log(`📝 Updating scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId}) with`, assignedEmployees, 'employees');
-          
+
           if (assignedEmployees.length === 0) {
             console.warn(`⚠️ No assignments found for shift pattern ${shiftPattern.id}`);
             console.log('🔍 Available assignment keys:', Object.keys(assignmentResult.assignments));
@@ -506,13 +550,13 @@ const ShiftPlanView: React.FC = () => {
         } else {
           console.warn(`⚠️ No shift pattern found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
         }
-        
+
         try {
           // Update the scheduled shift with assigned employees
           await shiftAssignmentService.updateScheduledShift(scheduledShift.id, {
             assignedEmployees
           });
-          
+
           console.log(`✅ Successfully updated scheduled shift ${scheduledShift.id}`);
         } catch (error) {
           console.error(`❌ Failed to update shift ${scheduledShift.id}:`, error);
@@ -550,12 +594,12 @@ const ShiftPlanView: React.FC = () => {
 
     } catch (error) {
       console.error('❌ Error publishing shift plan:', error);
-      
+
       let message = 'Unbekannter Fehler';
       if (error instanceof Error) {
         message = error.message;
       }
-      
+
       showNotification({
         type: 'error',
         title: 'Fehler',
@@ -569,7 +613,7 @@ const ShiftPlanView: React.FC = () => {
   const refreshAllAvailabilities = async (): Promise<EmployeeAvailability[]> => {
     try {
       console.log('🔄 Force refreshing ALL availabilities with error handling...');
-      
+
       if (!id) {
         console.error('❌ No plan ID available');
         return [];
@@ -585,20 +629,20 @@ const ShiftPlanView: React.FC = () => {
             return []; // Return empty array instead of failing entire operation
           }
         });
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // More robust filtering
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability && availability.planId === id
       );
-      
+
       console.log(`✅ Successfully refreshed ${planAvailabilities.length} availabilities for plan ${id}`);
-      
+
       // IMMEDIATELY update state
       setAvailabilities(planAvailabilities);
-      
+
       return planAvailabilities;
     } catch (error) {
       console.error('❌ Critical error refreshing availabilities:', error);
@@ -609,21 +653,21 @@ const ShiftPlanView: React.FC = () => {
 
   const debugShiftMatching = () => {
     if (!shiftPlan || !scheduledShifts.length) return;
-    
+
     console.log('🔍 DEBUG: Shift Pattern to Scheduled Shift Matching');
     console.log('==================================================');
-    
+
     shiftPlan.shifts?.forEach(shiftPattern => {
       const matchingScheduledShifts = scheduledShifts.filter(scheduled => {
         const dayOfWeek = getDayOfWeek(scheduled.date);
-        return dayOfWeek === shiftPattern.dayOfWeek && 
+        return dayOfWeek === shiftPattern.dayOfWeek &&
-              scheduled.timeSlotId === shiftPattern.timeSlotId;
+          scheduled.timeSlotId === shiftPattern.timeSlotId;
       });
-      
+
       console.log(`📅 Shift Pattern: ${shiftPattern.id}`);
       console.log(`   - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
       console.log(`   - Matching scheduled shifts: ${matchingScheduledShifts.length}`);
-      
+
       if (assignmentResult) {
         const assignments = assignmentResult.assignments[shiftPattern.id] || [];
         console.log(`   - Assignments: ${assignments.length} employees`);
@@ -640,7 +684,7 @@ const ShiftPlanView: React.FC = () => {
 
   const canPublish = () => {
     if (!shiftPlan || shiftPlan.status === 'published') return false;
-    
+
     // Check if all active employees have set their availabilities
     const employeesWithoutAvailabilities = employees.filter(emp => {
       const empAvailabilities = availabilities.filter(avail => avail.employeeId === emp.id);
@@ -650,6 +694,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(
@@ -666,23 +724,23 @@ const ShiftPlanView: React.FC = () => {
   const reloadAvailabilities = async () => {
     try {
       console.log('🔄 Lade Verfügbarkeiten neu...');
-      
+
       // Load availabilities for all employees
       const availabilityPromises = employees
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter availabilities to only include those for the current shift plan
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       setAvailabilities(planAvailabilities);
       console.log('✅ Verfügbarkeiten neu geladen:', planAvailabilities.length);
-      
+
     } catch (error) {
       console.error('❌ Fehler beim Neuladen der Verfügbarkeiten:', error);
     }
@@ -690,26 +748,26 @@ const ShiftPlanView: React.FC = () => {
 
   const getAssignmentsForScheduledShift = (scheduledShift: ScheduledShift): string[] => {
     if (!assignmentResult) return [];
-    
+
     const dayOfWeek = getDayOfWeek(scheduledShift.date);
-    
+
     // Find the corresponding shift pattern for this day and time slot
-    const shiftPattern = shiftPlan?.shifts?.find(shift => 
+    const shiftPattern = shiftPlan?.shifts?.find(shift =>
-      shift.dayOfWeek === dayOfWeek && 
+      shift.dayOfWeek === dayOfWeek &&
       shift.timeSlotId === scheduledShift.timeSlotId
     );
-    
+
     if (shiftPattern && assignmentResult.assignments[shiftPattern.id]) {
       console.log(`✅ Found assignments for shift pattern ${shiftPattern.id}:`, assignmentResult.assignments[shiftPattern.id]);
       return assignmentResult.assignments[shiftPattern.id];
     }
-    
+
     // Fallback: Check if there's a direct match with scheduled shift ID (unlikely)
     if (assignmentResult.assignments[scheduledShift.id]) {
       console.log(`⚠️ Using direct scheduled shift assignment for ${scheduledShift.id}`);
       return assignmentResult.assignments[scheduledShift.id];
     }
-    
+
     console.warn(`❌ No assignments found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
     return [];
   };
@@ -820,13 +878,10 @@ 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];
-                    
+
                     if (!shift) {
                       return (
                         <td key={weekday.id} style={{
@@ -844,65 +899,115 @@ const ShiftPlanView: React.FC = () => {
 
                     // Validation: Check if shift has correct timeSlotId and dayOfWeek - SAME AS AVAILABILITYMANAGER
                     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.employeeType === '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
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       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 employeeBoxes = createEmployeeBoxes(assignedEmployees);
-                          const employee = employees.find(emp => emp.id === empId);
+                        displayContent = employeeBoxes.length > 0 ? (
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                        }).join(', ');
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        displayText = assignedEmployees.map(empId => {
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
-                          const employee = employees.find(emp => emp.id === empId);
+                        displayContent = employeeBoxes.length > 0 ? (
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                        }).join(', ');
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     }
 
-                    // If no assignments yet, show empty or required count
+                    // If no display content set yet, use fallback
-                    if (!displayText) {
+                    if (!displayContent) {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                      displayContent = (
-                        s.dayOfWeek === weekday.id && 
+                        <div style={{ color: '#666', fontStyle: 'italic' }}>
-                        s.timeSlotId === timeSlot.id
+                          {getFallbackContent()}
-                      ) || [];
+                        </div>
-                      
+                      );
-                      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 = '-';
-                      }
                     }
 
                     return (
@@ -931,24 +1036,22 @@ const ShiftPlanView: React.FC = () => {
                             alignItems: 'center',
                             justifyContent: 'center'
                           }}
-                          title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
+                            title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
                           >
                             ⚠️
                           </div>
                         )}
 
-                        {displayText}
+                        {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
-                        <div style={{ 
+                        <div style={{
-                          fontSize: '10px', 
+                          fontSize: '10px',
-                          color: '#666', 
+                          color: '#666',
                           marginTop: '4px',
                           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 +1066,6 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
-
       </div>
     );
   };
@@ -978,20 +1080,20 @@ const ShiftPlanView: React.FC = () => {
   return (
     <div style={{ padding: '20px' }}>
       {/* Header with Plan Information and Actions */}
-      <div style={{ 
+      <div style={{
-        display: 'flex', 
+        display: 'flex',
-        justifyContent: 'space-between', 
+        justifyContent: 'space-between',
         alignItems: 'flex-start',
         marginBottom: '20px'
       }}>
         <div>
           <h1>{shiftPlan.name}</h1>
           <p style={{ color: '#666', margin: 0 }}>
-            {shiftPlan.startDate && shiftPlan.endDate && 
+            {shiftPlan.startDate && shiftPlan.endDate &&
               `Zeitraum: ${formatDate(shiftPlan.startDate)} - ${formatDate(shiftPlan.endDate)}`
             }
           </p>
-          <div style={{ 
+          <div style={{
             display: 'inline-block',
             padding: '4px 12px',
             backgroundColor: shiftPlan.status === 'published' ? '#2ecc71' : '#f1c40f',
@@ -1004,8 +1106,9 @@ const ShiftPlanView: React.FC = () => {
             {shiftPlan.status === 'published' ? 'Veröffentlicht' : 'Entwurf'}
           </div>
         </div>
-          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-            {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          {/* "Zuweisungen neu berechnen" button */}
+          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
               disabled={recreating}
@@ -1022,7 +1125,7 @@ const ShiftPlanView: React.FC = () => {
               {recreating ? 'Lösche Zuweisungen...' : 'Zuweisungen neu berechnen'}
             </button>
           )}
-          
+
           <button
             onClick={() => navigate('/shift-plans')}
             style={{
@@ -1057,15 +1160,15 @@ const ShiftPlanView: React.FC = () => {
               <div style={{ fontSize: '18px', fontWeight: 'bold' }}>
                 {availabilityStatus.completed} / {availabilityStatus.total} Mitarbeiter
               </div>
-              <div style={{ 
+              <div style={{
-                width: '200px', 
+                width: '200px',
-                height: '8px', 
+                height: '8px',
-                backgroundColor: '#e0e0e0', 
+                backgroundColor: '#e0e0e0',
                 borderRadius: '4px',
                 marginTop: '5px',
                 overflow: 'hidden'
               }}>
-                <div 
+                <div
                   style={{
                     width: `${availabilityStatus.percentage}%`,
                     height: '100%',
@@ -1075,7 +1178,7 @@ const ShiftPlanView: React.FC = () => {
                 />
               </div>
             </div>
-            
+
             {hasRole(['admin', 'maintenance']) && (
               <div>
                 <button
@@ -1093,11 +1196,11 @@ const ShiftPlanView: React.FC = () => {
                 >
                   {publishing ? 'Berechne...' : 'Automatisch zuweisen'}
                 </button>
-                
+
                 {!canPublish() && (
                   <div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>
-                    {availabilityStatus.percentage === 100 
+                    {availabilityStatus.percentage === 100
-                      ? 'Bereit zur Berechnung' 
+                      ? 'Bereit zur Berechnung'
                       : `${availabilityStatus.total - availabilityStatus.completed} Mitarbeiter müssen noch Verfügbarkeit eintragen`}
                   </div>
                 )}
@@ -1118,7 +1221,7 @@ const ShiftPlanView: React.FC = () => {
         </div>
       )}
 
-      {/* Assignment Preview Modal - FIXED CONDITION */}
+      {/* Assignment Preview Modal */}
       {(showAssignmentPreview || assignmentResult) && (
         <div style={{
           position: 'fixed',
@@ -1142,7 +1245,7 @@ const ShiftPlanView: React.FC = () => {
             width: '90%'
           }}>
             <h2>Wochenmuster-Zuordnung</h2>
-            
+
             {/* Detaillierter Reparatur-Bericht anzeigen */}
             {assignmentResult?.resolutionReport && (
               <div style={{
@@ -1158,15 +1261,15 @@ const ShiftPlanView: React.FC = () => {
                 <h4 style={{ color: '#2c3e50', marginTop: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
                   <span>📋</span> Detaillierter Reparatur-Bericht
                 </h4>
-                <div style={{ 
+                <div style={{
-                  fontFamily: 'monospace', 
+                  fontFamily: 'monospace',
                   fontSize: '12px',
                   lineHeight: '1.4'
                 }}>
                   {assignmentResult.resolutionReport.map((line, index) => {
                     let color = '#2c3e50';
                     let fontWeight = 'normal';
-                    
+
                     if (line.includes('✅') || line.includes('ALLES KRITISCHEN PROBLEME BEHOBEN')) {
                       color = '#2ecc71';
                       fontWeight = 'bold';
@@ -1181,9 +1284,9 @@ const ShiftPlanView: React.FC = () => {
                     } else if (line.startsWith('   •') || line.startsWith('   -')) {
                       color = '#7f8c8d';
                     }
-                    
+
                     return (
-                      <div key={index} style={{ 
+                      <div key={index} style={{
                         color,
                         fontWeight,
                         marginBottom: line === '' ? '5px' : '2px',
@@ -1196,16 +1299,14 @@ const ShiftPlanView: React.FC = () => {
                 </div>
               </div>
             )}
-              
+
-            {/* KORRIGIERTE ZUSAMMENFASSUNG */}
+            {/* ZUSAMMENFASSUNG */}
             {assignmentResult && (
               <div style={{ marginBottom: '20px' }}>
                 <h4>Zusammenfassung:</h4>
-                
+
                 {/* Entscheidung basierend auf tatsächlichen kritischen Problemen */}
-                {assignmentResult.violations.filter(v => 
+                {(assignmentResult.violations.length === 0) || assignmentResult.success == true ? (
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length === 0 ? (
                   <div style={{
                     padding: '15px',
                     backgroundColor: '#d4edda',
@@ -1243,7 +1344,7 @@ const ShiftPlanView: React.FC = () => {
                     </ul>
                   </div>
                 )}
-                
+
                 {/* Warnungen separat anzeigen - NUR wenn welche vorhanden sind */}
                 {assignmentResult.violations.some(v => v.includes('WARNING:') || v.includes('⚠️')) && (
                   <div style={{
@@ -1287,34 +1388,26 @@ const ShiftPlanView: React.FC = () => {
               >
                 Abbrechen
               </button>
-              
+
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
-                disabled={publishing || (assignmentResult ? assignmentResult.violations.filter(v => 
+                disabled={publishing || !canPublishAssignment()}
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length > 0 : true)}
                 style={{
                   padding: '10px 20px',
-                  backgroundColor: assignmentResult ? (assignmentResult.violations.filter(v => 
+                  backgroundColor: canPublishAssignment() ? '#2ecc71' : '#95a5a6',
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? '#2ecc71' : '#95a5a6') : '#95a5a6',
                   color: 'white',
                   border: 'none',
                   borderRadius: '4px',
-                  cursor: assignmentResult ? (assignmentResult.violations.filter(v => 
+                  cursor: canPublishAssignment() ? 'pointer' : 'not-allowed',
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? 'pointer' : 'not-allowed') : 'not-allowed',
                   fontWeight: 'bold',
                   fontSize: '16px'
                 }}
               >
                 {publishing ? 'Veröffentliche...' : (
                   assignmentResult ? (
-                    assignmentResult.violations.filter(v => 
+                    canPublishAssignment()
-                      v.includes('ERROR:') || v.includes('❌ KRITISCH:')
+                      ? 'Schichtplan veröffentlichen'
-                    ).length === 0 
-                      ? 'Schichtplan veröffentlichen' 
                       : 'Kritische Probleme müssen behoben werden'
                   ) : 'Lade Zuordnungen...'
                 )}
@@ -1322,7 +1415,7 @@ const ShiftPlanView: React.FC = () => {
             </div>
           </div>
         </div>
-      )}     
+      )}
 
       {/* Timetable */}
       <div style={{
@@ -1332,13 +1425,72 @@ const ShiftPlanView: React.FC = () => {
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
       }}>
         <h3>
-          Schichtplan 
+          Schichtplan
           {shiftPlan.status === 'published' && ' (Aktuelle Zuweisungen)'}
           {assignmentResult && shiftPlan.status === 'draft' && ' (Exemplarische Woche)'}
         </h3>
-        
+
         {renderTimetable()}
 
+        {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            marginLeft: '10px'
+          }}>
+            {/* Export Dropdown */}
+            <div
+              ref={dropdownRef}
+              style={{
+                transform: exportType ? `translateX(-${dropdownWidth}px)` : 'translateX(0)',
+                transition: 'transform 0.3s ease-in-out',
+                position: exportType ? 'absolute' : 'relative',
+                right: exportType ? `-${dropdownWidth}px` : '0'
+              }}
+            >
+              <select
+                value={exportType || ''}
+                onChange={(e) => setExportType(e.target.value as 'pdf' | 'excel' | null)}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: 'white',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  minWidth: '120px'
+                }}
+              >
+                <option value="">Export</option>
+                <option value="pdf">PDF</option>
+                <option value="excel">Excel</option>
+              </select>
+            </div>
+
+            {/* Export Button */}
+            {exportType && (
+              <button
+                onClick={handleExport}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#51258f',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  marginLeft: '10px',
+                  opacity: exporting ? 0.7 : 1,
+                  transition: 'opacity 0.2s ease'
+                }}
+              >
+                {exporting ? '🔄 Exportiert...' : 'EXPORT'}
+              </button>
+            )}
+          </div>
+        )}
+
         {/* Summary */}
         {days.length > 0 && (
           <div style={{
@@ -1350,11 +1502,11 @@ const ShiftPlanView: React.FC = () => {
             fontSize: '14px'
           }}>
             <strong>Legende:</strong> {
-              shiftPlan.status === 'published' 
+              shiftPlan.status === 'published'
                 ? 'Angezeigt werden die aktuell zugewiesenen Mitarbeiter'
                 : assignmentResult
-                ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
+                  ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
-                : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
+                  : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
             }
           </div>
         )}

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,8 +1,5 @@
-// frontend/src/services/authService.ts - UPDATED
 import { Employee } from '../models/Employee';
-import { ErrorService } from './errorService';
+import { apiClient } from './apiClient';
-
-const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
 
 export interface LoginRequest {
   email: string;
@@ -25,31 +22,8 @@ export interface AuthResponse {
 class AuthService {
   private token: string | null = null;
 
-  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 || errorData.message || 'Authentication failed');
-    }
-
-    return response.json();
-  }
-
   async login(credentials: LoginRequest): Promise<AuthResponse> {
-    const response = await fetch(`${API_BASE_URL}/auth/login`, {
+    const data = await apiClient.post<AuthResponse>('/auth/login', credentials);
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(credentials)
-    });
-
-    const data = await this.handleApiResponse<AuthResponse>(response);
     this.token = data.token;
     localStorage.setItem('token', data.token);
     localStorage.setItem('employee', JSON.stringify(data.employee));
@@ -57,13 +31,7 @@ class AuthService {
   }
 
   async register(userData: RegisterRequest): Promise<AuthResponse> {
-    const response = await fetch(`${API_BASE_URL}/employees`, {
+    await apiClient.post('/employees', userData);
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(userData)
-    });
-
-    const data = await this.handleApiResponse<AuthResponse>(response);
     return this.login({
       email: userData.email,
       password: userData.password
@@ -77,28 +45,16 @@ class AuthService {
 
   async fetchCurrentEmployee(): Promise<Employee | null> {
     const token = this.getToken();
-    if (!token) {
+    if (!token) return null;
-      return null;
-    }
 
     try {
-      const response = await fetch(`${API_BASE_URL}/auth/me`, {
+      const data = await apiClient.get<{ user: Employee }>('/auth/me');
-        headers: {
+      localStorage.setItem('user', JSON.stringify(data.user));
-          'Authorization': `Bearer ${token}`
+      return data.user;
-        }
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        const user = data.user;
-        localStorage.setItem('user', JSON.stringify(user));
-        return user;
-      }
     } catch (error) {
       console.error('Error fetching current user:', error);
+      return null;
     }
-
-    return null;
   }
 
   logout(): void {

frontend/src/services/employeeService.ts

@@ -1,138 +1,58 @@
-// frontend/src/services/employeeService.ts
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest, EmployeeAvailability } from '../models/Employee';
-import { ErrorService, ValidationError } from './errorService';
+import { apiClient } from './apiClient';
-
-const API_BASE_URL = '/api';
-
-const getAuthHeaders = () => {
-  const token = localStorage.getItem('token');
-  return {
-    'Content-Type': 'application/json',
-    'Authorization': `Bearer ${token}`
-  };
-};
 
 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 || errorData.message || `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');
+    try {
-    console.log('🔑 Token exists:', !!token);
+      const employees = await apiClient.get<Employee[]>(`/employees?includeInactive=${includeInactive}`);
-
+      console.log('✅ Employees received:', employees.length);
-    const response = await fetch(`${API_BASE_URL}/employees?includeInactive=${includeInactive}`, {
+      return employees;
-      headers: getAuthHeaders(),
+    } catch (error) {
-    });
+      console.error('❌ Error fetching employees:', error);
-
+      throw error; // Let useBackendValidation handle this
-    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');
     }
-
-    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}`, {
+    return apiClient.get<Employee>(`/employees/${id}`);
-      headers: getAuthHeaders(),
-    });
-
-    return this.handleApiResponse<Employee>(response);
   }
 
   async createEmployee(employee: CreateEmployeeRequest): Promise<Employee> {
-    const response = await fetch(`${API_BASE_URL}/employees`, {
+    return apiClient.post<Employee>('/employees', employee);
-      method: 'POST',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(employee),
-    });
-
-    return this.handleApiResponse<Employee>(response);
   }
 
   async updateEmployee(id: string, employee: UpdateEmployeeRequest): Promise<Employee> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}`, {
+    return apiClient.put<Employee>(`/employees/${id}`, employee);
-      method: 'PUT',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(employee),
-    });
-
-    return this.handleApiResponse<Employee>(response);
   }
 
   async deleteEmployee(id: string): Promise<void> {
-    const response = await fetch(`${API_BASE_URL}/employees/${id}`, {
+    await apiClient.delete(`/employees/${id}`);
-      method: 'DELETE',
-      headers: getAuthHeaders(),
-    });
-
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to delete employee');
-    }
   }
 
   async getAvailabilities(employeeId: string): Promise<EmployeeAvailability[]> {
-    const response = await fetch(`${API_BASE_URL}/employees/${employeeId}/availabilities`, {
+    return apiClient.get<EmployeeAvailability[]>(`/employees/${employeeId}/availabilities`);
-      headers: getAuthHeaders(),
-    });
-
-    return this.handleApiResponse<EmployeeAvailability[]>(response);
   }
 
-  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`, {
+    return apiClient.put<EmployeeAvailability[]>(`/employees/${employeeId}/availabilities`, data);
-      method: 'PUT',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-
-    return this.handleApiResponse<EmployeeAvailability[]>(response);
   }
 
-  async changePassword(id: string, data: { currentPassword: string, newPassword: string, confirmPassword: string }): Promise<void> {
+  async changePassword(
-    const response = await fetch(`${API_BASE_URL}/employees/${id}/password`, {
+    id: string, 
-      method: 'PUT',
+    data: { currentPassword: string, newPassword: string, confirmPassword: string }
-      headers: getAuthHeaders(),
+  ): Promise<void> {
-      body: JSON.stringify(data),
+    return apiClient.put<void>(`/employees/${id}/password`, data);
-    });
-
-    return this.handleApiResponse<void>(response);
   }
 
   async updateLastLogin(employeeId: string): Promise<void> {
     try {
-      const response = await fetch(`${API_BASE_URL}/employees/${employeeId}/last-login`, {
+      await apiClient.patch(`/employees/${employeeId}/last-login`);
-        method: 'PATCH',
-        headers: getAuthHeaders(),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to update 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';
-
+import { apiClient } from './apiClient';
-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}` })
-  };
-};
 
 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}`, {
+      await apiClient.put(`/scheduled-shifts/${id}`, updates);
-        method: 'PUT',
+      console.log('✅ Scheduled shift updated successfully');
-        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);
       
     } 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}`, {
+      return await apiClient.get(`/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) : {};
     } 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}`, {
+      const shifts = await apiClient.get<ScheduledShift[]>(`/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();
       
       // 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`, {
+    return await apiClient.post<AssignmentResult>('/scheduling/generate-schedule', request);
-      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();
   }
 
   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';  
+import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults';
-
+import { apiClient } from './apiClient';
-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();
-};
 
 export const shiftPlanService = {
   async getShiftPlans(): Promise<ShiftPlan[]> {
-    const response = await fetch(API_BASE_URL, {
+    try {
-      headers: {
+      const plans = await apiClient.get<ShiftPlan[]>('/shift-plans');
-        'Content-Type': 'application/json',
+      
-        ...authService.getAuthHeaders()
+      // Ensure scheduledShifts is always an array
-      }
+      return plans.map((plan: any) => ({
-    });
+        ...plan,
-    
+        scheduledShifts: plan.scheduledShifts || []
-    if (!response.ok) {
+      }));
-      if (response.status === 401) {
+    } catch (error: any) {
-        authService.logout();
+      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}`, {
+    try {
-      headers: {
+      return await apiClient.get<ShiftPlan>(`/shift-plans/${id}`);
-        'Content-Type': 'application/json',
+    } catch (error: any) {
-        ...authService.getAuthHeaders()
+      if (error.statusCode === 401) {
-      }
+        localStorage.removeItem('token');
-    });
+        localStorage.removeItem('employee');
-    
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
         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, {
+    try {
-      method: 'POST',
+      return await apiClient.post<ShiftPlan>('/shift-plans', plan);
-      headers: {
+    } catch (error: any) {
-        'Content-Type': 'application/json',
+      if (error.statusCode === 401) {
-        ...authService.getAuthHeaders()
+        localStorage.removeItem('token');
-      },
+        localStorage.removeItem('employee');
-      body: JSON.stringify(plan)
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
         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}`, {
+    try {
-      method: 'PUT',
+      return await apiClient.put<ShiftPlan>(`/shift-plans/${id}`, plan);
-      headers: {
+    } catch (error: any) {
-        'Content-Type': 'application/json',
+      if (error.statusCode === 401) {
-        ...authService.getAuthHeaders()
+        localStorage.removeItem('token');
-      },
+        localStorage.removeItem('employee');
-      body: JSON.stringify(plan)
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
         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}`, {
+    try {
-      method: 'DELETE',
+      await apiClient.delete(`/shift-plans/${id}`);
-      headers: {
+    } catch (error: any) {
-        'Content-Type': 'application/json',
+      if (error.statusCode === 401) {
-        ...authService.getAuthHeaders()
+        localStorage.removeItem('token');
-      }
+        localStorage.removeItem('employee');
-    });
-
-    if (!response.ok) {
-      if (response.status === 401) {
-        authService.logout();
         throw new Error('Nicht authorisiert - bitte erneut anmelden');
       }
       throw new Error('Fehler beim Löschen des Schichtplans');
     }
   },
 
-  // Get specific template or plan
+  async getTemplate(id: string): Promise<ShiftPlan> {
-  getTemplate: async (id: string): Promise<ShiftPlan> => {
+    return await apiClient.get<ShiftPlan>(`/shift-plans/${id}`);
-    const response = await fetch(`${API_BASE_URL}/${id}`, {
-      headers: getAuthHeaders()
-    });
-    return handleResponse(response);
   },
 
-
+  async regenerateScheduledShifts(planId: string): Promise<void> {
-  async regenerateScheduledShifts(planId: string):Promise<void> {
     try {
-        console.log('🔄 Attempting to regenerate scheduled shifts...');
+      console.log('🔄 Attempting to regenerate scheduled shifts...');
-        
+      await apiClient.post(`/shift-plans/${planId}/regenerate-shifts`);
-        // You'll need to add this API endpoint to your backend
+      console.log('✅ Scheduled shifts regenerated');
-        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');
-        }
     } catch (error) {
-        console.error('❌ Error regenerating shifts:', error);
+      console.error('❌ Error regenerating shifts:', error);
+      throw error;
     }
   },
 
-  // Create new plan
+  async createPlan(data: CreateShiftPlanRequest): Promise<ShiftPlan> {
-  createPlan: async (data: CreateShiftPlanRequest): Promise<ShiftPlan> => {
+    return await apiClient.post<ShiftPlan>('/shift-plans', data);
-    const response = await fetch(`${API_BASE_URL}`, {
-      method: 'POST',
-      headers: getAuthHeaders(),
-      body: JSON.stringify(data),
-    });
-    return handleResponse(response);
   },
 
-  createFromPreset: async (data: {
+  async createFromPreset(data: {
     presetName: string;
     name: string;
     startDate: string;
     endDate: string;
     isTemplate?: boolean;
-  }): Promise<ShiftPlan> => {
+  }): Promise<ShiftPlan> {
-    const response = await fetch(`${API_BASE_URL}/from-preset`, {
+    try {
-      method: 'POST',
+      return await apiClient.post<ShiftPlan>('/shift-plans/from-preset', data);
-      headers: getAuthHeaders(),
+    } catch (error: any) {
-      body: JSON.stringify(data),
+      throw new Error(error.message || `HTTP error! status: ${error.statusCode}`);
-    });
-    
-    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();
   },
 
-  getTemplatePresets: async (): Promise<{name: string, label: string, description: string}[]> => {
+  async getTemplatePresets(): Promise<{name: string, label: string, description: string}[]> {
-    // name = label
+    return Object.entries(TEMPLATE_PRESETS).map(([key, preset]) => ({
-     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);
-      
+      await apiClient.post(`/shift-plans/${planId}/clear-assignments`);
-      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}`);
-      }
-
       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,
+      sourcemap: false, // Disable in production
-      base: isProduction ? '/' : '/',
+      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) => {
+    // Environment variables
-      acc[`import.meta.env.${key}`] = JSON.stringify(clientEnv[key])
+    define: {
-      return acc
+      'import.meta.env.VITE_API_URL': JSON.stringify(isProduction ? '/api' : '/api'),
-    }, {} as Record<string, string>)
+      '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"
   }
 }