fixed klammer usage

backend/package.json

@@ -25,9 +25,7 @@
     "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",
-    "playwright": "^1.37.0"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

backend/src/controllers/shiftPlanController.ts

@@ -8,8 +8,6 @@ import {
 } from '../models/ShiftPlan.js';
 import { AuthRequest } from '../middleware/auth.js';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
-import ExcelJS from 'exceljs';
-import { chromium } from 'playwright';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`
@@ -594,26 +592,6 @@ 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,
@@ -651,19 +629,6 @@ 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
     }))
   };
 }
@@ -968,831 +933,3 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
     res.status(500).json({ error: 'Internal server error' });
   }
 };
-
-
-// Helper interfaces for export
-interface ExportDay {
-  id: number;
-  name: string;
-}
-
-interface ExportTimeSlot {
-  id: string;
-  name: string;
-  startTime: string;
-  endTime: string;
-  shiftsByDay: { [dayId: number]: any };
-}
-
-interface ExportTimetableData {
-  days: ExportDay[];
-  allTimeSlots: ExportTimeSlot[];
-}
-
-function getTimetableDataForExport(plan: any): ExportTimetableData {
-  const weekdays = [
-    { id: 1, name: 'Montag' },
-    { id: 2, name: 'Dienstag' },
-    { id: 3, name: 'Mittwoch' },
-    { id: 4, name: 'Donnerstag' },
-    { id: 5, name: 'Freitag' },
-    { id: 6, name: 'Samstag' },
-    { id: 7, name: 'Sonntag' }
-  ];
-
-  if (!plan.shifts || !plan.timeSlots) {
-    return { days: [], allTimeSlots: [] };
-  }
-
-  // Create a map for quick time slot lookups with proper typing
-  const timeSlotMap = new Map<string, any>();
-  plan.timeSlots.forEach((ts: any) => {
-    timeSlotMap.set(ts.id, ts);
-  });
-
-  // Group shifts by day
-  const shiftsByDay: { [dayId: number]: any[] } = plan.shifts.reduce((acc: any, shift: any) => {
-    if (!acc[shift.dayOfWeek]) {
-      acc[shift.dayOfWeek] = [];
-    }
-
-    const timeSlot = timeSlotMap.get(shift.timeSlotId);
-    const enhancedShift = {
-      ...shift,
-      timeSlotName: timeSlot?.name,
-      startTime: timeSlot?.startTime,
-      endTime: timeSlot?.endTime
-    };
-
-    acc[shift.dayOfWeek].push(enhancedShift);
-    return acc;
-  }, {});
-
-  // Sort shifts within each day by start time
-  Object.keys(shiftsByDay).forEach(day => {
-    const dayNum = parseInt(day);
-    shiftsByDay[dayNum].sort((a: any, b: any) => {
-      const timeA = a.startTime || '';
-      const timeB = b.startTime || '';
-      return timeA.localeCompare(timeB);
-    });
-  });
-
-  // Get unique days that have shifts
-  const days: ExportDay[] = Array.from(new Set(plan.shifts.map((shift: any) => shift.dayOfWeek)))
-    .sort()
-    .map(dayId => {
-      return weekdays.find(day => day.id === dayId) || { id: dayId as number, name: `Tag ${dayId}` };
-    });
-
-  // Get all unique time slots (rows) by collecting from all shifts
-  const allTimeSlotsMap = new Map<string, ExportTimeSlot>();
-  days.forEach(day => {
-    shiftsByDay[day.id]?.forEach((shift: any) => {
-      const timeSlot = timeSlotMap.get(shift.timeSlotId);
-      if (timeSlot && !allTimeSlotsMap.has(timeSlot.id)) {
-        const exportTimeSlot: ExportTimeSlot = {
-          id: timeSlot.id,
-          name: timeSlot.name,
-          startTime: timeSlot.startTime,
-          endTime: timeSlot.endTime,
-          shiftsByDay: {}
-        };
-        allTimeSlotsMap.set(timeSlot.id, exportTimeSlot);
-      }
-    });
-  });
-
-  // Populate shifts for each time slot by day
-  days.forEach(day => {
-    shiftsByDay[day.id]?.forEach((shift: any) => {
-      const timeSlot = allTimeSlotsMap.get(shift.timeSlotId);
-      if (timeSlot) {
-        timeSlot.shiftsByDay[day.id] = shift;
-      }
-    });
-  });
-
-  // Convert to array and sort by start time
-  const allTimeSlots = Array.from(allTimeSlotsMap.values()).sort((a: ExportTimeSlot, b: ExportTimeSlot) => {
-    return (a.startTime || '').localeCompare(b.startTime || '');
-  });
-
-  return { days, allTimeSlots };
-}
-
-// Export shift plan to Excel
-// Export shift plan to Excel
-export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
-  try {
-    const { id } = req.params;
-    console.log('📊 Starting Excel export for plan:', id);
-
-    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();
-
-    /* -------------------------------------------------------------------------- */
-    /*                           📋 1. Summary Sheet                              */
-    /* -------------------------------------------------------------------------- */
-    const summarySheet = workbook.addWorksheet('Planübersicht');
-    summarySheet.columns = [
-      { header: 'Eigenschaft', key: 'property', width: 25 },
-      { header: 'Wert', key: 'value', width: 35 }
-    ];
-
-    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: new Date(plan.createdAt).toLocaleString('de-DE') },
-      { property: 'Anzahl Schichten', value: plan.scheduledShifts?.length || 0 },
-      { property: 'Anzahl Mitarbeiter', value: plan.employees?.length || 0 }
-    ]);
-
-    // Style header
-    const header1 = summarySheet.getRow(1);
-    header1.font = { bold: true, color: { argb: 'FFFFFFFF' } };
-    header1.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
-    summarySheet.columns.forEach(col => (col.alignment = { vertical: 'middle', wrapText: true }));
-
-    /* -------------------------------------------------------------------------- */
-    /*                        📅 2. Timetable / Schichtplan Sheet                 */
-    /* -------------------------------------------------------------------------- */
-    const timetableSheet = workbook.addWorksheet('Schichtplan');
-    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);
-    header.eachCell(cell => {
-      cell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
-      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF2C3E50' } };
-      cell.alignment = { horizontal: 'center', vertical: 'middle' };
-      cell.border = {
-        top: { style: 'thin' },
-        left: { style: 'thin' },
-        bottom: { style: 'thin' },
-        right: { style: 'thin' }
-      };
-    });
-
-    // Content rows - each time slot can have multiple employee rows
-    for (const timeSlot of allTimeSlots) {
-      // Find max employees for this time slot across all days
-      let maxEmployeesInTimeSlot = 0;
-      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 > maxEmployeesInTimeSlot) {
-          maxEmployeesInTimeSlot = scheduledShift.assignedEmployees.length;
-        }
-      }
-
-      // If no employees assigned, show at least one row with requirement count
-      const rowsToCreate = Math.max(maxEmployeesInTimeSlot, 1);
-
-      for (let empIndex = 0; empIndex < rowsToCreate; empIndex++) {
-        const rowData: any[] = [];
-
-        // First cell: time slot name (only in first row, merged for others)
-        if (empIndex === 0) {
-          rowData.push(`${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`);
-        } else {
-          rowData.push(''); // Empty for merged cells
-        }
-
-        // Day cells
-        for (const day of days) {
-          const shift = timeSlot.shiftsByDay[day.id];
-
-          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' };
-
-          // Handle colored employee names
-          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 column widths
-    timetableSheet.getColumn(1).width = 25; // Time slot column
-    for (let i = 2; i <= days.length + 1; i++) {
-      timetableSheet.getColumn(i).width = 30;
-    }
-
-    // Add legend row at bottom
-    const legendRow = timetableSheet.addRow([
-      'Legende:',
-      '■ Manager',
-      '■ Trainee',
-      '■ Mitarbeiter',
-      '■ Keine Schicht'
-    ]);
-
-    // Style each square with its respective color
-    legendRow.getCell(1).font = { bold: true };
-    legendRow.getCell(2).font = { color: { argb: 'FFCC0000' } };   // Red = Manager
-    legendRow.getCell(3).font = { color: { argb: 'FFCDA8F0' } };   // Purple = Trainee
-    legendRow.getCell(4).font = { color: { argb: 'FF642AB5' } };   // Blue = Mitarbeiter
-    legendRow.getCell(5).font = { color: { argb: 'FF888888' } };   // Gray = Keine Schicht
-
-    legendRow.eachCell(cell => {
-      cell.alignment = { vertical: 'middle', horizontal: 'left' };
-      cell.font = { ...cell.font, italic: true };
-    });
-
-    /* -------------------------------------------------------------------------- */
-    /*                        👥 3. 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: 18 },
-      { header: 'Mitarbeiter Typ', key: 'type', width: 15 },
-      { header: 'Vertragstyp', key: 'contract', width: 18 },
-      { header: 'Trainee', key: 'trainee', width: 10 }
-    ];
-
-    plan.employees?.forEach((e: any) =>
-      employeeSheet.addRow({
-        name: `${e.firstname} ${e.lastname}`,
-        email: e.email,
-        role: e.roles?.join(', ') || 'Benutzer',
-        type: e.employeeType || 'Unbekannt',
-        contract: e.contractType || 'Nicht angegeben',
-        trainee: e.isTrainee ? 'Ja' : 'Nein'
-      })
-    );
-
-    const empHeader = employeeSheet.getRow(1);
-    empHeader.font = { bold: true, color: { argb: 'FFFFFFFF' } };
-    empHeader.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF34495E' } };
-    empHeader.alignment = { horizontal: 'center', vertical: 'middle' };
-
-    /* -------------------------------------------------------------------------- */
-    /*                            📤 4. Send Response                             */
-    /* -------------------------------------------------------------------------- */
-    const fileName = `Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.xlsx`;
-    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
-    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> => {
-  let browser;
-  try {
-    const { id } = req.params;
-    console.log('📄 Starting PDF export for plan:', id);
-
-    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;
-    }
-
-    // Get timetable data (same as Excel)
-    const timetableData = getTimetableDataForExport(plan);
-    const { days, allTimeSlots } = timetableData;
-
-    // Generate HTML content
-    const html = `
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Schichtplan - ${plan.name}</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { 
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      font-size: 10pt;
-      line-height: 1.4;
-      color: #2c3e50;
-      padding: 20px;
-    }
-    .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>
-
-  <div class="info-section">
-    <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' });
-  }
-};
-
-// Helper function to get day of week from date string
-function getDayOfWeek(dateString: string): number {
-  const date = new Date(dateString);
-  return date.getDay() === 0 ? 7 : date.getDay();
-}

backend/src/routes/shiftPlans.ts

@@ -7,9 +7,7 @@ import {
   updateShiftPlan, 
   deleteShiftPlan,
   createFromPreset,
-  clearAssignments,
+  clearAssignments
-  exportShiftPlanToExcel,
-  exportShiftPlanToPDF
 } from '../controllers/shiftPlanController.js';
 import { 
   validateShiftPlan, 
@@ -32,7 +30,4 @@ 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;

frontend/package.json

@@ -30,6 +30,7 @@
     "framer-motion": "12.23.24",
     "file-saver": "2.0.5",
     "@types/file-saver": "2.0.5"
+
   },
   "scripts": {
     "dev": "vite dev",

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -1,5 +1,5 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 import { shiftPlanService } from '../../services/shiftPlanService';
@@ -56,9 +56,6 @@ 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();
@@ -124,12 +121,6 @@ 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) {
@@ -251,33 +242,60 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
-  const handleExport = async () => {
+  const handleExportExcel = async () => {
-    if (!shiftPlan || !exportType) return;
+    if (!shiftPlan) return;
 
     try {
       setExporting(true);
       
-      let blob: Blob;
+      // Call the export service
-      if (exportType === 'excel') {
+      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
-        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`);
-      } 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 ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
+        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
       });
       
     } catch (error) {
-      console.error(`Error exporting to ${exportType}:`, error);
+      console.error('Error exporting to Excel:', error);
       showNotification({
         type: 'error',
         title: 'Export fehlgeschlagen',
-        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-Export konnte nicht durchgeführt werden.`
+        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);
@@ -914,7 +932,7 @@ const ShiftPlanView: React.FC = () => {
                         
                         if (employee.isTrainee) {
                           backgroundColor = '#cda8f0'; // Trainee
-                        } else if (employee.employeeType === 'manager') {
+                        } else if (employee.roles?.includes('manager')) {
                           backgroundColor = '#CC0000'; // Manager
                         }
                         
@@ -1107,6 +1125,48 @@ const ShiftPlanView: React.FC = () => {
           </div>
         </div>
           <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
@@ -1432,65 +1492,6 @@ const ShiftPlanView: React.FC = () => {
         
         {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={{