removed invalid terser option

.env.example

@@ -0,0 +1,4 @@
+# .env.production example
+NODE_ENV=production
+JWT_SECRET=your-secret-key
+DATABASE_PATH=/app/data/production.db

.github/workflows/docker.yml

@@ -16,11 +16,21 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       tag_name: ${{ steps.set_tag.outputs.tag_name }}
+      is_main_branch: ${{ steps.branch_check.outputs.is_main }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0  # Fetch all history for tags
+          fetch-depth: 0
+
+      - name: Check if main branch
+        id: branch_check
+        run: |
+          if [[ "${{ github.ref }}" == "refs/heads/main" || "${{ github.ref }}" == "refs/heads/master" ]]; then
+            echo "is_main=true" >> $GITHUB_OUTPUT
+          else
+            echo "is_main=false" >> $GITHUB_OUTPUT
+          fi
 
       - name: Determine next semantic version tag
         id: set_tag
@@ -29,24 +39,31 @@ jobs:
 
           # Find latest tag matching vX.Y.Z
           latest_tag=$(git tag --list 'v*.*.*' --sort=-v:refname | head -n 1)
+          echo "Latest tag found: $latest_tag"
+          
           if [[ -z "$latest_tag" ]]; then
             major=0
             minor=0
             patch=0
+            echo "No existing tags found, starting from v0.0.0"
           else
             version="${latest_tag#v}"
             IFS='.' read -r major minor patch <<< "$version"
+            echo "Parsed version: major=$major, minor=$minor, patch=$patch"
           fi
 
-          if [[ "${GITHUB_REF}" == "refs/heads/main" || "${GITHUB_REF}" == "refs/heads/master" ]]; then
+          if [[ "${{ github.ref }}" == "refs/heads/main" || "${{ github.ref }}" == "refs/heads/master" ]]; then
             major=$((major + 1))
             minor=0
             patch=0
-          elif [[ "${GITHUB_REF}" == "refs/heads/development" ]]; then
+            echo "Main branch - major version bump"
+          elif [[ "${{ github.ref }}" == "refs/heads/development" ]]; then
             minor=$((minor + 1))
             patch=0
+            echo "Development branch - minor version bump"
           else
             patch=$((patch + 1))
+            echo "Other branch - patch version bump"
           fi
 
           new_tag="v${major}.${minor}.${patch}"
@@ -65,14 +82,10 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
-          cache-dependency-path: backend/package-lock.json
 
       - name: Install backend dependencies
         working-directory: ./backend
-        run: |
-          # Try npm ci first, if it fails use npm install
-          npm ci || (echo "package-lock.json out of sync, using npm install..." && npm install)
+        run: npm install
 
       - name: Run TypeScript check
         working-directory: ./backend
@@ -81,7 +94,6 @@ jobs:
       - name: Run backend tests
         working-directory: ./backend
         run: |
-          # Skip tests if jest is not installed
           if [ -f "node_modules/.bin/jest" ]; then
             npm test
           else
@@ -134,11 +146,8 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
-            type=semver,pattern={{version}}
-            type=sha
-            # Add the dynamically generated semantic version
-            ${{ needs.set-tag.outputs.tag_name }}
+            type=raw,value=${{ needs.set-tag.outputs.tag_name }}
+            type=raw,value=latest,enable=${{ fromJSON(needs.set-tag.outputs.is_main_branch) }}
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v5
@@ -168,3 +177,4 @@ jobs:
           echo "- Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
           echo "- Tags: ${{ steps.meta.outputs.tags }}"
           echo "- New version: ${{ needs.set-tag.outputs.tag_name }}"
+          echo "- Is main branch: ${{ needs.set-tag.outputs.is_main_branch }}"

.gitignore

@@ -64,6 +64,7 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
+.env.production
 
 # Database
 database/*.db
@@ -110,3 +111,29 @@ Thumbs.db
 
 # Optional eslint cache
 .eslintcache
+
+# Ignore contents of premium folder in public repo
+premium/*
+!premium/README-PREMIUM.md
+!premium/.gitkeep
+
+.git
+.gitignore
+node_modules
+npm-debug.log
+README.md
+.env
+.nyc_output
+coverage
+.cache
+dist
+build
+logs
+*.tsbuildinfo
+
+# Frontend specific
+frontend/dist
+frontend/.vite
+
+# Backend specific  
+backend/dist

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "premium"]
+	path = premium
+	url = https://github.com/donpat1to/Schichtenplaner-Pro.git

Dockerfile

@@ -1,7 +1,7 @@
-# Multi-stage build for combined frontend + backend
-FROM node:20-bullseye AS backend-builder
+# Single stage build for workspaces
+FROM node:20-bullseye AS builder
 
-WORKDIR /app/backend
+WORKDIR /app
 
 # Install Python + OR-Tools
 RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
@@ -10,78 +10,58 @@ RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
 # Create symlink so python3 is callable as python
 RUN ln -sf /usr/bin/python3 /usr/bin/python
 
-# Copy backend files
-COPY backend/package*.json ./
-COPY backend/tsconfig.json ./
+# Copy root package files first
+COPY package*.json ./
+COPY tsconfig.base.json ./
+COPY ecosystem.config.cjs ./
 
-# Install backend dependencies
-RUN npm ci
+# Install root dependencies
+RUN npm install --only=production
 
-# Copy backend source
-COPY backend/src/ ./src/
+# Copy workspace files
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
 
-# Build backend
-RUN npm run build
+# Install workspace dependencies individually
+RUN npm install --workspace=backend
+RUN npm install --workspace=frontend
 
-# Copy database files manually
-RUN cp -r src/database/ dist/database/
+# Build backend first
+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')"
 
-# Frontend build stage
-FROM node:20-bullseye AS frontend-builder
-
-WORKDIR /app/frontend
-
-# Copy frontend files
-COPY frontend/package*.json ./
-COPY frontend/tsconfig.json ./
-
-# Install frontend dependencies
-RUN npm ci
-
-# Copy frontend source
-COPY frontend/src/ ./src/
-COPY frontend/public/ ./public/
-
-# Build frontend
-RUN npm run build
-
-# Production stage
+# Production stage (same as above)
 FROM node:20-bookworm
 
 WORKDIR /app
 
-# Install PM2 for process management
 RUN npm install -g pm2
-
-# Create data directory for SQLite database with proper permissions
 RUN mkdir -p /app/data
 
-# Copy backend built files
-COPY --from=backend-builder /app/backend/package*.json ./
-COPY --from=backend-builder /app/backend/dist/ ./dist/
-COPY --from=backend-builder /app/backend/node_modules/ ./node_modules/
+COPY --from=builder /app/backend/dist/ ./dist/
+COPY --from=builder /app/backend/package*.json ./
 
-# Copy frontend built files  
-COPY --from=frontend-builder /app/frontend/build/ ./frontend-build/
+COPY --from=builder /app/node_modules/ ./node_modules/
+COPY --from=builder /app/frontend/dist/ ./frontend-build/
 
-# Copy PM2 configuration
-COPY ecosystem.config.cjs ./
+COPY --from=builder /app/ecosystem.config.cjs ./
+
+COPY --from=builder /app/backend/src/database/ ./dist/database/
+COPY --from=builder /app/backend/src/database/ ./database/
 
-# Create a non-root user and group - DEBIAN STYLE
 RUN groupadd -g 1001 nodejs && \
     useradd -m -u 1001 -s /bin/bash -g nodejs schichtplan && \
     chown -R schichtplan:nodejs /app && \
     chmod 755 /app && \
     chmod 775 /app/data
 
-# Set PM2 to use app directory instead of home directory
 ENV PM2_HOME=/app/.pm2
-
 USER schichtplan
-
 EXPOSE 3002
 
 HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \

LICENSE-COMMERCIAL

@@ -0,0 +1,21 @@
+COMMERCIAL LICENSE AGREEMENT
+Copyright (c) 2025 Patrick Mahnke-Hartmann
+
+This software, "Schichtenplaner", is offered under a dual licensing model.
+
+1. Open-Source License
+   You may use this software under the terms of the MIT License
+   (see LICENSE file) for non-commercial, personal, or educational use.
+
+2. Commercial License
+   Commercial use of this software requires a separate paid license.
+   This includes, but is not limited to:
+   - Use in proprietary, for-profit, or internal business applications
+   - Use within paid services or SaaS offerings
+   - Integration into commercial software or distributions
+
+To obtain a commercial license, please contact:
+📧 dev.patrick@mahnke-hartmann.de
+or open an inquiry via GitHub: https://github.com/donpat1to/Schichtenplaner
+
+Without a valid commercial license, all commercial rights are reserved.

README.md

@@ -2,4 +2,14 @@
 Aufteilung der Schichten unter Mitarbeitern
 
 
-du knlich
+## 🧾 License
+
+This project uses a **dual license model**:
+
+- **Community Edition:** Licensed under [MIT](./LICENSE) for personal and non-commercial use.
+- **Commercial Edition:** A [commercial license](./LICENSE-COMMERCIAL) is required for any for-profit or business use.
+
+To obtain a commercial license, contact:  
+📧 patrick@mahnke-hartmann.dev
+
+[![License: MIT & Commercial](https://img.shields.io/badge/license-MIT%20%7C%20Commercial-purple)](#license)

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,105 +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') {
+    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'
   });
 });
 
-// 🆕 STATIC FILE SERVING FÜR FRONTEND
-const frontendBuildPath = path.join(__dirname, '../frontend-build');
-console.log('📁 Frontend build path:', frontendBuildPath);
+// 🆕 IMPROVED STATIC FILE SERVING
+const findFrontendBuildPath = (): string | null => {
+  const possiblePaths = [
+    // 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'),
+  ];
 
-// Überprüfe ob das Verzeichnis existiert
-if (fs.existsSync(frontendBuildPath)) {
-  console.log('✅ Frontend build directory exists');
-  const files = fs.readdirSync(frontendBuildPath);
-  console.log('📄 Files in frontend-build:', files);
+  for (const testPath of possiblePaths) {
+    try {
+      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;
+};
 
-  // Serviere statische Dateien
+const frontendBuildPath = findFrontendBuildPath();
+
+if (frontendBuildPath) {
   app.use(express.static(frontendBuildPath));
-  
   console.log('✅ Static file serving configured');
 } else {
-  console.log('❌ Frontend build directory NOT FOUND:', frontendBuildPath);
+  console.log(isDevelopment ?
+    '🔧 Development: Frontend served by Vite dev server (localhost:3003)' :
+    '❌ Production: No frontend build found'
+  );
 }
 
+// Root route
 app.get('/', (req, res) => {
-  const indexPath = path.join(frontendBuildPath, 'index.html');
-  console.log('📄 Serving index.html from:', indexPath);
-  
-  if (fs.existsSync(indexPath)) {
-    res.sendFile(indexPath);
-  } else {
-    console.error('❌ index.html not found at:', indexPath);
-    res.status(404).send('Frontend not found - index.html missing');
+  if (!frontendBuildPath) {
+    if (isDevelopment) {
+      return res.redirect('http://localhost:3003');
+    }
+    return res.status(500).send('Frontend build not found');
   }
+  
+  const indexPath = path.join(frontendBuildPath, 'index.html');
+  res.sendFile(indexPath);
 });
 
+// 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' });
   }
   
-  const indexPath = path.join(frontendBuildPath, 'index.html');
-  console.log('🔄 Client-side routing for:', req.path, '-> index.html');
+  if (!frontendBuildPath) {
+    if (isDevelopment) {
+      return res.redirect(`http://localhost:3003${req.path}`);
+    }
+    return res.status(500).json({ error: 'Frontend application not available' });
+  }
   
-  if (fs.existsSync(indexPath)) {
-    res.sendFile(indexPath);
+  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({ 
+      error: 'Internal server error',
+      message: 'Something went wrong'
+    });
   } else {
-    console.error('❌ index.html not found for client-side routing');
-    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(`📍 Frontend: http://localhost:${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);
@@ -118,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/services/databaseService.ts

@@ -1,3 +1,4 @@
+// backend/src/services/databaseService
 import sqlite3 from 'sqlite3';
 import path from 'path';
 import { fileURLToPath } from '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;

backend/tsconfig.json

@@ -1,19 +1,22 @@
-// backend/tsconfig.json
 {
   "compilerOptions": {
     "target": "ES2022",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "allowJs": true,
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

docker-compose.yml

@@ -1,26 +1,14 @@
 version: '3.8'
 
 services:
-  schichtplan:
-    build: 
-      context: .
-      dockerfile: backend/Dockerfile
+  schichtplaner:
+    container_name: schichtplaner
+    image: ghcr.io/donpat1to/schichtenplaner:v1.0.0
     ports:
-      - "3001:3001"
-      - "3000:3000"
-    environment:
-      - NODE_ENV=production
-      - DATABASE_URL=file:./prod.db
-      - JWT_SECRET=your-production-secret-key-change-this
-      - PYTHON_PATH=/usr/bin/python3
+      - "3002:3002"
     volumes:
       - app_data:/app/data
     restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3001/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
 
 volumes:
   app_data:

ecosystem.config.cjs

@@ -1,18 +1,17 @@
 // ecosystem.config.cjs
 module.exports = {
-  apps: [
-    {
-      name: 'schichtplaner',
-      script: './dist/server.js',
-      instances: 1,
-      exec_mode: 'fork',
-      env: {
-        NODE_ENV: 'production',
-        PORT: 3002
-      },
-      error_file: './logs/app-err.log',
-      out_file: './logs/app-out.log',
-      time: true
-    }
-  ]
+  apps: [{
+    name: 'schichtplan-app',
+    script: './dist/server.js',
+    instances: 1,
+    env: {
+      NODE_ENV: 'production',
+      PORT: 3002,
+      FRONTEND_BUILD_PATH: './frontend-build'
+    },
+    error_file: './logs/err.log',
+    out_file: './logs/out.log',
+    log_file: './logs/combined.log',
+    time: true
+  }]
 };

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shift Planning App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -2,45 +2,28 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.126",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^6.28.0",
+    "date-fns": "4.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.19.23",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-router-dom": "^5.3.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router-dom": "^7.9.3",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "esbuild": "^0.21.0",
+    "terser": "5.44.0",
+    "babel-plugin-transform-remove-console": "6.9.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   }
 }

frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "SP",
+  "name": "schichtenplaner",
   "icons": [
     {
       "src": "favicon.ico",

frontend/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// frontend/src/App.tsx - KORRIGIERT MIT LAYOUT
+// src/App.tsx
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
@@ -16,6 +16,38 @@ import Settings from './pages/Settings/Settings';
 import Help from './pages/Help/Help';
 import Setup from './pages/Setup/Setup';
 
+// Free Footer Link Pages (always available)
+import FAQ from './components/Layout/FooterLinks/FAQ/FAQ';
+import About from './components/Layout/FooterLinks/About/About';
+import Features from './components/Layout/FooterLinks/Features/Features';
+import { CommunityContact, CommunityLegalPage } from './components/Layout/FooterLinks/CommunityLinks/communityLinks';
+
+// Vite environment variables (use import.meta.env instead of process.env)
+const ENABLE_PRO = import.meta.env.ENABLE_PRO === 'true';
+
+// Conditional Premium Components
+let PremiumContact: React.FC = CommunityContact;
+let PremiumPrivacy: React.FC = () => <CommunityLegalPage title="Datenschutz" />;
+let PremiumImprint: React.FC = () => <CommunityLegalPage title="Impressum" />;
+let PremiumTerms: React.FC = () => <CommunityLegalPage title="AGB" />;
+
+// Load premium components only when ENABLE_PRO is true
+if (ENABLE_PRO) {
+  try {
+    // Use require with type assertions to avoid dynamic import issues
+    const premiumModule = require('@premium-frontend/components/FooterLinks');
+
+    if (premiumModule.Contact) PremiumContact = premiumModule.Contact;
+    if (premiumModule.Privacy) PremiumPrivacy = premiumModule.Privacy;
+    if (premiumModule.Imprint) PremiumImprint = premiumModule.Imprint;
+    if (premiumModule.Terms) PremiumTerms = premiumModule.Terms;
+    
+    console.log('✅ Premium components loaded successfully');
+  } catch (error) {
+    console.warn('⚠️ Premium components not available, using community fallbacks:', error);
+  }
+}
+
 // Protected Route Component
 const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({ 
   children, 
@@ -49,11 +81,27 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
   return <Layout>{children}</Layout>;
 };
 
+// Public Route Component (without Layout for footer pages)
+const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <div>⏳ Lade Anwendung...</div>
+      </div>
+    );
+  }
+
+  return user ? <Layout>{children}</Layout> : <>{children}</>;
+};
+
 // Main App Content
 const AppContent: React.FC = () => {
   const { loading, needsSetup, user } = useAuth();
 
   console.log('🏠 AppContent rendering - loading:', loading, 'needsSetup:', needsSetup, 'user:', user);
+  console.log('🎯 Premium features enabled:', ENABLE_PRO);
 
   // Während des Ladens
   if (loading) {
@@ -80,52 +128,32 @@ const AppContent: React.FC = () => {
   console.log('✅ Showing protected routes for user:', user.email);
   return (
     <Routes>
-      <Route path="/" element={
-        <ProtectedRoute>
-          <Dashboard />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans" element={
-        <ProtectedRoute>
-          <ShiftPlanList />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/new" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <ShiftPlanCreate />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/:id/edit" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <ShiftPlanEdit />
-        </ProtectedRoute>
-      } />
-      <Route path="/shift-plans/:id" element={
-        <ProtectedRoute>
-          <ShiftPlanView />
-        </ProtectedRoute>
-      } />
-      <Route path="/employees" element={
-        <ProtectedRoute roles={['admin', 'maintenance']}>
-          <EmployeeManagement />
-        </ProtectedRoute>
-      } />
-      <Route path="/settings" element={
-        <ProtectedRoute>
-          <Settings />
-        </ProtectedRoute>
-      } />
-      <Route path="/help" element={
-        <ProtectedRoute>
-          <Help />
-        </ProtectedRoute>
-      } />
+      {/* Protected Routes (require login) */}
+      <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+      <Route path="/shift-plans" element={<ProtectedRoute><ShiftPlanList /></ProtectedRoute>} />
+      <Route path="/shift-plans/new" element={<ProtectedRoute roles={['admin', 'maintenance']}><ShiftPlanCreate /></ProtectedRoute>} />
+      <Route path="/shift-plans/:id/edit" element={<ProtectedRoute roles={['admin', 'maintenance']}><ShiftPlanEdit /></ProtectedRoute>} />
+      <Route path="/shift-plans/:id" element={<ProtectedRoute><ShiftPlanView /></ProtectedRoute>} />
+      <Route path="/employees" element={<ProtectedRoute roles={['admin', 'maintenance']}><EmployeeManagement /></ProtectedRoute>} />
+      <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
+      <Route path="/help" element={<ProtectedRoute><Help /></ProtectedRoute>} />
+
+      {/* Public Footer Link Pages (always available) */}
+      <Route path="/faq" element={<PublicRoute><FAQ /></PublicRoute>} />
+      <Route path="/about" element={<PublicRoute><About /></PublicRoute>} />
+      <Route path="/features" element={<PublicRoute><Features /></PublicRoute>} />
+
+      {/* PREMIUM Footer Link Pages (conditionally available) */}
+      <Route path="/contact" element={<PublicRoute><PremiumContact /></PublicRoute>} />
+      <Route path="/privacy" element={<PublicRoute><PremiumPrivacy /></PublicRoute>} />
+      <Route path="/imprint" element={<PublicRoute><PremiumImprint /></PublicRoute>} />
+      <Route path="/terms" element={<PublicRoute><PremiumTerms /></PublicRoute>} />
+
+      {/* Auth Routes */}
       <Route path="/login" element={<Login />} />
-      <Route path="*" element={
-        <ProtectedRoute>
-          <Dashboard />
-        </ProtectedRoute>
-      } />
+      
+      {/* Catch-all Route */}
+      <Route path="*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
     </Routes>
   );
 };

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 = () => {
@@ -10,12 +10,12 @@ const Footer: React.FC = () => {
       borderTop: '1px solid rgba(251, 250, 246, 0.1)',
     },
     footerContent: {
-      maxWidth: '1200px',
+      maxWidth: '1500px',
       margin: '0 auto',
       padding: '3rem 2rem 2rem',
       display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-      gap: '3rem',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+      gap: '1rem',
     },
     footerSection: {
       display: 'flex',
@@ -182,20 +182,6 @@ const Footer: React.FC = () => {
           >
             Funktionen
           </a>
-          <a 
-            href="/pricing" 
-            style={styles.footerLink}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = '#FBFAF6';
-              e.currentTarget.style.transform = 'translateX(4px)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = 'rgba(251, 250, 246, 0.7)';
-              e.currentTarget.style.transform = 'translateX(0)';
-            }}
-          >
-            Preise
-          </a>
         </div>
       </div>
       

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

@@ -0,0 +1,76 @@
+// frontend/src/components/Layout/FooterLinks/About/About.tsx
+import React from 'react';
+
+const About: React.FC = () => {
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>👨‍💻 Über uns</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        padding: '30px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0',
+        lineHeight: 1.6
+      }}>
+        <h2 style={{ color: '#2c3e50' }}>Unser Team</h2>
+        
+        <div style={{ display: 'flex', alignItems: 'center', marginTop: '20px', padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
+          <div style={{ marginRight: '20px' }}>
+            <div style={{ 
+              width: '80px', 
+              height: '80px', 
+              backgroundColor: '#3498db', 
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+              fontSize: '2rem',
+              fontWeight: 'bold'
+            }}>
+              P
+            </div>
+          </div>
+          <div>
+            <h3 style={{ color: '#2c3e50', margin: '0 0 5px 0' }}>Patrick</h3>
+            <p style={{ color: '#6c757d', margin: '0 0 10px 0' }}>
+              Full-Stack Developer & Projektleiter
+            </p>
+            <p style={{ margin: 0, fontSize: '0.9rem' }}>
+              GitHub: <a href="https://github.com/donpat1to" style={{ color: '#3498db' }}>donpat1to</a><br/>
+              E-Mail: <a href="mailto:dev.patrick@inca-vikingo.de" style={{ color: '#3498db' }}>dev.patrick@inca-vikingo.de</a>
+            </p>
+          </div>
+        </div>
+        
+        <h3 style={{ color: '#3498db', marginTop: '30px' }}>🚀 Unsere Mission</h3>
+        <p>
+          Wir entwickeln intelligente Lösungen für die Personalplanung, 
+          die Zeit sparen und faire Schichtverteilung gewährleisten.
+        </p>
+        
+        <h3 style={{ color: '#3498db', marginTop: '25px' }}>💻 Technologie</h3>
+        <p>
+          Unser Stack umfasst moderne Technologien:
+        </p>
+        <ul>
+          <li>Frontend: React, TypeScript</li>
+          <li>Backend: Node.js, Express</li>
+          <li>Optimierung: Google OR-Tools CP-SAT</li>
+          <li>Datenbank: SQLite/PostgreSQL</li>
+        </ul>
+        
+        <h3 style={{ color: '#3498db', marginTop: '25px' }}>📈 Entwicklung</h3>
+        <p>
+          Schichtenplaner wird kontinuierlich weiterentwickelt und 
+          basiert auf Feedback unserer Nutzer.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default About;

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

@@ -0,0 +1,38 @@
+// frontend/src/components/Layout/FooterLinks/CommunityLinks/communityLinks.tsx
+import React from 'react';
+
+export const CommunityContact: React.FC = () => (
+  <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+    <h1>📞 Kontakt</h1>
+    <div style={{ backgroundColor: 'white', borderRadius: '12px', padding: '30px', marginTop: '20px' }}>
+      <h2 style={{ color: '#2c3e50' }}>Community Edition</h2>
+      <p>Kontaktfunktionen sind in der Premium Edition verfügbar.</p>
+      <p>
+        <a href="/features" style={{ color: '#3498db' }}>
+          ➡️ Zu den Features
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+export const CommunityLegalPage: React.FC<{ title: string }> = ({ title }) => (
+  <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+    <h1>📄 {title}</h1>
+    <div style={{ backgroundColor: 'white', borderRadius: '12px', padding: '30px', marginTop: '20px' }}>
+      <h2 style={{ color: '#2c3e50' }}>Community Edition</h2>
+      <p>Rechtliche Dokumentation ist in der Premium Edition verfügbar.</p>
+      <p>
+        <a href="/features" style={{ color: '#3498db' }}>
+          ➡️ Erfahren Sie mehr über Premium
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+// Optional: Barrel export für einfachere Imports
+export default {
+  CommunityContact,
+  CommunityLegalPage
+};

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

@@ -0,0 +1,103 @@
+// frontend/src/components/Layout/FooterLinks/FAQ/FAQ.tsx
+import React, { useState } from 'react';
+
+const FAQ: React.FC = () => {
+  const [openItems, setOpenItems] = useState<number[]>([]);
+
+  const toggleItem = (index: number) => {
+    setOpenItems(prev => 
+      prev.includes(index) 
+        ? prev.filter(i => i !== index)
+        : [...prev, index]
+    );
+  };
+
+  const faqItems = [
+    {
+      question: "Wie funktioniert der Scheduling-Algorithmus?",
+      answer: "Unser System verwendet Google's OR-Tools CP-SAT Solver, um optimale Schichtzuweisungen basierend auf Verfügbarkeiten, Vertragstypen und Geschäftsregeln zu berechnen."
+    },
+    {
+      question: "Was bedeuten die Verfügbarkeits-Level 1, 2 und 3?",
+      answer: "Level 1: Bevorzugt (Mitarbeiter möchte diese Schicht), Level 2: Verfügbar (kann arbeiten), Level 3: Nicht verfügbar (kann nicht arbeiten)."
+    },
+    {
+      question: "Wie werden Vertragstypen berücksichtigt?",
+      answer: "Kleine Verträge: 1 Schicht pro Woche, Große Verträge: 2 Schichten pro Woche. Das System weist genau diese Anzahl zu."
+    },
+    {
+      question: "Kann ich manuelle Anpassungen vornehmen?",
+      answer: "Ja, nach dem automatischen Scheduling können Sie Zuordnungen manuell anpassen und optimieren."
+    },
+    {
+      question: "Was passiert bei unterbesetzten Schichten?",
+      answer: "Das System zeigt eine Warnung an und versucht, alternative Lösungen zu finden. In kritischen Fällen müssen manuelle Anpassungen vorgenommen werden."
+    },
+    {
+      question: "Wie lange dauert die Planungserstellung?",
+      answer: "Typischerweise maximal 105 Sekunden, abhängig von der Anzahl der Mitarbeiter und Schichten."
+    }
+  ];
+
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>❓ Häufige Fragen (FAQ)</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0'
+      }}>
+        {faqItems.map((item, index) => (
+          <div key={index} style={{ 
+            borderBottom: index < faqItems.length - 1 ? '1px solid #e0e0e0' : 'none',
+            padding: '20px 30px'
+          }}>
+            <div
+              onClick={() => toggleItem(index)}
+              style={{
+                cursor: 'pointer',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+              }}
+            >
+              <h3 style={{ 
+                color: '#2c3e50', 
+                margin: 0,
+                fontSize: '1.1rem'
+              }}>
+                {item.question}
+              </h3>
+              <span style={{ 
+                fontSize: '1.5rem',
+                color: '#3498db',
+                transform: openItems.includes(index) ? 'rotate(45deg)' : 'rotate(0)',
+                transition: 'transform 0.2s ease'
+              }}>
+                +
+              </span>
+            </div>
+            
+            {openItems.includes(index) && (
+              <div style={{ 
+                marginTop: '15px',
+                padding: '15px',
+                backgroundColor: '#f8f9fa',
+                borderRadius: '8px',
+                color: '#6c757d',
+                lineHeight: 1.6
+              }}>
+                {item.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;

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

@@ -0,0 +1,111 @@
+// frontend/src/pages/Features/Features.tsx
+import React from 'react';
+
+const Features: React.FC = () => {
+  const features = [
+    {
+      icon: "🤖",
+      title: "Automatisches Scheduling",
+      description: "Intelligenter Algorithmus erstellt optimale Schichtpläne basierend auf Verfügbarkeiten und Regeln"
+    },
+    {
+      icon: "⚡",
+      title: "Schnelle Berechnung",
+      description: "Google OR-Tools CP-SAT Solver findet Lösungen in maximal 105 Sekunden"
+    },
+    {
+      icon: "👥",
+      title: "Flexible Regelkonfiguration",
+      description: "Anpassbare Geschäftsregeln für Trainee-Betreuung, Alleinarbeit, Vertragstypen"
+    },
+    {
+      icon: "📊",
+      title: "Echtzeit-Validierung",
+      description: "Automatische Erkennung von Regelverletzungen und Konflikten"
+    },
+    {
+      icon: "🔒",
+      title: "Lokale Datenspeicherung",
+      description: "Alle Daten bleiben in Ihrer Infrastruktur - volle Kontrolle und Datenschutz"
+    },
+    {
+      icon: "🎯",
+      title: "Präferenz-basiert",
+      description: "Berücksichtigt Mitarbeiterwünsche für höhere Zufriedenheit"
+    }
+  ];
+
+  return (
+    <div style={{ padding: '40px 20px', maxWidth: '1000px', margin: '0 auto' }}>
+      <h1>✨ Funktionen</h1>
+      
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        padding: '30px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0'
+      }}>
+        <h2 style={{ color: '#2c3e50', textAlign: 'center', marginBottom: '40px' }}>
+          Alles, was Sie für die perfekte Schichtplanung benötigen
+        </h2>
+        
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+          gap: '30px' 
+        }}>
+          {features.map((feature, index) => (
+            <div key={index} style={{
+              padding: '25px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '12px',
+              border: '2px solid #e9ecef',
+              textAlign: 'center',
+              transition: 'transform 0.2s ease, box-shadow 0.2s ease'
+            }}>
+              <div style={{ 
+                fontSize: '3rem',
+                marginBottom: '15px'
+              }}>
+                {feature.icon}
+              </div>
+              <h3 style={{ 
+                color: '#2c3e50',
+                margin: '0 0 15px 0'
+              }}>
+                {feature.title}
+              </h3>
+              <p style={{ 
+                color: '#6c757d',
+                margin: 0,
+                lineHeight: 1.5
+              }}>
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        
+        <div style={{ 
+          marginTop: '40px',
+          padding: '25px',
+          backgroundColor: '#e8f4fd',
+          borderRadius: '12px',
+          border: '2px solid #b8d4f0',
+          textAlign: 'center'
+        }}>
+          <h3 style={{ color: '#2980b9', margin: '0 0 15px 0' }}>
+            🚀 Starter Sie durch
+          </h3>
+          <p style={{ color: '#2c3e50', margin: 0 }}>
+            Erstellen Sie Ihren ersten optimierten Schichtplan in wenigen Minuten.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Features;

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(250px, 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/contexts/AuthContext.tsx

@@ -20,7 +20,7 @@ interface AuthContextType {
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
-const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3002/api';
+const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || '/api';
 
 interface AuthProviderProps {
   children: ReactNode;

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/index.css

@@ -1,3 +1,14 @@
+/* Reset and base styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  min-height: 100vh;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

frontend/src/index.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Auth/Login.tsx

@@ -1,18 +1,21 @@
-// frontend/src/pages/Auth/Login.tsx - KORRIGIERT
-import React, { useState, useEffect } from 'react';
+// frontend/src/pages/Auth/Login.tsx - UPDATED PASSWORD SECTION
+import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { useNotification } from '../../contexts/NotificationContext';
-import { employeeService } from '../../services/employeeService';
 
 const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const { login, user } = useAuth();
   const { showNotification } = useNotification();
   const navigate = useNavigate();
   
+  const holdTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     if (user) {
       console.log('✅ User already logged in, redirecting to dashboard');
@@ -20,6 +23,47 @@ const Login: React.FC = () => {
     }
   }, [user, navigate]);
 
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseDown = () => {
+    // Start timeout to show password after a brief delay (300ms)
+    holdTimeoutRef.current = setTimeout(() => {
+      setShowPassword(true);
+    }, 300);
+  };
+
+  const handleMouseUp = () => {
+    // Clear the timeout if user releases before delay completes
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = null;
+    }
+    // Always hide password on release
+    setShowPassword(false);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    e.preventDefault(); // Prevent context menu on mobile
+    handleMouseDown();
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    e.preventDefault();
+    handleMouseUp();
+  };
+
+  // Prevent context menu on long press
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -35,7 +79,6 @@ const Login: React.FC = () => {
         message: `Willkommen zurück!`
       });
       
-      // Navigiere zur Startseite
       navigate('/');
       
     } catch (error: any) {
@@ -50,7 +93,6 @@ const Login: React.FC = () => {
     }
   };
 
-  // Wenn bereits eingeloggt, zeige Ladeanzeige
   if (user) {
     return (
       <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -77,7 +119,7 @@ const Login: React.FC = () => {
       }}>
         <h2 style={{ textAlign: 'center', marginBottom: '30px' }}>Anmeldung</h2>
         
-        <div style={{ marginBottom: '20px' }}>
+        <div style={{ marginBottom: '20px', width: '100%' }}>
           <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
             E-Mail
           </label>
@@ -97,24 +139,57 @@ const Login: React.FC = () => {
           />
         </div>
 
-        <div style={{ marginBottom: '30px' }}>
+        <div style={{ marginBottom: '30px', width: '100%' }}>
           <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
             Passwort
           </label>
-          <input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-            style={{
-              width: '100%',
-              padding: '10px',
-              border: '1px solid #ddd',
-              borderRadius: '4px',
-              fontSize: '16px'
-            }}
-            placeholder="Ihr Passwort"
-          />
+          <div style={{ position: 'relative' }}>
+            <input
+              ref={passwordInputRef}
+              type={showPassword ? 'text' : 'password'}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              style={{
+                width: '100%',
+                padding: '10px',
+                paddingRight: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '16px'
+              }}
+              placeholder="Ihr Passwort"
+            />
+            <button
+              type="button"
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp} // Handle mouse leaving while pressed
+              onTouchStart={handleTouchStart}
+              onTouchEnd={handleTouchEnd}
+              onTouchCancel={handleTouchEnd} // Handle touch cancellation
+              onContextMenu={handleContextMenu}
+              style={{
+                position: 'absolute',
+                right: '10px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: '1px',
+                borderRadius: '1px',
+                backgroundColor: showPassword ? '#e0e0e0' : 'transparent',
+                transition: 'background-color 0.2s',
+                userSelect: 'none',
+                WebkitUserSelect: 'none',
+                touchAction: 'manipulation'
+              }}
+              title="Gedrückt halten zum Anzeigen des Passworts"
+            >
+              {showPassword ? '👁' : '👁'}
+            </button>
+          </div>
         </div>
 
         <button
@@ -123,7 +198,7 @@ const Login: React.FC = () => {
           style={{
             width: '100%',
             padding: '12px',
-            backgroundColor: loading ? '#ccc' : '#007bff',
+            backgroundColor: loading ? '#ccc' : '#51258f',
             color: 'white',
             border: 'none',
             borderRadius: '4px',

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

@@ -1,81 +1,46 @@
 // frontend/src/pages/Help/Help.tsx
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 const Help: React.FC = () => {
-  const [currentStage, setCurrentStage] = useState(0);
-  const [isAnimating, setIsAnimating] = useState(false);
+  const businessRules = [
+    { rule: "Mitarbeiter werden nur Schichten zugewiesen, für die sie sich eingetragen haben", critical: true },
+    { rule: "Maximal 1 Schicht pro Tag pro Mitarbeiter", critical: true },
+    { rule: "Schichten haben Mindest- und Maximalkapazitäten", critical: true },
+    { rule: "Trainees benötigen erfahrene Begleitung in jeder Schicht", critical: true },
+    { rule: "Mitarbeiter, die nicht alleine arbeiten können, müssen Begleitung haben", critical: true },
+    { rule: "Vertragslimits: Klein=1 Schicht/Woche, Groß=2 Schichten/Woche", critical: true },
+    { rule: "Manager werden automatisch ihren bevorzugten Schichten zugewiesen", critical: false }
+  ];
 
-  const algorithmStages = [
+  const schedulingStages = [
     {
-      title: "📊 Phase A: Reguläre Mitarbeiterplanung",
-      description: "Zuweisung aller Mitarbeiter außer Manager",
-      steps: [
-        "Grundabdeckung: Mindestens 1 Mitarbeiter pro Schicht",
-        "Erfahrene Mitarbeiter werden bevorzugt",
-        "Verhindere 'Neu allein' Situationen",
-        "Fülle Schichten bis zur Zielbesetzung"
-      ],
-      color: "#3498db"
+      title: "1. Verfügbarkeitsprüfung",
+      description: "Nur Mitarbeiter, die sich für Schichten eingetragen haben (Verfügbarkeit 1 oder 2), werden berücksichtigt."
     },
     {
-      title: "👑 Phase B: Manager-Einfügung",
-      description: "Manager wird seinen bevorzugten Schichten zugewiesen",
-      steps: [
-        "Manager wird festen Schichten zugewiesen",
-        "Erfahrene Mitarbeiter werden zu Manager-Schichten hinzugefügt",
-        "Bei Problemen: Austausch oder Bewegung von Mitarbeitern",
-        "Fallback: Nicht-erfahrene als Backup"
-      ],
-      color: "#e74c3c"
+      title: "2. Modellaufbau",
+      description: "Das System erstellt ein mathematisches Modell mit allen Variablen und Constraints."
     },
     {
-      title: "🔧 Phase C: Reparatur & Validierung",
-      description: "Probleme erkennen und automatisch beheben",
-      steps: [
-        "Überbesetzte erfahrene Mitarbeiter identifizieren",
-        "Mitarbeiter-Pool für Neuverteilung erstellen",
-        "Priorisierte Zuweisung zu Problem-Schichten",
-        "Finale Validierung aller Geschäftsregeln"
-      ],
-      color: "#2ecc71"
+      title: "3. CP-SAT Optimierung", 
+      description: "Google's Constraint Programming Solver findet die beste Zuordnung unter allen Regeln."
     },
     {
-      title: "✅ Finale Prüfung",
-      description: "Zusammenfassung und Freigabe",
-      steps: [
-        "Reparatur-Bericht generieren",
-        "Kritische vs. nicht-kritische Probleme klassifizieren",
-        "Veröffentlichungsstatus bestimmen",
-        "Benutzerfreundliche Zusammenfassung anzeigen"
-      ],
-      color: "#f39c12"
+      title: "4. Manager-Zuweisung",
+      description: "Manager werden automatisch ihren Wunschschichten (Verfügbarkeit 1) zugeordnet."
+    },
+    {
+      title: "5. Validierung",
+      description: "Die Lösung wird auf Regelverletzungen geprüft und ein Bericht generiert."
     }
   ];
 
-  const businessRules = [
-    { rule: "Manager darf nicht allein arbeiten", critical: true },
-    { rule: "Erfahrene mit canWorkAlone: false dürfen nicht allein arbeiten", critical: true },
-    { rule: "Keine leeren Schichten", critical: true },
-    { rule: "Keine 'Neu allein' Situationen", critical: true },
-    { rule: "Manager sollte mit erfahrenem Mitarbeiter arbeiten", critical: false },
-    { rule: "Vertragslimits einhalten", critical: true },
-    { rule: "Nicht zu viele erfahrene Mitarbeiter in einer Schicht", critical: false }
+  const preferenceLevels = [
+    { level: 1, label: "Bevorzugt", description: "Mitarbeiter möchte diese Schicht unbedingt arbeiten", color: "#27ae60" },
+    { level: 2, label: "Verfügbar", description: "Mitarbeiter ist verfügbar für diese Schicht", color: "#f39c12" },
+    { level: 3, label: "Nicht verfügbar", description: "Mitarbeiter kann diese Schicht nicht arbeiten", color: "#e74c3c" }
   ];
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (isAnimating) {
-        setCurrentStage((prev) => (prev + 1) % algorithmStages.length);
-      }
-    }, 3000);
-
-    return () => clearInterval(interval);
-  }, [isAnimating]);
-
-  const toggleAnimation = () => {
-    setIsAnimating(!isAnimating);
-  };
-
   return (
     <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
       <h1>❓ Hilfe & Support - Scheduling Algorithmus</h1>
@@ -89,7 +54,7 @@ const Help: React.FC = () => {
         boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
         border: '1px solid #e0e0e0'
       }}>
-        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>📋 Validierungs Regeln</h2>
+        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>📋 Geschäftsregeln</h2>
         <div style={{ display: 'grid', gap: '10px' }}>
           {businessRules.map((rule, index) => (
             <div
@@ -120,14 +85,14 @@ const Help: React.FC = () => {
                 color: rule.critical ? '#e74c3c' : '#f39c12',
                 fontWeight: 'bold'
               }}>
-                {rule.critical ? 'KRITISCH' : 'WARNUNG'}
+                {rule.critical ? 'HART' : 'WEICH'}
               </span>
             </div>
           ))}
         </div>
       </div>
 
-      {/* Algorithm Explanation */}
+      {/* Scheduling Process */}
       <div style={{ 
         backgroundColor: 'white', 
         borderRadius: '12px', 
@@ -136,45 +101,125 @@ const Help: React.FC = () => {
         boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
         border: '1px solid #e0e0e0'
       }}>
-        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>🎯 Wie der Algorithmus funktioniert</h2>
+        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>⚙️ Scheduling-Prozess</h2>
         
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px' }}>
+        <div style={{ display: 'grid', gap: '15px' }}>
+          {schedulingStages.map((stage, index) => (
+            <div key={index} style={{
+              padding: '20px',
+              backgroundColor: '#f8f9fa',
+              borderRadius: '8px',
+              border: '2px solid #e9ecef',
+              display: 'flex',
+              alignItems: 'flex-start'
+            }}>
+              <div style={{
+                backgroundColor: '#3498db',
+                color: 'white',
+                borderRadius: '50%',
+                width: '30px',
+                height: '30px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                marginRight: '15px',
+                flexShrink: 0
+              }}>
+                {index + 1}
+              </div>
+              <div>
+                <h4 style={{ color: '#2c3e50', margin: '0 0 8px 0' }}>{stage.title}</h4>
+                <p style={{ color: '#6c757d', margin: 0 }}>{stage.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Preference Levels */}
+      <div style={{ 
+        backgroundColor: 'white', 
+        borderRadius: '12px', 
+        padding: '30px', 
+        marginTop: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        border: '1px solid #e0e0e0'
+      }}>
+        <h2 style={{ color: '#2c3e50', marginBottom: '20px' }}>🎯 Verfügbarkeits-Level</h2>
+        
+        <div style={{ display: 'grid', gap: '12px' }}>
+          {preferenceLevels.map((pref) => (
+            <div key={pref.level} style={{
+              padding: '15px',
+              backgroundColor: `${pref.color}15`,
+              border: `2px solid ${pref.color}`,
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center'
+            }}>
+              <div style={{
+                backgroundColor: pref.color,
+                color: 'white',
+                borderRadius: '6px',
+                padding: '8px 12px',
+                fontWeight: 'bold',
+                marginRight: '15px',
+                minWidth: '120px',
+                textAlign: 'center'
+              }}>
+                Level {pref.level}: {pref.label}
+              </div>
+              <span style={{ color: '#2c3e50' }}>{pref.description}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div style={{ 
+        marginTop: '25px',
+        padding: '25px',
+        backgroundColor: '#e8f4fd',
+        borderRadius: '12px',
+        border: '2px solid #b8d4f0'
+      }}>
+        <h3 style={{ color: '#2980b9', marginTop: 0 }}>💡 Best Practices für erfolgreiches Scheduling</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '15px', marginTop: '15px' }}>
           <div>
-            <h4 style={{ color: '#3498db' }}>🏗️ Phasen-basierter Ansatz</h4>
-            <p>Der Algorithmus arbeitet in klar definierten Phasen, um komplexe Probleme schrittweise zu lösen und Stabilität zu gewährleisten.</p>
+            <h4 style={{ color: '#2980b9' }}>Vor dem Scheduling</h4>
+            <ul style={{ margin: 0, paddingLeft: '20px', color: '#2c3e50' }}>
+              <li>Stellen Sie sicher, dass alle Mitarbeiter ihre Verfügbarkeit eingetragen haben</li>
+              <li>Überprüfen Sie die Mitarbeiterprofile (Trainee/Erfahren, Alleinarbeit möglich)</li>
+              <li>Bestätigen Sie die Vertragstypen und Schichtanforderungen</li>
+            </ul>
+          </div>
+          <div>
+            <h4 style={{ color: '#2980b9' }}>Nach dem Scheduling</h4>
+            <ul style={{ margin: 0, paddingLeft: '20px', color: '#2c3e50' }}>
+              <li>Prüfen Sie den Lösungsbericht auf Verletzungen</li>
+              <li>Kontrollieren Sie unterbesetzte Schichten</li>
+              <li>Validieren Sie Trainee-Betreuung und Alleinarbeits-Regeln</li>
+            </ul>
           </div>
         </div>
       </div>
 
+      {/* Technical Info */}
       <div style={{ 
-          marginTop: '25px',
-          padding: '20px',
-          backgroundColor: '#e8f4fd',
-          borderRadius: '8px',
-          border: '1px solid #b8d4f0'
-        }}>
-          <h4 style={{ color: '#2980b9', marginTop: 0 }}>💡 Tipps für beste Ergebnisse</h4>
-          <ul style={{ margin: 0, paddingLeft: '20px' }}>
-            <li>Stellen Sie sicher, dass alle Mitarbeiter ihre Verfügbarkeit eingetragen haben</li>
-            <li>Überprüfen Sie die Vertragstypen (klein = 1 Schicht/Woche, groß = 2 Schichten/Woche)</li>
-            <li>Markieren Sie erfahrene Mitarbeiter, die alleine arbeiten können</li>
-            <li>Planen Sie Manager-Verfügbarkeit im Voraus</li>
-          </ul>
-        </div>
-
-      <style>{`
-        @keyframes pulse {
-          0% { transform: scale(1); }
-          50% { transform: scale(1.02); }
-          100% { transform: scale(1); }
-        }
-        
-        @keyframes glow {
-          0% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
-          50% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.8); }
-          100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
-        }
-      `}</style>
+        marginTop: '25px',
+        padding: '20px',
+        backgroundColor: '#fff3cd',
+        borderRadius: '8px',
+        border: '1px solid #ffeaa7'
+      }}>
+        <h4 style={{ color: '#856404', marginTop: 0 }}>🔧 Technische Informationen</h4>
+        <p style={{ color: '#856404', margin: 0 }}>
+          <strong>Lösungsalgorithmus:</strong> Google OR-Tools CP-SAT Solver • 
+          <strong> Fallback:</strong> TypeScript-basierter Solver • 
+          <strong> Maximale Laufzeit:</strong> 105 Sekunden
+        </p>
+      </div>
     </div>
   );
 };

frontend/src/pages/Settings/Settings.tsx

@@ -1,5 +1,5 @@
-// frontend/src/pages/Settings/Settings.tsx
-import React, { useState, useEffect } from 'react';
+// frontend/src/pages/Settings/Settings.tsx - UPDATED WITH NEW STYLES
+import React, { useState, useEffect, useRef } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 import { employeeService } from '../../services/employeeService';
 import { useNotification } from '../../contexts/NotificationContext';
@@ -27,6 +27,16 @@ const Settings: React.FC = () => {
     confirmPassword: ''
   });
 
+  // Password visibility states
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  // Refs for timeout management
+  const currentPasswordTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const newPasswordTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const confirmPasswordTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
   useEffect(() => {
     if (currentUser) {
       setProfileForm({
@@ -36,6 +46,17 @@ const Settings: React.FC = () => {
     }
   }, [currentUser]);
 
+  // Cleanup timeouts on unmount
+  useEffect(() => {
+    return () => {
+      [currentPasswordTimeoutRef, newPasswordTimeoutRef, confirmPasswordTimeoutRef].forEach(ref => {
+        if (ref.current) {
+          clearTimeout(ref.current);
+        }
+      });
+    };
+  }, []);
+
   const handleProfileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setProfileForm(prev => ({
@@ -52,6 +73,67 @@ const Settings: React.FC = () => {
     }));
   };
 
+  // Password visibility handlers for current password
+  const handleCurrentPasswordMouseDown = () => {
+    currentPasswordTimeoutRef.current = setTimeout(() => {
+      setShowCurrentPassword(true);
+    }, 300);
+  };
+
+  const handleCurrentPasswordMouseUp = () => {
+    if (currentPasswordTimeoutRef.current) {
+      clearTimeout(currentPasswordTimeoutRef.current);
+      currentPasswordTimeoutRef.current = null;
+    }
+    setShowCurrentPassword(false);
+  };
+
+  // Password visibility handlers for new password
+  const handleNewPasswordMouseDown = () => {
+    newPasswordTimeoutRef.current = setTimeout(() => {
+      setShowNewPassword(true);
+    }, 300);
+  };
+
+  const handleNewPasswordMouseUp = () => {
+    if (newPasswordTimeoutRef.current) {
+      clearTimeout(newPasswordTimeoutRef.current);
+      newPasswordTimeoutRef.current = null;
+    }
+    setShowNewPassword(false);
+  };
+
+  // Password visibility handlers for confirm password
+  const handleConfirmPasswordMouseDown = () => {
+    confirmPasswordTimeoutRef.current = setTimeout(() => {
+      setShowConfirmPassword(true);
+    }, 300);
+  };
+
+  const handleConfirmPasswordMouseUp = () => {
+    if (confirmPasswordTimeoutRef.current) {
+      clearTimeout(confirmPasswordTimeoutRef.current);
+      confirmPasswordTimeoutRef.current = null;
+    }
+    setShowConfirmPassword(false);
+  };
+
+  // Touch event handlers
+  const handleTouchStart = (setter: () => void) => (e: React.TouchEvent) => {
+    e.preventDefault();
+    setter();
+  };
+
+  const handleTouchEnd = (cleanup: () => void) => (e: React.TouchEvent) => {
+    e.preventDefault();
+    cleanup();
+  };
+
+  // Prevent context menu
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+  };
+
   const handleProfileUpdate = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!currentUser) return;
@@ -180,11 +262,6 @@ const Settings: React.FC = () => {
     );
   }
 
-  // Get full name for display
-  const getFullName = () => {
-    return `${currentUser.firstname || ''} ${currentUser.lastname || ''}`.trim();
-  };
-
   return (
     <div style={styles.container}>
       {/* Left Sidebar with Tabs */}
@@ -443,77 +520,137 @@ const Settings: React.FC = () => {
             
             <form onSubmit={handlePasswordUpdate} style={{ marginTop: '2rem' }}>
               <div style={styles.formGridCompact}>
+                {/* Current Password Field */}
                 <div style={styles.field}>
                   <label style={styles.fieldLabel}>
                     Aktuelles Passwort *
                   </label>
-                  <input
-                    type="password"
-                    name="currentPassword"
-                    value={passwordForm.currentPassword}
-                    onChange={handlePasswordChange}
-                    required
-                    style={styles.fieldInput}
-                    placeholder="Aktuelles Passwort"
-                    onFocus={(e) => {
-                      e.target.style.borderColor = '#1a1325';
-                      e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
-                    }}
-                    onBlur={(e) => {
-                      e.target.style.borderColor = '#e8e8e8';
-                      e.target.style.boxShadow = 'none';
-                    }}
-                  />
+                  <div style={styles.fieldInputContainer}>
+                    <input
+                      type={showCurrentPassword ? 'text' : 'password'}
+                      name="currentPassword"
+                      value={passwordForm.currentPassword}
+                      onChange={handlePasswordChange}
+                      required
+                      style={styles.fieldInputWithIcon}
+                      placeholder="Aktuelles Passwort"
+                      onFocus={(e) => {
+                        e.target.style.borderColor = '#1a1325';
+                        e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
+                      }}
+                      onBlur={(e) => {
+                        e.target.style.borderColor = '#e8e8e8';
+                        e.target.style.boxShadow = 'none';
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onMouseDown={handleCurrentPasswordMouseDown}
+                      onMouseUp={handleCurrentPasswordMouseUp}
+                      onMouseLeave={handleCurrentPasswordMouseUp}
+                      onTouchStart={handleTouchStart(handleCurrentPasswordMouseDown)}
+                      onTouchEnd={handleTouchEnd(handleCurrentPasswordMouseUp)}
+                      onTouchCancel={handleTouchEnd(handleCurrentPasswordMouseUp)}
+                      onContextMenu={handleContextMenu}
+                      style={{
+                        ...styles.passwordToggleButton,
+                        backgroundColor: showCurrentPassword ? 'rgba(26, 19, 37, 0.1)' : 'transparent'
+                      }}
+                      title="Gedrückt halten zum Anzeigen des Passworts"
+                    >
+                      {showCurrentPassword ? '👁' : '👁'}
+                    </button>
+                  </div>
                 </div>
 
+                {/* New Password Field */}
                 <div style={styles.field}>
                   <label style={styles.fieldLabel}>
                     Neues Passwort *
                   </label>
-                  <input
-                    type="password"
-                    name="newPassword"
-                    value={passwordForm.newPassword}
-                    onChange={handlePasswordChange}
-                    required
-                    minLength={6}
-                    style={styles.fieldInput}
-                    placeholder="Mindestens 6 Zeichen"
-                    onFocus={(e) => {
-                      e.target.style.borderColor = '#1a1325';
-                      e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
-                    }}
-                    onBlur={(e) => {
-                      e.target.style.borderColor = '#e8e8e8';
-                      e.target.style.boxShadow = 'none';
-                    }}
-                  />
+                  <div style={styles.fieldInputContainer}>
+                    <input
+                      type={showNewPassword ? 'text' : 'password'}
+                      name="newPassword"
+                      value={passwordForm.newPassword}
+                      onChange={handlePasswordChange}
+                      required
+                      minLength={6}
+                      style={styles.fieldInputWithIcon}
+                      placeholder="Mindestens 6 Zeichen"
+                      onFocus={(e) => {
+                        e.target.style.borderColor = '#1a1325';
+                        e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
+                      }}
+                      onBlur={(e) => {
+                        e.target.style.borderColor = '#e8e8e8';
+                        e.target.style.boxShadow = 'none';
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onMouseDown={handleNewPasswordMouseDown}
+                      onMouseUp={handleNewPasswordMouseUp}
+                      onMouseLeave={handleNewPasswordMouseUp}
+                      onTouchStart={handleTouchStart(handleNewPasswordMouseDown)}
+                      onTouchEnd={handleTouchEnd(handleNewPasswordMouseUp)}
+                      onTouchCancel={handleTouchEnd(handleNewPasswordMouseUp)}
+                      onContextMenu={handleContextMenu}
+                      style={{
+                        ...styles.passwordToggleButton,
+                        backgroundColor: showNewPassword ? 'rgba(26, 19, 37, 0.1)' : 'transparent'
+                      }}
+                      title="Gedrückt halten zum Anzeigen des Passworts"
+                    >
+                      {showNewPassword ? '👁' : '👁'}
+                    </button>
+                  </div>
                   <div style={styles.fieldHint}>
                     Das Passwort muss mindestens 6 Zeichen lang sein.
                   </div>
                 </div>
 
+                {/* Confirm Password Field */}
                 <div style={styles.field}>
                   <label style={styles.fieldLabel}>
                     Neues Passwort bestätigen *
                   </label>
-                  <input
-                    type="password"
-                    name="confirmPassword"
-                    value={passwordForm.confirmPassword}
-                    onChange={handlePasswordChange}
-                    required
-                    style={styles.fieldInput}
-                    placeholder="Passwort wiederholen"
-                    onFocus={(e) => {
-                      e.target.style.borderColor = '#1a1325';
-                      e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
-                    }}
-                    onBlur={(e) => {
-                      e.target.style.borderColor = '#e8e8e8';
-                      e.target.style.boxShadow = 'none';
-                    }}
-                  />
+                  <div style={styles.fieldInputContainer}>
+                    <input
+                      type={showConfirmPassword ? 'text' : 'password'}
+                      name="confirmPassword"
+                      value={passwordForm.confirmPassword}
+                      onChange={handlePasswordChange}
+                      required
+                      style={styles.fieldInputWithIcon}
+                      placeholder="Passwort wiederholen"
+                      onFocus={(e) => {
+                        e.target.style.borderColor = '#1a1325';
+                        e.target.style.boxShadow = '0 0 0 3px rgba(26, 19, 37, 0.1)';
+                      }}
+                      onBlur={(e) => {
+                        e.target.style.borderColor = '#e8e8e8';
+                        e.target.style.boxShadow = 'none';
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onMouseDown={handleConfirmPasswordMouseDown}
+                      onMouseUp={handleConfirmPasswordMouseUp}
+                      onMouseLeave={handleConfirmPasswordMouseUp}
+                      onTouchStart={handleTouchStart(handleConfirmPasswordMouseDown)}
+                      onTouchEnd={handleTouchEnd(handleConfirmPasswordMouseUp)}
+                      onTouchCancel={handleTouchEnd(handleConfirmPasswordMouseUp)}
+                      onContextMenu={handleContextMenu}
+                      style={{
+                        ...styles.passwordToggleButton,
+                        backgroundColor: showConfirmPassword ? 'rgba(26, 19, 37, 0.1)' : 'transparent'
+                      }}
+                      title="Gedrückt halten zum Anzeigen des Passworts"
+                    >
+                      {showConfirmPassword ? '👁' : '👁'}
+                    </button>
+                  </div>
                 </div>
               </div>
 

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

@@ -1,4 +1,5 @@
-  export const styles = {
+// frontend/src/pages/Settings/type/SettingsType.tsx - CORRECTED
+export const styles = {
     container: {
       display: 'flex',
       minHeight: 'calc(100vh - 120px)',
@@ -121,11 +122,17 @@
       display: 'flex',
       flexDirection: 'column' as const,
       gap: '0.5rem',
+      width: '100%',
     },
     fieldLabel: {
       fontSize: '0.9rem',
       fontWeight: 600,
       color: '#161718',
+      width: '100%',
+    },
+    fieldInputContainer: {
+      position: 'relative' as const,
+      width: '100%',
     },
     fieldInput: {
       padding: '0.875rem 1rem',
@@ -135,6 +142,20 @@
       background: '#FBFAF6',
       transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
       color: '#161718',
+      width: '100%',
+      boxSizing: 'border-box' as const,
+    },
+    fieldInputWithIcon: {
+      padding: '0.875rem 1rem',
+      border: '1.5px solid #e8e8e8',
+      borderRadius: '8px',
+      fontSize: '0.95rem',
+      background: '#FBFAF6',
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      color: '#161718',
+      width: '100%',
+      paddingRight: '40px',
+      boxSizing: 'border-box' as const,
     },
     fieldInputDisabled: {
       padding: '0.875rem 1rem',
@@ -144,11 +165,29 @@
       background: 'rgba(26, 19, 37, 0.05)',
       color: '#666',
       cursor: 'not-allowed',
+      width: '100%',
+      boxSizing: 'border-box' as const,
     },
     fieldHint: {
       fontSize: '0.8rem',
       color: '#888',
       marginTop: '0.25rem',
+      width: '100%',
+    },
+    passwordToggleButton: {
+      position: 'absolute' as const,
+      right: '10px',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '5px',
+      borderRadius: '4px',
+      transition: 'background-color 0.2s',
+      userSelect: 'none' as const,
+      WebkitUserSelect: 'none' as const,
+      touchAction: 'manipulation' as const,
     },
     actions: {
       display: 'flex',

frontend/src/pages/Setup/Setup.tsx

@@ -2,6 +2,8 @@
 import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 
+const API_BASE_URL = '/api';
+
 const Setup: React.FC = () => {
   const [step, setStep] = useState(1);
   const [formData, setFormData] = useState({
@@ -73,7 +75,7 @@ const Setup: React.FC = () => {
 
       console.log('🚀 Sending setup request...', payload);
 
-      const response = await fetch('http://localhost:3002/api/setup/admin', {
+      const response = await fetch(`${API_BASE_URL}/setup/admin`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -331,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/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

frontend/src/services/authService.ts

@@ -1,6 +1,6 @@
 // frontend/src/services/authService.ts
 import { Employee } from '../models/Employee';
-const API_BASE = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3002/api';
+const API_BASE = process.env.REACT_APP_API_BASE_URL || '/api';
 
 export interface LoginRequest {
   email: string;

frontend/src/services/employeeService.ts

@@ -1,7 +1,7 @@
 // frontend/src/services/employeeService.ts
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest, EmployeeAvailability } from '../models/Employee';
 
-const API_BASE_URL = 'http://localhost:3002/api';
+const API_BASE_URL = '/api';
 
 const getAuthHeaders = () => {
   const token = localStorage.getItem('token');

frontend/src/services/shiftAssignmentService.ts

@@ -4,9 +4,7 @@ import { Employee, EmployeeAvailability } from '../models/Employee';
 import { authService } from './authService';
 import { AssignmentResult, ScheduleRequest } from '../models/scheduling';
 
-const API_BASE_URL = 'http://localhost:3002/api';
-
-
+const API_BASE_URL = '/api';
 
 // Helper function to get auth headers
 const getAuthHeaders = () => {

frontend/src/services/shiftPlanService.ts

@@ -1,9 +1,9 @@
 // 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 = 'http://localhost:3002/api/shift-plans';
+const API_BASE_URL = '/api/shift-plans';
 
 // Helper function to get auth headers
 const getAuthHeaders = () => {
@@ -25,7 +25,7 @@ const handleResponse = async (response: Response) => {
 
 export const shiftPlanService = {
   async getShiftPlans(): Promise<ShiftPlan[]> {
-    const response = await fetch(API_BASE, {
+    const response = await fetch(API_BASE_URL, {
       headers: {
         'Content-Type': 'application/json',
         ...authService.getAuthHeaders()
@@ -50,7 +50,7 @@ export const shiftPlanService = {
   },
 
   async getShiftPlan(id: string): Promise<ShiftPlan> {
-    const response = await fetch(`${API_BASE}/${id}`, {
+    const response = await fetch(`${API_BASE_URL}/${id}`, {
       headers: {
         'Content-Type': 'application/json',
         ...authService.getAuthHeaders()
@@ -69,7 +69,7 @@ export const shiftPlanService = {
   },
 
   async createShiftPlan(plan: CreateShiftPlanRequest): Promise<ShiftPlan> {
-    const response = await fetch(API_BASE, {
+    const response = await fetch(API_BASE_URL, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -90,7 +90,7 @@ export const shiftPlanService = {
   },
 
   async updateShiftPlan(id: string, plan: Partial<ShiftPlan>): Promise<ShiftPlan> {
-    const response = await fetch(`${API_BASE}/${id}`, {
+    const response = await fetch(`${API_BASE_URL}/${id}`, {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
@@ -111,7 +111,7 @@ export const shiftPlanService = {
   },
 
   async deleteShiftPlan(id: string): Promise<void> {
-    const response = await fetch(`${API_BASE}/${id}`, {
+    const response = await fetch(`${API_BASE_URL}/${id}`, {
       method: 'DELETE',
       headers: {
         'Content-Type': 'application/json',
@@ -130,7 +130,7 @@ export const shiftPlanService = {
 
   // Get specific template or plan
   getTemplate: async (id: string): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE}/${id}`, {
+    const response = await fetch(`${API_BASE_URL}/${id}`, {
       headers: getAuthHeaders()
     });
     return handleResponse(response);
@@ -142,7 +142,7 @@ export const shiftPlanService = {
         console.log('🔄 Attempting to regenerate scheduled shifts...');
         
         // You'll need to add this API endpoint to your backend
-        const response = await fetch(`${API_BASE}/${planId}/regenerate-shifts`, {
+        const response = await fetch(`${API_BASE_URL}/${planId}/regenerate-shifts`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -162,7 +162,7 @@ export const shiftPlanService = {
 
   // Create new plan
   createPlan: async (data: CreateShiftPlanRequest): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE}`, {
+    const response = await fetch(`${API_BASE_URL}`, {
       method: 'POST',
       headers: getAuthHeaders(),
       body: JSON.stringify(data),
@@ -177,7 +177,7 @@ export const shiftPlanService = {
     endDate: string;
     isTemplate?: boolean;
   }): Promise<ShiftPlan> => {
-    const response = await fetch(`${API_BASE}/from-preset`, {
+    const response = await fetch(`${API_BASE_URL}/from-preset`, {
       method: 'POST',
       headers: getAuthHeaders(),
       body: JSON.stringify(data),
@@ -204,7 +204,7 @@ export const shiftPlanService = {
     try {
       console.log('🔄 Clearing assignments for plan:', planId);
       
-      const response = await fetch(`${API_BASE}/${planId}/clear-assignments`, {
+      const response = await fetch(`${API_BASE_URL}/${planId}/clear-assignments`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

frontend/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

frontend/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+// Define types for environment variables
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  readonly ENABLE_PRO: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

frontend/tsconfig.json

@@ -1,28 +1,38 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    //"ignoreDeprecations": "6.0",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "ignoreDeprecations": "6.0",
     "jsx": "react-jsx",
-    "downlevelIteration": true
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping (modern approach) */
+    "paths": {
+      "@/*": ["./src/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/pages/*": ["./src/pages/*"],
+      "@/contexts/*": ["./src/contexts/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/services/*": ["./src/services/*"],
+      "@/models/*": ["./src/models/*"],
+      "@/design/*": ["./src/design/*"]
+    }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,203 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+// 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.VITE_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: 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',
+      // Security: No source maps in production
+      sourcemap: isDevelopment ? 'inline' : false,
+      // Generate deterministic hashes for better caching and security
+      assetsDir: 'assets',
+      rollupOptions: {
+        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'),
+        '@/components': resolve(__dirname, './src/components'),
+        '@/pages': resolve(__dirname, './src/pages'),
+        '@/contexts': resolve(__dirname, './src/contexts'),
+        '@/models': resolve(__dirname, './src/models'),
+        '@/utils': resolve(__dirname, './src/utils'),
+        '@/services': resolve(__dirname, './src/services'),
+        '@/design': resolve(__dirname, './src/design')
+      }
+    },
+    
+    // ✅ 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]'
+      }
+    }
+  }
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "schichtenplaner-monorepo",
+  "private": true,
+  "workspaces": [
+    "frontend",
+    "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"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  }
+}

tsconfig.base.json

@@ -0,0 +1,52 @@
+{
+  "compilerOptions": {
+    /* LANGUAGE AND ENVIRONMENT */
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    
+    /* MODULES */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    
+    /* TYPE CHECKING */
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    
+    /* EMIT */
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "removeComments": false,
+    
+    /* INTEROP CONSTRAINTS */
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    
+    /* COMPATIBILITY */
+    "isolatedModules": true,
+
+    "types": ["vite/client", "node"]
+  },
+  "include": [
+    "/premium/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+    "coverage",
+    "*.test.*",
+    "*.spec.*"
+  ]
+}