added whitelist with loopback addresses for api rateLimit

backend/package.json

@@ -4,7 +4,9 @@
   "type": "module",
   "scripts": {
     "dev": "npm run build && npx tsx src/server.ts",
-    "dev:single": "cross-env NODE_ENV=development TRUST_PROXY_ENABLED=false npx tsx src/server.ts",
+    "dev:single": "cross-env NODE_ENV=development TRUST_PROXY_ENABLED=false SEED_TEST_DATA=true npx tsx src/server.ts",
+    "seed:test-data": "npx tsx src/scripts/seedTestData.ts",
+    "dev:all": "npm run dev:single",
     "build": "tsc",
     "start": "node dist/server.js",
     "prestart": "npm run build",
@@ -16,7 +18,7 @@
   "dependencies": {
     "@types/bcrypt": "^6.0.0",
     "@types/node": "24.9.2",
-    "vite":"7.1.12",
+    "vite": "7.1.12",
     "bcrypt": "^6.0.0",
     "bcryptjs": "^2.4.3",
     "express": "^4.18.2",
@@ -25,7 +27,9 @@
     "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-chromium": "^1.37.0"
   },
   "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 { chromium } from 'playwright-chromium';
 
 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,12 +651,25 @@ async function getShiftPlanById(planId: string): Promise<any> {
       requiredEmployees: shift.required_employees,
       assignedEmployees: JSON.parse(shift.assigned_employees || '[]'),
       timeSlotName: shift.time_slot_name
+    })),
+    // Include employees with proper role handling
+    employees: employees.map(emp => ({
+      id: emp.id,
+      firstname: emp.firstname,
+      lastname: emp.lastname,
+      email: emp.email,
+      employeeType: emp.employee_type,
+      contractType: emp.contract_type,
+      canWorkAlone: emp.can_work_alone === 1,
+      isTrainee: emp.is_trainee === 1,
+      isActive: emp.isActive === 1,
+      roles: emp.roles ? emp.roles.split(',') : [] // Convert comma-separated roles to array
     }))
   };
 }
 
 // Helper function to generate scheduled shifts from template
-export const generateScheduledShifts = async(planId: string, startDate: string, endDate: string): Promise<void> => {
+export const generateScheduledShifts = async (planId: string, startDate: string, endDate: string): Promise<void> => {
   try {
     console.log(`🔄 Generating scheduled shifts for Plan ${planId} from ${startDate} to ${endDate}`);
 
@@ -933,3 +968,849 @@ 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 sortTimeSlotsByStartTime(timeSlots: any[]): any[] {
+  const timeToMinutes = (timeStr: string) => {
+    if (!timeStr) return 0;
+    const [hours, minutes] = timeStr.split(':').map(Number);
+    return hours * 60 + minutes;
+  };
+
+  return [...timeSlots].sort((a, b) => {
+    const minutesA = timeToMinutes(a.startTime);
+    const minutesB = timeToMinutes(b.startTime);
+    return minutesA - minutesB; // Ascending order (earliest first)
+  });
+}
+
+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) => {
+      // Use numeric comparison for proper time sorting
+      const timeToMinutes = (timeStr: string) => {
+        if (!timeStr) return 0;
+        const [hours, minutes] = timeStr.split(':').map(Number);
+        return hours * 60 + minutes;
+      };
+
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      return minutesA - minutesB;
+    });
+  });
+
+  // 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 using numeric comparison
+  const allTimeSlots = sortTimeSlotsByStartTime(Array.from(allTimeSlotsMap.values()));
+
+  return { days, allTimeSlots };
+}
+
+// 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/middleware/rateLimit.ts

@@ -41,6 +41,28 @@ const getClientIP = (req: Request): string => {
   return remoteAddress;
 };
 
+// Helper to check if an IP is a loopback address (IPv4 or IPv6)
+const isLoopbackAddress = (ip: string): boolean => {
+  // IPv4 loopback: 127.0.0.0/8
+  if (ip.startsWith('127.') || ip === 'localhost') {
+    return true;
+  }
+
+  // IPv6 loopback: ::1
+  // Also handle IPv4-mapped IPv6 addresses like ::ffff:127.0.0.1
+  if (ip === '::1' || ip === '::ffff:127.0.0.1') {
+    return true;
+  }
+
+  // Handle full IPv6 loopback notation
+  if (ip.toLowerCase().startsWith('0000:0000:0000:0000:0000:0000:0000:0001') ||
+    ip.toLowerCase() === '0:0:0:0:0:0:0:1') {
+    return true;
+  }
+
+  return false;
+};
+
 // Helper to check if request should be limited
 const shouldSkipLimit = (req: Request): boolean => {
   const skipPaths = [
@@ -54,9 +76,16 @@ const shouldSkipLimit = (req: Request): boolean => {
     return true;
   }
 
+  const clientIP = getClientIP(req);
+
+  // Skip for loopback addresses (local development)
+  if (isLoopbackAddress(clientIP)) {
+    console.log(`✅ Loopback address skipped: ${clientIP}`);
+    return true;
+  }
+
   // Skip for whitelisted IPs from environment
   const whitelist = process.env.RATE_LIMIT_WHITELIST?.split(',') || [];
-  const clientIP = getClientIP(req);
   if (whitelist.includes(clientIP)) {
     console.log(`✅ IP whitelisted: ${clientIP}`);
     return true;

backend/src/routes/shiftPlans.ts

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

backend/src/scripts/seedTestData.ts

@@ -0,0 +1,347 @@
+// backend/src/scripts/seedTestData.ts
+import { db } from '../services/databaseService.js';
+import bcrypt from 'bcryptjs';
+import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+interface TestData {
+    plan_name: string;
+    description: string;
+    period: string;
+    status: string;
+    created_by: string;
+    shifts: {
+        [day: string]: {
+            [shiftType: string]: {
+                time: string;
+                assignments: { [employeeName: string]: number };
+            };
+        };
+    };
+    employee_info: {
+        contract_sizes: { [name: string]: string };
+        employee_types: { [name: string]: string };
+        roles: { [name: string]: string };
+        trainees: { [name: string]: boolean };
+        can_work_alone: { [name: string]: boolean };
+    };
+    availability_scale: {
+        [key: string]: string;
+    };
+}
+
+function generateEmail(firstname: string, lastname: string): string {
+    const convertUmlauts = (str: string): string => {
+        return str
+            .toLowerCase()
+            .replace(/ü/g, 'ue')
+            .replace(/ö/g, 'oe')
+            .replace(/ä/g, 'ae')
+            .replace(/ß/g, 'ss');
+    };
+
+    const cleanFirstname = convertUmlauts(firstname).replace(/[^a-z0-9]/g, '');
+    const cleanLastname = convertUmlauts(lastname).replace(/[^a-z0-9]/g, '');
+
+    return `${cleanFirstname}.${cleanLastname}@sp.de`;
+}
+
+function mapContractType(germanType: string): 'small' | 'large' | 'flexible' {
+    switch (germanType) {
+        case 'groß': return 'large';
+        case 'klein': return 'small';
+        case 'flexible': return 'flexible';
+        default: return 'small';
+    }
+}
+
+function mapDayToNumber(day: string): number {
+    const dayMap: { [key: string]: number } = {
+        'monday': 1,
+        'tuesday': 2,
+        'wednesday': 3,
+        'thursday': 4,
+        'friday': 5,
+        'saturday': 6,
+        'sunday': 7
+    };
+    return dayMap[day.toLowerCase()] || 1;
+}
+
+function parseTimeSlot(time: string): { startTime: string; endTime: string } {
+    const [start, end] = time.split(' - ');
+    return {
+        startTime: start.trim(),
+        endTime: end.trim()
+    };
+}
+
+export async function seedTestData(): Promise<void> {
+    try {
+        console.log('🌱 Starting test data seeding...');
+
+        // Read test.json file - adjust path to be relative to project root
+        //const testDataPath = path.resolve(process.cwd(), './test.json');
+        const testDataPath = path.resolve(__dirname, './test.json');
+
+        console.log('🔍 Looking for test.json at:', testDataPath);
+
+        if (!fs.existsSync(testDataPath)) {
+            console.log('❌ test.json file not found at:', testDataPath);
+
+            // Try alternative paths
+            const alternativePaths = [
+                //path.resolve(__dirname, '../../../test.json'),
+                //path.resolve(process.cwd(), '../test.json'),
+                //path.resolve(__dirname, '../../test.json'),
+                path.resolve(__dirname, './test.json')
+            ];
+
+            for (const altPath of alternativePaths) {
+                console.log('🔍 Trying alternative path:', altPath);
+                if (fs.existsSync(altPath)) {
+                    console.log('✅ Found test.json at:', altPath);
+                    // Continue with the found path
+                    break;
+                }
+            }
+
+            return;
+        }
+
+        const testDataRaw = fs.readFileSync(testDataPath, 'utf-8');
+        const testData: TestData = JSON.parse(testDataRaw);
+
+        console.log('📊 Loaded test data:', {
+            planName: testData.plan_name,
+            employeeCount: Object.keys(testData.employee_info.contract_sizes).length,
+            days: Object.keys(testData.shifts).length
+        });
+
+        // Start transaction
+        await db.run('BEGIN TRANSACTION');
+
+        try {
+            // 1. Create employees
+            console.log('👥 Creating employees...');
+            const employeeMap: { [name: string]: string } = {};
+            const employeeNames = Object.keys(testData.employee_info.contract_sizes);
+
+            for (const name of employeeNames) {
+                const employeeId = uuidv4();
+                employeeMap[name] = employeeId;
+
+                const [firstname, lastname = ''] = name.split(' ');
+                const email = generateEmail(firstname, lastname || 'Test');
+                const passwordHash = await bcrypt.hash('ZebraAux123!', 10);
+
+                const contractType = mapContractType(testData.employee_info.contract_sizes[name]);
+                const employeeType = testData.employee_info.employee_types[name];
+                const role = testData.employee_info.roles[name];
+                const isTrainee = testData.employee_info.trainees[name];
+                const canWorkAlone = testData.employee_info.can_work_alone[name];
+
+                // Insert employee
+                await db.run(
+                    `INSERT INTO employees (
+            id, email, password, firstname, lastname, 
+            employee_type, contract_type, can_work_alone, 
+            is_trainee, is_active
+          ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+                    [
+                        employeeId,
+                        email,
+                        passwordHash,
+                        firstname,
+                        lastname || 'Test',
+                        employeeType,
+                        contractType,
+                        canWorkAlone ? 1 : 0,
+                        isTrainee ? 1 : 0,
+                        1
+                    ]
+                );
+
+                // Insert role
+                await db.run(
+                    `INSERT INTO employee_roles (employee_id, role) VALUES (?, ?)`,
+                    [employeeId, role]
+                );
+
+                console.log(`✅ Created employee: ${name} (${email})`);
+            }
+
+            // 2. Create shift plan
+            console.log('📅 Creating shift plan...');
+            const planId = uuidv4();
+            const [startDate, endDate] = testData.period.split(' bis ');
+
+            // Use the first admin employee as creator
+            const adminEmployee = Object.entries(testData.employee_info.roles)
+                .find(([_, role]) => role === 'admin');
+            const createdBy = adminEmployee ? employeeMap[adminEmployee[0]] : employeeMap[employeeNames[0]];
+
+            await db.run(
+                `INSERT INTO shift_plans (
+          id, name, description, start_date, end_date, 
+          is_template, status, created_by
+        ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
+                [
+                    planId,
+                    testData.plan_name,
+                    testData.description,
+                    startDate.trim(),
+                    endDate.trim(),
+                    0, // is_template = false
+                    'published',
+                    createdBy
+                ]
+            );
+
+            // 3. Create time slots
+            console.log('⏰ Creating time slots...');
+            const timeSlotMap: { [key: string]: string } = {};
+
+            // Extract unique time slots from shifts
+            const uniqueTimeSlots = new Set<string>();
+            Object.values(testData.shifts).forEach(dayShifts => {
+                Object.values(dayShifts).forEach(shift => {
+                    uniqueTimeSlots.add(shift.time);
+                });
+            });
+
+            let timeSlotIndex = 0;
+            for (const time of uniqueTimeSlots) {
+                const timeSlotId = uuidv4();
+                const { startTime, endTime } = parseTimeSlot(time);
+                const name = timeSlotIndex === 0 ? 'Vormittag' : 'Nachmittag';
+
+                await db.run(
+                    `INSERT INTO time_slots (id, plan_id, name, start_time, end_time, description) 
+           VALUES (?, ?, ?, ?, ?, ?)`,
+                    [timeSlotId, planId, name, startTime, endTime, `Time slot: ${time}`]
+                );
+
+                timeSlotMap[time] = timeSlotId;
+                timeSlotIndex++;
+            }
+
+            // 4. Create shifts
+            console.log('🔄 Creating shifts...');
+            const shiftMap: { [dayTime: string]: string } = {};
+
+            for (const [dayName, dayShifts] of Object.entries(testData.shifts)) {
+                const dayOfWeek = mapDayToNumber(dayName);
+
+                for (const [shiftType, shiftData] of Object.entries(dayShifts)) {
+                    const shiftId = uuidv4();
+                    const timeSlotId = timeSlotMap[shiftData.time];
+
+                    await db.run(
+                        `INSERT INTO shifts (id, plan_id, time_slot_id, day_of_week, required_employees, color) 
+             VALUES (?, ?, ?, ?, ?, ?)`,
+                        [shiftId, planId, timeSlotId, dayOfWeek, 2, '#3498db']
+                    );
+
+                    shiftMap[`${dayName}_${shiftType}`] = shiftId;
+                }
+            }
+
+            // 5. Generate scheduled shifts for one week (for template demonstration)
+            console.log('📋 Generating scheduled shifts...');
+            const start = new Date(startDate.trim());
+
+            for (let dayOffset = 0; dayOffset < 7; dayOffset++) {
+                const currentDate = new Date(start);
+                currentDate.setDate(start.getDate() + dayOffset);
+
+                const dayOfWeek = currentDate.getDay() === 0 ? 7 : currentDate.getDay();
+                const dayName = Object.keys(testData.shifts).find(day =>
+                    mapDayToNumber(day) === dayOfWeek
+                );
+
+                if (dayName && testData.shifts[dayName]) {
+                    for (const [shiftType, shiftData] of Object.entries(testData.shifts[dayName])) {
+                        const scheduledShiftId = uuidv4();
+                        const timeSlotId = timeSlotMap[shiftData.time];
+
+                        await db.run(
+                            `INSERT INTO scheduled_shifts (id, plan_id, date, time_slot_id, required_employees, assigned_employees) 
+               VALUES (?, ?, ?, ?, ?, ?)`,
+                            [
+                                scheduledShiftId,
+                                planId,
+                                currentDate.toISOString().split('T')[0],
+                                timeSlotId,
+                                2,
+                                JSON.stringify([])
+                            ]
+                        );
+                    }
+                }
+            }
+
+            // 6. Create employee availabilities
+            console.log('📝 Creating employee availabilities...');
+
+            for (const [dayName, dayShifts] of Object.entries(testData.shifts)) {
+                const dayOfWeek = mapDayToNumber(dayName);
+
+                for (const [shiftType, shiftData] of Object.entries(dayShifts)) {
+                    const shiftId = shiftMap[`${dayName}_${shiftType}`];
+
+                    for (const [employeeName, preferenceLevel] of Object.entries(shiftData.assignments)) {
+                        const employeeId = employeeMap[employeeName];
+
+                        if (employeeId) {
+                            const availabilityId = uuidv4();
+
+                            await db.run(
+                                `INSERT INTO employee_availability (id, employee_id, plan_id, shift_id, preference_level) 
+                 VALUES (?, ?, ?, ?, ?)`,
+                                [availabilityId, employeeId, planId, shiftId, preferenceLevel]
+                            );
+                        }
+                    }
+                }
+            }
+
+            await db.run('COMMIT');
+
+            console.log('🎉 Test data seeded successfully!');
+            console.log('📊 Summary:');
+            console.log(`   - Employees: ${employeeNames.length}`);
+            console.log(`   - Shift Plan: ${testData.plan_name}`);
+            console.log(`   - Time Slots: ${Object.keys(timeSlotMap).length}`);
+            console.log(`   - Shifts: ${Object.keys(shiftMap).length}`);
+            console.log(`   - Period: ${testData.period}`);
+
+        } catch (error) {
+            await db.run('ROLLBACK');
+            console.error('❌ Error during test data seeding:', error);
+            throw error;
+        }
+
+    } catch (error) {
+        console.error('❌ Failed to seed test data:', error);
+        throw error;
+    }
+}
+
+// Run if called directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+    seedTestData()
+        .then(() => {
+            console.log('✅ Seed script completed');
+            process.exit(0);
+        })
+        .catch((error) => {
+            console.error('❌ Seed script failed:', error);
+            process.exit(1);
+        });
+}

backend/src/scripts/test.json

@@ -0,0 +1,235 @@
+{
+  "plan_name": "test",
+  "description": "Standard Vorlage für ZEBRA: Mo-Do Vormittag+Nachmittag, Fr nur Vormittag",
+  "period": "2025-10-01 bis 2026-02-01",
+  "status": "published",
+  "created_by": "Max Mustermann",
+  "shifts": {
+    "monday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 1,
+          "Uliana": 2,
+          "Nico": 1,
+          "Linuuuus": 1
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 1,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 1,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "tuesday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 2,
+          "Uliana": 1,
+          "Nico": 1,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 1,
+          "Kilian": 3,
+          "Gerald": 2,
+          "Uliana": 2,
+          "Nico": 3,
+          "Linuuuus": 2
+        }
+      }
+    },
+    "wednesday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 2,
+          "Andrey": 1,
+          "Fabian": 2,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 2,
+          "Nico": 3,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 2,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 1,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "thursday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 3,
+          "Patrick": 3,
+          "Andrey": 1,
+          "Fabian": 3,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 3,
+          "Gerald": 3,
+          "Uliana": 3,
+          "Nico": 2,
+          "Linuuuus": 2
+        }
+      },
+      "late": {
+        "time": "11:30 - 15:30",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 1,
+          "Andrey": 1,
+          "Fabian": 1,
+          "Lu": 3,
+          "Basti": 3,
+          "Kilian": 1,
+          "Gerald": 2,
+          "Uliana": 3,
+          "Nico": 3,
+          "Linuuuus": 3
+        }
+      }
+    },
+    "friday": {
+      "early": {
+        "time": "8:00 - 12:00",
+        "assignments": {
+          "Jerome": 1,
+          "Patrick": 1,
+          "Andrey": 1,
+          "Fabian": 1,
+          "Lu": 1,
+          "Basti": 3,
+          "Kilian": 1,
+          "Gerald": 1,
+          "Uliana": 1,
+          "Nico": 3,
+          "Linuuuus": 3
+        }
+      }
+    }
+  },
+  "employee_info": {
+    "contract_sizes": {
+      "Jerome": "groß",
+      "Patrick": "groß",
+      "Andrey": "groß",
+      "Fabian": "klein",
+      "Lu": "klein",
+      "Basti": "flexible",
+      "Kilian": "klein",
+      "Gerald": "groß",
+      "Uliana": "groß",
+      "Nico": "klein",
+      "Linuuuus": "klein"
+    },
+    "employee_types": {
+      "Jerome": "personell",
+      "Patrick": "personell",
+      "Andrey": "personell",
+      "Fabian": "personell",
+      "Lu": "personell",
+      "Basti": "manager",
+      "Kilian": "personell",
+      "Gerald": "personell",
+      "Uliana": "personell",
+      "Nico": "personell",
+      "Linuuuus": "personell"
+    },
+    "roles": {
+      "Jerome": "user",
+      "Patrick": "maintenance",
+      "Andrey": "user",
+      "Fabian": "user",
+      "Lu": "user",
+      "Basti": "admin",
+      "Kilian": "user",
+      "Gerald": "user",
+      "Uliana": "user",
+      "Nico": "user",
+      "Linuuuus": "user"
+    },
+    "trainees": {
+      "Jerome": false,
+      "Patrick": false,
+      "Andrey": false,
+      "Fabian": false,
+      "Lu": false,
+      "Basti": false,
+      "Kilian": true,
+      "Gerald": true,
+      "Uliana": true,
+      "Nico": true,
+      "Linuuuus": false
+    },
+    "can_work_alone": {
+      "Jerome": true,
+      "Patrick": true,
+      "Andrey": false,
+      "Fabian": true,
+      "Lu": false,
+      "Basti": false,
+      "Kilian": false,
+      "Gerald": false,
+      "Uliana": false,
+      "Nico": false,
+      "Linuuuus": true
+    }
+  },
+  "availability_scale": {
+    "1": "available",
+    "2": "limited",
+    "3": "unavailable"
+  }
+}

backend/src/server.ts

@@ -27,6 +27,15 @@ const __dirname = path.dirname(__filename);
 const app = express();
 const PORT = 3002;
 const isDevelopment = process.env.NODE_ENV === 'development';
+if (isDevelopment) {
+  console.log('🔧 Running in Development mode');
+} else if (process.env.NODE_ENV === 'production') {
+  console.log('🚀 Running in Production mode');
+} else {
+  console.log('⚠️  NODE_ENV not set, defaulting to Development mode');
+  console.error('❌ Please set NODE_ENV to "production" or "development" for proper behavior.');
+  process.exit(1);
+}
 
 app.use(authIpCheck);
 
@@ -311,6 +320,16 @@ const initializeApp = async () => {
     const { applyMigration } = await import('./scripts/applyMigration.js');
     await applyMigration();
 
+    if (isDevelopment && process.env.SEED_TEST_DATA === 'true') {
+      try {
+        const { seedTestData } = await import('./scripts/seedTestData.js');
+        await seedTestData();
+        console.log('✅ Test data seeded successfully');
+      } catch (error) {
+        console.log('⚠️ Test data seeding skipped or failed:', error);
+      }
+    }
+
     app.listen(PORT, () => {
       console.log('🎉 APPLICATION STARTED SUCCESSFULLY!');
       console.log(`📍 Port: ${PORT}`);

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/Employees/components/AvailabilityManager.tsx

@@ -317,7 +317,17 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
 
     // Convert to array and sort by start time
     const sortedTimeSlots = Array.from(allTimeSlots.values()).sort((a, b) => {
-      return (a.startTime || '').localeCompare(b.startTime || '');
+      // Convert time strings to minutes for proper numeric comparison
+      const timeToMinutes = (timeStr: string) => {
+        if (!timeStr) return 0;
+        const [hours, minutes] = timeStr.split(':').map(Number);
+        return hours * 60 + minutes;
+      };
+
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      
+      return minutesA - minutesB; // Ascending order (earliest first)
     });
 
     return (

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';
@@ -56,6 +56,9 @@ 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();
@@ -121,6 +124,12 @@ const ShiftPlanView: React.FC = () => {
     }
   }, [availabilities]);
 
+  useEffect(() => {
+    if (dropdownRef.current) {
+      setDropdownWidth(dropdownRef.current.offsetWidth / 40);  // Adjust divisor for desired slide distance
+    }
+  }, [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) {
@@ -191,7 +200,17 @@ const ShiftPlanView: React.FC = () => {
 
     // Convert to array and sort by start time - SAME LOGIC AS AVAILABILITYMANAGER
     const allTimeSlots = Array.from(allTimeSlotsMap.values()).sort((a, b) => {
-      return (a.startTime || '').localeCompare(b.startTime || '');
+      // Convert time strings to minutes for proper numeric comparison
+      const timeToMinutes = (timeStr: string) => {
+        if (!timeStr) return 0;
+        const [hours, minutes] = timeStr.split(':').map(Number);
+        return hours * 60 + minutes;
+      };
+
+      const minutesA = timeToMinutes(a.startTime);
+      const minutesB = timeToMinutes(b.startTime);
+      
+      return minutesA - minutesB; // Ascending order (earliest first)
     });
 
     return { days, shiftsByDay, allTimeSlots };
@@ -242,60 +261,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`);
-      
+      } else {
-      showNotification({
+        blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
-        type: 'success',
-        title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
-      });
-      
-    } catch (error) {
-      console.error('Error exporting to Excel:', error);
-      showNotification({
-        type: 'error',
-        title: 'Export fehlgeschlagen',
-        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
-      });
-    } finally {
-      setExporting(false);
-    }
-  };
-
-  const handleExportPDF = async () => {
-    if (!shiftPlan) return;
-
-    try {
-      setExporting(true);
-      
-      // Call the PDF export service
-      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
-      
-      // Use file-saver to download the file
         saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      }
 
       showNotification({
         type: 'success',
         title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als PDF exportiert.'
+        message: `Der Schichtplan wurde als ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
       });
 
     } catch (error) {
-      console.error('Error exporting to PDF:', error);
+      console.error(`Error exporting to ${exportType}:`, error);
       showNotification({
         type: 'error',
         title: 'Export fehlgeschlagen',
-        message: 'Der PDF-Export konnte nicht durchgeführt werden.'
+        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-Export konnte nicht durchgeführt werden.`
       });
     } finally {
       setExporting(false);
@@ -896,9 +888,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 +911,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.employeeType === '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 +972,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 employeeBoxes = createEmployeeBoxes(assignedEmployees);
-                          const employee = employees.find(emp => emp.id === empId);
+                        displayContent = employeeBoxes.length > 0 ? (
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                        }).join(', ');
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
@@ -955,30 +998,26 @@ const ShiftPlanView: React.FC = () => {
 
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        displayText = assignedEmployees.map(empId => {
+                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
-                          const employee = employees.find(emp => emp.id === empId);
+                        displayContent = employeeBoxes.length > 0 ? (
-                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                        }).join(', ');
+                            {employeeBoxes}
+                          </div>
+                        ) : (
+                          <div style={{ color: '#666', fontStyle: 'italic' }}>
+                            {getFallbackContent()}
+                          </div>
+                        );
                       }
                     }
 
-                    // If no assignments yet, show empty or required count
+                    // If no display content set yet, use fallback
-                    if (!displayText) {
+                    if (!displayContent) {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                      displayContent = (
-                        s.dayOfWeek === weekday.id && 
+                        <div style={{ color: '#666', fontStyle: 'italic' }}>
-                        s.timeSlotId === timeSlot.id
+                          {getFallbackContent()}
-                      ) || [];
+                        </div>
-                      
+                      );
-                      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 = '-';
-                      }
                     }
 
                     return (
@@ -1013,7 +1052,7 @@ const ShiftPlanView: React.FC = () => {
                           </div>
                         )}
 
-                        {displayText}
+                        {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
                         <div style={{
@@ -1023,8 +1062,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 +1076,6 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
-
       </div>
     );
   };
@@ -1081,49 +1117,7 @@ const ShiftPlanView: React.FC = () => {
           </div>
         </div>
         <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          {/* "Zuweisungen neu berechnen" button */}
-            <>
-              <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>
-            </>
-          )}
-          
-          {/* Your existing "Zuweisungen neu berechnen" button */}
           {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
@@ -1405,7 +1399,7 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
 
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
                 disabled={publishing || !canPublishAssignment()}
@@ -1448,6 +1442,64 @@ const ShiftPlanView: React.FC = () => {
 
         {renderTimetable()}
 
+        {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            marginTop: '20px',
+            gap: '10px'
+          }}>
+            {/* Export Dropdown Container */}
+            <div
+              ref={dropdownRef}
+              style={{
+                transform: exportType ? `translateX(-${dropdownWidth}px)` : 'translateX(0)',
+                transition: 'transform 0.3s ease-in-out',
+                position: 'relative' 
+              }}
+            >
+              <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 - erscheint nur wenn eine Option ausgewählt ist */}
+            {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',
+                  opacity: exporting ? 0.7 : 1,
+                  transition: 'opacity 0.2s ease'
+                }}
+              >
+                {exporting ? '🔄 Exportiert...' : 'EXPORT'}
+              </button>
+            )}
+          </div>
+        )}
+
         {/* Summary */}
         {days.length > 0 && (
           <div style={{

package.json

@@ -12,7 +12,7 @@
     "build:all": "npm run build --workspace=backend && npm run build --workspace=frontend",
     "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
     "dev:frontend": "cd frontend && npm run dev",
-    "dev:backend": "cd backend && npm run dev:single"
+    "dev:backend": "cd backend && npm run dev:all"
   },
   "devDependencies": {
     "typescript": "^5.3.3",