fixed user deletion

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>
   );
 };