added dropdown menu for export

backend/package.json

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

frontend/src/design/DesignSystem.txt

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

frontend/src/pages/ShiftPlans/ShiftPlanView.tsx

@@ -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,12 @@ const ShiftPlanView: React.FC = () => {
   const [showAssignmentPreview, setShowAssignmentPreview] = useState(false);
   const [recreating, setRecreating] = useState(false);
   const [exporting, setExporting] = useState(false);
+  const [exportDropdownOpen, setExportDropdownOpen] = useState(false);
+  const [selectedExportType, setSelectedExportType] = useState('');
+  const [showExportButton, setShowExportButton] = useState(false);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     loadShiftPlanData();
@@ -90,6 +96,13 @@ const ShiftPlanView: React.FC = () => {
     };
   }, []);
 
+  // Measure dropdown width when it opens
+  useEffect(() => {
+    if (exportDropdownOpen && dropdownRef.current) {
+      setDropdownWidth(dropdownRef.current.offsetWidth);
+    }
+  }, [exportDropdownOpen]);
+
   // Add this useEffect to debug state changes
   useEffect(() => {
     console.log('🔍 STATE DEBUG - showAssignmentPreview:', showAssignmentPreview);
@@ -242,64 +255,51 @@ const ShiftPlanView: React.FC = () => {
     };
   };
 
-  const handleExportExcel = async () => {
+  const handleExport = async () => {
-    if (!shiftPlan) return;
+    if (!shiftPlan || !selectedExportType) return;
 
     try {
       setExporting(true);
 
-      // Call the export service
+      let blob: Blob;
-      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+      if (selectedExportType === 'PDF') {
+        // Call the PDF export service
+        blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+      } else {
+        // Call the Excel export service
+        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`);
+      const fileExtension = selectedExportType.toLowerCase();
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.${fileExtension}`);
 
       showNotification({
         type: 'success',
         title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
+        message: `Der Schichtplan wurde als ${selectedExportType}-Datei exportiert.`
       });
 
+      // Reset export state
+      setSelectedExportType('');
+      setShowExportButton(false);
+
     } catch (error) {
-      console.error('Error exporting to Excel:', error);
+      console.error(`Error exporting to ${selectedExportType}:`, error);
       showNotification({
         type: 'error',
         title: 'Export fehlgeschlagen',
-        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
+        message: `Der ${selectedExportType}-Export konnte nicht durchgeführt werden.`
       });
     } finally {
       setExporting(false);
     }
   };
 
-  const handleExportPDF = async () => {
+  const handleExportTypeSelect = (type: string) => {
-    if (!shiftPlan) return;
+    setSelectedExportType(type);
-
+    setExportDropdownOpen(false);
-    try {
+    setShowExportButton(true);
-      setExporting(true);
-      
-      // Call the PDF export service
-      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
-      
-      // Use file-saver to download the file
-      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
-      
-      showNotification({
-        type: 'success',
-        title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als PDF exportiert.'
-      });
-      
-    } catch (error) {
-      console.error('Error exporting to PDF:', error);
-      showNotification({
-        type: 'error',
-        title: 'Export fehlgeschlagen',
-        message: 'Der PDF-Export konnte nicht durchgeführt werden.'
-      });
-    } finally {
-      setExporting(false);
-    }
   };
 
   const loadShiftPlanData = async () => {
@@ -460,14 +460,6 @@ const ShiftPlanView: React.FC = () => {
       console.log('- Shift Patterns:', shiftPlan.shifts?.length || 0);
       console.log('- Scheduled Shifts:', scheduledShifts.length);
 
-      // DEBUG: Show shift pattern IDs
-      /*if (shiftPlan.shifts) {
-        console.log('📋 SHIFT PATTERN IDs:');
-        shiftPlan.shifts.forEach((shift, index) => {
-          console.log(`   ${index + 1}. ${shift.id} (Day ${shift.dayOfWeek}, TimeSlot ${shift.timeSlotId})`);
-        });
-      }*/
-
       const constraints = {
         enforceNoTraineeAlone: true,
         enforceExperiencedWithChef: true,
@@ -679,7 +671,7 @@ const ShiftPlanView: React.FC = () => {
       const matchingScheduledShifts = scheduledShifts.filter(scheduled => {
         const dayOfWeek = getDayOfWeek(scheduled.date);
         return dayOfWeek === shiftPattern.dayOfWeek &&
-              scheduled.timeSlotId === shiftPattern.timeSlotId;
+          scheduled.timeSlotId === shiftPattern.timeSlotId;
       });
 
       console.log(`📅 Shift Pattern: ${shiftPattern.id}`);
@@ -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,63 +911,113 @@ 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
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
                         return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
 
                       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
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
                         return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
 
                       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 (
@@ -1007,13 +1046,13 @@ const ShiftPlanView: React.FC = () => {
                             alignItems: 'center',
                             justifyContent: 'center'
                           }}
-                          title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
+                            title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
                           >
                             ⚠️
                           </div>
                         )}
 
-                        {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
@@ -1040,6 +1077,77 @@ const ShiftPlanView: React.FC = () => {
           </table>
         </div>
 
+        {/* Export Dropdown - Only show when plan is published */}
+        {shiftPlan?.status === 'published' && (
+          <div style={{
+            padding: '15px 20px',
+            backgroundColor: '#f8f9fa',
+            borderTop: '1px solid #e0e0e0',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '10px'
+          }}>
+            <div style={{ position: 'relative', display: 'inline-block' }}>
+              {/* Export Dropdown */}
+              <div
+                ref={dropdownRef}
+                style={{
+                  position: 'relative',
+                  transform: showExportButton ? `translateX(-${dropdownWidth}px)` : 'translateX(0)',
+                  opacity: showExportButton ? 0 : 1,
+                  transition: 'all 0.3s ease',
+                  pointerEvents: showExportButton ? 'none' : 'auto'
+                }}
+              >
+                <select
+                  value=""
+                  onChange={(e) => handleExportTypeSelect(e.target.value)}
+                  onFocus={() => setExportDropdownOpen(true)}
+                  onBlur={() => setTimeout(() => setExportDropdownOpen(false), 200)}
+                  style={{
+                    padding: '8px 16px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    backgroundColor: 'white',
+                    cursor: 'pointer',
+                    minWidth: '120px'
+                  }}
+                >
+                  <option value="">Export</option>
+                  <option value="PDF">PDF</option>
+                  <option value="Excel">Excel</option>
+                </select>
+              </div>
+
+              {/* Export Button */}
+              {showExportButton && (
+                <button
+                  onClick={handleExport}
+                  disabled={exporting}
+                  style={{
+                    padding: '8px 16px',
+                    backgroundColor: '#51258f',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: exporting ? 'not-allowed' : 'pointer',
+                    fontWeight: 'bold',
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    opacity: showExportButton ? 1 : 0,
+                    transform: showExportButton ? 'translateX(0)' : 'translateX(20px)',
+                    transition: 'all 0.3s ease',
+                    minWidth: '120px'
+                  }}
+                >
+                  {exporting ? 'Exportiert...' : 'EXPORT'}
+                </button>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     );
   };
@@ -1080,50 +1188,8 @@ const ShiftPlanView: React.FC = () => {
             {shiftPlan.status === 'published' ? 'Veröffentlicht' : 'Entwurf'}
           </div>
         </div>
-          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-          {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
+          {/* "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 +1471,7 @@ const ShiftPlanView: React.FC = () => {
                 Abbrechen
               </button>
 
-              {/* KORRIGIERTER BUTTON MIT TYPESCRIPT-FIX */}
+              {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
                 disabled={publishing || !canPublishAssignment()}
@@ -1462,8 +1528,8 @@ const ShiftPlanView: React.FC = () => {
               shiftPlan.status === 'published'
                 ? 'Angezeigt werden die aktuell zugewiesenen Mitarbeiter'
                 : assignmentResult
-                ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
+                  ? 'Angezeigt werden die vorgeschlagenen Mitarbeiter für eine exemplarische Woche'
-                : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
+                  : 'Angezeigt wird "zugewiesene/benötigte Mitarbeiter" pro Schicht und Wochentag'
             }
           </div>
         )}