changed from SolveWithSolutionCallback to Solver as of OR-Tools version change

.env.template

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

.github/workflows/docker.yml

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

.gitignore

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

Dockerfile

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

README.md

@@ -1,6 +1,91 @@
 # Schichtenplaner
-Aufteilung der Schichten unter Mitarbeitern
 
+A web application for planning and distributing work shifts among employees. Manage your team's schedules, handle employee availability, and automatically generate optimized shift plans.
+
+## Features
+
+- Employee management with availability tracking
+- Shift plan creation and management
+- Automated scheduling optimization using constraint programming (OR-Tools CP-SAT)
+- Excel export functionality
+- User authentication with JWT
+- Responsive web interface
+
+---
+
+## For Developers
+
+### Tech Stack
+
+**Frontend:**
+- React 19 with TypeScript
+- Vite 6 (build tool & dev server)
+- React Router DOM (routing)
+- date-fns (date handling)
+- Framer Motion (animations)
+
+**Backend:**
+- Express.js with TypeScript
+- SQLite3 (database)
+- JWT authentication
+- Helmet (security headers)
+- express-rate-limit (rate limiting)
+- OR-Tools CP-SAT (Python - scheduling optimization)
+- ExcelJS (Excel exports)
+
+**Infrastructure:**
+- npm workspaces (monorepo)
+- Docker support
+
+### Prerequisites
+
+- Node.js (v18+)
+- Python 3 with OR-Tools (`pip install ortools`)
+- npm
+
+### Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server (frontend + backend)
+npm run dev
+
+# Build all packages
+npm run build:all
+```
+
+### Project Structure
+
+```
+schichtenplaner/
+├── frontend/     # React application
+├── backend/      # Express API server
+├── premium/      # Premium features (optional)
+└── package.json  # Root monorepo config
+```
+
+### Available Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start both frontend and backend in development mode |
+| `npm run dev:frontend` | Start frontend only |
+| `npm run dev:backend` | Start backend only |
+| `npm run build:all` | Build frontend and backend |
+| `npm run docker:build` | Build Docker image |
+| `npm run docker:run` | Run Docker container |
+
+### Environment Variables
+
+The backend requires these environment variables in production:
+- `NODE_ENV` - Set to `production` or `development`
+- `JWT_SECRET` - Secret key for JWT token signing
+- `TRUST_PROXY_ENABLED` - Enable/disable proxy trust (default: true)
+- `TRUSTED_PROXY_IPS` - Comma-separated list of trusted proxy IPs
+
+---
 
 ## 🧾 License
 

backend/package.json

@@ -4,7 +4,10 @@
   "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 SEED_TEST_DATA=true npx tsx src/server.ts",
+    "seed:test-data": "npx tsx src/scripts/seedTestData.ts",
+    "dev:all": "npm run dev:single",
+    "build": "tsc",
     "start": "node dist/server.js",
     "prestart": "npm run build",
     "test": "jest",
@@ -14,6 +17,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 +27,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-chromium": "^1.37.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",
@@ -32,6 +39,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,48 +1,175 @@
 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 an IP is a loopback address (IPv4 or IPv6)
+const isLoopbackAddress = (ip: string): boolean => {
+  // IPv4 loopback: 127.0.0.0/8
+  if (ip.startsWith('127.') || ip === 'localhost') {
+    return true;
+  }
+
+  // IPv6 loopback: ::1
+  // Also handle IPv4-mapped IPv6 addresses like ::ffff:127.0.0.1
+  if (ip === '::1' || ip === '::ffff:127.0.0.1') {
+    return true;
+  }
+
+  // Handle full IPv6 loopback notation
+  if (ip.toLowerCase().startsWith('0000:0000:0000:0000:0000:0000:0000:0001') ||
+    ip.toLowerCase() === '0:0:0:0:0:0:0:1') {
+    return true;
+  }
+
+  return false;
+};
+
 // Helper to check if request should be limited
 const shouldSkipLimit = (req: Request): boolean => {
   const skipPaths = [
-    '/api/health', 
+    '/api/health',
     '/api/setup/status',
-    '/api/auth/validate'
+    '/api/auth/validate',
+    '/api/auth/me',
   ];
-  
+
   // Skip for successful GET requests (data fetching)
   if (req.method === 'GET' && req.path.startsWith('/api/')) {
     return true;
   }
-  
+
+  const clientIP = getClientIP(req);
+
+  // Skip for loopback addresses (local development)
+  if (isLoopbackAddress(clientIP)) {
+    console.log(`✅ Loopback address skipped: ${clientIP}`);
+    return true;
+  }
+
+  // Skip for whitelisted IPs from environment
+  const whitelist = process.env.RATE_LIMIT_WHITELIST?.split(',') || [];
+  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 || '50')  // Stricter in production
+      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '100'), // More lenient in development
+
+    // Development-specific relaxations
+    skip: (req: Request) => {
+      // Skip all GET requests in development for easier testing
+      if (!isProduction && req.method === 'GET') {
+        return true;
+      }
+
+      return shouldSkipLimit(req);
+    }
+  };
+};
+
 // Main API limiter - nur für POST/PUT/DELETE
 export const apiLimiter = rateLimit({
-  windowMs: 15 * 60 * 1000, // 15 minutes
-  max: 200, // 200 non-GET requests per 15 minutes
-  message: { 
-    error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen' 
+  ...getRateLimitConfig(),
+  message: {
+    error: 'Zu viele Anfragen, bitte verlangsamen Sie Ihre Aktionen'
   },
   standardHeaders: true,
   legacyHeaders: false,
-  skip: (req) => {
-    // ✅ Skip für GET requests (Data Fetching)
-    if (req.method === 'GET') return true;
-    
-    // ✅ Skip für Health/Status Checks
-    return shouldSkipLimit(req);
+  keyGenerator: (req) => getClientIP(req),
+  handler: (req, res) => {
+    const clientIP = getClientIP(req);
+    console.warn(`🚨 Rate limit exceeded for IP: ${clientIP}, Path: ${req.path}, Method: ${req.method}`);
+
+    res.status(429).json({
+      error: 'Zu viele Anfragen',
+      message: 'Bitte versuchen Sie es später erneut',
+      retryAfter: '15 Minuten',
+      clientIP: process.env.NODE_ENV === 'development' ? clientIP : undefined // Only expose IP in dev
+    });
   }
 });
 
 // Strict limiter for auth endpoints
 export const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: 5,
-  message: { 
-    error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut' 
+  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '50'),
+  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 || '20'),
+  message: {
+    error: 'Zu viele Anfragen für diese Ressource'
+  },
+  standardHeaders: true,
+  legacyHeaders: false,
+  keyGenerator: (req) => getClientIP(req)
 });

backend/src/middleware/validation.ts

@@ -388,6 +388,111 @@ export const validateCreateFromPreset = [
     .withMessage('isTemplate must be a boolean')
 ];
 
+// ===== TIME SLOT VALIDATION =====
+export const validateTimeSlot = [
+  body('name')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Time slot name must be between 1-100 characters')
+    .trim()
+    .escape(),
+
+  body('startTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('Start time must be in HH:MM format'),
+
+  body('endTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('End time must be in HH:MM format'),
+
+  body('description')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Description cannot exceed 500 characters')
+    .trim()
+    .escape()
+];
+
+export const validateTimeSlotUpdate = [
+  body('name')
+    .optional()
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Time slot name must be between 1-100 characters')
+    .trim()
+    .escape(),
+
+  body('startTime')
+    .optional()
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('Start time must be in HH:MM format'),
+
+  body('endTime')
+    .optional()
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('End time must be in HH:MM format'),
+
+  body('description')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Description cannot exceed 500 characters')
+    .trim()
+    .escape()
+];
+
+export const validateSlotId = [
+  param('slotId')
+    .isUUID()
+    .withMessage('Slot ID must be a valid UUID')
+];
+
+// ===== SHIFT VALIDATION =====
+export const validateShiftCreate = [
+  body('timeSlotId')
+    .isUUID()
+    .withMessage('Time slot ID must be a valid UUID'),
+
+  body('dayOfWeek')
+    .isInt({ min: 1, max: 7 })
+    .withMessage('Day of week must be between 1-7 (Monday-Sunday)'),
+
+  body('requiredEmployees')
+    .optional()
+    .isInt({ min: 1, max: 10 })
+    .withMessage('Required employees must be between 1-10'),
+
+  body('color')
+    .optional()
+    .isHexColor()
+    .withMessage('Color must be a valid hex color')
+];
+
+export const validateShiftUpdate = [
+  body('timeSlotId')
+    .optional()
+    .isUUID()
+    .withMessage('Time slot ID must be a valid UUID'),
+
+  body('dayOfWeek')
+    .optional()
+    .isInt({ min: 1, max: 7 })
+    .withMessage('Day of week must be between 1-7 (Monday-Sunday)'),
+
+  body('requiredEmployees')
+    .optional()
+    .isInt({ min: 1, max: 10 })
+    .withMessage('Required employees must be between 1-10'),
+
+  body('color')
+    .optional()
+    .isHexColor()
+    .withMessage('Color must be a valid hex color')
+];
+
+export const validateShiftId = [
+  param('shiftId')
+    .isUUID()
+    .withMessage('Shift ID must be a valid UUID')
+];
+
 // ===== SCHEDULED SHIFTS VALIDATION =====
 export const validateScheduledShiftUpdate = [
   body('assignedEmployees')

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/python-scripts/scheduling_solver.py

@@ -201,7 +201,7 @@ class UniversalSchedulingSolver:
             
             # Solve with callback
             callback = SimpleSolutionCallback()
-            status = self.solver.SolveWithSolutionCallback(self.model, callback)
+            status = self.solver.Solve(self.model, callback)
             
             result = self._format_solution(status, cp_vars, model_data)
             result['metadata']['constraintsAdded'] = constraints_added

backend/src/routes/shiftPlans.ts

@@ -1,20 +1,34 @@
 import express from 'express';
 import { authMiddleware, requireRole } from '../middleware/auth.js';
-import { 
-  getShiftPlans, 
-  getShiftPlan, 
-  createShiftPlan, 
-  updateShiftPlan, 
+import {
+  getShiftPlans,
+  getShiftPlan,
+  createShiftPlan,
+  updateShiftPlan,
   deleteShiftPlan,
   createFromPreset,
-  clearAssignments
+  clearAssignments,
+  exportShiftPlanToExcel,
+  exportShiftPlanToPDF,
+  addTimeSlot,
+  updateTimeSlot,
+  deleteTimeSlot,
+  addShift,
+  updateShift,
+  deleteShift
 } from '../controllers/shiftPlanController.js';
-import { 
-  validateShiftPlan, 
-  validateShiftPlanUpdate, 
-  validateCreateFromPreset, 
-  handleValidationErrors, 
-  validateId 
+import {
+  validateShiftPlan,
+  validateShiftPlanUpdate,
+  validateCreateFromPreset,
+  handleValidationErrors,
+  validateId,
+  validateTimeSlot,
+  validateTimeSlotUpdate,
+  validateShiftCreate,
+  validateShiftUpdate,
+  validateSlotId,
+  validateShiftId
 } from '../middleware/validation.js';
 
 const router = express.Router();
@@ -30,4 +44,17 @@ 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);
+
+// Time slot management
+router.post('/:id/time-slots', validateId, validateTimeSlot, handleValidationErrors, requireRole(['admin', 'maintenance']), addTimeSlot);
+router.put('/:id/time-slots/:slotId', validateId, validateSlotId, validateTimeSlotUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateTimeSlot);
+router.delete('/:id/time-slots/:slotId', validateId, validateSlotId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteTimeSlot);
+
+// Shift management
+router.post('/:id/shifts', validateId, validateShiftCreate, handleValidationErrors, requireRole(['admin', 'maintenance']), addShift);
+router.patch('/:id/shifts/:shiftId', validateId, validateShiftId, validateShiftUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateShift);
+router.delete('/:id/shifts/:shiftId', validateId, validateShiftId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShift);
+
 export default router;

backend/src/scripts/applyMigration.ts

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

backend/src/scripts/initializeDatabase.ts

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

backend/src/scripts/seedTestData.ts

@@ -0,0 +1,347 @@
+// backend/src/scripts/seedTestData.ts
+import { db } from '../services/databaseService.js';
+import bcrypt from 'bcryptjs';
+import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+interface TestData {
+    plan_name: string;
+    description: string;
+    period: string;
+    status: string;
+    created_by: string;
+    shifts: {
+        [day: string]: {
+            [shiftType: string]: {
+                time: string;
+                assignments: { [employeeName: string]: number };
+            };
+        };
+    };
+    employee_info: {
+        contract_sizes: { [name: string]: string };
+        employee_types: { [name: string]: string };
+        roles: { [name: string]: string };
+        trainees: { [name: string]: boolean };
+        can_work_alone: { [name: string]: boolean };
+    };
+    availability_scale: {
+        [key: string]: string;
+    };
+}
+
+function generateEmail(firstname: string, lastname: string): string {
+    const convertUmlauts = (str: string): string => {
+        return str
+            .toLowerCase()
+            .replace(/ü/g, 'ue')
+            .replace(/ö/g, 'oe')
+            .replace(/ä/g, 'ae')
+            .replace(/ß/g, 'ss');
+    };
+
+    const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
+    const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
+
+    return `${cleanFirstname}.${cleanLastname}@sp.de`;
+}
+
+function mapContractType(germanType: string): 'small' | 'large' | 'flexible' {
+    switch (germanType) {
+        case 'groß': return 'large';
+        case 'klein': return 'small';
+        case 'flexible': return 'flexible';
+        default: return 'small';
+    }
+}
+
+function mapDayToNumber(day: string): number {
+    const dayMap: { [key: string]: number } = {
+        'monday': 1,
+        'tuesday': 2,
+        'wednesday': 3,
+        'thursday': 4,
+        'friday': 5,
+        'saturday': 6,
+        'sunday': 7
+    };
+    return dayMap[day.toLowerCase()] || 1;
+}
+
+function parseTimeSlot(time: string): { startTime: string; endTime: string } {
+    const [start, end] = time.split(' - ');
+    return {
+        startTime: start.trim(),
+        endTime: end.trim()
+    };
+}
+
+export async function seedTestData(): Promise<void> {
+    try {
+        console.log('🌱 Starting test data seeding...');
+
+        // Read test.json file - adjust path to be relative to project root
+        //const testDataPath = path.resolve(process.cwd(), './test.json');
+        const testDataPath = path.resolve(__dirname, './test.json');
+
+        console.log('🔍 Looking for test.json at:', testDataPath);
+
+        if (!fs.existsSync(testDataPath)) {
+            console.log('❌ test.json file not found at:', testDataPath);
+
+            // Try alternative paths
+            const alternativePaths = [
+                //path.resolve(__dirname, '../../../test.json'),
+                //path.resolve(process.cwd(), '../test.json'),
+                //path.resolve(__dirname, '../../test.json'),
+                path.resolve(__dirname, './test.json')
+            ];
+
+            for (const altPath of alternativePaths) {
+                console.log('🔍 Trying alternative path:', altPath);
+                if (fs.existsSync(altPath)) {
+                    console.log('✅ Found test.json at:', altPath);
+                    // Continue with the found path
+                    break;
+                }
+            }
+
+            return;
+        }
+
+        const testDataRaw = fs.readFileSync(testDataPath, 'utf-8');
+        const testData: TestData = JSON.parse(testDataRaw);
+
+        console.log('📊 Loaded test data:', {
+            planName: testData.plan_name,
+            employeeCount: Object.keys(testData.employee_info.contract_sizes).length,
+            days: Object.keys(testData.shifts).length
+        });
+
+        // Start transaction
+        await db.run('BEGIN TRANSACTION');
+
+        try {
+            // 1. Create employees
+            console.log('👥 Creating employees...');
+            const employeeMap: { [name: string]: string } = {};
+            const employeeNames = Object.keys(testData.employee_info.contract_sizes);
+
+            for (const name of employeeNames) {
+                const employeeId = uuidv4();
+                employeeMap[name] = employeeId;
+
+                const [firstname, lastname = ''] = name.split(' ');
+                const email = generateEmail(firstname, lastname || 'Test');
+                const passwordHash = await bcrypt.hash('ZebraAux123!', 10);
+
+                const contractType = mapContractType(testData.employee_info.contract_sizes[name]);
+                const employeeType = testData.employee_info.employee_types[name];
+                const role = testData.employee_info.roles[name];
+                const isTrainee = testData.employee_info.trainees[name];
+                const canWorkAlone = testData.employee_info.can_work_alone[name];
+
+                // Insert employee
+                await db.run(
+                    `INSERT INTO employees (
+            id, email, password, firstname, lastname, 
+            employee_type, contract_type, can_work_alone, 
+            is_trainee, is_active
+          ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+                    [
+                        employeeId,
+                        email,
+                        passwordHash,
+                        firstname,
+                        lastname || 'Test',
+                        employeeType,
+                        contractType,
+                        canWorkAlone ? 1 : 0,
+                        isTrainee ? 1 : 0,
+                        1
+                    ]
+                );
+
+                // Insert role
+                await db.run(
+                    `INSERT INTO employee_roles (employee_id, role) VALUES (?, ?)`,
+                    [employeeId, role]
+                );
+
+                console.log(`✅ Created employee: ${name} (${email})`);
+            }
+
+            // 2. Create shift plan
+            console.log('📅 Creating shift plan...');
+            const planId = uuidv4();
+            const [startDate, endDate] = testData.period.split(' bis ');
+
+            // Use the first admin employee as creator
+            const adminEmployee = Object.entries(testData.employee_info.roles)
+                .find(([_, role]) => role === 'admin');
+            const createdBy = adminEmployee ? employeeMap[adminEmployee[0]] : employeeMap[employeeNames[0]];
+
+            await db.run(
+                `INSERT INTO shift_plans (
+          id, name, description, start_date, end_date, 
+          is_template, status, created_by
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+                [
+                    planId,
+                    testData.plan_name,
+                    testData.description,
+                    startDate.trim(),
+                    endDate.trim(),
+                    0, // is_template = false
+                    'published',
+                    createdBy
+                ]
+            );
+
+            // 3. Create time slots
+            console.log('⏰ Creating time slots...');
+            const timeSlotMap: { [key: string]: string } = {};
+
+            // Extract unique time slots from shifts
+            const uniqueTimeSlots = new Set<string>();
+            Object.values(testData.shifts).forEach(dayShifts => {
+                Object.values(dayShifts).forEach(shift => {
+                    uniqueTimeSlots.add(shift.time);
+                });
+            });
+
+            let timeSlotIndex = 0;
+            for (const time of uniqueTimeSlots) {
+                const timeSlotId = uuidv4();
+                const { startTime, endTime } = parseTimeSlot(time);
+                const name = timeSlotIndex === 0 ? 'Vormittag' : 'Nachmittag';
+
+                await db.run(
+                    `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description) 
+           VALUES (?, ?, ?, ?, ?, ?)`,
+                    [timeSlotId, planId, name, startTime, endTime, `Time slot: ${time}`]
+                );
+
+                timeSlotMap[time] = timeSlotId;
+                timeSlotIndex++;
+            }
+
+            // 4. Create shifts
+            console.log('🔄 Creating shifts...');
+            const shiftMap: { [dayTime: string]: string } = {};
+
+            for (const [dayName, dayShifts] of Object.entries(testData.shifts)) {
+                const dayOfWeek = mapDayToNumber(dayName);
+
+                for (const [shiftType, shiftData] of Object.entries(dayShifts)) {
+                    const shiftId = uuidv4();
+                    const timeSlotId = timeSlotMap[shiftData.time];
+
+                    await db.run(
+                        `INSERT INTO shifts (id, plan_id, time_slot_id, day_of_week, required_employees, color) 
+             VALUES (?, ?, ?, ?, ?, ?)`,
+                        [shiftId, planId, timeSlotId, dayOfWeek, 2, '#3498db']
+                    );
+
+                    shiftMap[`${dayName}_${shiftType}`] = shiftId;
+                }
+            }
+
+            // 5. Generate scheduled shifts for one week (for template demonstration)
+            console.log('📋 Generating scheduled shifts...');
+            const start = new Date(startDate.trim());
+
+            for (let dayOffset = 0; dayOffset < 7; dayOffset++) {
+                const currentDate = new Date(start);
+                currentDate.setDate(start.getDate() + dayOffset);
+
+                const dayOfWeek = currentDate.getDay() === 0 ? 7 : currentDate.getDay();
+                const dayName = Object.keys(testData.shifts).find(day =>
+                    mapDayToNumber(day) === dayOfWeek
+                );
+
+                if (dayName && testData.shifts[dayName]) {
+                    for (const [shiftType, shiftData] of Object.entries(testData.shifts[dayName])) {
+                        const scheduledShiftId = uuidv4();
+                        const timeSlotId = timeSlotMap[shiftData.time];
+
+                        await db.run(
+                            `INSERT INTO scheduled_shifts (id, plan_id, date, time_slot_id, required_employees, assigned_employees) 
+               VALUES (?, ?, ?, ?, ?, ?)`,
+                            [
+                                scheduledShiftId,
+                                planId,
+                                currentDate.toISOString().split('T')[0],
+                                timeSlotId,
+                                2,
+                                JSON.stringify([])
+                            ]
+                        );
+                    }
+                }
+            }
+
+            // 6. Create employee availabilities
+            console.log('📝 Creating employee availabilities...');
+
+            for (const [dayName, dayShifts] of Object.entries(testData.shifts)) {
+                const dayOfWeek = mapDayToNumber(dayName);
+
+                for (const [shiftType, shiftData] of Object.entries(dayShifts)) {
+                    const shiftId = shiftMap[`${dayName}_${shiftType}`];
+
+                    for (const [employeeName, preferenceLevel] of Object.entries(shiftData.assignments)) {
+                        const employeeId = employeeMap[employeeName];
+
+                        if (employeeId) {
+                            const availabilityId = uuidv4();
+
+                            await db.run(
+                                `INSERT INTO employee_availability (id, employee_id, plan_id, shift_id, preference_level) 
+                 VALUES (?, ?, ?, ?, ?)`,
+                                [availabilityId, employeeId, planId, shiftId, preferenceLevel]
+                            );
+                        }
+                    }
+                }
+            }
+
+            await db.run('COMMIT');
+
+            console.log('🎉 Test data seeded successfully!');
+            console.log('📊 Summary:');
+            console.log(`   - Employees: ${employeeNames.length}`);
+            console.log(`   - Shift Plan: ${testData.plan_name}`);
+            console.log(`   - Time Slots: ${Object.keys(timeSlotMap).length}`);
+            console.log(`   - Shifts: ${Object.keys(shiftMap).length}`);
+            console.log(`   - Period: ${testData.period}`);
+
+        } catch (error) {
+            await db.run('ROLLBACK');
+            console.error('❌ Error during test data seeding:', error);
+            throw error;
+        }
+
+    } catch (error) {
+        console.error('❌ Failed to seed test data:', error);
+        throw error;
+    }
+}
+
+// Run if called directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+    seedTestData()
+        .then(() => {
+            console.log('✅ Seed script completed');
+            process.exit(0);
+        })
+        .catch((error) => {
+            console.error('❌ Seed script failed:', error);
+            process.exit(1);
+        });
+}

backend/src/scripts/test.json

@@ -0,0 +1,235 @@
+{
+  "plan_name": "test",
+  "description": "Standard Vorlage für ZEBRA: Mo-Do Vormittag+Nachmittag, Fr nur Vormittag",
+  "period": "2025-10-01 bis 2026-02-01",
+  "status": "published",
+  "created_by": "Max Mustermann",
+  "shifts": {
+    "monday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 1,
+          "Uliana": 2,
+          "Nico": 1,
+          "Linuuuus": 1
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 1,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 1,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "tuesday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 2,
+          "Uliana": 1,
+          "Nico": 1,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 2,
+          "Uliana": 2,
+          "Nico": 3,
+          "Linuuuus": 2
+        }
+      }
+    },
+    "wednesday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 2,
+          "Nico": 3,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 1,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "thursday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 3,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 2,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 1,
+          "Andrey": 1,
+          "Fabian": 1,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 1,
+          "Gerald": 2,
+          "Uliana": 3,
+          "Nico": 3,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "friday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 1,
+          "Andrey": 1,
+          "Fabian": 1,
+          "Lu": 1,
+          "Basti": 3,
+          "Kilian": 1,
+          "Gerald": 1,
+          "Uliana": 1,
+          "Nico": 3,
+          "Linuuuus": 3
+        }
+      }
+    }
+  },
+  "employee_info": {
+    "contract_sizes": {
+      "Jerome": "groß",
+      "Patrick": "groß",
+      "Andrey": "groß",
+      "Fabian": "klein",
+      "Lu": "klein",
+      "Basti": "flexible",
+      "Kilian": "klein",
+      "Gerald": "groß",
+      "Uliana": "groß",
+      "Nico": "klein",
+      "Linuuuus": "klein"
+    },
+    "employee_types": {
+      "Jerome": "personell",
+      "Patrick": "personell",
+      "Andrey": "personell",
+      "Fabian": "personell",
+      "Lu": "personell",
+      "Basti": "manager",
+      "Kilian": "personell",
+      "Gerald": "personell",
+      "Uliana": "personell",
+      "Nico": "personell",
+      "Linuuuus": "personell"
+    },
+    "roles": {
+      "Jerome": "user",
+      "Patrick": "maintenance",
+      "Andrey": "user",
+      "Fabian": "user",
+      "Lu": "user",
+      "Basti": "admin",
+      "Kilian": "user",
+      "Gerald": "user",
+      "Uliana": "user",
+      "Nico": "user",
+      "Linuuuus": "user"
+    },
+    "trainees": {
+      "Jerome": false,
+      "Patrick": false,
+      "Andrey": false,
+      "Fabian": false,
+      "Lu": false,
+      "Basti": false,
+      "Kilian": true,
+      "Gerald": true,
+      "Uliana": true,
+      "Nico": true,
+      "Linuuuus": false
+    },
+    "can_work_alone": {
+      "Jerome": true,
+      "Patrick": true,
+      "Andrey": false,
+      "Fabian": true,
+      "Lu": false,
+      "Basti": false,
+      "Kilian": false,
+      "Gerald": false,
+      "Uliana": false,
+      "Nico": false,
+      "Linuuuus": true
+    }
+  },
+  "availability_scale": {
+    "1": "available",
+    "2": "limited",
+    "3": "unavailable"
+  }
+}

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);
@@ -21,8 +27,60 @@ const __dirname = path.dirname(__filename);
 const app = express();
 const PORT = 3002;
 const isDevelopment = process.env.NODE_ENV === 'development';
+if (isDevelopment) {
+  console.log('🔧 Running in Development mode');
+} else if (process.env.NODE_ENV === 'production') {
+  console.log('🚀 Running in Production mode');
+} else {
+  console.log('⚠️  NODE_ENV not set, defaulting to Development mode');
+  console.error('❌ Please set NODE_ENV to "production" or "development" for proper behavior.');
+  process.exit(1);
+}
 
-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 +92,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 +150,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 +174,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 +188,12 @@ app.use('/api/auth', authLimiter, authRoutes);
 app.use('/api/employees', employeeRoutes);
 app.use('/api/shift-plans', shiftPlanRoutes);
 app.use('/api/scheduled-shifts', scheduledShifts);
-app.use('/api/scheduling', schedulingRoutes);
+app.use('/api/scheduling', expensiveEndpointLimiter, schedulingRoutes);
 
 // Health route
 app.get('/api/health', (req: express.Request, res: express.Response) => {
-  res.json({ 
-    status: 'OK', 
+  res.json({
+    status: 'OK',
     message: 'Backend läuft!',
     timestamp: new Date().toISOString(),
     mode: process.env.NODE_ENV || 'development'
@@ -118,6 +229,7 @@ const findFrontendBuildPath = (): string | null => {
 };
 
 const frontendBuildPath = findFrontendBuildPath();
+configureStaticFiles();
 
 if (frontendBuildPath) {
   app.use(express.static(frontendBuildPath));
@@ -130,46 +242,65 @@ if (frontendBuildPath) {
 }
 
 // Root route
-app.get('/', (req, res) => {
-  if (!frontendBuildPath) {
-    if (isDevelopment) {
-      return res.redirect('http://localhost:3003');
+app.get('/', async (req, res) => {
+  // In development with Vite middleware
+  if (vite) {
+    try {
+      const template = fs.readFileSync(
+        path.resolve(__dirname, '../../frontend/index.html'),
+        'utf-8'
+      );
+      const html = await vite.transformIndexHtml(req.url, template);
+      res.send(html);
+    } catch (error) {
+      res.status(500).send('Vite dev server error');
     }
-    return res.status(500).send('Frontend build not found');
+    return;
   }
-  
+
+  // Fallback to static file serving
+  if (!frontendBuildPath) {
+    return res.status(500).send('Frontend not available');
+  }
+
   const indexPath = path.join(frontendBuildPath, 'index.html');
   res.sendFile(indexPath);
 });
 
 // Client-side routing fallback
-app.get('*', (req, res) => {
+app.get('*', (req, res, next) => {
+  // Skip API routes
   if (req.path.startsWith('/api/')) {
-    return res.status(404).json({ error: 'API endpoint not found' });
+    return next();
   }
-  
-  if (!frontendBuildPath) {
-    if (isDevelopment) {
-      return res.redirect(`http://localhost:3003${req.path}`);
-    }
-    return res.status(500).json({ error: 'Frontend application not available' });
+
+  // Skip file extensions (assets)
+  if (req.path.match(/\.[a-z0-9]+$/i)) {
+    return next();
+  }
+
+  // Serve React app for all other routes
+  const frontendPath = '/app/frontend-build';
+  const indexPath = path.join(frontendPath, 'index.html');
+
+  if (fs.existsSync(indexPath)) {
+    res.sendFile(indexPath);
+  } else {
+    res.status(404).send('Frontend not available');
   }
-  
-  const indexPath = path.join(frontendBuildPath, 'index.html');
-  res.sendFile(indexPath);
 });
 
 // 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
@@ -189,6 +320,16 @@ const initializeApp = async () => {
     const { applyMigration } = await import('./scripts/applyMigration.js');
     await applyMigration();
 
+    if (isDevelopment && process.env.SEED_TEST_DATA === 'true') {
+      try {
+        const { seedTestData } = await import('./scripts/seedTestData.js');
+        await seedTestData();
+        console.log('✅ Test data seeded successfully');
+      } catch (error) {
+        console.log('⚠️ Test data seeding skipped or failed:', error);
+      }
+    }
+
     app.listen(PORT, () => {
       console.log('🎉 APPLICATION STARTED SUCCESSFULLY!');
       console.log(`📍 Port: ${PORT}`);

docker-compose.yml

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

docker-init.sh

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

frontend/index.html

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

frontend/package.json

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

frontend/src/App.tsx

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

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

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

frontend/src/components/Modal/Modal.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect } from 'react';
+import { BUTTON_COLORS } from '../../utils/buttonStyles';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  width?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  width = '400px'
+}) => {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const overlayStyle: React.CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+  };
+
+  const modalStyle: React.CSSProperties = {
+    backgroundColor: 'white',
+    borderRadius: '8px',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
+    width: width,
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    overflow: 'auto',
+  };
+
+  const headerStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '16px 20px',
+    borderBottom: '1px solid #dee2e6',
+    backgroundColor: BUTTON_COLORS.primary,
+    color: 'white',
+    borderRadius: '8px 8px 0 0',
+  };
+
+  const titleStyle: React.CSSProperties = {
+    margin: 0,
+    fontSize: '18px',
+    fontWeight: 'bold',
+  };
+
+  const closeButtonStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    color: 'white',
+    fontSize: '24px',
+    cursor: 'pointer',
+    padding: '0',
+    lineHeight: 1,
+    opacity: 0.8,
+  };
+
+  const contentStyle: React.CSSProperties = {
+    padding: '20px',
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div style={overlayStyle} onClick={handleOverlayClick}>
+      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
+        <div style={headerStyle}>
+          <h3 style={titleStyle}>{title}</h3>
+          <button
+            onClick={onClose}
+            style={closeButtonStyle}
+            onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; }}
+            onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.8'; }}
+          >
+            &times;
+          </button>
+        </div>
+        <div style={contentStyle}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

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/AvailabilityManager.tsx

@@ -317,7 +317,17 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
 
     // Convert to array and sort by start time
     const sortedTimeSlots = Array.from(allTimeSlots.values()).sort((a, b) => {
-      return (a.startTime || '').localeCompare(b.startTime || '');
+      // Convert time strings to minutes for proper numeric comparison
+      const timeToMinutes = (timeStr: string) => {
+        if (!timeStr) return 0;
+        const [hours, minutes] = timeStr.split(':').map(Number);
+        return hours * 60 + minutes;
+      };
+
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      
+      return minutesA - minutesB; // Ascending order (earliest first)
     });
 
     return (

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

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

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

@@ -4,6 +4,7 @@ import { ROLE_CONFIG, EMPLOYEE_TYPE_CONFIG } from '../../../models/defaults/empl
 import { Employee } from '../../../models/Employee';
 import { useAuth } from '../../../contexts/AuthContext';
 import { useNotification } from '../../../contexts/NotificationContext';
+import { ICONS, iconButtonStyle, BUTTON_COLORS } from '../../../utils/buttonStyles';
 
 interface EmployeeListProps {
   employees: Employee[];
@@ -15,7 +16,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 +131,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 +327,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);
@@ -455,40 +456,20 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 {/* Verfügbarkeit Button */}
                 <button
                   onClick={() => onManageAvailability(employee)}
-                  style={{
-                    padding: '6px 8px',
-                    backgroundColor: '#3498db',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                    minWidth: '32px',
-                    height: '32px'
-                  }}
+                  style={iconButtonStyle(BUTTON_COLORS.info, false)}
                   title="Verfügbarkeit verwalten"
                 >
-                  📅
+                  {ICONS.calendar}
                 </button>
 
                 {/* Bearbeiten Button */}
                 {canEdit && (
                   <button
                     onClick={() => onEdit(employee)}
-                    style={{
-                      padding: '6px 8px',
-                      backgroundColor: '#f39c12',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '12px',
-                      minWidth: '32px',
-                      height: '32px'
-                    }}
+                    style={iconButtonStyle(BUTTON_COLORS.edit, false)}
                     title="Mitarbeiter bearbeiten"
                   >
-                    ✏️
+                    {ICONS.edit}
                   </button>
                 )}
 
@@ -496,20 +477,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 {canDelete && (
                   <button
                     onClick={() => handleDeleteClick(employee)}
-                    style={{
-                      padding: '6px 8px',
-                      backgroundColor: '#e74c3c',
-                      color: 'white',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '12px',
-                      minWidth: '32px',
-                      height: '32px'
-                    }}
+                    style={iconButtonStyle(BUTTON_COLORS.delete, false)}
                     title="Mitarbeiter löschen"
                   >
-                    🗑️
+                    {ICONS.delete}
                   </button>
                 )}
 

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 
-          onClick={() => navigate(-1)} 
+        <button
+          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 
-            type="text" 
+          <input
+            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 
-              type="date" 
+            <input
+              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 
-              type="date" 
+            <input
+              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 
-            value={selectedPreset} 
+          <select
+            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 
-            onClick={handleCreate} 
-            className={styles.createButton} 
+          <button
+            onClick={handleCreate}
+            className={styles.createButton}
             disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
           >
             {isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}

frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx

@@ -1,33 +1,67 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { shiftPlanService } from '../../services/shiftPlanService';
-import { ShiftPlan, Shift, ScheduledShift } from '../../models/ShiftPlan';
+import { ShiftPlan, Shift, TimeSlot } from '../../models/ShiftPlan';
 import { useNotification } from '../../contexts/NotificationContext';
 import { useBackendValidation } from '../../hooks/useBackendValidation';
+import { formatTime } from '../../utils/foramatters';
+import {
+  ICONS,
+  smallDeleteButton,
+  addTextButton,
+  cancelTextButton,
+  addOutlineButton,
+  BUTTON_COLORS,
+} from '../../utils/buttonStyles';
+import ShiftCell from './components/ShiftCell';
+import TimeSlotEditor from './components/TimeSlotEditor';
+import AddDayButton from './components/AddDayButton';
+
+const DAYS_OF_WEEK = [
+  { id: 1, name: 'Montag', shortName: 'Mo' },
+  { id: 2, name: 'Dienstag', shortName: 'Di' },
+  { id: 3, name: 'Mittwoch', shortName: 'Mi' },
+  { id: 4, name: 'Donnerstag', shortName: 'Do' },
+  { id: 5, name: 'Freitag', shortName: 'Fr' },
+  { id: 6, name: 'Samstag', shortName: 'Sa' },
+  { id: 7, name: 'Sonntag', shortName: 'So' },
+];
 
 const ShiftPlanEdit: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { showNotification, confirmDialog } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [loading, setLoading] = useState(true);
-  const [editingShift, setEditingShift] = useState<Shift | null>(null);
-  const [newShift, setNewShift] = useState<Partial<Shift>>({
-    timeSlotId: '',
-    dayOfWeek: 1,
-    requiredEmployees: 1
+  const [activeDays, setActiveDays] = useState<number[]>([]);
+
+  // New time slot form state
+  const [showAddTimeSlot, setShowAddTimeSlot] = useState(false);
+  const [newTimeSlot, setNewTimeSlot] = useState({
+    name: '',
+    startTime: '08:00',
+    endTime: '12:00',
+    description: '',
   });
 
   useEffect(() => {
     loadShiftPlan();
   }, [id]);
 
+  useEffect(() => {
+    if (shiftPlan) {
+      // Determine active days from existing shifts
+      const daysWithShifts = new Set(shiftPlan.shifts.map(s => s.dayOfWeek));
+      setActiveDays(Array.from(daysWithShifts).sort((a, b) => a - b));
+    }
+  }, [shiftPlan]);
+
   const loadShiftPlan = async () => {
     if (!id) return;
-    
+
     await executeWithValidation(async () => {
       try {
         const plan = await shiftPlanService.getShiftPlan(id);
@@ -41,68 +75,223 @@ const ShiftPlanEdit: React.FC = () => {
     });
   };
 
-  const handleUpdateShift = async (shift: Shift) => {
-    if (!shiftPlan || !id) return;
-    
-    await executeWithValidation(async () => {
-      // Update logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Updating shift:', shift);
-      
-      loadShiftPlan();
-      setEditingShift(null);
-      
-      showNotification({
-        type: 'success',
-        title: 'Erfolg',
-        message: 'Schicht wurde erfolgreich aktualisiert.'
-      });
-    });
+  // Get shift for a specific cell
+  const getShift = (timeSlotId: string, dayOfWeek: number): Shift | null => {
+    if (!shiftPlan) return null;
+    return shiftPlan.shifts.find(
+      s => s.timeSlotId === timeSlotId && s.dayOfWeek === dayOfWeek
+    ) || null;
   };
 
-  const handleAddShift = async () => {
-    if (!shiftPlan || !id) return;
-    
-    // Basic frontend validation only
-    if (!newShift.timeSlotId) {
-      showNotification({
-        type: 'error',
-        title: 'Fehlende Angaben',
-        message: 'Bitte wählen Sie einen Zeit-Slot aus.'
-      });
-      return;
+  // Count shifts for a time slot
+  const getShiftsCountForSlot = (slotId: string): number => {
+    if (!shiftPlan) return 0;
+    return shiftPlan.shifts.filter(s => s.timeSlotId === slotId).length;
+  };
+
+  // Sort time slots by start time (early to late)
+  const sortedTimeSlots = useMemo(() => {
+    if (!shiftPlan) return [];
+
+    const timeToMinutes = (timeStr: string): number => {
+      if (!timeStr) return 0;
+      const [hours, minutes] = timeStr.split(':').map(Number);
+      return hours * 60 + minutes;
+    };
+
+    return [...shiftPlan.timeSlots].sort((a, b) => {
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      return minutesA - minutesB;
+    });
+  }, [shiftPlan]);
+
+  // Add a new day column
+  const handleAddDay = (dayOfWeek: number) => {
+    if (!activeDays.includes(dayOfWeek)) {
+      setActiveDays([...activeDays, dayOfWeek].sort((a, b) => a - b));
     }
-    
-    if (!newShift.requiredEmployees || newShift.requiredEmployees < 1) {
+  };
+
+  // Remove a day column (delete all shifts for that day)
+  const handleRemoveDay = async (dayOfWeek: number) => {
+    if (!shiftPlan || !id) return;
+
+    const shiftsForDay = shiftPlan.shifts.filter(s => s.dayOfWeek === dayOfWeek);
+
+    if (shiftsForDay.length > 0) {
+      const confirmed = await confirmDialog({
+        title: 'Tag entfernen',
+        message: `Dieser Tag enthält ${shiftsForDay.length} Schicht(en). Alle Schichten für diesen Tag werden gelöscht. Fortfahren?`,
+        confirmText: 'Löschen',
+        cancelText: 'Abbrechen',
+        type: 'warning'
+      });
+
+      if (!confirmed) return;
+
+      // Delete all shifts for this day
+      await executeWithValidation(async () => {
+        for (const shift of shiftsForDay) {
+          await shiftPlanService.deleteShift(id, shift.id);
+        }
+        await loadShiftPlan();
+        showNotification({
+          type: 'success',
+          title: 'Erfolg',
+          message: `Alle Schichten für diesen Tag wurden gelöscht.`
+        });
+      });
+    }
+
+    setActiveDays(activeDays.filter(d => d !== dayOfWeek));
+  };
+
+  // Add a new time slot
+  const handleAddTimeSlot = async () => {
+    if (!id || !newTimeSlot.name || !newTimeSlot.startTime || !newTimeSlot.endTime) {
       showNotification({
         type: 'error',
         title: 'Fehlende Angaben',
-        message: 'Bitte geben Sie die Anzahl der benötigten Mitarbeiter an.'
+        message: 'Bitte füllen Sie alle Pflichtfelder aus.'
       });
       return;
     }
 
     await executeWithValidation(async () => {
-      // Add shift logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Adding shift:', newShift);
-      
+      await shiftPlanService.addTimeSlot(id, {
+        name: newTimeSlot.name,
+        startTime: newTimeSlot.startTime,
+        endTime: newTimeSlot.endTime,
+        description: newTimeSlot.description || undefined,
+      });
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
-        message: 'Neue Schicht wurde hinzugefügt.'
+        message: 'Zeit-Slot wurde hinzugefügt.'
       });
-      
-      setNewShift({
-        timeSlotId: '',
-        dayOfWeek: 1,
-        requiredEmployees: 1
-      });
-      loadShiftPlan();
+
+      setNewTimeSlot({ name: '', startTime: '08:00', endTime: '12:00', description: '' });
+      setShowAddTimeSlot(false);
+      await loadShiftPlan();
     });
   };
 
+  // Update a time slot
+  const handleUpdateTimeSlot = async (
+    slot: TimeSlot,
+    name: string,
+    startTime: string,
+    endTime: string,
+    description?: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.updateTimeSlot(id, slot.id, {
+        name,
+        startTime,
+        endTime,
+        description,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Zeit-Slot wurde aktualisiert.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Delete a time slot
+  const handleDeleteTimeSlot = async (slotId: string) => {
+    if (!id || !shiftPlan) return;
+
+    const shiftsCount = getShiftsCountForSlot(slotId);
+
+    const confirmed = await confirmDialog({
+      title: 'Zeit-Slot löschen',
+      message: shiftsCount > 0
+        ? `Dieser Zeit-Slot enthält ${shiftsCount} Schicht(en). Alle zugehörigen Schichten werden ebenfalls gelöscht. Fortfahren?`
+        : 'Möchten Sie diesen Zeit-Slot wirklich löschen?',
+      confirmText: 'Löschen',
+      cancelText: 'Abbrechen',
+      type: 'warning'
+    });
+
+    if (!confirmed) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.deleteTimeSlot(id, slotId);
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Zeit-Slot wurde gelöscht.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Add a new shift
+  const handleAddShift = async (
+    dayOfWeek: number,
+    timeSlotId: string,
+    requiredEmployees: number,
+    color: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.addShift(id, {
+        dayOfWeek,
+        timeSlotId,
+        requiredEmployees,
+        color,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde hinzugefügt.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Update a shift
+  const handleUpdateShift = async (
+    shift: Shift,
+    requiredEmployees: number,
+    color: string
+  ) => {
+    if (!id) return;
+
+    await executeWithValidation(async () => {
+      await shiftPlanService.updateShift(id, shift.id, {
+        requiredEmployees,
+        color,
+      });
+
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde aktualisiert.'
+      });
+
+      await loadShiftPlan();
+    });
+  };
+
+  // Delete a shift
   const handleDeleteShift = async (shiftId: string) => {
+    if (!id) return;
+
     const confirmed = await confirmDialog({
       title: 'Schicht löschen',
       message: 'Möchten Sie diese Schicht wirklich löschen?',
@@ -114,20 +303,19 @@ const ShiftPlanEdit: React.FC = () => {
     if (!confirmed) return;
 
     await executeWithValidation(async () => {
-      // Delete logic here - will be implemented when backend API is available
-      // For now, just simulate success
-      console.log('Deleting shift:', shiftId);
-      
-      loadShiftPlan();
-      
+      await shiftPlanService.deleteShift(id, shiftId);
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
-        message: 'Schicht wurde erfolgreich gelöscht.'
+        message: 'Schicht wurde gelöscht.'
       });
+
+      await loadShiftPlan();
     });
   };
 
+  // Publish the shift plan
   const handlePublish = async () => {
     if (!shiftPlan || !id) return;
 
@@ -136,21 +324,21 @@ const ShiftPlanEdit: React.FC = () => {
         ...shiftPlan,
         status: 'published'
       });
-      
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan wurde veröffentlicht.'
       });
-      
-      loadShiftPlan();
+
+      await loadShiftPlan();
     });
   };
 
   if (loading) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#666'
@@ -162,8 +350,8 @@ const ShiftPlanEdit: React.FC = () => {
 
   if (!shiftPlan) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#e74c3c'
@@ -173,34 +361,19 @@ const ShiftPlanEdit: React.FC = () => {
     );
   }
 
-  // Group shifts by dayOfWeek
-  const shiftsByDay = shiftPlan.shifts.reduce((acc, shift) => {
-    if (!acc[shift.dayOfWeek]) {
-      acc[shift.dayOfWeek] = [];
-    }
-    acc[shift.dayOfWeek].push(shift);
-    return acc;
-  }, {} as Record<number, typeof shiftPlan.shifts>);
-
-  const daysOfWeek = [
-    { id: 1, name: 'Montag' },
-    { id: 2, name: 'Dienstag' },
-    { id: 3, name: 'Mittwoch' },
-    { id: 4, name: 'Donnerstag' },
-    { id: 5, name: 'Freitag' },
-    { id: 6, name: 'Samstag' },
-    { id: 7, name: 'Sonntag' }
-  ];
+  const hasTimeSlots = shiftPlan.timeSlots.length > 0;
+  const hasActiveDays = activeDays.length > 0;
 
   return (
     <div style={{ padding: '20px' }}>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: '30px' 
+        marginBottom: '30px'
       }}>
-        <h1>{shiftPlan.name} bearbeiten</h1>
+        <h1 style={{ margin: 0 }}>{shiftPlan.name} bearbeiten</h1>
         <div>
           {shiftPlan.status === 'draft' && (
             <button
@@ -238,214 +411,332 @@ const ShiftPlanEdit: React.FC = () => {
         </div>
       </div>
 
-      {/* Add new shift form */}
-      <div style={{
-        backgroundColor: 'white',
-        borderRadius: '8px',
-        padding: '20px',
-        marginBottom: '20px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-      }}>
-        <h3>Neue Schicht hinzufügen</h3>
-        <div style={{ display: 'grid', gap: '15px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-          <div>
-            <label>Wochentag</label>
-            <select
-              value={newShift.dayOfWeek}
-              onChange={(e) => setNewShift({ ...newShift, dayOfWeek: parseInt(e.target.value) })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            >
-              {daysOfWeek.map(day => (
-                <option key={day.id} value={day.id}>{day.name}</option>
-              ))}
-            </select>
+      {/* Empty State */}
+      {!hasTimeSlots && !hasActiveDays && (
+        <div style={{
+          backgroundColor: 'white',
+          borderRadius: '8px',
+          padding: '60px 40px',
+          textAlign: 'center',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          marginBottom: '20px',
+        }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.5 }}>
+            📋
           </div>
-          <div>
-            <label>Zeit-Slot</label>
-            <select
-              value={newShift.timeSlotId}
-              onChange={(e) => setNewShift({ ...newShift, timeSlotId: e.target.value })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            >
-              <option value="">Bitte auswählen...</option>
-              {shiftPlan.timeSlots.map(slot => (
-                <option key={slot.id} value={slot.id}>
-                  {slot.name} ({slot.startTime}-{slot.endTime})
-                </option>
-              ))}
-            </select>
+          <h2 style={{ color: '#2c3e50', marginBottom: '8px' }}>
+            Keine Schichten vorhanden
+          </h2>
+          <p style={{ color: '#666', marginBottom: '24px' }}>
+            Fügen Sie zunächst einen Zeit-Slot hinzu und wählen Sie dann die Tage aus,
+            an denen Schichten stattfinden sollen.
+          </p>
+          <button
+            onClick={() => setShowAddTimeSlot(true)}
+            style={{
+              ...addTextButton(false),
+              padding: '12px 24px',
+              fontSize: '16px',
+            }}
+          >
+            {ICONS.add} Zeit-Slot hinzufügen
+          </button>
+        </div>
+      )}
+
+      {/* Grid Editor */}
+      {(hasTimeSlots || hasActiveDays) && (
+        <div style={{
+          marginBottom: '30px',
+          border: '1px solid #e0e0e0',
+          borderRadius: '8px',
+          overflow: 'hidden'
+        }}>
+          {/* Header bar matching ShiftPlanView */}
+          <div style={{
+            backgroundColor: '#2c3e50',
+            color: 'white',
+            padding: '15px 20px',
+            fontWeight: 'bold'
+          }}>
+            Schichtplan bearbeiten
+            <div style={{ fontSize: '14px', fontWeight: 'normal', marginTop: '5px' }}>
+              {sortedTimeSlots.length} Zeitslots • {activeDays.length} Tage
+            </div>
           </div>
-          <div>
-            <label>Benötigte Mitarbeiter</label>
-            <input
-              type="number"
-              min="1"
-              value={newShift.requiredEmployees}
-              onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) || 1 })}
-              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-              disabled={isSubmitting}
-            />
+
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              backgroundColor: 'white'
+            }}>
+              <thead>
+                <tr style={{ backgroundColor: '#f8f9fa' }}>
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'left',
+                    border: '1px solid #dee2e6',
+                    fontWeight: 'bold',
+                    minWidth: '180px'
+                  }}>
+                    Schicht (Zeit)
+                  </th>
+                  {activeDays.map(dayId => {
+                    const day = DAYS_OF_WEEK.find(d => d.id === dayId);
+                    return (
+                      <th key={dayId} style={{
+                        padding: '12px 16px',
+                        textAlign: 'center',
+                        border: '1px solid #dee2e6',
+                        fontWeight: 'bold',
+                        minWidth: '120px'
+                      }}>
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}>
+                          <span>{day?.name}</span>
+                          <button
+                            onClick={() => handleRemoveDay(dayId)}
+                            disabled={isSubmitting}
+                            style={smallDeleteButton(isSubmitting)}
+                            title="Tag entfernen"
+                          >
+                            {ICONS.delete}
+                          </button>
+                        </div>
+                      </th>
+                    );
+                  })}
+                  <th style={{
+                    padding: '12px 16px',
+                    textAlign: 'center',
+                    border: '1px solid #dee2e6',
+                    minWidth: '70px',
+                    backgroundColor: '#f8f9fa',
+                  }}>
+                    <AddDayButton
+                      activeDays={activeDays}
+                      onAddDay={handleAddDay}
+                      disabled={isSubmitting}
+                    />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedTimeSlots.map((slot, index) => (
+                  <tr key={slot.id} style={{
+                    backgroundColor: index % 2 === 0 ? 'white' : '#f8f9fa'
+                  }}>
+                    <td style={{
+                      padding: '12px 16px',
+                      border: '1px solid #dee2e6',
+                      fontWeight: '500',
+                      backgroundColor: '#f8f9fa',
+                      position: 'sticky',
+                      left: 0
+                    }}>
+                      <TimeSlotEditor
+                        slot={slot}
+                        onUpdate={handleUpdateTimeSlot}
+                        onDelete={handleDeleteTimeSlot}
+                        shiftsCount={getShiftsCountForSlot(slot.id)}
+                        disabled={isSubmitting}
+                      />
+                    </td>
+                    {activeDays.map(dayId => (
+                      <ShiftCell
+                        key={`${slot.id}-${dayId}`}
+                        shift={getShift(slot.id, dayId)}
+                        dayOfWeek={dayId}
+                        timeSlotId={slot.id}
+                        onAdd={handleAddShift}
+                        onEdit={handleUpdateShift}
+                        onDelete={handleDeleteShift}
+                        disabled={isSubmitting}
+                      />
+                    ))}
+                    <td style={{
+                      border: '1px solid #dee2e6',
+                      padding: '8px',
+                      textAlign: 'center',
+                    }}>
+                      <button
+                        onClick={() => handleDeleteTimeSlot(slot.id)}
+                        disabled={isSubmitting}
+                        style={smallDeleteButton(isSubmitting)}
+                        title="Zeit-Slot löschen"
+                      >
+                        {ICONS.delete}
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+
+                {/* Add Time Slot Row */}
+                <tr>
+                  <td colSpan={activeDays.length + 2} style={{
+                    padding: '16px',
+                    borderTop: '2px solid #dee2e6',
+                  }}>
+                    {showAddTimeSlot ? (
+                      <div style={{
+                        display: 'flex',
+                        gap: '12px',
+                        alignItems: 'flex-end',
+                        flexWrap: 'wrap',
+                      }}>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Name *
+                          </label>
+                          <input
+                            type="text"
+                            value={newTimeSlot.name}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, name: e.target.value })}
+                            placeholder="z.B. Vormittag"
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                              width: '150px',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Startzeit *
+                          </label>
+                          <input
+                            type="time"
+                            value={newTimeSlot.startTime}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, startTime: e.target.value })}
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Endzeit *
+                          </label>
+                          <input
+                            type="time"
+                            value={newTimeSlot.endTime}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, endTime: e.target.value })}
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px', color: '#666' }}>
+                            Beschreibung
+                          </label>
+                          <input
+                            type="text"
+                            value={newTimeSlot.description}
+                            onChange={(e) => setNewTimeSlot({ ...newTimeSlot, description: e.target.value })}
+                            placeholder="Optional"
+                            style={{
+                              padding: '8px',
+                              borderRadius: '4px',
+                              border: '1px solid #ddd',
+                              width: '150px',
+                            }}
+                            disabled={isSubmitting}
+                          />
+                        </div>
+                        <button
+                          onClick={handleAddTimeSlot}
+                          disabled={isSubmitting || !newTimeSlot.name}
+                          style={addTextButton(isSubmitting || !newTimeSlot.name)}
+                        >
+                          {ICONS.add} Hinzufügen
+                        </button>
+                        <button
+                          onClick={() => {
+                            setShowAddTimeSlot(false);
+                            setNewTimeSlot({ name: '', startTime: '08:00', endTime: '12:00', description: '' });
+                          }}
+                          disabled={isSubmitting}
+                          style={cancelTextButton(isSubmitting)}
+                        >
+                          Abbrechen
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => setShowAddTimeSlot(true)}
+                        disabled={isSubmitting}
+                        style={addOutlineButton(isSubmitting)}
+                        onMouseEnter={(e) => {
+                          if (!isSubmitting) {
+                            e.currentTarget.style.backgroundColor = '#f0fff4';
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.backgroundColor = 'transparent';
+                        }}
+                      >
+                        {ICONS.add} Neuer Zeit-Slot hinzufügen
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <button
-          onClick={handleAddShift}
-          disabled={isSubmitting || !newShift.timeSlotId || !newShift.requiredEmployees}
-          style={{
-            marginTop: '15px',
-            padding: '8px 16px',
-            backgroundColor: isSubmitting ? '#bdc3c7' : '#3498db',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: isSubmitting ? 'not-allowed' : 'pointer',
-            opacity: (!newShift.timeSlotId || !newShift.requiredEmployees) ? 0.6 : 1
-          }}
-        >
-          {isSubmitting ? 'Wird hinzugefügt...' : 'Schicht hinzufügen'}
-        </button>
-      </div>
+      )}
 
-      {/* Existing shifts */}
-      <div style={{ display: 'grid', gap: '20px' }}>
-        {daysOfWeek.map(day => {
-          const shifts = shiftsByDay[day.id] || [];
-          if (shifts.length === 0) return null;
-          
-          return (
-            <div key={day.id} style={{
-              backgroundColor: 'white',
-              borderRadius: '8px',
-              padding: '20px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <h3 style={{ marginTop: 0 }}>{day.name}</h3>
-              <div style={{ display: 'grid', gap: '15px' }}>
-                {shifts.map(shift => {
-                  const timeSlot = shiftPlan.timeSlots.find(ts => ts.id === shift.timeSlotId);
-                  return (
-                    <div key={shift.id} style={{
-                      backgroundColor: '#f8f9fa',
-                      padding: '15px',
-                      borderRadius: '6px',
-                      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
-                    }}>
-                      {editingShift?.id === shift.id ? (
-                        <div style={{ display: 'grid', gap: '10px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-                          <div>
-                            <label>Zeit-Slot</label>
-                            <select
-                              value={editingShift.timeSlotId}
-                              onChange={(e) => setEditingShift({ ...editingShift, timeSlotId: e.target.value })}
-                              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-                              disabled={isSubmitting}
-                            >
-                              {shiftPlan.timeSlots.map(slot => (
-                                <option key={slot.id} value={slot.id}>
-                                  {slot.name} ({slot.startTime}-{slot.endTime})
-                                </option>
-                              ))}
-                            </select>
-                          </div>
-                          <div>
-                            <label>Benötigte Mitarbeiter</label>
-                            <input
-                              type="number"
-                              min="1"
-                              value={editingShift.requiredEmployees}
-                              onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) || 1 })}
-                              style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
-                              disabled={isSubmitting}
-                            />
-                          </div>
-                          <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
-                            <button
-                              onClick={() => handleUpdateShift(editingShift)}
-                              disabled={isSubmitting}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: isSubmitting ? '#bdc3c7' : '#2ecc71',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: isSubmitting ? 'not-allowed' : 'pointer'
-                              }}
-                            >
-                              {isSubmitting ? 'Speichern...' : 'Speichern'}
-                            </button>
-                            <button
-                              onClick={() => setEditingShift(null)}
-                              disabled={isSubmitting}
-                              style={{
-                                padding: '8px 16px',
-                                backgroundColor: '#95a5a6',
-                                color: 'white',
-                                border: 'none',
-                                borderRadius: '4px',
-                                cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                opacity: isSubmitting ? 0.6 : 1
-                              }}
-                            >
-                              Abbrechen
-                            </button>
-                          </div>
-                        </div>
-                      ) : (
-                        <>
-                          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
-                            {timeSlot?.name} ({timeSlot?.startTime?.substring(0, 5)} - {timeSlot?.endTime?.substring(0, 5)})
-                          </div>
-                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                            <div style={{ fontSize: '14px', color: '#666' }}>
-                              <span>Benötigte Mitarbeiter: {shift.requiredEmployees}</span>
-                            </div>
-                            <div>
-                              <button
-                                onClick={() => setEditingShift(shift)}
-                                disabled={isSubmitting}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#f1c40f',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                  marginRight: '8px',
-                                  opacity: isSubmitting ? 0.6 : 1
-                                }}
-                              >
-                                Bearbeiten
-                              </button>
-                              <button
-                                onClick={() => handleDeleteShift(shift.id)}
-                                disabled={isSubmitting}
-                                style={{
-                                  padding: '6px 12px',
-                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
-                                  color: 'white',
-                                  border: 'none',
-                                  borderRadius: '4px',
-                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                                  opacity: isSubmitting ? 0.6 : 1
-                                }}
-                              >
-                                Löschen
-                              </button>
-                            </div>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
+      {/* Legend */}
+      <div style={{
+        marginTop: '20px',
+        padding: '16px',
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+      }}>
+        <h4 style={{ margin: '0 0 12px 0', color: '#2c3e50' }}>Legende</h4>
+        <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', fontSize: '13px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#d5f4e6',
+              border: `2px solid ${BUTTON_COLORS.add}`,
+              borderRadius: '4px',
+            }} />
+            <span>Aktive Schicht (klicken zum Bearbeiten)</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#f8f9fa',
+              border: '2px dashed #dee2e6',
+              borderRadius: '4px',
+            }} />
+            <span>Leere Zelle (klicken zum Hinzufügen)</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span style={{ color: BUTTON_COLORS.edit, fontSize: '16px' }}>{ICONS.edit}</span>
+            <span>Zeit-Slot bearbeiten</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <span style={{ color: BUTTON_COLORS.delete, fontSize: '16px' }}>{ICONS.delete}</span>
+            <span>Löschen</span>
+          </div>
+        </div>
       </div>
     </div>
   );
 };
 
-export default ShiftPlanEdit;
+export default ShiftPlanEdit;

frontend/src/pages/ShiftPlans/ShiftPlanList.tsx

@@ -13,7 +13,7 @@ const ShiftPlanList: React.FC = () => {
   const navigate = useNavigate();
   const { showNotification, confirmDialog } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [shiftPlans, setShiftPlans] = useState<ShiftPlan[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -48,13 +48,13 @@ const ShiftPlanList: React.FC = () => {
 
     await executeWithValidation(async () => {
       await shiftPlanService.deleteShiftPlan(id);
-      
+
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Der Schichtplan wurde erfolgreich gelöscht.'
       });
-      
+
       loadShiftPlans();
     });
   };
@@ -87,8 +87,8 @@ const ShiftPlanList: React.FC = () => {
 
   if (loading) {
     return (
-      <div style={{ 
-        textAlign: 'center', 
+      <div style={{
+        textAlign: 'center',
         padding: '40px',
         fontSize: '18px',
         color: '#666'
@@ -100,34 +100,34 @@ const ShiftPlanList: React.FC = () => {
 
   return (
     <div>
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center', 
-        marginBottom: '30px' 
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '30px'
       }}>
         <h1>📅 Schichtpläne</h1>
         {hasRole(['admin', 'maintenance']) && (
           <Link to="/shift-plans/new">
-            <button style={{ 
-              padding: '10px 20px', 
-              backgroundColor: '#51258f', 
-              color: 'white', 
-              border: 'none', 
+            <button style={{
+              padding: '10px 20px',
+              backgroundColor: '#51258f',
+              color: 'white',
+              border: 'none',
               borderRadius: '4px',
               cursor: 'pointer'
             }}>
-              + Neuen Plan
+              + Neuer Plan
             </button>
           </Link>
         )}
       </div>
 
       {shiftPlans.length === 0 ? (
-        <div style={{ 
-          padding: '40px', 
-          textAlign: 'center', 
-          backgroundColor: '#f8f9fa', 
+        <div style={{
+          padding: '40px',
+          textAlign: 'center',
+          backgroundColor: '#f8f9fa',
           borderRadius: '8px',
           border: '2px dashed #dee2e6'
         }}>
@@ -136,12 +136,12 @@ const ShiftPlanList: React.FC = () => {
           <p>Erstellen Sie Ihren ersten Schichtplan!</p>
           {hasRole(['admin', 'maintenance']) && (
             <Link to="/shift-plans/new">
-              <button style={{ 
+              <button style={{
                 marginTop: '15px',
-                padding: '10px 20px', 
-                backgroundColor: '#51258f', 
-                color: 'white', 
-                border: 'none', 
+                padding: '10px 20px',
+                backgroundColor: '#51258f',
+                color: 'white',
+                border: 'none',
                 borderRadius: '4px',
                 cursor: 'pointer'
               }}>
@@ -153,7 +153,7 @@ const ShiftPlanList: React.FC = () => {
       ) : (
         <div style={{ display: 'grid', gap: '20px' }}>
           {shiftPlans.map(plan => (
-            <div 
+            <div
               key={plan.id}
               style={{
                 padding: '20px',
@@ -246,7 +246,7 @@ const ShiftPlanList: React.FC = () => {
           fontSize: '14px',
           color: '#2c3e50'
         }}>
-          <strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen. 
+          <strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen.
           Bearbeitungsrechte benötigen Admin- oder Instandhalter-Berechtigungen.
         </div>
       )}

frontend/src/pages/ShiftPlans/components/AddDayButton.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { ICONS, addIconButton, addTextButton, cancelTextButton } from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface DayOption {
+  id: number;
+  name: string;
+}
+
+interface AddDayButtonProps {
+  activeDays: number[];
+  onAddDay: (dayOfWeek: number) => void;
+  disabled?: boolean;
+}
+
+const ALL_DAYS: DayOption[] = [
+  { id: 1, name: 'Montag' },
+  { id: 2, name: 'Dienstag' },
+  { id: 3, name: 'Mittwoch' },
+  { id: 4, name: 'Donnerstag' },
+  { id: 5, name: 'Freitag' },
+  { id: 6, name: 'Samstag' },
+  { id: 7, name: 'Sonntag' },
+];
+
+const AddDayButton: React.FC<AddDayButtonProps> = ({
+  activeDays,
+  onAddDay,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedDay, setSelectedDay] = useState<number | null>(null);
+
+  const availableDays = ALL_DAYS.filter(day => !activeDays.includes(day.id));
+
+  const handleAddDay = () => {
+    if (selectedDay !== null) {
+      onAddDay(selectedDay);
+      setShowModal(false);
+      setSelectedDay(null);
+    }
+  };
+
+  const isDisabled = disabled || availableDays.length === 0;
+
+  if (availableDays.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setShowModal(true)}
+        style={addIconButton(isDisabled)}
+        disabled={isDisabled}
+        title="Tag hinzufügen"
+      >
+        {ICONS.add}
+      </button>
+
+      <Modal
+        isOpen={showModal}
+        onClose={() => {
+          setShowModal(false);
+          setSelectedDay(null);
+        }}
+        title="Tag hinzufügen"
+        width="350px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={{
+            display: 'block',
+            marginBottom: '8px',
+            fontWeight: 'bold',
+            fontSize: '14px',
+            color: '#2c3e50'
+          }}>
+            Wählen Sie einen Tag:
+          </label>
+          <select
+            value={selectedDay ?? ''}
+            onChange={(e) => setSelectedDay(e.target.value ? Number(e.target.value) : null)}
+            style={{
+              width: '100%',
+              padding: '10px',
+              borderRadius: '4px',
+              border: '1px solid #ddd',
+              fontSize: '14px',
+            }}
+          >
+            <option value="">-- Tag auswählen --</option>
+            {availableDays.map(day => (
+              <option key={day.id} value={day.id}>
+                {day.name}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleAddDay}
+            disabled={selectedDay === null}
+            style={addTextButton(selectedDay === null)}
+          >
+            {ICONS.add} Hinzufügen
+          </button>
+          <button
+            onClick={() => {
+              setShowModal(false);
+              setSelectedDay(null);
+            }}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default AddDayButton;

frontend/src/pages/ShiftPlans/components/ShiftCell.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from 'react';
+import { Shift } from '../../../models/ShiftPlan';
+import {
+  ICONS,
+  addTextButton,
+  deleteTextButton,
+  cancelTextButton,
+  BUTTON_COLORS,
+} from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface ShiftCellProps {
+  shift: Shift | null;
+  dayOfWeek: number;
+  timeSlotId: string;
+  onAdd: (dayOfWeek: number, timeSlotId: string, requiredEmployees: number, color: string) => void;
+  onEdit: (shift: Shift, requiredEmployees: number, color: string) => void;
+  onDelete: (shiftId: string) => void;
+  disabled?: boolean;
+}
+
+const COLORS = [
+  '#3498db', // Blue (default)
+  '#27ae60', // Green
+  '#e74c3c', // Red
+  '#f39c12', // Orange
+  '#9b59b6', // Purple
+  '#1abc9c', // Teal
+  '#e91e63', // Pink
+  '#795548', // Brown
+];
+
+const ShiftCell: React.FC<ShiftCellProps> = ({
+  shift,
+  dayOfWeek,
+  timeSlotId,
+  onAdd,
+  onEdit,
+  onDelete,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [requiredEmployees, setRequiredEmployees] = useState(shift?.requiredEmployees || 2);
+  const [selectedColor, setSelectedColor] = useState(shift?.color || '#3498db');
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (shift) {
+      setRequiredEmployees(shift.requiredEmployees);
+      setSelectedColor(shift.color || '#3498db');
+    } else {
+      setRequiredEmployees(2);
+      setSelectedColor('#3498db');
+    }
+  }, [shift]);
+
+  const handleCellClick = () => {
+    if (disabled) return;
+    setShowModal(true);
+  };
+
+  const handleSave = () => {
+    if (shift) {
+      onEdit(shift, requiredEmployees, selectedColor);
+    } else {
+      onAdd(dayOfWeek, timeSlotId, requiredEmployees, selectedColor);
+    }
+    setShowModal(false);
+  };
+
+  const handleDelete = () => {
+    if (shift) {
+      onDelete(shift.id);
+    }
+    setShowModal(false);
+  };
+
+  const handleClose = () => {
+    if (shift) {
+      setRequiredEmployees(shift.requiredEmployees);
+      setSelectedColor(shift.color || '#3498db');
+    } else {
+      setRequiredEmployees(2);
+      setSelectedColor('#3498db');
+    }
+    setShowModal(false);
+  };
+
+  const cellStyle: React.CSSProperties = {
+    padding: '8px',
+    textAlign: 'center',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    minWidth: '80px',
+    height: '60px',
+    verticalAlign: 'middle',
+    transition: 'all 0.2s ease',
+    border: '1px solid #dee2e6',
+    ...(shift ? {
+      backgroundColor: shift.color ? `${shift.color}20` : '#d5f4e6',
+      borderColor: shift.color || '#27ae60',
+      borderWidth: '2px',
+    } : {
+      backgroundColor: isHovered ? '#f0fff4' : '#f8f9fa',
+      borderStyle: 'dashed',
+      borderColor: isHovered ? BUTTON_COLORS.add : '#dee2e6',
+    }),
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '14px',
+    boxSizing: 'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: '6px',
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#2c3e50',
+  };
+
+  return (
+    <>
+      <td
+        style={cellStyle}
+        onClick={handleCellClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {shift ? (
+          <div>
+            <div style={{
+              width: '28px',
+              height: '28px',
+              borderRadius: '50%',
+              backgroundColor: shift.color || '#27ae60',
+              margin: '0 auto 4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+              <span style={{ color: 'white', fontSize: '12px', fontWeight: 'bold' }}>
+                {shift.requiredEmployees}
+              </span>
+            </div>
+            <span style={{ fontSize: '11px', color: '#666' }}>
+              Mitarbeiter
+            </span>
+          </div>
+        ) : (
+          <div style={{
+            color: BUTTON_COLORS.add,
+            fontSize: '24px',
+            opacity: isHovered ? 1 : 0.4,
+            transition: 'opacity 0.2s ease',
+          }}>
+            {ICONS.add}
+          </div>
+        )}
+      </td>
+
+      <Modal
+        isOpen={showModal}
+        onClose={handleClose}
+        title={shift ? 'Schicht bearbeiten' : 'Schicht hinzufügen'}
+        width="380px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={labelStyle}>Benötigte Mitarbeiter *</label>
+          <input
+            type="number"
+            min="1"
+            max="99"
+            value={requiredEmployees}
+            onChange={(e) => setRequiredEmployees(parseInt(e.target.value) || 1)}
+            style={inputStyle}
+          />
+        </div>
+
+        <div style={{ marginBottom: '20px' }}>
+          <label style={labelStyle}>Farbe</label>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            {COLORS.map((color) => (
+              <button
+                key={color}
+                onClick={() => setSelectedColor(color)}
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  borderRadius: '6px',
+                  backgroundColor: color,
+                  border: selectedColor === color ? '3px solid #2c3e50' : '2px solid transparent',
+                  cursor: 'pointer',
+                  transition: 'transform 0.1s ease',
+                }}
+                title={color}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleSave}
+            style={{ ...addTextButton(false), flex: 1 }}
+          >
+            {shift ? 'Speichern' : `${ICONS.add} Hinzufügen`}
+          </button>
+          {shift && (
+            <button
+              onClick={handleDelete}
+              style={deleteTextButton(false)}
+            >
+              {ICONS.delete} Löschen
+            </button>
+          )}
+          <button
+            onClick={handleClose}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default ShiftCell;

frontend/src/pages/ShiftPlans/components/TimeSlotEditor.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { TimeSlot } from '../../../models/ShiftPlan';
+import {
+  ICONS,
+  addTextButton,
+  deleteTextButton,
+  cancelTextButton,
+  borderlessEditButton,
+} from '../../../utils/buttonStyles';
+import Modal from '../../../components/Modal/Modal';
+
+interface TimeSlotEditorProps {
+  slot: TimeSlot;
+  onUpdate: (slot: TimeSlot, name: string, startTime: string, endTime: string, description?: string) => void;
+  onDelete: (slotId: string) => void;
+  shiftsCount: number;
+  disabled?: boolean;
+}
+
+const TimeSlotEditor: React.FC<TimeSlotEditorProps> = ({
+  slot,
+  onUpdate,
+  onDelete,
+  shiftsCount,
+  disabled = false
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [name, setName] = useState(slot.name);
+  const [startTime, setStartTime] = useState(slot.startTime);
+  const [endTime, setEndTime] = useState(slot.endTime);
+  const [description, setDescription] = useState(slot.description || '');
+
+  useEffect(() => {
+    setName(slot.name);
+    setStartTime(slot.startTime);
+    setEndTime(slot.endTime);
+    setDescription(slot.description || '');
+  }, [slot]);
+
+  const handleEditClick = () => {
+    if (disabled) return;
+    setShowModal(true);
+  };
+
+  const handleSave = () => {
+    onUpdate(slot, name, startTime, endTime, description || undefined);
+    setShowModal(false);
+  };
+
+  const handleDelete = () => {
+    onDelete(slot.id);
+    setShowModal(false);
+  };
+
+  const handleClose = () => {
+    setName(slot.name);
+    setStartTime(slot.startTime);
+    setEndTime(slot.endTime);
+    setDescription(slot.description || '');
+    setShowModal(false);
+  };
+
+  const formatTime = (time: string) => {
+    return time.substring(0, 5);
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '10px',
+    borderRadius: '4px',
+    border: '1px solid #ddd',
+    fontSize: '14px',
+    boxSizing: 'border-box',
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    marginBottom: '6px',
+    fontWeight: 'bold',
+    fontSize: '14px',
+    color: '#2c3e50',
+  };
+
+  return (
+    <>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+      }}>
+        <button
+          onClick={handleEditClick}
+          style={borderlessEditButton(disabled)}
+          title="Zeit-Slot bearbeiten"
+          disabled={disabled}
+        >
+          {ICONS.edit}
+        </button>
+        <div>
+          <div style={{ fontWeight: 'bold', fontSize: '14px', color: '#2c3e50' }}>
+            {slot.name}
+          </div>
+          <div style={{ fontSize: '12px', color: '#666' }}>
+            {formatTime(slot.startTime)} - {formatTime(slot.endTime)}
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        isOpen={showModal}
+        onClose={handleClose}
+        title="Zeit-Slot bearbeiten"
+        width="400px"
+      >
+        <div style={{ marginBottom: '16px' }}>
+          <label style={labelStyle}>Name *</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            style={inputStyle}
+            placeholder="z.B. Vormittag"
+          />
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
+          <div>
+            <label style={labelStyle}>Startzeit *</label>
+            <input
+              type="time"
+              value={startTime}
+              onChange={(e) => setStartTime(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+          <div>
+            <label style={labelStyle}>Endzeit *</label>
+            <input
+              type="time"
+              value={endTime}
+              onChange={(e) => setEndTime(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+        </div>
+
+        <div style={{ marginBottom: '20px' }}>
+          <label style={labelStyle}>Beschreibung (optional)</label>
+          <input
+            type="text"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            style={inputStyle}
+            placeholder="Optionale Beschreibung"
+          />
+        </div>
+
+        {shiftsCount > 0 && (
+          <div style={{
+            marginBottom: '16px',
+            padding: '12px',
+            backgroundColor: '#fff3cd',
+            borderRadius: '4px',
+            fontSize: '13px',
+            color: '#856404',
+            border: '1px solid #ffc107',
+          }}>
+            Dieser Zeit-Slot enthält {shiftsCount} Schicht(en). Beim Löschen werden alle zugehörigen Schichten entfernt.
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+          <button
+            onClick={handleSave}
+            disabled={!name}
+            style={addTextButton(!name)}
+          >
+            Speichern
+          </button>
+          <button
+            onClick={handleDelete}
+            style={deleteTextButton(false)}
+            title={shiftsCount > 0 ? `Enthält ${shiftsCount} Schicht(en)` : undefined}
+          >
+            {ICONS.delete} Löschen
+          </button>
+          <button
+            onClick={handleClose}
+            style={cancelTextButton(false)}
+          >
+            Abbrechen
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default TimeSlotEditor;

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';
-
-const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+import { apiClient } from './apiClient';
 
 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`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(credentials)
-    });
-
-    const data = await this.handleApiResponse<AuthResponse>(response);
+    const data = await apiClient.post<AuthResponse>('/auth/login', credentials);
     this.token = data.token;
     localStorage.setItem('token', data.token);
     localStorage.setItem('employee', JSON.stringify(data.employee));
@@ -57,13 +31,7 @@ class AuthService {
   }
 
   async register(userData: RegisterRequest): Promise<AuthResponse> {
-    const response = await fetch(`${API_BASE_URL}/employees`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(userData)
-    });
-
-    const data = await this.handleApiResponse<AuthResponse>(response);
+    await apiClient.post('/employees', userData);
     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) {
-      return null;
-    }
+    if (!token) return null;
 
     try {
-      const response = await fetch(`${API_BASE_URL}/auth/me`, {
-        headers: {
-          'Authorization': `Bearer ${token}`
-        }
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        const user = data.user;
-        localStorage.setItem('user', JSON.stringify(user));
-        return user;
-      }
+      const data = await apiClient.get<{ user: Employee }>('/auth/me');
+      localStorage.setItem('user', JSON.stringify(data.user));
+      return data.user;
     } catch (error) {
       console.error('Error fetching current user:', error);
+      return null;
     }
-
-    return null;
   }
 
   logout(): void {

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

frontend/src/services/shiftAssignmentService.ts

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

frontend/src/services/shiftPlanService.ts

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

frontend/src/utils/buttonStyles.ts

@@ -0,0 +1,150 @@
+// Unified button styles for consistent UI across the application
+
+import React from 'react';
+
+// Color palette
+export const BUTTON_COLORS = {
+  delete: '#e74c3c',
+  add: '#27ae60',
+  edit: '#f39c12',
+  cancel: '#95a5a6',
+  info: '#3498db',
+  primary: '#2c3e50',
+};
+
+// Icon constants for uniform usage
+export const ICONS = {
+  delete: '-',
+  add: '+',
+  edit: '✎',
+  close: '✕',
+  calendar: '📅',
+};
+
+// Base button style
+const baseButtonStyle: React.CSSProperties = {
+  border: 'none',
+  borderRadius: '4px',
+  cursor: 'pointer',
+  fontWeight: 'bold',
+  transition: 'opacity 0.2s ease',
+};
+
+// Icon button (small, square) - for inline actions
+export const iconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '6px 8px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '14px',
+  minWidth: '32px',
+  height: '32px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.5 : 1,
+});
+
+// Small inline icon button (for table cells, headers)
+export const smallIconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '4px 8px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '12px',
+  minWidth: '24px',
+  height: '24px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.5 : 1,
+});
+
+// Text button with icon prefix
+export const textButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '8px 16px',
+  backgroundColor: color,
+  color: 'white',
+  fontSize: '14px',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.6 : 1,
+});
+
+// Outline/dashed button for "add new" actions
+export const outlineButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  ...baseButtonStyle,
+  padding: '10px 20px',
+  backgroundColor: 'transparent',
+  color: color,
+  border: `2px dashed ${color}`,
+  fontSize: '14px',
+  width: '100%',
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? 0.6 : 1,
+});
+
+// Borderless icon button (for minimal UI elements)
+export const borderlessIconButtonStyle = (
+  color: string,
+  disabled = false
+): React.CSSProperties => ({
+  background: 'none',
+  border: 'none',
+  color: color,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  fontSize: '16px',
+  padding: '4px 8px',
+  opacity: disabled ? 0.5 : 1,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+// Preset button styles for common actions
+export const deleteIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const addIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const editIconButton = (disabled = false) =>
+  iconButtonStyle(BUTTON_COLORS.edit, disabled);
+
+export const deleteTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const addTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const cancelTextButton = (disabled = false) =>
+  textButtonStyle(BUTTON_COLORS.cancel, disabled);
+
+export const addOutlineButton = (disabled = false) =>
+  outlineButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const smallDeleteButton = (disabled = false) =>
+  smallIconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const smallAddButton = (disabled = false) =>
+  smallIconButtonStyle(BUTTON_COLORS.add, disabled);
+
+export const borderlessDeleteButton = (disabled = false) =>
+  borderlessIconButtonStyle(BUTTON_COLORS.delete, disabled);
+
+export const borderlessEditButton = (disabled = false) =>
+  borderlessIconButtonStyle(BUTTON_COLORS.edit, disabled);

frontend/vite.config.ts

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

package.json

@@ -3,15 +3,19 @@
   "private": true,
   "workspaces": [
     "frontend",
-    "backend", 
+    "backend",
     "premium"
   ],
   "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:all"
   },
   "devDependencies": {
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "concurrently": "9.2.1"
   }
 }