added sorting to time table entries

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",
@@ -27,8 +29,7 @@
     "helmet": "8.1.0",
     "express-validator": "7.3.0",
     "exceljs": "4.4.0",
-    "pdfkit": "0.12.3",
+    "playwright-chromium": "^1.37.0"
-    "@types/pdfkit": "^0.12.3"
   },
   "devDependencies": {
     "@types/bcryptjs": "^2.4.2",

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

@@ -14,9 +14,9 @@ import shiftPlanRoutes from './routes/shiftPlans.js';
 import setupRoutes from './routes/setup.js';
 import scheduledShifts from './routes/scheduledShifts.js';
 import schedulingRoutes from './routes/scheduling.js';
-import { 
+import {
-  apiLimiter, 
+  apiLimiter,
-  authLimiter, 
+  authLimiter,
   expensiveEndpointLimiter
 } from './middleware/rateLimit.js';
 import { ipSecurityCheck as authIpCheck } from './middleware/auth.js';
@@ -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);
 
@@ -96,12 +105,12 @@ const configureTrustProxy = (): string | string[] | boolean | number => {
   // If specific IPs are provided via environment variable
   if (trustedProxyIps) {
     console.log('🔒 Trust proxy: Using configured IPs:', trustedProxyIps);
-    
+
     // Handle comma-separated list of IPs/CIDR ranges
     if (trustedProxyIps.includes(',')) {
       return trustedProxyIps.split(',').map(ip => ip.trim());
     }
-    
+
     // Handle single IP/CIDR
     return trustedProxyIps.trim();
   }
@@ -116,15 +125,15 @@ app.set('trust proxy', configureTrustProxy());
 app.use((req, res, next) => {
   const protocol = req.headers['x-forwarded-proto'] || req.protocol;
   const isHttps = protocol === 'https';
-  
+
   // Add security warning for HTTP requests
   if (!isHttps && process.env.NODE_ENV === 'production') {
     res.setHeader('X-Security-Warning', 'This application is being accessed over HTTP. For secure communication, please use HTTPS.');
-    
+
     // Log HTTP access in production
     console.warn(`⚠️  HTTP access detected: ${req.method} ${req.path} from ${req.ip}`);
   }
-  
+
   next();
 });
 
@@ -273,7 +282,7 @@ app.get('*', (req, res, next) => {
   // Serve React app for all other routes
   const frontendPath = '/app/frontend-build';
   const indexPath = path.join(frontendPath, 'index.html');
-  
+
   if (fs.existsSync(indexPath)) {
     res.sendFile(indexPath);
   } else {
@@ -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/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/ShiftPlanCreate.tsx

@@ -18,7 +18,7 @@ const ShiftPlanCreate: React.FC = () => {
   const [searchParams] = useSearchParams();
   const { showNotification } = useNotification();
   const { executeWithValidation, isSubmitting } = useBackendValidation();
-  
+
   const [planName, setPlanName] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
@@ -35,9 +35,9 @@ const ShiftPlanCreate: React.FC = () => {
       console.log('🔄 Lade verfügbare Vorlagen-Presets...');
       const data = await shiftPlanService.getTemplatePresets();
       console.log('✅ Presets geladen:', data);
-      
+
       setPresets(data);
-      
+
       // Setze das erste Preset als Standard, falls vorhanden
       if (data.length > 0) {
         setSelectedPreset(data[0].name);
@@ -75,7 +75,7 @@ const ShiftPlanCreate: React.FC = () => {
     if (!endDate) {
       showNotification({
         type: 'error',
-        title: 'Fehlende Angaben', 
+        title: 'Fehlende Angaben',
         message: 'Bitte wählen Sie ein Enddatum'
       });
       return;
@@ -115,14 +115,14 @@ const ShiftPlanCreate: React.FC = () => {
       });
 
       console.log('✅ Plan erstellt:', createdPlan);
-      
+
       // Erfolgsmeldung und Weiterleitung
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan erfolgreich erstellt!'
       });
-      
+
       setTimeout(() => {
         navigate(`/shift-plans/${createdPlan.id}`);
       }, 1500);
@@ -146,20 +146,20 @@ const ShiftPlanCreate: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <h1>Neuen Schichtplan erstellen</h1>
-        <button 
+        <button
-          onClick={() => navigate(-1)} 
+          onClick={() => navigate(-1)}
           className={styles.backButton}
           disabled={isSubmitting}
         >
           Zurück
         </button>
       </div>
-      
+
       <div className={styles.form}>
         <div className={styles.formGroup}>
           <label>Plan Name:</label>
-          <input 
+          <input
-            type="text" 
+            type="text"
             value={planName}
             onChange={(e) => setPlanName(e.target.value)}
             placeholder="z.B. KW 42 2025"
@@ -171,8 +171,8 @@ const ShiftPlanCreate: React.FC = () => {
         <div className={styles.dateGroup}>
           <div className={styles.formGroup}>
             <label>Von:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={startDate}
               onChange={(e) => setStartDate(e.target.value)}
               className={styles.input}
@@ -182,8 +182,8 @@ const ShiftPlanCreate: React.FC = () => {
 
           <div className={styles.formGroup}>
             <label>Bis:</label>
-            <input 
+            <input
-              type="date" 
+              type="date"
               value={endDate}
               onChange={(e) => setEndDate(e.target.value)}
               className={styles.input}
@@ -194,8 +194,8 @@ const ShiftPlanCreate: React.FC = () => {
 
         <div className={styles.formGroup}>
           <label>Vorlage verwenden:</label>
-          <select 
+          <select
-            value={selectedPreset} 
+            value={selectedPreset}
             onChange={(e) => setSelectedPreset(e.target.value)}
             className={`${styles.select} ${presets.length === 0 ? styles.empty : ''}`}
             disabled={isSubmitting}
@@ -207,7 +207,7 @@ const ShiftPlanCreate: React.FC = () => {
               </option>
             ))}
           </select>
-          
+
           {selectedPreset && (
             <div className={styles.presetDescription}>
               {getSelectedPresetDescription()}
@@ -222,9 +222,9 @@ const ShiftPlanCreate: React.FC = () => {
         </div>
 
         <div className={styles.actions}>
-          <button 
+          <button
-            onClick={handleCreate} 
+            onClick={handleCreate}
-            className={styles.createButton} 
+            className={styles.createButton}
             disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
           >
             {isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}

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';
@@ -45,7 +45,7 @@ const ShiftPlanView: React.FC = () => {
   const navigate = useNavigate();
   const { hasRole, user } = useAuth();
   const { showNotification } = useNotification();
-  
+
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [employees, setEmployees] = useState<Employee[]>([]);
   const [availabilities, setAvailabilities] = useState<EmployeeAvailability[]>([]);
@@ -56,19 +56,22 @@ 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();
-    
+
     // Event Listener für Verfügbarkeits-Änderungen
     const handleAvailabilityChange = () => {
       console.log('📢 Verfügbarkeiten wurden geändert - lade Daten neu...');
       reloadAvailabilities();
     };
-    
+
     // Globales Event für Verfügbarkeits-Änderungen
     window.addEventListener('availabilitiesChanged', handleAvailabilityChange);
-    
+
     return () => {
       window.removeEventListener('availabilitiesChanged', handleAvailabilityChange);
     };
@@ -84,7 +87,7 @@ const ShiftPlanView: React.FC = () => {
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);
-    
+
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     };
@@ -99,17 +102,17 @@ const ShiftPlanView: React.FC = () => {
 
   const debugAvailabilityShiftIds = () => {
     if (!availabilities.length) return;
-    
+
     console.log('🔍 AVAILABILITY SHIFT ID ANALYSIS:');
     const uniqueShiftIds = [...new Set(availabilities.map(a => a.shiftId))];
-    
+
     console.log(`Unique shift IDs in availabilities: ${uniqueShiftIds.length}`);
     uniqueShiftIds.forEach(shiftId => {
       const count = availabilities.filter(a => a.shiftId === shiftId).length;
       const pref1 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 1).length;
       const pref2 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 2).length;
       const pref3 = availabilities.filter(a => a.shiftId === shiftId && a.preferenceLevel === 3).length;
-      
+
       console.log(`   ${shiftId}: ${count} total (✅${pref1} 🔶${pref2} ❌${pref3})`);
     });
   };
@@ -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) {
@@ -135,7 +144,7 @@ const ShiftPlanView: React.FC = () => {
       if (!acc[shift.dayOfWeek]) {
         acc[shift.dayOfWeek] = [];
       }
-      
+
       const timeSlot = timeSlotMap.get(shift.timeSlotId);
       const enhancedShift: ExtendedShift = {
         ...shift,
@@ -144,7 +153,7 @@ const ShiftPlanView: React.FC = () => {
         endTime: timeSlot?.endTime,
         displayName: timeSlot ? `${timeSlot.name} (${formatTime(timeSlot.startTime)}-${formatTime(timeSlot.endTime)})` : shift.id
       };
-      
+
       acc[shift.dayOfWeek].push(enhancedShift);
       return acc;
     }, {} as Record<number, ExtendedShift[]>);
@@ -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 };
@@ -204,11 +223,11 @@ const ShiftPlanView: React.FC = () => {
     }
 
     const validationErrors: string[] = [];
-    
+
     // Check for missing time slots - SAME VALIDATION AS AVAILABILITYMANAGER
     const usedTimeSlotIds = new Set(shiftPlan.shifts.map(s => s.timeSlotId));
     const availableTimeSlotIds = new Set(shiftPlan.timeSlots.map(ts => ts.id));
-    
+
     usedTimeSlotIds.forEach(timeSlotId => {
       if (!availableTimeSlotIds.has(timeSlotId)) {
         validationErrors.push(`Zeitslot ${timeSlotId} wird verwendet, existiert aber nicht in timeSlots`);
@@ -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`);
-      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      } else {
-      
+        blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
+        saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
+      }
+
       showNotification({
         type: 'success',
         title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
+        message: `Der Schichtplan wurde als ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
       });
-      
+
     } catch (error) {
-      console.error('Error exporting to Excel:', error);
+      console.error(`Error exporting to ${exportType}:`, error);
       showNotification({
         type: 'error',
         title: 'Export fehlgeschlagen',
-        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
+        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-Export konnte nicht durchgeführt werden.`
-      });
-    } finally {
-      setExporting(false);
-    }
-  };
-
-  const handleExportPDF = async () => {
-    if (!shiftPlan) return;
-
-    try {
-      setExporting(true);
-      
-      // Call the PDF export service
-      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
-      
-      // Use file-saver to download the file
-      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
-      
-      showNotification({
-        type: 'success',
-        title: 'Export erfolgreich',
-        message: 'Der Schichtplan wurde als PDF exportiert.'
-      });
-      
-    } catch (error) {
-      console.error('Error exporting to PDF:', error);
-      showNotification({
-        type: 'error',
-        title: 'Export fehlgeschlagen',
-        message: 'Der PDF-Export konnte nicht durchgeführt werden.'
       });
     } finally {
       setExporting(false);
@@ -304,10 +296,10 @@ const ShiftPlanView: React.FC = () => {
 
   const loadShiftPlanData = async () => {
     if (!id) return;
-    
+
     try {
       setLoading(true);
-      
+
       // Load plan and employees first
       const [plan, employeesData] = await Promise.all([
         shiftPlanService.getShiftPlan(id),
@@ -320,7 +312,7 @@ const ShiftPlanView: React.FC = () => {
       // CRITICAL: Load scheduled shifts and verify they exist
       const shiftsData = await shiftAssignmentService.getScheduledShiftsForPlan(id);
       console.log('📋 Loaded scheduled shifts:', shiftsData.length);
-      
+
       if (shiftsData.length === 0) {
         console.warn('⚠️ No scheduled shifts found for plan:', id);
         showNotification({
@@ -334,21 +326,21 @@ const ShiftPlanView: React.FC = () => {
 
       // Load availabilities - USING THE SAME LOGIC AS AVAILABILITYMANAGER
       console.log('🔄 LADE VERFÜGBARKEITEN FÜR PLAN:', id);
-      
+
       const availabilityPromises = employeesData
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter to only include availabilities for the current plan - SAME LOGIC AS AVAILABILITYMANAGER
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       console.log('✅ VERFÜGBARKEITEN FÜR DIESEN PLAN:', planAvailabilities.length);
-      
+
       setAvailabilities(planAvailabilities);
 
       // Run validation
@@ -374,7 +366,7 @@ const ShiftPlanView: React.FC = () => {
 
     try {
       setRecreating(true);
-      
+
       if (!window.confirm('Möchten Sie die aktuellen Zuweisungen wirklich zurücksetzen? Alle vorhandenen Zuweisungen werden gelöscht.')) {
         return;
       }
@@ -405,7 +397,7 @@ const ShiftPlanView: React.FC = () => {
       // STEP 4: CRITICAL - Force reload of scheduled shifts to get EMPTY assignments
       const refreshedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
       setScheduledShifts(refreshedShifts); // Update state with EMPTY assignments
-      
+
       // STEP 5: Clear any previous assignment results
       setAssignmentResult(null);
       setShowAssignmentPreview(false);
@@ -445,9 +437,9 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(true);
       setAssignmentResult(null); // Reset previous results
       setShowAssignmentPreview(false); // Reset preview
-      
+
       console.log('🔄 STARTING ASSIGNMENT PREVIEW...');
-      
+
       // FORCE COMPLETE REFRESH - don't rely on cached state
       const [refreshedEmployees, refreshedAvailabilities] = await Promise.all([
         employeeService.getEmployees().then(emps => emps.filter(emp => emp.isActive)),
@@ -476,7 +468,7 @@ const ShiftPlanView: React.FC = () => {
       };
 
       console.log('🧠 Calling shift assignment service...');
-      
+
       // Use the freshly loaded data, not the state
       const result = await shiftAssignmentService.assignShifts(
         shiftPlan,
@@ -497,7 +489,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔍 ASSIGNMENTS BY SHIFT PATTERN:');
       Object.entries(result.assignments).forEach(([shiftId, empIds]) => {
         const shiftPattern = shiftPlan.shifts?.find(s => s.id === shiftId);
-        
+
         if (shiftPattern) {
           console.log(`   ✅ Shift Pattern: ${shiftId}`);
           console.log(`      - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
@@ -513,7 +505,7 @@ const ShiftPlanView: React.FC = () => {
       console.log('🔄 Setting assignment result and showing preview...');
       setAssignmentResult(result);
       setShowAssignmentPreview(true);
-      
+
       console.log('✅ Assignment preview ready, modal should be visible');
 
     } catch (error) {
@@ -527,18 +519,18 @@ const ShiftPlanView: React.FC = () => {
       setPublishing(false);
     }
   };
-  
+
   const handlePublish = async () => {
     if (!shiftPlan || !assignmentResult) return;
 
     try {
       setPublishing(true);
-      
+
       console.log('🔄 Starting to publish assignments...');
-      
+
       // Get fresh scheduled shifts
       const updatedShifts = await shiftAssignmentService.getScheduledShiftsForPlan(shiftPlan.id);
-      
+
       if (!updatedShifts || updatedShifts.length === 0) {
         throw new Error('No scheduled shifts found in the plan');
       }
@@ -548,19 +540,19 @@ const ShiftPlanView: React.FC = () => {
 
       const updatePromises = updatedShifts.map(async (scheduledShift) => {
         const dayOfWeek = getDayOfWeek(scheduledShift.date);
-        
+
         // Find the corresponding shift pattern for this day and time slot
-        const shiftPattern = shiftPlan?.shifts?.find(shift => 
+        const shiftPattern = shiftPlan?.shifts?.find(shift =>
-          shift.dayOfWeek === dayOfWeek && 
+          shift.dayOfWeek === dayOfWeek &&
           shift.timeSlotId === scheduledShift.timeSlotId
         );
-        
+
         let assignedEmployees: string[] = [];
-        
+
         if (shiftPattern) {
           assignedEmployees = assignmentResult.assignments[shiftPattern.id] || [];
           console.log(`📝 Updating scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId}) with`, assignedEmployees, 'employees');
-          
+
           if (assignedEmployees.length === 0) {
             console.warn(`⚠️ No assignments found for shift pattern ${shiftPattern.id}`);
             console.log('🔍 Available assignment keys:', Object.keys(assignmentResult.assignments));
@@ -568,13 +560,13 @@ const ShiftPlanView: React.FC = () => {
         } else {
           console.warn(`⚠️ No shift pattern found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
         }
-        
+
         try {
           // Update the scheduled shift with assigned employees
           await shiftAssignmentService.updateScheduledShift(scheduledShift.id, {
             assignedEmployees
           });
-          
+
           console.log(`✅ Successfully updated scheduled shift ${scheduledShift.id}`);
         } catch (error) {
           console.error(`❌ Failed to update shift ${scheduledShift.id}:`, error);
@@ -612,12 +604,12 @@ const ShiftPlanView: React.FC = () => {
 
     } catch (error) {
       console.error('❌ Error publishing shift plan:', error);
-      
+
       let message = 'Unbekannter Fehler';
       if (error instanceof Error) {
         message = error.message;
       }
-      
+
       showNotification({
         type: 'error',
         title: 'Fehler',
@@ -631,7 +623,7 @@ const ShiftPlanView: React.FC = () => {
   const refreshAllAvailabilities = async (): Promise<EmployeeAvailability[]> => {
     try {
       console.log('🔄 Force refreshing ALL availabilities with error handling...');
-      
+
       if (!id) {
         console.error('❌ No plan ID available');
         return [];
@@ -647,20 +639,20 @@ const ShiftPlanView: React.FC = () => {
             return []; // Return empty array instead of failing entire operation
           }
         });
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // More robust filtering
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability && availability.planId === id
       );
-      
+
       console.log(`✅ Successfully refreshed ${planAvailabilities.length} availabilities for plan ${id}`);
-      
+
       // IMMEDIATELY update state
       setAvailabilities(planAvailabilities);
-      
+
       return planAvailabilities;
     } catch (error) {
       console.error('❌ Critical error refreshing availabilities:', error);
@@ -671,21 +663,21 @@ const ShiftPlanView: React.FC = () => {
 
   const debugShiftMatching = () => {
     if (!shiftPlan || !scheduledShifts.length) return;
-    
+
     console.log('🔍 DEBUG: Shift Pattern to Scheduled Shift Matching');
     console.log('==================================================');
-    
+
     shiftPlan.shifts?.forEach(shiftPattern => {
       const matchingScheduledShifts = scheduledShifts.filter(scheduled => {
         const dayOfWeek = getDayOfWeek(scheduled.date);
-        return dayOfWeek === shiftPattern.dayOfWeek && 
+        return dayOfWeek === shiftPattern.dayOfWeek &&
-              scheduled.timeSlotId === shiftPattern.timeSlotId;
+          scheduled.timeSlotId === shiftPattern.timeSlotId;
       });
-      
+
       console.log(`📅 Shift Pattern: ${shiftPattern.id}`);
       console.log(`   - Day: ${shiftPattern.dayOfWeek}, TimeSlot: ${shiftPattern.timeSlotId}`);
       console.log(`   - Matching scheduled shifts: ${matchingScheduledShifts.length}`);
-      
+
       if (assignmentResult) {
         const assignments = assignmentResult.assignments[shiftPattern.id] || [];
         console.log(`   - Assignments: ${assignments.length} employees`);
@@ -702,7 +694,7 @@ const ShiftPlanView: React.FC = () => {
 
   const canPublish = () => {
     if (!shiftPlan || shiftPlan.status === 'published') return false;
-    
+
     // Check if all active employees have set their availabilities
     const employeesWithoutAvailabilities = employees.filter(emp => {
       const empAvailabilities = availabilities.filter(avail => avail.employeeId === emp.id);
@@ -714,15 +706,15 @@ const ShiftPlanView: React.FC = () => {
 
   const canPublishAssignment = (): boolean => {
     if (!assignmentResult) return false;
-    
+
     // Check if assignment was successful
     if (assignmentResult.success === false) return false;
-    
+
     // Check if there are any critical violations
-    const hasCriticalViolations = assignmentResult.violations.some(v => 
+    const hasCriticalViolations = assignmentResult.violations.some(v =>
       v.includes('ERROR:') || v.includes('KRITISCH:')
     );
-    
+
     return !hasCriticalViolations;
   };
 
@@ -742,23 +734,23 @@ const ShiftPlanView: React.FC = () => {
   const reloadAvailabilities = async () => {
     try {
       console.log('🔄 Lade Verfügbarkeiten neu...');
-      
+
       // Load availabilities for all employees
       const availabilityPromises = employees
         .filter(emp => emp.isActive)
         .map(emp => employeeService.getAvailabilities(emp.id));
-      
+
       const allAvailabilities = await Promise.all(availabilityPromises);
       const flattenedAvailabilities = allAvailabilities.flat();
-      
+
       // Filter availabilities to only include those for the current shift plan
       const planAvailabilities = flattenedAvailabilities.filter(
         availability => availability.planId === id
       );
-      
+
       setAvailabilities(planAvailabilities);
       console.log('✅ Verfügbarkeiten neu geladen:', planAvailabilities.length);
-      
+
     } catch (error) {
       console.error('❌ Fehler beim Neuladen der Verfügbarkeiten:', error);
     }
@@ -766,26 +758,26 @@ const ShiftPlanView: React.FC = () => {
 
   const getAssignmentsForScheduledShift = (scheduledShift: ScheduledShift): string[] => {
     if (!assignmentResult) return [];
-    
+
     const dayOfWeek = getDayOfWeek(scheduledShift.date);
-    
+
     // Find the corresponding shift pattern for this day and time slot
-    const shiftPattern = shiftPlan?.shifts?.find(shift => 
+    const shiftPattern = shiftPlan?.shifts?.find(shift =>
-      shift.dayOfWeek === dayOfWeek && 
+      shift.dayOfWeek === dayOfWeek &&
       shift.timeSlotId === scheduledShift.timeSlotId
     );
-    
+
     if (shiftPattern && assignmentResult.assignments[shiftPattern.id]) {
       console.log(`✅ Found assignments for shift pattern ${shiftPattern.id}:`, assignmentResult.assignments[shiftPattern.id]);
       return assignmentResult.assignments[shiftPattern.id];
     }
-    
+
     // Fallback: Check if there's a direct match with scheduled shift ID (unlikely)
     if (assignmentResult.assignments[scheduledShift.id]) {
       console.log(`⚠️ Using direct scheduled shift assignment for ${scheduledShift.id}`);
       return assignmentResult.assignments[scheduledShift.id];
     }
-    
+
     console.warn(`❌ No assignments found for scheduled shift ${scheduledShift.id} (Day ${dayOfWeek}, TimeSlot ${scheduledShift.timeSlotId})`);
     return [];
   };
@@ -899,7 +891,7 @@ const ShiftPlanView: React.FC = () => {
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
-                    
+
                     if (!shift) {
                       return (
                         <td key={weekday.id} style={{
@@ -917,7 +909,7 @@ const ShiftPlanView: React.FC = () => {
 
                     // Validation: Check if shift has correct timeSlotId and dayOfWeek - SAME AS AVAILABILITYMANAGER
                     const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
-                    
+
                     let assignedEmployees: string[] = [];
                     let displayContent: React.ReactNode = null;
 
@@ -926,16 +918,16 @@ const ShiftPlanView: React.FC = () => {
                       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')) {
+                        } else if (employee.employeeType === 'manager') {
                           backgroundColor = '#CC0000'; // Manager
                         }
-                        
+
                         return (
                           <div
                             key={empId}
@@ -961,8 +953,8 @@ const ShiftPlanView: React.FC = () => {
 
                     // Helper function to get fallback content
                     const getFallbackContent = () => {
-                      const shiftsForSlot = shiftPlan?.shifts?.filter(s => 
+                      const shiftsForSlot = shiftPlan?.shifts?.filter(s =>
-                        s.dayOfWeek === weekday.id && 
+                        s.dayOfWeek === weekday.id &&
                         s.timeSlotId === timeSlot.id
                       ) || [];
                       const totalRequired = shiftsForSlot.reduce((sum, s) => sum + s.requiredEmployees, 0);
@@ -973,18 +965,18 @@ const ShiftPlanView: React.FC = () => {
                       // For published plans, use actual assignments from scheduled shifts
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       if (scheduledShift) {
                         assignedEmployees = scheduledShift.assignedEmployees || [];
-                        
+
                         // 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' }}>
@@ -1000,10 +992,10 @@ const ShiftPlanView: React.FC = () => {
                       // For draft with preview, use assignment result
                       const scheduledShift = scheduledShifts.find(scheduled => {
                         const scheduledDayOfWeek = getDayOfWeek(scheduled.date);
-                        return scheduledDayOfWeek === weekday.id && 
+                        return scheduledDayOfWeek === weekday.id &&
-                              scheduled.timeSlotId === timeSlot.id;
+                          scheduled.timeSlotId === timeSlot.id;
                       });
-                      
+
                       if (scheduledShift) {
                         assignedEmployees = getAssignmentsForScheduledShift(scheduledShift);
                         const employeeBoxes = createEmployeeBoxes(assignedEmployees);
@@ -1054,7 +1046,7 @@ 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>
@@ -1063,9 +1055,9 @@ const ShiftPlanView: React.FC = () => {
                         {displayContent}
 
                         {/* Shift debug info - SAME AS AVAILABILITYMANAGER */}
-                        <div style={{ 
+                        <div style={{
-                          fontSize: '10px', 
+                          fontSize: '10px',
-                          color: '#666', 
+                          color: '#666',
                           marginTop: '4px',
                           textAlign: 'left',
                           fontFamily: 'monospace'
@@ -1098,20 +1090,20 @@ const ShiftPlanView: React.FC = () => {
   return (
     <div style={{ padding: '20px' }}>
       {/* Header with Plan Information and Actions */}
-      <div style={{ 
+      <div style={{
-        display: 'flex', 
+        display: 'flex',
-        justifyContent: 'space-between', 
+        justifyContent: 'space-between',
         alignItems: 'flex-start',
         marginBottom: '20px'
       }}>
         <div>
           <h1>{shiftPlan.name}</h1>
           <p style={{ color: '#666', margin: 0 }}>
-            {shiftPlan.startDate && shiftPlan.endDate && 
+            {shiftPlan.startDate && shiftPlan.endDate &&
               `Zeitraum: ${formatDate(shiftPlan.startDate)} - ${formatDate(shiftPlan.endDate)}`
             }
           </p>
-          <div style={{ 
+          <div style={{
             display: 'inline-block',
             padding: '4px 12px',
             backgroundColor: shiftPlan.status === 'published' ? '#2ecc71' : '#f1c40f',
@@ -1124,49 +1116,7 @@ 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']) && (
-            <>
-              <button
-                onClick={handleExportExcel}
-                disabled={exporting}
-                style={{
-                  padding: '10px 20px',
-                  backgroundColor: '#27ae60',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: exporting ? 'not-allowed' : 'pointer',
-                  fontWeight: 'bold',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                {exporting ? '🔄' : '📊'} {exporting ? 'Exportiert...' : 'Excel Export'}
-              </button>
-              
-              <button
-                onClick={handleExportPDF}
-                disabled={exporting}
-                style={{
-                  padding: '10px 20px',
-                  backgroundColor: '#e74c3c',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: exporting ? 'not-allowed' : 'pointer',
-                  fontWeight: 'bold',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                {exporting ? '🔄' : '📄'} {exporting ? 'Exportiert...' : 'PDF Export'}
-              </button>
-            </>
-          )}
-          
           {/* "Zuweisungen neu berechnen" button */}
           {shiftPlan.status === 'published' && hasRole(['admin', 'maintenance']) && (
             <button
@@ -1185,7 +1135,7 @@ const ShiftPlanView: React.FC = () => {
               {recreating ? 'Lösche Zuweisungen...' : 'Zuweisungen neu berechnen'}
             </button>
           )}
-          
+
           <button
             onClick={() => navigate('/shift-plans')}
             style={{
@@ -1220,15 +1170,15 @@ const ShiftPlanView: React.FC = () => {
               <div style={{ fontSize: '18px', fontWeight: 'bold' }}>
                 {availabilityStatus.completed} / {availabilityStatus.total} Mitarbeiter
               </div>
-              <div style={{ 
+              <div style={{
-                width: '200px', 
+                width: '200px',
-                height: '8px', 
+                height: '8px',
-                backgroundColor: '#e0e0e0', 
+                backgroundColor: '#e0e0e0',
                 borderRadius: '4px',
                 marginTop: '5px',
                 overflow: 'hidden'
               }}>
-                <div 
+                <div
                   style={{
                     width: `${availabilityStatus.percentage}%`,
                     height: '100%',
@@ -1238,7 +1188,7 @@ const ShiftPlanView: React.FC = () => {
                 />
               </div>
             </div>
-            
+
             {hasRole(['admin', 'maintenance']) && (
               <div>
                 <button
@@ -1256,11 +1206,11 @@ const ShiftPlanView: React.FC = () => {
                 >
                   {publishing ? 'Berechne...' : 'Automatisch zuweisen'}
                 </button>
-                
+
                 {!canPublish() && (
                   <div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>
-                    {availabilityStatus.percentage === 100 
+                    {availabilityStatus.percentage === 100
-                      ? 'Bereit zur Berechnung' 
+                      ? 'Bereit zur Berechnung'
                       : `${availabilityStatus.total - availabilityStatus.completed} Mitarbeiter müssen noch Verfügbarkeit eintragen`}
                   </div>
                 )}
@@ -1305,7 +1255,7 @@ const ShiftPlanView: React.FC = () => {
             width: '90%'
           }}>
             <h2>Wochenmuster-Zuordnung</h2>
-            
+
             {/* Detaillierter Reparatur-Bericht anzeigen */}
             {assignmentResult?.resolutionReport && (
               <div style={{
@@ -1321,15 +1271,15 @@ const ShiftPlanView: React.FC = () => {
                 <h4 style={{ color: '#2c3e50', marginTop: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
                   <span>📋</span> Detaillierter Reparatur-Bericht
                 </h4>
-                <div style={{ 
+                <div style={{
-                  fontFamily: 'monospace', 
+                  fontFamily: 'monospace',
                   fontSize: '12px',
                   lineHeight: '1.4'
                 }}>
                   {assignmentResult.resolutionReport.map((line, index) => {
                     let color = '#2c3e50';
                     let fontWeight = 'normal';
-                    
+
                     if (line.includes('✅') || line.includes('ALLES KRITISCHEN PROBLEME BEHOBEN')) {
                       color = '#2ecc71';
                       fontWeight = 'bold';
@@ -1344,9 +1294,9 @@ const ShiftPlanView: React.FC = () => {
                     } else if (line.startsWith('   •') || line.startsWith('   -')) {
                       color = '#7f8c8d';
                     }
-                    
+
                     return (
-                      <div key={index} style={{ 
+                      <div key={index} style={{
                         color,
                         fontWeight,
                         marginBottom: line === '' ? '5px' : '2px',
@@ -1359,12 +1309,12 @@ const ShiftPlanView: React.FC = () => {
                 </div>
               </div>
             )}
-              
+
             {/* ZUSAMMENFASSUNG */}
             {assignmentResult && (
               <div style={{ marginBottom: '20px' }}>
                 <h4>Zusammenfassung:</h4>
-                
+
                 {/* Entscheidung basierend auf tatsächlichen kritischen Problemen */}
                 {(assignmentResult.violations.length === 0) || assignmentResult.success == true ? (
                   <div style={{
@@ -1404,7 +1354,7 @@ const ShiftPlanView: React.FC = () => {
                     </ul>
                   </div>
                 )}
-                
+
                 {/* Warnungen separat anzeigen - NUR wenn welche vorhanden sind */}
                 {assignmentResult.violations.some(v => v.includes('WARNING:') || v.includes('⚠️')) && (
                   <div style={{
@@ -1448,7 +1398,7 @@ const ShiftPlanView: React.FC = () => {
               >
                 Abbrechen
               </button>
-              
+
               {/* BUTTON zum publishen */}
               <button
                 onClick={handlePublish}
@@ -1466,8 +1416,8 @@ const ShiftPlanView: React.FC = () => {
               >
                 {publishing ? 'Veröffentliche...' : (
                   assignmentResult ? (
-                    canPublishAssignment() 
+                    canPublishAssignment()
-                      ? 'Schichtplan veröffentlichen' 
+                      ? 'Schichtplan veröffentlichen'
                       : 'Kritische Probleme müssen behoben werden'
                   ) : 'Lade Zuordnungen...'
                 )}
@@ -1475,7 +1425,7 @@ const ShiftPlanView: React.FC = () => {
             </div>
           </div>
         </div>
-      )}     
+      )}
 
       {/* Timetable */}
       <div style={{
@@ -1485,13 +1435,71 @@ const ShiftPlanView: React.FC = () => {
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
       }}>
         <h3>
-          Schichtplan 
+          Schichtplan
           {shiftPlan.status === 'published' && ' (Aktuelle Zuweisungen)'}
           {assignmentResult && shiftPlan.status === 'draft' && ' (Exemplarische Woche)'}
         </h3>
-        
+
         {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={{
@@ -1503,11 +1511,11 @@ const ShiftPlanView: React.FC = () => {
             fontSize: '14px'
           }}>
             <strong>Legende:</strong> {
-              shiftPlan.status === 'published' 
+              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>
         )}

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "workspaces": [
     "frontend",
-    "backend", 
+    "backend",
     "premium"
   ],
   "scripts": {
@@ -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",