removed phone and departement as user attribute

backend/src/controllers/authController.ts

@@ -1,3 +1,4 @@
+// backend/src/controllers/authController.ts
 import { Request, Response } from 'express';
 import jwt from 'jsonwebtoken';
 import bcrypt from 'bcrypt';
@@ -9,8 +10,6 @@ export interface User {
   email: string;
   name: string;
   role: string;
-  phone?: string;
-  department?: string;
 }
 
 export interface UserWithPassword extends User {
@@ -34,8 +33,8 @@ export interface RegisterRequest {
   email: string;
   password: string;
   name: string;
-  phone?: string;
-  department?: string;
+  //employee_type?: string;
+  //is_sufficiently_independent?: string;
   role?: string;
 }
 
@@ -52,7 +51,7 @@ export const login = async (req: Request, res: Response) => {
 
     // Get user from database
     const user = await db.get<UserWithPassword>(
-      'SELECT id, email, password, name, role, phone, department FROM users WHERE email = ? AND is_active = 1',
+      'SELECT id, email, password, name, role FROM users WHERE email = ? AND is_active = 1',
       [email]
     );
 
@@ -116,7 +115,7 @@ export const getCurrentUser = async (req: Request, res: Response) => {
     }
 
     const user = await db.get<User>(
-      'SELECT id, email, name, role, phone, department FROM users WHERE id = ? AND is_active = 1',
+      'SELECT id, email, name, role FROM users WHERE id = ? AND is_active = 1',
       [jwtUser.userId] // ← HIER: userId verwenden
     );
 
@@ -162,7 +161,7 @@ export const validateToken = async (req: Request, res: Response) => {
 
 export const register = async (req: Request, res: Response) => {
   try {
-    const { email, password, name, phone, department, role = 'user' } = req.body as RegisterRequest;
+    const { email, password, name, role = 'user' } = req.body as RegisterRequest;
 
     // Validate required fields
     if (!email || !password || !name) {
@@ -188,9 +187,9 @@ export const register = async (req: Request, res: Response) => {
 
     // Insert user
     const result = await db.run(
-      `INSERT INTO users (email, password, name, role, phone, department) 
-       VALUES (?, ?, ?, ?, ?, ?)`,
-      [email, hashedPassword, name, role, phone, department]
+      `INSERT INTO users (email, password, name, role) 
+       VALUES (?, ?, ?, ?)`,
+      [email, hashedPassword, name, role]
     );
 
     if (!result.lastID) {

backend/src/controllers/employeeController.ts

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import bcrypt from 'bcryptjs';
 import { db } from '../services/databaseService.js';
 import { AuthRequest } from '../middleware/auth.js';
+import { CreateEmployeeRequest } from '../models/Employee.js';
 
 export const getEmployees = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
@@ -12,7 +13,9 @@ export const getEmployees = async (req: AuthRequest, res: Response): Promise<voi
     const employees = await db.all<any>(`
       SELECT 
         id, email, name, role, is_active as isActive, 
-        phone, department, created_at as createdAt, 
+        employee_type as employeeType, 
+        is_sufficiently_independent as isSufficientlyIndependent, 
+        created_at as createdAt, 
         last_login as lastLogin
       FROM users 
       WHERE is_active = 1
@@ -36,7 +39,9 @@ export const getEmployee = async (req: AuthRequest, res: Response): Promise<void
     const employee = await db.get<any>(`
       SELECT 
         id, email, name, role, is_active as isActive, 
-        phone, department, created_at as createdAt, 
+        employee_type as employeeType, 
+        is_sufficiently_independent as isSufficientlyIndependent,  
+        created_at as createdAt, 
         last_login as lastLogin
       FROM users 
       WHERE id = ?
@@ -61,19 +66,22 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
       password: '***hidden***'
     });
 
-    const { email, password, name, role, phone, department } = req.body as {
-      email: string;
-      password: string;
-      name: string;
-      role: string;
-      phone?: string;
-      department?: string;
-    };
+    const { 
+      email, 
+      password, 
+      name, 
+      role, 
+      employeeType, 
+      isSufficientlyIndependent,
+      notes 
+    } = req.body as CreateEmployeeRequest;
 
     // Validierung
-    if (!email || !password || !name || !role) {
+    if (!email || !password || !name || !role || !employeeType) {
       console.log('❌ Validation failed: Missing required fields');
-      res.status(400).json({ error: 'Email, password, name and role are required' });
+      res.status(400).json({ 
+        error: 'Email, password, name, role und employeeType sind erforderlich' 
+      });
       return;
     }
 
@@ -83,13 +91,8 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
       return;
     }
 
-    // First check for ANY user with this email to debug
-    const allUsersWithEmail = await db.all<any>('SELECT id, email, is_active FROM users WHERE email = ?', [email]);
-    console.log('🔍 Found existing users with this email:', allUsersWithEmail);
-
-    // Check if email already exists among active users only
-    const existingActiveUser = await db.get<any>('SELECT id, is_active FROM users WHERE email = ? AND is_active = 1', [email]);
-    console.log('🔍 Checking active users with this email:', existingActiveUser);
+    // Check if email already exists
+    const existingActiveUser = await db.get<any>('SELECT id FROM users WHERE email = ? AND is_active = 1', [email]);
     
     if (existingActiveUser) {
       console.log('❌ Email exists for active user:', existingActiveUser);
@@ -102,16 +105,30 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
     const employeeId = uuidv4();
 
     await db.run(
-      `INSERT INTO users (id, email, password, name, role, phone, department, is_active) 
-       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
-      [employeeId, email, hashedPassword, name, role, phone, department, 1]
+      `INSERT INTO users (
+        id, email, password, name, role, employee_type, is_sufficiently_independent, 
+        notes, is_active
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      [
+        employeeId, 
+        email, 
+        hashedPassword, 
+        name, 
+        role, 
+        employeeType, 
+        isSufficientlyIndependent ? 1 : 0,
+        notes || null,
+        1
+      ]
     );
 
-    // Return employee without password
+    // Return created employee
     const newEmployee = await db.get<any>(`
       SELECT 
-        id, email, name, role, is_active as isActive, 
-        phone, department, created_at as createdAt, 
+        id, email, name, role, is_active as isActive,
+        employee_type as employeeType, 
+        is_sufficiently_independent as isSufficientlyIndependent, 
+        notes, created_at as createdAt, 
         last_login as lastLogin
       FROM users 
       WHERE id = ?
@@ -127,7 +144,7 @@ export const createEmployee = async (req: AuthRequest, res: Response): Promise<v
 export const updateEmployee = async (req: AuthRequest, res: Response): Promise<void> => {
   try {
     const { id } = req.params;
-    const { name, role, isActive, phone, department } = req.body;
+    const { name, role, isActive, employeeType, isSufficientlyIndependent } = req.body;
 
     // Check if employee exists
     const existingEmployee = await db.get('SELECT * FROM users WHERE id = ?', [id]);
@@ -142,17 +159,19 @@ export const updateEmployee = async (req: AuthRequest, res: Response): Promise<v
        SET name = COALESCE(?, name),
            role = COALESCE(?, role),
            is_active = COALESCE(?, is_active),
-           phone = COALESCE(?, phone),
-           department = COALESCE(?, department)
+           employee_type = COALESCE(?, employee_type),
+           is_sufficiently_independent = COALESCE(?, is_sufficiently_independent)
        WHERE id = ?`,
-      [name, role, isActive, phone, department, id]
+      [name, role, isActive, employeeType, isSufficientlyIndependent, id]
     );
 
     // Return updated employee
     const updatedEmployee = await db.get<any>(`
       SELECT 
         id, email, name, role, is_active as isActive, 
-        phone, department, created_at as createdAt, 
+        employee_type as employeeType, 
+        is_sufficiently_independent as isSufficientlyIndependent,
+        created_at as createdAt, 
         last_login as lastLogin
       FROM users 
       WHERE id = ?

backend/src/controllers/setupController.ts

@@ -44,10 +44,10 @@ export const setupAdmin = async (req: Request, res: Response): Promise<void> =>
       return;
     }
 
-    const { password, name, phone, department } = req.body;
+    const { password, name } = req.body;
     const email = 'admin@instandhaltung.de'; // Fixed admin email
 
-    console.log('👤 Creating admin with data:', { name, email, phone, department });
+    console.log('👤 Creating admin with data:', { name, email });
 
     // Validation
     if (!password || !name) {
@@ -63,16 +63,16 @@ export const setupAdmin = async (req: Request, res: Response): Promise<void> =>
 
     // Hash password
     const hashedPassword = await bcrypt.hash(password, 10);
-    const adminId = uuidv4();
+    const adminId = randomUUID();
 
     console.log('📝 Inserting admin user with ID:', adminId);
 
     try {
       // Create admin user
       await db.run(
-        `INSERT INTO users (id, email, password, name, role, phone, department, is_active) 
-         VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
-        [adminId, email, hashedPassword, name, 'admin', phone || null, department || null, 1]
+        `INSERT INTO users (id, email, password, name, role, is_active) 
+         VALUES (?, ?, ?, ?, ?, ?)`,
+        [adminId, email, hashedPassword, name, 'admin', 1]
       );
 
       console.log('✅ Admin user created successfully');

backend/src/database/migrations/002_add_employee_fields.sql

@@ -0,0 +1,3 @@
+-- Add employee fields
+ALTER TABLE users ADD COLUMN employee_type TEXT CHECK(employee_type IN ('chef', 'neuling', 'erfahren'));
+ALTER TABLE users ADD COLUMN is_sufficiently_independent BOOLEAN DEFAULT FALSE;

backend/src/database/schema.sql

@@ -5,8 +5,8 @@ CREATE TABLE IF NOT EXISTS users (
   password TEXT NOT NULL,
   name TEXT NOT NULL,
   role TEXT CHECK(role IN ('admin', 'user', 'instandhalter')) NOT NULL,
-  phone TEXT,
-  department TEXT,
+  employee_type TEXT CHECK(employee_type IN ('chef', 'neuling', 'erfahren')),
+  is_sufficiently_independent BOOLEAN DEFAULT FALSE,
   is_active BOOLEAN DEFAULT TRUE,
   created_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );

backend/src/models/Employee.ts

@@ -2,38 +2,35 @@
 export interface Employee {
   id: string;
   email: string;
-  password: string;
   name: string;
   role: 'admin' | 'instandhalter' | 'user';
+  employeeType: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent: boolean;
   isActive: boolean;
-  phone?: string;
-  department?: string;
+  notes?: string;
   createdAt: string;
   lastLogin?: string | null;
 }
 
-export interface Availability {
-  id: string;
-  employeeId: string;
-  dayOfWeek: number;
-  startTime: string;
-  endTime: string;
-  isAvailable: boolean;
-}
-
 export interface CreateEmployeeRequest {
   email: string;
   password: string;
   name: string;
   role: 'admin' | 'instandhalter' | 'user';
-  phone?: string;
-  department?: string;
+  employeeType: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent: boolean;
+  notes?: string;
 }
 
 export interface UpdateEmployeeRequest {
   name?: string;
   role?: 'admin' | 'instandhalter' | 'user';
+  employeeType?: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent?: boolean;
   isActive?: boolean;
-  phone?: string;
-  department?: string;
+  notes?: string;
+}
+
+export interface EmployeeWithPassword extends Employee {
+  password: string;
 }

backend/src/scripts/applyMigration.ts

@@ -0,0 +1,43 @@
+import { db } from '../services/databaseService.js';
+import { readFile } from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function applyMigration() {
+  try {
+    console.log('📦 Starting database migration...');
+    
+    // Read the migration file
+    const migrationPath = join(__dirname, '../database/migrations/002_add_employee_fields.sql');
+    const migrationSQL = await readFile(migrationPath, 'utf-8');
+    
+    // Split into individual statements
+    const statements = migrationSQL
+      .split(';')
+      .map(s => s.trim())
+      .filter(s => s.length > 0);
+    
+    // Execute each statement
+    for (const statement of statements) {
+      try {
+        await db.exec(statement);
+        console.log('✅ Executed:', statement.slice(0, 50) + '...');
+      } catch (error) {
+        const err = error as { code: string; message: string };
+        if (err.code === 'SQLITE_ERROR' && err.message.includes('duplicate column name')) {
+          console.log('ℹ️ Column already exists, skipping...');
+          continue;
+        }
+        throw error;
+      }
+    }
+    
+    console.log('✅ Migration completed successfully');
+  } catch (error) {
+    console.error('❌ Migration failed:', error);
+    throw error;
+  }
+}

backend/src/scripts/seedData.ts

@@ -1,92 +0,0 @@
-// backend/src/scripts/seedData.ts - Erweitert
-import { db } from '../services/databaseService.js';
-import { v4 as uuidv4 } from 'uuid';
-import bcrypt from 'bcryptjs';
-
-export const seedData = async () => {
-  try {
-    console.log('Starting database seeding...');
-
-    // Admin User erstellen
-    const adminId = uuidv4();
-    const hashedPassword = await bcrypt.hash('admin123', 10);
-    
-    await db.run(
-      `INSERT OR IGNORE INTO users (id, email, password, name, role, phone, department, is_active) 
-       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
-      [adminId, 'admin@schichtplan.de', hashedPassword, 'System Administrator', 'admin', '+49 123 456789', 'IT', 1]
-    );
-
-    // Test-Mitarbeiter erstellen
-    const testUsers = [
-      {
-        id: uuidv4(),
-        email: 'instandhalter@schichtplan.de',
-        password: await bcrypt.hash('instandhalter123', 10),
-        name: 'Max Instandhalter',
-        role: 'instandhalter',
-        phone: '+49 123 456790',
-        department: 'Produktion'
-      },
-      {
-        id: uuidv4(),
-        email: 'mitarbeiter1@schichtplan.de',
-        password: await bcrypt.hash('user123', 10),
-        name: 'Anna Müller',
-        role: 'user',
-        phone: '+49 123 456791',
-        department: 'Logistik'
-      },
-      {
-        id: uuidv4(),
-        email: 'mitarbeiter2@schichtplan.de',
-        password: await bcrypt.hash('user123', 10),
-        name: 'Tom Schmidt',
-        role: 'user',
-        phone: '+49 123 456792',
-        department: 'Produktion'
-      }
-    ];
-
-    for (const user of testUsers) {
-      await db.run(
-        `INSERT OR IGNORE INTO users (id, email, password, name, role, phone, department, is_active) 
-         VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
-        [user.id, user.email, user.password, user.name, user.role, user.phone, user.department, 1]
-      );
-    }
-
-    // Standard Vorlage erstellen
-    const templateId = uuidv4();
-    await db.run(
-      `INSERT OR IGNORE INTO shift_templates (id, name, description, is_default, created_by) 
-       VALUES (?, ?, ?, ?, ?)`,
-      [templateId, 'Standard Woche', 'Standard Schichtplan für Montag bis Freitag', 1, adminId]
-    );
-
-    // Standard Schichten
-    const shifts = [
-      { day: 1, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
-      { day: 1, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
-      { day: 2, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
-      { day: 2, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
-      { day: 3, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
-      { day: 3, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
-      { day: 4, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 },
-      { day: 4, name: 'Nachmittag', start: '11:30', end: '15:30', employees: 2 },
-      { day: 5, name: 'Vormittag', start: '08:00', end: '12:00', employees: 2 }
-    ];
-
-    for (const shift of shifts) {
-      await db.run(
-        `INSERT OR IGNORE INTO template_shifts (id, template_id, day_of_week, name, start_time, end_time, required_employees) 
-         VALUES (?, ?, ?, ?, ?, ?, ?)`,
-        [uuidv4(), templateId, shift.day, shift.name, shift.start, shift.end, shift.employees]
-      );
-    }
-
-    console.log('✅ Test data seeded successfully');
-  } catch (error) {
-    console.error('❌ Error seeding test data:', error);
-  }
-};

backend/src/server.ts

@@ -59,9 +59,16 @@ app.get('/api/initial-setup', async (req: any, res: any) => {
 // Initialize the application
 const initializeApp = async () => {
   try {
+    // Initialize database with base schema
     await initializeDatabase();
     console.log('✅ Database initialized successfully');
     
+    // Apply any pending migrations
+    const { applyMigration } = await import('./scripts/applyMigration.js');
+    await applyMigration();
+    console.log('✅ Database migrations applied');
+    
+    // Setup default template
     await setupDefaultTemplate();
     console.log('✅ Default template checked/created');
     

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-// frontend/src/App.tsx - KORRIGIERTE VERSION
+// frontend/src/App.tsx - KORRIGIERT MIT LAYOUT
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
@@ -47,28 +47,13 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
   return <Layout>{children}</Layout>;
 };
 
-// SetupWrapper Component
-const SetupWrapper: React.FC = () => {
-  return (
-    <Router>
-      <Setup />
-    </Router>
-  );
-};
-
-// LoginWrapper Component  
-const LoginWrapper: React.FC = () => {
-  return (
-    <Router>
-      <Login />
-    </Router>
-  );
-};
-
 // Main App Content
 const AppContent: React.FC = () => {
   const { loading, needsSetup, user } = useAuth();
 
+  console.log('🏠 AppContent rendering - loading:', loading, 'needsSetup:', needsSetup, 'user:', user);
+
+  // Während des Ladens
   if (loading) {
     return (
       <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -77,56 +62,59 @@ const AppContent: React.FC = () => {
     );
   }
 
-  console.log('AppContent - needsSetup:', needsSetup, 'user:', user);
-
-  // Wenn Setup benötigt wird → Setup zeigen (mit Router)
+  // Setup benötigt
   if (needsSetup) {
-    return <SetupWrapper />;
+    console.log('🔧 Showing setup page');
+    return <Setup />;
   }
 
-  // Wenn kein User eingeloggt ist → Login zeigen (mit Router)
+  // Kein User eingeloggt
   if (!user) {
-    return <LoginWrapper />;
+    console.log('🔐 Showing login page');
+    return <Login />;
   }
 
-  // Wenn User eingeloggt ist → Geschützte Routen zeigen
+  // User eingeloggt - Geschützte Routen
+  console.log('✅ Showing protected routes for user:', user.email);
   return (
-    <Router>
-      <NotificationContainer />
-      <Routes>
-        <Route path="/" element={
-          <ProtectedRoute>
-            <Dashboard />
-          </ProtectedRoute>
-        } />
-        <Route path="/shift-plans" element={
-          <ProtectedRoute>
-            <ShiftPlanList />
-          </ProtectedRoute>
-        } />
-        <Route path="/shift-plans/new" element={
-          <ProtectedRoute roles={['admin', 'instandhalter']}>
-            <ShiftPlanCreate />
-          </ProtectedRoute>
-        } />
-        <Route path="/employees" element={
-          <ProtectedRoute roles={['admin', 'instandhalter']}>
-            <EmployeeManagement />
-          </ProtectedRoute>
-        } />
-        <Route path="/settings" element={
-          <ProtectedRoute roles={['admin']}>
-            <Settings />
-          </ProtectedRoute>
-        } />
-        <Route path="/help" element={
-          <ProtectedRoute>
-            <Help />
-          </ProtectedRoute>
-        } />
-        <Route path="/login" element={<Login />} />
-      </Routes>
-    </Router>
+    <Routes>
+      <Route path="/" element={
+        <ProtectedRoute>
+          <Dashboard />
+        </ProtectedRoute>
+      } />
+      <Route path="/shift-plans" element={
+        <ProtectedRoute>
+          <ShiftPlanList />
+        </ProtectedRoute>
+      } />
+      <Route path="/shift-plans/new" element={
+        <ProtectedRoute roles={['admin', 'instandhalter']}>
+          <ShiftPlanCreate />
+        </ProtectedRoute>
+      } />
+      <Route path="/employees" element={
+        <ProtectedRoute roles={['admin', 'instandhalter']}>
+          <EmployeeManagement />
+        </ProtectedRoute>
+      } />
+      <Route path="/settings" element={
+        <ProtectedRoute roles={['admin']}>
+          <Settings />
+        </ProtectedRoute>
+      } />
+      <Route path="/help" element={
+        <ProtectedRoute>
+          <Help />
+        </ProtectedRoute>
+      } />
+      <Route path="/login" element={<Login />} />
+      <Route path="*" element={
+        <ProtectedRoute>
+          <Dashboard />
+        </ProtectedRoute>
+      } />
+    </Routes>
   );
 };
 
@@ -134,7 +122,10 @@ function App() {
   return (
     <NotificationProvider>
       <AuthProvider>
-        <AppContent />
+        <Router>
+          <NotificationContainer />
+          <AppContent />
+        </Router>
       </AuthProvider>
     </NotificationProvider>
   );

frontend/src/components/Layout/Footer.tsx

@@ -1,95 +1,186 @@
 // frontend/src/components/Layout/Footer.tsx
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 const Footer: React.FC = () => {
-  return (
-    <footer style={{
-      backgroundColor: '#34495e',
+  const styles = {
+    footer: {
+      background: '#2c3e50',
       color: 'white',
-      padding: '30px 20px',
-      marginTop: 'auto'
-    }}>
-      <div style={{
-        maxWidth: '1200px',
-        margin: '0 auto',
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-        gap: '30px'
-      }}>
-        {/* App Info */}
-        <div>
-          <h4 style={{ marginBottom: '15px' }}>🗓️ SchichtPlaner</h4>
-          <p style={{ fontSize: '14px', lineHeight: '1.5' }}>
-            Einfache Schichtplanung für Ihr Team. 
-            Optimierte Arbeitszeiten, transparente Planung.
+      marginTop: 'auto',
+    },
+    footerContent: {
+      maxWidth: '1200px',
+      margin: '0 auto',
+      padding: '2rem 20px',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+      gap: '2rem',
+    },
+    footerSection: {
+      display: 'flex',
+      flexDirection: 'column' as const,
+    },
+    footerSectionH3: {
+      marginBottom: '1rem',
+      color: '#ecf0f1',
+      fontSize: '1.2rem',
+    },
+    footerSectionH4: {
+      marginBottom: '1rem',
+      color: '#ecf0f1',
+      fontSize: '1.1rem',
+    },
+    footerLink: {
+      color: '#bdc3c7',
+      textDecoration: 'none',
+      marginBottom: '0.5rem',
+      transition: 'color 0.3s ease',
+    },
+    footerBottom: {
+      borderTop: '1px solid #34495e',
+      padding: '1rem 20px',
+      textAlign: 'center' as const,
+      color: '#95a5a6',
+    },
+  };
+
+  return (
+    <footer style={styles.footer}>
+      <div style={styles.footerContent}>
+        <div style={styles.footerSection}>
+          <h3 style={styles.footerSectionH3}>Schichtenplaner</h3>
+          <p style={{color: '#bdc3c7', margin: 0}}>
+            Professionelle Schichtplanung für Ihr Team. 
+            Effiziente Personalplanung für optimale Abläufe.
           </p>
         </div>
-
-        {/* Quick Links */}
-        <div>
-          <h4 style={{ marginBottom: '15px' }}>Schnellzugriff</h4>
-          <ul style={{ listStyle: 'none', padding: 0, fontSize: '14px' }}>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/help" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                📖 Anleitung
-              </Link>
-            </li>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/help/faq" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                ❓ Häufige Fragen
-              </Link>
-            </li>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/help/support" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                💬 Support
-              </Link>
-            </li>
-          </ul>
+        
+        <div style={styles.footerSection}>
+          <h4 style={styles.footerSectionH4}>Support & Hilfe</h4>
+          <a 
+            href="/help" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Hilfe & Anleitungen
+          </a>
+          <a 
+            href="/contact" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Kontakt & Support
+          </a>
+          <a 
+            href="/faq" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Häufige Fragen
+          </a>
         </div>
-
-        {/* Legal Links */}
-        <div>
-          <h4 style={{ marginBottom: '15px' }}>Rechtliches</h4>
-          <ul style={{ listStyle: 'none', padding: 0, fontSize: '14px' }}>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/impressum" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                📄 Impressum
-              </Link>
-            </li>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/datenschutz" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                🔒 Datenschutz
-              </Link>
-            </li>
-            <li style={{ marginBottom: '8px' }}>
-              <Link to="/agb" style={{ color: '#bdc3c7', textDecoration: 'none' }}>
-                📝 AGB
-              </Link>
-            </li>
-          </ul>
+        
+        <div style={styles.footerSection}>
+          <h4 style={styles.footerSectionH4}>Rechtliches</h4>
+          <a 
+            href="/privacy" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Datenschutzerklärung
+          </a>
+          <a 
+            href="/imprint" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Impressum
+          </a>
+          <a 
+            href="/terms" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Allgemeine Geschäftsbedingungen
+          </a>
         </div>
-
-        {/* Contact */}
-        <div>
-          <h4 style={{ marginBottom: '15px' }}>Kontakt</h4>
-          <div style={{ fontSize: '14px', color: '#bdc3c7' }}>
-            <p>📧 support@schichtplaner.de</p>
-            <p>📞 +49 123 456 789</p>
-            <p>🕘 Mo-Fr: 9:00-17:00</p>
-          </div>
+        
+        <div style={styles.footerSection}>
+          <h4 style={styles.footerSectionH4}>Unternehmen</h4>
+          <a 
+            href="/about" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Über uns
+          </a>
+          <a 
+            href="/features" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Funktionen
+          </a>
+          <a 
+            href="/pricing" 
+            style={styles.footerLink}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = '#3498db';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = '#bdc3c7';
+            }}
+          >
+            Preise
+          </a>
         </div>
       </div>
       
-      <div style={{
-        borderTop: '1px solid #2c3e50',
-        marginTop: '30px',
-        paddingTop: '20px',
-        textAlign: 'center',
-        fontSize: '12px',
-        color: '#95a5a6'
-      }}>
-        <p>© 2024 SchichtPlaner. Alle Rechte vorbehalten.</p>
+      <div style={styles.footerBottom}>
+        <p style={{margin: 0}}>
+          &copy; 2025 Schichtenplaner. Alle Rechte vorbehalten. | 
+          Made with ❤️ for efficient team management
+        </p>
       </div>
     </footer>
   );

frontend/src/components/Layout/Layout.module.css

@@ -0,0 +1,220 @@
+/* Layout.css - Professionelles Design */
+.layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 70px;
+}
+
+.logo h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+/* Desktop Navigation */
+.desktop-nav {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+.nav-link {
+  color: white;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.nav-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+/* User Menu */
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-info {
+  font-weight: 500;
+}
+
+.logout-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.logout-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Mobile Menu Button */
+.mobile-menu-btn {
+  display: none;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+/* Mobile Navigation */
+.mobile-nav {
+  display: none;
+  flex-direction: column;
+  background: white;
+  padding: 1rem;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.mobile-nav-link {
+  color: #333;
+  text-decoration: none;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+  transition: background-color 0.3s ease;
+}
+
+.mobile-nav-link:hover {
+  background-color: #f5f5f5;
+}
+
+.mobile-user-info {
+  padding: 1rem;
+  border-top: 1px solid #eee;
+  margin-top: 1rem;
+}
+
+.mobile-logout-btn {
+  background: #667eea;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-top: 0.5rem;
+  width: 100%;
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  background-color: #f8f9fa;
+  min-height: calc(100vh - 140px);
+}
+
+.content-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 20px;
+}
+
+/* Footer */
+.footer {
+  background: #2c3e50;
+  color: white;
+  margin-top: auto;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.footer-section h3,
+.footer-section h4 {
+  margin-bottom: 1rem;
+  color: #ecf0f1;
+}
+
+.footer-section a {
+  color: #bdc3c7;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 0.5rem;
+  transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+  color: #3498db;
+}
+
+.footer-bottom {
+  border-top: 1px solid #34495e;
+  padding: 1rem 20px;
+  text-align: center;
+  color: #95a5a6;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .desktop-nav,
+  .user-menu {
+    display: none;
+  }
+  
+  .mobile-menu-btn {
+    display: block;
+  }
+  
+  .mobile-nav {
+    display: flex;
+  }
+  
+  .header-content {
+    padding: 0 15px;
+  }
+  
+  .content-container {
+    padding: 1rem 15px;
+  }
+  
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .logo h1 {
+    font-size: 1.2rem;
+  }
+  
+  .content-container {
+    padding: 1rem 10px;
+  }
+}

frontend/src/components/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-// frontend/src/components/Layout/Layout.tsx
+// frontend/src/components/Layout/Layout.tsx - KORRIGIERT
 import React from 'react';
 import Navigation from './Navigation';
 import Footer from './Footer';
@@ -8,22 +8,32 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const styles = {
+    layout: {
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column' as const,
+    },
+    mainContent: {
+      flex: 1,
+      backgroundColor: '#f8f9fa',
+      minHeight: 'calc(100vh - 140px)',
+    },
+    contentContainer: {
+      maxWidth: '1200px',
+      margin: '0 auto',
+      padding: '2rem 20px',
+    },
+  };
+
   return (
-    <div style={{ 
-      minHeight: '100vh', 
-      display: 'flex', 
-      flexDirection: 'column' 
-    }}>
+    <div style={styles.layout}>
       <Navigation />
       
-      <main style={{ 
-        flex: 1, 
-        padding: '20px',
-        maxWidth: '1200px',
-        margin: '0 auto',
-        width: '100%'
-      }}>
-        {children}
+      <main style={styles.mainContent}>
+        <div style={styles.contentContainer}>
+          {children}
+        </div>
       </main>
       
       <Footer />

frontend/src/components/Layout/Navigation.tsx

@@ -1,188 +1,225 @@
 // frontend/src/components/Layout/Navigation.tsx
 import React, { useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 
 const Navigation: React.FC = () => {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const { user, logout, hasRole } = useAuth();
-  const location = useLocation();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-  const isActive = (path: string) => location.pathname === path;
+  const handleLogout = () => {
+    logout();
+    setIsMobileMenuOpen(false);
+  };
 
-const navigationItems = [
-    { path: '/', label: 'Dashboard', icon: '🏠', roles: ['admin', 'instandhalter', 'user'] },
-    { path: '/shift-plans', label: 'Schichtpläne', icon: '📅', roles: ['admin', 'instandhalter', 'user'] },
-    { path: '/employees', label: 'Mitarbeiter', icon: '👥', roles: ['admin', 'instandhalter'] },
-    { path: '/settings', label: 'Einstellungen', icon: '⚙️', roles: ['admin'] },
-    { path: '/help', label: 'Hilfe', icon: '❓', roles: ['admin', 'instandhalter', 'user'] },
-];
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  const navigationItems = [
+    { path: '/', label: '📊 Dashboard', roles: ['admin', 'instandhalter', 'user'] },
+    { path: '/shift-plans', label: '📅 Schichtpläne', roles: ['admin', 'instandhalter', 'user'] },
+    { path: '/employees', label: '👥 Mitarbeiter', roles: ['admin', 'instandhalter'] },
+    { path: '/help', label: '❓ Hilfe & Support', roles: ['admin', 'instandhalter', 'user'] },
+    { path: '/settings', label: '⚙️ Einstellungen', roles: ['admin'] },
+  ];
 
   const filteredNavigation = navigationItems.filter(item => 
     hasRole(item.roles)
   );
 
+  const styles = {
+    header: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      color: 'white',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+      position: 'sticky' as const,
+      top: 0,
+      zIndex: 1000,
+    },
+    headerContent: {
+      maxWidth: '1200px',
+      margin: '0 auto',
+      padding: '0 20px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: '70px',
+    },
+    logo: {
+      flex: 1,
+    },
+    logoH1: {
+      margin: 0,
+      fontSize: '1.5rem',
+      fontWeight: 700,
+    },
+    desktopNav: {
+      display: 'flex',
+      gap: '2rem',
+      alignItems: 'center',
+    },
+    navLink: {
+      color: 'white',
+      textDecoration: 'none',
+      padding: '0.5rem 1rem',
+      borderRadius: '6px',
+      transition: 'all 0.3s ease',
+      fontWeight: 500,
+    },
+    userMenu: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1rem',
+      marginLeft: '2rem',
+    },
+    userInfo: {
+      fontWeight: 500,
+    },
+    logoutBtn: {
+      background: 'rgba(255, 255, 255, 0.1)',
+      color: 'white',
+      border: '1px solid rgba(255, 255, 255, 0.3)',
+      padding: '0.5rem 1rem',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      transition: 'all 0.3s ease',
+    },
+    mobileMenuBtn: {
+      display: 'none',
+      background: 'none',
+      border: 'none',
+      color: 'white',
+      fontSize: '1.5rem',
+      cursor: 'pointer',
+      padding: '0.5rem',
+    },
+    mobileNav: {
+      display: isMobileMenuOpen ? 'flex' : 'none',
+      flexDirection: 'column' as const,
+      background: 'white',
+      padding: '1rem',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+    },
+    mobileNavLink: {
+      color: '#333',
+      textDecoration: 'none',
+      padding: '1rem',
+      borderBottom: '1px solid #eee',
+      transition: 'background-color 0.3s ease',
+    },
+    mobileUserInfo: {
+      padding: '1rem',
+      borderTop: '1px solid #eee',
+      marginTop: '1rem',
+      color: '#333',
+    },
+    mobileLogoutBtn: {
+      background: '#667eea',
+      color: 'white',
+      border: 'none',
+      padding: '0.5rem 1rem',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      marginTop: '0.5rem',
+      width: '100%',
+    },
+  };
+
   return (
-    <>
-      {/* Desktop Navigation */}
-      <nav style={{
-        backgroundColor: '#2c3e50',
-        padding: '0 20px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-      }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          maxWidth: '1200px',
-          margin: '0 auto'
-        }}>
-          {/* Logo/Brand */}
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Link 
-              to="/" 
-              style={{
-                color: 'white',
-                textDecoration: 'none',
-                fontSize: '20px',
-                fontWeight: 'bold',
-                padding: '15px 0'
+    <header style={styles.header}>
+      <div style={styles.headerContent}>
+        <div style={styles.logo}>
+          <h1 style={styles.logoH1}>🔄 Schichtenplaner</h1>
+        </div>
+        
+        {/* Desktop Navigation */}
+        <nav style={styles.desktopNav}>
+          {filteredNavigation.map((item) => (
+            <a 
+              key={item.path} 
+              href={item.path}
+              style={styles.navLink}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+                e.currentTarget.style.transform = 'translateY(-1px)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'none';
+                e.currentTarget.style.transform = 'translateY(0)';
+              }}
+              onClick={(e) => {
+                e.preventDefault();
+                window.location.href = item.path;
               }}
             >
-              🗓️ SchichtPlaner
-            </Link>
-          </div>
+              {item.label}
+            </a>
+          ))}
+        </nav>
 
-          {/* Desktop Menu */}
-          <div style={{ 
-            display: 'flex',
-            alignItems: 'center',
-            gap: '10px'
-          }}>
-            {filteredNavigation.map(item => (
-              <Link
-                key={item.path}
-                to={item.path}
-                style={{
-                  color: 'white',
-                  textDecoration: 'none',
-                  padding: '15px 20px',
-                  borderRadius: '4px',
-                  backgroundColor: isActive(item.path) ? '#3498db' : 'transparent',
-                  transition: 'background-color 0.2s',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-                onMouseEnter={(e) => {
-                  if (!isActive(item.path)) {
-                    e.currentTarget.style.backgroundColor = '#34495e';
-                  }
-                }}
-                onMouseLeave={(e) => {
-                  if (!isActive(item.path)) {
-                    e.currentTarget.style.backgroundColor = 'transparent';
-                  }
-                }}
-              >
-                <span>{item.icon}</span>
-                {item.label}
-              </Link>
-            ))}
-          </div>
+        {/* User Menu */}
+        <div style={styles.userMenu}>
+          <span style={styles.userInfo}>
+            {user?.name} ({user?.role})
+          </span>
+          <button 
+            onClick={handleLogout} 
+            style={styles.logoutBtn}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+            }}
+          >
+            Abmelden
+          </button>
+        </div>
 
-          {/* User Menu */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
-            <span style={{ color: 'white', fontSize: '14px' }}>
-              {user?.name} ({user?.role})
-            </span>
-            <button
-              onClick={logout}
-              style={{
-                background: 'none',
-                border: '1px solid #e74c3c',
-                color: '#e74c3c',
-                padding: '8px 16px',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                transition: 'all 0.2s'
-              }}
+        {/* Mobile Menu Button */}
+        <button 
+          style={styles.mobileMenuBtn}
+          onClick={toggleMobileMenu}
+        >
+          ☰
+        </button>
+      </div>
+
+      {/* Mobile Navigation */}
+      {isMobileMenuOpen && (
+        <nav style={styles.mobileNav}>
+          {filteredNavigation.map((item) => (
+            <a 
+              key={item.path} 
+              href={item.path}
+              style={styles.mobileNavLink}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = '#e74c3c';
-                e.currentTarget.style.color = 'white';
+                e.currentTarget.style.backgroundColor = '#f5f5f5';
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.backgroundColor = 'transparent';
-                e.currentTarget.style.color = '#e74c3c';
               }}
+              onClick={(e) => {
+                e.preventDefault();
+                window.location.href = item.path;
+                setIsMobileMenuOpen(false);
+              }}
+            >
+              {item.label}
+            </a>
+          ))}
+          <div style={styles.mobileUserInfo}>
+            <span>{user?.name} ({user?.role})</span>
+            <button 
+              onClick={handleLogout} 
+              style={styles.mobileLogoutBtn}
             >
               Abmelden
             </button>
           </div>
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            style={{
-              display: 'block',
-              background: 'none',
-              border: 'none',
-              color: 'white',
-              fontSize: '24px',
-              cursor: 'pointer'
-            }}
-          >
-            ☰
-          </button>
-        </div>
-
-        {/* Mobile Menu */}
-        {mobileMenuOpen && (
-          <div style={{
-            display: 'block',
-            backgroundColor: '#34495e',
-            padding: '10px 0'
-          }}>
-            {filteredNavigation.map(item => (
-              <Link
-                key={item.path}
-                to={item.path}
-                onClick={() => setMobileMenuOpen(false)}
-                style={{
-                  display: 'block',
-                  color: 'white',
-                  textDecoration: 'none',
-                  padding: '12px 20px',
-                  borderBottom: '1px solid #2c3e50'
-                }}
-              >
-                <span style={{ marginRight: '10px' }}>{item.icon}</span>
-                {item.label}
-              </Link>
-            ))}
-          </div>
-        )}
-      </nav>
-
-      {/* Breadcrumbs */}
-      <div style={{
-        backgroundColor: '#ecf0f1',
-        padding: '10px 20px',
-        borderBottom: '1px solid #bdc3c7',
-        fontSize: '14px'
-      }}>
-        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
-          {/* Breadcrumb wird dynamisch basierend auf der Route gefüllt */}
-          <span style={{ color: '#7f8c8d' }}>
-            🏠 Dashboard {location.pathname !== '/' && '>'} 
-            {location.pathname === '/shift-plans' && ' 📅 Schichtpläne'}
-            {location.pathname === '/employees' && ' 👥 Mitarbeiter'}
-            {location.pathname === '/settings' && ' ⚙️ Einstellungen'}
-            {location.pathname === '/help' && ' ❓ Hilfe'}
-          </span>
-        </div>
-      </div>
-    </>
+        </nav>
+      )}
+    </header>
   );
 };
 

frontend/src/contexts/AuthContext.tsx

@@ -1,4 +1,3 @@
-// frontend/src/contexts/AuthContext.tsx
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { Employee } from '../types/employee';
 
@@ -27,7 +26,7 @@ interface AuthProviderProps {
 export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const [user, setUser] = useState<Employee | null>(null);
   const [loading, setLoading] = useState(true);
-  const [needsSetup, setNeedsSetup] = useState(false);
+  const [needsSetup, setNeedsSetup] = useState<boolean | null>(null); // ← Start mit null
 
   // Token aus localStorage laden
   const getStoredToken = (): string | null => {
@@ -46,16 +45,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
 
   const checkSetupStatus = async (): Promise<void> => {
     try {
+      console.log('🔍 Checking setup status...');
       const response = await fetch('http://localhost:3002/api/setup/status');
       if (!response.ok) {
         throw new Error('Setup status check failed');
       }
       const data = await response.json();
-      console.log('Setup status response:', data);
+      console.log('✅ Setup status response:', data);
       setNeedsSetup(data.needsSetup === true);
     } catch (error) {
-      console.error('Error checking setup status:', error);
-      setNeedsSetup(false);
+      console.error('❌ Error checking setup status:', error);
+      setNeedsSetup(true); // Bei Fehler Setup annehmen
     }
   };
 
@@ -65,7 +65,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       console.log('🔄 Refreshing user, token exists:', !!token);
       
       if (!token) {
-        setLoading(false);
+        console.log('ℹ️ No token found, user not logged in');
+        setUser(null);
         return;
       }
 
@@ -85,11 +86,9 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
         setUser(null);
       }
     } catch (error) {
-      console.error('Error refreshing user:', error);
+      console.error('❌ Error refreshing user:', error);
       removeStoredToken();
       setUser(null);
-    } finally {
-      setLoading(false);
     }
   };
 
@@ -117,7 +116,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       setStoredToken(data.token);
       setUser(data.user);
     } catch (error) {
-      console.error('Login error:', error);
+      console.error('❌ Login error:', error);
       throw error;
     }
   };
@@ -129,24 +128,22 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   };
 
   const hasRole = (roles: string[]): boolean => {
-    console.log('🔐 Checking roles - User:', user, 'Required roles:', roles);
-    
-    if (!user) {
-      console.log('❌ No user found');
-      return false;
-    }
-    
-    const hasRequiredRole = roles.includes(user.role);
-    console.log('✅ User role:', user.role, 'Has required role:', hasRequiredRole);
-    
-    return hasRequiredRole;
+    if (!user) return false;
+    return roles.includes(user.role);
   };
 
   useEffect(() => {
     const initializeAuth = async () => {
       console.log('🚀 Initializing authentication...');
-      await checkSetupStatus();
-      await refreshUser();
+      try {
+        await checkSetupStatus();
+        await refreshUser();
+      } catch (error) {
+        console.error('❌ Error during auth initialization:', error);
+      } finally {
+        setLoading(false);
+        console.log('✅ Auth initialization complete - needsSetup:', needsSetup, 'user:', user);
+      }
     };
 
     initializeAuth();
@@ -159,19 +156,10 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     hasRole,
     loading,
     refreshUser,
-    needsSetup,
+    needsSetup: needsSetup === null ? true : needsSetup, // Falls null, true annehmen
     checkSetupStatus,
   };
 
-  useEffect(() => {
-    console.log('🔄 Auth state changed - user:', user, 'loading:', loading);
-  }, [user, loading]);
-
-  useEffect(() => {
-    const token = getStoredToken();
-    console.log('💾 Stored token on mount:', token ? 'Exists' : 'None');
-  }, []);
-
   return (
     <AuthContext.Provider value={value}>
       {children}

frontend/src/pages/Auth/Login.tsx

@@ -1,109 +1,140 @@
 // frontend/src/pages/Auth/Login.tsx - KORRIGIERT
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
+import { useNotification } from '../../contexts/NotificationContext';
 
 const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  
-  const { login, user } = useAuth(); // user hinzugefügt für Debugging
+  const { login, user } = useAuth();
+  const { showNotification } = useNotification();
+  const navigate = useNavigate();
 
-  console.log('🔍 Login Component - Current user:', user);
+  // 🔥 NEU: Redirect wenn bereits eingeloggt
+  useEffect(() => {
+    if (user) {
+      console.log('✅ User already logged in, redirecting to dashboard');
+      navigate('/');
+    }
+  }, [user, navigate]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
     setLoading(true);
 
     try {
-      console.log('🚀 Starting login process...');
+      console.log('🔐 Attempting login for:', email);
       await login({ email, password });
-      console.log('✅ Login process completed');
       
-      // Navigation passiert automatisch durch AuthContext
+      // 🔥 WICHTIG: Erfolgsmeldung und Redirect
+      console.log('✅ Login successful, redirecting to dashboard');
+      showNotification({
+        type: 'success',
+        title: 'Erfolgreich angemeldet',
+        message: `Willkommen zurück!`
+      });
       
-    } catch (err: any) {
-      console.error('❌ Login error:', err);
-      setError(err.message || 'Login fehlgeschlagen');
+      // Navigiere zur Startseite
+      navigate('/');
+      
+    } catch (error: any) {
+      console.error('❌ Login error:', error);
+      showNotification({
+        type: 'error',
+        title: 'Anmeldung fehlgeschlagen',
+        message: error.message || 'Bitte überprüfen Sie Ihre Anmeldedaten'
+      });
     } finally {
       setLoading(false);
     }
   };
 
+  // Wenn bereits eingeloggt, zeige Ladeanzeige
+  if (user) {
+    return (
+      <div style={{ textAlign: 'center', padding: '40px' }}>
+        <div>⏳ Weiterleiten...</div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ 
-      maxWidth: '400px', 
-      margin: '100px auto', 
-      padding: '20px',
-      border: '1px solid #ddd',
-      borderRadius: '8px'
+      display: 'flex', 
+      justifyContent: 'center', 
+      alignItems: 'center', 
+      minHeight: '100vh',
+      backgroundColor: '#f5f5f5'
     }}>
-      <h2>Anmelden</h2>
-      
-      {error && (
-        <div style={{ 
-          color: 'red', 
-          backgroundColor: '#ffe6e6',
-          padding: '10px',
-          borderRadius: '4px',
-          marginBottom: '15px'
-        }}>
-          <strong>Fehler:</strong> {error}
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>
-            E-Mail:
+      <form onSubmit={handleSubmit} style={{
+        backgroundColor: 'white',
+        padding: '40px',
+        borderRadius: '8px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        width: '100%',
+        maxWidth: '400px'
+      }}>
+        <h2 style={{ textAlign: 'center', marginBottom: '30px' }}>Anmeldung</h2>
+        
+        <div style={{ marginBottom: '20px' }}>
+          <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+            E-Mail
           </label>
           <input
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
-            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+            style={{
+              width: '100%',
+              padding: '10px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '16px'
+            }}
+            placeholder="ihre-email@example.com"
           />
         </div>
 
-        <div style={{ marginBottom: '15px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>
-            Passwort:
+        <div style={{ marginBottom: '30px' }}>
+          <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+            Passwort
           </label>
           <input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            style={{ width: '100%', padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
+            style={{
+              width: '100%',
+              padding: '10px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+              fontSize: '16px'
+            }}
+            placeholder="Ihr Passwort"
           />
         </div>
 
-        <button 
-          type="submit" 
+        <button
+          type="submit"
           disabled={loading}
-          style={{ 
-            width: '100%', 
-            padding: '10px', 
+          style={{
+            width: '100%',
+            padding: '12px',
             backgroundColor: loading ? '#ccc' : '#007bff',
             color: 'white',
             border: 'none',
             borderRadius: '4px',
+            fontSize: '16px',
             cursor: loading ? 'not-allowed' : 'pointer'
           }}
         >
-          {loading ? 'Anmeldung...' : 'Anmelden'}
+          {loading ? '⏳ Wird angemeldet...' : 'Anmelden'}
         </button>
       </form>
-
-      <div style={{ marginTop: '15px', textAlign: 'center' }}>
-        <p><strong>Test Accounts:</strong></p>
-        <p>admin@schichtplan.de / admin123</p>
-        <p>instandhalter@schichtplan.de / instandhalter123</p>
-        <p>user@schichtplan.de / user123</p>
-      </div>
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-// frontend/src/pages/Employees/components/EmployeeForm.tsx
+// frontend/src/pages/Employees/components/EmployeeForm.tsx - VEREINFACHT
 import React, { useState, useEffect } from 'react';
 import { Employee, CreateEmployeeRequest, UpdateEmployeeRequest } from '../../../types/employee';
 import { employeeService } from '../../../services/employeeService';
@@ -18,6 +18,28 @@ const ROLE_OPTIONS = [
   { value: 'admin', label: 'Administrator', description: 'Voller Zugriff auf alle Funktionen' }
 ] as const;
 
+// Mitarbeiter Typen Definition
+const EMPLOYEE_TYPE_OPTIONS = [
+  { 
+    value: 'chef', 
+    label: '👨‍💼 Chef/Administrator', 
+    description: 'Vollzugriff auf alle Funktionen und Mitarbeiterverwaltung',
+    color: '#e74c3c'
+  },
+  { 
+    value: 'erfahren', 
+    label: '👴 Erfahren', 
+    description: 'Langjährige Erfahrung, kann komplexe Aufgaben übernehmen',
+    color: '#3498db'
+  },
+  { 
+    value: 'neuling', 
+    label: '👶 Neuling', 
+    description: 'Benötigt Einarbeitung und Unterstützung',
+    color: '#27ae60'
+  }
+] as const;
+
 const EmployeeForm: React.FC<EmployeeFormProps> = ({
   mode,
   employee,
@@ -29,8 +51,9 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     email: '',
     password: '',
     role: 'user' as 'admin' | 'instandhalter' | 'user',
-    phone: '',
-    department: '',
+    employeeType: 'neuling' as 'chef' | 'neuling' | 'erfahren',
+    isSufficientlyIndependent: false,
+    notes: '',
     isActive: true
   });
   const [loading, setLoading] = useState(false);
@@ -42,16 +65,17 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
       setFormData({
         name: employee.name,
         email: employee.email,
-        password: '', // Passwort wird beim Editieren nicht angezeigt
+        password: '',
         role: employee.role,
-        phone: employee.phone || '',
-        department: employee.department || '',
+        employeeType: employee.employeeType,
+        isSufficientlyIndependent: employee.isSufficientlyIndependent,
+        notes: employee.notes || '',
         isActive: employee.isActive
       });
     }
   }, [mode, employee]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     const { name, value, type } = e.target;
     setFormData(prev => ({
       ...prev,
@@ -59,7 +83,6 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     }));
   };
 
-  // NEU: Checkbox für Rollen
   const handleRoleChange = (roleValue: 'admin' | 'instandhalter' | 'user') => {
     setFormData(prev => ({
       ...prev,
@@ -67,6 +90,16 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     }));
   };
 
+  const handleEmployeeTypeChange = (employeeType: 'chef' | 'neuling' | 'erfahren') => {
+    setFormData(prev => ({
+      ...prev,
+      employeeType,
+      // Automatische Werte basierend auf Typ
+      isSufficientlyIndependent: employeeType === 'chef' ? true : 
+                                employeeType === 'erfahren' ? true : false
+    }));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -79,17 +112,19 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
           email: formData.email,
           password: formData.password,
           role: formData.role,
-          phone: formData.phone || undefined,
-          department: formData.department || undefined
+          employeeType: formData.employeeType,
+          isSufficientlyIndependent: formData.isSufficientlyIndependent,
+          notes: formData.notes || undefined
         };
         await employeeService.createEmployee(createData);
       } else if (employee) {
         const updateData: UpdateEmployeeRequest = {
           name: formData.name,
           role: formData.role,
+          employeeType: formData.employeeType,
+          isSufficientlyIndependent: formData.isSufficientlyIndependent,
           isActive: formData.isActive,
-          phone: formData.phone || undefined,
-          department: formData.department || undefined
+          notes: formData.notes || undefined
         };
         await employeeService.updateEmployee(employee.id, updateData);
       }
@@ -111,22 +146,21 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
     return formData.name.trim() && formData.email.trim();
   };
 
-  // Bestimme welche Rollen der aktuelle Benutzer vergeben darf
   const getAvailableRoles = () => {
     if (hasRole(['admin'])) {
-      return ROLE_OPTIONS; // Admins können alle Rollen vergeben
+      return ROLE_OPTIONS;
     }
     if (hasRole(['instandhalter'])) {
-      return ROLE_OPTIONS.filter(role => role.value !== 'admin'); // Instandhalter können keine Admins erstellen
+      return ROLE_OPTIONS.filter(role => role.value !== 'admin');
     }
-    return ROLE_OPTIONS.filter(role => role.value === 'user'); // Normale User können gar nichts (sollte nicht vorkommen)
+    return ROLE_OPTIONS.filter(role => role.value === 'user');
   };
 
   const availableRoles = getAvailableRoles();
 
   return (
     <div style={{
-      maxWidth: '600px',
+      maxWidth: '700px',
       margin: '0 auto',
       backgroundColor: 'white',
       padding: '30px',
@@ -158,179 +192,119 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
 
       <form onSubmit={handleSubmit}>
         <div style={{ display: 'grid', gap: '20px' }}>
-          {/* Name */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '8px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              Vollständiger Name *
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-              placeholder="Max Mustermann"
-            />
-          </div>
+          
+          {/* Grundinformationen */}
+          <div style={{
+            padding: '20px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            border: '1px solid #e9ecef'
+          }}>
+            <h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>📋 Grundinformationen</h3>
+            
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
+              <div>
+                <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
+                  Vollständiger Name *
+                </label>
+                <input
+                  type="text"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  required
+                  style={{
+                    width: '100%',
+                    padding: '10px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    fontSize: '16px'
+                  }}
+                  placeholder="Max Mustermann"
+                />
+              </div>
 
-          {/* E-Mail */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '8px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              E-Mail Adresse *
-            </label>
-            <input
-              type="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-              placeholder="max.mustermann@example.com"
-            />
-          </div>
-
-          {/* Passwort (nur bei Erstellung) */}
-          {mode === 'create' && (
-            <div>
-              <label style={{ 
-                display: 'block', 
-                marginBottom: '8px', 
-                fontWeight: 'bold',
-                color: '#2c3e50'
-              }}>
-                Passwort *
-              </label>
-              <input
-                type="password"
-                name="password"
-                value={formData.password}
-                onChange={handleChange}
-                required
-                minLength={6}
-                style={{
-                  width: '100%',
-                  padding: '10px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '16px'
-                }}
-                placeholder="Mindestens 6 Zeichen"
-              />
-              <div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
-                Das Passwort muss mindestens 6 Zeichen lang sein.
+              <div>
+                <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
+                  E-Mail Adresse *
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                  style={{
+                    width: '100%',
+                    padding: '10px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    fontSize: '16px'
+                  }}
+                  placeholder="max.mustermann@example.com"
+                />
               </div>
             </div>
-          )}
 
-          
-
-          {/* Telefon */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '8px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              Telefonnummer
-            </label>
-            <input
-              type="tel"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-              placeholder="+49 123 456789"
-            />
+            {mode === 'create' && (
+              <div style={{ marginTop: '15px' }}>
+                <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
+                  Passwort *
+                </label>
+                <input
+                  type="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  required
+                  minLength={6}
+                  style={{
+                    width: '100%',
+                    padding: '10px',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    fontSize: '16px'
+                  }}
+                  placeholder="Mindestens 6 Zeichen"
+                />
+                <div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
+                  Das Passwort muss mindestens 6 Zeichen lang sein.
+                </div>
+              </div>
+            )}
           </div>
 
-          {/* Abteilung */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '8px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              Abteilung
-            </label>
-            <input
-              type="text"
-              name="department"
-              value={formData.department}
-              onChange={handleChange}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '16px'
-              }}
-              placeholder="z.B. Produktion, Logistik, Verwaltung"
-            />
-          </div>
-
-          {/* NEU: Rollen als Checkboxes */}
-          <div>
-            <label style={{ 
-              display: 'block', 
-              marginBottom: '12px', 
-              fontWeight: 'bold',
-              color: '#2c3e50'
-            }}>
-              Rolle *
-            </label>
+          {/* Mitarbeiter Kategorie */}
+          <div style={{
+            padding: '20px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            border: '1px solid #e9ecef'
+          }}>
+            <h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>👥 Mitarbeiter Kategorie</h3>
+            
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              {availableRoles.map(role => (
+              {EMPLOYEE_TYPE_OPTIONS.map(type => (
                 <div 
-                  key={role.value}
+                  key={type.value}
                   style={{
                     display: 'flex',
                     alignItems: 'flex-start',
-                    padding: '5px',
-                    border: `2px solid ${formData.role === role.value ? '#3498db' : '#e0e0e0'}`,
+                    padding: '15px',
+                    border: `2px solid ${formData.employeeType === type.value ? type.color : '#e0e0e0'}`,
                     borderRadius: '8px',
-                    backgroundColor: formData.role === role.value ? '#f8fafc' : 'white',
+                    backgroundColor: formData.employeeType === type.value ? '#f8fafc' : 'white',
                     cursor: 'pointer',
                     transition: 'all 0.2s'
                   }}
-                  onClick={() => handleRoleChange(role.value)}
+                  onClick={() => handleEmployeeTypeChange(type.value)}
                 >
                   <input
                     type="radio"
-                    name="role"
-                    value={role.value}
-                    checked={formData.role === role.value}
-                    onChange={() => handleRoleChange(role.value)}
+                    name="employeeType"
+                    value={type.value}
+                    checked={formData.employeeType === type.value}
+                    onChange={() => handleEmployeeTypeChange(type.value)}
                     style={{
                       marginRight: '12px',
                       marginTop: '2px',
@@ -342,53 +316,180 @@ const EmployeeForm: React.FC<EmployeeFormProps> = ({
                     <div style={{ 
                       fontWeight: 'bold', 
                       color: '#2c3e50',
-                      marginBottom: '4px'
+                      marginBottom: '4px',
+                      fontSize: '16px'
                     }}>
-                      {role.label}
+                      {type.label}
                     </div>
                     <div style={{ 
                       fontSize: '14px', 
                       color: '#7f8c8d',
                       lineHeight: '1.4'
                     }}>
-                      {role.description}
+                      {type.description}
                     </div>
                   </div>
-                  {/* Role Badge */}
                   <div style={{
-                    padding: '4px 8px',
-                    backgroundColor: 
-                      role.value === 'admin' ? '#e74c3c' :
-                      role.value === 'instandhalter' ? '#3498db' : '#27ae60',
+                    padding: '6px 12px',
+                    backgroundColor: type.color,
                     color: 'white',
-                    borderRadius: '12px',
+                    borderRadius: '15px',
                     fontSize: '12px',
                     fontWeight: 'bold'
                   }}>
-                    {role.value.toUpperCase()}
+                    {type.value.toUpperCase()}
                   </div>
                 </div>
               ))}
             </div>
+          </div>
+
+          {/* Eigenständigkeit */}
+          <div style={{
+            padding: '20px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            border: '1px solid #e9ecef'
+          }}>
+            <h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>🎯 Eigenständigkeit</h3>
             
-            {/* Info über Berechtigungen */}
             <div style={{ 
-              marginTop: '10px', 
-              padding: '10px',
-              backgroundColor: '#e8f4fd',
-              border: '1px solid #b6d7e8',
-              borderRadius: '4px',
-              fontSize: '12px',
-              color: '#2c3e50'
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '15px',
+              padding: '15px',
+              border: '1px solid #e0e0e0',
+              borderRadius: '6px',
+              backgroundColor: '#fff'
             }}>
-              <strong>Info:</strong> { 
-                formData.role === 'admin' ? 'Administratoren haben vollen Zugriff auf alle Funktionen.' :
-                formData.role === 'instandhalter' ? 'Instandhalter können Schichtpläne erstellen und Mitarbeiter verwalten.' :
-                'Mitarbeiter können ihre eigenen Schichten und Verfügbarkeiten einsehen.'
-              }
+              <input
+                type="checkbox"
+                name="isSufficientlyIndependent"
+                id="isSufficientlyIndependent"
+                checked={formData.isSufficientlyIndependent}
+                onChange={handleChange}
+                disabled={formData.employeeType === 'chef'}
+                style={{ 
+                  width: '20px', 
+                  height: '20px',
+                  opacity: formData.employeeType === 'chef' ? 0.5 : 1
+                }}
+              />
+              <div style={{ flex: 1 }}>
+                <label htmlFor="isSufficientlyIndependent" style={{ 
+                  fontWeight: 'bold', 
+                  color: '#2c3e50', 
+                  display: 'block',
+                  opacity: formData.employeeType === 'chef' ? 0.5 : 1
+                }}>
+                  Als ausreichend eigenständig markieren
+                  {formData.employeeType === 'chef' && ' (Automatisch für Chefs)'}
+                </label>
+                <div style={{ fontSize: '14px', color: '#7f8c8d' }}>
+                  {formData.employeeType === 'chef' 
+                    ? 'Chefs sind automatisch als eigenständig markiert.'
+                    : 'Dieser Mitarbeiter kann komplexe Aufgaben eigenständig lösen und benötigt keine ständige Betreuung.'
+                  }
+                </div>
+              </div>
+              <div style={{
+                padding: '6px 12px',
+                backgroundColor: formData.isSufficientlyIndependent ? '#27ae60' : '#e74c3c',
+                color: 'white',
+                borderRadius: '15px',
+                fontSize: '12px',
+                fontWeight: 'bold',
+                opacity: formData.employeeType === 'chef' ? 0.7 : 1
+              }}>
+                {formData.isSufficientlyIndependent ? 'EIGENSTÄNDIG' : 'BETREUUNG'}
+              </div>
             </div>
           </div>
 
+          {/* Bemerkungen */}
+          <div style={{
+            padding: '20px',
+            backgroundColor: '#f8f9fa',
+            borderRadius: '8px',
+            border: '1px solid #e9ecef'
+          }}>
+            <h3 style={{ margin: '0 0 15px 0', color: '#495057' }}>ℹ️ Bemerkungen</h3>
+            
+            <div>
+              <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold', color: '#2c3e50' }}>
+                Notizen & Hinweise
+              </label>
+              <textarea
+                name="notes"
+                value={formData.notes}
+                onChange={handleChange}
+                rows={3}
+                style={{
+                  width: '100%',
+                  padding: '10px',
+                  border: '1px solid #ddd',
+                  borderRadius: '4px',
+                  fontSize: '16px',
+                  resize: 'vertical'
+                }}
+                placeholder="Besondere Fähigkeiten, Einschränkungen, Schulungen, wichtige Hinweise..."
+              />
+              <div style={{ fontSize: '12px', color: '#7f8c8d', marginTop: '5px' }}>
+                Optionale Notizen für interne Zwecke
+              </div>
+            </div>
+          </div>
+
+          {/* Systemrolle (nur für Admins) */}
+          {hasRole(['admin']) && (
+            <div style={{
+              padding: '20px',
+              backgroundColor: '#fff3cd',
+              borderRadius: '8px',
+              border: '1px solid #ffeaa7'
+            }}>
+              <h3 style={{ margin: '0 0 15px 0', color: '#856404' }}>⚙️ Systemrolle</h3>
+              
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                {availableRoles.map(role => (
+                  <div 
+                    key={role.value}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      padding: '12px',
+                      border: `2px solid ${formData.role === role.value ? '#f39c12' : '#e0e0e0'}`,
+                      borderRadius: '6px',
+                      backgroundColor: formData.role === role.value ? '#fef9e7' : 'white',
+                      cursor: 'pointer'
+                    }}
+                    onClick={() => handleRoleChange(role.value)}
+                  >
+                    <input
+                      type="radio"
+                      name="role"
+                      value={role.value}
+                      checked={formData.role === role.value}
+                      onChange={() => handleRoleChange(role.value)}
+                      style={{
+                        marginRight: '10px',
+                        marginTop: '2px'
+                      }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontWeight: 'bold', color: '#2c3e50' }}>
+                        {role.label}
+                      </div>
+                      <div style={{ fontSize: '14px', color: '#7f8c8d' }}>
+                        {role.description}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* Aktiv Status (nur beim Bearbeiten) */}
           {mode === 'edit' && (
             <div style={{ 

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

@@ -6,12 +6,11 @@ import { useAuth } from '../../../contexts/AuthContext';
 interface EmployeeListProps {
   employees: Employee[];
   onEdit: (employee: Employee) => void;
-  onDelete: (employee: Employee) => void; // Jetzt mit Employee-Objekt
+  onDelete: (employee: Employee) => void;
   onManageAvailability: (employee: Employee) => void;
   currentUserRole: 'admin' | 'instandhalter';
 }
 
-
 const EmployeeList: React.FC<EmployeeListProps> = ({
   employees,
   onEdit,
@@ -34,7 +33,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
       return (
         employee.name.toLowerCase().includes(term) ||
         employee.email.toLowerCase().includes(term) ||
-        employee.department?.toLowerCase().includes(term) ||
+        employee.employeeType.toLowerCase().includes(term) ||
         employee.role.toLowerCase().includes(term)
       );
     }
@@ -51,13 +50,28 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
     }
   };
 
+  const getEmployeeTypeBadge = (type: string) => {
+    switch (type) {
+      case 'chef': return { text: '👨‍💼 CHEF', color: '#e74c3c', bgColor: '#fadbd8' };
+      case 'erfahren': return { text: '👴 ERFAHREN', color: '#3498db', bgColor: '#d6eaf8' };
+      case 'neuling': return { text: '👶 NEULING', color: '#27ae60', bgColor: '#d5f4e6' };
+      default: return { text: 'UNBEKANNT', color: '#95a5a6', bgColor: '#ecf0f1' };
+    }
+  };
+
+  const getIndependenceBadge = (isIndependent: boolean) => {
+    return isIndependent 
+      ? { text: '✅ Eigenständig', color: '#27ae60', bgColor: '#d5f4e6' }
+      : { text: '❌ Betreuung', color: '#e74c3c', bgColor: '#fadbd8' };
+  };
+
   const getStatusBadge = (isActive: boolean) => {
     return isActive 
       ? { text: 'Aktiv', color: '#27ae60', bgColor: '#d5f4e6' }
       : { text: 'Inaktiv', color: '#e74c3c', bgColor: '#fadbd8' };
   };
 
-  // NEU: Kann Benutzer löschen?
+  // Kann Benutzer löschen?
   const canDeleteEmployee = (employee: Employee): boolean => {
     // Nur Admins können löschen
     if (currentUserRole !== 'admin') return false;
@@ -71,7 +85,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
     return true;
   };
 
-  // NEU: Kann Benutzer bearbeiten?
+  // Kann Benutzer bearbeiten?
   const canEditEmployee = (employee: Employee): boolean => {
     // Admins können alle bearbeiten
     if (currentUserRole === 'admin') return true;
@@ -134,7 +148,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
           <label style={{ fontWeight: 'bold', color: '#2c3e50' }}>Suchen:</label>
           <input
             type="text"
-            placeholder="Nach Name, E-Mail oder Abteilung suchen..."
+            placeholder="Nach Name, E-Mail oder Typ suchen..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             style={{
@@ -152,7 +166,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         </div>
       </div>
 
-      {/* Mitarbeiter Tabelle - SYMMETRISCH KORRIGIERT */}
+      {/* Mitarbeiter Tabelle */}
       <div style={{
         backgroundColor: 'white',
         borderRadius: '8px',
@@ -160,10 +174,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         overflow: 'hidden',
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
       }}>
-        {/* Tabellen-Header - SYMMETRISCH */}
+        {/* Tabellen-Header */}
         <div style={{
           display: 'grid',
-          gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Feste Breite für Aktionen
+          gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 1fr 120px',
           gap: '15px',
           padding: '15px 20px',
           backgroundColor: '#f8f9fa',
@@ -173,7 +187,8 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
           alignItems: 'center'
         }}>
           <div>Name & E-Mail</div>
-          <div>Abteilung</div>
+          <div>Typ</div>
+          <div style={{ textAlign: 'center' }}>Eigenständigkeit</div>
           <div style={{ textAlign: 'center' }}>Rolle</div>
           <div style={{ textAlign: 'center' }}>Status</div>
           <div style={{ textAlign: 'center' }}>Letzter Login</div>
@@ -181,7 +196,10 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         </div>
 
         {filteredEmployees.map(employee => {
-          const status = getStatusBadge(employee.isActive ?? true);
+          const employeeType = getEmployeeTypeBadge(employee.employeeType);
+          const independence = getIndependenceBadge(employee.isSufficientlyIndependent);
+          const roleColor = getRoleBadgeColor(employee.role);
+          const status = getStatusBadge(employee.isActive);
           const canEdit = canEditEmployee(employee);
           const canDelete = canDeleteEmployee(employee);
           
@@ -190,7 +208,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
               key={employee.id}
               style={{
                 display: 'grid',
-                gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Gleiche Spalten wie Header
+                gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 1fr 120px',
                 gap: '15px',
                 padding: '15px 20px',
                 borderBottom: '1px solid #f0f0f0',
@@ -217,18 +235,45 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 </div>
               </div>
 
-              {/* Abteilung */}
-              <div style={{ color: '#666' }}>
-                {employee.department || (
-                  <span style={{ color: '#999', fontStyle: 'italic' }}>Nicht zugewiesen</span>
-                )}
-              </div>
-
-              {/* Rolle - ZENTRIERT */}
+              {/* Mitarbeiter Typ */}
               <div style={{ textAlign: 'center' }}>
                 <span
                   style={{
-                    backgroundColor: getRoleBadgeColor(employee.role),
+                    backgroundColor: employeeType.bgColor,
+                    color: employeeType.color,
+                    padding: '6px 12px',
+                    borderRadius: '15px',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    display: 'inline-block'
+                  }}
+                >
+                  {employeeType.text}
+                </span>
+              </div>
+
+              {/* Eigenständigkeit */}
+              <div style={{ textAlign: 'center' }}>
+                <span
+                  style={{
+                    backgroundColor: independence.bgColor,
+                    color: independence.color,
+                    padding: '6px 12px',
+                    borderRadius: '15px',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    display: 'inline-block'
+                  }}
+                >
+                  {independence.text}
+                </span>
+              </div>
+
+              {/* Rolle */}
+              <div style={{ textAlign: 'center' }}>
+                <span
+                  style={{
+                    backgroundColor: roleColor,
                     color: 'white',
                     padding: '6px 12px',
                     borderRadius: '15px',
@@ -243,7 +288,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 </span>
               </div>
 
-              {/* Status - ZENTRIERT */}
+              {/* Status */}
               <div style={{ textAlign: 'center' }}>
                 <span
                   style={{
@@ -261,7 +306,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 </span>
               </div>
 
-              {/* Letzter Login - ZENTRIERT */}
+              {/* Letzter Login */}
               <div style={{ textAlign: 'center', fontSize: '14px', color: '#666' }}>
                 {employee.lastLogin 
                   ? new Date(employee.lastLogin).toLocaleDateString('de-DE')
@@ -269,14 +314,14 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                 }
               </div>
 
-              {/* Aktionen - ZENTRIERT und SYMMETRISCH */}
+              {/* Aktionen */}
               <div style={{ 
                 display: 'flex', 
                 gap: '8px', 
                 justifyContent: 'center',
                 flexWrap: 'wrap'
               }}>
-                {/* Verfügbarkeit Button - immer sichtbar für berechtigte */}
+                {/* Verfügbarkeit Button */}
                 {(currentUserRole === 'admin' || currentUserRole === 'instandhalter') && (
                   <button
                     onClick={() => onManageAvailability(employee)}
@@ -318,7 +363,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                   </button>
                 )}
 
-                {/* Löschen Button - NUR FÜR ADMINS */}
+                {/* Löschen Button */}
                 {canDelete && (
                   <button
                     onClick={() => onDelete(employee)}
@@ -333,13 +378,13 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                       minWidth: '32px',
                       height: '32px'
                     }}
-                    title="Mitarbeiter deaktivieren"
+                    title="Mitarbeiter löschen"
                   >
                     🗑️
                   </button>
                 )}
 
-                {/* Platzhalter für Symmetrie wenn keine Aktionen */}
+                {/* Platzhalter für Symmetrie */}
                 {!canEdit && !canDelete && (currentUserRole !== 'admin' && currentUserRole !== 'instandhalter') && (
                   <div style={{ width: '32px', height: '32px' }}></div>
                 )}
@@ -349,7 +394,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         })}
       </div>
 
-      {/* NEU: Info-Box über Berechtigungen */}
+      {/* Info-Box über Berechtigungen */}
       <div style={{
         marginTop: '20px',
         padding: '15px',
@@ -367,6 +412,53 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
           <li>Benutzer können sich <strong>nicht selbst löschen</strong></li>
         </ul>
       </div>
+
+      {/* Legende für Mitarbeiter Typen */}
+      <div style={{
+        marginTop: '20px',
+        padding: '15px',
+        backgroundColor: '#f8f9fa',
+        border: '1px solid #e9ecef',
+        borderRadius: '6px',
+        fontSize: '14px'
+      }}>
+        <strong>🎯 Legende Mitarbeiter Typen:</strong>
+        <div style={{ display: 'flex', gap: '15px', marginTop: '10px', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <span style={{
+              backgroundColor: '#fadbd8',
+              color: '#e74c3c',
+              padding: '4px 8px',
+              borderRadius: '12px',
+              fontSize: '11px',
+              fontWeight: 'bold'
+            }}>👨‍💼 CHEF</span>
+            <span style={{ fontSize: '12px', color: '#666' }}>Vollzugriff</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <span style={{
+              backgroundColor: '#d6eaf8',
+              color: '#3498db',
+              padding: '4px 8px',
+              borderRadius: '12px',
+              fontSize: '11px',
+              fontWeight: 'bold'
+            }}>👴 ERFAHREN</span>
+            <span style={{ fontSize: '12px', color: '#666' }}>Langjährige Erfahrung</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <span style={{
+              backgroundColor: '#d5f4e6',
+              color: '#27ae60',
+              padding: '4px 8px',
+              borderRadius: '12px',
+              fontSize: '11px',
+              fontWeight: 'bold'
+            }}>👶 NEULING</span>
+            <span style={{ fontSize: '12px', color: '#666' }}>Benötigt Einarbeitung</span>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/pages/Setup/Setup.tsx

@@ -1,6 +1,5 @@
-// frontend/src/pages/Setup/Setup.tsx
+// frontend/src/pages/Setup/Setup.tsx - KORRIGIERT
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../contexts/AuthContext';
 
 const Setup: React.FC = () => {
@@ -8,14 +7,11 @@ const Setup: React.FC = () => {
   const [formData, setFormData] = useState({
     password: '',
     confirmPassword: '',
-    name: '',
-    phone: '',
-    department: ''
+    name: ''
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const navigate = useNavigate();
-  const { login, checkSetupStatus } = useAuth();
+  const { checkSetupStatus } = useAuth();
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -66,12 +62,10 @@ const Setup: React.FC = () => {
 
       const payload = {
         password: formData.password,
-        name: formData.name,
-        ...(formData.phone ? { phone: formData.phone } : {}),
-        ...(formData.department ? { department: formData.department } : {})
+        name: formData.name
       };
 
-      console.log('🚀 Sending setup request with payload:', payload);
+      console.log('🚀 Sending setup request...');
 
       const response = await fetch('http://localhost:3002/api/setup/admin', {
         method: 'POST',
@@ -81,66 +75,110 @@ const Setup: React.FC = () => {
         body: JSON.stringify(payload),
       });
 
-      const responseText = await response.text();
-      console.log('📨 Setup response:', responseText);
-
-      let result;
-      try {
-        result = JSON.parse(responseText);
-      } catch (parseError) {
-        console.error('❌ Failed to parse response as JSON:', responseText);
-        throw new Error('Invalid server response');
-      }
-
       if (!response.ok) {
-        throw new Error(result.error || 'Setup fehlgeschlagen');
+        const data = await response.json();
+        throw new Error(data.error || 'Setup fehlgeschlagen');
       }
 
+      const result = await response.json();
       console.log('✅ Setup successful:', result);
 
-      // WICHTIG: Setup Status neu prüfen und dann zu Login navigieren
+      // Setup Status neu prüfen
       await checkSetupStatus();
       
-      // Kurze Verzögerung damit der State aktualisiert werden kann
-      setTimeout(() => {
-        navigate('/login');
-      }, 100);
-      
     } catch (err: any) {
       console.error('❌ Setup error:', err);
-      setError(typeof err === 'string' ? err : err.message || 'Ein unerwarteter Fehler ist aufgetreten');
+      setError(err.message || 'Ein unerwarteter Fehler ist aufgetreten');
     } finally {
       setLoading(false);
     }
   };
+
   return (
-    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
-      <div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
-        <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold mb-2">Erstkonfiguration</h1>
-          <p className="text-gray-600">
-            Konfigurieren Sie den Administrator-Account
+    <div style={{ 
+      minHeight: '100vh', 
+      backgroundColor: '#f8f9fa',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '2rem'
+    }}>
+      <div style={{
+        backgroundColor: 'white',
+        padding: '3rem',
+        borderRadius: '12px',
+        boxShadow: '0 10px 30px rgba(0,0,0,0.1)',
+        width: '100%',
+        maxWidth: '500px',
+        border: '1px solid #e9ecef'
+      }}>
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+          <h1 style={{ 
+            fontSize: '2rem', 
+            fontWeight: 'bold', 
+            marginBottom: '0.5rem',
+            color: '#2c3e50'
+          }}>
+            🚀 Erstkonfiguration
+          </h1>
+          <p style={{ 
+            color: '#6c757d',
+            fontSize: '1.1rem'
+          }}>
+            Richten Sie Ihren Administrator-Account ein
           </p>
         </div>
 
         {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          <div style={{
+            backgroundColor: '#f8d7da',
+            border: '1px solid #f5c6cb',
+            color: '#721c24',
+            padding: '1rem',
+            borderRadius: '6px',
+            marginBottom: '1.5rem'
+          }}>
             {error}
           </div>
         )}
 
         {step === 1 && (
-          <div className="space-y-4">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Admin E-Mail
+              <label style={{ 
+                display: 'block', 
+                marginBottom: '0.5rem', 
+                fontWeight: '600',
+                color: '#495057'
+              }}>
+                Administrator E-Mail
               </label>
-              <div className="p-2 bg-gray-100 border rounded">
+              <div style={{ 
+                padding: '0.75rem', 
+                backgroundColor: '#e9ecef', 
+                border: '1px solid #ced4da',
+                borderRadius: '6px',
+                color: '#495057',
+                fontWeight: '500'
+              }}>
                 admin@instandhaltung.de
               </div>
+              <div style={{ 
+                fontSize: '0.875rem', 
+                color: '#6c757d',
+                marginTop: '0.25rem'
+              }}>
+                Diese E-Mail wird für den Administrator-Account verwendet
+              </div>
             </div>
+            
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
+              <label style={{ 
+                display: 'block', 
+                marginBottom: '0.5rem', 
+                fontWeight: '600',
+                color: '#495057'
+              }}>
                 Passwort
               </label>
               <input
@@ -148,13 +186,26 @@ const Setup: React.FC = () => {
                 name="password"
                 value={formData.password}
                 onChange={handleInputChange}
-                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                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 className="block text-sm font-medium text-gray-700 mb-1">
+              <label style={{ 
+                display: 'block', 
+                marginBottom: '0.5rem', 
+                fontWeight: '600',
+                color: '#495057'
+              }}>
                 Passwort bestätigen
               </label>
               <input
@@ -162,7 +213,14 @@ const Setup: React.FC = () => {
                 name="confirmPassword"
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
-                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                style={{
+                  width: '100%',
+                  padding: '0.75rem',
+                  border: '1px solid #ced4da',
+                  borderRadius: '6px',
+                  fontSize: '1rem',
+                  transition: 'border-color 0.3s ease'
+                }}
                 placeholder="Passwort wiederholen"
                 required
               />
@@ -171,76 +229,95 @@ const Setup: React.FC = () => {
         )}
 
         {step === 2 && (
-          <div className="space-y-4">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Name
+              <label style={{ 
+                display: 'block', 
+                marginBottom: '0.5rem', 
+                fontWeight: '600',
+                color: '#495057'
+              }}>
+                Vollständiger Name
               </label>
               <input
                 type="text"
                 name="name"
                 value={formData.name}
                 onChange={handleInputChange}
-                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Vollständiger Name"
+                style={{
+                  width: '100%',
+                  padding: '0.75rem',
+                  border: '1px solid #ced4da',
+                  borderRadius: '6px',
+                  fontSize: '1rem'
+                }}
+                placeholder="Max Mustermann"
                 required
               />
             </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Telefon (optional)
-              </label>
-              <input
-                type="tel"
-                name="phone"
-                value={formData.phone}
-                onChange={handleInputChange}
-                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="+49 123 456789"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Abteilung (optional)
-              </label>
-              <input
-                type="text"
-                name="department"
-                value={formData.department}
-                onChange={handleInputChange}
-                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="z.B. IT"
-              />
-            </div>
           </div>
         )}
 
-        <div className="mt-6 flex justify-between">
+        <div style={{ 
+          marginTop: '2rem', 
+          display: 'flex', 
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
           {step === 2 && (
             <button
               onClick={handleBack}
-              className="px-4 py-2 text-gray-600 hover:text-gray-800"
+              style={{
+                padding: '0.75rem 1.5rem',
+                color: '#6c757d',
+                border: '1px solid #6c757d',
+                background: 'none',
+                borderRadius: '6px',
+                cursor: 'pointer',
+                fontWeight: '500'
+              }}
               disabled={loading}
             >
-              Zurück
+              ← Zurück
             </button>
           )}
+          
           <button
             onClick={handleNext}
             disabled={loading}
-            className={`px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 ${
-              step === 1 ? 'ml-auto' : ''
-            }`}
+            style={{
+              padding: '0.75rem 2rem',
+              backgroundColor: loading ? '#6c757d' : '#007bff',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontWeight: '600',
+              fontSize: '1rem',
+              marginLeft: step === 1 ? 'auto' : '0',
+              transition: 'background-color 0.3s ease'
+            }}
           >
-            {loading ? (
-              '⏳ Verarbeite...'
-            ) : step === 1 ? (
-              'Weiter'
-            ) : (
-              'Setup abschließen'
-            )}
+            {loading ? '⏳ Wird verarbeitet...' : 
+             step === 1 ? 'Weiter →' : 'Setup abschließen'}
           </button>
         </div>
+
+        {step === 2 && (
+          <div style={{ 
+            marginTop: '1.5rem', 
+            textAlign: 'center', 
+            color: '#6c757d', 
+            fontSize: '0.9rem',
+            padding: '1rem',
+            backgroundColor: '#e7f3ff',
+            borderRadius: '6px',
+            border: '1px solid #b6d7e8'
+          }}>
+            💡 Nach dem erfolgreichen Setup werden Sie zur Anmeldeseite weitergeleitet, 
+            wo Sie sich mit Ihren Zugangsdaten anmelden können.
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/types/employee.ts

@@ -4,20 +4,12 @@ export interface Employee {
   email: string;
   name: string;
   role: 'admin' | 'instandhalter' | 'user';
+  employeeType: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent: boolean;
   isActive: boolean;
   createdAt: string;
   lastLogin?: string | null;
-  phone?: string;
-  department?: string;
-}
-
-export interface Availability {
-  id: string;
-  employeeId: string;
-  dayOfWeek: number; // 0-6 (Sonntag-Samstag)
-  startTime: string; // "08:00"
-  endTime: string;   // "16:00"
-  isAvailable: boolean;
+  notes?: string;
 }
 
 export interface CreateEmployeeRequest {
@@ -25,14 +17,25 @@ export interface CreateEmployeeRequest {
   password: string;
   name: string;
   role: 'admin' | 'instandhalter' | 'user';
-  phone?: string;
-  department?: string;
+  employeeType: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent: boolean;
+  notes?: string;
 }
 
 export interface UpdateEmployeeRequest {
   name?: string;
   role?: 'admin' | 'instandhalter' | 'user';
+  employeeType?: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent?: boolean;
   isActive?: boolean;
-  phone?: string;
-  department?: string;
+  notes?: string;
+}
+
+export interface Availability {
+  id: string;
+  employeeId: string;
+  dayOfWeek: number;
+  startTime: string;
+  endTime: string;
+  isAvailable: boolean;
 }

frontend/src/types/user.ts

@@ -4,9 +4,12 @@ export interface User {
   email: string;
   name: string;
   role: 'admin' | 'instandhalter' | 'user';
-  phone?: string;
-  department?: string;
-  lastLogin?: string;
+  employeeType: 'chef' | 'neuling' | 'erfahren';
+  isSufficientlyIndependent: boolean;
+  isActive: boolean;
+  createdAt: string;
+  lastLogin?: string | null;
+  notes?: string;
 }
 
 export interface LoginRequest {