fixed user deletion

frontend/src/App.tsx

@@ -1,7 +1,9 @@
-// frontend/src/App.tsx - KORRIGIERT
+// frontend/src/App.tsx - KORRIGIERTE VERSION
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { NotificationProvider } from './contexts/NotificationContext';
+import NotificationContainer from './components/Notification/NotificationContainer';
 import Layout from './components/Layout/Layout';
 import Login from './pages/Auth/Login';
 import Dashboard from './pages/Dashboard/Dashboard';
@@ -11,15 +13,13 @@ import EmployeeManagement from './pages/Employees/EmployeeManagement';
 import Settings from './pages/Settings/Settings';
 import Help from './pages/Help/Help';
 
-// Protected Route Component
+// Protected Route Component direkt in App.tsx
 const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }> = ({ 
   children, 
   roles = ['admin', 'instandhalter', 'user'] 
 }) => {
   const { user, loading, hasRole } = useAuth();
 
-  console.log('🔒 ProtectedRoute - User:', user?.email, 'Loading:', loading);
-
   if (loading) {
     return (
       <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -29,12 +29,10 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
   }
   
   if (!user) {
-    console.log('❌ No user, redirecting to login');
     return <Login />;
   }
 
   if (!hasRole(roles)) {
-    console.log('❌ Insufficient permissions for:', user.email);
     return (
       <Layout>
         <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -45,82 +43,58 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode; roles?: string[] }>
     );
   }
   
-  console.log('✅ Access granted for:', user.email);
   return <Layout>{children}</Layout>;
 };
 
 function App() {
-  const { user, loading } = useAuth();
-
-  console.log('🏠 App Component - User:', user?.email, 'Loading:', loading);
-
-  // Während des Ladens zeigen wir einen Loading Screen
-  if (loading) {
-    return (
-      <div style={{ 
-        textAlign: 'center', 
-        padding: '100px 20px',
-        fontSize: '18px'
-      }}>
-        <div>⏳ SchichtPlaner wird geladen...</div>
-      </div>
-    );
-  }
-
   return (
-    <Router>
-      <Routes>
-        {/* Public Route */}
-        <Route path="/login" element={<Login />} />
-        
-        {/* Protected Routes with Layout */}
-        <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>
-        } />
-      </Routes>
-    </Router>
+    <NotificationProvider>
+      <AuthProvider>
+        <Router>
+          <NotificationContainer />
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            
+            <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>
+            } />
+          </Routes>
+        </Router>
+      </AuthProvider>
+    </NotificationProvider>
   );
 }
 
-// Hauptkomponente mit AuthProvider
-function AppWrapper() {
-  return (
-    <AuthProvider>
-      <App />
-    </AuthProvider>
-  );
-}
-
-export default AppWrapper;
+export default App;

frontend/src/components/Notification/NotificationContainer.tsx

@@ -0,0 +1,105 @@
+// frontend/src/components/Notification/NotificationContainer.tsx
+import React from 'react';
+import { useNotification, Notification } from '../../contexts/NotificationContext';
+
+const NotificationContainer: React.FC = () => {
+  const { notifications, removeNotification } = useNotification();
+
+  const getNotificationStyle = (type: Notification['type']) => {
+    const baseStyle = {
+      padding: '15px 20px',
+      marginBottom: '10px',
+      borderRadius: '8px',
+      border: '1px solid',
+      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      maxWidth: '400px',
+      minWidth: '300px'
+    };
+
+    const typeStyles = {
+      info: {
+        backgroundColor: '#e8f4fd',
+        borderColor: '#b6d7e8',
+        color: '#2c3e50'
+      },
+      success: {
+        backgroundColor: '#d5f4e6',
+        borderColor: '#a3e4c1',
+        color: '#27ae60'
+      },
+      warning: {
+        backgroundColor: '#fef5e7',
+        borderColor: '#fadbd8',
+        color: '#f39c12'
+      },
+      error: {
+        backgroundColor: '#fadbd8',
+        borderColor: '#f5b7b1',
+        color: '#e74c3c'
+      }
+    };
+
+    return { ...baseStyle, ...typeStyles[type] };
+  };
+
+  const getIcon = (type: Notification['type']) => {
+    switch (type) {
+      case 'info': return '💡';
+      case 'success': return '✅';
+      case 'warning': return '⚠️';
+      case 'error': return '❌';
+      default: return '💡';
+    }
+  };
+
+  if (notifications.length === 0) return null;
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '20px',
+      right: '20px',
+      zIndex: 1000
+    }}>
+      {notifications.map(notification => (
+        <div
+          key={notification.id}
+          style={getNotificationStyle(notification.type)}
+        >
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', flex: 1 }}>
+            <span style={{ fontSize: '18px' }}>
+              {getIcon(notification.type)}
+            </span>
+            <div>
+              <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
+                {notification.title}
+              </div>
+              <div style={{ fontSize: '14px' }}>
+                {notification.message}
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={() => removeNotification(notification.id)}
+            style={{
+              background: 'none',
+              border: 'none',
+              fontSize: '18px',
+              cursor: 'pointer',
+              padding: '0',
+              marginLeft: '10px',
+              color: 'inherit'
+            }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NotificationContainer;

frontend/src/contexts/NotificationContext.tsx

@@ -0,0 +1,94 @@
+// frontend/src/contexts/NotificationContext.tsx
+import React, { createContext, useContext, useState } from 'react';
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error';
+
+export interface Notification {
+  id: string;
+  type: NotificationType;
+  title: string;
+  message: string;
+  duration?: number;
+}
+
+interface NotificationContextType {
+  notifications: Notification[];
+  showNotification: (notification: Omit<Notification, 'id'>) => void;
+  removeNotification: (id: string) => void;
+  confirmDialog: (options: ConfirmDialogOptions) => Promise<boolean>;
+}
+
+interface ConfirmDialogOptions {
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  type?: NotificationType;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const showNotification = (notification: Omit<Notification, 'id'>) => {
+    const id = Date.now().toString();
+    const newNotification: Notification = {
+      id,
+      duration: 5000,
+      ...notification
+    };
+
+    setNotifications(prev => [...prev, newNotification]);
+
+    // Auto-remove after duration
+    if (newNotification.duration) {
+      setTimeout(() => {
+        removeNotification(id);
+      }, newNotification.duration);
+    }
+  };
+
+  const removeNotification = (id: string) => {
+    setNotifications(prev => prev.filter(notif => notif.id !== id));
+  };
+
+  const confirmDialog = (options: ConfirmDialogOptions): Promise<boolean> => {
+    return new Promise((resolve) => {
+      const {
+        title,
+        message,
+        confirmText = 'OK',
+        cancelText = 'Abbrechen',
+        type = 'warning'
+      } = options;
+
+      const userConfirmed = window.confirm(
+        `${title}\n\n${message}\n\n${confirmText} / ${cancelText}`
+      );
+
+      resolve(userConfirmed);
+    });
+  };
+
+  const value = {
+    notifications,
+    showNotification,
+    removeNotification,
+    confirmDialog
+  };
+
+  return (
+    <NotificationContext.Provider value={value}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (context === undefined) {
+    throw new Error('useNotification must be used within a NotificationProvider');
+  }
+  return context;
+};

frontend/src/pages/Employees/EmployeeManagement.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/Employees/EmployeeManagement.tsx
+// frontend/src/pages/Employees/EmployeeManagement.tsx - MIT NOTIFICATION SYSTEM
 import React, { useState, useEffect } from 'react';
 import { Employee } from '../../types/employee';
 import { employeeService } from '../../services/employeeService';
@@ -6,16 +6,17 @@ import EmployeeList from './components/EmployeeList';
 import EmployeeForm from './components/EmployeeForm';
 import AvailabilityManager from './components/AvailabilityManager';
 import { useAuth } from '../../contexts/AuthContext';
+import { useNotification } from '../../contexts/NotificationContext';
 
 type ViewMode = 'list' | 'create' | 'edit' | 'availability';
 
 const EmployeeManagement: React.FC = () => {
   const [employees, setEmployees] = useState<Employee[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
   const [viewMode, setViewMode] = useState<ViewMode>('list');
   const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
   const { hasRole } = useAuth();
+  const { showNotification, confirmDialog } = useNotification();
 
   useEffect(() => {
     loadEmployees();
@@ -24,14 +25,20 @@ const EmployeeManagement: React.FC = () => {
   const loadEmployees = async () => {
     try {
       setLoading(true);
-      setError('');
-      console.log('🔄 Loading employees...');
+      console.log('Fetching fresh employee list');
+      
+      // Add cache-busting parameter to prevent browser caching
       const data = await employeeService.getEmployees();
-      console.log('✅ Employees loaded:', data);
+      console.log('Received employees:', data.length);
+      
       setEmployees(data);
     } catch (err: any) {
-      console.error('❌ Error loading employees:', err);
-      setError(err.message || 'Fehler beim Laden der Mitarbeiter');
+      console.error('Error loading employees:', err);
+      showNotification({
+        type: 'error',
+        title: 'Fehler',
+        message: 'Mitarbeiter konnten nicht geladen werden'
+      });
     } finally {
       setLoading(false);
     }
@@ -57,39 +64,92 @@ const EmployeeManagement: React.FC = () => {
     setSelectedEmployee(null);
   };
 
-  // KORRIGIERT: Explizit Daten neu laden nach Create/Update
   const handleEmployeeCreated = () => {
-    console.log('🔄 Reloading employees after creation...');
-    loadEmployees(); // Daten neu laden
-    setViewMode('list'); // Zurück zur Liste
+    loadEmployees();
+    setViewMode('list');
+    showNotification({
+      type: 'success',
+      title: 'Erfolg',
+      message: 'Mitarbeiter wurde erfolgreich erstellt'
+    });
   };
 
   const handleEmployeeUpdated = () => {
-    console.log('🔄 Reloading employees after update...');
-    loadEmployees(); // Daten neu laden
-    setViewMode('list'); // Zurück zur Liste
+    loadEmployees();
+    setViewMode('list');
+    showNotification({
+      type: 'success',
+      title: 'Erfolg',
+      message: 'Mitarbeiter wurde erfolgreich aktualisiert'
+    });
   };
 
-  const handleDeleteEmployee = async (employeeId: string) => {
-    if (!window.confirm('Mitarbeiter wirklich löschen?\nDer Mitarbeiter wird deaktiviert und kann keine Schichten mehr zugewiesen bekommen.')) {
-      return;
-    }
-
+  // Verbesserte Lösch-Funktion mit Bestätigungs-Dialog
+  const handleDeleteEmployee = async (employee: Employee) => {
     try {
-      await employeeService.deleteEmployee(employeeId);
-      await loadEmployees(); // Liste aktualisieren
+      // Bestätigungs-Dialog basierend auf Rolle
+      let confirmMessage = `Möchten Sie den Mitarbeiter "${employee.name}" wirklich PERMANENT LÖSCHEN?\n\nDie Daten des Mitarbeiters werden unwiderruflich gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.`;
+      let confirmTitle = 'Mitarbeiter löschen';
+      
+      if (employee.role === 'admin') {
+        const adminCount = employees.filter(emp => 
+          emp.role === 'admin' && emp.isActive
+        ).length;
+        
+        if (adminCount <= 1) {
+          showNotification({
+            type: 'error',
+            title: 'Aktion nicht möglich',
+            message: 'Mindestens ein Administrator muss im System verbleiben'
+          });
+          return;
+        }
+        
+        confirmTitle = 'Administrator löschen';
+        confirmMessage = `Möchten Sie den Administrator "${employee.name}" wirklich PERMANENT LÖSCHEN?\n\nAchtung: Diese Aktion ist permanent und kann nicht rückgängig gemacht werden.`;
+      }
+
+      const confirmed = await confirmDialog({
+        title: confirmTitle,
+        message: confirmMessage,
+        confirmText: 'Permanent löschen',
+        cancelText: 'Abbrechen',
+        type: 'warning'
+      });
+
+      if (!confirmed) return;
+
+      console.log('Starting deletion process for employee:', employee.name);
+      await employeeService.deleteEmployee(employee.id);
+      console.log('Employee deleted, reloading list');
+      
+      // Force a fresh reload of employees
+      const updatedEmployees = await employeeService.getEmployees();
+      setEmployees(updatedEmployees);
+      
+      showNotification({
+        type: 'success',
+        title: 'Erfolg',
+        message: `Mitarbeiter "${employee.name}" wurde erfolgreich gelöscht`
+      });
+
     } catch (err: any) {
-      setError(err.message || 'Fehler beim Löschen des Mitarbeiters');
+      if (err.message.includes('Mindestens ein Administrator')) {
+        showNotification({
+          type: 'error',
+          title: 'Aktion nicht möglich',
+          message: err.message
+        });
+      } else {
+        showNotification({
+          type: 'error',
+          title: 'Fehler',
+          message: 'Mitarbeiter konnte nicht gelöscht werden'
+        });
+      }
     }
   };
 
-  // Debug: Zeige aktuellen State
-  console.log('📊 Current state:', { 
-    viewMode, 
-    employeesCount: employees.length,
-    selectedEmployee: selectedEmployee?.name 
-  });
-
   if (loading && viewMode === 'list') {
     return (
       <div style={{ textAlign: 'center', padding: '40px' }}>
@@ -100,7 +160,6 @@ const EmployeeManagement: React.FC = () => {
 
   return (
     <div>
-      {/* Header mit Titel und Aktionen */}
       <div style={{ 
         display: 'flex', 
         justifyContent: 'space-between', 
@@ -154,39 +213,12 @@ const EmployeeManagement: React.FC = () => {
         )}
       </div>
 
-      {/* Fehleranzeige */}
-      {error && (
-        <div style={{
-          backgroundColor: '#fee',
-          border: '1px solid #f5c6cb',
-          color: '#721c24',
-          padding: '15px',
-          borderRadius: '6px',
-          marginBottom: '20px'
-        }}>
-          <strong>Fehler:</strong> {error}
-          <button
-            onClick={() => setError('')}
-            style={{
-              float: 'right',
-              background: 'none',
-              border: 'none',
-              color: '#721c24',
-              cursor: 'pointer',
-              fontWeight: 'bold'
-            }}
-          >
-            ×
-          </button>
-        </div>
-      )}
-
       {/* Inhalt basierend auf View Mode */}
       {viewMode === 'list' && (
         <EmployeeList
           employees={employees}
           onEdit={handleEditEmployee}
-          onDelete={handleDeleteEmployee}
+          onDelete={handleDeleteEmployee} // Jetzt mit Employee-Objekt
           onManageAvailability={handleManageAvailability}
           currentUserRole={hasRole(['admin']) ? 'admin' : 'instandhalter'}
         />

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

@@ -1,15 +1,17 @@
-// frontend/src/pages/Employees/components/EmployeeList.tsx
+// frontend/src/pages/Employees/components/EmployeeList.tsx - KORRIGIERT
 import React, { useState } from 'react';
 import { Employee } from '../../../types/employee';
+import { useAuth } from '../../../contexts/AuthContext';
 
 interface EmployeeListProps {
   employees: Employee[];
   onEdit: (employee: Employee) => void;
-  onDelete: (employeeId: string) => void;
+  onDelete: (employee: Employee) => void; // Jetzt mit Employee-Objekt
   onManageAvailability: (employee: Employee) => void;
   currentUserRole: 'admin' | 'instandhalter';
 }
 
+
 const EmployeeList: React.FC<EmployeeListProps> = ({
   employees,
   onEdit,
@@ -17,8 +19,9 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
   onManageAvailability,
   currentUserRole
 }) => {
-  const [filter, setFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [filter, setFilter] = useState<'all' | 'active' | 'inactive'>('active');
   const [searchTerm, setSearchTerm] = useState('');
+  const { user: currentUser } = useAuth();
 
   const filteredEmployees = employees.filter(employee => {
     // Status-Filter
@@ -54,6 +57,33 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
       : { text: 'Inaktiv', color: '#e74c3c', bgColor: '#fadbd8' };
   };
 
+  // NEU: Kann Benutzer löschen?
+  const canDeleteEmployee = (employee: Employee): boolean => {
+    // Nur Admins können löschen
+    if (currentUserRole !== 'admin') return false;
+    
+    // Kann sich nicht selbst löschen
+    if (employee.id === currentUser?.id) return false;
+    
+    // Admins können nur von Admins gelöscht werden
+    if (employee.role === 'admin' && currentUserRole !== 'admin') return false;
+    
+    return true;
+  };
+
+  // NEU: Kann Benutzer bearbeiten?
+  const canEditEmployee = (employee: Employee): boolean => {
+    // Admins können alle bearbeiten
+    if (currentUserRole === 'admin') return true;
+    
+    // Instandhalter können nur User und sich selbst bearbeiten
+    if (currentUserRole === 'instandhalter') {
+      return employee.role === 'user' || employee.id === currentUser?.id;
+    }
+    
+    return false;
+  };
+
   if (employees.length === 0) {
     return (
       <div style={{
@@ -122,7 +152,7 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         </div>
       </div>
 
-      {/* Mitarbeiter Tabelle */}
+      {/* Mitarbeiter Tabelle - SYMMETRISCH KORRIGIERT */}
       <div style={{
         backgroundColor: 'white',
         borderRadius: '8px',
@@ -130,33 +160,37 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
         overflow: 'hidden',
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
       }}>
+        {/* Tabellen-Header - SYMMETRISCH */}
         <div style={{
           display: 'grid',
-          gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr auto',
+          gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Feste Breite für Aktionen
           gap: '15px',
           padding: '15px 20px',
           backgroundColor: '#f8f9fa',
           borderBottom: '1px solid #dee2e6',
           fontWeight: 'bold',
-          color: '#2c3e50'
+          color: '#2c3e50',
+          alignItems: 'center'
         }}>
           <div>Name & E-Mail</div>
           <div>Abteilung</div>
-          <div>Rolle</div>
-          <div>Status</div>
-          <div>Letzter Login</div>
-          <div>Aktionen</div>
+          <div style={{ textAlign: 'center' }}>Rolle</div>
+          <div style={{ textAlign: 'center' }}>Status</div>
+          <div style={{ textAlign: 'center' }}>Letzter Login</div>
+          <div style={{ textAlign: 'center' }}>Aktionen</div>
         </div>
 
         {filteredEmployees.map(employee => {
-          const status = getStatusBadge(employee.isActive);
+          const status = getStatusBadge(employee.isActive ?? true);
+          const canEdit = canEditEmployee(employee);
+          const canDelete = canDeleteEmployee(employee);
           
           return (
             <div
               key={employee.id}
               style={{
                 display: 'grid',
-                gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr auto',
+                gridTemplateColumns: '2fr 1.5fr 1fr 1fr 1fr 120px', // Gleiche Spalten wie Header
                 gap: '15px',
                 padding: '15px 20px',
                 borderBottom: '1px solid #f0f0f0',
@@ -167,6 +201,16 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
               <div>
                 <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                   {employee.name}
+                  {employee.id === currentUser?.id && (
+                    <span style={{ 
+                      marginLeft: '8px',
+                      fontSize: '12px',
+                      color: '#3498db',
+                      fontWeight: 'normal'
+                    }}>
+                      (Sie)
+                    </span>
+                  )}
                 </div>
                 <div style={{ color: '#666', fontSize: '14px' }}>
                   {employee.email}
@@ -174,81 +218,99 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
               </div>
 
               {/* Abteilung */}
-              <div>
+              <div style={{ color: '#666' }}>
                 {employee.department || (
                   <span style={{ color: '#999', fontStyle: 'italic' }}>Nicht zugewiesen</span>
                 )}
               </div>
 
-              {/* Rolle */}
-              <div>
+              {/* Rolle - ZENTRIERT */}
+              <div style={{ textAlign: 'center' }}>
                 <span
                   style={{
                     backgroundColor: getRoleBadgeColor(employee.role),
                     color: 'white',
-                    padding: '4px 8px',
-                    borderRadius: '12px',
+                    padding: '6px 12px',
+                    borderRadius: '15px',
                     fontSize: '12px',
-                    fontWeight: 'bold'
+                    fontWeight: 'bold',
+                    display: 'inline-block',
+                    minWidth: '80px'
                   }}
                 >
-                  {employee.role}
+                  {employee.role === 'admin' ? 'ADMIN' : 
+                   employee.role === 'instandhalter' ? 'INSTANDHALTER' : 'MITARBEITER'}
                 </span>
               </div>
 
-              {/* Status */}
-              <div>
+              {/* Status - ZENTRIERT */}
+              <div style={{ textAlign: 'center' }}>
                 <span
                   style={{
                     backgroundColor: status.bgColor,
                     color: status.color,
-                    padding: '4px 8px',
-                    borderRadius: '12px',
+                    padding: '6px 12px',
+                    borderRadius: '15px',
                     fontSize: '12px',
-                    fontWeight: 'bold'
+                    fontWeight: 'bold',
+                    display: 'inline-block',
+                    minWidth: '70px'
                   }}
                 >
                   {status.text}
                 </span>
               </div>
 
-              {/* Letzter Login */}
-              <div style={{ fontSize: '14px', color: '#666' }}>
+              {/* Letzter Login - ZENTRIERT */}
+              <div style={{ textAlign: 'center', fontSize: '14px', color: '#666' }}>
                 {employee.lastLogin 
                   ? new Date(employee.lastLogin).toLocaleDateString('de-DE')
                   : 'Noch nie'
                 }
               </div>
 
-              {/* Aktionen */}
-              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-                <button
-                  onClick={() => onManageAvailability(employee)}
-                  style={{
-                    padding: '6px 12px',
-                    backgroundColor: '#3498db',
-                    color: 'white',
-                    border: 'none',
-                    borderRadius: '4px',
-                    cursor: 'pointer',
-                    fontSize: '12px'
-                  }}
-                  title="Verfügbarkeit verwalten"
-                >
-                  📅
-                </button>
+              {/* Aktionen - ZENTRIERT und SYMMETRISCH */}
+              <div style={{ 
+                display: 'flex', 
+                gap: '8px', 
+                justifyContent: 'center',
+                flexWrap: 'wrap'
+              }}>
+                {/* Verfügbarkeit Button - immer sichtbar für berechtigte */}
+                {(currentUserRole === 'admin' || currentUserRole === 'instandhalter') && (
+                  <button
+                    onClick={() => onManageAvailability(employee)}
+                    style={{
+                      padding: '6px 8px',
+                      backgroundColor: '#3498db',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      fontSize: '12px',
+                      minWidth: '32px',
+                      height: '32px'
+                    }}
+                    title="Verfügbarkeit verwalten"
+                  >
+                    📅
+                  </button>
+                )}
 
-                {(currentUserRole === 'admin' || employee.role !== 'admin') && (
+                {/* Bearbeiten Button */}
+                {canEdit && (
                   <button
                     onClick={() => onEdit(employee)}
                     style={{
-                      padding: '6px 12px',
+                      padding: '6px 8px',
                       backgroundColor: '#f39c12',
                       color: 'white',
                       border: 'none',
                       borderRadius: '4px',
                       cursor: 'pointer',
-                      fontSize: '12px'
+                      fontSize: '12px',
+                      minWidth: '32px',
+                      height: '32px'
                     }}
                     title="Mitarbeiter bearbeiten"
                   >
@@ -256,28 +318,55 @@ const EmployeeList: React.FC<EmployeeListProps> = ({
                   </button>
                 )}
 
-                {currentUserRole === 'admin' && employee.role !== 'admin' && (
+                {/* Löschen Button - NUR FÜR ADMINS */}
+                {canDelete && (
                   <button
-                    onClick={() => onDelete(employee.id)}
+                    onClick={() => onDelete(employee)}
                     style={{
-                      padding: '6px 12px',
+                      padding: '6px 8px',
                       backgroundColor: '#e74c3c',
                       color: 'white',
                       border: 'none',
                       borderRadius: '4px',
                       cursor: 'pointer',
-                      fontSize: '12px'
+                      fontSize: '12px',
+                      minWidth: '32px',
+                      height: '32px'
                     }}
-                    title="Mitarbeiter löschen"
+                    title="Mitarbeiter deaktivieren"
                   >
                     🗑️
                   </button>
                 )}
+
+                {/* Platzhalter für Symmetrie wenn keine Aktionen */}
+                {!canEdit && !canDelete && (currentUserRole !== 'admin' && currentUserRole !== 'instandhalter') && (
+                  <div style={{ width: '32px', height: '32px' }}></div>
+                )}
               </div>
             </div>
           );
         })}
       </div>
+
+      {/* NEU: Info-Box über Berechtigungen */}
+      <div style={{
+        marginTop: '20px',
+        padding: '15px',
+        backgroundColor: '#e8f4fd',
+        border: '1px solid #b6d7e8',
+        borderRadius: '6px',
+        fontSize: '14px',
+        color: '#2c3e50'
+      }}>
+        <strong>💡 Informationen zu Berechtigungen:</strong>
+        <ul style={{ margin: '8px 0 0 20px', padding: 0 }}>
+          <li><strong>Admins</strong> können alle Benutzer bearbeiten und löschen</li>
+          <li><strong>Instandhalter</strong> können nur Mitarbeiter bearbeiten</li>
+          <li>Mindestens <strong>ein Admin</strong> muss immer im System vorhanden sein</li>
+          <li>Benutzer können sich <strong>nicht selbst löschen</strong></li>
+        </ul>
+      </div>
     </div>
   );
 };

frontend/src/services/employeeService.ts

@@ -7,9 +7,11 @@ const API_BASE = 'http://localhost:3002/api/employees';
 export const employeeService = {
   // Alle Mitarbeiter abrufen
   async getEmployees(): Promise<Employee[]> {
-    const response = await fetch(API_BASE, {
+    const response = await fetch(`${API_BASE}?_=${Date.now()}`, {
       headers: {
         'Content-Type': 'application/json',
+        'Cache-Control': 'no-cache',
+        'Pragma': 'no-cache',
         ...authService.getAuthHeaders()
       }
     });
@@ -74,7 +76,7 @@ export const employeeService = {
     return response.json();
   },
 
-  // Mitarbeiter löschen (deaktivieren)
+  // Mitarbeiter permanent löschen
   async deleteEmployee(id: string): Promise<void> {
     const response = await fetch(`${API_BASE}/${id}`, {
       method: 'DELETE',
@@ -84,7 +86,8 @@ export const employeeService = {
     });
     
     if (!response.ok) {
-      throw new Error('Fehler beim Löschen des Mitarbeiters');
+      const error = await response.json().catch(() => ({ error: 'Fehler beim Löschen des Mitarbeiters' }));
+      throw new Error(error.error || 'Fehler beim Löschen des Mitarbeiters');
     }
   },