added back notification

frontend/src/pages/Employees/EmployeeManagement.tsx

@@ -1,4 +1,4 @@
-// frontend/src/pages/Employees/EmployeeManagement.tsx - VOLLSTÄNDIG
+// frontend/src/pages/Employees/EmployeeManagement.tsx
 import React, { useState, useEffect } from 'react';
 import { Employee } from '../../types/employee';
 import { employeeService } from '../../services/employeeService';
@@ -15,8 +15,8 @@ const EmployeeManagement: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [viewMode, setViewMode] = useState<ViewMode>('list');
   const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
-  const { hasRole, user: currentUser } = useAuth();
-  const { showNotification } = useNotification();
+  const { hasRole } = useAuth();
+  const { showNotification, confirmDialog } = useNotification();
 
   useEffect(() => {
     loadEmployees();
@@ -25,10 +25,15 @@ const EmployeeManagement: React.FC = () => {
   const loadEmployees = async () => {
     try {
       setLoading(true);
+      console.log('🔄 Loading employees...');
+      
+      // Add cache-busting parameter to prevent browser caching
       const data = await employeeService.getEmployees();
+      console.log('✅ Employees loaded:', data);
+      
       setEmployees(data);
     } catch (err: any) {
-      console.error('Error loading employees:', err);
+      console.error('❌ Error loading employees:', err);
       showNotification({
         type: 'error',
         title: 'Fehler',
@@ -79,9 +84,12 @@ const EmployeeManagement: React.FC = () => {
     });
   };
 
+  // Verbesserte Lösch-Funktion mit Bestätigungs-Dialog
   const handleDeleteEmployee = async (employee: Employee) => {
-    // Warnung basierend auf Rolle
-    let confirmMessage = `Möchten Sie den Mitarbeiter "${employee.name}" wirklich löschen?\n\nDiese Aktion kann nicht rückgängig gemacht werden.`;
+    try {
+      // 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 => 
@@ -92,45 +100,57 @@ const EmployeeManagement: React.FC = () => {
           showNotification({
             type: 'error',
             title: 'Aktion nicht möglich',
-          message: 'Es muss mindestens ein aktiver Administrator im System verbleiben.'
+            message: 'Mindestens ein Administrator muss im System verbleiben'
           });
           return;
         }
-      confirmMessage += '\n\n⚠️ Achtung: Dieser Benutzer ist ein Administrator!';
+        
+        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.`;
       }
 
-    if (!window.confirm(confirmMessage)) {
-      return;
-    }
+      const confirmed = await confirmDialog({
+        title: confirmTitle,
+        message: confirmMessage,
+        confirmText: 'Permanent löschen',
+        cancelText: 'Abbrechen',
+        type: 'warning'
+      });
 
-    try {
+      if (!confirmed) return;
+
+      console.log('Starting deletion process for employee:', employee.name);
       await employeeService.deleteEmployee(employee.id);
-      await loadEmployees();
+      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 gelöscht`
+        message: `Mitarbeiter "${employee.name}" wurde erfolgreich gelöscht`
       });
+
     } catch (err: any) {
-      console.error('Error deleting employee:', err);
+      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: ' + err.message
+          message: 'Mitarbeiter konnte nicht gelöscht werden'
         });
       }
+    }
   };
 
-  const handleAvailabilitySaved = () => {
-    showNotification({
-      type: 'success',
-      title: 'Erfolg',
-      message: 'Verfügbarkeiten wurden gespeichert'
-    });
-    setViewMode('list');
-  };
-
-  if (loading) {
+  if (loading && viewMode === 'list') {
     return (
       <div style={{ textAlign: 'center', padding: '40px' }}>
         <div>⏳ Lade Mitarbeiter...</div>
@@ -139,42 +159,69 @@ const EmployeeManagement: React.FC = () => {
   }
 
   return (
-    <div style={{ padding: '20px' }}>
-      {viewMode === 'list' && (
-        <>
+    <div>
       <div style={{ 
         display: 'flex', 
         justifyContent: 'space-between', 
         alignItems: 'center', 
-            marginBottom: '30px'
+        marginBottom: '30px',
+        flexWrap: 'wrap',
+        gap: '15px'
       }}>
-            <h1>👥 Mitarbeiterverwaltung</h1>
-            {hasRole(['admin', 'instandhalter']) && (
+        <div>
+          <h1 style={{ margin: 0, color: '#2c3e50' }}>👥 Mitarbeiter Verwaltung</h1>
+          <p style={{ margin: '5px 0 0 0', color: '#7f8c8d' }}>
+            {employees.length} Mitarbeiter gefunden
+          </p>
+        </div>
+
+        {viewMode === 'list' && hasRole(['admin']) && (
           <button
             onClick={handleCreateEmployee}
             style={{
-                  padding: '10px 20px',
+              padding: '12px 24px',
               backgroundColor: '#27ae60',
               color: 'white',
               border: 'none',
               borderRadius: '6px',
               cursor: 'pointer',
-                  fontWeight: 'bold'
+              fontWeight: 'bold',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px'
             }}
           >
-                + Neuer Mitarbeiter
+            <span>+</span>
+            Neuer Mitarbeiter
+          </button>
+        )}
+
+        {viewMode !== 'list' && (
+          <button
+            onClick={handleBackToList}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#95a5a6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: 'pointer'
+            }}
+          >
+            ← Zurück zur Liste
           </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'}
         />
-        </>
       )}
 
       {viewMode === 'create' && (
@@ -197,7 +244,7 @@ const EmployeeManagement: React.FC = () => {
       {viewMode === 'availability' && selectedEmployee && (
         <AvailabilityManager
           employee={selectedEmployee}
-          onSave={handleAvailabilitySaved}
+          onSave={handleEmployeeUpdated}
           onCancel={handleBackToList}
         />
       )}