added timetable export to the export funciton

backend/package.json

@@ -25,7 +25,10 @@
     "uuid": "^9.0.0",
     "express-rate-limit": "8.1.0",
     "helmet": "8.1.0",
-    "express-validator": "7.3.0"
+    "express-validator": "7.3.0",
+    "exceljs": "4.4.0",
+    "pdfkit": "0.12.3",
+    "@types/pdfkit": "^0.12.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

backend/src/controllers/shiftPlanController.ts

@@ -8,6 +8,8 @@ import {
 } from '../models/ShiftPlan.js';
 import { AuthRequest } from '../middleware/auth.js';
 import { TEMPLATE_PRESETS } from '../models/defaults/shiftPlanDefaults.js';
+import ExcelJS from 'exceljs';
+import PDFDocument from 'pdfkit';
 
 async function getPlanWithDetails(planId: string) {
   const plan = await db.get<any>(`
@@ -592,6 +594,26 @@ async function getShiftPlanById(planId: string): Promise<any> {
     `, [planId]);
   }
 
+  // Load employees without role column + join with employee_roles
+  const employees = await db.all<any>(`
+    SELECT 
+      e.id, 
+      e.firstname, 
+      e.lastname, 
+      e.email, 
+      e.employee_type,
+      e.contract_type,
+      e.can_work_alone,
+      e.is_trainee,
+      e.is_active as isActive,
+      GROUP_CONCAT(er.role) as roles
+    FROM employees e
+    LEFT JOIN employee_roles er ON e.id = er.employee_id
+    WHERE e.is_active = 1
+    GROUP BY e.id
+    ORDER BY e.firstname, e.lastname
+  `, []);
+
   return {
     ...plan,
     isTemplate: plan.is_template === 1,
@@ -629,6 +651,19 @@ 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
     }))
   };
 }
@@ -933,3 +968,581 @@ 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 };
+}
+
+// Update the Excel export function with proper typing
+export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📊 Starting Excel export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create workbook
+    const workbook = new ExcelJS.Workbook();
+    workbook.creator = 'Schichtplaner System';
+    workbook.created = new Date();
+
+    // Add Summary Sheet
+    const summarySheet = workbook.addWorksheet('Planübersicht');
+
+    // Summary data
+    summarySheet.columns = [
+      { header: 'Eigenschaft', key: 'property', width: 20 },
+      { header: 'Wert', key: 'value', width: 30 }
+    ];
+
+    summarySheet.addRows([
+      { property: 'Plan Name', value: plan.name },
+      { property: 'Beschreibung', value: plan.description || 'Keine' },
+      { property: 'Zeitraum', value: `${plan.startDate} bis ${plan.endDate}` },
+      { property: 'Status', value: plan.status },
+      { property: 'Erstellt von', value: plan.created_by_name || 'Unbekannt' },
+      { property: 'Erstellt am', value: plan.createdAt },
+      { property: 'Anzahl Schichten', value: plan.scheduledShifts?.length || 0 },
+      { property: 'Anzahl Mitarbeiter', value: plan.employees?.length || 0 }
+    ]);
+
+    // Style summary sheet
+    summarySheet.getRow(1).font = { bold: true };
+    summarySheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF2C3E50' }
+    };
+    summarySheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Add Timetable Sheet (matching React component visualization)
+    const timetableSheet = workbook.addWorksheet('Schichtplan');
+
+    // Get timetable data structure similar to React component
+    const timetableData = getTimetableDataForExport(plan);
+    const { days, allTimeSlots } = timetableData;
+
+    // Create header row
+    const headerRow = ['Schicht (Zeit)', ...days.map(day => day.name)];
+    timetableSheet.addRow(headerRow);
+
+    // Add data rows for each time slot
+    allTimeSlots.forEach(timeSlot => {
+      const rowData: any[] = [
+        `${timeSlot.name}\n${timeSlot.startTime} - ${timeSlot.endTime}`
+      ];
+
+      days.forEach(day => {
+        const shift = timeSlot.shiftsByDay[day.id];
+        if (!shift) {
+          rowData.push('Keine Schicht');
+          return;
+        }
+
+        // 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;
+        });
+
+        if (scheduledShift && scheduledShift.assignedEmployees.length > 0) {
+          const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+            const employee = plan.employees?.find((emp: any) => emp.id === empId);
+            if (!employee) return 'Unbekannt';
+            
+            // Add role indicator similar to React component
+            let roleIndicator = '';
+            if (employee.isTrainee) {
+              roleIndicator = ' (Trainee)';
+            } else if (employee.roles?.includes('manager')) {
+              roleIndicator = ' (Manager)';
+            }
+            
+            return `${employee.firstname} ${employee.lastname}${roleIndicator}`;
+          }).join('\n');
+          
+          rowData.push(employeeNames);
+        } else {
+          // Show required employees 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);
+          rowData.push(totalRequired === 0 ? '-' : `0/${totalRequired}`);
+        }
+      });
+
+      timetableSheet.addRow(rowData);
+    });
+
+    // Style timetable sheet
+    timetableSheet.getRow(1).font = { bold: true };
+    timetableSheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF2C3E50' }
+    };
+    timetableSheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Set row heights and wrap text
+    timetableSheet.eachRow((row, rowNumber) => {
+      if (rowNumber > 1) {
+        row.height = 60;
+        row.alignment = { vertical: 'top', wrapText: true };
+      }
+      
+      row.eachCell((cell, colNumber) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+        
+        if (rowNumber === 1) {
+          cell.alignment = { horizontal: 'center', vertical: 'middle' };
+        } else if (colNumber === 1) {
+          cell.alignment = { vertical: 'middle' };
+        } else {
+          cell.alignment = { vertical: 'top', wrapText: true };
+        }
+      });
+    });
+
+    // Auto-fit columns
+    timetableSheet.columns.forEach(column => {
+      if (column.width) {
+        column.width = Math.max(column.width, 12);
+      }
+    });
+
+    // Add Employee Overview Sheet
+    const employeeSheet = workbook.addWorksheet('Mitarbeiterübersicht');
+
+    employeeSheet.columns = [
+      { header: 'Name', key: 'name', width: 25 },
+      { header: 'E-Mail', key: 'email', width: 25 },
+      { header: 'Rolle', key: 'role', width: 15 },
+      { header: 'Mitarbeiter Typ', key: 'type', width: 15 },
+      { header: 'Vertragstyp', key: 'contract', width: 15 },
+      { header: 'Trainee', key: 'trainee', width: 10 }
+    ];
+
+    plan.employees?.forEach((employee: any) => {
+      employeeSheet.addRow({
+        name: `${employee.firstname} ${employee.lastname}`,
+        email: employee.email,
+        role: employee.roles?.join(', ') || 'Benutzer',
+        type: employee.employeeType,
+        contract: employee.contractType || 'Nicht angegeben',
+        trainee: employee.isTrainee ? 'Ja' : 'Nein'
+      });
+    });
+
+    // Style employee sheet
+    employeeSheet.getRow(1).font = { bold: true };
+    employeeSheet.getRow(1).fill = {
+      type: 'pattern',
+      pattern: 'solid',
+      fgColor: { argb: 'FF34495E' }
+    };
+    employeeSheet.getRow(1).font = { color: { argb: 'FFFFFFFF' }, bold: true };
+
+    // Set response headers
+    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.xlsx"`);
+
+    // Write to response
+    await workbook.xlsx.write(res);
+
+    console.log('✅ Excel export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to Excel:', error);
+    res.status(500).json({ error: 'Internal server error during Excel export' });
+  }
+};
+
+export const exportShiftPlanToPDF = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📄 Starting PDF export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // Create PDF document
+    const doc = new PDFDocument({ margin: 50 });
+
+    // Set response headers
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf"`);
+
+    // Pipe PDF to response
+    doc.pipe(res);
+
+    // Add title
+    doc.fontSize(20).font('Helvetica-Bold').text(`Schichtplan: ${plan.name}`, 50, 50);
+    doc.fontSize(12).font('Helvetica').text(`Erstellt am: ${new Date().toLocaleDateString('de-DE')}`, 50, 80);
+
+    // Plan summary
+    let yPosition = 120;
+    doc.fontSize(14).font('Helvetica-Bold').text('Plan Informationen', 50, yPosition);
+    yPosition += 30;
+
+    doc.fontSize(10).font('Helvetica');
+    doc.text(`Plan Name: ${plan.name}`, 50, yPosition);
+    yPosition += 20;
+
+    if (plan.description) {
+      doc.text(`Beschreibung: ${plan.description}`, 50, yPosition);
+      yPosition += 20;
+    }
+
+    doc.text(`Zeitraum: ${plan.startDate} bis ${plan.endDate}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Status: ${plan.status}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt von: ${plan.created_by_name || 'Unbekannt'}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Erstellt am: ${plan.createdAt}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Schichten: ${plan.scheduledShifts?.length || 0}`, 50, yPosition);
+    yPosition += 20;
+    doc.text(`Anzahl Mitarbeiter: ${plan.employees?.length || 0}`, 50, yPosition);
+    yPosition += 40;
+
+    // Get timetable data for PDF
+    const timetableData = getTimetableDataForExport(plan);
+    const { days, allTimeSlots } = timetableData;
+
+    // Add timetable section
+    doc.addPage();
+    doc.fontSize(16).font('Helvetica-Bold').text('Schichtplan Timetable', 50, 50);
+
+    let currentY = 80;
+
+    // Define column widths
+    const timeSlotColWidth = 100;
+    const dayColWidth = (500 - timeSlotColWidth) / days.length;
+
+    // Table headers
+    doc.fontSize(10).font('Helvetica-Bold');
+    
+    // Time slot header
+    doc.rect(50, currentY, timeSlotColWidth, 20).fillAndStroke('#2c3e50', '#2c3e50');
+    doc.fillColor('white').text('Schicht (Zeit)', 55, currentY + 5, { width: timeSlotColWidth - 10, align: 'left' });
+    
+    // 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.roles?.includes('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 }
+      );
+    }
+
+    // Finalize PDF
+    doc.end();
+
+    console.log('✅ PDF export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to PDF:', error);
+    res.status(500).json({ error: 'Internal server error during PDF export' });
+  }
+};
+
+// Helper function to get day of week from date string
+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];
+}

backend/src/routes/shiftPlans.ts

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

frontend/package.json

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

frontend/src/design/DesignSystem.txt

@@ -20,6 +20,8 @@ export const designTokens = {
       10: '#ebd7fa',
     },
 
+    manager: '#CC0000',
+    
     // Semantic Colors
     primary: '#51258f',
     secondary: '#642ab5',

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -896,9 +896,6 @@ const ShiftPlanView: React.FC = () => {
                     <div style={{ fontSize: '14px', color: '#666' }}>
                       {formatTime(timeSlot.startTime)} - {formatTime(timeSlot.endTime)}
                     </div>
-                    <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
-                      ID: {timeSlot.id.substring(0, 8)}...
-                    </div>
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
@@ -922,7 +919,55 @@ const ShiftPlanView: React.FC = () => {
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
                     
                     let assignedEmployees: string[] = [];
-                    let displayText = '';
+                    let displayContent: React.ReactNode = null;
+
+                    // Helper function to create employee boxes
+                    const createEmployeeBoxes = (employeeIds: string[]) => {
+                      return employeeIds.map(empId => {
+                        const employee = employees.find(emp => emp.id === empId);
+                        if (!employee) return null;
+                        
+                        // Determine background color based on employee role
+                        let backgroundColor = '#642ab5'; // Default: non-trainee personnel (purple)
+                        
+                        if (employee.isTrainee) {
+                          backgroundColor = '#cda8f0'; // Trainee
+                        } else if (employee.roles?.includes('manager')) {
+                          backgroundColor = '#CC0000'; // Manager
+                        }
+                        
+                        return (
+                          <div
+                            key={empId}
+                            style={{
+                              backgroundColor,
+                              color: 'white',
+                              padding: '4px 8px',
+                              borderRadius: '4px',
+                              marginBottom: '2px',
+                              fontSize: '12px',
+                              textAlign: 'center',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis'
+                            }}
+                            title={`${employee.firstname} ${employee.lastname}${employee.isTrainee ? ' (Trainee)' : ''}`}
+                          >
+                            {employee.firstname} {employee.lastname}
+                          </div>
+                        );
+                      }).filter(Boolean);
+                    };
+
+                    // Helper function to get fallback content
+                    const getFallbackContent = () => {
+                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                        s.dayOfWeek === weekday.id && 
+                        s.timeSlotId === timeSlot.id
+                      ) || [];
+                      const totalRequired = shiftsForSlot.reduce((sum, s) => sum + s.requiredEmployees, 0);
+                      return totalRequired === 0 ? '-' : `0/${totalRequired}`;
+                    };
 
                     if (shiftPlan?.status === 'published') {
                       // For published plans, use actual assignments from scheduled shifts
@@ -935,15 +980,21 @@ const ShiftPlanView: React.FC = () => {
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
                         
-                        // DEBUG: Log if we're still seeing old data
+                        // Log if we're still seeing old data
                         if (assignedEmployees.length > 0) {
                           console.warn(`⚠️ Found non-empty assignments for ${weekday.name} ${timeSlot.name}:`, assignedEmployees);
                         }
                         
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
@@ -955,30 +1006,26 @@ const ShiftPlanView: React.FC = () => {
                       
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        displayText = assignedEmployees.map(empId => {
-                          const employee = employees.find(emp => emp.id === empId);
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
-                        }).join(', ');
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
+                        displayContent = employeeBoxes.length > 0 ? (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     }
 
-                    // If no assignments yet, show empty or required count
-                    if (!displayText) {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
-                        s.dayOfWeek === weekday.id && 
-                        s.timeSlotId === timeSlot.id
-                      ) || [];
-                      
-                      const totalRequired = shiftsForSlot.reduce((sum, s) => 
-                        sum + s.requiredEmployees, 0);
-                      
-                      // Show "0/2" instead of just "0" to indicate it's empty
-                      displayText = `0/${totalRequired}`;
-                      
-                      // Optional: Show empty state more clearly
-                      if (totalRequired === 0) {
-                        displayText = '-';
-                      }
+                    // If no display content set yet, use fallback
+                    if (!displayContent) {
+                      displayContent = (
+                        <div style={{ color: '#666', fontStyle: 'italic' }}>
+                          {getFallbackContent()}
+                        </div>
+                      );
                     }
 
                     return (
@@ -1013,7 +1060,7 @@ const ShiftPlanView: React.FC = () => {
                           </div>
                         )}
 
-                        {displayText}
+                        {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
                         <div style={{ 
@@ -1023,8 +1070,6 @@ const ShiftPlanView: React.FC = () => {
                           textAlign: 'left',
                           fontFamily: 'monospace'
                         }}>
-                          <div>Shift: {shift.id.substring(0, 6)}...</div>
-                          <div>Day: {shift.dayOfWeek}</div>
                           {!isValidShift && (
                             <div style={{ color: '#e74c3c', fontWeight: 'bold' }}>
                               VALIDATION ERROR
@@ -1039,7 +1084,6 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
-
       </div>
     );
   };
@@ -1123,7 +1167,7 @@ const ShiftPlanView: React.FC = () => {
             </>
           )}
           
-          {/* Your existing "Zuweisungen neu berechnen" button */}
+          {/* "Zuweisungen neu berechnen" button */}
           {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
@@ -1405,7 +1449,7 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
               
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
                 disabled={publishing || !canPublishAssignment()}