added license

.github/workflows/docker.yml

@@ -0,0 +1,170 @@
+name: CI/CD Pipeline
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ "development", "main", "staging" ]
+    tags: [ "v*.*.*" ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  set-tag:
+    name: Set Tag Name
+    runs-on: ubuntu-latest
+    outputs:
+      tag_name: ${{ steps.set_tag.outputs.tag_name }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # Fetch all history for tags
+
+      - name: Determine next semantic version tag
+        id: set_tag
+        run: |
+          git fetch --tags
+
+          # Find latest tag matching vX.Y.Z
+          latest_tag=$(git tag --list 'v*.*.*' --sort=-v:refname | head -n 1)
+          if [[ -z "$latest_tag" ]]; then
+            major=0
+            minor=0
+            patch=0
+          else
+            version="${latest_tag#v}"
+            IFS='.' read -r major minor patch <<< "$version"
+          fi
+
+          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
+            minor=$((minor + 1))
+            patch=0
+          else
+            patch=$((patch + 1))
+          fi
+
+          new_tag="v${major}.${minor}.${patch}"
+          echo "tag_name=${new_tag}" >> $GITHUB_OUTPUT
+          echo "Next version tag: ${new_tag}"
+
+  test:
+    runs-on: ubuntu-latest
+    needs: set-tag
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        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)
+
+      - name: Run TypeScript check
+        working-directory: ./backend
+        run: npx tsc --noEmit
+
+      - 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
+            echo "⚠️  Jest not installed. Skipping tests."
+          fi
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.11'
+
+      - name: Install Python dependencies
+        run: pip install ortools
+
+      - name: Test Python integration
+        run: |
+          python -c "from ortools.sat.python import cp_model; print('OR-Tools available')"
+
+      - name: Display next version
+        run: |
+          echo "Next version will be: ${{ needs.set-tag.outputs.tag_name }}"
+
+  build-and-push:
+    needs: [set-tag, test]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push'
+    
+    permissions:
+      contents: write
+      packages: write
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        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 }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Create Git Tag
+        if: success()
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git tag ${{ needs.set-tag.outputs.tag_name }}
+          git push origin ${{ needs.set-tag.outputs.tag_name }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Display pushed images
+        run: |
+          echo "Docker images pushed successfully!"
+          echo "- Image: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
+          echo "- Tags: ${{ steps.meta.outputs.tags }}"
+          echo "- New version: ${{ needs.set-tag.outputs.tag_name }}"

.gitignore

@@ -1,4 +1,54 @@
 # Dependencies
+backend/node_modules/
+frontend/node_modules/
+
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Production
+/build
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+
+----
+# Dependencies
 node_modules/
 npm-debug.log*
 yarn-debug.log*
@@ -25,6 +75,9 @@ database/*.db-journal
 logs
 *.log
 
+# Privat
+backend/src/python-scripts/progress_data/*.json
+
 # Runtime data
 pids
 *.pid

Dockerfile

@@ -0,0 +1,90 @@
+# Multi-stage build for combined frontend + backend
+FROM node:20-bullseye AS backend-builder
+
+WORKDIR /app/backend
+
+# Install Python + OR-Tools
+RUN apt-get update && apt-get install -y python3 python3-pip build-essential \
+  && pip install --no-cache-dir ortools
+
+# Create symlink so python3 is callable as python
+RUN ln -sf /usr/bin/python3 /usr/bin/python
+
+# Copy backend files
+COPY backend/package*.json ./
+COPY backend/tsconfig.json ./
+
+# Install backend dependencies
+RUN npm ci
+
+# Copy backend source
+COPY backend/src/ ./src/
+
+# Build backend
+RUN npm run build
+
+# Copy database files manually
+RUN cp -r src/database/ dist/database/
+
+# 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
+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 frontend built files  
+COPY --from=frontend-builder /app/frontend/build/ ./frontend-build/
+
+# Copy PM2 configuration
+COPY ecosystem.config.cjs ./
+
+# 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 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:3002/api/health || exit 1
+
+CMD ["pm2-runtime", "ecosystem.config.cjs"]

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:
+📧 patrick@mahnke-hartmann.dev
+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/dockerfile

@@ -1,8 +0,0 @@
-# backend/Dockerfile
-FROM node:18-alpine
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci --only=production
-COPY . .
-EXPOSE 3002
-CMD ["node", "dist/server.js"]

backend/dockerfilexpython

@@ -1,61 +0,0 @@
-# Multi-stage Dockerfile for Node.js + Python application
-FROM node:20-alpine AS node-base
-
-# Install Python and build dependencies in Node stage
-RUN apk add --no-cache \
-    python3 \
-    py3-pip \
-    build-base \
-    python3-dev
-
-# Install Python dependencies
-COPY python-scripts/requirements.txt /tmp/requirements.txt
-RUN pip3 install --no-cache-dir -r /tmp/requirements.txt
-
-# Set working directory
-WORKDIR /app
-
-# Copy package files
-COPY package*.json ./
-
-# Install Node.js dependencies
-RUN npm ci --only=production
-
-# Build stage
-FROM node-base AS builder
-
-# Install all dependencies (including dev dependencies)
-RUN npm ci
-
-# Copy source code
-COPY . .
-
-# Build the application
-RUN npm run build
-
-# Production stage
-FROM node-base AS production
-
-# Copy built application from builder stage
-COPY --from=builder /app/dist ./dist
-COPY --from=builder /app/package*.json ./
-
-# Copy Python scripts
-COPY --from=builder /app/python-scripts ./python-scripts
-
-# Create non-root user
-RUN addgroup -g 1001 -S nodejs && \
-    adduser -S nextjs -u 1001
-
-# Change to non-root user
-USER nextjs
-
-# Expose port
-EXPOSE 3000
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-    CMD node dist/health-check.js
-
-# Start the application
-CMD ["npm", "start"]

backend/jest.config.js

@@ -0,0 +1,18 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src'],
+  testMatch: [
+    '**/__tests__/**/*.+(ts|tsx|js)',
+    '**/?(*.)+(spec|test).+(ts|tsx|js)'
+  ],
+  transform: {
+    '^.+\.(ts|tsx)$': 'ts-jest',
+  },
+  collectCoverageFrom: [
+    'src/**/*.{js,ts}',
+    '!src/server.ts',
+    '!src/**/*.d.ts'
+  ],
+};

backend/package.json

@@ -6,7 +6,11 @@
     "dev": "npm run build && npx tsx src/server.ts",
     "build": "tsc", 
     "start": "node dist/server.js",
-    "prestart": "npm run build"
+    "prestart": "npm run build",
+    "test": "jest",
+    "test:python": "python -c \"from ortools.sat.python import cp_model; print('OR-Tools OK')\"",
+    "docker:build": "docker build -t schichtplan-backend .",
+    "docker:run": "docker run -p 3001:3001 schichtplan-backend"
   },
   "dependencies": {
     "@types/bcrypt": "^6.0.0",
@@ -16,8 +20,7 @@
     "express": "^4.18.2",
     "jsonwebtoken": "^9.0.2",
     "sqlite3": "^5.1.6",
-    "uuid": "^9.0.0",
-    "worker_threads": "native"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",
@@ -25,6 +28,7 @@
     "@types/express": "^4.17.17",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/uuid": "^9.0.2",
+    "@types/jest": "^29.5.0",
     "ts-node": "^10.9.0",
     "typescript": "^5.0.0",
     "tsx": "^4.0.0"

backend/src/models/defaults/employeeDefaults.ts

@@ -102,7 +102,6 @@ export const AVAILABILITY_PREFERENCES = {
 } as const;
 
 // Default availability for new employees (all shifts unavailable as level 3)
-// UPDATED: Now uses shiftId instead of timeSlotId + dayOfWeek
 export function createDefaultAvailabilities(employeeId: string, planId: string, shiftIds: string[]): Omit<EmployeeAvailability, 'id'>[] {
   const availabilities: Omit<EmployeeAvailability, 'id'>[] = [];
   
@@ -120,7 +119,6 @@ export function createDefaultAvailabilities(employeeId: string, planId: string,
 }
 
 // Create complete manager availability for all days (default: only Mon-Tue available)
-// NOTE: This function might need revision based on new schema requirements
 export function createManagerDefaultSchedule(managerId: string, planId: string, timeSlotIds: string[]): Omit<ManagerAvailability, 'id'>[] {
   const assignments: Omit<ManagerAvailability, 'id'>[] = [];
   

backend/src/python-scripts/progress_data/run_20251021_111611_693047_success.json

@@ -1,32 +0,0 @@
-{
-  "timestamp": "2025-10-21T11:16:11.693081",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.0218085,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.00886988639831543,
-      "objective": 1050.0,
-      "bound": 2100.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.009304285049438477,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.0218085,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_111616_813035_success.json

@@ -1,38 +0,0 @@
-{
-  "timestamp": "2025-10-21T11:16:16.813066",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.0158702,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008541107177734375,
-      "objective": 1050.0,
-      "bound": 2000.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.00941777229309082,
-      "objective": 1250.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.009499549865722656,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 3
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.0158702,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_143406_393082_success.json

@@ -1,38 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:34:06.393151",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.046477700000000004,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.04335761070251465,
-      "objective": 1050.0,
-      "bound": 2100.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.04459857940673828,
-      "objective": 1250.0,
-      "bound": 1700.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.04603719711303711,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 3
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.046477700000000004,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_143710_936443_success.json

@@ -1,44 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:37:10.936471",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.022602300000000002,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008664369583129883,
-      "objective": 1050.0,
-      "bound": 1300.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.008890628814697266,
-      "objective": 1150.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.009119987487792969,
-      "objective": 1250.0,
-      "bound": 1300.0,
-      "solution_count": 3
-    },
-    {
-      "timestamp": 0.009514808654785156,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 4
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.022602300000000002,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_143804_517155_success.json

@@ -1,38 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:38:04.517181",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.017061200000000002,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008075952529907227,
-      "objective": 1000.0,
-      "bound": 1300.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.008380889892578125,
-      "objective": 1200.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.008938789367675781,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 3
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.017061200000000002,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_144000_354302_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:40:00.354343",
-  "success": false,
-  "metadata": {
-    "solveTime": 0.0013928,
-    "constraintsAdded": 248,
-    "variablesCreated": 99,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 248,
-    "solve_time": 0.0013928,
-    "optimal": false
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_144301_616086_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:43:01.616117",
-  "success": false,
-  "metadata": {
-    "solveTime": 0.0009529,
-    "constraintsAdded": 230,
-    "variablesCreated": 99,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 230,
-    "solve_time": 0.0009529,
-    "optimal": false
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_144340_972746_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T14:43:40.972769",
-  "success": false,
-  "metadata": {
-    "solveTime": 0.0009025000000000001,
-    "constraintsAdded": 230,
-    "variablesCreated": 99,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 230,
-    "solve_time": 0.0009025000000000001,
-    "optimal": false
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_151530_967914_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T15:15:30.967943",
-  "success": false,
-  "metadata": {
-    "solveTime": 0.0009660000000000001,
-    "constraintsAdded": 230,
-    "variablesCreated": 99,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 230,
-    "solve_time": 0.0009660000000000001,
-    "optimal": false
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_151539_908306_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T15:15:39.908329",
-  "success": false,
-  "metadata": {
-    "solveTime": 0.0009183,
-    "constraintsAdded": 230,
-    "variablesCreated": 99,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 230,
-    "solve_time": 0.0009183,
-    "optimal": false
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_151728_688699_success.json

@@ -1,56 +0,0 @@
-{
-  "timestamp": "2025-10-21T15:17:28.688727",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.0175048,
-    "constraintsAdded": 230,
-    "variablesCreated": 99,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.0076940059661865234,
-      "objective": 1150.0,
-      "bound": 2650.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.008573293685913086,
-      "objective": 1200.0,
-      "bound": 1400.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.00871133804321289,
-      "objective": 1250.0,
-      "bound": 1400.0,
-      "solution_count": 3
-    },
-    {
-      "timestamp": 0.008805990219116211,
-      "objective": 1300.0,
-      "bound": 1400.0,
-      "solution_count": 4
-    },
-    {
-      "timestamp": 0.00890493392944336,
-      "objective": 1350.0,
-      "bound": 1400.0,
-      "solution_count": 5
-    },
-    {
-      "timestamp": 0.009298324584960938,
-      "objective": 1400.0,
-      "bound": 1400.0,
-      "solution_count": 6
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 16,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 230,
-    "solve_time": 0.0175048,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_151919_785777_success.json

@@ -1,56 +0,0 @@
-{
-  "timestamp": "2025-10-21T15:19:19.785803",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.014216000000000001,
-    "constraintsAdded": 228,
-    "variablesCreated": 99,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008774042129516602,
-      "objective": 1200.0,
-      "bound": 2850.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.009451627731323242,
-      "objective": 1250.0,
-      "bound": 1450.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.009568452835083008,
-      "objective": 1300.0,
-      "bound": 1450.0,
-      "solution_count": 3
-    },
-    {
-      "timestamp": 0.009636402130126953,
-      "objective": 1350.0,
-      "bound": 1450.0,
-      "solution_count": 4
-    },
-    {
-      "timestamp": 0.009870052337646484,
-      "objective": 1400.0,
-      "bound": 1450.0,
-      "solution_count": 5
-    },
-    {
-      "timestamp": 0.009946584701538086,
-      "objective": 1450.0,
-      "bound": 1450.0,
-      "solution_count": 6
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 17,
-    "violations_count": 0,
-    "variables_count": 99,
-    "constraints_count": 228,
-    "solve_time": 0.014216000000000001,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_165813_438327_success.json

@@ -1,32 +0,0 @@
-{
-  "timestamp": "2025-10-21T16:58:13.438358",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.012495000000000001,
-    "constraintsAdded": 218,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008534908294677734,
-      "objective": 1050.0,
-      "bound": 2100.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.009073495864868164,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 218,
-    "solve_time": 0.012495000000000001,
-    "optimal": true
-  }
-}

backend/src/python-scripts/progress_data/run_20251021_165837_184732_success.json

@@ -1,32 +0,0 @@
-{
-  "timestamp": "2025-10-21T16:58:37.184763",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.0245485,
-    "constraintsAdded": 218,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.009514808654785156,
-      "objective": 1050.0,
-      "bound": 2100.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.010115385055541992,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 2
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 218,
-    "solve_time": 0.0245485,
-    "optimal": true
-  }
-}

backend/src/python-scripts/run_20251021_105426_failure.json

@@ -1,32 +0,0 @@
-{
-  "timestamp": "2025-10-21T10:54:26.093544",
-  "success": false,
-  "metadata": {
-    "solveTime": 0,
-    "constraintsAdded": 0,
-    "variablesCreated": 0,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 1,
-    "variables_count": 0,
-    "constraints_count": 0,
-    "solve_time": 0,
-    "optimal": false
-  },
-  "full_result": {
-    "assignments": [],
-    "violations": [
-      "Error: 'SolutionCallback' object has no attribute 'HasObjective'"
-    ],
-    "success": false,
-    "metadata": {
-      "solveTime": 0,
-      "constraintsAdded": 0,
-      "variablesCreated": 0,
-      "optimal": false
-    }
-  }
-}

backend/src/python-scripts/run_20251021_105936_failure.json

@@ -1,19 +0,0 @@
-{
-  "timestamp": "2025-10-21T10:59:36.646855",
-  "success": false,
-  "metadata": {
-    "solveTime": 0,
-    "constraintsAdded": 0,
-    "variablesCreated": 0,
-    "optimal": false
-  },
-  "progress": [],
-  "solution_summary": {
-    "assignments_count": 0,
-    "violations_count": 1,
-    "variables_count": 0,
-    "constraints_count": 0,
-    "solve_time": 0,
-    "optimal": false
-  }
-}

backend/src/python-scripts/run_20251021_110336_success.json

@@ -1,38 +0,0 @@
-{
-  "timestamp": "2025-10-21T11:03:36.697986",
-  "success": true,
-  "metadata": {
-    "solveTime": 0.025875500000000003,
-    "constraintsAdded": 217,
-    "variablesCreated": 90,
-    "optimal": true
-  },
-  "progress": [
-    {
-      "timestamp": 0.008769989013671875,
-      "objective": 1050.0,
-      "bound": 2000.0,
-      "solution_count": 1
-    },
-    {
-      "timestamp": 0.009685516357421875,
-      "objective": 1250.0,
-      "bound": 1700.0,
-      "solution_count": 2
-    },
-    {
-      "timestamp": 0.010709047317504883,
-      "objective": 1300.0,
-      "bound": 1300.0,
-      "solution_count": 3
-    }
-  ],
-  "solution_summary": {
-    "assignments_count": 15,
-    "violations_count": 0,
-    "variables_count": 90,
-    "constraints_count": 217,
-    "solve_time": 0.025875500000000003,
-    "optimal": true
-  }
-}

backend/src/routes/employees.ts

@@ -20,9 +20,9 @@ router.use(authMiddleware);
 
 // Employee CRUD Routes
 router.get('/', authMiddleware, getEmployees);
-router.get('/:id', requireRole(['admin', 'instandhalter']), getEmployee);
+router.get('/:id', requireRole(['admin', 'maintenance']), getEmployee);
 router.post('/', requireRole(['admin']), createEmployee);
-router.put('/:id', requireRole(['admin']), updateEmployee);
+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);

backend/src/routes/scheduledShifts.ts

@@ -14,9 +14,9 @@ const router = express.Router();
 router.use(authMiddleware);
 
 
-router.post('/:id/generate-shifts', requireRole(['admin', 'instandhalter']), generateScheduledShiftsForPlan);
+router.post('/:id/generate-shifts', requireRole(['admin', 'maintenance']), generateScheduledShiftsForPlan);
 
-router.post('/:id/regenerate-shifts', requireRole(['admin', 'instandhalter']), regenerateScheduledShifts);
+router.post('/:id/regenerate-shifts', requireRole(['admin', 'maintenance']), regenerateScheduledShifts);
 
 // GET all scheduled shifts for a plan
 router.get('/plan/:planId', authMiddleware, getScheduledShiftsFromPlan);

backend/src/routes/shiftPlans.ts

@@ -24,18 +24,18 @@ router.get('/' , authMiddleware, getShiftPlans);
 router.get('/:id', authMiddleware, getShiftPlan);
 
 // POST create new shift plan
-router.post('/', requireRole(['admin', 'instandhalter']), createShiftPlan);
+router.post('/', requireRole(['admin', 'maintenance']), createShiftPlan);
 
 // POST create new plan from preset
-router.post('/from-preset', requireRole(['admin', 'instandhalter']), createFromPreset);
+router.post('/from-preset', requireRole(['admin', 'maintenance']), createFromPreset);
 
 // PUT update shift plan or template
-router.put('/:id', requireRole(['admin', 'instandhalter']), updateShiftPlan);
+router.put('/:id', requireRole(['admin', 'maintenance']), updateShiftPlan);
 
 // DELETE shift plan or template
-router.delete('/:id', requireRole(['admin', 'instandhalter']), deleteShiftPlan);
+router.delete('/:id', requireRole(['admin', 'maintenance']), deleteShiftPlan);
 
 // POST clear assignments and reset to draft
-router.post('/:id/clear-assignments', requireRole(['admin', 'instandhalter']), clearAssignments);
+router.post('/:id/clear-assignments', requireRole(['admin', 'maintenance']), clearAssignments);
 
 export default router;

backend/src/scripts/initializeDatabase.ts

@@ -8,7 +8,30 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 export async function initializeDatabase(): Promise<void> {
-  const schemaPath = path.join(__dirname, '../database/schema.sql');
+  const possiblePaths = [
+    path.join(__dirname, '../database/schema.sql'),
+    path.join(__dirname, '../../database/schema.sql'),
+    path.join(process.cwd(), 'database/schema.sql'),
+    path.join(process.cwd(), 'src/database/schema.sql'),
+    path.join(process.cwd(), 'dist/database/schema.sql')
+  ];
+
+  let schemaPath: string | null = null;
+
+  for (const p of possiblePaths) {
+    if (fs.existsSync(p)) {
+      schemaPath = p;
+      break;
+    }
+  }
+
+  if (!schemaPath) {
+    throw new Error(
+      `❌ schema.sql not found in any of the tested paths:\n${possiblePaths.join('\n')}`
+    );
+  }
+
+  console.log(`✅ Using schema at: ${schemaPath}`);
   const schema = fs.readFileSync(schemaPath, 'utf8');
   
   try {

backend/src/scripts/verify-python.js

@@ -0,0 +1,27 @@
+import { spawn } from 'child_process';
+import path from 'path';
+
+export function runPythonScript(scriptPath, args = []) {
+  return new Promise((resolve, reject) => {
+    const pythonProcess = spawn('python', [scriptPath, ...args]);
+    
+    let stdout = '';
+    let stderr = '';
+
+    pythonProcess.stdout.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    pythonProcess.stderr.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    pythonProcess.on('close', (code) => {
+      if (code === 0) {
+        resolve(stdout);
+      } else {
+        reject(new Error(`Python script exited with code ${code}: ${stderr}`));
+      }
+    });
+  });
+}

backend/src/server.ts

@@ -1,7 +1,9 @@
 // backend/src/server.ts
 import express from 'express';
-import cors from 'cors';
+import path from 'path';
+import { fileURLToPath } from 'url';
 import { initializeDatabase } from './scripts/initializeDatabase.js';
+import fs from 'fs';
 
 // Route imports
 import authRoutes from './routes/auth.js';
@@ -11,11 +13,13 @@ import setupRoutes from './routes/setup.js';
 import scheduledShifts from './routes/scheduledShifts.js';
 import schedulingRoutes from './routes/scheduling.js';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 const app = express();
 const PORT = 3002;
 
-// CORS und Middleware
-app.use(cors());
+// Middleware
 app.use(express.json());
 
 // API Routes
@@ -26,17 +30,6 @@ app.use('/api/shift-plans', shiftPlanRoutes);
 app.use('/api/scheduled-shifts', scheduledShifts);
 app.use('/api/scheduling', schedulingRoutes);
 
-// Error handling middleware should come after routes
-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 handler for API routes
-app.use('/api/*', (req, res) => {
-  res.status(404).json({ error: 'API endpoint not found' });
-});
-
 // Health route
 app.get('/api/health', (req: any, res: any) => {
   res.json({ 
@@ -46,49 +39,82 @@ app.get('/api/health', (req: any, res: any) => {
   });
 });
 
-// Setup status route (additional endpoint for clarity)
-app.get('/api/initial-setup', async (req: any, res: any) => {
-  try {
-    const { db } = await import('./services/databaseService.js');
+// 🆕 STATIC FILE SERVING FÜR FRONTEND
+const frontendBuildPath = path.join(__dirname, '../frontend-build');
+console.log('📁 Frontend build path:', frontendBuildPath);
 
-    const adminExists = await db.get<{ 'COUNT(*)': number }>(
-      'SELECT COUNT(*) FROM employees WHERE role = ?',
-      ['admin']
-    );
+// Ü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);
   
-    res.json({
-      needsInitialSetup: !adminExists || adminExists['COUNT(*)'] === 0
-    });
-  } catch (error) {
-    console.error('Error checking initial setup:', error);
-    res.status(500).json({ error: 'Internal server error' });
+  // Serviere statische Dateien
+  app.use(express.static(frontendBuildPath));
+  
+  console.log('✅ Static file serving configured');
+} else {
+  console.log('❌ Frontend build directory NOT FOUND:', frontendBuildPath);
+}
+
+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');
   }
 });
 
+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 (fs.existsSync(indexPath)) {
+    res.sendFile(indexPath);
+  } else {
+    console.error('❌ index.html not found for client-side routing');
+    res.status(404).json({ error: 'Frontend application not found' });
+  }
+});
+
+// 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' });
+});
+
 // Initialize the application
 const initializeApp = async () => {
   try {
     // Initialize database with base schema
     await initializeDatabase();
-    //console.log('✅ Database initialized successfully');
     
     // Apply any pending migrations
     const { applyMigration } = await import('./scripts/applyMigration.js');
     await applyMigration();
-    //console.log('✅ Database migrations applied');
 
     // Start server only after successful initialization
     app.listen(PORT, () => {
-      console.log('🎉 BACKEND STARTED SUCCESSFULLY!');
+      console.log('🎉 APPLICATION STARTED SUCCESSFULLY!');
       console.log(`📍 Port: ${PORT}`);
-      console.log(`📍 Health: http://localhost:${PORT}/api/health`);
+      console.log(`📍 Frontend: http://localhost:${PORT}`);
+      console.log(`📍 API: http://localhost:${PORT}/api`);
       console.log('');
-      console.log(`🔧 Setup ready at: http://localhost:${PORT}/api/setup/status`);
+      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);
-    process.exit(1); // Exit if initialization fails
+    process.exit(1);
   }
 };
 

backend/src/services/databaseService.ts

@@ -1,10 +1,19 @@
+// backend/src/services/databaseService
 import sqlite3 from 'sqlite3';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import fs from 'fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const dbPath = path.join(__dirname, '../../database/schichtplan.db');
+
+const dbPath = process.env.DB_PATH || '/app/data/schichtplan.db';
+
+// Stelle sicher, dass das Verzeichnis existiert
+const dbDir = path.dirname(dbPath);
+if (!fs.existsSync(dbDir)) {
+  fs.mkdirSync(dbDir, { recursive: true });
+}
 
 class Database {
   private db: sqlite3.Database;

docker-compose.yml

@@ -1,18 +1,26 @@
 version: '3.8'
-services:
-  frontend:
-    build: ./frontend
-    ports:
-      - "80:80"
-    depends_on:
-      - backend
 
-  backend:
-    build: ./backend
+services:
+  schichtplan:
+    build: 
+      context: .
+      dockerfile: backend/Dockerfile
     ports:
       - "3001:3001"
+      - "3000:3000"
     environment:
-      - DATABASE_URL=file:./dev.db
-      - JWT_SECRET=your-secret-key
+      - NODE_ENV=production
+      - DATABASE_URL=file:./prod.db
+      - JWT_SECRET=your-production-secret-key-change-this
+      - PYTHON_PATH=/usr/bin/python3
+    volumes:
+      - app_data:/app/data
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3001/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
 
-  # Später: Database service hinzufügen
+volumes:
+  app_data:

ecosystem.config.cjs

@@ -0,0 +1,18 @@
+// 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
+    }
+  ]
+};

frontend/.env.development

@@ -0,0 +1,4 @@
+# frontend/.env.development
+BROWSER=none
+FAST_REFRESH=true
+DANGEROUSLY_DISABLE_HOST_CHECK=true

frontend/.gitignore

@@ -1,45 +0,0 @@
-# Dependencies
-node_modules/
-/.pnp
-.pnp.js
-
-# Testing
-/coverage
-
-# Production
-/build
-
-# Misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.env
-
-# Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# IDEs
-.vscode/
-.idea/
-*.swp
-*.swo
-
-# OS generated files
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
-
-# Environment variables
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local

frontend/dockerfile

@@ -1,8 +0,0 @@
-# backend/Dockerfile
-FROM node:18-alpine
-WORKDIR /app
-COPY package*.json ./
-RUN npm ci --only=production
-COPY . .
-EXPOSE 3001
-CMD ["node", "dist/server.js"]

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:3002",
   "dependencies": {
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -15,10 +16,8 @@
     "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",
-    "worker_threads": "native"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,5 +42,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "http-proxy-middleware": "^3.0.5",
+    "react-scripts": "^5.0.1"
   }
 }

frontend/src/App.tsx

@@ -19,7 +19,7 @@ import Setup from './pages/Setup/Setup';
 // Protected Route Component
 const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({ 
   children, 
-  roles = ['admin', 'instandhalter', 'user'] 
+  roles = ['admin', 'maintenance', 'user'] 
 }) => {
   const { user, loading, hasRole } = useAuth();
 
@@ -91,12 +91,12 @@ const AppContent: React.FC = () => {
         </ProtectedRoute>
       } />
       <Route path="/shift-plans/new" element={
-        <ProtectedRoute roles={['admin', 'instandhalter']}>
+        <ProtectedRoute roles={['admin', 'maintenance']}>
           <ShiftPlanCreate />
         </ProtectedRoute>
       } />
       <Route path="/shift-plans/:id/edit" element={
-        <ProtectedRoute roles={['admin', 'instandhalter']}>
+        <ProtectedRoute roles={['admin', 'maintenance']}>
           <ShiftPlanEdit />
         </ProtectedRoute>
       } />
@@ -106,7 +106,7 @@ const AppContent: React.FC = () => {
         </ProtectedRoute>
       } />
       <Route path="/employees" element={
-        <ProtectedRoute roles={['admin', 'instandhalter']}>
+        <ProtectedRoute roles={['admin', 'maintenance']}>
           <EmployeeManagement />
         </ProtectedRoute>
       } />

frontend/src/components/Layout/Navigation.tsx

@@ -30,11 +30,11 @@ const Navigation: React.FC = () => {
   };
 
   const navigationItems = [
-    { path: '/', label: 'Dashboard', roles: ['admin', 'instandhalter', 'user'] },
-    { path: '/shift-plans', label: 'Schichtpläne', roles: ['admin', 'instandhalter', 'user'] },
-    { path: '/employees', label: 'Mitarbeiter', roles: ['admin', 'instandhalter'] },
-    { path: '/help', label: 'Hilfe', roles: ['admin', 'instandhalter', 'user'] },
-    { path: '/settings', label: 'Einstellungen', roles: ['admin', 'instandhalter', 'user'] },
+    { path: '/', label: 'Dashboard', roles: ['admin', 'maintenance', 'user'] },
+    { path: '/shift-plans', label: 'Schichtpläne', roles: ['admin', 'maintenance', 'user'] },
+    { path: '/employees', label: 'Mitarbeiter', roles: ['admin', 'maintenance'] },
+    { path: '/help', label: 'Hilfe', roles: ['admin', 'maintenance', 'user'] },
+    { path: '/settings', label: 'Einstellungen', roles: ['admin', 'maintenance', 'user'] },
   ];
 
   const filteredNavigation = navigationItems.filter(item => 

frontend/src/contexts/AuthContext.tsx

@@ -20,6 +20,7 @@ interface AuthContextType {
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
+const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || '/api';
 
 interface AuthProviderProps {
   children: ReactNode;
@@ -48,7 +49,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const checkSetupStatus = async (): Promise<void> => {
     try {
       console.log('🔍 Checking setup status...');
-      const response = await fetch('http://localhost:3002/api/setup/status');
+      const response = await fetch(`${API_BASE_URL}/setup/status`);
       if (!response.ok) {
         throw new Error('Setup status check failed');
       }
@@ -72,7 +73,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         return;
       }
 
-      const response = await fetch('http://localhost:3002/api/auth/me', {
+      const response = await fetch(`${API_BASE_URL}/auth/me`, {
         headers: {
           'Authorization': `Bearer ${token}`
         }
@@ -104,7 +105,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     try {
       console.log('🔐 Attempting login for:', credentials.email);
       
-      const response = await fetch('http://localhost:3002/api/auth/login', {
+      const response = await fetch(`${API_BASE_URL}/auth/login`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

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>
@@ -87,7 +129,7 @@ const Login: React.FC = () => {
             onChange={(e) => setEmail(e.target.value)}
             required
             style={{
-              width: '100%',
+              width: '94.5%',
               padding: '10px',
               border: '1px solid #ddd',
               borderRadius: '4px',
@@ -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>
+          <div style={{ position: 'relative' }}>
             <input
-            type="password"
+              ref={passwordInputRef}
+              type={showPassword ? 'text' : 'password'}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
               style={{
-              width: '100%',
+                width: '94.5%',
                 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/Dashboard/Dashboard.tsx

@@ -393,7 +393,7 @@ const Dashboard: React.FC = () => {
       </div>
 
       {/* Quick Actions - Nur für Admins/Instandhalter */}
-      {hasRole(['admin', 'instandhalter']) && (
+      {hasRole(['admin', 'maintenance']) && (
         <div style={{ marginBottom: '30px' }}>
           <h2 style={{ marginBottom: '15px', color: '#2c3e50' }}>Schnellaktionen</h2>
           <div style={{ 
@@ -535,7 +535,7 @@ const Dashboard: React.FC = () => {
             <div style={{ textAlign: 'center', padding: '20px', color: '#666' }}>
               <div style={{ fontSize: '48px', marginBottom: '10px' }}>📅</div>
               <div>Kein aktiver Schichtplan</div>
-              {hasRole(['admin', 'instandhalter']) && (
+              {hasRole(['admin', 'maintenance']) && (
                 <Link to="/shift-plans/new">
                   <button style={{
                     marginTop: '10px',
@@ -643,7 +643,7 @@ const Dashboard: React.FC = () => {
         )}
 
         {/* Letzte Schichtpläne (für Admins/Instandhalter) */}
-        {hasRole(['admin', 'instandhalter']) && (
+        {hasRole(['admin', 'maintenance']) && (
           <div style={{
             backgroundColor: 'white',
             padding: '20px',

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

@@ -588,6 +588,31 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
         return;
       }
 
+      // Contract type validation
+      const availableShifts = validAvailabilities.filter(avail => 
+        avail.preferenceLevel === 1 || avail.preferenceLevel === 2
+      ).length;
+
+      let contractRequirement = 0;
+      let contractTypeName = '';
+
+      if (employee.contractType === 'small') {
+        contractRequirement = 2;
+        contractTypeName = 'Kleiner Vertrag';
+      } else if (employee.contractType === 'large') {
+        contractRequirement = 3;
+        contractTypeName = 'Großer Vertrag';
+      }
+
+      if (contractRequirement > 0 && availableShifts < contractRequirement) {
+        setError(
+          `${contractTypeName} erfordert mindestens ${contractRequirement} verfügbare Shifts. ` +
+          `Aktuell sind nur ${availableShifts} Shifts mit Verfügbarkeit "Bevorzugt" oder "Möglich" ausgewählt.`
+        );
+        setSaving(false);
+        return;
+      }
+
       // Convert to the format expected by the API - using shiftId directly
       const requestData = {
         planId: selectedPlanId,
@@ -633,6 +658,12 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
   // Get full name for display
   const employeeFullName = `${employee.firstname} ${employee.lastname}`;
 
+  // Mininmum amount of shifts per contract type
+  const availableShiftsCount = availabilities.filter(avail => 
+    avail.preferenceLevel === 1 || avail.preferenceLevel === 2
+  ).length;
+    
+
   return (
     <div style={{
       maxWidth: '1900px',
@@ -660,6 +691,14 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
         <p style={{ margin: 0, color: '#7f8c8d' }}>
           <strong>Email:</strong> {employee.email}
         </p>
+        {employee.contractType && (
+          <p style={{ margin: '5px 0 0 0', color: employee.contractType === 'small' ? '#f39c12' : '#27ae60' }}>
+            <strong>Vertrag:</strong> 
+            {employee.contractType === 'small' ? ' Kleiner Vertrag (min. 2 verfügbare Shifts)' : 
+            employee.contractType === 'large' ? ' Großer Vertrag (min. 3 verfügbare Shifts)' : 
+            ' Flexibler Vertrag'}
+          </p>
+        )}
       </div>
 
       {error && (
@@ -816,7 +855,7 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
             fontWeight: 'bold'
           }}
         >
-          {saving ? '⏳ Wird gespeichert...' : 'Verfügbarkeiten speichern'}
+          {saving ? '⏳ Wird gespeichert...' : `Verfügbarkeiten speichern (${availableShiftsCount})`}
         </button>
       </div>
     </div>

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

@@ -99,21 +99,26 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
       if (checked) {
         return {
           ...prev,
-          roles: [...prev.roles, role]
+          roles: [role]
         };
       } else {
-        return {
+        const newRoles = prev.roles.filter(r => r !== role);
+        return{
           ...prev,
-          roles: prev.roles.filter(r => r !== role)
+          roles: newRoles.length > 0 ? newRoles : ['user']
         };
       }
     });
   };
 
   const handleEmployeeTypeChange = (employeeType: EmployeeType) => {
-    // Determine if contract type should be shown and set default
-    const requiresContract = employeeType !== 'guest';
-    const defaultContractType = requiresContract ? 'small' as ContractType : undefined;
+    // Determine contract type based on employee type
+    let contractType: ContractType | undefined;
+    if (employeeType === 'manager' || employeeType === 'apprentice') {
+      contractType = 'flexible';
+    } else if (employeeType !== 'guest') {
+      contractType = 'small';
+    }
 
     // Determine if can work alone based on employee type
     const canWorkAlone = employeeType === 'manager' || 
@@ -125,7 +130,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     setFormData(prev => ({
       ...prev,
       employeeType,
-      contractType: defaultContractType,
+      contractType,
       canWorkAlone,
       isTrainee
     }));
@@ -273,7 +278,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                   onChange={handleChange}
                   required
                   style={{
-                    width: '100%',
+                    width: '94%',
                     padding: '10px',
                     border: '1px solid #ddd',
                     borderRadius: '4px',
@@ -294,7 +299,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                   onChange={handleChange}
                   required
                   style={{
-                    width: '100%',
+                    width: '94%',
                     padding: '10px',
                     border: '1px solid #ddd',
                     borderRadius: '4px',
@@ -311,7 +316,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                 E-Mail Adresse (automatisch generiert)
               </label>
               <div style={{
-                width: '100%',
+                width: '97%',
                 padding: '10px',
                 border: '1px solid #ddd',
                 borderRadius: '4px',
@@ -340,7 +345,7 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                   required
                   minLength={6}
                   style={{
-                    width: '100%',
+                    width: '97%',
                     padding: '10px',
                     border: '1px solid #ddd',
                     borderRadius: '4px',
@@ -355,78 +360,6 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
             )}
           </div>
 
-          {/* Vertragstyp (nur für Admins und interne Mitarbeiter) */}
-          {hasRole(['admin']) && showContractType && (
-            <div style={{
-              padding: '20px',
-              backgroundColor: '#e8f4fd',
-              borderRadius: '8px',
-              border: '1px solid #b6d7e8'
-            }}>
-              <h3 style={{ margin: '0 0 15px 0', color: '#0c5460' }}>📝 Vertragstyp</h3>
-              
-              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                {contractTypeOptions.map(contract => (
-                  <div 
-                    key={contract.value}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'flex-start',
-                      padding: '15px',
-                      border: `2px solid ${formData.contractType === contract.value ? '#3498db' : '#e0e0e0'}`,
-                      borderRadius: '8px',
-                      backgroundColor: formData.contractType === contract.value ? '#f0f8ff' : 'white',
-                      cursor: 'pointer',
-                      transition: 'all 0.2s'
-                    }}
-                    onClick={() => handleContractTypeChange(contract.value)}
-                  >
-                    <input
-                      type="radio"
-                      name="contractType"
-                      value={contract.value}
-                      checked={formData.contractType === contract.value}
-                      onChange={() => handleContractTypeChange(contract.value)}
-                      style={{
-                        marginRight: '12px',
-                        marginTop: '2px',
-                        width: '18px',
-                        height: '18px'
-                      }}
-                    />
-                    <div style={{ flex: 1 }}>
-                      <div style={{ 
-                        fontWeight: 'bold', 
-                        color: '#2c3e50',
-                        marginBottom: '4px',
-                        fontSize: '16px'
-                      }}>
-                        {contract.label}
-                      </div>
-                      <div style={{ 
-                        fontSize: '14px', 
-                        color: '#7f8c8d',
-                        lineHeight: '1.4'
-                      }}>
-                        {contract.description}
-                      </div>
-                    </div>
-                    <div style={{
-                      padding: '6px 12px',
-                      backgroundColor: formData.contractType === contract.value ? '#3498db' : '#95a5a6',
-                      color: 'white',
-                      borderRadius: '15px',
-                      fontSize: '12px',
-                      fontWeight: 'bold'
-                    }}>
-                      {contract.value.toUpperCase()}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
           {/* Mitarbeiter Kategorie */}
           <div style={{
             padding: '20px',
@@ -528,6 +461,107 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
             )}
           </div>
 
+          {/* Vertragstyp (nur für Admins und interne Mitarbeiter) */}
+          {hasRole(['admin']) && showContractType && (
+            <div style={{
+              padding: '20px',
+              backgroundColor: '#e8f4fd',
+              borderRadius: '8px',
+              border: '1px solid #b6d7e8'
+            }}>
+              <h3 style={{ margin: '0 0 15px 0', color: '#0c5460' }}>📝 Vertragstyp</h3>
+              
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                {contractTypeOptions.map(contract => {
+                  const isFlexibleDisabled = contract.value === 'flexible' && formData.employeeType === 'personell';
+                  const isSmallLargeDisabled = (contract.value === 'small' || contract.value === 'large') && 
+                                            (formData.employeeType === 'manager' || formData.employeeType === 'apprentice');
+                  const isDisabled = isFlexibleDisabled || isSmallLargeDisabled;
+                  
+                  return (
+                    <div 
+                      key={contract.value}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        padding: '15px',
+                        border: `2px solid ${formData.contractType === contract.value ? '#3498db' : '#e0e0e0'}`,
+                        borderRadius: '8px',
+                        backgroundColor: formData.contractType === contract.value ? '#f0f8ff' : 'white',
+                        cursor: isDisabled ? 'not-allowed' : 'pointer',
+                        transition: 'all 0.2s',
+                        opacity: isDisabled ? 0.6 : 1
+                      }}
+                      onClick={isDisabled ? undefined : () => handleContractTypeChange(contract.value)}
+                    >
+                      <input
+                        type="radio"
+                        name="contractType"
+                        value={contract.value}
+                        checked={formData.contractType === contract.value}
+                        onChange={isDisabled ? undefined : () => handleContractTypeChange(contract.value)}
+                        disabled={isDisabled}
+                        style={{
+                          marginRight: '12px',
+                          marginTop: '2px',
+                          width: '18px',
+                          height: '18px'
+                        }}
+                      />
+                      <div style={{ flex: 1 }}>
+                        <div style={{ 
+                          fontWeight: 'bold', 
+                          color: '#2c3e50',
+                          marginBottom: '4px',
+                          fontSize: '16px'
+                        }}>
+                          {contract.label}
+                          {isFlexibleDisabled && (
+                            <span style={{
+                              fontSize: '12px',
+                              color: '#e74c3c',
+                              marginLeft: '8px',
+                              fontWeight: 'normal'
+                            }}>
+                              (Nicht verfügbar für Personell)
+                            </span>
+                          )}
+                          {isSmallLargeDisabled && (
+                            <span style={{
+                              fontSize: '12px',
+                              color: '#e74c3c',
+                              marginLeft: '8px',
+                              fontWeight: 'normal'
+                            }}>
+                              (Nicht verfügbar für {formData.employeeType === 'manager' ? 'Manager' : 'Auszubildende'})
+                            </span>
+                          )}
+                        </div>
+                        <div style={{ 
+                          fontSize: '14px', 
+                          color: '#7f8c8d',
+                          lineHeight: '1.4'
+                        }}>
+                          {contract.description}
+                        </div>
+                      </div>
+                      <div style={{
+                        padding: '6px 12px',
+                        backgroundColor: isDisabled ? '#95a5a6' : (formData.contractType === contract.value ? '#3498db' : '#95a5a6'),
+                        color: 'white',
+                        borderRadius: '15px',
+                        fontSize: '12px',
+                        fontWeight: 'bold'
+                      }}>
+                        {contract.value.toUpperCase()}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
           {/* Eigenständigkeit */}
           <div style={{
             padding: '20px',

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

@@ -48,6 +48,13 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
     return true;
   });
 
+  // Helper to get highest role for sorting
+  const getHighestRole = (roles: string[]): string => {
+    if (roles.includes('admin')) return 'admin';
+    if (roles.includes('maintenance')) return 'maintenance';
+    return 'user';
+  };
+
   // Sort employees based on selected field and direction
   const sortedEmployees = [...filteredEmployees].sort((a, b) => {
     let aValue: any;
@@ -67,7 +74,6 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         bValue = b.canWorkAlone;
         break;
       case 'role':
-        // Use the highest role for sorting
         aValue = getHighestRole(a.roles || []);
         bValue = getHighestRole(b.roles || []);
         break;
@@ -87,13 +93,6 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
     }
   });
 
-  // Helper to get highest role for sorting
-  const getHighestRole = (roles: string[]): string => {
-    if (roles.includes('admin')) return 'admin';
-    if (roles.includes('maintenance')) return 'maintenance';
-    return 'user';
-  };
-
   const handleSort = (field: SortField) => {
     if (sortField === field) {
       // Toggle direction if same field

frontend/src/pages/Help/Help.tsx

@@ -1,213 +1,50 @@
 // 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 algorithmStages = [
-    {
-      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: "👑 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: "🔧 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: "✅ 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"
-    }
-  ];
-
   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 }
+    { 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 }
   ];
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (isAnimating) {
-        setCurrentStage((prev) => (prev + 1) % algorithmStages.length);
+  const schedulingStages = [
+    {
+      title: "1. Verfügbarkeitsprüfung",
+      description: "Nur Mitarbeiter, die sich für Schichten eingetragen haben (Verfügbarkeit 1 oder 2), werden berücksichtigt."
+    },
+    {
+      title: "2. Modellaufbau",
+      description: "Das System erstellt ein mathematisches Modell mit allen Variablen und Constraints."
+    },
+    {
+      title: "3. CP-SAT Optimierung", 
+      description: "Google's Constraint Programming Solver findet die beste Zuordnung unter allen Regeln."
+    },
+    {
+      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."
     }
-    }, 3000);
+  ];
 
-    return () => clearInterval(interval);
-  }, [isAnimating]);
-
-  const toggleAnimation = () => {
-    setIsAnimating(!isAnimating);
-  };
+  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" }
+  ];
 
   return (
     <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
       <h1>❓ Hilfe & Support - Scheduling Algorithmus</h1>
       
-      {/* Algorithm Visualization */}
-      <div style={{ 
-        backgroundColor: 'white', 
-        borderRadius: '12px', 
-        padding: '30px', 
-        marginTop: '20px',
-        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
-        border: '1px solid #e0e0e0'
-      }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
-          <h2 style={{ margin: 0, color: '#2c3e50' }}>🧠 Algorithmus Visualisierung</h2>
-          <button
-            onClick={toggleAnimation}
-            style={{
-              padding: '8px 16px',
-              backgroundColor: isAnimating ? '#e74c3c' : '#2ecc71',
-              color: 'white',
-              border: 'none',
-              borderRadius: '20px',
-              cursor: 'pointer',
-              fontWeight: 'bold'
-            }}
-          >
-            {isAnimating ? '⏸️ Animation pausieren' : '▶️ Animation starten'}
-          </button>
-        </div>
-
-        {/* Stage Indicators */}
-        <div style={{ 
-          display: 'flex', 
-          justifyContent: 'space-between', 
-          marginBottom: '30px',
-          position: 'relative'
-        }}>
-          {algorithmStages.map((stage, index) => (
-            <React.Fragment key={index}>
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  flex: 1
-                }}
-              >
-                <div
-                  style={{
-                    width: '60px',
-                    height: '60px',
-                    borderRadius: '50%',
-                    backgroundColor: currentStage === index ? stage.color : '#ecf0f1',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    color: currentStage === index ? 'white' : '#7f8c8d',
-                    fontWeight: 'bold',
-                    fontSize: '18px',
-                    transition: 'all 0.5s ease',
-                    boxShadow: currentStage === index ? `0 0 20px ${stage.color}80` : 'none',
-                    border: `3px solid ${stage.color}`
-                  }}
-                >
-                  {index + 1}
-                </div>
-                <div style={{ 
-                  textAlign: 'center', 
-                  marginTop: '10px',
-                  fontWeight: currentStage === index ? 'bold' : 'normal',
-                  color: currentStage === index ? stage.color : '#7f8c8d'
-                }}>
-                  {stage.title.split(':')[0]}
-                </div>
-              </div>
-              
-              {index < algorithmStages.length - 1 && (
-                <div style={{
-                  flex: 1,
-                  height: '3px',
-                  backgroundColor: currentStage > index ? stage.color : '#ecf0f1',
-                  alignSelf: 'center',
-                  margin: '0 10px',
-                  transition: 'all 0.5s ease'
-                }} />
-              )}
-            </React.Fragment>
-          ))}
-        </div>
-
-        {/* Current Stage Details */}
-          <div style={{
-            backgroundColor: algorithmStages[currentStage].color + '15',
-            border: `2px solid ${algorithmStages[currentStage].color}30`,
-            borderRadius: '8px',
-            padding: '20px',
-            marginBottom: '20px',
-            transition: 'all 0.5s ease'
-          }}>
-            <h3 style={{ color: algorithmStages[currentStage].color, marginTop: 0 }}>
-              {algorithmStages[currentStage].title}
-            </h3>
-            <p style={{ color: '#2c3e50', fontSize: '16px', marginBottom: '15px' }}>
-              {algorithmStages[currentStage].description}
-            </p>
-            <div style={{ display: 'grid', gap: '8px' }}>
-              {algorithmStages[currentStage].steps.map((step, stepIndex) => (
-                <div
-                  key={stepIndex}
-                  style={{
-                    padding: '10px 15px',
-                    backgroundColor: 'white',
-                    borderRadius: '6px',
-                    borderLeft: `4px solid ${algorithmStages[currentStage].color}`,
-                    display: 'flex',
-                    alignItems: 'center',
-                    animation: isAnimating ? 'pulse 2s infinite' : 'none'
-                  }}
-                >
-                  <span style={{ 
-                    marginRight: '10px', 
-                    color: algorithmStages[currentStage].color,
-                    fontWeight: 'bold'
-                  }}>•</span>
-                  {step}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
       {/* Business Rules */}
       <div style={{ 
         backgroundColor: 'white', 
@@ -217,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
@@ -248,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', 
@@ -264,62 +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: '#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: '#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: '#e74c3c' }}>⚖️ Wert-basierte Entscheidungen</h4>
-            <p>Jede Zuweisung wird anhand eines Wertesystems bewertet, das Verfügbarkeit, Erfahrung und aktuelle Auslastung berücksichtigt.</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: '#2ecc71' }}>🔧 Automatische Reparatur</h4>
-            <p>Probleme werden automatisch erkannt und durch intelligente Tausch- und Bewegungsoperationen behoben.</p>
+            <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>
-            <h4 style={{ color: '#f39c12' }}>📊 Transparente Berichterstattung</h4>
-            <p>Detaillierte Berichte zeigen genau, welche Probleme behoben wurden und welche verbleiben.</p>
         </div>
       </div>
 
-        
-      </div>
-
+      {/* Technical Info */}
       <div style={{ 
         marginTop: '25px',
         padding: '20px',
-          backgroundColor: '#e8f4fd',
+        backgroundColor: '#fff3cd',
         borderRadius: '8px',
-          border: '1px solid #b8d4f0'
+        border: '1px solid #ffeaa7'
       }}>
-          <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>
+        <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>
-
-      <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>
     </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,17 +520,19 @@ 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>
+                  <div style={styles.fieldInputContainer}>
                     <input
-                    type="password"
+                      type={showCurrentPassword ? 'text' : 'password'}
                       name="currentPassword"
                       value={passwordForm.currentPassword}
                       onChange={handlePasswordChange}
                       required
-                    style={styles.fieldInput}
+                      style={styles.fieldInputWithIcon}
                       placeholder="Aktuelles Passwort"
                       onFocus={(e) => {
                         e.target.style.borderColor = '#1a1325';
@@ -464,20 +543,40 @@ const Settings: React.FC = () => {
                         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>
+                  <div style={styles.fieldInputContainer}>
                     <input
-                    type="password"
+                      type={showNewPassword ? 'text' : 'password'}
                       name="newPassword"
                       value={passwordForm.newPassword}
                       onChange={handlePasswordChange}
                       required
                       minLength={6}
-                    style={styles.fieldInput}
+                      style={styles.fieldInputWithIcon}
                       placeholder="Mindestens 6 Zeichen"
                       onFocus={(e) => {
                         e.target.style.borderColor = '#1a1325';
@@ -488,22 +587,42 @@ const Settings: React.FC = () => {
                         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>
+                  <div style={styles.fieldInputContainer}>
                     <input
-                    type="password"
+                      type={showConfirmPassword ? 'text' : 'password'}
                       name="confirmPassword"
                       value={passwordForm.confirmPassword}
                       onChange={handlePasswordChange}
                       required
-                    style={styles.fieldInput}
+                      style={styles.fieldInputWithIcon}
                       placeholder="Passwort wiederholen"
                       onFocus={(e) => {
                         e.target.style.borderColor = '#1a1325';
@@ -514,6 +633,24 @@ const Settings: React.FC = () => {
                         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)',
@@ -74,7 +75,7 @@
       border: '1px solid rgba(255, 255, 255, 0.8)',
       boxShadow: '0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04)',
       backdropFilter: 'blur(10px)',
-      minHeight: '200px',
+      minHeight: '100px',
     },
     section: {
       marginBottom: '2rem',
@@ -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',

frontend/src/pages/ShiftPlans/ShiftPlanList.tsx

@@ -70,7 +70,7 @@ const ShiftPlanList: React.FC = () => {
         marginBottom: '30px' 
       }}>
         <h1>📅 Schichtpläne</h1>
-        {hasRole(['admin', 'instandhalter']) && (
+        {hasRole(['admin', 'maintenance']) && (
           <Link to="/shift-plans/new">
             <button style={{ 
               padding: '10px 20px', 
@@ -143,7 +143,7 @@ const ShiftPlanList: React.FC = () => {
                 >
                   Anzeigen
                 </button>
-                {hasRole(['admin', 'instandhalter']) && (
+                {hasRole(['admin', 'maintenance']) && (
                   <>
                     <button
                       onClick={() => navigate(`/shift-plans/${plan.id}/edit`)}

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -1005,7 +1005,7 @@ const ShiftPlanView: React.FC = () => {
           </div>
         </div>
           <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-            {shiftPlan.status === 'published' && hasRole(['admin', 'instandhalter']) && (
+            {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
               disabled={recreating}
@@ -1076,7 +1076,7 @@ const ShiftPlanView: React.FC = () => {
               </div>
             </div>
             
-            {hasRole(['admin', 'instandhalter']) && (
+            {hasRole(['admin', 'maintenance']) && (
               <div>
                 <button
                   onClick={handlePreviewAssignment}

frontend/src/services/authService.ts

@@ -1,6 +1,6 @@
 // frontend/src/services/authService.ts
 import { Employee } from '../models/Employee';
-const API_BASE = '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

@@ -3,7 +3,7 @@ import { authService } from './authService';
 import { ShiftPlan, CreateShiftPlanRequest, ScheduledShift, CreateShiftFromTemplateRequest } 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/tsconfig.json

@@ -7,7 +7,6 @@
       "esnext"
     ],
     "allowJs": true,
-    "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,