added entrypoint for docker

.env.template

@@ -0,0 +1,16 @@
+# === SCHICHTPLANER DOCKER COMPOSE ENVIRONMENT VARIABLES ===
+# Diese Datei wird von docker-compose automatisch geladen
+
+# Security
+JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
+NODE_ENV=${NODE_ENV:-production}
+
+# Database
+DB_PATH=${DB_PATH:-/app/data/database.db}
+
+# Server
+PORT=${PORT:-3002}
+
+# App Configuration
+APP_TITLE="Shift Planning App"
+ENABLE_PRO=${ENABLE_PRO:-false}

.gitignore

@@ -64,6 +64,7 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
+.env.production
 
 # Database
 database/*.db

Dockerfile

@@ -30,19 +30,24 @@ RUN npm install --workspace=frontend
 RUN npm run build --only=production --workspace=backend
 
 # Build frontend
-RUN npm run build --only=production --workspace=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')"
 
-# Production stage (same as above)
+# Production stage
 FROM node:20-bookworm
 
 WORKDIR /app
 
+# Install system dependencies including gettext-base for envsubst
+RUN apt-get update && apt-get install -y gettext-base && \
+    rm -rf /var/lib/apt/lists/*
+
 RUN npm install -g pm2
 RUN mkdir -p /app/data
 
+# Copy application files
 COPY --from=builder /app/backend/dist/ ./dist/
 COPY --from=builder /app/backend/package*.json ./
 
@@ -54,6 +59,14 @@ COPY --from=builder /app/ecosystem.config.cjs ./
 COPY --from=builder /app/backend/src/database/ ./dist/database/
 COPY --from=builder /app/backend/src/database/ ./database/
 
+# Copy init script and env template
+COPY docker-init.sh /usr/local/bin/
+COPY .env.template ./
+
+# Set execute permissions for init script
+RUN chmod +x /usr/local/bin/docker-init.sh
+
+# Create user and set permissions
 RUN groupadd -g 1001 nodejs && \
     useradd -m -u 1001 -s /bin/bash -g nodejs schichtplan && \
     chown -R schichtplan:nodejs /app && \
@@ -61,10 +74,13 @@ RUN groupadd -g 1001 nodejs && \
     chmod 775 /app/data
 
 ENV PM2_HOME=/app/.pm2
+
+# Set entrypoint to init script and keep existing cmd
+ENTRYPOINT ["/usr/local/bin/docker-init.sh"]
+CMD ["pm2-runtime", "ecosystem.config.cjs"]
+
 USER schichtplan
 EXPOSE 3002
 
 HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
   CMD wget --no-verbose --tries=1 --spider http://localhost:3002/api/health || exit 1
-  
-CMD ["pm2-runtime", "ecosystem.config.cjs"]

backend/package.json

@@ -16,15 +16,16 @@
     "@types/bcrypt": "^6.0.0",
     "bcrypt": "^6.0.0",
     "bcryptjs": "^2.4.3",
-    "cors": "^2.8.5",
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "sqlite3": "^5.1.6",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "express-rate-limit": "8.1.0",
+    "helmet": "8.1.0",
+    "express-validator": "7.3.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",
-    "@types/cors": "^2.8.13",
     "@types/express": "^4.17.17",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/uuid": "^9.0.2",

backend/src/controllers/employeeController.ts

@@ -1,5 +1,5 @@
 // backend/src/controllers/employeeController.ts
-import { Request, Response } from 'express';
+import { Response } from 'express';
 import { v4 as uuidv4 } from 'uuid';
 import bcrypt from 'bcryptjs';
 import { db } from '../services/databaseService.js';

backend/src/controllers/setupController.ts

@@ -1,7 +1,6 @@
 // backend/src/controllers/setupController.ts
 import { Request, Response } from 'express';
 import bcrypt from 'bcrypt';
-import { v4 as uuidv4 } from 'uuid';
 import { randomUUID } from 'crypto';
 import { db } from '../services/databaseService.js';
 

backend/src/controllers/shiftPlanController.ts

@@ -5,10 +5,9 @@ import { db } from '../services/databaseService.js';
 import { 
   CreateShiftPlanRequest, 
   UpdateShiftPlanRequest,
-  ShiftPlan
 } from '../models/ShiftPlan.js';
 import { AuthRequest } from '../middleware/auth.js';
-import { createPlanFromPreset, TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
+import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`

backend/src/database/schema.sql

@@ -1,3 +1,8 @@
+PRAGMA journal_mode = WAL;
+PRAGMA foreign_keys = ON;
+PRAGMA secure_delete = ON;
+PRAGMA auto_vacuum = INCREMENTAL;
+
 -- Employee Types
 CREATE TABLE IF NOT EXISTS employee_types (
   type TEXT PRIMARY KEY,

backend/src/middleware/rateLimit.ts

@@ -0,0 +1,48 @@
+import rateLimit from 'express-rate-limit';
+import { Request } from 'express';
+
+// Helper to check if request should be limited
+const shouldSkipLimit = (req: Request): boolean => {
+  const skipPaths = [
+    '/api/health', 
+    '/api/setup/status',
+    '/api/auth/validate'
+  ];
+  
+  // Skip for successful GET requests (data fetching)
+  if (req.method === 'GET' && req.path.startsWith('/api/')) {
+    return true;
+  }
+  
+  return skipPaths.includes(req.path);
+};
+
+// 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' 
+  },
+  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);
+  }
+});
+
+// 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' 
+  },
+  standardHeaders: true,
+  legacyHeaders: false,
+  skipSuccessfulRequests: true,
+});

backend/src/middleware/validation.ts

@@ -0,0 +1,457 @@
+import { body, validationResult, param, query } from 'express-validator';
+import { Request, Response, NextFunction } from 'express';
+
+// ===== AUTH VALIDATION =====
+export const validateLogin = [
+  body('email')
+    .isEmail()
+    .withMessage('Must be a valid email')
+    .normalizeEmail(),
+  
+  body('password')
+    .isLength({ min: 6 })
+    .withMessage('Password must be at least 6 characters')
+    .trim()
+    .escape()
+];
+
+export const validateRegister = [
+  body('firstname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('First name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('lastname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Last name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('password')
+    .isLength({ min: 8 })
+    .withMessage('Password must be at least 8 characters')
+    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
+    .withMessage('Password must contain uppercase, lowercase and number')
+];
+
+// ===== EMPLOYEE VALIDATION =====
+export const validateEmployee = [
+  body('firstname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('First name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('lastname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Last name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('password')
+    .optional()
+    .isLength({ min: 8 })
+    .withMessage('Password must be at least 8 characters')
+    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
+    .withMessage('Password must contain uppercase, lowercase and number'),
+  
+  body('employeeType')
+    .isIn(['manager', 'personell', 'apprentice', 'guest'])
+    .withMessage('Employee type must be manager, personell, apprentice or guest'),
+  
+  body('contractType')
+    .optional()
+    .isIn(['small', 'large', 'flexible'])
+    .withMessage('Contract type must be small, large or flexible'),
+  
+  body('roles')
+    .optional()
+    .isArray()
+    .withMessage('Roles must be an array'),
+  
+  body('roles.*')
+    .optional()
+    .isIn(['admin', 'maintenance', 'user'])
+    .withMessage('Invalid role. Allowed: admin, maintenance, user'),
+  
+  body('canWorkAlone')
+    .optional()
+    .isBoolean()
+    .withMessage('canWorkAlone must be a boolean'),
+  
+  body('isTrainee')
+    .optional()
+    .isBoolean()
+    .withMessage('isTrainee must be a boolean'),
+  
+  body('isActive')
+    .optional()
+    .isBoolean()
+    .withMessage('isActive must be a boolean')
+];
+
+export const validateEmployeeUpdate = [
+  body('firstname')
+    .optional()
+    .isLength({ min: 1, max: 100 })
+    .withMessage('First name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('lastname')
+    .optional()
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Last name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('employeeType')
+    .optional()
+    .isIn(['manager', 'personell', 'apprentice', 'guest'])
+    .withMessage('Employee type must be manager, personell, apprentice or guest'),
+  
+  body('contractType')
+    .optional()
+    .isIn(['small', 'large', 'flexible'])
+    .withMessage('Contract type must be small, large or flexible'),
+  
+  body('roles')
+    .optional()
+    .isArray()
+    .withMessage('Roles must be an array'),
+  
+  body('roles.*')
+    .optional()
+    .isIn(['admin', 'maintenance', 'user'])
+    .withMessage('Invalid role. Allowed: admin, maintenance, user'),
+  
+  body('canWorkAlone')
+    .optional()
+    .isBoolean()
+    .withMessage('canWorkAlone must be a boolean'),
+  
+  body('isTrainee')
+    .optional()
+    .isBoolean()
+    .withMessage('isTrainee must be a boolean'),
+  
+  body('isActive')
+    .optional()
+    .isBoolean()
+    .withMessage('isActive must be a boolean')
+];
+
+export const validateChangePassword = [
+  body('currentPassword')
+    .optional()
+    .isLength({ min: 6 })
+    .withMessage('Current password must be at least 6 characters'),
+  
+  body('newPassword')
+    .isLength({ min: 8 })
+    .withMessage('New password must be at least 8 characters')
+    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
+    .withMessage('New password must contain uppercase, lowercase and number')
+];
+
+// ===== SHIFT PLAN VALIDATION =====
+export const validateShiftPlan = [
+  body('name')
+    .isLength({ min: 1, max: 200 })
+    .withMessage('Name must be between 1-200 characters')
+    .trim()
+    .escape(),
+  
+  body('description')
+    .optional()
+    .isLength({ max: 1000 })
+    .withMessage('Description cannot exceed 1000 characters')
+    .trim()
+    .escape(),
+  
+  body('startDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('endDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('isTemplate')
+    .optional()
+    .isBoolean()
+    .withMessage('isTemplate must be a boolean'),
+  
+  body('status')
+    .optional()
+    .isIn(['draft', 'published', 'archived', 'template'])
+    .withMessage('Status must be draft, published, archived or template'),
+  
+  body('timeSlots')
+    .optional()
+    .isArray()
+    .withMessage('Time slots must be an array'),
+  
+  body('timeSlots.*.name')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Time slot name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('timeSlots.*.startTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('Start time must be in HH:MM format'),
+  
+  body('timeSlots.*.endTime')
+    .matches(/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/)
+    .withMessage('End time must be in HH:MM format'),
+  
+  body('timeSlots.*.description')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Time slot description cannot exceed 500 characters')
+    .trim()
+    .escape(),
+  
+  body('shifts')
+    .optional()
+    .isArray()
+    .withMessage('Shifts must be an array'),
+  
+  body('shifts.*.dayOfWeek')
+    .isInt({ min: 1, max: 7 })
+    .withMessage('Day of week must be between 1-7 (Monday-Sunday)'),
+  
+  body('shifts.*.timeSlotId')
+    .isUUID()
+    .withMessage('Time slot ID must be a valid UUID'),
+  
+  body('shifts.*.requiredEmployees')
+    .isInt({ min: 0 })
+    .withMessage('Required employees must be a positive integer'),
+  
+  body('shifts.*.color')
+    .optional()
+    .isHexColor()
+    .withMessage('Color must be a valid hex color')
+];
+
+export const validateShiftPlanUpdate = [
+  body('name')
+    .optional()
+    .isLength({ min: 1, max: 200 })
+    .withMessage('Name must be between 1-200 characters')
+    .trim()
+    .escape(),
+  
+  body('description')
+    .optional()
+    .isLength({ max: 1000 })
+    .withMessage('Description cannot exceed 1000 characters')
+    .trim()
+    .escape(),
+  
+  body('startDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('endDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('status')
+    .optional()
+    .isIn(['draft', 'published', 'archived', 'template'])
+    .withMessage('Status must be draft, published, archived or template'),
+  
+  body('timeSlots')
+    .optional()
+    .isArray()
+    .withMessage('Time slots must be an array'),
+  
+  body('shifts')
+    .optional()
+    .isArray()
+    .withMessage('Shifts must be an array')
+];
+
+export const validateCreateFromPreset = [
+  body('presetName')
+    .isLength({ min: 1 })
+    .withMessage('Preset name is required')
+    .isIn(['standardWeek', 'extendedWeek', 'weekendFocused', 'morningOnly', 'eveningOnly', 'ZEBRA_STANDARD'])
+    .withMessage('Invalid preset name'),
+  
+  body('name')
+    .isLength({ min: 1, max: 200 })
+    .withMessage('Name must be between 1-200 characters')
+    .trim()
+    .escape(),
+  
+  body('startDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('endDate')
+    .optional()
+    .isISO8601()
+    .withMessage('Must be a valid date (ISO format)'),
+  
+  body('isTemplate')
+    .optional()
+    .isBoolean()
+    .withMessage('isTemplate must be a boolean')
+];
+
+// ===== SCHEDULED SHIFTS VALIDATION =====
+export const validateScheduledShiftUpdate = [
+  body('assignedEmployees')
+    .isArray()
+    .withMessage('assignedEmployees must be an array'),
+  
+  body('assignedEmployees.*')
+    .isUUID()
+    .withMessage('Each assigned employee must be a valid UUID'),
+  
+  body('requiredEmployees')
+    .optional()
+    .isInt({ min: 0 })
+    .withMessage('Required employees must be a positive integer')
+];
+
+// ===== SETUP VALIDATION =====
+export const validateSetupAdmin = [
+  body('firstname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('First name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('lastname')
+    .isLength({ min: 1, max: 100 })
+    .withMessage('Last name must be between 1-100 characters')
+    .trim()
+    .escape(),
+  
+  body('password')
+    .isLength({ min: 8 })
+    .withMessage('Password must be at least 8 characters')
+    .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
+    .withMessage('Password must contain uppercase, lowercase and number')
+];
+
+// ===== SCHEDULING VALIDATION =====
+export const validateSchedulingRequest = [
+  body('shiftPlan')
+    .isObject()
+    .withMessage('Shift plan is required'),
+  
+  body('shiftPlan.id')
+    .isUUID()
+    .withMessage('Shift plan ID must be a valid UUID'),
+  
+  body('employees')
+    .isArray({ min: 1 })
+    .withMessage('At least one employee is required'),
+  
+  body('employees.*.id')
+    .isUUID()
+    .withMessage('Each employee must have a valid UUID'),
+  
+  body('availabilities')
+    .isArray()
+    .withMessage('Availabilities must be an array'),
+  
+  body('constraints')
+    .optional()
+    .isArray()
+    .withMessage('Constraints must be an array')
+];
+
+// ===== AVAILABILITY VALIDATION =====
+export const validateAvailabilities = [
+  body('planId')
+    .isUUID()
+    .withMessage('Plan ID must be a valid UUID'),
+  
+  body('availabilities')
+    .isArray()
+    .withMessage('Availabilities must be an array'),
+  
+  body('availabilities.*.shiftId')
+    .isUUID()
+    .withMessage('Each shift ID must be a valid UUID'),
+  
+  body('availabilities.*.preferenceLevel')
+    .isInt({ min: 0, max: 2 })
+    .withMessage('Preference level must be 0 (unavailable), 1 (available), or 2 (preferred)'),
+  
+  body('availabilities.*.notes')
+    .optional()
+    .isLength({ max: 500 })
+    .withMessage('Notes cannot exceed 500 characters')
+    .trim()
+    .escape()
+];
+
+// ===== COMMON VALIDATORS =====
+export const validateId = [
+  param('id')
+    .isUUID()
+    .withMessage('Must be a valid UUID')
+];
+
+export const validateEmployeeId = [
+  param('employeeId')
+    .isUUID()
+    .withMessage('Must be a valid UUID')
+];
+
+export const validatePlanId = [
+  param('planId')
+    .isUUID()
+    .withMessage('Must be a valid UUID')
+];
+
+export const validatePagination = [
+  query('page')
+    .optional()
+    .isInt({ min: 1 })
+    .withMessage('Page must be a positive integer'),
+  
+  query('limit')
+    .optional()
+    .isInt({ min: 1, max: 100 })
+    .withMessage('Limit must be between 1-100'),
+  
+  query('includeInactive')
+    .optional()
+    .isBoolean()
+    .withMessage('includeInactive must be a boolean')
+];
+
+// ===== MIDDLEWARE TO CHECK VALIDATION RESULTS =====
+export const handleValidationErrors = (req: Request, res: Response, next: NextFunction) => {
+  const errors = validationResult(req);
+  
+  if (!errors.isEmpty()) {
+    const errorMessages = errors.array().map(error => ({
+      field: error.type === 'field' ? error.path : error.type,
+      message: error.msg,
+      value: error.msg
+    }));
+    
+    return res.status(400).json({
+      error: 'Validation failed',
+      details: errorMessages
+    });
+  }
+  
+  next();
+};

backend/src/routes/auth.ts

@@ -8,12 +8,13 @@ import {
   validateToken 
 } from '../controllers/authController.js';
 import { authMiddleware } from '../middleware/auth.js';
+import { validateLogin, validateRegister, handleValidationErrors } from '../middleware/validation.js';
 
 const router = express.Router();
 
 // Public routes
-router.post('/login', login);
-router.post('/register', register);
+router.post('/login', validateLogin, handleValidationErrors, login);
+router.post('/register', validateRegister, handleValidationErrors, register);
 router.get('/validate', validateToken);
 
 // Protected routes (require authentication)

backend/src/routes/employees.ts

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

backend/src/routes/scheduledShifts.ts

@@ -1,4 +1,3 @@
-// backend/src/routes/scheduledShifts.ts
 import express from 'express';
 import { authMiddleware, requireRole } from '../middleware/auth.js';
 import { 
@@ -8,23 +7,21 @@ import {
   getScheduledShiftsFromPlan,
   updateScheduledShift
 } from '../controllers/shiftPlanController.js';
+import { 
+  validateId, 
+  validatePlanId, 
+  validateScheduledShiftUpdate, 
+  handleValidationErrors 
+} from '../middleware/validation.js';
 
 const router = express.Router();
 
 router.use(authMiddleware);
 
-
-router.post('/:id/generate-shifts', requireRole(['admin', 'maintenance']), generateScheduledShiftsForPlan);
-
-router.post('/:id/regenerate-shifts', requireRole(['admin', 'maintenance']), regenerateScheduledShifts);
-
-// GET all scheduled shifts for a plan
-router.get('/plan/:planId', authMiddleware, getScheduledShiftsFromPlan);
-
-// GET specific scheduled shift
-router.get('/:id', authMiddleware, getScheduledShift);
-
-// UPDATE scheduled shift
-router.put('/:id', authMiddleware, updateScheduledShift);
+router.post('/:id/generate-shifts', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), generateScheduledShiftsForPlan);
+router.post('/:id/regenerate-shifts', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), regenerateScheduledShifts);
+router.get('/plan/:planId', validatePlanId, handleValidationErrors, getScheduledShiftsFromPlan);
+router.get('/:id', validateId, handleValidationErrors, getScheduledShift);
+router.put('/:id', validateId, validateScheduledShiftUpdate, handleValidationErrors, updateScheduledShift);
 
 export default router;

backend/src/routes/scheduling.ts

@@ -1,9 +1,10 @@
 import express from 'express';
 import { SchedulingService } from '../services/SchedulingService.js';
+import { validateSchedulingRequest, handleValidationErrors } from '../middleware/validation.js';
 
 const router = express.Router();
 
-router.post('/generate-schedule', async (req, res) => {
+router.post('/generate-schedule', validateSchedulingRequest, handleValidationErrors, async (req: express.Request, res: express.Response) => {
   try {
     const { shiftPlan, employees, availabilities, constraints } = req.body;
     
@@ -14,18 +15,6 @@ router.post('/generate-schedule', async (req, res) => {
       constraintCount: constraints?.length
     });
 
-    // Validate required data
-    if (!shiftPlan || !employees || !availabilities) {
-      return res.status(400).json({ 
-        error: 'Missing required data',
-        details: {
-          shiftPlan: !!shiftPlan,
-          employees: !!employees,
-          availabilities: !!availabilities
-        }
-      });
-    }
-
     const scheduler = new SchedulingService();
     const result = await scheduler.generateOptimalSchedule({
       shiftPlan,

backend/src/routes/setup.ts

@@ -1,11 +1,10 @@
-// backend/src/routes/setup.ts
 import express from 'express';
-import bcrypt from 'bcryptjs';
 import { checkSetupStatus, setupAdmin } from '../controllers/setupController.js';
+import { validateSetupAdmin, handleValidationErrors } from '../middleware/validation.js';
 
 const router = express.Router();
 
 router.get('/status', checkSetupStatus);
-router.post('/admin', setupAdmin);
+router.post('/admin', validateSetupAdmin, handleValidationErrors, setupAdmin);
 
 export default router;

backend/src/routes/shiftPlans.ts

@@ -1,4 +1,3 @@
-// backend/src/routes/shiftPlans.ts
 import express from 'express';
 import { authMiddleware, requireRole } from '../middleware/auth.js';
 import { 
@@ -10,32 +9,25 @@ import {
   createFromPreset,
   clearAssignments
 } from '../controllers/shiftPlanController.js';
+import { 
+  validateShiftPlan, 
+  validateShiftPlanUpdate, 
+  validateCreateFromPreset, 
+  handleValidationErrors, 
+  validateId 
+} from '../middleware/validation.js';
 
 const router = express.Router();
 
 router.use(authMiddleware);
 
 // Combined routes for both shift plans and templates
-
-// GET all shift plans (including templates)
-router.get('/' , authMiddleware, getShiftPlans);
-
-// GET specific shift plan or template
-router.get('/:id', authMiddleware, getShiftPlan);
-
-// POST create new shift plan
-router.post('/', requireRole(['admin', 'maintenance']), createShiftPlan);
-
-// POST create new plan from preset
-router.post('/from-preset', requireRole(['admin', 'maintenance']), createFromPreset);
-
-// PUT update shift plan or template
-router.put('/:id', requireRole(['admin', 'maintenance']), updateShiftPlan);
-
-// DELETE shift plan or template
-router.delete('/:id', requireRole(['admin', 'maintenance']), deleteShiftPlan);
-
-// POST clear assignments and reset to draft
-router.post('/:id/clear-assignments', requireRole(['admin', 'maintenance']), clearAssignments);
+router.get('/', getShiftPlans);
+router.get('/:id', validateId, handleValidationErrors, getShiftPlan);
+router.post('/', validateShiftPlan, handleValidationErrors, requireRole(['admin', 'maintenance']), createShiftPlan);
+router.post('/from-preset', validateCreateFromPreset, handleValidationErrors, requireRole(['admin', 'maintenance']), createFromPreset);
+router.put('/:id', validateId, validateShiftPlanUpdate, handleValidationErrors, requireRole(['admin', 'maintenance']), updateShiftPlan);
+router.delete('/:id', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShiftPlan);
+router.post('/:id/clear-assignments', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), clearAssignments);
 
 export default router;

backend/src/scripts/verify-python.js

@@ -1,5 +1,4 @@
 import { spawn } from 'child_process';
-import path from 'path';
 
 export function runPythonScript(scriptPath, args = []) {
   return new Promise((resolve, reject) => {

backend/src/server.ts

@@ -4,6 +4,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { initializeDatabase } from './scripts/initializeDatabase.js';
 import fs from 'fs';
+import helmet from 'helmet';
 
 // Route imports
 import authRoutes from './routes/auth.js';
@@ -12,145 +13,184 @@ 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';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
 const PORT = 3002;
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+// Security configuration
+if (process.env.NODE_ENV === 'production') {
+  console.info('Checking for JWT_SECRET');
+  const JWT_SECRET = process.env.JWT_SECRET;
+  if (!JWT_SECRET || JWT_SECRET === 'your-secret-key-please-change') {
+    console.error('❌ Fatal: JWT_SECRET not set or using default value');
+    process.exit(1);
+  }
+}
+
+// Security headers
+app.use(helmet({
+  contentSecurityPolicy: isDevelopment ? false : {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'", "'unsafe-inline'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      imgSrc: ["'self'", "data:", "https:"],
+    },
+  },
+  crossOriginEmbedderPolicy: false
+}));
+
+// Additional security headers
+app.use((req, res, next) => {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'DENY');
+  res.setHeader('X-XSS-Protection', '1; mode=block');
+  next();
+});
 
 // Middleware
 app.use(express.json());
 
+// Rate limiting - weniger restriktiv in Development
+if (process.env.NODE_ENV === 'production') {
+  app.use('/api/', apiLimiter);
+} else {
+  console.log('🔧 Development: Rate limiting relaxed');
+}
+
 // API Routes
 app.use('/api/setup', setupRoutes);
-app.use('/api/auth', authRoutes);
+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);
 
 // Health route
-app.get('/api/health', (req: any, res: any) => {
+app.get('/api/health', (req: express.Request, res: express.Response) => {
   res.json({ 
     status: 'OK', 
     message: 'Backend läuft!',
-    timestamp: new Date().toISOString()
+    timestamp: new Date().toISOString(),
+    mode: process.env.NODE_ENV || 'development'
   });
 });
 
-// 🆕 FIXED STATIC FILE SERVING
-// Use absolute path that matches Docker container structure
-const frontendBuildPathEnv = process.env.FRONTEND_BUILD_PATH;
-console.log('📁 Frontend build path from the env', frontendBuildPathEnv);
-const frontendBuildPath = path.resolve('/app/frontend-build');
-console.log('📁 Frontend build path:', frontendBuildPath);
-console.log('📁 Current __dirname:', __dirname);
-
-// Check multiple possible locations for frontend build
+// 🆕 IMPROVED STATIC FILE SERVING
+const findFrontendBuildPath = (): string | null => {
   const possiblePaths = [
-  '/app/frontend-build', // Docker production path
-  path.join(__dirname, '../../frontend-build'), // Relative from dist
-  path.join(process.cwd(), 'frontend-build'), // From current working directory
+    // Production path (Docker)
+    '/app/frontend-build',
+    // Development paths
+    path.resolve(__dirname, '../../frontend/dist'),
+    path.resolve(__dirname, '../../frontend-build'),
+    path.resolve(process.cwd(), '../frontend/dist'),
+    path.resolve(process.cwd(), 'frontend-build'),
   ];
 
-let actualFrontendPath = null;
   for (const testPath of possiblePaths) {
-  if (fs.existsSync(testPath)) {
-    actualFrontendPath = testPath;
-    console.log('✅ Found frontend build at:', testPath);
-    break;
-  }
-}
-
-if (actualFrontendPath) {
-  // Serviere statische Dateien
-  app.use(express.static(actualFrontendPath));
-  
-  // List files for debugging
     try {
-    const files = fs.readdirSync(actualFrontendPath);
-    console.log('📄 Files in frontend-build:', files);
-  } catch (err) {
-    console.log('❌ Could not read frontend-build directory:', err);
+      if (fs.existsSync(testPath)) {
+        const indexPath = path.join(testPath, 'index.html');
+        if (fs.existsSync(indexPath)) {
+          console.log('✅ Found frontend build at:', testPath);
+          return testPath;
         }
+      }
+    } catch (error) {
+      // Silent catch - just try next path
+    }
+  }
+  return null;
+};
 
+const frontendBuildPath = findFrontendBuildPath();
+
+if (frontendBuildPath) {
+  app.use(express.static(frontendBuildPath));
   console.log('✅ Static file serving configured');
 } else {
-  console.log('❌ Frontend build directory NOT FOUND in any location');
-  console.log('❌ Checked paths:', possiblePaths);
+  console.log(isDevelopment ?
+    '🔧 Development: Frontend served by Vite dev server (localhost:3003)' :
+    '❌ Production: No frontend build found'
+  );
 }
 
 // Root route
 app.get('/', (req, res) => {
-  if (!actualFrontendPath) {
+  if (!frontendBuildPath) {
+    if (isDevelopment) {
+      return res.redirect('http://localhost:3003');
+    }
     return res.status(500).send('Frontend build not found');
   }
   
-  const indexPath = path.join(actualFrontendPath, 'index.html');
-  console.log('📄 Serving index.html from:', indexPath);
-  
-  if (fs.existsSync(indexPath)) {
+  const indexPath = path.join(frontendBuildPath, 'index.html');
   res.sendFile(indexPath);
-  } else {
-    console.error('❌ index.html not found at:', indexPath);
-    res.status(404).send('Frontend not found - index.html missing');
-  }
 });
 
 // Client-side routing fallback
 app.get('*', (req, res) => {
-  // Ignoriere API Routes
   if (req.path.startsWith('/api/')) {
     return res.status(404).json({ error: 'API endpoint not found' });
   }
   
-  if (!actualFrontendPath) {
+  if (!frontendBuildPath) {
+    if (isDevelopment) {
+      return res.redirect(`http://localhost:3003${req.path}`);
+    }
     return res.status(500).json({ error: 'Frontend application not available' });
   }
   
-  const indexPath = path.join(actualFrontendPath, 'index.html');
-  console.log('🔄 Client-side routing for:', req.path, '->', indexPath);
+  const indexPath = path.join(frontendBuildPath, 'index.html');
+  res.sendFile(indexPath);
+});
 
-  if (fs.existsSync(indexPath)) {
-    // Use absolute path with res.sendFile
-    res.sendFile(indexPath, (err) => {
-      if (err) {
-        console.error('Error sending index.html:', err);
-        res.status(500).send('Error loading application');
-      }
+// 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({ 
+      error: 'Internal server error',
+      message: 'Something went wrong'
     });
   } else {
-    console.error('❌ index.html not found for client-side routing at:', indexPath);
-    res.status(404).json({ error: 'Frontend application not found' });
+    res.status(500).json({ 
+      error: 'Internal server error',
+      message: err.message,
+      stack: err.stack
+    });
   }
 });
 
-// Error handling middleware
-app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
-  console.error('Unhandled error:', err);
-  res.status(500).json({ error: 'Internal server error' });
+// 404 handling
+app.use('*', (req, res) => {
+  res.status(404).json({ error: 'Endpoint not found' });
 });
 
 // Initialize the application
 const initializeApp = async () => {
   try {
-    // Initialize database with base schema
     await initializeDatabase();
-    
-    // Apply any pending migrations
     const { applyMigration } = await import('./scripts/applyMigration.js');
     await applyMigration();
 
-    // Start server only after successful initialization
     app.listen(PORT, () => {
       console.log('🎉 APPLICATION STARTED SUCCESSFULLY!');
       console.log(`📍 Port: ${PORT}`);
+      console.log(`📍 Mode: ${process.env.NODE_ENV || 'development'}`);
+      if (frontendBuildPath) {
         console.log(`📍 Frontend: http://localhost:${PORT}`);
+      } else if (isDevelopment) {
+        console.log(`📍 Frontend (Vite): http://localhost:3003`);
+      }
       console.log(`📍 API: http://localhost:${PORT}/api`);
-      console.log('');
-      console.log(`🔧 Setup: http://localhost:${PORT}/api/setup/status`);
-      console.log('📝 Create your admin account on first launch');
     });
   } catch (error) {
     console.error('❌ Error during initialization:', error);
@@ -158,5 +198,4 @@ const initializeApp = async () => {
   }
 };
 
-// Start the application
 initializeApp();

backend/src/services/SchedulingService.ts

@@ -2,8 +2,7 @@
 import { Worker } from 'worker_threads';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { Employee, EmployeeAvailability } from '../models/Employee.js';
-import { ShiftPlan, ScheduledShift } from '../models/ShiftPlan.js';
+import { ShiftPlan } from '../models/ShiftPlan.js';
 import { ScheduleRequest, ScheduleResult, Availability, Constraint } from '../models/scheduling.js';
 
 const __filename = fileURLToPath(import.meta.url);

backend/src/workers/scheduler-worker.ts

@@ -2,8 +2,8 @@
 import { parentPort, workerData } from 'worker_threads';
 import { CPModel, CPSolver } from './cp-sat-wrapper.js';
 import { ShiftPlan, Shift } from '../models/ShiftPlan.js';
-import { Employee, EmployeeAvailability } from '../models/Employee.js';
-import { Availability, Constraint, Violation, SolverOptions, Solution, Assignment } from '../models/scheduling.js';
+import { Employee } from '../models/Employee.js';
+import { Availability, Constraint } from '../models/scheduling.js';
 
 interface WorkerData {
   shiftPlan: ShiftPlan;

docker-compose.yml

@@ -4,11 +4,19 @@ services:
   schichtplaner:
     container_name: schichtplaner
     image: ghcr.io/donpat1to/schichtenplaner:v1.0.0
+    environment:
+      - NODE_ENV=production
+      - JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
     ports:
       - "3002:3002"
     volumes:
       - app_data:/app/data
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3002/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
 
 volumes:
   app_data:

docker-init.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+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, falls nicht erstelle sie
+if [ ! -f /app/.env ]; then
+    echo "📝 Erstelle .env Datei..."
+    
+    # Generiere automatisch ein sicheres JWT Secret falls nicht gesetzt
+    if [ -z "$JWT_SECRET" ] || [ "$JWT_SECRET" = "your-secret-key-please-change" ]; then
+        export JWT_SECRET=$(generate_secret 64)
+        echo "🔑 Automatisch generiertes JWT Secret wurde erstellt"
+    fi
+    
+    # Erstelle .env aus Template
+    envsubst < /app/.env.template > /app/.env
+    
+    # Logge die ersten Zeilen (ohne Secrets)
+    echo "✅ .env Datei erstellt mit folgenden Einstellungen:"
+    head -n 5 /app/.env
+else
+    echo "ℹ️  .env Datei existiert bereits"
+    
+    # Validiere bestehende .env Datei
+    if ! grep -q "JWT_SECRET=" /app/.env; then
+        echo "❌ Fehler: JWT_SECRET nicht in .env gefunden"
+        exit 1
+    fi
+fi
+
+# Sicherheitsüberprüfungen
+if grep -q "your-secret-key" /app/.env; then
+    echo "❌ FEHLER: Standard JWT Secret in .env gefunden - bitte ändern!"
+    exit 1
+fi
+
+# Setze sichere Berechtigungen
+chmod 600 /app/.env
+chown -R schichtplaner:nodejs /app
+
+echo "🔧 Starte Anwendung..."
+exec "$@"

frontend/package.json

@@ -6,7 +6,8 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^6.28.0"
+    "react-router-dom": "^6.28.0",
+    "date-fns": "4.1.0"
   },
   "devDependencies": {
     "@types/node": "20.19.23",
@@ -16,7 +17,9 @@
     "@vitejs/plugin-react": "^4.3.3",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
-    "esbuild": "^0.21.0"
+    "esbuild": "^0.21.0",
+    "terser": "5.44.0",
+    "babel-plugin-transform-remove-console": "6.9.4"
   },
   "scripts": {
     "dev": "vite",

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// src/App.tsx - UPDATED FOR VITE
+// src/App.tsx
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';

frontend/src/components/Layout/Footer.tsx

@@ -1,4 +1,4 @@
-// frontend/src/components/Layout/Footer.tsx - ELEGANT WHITE DESIGN
+// frontend/src/components/Layout/Footer.tsx
 import React from 'react';
 
 const Footer: React.FC = () => {

frontend/src/components/Layout/FooterLinks/About/About.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/About/About.tsx
+// frontend/src/components/Layout/FooterLinks/About/About.tsx
 import React from 'react';
 
 const About: React.FC = () => {

frontend/src/components/Layout/FooterLinks/CommunityLinks/communityLinks.tsx

@@ -1,3 +1,4 @@
+// frontend/src/components/Layout/FooterLinks/CommunityLinks/communityLinks.tsx
 import React from 'react';
 
 export const CommunityContact: React.FC = () => (

frontend/src/components/Layout/FooterLinks/FAQ/FAQ.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/FAQ/FAQ.tsx
+// frontend/src/components/Layout/FooterLinks/FAQ/FAQ.tsx
 import React, { useState } from 'react';
 
 const FAQ: React.FC = () => {

frontend/src/components/Layout/Layout.module.css

@@ -1,220 +0,0 @@
-/* Layout.css - Professionelles Design */
-.layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Header */
-.header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-.header-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 70px;
-}
-
-.logo h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-/* Desktop Navigation */
-.desktop-nav {
-  display: flex;
-  gap: 2rem;
-  align-items: center;
-}
-
-.nav-link {
-  color: white;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-  font-weight: 500;
-}
-
-.nav-link:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-1px);
-}
-
-/* User Menu */
-.user-menu {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.user-info {
-  font-weight: 500;
-}
-
-.logout-btn {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.logout-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-/* Mobile Menu Button */
-.mobile-menu-btn {
-  display: none;
-  background: none;
-  border: none;
-  color: white;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0.5rem;
-}
-
-/* Mobile Navigation */
-.mobile-nav {
-  display: none;
-  flex-direction: column;
-  background: white;
-  padding: 1rem;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-.mobile-nav-link {
-  color: #333;
-  text-decoration: none;
-  padding: 1rem;
-  border-bottom: 1px solid #eee;
-  transition: background-color 0.3s ease;
-}
-
-.mobile-nav-link:hover {
-  background-color: #f5f5f5;
-}
-
-.mobile-user-info {
-  padding: 1rem;
-  border-top: 1px solid #eee;
-  margin-top: 1rem;
-}
-
-.mobile-logout-btn {
-  background: #667eea;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  margin-top: 0.5rem;
-  width: 100%;
-}
-
-/* Main Content */
-.main-content {
-  flex: 1;
-  background-color: #f8f9fa;
-  min-height: calc(100vh - 140px);
-}
-
-.content-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 20px;
-}
-
-/* Footer */
-.footer {
-  background: #2c3e50;
-  color: white;
-  margin-top: auto;
-}
-
-.footer-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 20px;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 2rem;
-}
-
-.footer-section h3,
-.footer-section h4 {
-  margin-bottom: 1rem;
-  color: #ecf0f1;
-}
-
-.footer-section a {
-  color: #bdc3c7;
-  text-decoration: none;
-  display: block;
-  margin-bottom: 0.5rem;
-  transition: color 0.3s ease;
-}
-
-.footer-section a:hover {
-  color: #3498db;
-}
-
-.footer-bottom {
-  border-top: 1px solid #34495e;
-  padding: 1rem 20px;
-  text-align: center;
-  color: #95a5a6;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .desktop-nav,
-  .user-menu {
-    display: none;
-  }
-  
-  .mobile-menu-btn {
-    display: block;
-  }
-  
-  .mobile-nav {
-    display: flex;
-  }
-  
-  .header-content {
-    padding: 0 15px;
-  }
-  
-  .content-container {
-    padding: 1rem 15px;
-  }
-  
-  .footer-content {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-}
-
-@media (max-width: 480px) {
-  .logo h1 {
-    font-size: 1.2rem;
-  }
-  
-  .content-container {
-    padding: 1rem 10px;
-  }
-}

frontend/src/components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-// frontend/src/components/Layout/Layout.tsx - ELEGANT WHITE DESIGN
+// frontend/src/components/Layout/Layout.tsx
 import React from 'react';
 import Navigation from './Navigation';
 import Footer from './Footer';

frontend/src/components/Layout/Navigation.tsx

@@ -1,4 +1,4 @@
-// frontend/src/components/Layout/Navigation.tsx - ELEGANT WHITE DESIGN
+// frontend/src/components/Layout/Navigation.tsx
 import React, { useState, useEffect } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import PillNav from '../PillNav/PillNav';

frontend/src/components/PillNav/PillNav.module.css

@@ -1,88 +0,0 @@
-/* frontend/src/components/PillNav/PillNav.module.css */
-.pillNavContainer {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  padding: 4px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.pillNavContainer::-webkit-scrollbar {
-  display: none;
-}
-
-.pill {
-  padding: 8px 16px;
-  border-radius: 9999px;
-  border: 1px solid;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  white-space: nowrap;
-  outline: none;
-}
-
-.pill:focus-visible {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-}
-
-/* Solid Variant */
-.pillSolid {
-  background-color: transparent;
-  color: #6b7280;
-  border-color: #d1d5db;
-}
-
-.pillSolidActive {
-  background-color: #2563eb;
-  color: white;
-  border-color: #2563eb;
-}
-
-.pillSolid:hover:not(.pillSolidActive) {
-  background-color: #f3f4f6;
-  color: #374151;
-  border-color: #9ca3af;
-  transform: translateY(-1px);
-}
-
-/* Outline Variant */
-.pillOutline {
-  background-color: transparent;
-  color: #6b7280;
-  border-color: #d1d5db;
-}
-
-.pillOutlineActive {
-  color: #2563eb;
-  border-color: #2563eb;
-  font-weight: 600;
-}
-
-.pillOutline:hover:not(.pillOutlineActive) {
-  background-color: #f3f4f6;
-  color: #374151;
-  border-color: #9ca3af;
-  transform: translateY(-1px);
-}
-
-/* Ghost Variant */
-.pillGhost {
-  background-color: transparent;
-  color: #6b7280;
-  border-color: transparent;
-}
-
-.pillGhostActive {
-  background-color: #f3f4f6;
-  color: #111827;
-}
-
-.pillGhost:hover:not(.pillGhostActive) {
-  background-color: #f9fafb;
-  color: #374151;
-  transform: translateY(-1px);
-}

frontend/src/components/PillNav/PillNav.tsx

@@ -1,4 +1,4 @@
-// frontend/src/components/PillNav/PillNav.tsx - ELEGANT WHITE DESIGN
+// frontend/src/components/PillNav/PillNav.tsx
 import React, { useEffect, useRef } from 'react';
 
 export interface PillNavItem {

frontend/src/components/PillNav/index.ts

@@ -1,3 +0,0 @@
-// frontend/src/components/PillNav/index.ts
-export { default } from './PillNav';
-export type { PillNavProps, PillNavItem } from './PillNav';

frontend/src/design/DesignSystem.txt

@@ -1,4 +1,4 @@
-// frontend/src/design/DesignSystem.tsx
+// frontend/src/design/DesignSystem.txt
 export const designTokens = {
   colors: {
     // Primary Colors

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

@@ -185,7 +185,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
         // Password change logic remains the same
         if (showPasswordSection && passwordForm.newPassword && hasRole(['admin'])) {
           if (passwordForm.newPassword.length < 6) {
-            throw new Error('Das neue Passwort muss mindestens 6 Zeichen lang sein');
+            throw new Error('Das Passwort muss mindestens 6 Zeichen lang sein, Zahlen und Groß- / Kleinbuchstaben enthalten');
           }
           if (passwordForm.newPassword !== passwordForm.confirmPassword) {
             throw new Error('Die Passwörter stimmen nicht überein');
@@ -351,10 +351,10 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                     borderRadius: '4px',
                     fontSize: '16px'
                   }}
-                  placeholder="Mindestens 6 Zeichen"
+                  placeholder="Mindestens 6 Zeichen, Zahlen, Groß- / Kleinzeichen"
                 />
                 <div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
-                  Das Passwort muss mindestens 6 Zeichen lang sein.
+                  Das Passwort muss mindestens 6 Zeichen lang sein, Zahlen und Groß- / Kleinbuchstaben enthalten.
                 </div>
               </div>
             )}
@@ -672,7 +672,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                         borderRadius: '4px',
                         fontSize: '16px'
                       }}
-                      placeholder="Mindestens 6 Zeichen"
+                      placeholder="Mindestens 6 Zeichen, Zahlen, Groß- / Kleinzeichen"
                     />
                   </div>
 

frontend/src/pages/Setup/Setup.tsx

@@ -333,7 +333,7 @@ const Setup: React.FC = () => {
             disabled={loading}
             style={{
               padding: '0.75rem 2rem',
-              backgroundColor: loading ? '#6c757d' : '#007bff',
+              backgroundColor: loading ? '#6c757d' : '#51258f',
               color: 'white',
               border: 'none',
               borderRadius: '6px',

frontend/src/services/shiftPlanService.ts

@@ -1,6 +1,6 @@
 // frontend/src/services/shiftPlanService.ts
 import { authService } from './authService';
-import { ShiftPlan, CreateShiftPlanRequest, ScheduledShift, CreateShiftFromTemplateRequest } from '../models/ShiftPlan';
+import { ShiftPlan, CreateShiftPlanRequest } from '../models/ShiftPlan';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults';  
 
 const API_BASE_URL = '/api/shift-plans';

frontend/vite.config.ts

@@ -1,31 +1,166 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { resolve } from 'path'
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
+// Security-focused Vite configuration
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === 'production'
+  const isDevelopment = mode === 'development'
+  
+  // Load environment variables securely
+  const env = loadEnv(mode, process.cwd(), '')
+  
+  // Strictly defined client-safe environment variables
+  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' : 'http://localhost:3002/api',
+  }
+
+  return {
+    plugins: [
+      react({
+        // React specific security settings
+        jsxRuntime: 'automatic',
+        babel: {
+          plugins: [
+            // Remove console in production
+            isProduction && ['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }]
+          ].filter(Boolean)
+        }
+      })
+    ],
+    
     server: {
       port: 3003,
       host: true,
-    open: true,
+      open: isDevelopment,
+      // Security headers for dev server
+      headers: {
+        'X-Content-Type-Options': 'nosniff',
+        'X-Frame-Options': 'DENY',
+        'X-XSS-Protection': '1; mode=block',
+        'Referrer-Policy': 'strict-origin-when-cross-origin',
+        'Permissions-Policy': 'camera=(), microphone=(), location=()'
+      },
       proxy: {
         '/api': {
           target: 'http://localhost:3002',
           changeOrigin: true,
           secure: false,
         }
-    }
       },
+      // Security: disable HMR in non-dev environments
+      hmr: isDevelopment
+    },
+    
     build: {
       outDir: 'dist',
-    sourcemap: true,
+      // Security: No source maps in production
+      sourcemap: isDevelopment ? 'inline' : false,
+      // Generate deterministic hashes for better caching and security
+      assetsDir: 'assets',
       rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html')
+        output: {
+          // Security: Use content hashes for cache busting and integrity
+          chunkFileNames: 'assets/[name]-[hash].js',
+          entryFileNames: 'assets/[name]-[hash].js',
+          assetFileNames: 'assets/[name]-[hash].[ext]',
+          // Security: Manual chunks to separate vendor code
+          manualChunks: (id) => {
+            if (id.includes('node_modules')) {
+              if (id.includes('react') || id.includes('react-dom')) {
+                return 'vendor-react'
+              }
+              if (id.includes('react-router-dom')) {
+                return 'vendor-router'
+              }
+              return 'vendor'
+            }
           }
         }
       },
+      // Minification with security-focused settings
+      minify: isProduction ? 'terser' : false,
+      terserOptions: isProduction ? {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+          // Security: Remove potentially sensitive code
+          pure_funcs: [
+            'console.log',
+            'console.info',
+            'console.debug',
+            'console.warn',
+            'console.trace',
+            'console.table',
+            'debugger'
+          ],
+          dead_code: true,
+          if_return: true,
+          comparisons: true,
+          loops: true,
+          hoist_funs: true,
+          hoist_vars: true,
+          reduce_vars: true,
+          booleans: true,
+          conditionals: true,
+          evaluate: true,
+          sequences: true,
+          unused: true
+        },
+        mangle: {
+          // Security: Obfuscate code
+          toplevel: true,
+          keep_classnames: false,
+          keep_fnames: false,
+          reserved: [
+            'React',
+            'ReactDOM',
+            'useState',
+            'useEffect',
+            'useContext',
+            'createElement'
+          ]
+        },
+        format: {
+          comments: false,
+          beautify: false,
+          // Security: ASCII only to prevent encoding attacks
+          ascii_only: true
+        }
+      } : undefined,
+      // Security: Report bundle size issues
+      reportCompressedSize: true,
+      chunkSizeWarningLimit: 1000,
+      // Security: Don't expose source paths
+      assetsInlineLimit: 4096
+    },
+    
+    preview: {
+      port: 3004,
+      headers: {
+        // Security headers for preview server
+        'X-Content-Type-Options': 'nosniff',
+        'X-Frame-Options': 'DENY',
+        'X-XSS-Protection': '1; mode=block',
+        'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
+        'Referrer-Policy': 'strict-origin-when-cross-origin',
+        'Content-Security-Policy': `
+          default-src 'self';
+          script-src 'self' 'unsafe-inline';
+          style-src 'self' 'unsafe-inline';
+          img-src 'self' data: https:;
+          font-src 'self';
+          connect-src 'self';
+          base-uri 'self';
+          form-action 'self';
+          frame-ancestors 'none';
+        `.replace(/\s+/g, ' ').trim()
+      }
+    },
+    
     resolve: {
       alias: {
         '@': resolve(__dirname, './src'),
@@ -38,8 +173,31 @@ export default defineConfig({
         '@/design': resolve(__dirname, './src/design')
       }
     },
-  // Define environment variables
-  define: {
-    'process.env': process.env
+    
+    // ✅ SICHER: Strict environment variable control
+    define: Object.keys(clientEnv).reduce((acc, key) => {
+      acc[`import.meta.env.${key}`] = JSON.stringify(clientEnv[key])
+      return acc
+    }, {} as Record<string, string>),
+    
+    // Security: Clear build directory
+    emptyOutDir: true,
+    
+    // Security: Optimize dependencies
+    optimizeDeps: {
+      include: ['react', 'react-dom', 'react-router-dom'],
+      exclude: ['@vitejs/plugin-react']
+    },
+    
+    // Security: CSS configuration
+    css: {
+      devSourcemap: isDevelopment,
+      modules: {
+        localsConvention: 'camelCase',
+        generateScopedName: isProduction 
+          ? '[hash:base64:8]' 
+          : '[name]__[local]--[hash:base64:5]'
+      }
+    }
   }
 })