fixed klammer usage

2025-12-01 06:55:45 +01:00 · 2025-11-04 22:28:23 +01:00
11 changed files with 279 additions and 1787 deletions
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,9 +4,7 @@
  "type": "module",
  "scripts": {
    "dev": "npm run build && 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",
+    "dev:single": "cross-env NODE_ENV=development TRUST_PROXY_ENABLED=false 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",
@@ -18,7 +16,7 @@
  "dependencies": {
    "@types/bcrypt": "^6.0.0",
    "@types/node": "24.9.2",
-    "vite": "7.1.12",
+    "vite":"7.1.12",
    "bcrypt": "^6.0.0",
    "bcryptjs": "^2.4.3",
    "express": "^4.18.2",
@@ -27,9 +25,7 @@
    "uuid": "^9.0.0",
    "express-rate-limit": "8.1.0",
    "helmet": "8.1.0",
-    "express-validator": "7.3.0",
+    "express-validator": "7.3.0"
    "exceljs": "4.4.0",
    "playwright-chromium": "^1.37.0"
  },
  "devDependencies": {
    "@types/bcryptjs": "^2.4.2",
--- a/backend/src/controllers/shiftPlanController.ts
+++ b/backend/src/controllers/shiftPlanController.ts
--- a/backend/src/routes/shiftPlans.ts
+++ b/backend/src/routes/shiftPlans.ts
@@ -7,9 +7,7 @@ import {
  updateShiftPlan, 
  deleteShiftPlan,
  createFromPreset,
-  clearAssignments,
+  clearAssignments
  exportShiftPlanToExcel,
  exportShiftPlanToPDF
 } from '../controllers/shiftPlanController.js';
 import { 
  validateShiftPlan, 
@@ -32,7 +30,4 @@ 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;
--- a/backend/src/scripts/seedTestData.ts
+++ b/backend/src/scripts/seedTestData.ts
@@ -1,347 +0,0 @@
 // 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);
        });
 }
--- a/backend/src/scripts/test.json
+++ b/backend/src/scripts/test.json
@@ -1,235 +0,0 @@
 {
  "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"
  }
 }
--- a/backend/src/server.ts
+++ b/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,15 +27,6 @@ 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);
@@ -105,12 +96,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();
  }
@@ -125,15 +116,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();
 });
@@ -282,7 +273,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 {
@@ -320,16 +311,6 @@ 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}`);
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
    "framer-motion": "12.23.24",
    "file-saver": "2.0.5",
    "@types/file-saver": "2.0.5"
  },
  "scripts": {
    "dev": "vite dev",
--- a/frontend/src/pages/Employees/components/AvailabilityManager.tsx
+++ b/frontend/src/pages/Employees/components/AvailabilityManager.tsx
@@ -317,17 +317,7 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
    // Convert to array and sort by start time
    const sortedTimeSlots = Array.from(allTimeSlots.values()).sort((a, b) => {
-      // Convert time strings to minutes for proper numeric comparison
+      return (a.startTime || '').localeCompare(b.startTime || '');
      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 (
--- a/frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx
+++ b/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'}
--- a/frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
+++ b/frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
@@ -1,5 +1,5 @@
 // frontend/src/pages/ShiftPlans/ShiftPlanView.tsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } 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,22 +56,19 @@ 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);
    };
@@ -87,7 +84,7 @@ const ShiftPlanView: React.FC = () => {
    };
    document.addEventListener('visibilitychange', handleVisibilityChange);
-
+    
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
@@ -102,17 +99,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})`);
    });
  };
@@ -124,12 +121,6 @@ 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) {
@@ -144,7 +135,7 @@ const ShiftPlanView: React.FC = () => {
      if (!acc[shift.dayOfWeek]) {
        acc[shift.dayOfWeek] = [];
      }
-
+      
      const timeSlot = timeSlotMap.get(shift.timeSlotId);
      const enhancedShift: ExtendedShift = {
        ...shift,
@@ -153,7 +144,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[]>);
@@ -200,17 +191,7 @@ 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) => {
-      // Convert time strings to minutes for proper numeric comparison
+      return (a.startTime || '').localeCompare(b.startTime || '');
      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 };
@@ -223,11 +204,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`);
@@ -261,33 +242,60 @@ const ShiftPlanView: React.FC = () => {
    };
  };
-  const handleExport = async () => {
+  const handleExportExcel = async () => {
-    if (!shiftPlan || !exportType) return;
+    if (!shiftPlan) return;
    try {
      setExporting(true);
-
+      
-      let blob: Blob;
+      // Call the export service
-      if (exportType === 'excel') {
+      const blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
-        blob = await shiftPlanService.exportShiftPlanToExcel(shiftPlan.id);
+      
-        saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
+      // Use file-saver to download the file
-      } else {
+      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.xlsx`);
-        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 ${exportType === 'excel' ? 'Excel' : 'PDF'} exportiert.`
+        message: 'Der Schichtplan wurde als Excel-Datei exportiert.'
      });
-
+      
    } catch (error) {
-      console.error(`Error exporting to ${exportType}:`, error);
+      console.error('Error exporting to Excel:', error);
      showNotification({
        type: 'error',
        title: 'Export fehlgeschlagen',
-        message: `Der ${exportType === 'excel' ? 'Excel' : 'PDF'}-Export konnte nicht durchgeführt werden.`
+        message: 'Der Excel-Export konnte nicht durchgeführt werden.'
      });
    } finally {
      setExporting(false);
    }
  };
  const handleExportPDF = async () => {
    if (!shiftPlan) return;
    try {
      setExporting(true);
      // Call the PDF export service
      const blob = await shiftPlanService.exportShiftPlanToPDF(shiftPlan.id);
      // Use file-saver to download the file
      saveAs(blob, `Schichtplan_${shiftPlan.name}_${new Date().toISOString().split('T')[0]}.pdf`);
      showNotification({
        type: 'success',
        title: 'Export erfolgreich',
        message: 'Der Schichtplan wurde als PDF exportiert.'
      });
    } 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);
@@ -296,10 +304,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),
@@ -312,7 +320,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({
@@ -326,21 +334,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
@@ -366,7 +374,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;
      }
@@ -397,7 +405,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);
@@ -437,9 +445,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)),
@@ -468,7 +476,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,
@@ -489,7 +497,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}`);
@@ -505,7 +513,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) {
@@ -519,18 +527,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');
      }
@@ -540,19 +548,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));
@@ -560,13 +568,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);
@@ -604,12 +612,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',
@@ -623,7 +631,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 [];
@@ -639,20 +647,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);
@@ -663,21 +671,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`);
@@ -694,7 +702,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);
@@ -706,15 +714,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;
  };
@@ -734,23 +742,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);
    }
@@ -758,26 +766,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 [];
  };
@@ -891,7 +899,7 @@ const ShiftPlanView: React.FC = () => {
                  </td>
                  {days.map(weekday => {
                    const shift = timeSlot.shiftsByDay[weekday.id];
-
+                    
                    if (!shift) {
                      return (
                        <td key={weekday.id} style={{
@@ -909,7 +917,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;
@@ -918,16 +926,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.employeeType === 'manager') {
+                        } else if (employee.roles?.includes('manager')) {
                          backgroundColor = '#CC0000'; // Manager
                        }
-
+                        
                        return (
                          <div
                            key={empId}
@@ -953,8 +961,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);
@@ -965,18 +973,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' }}>
@@ -992,10 +1000,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);
@@ -1046,7 +1054,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>
@@ -1055,9 +1063,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'
@@ -1090,20 +1098,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',
@@ -1116,7 +1124,49 @@ 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
@@ -1135,7 +1185,7 @@ const ShiftPlanView: React.FC = () => {
              {recreating ? 'Lösche Zuweisungen...' : 'Zuweisungen neu berechnen'}
            </button>
          )}
-
+          
          <button
            onClick={() => navigate('/shift-plans')}
            style={{
@@ -1170,15 +1220,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%',
@@ -1188,7 +1238,7 @@ const ShiftPlanView: React.FC = () => {
                />
              </div>
            </div>
-
+            
            {hasRole(['admin', 'maintenance']) && (
              <div>
                <button
@@ -1206,11 +1256,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>
                )}
@@ -1255,7 +1305,7 @@ const ShiftPlanView: React.FC = () => {
            width: '90%'
          }}>
            <h2>Wochenmuster-Zuordnung</h2>
-
+            
            {/* Detaillierter Reparatur-Bericht anzeigen */}
            {assignmentResult?.resolutionReport && (
              <div style={{
@@ -1271,15 +1321,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';
@@ -1294,9 +1344,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',
@@ -1309,12 +1359,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={{
@@ -1354,7 +1404,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={{
@@ -1398,7 +1448,7 @@ const ShiftPlanView: React.FC = () => {
              >
                Abbrechen
              </button>
-
+              
              {/* BUTTON zum publishen */}
              <button
                onClick={handlePublish}
@@ -1416,8 +1466,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...'
                )}
@@ -1425,7 +1475,7 @@ const ShiftPlanView: React.FC = () => {
            </div>
          </div>
        </div>
-      )}
+      )}     
      {/* Timetable */}
      <div style={{
@@ -1435,71 +1485,13 @@ 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={{
@@ -1511,11 +1503,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>
        )}
--- a/package.json
+++ b/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:all"
+    "dev:backend": "cd backend && npm run dev:single"
  },
  "devDependencies": {
    "typescript": "^5.3.3",