added dropdown menu

backend/package.json

@@ -27,8 +27,7 @@
     "helmet": "8.1.0",
     "express-validator": "7.3.0",
     "exceljs": "4.4.0",
-    "pdfkit": "0.12.3",
+    "playwright": "^1.37.0"
-    "@types/pdfkit": "^0.12.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

backend/src/controllers/shiftPlanController.ts

@@ -9,7 +9,7 @@ import {
 import { AuthRequest } from '../middleware/auth.js';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
 import ExcelJS from 'exceljs';
-import PDFDocument from 'pdfkit';
+import { chromium } from 'playwright';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`
@@ -1081,6 +1081,7 @@ function getTimetableDataForExport(plan: any): ExportTimetableData {
   return { days, allTimeSlots };
 }
 
+// Export shift plan to Excel
 // Export shift plan to Excel
 export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
   try {
@@ -1103,7 +1104,7 @@ export const exportShiftPlanToExcel = async (req: Request, res: Response): Promi
     workbook.created = new Date();
 
     /* -------------------------------------------------------------------------- */
-    /*                           🧾 1. Summary Sheet                              */
+    /*                           📋 1. Summary Sheet                              */
     /* -------------------------------------------------------------------------- */
     const summarySheet = workbook.addWorksheet('Planübersicht');
     summarySheet.columns = [
@@ -1135,6 +1136,19 @@ export const exportShiftPlanToExcel = async (req: Request, res: Response): Promi
     const timetableData = getTimetableDataForExport(plan);
     const { days, allTimeSlots } = timetableData;
 
+    // Calculate max employees per shift to determine row structure
+    let maxEmployeesPerShift = 1;
+    for (const timeSlot of allTimeSlots) {
+      for (const day of days) {
+        const scheduledShift = plan.scheduledShifts?.find(
+          (s: any) => getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
+        );
+        if (scheduledShift && scheduledShift.assignedEmployees?.length > maxEmployeesPerShift) {
+          maxEmployeesPerShift = scheduledShift.assignedEmployees.length;
+        }
+      }
+    }
+
     // Header
     const headerRow = ['Schicht (Zeit)', ...days.map(d => d.name)];
     const header = timetableSheet.addRow(headerRow);
@@ -1150,87 +1164,133 @@ export const exportShiftPlanToExcel = async (req: Request, res: Response): Promi
       };
     });
 
-    // Content rows
+    // Content rows - each time slot can have multiple employee rows
     for (const timeSlot of allTimeSlots) {
-      const rowData: any[] = [`${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`];
+      // Find max employees for this time slot across all days
-
+      let maxEmployeesInTimeSlot = 0;
       for (const day of days) {
-        const shift = timeSlot.shiftsByDay[day.id];
-        if (!shift) {
-          rowData.push('Keine Schicht');
-          continue;
-        }
-
         const scheduledShift = plan.scheduledShifts?.find(
           (s: any) => getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
         );
-
+        if (scheduledShift && scheduledShift.assignedEmployees?.length > maxEmployeesInTimeSlot) {
-        if (scheduledShift && scheduledShift.assignedEmployees?.length > 0) {
+          maxEmployeesInTimeSlot = scheduledShift.assignedEmployees.length;
-          const employees = scheduledShift.assignedEmployees.map((empId: string) => {
-            const emp = plan.employees?.find((e: any) => e.id === empId);
-            if (!emp) return { text: 'Unbekannt', color: 'FF888888' };
-
-            if (emp.isTrainee)
-              return { text: `${emp.firstname} ${emp.lastname} (T)`, color: 'FFCDA8F0' };
-            if (emp.employee_type === 'manager')
-              return { text: `${emp.firstname} ${emp.lastname} (M)`, color: 'FFCC0000' };
-            return { text: `${emp.firstname} ${emp.lastname}`, color: 'FF642AB5' };
-          });
-          rowData.push(employees);
-        } else {
-          const shiftsForSlot =
-            plan.shifts?.filter(
-              (s: any) => s.dayOfWeek === day.id && s.timeSlotId === timeSlot.id
-            ) || [];
-          const totalRequired = shiftsForSlot.reduce(
-            (sum: number, s: any) => sum + s.requiredEmployees,
-            0
-          );
-          rowData.push(totalRequired === 0 ? '-' : `0/${totalRequired}`);
         }
       }
 
-      const row = timetableSheet.addRow(rowData);
+      // If no employees assigned, show at least one row with requirement count
+      const rowsToCreate = Math.max(maxEmployeesInTimeSlot, 1);
 
-      row.eachCell((cell, colNumber) => {
+      for (let empIndex = 0; empIndex < rowsToCreate; empIndex++) {
-        cell.border = {
+        const rowData: any[] = [];
-          top: { style: 'thin' },
-          left: { style: 'thin' },
-          bottom: { style: 'thin' },
-          right: { style: 'thin' }
-        };
-        cell.alignment = { vertical: 'top', wrapText: true };
 
-        if (cell.value === 'Keine Schicht') {
+        // First cell: time slot name (only in first row, merged for others)
-          cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFEDEDED' } };
+        if (empIndex === 0) {
-          cell.font = { color: { argb: 'FF888888' }, italic: true };
+          rowData.push(`${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`);
+        } else {
+          rowData.push(''); // Empty for merged cells
         }
 
-        if (Array.isArray(cell.value)) {
+        // Day cells
-          cell.value = {
+        for (const day of days) {
-            richText: cell.value.map((e: any) => ({
+          const shift = timeSlot.shiftsByDay[day.id];
-              text: e.text + '\n',
+
-              font: { color: { argb: e.color } }
+          if (!shift) {
-            }))
+            rowData.push(empIndex === 0 ? 'Keine Schicht' : '');
+            continue;
+          }
+
+          const scheduledShift = plan.scheduledShifts?.find(
+            (s: any) => getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
+          );
+
+          if (scheduledShift && scheduledShift.assignedEmployees?.length > 0) {
+            if (empIndex < scheduledShift.assignedEmployees.length) {
+              const empId = scheduledShift.assignedEmployees[empIndex];
+              const emp = plan.employees?.find((e: any) => e.id === empId);
+
+              if (!emp) {
+                rowData.push({ text: 'Unbekannt', color: 'FF888888' });
+              } else if (emp.isTrainee) {
+                rowData.push({
+                  text: `${emp.firstname} ${emp.lastname} (T)`,
+                  color: 'FFCDA8F0'
+                });
+              } else if (emp.employeeType === 'manager') {
+                rowData.push({
+                  text: `${emp.firstname} ${emp.lastname} (M)`,
+                  color: 'FFCC0000'
+                });
+              } else {
+                rowData.push({
+                  text: `${emp.firstname} ${emp.lastname}`,
+                  color: 'FF642AB5'
+                });
+              }
+            } else {
+              rowData.push(''); // Empty cell if no more employees
+            }
+          } else {
+            // No employees assigned, show requirement count only in first row
+            if (empIndex === 0) {
+              const shiftsForSlot = plan.shifts?.filter(
+                (s: any) => s.dayOfWeek === day.id && s.timeSlotId === timeSlot.id
+              ) || [];
+              const totalRequired = shiftsForSlot.reduce(
+                (sum: number, s: any) => sum + s.requiredEmployees,
+                0
+              );
+              rowData.push(totalRequired === 0 ? '-' : `0/${totalRequired}`);
+            } else {
+              rowData.push('');
+            }
+          }
+        }
+
+        const row = timetableSheet.addRow(rowData);
+
+        row.eachCell((cell, colNumber) => {
+          cell.border = {
+            top: { style: 'thin' },
+            left: { style: 'thin' },
+            bottom: { style: 'thin' },
+            right: { style: 'thin' }
           };
-        }
+          cell.alignment = { vertical: 'middle', wrapText: true, horizontal: 'center' };
 
-        if (colNumber === 1) {
+          // Handle colored employee names
-          cell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
+          if (typeof cell.value === 'object' && cell.value !== null && 'text' in cell.value) {
-        }
+            const employeeData = cell.value as unknown as { text: string; color: string };
-      });
+            cell.value = employeeData.text;
+            cell.font = { color: { argb: employeeData.color } };
+            cell.alignment = { vertical: 'middle', horizontal: 'left' };
+          }
+
+          if (cell.value === 'Keine Schicht') {
+            cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFEDEDED' } };
+            cell.font = { color: { argb: 'FF888888' }, italic: true };
+          }
+
+          if (colNumber === 1) {
+            cell.alignment = { horizontal: 'left', vertical: 'middle', wrapText: true };
+          }
+        });
+
+        row.height = 25;
+      }
+
+      // Merge time slot cells vertically if multiple rows were created
+      if (rowsToCreate > 1) {
+        const currentRow = timetableSheet.lastRow!.number;
+        const startRow = currentRow - rowsToCreate + 1;
+        timetableSheet.mergeCells(startRow, 1, currentRow, 1);
+      }
     }
 
-    // Adjust layout
+    // Adjust column widths
-    timetableSheet.eachRow((row, i) => (row.height = i === 1 ? 30 : 70));
+    timetableSheet.getColumn(1).width = 25; // Time slot column
-    timetableSheet.columns.forEach(col => {
+    for (let i = 2; i <= days.length + 1; i++) {
-      let max = 12;
+      timetableSheet.getColumn(i).width = 30;
-      col.eachCell?.({ includeEmpty: true }, c => {
+    }
-        const len = typeof c.value === 'string' ? c.value.length : 10;
-        if (len > max) max = len;
-      });
-      col.width = Math.min(max + 5, 40);
-    });
 
     // Add legend row at bottom
     const legendRow = timetableSheet.addRow([
@@ -1271,7 +1331,7 @@ export const exportShiftPlanToExcel = async (req: Request, res: Response): Promi
         name: `${e.firstname} ${e.lastname}`,
         email: e.email,
         role: e.roles?.join(', ') || 'Benutzer',
-        type: e.employee_type || 'Unbekannt',
+        type: e.employeeType || 'Unbekannt',
         contract: e.contractType || 'Nicht angegeben',
         trainee: e.isTrainee ? 'Ja' : 'Nein'
       })
@@ -1298,12 +1358,11 @@ export const exportShiftPlanToExcel = async (req: Request, res: Response): Promi
 };
 
 export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise<void> => {
+  let browser;
   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' });
@@ -1315,235 +1374,419 @@ export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise
       return;
     }
 
-    // Create PDF document
+    // Get timetable data (same as Excel)
-    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;
-
-    // Get timetable data for PDF
     const timetableData = getTimetableDataForExport(plan);
     const { days, allTimeSlots } = timetableData;
 
-    // Add timetable section
+    // Generate HTML content
-    doc.addPage();
+    const html = `
-    doc.fontSize(16).font('Helvetica-Bold').text('Schichtplan Timetable', 50, 50);
+<!DOCTYPE html>
-
+<html lang="de">
-    let currentY = 80;
+<head>
-
+  <meta charset="UTF-8">
-    // Define column widths
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    const timeSlotColWidth = 100;
+  <title>Schichtplan - ${plan.name}</title>
-    const dayColWidth = (500 - timeSlotColWidth) / days.length;
+  <style>
-
+    * { margin: 0; padding: 0; box-sizing: border-box; }
-    // Table headers
+    body { 
-    doc.fontSize(10).font('Helvetica-Bold');
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
+      font-size: 10pt;
-    // Time slot header
+      line-height: 1.4;
-    doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+      color: #2c3e50;
-    doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
+      padding: 20px;
-
-    // Day headers
-    days.forEach((day, index) => {
-      const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
-      doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
-      doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
-    });
-
-    doc.fillColor('black');
-    currentY += 20;
-
-    // Time slot rows
-    allTimeSlots.forEach((timeSlot, rowIndex) => {
-      // Check if we need a new page
-      if (currentY > 650) {
-        doc.addPage();
-        currentY = 50;
-
-        // Redraw headers on new page
-        doc.fontSize(10).font('Helvetica-Bold');
-        doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
-        doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
-
-        days.forEach((day, index) => {
-          const xPos = 50 + timeSlotColWidth + (index * dayColWidth);
-          doc.rect(xPos, currentY, dayColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
-          doc.fillColor('white').text(day.name, xPos + 5, currentY + 5, { width: dayColWidth - 10, align: 'center' });
-        });
-
-        doc.fillColor('black');
-        currentY += 20;
-      }
-
-      // Alternate row background
-      const rowBgColor = rowIndex % 2 === 0 ? '#f8f9fa' : 'white';
-
-      // Time slot cell
-      doc.rect(50, currentY, timeSlotColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
-      doc.fontSize(9).font('Helvetica-Bold').text(timeSlot.name, 55, currentY + 5, { width: timeSlotColWidth - 10 });
-      doc.fontSize(8).font('Helvetica').text(`${timeSlot.startTime} - ${timeSlot.endTime}`, 55, currentY + 18, { width: timeSlotColWidth - 10 });
-
-      // Day cells
-      days.forEach((day, colIndex) => {
-        const xPos = 50 + timeSlotColWidth + (colIndex * dayColWidth);
-        const shift = timeSlot.shiftsByDay[day.id];
-
-        doc.rect(xPos, currentY, dayColWidth, 40).fillAndStroke(rowBgColor, '#dee2e6');
-
-        if (!shift) {
-          doc.fontSize(8).font('Helvetica-Oblique').fillColor('#ccc').text('Keine Schicht', xPos + 5, currentY + 15, {
-            width: dayColWidth - 10,
-            align: 'center'
-          });
-        } else {
-          // Get assignments for this time slot and day
-          const scheduledShift = plan.scheduledShifts?.find((scheduled: any) => {
-            const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-            return scheduledDayOfWeek === day.id &&
-              scheduled.timeSlotId === timeSlot.id;
-          });
-
-          doc.fillColor('black').fontSize(8).font('Helvetica');
-
-          if (scheduledShift && scheduledShift.assignedEmployees.length > 0) {
-            let textY = currentY + 5;
-            scheduledShift.assignedEmployees.forEach((empId: string, empIndex: number) => {
-              if (textY < currentY + 35) { // Don't overflow cell
-                const employee = plan.employees?.find((emp: any) => emp.id === empId);
-                if (employee) {
-                  let roleIndicator = '';
-                  if (employee.isTrainee) {
-                    roleIndicator = ' (T)';
-                    doc.fillColor('#cda8f0'); // Trainee color
-                  } else if (employee.employee_type === 'manager') {
-                    roleIndicator = ' (M)';
-                    doc.fillColor('#CC0000'); // Manager color
-                  } else {
-                    doc.fillColor('#642ab5'); // Regular personnel color
-                  }
-
-                  const name = `${employee.firstname} ${employee.lastname}${roleIndicator}`;
-                  doc.text(name, xPos + 5, textY, { width: dayColWidth - 10, align: 'left' });
-                  textY += 10;
-                }
-              }
-            });
-            doc.fillColor('black');
-          } else {
-            // Show required count like in React component
-            const shiftsForSlot = plan.shifts?.filter((s: any) =>
-              s.dayOfWeek === day.id &&
-              s.timeSlotId === timeSlot.id
-            ) || [];
-            const totalRequired = shiftsForSlot.reduce((sum: number, s: any) => sum + s.requiredEmployees, 0);
-            const displayText = totalRequired === 0 ? '-' : `0/${totalRequired}`;
-
-            doc.fillColor('#666').fontSize(9).font('Helvetica-Oblique')
-              .text(displayText, xPos + 5, currentY + 15, { width: dayColWidth - 10, align: 'center' });
-            doc.fillColor('black');
-          }
-        }
-      });
-
-      currentY += 40;
-    });
-
-    // 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 }
-      );
     }
+    .header { 
+      margin-bottom: 30px; 
+      padding-bottom: 20px;
+      border-bottom: 3px solid #2c3e50;
+    }
+    h1 { 
+      font-size: 24pt; 
+      color: #2c3e50; 
+      margin-bottom: 10px;
+    }
+    .subtitle { 
+      font-size: 11pt; 
+      color: #7f8c8d; 
+      margin-bottom: 5px;
+    }
+    .info-section {
+      background: #f8f9fa;
+      padding: 15px;
+      border-radius: 5px;
+      margin-bottom: 30px;
+      page-break-inside: avoid;
+    }
+    .info-section h2 {
+      font-size: 14pt;
+      margin-bottom: 12px;
+      color: #34495e;
+      border-bottom: 2px solid #34495e;
+      padding-bottom: 5px;
+    }
+    .info-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    .info-item {
+      display: flex;
+      gap: 8px;
+    }
+    .info-label {
+      font-weight: 600;
+      color: #34495e;
+    }
+    .info-value {
+      color: #555;
+    }
+    
+    /* Timetable styles */
+    .timetable-section {
+      margin-top: 30px;
+      page-break-before: always;
+    }
+    .timetable-section h2 {
+      font-size: 16pt;
+      margin-bottom: 15px;
+      color: #2c3e50;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 20px;
+      page-break-inside: auto;
+    }
+    thead {
+      background: #2c3e50;
+      color: white;
+    }
+    thead th {
+      padding: 12px 8px;
+      text-align: center;
+      font-weight: 600;
+      border: 1px solid #2c3e50;
+      font-size: 10pt;
+    }
+    tbody tr {
+      page-break-inside: avoid;
+      page-break-after: auto;
+    }
+    tbody tr:nth-child(even) {
+      background: #f8f9fa;
+    }
+    td {
+      padding: 10px 8px;
+      border: 1px solid #dee2e6;
+      vertical-align: top;
+    }
+    .time-slot-cell {
+      font-weight: 600;
+      background: #ecf0f1;
+      white-space: nowrap;
+      min-width: 120px;
+    }
+    .time-slot-name {
+      font-size: 10pt;
+      color: #2c3e50;
+      margin-bottom: 3px;
+    }
+    .time-slot-time {
+      font-size: 9pt;
+      color: #7f8c8d;
+      font-weight: normal;
+    }
+    .employee-list {
+      list-style: none;
+      padding: 0;
+    }
+    .employee-list li {
+      margin-bottom: 4px;
+      font-size: 9pt;
+    }
+    .employee-manager { color: #CC0000; font-weight: 600; }
+    .employee-trainee { color: #CDA8F0; font-weight: 600; }
+    .employee-regular { color: #642AB5; }
+    .no-shift {
+      color: #999;
+      font-style: italic;
+      text-align: center;
+    }
+    .required-count {
+      color: #666;
+      font-style: italic;
+      text-align: center;
+    }
+    
+    /* Legend */
+    .legend {
+      margin-top: 15px;
+      padding: 10px;
+      background: #f8f9fa;
+      border-radius: 5px;
+      display: flex;
+      gap: 20px;
+      flex-wrap: wrap;
+      page-break-inside: avoid;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 9pt;
+    }
+    .legend-square {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+    }
+    
+    /* Employee section */
+    .employee-section {
+      margin-top: 30px;
+      page-break-before: always;
+    }
+    .employee-section h2 {
+      font-size: 16pt;
+      margin-bottom: 15px;
+      color: #2c3e50;
+    }
+    .employee-table {
+      width: 100%;
+    }
+    .employee-table thead {
+      background: #34495e;
+    }
+    .employee-table td {
+      font-size: 9pt;
+    }
+    
+    /* Footer */
+    .footer {
+      position: fixed;
+      bottom: 15px;
+      left: 20px;
+      right: 20px;
+      text-align: center;
+      font-size: 8pt;
+      color: #7f8c8d;
+      border-top: 1px solid #dee2e6;
+      padding-top: 8px;
+    }
+    
+    @media print {
+      body { padding: 15px; }
+      .header { page-break-after: avoid; }
+      .info-section { page-break-after: avoid; }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Schichtplan: ${plan.name}</h1>
+    <div class="subtitle">Erstellt am: ${new Date().toLocaleDateString('de-DE', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })}</div>
+  </div>
 
-    // Finalize PDF
+  <div class="info-section">
-    doc.end();
+    <h2>Plan Informationen</h2>
+    <div class="info-grid">
+      <div class="info-item">
+        <span class="info-label">Plan Name:</span>
+        <span class="info-value">${plan.name}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Status:</span>
+        <span class="info-value">${plan.status}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Beschreibung:</span>
+        <span class="info-value">${plan.description || 'Keine'}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Erstellt von:</span>
+        <span class="info-value">${plan.created_by_name || 'Unbekannt'}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Zeitraum:</span>
+        <span class="info-value">${plan.startDate} bis ${plan.endDate}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Erstellt am:</span>
+        <span class="info-value">${new Date(plan.createdAt).toLocaleString('de-DE')}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Anzahl Schichten:</span>
+        <span class="info-value">${plan.scheduledShifts?.length || 0}</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">Anzahl Mitarbeiter:</span>
+        <span class="info-value">${plan.employees?.length || 0}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="timetable-section">
+    <h2>Schichtplan Timetable</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Schicht (Zeit)</th>
+          ${days.map(day => `<th>${day.name}</th>`).join('')}
+        </tr>
+      </thead>
+      <tbody>
+        ${allTimeSlots.map(timeSlot => `
+          <tr>
+            <td class="time-slot-cell">
+              <div class="time-slot-name">${timeSlot.name}</div>
+              <div class="time-slot-time">${timeSlot.startTime} - ${timeSlot.endTime}</div>
+            </td>
+            ${days.map(day => {
+      const shift = timeSlot.shiftsByDay[day.id];
+
+      if (!shift) {
+        return '<td class="no-shift">Keine Schicht</td>';
+      }
+
+      const scheduledShift = plan.scheduledShifts?.find((s: any) =>
+        getDayOfWeek(s.date) === day.id && s.timeSlotId === timeSlot.id
+      );
+
+      if (scheduledShift && scheduledShift.assignedEmployees?.length > 0) {
+        const employeeItems = scheduledShift.assignedEmployees.map((empId: string) => {
+          const emp = plan.employees?.find((e: any) => e.id === empId);
+          if (!emp) return '<li>Unbekannt</li>';
+
+          let cssClass = 'employee-regular';
+          let suffix = '';
+
+          if (emp.isTrainee) {
+            cssClass = 'employee-trainee';
+            suffix = ' (T)';
+          } else if (emp.employeeType === 'manager') {
+            cssClass = 'employee-manager';
+            suffix = ' (M)';
+          }
+
+          return `<li class="${cssClass}">${emp.firstname} ${emp.lastname}${suffix}</li>`;
+        }).join('');
+
+        return `<td><ul class="employee-list">${employeeItems}</ul></td>`;
+      } else {
+        const shiftsForSlot = plan.shifts?.filter((s: any) =>
+          s.dayOfWeek === day.id && s.timeSlotId === timeSlot.id
+        ) || [];
+        const totalRequired = shiftsForSlot.reduce((sum: number, s: any) =>
+          sum + s.requiredEmployees, 0
+        );
+        const displayText = totalRequired === 0 ? '-' : `0/${totalRequired}`;
+        return `<td class="required-count">${displayText}</td>`;
+      }
+    }).join('')}
+          </tr>
+        `).join('')}
+      </tbody>
+    </table>
+    
+    <div class="legend">
+      <div class="legend-item">
+        <div class="legend-square" style="background: #CC0000;"></div>
+        <span>Manager</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-square" style="background: #CDA8F0;"></div>
+        <span>Trainee</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-square" style="background: #642AB5;"></div>
+        <span>Mitarbeiter</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-square" style="background: #ededed;"></div>
+        <span>Keine Schicht</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="employee-section">
+    <h2>Mitarbeiterübersicht</h2>
+    <table class="employee-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>E-Mail</th>
+          <th>Rolle</th>
+          <th>Mitarbeiter Typ</th>
+          <th>Vertragstyp</th>
+          <th>Trainee</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${plan.employees?.map((emp: any) => `
+          <tr>
+            <td>${emp.firstname} ${emp.lastname}</td>
+            <td>${emp.email}</td>
+            <td>${emp.roles?.join(', ') || 'Benutzer'}</td>
+            <td>${emp.employeeType || 'Unbekannt'}</td>
+            <td>${emp.contractType || 'Nicht angegeben'}</td>
+            <td>${emp.isTrainee ? 'Ja' : 'Nein'}</td>
+          </tr>
+        `).join('') || '<tr><td colspan="6" style="text-align: center; color: #999;">Keine Mitarbeiter</td></tr>'}
+      </tbody>
+    </table>
+  </div>
+
+  <div class="footer">
+    Erstellt am: ${new Date().toLocaleString('de-DE')} • Schichtplaner System
+  </div>
+</body>
+</html>
+    `;
+
+    // Launch browser and generate PDF
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    await page.setContent(html, { waitUntil: 'networkidle' });
+
+    const pdfBuffer = await page.pdf({
+      format: 'A4',
+      printBackground: true,
+      margin: {
+        top: '20mm',
+        right: '15mm',
+        bottom: '20mm',
+        left: '15mm'
+      },
+      displayHeaderFooter: true,
+      headerTemplate: '<div></div>',
+      footerTemplate: `
+        <div style="font-size: 8pt; text-align: center; width: 100%; color: #7f8c8d; padding-top: 5px;">
+          <span class="pageNumber"></span> / <span class="totalPages"></span>
+        </div>
+      `
+    });
+
+    await browser.close();
+
+    // Set response headers and send PDF
+    const fileName = `Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf`;
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+    res.send(pdfBuffer);
 
     console.log('✅ PDF export completed for plan:', id);
 
   } catch (error) {
     console.error('❌ Error exporting to PDF:', error);
+    if (browser) {
+      await browser.close();
+    }
     res.status(500).json({ error: 'Internal server error during PDF export' });
   }
 };
@@ -1552,10 +1795,4 @@ export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise
 function getDayOfWeek(dateString: string): number {
   const date = new Date(dateString);
   return date.getDay() === 0 ? 7 : date.getDay();
-}
-
-// Helper function to get German day names
-function getGermanDayName(dayIndex: number): string {
-  const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-  return days[dayIndex];
 }

frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx

@@ -18,7 +18,7 @@ const ShiftPlanCreate: React.FC = () => {
   const [searchParams] = useSearchParams();
   const { showNotification } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [planName, setPlanName] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
@@ -35,9 +35,9 @@ const ShiftPlanCreate: React.FC = () => {
       console.log('🔄 Lade verfügbare Vorlagen-Presets...');
       const data = await shiftPlanService.getTemplatePresets();
       console.log('✅ Presets geladen:', data);
-      
+
       setPresets(data);
-      
+
       // Setze das erste Preset als Standard, falls vorhanden
       if (data.length > 0) {
         setSelectedPreset(data[0].name);
@@ -75,7 +75,7 @@ const ShiftPlanCreate: React.FC = () => {
     if (!endDate) {
       showNotification({
         type: 'error',
-        title: 'Fehlende Angaben', 
+        title: 'Fehlende Angaben',
         message: 'Bitte wählen Sie ein Enddatum'
       });
       return;
@@ -115,14 +115,14 @@ const ShiftPlanCreate: React.FC = () => {
       });
 
       console.log('✅ Plan erstellt:', createdPlan);
-      
+
       // Erfolgsmeldung und Weiterleitung
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan erfolgreich erstellt!'
       });
-      
+
       setTimeout(() => {
         navigate(`/shift-plans/${createdPlan.id}`);
       }, 1500);
@@ -146,20 +146,20 @@ const ShiftPlanCreate: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <h1>Neuen Schichtplan erstellen</h1>
-        <button 
+        <button
-          onClick={() => navigate(-1)} 
+          onClick={() => navigate(-1)}
           className={styles.backButton}
           disabled={isSubmitting}
         >
           Zurück
         </button>
       </div>
-      
+
       <div className={styles.form}>
         <div className={styles.formGroup}>
           <label>Plan Name:</label>
-          <input 
+          <input
-            type="text" 
+            type="text"
             value={planName}
             onChange={(e) => setPlanName(e.target.value)}
             placeholder="z.B. KW 42 2025"
@@ -171,8 +171,8 @@ const ShiftPlanCreate: React.FC = () => {
         <div className={styles.dateGroup}>
           <div className={styles.formGroup}>
             <label>Von:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={startDate}
               onChange={(e) => setStartDate(e.target.value)}
               className={styles.input}
@@ -182,8 +182,8 @@ const ShiftPlanCreate: React.FC = () => {
 
           <div className={styles.formGroup}>
             <label>Bis:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={endDate}
               onChange={(e) => setEndDate(e.target.value)}
               className={styles.input}
@@ -194,8 +194,8 @@ const ShiftPlanCreate: React.FC = () => {
 
         <div className={styles.formGroup}>
           <label>Vorlage verwenden:</label>
-          <select 
+          <select
-            value={selectedPreset} 
+            value={selectedPreset}
             onChange={(e) => setSelectedPreset(e.target.value)}
             className={`${styles.select} ${presets.length === 0 ? styles.empty : ''}`}
             disabled={isSubmitting}
@@ -207,7 +207,7 @@ const ShiftPlanCreate: React.FC = () => {
               </option>
             ))}
           </select>
-          
+
           {selectedPreset && (
             <div className={styles.presetDescription}>
               {getSelectedPresetDescription()}
@@ -222,9 +222,9 @@ const ShiftPlanCreate: React.FC = () => {
         </div>
 
         <div className={styles.actions}>
-          <button 
+          <button
-            onClick={handleCreate} 
+            onClick={handleCreate}
-            className={styles.createButton} 
+            className={styles.createButton}
             disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
           >
             {isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -1,5 +1,5 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { shiftPlanService } from '../../services/shiftPlanService';
@@ -45,7 +45,7 @@ const ShiftPlanView: React.FC = () => {
   const navigate = useNavigate();
   const { hasRole, user } = useAuth();
   const { showNotification } = useNotification();
-  
+
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [employees, setEmployees] = useState<Employee[]>([]);
   const [availabilities, setAvailabilities] = useState<EmployeeAvailability[]>([]);
@@ -56,19 +56,22 @@ const ShiftPlanView: React.FC = () => {
   const [showAssignmentPreview, setShowAssignmentPreview] = useState(false);
   const [recreating, setRecreating] = useState(false);
   const [exporting, setExporting] = useState(false);
+  const [exportType, setExportType] = useState<'pdf' | 'excel' | null>(null);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     loadShiftPlanData();
-    
+
     // Event Listener für Verfügbarkeits-Änderungen
     const handleAvailabilityChange = () => {
       console.log('📢 Verfügbarkeiten wurden geändert - lade Daten neu...');
       reloadAvailabilities();
     };
-    
+
     // Globales Event für Verfügbarkeits-Änderungen
     window.addEventListener('availabilitiesChanged', handleAvailabilityChange);
-    
+
     return () => {
       window.removeEventListener('availabilitiesChanged', handleAvailabilityChange);
     };
@@ -84,7 +87,7 @@ const ShiftPlanView: React.FC = () => {
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);
-    
+
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
@@ -99,17 +102,17 @@ const ShiftPlanView: React.FC = () => {
 
   const debugAvailabilityShiftIds = () => {
     if (!availabilities.length) return;
-    
+
     console.log('🔍 AVAILABILITY SHIFT ID ANALYSIS:');
     const uniqueShiftIds = [...new Set(availabilities.map(a => a.shiftId))];
-    
+
     console.log(`Unique shift IDs in availabilities: ${uniqueShiftIds.length}`);
     uniqueShiftIds.forEach(shiftId => {
       const count = availabilities.filter(a => a.shiftId === shiftId).length;
       const pref1 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 1).length;
       const pref2 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 2).length;
       const pref3 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 3).length;
-      
+
       console.log(`   ${shiftId}: ${count} total (✅${pref1} 🔶${pref2} ❌${pref3})`);
     });
   };
@@ -121,6 +124,12 @@ const ShiftPlanView: React.FC = () => {
     }
   }, [availabilities]);
 
+  useEffect(() => {
+    if (dropdownRef.current) {
+      setDropdownWidth(dropdownRef.current.offsetWidth);
+    }
+  }, [exportType]);
+
   // Create a data structure that maps days to their shifts with time slot info - SAME AS AVAILABILITYMANAGER
   const getTimetableData = () => {
     if (!shiftPlan || !shiftPlan.shifts || !shiftPlan.timeSlots) {
@@ -135,7 +144,7 @@ const ShiftPlanView: React.FC = () => {
       if (!acc[shift.dayOfWeek]) {
         acc[shift.dayOfWeek] = [];
       }
-      
+
       const timeSlot = timeSlotMap.get(shift.timeSlotId);
       const enhancedShift: ExtendedShift = {
         ...shift,
@@ -144,7 +153,7 @@ const ShiftPlanView: React.FC = () => {
         endTime: timeSlot?.endTime,
         displayName: timeSlot ? `${timeSlot.name} (${formatTime(timeSlot.startTime)}-${formatTime(timeSlot.endTime)})` : shift.id
       };
-      
+
       acc[shift.dayOfWeek].push(enhancedShift);
       return acc;
     }, {} as Record<number, ExtendedShift[]>);
@@ -204,11 +213,11 @@ const ShiftPlanView: React.FC = () => {
     }
 
     const validationErrors: string[] = [];
-    
+
     // Check for missing time slots - SAME VALIDATION AS AVAILABILITYMANAGER
     const usedTimeSlotIds = new Set(shiftPlan.shifts.map(s => s.timeSlotId));
     const availableTimeSlotIds = new Set(shiftPlan.timeSlots.map(ts => ts.id));
-    
+
     usedTimeSlotIds.forEach(timeSlotId => {
       if (!availableTimeSlotIds.has(timeSlotId)) {
         validationErrors.push(`Zeitslot ${timeSlotId} wird verwendet, existiert aber nicht in timeSlots`);
@@ -242,60 +251,33 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
-  const handleExportExcel = async () => {
+  const handleExport = async () => {
-    if (!shiftPlan) return;
+    if (!shiftPlan || !exportType) return;
 
     try {
       setExporting(true);
-      
+
-      // Call the export service
+      let blob: Blob;
-      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+      if (exportType === 'excel') {
-      
+        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`);
-      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      } else {
-      
+        blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+        saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      }
+
       showNotification({
         type: 'success',
         title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
+        message: `Der Schichtplan wurde als ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
       });
-      
+
     } catch (error) {
-      console.error('Error exporting to Excel:', error);
+      console.error(`Error exporting to ${exportType}:`, error);
       showNotification({
         type: 'error',
         title: 'Export fehlgeschlagen',
-        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
+        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-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);
@@ -304,10 +286,10 @@ const ShiftPlanView: React.FC = () => {
 
   const loadShiftPlanData = async () => {
     if (!id) return;
-    
+
     try {
       setLoading(true);
-      
+
       // Load plan and employees first
       const [plan, employeesData] = await Promise.all([
         shiftPlanService.getShiftPlan(id),
@@ -320,7 +302,7 @@ const ShiftPlanView: React.FC = () => {
       // CRITICAL: Load scheduled shifts and verify they exist
       const shiftsData = await shiftAssignmentService.getScheduledShiftsForPlan(id);
       console.log('📋 Loaded scheduled shifts:', shiftsData.length);
-      
+
       if (shiftsData.length === 0) {
         console.warn('⚠️ No scheduled shifts found for plan:', id);
         showNotification({
@@ -334,21 +316,21 @@ const ShiftPlanView: React.FC = () => {
 
       // Load availabilities - USING THE SAME LOGIC AS AVAILABILITYMANAGER
       console.log('🔄 LADE VERFÜGBARKEITEN FÜR PLAN:', id);
-      
+
       const availabilityPromises = employeesData
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter to only include availabilities for the current plan - SAME LOGIC AS AVAILABILITYMANAGER
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       console.log('✅ VERFÜGBARKEITEN FÜR DIESEN PLAN:', planAvailabilities.length);
-      
+
       setAvailabilities(planAvailabilities);
 
       // Run validation
@@ -374,7 +356,7 @@ const ShiftPlanView: React.FC = () => {
 
     try {
       setRecreating(true);
-      
+
       if (!window.confirm('Möchten Sie die aktuellen Zuweisungen wirklich zurücksetzen? Alle vorhandenen Zuweisungen werden gelöscht.')) {
         return;
       }
@@ -405,7 +387,7 @@ const ShiftPlanView: React.FC = () => {
       // STEP 4: CRITICAL - Force reload of scheduled shifts to get EMPTY assignments
       const refreshedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
       setScheduledShifts(refreshedShifts); // Update state with EMPTY assignments
-      
+
       // STEP 5: Clear any previous assignment results
       setAssignmentResult(null);
       setShowAssignmentPreview(false);
@@ -445,9 +427,9 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(true);
       setAssignmentResult(null); // Reset previous results
       setShowAssignmentPreview(false); // Reset preview
-      
+
       console.log('🔄 STARTING ASSIGNMENT PREVIEW...');
-      
+
       // FORCE COMPLETE REFRESH - don't rely on cached state
       const [refreshedEmployees, refreshedAvailabilities] = await Promise.all([
         employeeService.getEmployees().then(emps => emps.filter(emp => emp.isActive)),
@@ -476,7 +458,7 @@ const ShiftPlanView: React.FC = () => {
       };
 
       console.log('🧠 Calling shift assignment service...');
-      
+
       // Use the freshly loaded data, not the state
       const result = await shiftAssignmentService.assignShifts(
         shiftPlan,
@@ -497,7 +479,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔍 ASSIGNMENTS BY SHIFT PATTERN:');
       Object.entries(result.assignments).forEach(([shiftId, empIds]) => {
         const shiftPattern = shiftPlan.shifts?.find(s => s.id === shiftId);
-        
+
         if (shiftPattern) {
           console.log(`   ✅ Shift Pattern: ${shiftId}`);
           console.log(`      - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
@@ -513,7 +495,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔄 Setting assignment result and showing preview...');
       setAssignmentResult(result);
       setShowAssignmentPreview(true);
-      
+
       console.log('✅ Assignment preview ready, modal should be visible');
 
     } catch (error) {
@@ -527,18 +509,18 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(false);
     }
   };
-  
+
   const handlePublish = async () => {
     if (!shiftPlan || !assignmentResult) return;
 
     try {
       setPublishing(true);
-      
+
       console.log('🔄 Starting to publish assignments...');
-      
+
       // Get fresh scheduled shifts
       const updatedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
-      
+
       if (!updatedShifts || updatedShifts.length === 0) {
         throw new Error('No scheduled shifts found in the plan');
       }
@@ -548,19 +530,19 @@ const ShiftPlanView: React.FC = () => {
 
       const updatePromises = updatedShifts.map(async (scheduledShift) => {
         const dayOfWeek = getDayOfWeek(scheduledShift.date);
-        
+
         // Find the corresponding shift pattern for this day and time slot
-        const shiftPattern = shiftPlan?.shifts?.find(shift => 
+        const shiftPattern = shiftPlan?.shifts?.find(shift =>
-          shift.dayOfWeek === dayOfWeek && 
+          shift.dayOfWeek === dayOfWeek &&
           shift.timeSlotId === scheduledShift.timeSlotId
         );
-        
+
         let assignedEmployees: string[] = [];
-        
+
         if (shiftPattern) {
           assignedEmployees = assignmentResult.assignments[shiftPattern.id] || [];
           console.log(`📝 Updating scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId}) with`, assignedEmployees, 'employees');
-          
+
           if (assignedEmployees.length === 0) {
             console.warn(`⚠️ No assignments found for shift pattern ${shiftPattern.id}`);
             console.log('🔍 Available assignment keys:', Object.keys(assignmentResult.assignments));
@@ -568,13 +550,13 @@ const ShiftPlanView: React.FC = () => {
         } else {
           console.warn(`⚠️ No shift pattern found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
         }
-        
+
         try {
           // Update the scheduled shift with assigned employees
           await shiftAssignmentService.updateScheduledShift(scheduledShift.id, {
             assignedEmployees
           });
-          
+
           console.log(`✅ Successfully updated scheduled shift ${scheduledShift.id}`);
         } catch (error) {
           console.error(`❌ Failed to update shift ${scheduledShift.id}:`, error);
@@ -612,12 +594,12 @@ const ShiftPlanView: React.FC = () => {
 
     } catch (error) {
       console.error('❌ Error publishing shift plan:', error);
-      
+
       let message = 'Unbekannter Fehler';
       if (error instanceof Error) {
         message = error.message;
       }
-      
+
       showNotification({
         type: 'error',
         title: 'Fehler',
@@ -631,7 +613,7 @@ const ShiftPlanView: React.FC = () => {
   const refreshAllAvailabilities = async (): Promise<EmployeeAvailability[]> => {
     try {
       console.log('🔄 Force refreshing ALL availabilities with error handling...');
-      
+
       if (!id) {
         console.error('❌ No plan ID available');
         return [];
@@ -647,20 +629,20 @@ const ShiftPlanView: React.FC = () => {
             return []; // Return empty array instead of failing entire operation
           }
         });
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // More robust filtering
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability && availability.planId === id
       );
-      
+
       console.log(`✅ Successfully refreshed ${planAvailabilities.length} availabilities for plan ${id}`);
-      
+
       // IMMEDIATELY update state
       setAvailabilities(planAvailabilities);
-      
+
       return planAvailabilities;
     } catch (error) {
       console.error('❌ Critical error refreshing availabilities:', error);
@@ -671,21 +653,21 @@ const ShiftPlanView: React.FC = () => {
 
   const debugShiftMatching = () => {
     if (!shiftPlan || !scheduledShifts.length) return;
-    
+
     console.log('🔍 DEBUG: Shift Pattern to Scheduled Shift Matching');
     console.log('==================================================');
-    
+
     shiftPlan.shifts?.forEach(shiftPattern => {
       const matchingScheduledShifts = scheduledShifts.filter(scheduled => {
         const dayOfWeek = getDayOfWeek(scheduled.date);
-        return dayOfWeek === shiftPattern.dayOfWeek && 
+        return dayOfWeek === shiftPattern.dayOfWeek &&
-              scheduled.timeSlotId === shiftPattern.timeSlotId;
+          scheduled.timeSlotId === shiftPattern.timeSlotId;
       });
-      
+
       console.log(`📅 Shift Pattern: ${shiftPattern.id}`);
       console.log(`   - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
       console.log(`   - Matching scheduled shifts: ${matchingScheduledShifts.length}`);
-      
+
       if (assignmentResult) {
         const assignments = assignmentResult.assignments[shiftPattern.id] || [];
         console.log(`   - Assignments: ${assignments.length} employees`);
@@ -702,7 +684,7 @@ const ShiftPlanView: React.FC = () => {
 
   const canPublish = () => {
     if (!shiftPlan || shiftPlan.status === 'published') return false;
-    
+
     // Check if all active employees have set their availabilities
     const employeesWithoutAvailabilities = employees.filter(emp => {
       const empAvailabilities = availabilities.filter(avail => avail.employeeId === emp.id);
@@ -714,15 +696,15 @@ const ShiftPlanView: React.FC = () => {
 
   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 => 
+    const hasCriticalViolations = assignmentResult.violations.some(v =>
       v.includes('ERROR:') || v.includes('KRITISCH:')
     );
-    
+
     return !hasCriticalViolations;
   };
 
@@ -742,23 +724,23 @@ const ShiftPlanView: React.FC = () => {
   const reloadAvailabilities = async () => {
     try {
       console.log('🔄 Lade Verfügbarkeiten neu...');
-      
+
       // Load availabilities for all employees
       const availabilityPromises = employees
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter availabilities to only include those for the current shift plan
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       setAvailabilities(planAvailabilities);
       console.log('✅ Verfügbarkeiten neu geladen:', planAvailabilities.length);
-      
+
     } catch (error) {
       console.error('❌ Fehler beim Neuladen der Verfügbarkeiten:', error);
     }
@@ -766,26 +748,26 @@ const ShiftPlanView: React.FC = () => {
 
   const getAssignmentsForScheduledShift = (scheduledShift: ScheduledShift): string[] => {
     if (!assignmentResult) return [];
-    
+
     const dayOfWeek = getDayOfWeek(scheduledShift.date);
-    
+
     // Find the corresponding shift pattern for this day and time slot
-    const shiftPattern = shiftPlan?.shifts?.find(shift => 
+    const shiftPattern = shiftPlan?.shifts?.find(shift =>
-      shift.dayOfWeek === dayOfWeek && 
+      shift.dayOfWeek === dayOfWeek &&
       shift.timeSlotId === scheduledShift.timeSlotId
     );
-    
+
     if (shiftPattern && assignmentResult.assignments[shiftPattern.id]) {
       console.log(`✅ Found assignments for shift pattern ${shiftPattern.id}:`, assignmentResult.assignments[shiftPattern.id]);
       return assignmentResult.assignments[shiftPattern.id];
     }
-    
+
     // Fallback: Check if there's a direct match with scheduled shift ID (unlikely)
     if (assignmentResult.assignments[scheduledShift.id]) {
       console.log(`⚠️ Using direct scheduled shift assignment for ${scheduledShift.id}`);
       return assignmentResult.assignments[scheduledShift.id];
     }
-    
+
     console.warn(`❌ No assignments found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
     return [];
   };
@@ -899,7 +881,7 @@ const ShiftPlanView: React.FC = () => {
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
-                    
+
                     if (!shift) {
                       return (
                         <td key={weekday.id} style={{
@@ -917,7 +899,7 @@ const ShiftPlanView: React.FC = () => {
 
                     // Validation: Check if shift has correct timeSlotId and dayOfWeek - SAME AS AVAILABILITYMANAGER
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
-                    
+
                     let assignedEmployees: string[] = [];
                     let displayContent: React.ReactNode = null;
 
@@ -926,16 +908,16 @@ const ShiftPlanView: React.FC = () => {
                       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')) {
+                        } else if (employee.employeeType === 'manager') {
                           backgroundColor = '#CC0000'; // Manager
                         }
-                        
+
                         return (
                           <div
                             key={empId}
@@ -961,8 +943,8 @@ const ShiftPlanView: React.FC = () => {
 
                     // Helper function to get fallback content
                     const getFallbackContent = () => {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                      const shiftsForSlot = shiftPlan?.shifts?.filter(s =>
-                        s.dayOfWeek === weekday.id && 
+                        s.dayOfWeek === weekday.id &&
                         s.timeSlotId === timeSlot.id
                       ) || [];
                       const totalRequired = shiftsForSlot.reduce((sum, s) => sum + s.requiredEmployees, 0);
@@ -973,18 +955,18 @@ const ShiftPlanView: React.FC = () => {
                       // For published plans, use actual assignments from scheduled shifts
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
-                        
+
                         // Log if we're still seeing old data
                         if (assignedEmployees.length > 0) {
                           console.warn(`⚠️ Found non-empty assignments for ${weekday.name} ${timeSlot.name}:`, assignedEmployees);
                         }
-                        
+
                         const employeeBoxes = createEmployeeBoxes(assignedEmployees);
                         displayContent = employeeBoxes.length > 0 ? (
                           <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
@@ -1000,10 +982,10 @@ const ShiftPlanView: React.FC = () => {
                       // For draft with preview, use assignment result
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
                         const employeeBoxes = createEmployeeBoxes(assignedEmployees);
@@ -1054,7 +1036,7 @@ const ShiftPlanView: React.FC = () => {
                             alignItems: 'center',
                             justifyContent: 'center'
                           }}
-                          title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
+                            title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
                           >
                             ⚠️
                           </div>
@@ -1063,9 +1045,9 @@ const ShiftPlanView: React.FC = () => {
                         {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
-                        <div style={{ 
+                        <div style={{
-                          fontSize: '10px', 
+                          fontSize: '10px',
-                          color: '#666', 
+                          color: '#666',
                           marginTop: '4px',
                           textAlign: 'left',
                           fontFamily: 'monospace'
@@ -1098,20 +1080,20 @@ const ShiftPlanView: React.FC = () => {
   return (
     <div style={{ padding: '20px' }}>
       {/* Header with Plan Information and Actions */}
-      <div style={{ 
+      <div style={{
-        display: 'flex', 
+        display: 'flex',
-        justifyContent: 'space-between', 
+        justifyContent: 'space-between',
         alignItems: 'flex-start',
         marginBottom: '20px'
       }}>
         <div>
           <h1>{shiftPlan.name}</h1>
           <p style={{ color: '#666', margin: 0 }}>
-            {shiftPlan.startDate && shiftPlan.endDate && 
+            {shiftPlan.startDate && shiftPlan.endDate &&
               `Zeitraum: ${formatDate(shiftPlan.startDate)} - ${formatDate(shiftPlan.endDate)}`
             }
           </p>
-          <div style={{ 
+          <div style={{
             display: 'inline-block',
             padding: '4px 12px',
             backgroundColor: shiftPlan.status === 'published' ? '#2ecc71' : '#f1c40f',
@@ -1124,49 +1106,7 @@ const ShiftPlanView: React.FC = () => {
             {shiftPlan.status === 'published' ? 'Veröffentlicht' : 'Entwurf'}
           </div>
         </div>
-          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-          {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
@@ -1185,7 +1125,7 @@ const ShiftPlanView: React.FC = () => {
               {recreating ? 'Lösche Zuweisungen...' : 'Zuweisungen neu berechnen'}
             </button>
           )}
-          
+
           <button
             onClick={() => navigate('/shift-plans')}
             style={{
@@ -1220,15 +1160,15 @@ const ShiftPlanView: React.FC = () => {
               <div style={{ fontSize: '18px', fontWeight: 'bold' }}>
                 {availabilityStatus.completed} / {availabilityStatus.total} Mitarbeiter
               </div>
-              <div style={{ 
+              <div style={{
-                width: '200px', 
+                width: '200px',
-                height: '8px', 
+                height: '8px',
-                backgroundColor: '#e0e0e0', 
+                backgroundColor: '#e0e0e0',
                 borderRadius: '4px',
                 marginTop: '5px',
                 overflow: 'hidden'
               }}>
-                <div 
+                <div
                   style={{
                     width: `${availabilityStatus.percentage}%`,
                     height: '100%',
@@ -1238,7 +1178,7 @@ const ShiftPlanView: React.FC = () => {
                 />
               </div>
             </div>
-            
+
             {hasRole(['admin', 'maintenance']) && (
               <div>
                 <button
@@ -1256,11 +1196,11 @@ const ShiftPlanView: React.FC = () => {
                 >
                   {publishing ? 'Berechne...' : 'Automatisch zuweisen'}
                 </button>
-                
+
                 {!canPublish() && (
                   <div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>
-                    {availabilityStatus.percentage === 100 
+                    {availabilityStatus.percentage === 100
-                      ? 'Bereit zur Berechnung' 
+                      ? 'Bereit zur Berechnung'
                       : `${availabilityStatus.total - availabilityStatus.completed} Mitarbeiter müssen noch Verfügbarkeit eintragen`}
                   </div>
                 )}
@@ -1305,7 +1245,7 @@ const ShiftPlanView: React.FC = () => {
             width: '90%'
           }}>
             <h2>Wochenmuster-Zuordnung</h2>
-            
+
             {/* Detaillierter Reparatur-Bericht anzeigen */}
             {assignmentResult?.resolutionReport && (
               <div style={{
@@ -1321,15 +1261,15 @@ const ShiftPlanView: React.FC = () => {
                 <h4 style={{ color: '#2c3e50', marginTop: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
                   <span>📋</span> Detaillierter Reparatur-Bericht
                 </h4>
-                <div style={{ 
+                <div style={{
-                  fontFamily: 'monospace', 
+                  fontFamily: 'monospace',
                   fontSize: '12px',
                   lineHeight: '1.4'
                 }}>
                   {assignmentResult.resolutionReport.map((line, index) => {
                     let color = '#2c3e50';
                     let fontWeight = 'normal';
-                    
+
                     if (line.includes('✅') || line.includes('ALLES KRITISCHEN PROBLEME BEHOBEN')) {
                       color = '#2ecc71';
                       fontWeight = 'bold';
@@ -1344,9 +1284,9 @@ const ShiftPlanView: React.FC = () => {
                     } else if (line.startsWith('   •') || line.startsWith('   -')) {
                       color = '#7f8c8d';
                     }
-                    
+
                     return (
-                      <div key={index} style={{ 
+                      <div key={index} style={{
                         color,
                         fontWeight,
                         marginBottom: line === '' ? '5px' : '2px',
@@ -1359,12 +1299,12 @@ const ShiftPlanView: React.FC = () => {
                 </div>
               </div>
             )}
-              
+
             {/* ZUSAMMENFASSUNG */}
             {assignmentResult && (
               <div style={{ marginBottom: '20px' }}>
                 <h4>Zusammenfassung:</h4>
-                
+
                 {/* Entscheidung basierend auf tatsächlichen kritischen Problemen */}
                 {(assignmentResult.violations.length === 0) || assignmentResult.success == true ? (
                   <div style={{
@@ -1404,7 +1344,7 @@ const ShiftPlanView: React.FC = () => {
                     </ul>
                   </div>
                 )}
-                
+
                 {/* Warnungen separat anzeigen - NUR wenn welche vorhanden sind */}
                 {assignmentResult.violations.some(v => v.includes('WARNING:') || v.includes('⚠️')) && (
                   <div style={{
@@ -1448,7 +1388,7 @@ const ShiftPlanView: React.FC = () => {
               >
                 Abbrechen
               </button>
-              
+
               {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
@@ -1466,8 +1406,8 @@ const ShiftPlanView: React.FC = () => {
               >
                 {publishing ? 'Veröffentliche...' : (
                   assignmentResult ? (
-                    canPublishAssignment() 
+                    canPublishAssignment()
-                      ? 'Schichtplan veröffentlichen' 
+                      ? 'Schichtplan veröffentlichen'
                       : 'Kritische Probleme müssen behoben werden'
                   ) : 'Lade Zuordnungen...'
                 )}
@@ -1475,7 +1415,7 @@ const ShiftPlanView: React.FC = () => {
             </div>
           </div>
         </div>
-      )}     
+      )}
 
       {/* Timetable */}
       <div style={{
@@ -1485,13 +1425,72 @@ const ShiftPlanView: React.FC = () => {
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
       }}>
         <h3>
-          Schichtplan 
+          Schichtplan
           {shiftPlan.status === 'published' && ' (Aktuelle Zuweisungen)'}
           {assignmentResult && shiftPlan.status === 'draft' && ' (Exemplarische Woche)'}
         </h3>
-        
+
         {renderTimetable()}
 
+        {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            position: 'relative',
+            marginLeft: '10px'
+          }}>
+            {/* Export Dropdown */}
+            <div
+              ref={dropdownRef}
+              style={{
+                transform: exportType ? `translateX(-${dropdownWidth}px)` : 'translateX(0)',
+                transition: 'transform 0.3s ease-in-out',
+                position: exportType ? 'absolute' : 'relative',
+                right: exportType ? `-${dropdownWidth}px` : '0'
+              }}
+            >
+              <select
+                value={exportType || ''}
+                onChange={(e) => setExportType(e.target.value as 'pdf' | 'excel' | null)}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: 'white',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  minWidth: '120px'
+                }}
+              >
+                <option value="">Export</option>
+                <option value="pdf">PDF</option>
+                <option value="excel">Excel</option>
+              </select>
+            </div>
+
+            {/* Export Button */}
+            {exportType && (
+              <button
+                onClick={handleExport}
+                disabled={exporting}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#51258f',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: exporting ? 'not-allowed' : 'pointer',
+                  fontWeight: 'bold',
+                  marginLeft: '10px',
+                  opacity: exporting ? 0.7 : 1,
+                  transition: 'opacity 0.2s ease'
+                }}
+              >
+                {exporting ? '🔄 Exportiert...' : 'EXPORT'}
+              </button>
+            )}
+          </div>
+        )}
+
         {/* Summary */}
         {days.length > 0 && (
           <div style={{
@@ -1503,11 +1502,11 @@ const ShiftPlanView: React.FC = () => {
             fontSize: '14px'
           }}>
             <strong>Legende:</strong> {
-              shiftPlan.status === 'published' 
+              shiftPlan.status === 'published'
                 ? 'Angezeigt werden die aktuell zugewiesenen Mitarbeiter'
                 : assignmentResult
-                ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
+                  ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
-                : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
+                  : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
             }
           </div>
         )}