updated validation handling together with shiftplan

backend/src/controllers/employeeController.ts

@@ -314,6 +314,56 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
       return;
     }
 
+    // Check if user is trying to remove their own admin role
+    const currentUser = req.user;
+    if (currentUser?.userId === id && roles) {
+      const currentUserRoles = await db.all<{ role: string }>(
+        'SELECT role FROM employee_roles WHERE employee_id = ?',
+        [currentUser.userId]
+      );
+      
+      const isCurrentlyAdmin = currentUserRoles.some(role => role.role === 'admin');
+      const willBeAdmin = roles.includes('admin');
+      
+      if (isCurrentlyAdmin && !willBeAdmin) {
+        res.status(400).json({ error: 'You cannot remove your own admin role' });
+        return;
+      }
+    }
+
+    // Check admin count if roles are being updated
+    if (roles) {
+      try {
+        await checkAdminCount(id, roles);
+      } catch (error: any) {
+        res.status(400).json({ error: error.message });
+        return;
+      }
+    }
+
+    // Check if trying to deactivate the last admin
+    if (isActive === false) {
+      const isEmployeeAdmin = await db.get<{ count: number }>(
+        `SELECT COUNT(*) as count FROM employee_roles WHERE employee_id = ? AND role = 'admin'`,
+        [id]
+      );
+
+      if (isEmployeeAdmin && isEmployeeAdmin.count > 0) {
+        const otherAdminCount = await db.get<{ count: number }>(
+          `SELECT COUNT(*) as count 
+           FROM employee_roles er
+           JOIN employees e ON er.employee_id = e.id
+           WHERE er.role = 'admin' AND e.is_active = 1 AND er.employee_id != ?`,
+          [id]
+        );
+
+        if (!otherAdminCount || otherAdminCount.count === 0) {
+          res.status(400).json({ error: 'Cannot deactivate the last admin user' });
+          return;
+        }
+      }
+    }
+
     // Validate employee type if provided
     if (employeeType) {
       const validEmployeeType = await db.get(
@@ -438,7 +488,15 @@ export const deleteEmployee = async (req: AuthRequest, res: Response): Promise<v
     const { id } = req.params;
     console.log('🗑️ Starting deletion process for employee ID:', id);
 
-    // UPDATED: Check if employee exists with role from employee_roles
+    const currentUser = req.user;
+
+    // Prevent self-deletion
+    if (currentUser?.userId === id) {
+      res.status(400).json({ error: 'You cannot delete yourself' });
+      return;
+    }
+
+    // Check if employee exists with role from employee_roles
     const existingEmployee = await db.get<any>(`
       SELECT 
         e.id, e.email, e.firstname, e.lastname, e.is_active,
@@ -455,6 +513,26 @@ export const deleteEmployee = async (req: AuthRequest, res: Response): Promise<v
       return;
     }
 
+    const employeeRoles = await db.all<{ role: string }>(`
+      SELECT role FROM employee_roles WHERE employee_id = ?
+    `, [id]);
+
+    const isEmployeeAdmin = employeeRoles.some(role => role.role === 'admin');
+
+    // Check if this is the last admin
+    if (isEmployeeAdmin) {
+      const adminCount = await db.get<{ count: number }>(
+        `SELECT COUNT(*) as count 
+         FROM employee_roles 
+         WHERE role = 'admin'`
+      );
+
+      if (adminCount && adminCount.count <= 1) {
+        res.status(400).json({ error: 'Cannot delete the last admin user' });
+        return;
+      }
+    }
+
     console.log('📝 Found employee to delete:', existingEmployee);
 
     // Start transaction
@@ -511,7 +589,6 @@ export const deleteEmployee = async (req: AuthRequest, res: Response): Promise<v
       console.error('Error during deletion transaction:', error);
       throw error;
     }
-
   } catch (error) {
     console.error('Error deleting employee:', error);
     res.status(500).json({ error: 'Internal server error' });
@@ -558,13 +635,49 @@ export const updateAvailabilities = async (req: AuthRequest, res: Response): Pro
     const { employeeId } = req.params;
     const { planId, availabilities } = req.body;
 
-    // Check if employee exists
-    const existingEmployee = await db.get('SELECT id FROM employees WHERE id = ?', [employeeId]);
+    // Check if employee exists and get contract type
+    const existingEmployee = await db.get<any>(`
+      SELECT e.*, er.role 
+      FROM employees e
+      LEFT JOIN employee_roles er ON e.id = er.employee_id
+      WHERE e.id = ?
+    `, [employeeId]);
+
     if (!existingEmployee) {
       res.status(404).json({ error: 'Employee not found' });
       return;
     }
 
+    // Check if employee is active
+    if (!existingEmployee.is_active) {
+      res.status(400).json({ error: 'Cannot set availability for inactive employee' });
+      return;
+    }
+
+    // Validate contract type requirements
+    const availableCount = availabilities.filter((avail: any) => 
+      avail.preferenceLevel === 1 || avail.preferenceLevel === 2
+    ).length;
+
+    const contractType = existingEmployee.contract_type;
+    
+    // Apply contract type minimum requirements
+    if (contractType === 'small' && availableCount < 2) {
+      res.status(400).json({ 
+        error: 'Employees with small contract must have at least 2 available shifts' 
+      });
+      return;
+    }
+
+    if (contractType === 'large' && availableCount < 3) {
+      res.status(400).json({ 
+        error: 'Employees with large contract must have at least 3 available shifts' 
+      });
+      return;
+    }
+
+    // Flexible contract has no minimum requirement
+
     await db.run('BEGIN TRANSACTION');
 
     try {
@@ -700,3 +813,35 @@ export const updateLastLogin = async (req: AuthRequest, res: Response): Promise<
     res.status(500).json({ error: 'Internal server error' });
   }
 };
+
+const checkAdminCount = async (employeeId: string, newRoles: string[]): Promise<void> => {
+  try {
+    // Count current admins excluding the employee being updated
+    const adminCountResult = await db.get<{ count: number }>(
+      `SELECT COUNT(DISTINCT employee_id) as count 
+       FROM employee_roles 
+       WHERE role = 'admin' AND employee_id != ?`,
+      [employeeId]
+    );
+
+    const currentAdminCount = adminCountResult?.count || 0;
+    
+    // Check ALL current roles for the employee
+    const currentEmployeeRoles = await db.all<{ role: string }>(
+      `SELECT role FROM employee_roles WHERE employee_id = ?`,
+      [employeeId]
+    );
+
+    const currentRoles = currentEmployeeRoles.map(role => role.role);
+    const isCurrentlyAdmin = currentRoles.includes('admin');
+    const willBeAdmin = newRoles.includes('admin');
+
+    // If removing admin role from the last admin, throw error
+    if (isCurrentlyAdmin && !willBeAdmin && currentAdminCount === 0) {
+      throw new Error('Cannot remove admin role from the last admin user');
+    }
+
+  } catch (error) {
+    throw error;
+  }
+};

backend/src/middleware/Validation/Access.md

@@ -0,0 +1,25 @@
+## User Settings
+
+### \[UPDATE\] Personal availability
+* Only the employee themselves can manage their availability
+* Must select a valid shift plan with defined shifts
+* All changes require explicit save action
+
+### \[VIEW\] ShiftPlan assignments
+* Published plans show actual assignments
+* Draft plans show preview assignments (if calculated)
+* Regular users can only view, not modify assignments
+
+## System-wide
+
+### \[ACCESS\] Role-based restrictions
+* `admin`: Full access to all features
+* `maintenance`: Access to shift plans and employee management (except admin users)
+* `user`: Read-only access to shift plans, can manage own availability and profile
+
+### \[DATA\] Validation rules
+* Email addresses are automatically generated from firstname/lastname
+* Employee status (`isActive`) controls login and planning eligibility
+* Trainee status affects independence (`canWorkAlone`) automatically
+* Date ranges must be valid (start before end)
+* All required fields must be filled before form submission

backend/src/middleware/Validation/Assignment.md

@@ -0,0 +1,37 @@
+## Shift Assignment
+
+### \[ACTION: update scheduled shift\]
+* Requires valid scheduled shift ID
+* Only updates assignedEmployees array
+* Requires authentication with valid token
+* Handles both JSON and non-JSON responses
+
+### \[ACTION: assign shifts automatically\]
+* Requires shift plan, employees, and availabilities
+* Availability preferenceLevel must be 1, 2, or 3
+* Constraints must be an array (converts non-array to empty array)
+* All employees must have valid availability data
+
+### \[ACTION: get scheduled shifts\]
+* Requires valid plan ID
+* Automatically fixes data structure inconsistencies:
+  - timeSlotId mapping (handles both naming conventions)
+  - requiredEmployees fallback to 2 if missing
+  - assignedEmployees fallback to empty array if missing
+
+## Availability
+
+### [UPDATE] availability
+* planId: required valid UUID
+* availabilities: required array with strict validation:
+  - shiftId: valid UUID
+  - preferenceLevel: 0 (unavailable), 1 (available), or 2 (preferred)
+  - notes: optional, max 500 characters
+
+## Scheduling
+
+### [ACTION: generate schedule]
+* shiftPlan: required object with id (valid UUID)
+* employees: required array with at least one employee, each with valid UUID
+* availabilities: required array
+* constraints: optional array

backend/src/middleware/Validation/Authentication.md

@@ -0,0 +1,23 @@
+## Authentication
+
+### \[ACTION: login\]
+* Requires valid email and password format:
+  - Minimum 8 characters
+  - Must contain uppercase, lowercase, number and special character
+* Server validates credentials before issuing token
+* Token and employee data stored in localStorage upon success
+
+### \[ACTION: register\]
+* `Password` optional but strict validation:
+  - Minimum 8 characters
+  - Must contain uppercase, lowercase, number and special character
+* `firstname` 1-100 characters and must not be empty
+* `lastname` 1-100 characters and must not be empty
+* Requires valid email
+* Role is optional during registration
+* Automatically logs in user after successful registration
+
+### \[ACTION: access protected resources\]
+* Requires valid JWT token in Authorization header
+* Token is automatically retrieved from localStorage
+* Unauthorized requests (401) trigger automatic logout

backend/src/middleware/Validation/DataIntegrity

@@ -0,0 +1,23 @@
+## Data Integrity
+
+### \[GENERAL\] API communication
+* All fetch requests include error handling
+* Failed responses throw descriptive errors
+* Token validation before protected operations
+* Automatic localStorage cleanup on logout
+
+### \[GENERAL\] data persistence
+* Employee data cached in localStorage after login
+* Token automatically retrieved from localStorage
+* Data structure normalization for scheduled shifts
+
+### \[GENERAL\] error handling
+* Network errors are caught and logged
+* HTTP errors include status codes and messages
+* Failed authentication triggers cleanup and logout
+
+## Role & Permission Notes
+* The frontend services don't explicitly restrict actions by role
+* Role-based restrictions are likely handled by the backend
+* Frontend assumes user has permissions for requested operations
+* 401 responses indicate insufficient permissions at backend level

backend/src/middleware/Validation/Employee.md

@@ -0,0 +1,75 @@
+## Employee Management
+
+### \[CREATE/UPDATE\] employee
+* All employee operations require authentication
+* Password changes require current password + new password
+* Only authenticated users can create/update employees
+
+### \[ACTION: delete employee\]
+* Requires authentication
+* Server validates permissions before deletion
+
+### \[ACTION: update availability\]
+* Requires employee ID and plan ID
+* Availability updates must include valid preference levels
+* Only authenticated users can update availabilities
+
+### \[ACTION: update last login\]
+* Requires employee ID
+* Fails silently if update fails (logs error but doesn`t block user)
+
+## Employee
+
+### \[CREATE\] Employee
+* `firstname` 1-100 characters and must not be empty
+* `lastname` 1-100 characters and must not be empty
+* `password` must be at least 6 characters (in create mode)
+* `employeeType` must be `manager`, `personell`, `apprentice`, or `guest`
+* `canWorkAlone` optional boolean
+* `isTrainee` optional boolean
+* `isActive` optional boolean (default true)
+* Contract type validation:
+  * `manager`, `apprentice` => `contractType` = flexible
+  * `guest` => `contractType` = undefined/NONE
+  * `personell` => `contractType` = small || large
+
+### \[UPDATE\] Employee profile
+* `firstname` 1-100 characters and must not be empty
+* `lastname` 1-100 characters and must not be empty
+* `employeeType` must be valid type if provided
+* `contractType` must be valid type if provided
+* `roles` must be valid array of roles if provided
+* Only the employee themselves or admins can update
+
+### \[UPDATE\] Employee password
+* `newPassword` optional but strict validation:
+  - Minimum 8 characters
+  - Must contain uppercase, lowercase, number and special character
+* `newPassword` must match `confirmPassword`
+* For admin password reset: no `currentPassword` required
+* For self-password change: `currentPassword` required
+
+### \[UPDATE\] Employee roles
+* Only users with role `admin` can modify roles
+* At least one employee must maintain `admin` role
+* Users cannot remove their own admin role
+
+### \[UPDATE\] Employee availability
+* Only active employees can set availability
+* Contract type requirements:
+  * `small` contract: minimum 2 available shifts (preference level 1 or 2)
+  * `large` contract: minimum 3 available shifts (preference level 1 or 2)
+  * `flexible` contract: no minimum requirement
+* Availability can only be set for valid shift patterns in selected plan
+* `shiftId` must be valid and exist in the current plan
+
+### \[ACTION: delete\] Employee
+* Only users with role `admin` can delete employees
+* Cannot delete yourself
+* Cannot delete the last admin user
+* User confirmation required before deletion
+
+### \[ACTION: edit\] Employee
+* Admins can edit all employees
+* Maintenance users can edit non-admin employees or themselves
+* Regular users can only edit themselves

backend/src/middleware/Validation/Shiftplan.md

@@ -0,0 +1,66 @@
+## Shift Plan Management
+
+### \[CREATE\] shift plan
+* All operations require authentication
+* 401 responses trigger automatic logout
+* Scheduled shifts array is guaranteed to exist (empty array if none)
+
+### \[CREATE\] shift plan from preset
+* presetName must match existing TEMPLATE_PRESETS
+* Requires name, startDate, and endDate
+* isTemplate is optional (defaults to false)
+
+### \[UPDATE\] shift plan
+* Requires valid shift plan ID
+* Partial updates allowed
+* Authentication required
+
+### \[ACTION: delete shift plan\]
+* Requires authentication
+* 401 responses trigger automatic logout
+
+### \[ACTION: regenerate scheduled shifts\]
+* Requires valid plan ID
+* Authentication required
+* Fails silently if regeneration fails (logs error but continues)
+
+### \[ACTION: clear assignments\]
+* Requires valid plan ID
+* Authentication required
+* Clears all employee assignments from scheduled shifts
+
+## ShiftPlan
+
+### \[CREATE\] ShiftPlan from template
+* `planName` must not be empty
+* `startDate` must be set
+* `endDate` must be set
+* `endDate` must be after `startDate`
+* `selectedPreset` must be chosen (template must be selected)
+* Only available template presets can be used
+
+### \[ACTION: publish\] ShiftPlan
+* Plan must be in 'draft' status
+* All active employees must have set their availabilities for the plan
+* Only users with roles \['admin', 'maintenance'\] can publish
+* Assignment algorithm must not have critical violations (ERROR or ❌ KRITISCH)
+* employee && employee.contract_type === small => mind. 1 mal availability === 1 || availability === 2
+* employee && employee.contract_type === large => mind. 3 mal availability === 1 || availability === 2
+
+### \[ACTION: recreate assignments\]
+* Plan must be in 'published' status
+* Only users with roles \['admin', 'maintenance'\] can recreate
+* User confirmation required before clearing all assignments
+
+### \[ACTION: delete\] ShiftPlan
+* Only users with roles \['admin', 'maintenance'\] can delete
+* User confirmation required before deletion
+
+### \[ACTION: edit\] ShiftPlan
+* Only users with roles \['admin', 'maintenance'\] can edit
+* Can only edit plans in 'draft' status
+
+### \[UPDATE\] ShiftPlan shifts
+* `timeSlotId` must be selected from available time slots
+* `requiredEmployees` must be at least 1
+* `dayOfWeek` must be between 1-7

backend/src/middleware/validation.ts

@@ -20,12 +20,16 @@ export const validateRegister = [
   body('firstname')
     .isLength({ min: 1, max: 100 })
     .withMessage('First name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('First name must not be empty')
     .trim()
     .escape(),
 
   body('lastname')
     .isLength({ min: 1, max: 100 })
     .withMessage('Last name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('Last name must not be empty')
     .trim()
     .escape(),
 
@@ -42,12 +46,16 @@ export const validateEmployee = [
   body('firstname')
     .isLength({ min: 1, max: 100 })
     .withMessage('First name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('First name must not be empty')
     .trim()
     .escape(),
 
   body('lastname')
     .isLength({ min: 1, max: 100 })
     .withMessage('Last name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('Last name must not be empty')
     .trim()
     .escape(),
 
@@ -62,6 +70,32 @@ export const validateEmployee = [
     .isIn(['manager', 'personell', 'apprentice', 'guest'])
     .withMessage('Employee type must be manager, personell, apprentice or guest'),
 
+  body('contractType')
+    .custom((value, { req }) => {
+      const employeeType = req.body.employeeType;
+      
+      // Manager, apprentice => contractType must be flexible
+      if (['manager', 'apprentice'].includes(employeeType)) {
+        if (value !== 'flexible') {
+          throw new Error(`contractType must be 'flexible' for employeeType: ${employeeType}`);
+        }
+      }
+      // Guest => contractType must be undefined/NONE
+      else if (employeeType === 'guest') {
+        if (value !== undefined && value !== null) {
+          throw new Error(`contractType is not allowed for employeeType: ${employeeType}`);
+        }
+      }
+      // Personell => contractType must be small or large
+      else if (employeeType === 'personell') {
+        if (!['small', 'large'].includes(value)) {
+          throw new Error(`contractType must be 'small' or 'large' for employeeType: ${employeeType}`);
+        }
+      }
+      
+      return true;
+    }),
+
   body('contractType')
     .optional()
     .isIn(['small', 'large', 'flexible'])
@@ -98,6 +132,8 @@ export const validateEmployeeUpdate = [
     .optional()
     .isLength({ min: 1, max: 100 })
     .withMessage('First name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('First name must not be empty')
     .trim()
     .escape(),
 
@@ -105,6 +141,8 @@ export const validateEmployeeUpdate = [
     .optional()
     .isLength({ min: 1, max: 100 })
     .withMessage('Last name must be between 1-100 characters')
+    .notEmpty()
+    .withMessage('Last name must not be empty')
     .trim()
     .escape(),
 
@@ -115,8 +153,29 @@ export const validateEmployeeUpdate = [
 
   body('contractType')
     .optional()
-    .isIn(['small', 'large', 'flexible'])
-    .withMessage('Contract type must be small, large or flexible'),
+    .custom((value, { req }) => {
+      const employeeType = req.body.employeeType;
+      if (!employeeType) return true; // Skip if employeeType not provided
+      
+      // Same validation logic as create
+      if (['manager', 'apprentice'].includes(employeeType)) {
+        if (value !== 'flexible') {
+          throw new Error(`contractType must be 'flexible' for employeeType: ${employeeType}`);
+        }
+      }
+      else if (employeeType === 'guest') {
+        if (value !== undefined && value !== null) {
+          throw new Error(`contractType is not allowed for employeeType: ${employeeType}`);
+        }
+      }
+      else if (employeeType === 'personell') {
+        if (!['small', 'large'].includes(value)) {
+          throw new Error(`contractType must be 'small' or 'large' for employeeType: ${employeeType}`);
+        }
+      }
+      
+      return true;
+    }),
 
   body('roles')
     .optional()
@@ -147,15 +206,22 @@ export const validateEmployeeUpdate = [
 export const validateChangePassword = [
   body('currentPassword')
     .optional()
-    .isLength({ min: 8 })
-    .withMessage('Current password must be at least 8 characters'),
+    .isLength({ min: 1 })
+    .withMessage('Current password is required for self-password change'),
 
   body('password')
-    .optional()
     .isLength({ min: 8 })
     .withMessage('Password must be at least 8 characters')
     .matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?])/)
     .withMessage('Password must contain uppercase, lowercase, number and special character'),
+
+  body('confirmPassword')
+    .custom((value, { req }) => {
+      if (value !== req.body.password) {
+        throw new Error('Passwords do not match');
+      }
+      return true;
+    })
 ];
 
 // ===== SHIFT PLAN VALIDATION =====
@@ -297,14 +363,24 @@ export const validateCreateFromPreset = [
     .escape(),
 
   body('startDate')
-    .optional()
     .isISO8601()
-    .withMessage('Must be a valid date (ISO format)'),
+    .withMessage('Must be a valid date (ISO format)')
+    .custom((value, { req }) => {
+      if (req.body.endDate && new Date(value) > new Date(req.body.endDate)) {
+        throw new Error('Start date must be before end date');
+      }
+      return true;
+    }),
 
   body('endDate')
-    .optional()
     .isISO8601()
-    .withMessage('Must be a valid date (ISO format)'),
+    .withMessage('Must be a valid date (ISO format)')
+    .custom((value, { req }) => {
+      if (req.body.startDate && new Date(value) < new Date(req.body.startDate)) {
+        throw new Error('End date must be after start date');
+      }
+      return true;
+    }),
 
   body('isTemplate')
     .optional()
@@ -386,7 +462,20 @@ export const validateAvailabilities = [
 
   body('availabilities')
     .isArray()
-    .withMessage('Availabilities must be an array'),
+    .withMessage('Availabilities must be an array')
+    .custom((availabilities, { req }) => {
+      // Count available shifts (preference level 1 or 2)
+      const availableCount = availabilities.filter((avail: any) => 
+        avail.preferenceLevel === 1 || avail.preferenceLevel === 2
+      ).length;
+
+      // Basic validation - at least one available shift
+      if (availableCount === 0) {
+        throw new Error('At least one available shift is required');
+      }
+      
+      return true;
+    }),
 
   body('availabilities.*.shiftId')
     .isUUID()

frontend/package.json

@@ -15,11 +15,17 @@
     "@types/react-dom": "^19.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.3",
+    "@types/jest": "30.0.0",
+    "@testing-library/react": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/user-event": "14.6.1",
+    "@storybook/react": "10.0.1",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "esbuild": "^0.21.0",
     "terser": "5.44.0",
-    "babel-plugin-transform-remove-console": "6.9.4"
+    "babel-plugin-transform-remove-console": "6.9.4",
+    "framer-motion": "12.23.24"
   },
   "scripts": {
     "dev": "vite",

frontend/src/components/StepSetup/StepSetup.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import StepSetup from './StepSetup';
+
+const meta: Meta<typeof StepSetup> = {
+  title: 'Components/StepSetup',
+  component: StepSetup,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof StepSetup>;
+
+const defaultSteps = [
+  { id: 'step-1', title: 'Account Setup', subtitle: 'Create your account' },
+  { id: 'step-2', title: 'Profile Information', subtitle: 'Add personal details' },
+  { id: 'step-3', title: 'Preferences', subtitle: 'Customize your experience', optional: true },
+  { id: 'step-4', title: 'Confirmation', subtitle: 'Review and confirm' },
+];
+
+export const Horizontal: Story = {
+  args: {
+    steps: defaultSteps,
+    defaultCurrent: 1,
+    orientation: 'horizontal',
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    steps: defaultSteps,
+    defaultCurrent: 1,
+    orientation: 'vertical',
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export const ClickableFalse: Story = {
+  args: {
+    steps: defaultSteps,
+    current: 2,
+    clickable: false,
+  },
+  name: 'Non-Clickable Steps',
+};
+
+export const AnimatedFalse: Story = {
+  args: {
+    steps: defaultSteps,
+    defaultCurrent: 1,
+    animated: false,
+  },
+  name: 'Without Animation',
+};
+
+export const DifferentSizes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Small</h3>
+        <StepSetup steps={defaultSteps} size="sm" defaultCurrent={1} />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Medium (default)</h3>
+        <StepSetup steps={defaultSteps} size="md" defaultCurrent={1} />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Large</h3>
+        <StepSetup steps={defaultSteps} size="lg" defaultCurrent={1} />
+      </div>
+    </div>
+  ),
+  name: 'Different Sizes',
+};

frontend/src/components/StepSetup/StepSetup.test.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import StepSetup from './StepSetup';
+
+const mockSteps = [
+  { id: 'step-1', title: 'First Step', subtitle: 'Description 1' },
+  { id: 'step-2', title: 'Second Step' },
+  { id: 'step-3', title: 'Third Step', subtitle: 'Description 3', optional: true },
+];
+
+describe('StepSetup', () => {
+  // a) Test verschiedener Step-Counts
+  test('renders correct number of steps', () => {
+    render(<StepSetup steps={mockSteps} />);
+    
+    expect(screen.getByText('First Step')).toBeInTheDocument();
+    expect(screen.getByText('Second Step')).toBeInTheDocument();
+    expect(screen.getByText('Third Step')).toBeInTheDocument();
+  });
+
+  test('renders empty state correctly', () => {
+    render(<StepSetup steps={[]} />);
+    
+    expect(screen.getByText('No steps available')).toBeInTheDocument();
+  });
+
+  // b) Keyboard-Navigation und Klicks
+  test('handles click navigation when clickable', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    
+    render(<StepSetup steps={mockSteps} clickable={true} onChange={onChange} />);
+    
+    const secondStep = screen.getByRole('tab', { name: /second step/i });
+    await user.click(secondStep);
+    
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+
+  test('handles keyboard navigation', async () => {
+    const user = userEvent.setup();
+    const onChange = jest.fn();
+    
+    render(
+      <StepSetup 
+        steps={mockSteps} 
+        defaultCurrent={0} 
+        onChange={onChange} 
+      />
+    );
+
+    const firstStep = screen.getByRole('tab', { name: /first step/i });
+    firstStep.focus();
+    
+    // Right arrow to next step
+    await user.keyboard('{ArrowRight}');
+    expect(onChange).toHaveBeenCalledWith(1);
+    
+    // Home key to first step
+    await user.keyboard('{Home}');
+    expect(onChange).toHaveBeenCalledWith(0);
+    
+    // End key to last step  
+    await user.keyboard('{End}');
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  // c) ARIA-Attribute Tests
+  test('has correct ARIA attributes', () => {
+    render(<StepSetup steps={mockSteps} current={1} />);
+    
+    const tablist = screen.getByRole('tablist');
+    expect(tablist).toBeInTheDocument();
+    
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(3);
+    
+    // Second step should be selected
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
+    expect(tabs[1]).toHaveAttribute('aria-current', 'step');
+  });
+
+  // d) Controlled vs Uncontrolled Tests
+  test('works in controlled mode', () => {
+    const onChange = jest.fn();
+    
+    const { rerender } = render(
+      <StepSetup steps={mockSteps} current={0} onChange={onChange} />
+    );
+    
+    // Click should call onChange but not change internal state in controlled mode
+    const secondStep = screen.getByRole('tab', { name: /second step/i });
+    fireEvent.click(secondStep);
+    
+    expect(onChange).toHaveBeenCalledWith(1);
+    // Current step should still be first (controlled by prop)
+    expect(screen.getByRole('tab', { name: /first step/i }))
+      .toHaveAttribute('aria-selected', 'true');
+    
+    // Update prop should change current step
+    rerender(<StepSetup steps={mockSteps} current={1} onChange={onChange} />);
+    expect(screen.getByRole('tab', { name: /second step/i }))
+      .toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('works in uncontrolled mode', () => {
+    const onChange = jest.fn();
+    
+    render(<StepSetup steps={mockSteps} defaultCurrent={0} onChange={onChange} />);
+    
+    const secondStep = screen.getByRole('tab', { name: /second step/i });
+    fireEvent.click(secondStep);
+    
+    expect(onChange).toHaveBeenCalledWith(1);
+    expect(secondStep).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('clamps out-of-range current values', () => {
+    render(<StepSetup steps={mockSteps} current={10} />);
+    
+    // Should clamp to last step
+    const lastStep = screen.getByRole('tab', { name: /third step/i });
+    expect(lastStep).toHaveAttribute('aria-selected', 'true');
+  });
+});

frontend/src/components/StepSetup/StepSetup.tsx

@@ -0,0 +1,516 @@
+import React, { 
+  useState, 
+  useEffect, 
+  useId, 
+  useCallback,
+  KeyboardEvent
+} from 'react';
+import { motion, MotionConfig, SpringOptions } from 'framer-motion';
+
+// ===== TYP-DEFINITIONEN =====
+export interface Step {
+  id: string;
+  title: string;
+  subtitle?: string;
+  optional?: boolean;
+}
+
+export interface StepSetupProps {
+  /** Array der Schritte mit ID, Titel und optionalen Eigenschaften */
+  steps: Step[];
+  /** Kontrollierter aktueller Schritt-Index */
+  current?: number;
+  /** Unkontrollierter Standard-Schritt-Index */
+  defaultCurrent?: number;
+  /** Callback bei Schrittänderung */
+  onChange?: (index: number) => void;
+  /** Ausrichtung des Steppers */
+  orientation?: 'horizontal' | 'vertical';
+  /** Ob Steps anklickbar sind */
+  clickable?: boolean;
+  /** Größe der Step-Komponente */
+  size?: 'sm' | 'md' | 'lg';
+  /** Animation aktivieren/deaktivieren */
+  animated?: boolean;
+  /** Zusätzliche CSS-Klassen */
+  className?: string;
+}
+
+export interface StepState {
+  currentStep: number;
+  isControlled: boolean;
+}
+
+// ===== HOOK FÜR ZUSTANDSVERWALTUNG =====
+export const useStepSetup = (props: StepSetupProps) => {
+  const {
+    steps,
+    current,
+    defaultCurrent = 0,
+    onChange,
+    clickable = true
+  } = props;
+
+  const [internalStep, setInternalStep] = useState(defaultCurrent);
+  const isControlled = current !== undefined;
+  
+  const currentStep = isControlled ? current : internalStep;
+
+  // Clamp den Schritt-Index auf gültigen Bereich
+  const clampedStep = Math.max(0, Math.min(currentStep, steps.length - 1));
+
+  const setStep = useCallback((newStep: number) => {
+    const clampedNewStep = Math.max(0, Math.min(newStep, steps.length - 1));
+    
+    if (!isControlled) {
+      setInternalStep(clampedNewStep);
+    }
+    
+    onChange?.(clampedNewStep);
+  }, [isControlled, onChange, steps.length]);
+
+  const goToNext = useCallback(() => {
+    if (clampedStep < steps.length - 1) {
+      setStep(clampedStep + 1);
+    }
+  }, [clampedStep, steps.length, setStep]);
+
+  const goToPrev = useCallback(() => {
+    if (clampedStep > 0) {
+      setStep(clampedStep - 1);
+    }
+  }, [clampedStep, setStep]);
+
+  const goToStep = useCallback((index: number) => {
+    if (clickable) {
+      setStep(index);
+    }
+  }, [clickable, setStep]);
+
+  // Warnung bei Duplicate IDs (nur in Development)
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      const stepIds = steps.map(step => step.id);
+      const duplicateIds = stepIds.filter((id, index) => stepIds.indexOf(id) !== index);
+      
+      if (duplicateIds.length > 0) {
+        console.warn(
+          `StepSetup: Duplicate step IDs found: ${duplicateIds.join(', ')}. ` +
+          `Step IDs should be unique.`
+        );
+      }
+    }
+  }, [steps]);
+
+  return {
+    currentStep: clampedStep,
+    setStep,
+    goToNext,
+    goToPrev,
+    goToStep,
+    isControlled
+  };
+};
+
+// ===== ANIMATIONS-KONFIGURATION =====
+const getAnimationConfig = (animated: boolean): { reduced: { duration: number }; normal: SpringOptions } => ({
+  reduced: { duration: 0 }, // Keine Animation
+  normal: {
+    stiffness: 500,
+    damping: 30,
+    mass: 0.5
+  }
+});
+
+// ===== HILFSFUNKTIONEN =====
+
+/**
+ * Berechnet die Step-Größenklassen basierend auf der size-Prop
+ */
+const getSizeClasses = (size: StepSetupProps['size'] = 'md') => {
+  const sizes = {
+    sm: {
+      step: 'w-8 h-8 text-sm',
+      icon: 'w-4 h-4',
+      title: 'text-sm',
+      subtitle: 'text-xs'
+    },
+    md: {
+      step: 'w-10 h-10 text-base',
+      icon: 'w-5 h-5',
+      title: 'text-base',
+      subtitle: 'text-sm'
+    },
+    lg: {
+      step: 'w-12 h-12 text-lg',
+      icon: 'w-6 h-6',
+      title: 'text-lg',
+      subtitle: 'text-base'
+    }
+  };
+  
+  return sizes[size];
+};
+
+/**
+ * Prüft ob prefers-reduced-motion aktiv ist
+ */
+const prefersReducedMotion = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+
+// ===== STEP ICON KOMPONENTE =====
+interface StepIconProps {
+  stepIndex: number;
+  currentStep: number;
+  size: StepSetupProps['size'];
+  animated: boolean;
+}
+
+const StepNumber: React.FC<{ number: number; isCurrent?: boolean; isCompleted?: boolean }> = ({ 
+  number, 
+  isCurrent = false, 
+  isCompleted = false 
+}) => {
+  const baseClasses = `
+    w-6 h-6
+    flex items-center justify-center
+    rounded-full text-xs font-medium
+    transition-all duration-200
+  `;
+  
+  if (isCompleted) {
+    return (
+      <div className={`${baseClasses} bg-blue-500 text-white`}>
+        ✓
+      </div>
+    );
+  }
+  
+  if (isCurrent) {
+    return (
+      <div className={`${baseClasses} bg-blue-500 text-white ring-2 ring-blue-500 ring-opacity-20`}>
+        {number}
+      </div>
+    );
+  }
+  
+  return (
+    <div className={`${baseClasses} bg-gray-200 text-gray-600`}>
+      {number}
+    </div>
+  );
+};
+
+const StepIcon: React.FC<StepIconProps> = ({ 
+  stepIndex, 
+  currentStep, 
+  size,
+  animated 
+}) => {
+  const isCompleted = stepIndex < currentStep;
+  const isCurrent = stepIndex === currentStep;
+  
+  const sizeClasses = getSizeClasses(size);
+  const animationConfig = getAnimationConfig(animated);
+  const shouldAnimate = animated && !prefersReducedMotion();
+  
+  const baseClasses = `
+    ${sizeClasses.step}
+    flex items-center justify-center
+    rounded-full border-2 font-medium
+    transition-all duration-200
+  `;
+  
+  if (isCompleted) {
+    const completedClasses = `
+      ${baseClasses}
+      border-blue-500 bg-white
+    `;
+    
+    const iconContent = shouldAnimate ? (
+      <motion.div
+        initial={{ scale: 0, rotate: -180 }}
+        animate={{ scale: 1, rotate: 0 }}
+        transition={animationConfig.normal}
+      >
+        <StepNumber number={stepIndex + 1} isCompleted />
+      </motion.div>
+    ) : (
+      <StepNumber number={stepIndex + 1} isCompleted />
+    );
+    
+    return (
+      <div className={completedClasses}>
+        {iconContent}
+      </div>
+    );
+  }
+  
+  if (isCurrent) {
+    const currentClasses = `
+      ${baseClasses}
+      border-blue-500 bg-white
+    `;
+    
+    const stepNumber = shouldAnimate ? (
+      <motion.div
+        key={stepIndex}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={animationConfig.normal}
+      >
+        <StepNumber number={stepIndex + 1} isCurrent />
+      </motion.div>
+    ) : (
+      <StepNumber number={stepIndex + 1} isCurrent />
+    );
+    
+    return <div className={currentClasses}>{stepNumber}</div>;
+  }
+  
+  const upcomingClasses = `
+    ${baseClasses}
+    border-gray-300 bg-white
+  `;
+  
+  return (
+    <div className={upcomingClasses}>
+      <StepNumber number={stepIndex + 1} />
+    </div>
+  );
+};
+
+// ===== HAUPTKOMPONENTE =====
+
+/**
+ * Eine zugängliche, animierte Step/Progress-Komponente mit Unterstützung für 
+ * kontrollierte und unkontrollierte Verwendung.
+ * 
+ * @example
+ * ```tsx
+ * <StepSetup 
+ *   steps={[
+ *     { id: 's1', title: 'First Step', subtitle: 'Optional description' },
+ *     { id: 's2', title: 'Second Step' }
+ *   ]}
+ *   defaultCurrent={0}
+ *   onChange={(index) => console.log('Step changed:', index)}
+ * />
+ * ```
+ */
+const StepSetup: React.FC<StepSetupProps> = (props) => {
+  const {
+    steps,
+    orientation = 'horizontal',
+    clickable = true,
+    size = 'md',
+    animated = true,
+    className = ''
+  } = props;
+  
+  const {
+    currentStep,
+    goToStep
+  } = useStepSetup(props);
+  
+  const listId = useId();
+  const shouldAnimate = animated && !prefersReducedMotion();
+  const sizeClasses = getSizeClasses(size);
+  
+  // Fallback für leere Steps
+  if (!steps || steps.length === 0) {
+    return (
+      <div 
+        className={`flex items-center justify-center p-4 text-gray-500 ${className}`}
+        role="status"
+        aria-live="polite"
+      >
+        No steps available
+      </div>
+    );
+  }
+  
+  // Tastatur-Navigation Handler
+  const handleKeyDown = (
+    event: KeyboardEvent<HTMLButtonElement>, 
+    stepIndex: number
+  ) => {
+    if (!clickable) return;
+    
+    const isHorizontal = orientation === 'horizontal';
+    
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        goToStep(stepIndex);
+        break;
+        
+      case 'ArrowRight':
+      case 'ArrowDown':
+        if ((isHorizontal && event.key === 'ArrowRight') || 
+            (!isHorizontal && event.key === 'ArrowDown')) {
+          event.preventDefault();
+          const nextStep = Math.min(stepIndex + 1, steps.length - 1);
+          goToStep(nextStep);
+        }
+        break;
+        
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        if ((isHorizontal && event.key === 'ArrowLeft') || 
+            (!isHorizontal && event.key === 'ArrowUp')) {
+          event.preventDefault();
+          const prevStep = Math.max(stepIndex - 1, 0);
+          goToStep(prevStep);
+        }
+        break;
+        
+      case 'Home':
+        event.preventDefault();
+        goToStep(0);
+        break;
+        
+      case 'End':
+        event.preventDefault();
+        goToStep(steps.length - 1);
+        break;
+    }
+  };
+  
+  // Container-Klassen basierend auf Ausrichtung
+  const containerClasses = `
+    flex ${orientation === 'vertical' ? 'flex-col' : 'flex-row'} 
+    ${orientation === 'horizontal' ? 'items-center justify-center gap-8' : 'gap-6'}
+    ${className}
+  `;
+  
+  const StepContent = shouldAnimate ? motion.div : 'div';
+  
+  return (
+    <MotionConfig reducedMotion={prefersReducedMotion() ? "always" : "user"}>
+      <nav 
+        className={containerClasses.trim()}
+        aria-label="Progress steps"
+        role="tablist"
+      >
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isCurrent = index === currentStep;
+          const isClickable = clickable && (isCompleted || isCurrent || step.optional);
+          
+          // Für horizontale Ausrichtung: flex-col mit zentrierten Items
+          const stepClasses = `
+            flex flex-col items-center
+            gap-3
+            ${isClickable ? 'cursor-pointer' : 'cursor-not-allowed'}
+            transition-colors duration-200
+            ${orientation === 'horizontal' ? 'flex-1' : ''}
+          `;
+          
+          const contentClasses = `
+            flex flex-col items-center text-center
+            ${orientation === 'vertical' ? 'flex-1' : ''}
+          `;
+          
+          // Verbindungslinie nur für horizontale Ausrichtung
+          const connectorClasses = `
+            flex-1 h-0.5 mt-5
+            ${isCompleted ? 'bg-blue-500' : 'bg-gray-200'}
+            transition-colors duration-200
+            ${orientation === 'horizontal' ? '' : 'hidden'}
+          `;
+          
+          return (
+            <React.Fragment key={step.id}>
+              <StepContent
+                className={stepClasses}
+                layout={shouldAnimate ? "position" : false}
+                transition={shouldAnimate ? getAnimationConfig(animated).normal : undefined}
+              >
+                <div className="flex items-center w-full">
+                  {/* Verbindungslinie vor dem Step (außer beim ersten) */}
+                  {index > 0 && orientation === 'horizontal' && (
+                    <div 
+                      className={connectorClasses}
+                      aria-hidden="true"
+                    />
+                  )}
+                  
+                  <button
+                    type="button"
+                    onClick={() => isClickable && goToStep(index)}
+                    onKeyDown={(e) => handleKeyDown(e, index)}
+                    disabled={!isClickable}
+                    className={`
+                      flex items-center justify-center
+                      focus:outline-none focus:ring-2 
+                      focus:ring-blue-500 focus:ring-offset-2 rounded-full
+                      ${!isClickable ? 'opacity-50' : ''}
+                      ${orientation === 'horizontal' ? 'mx-2' : ''}
+                    `}
+                    role="tab"
+                    aria-selected={isCurrent}
+                    aria-controls={`${listId}-${step.id}`}
+                    id={`${listId}-tab-${step.id}`}
+                    tabIndex={isCurrent ? 0 : -1}
+                    aria-current={isCurrent ? 'step' : undefined}
+                    aria-disabled={!isClickable}
+                  >
+                    <StepIcon 
+                      stepIndex={index}
+                      currentStep={currentStep}
+                      size={size}
+                      animated={animated}
+                    />
+                  </button>
+                  
+                  {/* Verbindungslinie nach dem Step (außer beim letzten) */}
+                  {index < steps.length - 1 && orientation === 'horizontal' && (
+                    <div 
+                      className={connectorClasses}
+                      aria-hidden="true"
+                    />
+                  )}
+                </div>
+                
+                {/* Step Titel und Untertitel */}
+                <div className={contentClasses}>
+                  <span 
+                    className={`
+                      font-medium
+                      ${isCurrent ? 'text-blue-600' : isCompleted ? 'text-gray-900' : 'text-gray-500'}
+                      ${sizeClasses.title}
+                    `}
+                    id={`${listId}-title-${step.id}`}
+                  >
+                    {step.title}
+                    {step.optional && (
+                      <span className="text-gray-400 text-sm ml-1">(Optional)</span>
+                    )}
+                  </span>
+                  
+                  {step.subtitle && (
+                    <span 
+                      className={`
+                        ${isCurrent ? 'text-gray-700' : 'text-gray-500'} 
+                        ${sizeClasses.subtitle}
+                      `}
+                      id={`${listId}-subtitle-${step.id}`}
+                    >
+                      {step.subtitle}
+                    </span>
+                  )}
+                </div>
+              </StepContent>
+            </React.Fragment>
+          );
+        })}
+      </nav>
+    </MotionConfig>
+  );
+};
+
+export default StepSetup;

frontend/src/hooks/useBackendValidation.ts

@@ -0,0 +1,89 @@
+// frontend/src/hooks/useBackendValidation.ts
+import { useState, useCallback } from 'react';
+import { ValidationError } from '../services/errorService';
+import { useNotification } from '../contexts/NotificationContext';
+
+export const useBackendValidation = () => {
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { showNotification } = useNotification();
+
+  const clearErrors = useCallback(() => {
+    setValidationErrors([]);
+  }, []);
+
+  const getFieldError = useCallback((fieldName: string): string | null => {
+    const error = validationErrors.find(error => error.field === fieldName);
+    return error ? error.message : null;
+  }, [validationErrors]);
+
+  const hasErrors = useCallback((fieldName?: string): boolean => {
+    if (fieldName) {
+      return validationErrors.some(error => error.field === fieldName);
+    }
+    return validationErrors.length > 0;
+  }, [validationErrors]);
+
+  const executeWithValidation = useCallback(
+    async <T>(apiCall: () => Promise<T>): Promise<T> => {
+      setIsSubmitting(true);
+      clearErrors();
+
+      try {
+        const result = await apiCall();
+        return result;
+      } catch (error: any) {
+        if (error.validationErrors) {
+          setValidationErrors(error.validationErrors);
+          
+          // Show specific validation error messages
+          if (error.validationErrors.length > 0) {
+            // Show the first validation error as the main notification
+            const firstError = error.validationErrors[0];
+            showNotification({
+              type: 'error',
+              title: 'Validierungsfehler',
+              message: firstError.message
+            });
+
+            // If there are multiple errors, show additional notifications for each
+            if (error.validationErrors.length > 1) {
+              // Wait a bit before showing additional notifications to avoid overlap
+              setTimeout(() => {
+                error.validationErrors.slice(1).forEach((validationError: ValidationError, index: number) => {
+                  setTimeout(() => {
+                    showNotification({
+                      type: 'error',
+                      title: 'Weiterer Fehler',
+                      message: validationError.message
+                    });
+                  }, index * 300); // Stagger the notifications
+                });
+              }, 500);
+            }
+          }
+        } else {
+          // Show notification for other errors
+          showNotification({
+            type: 'error',
+            title: 'Fehler',
+            message: error.message || 'Ein unerwarteter Fehler ist aufgetreten'
+          });
+        }
+        throw error;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [clearErrors, showNotification]
+  );
+
+  return {
+    validationErrors,
+    isSubmitting,
+    clearErrors,
+    getFieldError,
+    hasErrors,
+    executeWithValidation,
+  };
+};

frontend/src/pages/Employees/components/AvailabilityManager.tsx

@@ -3,6 +3,8 @@ import { employeeService } from '../../../services/employeeService';
 import { shiftPlanService } from '../../../services/shiftPlanService';
 import { Employee, EmployeeAvailability } from '../../../models/Employee';
 import { ShiftPlan, TimeSlot, Shift } from '../../../models/ShiftPlan';
+import { useNotification } from '../../../contexts/NotificationContext';
+import { useBackendValidation } from '../../../hooks/useBackendValidation';
 
 interface AvailabilityManagerProps {
   employee: Employee;
@@ -36,7 +38,8 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
   const [selectedPlan, setSelectedPlan] = useState<ShiftPlan | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState('');
+  const { showNotification } = useNotification();
+  const { executeWithValidation, isSubmitting } = useBackendValidation();
 
   const daysOfWeek = [
     { id: 1, name: 'Montag' },
@@ -81,7 +84,11 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
 
       } catch (err: any) {
         console.error('❌ FEHLER BEIM LADEN DER INITIALDATEN:', err);
-        setError('Daten konnten nicht geladen werden: ' + (err.message || 'Unbekannter Fehler'));
+        showNotification({
+          type: 'error',
+          title: 'Fehler beim Laden',
+          message: 'Daten konnten nicht geladen werden: ' + (err.message || 'Unbekannter Fehler')
+        });
         setLoading(false);
       }
     };
@@ -134,9 +141,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
           );
           if (invalidAvailabilities.length > 0) {
             console.warn('⚠️ UNGÜLTIGE VERFÜGBARKEITEN (OHNE SHIFT-ID):', invalidAvailabilities.length);
-            invalidAvailabilities.forEach(invalid => {
-              console.warn('   - Ungültiger Eintrag:', invalid);
-            });
           }
           
           // Transformiere die Daten
@@ -149,20 +153,20 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
 
           // Debug: Zeige vorhandene Präferenzen
           if (planAvailabilities.length > 0) {
-            console.log('🎯 VORHANDENE PRÄFERENZEN:');
-            planAvailabilities.forEach(avail => {
-              const shift = plan.shifts?.find(s => s.id === avail.shiftId);
-              console.log(`   - Shift: ${avail.shiftId} (Day: ${shift?.dayOfWeek}), Level: ${avail.preferenceLevel}`);
-            });
+            console.log('🎯 VORHANDENE PRÄFERENZEN:', planAvailabilities.length);
           }
-      } catch (availError) {
-        console.error('❌ FEHLER BEIM LADEN DER VERFÜGBARKEITEN:', availError);
-        setAvailabilities([]);
-      }
+        } catch (availError) {
+          console.error('❌ FEHLER BEIM LADEN DER VERFÜGBARKEITEN:', availError);
+          setAvailabilities([]);
+        }
 
       } catch (err: any) {
         console.error('❌ FEHLER BEIM LADEN DES SCHICHTPLANS:', err);
-        setError('Schichtplan konnte nicht geladen werden: ' + (err.message || 'Unbekannter Fehler'));
+        showNotification({
+          type: 'error',
+          title: 'Fehler beim Laden',
+          message: 'Schichtplan konnte nicht geladen werden: ' + (err.message || 'Unbekannter Fehler')
+        });
       } finally {
         setLoading(false);
       }
@@ -316,26 +320,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
       return (a.startTime || '').localeCompare(b.startTime || '');
     });
 
-    // Validation: Check if shifts are correctly placed
-    const validationErrors: string[] = [];
-    
-    // Check for missing time slots
-    const usedTimeSlotIds = new Set(selectedPlan?.shifts?.map(s => s.timeSlotId) || []);
-    const availableTimeSlotIds = new Set(selectedPlan?.timeSlots?.map(ts => ts.id) || []);
-
-    usedTimeSlotIds.forEach(timeSlotId => {
-      if (!availableTimeSlotIds.has(timeSlotId)) {
-        validationErrors.push(`Zeitslot ${timeSlotId} wird verwendet, existiert aber nicht in timeSlots`);
-      }
-    });
-
-    // Check for shifts with invalid day numbers
-    selectedPlan?.shifts?.forEach(shift => {
-      if (shift.dayOfWeek < 1 || shift.dayOfWeek > 7) {
-        validationErrors.push(`Shift ${shift.id} hat ungültigen Wochentag: ${shift.dayOfWeek}`);
-      }
-    });
-
     return (
       <div style={{
         marginBottom: '30px',
@@ -355,23 +339,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
           </div>
         </div>
 
-        {/* Validation Warnings */}
-        {validationErrors.length > 0 && (
-          <div style={{
-            backgroundColor: '#fff3cd',
-            border: '1px solid #ffeaa7',
-            padding: '15px',
-            margin: '10px'
-          }}>
-            <h4 style={{ margin: '0 0 10px 0', color: '#856404' }}>⚠️ Validierungswarnungen:</h4>
-            <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px' }}>
-              {validationErrors.map((error, index) => (
-                <li key={index}>{error}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-
         <div style={{ overflowX: 'auto' }}>
           <table style={{
             width: '100%',
@@ -421,9 +388,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                     <div style={{ fontSize: '14px', color: '#666' }}>
                       {formatTime(timeSlot.startTime)} - {formatTime(timeSlot.endTime)}
                     </div>
-                    <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
-                      ID: {timeSlot.id.substring(0, 8)}...
-                    </div>
                   </td>
                   {days.map(weekday => {
                     const shift = timeSlot.shiftsByDay[weekday.id];
@@ -443,9 +407,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                       );
                     }
 
-                    // Validation: Check if shift has correct timeSlotId and dayOfWeek
-                    const isValidShift = shift.timeSlotId === timeSlot.id && shift.dayOfWeek === weekday.id;
-                    
                     const currentLevel = getAvailabilityForShift(shift.id);
                     const levelConfig = availabilityLevels.find(l => l.level === currentLevel);
                     
@@ -454,31 +415,8 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                         padding: '12px 16px',
                         border: '1px solid #dee2e6',
                         textAlign: 'center',
-                        backgroundColor: !isValidShift ? '#fff3cd' : (levelConfig?.bgColor || 'white'),
-                        position: 'relative'
+                        backgroundColor: levelConfig?.bgColor || 'white'
                       }}>
-                        {/* Validation indicator */}
-                        {!isValidShift && (
-                          <div style={{
-                            position: 'absolute',
-                            top: '2px',
-                            right: '2px',
-                            backgroundColor: '#f39c12',
-                            color: 'white',
-                            borderRadius: '50%',
-                            width: '16px',
-                            height: '16px',
-                            fontSize: '10px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center'
-                          }}
-                          title={`Shift Validierung: timeSlotId=${shift.timeSlotId}, dayOfWeek=${shift.dayOfWeek}`}
-                          >
-                            ⚠️
-                          </div>
-                        )}
-
                         <select
                           value={currentLevel}
                           onChange={(e) => {
@@ -487,10 +425,10 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                           }}
                           style={{
                             padding: '8px 12px',
-                            border: `2px solid ${!isValidShift ? '#f39c12' : (levelConfig?.color || '#ddd')}`,
+                            border: `2px solid ${levelConfig?.color || '#ddd'}`,
                             borderRadius: '6px',
-                            backgroundColor: !isValidShift ? '#fff3cd' : (levelConfig?.bgColor || 'white'),
-                            color: !isValidShift ? '#856404' : (levelConfig?.color || '#333'),
+                            backgroundColor: levelConfig?.bgColor || 'white',
+                            color: levelConfig?.color || '#333',
                             fontWeight: 'bold',
                             minWidth: '140px',
                             cursor: 'pointer',
@@ -511,23 +449,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                             </option>
                           ))}
                         </select>
-
-                        {/* Shift debug info */}
-                        <div style={{ 
-                          fontSize: '10px', 
-                          color: '#666', 
-                          marginTop: '4px',
-                          textAlign: 'left',
-                          fontFamily: 'monospace'
-                        }}>
-                          <div>Shift: {shift.id.substring(0, 6)}...</div>
-                          <div>Day: {shift.dayOfWeek}</div>
-                          {!isValidShift && (
-                            <div style={{ color: '#e74c3c', fontWeight: 'bold' }}>
-                              VALIDATION ERROR
-                            </div>
-                          )}
-                        </div>
                       </td>
                     );
                   })}
@@ -556,62 +477,34 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
   };
 
   const handleSave = async () => {
-    try {
+    if (!selectedPlanId) {
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Bitte wählen Sie einen Schichtplan aus'
+      });
+      return;
+    }
+
+    // Basic frontend validation: Check if we have any availabilities to save
+    const validAvailabilities = availabilities.filter(avail => {
+      return avail.shiftId && selectedPlan?.shifts?.some(shift => shift.id === avail.shiftId);
+    });
+
+    if (validAvailabilities.length === 0) {
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Keine gültigen Verfügbarkeiten zum Speichern gefunden'
+      });
+      return;
+    }
+
+    // Complex validation (contract type rules) is now handled by backend
+    // We only do basic required field validation in frontend
+
+    await executeWithValidation(async () => {
       setSaving(true);
-      setError('');
-      
-      if (!selectedPlanId) {
-        setError('Bitte wählen Sie einen Schichtplan aus');
-        return;
-      }
-
-      // Filter availabilities to only include those with actual shifts AND valid shiftIds
-      const validAvailabilities = availabilities.filter(avail => {
-        // Check if this shiftId exists and is valid
-        if (!avail.shiftId) {
-          console.warn('⚠️ Überspringe ungültige Verfügbarkeit ohne Shift-ID:', avail);
-          return false;
-        }
-        
-        // Check if this shiftId exists in the current plan
-        return selectedPlan?.shifts?.some(shift => shift.id === avail.shiftId);
-      });
-
-      console.log('💾 SPEICHERE VERFÜGBARKEITEN:', {
-        total: availabilities.length,
-        valid: validAvailabilities.length,
-        invalid: availabilities.length - validAvailabilities.length
-      });
-
-      if (validAvailabilities.length === 0) {
-        setError('Keine gültigen Verfügbarkeiten zum Speichern gefunden');
-        return;
-      }
-
-      // Contract type validation
-      const availableShifts = validAvailabilities.filter(avail => 
-        avail.preferenceLevel === 1 || avail.preferenceLevel === 2
-      ).length;
-
-      let contractRequirement = 0;
-      let contractTypeName = '';
-
-      if (employee.contractType === 'small') {
-        contractRequirement = 2;
-        contractTypeName = 'Kleiner Vertrag';
-      } else if (employee.contractType === 'large') {
-        contractRequirement = 3;
-        contractTypeName = 'Großer Vertrag';
-      }
-
-      if (contractRequirement > 0 && availableShifts < contractRequirement) {
-        setError(
-          `${contractTypeName} erfordert mindestens ${contractRequirement} verfügbare Shifts. ` +
-          `Aktuell sind nur ${availableShifts} Shifts mit Verfügbarkeit "Bevorzugt" oder "Möglich" ausgewählt.`
-        );
-        setSaving(false);
-        return;
-      }
       
       // Convert to the format expected by the API - using shiftId directly
       const requestData = {
@@ -627,15 +520,16 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
       await employeeService.updateAvailabilities(employee.id, requestData);
       console.log('✅ VERFÜGBARKEITEN ERFOLGREICH GESPEICHERT');
 
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Verfügbarkeiten wurden erfolgreich gespeichert'
+      });
+
       window.dispatchEvent(new CustomEvent('availabilitiesChanged'));
       
       onSave();
-    } catch (err: any) {
-      console.error('❌ FEHLER BEIM SPEICHERN:', err);
-      setError(err.message || 'Fehler beim Speichern der Verfügbarkeiten');
-    } finally {
-      setSaving(false);
-    }
+    });
   };
 
   if (loading) {
@@ -658,12 +552,11 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
   // Get full name for display
   const employeeFullName = `${employee.firstname} ${employee.lastname}`;
 
-  // Mininmum amount of shifts per contract type
+  // Available shifts count for display only (not for validation)
   const availableShiftsCount = availabilities.filter(avail => 
     avail.preferenceLevel === 1 || avail.preferenceLevel === 2
   ).length;
 
-
   return (
     <div style={{
       maxWidth: '1900px',
@@ -694,26 +587,14 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
         {employee.contractType && (
           <p style={{ margin: '5px 0 0 0', color: employee.contractType === 'small' ? '#f39c12' : '#27ae60' }}>
             <strong>Vertrag:</strong> 
-            {employee.contractType === 'small' ? ' Kleiner Vertrag (min. 2 verfügbare Shifts)' : 
-            employee.contractType === 'large' ? ' Großer Vertrag (min. 3 verfügbare Shifts)' : 
+            {employee.contractType === 'small' ? ' Kleiner Vertrag' : 
+            employee.contractType === 'large' ? ' Großer Vertrag' : 
             ' Flexibler Vertrag'}
+            {/* Note: Contract validation is now handled by backend */}
           </p>
         )}
       </div>
 
-      {error && (
-        <div style={{
-          backgroundColor: '#fee',
-          border: '1px solid #f5c6cb',
-          color: '#721c24',
-          padding: '12px',
-          borderRadius: '6px',
-          marginBottom: '20px'
-        }}>
-          <strong>Fehler:</strong> {error}
-        </div>
-      )}
-
       {/* Availability Legend */}
       <div style={{
         marginBottom: '30px',
@@ -774,7 +655,6 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
                 const newPlanId = e.target.value;
                 console.log('🔄 PLAN WECHSELN ZU:', newPlanId);
                 setSelectedPlanId(newPlanId);
-                // Der useEffect wird automatisch ausgelöst
               }}
               style={{
                 padding: '8px 12px',
@@ -828,15 +708,15 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
       }}>
         <button
           onClick={onCancel}
-          disabled={saving}
+          disabled={isSubmitting}
           style={{
             padding: '12px 24px',
             backgroundColor: '#95a5a6',
             color: 'white',
             border: 'none',
             borderRadius: '6px',
-            cursor: saving ? 'not-allowed' : 'pointer',
-            opacity: saving ? 0.6 : 1
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+            opacity: isSubmitting ? 0.6 : 1
           }}
         >
           Abbrechen
@@ -844,18 +724,18 @@ const AvailabilityManager: React.FC<AvailabilityManagerProps> = ({
         
         <button
           onClick={handleSave}
-          disabled={saving || shiftsCount === 0 || !selectedPlanId}
+          disabled={isSubmitting || shiftsCount === 0 || !selectedPlanId}
           style={{
             padding: '12px 24px',
-            backgroundColor: saving ? '#bdc3c7' : (shiftsCount === 0 || !selectedPlanId ? '#95a5a6' : '#3498db'),
+            backgroundColor: isSubmitting ? '#bdc3c7' : (shiftsCount === 0 || !selectedPlanId ? '#95a5a6' : '#3498db'),
             color: 'white',
             border: 'none',
             borderRadius: '6px',
-            cursor: (saving || shiftsCount === 0 || !selectedPlanId) ? 'not-allowed' : 'pointer',
+            cursor: (isSubmitting || shiftsCount === 0 || !selectedPlanId) ? 'not-allowed' : 'pointer',
             fontWeight: 'bold'
           }}
         >
-          {saving ? '⏳ Wird gespeichert...' : `Verfügbarkeiten speichern (${availableShiftsCount})`}
+          {isSubmitting ? '⏳ Wird gespeichert...' : `Verfügbarkeiten speichern (${availableShiftsCount})`}
         </button>
       </div>
     </div>

frontend/src/pages/Employees/components/EmployeeList.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { ROLE_CONFIG, EMPLOYEE_TYPE_CONFIG } from '../../../models/defaults/employeeDefaults';
 import { Employee } from '../../../models/Employee';
 import { useAuth } from '../../../contexts/AuthContext';
+import { useNotification } from '../../../contexts/NotificationContext';
 
 interface EmployeeListProps {
   employees: Employee[];
@@ -28,6 +29,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
   const [sortField, setSortField] = useState<SortField>('name');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
   const { user: currentUser, hasRole } = useAuth();
+  const { showNotification, confirmDialog } = useNotification();
 
   // Filter employees based on active/inactive and search term
   const filteredEmployees = employees.filter(employee => {
@@ -176,6 +178,31 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
     return 'MITARBEITER';
   };
 
+  const handleDeleteClick = async (employee: Employee) => {
+    const confirmed = await confirmDialog({
+      title: 'Mitarbeiter löschen',
+      message: `Sind Sie sicher, dass Sie ${employee.firstname} ${employee.lastname} löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.`,
+      confirmText: 'Löschen',
+      cancelText: 'Abbrechen',
+      type: 'warning'
+    });
+
+    if (confirmed) {
+      try {
+        onDelete(employee);
+        showNotification({
+          type: 'success',
+          title: 'Erfolg',
+          message: `${employee.firstname} ${employee.lastname} wurde erfolgreich gelöscht.`
+        });
+      } catch (error: any) {
+        // Error will be handled by parent component through useBackendValidation
+        // We just need to re-throw it so the parent can catch it
+        throw error;
+      }
+    }
+  };
+
   if (employees.length === 0) {
     return (
       <div style={{
@@ -468,7 +495,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 {/* Löschen Button */}
                 {canDelete && (
                   <button
-                    onClick={() => onDelete(employee)}
+                    onClick={() => handleDeleteClick(employee)}
                     style={{
                       padding: '6px 8px',
                       backgroundColor: '#e74c3c',

frontend/src/pages/Setup/Setup.tsx

@@ -1,12 +1,26 @@
-// frontend/src/pages/Setup/Setup.tsx - UPDATED
 import React, { useState } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
 
 const API_BASE_URL = '/api';
 
-const Setup: React.FC = () => {
-  const [step, setStep] = useState(1);
-  const [formData, setFormData] = useState({
+// ===== TYP-DEFINITIONEN =====
+interface SetupFormData {
+  password: string;
+  confirmPassword: string;
+  firstname: string;
+  lastname: string;
+}
+
+interface SetupStep {
+  id: string;
+  title: string;
+  subtitle?: string;
+}
+
+// ===== HOOK FÜR SETUP-LOGIK =====
+const useSetup = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [formData, setFormData] = useState<SetupFormData>({
     password: '',
     confirmPassword: '',
     firstname: '',
@@ -16,27 +30,26 @@ const Setup: React.FC = () => {
   const [error, setError] = useState('');
   const { checkSetupStatus } = useAuth();
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  const validateStep1 = () => {
-    if (formData.password.length < 6) {
-      setError('Das Passwort muss mindestens 6 Zeichen lang sein.');
-      return false;
+  const steps: SetupStep[] = [
+    {
+      id: 'profile-setup', 
+      title: 'Profilinformationen',
+      subtitle: 'Geben Sie Ihre persönlichen Daten ein'
+    },
+    {
+      id: 'password-setup',
+      title: 'Passwort erstellen',
+      subtitle: 'Legen Sie ein sicheres Passwort fest'
+    },
+    {
+      id: 'confirmation',
+      title: 'Bestätigung',
+      subtitle: 'Setup abschließen'
     }
-    if (formData.password !== formData.confirmPassword) {
-      setError('Die Passwörter stimmen nicht überein.');
-      return false;
-    }
-    return true;
-  };
+  ];
 
-  const validateStep2 = () => {
+  // ===== VALIDIERUNGS-FUNKTIONEN =====
+  const validateStep1 = (): boolean => {
     if (!formData.firstname.trim()) {
       setError('Bitte geben Sie einen Vornamen ein.');
       return false;
@@ -48,21 +61,78 @@ const Setup: React.FC = () => {
     return true;
   };
 
-  const handleNext = () => {
-    setError('');
-    if (step === 1 && validateStep1()) {
-      setStep(2);
-    } else if (step === 2 && validateStep2()) {
-      handleSubmit();
+  const validateStep2 = (): boolean => {
+    if (formData.password.length < 6) {
+      setError('Das Passwort muss mindestens 6 Zeichen lang sein.');
+      return false;
+    }
+    if (formData.password !== formData.confirmPassword) {
+      setError('Die Passwörter stimmen nicht überein.');
+      return false;
+    }
+    return true;
+  };
+
+  const validateCurrentStep = (stepIndex: number): boolean => {
+    switch (stepIndex) {
+      case 0:
+        return validateStep1();
+      case 1:
+        return validateStep2();
+      default:
+        return true;
     }
   };
 
-  const handleBack = () => {
+  // ===== NAVIGATIONS-FUNKTIONEN =====
+  const goToNextStep = async (): Promise<void> => {
     setError('');
-    setStep(1);
+    
+    if (!validateCurrentStep(currentStep)) {
+      return;
+    }
+
+    // Wenn wir beim letzten Schritt sind, Submit ausführen
+    if (currentStep === steps.length - 1) {
+      await handleSubmit();
+      return;
+    }
+
+    // Ansonsten zum nächsten Schritt gehen
+    setCurrentStep(prev => prev + 1);
   };
 
-  const handleSubmit = async () => {
+  const goToPrevStep = (): void => {
+    setError('');
+    if (currentStep > 0) {
+      setCurrentStep(prev => prev - 1);
+    }
+  };
+
+  const handleStepChange = (stepIndex: number): void => {
+    setError('');
+    
+    // Nur erlauben, zu bereits validierten Schritten zu springen
+    // oder zum nächsten Schritt nach dem aktuellen
+    if (stepIndex <= currentStep + 1) {
+      // Vor dem Wechsel validieren
+      if (stepIndex > currentStep && !validateCurrentStep(currentStep)) {
+        return;
+      }
+      setCurrentStep(stepIndex);
+    }
+  };
+
+  // ===== FORM HANDLER =====
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (): Promise<void> => {
     try {
       setLoading(true);
       setError('');
@@ -102,8 +172,8 @@ const Setup: React.FC = () => {
     }
   };
 
-  // Helper to display generated email preview
-  const getEmailPreview = () => {
+  // ===== HELPER FUNCTIONS =====
+  const getEmailPreview = (): string => {
     if (!formData.firstname.trim() || !formData.lastname.trim()) {
       return 'vorname.nachname@sp.de';
     }
@@ -113,6 +183,377 @@ const Setup: React.FC = () => {
     return `${cleanFirstname}.${cleanLastname}@sp.de`;
   };
 
+  const isStepCompleted = (stepIndex: number): boolean => {
+    switch (stepIndex) {
+      case 0:
+        return formData.password.length >= 6 && 
+               formData.password === formData.confirmPassword;
+      case 1:
+        return !!formData.firstname.trim() && !!formData.lastname.trim();
+      default:
+        return false;
+    }
+  };
+
+  return {
+    // State
+    currentStep,
+    formData,
+    loading,
+    error,
+    steps,
+    
+    // Actions
+    goToNextStep,
+    goToPrevStep,
+    handleStepChange,
+    handleInputChange,
+    
+    // Helpers
+    getEmailPreview,
+    isStepCompleted
+  };
+};
+
+// ===== STEP-INHALTS-KOMPONENTEN =====
+interface StepContentProps {
+  formData: SetupFormData;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  getEmailPreview: () => string;
+  currentStep: number;
+}
+
+const Step1Content: React.FC<StepContentProps> = ({ 
+  formData, 
+  onInputChange,
+  getEmailPreview 
+}) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <div>
+      <label style={{ 
+        display: 'block', 
+        marginBottom: '0.5rem', 
+        fontWeight: '600',
+        color: '#495057'
+      }}>
+        Vorname
+      </label>
+      <input
+        type="text"
+        name="firstname"
+        value={formData.firstname}
+        onChange={onInputChange}
+        style={{
+          width: '100%',
+          padding: '0.75rem',
+          border: '1px solid #ced4da',
+          borderRadius: '6px',
+          fontSize: '1rem'
+        }}
+        placeholder="Max"
+        required
+        autoComplete="given-name"
+      />
+    </div>
+
+    <div>
+      <label style={{ 
+        display: 'block', 
+        marginBottom: '0.5rem', 
+        fontWeight: '600',
+        color: '#495057'
+      }}>
+        Nachname
+      </label>
+      <input
+        type="text"
+        name="lastname"
+        value={formData.lastname}
+        onChange={onInputChange}
+        style={{
+          width: '100%',
+          padding: '0.75rem',
+          border: '1px solid #ced4da',
+          borderRadius: '6px',
+          fontSize: '1rem'
+        }}
+        placeholder="Mustermann"
+        required
+        autoComplete="family-name"
+      />
+    </div>
+
+    <div>
+      <label style={{ 
+        display: 'block', 
+        marginBottom: '0.5rem', 
+        fontWeight: '600',
+        color: '#495057'
+      }}>
+        Automatisch generierte E-Mail
+      </label>
+      <div style={{ 
+        padding: '0.75rem', 
+        backgroundColor: '#e9ecef', 
+        border: '1px solid #ced4da',
+        borderRadius: '6px',
+        color: '#495057',
+        fontWeight: '500',
+        fontFamily: 'monospace'
+      }}>
+        {getEmailPreview()}
+      </div>
+      <div style={{ 
+        fontSize: '0.875rem', 
+        color: '#6c757d',
+        marginTop: '0.25rem'
+      }}>
+        Die E-Mail wird automatisch aus Vor- und Nachname generiert
+      </div>
+    </div>
+  </div>
+);
+
+
+const Step2Content: React.FC<StepContentProps> = ({ 
+  formData, 
+  onInputChange 
+}) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <div>
+      <label style={{ 
+        display: 'block', 
+        marginBottom: '0.5rem', 
+        fontWeight: '600',
+        color: '#495057'
+      }}>
+        Passwort
+      </label>
+      <input
+        type="password"
+        name="password"
+        value={formData.password}
+        onChange={onInputChange}
+        style={{
+          width: '100%',
+          padding: '0.75rem',
+          border: '1px solid #ced4da',
+          borderRadius: '6px',
+          fontSize: '1rem',
+          transition: 'border-color 0.3s ease'
+        }}
+        placeholder="Mindestens 6 Zeichen"
+        required
+        autoComplete="new-password"
+      />
+    </div>
+    
+    <div>
+      <label style={{ 
+        display: 'block', 
+        marginBottom: '0.5rem', 
+        fontWeight: '600',
+        color: '#495057'
+      }}>
+        Passwort bestätigen
+      </label>
+      <input
+        type="password"
+        name="confirmPassword"
+        value={formData.confirmPassword}
+        onChange={onInputChange}
+        style={{
+          width: '100%',
+          padding: '0.75rem',
+          border: '1px solid #ced4da',
+          borderRadius: '6px',
+          fontSize: '1rem',
+          transition: 'border-color 0.3s ease'
+        }}
+        placeholder="Passwort wiederholen"
+        required
+        autoComplete="new-password"
+      />
+    </div>
+  </div>
+);
+
+const Step3Content: React.FC<StepContentProps> = ({ 
+  formData,
+  getEmailPreview 
+}) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <div style={{ 
+      backgroundColor: '#f8f9fa', 
+      padding: '1.5rem', 
+      borderRadius: '8px',
+      border: '1px solid #e9ecef'
+    }}>
+      <h3 style={{ 
+        marginBottom: '1rem', 
+        color: '#2c3e50',
+        fontSize: '1.1rem',
+        fontWeight: '600'
+      }}>
+        Zusammenfassung
+      </h3>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <span style={{ color: '#6c757d' }}>E-Mail:</span>
+          <span style={{ fontWeight: '500' }}>{getEmailPreview()}</span>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <span style={{ color: '#6c757d' }}>Vorname:</span>
+          <span style={{ fontWeight: '500' }}>{formData.firstname || '-'}</span>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <span style={{ color: '#6c757d' }}>Nachname:</span>
+          <span style={{ fontWeight: '500' }}>{formData.lastname || '-'}</span>
+        </div>
+      </div>
+    </div>
+    
+    <div style={{ 
+      padding: '1rem',
+      backgroundColor: '#e7f3ff',
+      borderRadius: '6px',
+      border: '1px solid #b6d7e8',
+      color: '#2c3e50'
+    }}>
+      <strong>💡 Wichtig:</strong> Nach dem Setup können Sie sich mit Ihrer 
+      automatisch generierten E-Mail anmelden.
+    </div>
+  </div>
+);
+
+// ===== HAUPTKOMPONENTE =====
+const Setup: React.FC = () => {
+  const {
+    currentStep,
+    formData,
+    loading,
+    error,
+    steps,
+    goToNextStep,
+    goToPrevStep,
+    handleStepChange,
+    handleInputChange,
+    getEmailPreview
+  } = useSetup();
+
+  const renderStepContent = (): React.ReactNode => {
+    const stepProps = {
+      formData,
+      onInputChange: handleInputChange,
+      getEmailPreview,
+      currentStep
+    };
+
+    switch (currentStep) {
+      case 0:
+        return <Step1Content {...stepProps} />;
+      case 1:
+        return <Step2Content {...stepProps} />;
+      case 2:
+        return <Step3Content {...stepProps} />;
+      default:
+        return null;
+    }
+  };
+
+  const getNextButtonText = (): string => {
+    if (loading) return '⏳ Wird verarbeitet...';
+    
+    switch (currentStep) {
+      case 0:
+        return 'Weiter →';
+      case 1:
+        return 'Weiter →';
+      case 2:
+        return 'Setup abschließen';
+      default:
+        return 'Weiter →';
+    }
+  };
+
+  // Inline Step Indicator Komponente
+  const StepIndicator: React.FC = () => (
+    <div style={{ 
+      display: 'flex', 
+      justifyContent: 'space-between', 
+      alignItems: 'center',
+      marginBottom: '2.5rem',
+      position: 'relative',
+      width: '100%'
+    }}>
+      {/* Verbindungslinien */}
+      <div style={{
+        position: 'absolute',
+        top: '12px',
+        left: '0',
+        right: '0',
+        height: '2px',
+        backgroundColor: '#e9ecef',
+        zIndex: 1
+      }} />
+      
+      {steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isCurrent = index === currentStep;
+        const isClickable = index <= currentStep + 1;
+        
+        return (
+          <div 
+            key={step.id}
+            style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              alignItems: 'center',
+              zIndex: 2,
+              position: 'relative',
+              flex: 1
+            }}
+          >
+            <button
+              onClick={() => isClickable && handleStepChange(index)}
+              disabled={!isClickable}
+              style={{
+                width: '28px',
+                height: '28px',
+                borderRadius: '50%',
+                border: '2px solid',
+                borderColor: isCompleted || isCurrent ? '#51258f' : '#e9ecef',
+                backgroundColor: isCompleted ? '#51258f' : 'white',
+                color: isCompleted ? 'white' : (isCurrent ? '#51258f' : '#6c757d'),
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                cursor: isClickable ? 'pointer' : 'not-allowed',
+                transition: 'all 0.3s ease',
+                marginBottom: '8px'
+              }}
+            >
+              {index + 1}
+            </button>
+            
+            <div style={{ textAlign: 'center' }}>
+              <div style={{ 
+                fontSize: '14px', 
+                fontWeight: isCurrent ? '600' : '400',
+                color: isCurrent ? '#51258f' : '#6c757d'
+              }}>
+                {step.title}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+
   return (
     <div style={{ 
       minHeight: '100vh', 
@@ -128,10 +569,10 @@ const Setup: React.FC = () => {
         borderRadius: '12px',
         boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
         width: '100%',
-        maxWidth: '500px',
+        maxWidth: '600px',
         border: '1px solid #e9ecef'
       }}>
-        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+        <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
           <h1 style={{ 
             fontSize: '2rem', 
             fontWeight: 'bold', 
@@ -142,12 +583,37 @@ const Setup: React.FC = () => {
           </h1>
           <p style={{ 
             color: '#6c757d',
-            fontSize: '1.1rem'
+            fontSize: '1.1rem',
+            marginBottom: '2rem'
           }}>
             Richten Sie Ihren Administrator-Account ein
           </p>
         </div>
 
+        {/* Aktueller Schritt Titel und Beschreibung */}
+        <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
+          <h2 style={{ 
+            fontSize: '1.5rem', 
+            fontWeight: 'bold', 
+            marginBottom: '0.5rem',
+            color: '#2c3e50'
+          }}>
+            {steps[currentStep].title}
+          </h2>
+          {steps[currentStep].subtitle && (
+            <p style={{ 
+              color: '#6c757d',
+              fontSize: '1rem'
+            }}>
+              {steps[currentStep].subtitle}
+            </p>
+          )}
+        </div>
+
+        {/* Inline Step Indicator */}
+        <StepIndicator />
+
+        {/* Fehleranzeige */}
         {error && (
           <div style={{
             backgroundColor: '#f8d7da',
@@ -161,175 +627,37 @@ const Setup: React.FC = () => {
           </div>
         )}
 
-        {step === 1 && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '0.5rem', 
-                fontWeight: '600',
-                color: '#495057'
-              }}>
-                Passwort
-              </label>
-              <input
-                type="password"
-                name="password"
-                value={formData.password}
-                onChange={handleInputChange}
-                style={{
-                  width: '100%',
-                  padding: '0.75rem',
-                  border: '1px solid #ced4da',
-                  borderRadius: '6px',
-                  fontSize: '1rem',
-                  transition: 'border-color 0.3s ease'
-                }}
-                placeholder="Mindestens 6 Zeichen"
-                required
-              />
-            </div>
-            
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '0.5rem', 
-                fontWeight: '600',
-                color: '#495057'
-              }}>
-                Passwort bestätigen
-              </label>
-              <input
-                type="password"
-                name="confirmPassword"
-                value={formData.confirmPassword}
-                onChange={handleInputChange}
-                style={{
-                  width: '100%',
-                  padding: '0.75rem',
-                  border: '1px solid #ced4da',
-                  borderRadius: '6px',
-                  fontSize: '1rem',
-                  transition: 'border-color 0.3s ease'
-                }}
-                placeholder="Passwort wiederholen"
-                required
-              />
-            </div>
-          </div>
-        )}
-
-        {step === 2 && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '0.5rem', 
-                fontWeight: '600',
-                color: '#495057'
-              }}>
-                Vorname
-              </label>
-              <input
-                type="text"
-                name="firstname"
-                value={formData.firstname}
-                onChange={handleInputChange}
-                style={{
-                  width: '100%',
-                  padding: '0.75rem',
-                  border: '1px solid #ced4da',
-                  borderRadius: '6px',
-                  fontSize: '1rem'
-                }}
-                placeholder="Max"
-                required
-              />
-            </div>
-
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '0.5rem', 
-                fontWeight: '600',
-                color: '#495057'
-              }}>
-                Nachname
-              </label>
-              <input
-                type="text"
-                name="lastname"
-                value={formData.lastname}
-                onChange={handleInputChange}
-                style={{
-                  width: '100%',
-                  padding: '0.75rem',
-                  border: '1px solid #ced4da',
-                  borderRadius: '6px',
-                  fontSize: '1rem'
-                }}
-                placeholder="Mustermann"
-                required
-              />
-            </div>
-
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '0.5rem', 
-                fontWeight: '600',
-                color: '#495057'
-              }}>
-                Automatisch generierte E-Mail
-              </label>
-              <div style={{ 
-                padding: '0.75rem', 
-                backgroundColor: '#e9ecef', 
-                border: '1px solid #ced4da',
-                borderRadius: '6px',
-                color: '#495057',
-                fontWeight: '500',
-                fontFamily: 'monospace'
-              }}>
-                {getEmailPreview()}
-              </div>
-              <div style={{ 
-                fontSize: '0.875rem', 
-                color: '#6c757d',
-                marginTop: '0.25rem'
-              }}>
-                Die E-Mail wird automatisch aus Vor- und Nachname generiert
-              </div>
-            </div>
-          </div>
-        )}
+        {/* Schritt-Inhalt */}
+        <div style={{ minHeight: '200px' }}>
+          {renderStepContent()}
+        </div>
 
+        {/* Navigations-Buttons */}
         <div style={{ 
           marginTop: '2rem', 
           display: 'flex', 
           justifyContent: 'space-between',
           alignItems: 'center'
         }}>
-          {step === 2 && (
-            <button
-              onClick={handleBack}
-              style={{
-                padding: '0.75rem 1.5rem',
-                color: '#6c757d',
-                border: '1px solid #6c757d',
-                background: 'none',
-                borderRadius: '6px',
-                cursor: 'pointer',
-                fontWeight: '500'
-              }}
-              disabled={loading}
-            >
-              ← Zurück
-            </button>
-          )}
+          <button
+            onClick={goToPrevStep}
+            disabled={loading || currentStep === 0}
+            style={{
+              padding: '0.75rem 1.5rem',
+              color: loading || currentStep === 0 ? '#adb5bd' : '#6c757d',
+              border: `1px solid ${loading || currentStep === 0 ? '#adb5bd' : '#6c757d'}`,
+              background: 'none',
+              borderRadius: '6px',
+              cursor: loading || currentStep === 0 ? 'not-allowed' : 'pointer',
+              fontWeight: '500',
+              opacity: loading || currentStep === 0 ? 0.6 : 1
+            }}
+          >
+            ← Zurück
+          </button>
           
           <button
-            onClick={handleNext}
+            onClick={goToNextStep}
             disabled={loading}
             style={{
               padding: '0.75rem 2rem',
@@ -340,28 +668,25 @@ const Setup: React.FC = () => {
               cursor: loading ? 'not-allowed' : 'pointer',
               fontWeight: '600',
               fontSize: '1rem',
-              marginLeft: step === 1 ? 'auto' : '0',
               transition: 'background-color 0.3s ease'
             }}
           >
-            {loading ? '⏳ Wird verarbeitet...' : 
-             step === 1 ? 'Weiter →' : 'Setup abschließen'}
+            {getNextButtonText()}
           </button>
         </div>
 
-        {step === 2 && (
+        {/* Zusätzliche Informationen */}
+        {currentStep === 2 && !loading && (
           <div style={{ 
             marginTop: '1.5rem', 
             textAlign: 'center', 
             color: '#6c757d', 
             fontSize: '0.9rem',
             padding: '1rem',
-            backgroundColor: '#e7f3ff',
-            borderRadius: '6px',
-            border: '1px solid #b6d7e8'
+            backgroundColor: '#f8f9fa',
+            borderRadius: '6px'
           }}>
-            💡 Nach dem erfolgreichen Setup werden Sie zur Anmeldeseite weitergeleitet, 
-            wo Sie sich mit Ihrer automatisch generierten E-Mail anmelden können.
+            Überprüfen Sie Ihre Daten, bevor Sie das Setup abschließen
           </div>
         )}
       </div>

frontend/src/pages/ShiftPlans/ShiftPlanCreate.tsx

@@ -2,6 +2,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { shiftPlanService } from '../../services/shiftPlanService';
+import { useNotification } from '../../contexts/NotificationContext';
+import { useBackendValidation } from '../../hooks/useBackendValidation';
 import styles from './ShiftPlanCreate.module.css';
 
 // Interface für Template Presets
@@ -14,6 +16,8 @@ interface TemplatePreset {
 const ShiftPlanCreate: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const { showNotification } = useNotification();
+  const { executeWithValidation, isSubmitting } = useBackendValidation();
   
   const [planName, setPlanName] = useState('');
   const [startDate, setStartDate] = useState('');
@@ -21,8 +25,6 @@ const ShiftPlanCreate: React.FC = () => {
   const [selectedPreset, setSelectedPreset] = useState('');
   const [presets, setPresets] = useState<TemplatePreset[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState<string | null>(null);
 
   useEffect(() => {
     loadTemplatePresets();
@@ -42,36 +44,60 @@ const ShiftPlanCreate: React.FC = () => {
       }
     } catch (error) {
       console.error('❌ Fehler beim Laden der Vorlagen-Presets:', error);
-      setError('Vorlagen-Presets konnten nicht geladen werden');
+      showNotification({
+        type: 'error',
+        title: 'Fehler beim Laden',
+        message: 'Vorlagen-Presets konnten nicht geladen werden'
+      });
     } finally {
       setLoading(false);
     }
   };
 
   const handleCreate = async () => {
-    try {
-      // Validierung
-      if (!planName.trim()) {
-        setError('Bitte geben Sie einen Namen für den Schichtplan ein');
-        return;
-      }
-      if (!startDate) {
-        setError('Bitte wählen Sie ein Startdatum');
-        return;
-      }
-      if (!endDate) {
-        setError('Bitte wählen Sie ein Enddatum');
-        return;
-      }
-      if (new Date(endDate) < new Date(startDate)) {
-        setError('Das Enddatum muss nach dem Startdatum liegen');
-        return;
-      }
-      if (!selectedPreset) {
-        setError('Bitte wählen Sie eine Vorlage aus');
-        return;
-      }
+    // Basic frontend validation only
+    if (!planName.trim()) {
+      showNotification({
+        type: 'error',
+        title: 'Fehlende Angaben',
+        message: 'Bitte geben Sie einen Namen für den Schichtplan ein'
+      });
+      return;
+    }
+    if (!startDate) {
+      showNotification({
+        type: 'error',
+        title: 'Fehlende Angaben',
+        message: 'Bitte wählen Sie ein Startdatum'
+      });
+      return;
+    }
+    if (!endDate) {
+      showNotification({
+        type: 'error',
+        title: 'Fehlende Angaben', 
+        message: 'Bitte wählen Sie ein Enddatum'
+      });
+      return;
+    }
+    if (new Date(endDate) < new Date(startDate)) {
+      showNotification({
+        type: 'error',
+        title: 'Ungültige Daten',
+        message: 'Das Enddatum muss nach dem Startdatum liegen'
+      });
+      return;
+    }
+    if (!selectedPreset) {
+      showNotification({
+        type: 'error',
+        title: 'Fehlende Angaben',
+        message: 'Bitte wählen Sie eine Vorlage aus'
+      });
+      return;
+    }
 
+    await executeWithValidation(async () => {
       console.log('🔄 Erstelle Schichtplan aus Preset...', {
         presetName: selectedPreset,
         name: planName,
@@ -91,16 +117,16 @@ const ShiftPlanCreate: React.FC = () => {
       console.log('✅ Plan erstellt:', createdPlan);
       
       // Erfolgsmeldung und Weiterleitung
-      setSuccess('Schichtplan erfolgreich erstellt!');
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schichtplan erfolgreich erstellt!'
+      });
+      
       setTimeout(() => {
         navigate(`/shift-plans/${createdPlan.id}`);
       }, 1500);
-      
-    } catch (error) {
-      const err = error as Error;
-      console.error('❌ Fehler beim Erstellen des Plans:', err);
-      setError(`Plan konnte nicht erstellt werden: ${err.message}`);
-    } 
+    });
   };
 
   const getSelectedPresetDescription = () => {
@@ -120,23 +146,15 @@ const ShiftPlanCreate: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <h1>Neuen Schichtplan erstellen</h1>
-        <button onClick={() => navigate(-1)} className={styles.backButton}>
+        <button 
+          onClick={() => navigate(-1)} 
+          className={styles.backButton}
+          disabled={isSubmitting}
+        >
           Zurück
         </button>
       </div>
       
-      {error && (
-        <div className={styles.error}>
-          {error}
-        </div>
-      )}
-
-      {success && (
-        <div className={styles.success}>
-          {success}
-        </div>
-      )}
-      
       <div className={styles.form}>
         <div className={styles.formGroup}>
           <label>Plan Name:</label>
@@ -146,6 +164,7 @@ const ShiftPlanCreate: React.FC = () => {
             onChange={(e) => setPlanName(e.target.value)}
             placeholder="z.B. KW 42 2025"
             className={styles.input}
+            disabled={isSubmitting}
           />
         </div>
 
@@ -157,6 +176,7 @@ const ShiftPlanCreate: React.FC = () => {
               value={startDate}
               onChange={(e) => setStartDate(e.target.value)}
               className={styles.input}
+              disabled={isSubmitting}
             />
           </div>
 
@@ -167,6 +187,7 @@ const ShiftPlanCreate: React.FC = () => {
               value={endDate}
               onChange={(e) => setEndDate(e.target.value)}
               className={styles.input}
+              disabled={isSubmitting}
             />
           </div>
         </div>
@@ -177,6 +198,7 @@ const ShiftPlanCreate: React.FC = () => {
             value={selectedPreset} 
             onChange={(e) => setSelectedPreset(e.target.value)}
             className={`${styles.select} ${presets.length === 0 ? styles.empty : ''}`}
+            disabled={isSubmitting}
           >
             <option value="">Bitte wählen...</option>
             {presets.map(preset => (
@@ -203,9 +225,9 @@ const ShiftPlanCreate: React.FC = () => {
           <button 
             onClick={handleCreate} 
             className={styles.createButton} 
-            disabled={!selectedPreset || !planName.trim() || !startDate || !endDate}
+            disabled={isSubmitting || !selectedPreset || !planName.trim() || !startDate || !endDate}
           >
-            Schichtplan erstellen
+            {isSubmitting ? 'Wird erstellt...' : 'Schichtplan erstellen'}
           </button>
         </div>
       </div>

frontend/src/pages/ShiftPlans/ShiftPlanEdit.tsx

@@ -4,11 +4,14 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { shiftPlanService } from '../../services/shiftPlanService';
 import { ShiftPlan, Shift, ScheduledShift } from '../../models/ShiftPlan';
 import { useNotification } from '../../contexts/NotificationContext';
+import { useBackendValidation } from '../../hooks/useBackendValidation';
 
 const ShiftPlanEdit: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const { showNotification } = useNotification();
+  const { showNotification, confirmDialog } = useNotification();
+  const { executeWithValidation, isSubmitting } = useBackendValidation();
+  
   const [shiftPlan, setShiftPlan] = useState<ShiftPlan | null>(null);
   const [loading, setLoading] = useState(true);
   const [editingShift, setEditingShift] = useState<Shift | null>(null);
@@ -24,122 +27,150 @@ const ShiftPlanEdit: React.FC = () => {
 
   const loadShiftPlan = async () => {
     if (!id) return;
-    try {
-      const plan = await shiftPlanService.getShiftPlan(id);
-      setShiftPlan(plan);
-    } catch (error) {
-      console.error('Error loading shift plan:', error);
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Der Schichtplan konnte nicht geladen werden.'
-      });
-      navigate('/shift-plans');
-    } finally {
-      setLoading(false);
-    }
+    
+    await executeWithValidation(async () => {
+      try {
+        const plan = await shiftPlanService.getShiftPlan(id);
+        setShiftPlan(plan);
+      } catch (error) {
+        console.error('Error loading shift plan:', error);
+        navigate('/shift-plans');
+      } finally {
+        setLoading(false);
+      }
+    });
   };
 
   const handleUpdateShift = async (shift: Shift) => {
     if (!shiftPlan || !id) return;
     
-    try {
-      // Update logic here
+    await executeWithValidation(async () => {
+      // Update logic here - will be implemented when backend API is available
+      // For now, just simulate success
+      console.log('Updating shift:', shift);
+      
       loadShiftPlan();
       setEditingShift(null);
-    } catch (error) {
-      console.error('Error updating shift:', error);
+      
       showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Die Schicht konnte nicht aktualisiert werden.'
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde erfolgreich aktualisiert.'
       });
-    }
+    });
   };
 
   const handleAddShift = async () => {
     if (!shiftPlan || !id) return;
     
-    if (!newShift.timeSlotId || !newShift.requiredEmployees) {
+    // Basic frontend validation only
+    if (!newShift.timeSlotId) {
       showNotification({
         type: 'error',
-        title: 'Fehler',
-        message: 'Bitte füllen Sie alle Pflichtfelder aus.'
+        title: 'Fehlende Angaben',
+        message: 'Bitte wählen Sie einen Zeit-Slot aus.'
       });
       return;
     }
     
-    try {
-      // Add shift logic here
+    if (!newShift.requiredEmployees || newShift.requiredEmployees < 1) {
+      showNotification({
+        type: 'error',
+        title: 'Fehlende Angaben',
+        message: 'Bitte geben Sie die Anzahl der benötigten Mitarbeiter an.'
+      });
+      return;
+    }
+
+    await executeWithValidation(async () => {
+      // Add shift logic here - will be implemented when backend API is available
+      // For now, just simulate success
+      console.log('Adding shift:', newShift);
+      
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Neue Schicht wurde hinzugefügt.'
       });
+      
       setNewShift({
         timeSlotId: '',
         dayOfWeek: 1,
         requiredEmployees: 1
       });
       loadShiftPlan();
-    } catch (error) {
-      console.error('Error adding shift:', error);
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Die Schicht konnte nicht hinzugefügt werden.'
-      });
-    }
+    });
   };
 
   const handleDeleteShift = async (shiftId: string) => {
-    if (!window.confirm('Möchten Sie diese Schicht wirklich löschen?')) {
-      return;
-    }
+    const confirmed = await confirmDialog({
+      title: 'Schicht löschen',
+      message: 'Möchten Sie diese Schicht wirklich löschen?',
+      confirmText: 'Löschen',
+      cancelText: 'Abbrechen',
+      type: 'warning'
+    });
+
+    if (!confirmed) return;
+
+    await executeWithValidation(async () => {
+      // Delete logic here - will be implemented when backend API is available
+      // For now, just simulate success
+      console.log('Deleting shift:', shiftId);
       
-    try {
-      // Delete logic here
       loadShiftPlan();
-    } catch (error) {
-      console.error('Error deleting shift:', error);
+      
       showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Die Schicht konnte nicht gelöscht werden.'
+        type: 'success',
+        title: 'Erfolg',
+        message: 'Schicht wurde erfolgreich gelöscht.'
       });
-    }
+    });
   };
 
   const handlePublish = async () => {
     if (!shiftPlan || !id) return;
 
-    try {
+    await executeWithValidation(async () => {
       await shiftPlanService.updateShiftPlan(id, {
         ...shiftPlan,
         status: 'published'
       });
+      
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Schichtplan wurde veröffentlicht.'
       });
+      
       loadShiftPlan();
-    } catch (error) {
-      console.error('Error publishing shift plan:', error);
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Der Schichtplan konnte nicht veröffentlicht werden.'
-      });
-    }
+    });
   };
 
   if (loading) {
-    return <div>Lade Schichtplan...</div>;
+    return (
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '40px',
+        fontSize: '18px',
+        color: '#666'
+      }}>
+        Lade Schichtplan...
+      </div>
+    );
   }
 
   if (!shiftPlan) {
-    return <div>Schichtplan nicht gefunden</div>;
+    return (
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '40px',
+        fontSize: '18px',
+        color: '#e74c3c'
+      }}>
+        Schichtplan nicht gefunden
+      </div>
+    );
   }
 
   // Group shifts by dayOfWeek
@@ -174,28 +205,32 @@ const ShiftPlanEdit: React.FC = () => {
           {shiftPlan.status === 'draft' && (
             <button
               onClick={handlePublish}
+              disabled={isSubmitting}
               style={{
                 padding: '8px 16px',
                 backgroundColor: '#2ecc71',
                 color: 'white',
                 border: 'none',
                 borderRadius: '4px',
-                cursor: 'pointer',
-                marginRight: '10px'
+                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                marginRight: '10px',
+                opacity: isSubmitting ? 0.6 : 1
               }}
             >
-              Veröffentlichen
+              {isSubmitting ? 'Wird veröffentlicht...' : 'Veröffentlichen'}
             </button>
           )}
           <button
             onClick={() => navigate('/shift-plans')}
+            disabled={isSubmitting}
             style={{
               padding: '8px 16px',
               backgroundColor: '#95a5a6',
               color: 'white',
               border: 'none',
               borderRadius: '4px',
-              cursor: 'pointer'
+              cursor: isSubmitting ? 'not-allowed' : 'pointer',
+              opacity: isSubmitting ? 0.6 : 1
             }}
           >
             Zurück
@@ -219,6 +254,7 @@ const ShiftPlanEdit: React.FC = () => {
               value={newShift.dayOfWeek}
               onChange={(e) => setNewShift({ ...newShift, dayOfWeek: parseInt(e.target.value) })}
               style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
+              disabled={isSubmitting}
             >
               {daysOfWeek.map(day => (
                 <option key={day.id} value={day.id}>{day.name}</option>
@@ -231,6 +267,7 @@ const ShiftPlanEdit: React.FC = () => {
               value={newShift.timeSlotId}
               onChange={(e) => setNewShift({ ...newShift, timeSlotId: e.target.value })}
               style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
+              disabled={isSubmitting}
             >
               <option value="">Bitte auswählen...</option>
               {shiftPlan.timeSlots.map(slot => (
@@ -246,25 +283,27 @@ const ShiftPlanEdit: React.FC = () => {
               type="number"
               min="1"
               value={newShift.requiredEmployees}
-              onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) })}
+              onChange={(e) => setNewShift({ ...newShift, requiredEmployees: parseInt(e.target.value) || 1 })}
               style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
+              disabled={isSubmitting}
             />
           </div>
         </div>
         <button
           onClick={handleAddShift}
-          disabled={!newShift.timeSlotId || !newShift.requiredEmployees}
+          disabled={isSubmitting || !newShift.timeSlotId || !newShift.requiredEmployees}
           style={{
             marginTop: '15px',
             padding: '8px 16px',
-            backgroundColor: '#3498db',
+            backgroundColor: isSubmitting ? '#bdc3c7' : '#3498db',
             color: 'white',
             border: 'none',
             borderRadius: '4px',
-            cursor: 'pointer'
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+            opacity: (!newShift.timeSlotId || !newShift.requiredEmployees) ? 0.6 : 1
           }}
         >
-          Schicht hinzufügen
+          {isSubmitting ? 'Wird hinzugefügt...' : 'Schicht hinzufügen'}
         </button>
       </div>
 
@@ -300,6 +339,7 @@ const ShiftPlanEdit: React.FC = () => {
                               value={editingShift.timeSlotId}
                               onChange={(e) => setEditingShift({ ...editingShift, timeSlotId: e.target.value })}
                               style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
+                              disabled={isSubmitting}
                             >
                               {shiftPlan.timeSlots.map(slot => (
                                 <option key={slot.id} value={slot.id}>
@@ -314,33 +354,37 @@ const ShiftPlanEdit: React.FC = () => {
                               type="number"
                               min="1"
                               value={editingShift.requiredEmployees}
-                              onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) })}
+                              onChange={(e) => setEditingShift({ ...editingShift, requiredEmployees: parseInt(e.target.value) || 1 })}
                               style={{ width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
+                              disabled={isSubmitting}
                             />
                           </div>
                           <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-end' }}>
                             <button
                               onClick={() => handleUpdateShift(editingShift)}
+                              disabled={isSubmitting}
                               style={{
                                 padding: '8px 16px',
-                                backgroundColor: '#2ecc71',
+                                backgroundColor: isSubmitting ? '#bdc3c7' : '#2ecc71',
                                 color: 'white',
                                 border: 'none',
                                 borderRadius: '4px',
-                                cursor: 'pointer'
+                                cursor: isSubmitting ? 'not-allowed' : 'pointer'
                               }}
                             >
-                              Speichern
+                              {isSubmitting ? 'Speichern...' : 'Speichern'}
                             </button>
                             <button
                               onClick={() => setEditingShift(null)}
+                              disabled={isSubmitting}
                               style={{
                                 padding: '8px 16px',
                                 backgroundColor: '#95a5a6',
                                 color: 'white',
                                 border: 'none',
                                 borderRadius: '4px',
-                                cursor: 'pointer'
+                                cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                                opacity: isSubmitting ? 0.6 : 1
                               }}
                             >
                               Abbrechen
@@ -359,27 +403,31 @@ const ShiftPlanEdit: React.FC = () => {
                             <div>
                               <button
                                 onClick={() => setEditingShift(shift)}
+                                disabled={isSubmitting}
                                 style={{
                                   padding: '6px 12px',
-                                  backgroundColor: '#f1c40f',
+                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#f1c40f',
                                   color: 'white',
                                   border: 'none',
                                   borderRadius: '4px',
-                                  cursor: 'pointer',
-                                  marginRight: '8px'
+                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                                  marginRight: '8px',
+                                  opacity: isSubmitting ? 0.6 : 1
                                 }}
                               >
                                 Bearbeiten
                               </button>
                               <button
                                 onClick={() => handleDeleteShift(shift.id)}
+                                disabled={isSubmitting}
                                 style={{
                                   padding: '6px 12px',
-                                  backgroundColor: '#e74c3c',
+                                  backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
                                   color: 'white',
                                   border: 'none',
                                   borderRadius: '4px',
-                                  cursor: 'pointer'
+                                  cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                                  opacity: isSubmitting ? 0.6 : 1
                                 }}
                               >
                                 Löschen

frontend/src/pages/ShiftPlans/ShiftPlanList.tsx

@@ -5,12 +5,15 @@ import { useAuth } from '../../contexts/AuthContext';
 import { shiftPlanService } from '../../services/shiftPlanService';
 import { ShiftPlan } from '../../models/ShiftPlan';
 import { useNotification } from '../../contexts/NotificationContext';
+import { useBackendValidation } from '../../hooks/useBackendValidation';
 import { formatDate } from '../../utils/foramatters';
 
 const ShiftPlanList: React.FC = () => {
   const { hasRole } = useAuth();
   const navigate = useNavigate();
-  const { showNotification } = useNotification();
+  const { showNotification, confirmDialog } = useNotification();
+  const { executeWithValidation, isSubmitting } = useBackendValidation();
+  
   const [shiftPlans, setShiftPlans] = useState<ShiftPlan[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -19,46 +22,80 @@ const ShiftPlanList: React.FC = () => {
   }, []);
 
   const loadShiftPlans = async () => {
-    try {
-      const plans = await shiftPlanService.getShiftPlans();
-      setShiftPlans(plans);
-    } catch (error) {
-      console.error('Error loading shift plans:', error);
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Die Schichtpläne konnten nicht geladen werden.'
-      });
-    } finally {
-      setLoading(false);
-    }
+    await executeWithValidation(async () => {
+      try {
+        const plans = await shiftPlanService.getShiftPlans();
+        setShiftPlans(plans);
+      } catch (error) {
+        console.error('Error loading shift plans:', error);
+        // Error is automatically handled by executeWithValidation
+      } finally {
+        setLoading(false);
+      }
+    });
   };
 
-  const handleDelete = async (id: string) => {
-    if (!window.confirm('Möchten Sie diesen Schichtplan wirklich löschen?')) {
-      return;
-    }
+  const handleDelete = async (id: string, planName: string) => {
+    const confirmed = await confirmDialog({
+      title: 'Schichtplan löschen',
+      message: `Möchten Sie den Schichtplan "${planName}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.`,
+      confirmText: 'Löschen',
+      cancelText: 'Abbrechen',
+      type: 'warning'
+    });
 
-    try {
+    if (!confirmed) return;
+
+    await executeWithValidation(async () => {
       await shiftPlanService.deleteShiftPlan(id);
+      
       showNotification({
         type: 'success',
         title: 'Erfolg',
         message: 'Der Schichtplan wurde erfolgreich gelöscht.'
       });
+      
       loadShiftPlans();
-    } catch (error) {
-      console.error('Error deleting shift plan:', error);
-      showNotification({
-        type: 'error',
-        title: 'Fehler',
-        message: 'Der Schichtplan konnte nicht gelöscht werden.'
-      });
-    }
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    const config = {
+      draft: { text: 'Entwurf', color: '#f39c12', bgColor: '#fef5e7' },
+      published: { text: 'Veröffentlicht', color: '#27ae60', bgColor: '#d5f4e6' },
+      archived: { text: 'Archiviert', color: '#95a5a6', bgColor: '#f8f9fa' }
+    };
+
+    const statusConfig = config[status as keyof typeof config] || config.draft;
+
+    return (
+      <span
+        style={{
+          backgroundColor: statusConfig.bgColor,
+          color: statusConfig.color,
+          padding: '4px 8px',
+          borderRadius: '12px',
+          fontSize: '12px',
+          fontWeight: 'bold',
+          display: 'inline-block'
+        }}
+      >
+        {statusConfig.text}
+      </span>
+    );
   };
 
   if (loading) {
-    return <div>Lade Schichtpläne...</div>;
+    return (
+      <div style={{ 
+        textAlign: 'center', 
+        padding: '40px',
+        fontSize: '18px',
+        color: '#666'
+      }}>
+        Lade Schichtpläne...
+      </div>
+    );
   }
 
   return (
@@ -97,6 +134,21 @@ const ShiftPlanList: React.FC = () => {
           <div style={{ fontSize: '48px', marginBottom: '20px' }}>📋</div>
           <h3>Keine Schichtpläne vorhanden</h3>
           <p>Erstellen Sie Ihren ersten Schichtplan!</p>
+          {hasRole(['admin', 'maintenance']) && (
+            <Link to="/shift-plans/new">
+              <button style={{ 
+                marginTop: '15px',
+                padding: '10px 20px', 
+                backgroundColor: '#51258f', 
+                color: 'white', 
+                border: 'none', 
+                borderRadius: '4px',
+                cursor: 'pointer'
+              }}>
+                Ersten Plan erstellen
+              </button>
+            </Link>
+          )}
         </div>
       ) : (
         <div style={{ display: 'grid', gap: '20px' }}>
@@ -110,35 +162,35 @@ const ShiftPlanList: React.FC = () => {
                 boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                 display: 'flex',
                 justifyContent: 'space-between',
-                alignItems: 'center'
+                alignItems: 'center',
+                border: plan.status === 'published' ? '2px solid #d5f4e6' : '1px solid #e0e0e0'
               }}
             >
-              <div>
-                <h3 style={{ margin: '0 0 10px 0' }}>{plan.name}</h3>
-                <div style={{ color: '#666', fontSize: '14px' }}>
+              <div style={{ flex: 1 }}>
+                <h3 style={{ margin: '0 0 10px 0', color: '#2c3e50' }}>{plan.name}</h3>
+                <div style={{ color: '#666', fontSize: '14px', marginBottom: '10px' }}>
                   <p style={{ margin: '0' }}>
-                    Zeitraum: {formatDate(plan.startDate)} - {formatDate(plan.endDate)}
+                    <strong>Zeitraum:</strong> {formatDate(plan.startDate)} - {formatDate(plan.endDate)}
                   </p>
                   <p style={{ margin: '5px 0 0 0' }}>
-                    Status: <span style={{
-                      color: plan.status === 'published' ? '#2ecc71' : '#f1c40f',
-                      fontWeight: 'bold'
-                    }}>
-                      {plan.status === 'published' ? 'Veröffentlicht' : 'Entwurf'}
-                    </span>
+                    <strong>Status:</strong> {getStatusBadge(plan.status)}
                   </p>
                 </div>
+                <div style={{ fontSize: '12px', color: '#95a5a6' }}>
+                  Erstellt am: {formatDate(plan.createdAt || '')}
+                </div>
               </div>
-              <div style={{ display: 'flex', gap: '10px' }}>
+              <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                 <button
                   onClick={() => navigate(`/shift-plans/${plan.id}`)}
                   style={{
                     padding: '8px 16px',
-                    backgroundColor: '#2ecc71',
+                    backgroundColor: '#3498db',
                     color: 'white',
                     border: 'none',
                     borderRadius: '4px',
-                    cursor: 'pointer'
+                    cursor: 'pointer',
+                    minWidth: '80px'
                   }}
                 >
                   Anzeigen
@@ -149,27 +201,31 @@ const ShiftPlanList: React.FC = () => {
                       onClick={() => navigate(`/shift-plans/${plan.id}/edit`)}
                       style={{
                         padding: '8px 16px',
-                        backgroundColor: '#f1c40f',
+                        backgroundColor: '#f39c12',
                         color: 'white',
                         border: 'none',
                         borderRadius: '4px',
-                        cursor: 'pointer'
+                        cursor: 'pointer',
+                        minWidth: '80px'
                       }}
                     >
                       Bearbeiten
                     </button>
                     <button
-                      onClick={() => handleDelete(plan.id)}
+                      onClick={() => handleDelete(plan.id, plan.name)}
+                      disabled={isSubmitting}
                       style={{
                         padding: '8px 16px',
-                        backgroundColor: '#e74c3c',
+                        backgroundColor: isSubmitting ? '#bdc3c7' : '#e74c3c',
                         color: 'white',
                         border: 'none',
                         borderRadius: '4px',
-                        cursor: 'pointer'
+                        cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                        minWidth: '80px',
+                        opacity: isSubmitting ? 0.6 : 1
                       }}
                     >
-                      Löschen
+                      {isSubmitting ? 'Löscht...' : 'Löschen'}
                     </button>
                   </>
                 )}
@@ -178,6 +234,22 @@ const ShiftPlanList: React.FC = () => {
           ))}
         </div>
       )}
+
+      {/* Info for users without edit permissions */}
+      {!hasRole(['admin', 'maintenance']) && shiftPlans.length > 0 && (
+        <div style={{
+          marginTop: '20px',
+          padding: '15px',
+          backgroundColor: '#e8f4fd',
+          border: '1px solid #b6d7e8',
+          borderRadius: '6px',
+          fontSize: '14px',
+          color: '#2c3e50'
+        }}>
+          <strong>ℹ️ Informationen:</strong> Sie können Schichtpläne nur anzeigen. 
+          Bearbeitungsrechte benötigen Admin- oder Instandhalter-Berechtigungen.
+        </div>
+      )}
     </div>
   );
 };

frontend/src/services/employeeService.ts

@@ -1,5 +1,6 @@
 // frontend/src/services/employeeService.ts
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest, EmployeeAvailability } from '../models/Employee';
+import { ErrorService, ValidationError } from './errorService';
 
 const API_BASE_URL = '/api';
 
@@ -12,6 +13,23 @@ const getAuthHeaders = () => {
 };
 
 export class EmployeeService {
+  private async handleApiResponse<T>(response: Response): Promise<T> {
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      const validationErrors = ErrorService.extractValidationErrors(errorData);
+      
+      if (validationErrors.length > 0) {
+        const error = new Error('Validation failed');
+        (error as any).validationErrors = validationErrors;
+        throw error;
+      }
+      
+      throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+    }
+    
+    return response.json();
+  }
+
   async getEmployees(includeInactive: boolean = false): Promise<Employee[]> {
     console.log('🔄 Fetching employees from API...');
     
@@ -55,12 +73,7 @@ export class EmployeeService {
       body: JSON.stringify(employee),
     });
     
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to create employee');
-    }
-    
-    return response.json();
+    return this.handleApiResponse<Employee>(response);
   }
 
   async updateEmployee(id: string, employee: UpdateEmployeeRequest): Promise<Employee> {
@@ -70,12 +83,7 @@ export class EmployeeService {
       body: JSON.stringify(employee),
     });
     
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || 'Failed to update employee');
-    }
-    
-    return response.json();
+    return this.handleApiResponse<Employee>(response);
   }
 
   async deleteEmployee(id: string): Promise<void> {

frontend/src/services/errorService.ts

@@ -0,0 +1,38 @@
+// frontend/src/services/errorService.ts
+export interface ValidationError {
+  field: string;
+  message: string;
+  value?: any;
+}
+
+export interface ApiError {
+  error: string;
+  details?: ValidationError[];
+  message?: string;
+}
+
+export class ErrorService {
+  static extractValidationErrors(error: any): ValidationError[] {
+    if (error?.details && Array.isArray(error.details)) {
+      return error.details;
+    }
+    
+    // Fallback for different error formats
+    if (error.message && typeof error.message === 'string') {
+      return [{ field: 'general', message: error.message }];
+    }
+    
+    return [{ field: 'general', message: 'An unknown error occurred' }];
+  }
+
+  static getFieldErrors(errors: ValidationError[], fieldName: string): string[] {
+    return errors
+      .filter(error => error.field === fieldName)
+      .map(error => error.message);
+  }
+
+  static getFirstFieldError(errors: ValidationError[], fieldName: string): string | null {
+    const fieldErrors = this.getFieldErrors(errors, fieldName);
+    return fieldErrors.length > 0 ? fieldErrors[0] : null;
+  }
+}

frontend/src/services/scheduling/useScheduling.ts

@@ -1,71 +0,0 @@
-import { useState, useCallback } from 'react';
-import { ScheduleRequest, ScheduleResult } from '../../models/scheduling';
-
-export const useScheduling = () => {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [result, setResult] = useState<ScheduleResult | null>(null);
-  
-  const generateSchedule = useCallback(async (request: ScheduleRequest) => {
-    setLoading(true);
-    setError(null);
-    
-    try {
-      console.log('📤 Sending scheduling request:', {
-        shiftPlan: request.shiftPlan.name,
-        employees: request.employees.length,
-        availabilities: request.availabilities.length,
-        constraints: request.constraints.length
-      });
-
-      const response = await fetch('/api/scheduling/generate-schedule', {
-        method: 'POST',
-        headers: { 
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(request)
-      });
-      
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Scheduling request failed: ${response.status} ${errorText}`);
-      }
-      
-      const data: ScheduleResult = await response.json();
-      
-      console.log('📥 Received scheduling result:', {
-        success: data.success,
-        assignments: Object.keys(data.assignments).length,
-        violations: data.violations.length,
-        processingTime: data.processingTime
-      });
-      
-      setResult(data);
-      return data;
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Unknown scheduling error';
-      console.error('❌ Scheduling error:', errorMessage);
-      setError(errorMessage);
-      throw err;
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-  
-  const reset = useCallback(() => {
-    setLoading(false);
-    setError(null);
-    setResult(null);
-  }, []);
-  
-  return { 
-    generateSchedule, 
-    loading, 
-    error, 
-    result,
-    reset
-  };
-};
-
-// Export for backward compatibility
-export default useScheduling;

frontend/vite.config.ts

@@ -23,7 +23,7 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 3003,
       host: true,
-      open: isDevelopment,
+      //open: isDevelopment,
       proxy: {
         '/api': {
           target: 'http://localhost:3002',