fixed role handling in getshiftplanbyid

backend/src/controllers/shiftPlanController.ts

@@ -592,6 +592,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 +649,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 +966,246 @@ export const clearAssignments = async (req: Request, res: Response): Promise<voi
     res.status(500).json({ error: 'Internal server error' });
   }
 };
+
+export const exportShiftPlanToExcel = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params;
+
+    console.log('📊 Starting Excel export for plan:', id);
+
+    // Check if plan exists
+    const plan = await getShiftPlanById(id);
+    if (!plan) {
+      res.status(404).json({ error: 'Shift plan not found' });
+      return;
+    }
+
+    if (plan.status !== 'published') {
+      res.status(400).json({ error: 'Can only export published shift plans' });
+      return;
+    }
+
+    // For now, return a simple CSV as placeholder
+    // In a real implementation, you would use a library like exceljs or xlsx
+    
+    const csvData = generateCSVFromPlan(plan);
+    
+    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"`);
+    
+    // For now, return CSV as placeholder - replace with actual Excel generation
+    res.setHeader('Content-Type', 'text/csv');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.csv"`);
+    res.send(csvData);
+
+    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;
+    }
+
+    // For now, return a simple HTML as placeholder
+    // In a real implementation, you would use a library like pdfkit, puppeteer, or html-pdf
+    
+    const pdfData = generateHTMLFromPlan(plan);
+    
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.pdf"`);
+    
+    // For now, return HTML as placeholder - replace with actual PDF generation
+    res.setHeader('Content-Type', 'text/html');
+    res.setHeader('Content-Disposition', `attachment; filename="Schichtplan_${plan.name}_${new Date().toISOString().split('T')[0]}.html"`);
+    res.send(pdfData);
+
+    console.log('✅ PDF export completed for plan:', id);
+
+  } catch (error) {
+    console.error('❌ Error exporting to PDF:', error);
+    res.status(500).json({ error: 'Internal server error during PDF export' });
+  }
+};
+
+// Helper function to generate CSV data
+function generateCSVFromPlan(plan: any): string {
+  const headers = ['Datum', 'Tag', 'Schicht', 'Zeit', 'Zugewiesene Mitarbeiter', 'Benötigte Mitarbeiter'];
+  const rows: string[] = [headers.join(';')];
+
+  // Group scheduled shifts by date for better organization
+  const shiftsByDate = new Map();
+  
+  plan.scheduledShifts?.forEach((scheduledShift: any) => {
+    const date = scheduledShift.date;
+    if (!shiftsByDate.has(date)) {
+      shiftsByDate.set(date, []);
+    }
+    shiftsByDate.get(date).push(scheduledShift);
+  });
+
+  // Sort dates chronologically
+  const sortedDates = Array.from(shiftsByDate.keys()).sort();
+
+  sortedDates.forEach(date => {
+    const dateShifts = shiftsByDate.get(date);
+    const dateObj = new Date(date);
+    const dayName = getGermanDayName(dateObj.getDay());
+
+    dateShifts.forEach((scheduledShift: any) => {
+      const timeSlot = plan.timeSlots?.find((ts: any) => ts.id === scheduledShift.timeSlotId);
+      const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+        const employee = plan.employees?.find((emp: any) => emp.id === empId);
+        return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+      }).join(', ');
+
+      const row = [
+        date,
+        dayName,
+        timeSlot?.name || 'Unbekannt',
+        timeSlot ? `${timeSlot.startTime} - ${timeSlot.endTime}` : '',
+        employeeNames || 'Keine Zuweisungen',
+        scheduledShift.requiredEmployees || 2
+      ].map(field => `"${field}"`).join(';');
+
+      rows.push(row);
+    });
+  });
+
+  // Add plan summary
+  rows.push('');
+  rows.push('Plan Zusammenfassung');
+  rows.push(`"Plan Name";"${plan.name}"`);
+  rows.push(`"Zeitraum";"${plan.startDate} bis ${plan.endDate}"`);
+  rows.push(`"Status";"${plan.status}"`);
+  rows.push(`"Erstellt von";"${plan.created_by_name || 'Unbekannt'}"`);
+  rows.push(`"Erstellt am";"${plan.createdAt}"`);
+  rows.push(`"Anzahl Schichten";"${plan.scheduledShifts?.length || 0}"`);
+
+  return rows.join('\n');
+}
+
+// Helper function to generate HTML data
+function generateHTMLFromPlan(plan: any): string {
+  const shiftsByDate = new Map();
+  
+  plan.scheduledShifts?.forEach((scheduledShift: any) => {
+    const date = scheduledShift.date;
+    if (!shiftsByDate.has(date)) {
+      shiftsByDate.set(date, []);
+    }
+    shiftsByDate.get(date).push(scheduledShift);
+  });
+
+  const sortedDates = Array.from(shiftsByDate.keys()).sort();
+
+  let html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Schichtplan: ${plan.name}</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        h1 { color: #2c3e50; }
+        h2 { color: #34495e; margin-top: 30px; }
+        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+        th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
+        th { background-color: #f2f2f2; font-weight: bold; }
+        tr:nth-child(even) { background-color: #f9f9f9; }
+        .summary { background-color: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; }
+        .date-section { margin-bottom: 30px; }
+    </style>
+</head>
+<body>
+    <h1>Schichtplan: ${plan.name}</h1>
+    
+    <div class="summary">
+        <h2>Plan Informationen</h2>
+        <p><strong>Zeitraum:</strong> ${plan.startDate} bis ${plan.endDate}</p>
+        <p><strong>Status:</strong> ${plan.status}</p>
+        <p><strong>Erstellt von:</strong> ${plan.created_by_name || 'Unbekannt'}</p>
+        <p><strong>Erstellt am:</strong> ${plan.createdAt}</p>
+        <p><strong>Anzahl Schichten:</strong> ${plan.scheduledShifts?.length || 0}</p>
+    </div>
+
+    <h2>Schichtzuweisungen</h2>
+  `;
+
+  sortedDates.forEach(date => {
+    const dateShifts = shiftsByDate.get(date);
+    const dateObj = new Date(date);
+    const dayName = getGermanDayName(dateObj.getDay());
+    
+    html += `
+    <div class="date-section">
+        <h3>${date} (${dayName})</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Schicht</th>
+                    <th>Zeit</th>
+                    <th>Zugewiesene Mitarbeiter</th>
+                    <th>Benötigte Mitarbeiter</th>
+                </tr>
+            </thead>
+            <tbody>
+    `;
+
+    dateShifts.forEach((scheduledShift: any) => {
+      const timeSlot = plan.timeSlots?.find((ts: any) => ts.id === scheduledShift.timeSlotId);
+      const employeeNames = scheduledShift.assignedEmployees.map((empId: string) => {
+        const employee = plan.employees?.find((emp: any) => emp.id === empId);
+        return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+      }).join(', ') || 'Keine Zuweisungen';
+
+      html += `
+                <tr>
+                    <td>${timeSlot?.name || 'Unbekannt'}</td>
+                    <td>${timeSlot ? `${timeSlot.startTime} - ${timeSlot.endTime}` : ''}</td>
+                    <td>${employeeNames}</td>
+                    <td>${scheduledShift.requiredEmployees || 2}</td>
+                </tr>
+      `;
+    });
+
+    html += `
+            </tbody>
+        </table>
+    </div>
+    `;
+  });
+
+  html += `
+    <div style="margin-top: 40px; font-size: 12px; color: #666; text-align: center;">
+        Erstellt am: ${new Date().toLocaleString('de-DE')}
+    </div>
+</body>
+</html>
+  `;
+
+  return html;
+}
+
+// Helper function to get German day names
+function getGermanDayName(dayIndex: number): string {
+  const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
+  return days[dayIndex];
+}

backend/src/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/src/design/DesignSystem.txt

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

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -896,6 +896,9 @@ 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];
@@ -919,55 +922,7 @@ const ShiftPlanView: React.FC = () => {
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
                     
                     let assignedEmployees: string[] = [];
-                    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}`;
-                    };
+                    let displayText = '';
 
                     if (shiftPlan?.status === 'published') {
                       // For published plans, use actual assignments from scheduled shifts
@@ -980,21 +935,15 @@ const ShiftPlanView: React.FC = () => {
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
                         
-                        // Log if we're still seeing old data
+                        // DEBUG: Log if we're still seeing old data
                         if (assignedEmployees.length > 0) {
                           console.warn(`⚠️ Found non-empty assignments for ${weekday.name} ${timeSlot.name}:`, assignedEmployees);
                         }
                         
-                        const employeeBoxes = createEmployeeBoxes(assignedEmployees);
-                        displayContent = employeeBoxes.length > 0 ? (
-                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-                            {employeeBoxes}
-                          </div>
-                        ) : (
-                          <div style={{ color: '#666', fontStyle: 'italic' }}>
-                            {getFallbackContent()}
-                          </div>
-                        );
+                        displayText = assignedEmployees.map(empId => {
+                          const employee = employees.find(emp => emp.id === empId);
+                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                        }).join(', ');
                       }
                     } else if (assignmentResult) {
                       // For draft with preview, use assignment result
@@ -1006,26 +955,30 @@ const ShiftPlanView: React.FC = () => {
                       
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
-                        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>
-                        );
+                        displayText = assignedEmployees.map(empId => {
+                          const employee = employees.find(emp => emp.id === empId);
+                          return employee ? `${employee.firstname} ${employee.lastname}` : 'Unbekannt';
+                        }).join(', ');
                       }
                     }
 
-                    // If no display content set yet, use fallback
-                    if (!displayContent) {
-                      displayContent = (
-                        <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 = '-';
+                      }
                     }
 
                     return (
@@ -1060,7 +1013,7 @@ const ShiftPlanView: React.FC = () => {
                           </div>
                         )}
 
-                        {displayContent}
+                        {displayText}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
                         <div style={{ 
@@ -1070,6 +1023,8 @@ 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
@@ -1084,6 +1039,7 @@ const ShiftPlanView: React.FC = () => {
             </tbody>
           </table>
         </div>
+
       </div>
     );
   };
@@ -1167,7 +1123,7 @@ const ShiftPlanView: React.FC = () => {
             </>
           )}
           
-          {/* "Zuweisungen neu berechnen" button */}
+          {/* Your existing "Zuweisungen neu berechnen" button */}
           {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
               onClick={handleRecreateAssignments}
@@ -1449,7 +1405,7 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
               
-              {/* BUTTON zum publishen */}
+              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
               <button
                 onClick={handlePublish}
                 disabled={publishing || !canPublishAssignment()}