frontend/src/App.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
-import { PermissionsProvider, usePermissions } from './contexts/PermissionsContext'
+import { PermissionsProvider } from './contexts/PermissionsContext'
+import { usePermissions } from './hooks/usePermissions'
 import Sidebar from './components/Sidebar'
 import Footer from './components/Footer'
 import Home from './pages/Home'

frontend/src/components/Sidebar.jsx

@@ -1,6 +1,6 @@
 import { Link, useLocation, useNavigate } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
-import { usePermissions } from '../contexts/PermissionsContext'
+import { usePermissions } from '../hooks/usePermissions'
 import { useState, useEffect } from 'react'
 
 const Sidebar = ({ isOpen, setIsOpen }) => {

frontend/src/hooks/usePermissions.js

@@ -0,0 +1 @@
+export { usePermissions } from '../contexts/PermissionsContext'

frontend/src/pages/Home.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
-import { usePermissions } from '../contexts/PermissionsContext'
+import { usePermissions } from '../hooks/usePermissions'
 
 const Home = () => {
   const { authFetch } = useAuth()

frontend/src/pages/Profile.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useAuth } from '../contexts/AuthContext'
-import { usePermissions } from '../contexts/PermissionsContext'
+import { usePermissions } from '../hooks/usePermissions'
 
 const Profile = () => {
   const { authFetch, user } = useAuth()

frontend/src/pages/SpaceDetail.jsx

@@ -232,18 +232,50 @@ const SpaceDetail = () => {
       if (response.ok) {
         const csr = await response.json()
         
-        // Füge den neuen CSR zur History hinzu (nur wenn der Bereich bereits geöffnet ist)
-        if (showCSRDropdown[fqdn.id]) {
-          const newCsrWithFqdnId = { ...csr, fqdnId: fqdn.id }
-          setCsrHistory(prev => {
-            const filtered = prev.filter(csrItem => csrItem.fqdnId !== fqdn.id)
-            // Füge den neuen CSR am Anfang hinzu (neuester zuerst)
-            return [newCsrWithFqdnId, ...filtered]
-          })
-        }
-        
         setCsrData(csr)
         setSelectedFqdn(fqdn)
+        
+        // Lade die komplette CSR History neu, um den neuen CSR anzuzeigen
+        // WICHTIG: Warte auf die History bevor der Dropdown geöffnet wird
+        try {
+          const historyResponse = await authFetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr`)
+          if (historyResponse.ok) {
+            const history = await historyResponse.json()
+            
+            // Stelle sicher, dass history ein Array ist
+            const historyArray = Array.isArray(history) ? history : []
+            
+            // Füge fqdnId zu jedem CSR hinzu und stelle sicher dass sie immer gesetzt ist
+            // Auch wenn die API fqdnId bereits zurückgibt, überschreiben wir sie mit fqdn.id für Konsistenz
+            // Stelle sicher dass alle CSRs gültig sind und fqdnId gesetzt ist
+            const historyWithFqdnId = historyArray
+              .filter(csrItem => csrItem && csrItem.id) // Stelle sicher dass CSR gültig ist
+              .map(csrItem => ({ 
+                ...csrItem, 
+                fqdnId: String(fqdn.id)  // Immer als String für konsistente Filterung
+              }))
+            
+            setCsrHistory(prev => {
+              // Entferne alte CSRs für diesen FQDN und füge die neuen hinzu
+              // Verwende String-Vergleich für Robustheit
+              const filtered = prev.filter(csrItem => String(csrItem?.fqdnId) !== String(fqdn.id))
+              return [...filtered, ...historyWithFqdnId]
+            })
+            
+            // Öffne den CSR History Dropdown NACH dem Laden der History
+            setShowCSRDropdown(prev => ({ ...prev, [fqdn.id]: true }))
+          } else {
+            setCsrHistory(prev => {
+              // Bei Fehler, entferne nur CSRs für diesen FQDN, behalte andere
+              return prev.filter(csrItem => String(csrItem?.fqdnId) !== String(fqdn.id))
+            })
+          }
+        } catch (err) {
+          console.error('Error fetching CSR history after upload:', err)
+          // Bei Fehler, entferne nur CSRs für diesen FQDN
+          setCsrHistory(prev => prev.filter(csrItem => String(csrItem?.fqdnId) !== String(fqdn.id)))
+        }
+        
         setShowCSRModal(true)
         
         // Aktualisiere die FQDN-Liste
@@ -298,14 +330,23 @@ const SpaceDetail = () => {
       const historyResponse = await authFetch(`/api/spaces/${id}/fqdns/${fqdn.id}/csr`)
       if (historyResponse.ok) {
         const history = await historyResponse.json()
-        setCsrHistory(Array.isArray(history) ? history : [])
+        const historyArray = Array.isArray(history) ? history : []
+        // Stelle sicher dass fqdnId gesetzt ist für konsistente Filterung
+        const historyWithFqdnId = historyArray
+          .filter(csr => csr && csr.id)
+          .map(csr => ({ ...csr, fqdnId: String(fqdn.id) }))
+        setCsrHistory(prev => {
+          const filtered = prev.filter(csr => String(csr?.fqdnId) !== String(fqdn.id))
+          return [...filtered, ...historyWithFqdnId]
+        })
       } else {
-        setCsrHistory([])
+        setCsrHistory(prev => prev.filter(csr => String(csr?.fqdnId) !== String(fqdn.id)))
       }
     } catch (err) {
       console.error('Error fetching CSR:', err)
       setCsrData(null)
-      setCsrHistory([])
+      // Entferne nur CSRs für diesen FQDN, behalte andere
+      setCsrHistory(prev => prev.filter(csr => String(csr?.fqdnId) !== String(fqdn.id)))
     }
   }
 
@@ -319,7 +360,7 @@ const SpaceDetail = () => {
     setSelectedFqdn(null)
     setCsrData(null)
     setCsrError('')
-    setCsrHistory([])
+    // csrHistory NICHT zurücksetzen - bleibt für Dropdown-Anzeige erhalten
   }
 
   const handleChange = (e) => {
@@ -822,11 +863,12 @@ const SpaceDetail = () => {
                                 if (response.ok) {
                                   const history = await response.json()
                                   // Speichere History mit FQDN-ID als Key
-                                  const historyWithFqdnId = Array.isArray(history) 
-                                    ? history.map(csr => ({ ...csr, fqdnId: fqdn.id }))
-                                    : []
+                                  const historyArray = Array.isArray(history) ? history : []
+                                  const historyWithFqdnId = historyArray
+                                    .filter(csr => csr && csr.id)
+                                    .map(csr => ({ ...csr, fqdnId: String(fqdn.id) }))
                                   setCsrHistory(prev => {
-                                    const filtered = prev.filter(csr => csr.fqdnId !== fqdn.id)
+                                    const filtered = prev.filter(csr => String(csr?.fqdnId) !== String(fqdn.id))
                                     return [...filtered, ...historyWithFqdnId]
                                   })
                                 }
@@ -890,12 +932,13 @@ const SpaceDetail = () => {
                     <div className="border-t border-slate-600/50 bg-slate-800/50 p-4">
                       <h5 className="text-sm font-semibold text-slate-300 mb-3">CSR History</h5>
                       {(() => {
+                        // Filtere CSRs für diesen FQDN - verwende String-Vergleich für Robustheit
                         const fqdnHistory = csrHistory
-                          .filter(csr => csr.fqdnId === fqdn.id)
+                          .filter(csr => csr && String(csr.fqdnId) === String(fqdn.id))
                           .sort((a, b) => {
                             // Sortiere nach created_at, neueste zuerst
-                            const dateA = new Date(a.createdAt).getTime()
-                            const dateB = new Date(b.createdAt).getTime()
+                            const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0
+                            const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0
                             return dateB - dateA
                           })
                         return fqdnHistory.length > 0 ? (