Merge branch 'staging' of https://github.com/donpat1to/Schichtenplaner into staging

.env.template

@@ -1,27 +1,29 @@
-# === SCHICHTPLANER DOCKER COMPOSE ENVIRONMENT VARIABLES ===
-# Diese Datei wird von docker-compose automatisch geladen
+# .env.template
+# ============================================
+# DOCKER COMPOSE ENVIRONMENT TEMPLATE
+# Copy this file to .env and adjust values
+# ============================================
 
-# Security
-JWT_SECRET=${JWT_SECRET:-your-secret-key-please-change}
-NODE_ENV=${NODE_ENV:-production}
+# Application settings
+NODE_ENV=production
+JWT_SECRET=your-secret-key-please-change
+HOSTNAME=localhost
+
+# Security & Network
+TRUST_PROXY_ENABLED=false
+TRUSTED_PROXY_IPS=127.0.0.1,::1
+FORCE_HTTPS=false
 
 # Database
-DB_PATH=${DB_PATH:-/app/data/database.db}
+DATABASE_PATH=/app/data/schichtplaner.db
 
-# Server
-PORT=${PORT:-3002}
+# Optional features
+ENABLE_PRO=false
+DEBUG=false
 
-# App Configuration
-APP_TITLE="Shift Planning App"
-ENABLE_PRO=${ENABLE_PRO:-false}
+# Port configuration
+APP_PORT=3002
 
-# Trust Proxy Configuration
-TRUST_PROXY_ENABLED=false
-TRUSTED_PROXY_IPS=  # Your load balancer/reverse proxy IPs
-TRUSTED_PROXY_HEADER=x-forwarded-for
-
-# Rate Limiting Configuration  
-RATE_LIMIT_WINDOW_MS=900000
-RATE_LIMIT_MAX_REQUESTS=100
-RATE_LIMIT_SKIP_PATHS=/api/health,/api/status
-RATE_LIMIT_WHITELIST=127.0.0.1,::1
+# ============================================
+# END OF TEMPLATE
+# ============================================

.github/workflows/docker.yml

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

.gitignore

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

Dockerfile

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

backend/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@types/bcrypt": "^6.0.0",
     "@types/node": "24.9.2",
-    "vite":"7.1.12",
+    "vite": "7.1.12",
     "bcrypt": "^6.0.0",
     "bcryptjs": "^2.4.3",
     "express": "^4.18.2",
@@ -25,7 +25,10 @@
     "uuid": "^9.0.0",
     "express-rate-limit": "8.1.0",
     "helmet": "8.1.0",
-    "express-validator": "7.3.0"
+    "express-validator": "7.3.0",
+    "exceljs": "4.4.0",
+    "pdfkit": "0.12.3",
+    "@types/pdfkit": "^0.12.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

backend/src/controllers/shiftPlanController.ts

@@ -2,12 +2,14 @@
 import { Request, Response } from 'express';
 import { v4 as uuidv4 } from 'uuid';
 import { db } from '../services/databaseService.js';
-import { 
-  CreateShiftPlanRequest, 
+import {
+  CreateShiftPlanRequest,
   UpdateShiftPlanRequest,
 } from '../models/ShiftPlan.js';
 import { AuthRequest } from '../middleware/auth.js';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
+import ExcelJS from 'exceljs';
+import PDFDocument from 'pdfkit';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`
@@ -182,7 +184,7 @@ export const getShiftPlan = async (req: Request, res: Response): Promise<void> =
 export const createDefaultTemplate = async (userId: string): Promise<string> => {
   try {
     const planId = uuidv4();
-    
+
     await db.run('BEGIN TRANSACTION');
 
     try {
@@ -278,7 +280,7 @@ export const createShiftPlan = async (req: Request, res: Response): Promise<void
            VALUES (?, ?, ?, ?, ?, ?)`,
           [timeSlotId, planId, timeSlot.name, timeSlot.startTime, timeSlot.endTime, timeSlot.description || '']
         );
-        
+
         // Store the mapping if the timeSlot had a temporary ID
         if ((timeSlot as any).id) {
           timeSlotIdMap.set((timeSlot as any).id, timeSlotId);
@@ -289,12 +291,12 @@ export const createShiftPlan = async (req: Request, res: Response): Promise<void
       for (const shift of shifts) {
         const shiftId = uuidv4();
         let finalTimeSlotId = shift.timeSlotId;
-        
+
         // If timeSlotId exists in mapping, use the new ID
         if (timeSlotIdMap.has(shift.timeSlotId)) {
           finalTimeSlotId = timeSlotIdMap.get(shift.timeSlotId)!;
         }
-        
+
         await db.run(
           `INSERT INTO shifts (id, plan_id, day_of_week, time_slot_id, required_employees, color) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -368,7 +370,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
       // Insert time slots and create mapping
       for (const timeSlot of preset.timeSlots) {
         const timeSlotId = uuidv4();
-        
+
         await db.run(
           `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -381,7 +383,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
           timeSlotMap.set((timeSlot as any).timeSlotId, timeSlotId);
         }
         timeSlotMap.set(timeSlot.name, timeSlotId);
-        
+
         console.log(`✅ Created time slot: ${timeSlot.name} -> ${timeSlotId}`);
       }
 
@@ -391,14 +393,14 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
       let shiftCount = 0;
       for (const shift of preset.shifts) {
         const shiftId = uuidv4();
-        
+
         // Try to find the timeSlotId using different strategies
         let timeSlotId = timeSlotMap.get(shift.timeSlotId);
-        
+
         if (!timeSlotId) {
           // Fallback: try to find by name or other properties
           console.warn(`⚠️ Time slot not found by ID: ${shift.timeSlotId}, trying fallback...`);
-          
+
           // Look for time slot by name or other matching logic
           for (const [key, value] of timeSlotMap.entries()) {
             if (key.includes(shift.timeSlotId) || shift.timeSlotId.includes(key)) {
@@ -421,7 +423,7 @@ export const createFromPreset = async (req: Request, res: Response): Promise<voi
            VALUES (?, ?, ?, ?, ?, ?)`,
           [shiftId, planId, shift.dayOfWeek, timeSlotId, shift.requiredEmployees, shift.color || '#3498db']
         );
-        
+
         shiftCount++;
         console.log(`✅ Created shift ${shiftCount}: day ${shift.dayOfWeek}, timeSlot ${timeSlotId}`);
       }
@@ -592,6 +594,26 @@ async function getShiftPlanById(planId: string): Promise<any> {
     `, [planId]);
   }
 
+  // Load employees without role column + join with employee_roles
+  const employees = await db.all<any>(`
+    SELECT 
+      e.id, 
+      e.firstname, 
+      e.lastname, 
+      e.email, 
+      e.employee_type,
+      e.contract_type,
+      e.can_work_alone,
+      e.is_trainee,
+      e.is_active as isActive,
+      GROUP_CONCAT(er.role) as roles
+    FROM employees e
+    LEFT JOIN employee_roles er ON e.id = er.employee_id
+    WHERE e.is_active = 1
+    GROUP BY e.id
+    ORDER BY e.firstname, e.lastname
+  `, []);
+
   return {
     ...plan,
     isTemplate: plan.is_template === 1,
@@ -629,15 +651,28 @@ async function getShiftPlanById(planId: string): Promise<any> {
       requiredEmployees: shift.required_employees,
       assignedEmployees: JSON.parse(shift.assigned_employees || '[]'),
       timeSlotName: shift.time_slot_name
+    })),
+    // Include employees with proper role handling
+    employees: employees.map(emp => ({
+      id: emp.id,
+      firstname: emp.firstname,
+      lastname: emp.lastname,
+      email: emp.email,
+      employeeType: emp.employee_type,
+      contractType: emp.contract_type,
+      canWorkAlone: emp.can_work_alone === 1,
+      isTrainee: emp.is_trainee === 1,
+      isActive: emp.isActive === 1,
+      roles: emp.roles ? emp.roles.split(',') : [] // Convert comma-separated roles to array
     }))
   };
 }
 
 // Helper function to generate scheduled shifts from template
-export const generateScheduledShifts = async(planId: string, startDate: string, endDate: string): Promise<void> => {
+export const generateScheduledShifts = async (planId: string, startDate: string, endDate: string): Promise<void> => {
   try {
     console.log(`🔄 Generating scheduled shifts for Plan ${planId} from ${startDate} to ${endDate}`);
-    
+
     // Get plan with shifts and time slots
     const plan = await getShiftPlanById(planId);
     if (!plan) {
@@ -661,7 +696,7 @@ export const generateScheduledShifts = async(planId: string, startDate: string,
 
       for (const shift of shiftsForDay) {
         const scheduledShiftId = uuidv4();
-        
+
         await db.run(
           `INSERT INTO scheduled_shifts (id, plan_id, date, time_slot_id, required_employees, assigned_employees) 
            VALUES (?, ?, ?, ?, ?, ?)`,
@@ -674,13 +709,13 @@ export const generateScheduledShifts = async(planId: string, startDate: string,
             JSON.stringify([]) // Start with empty assignments
           ]
         );
-        
+
         console.log(`✅ Created scheduled shift: ${scheduledShiftId}`);
       }
     }
 
     console.log(`✅ Scheduled shifts generated for Plan ${planId}`);
-    
+
   } catch (error) {
     console.error('❌ Error generating scheduled shifts:', error);
     throw error;
@@ -726,7 +761,7 @@ export const generateScheduledShiftsForPlan = async (req: Request, res: Response
 
     // Return updated plan
     const updatedPlan = await getShiftPlanById(id);
-    
+
     console.log('✅ Successfully generated scheduled shifts:', {
       scheduledShifts: updatedPlan.scheduledShifts?.length || 0
     });
@@ -760,7 +795,7 @@ export const regenerateScheduledShifts = async (req: Request, res: Response): Pr
     }
 
     console.log(`✅ Regenerated scheduled shifts for plan ${id}`);
-    
+
     // Return updated plan
     const updatedPlan = await getShiftPlanById(id);
     res.json(updatedPlan);
@@ -774,7 +809,7 @@ export const regenerateScheduledShifts = async (req: Request, res: Response): Pr
 export const getScheduledShiftsFromPlan = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     const { planId } = req.params;
-    
+
     const shifts = await db.all(
       `SELECT * FROM scheduled_shifts WHERE plan_id = ? ORDER BY date, time_slot_id`,
       [planId]
@@ -806,7 +841,7 @@ export const getScheduledShiftsFromPlan = async (req: AuthRequest, res: Response
 export const getScheduledShift = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     const { id } = req.params;
-    
+
     const shift = await db.get(
       'SELECT * FROM scheduled_shifts WHERE id = ?',
       [id]
@@ -834,10 +869,10 @@ export const updateScheduledShift = async (req: AuthRequest, res: Response): Pro
     const { id } = req.params;
     const { assignedEmployees } = req.body;
 
-    console.log('🔄 Updating scheduled shift:', { 
-      id, 
+    console.log('🔄 Updating scheduled shift:', {
+      id,
       assignedEmployees,
-      body: req.body 
+      body: req.body
     });
 
     if (!Array.isArray(assignedEmployees)) {
@@ -862,8 +897,8 @@ export const updateScheduledShift = async (req: AuthRequest, res: Response): Pro
     );
 
     console.log('✅ Scheduled shift updated successfully');
-    
-    res.json({ 
+
+    res.json({
       message: 'Scheduled shift updated successfully',
       id: id,
       assignedEmployees: assignedEmployees
@@ -918,9 +953,9 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
 
       console.log(`✅ Successfully cleared all assignments for plan ${id}`);
 
-      res.json({ 
-        message: 'Assignments cleared successfully', 
-        clearedShifts: scheduledShifts.length 
+      res.json({
+        message: 'Assignments cleared successfully',
+        clearedShifts: scheduledShifts.length
       });
 
     } catch (error) {
@@ -932,4 +967,493 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
     console.error('❌ Error clearing assignments:', error);
     res.status(500).json({ error: 'Internal server error' });
   }
-};
+};
+
+export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📊 Starting Excel export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create workbook
+    const workbook = new ExcelJS.Workbook();
+    workbook.creator = 'Schichtplaner System';
+    workbook.created = new Date();
+
+    // Add Summary Sheet
+    const summarySheet = workbook.addWorksheet('Planübersicht');
+
+    // Summary data
+    summarySheet.columns = [
+      { header: 'Eigenschaft', key: 'property', width: 20 },
+      { header: 'Wert', key: 'value', width: 30 }
+    ];
+
+    summarySheet.addRows([
+      { property: 'Plan Name', value: plan.name },
+      { property: 'Beschreibung', value: plan.description || 'Keine' },
+      { property: 'Zeitraum', value: `${plan.startDate} bis ${plan.endDate}` },
+      { property: 'Status', value: plan.status },
+      { property: 'Erstellt von', value: plan.created_by_name || 'Unbekannt' },
+      { property: 'Erstellt am', value: plan.createdAt },
+      { property: 'Anzahl Schichten', value: plan.scheduledShifts?.length || 0 },
+      { property: 'Anzahl Mitarbeiter', value: plan.employees?.length || 0 }
+    ]);
+
+    // Style summary sheet
+    summarySheet.getRow(1).font = { bold: true };
+    summarySheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF2C3E50' }
+    };
+    summarySheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Add Assignments Sheet
+    const assignmentsSheet = workbook.addWorksheet('Schichtzuweisungen');
+
+    assignmentsSheet.columns = [
+      { header: 'Datum', key: 'date', width: 12 },
+      { header: 'Tag', key: 'day', width: 10 },
+      { header: 'Schicht', key: 'shift', width: 15 },
+      { header: 'Zeit', key: 'time', width: 15 },
+      { header: 'Zugewiesene Mitarbeiter', key: 'employees', width: 30 },
+      { header: 'Benötigte Mitarbeiter', key: 'required', width: 18 }
+    ];
+
+    // Group scheduled shifts by date
+    const shiftsByDate = new Map();
+    plan.scheduledShifts?.forEach((scheduledShift: any) => {
+      const date = scheduledShift.date;
+      if (!shiftsByDate.has(date)) {
+        shiftsByDate.set(date, []);
+      }
+      shiftsByDate.get(date).push(scheduledShift);
+    });
+
+    // Sort dates chronologically
+    const sortedDates = Array.from(shiftsByDate.keys()).sort();
+
+    // Add data to sheet
+    sortedDates.forEach(date => {
+      const dateShifts = shiftsByDate.get(date);
+      const dateObj = new Date(date);
+      const dayName = getGermanDayName(dateObj.getDay());
+
+      dateShifts.forEach((scheduledShift: any) => {
+        const timeSlot = plan.timeSlots?.find((ts: any) => ts.id === scheduledShift.timeSlotId);
+        const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+          const employee = plan.employees?.find((emp: any) => emp.id === empId);
+          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+        }).join(', ') || 'Keine Zuweisungen';
+
+        assignmentsSheet.addRow({
+          date: date,
+          day: dayName,
+          shift: timeSlot?.name || 'Unbekannt',
+          time: timeSlot ? `${timeSlot.startTime} - ${timeSlot.endTime}` : '',
+          employees: employeeNames,
+          required: scheduledShift.requiredEmployees || 2
+        });
+      });
+    });
+
+    // Style assignments sheet
+    assignmentsSheet.getRow(1).font = { bold: true };
+    assignmentsSheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF34495E' }
+    };
+    assignmentsSheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Add border to all cells with data
+    assignmentsSheet.eachRow((row, rowNumber) => {
+      if (rowNumber > 1) {
+        row.eachCell((cell) => {
+          cell.border = {
+            top: { style: 'thin' },
+            left: { style: 'thin' },
+            bottom: { style: 'thin' },
+            right: { style: 'thin' }
+          };
+        });
+      }
+    });
+
+    // Add Employee Overview Sheet
+    const employeeSheet = workbook.addWorksheet('Mitarbeiterübersicht');
+
+    employeeSheet.columns = [
+      { header: 'Name', key: 'name', width: 25 },
+      { header: 'E-Mail', key: 'email', width: 25 },
+      { header: 'Rolle', key: 'role', width: 15 },
+      { header: 'Mitarbeiter Typ', key: 'type', width: 15 },
+      { header: 'Vertragstyp', key: 'contract', width: 15 }
+    ];
+
+    plan.employees?.forEach((employee: any) => {
+      employeeSheet.addRow({
+        name: `${employee.firstname} ${employee.lastname}`,
+        email: employee.email,
+        role: employee.roles?.join(', ') || 'Benutzer',
+        type: employee.employeeType,
+        contract: employee.contractType || 'Nicht angegeben'
+      });
+    });
+
+    // Style employee sheet
+    employeeSheet.getRow(1).font = { bold: true };
+    employeeSheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF34495E' }
+    };
+    employeeSheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Set response headers
+    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.xlsx"`);
+
+    // Write to response
+    await workbook.xlsx.write(res);
+
+    console.log('✅ Excel export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to Excel:', error);
+    res.status(500).json({ error: 'Internal server error during Excel export' });
+  }
+};
+
+export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📄 Starting PDF export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create PDF document
+    const doc = new PDFDocument({ margin: 50 });
+
+    // Set response headers
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf"`);
+
+    // Pipe PDF to response
+    doc.pipe(res);
+
+    // Add title
+    doc.fontSize(20).font('Helvetica-Bold').text(`Schichtplan: ${plan.name}`, 50, 50);
+    doc.fontSize(12).font('Helvetica').text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')}`, 50, 80);
+
+    // Plan summary
+    let yPosition = 120;
+    doc.fontSize(14).font('Helvetica-Bold').text('Plan Informationen', 50, yPosition);
+    yPosition += 30;
+
+    doc.fontSize(10).font('Helvetica');
+    doc.text(`Plan Name: ${plan.name}`, 50, yPosition);
+    yPosition += 20;
+
+    if (plan.description) {
+      doc.text(`Beschreibung: ${plan.description}`, 50, yPosition);
+      yPosition += 20;
+    }
+
+    doc.text(`Zeitraum: ${plan.startDate} bis ${plan.endDate}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Status: ${plan.status}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt von: ${plan.created_by_name || 'Unbekannt'}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt am: ${plan.createdAt}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Schichten: ${plan.scheduledShifts?.length || 0}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Mitarbeiter: ${plan.employees?.length || 0}`, 50, yPosition);
+    yPosition += 40;
+
+    // Group scheduled shifts by date
+    const shiftsByDate = new Map();
+    plan.scheduledShifts?.forEach((scheduledShift: any) => {
+      const date = scheduledShift.date;
+      if (!shiftsByDate.has(date)) {
+        shiftsByDate.set(date, []);
+      }
+      shiftsByDate.get(date).push(scheduledShift);
+    });
+
+    // Sort dates chronologically
+    const sortedDates = Array.from(shiftsByDate.keys()).sort();
+
+    // Add assignments section
+    doc.addPage();
+    doc.fontSize(16).font('Helvetica-Bold').text('Schichtzuweisungen', 50, 50);
+
+    let currentY = 80;
+
+    sortedDates.forEach(date => {
+      const dateShifts = shiftsByDate.get(date);
+      const dateObj = new Date(date);
+      const dayName = getGermanDayName(dateObj.getDay());
+
+      // Check if we need a new page
+      if (currentY > 650) {
+        doc.addPage();
+        currentY = 50;
+      }
+
+      // Date header
+      doc.fontSize(12).font('Helvetica-Bold').text(`${date} (${dayName})`, 50, currentY);
+      currentY += 20;
+
+      // Table headers
+      doc.fontSize(10).font('Helvetica-Bold');
+      doc.text('Schicht', 50, currentY);
+      doc.text('Zeit', 150, currentY);
+      doc.text('Mitarbeiter', 250, currentY);
+      doc.text('Benötigt', 450, currentY);
+      currentY += 15;
+
+      // Horizontal line
+      doc.moveTo(50, currentY).lineTo(550, currentY).stroke();
+      currentY += 10;
+
+      doc.fontSize(9).font('Helvetica');
+
+      dateShifts.forEach((scheduledShift: any) => {
+        // Check if we need a new page for this shift
+        if (currentY > 700) {
+          doc.addPage();
+          currentY = 50;
+          // Re-add headers for new page
+          doc.fontSize(10).font('Helvetica-Bold');
+          doc.text('Schicht', 50, currentY);
+          doc.text('Zeit', 150, currentY);
+          doc.text('Mitarbeiter', 250, currentY);
+          doc.text('Benötigt', 450, currentY);
+          currentY += 25;
+        }
+
+        const timeSlot = plan.timeSlots?.find((ts: any) => ts.id === scheduledShift.timeSlotId);
+        const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+          const employee = plan.employees?.find((emp: any) => emp.id === empId);
+          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+        }).join(', ') || 'Keine Zuweisungen';
+
+        // Split employee names if too long
+        const employeesLines = doc.heightOfString(employeeNames, { width: 190 });
+
+        doc.text(timeSlot?.name || 'Unbekannt', 50, currentY);
+        doc.text(timeSlot ? `${timeSlot.startTime} - ${timeSlot.endTime}` : '', 150, currentY);
+
+        // Handle multi-line employee names
+        const employeeText = doc.heightOfString(employeeNames, { width: 190 }) > 20 ?
+          employeeNames.split(', ').join(',\n') : employeeNames;
+
+        doc.text(employeeText, 250, currentY, { width: 190, align: 'left' });
+        doc.text(String(scheduledShift.requiredEmployees || 2), 450, currentY);
+
+        currentY += Math.max(20, employeesLines) + 5;
+      });
+
+      currentY += 20; // Space between dates
+    });
+
+    // Add employee overview page
+    doc.addPage();
+    doc.fontSize(16).font('Helvetica-Bold').text('Mitarbeiterübersicht', 50, 50);
+
+    currentY = 80;
+
+    // Table headers
+    doc.fontSize(10).font('Helvetica-Bold');
+    doc.text('Name', 50, currentY);
+    doc.text('E-Mail', 200, currentY);
+    doc.text('Rolle', 350, currentY);
+    doc.text('Typ', 450, currentY);
+    currentY += 15;
+
+    // Horizontal line
+    doc.moveTo(50, currentY).lineTo(550, currentY).stroke();
+    currentY += 10;
+
+    doc.fontSize(9).font('Helvetica');
+
+    plan.employees?.forEach((employee: any) => {
+      if (currentY > 700) {
+        doc.addPage();
+        currentY = 50;
+        // Re-add headers
+        doc.fontSize(10).font('Helvetica-Bold');
+        doc.text('Name', 50, currentY);
+        doc.text('E-Mail', 200, currentY);
+        doc.text('Rolle', 350, currentY);
+        doc.text('Typ', 450, currentY);
+        currentY += 25;
+      }
+
+      doc.text(`${employee.firstname} ${employee.lastname}`, 50, currentY);
+      doc.text(employee.email, 200, currentY, { width: 140 });
+      doc.text(employee.roles?.join(', ') || 'Benutzer', 350, currentY, { width: 90 });
+      doc.text(employee.employeeType, 450, currentY);
+
+      currentY += 20;
+    });
+
+    // Add footer to each page
+    const pages = doc.bufferedPageRange();
+    for (let i = 0; i < pages.count; i++) {
+      doc.switchToPage(i);
+
+      doc.fontSize(8).font('Helvetica');
+      doc.text(
+        `Seite ${i + 1} von ${pages.count} • Erstellt am: ${new Date().toLocaleString('de-DE')} • Schichtplaner System`,
+        50,
+        800,
+        { align: 'center', width: 500 }
+      );
+    }
+
+    // Finalize PDF
+    doc.end();
+
+    console.log('✅ PDF export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to PDF:', error);
+    res.status(500).json({ error: 'Internal server error during PDF export' });
+  }
+};
+
+// Helper function to generate HTML data
+function generateHTMLFromPlan(plan: any): string {
+  const shiftsByDate = new Map();
+
+  plan.scheduledShifts?.forEach((scheduledShift: any) => {
+    const date = scheduledShift.date;
+    if (!shiftsByDate.has(date)) {
+      shiftsByDate.set(date, []);
+    }
+    shiftsByDate.get(date).push(scheduledShift);
+  });
+
+  const sortedDates = Array.from(shiftsByDate.keys()).sort();
+
+  let html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Schichtplan: ${plan.name}</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        h1 { color: #2c3e50; }
+        h2 { color: #34495e; margin-top: 30px; }
+        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
+        th { background-color: #f2f2f2; font-weight: bold; }
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        .summary { background-color: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
+        .date-section { margin-bottom: 30px; }
+    </style>
+</head>
+<body>
+    <h1>Schichtplan: ${plan.name}</h1>
+    
+    <div class="summary">
+        <h2>Plan Informationen</h2>
+        <p><strong>Zeitraum:</strong> ${plan.startDate} bis ${plan.endDate}</p>
+        <p><strong>Status:</strong> ${plan.status}</p>
+        <p><strong>Erstellt von:</strong> ${plan.created_by_name || 'Unbekannt'}</p>
+        <p><strong>Erstellt am:</strong> ${plan.createdAt}</p>
+        <p><strong>Anzahl Schichten:</strong> ${plan.scheduledShifts?.length || 0}</p>
+    </div>
+
+    <h2>Schichtzuweisungen</h2>
+  `;
+
+  sortedDates.forEach(date => {
+    const dateShifts = shiftsByDate.get(date);
+    const dateObj = new Date(date);
+    const dayName = getGermanDayName(dateObj.getDay());
+
+    html += `
+    <div class="date-section">
+        <h3>${date} (${dayName})</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Schicht</th>
+                    <th>Zeit</th>
+                    <th>Zugewiesene Mitarbeiter</th>
+                    <th>Benötigte Mitarbeiter</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+
+    dateShifts.forEach((scheduledShift: any) => {
+      const timeSlot = plan.timeSlots?.find((ts: any) => ts.id === scheduledShift.timeSlotId);
+      const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+        const employee = plan.employees?.find((emp: any) => emp.id === empId);
+        return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+      }).join(', ') || 'Keine Zuweisungen';
+
+      html += `
+                <tr>
+                    <td>${timeSlot?.name || 'Unbekannt'}</td>
+                    <td>${timeSlot ? `${timeSlot.startTime} - ${timeSlot.endTime}` : ''}</td>
+                    <td>${employeeNames}</td>
+                    <td>${scheduledShift.requiredEmployees || 2}</td>
+                </tr>
+      `;
+    });
+
+    html += `
+            </tbody>
+        </table>
+    </div>
+    `;
+  });
+
+  html += `
+    <div style="margin-top: 40px; font-size: 12px; color: #666; text-align: center;">
+        Erstellt am: ${new Date().toLocaleString('de-DE')}
+    </div>
+</body>
+</html>
+  `;
+
+  return html;
+}
+
+// Helper function to get German day names
+function getGermanDayName(dayIndex: number): string {
+  const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+  return days[dayIndex];
+}

backend/src/middleware/rateLimit.ts

@@ -72,8 +72,8 @@ const getRateLimitConfig = () => {
   return {
     windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes default
     max: isProduction 
-      ? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '100')  // Stricter in production
-      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000'), // More lenient in development
+      ? parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '1000')  // Stricter in production
+      : parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '5000'), // More lenient in development
     
     // Development-specific relaxations
     skip: (req: Request) => {
@@ -112,7 +112,7 @@ export const apiLimiter = rateLimit({
 // Strict limiter for auth endpoints
 export const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '5'),
+  max: parseInt(process.env.AUTH_RATE_LIMIT_MAX_REQUESTS || '100'),
   message: { 
     error: 'Zu viele Login-Versuche, bitte versuchen Sie es später erneut' 
   },
@@ -135,7 +135,7 @@ export const authLimiter = rateLimit({
 // Separate limiter for expensive endpoints
 export const expensiveEndpointLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
-  max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '10'),
+  max: parseInt(process.env.EXPENSIVE_ENDPOINT_LIMIT || '100'),
   message: {
     error: 'Zu viele Anfragen für diese Ressource'
   },

backend/src/routes/shiftPlans.ts

@@ -7,7 +7,9 @@ import {
   updateShiftPlan, 
   deleteShiftPlan,
   createFromPreset,
-  clearAssignments
+  clearAssignments,
+  exportShiftPlanToExcel,
+  exportShiftPlanToPDF
 } from '../controllers/shiftPlanController.js';
 import { 
   validateShiftPlan, 
@@ -30,4 +32,7 @@ router.put('/:id', validateId, validateShiftPlanUpdate, handleValidationErrors,
 router.delete('/:id', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), deleteShiftPlan);
 router.post('/:id/clear-assignments', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), clearAssignments);
 
+router.get('/:id/export/excel', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToExcel);
+router.get('/:id/export/pdf', validateId, handleValidationErrors, requireRole(['admin', 'maintenance']), exportShiftPlanToPDF);
+
 export default router;

backend/src/server.ts

@@ -85,7 +85,7 @@ if (process.env.NODE_ENV === 'production') {
 
 const configureTrustProxy = (): string | string[] | boolean | number => {
   const trustedProxyIps = process.env.TRUSTED_PROXY_IPS;
-  const trustProxyEnabled = process.env.TRUST_PROXY_ENABLED !== 'false'; // Default true for production
+  const trustProxyEnabled = process.env.TRUST_PROXY_ENABLED !== 'false';
 
   // If explicitly disabled
   if (!trustProxyEnabled) {
@@ -106,25 +106,28 @@ const configureTrustProxy = (): string | string[] | boolean | number => {
     return trustedProxyIps.trim();
   }
 
-  // Default behavior based on environment
-  if (process.env.NODE_ENV === 'production') {
-    console.log('🔒 Trust proxy: Using production defaults (private networks)');
-    return [
-      'loopback', 
-      'linklocal', 
-      'uniquelocal',
-      '10.0.0.0/8',
-      '172.16.0.0/12', 
-      '192.168.0.0/16'
-    ];
-  } else {
-    console.log('🔒 Trust proxy: Development mode (disabled)');
-    return false;
-  }
+  // Default behavior for reverse proxy setup
+  console.log('🔒 Trust proxy: Using reverse proxy defaults (trust all)');
+  return true; // Trust all proxies when behind nginx
 };
 
 app.set('trust proxy', configureTrustProxy());
 
+app.use((req, res, next) => {
+  const protocol = req.headers['x-forwarded-proto'] || req.protocol;
+  const isHttps = protocol === 'https';
+  
+  // Add security warning for HTTP requests
+  if (!isHttps && process.env.NODE_ENV === 'production') {
+    res.setHeader('X-Security-Warning', 'This application is being accessed over HTTP. For secure communication, please use HTTPS.');
+    
+    // Log HTTP access in production
+    console.warn(`⚠️  HTTP access detected: ${req.method} ${req.path} from ${req.ip}`);
+  }
+  
+  next();
+});
+
 // Security headers
 app.use(helmet({
   contentSecurityPolicy: {
@@ -138,9 +141,14 @@ app.use(helmet({
       objectSrc: ["'none'"],
       mediaSrc: ["'self'"],
       frameSrc: ["'none'"],
+      upgradeInsecureRequests: process.env.FORCE_HTTPS === 'true' ? [] : null
     },
   },
-  hsts: false,
+  hsts: {
+    maxAge: 31536000,
+    includeSubDomains: true,
+    preload: true
+  }, // Enable HSTS for HTTPS
   crossOriginEmbedderPolicy: false
 }));
 

docker-compose.yml

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

docker-init.sh

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

frontend/index.html

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

frontend/package.json

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

frontend/src/App.tsx

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

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

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

frontend/src/components/SecurityWarning/SecurityWarning.tsx

@@ -0,0 +1,59 @@
+// src/components/SecurityWarning/SecurityWarning.tsx
+import React, { useState, useEffect } from 'react';
+
+const SecurityWarning: React.FC = () => {
+  const [isHttp, setIsHttp] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+
+  useEffect(() => {
+    // Check if current protocol is HTTP
+    const checkProtocol = () => {
+      setIsHttp(window.location.protocol === 'http:');
+    };
+
+    checkProtocol();
+    window.addEventListener('load', checkProtocol);
+    
+    return () => window.removeEventListener('load', checkProtocol);
+  }, []);
+
+  if (!isHttp || isDismissed) {
+    return null;
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: '#ff6b35',
+      color: 'white',
+      padding: '10px 20px',
+      textAlign: 'center',
+      zIndex: 10000,
+      fontSize: '14px',
+      fontWeight: 'bold',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
+    }}>
+      ⚠️ SECURITY WARNING: This site is being accessed over HTTP. 
+      For secure communication, please use HTTPS.
+      <button 
+        onClick={() => setIsDismissed(true)}
+        style={{
+          marginLeft: '15px',
+          background: 'rgba(255,255,255,0.2)',
+          border: '1px solid white',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '3px',
+          cursor: 'pointer'
+        }}
+      >
+        Dismiss
+      </button>
+    </div>
+  );
+};
+
+export default SecurityWarning;

frontend/src/design/DesignSystem.txt

@@ -19,6 +19,8 @@ export const designTokens = {
       9: '#cda8f0',
       10: '#ebd7fa',
     },
+
+    manager: '#CC0000',
     
     // Semantic Colors
     primary: '#51258f',

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -10,6 +10,7 @@ import { ShiftPlan, TimeSlot, ScheduledShift } from '../../models/ShiftPlan';
 import { Employee, EmployeeAvailability } from '../../models/Employee';
 import { useNotification } from '../../contexts/NotificationContext';
 import { formatDate, formatTime } from '../../utils/foramatters';
+import { saveAs } from 'file-saver';
 
 // Local interface extensions (same as AvailabilityManager)
 interface ExtendedTimeSlot extends TimeSlot {
@@ -54,6 +55,7 @@ const ShiftPlanView: React.FC = () => {
   const [scheduledShifts, setScheduledShifts] = useState<ScheduledShift[]>([]);
   const [showAssignmentPreview, setShowAssignmentPreview] = useState(false);
   const [recreating, setRecreating] = useState(false);
+  const [exporting, setExporting] = useState(false);
 
   useEffect(() => {
     loadShiftPlanData();
@@ -240,6 +242,66 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
+  const handleExportExcel = async () => {
+    if (!shiftPlan) return;
+
+    try {
+      setExporting(true);
+      
+      // Call the export service
+      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+      
+      // Use file-saver to download the file
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      
+      showNotification({
+        type: 'success',
+        title: 'Export erfolgreich',
+        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
+      });
+      
+    } catch (error) {
+      console.error('Error exporting to Excel:', error);
+      showNotification({
+        type: 'error',
+        title: 'Export fehlgeschlagen',
+        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleExportPDF = async () => {
+    if (!shiftPlan) return;
+
+    try {
+      setExporting(true);
+      
+      // Call the PDF export service
+      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+      
+      // Use file-saver to download the file
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      
+      showNotification({
+        type: 'success',
+        title: 'Export erfolgreich',
+        message: 'Der Schichtplan wurde als PDF exportiert.'
+      });
+      
+    } catch (error) {
+      console.error('Error exporting to PDF:', error);
+      showNotification({
+        type: 'error',
+        title: 'Export fehlgeschlagen',
+        message: 'Der PDF-Export konnte nicht durchgeführt werden.'
+      });
+    } finally {
+      setExporting(false);
+    }
+  };
+
   const loadShiftPlanData = async () => {
     if (!id) return;
     
@@ -399,12 +461,12 @@ const ShiftPlanView: React.FC = () => {
       console.log('- Scheduled Shifts:', scheduledShifts.length);
 
       // DEBUG: Show shift pattern IDs
-      if (shiftPlan.shifts) {
+      /*if (shiftPlan.shifts) {
         console.log('📋 SHIFT PATTERN IDs:');
         shiftPlan.shifts.forEach((shift, index) => {
           console.log(`   ${index + 1}. ${shift.id} (Day ${shift.dayOfWeek}, TimeSlot ${shift.timeSlotId})`);
         });
-      }
+      }*/
 
       const constraints = {
         enforceNoTraineeAlone: true,
@@ -650,6 +712,20 @@ const ShiftPlanView: React.FC = () => {
     return employeesWithoutAvailabilities.length === 0;
   };
 
+  const canPublishAssignment = (): boolean => {
+    if (!assignmentResult) return false;
+    
+    // Check if assignment was successful
+    if (assignmentResult.success === false) return false;
+    
+    // Check if there are any critical violations
+    const hasCriticalViolations = assignmentResult.violations.some(v => 
+      v.includes('ERROR:') || v.includes('KRITISCH:')
+    );
+    
+    return !hasCriticalViolations;
+  };
+
   const getAvailabilityStatus = () => {
     const totalEmployees = employees.length;
     const employeesWithAvailabilities = new Set(
@@ -820,9 +896,6 @@ const ShiftPlanView: React.FC = () => {
                     <div style={{ fontSize: '14px', color: '#666' }}>
                       {formatTime(timeSlot.startTime)} - {formatTime(timeSlot.endTime)}
                     </div>
-                    <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
-                      ID: {timeSlot.id.substring(0, 8)}...
-                    </div>
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
@@ -846,7 +919,55 @@ const ShiftPlanView: React.FC = () => {
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
                     
                     let assignedEmployees: string[] = [];
-                    let displayText = '';
+                    let displayContent: React.ReactNode = null;
+
+                    // Helper function to create employee boxes
+                    const createEmployeeBoxes = (employeeIds: string[]) => {
+                      return employeeIds.map(empId => {
+                        const employee = employees.find(emp => emp.id === empId);
+                        if (!employee) return null;
+                        
+                        // Determine background color based on employee role
+                        let backgroundColor = '#642ab5'; // Default: non-trainee personnel (purple)
+                        
+                        if (employee.isTrainee) {
+                          backgroundColor = '#cda8f0'; // Trainee
+                        } else if (employee.roles?.includes('manager')) {
+                          backgroundColor = '#CC0000'; // Manager
+                        }
+                        
+                        return (
+                          <div
+                            key={empId}
+                            style={{
+                              backgroundColor,
+                              color: 'white',
+                              padding: '4px 8px',
+                              borderRadius: '4px',
+                              marginBottom: '2px',
+                              fontSize: '12px',
+                              textAlign: 'center',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis'
+                            }}
+                            title={`${employee.firstname} ${employee.lastname}${employee.isTrainee ? ' (Trainee)' : ''}`}
+                          >
+                            {employee.firstname} {employee.lastname}
+                          </div>
+                        );
+                      }).filter(Boolean);
+                    };
+
+                    // Helper function to get fallback content
+                    const getFallbackContent = () => {
+                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                        s.dayOfWeek === weekday.id && 
+                        s.timeSlotId === timeSlot.id
+                      ) || [];
+                      const totalRequired = shiftsForSlot.reduce((sum, s) => sum + s.requiredEmployees, 0);
+                      return totalRequired === 0 ? '-' : `0/${totalRequired}`;
+                    };
 
                     if (shiftPlan?.status === 'published') {
                       // For published plans, use actual assignments from scheduled shifts
@@ -859,15 +980,21 @@ const ShiftPlanView: React.FC = () => {
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
                         
-                        // DEBUG: Log if we're still seeing old data
+                        // Log if we're still seeing old data
                         if (assignedEmployees.length > 0) {
                           console.warn(`⚠️ Found non-empty assignments for ${weekday.name} ${timeSlot.name}:`, assignedEmployees);
                         }
                         
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
@@ -879,30 +1006,26 @@ const ShiftPlanView: React.FC = () => {
                       
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     }
 
-                    // If no assignments yet, show empty or required count
-                    if (!displayText) {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
-                        s.dayOfWeek === weekday.id && 
-                        s.timeSlotId === timeSlot.id
-                      ) || [];
-                      
-                      const totalRequired = shiftsForSlot.reduce((sum, s) => 
-                        sum + s.requiredEmployees, 0);
-                      
-                      // Show "0/2" instead of just "0" to indicate it's empty
-                      displayText = `0/${totalRequired}`;
-                      
-                      // Optional: Show empty state more clearly
-                      if (totalRequired === 0) {
-                        displayText = '-';
-                      }
+                    // If no display content set yet, use fallback
+                    if (!displayContent) {
+                      displayContent = (
+                        <div style={{ color: '#666', fontStyle: 'italic' }}>
+                          {getFallbackContent()}
+                        </div>
+                      );
                     }
 
                     return (
@@ -937,7 +1060,7 @@ const ShiftPlanView: React.FC = () => {
                           </div>
                         )}
 
-                        {displayText}
+                        {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
                         <div style={{ 
@@ -947,8 +1070,6 @@ const ShiftPlanView: React.FC = () => {
                           textAlign: 'left',
                           fontFamily: 'monospace'
                         }}>
-                          <div>Shift: {shift.id.substring(0, 6)}...</div>
-                          <div>Day: {shift.dayOfWeek}</div>
                           {!isValidShift && (
                             <div style={{ color: '#e74c3c', fontWeight: 'bold' }}>
                               VALIDATION ERROR
@@ -963,7 +1084,6 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
-
       </div>
     );
   };
@@ -1005,7 +1125,50 @@ const ShiftPlanView: React.FC = () => {
           </div>
         </div>
           <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-            {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+            <>
+              <button
+                onClick={handleExportExcel}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#27ae60',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                {exporting ? '🔄' : '📊'} {exporting ? 'Exportiert...' : 'Excel Export'}
+              </button>
+              
+              <button
+                onClick={handleExportPDF}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#e74c3c',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                {exporting ? '🔄' : '📄'} {exporting ? 'Exportiert...' : 'PDF Export'}
+              </button>
+            </>
+          )}
+          
+          {/* "Zuweisungen neu berechnen" button */}
+          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
               disabled={recreating}
@@ -1197,15 +1360,13 @@ const ShiftPlanView: React.FC = () => {
               </div>
             )}
               
-            {/* KORRIGIERTE ZUSAMMENFASSUNG */}
+            {/* ZUSAMMENFASSUNG */}
             {assignmentResult && (
               <div style={{ marginBottom: '20px' }}>
                 <h4>Zusammenfassung:</h4>
                 
                 {/* Entscheidung basierend auf tatsächlichen kritischen Problemen */}
-                {assignmentResult.violations.filter(v => 
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length === 0 ? (
+                {(assignmentResult.violations.length === 0) || assignmentResult.success == true ? (
                   <div style={{
                     padding: '15px',
                     backgroundColor: '#d4edda',
@@ -1288,32 +1449,24 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
               
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
-                disabled={publishing || (assignmentResult ? assignmentResult.violations.filter(v => 
-                  v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                ).length > 0 : true)}
+                disabled={publishing || !canPublishAssignment()}
                 style={{
                   padding: '10px 20px',
-                  backgroundColor: assignmentResult ? (assignmentResult.violations.filter(v => 
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? '#2ecc71' : '#95a5a6') : '#95a5a6',
+                  backgroundColor: canPublishAssignment() ? '#2ecc71' : '#95a5a6',
                   color: 'white',
                   border: 'none',
                   borderRadius: '4px',
-                  cursor: assignmentResult ? (assignmentResult.violations.filter(v => 
-                    v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                  ).length === 0 ? 'pointer' : 'not-allowed') : 'not-allowed',
+                  cursor: canPublishAssignment() ? 'pointer' : 'not-allowed',
                   fontWeight: 'bold',
                   fontSize: '16px'
                 }}
               >
                 {publishing ? 'Veröffentliche...' : (
                   assignmentResult ? (
-                    assignmentResult.violations.filter(v => 
-                      v.includes('ERROR:') || v.includes('❌ KRITISCH:')
-                    ).length === 0 
+                    canPublishAssignment() 
                       ? 'Schichtplan veröffentlichen' 
                       : 'Kritische Probleme müssen behoben werden'
                   ) : 'Lade Zuordnungen...'

frontend/src/services/apiClient.ts

@@ -26,7 +26,7 @@ export class ApiClient {
     return token ? { 'Authorization': `Bearer ${token}` } : {};
   }
 
-  private async handleApiResponse<T>(response: Response): Promise<T> {
+  private async handleApiResponse<T>(response: Response, responseType: 'json' | 'blob' = 'json'): Promise<T> {
     if (!response.ok) {
       let errorData;
       
@@ -61,7 +61,12 @@ export class ApiClient {
       );
     }
 
-    // For successful responses, try to parse as JSON
+    // Handle blob responses (for file downloads)
+    if (responseType === 'blob') {
+      return response.blob() as Promise<T>;
+    }
+
+    // For successful JSON responses, try to parse as JSON
     try {
       const responseText = await response.text();
       return responseText ? JSON.parse(responseText) : {} as T;
@@ -71,7 +76,7 @@ export class ApiClient {
     }
   }
 
-  async request<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+  async request<T>(endpoint: string, options: RequestInit = {}, responseType: 'json' | 'blob' = 'json'): Promise<T> {
     const url = `${this.baseURL}${endpoint}`;
     
     const config: RequestInit = {
@@ -85,7 +90,7 @@ export class ApiClient {
 
     try {
       const response = await fetch(url, config);
-      return await this.handleApiResponse<T>(response);
+      return await this.handleApiResponse<T>(response, responseType);
     } catch (error) {
       // Re-throw the error to be caught by useBackendValidation
       if (error instanceof ApiError) {

frontend/src/services/shiftPlanService.ts

@@ -126,4 +126,60 @@ export const shiftPlanService = {
       throw error;
     }
   },
+
+  async exportShiftPlanToExcel(planId: string): Promise<Blob> {
+    try {
+      console.log('📊 Exporting shift plan to Excel:', planId);
+      
+      // Use the apiClient with blob response handling
+      const blob = await apiClient.request<Blob>(`/shift-plans/${planId}/export/excel`, {
+        method: 'GET',
+      }, 'blob');
+      
+      console.log('✅ Excel export successful');
+      return blob;
+    } catch (error: any) {
+      console.error('❌ Error exporting to Excel:', error);
+      
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      
+      if (error.statusCode === 404) {
+        throw new Error('Schichtplan nicht gefunden');
+      }
+      
+      throw new Error('Fehler beim Excel-Export des Schichtplans');
+    }
+  },
+
+  async exportShiftPlanToPDF(planId: string): Promise<Blob> {
+    try {
+      console.log('📄 Exporting shift plan to PDF:', planId);
+      
+      // Use the apiClient with blob response handling
+      const blob = await apiClient.request<Blob>(`/shift-plans/${planId}/export/pdf`, {
+        method: 'GET',
+      }, 'blob');
+      
+      console.log('✅ PDF export successful');
+      return blob;
+    } catch (error: any) {
+      console.error('❌ Error exporting to PDF:', error);
+      
+      if (error.statusCode === 401) {
+        localStorage.removeItem('token');
+        localStorage.removeItem('employee');
+        throw new Error('Nicht authorisiert - bitte erneut anmelden');
+      }
+      
+      if (error.statusCode === 404) {
+        throw new Error('Schichtplan nicht gefunden');
+      }
+      
+      throw new Error('Fehler beim PDF-Export des Schichtplans');
+    }
+  },
 };