upload all

frontend/src/App.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import Sidebar from './components/Sidebar'
+import Footer from './components/Footer'
+import Home from './pages/Home'
+import Spaces from './pages/Spaces'
+import SpaceDetail from './pages/SpaceDetail'
+import Impressum from './pages/Impressum'
+
+function App() {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+
+  return (
+    <Router>
+      <div className="flex flex-col h-screen bg-gradient-to-r from-slate-700 to-slate-900">
+        <div className="flex flex-1 overflow-hidden">
+          <Sidebar isOpen={sidebarOpen} setIsOpen={setSidebarOpen} />
+          <main className="flex-1 overflow-y-auto flex flex-col bg-gradient-to-r from-slate-700 to-slate-900">
+            <div className="flex-1">
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/spaces" element={<Spaces />} />
+                <Route path="/spaces/:id" element={<SpaceDetail />} />
+                <Route path="/impressum" element={<Impressum />} />
+              </Routes>
+            </div>
+            <Footer />
+          </main>
+        </div>
+      </div>
+    </Router>
+  )
+}
+
+export default App
+

frontend/src/components/Footer.jsx

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react'
+
+function Footer() {
+  const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
+  const [logoError, setLogoError] = useState(false)
+
+  useEffect(() => {
+    setCurrentYear(new Date().getFullYear())
+  }, [])
+
+  return (
+    <footer className="bg-slate-800 border-t border-slate-700 mt-auto">
+      <div className="max-w-20xl mx-auto px-8 py-6">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            {!logoError ? (
+              <img 
+                src="/logo.webp" 
+                alt="Certigo Addon Logo" 
+                className="h-8 w-auto"
+                onError={() => setLogoError(true)}
+              />
+            ) : (
+              <div className="h-8 w-8 bg-slate-600 rounded flex items-center justify-center text-white font-bold text-sm">
+                CA
+              </div>
+            )}
+            <span className="text-slate-300 font-semibold text-lg">Certigo Addon</span>
+          </div>
+
+          {/* Copyright */}
+          <div className="text-slate-400 text-sm">
+            © {currentYear} Certigo Addon. Alle Rechte vorbehalten.
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

frontend/src/components/ProvidersSection.jsx

@@ -0,0 +1,341 @@
+import { useState, useEffect } from 'react'
+
+const ProvidersSection = () => {
+  const [providers, setProviders] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showConfigModal, setShowConfigModal] = useState(false)
+  const [selectedProvider, setSelectedProvider] = useState(null)
+  const [configValues, setConfigValues] = useState({})
+  const [testing, setTesting] = useState(false)
+  const [testResult, setTestResult] = useState(null)
+
+  useEffect(() => {
+    fetchProviders()
+  }, [])
+
+  const fetchProviders = async () => {
+    try {
+      const response = await fetch('/api/providers')
+      if (response.ok) {
+        const data = await response.json()
+        // Definiere feste Reihenfolge der Provider
+        const providerOrder = ['dummy-ca', 'autodns', 'hetzner']
+        const sortedProviders = providerOrder
+          .map(id => data.find(p => p.id === id))
+          .filter(p => p !== undefined)
+          .concat(data.filter(p => !providerOrder.includes(p.id)))
+        setProviders(sortedProviders)
+      }
+    } catch (err) {
+      console.error('Error fetching providers:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggleProvider = async (providerId, currentEnabled) => {
+    try {
+      const response = await fetch(`/api/providers/${providerId}/enabled`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ enabled: !currentEnabled }),
+      })
+
+      if (response.ok) {
+        fetchProviders()
+      } else {
+        alert('Fehler beim Ändern des Provider-Status')
+      }
+    } catch (err) {
+      console.error('Error toggling provider:', err)
+      alert('Fehler beim Ändern des Provider-Status')
+    }
+  }
+
+  const handleOpenConfig = async (provider) => {
+    setSelectedProvider(provider)
+    setTestResult(null)
+    
+    // Lade aktuelle Konfiguration
+    try {
+      const response = await fetch(`/api/providers/${provider.id}`)
+      if (response.ok) {
+        const data = await response.json()
+        // Initialisiere Config-Werte
+        const initialValues = {}
+        provider.settings.forEach(setting => {
+          if (data.config && data.config[setting.name] !== undefined) {
+            // Wenn Wert "***" ist, bedeutet das, dass es ein Passwort ist - leer lassen
+            initialValues[setting.name] = data.config[setting.name] === '***' ? '' : data.config[setting.name]
+          } else {
+            initialValues[setting.name] = setting.default || ''
+          }
+        })
+        setConfigValues(initialValues)
+      }
+    } catch (err) {
+      console.error('Error fetching provider config:', err)
+      // Initialisiere mit leeren Werten
+      const initialValues = {}
+      provider.settings.forEach(setting => {
+        initialValues[setting.name] = setting.default || ''
+      })
+      setConfigValues(initialValues)
+    }
+    
+    setShowConfigModal(true)
+  }
+
+  const handleCloseConfig = () => {
+    setShowConfigModal(false)
+    setSelectedProvider(null)
+    setConfigValues({})
+    setTestResult(null)
+  }
+
+  const handleConfigChange = (name, value) => {
+    setConfigValues({
+      ...configValues,
+      [name]: value,
+    })
+  }
+
+  const handleTestConnection = async () => {
+    if (!selectedProvider) return
+
+    setTesting(true)
+    setTestResult(null)
+
+    try {
+      const response = await fetch(`/api/providers/${selectedProvider.id}/test`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ settings: configValues }),
+      })
+
+      const result = await response.json()
+      setTestResult(result)
+    } catch (err) {
+      console.error('Error testing connection:', err)
+      setTestResult({
+        success: false,
+        message: 'Fehler beim Testen der Verbindung',
+      })
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const handleSaveConfig = async () => {
+    if (!selectedProvider) return
+
+    try {
+      const response = await fetch(`/api/providers/${selectedProvider.id}/config`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ settings: configValues }),
+      })
+
+      if (response.ok) {
+        handleCloseConfig()
+        fetchProviders()
+      } else {
+        const error = await response.text()
+        alert(`Fehler beim Speichern: ${error}`)
+      }
+    } catch (err) {
+      console.error('Error saving config:', err)
+      alert('Fehler beim Speichern der Konfiguration')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
+        <h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
+          SSL Certificate Providers
+        </h2>
+        <p className="text-slate-400 transition-colors duration-300">Lade Provider...</p>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 transition-all duration-300">
+        <h2 className="text-2xl font-semibold text-white mb-4 transition-colors duration-300">
+          SSL Certificate Providers
+        </h2>
+        <div className="space-y-3">
+          {providers.map((provider) => (
+            <div
+              key={provider.id}
+              className="bg-slate-700/50 rounded-lg p-4 border border-slate-600/50 transition-all duration-300"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-white mb-1 transition-colors duration-300">
+                    {provider.displayName}
+                  </h3>
+                  <p className="text-sm text-slate-300 mb-2 transition-colors duration-300">
+                    {provider.description}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleOpenConfig(provider)}
+                    className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
+                    title="Konfiguration"
+                    aria-label="Konfiguration"
+                  >
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                      <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </button>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={provider.enabled}
+                      onChange={() => handleToggleProvider(provider.id, provider.enabled)}
+                      className="sr-only peer"
+                    />
+                    <div className="w-11 h-6 bg-slate-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 transition-all duration-300"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Configuration Modal */}
+      {showConfigModal && selectedProvider && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-colors duration-300">
+          <div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-2xl w-full p-6 transition-all duration-300">
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-2xl font-bold text-white transition-colors duration-300">
+                {selectedProvider.displayName} - Konfiguration
+              </h3>
+              <button
+                onClick={handleCloseConfig}
+                className="p-2 text-slate-400 hover:text-white hover:bg-slate-700/50 rounded-lg transition-colors"
+                aria-label="Schließen"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="space-y-4 mb-6">
+              {selectedProvider.settings.length > 0 ? (
+                selectedProvider.settings.map((setting) => (
+                  <div key={setting.name}>
+                    <label className="block text-sm font-medium text-slate-200 mb-2 transition-colors duration-300">
+                      {setting.label}
+                      {setting.required && <span className="text-red-400 ml-1">*</span>}
+                    </label>
+                    {setting.description && (
+                      <p className="text-xs text-slate-400 mb-2 transition-colors duration-300">{setting.description}</p>
+                    )}
+                    {setting.type === 'password' ? (
+                      <input
+                        type="password"
+                        value={configValues[setting.name] || ''}
+                        onChange={(e) => handleConfigChange(setting.name, e.target.value)}
+                        className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
+                        placeholder={setting.label}
+                        required={setting.required}
+                      />
+                    ) : (
+                      <input
+                        type={setting.type || 'text'}
+                        value={configValues[setting.name] || ''}
+                        onChange={(e) => handleConfigChange(setting.name, e.target.value)}
+                        className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
+                        placeholder={setting.label}
+                        required={setting.required}
+                      />
+                    )}
+                  </div>
+                ))
+              ) : (
+                <p className="text-slate-300 text-center py-4 transition-colors duration-300">
+                  Dieser Provider benötigt keine Konfiguration.
+                </p>
+              )}
+            </div>
+
+            {testResult && (
+              <div
+                className={`mb-4 p-4 rounded-lg border ${
+                  testResult.success
+                    ? 'bg-green-500/20 border-green-500/50'
+                    : 'bg-red-500/20 border-red-500/50'
+                }`}
+              >
+                <p
+                  className={`text-sm ${
+                    testResult.success ? 'text-green-300' : 'text-red-300'
+                  }`}
+                >
+                  {testResult.success ? '✅' : '❌'} {testResult.message}
+                </p>
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              {selectedProvider.settings.length > 0 && (
+                <button
+                  onClick={handleTestConnection}
+                  disabled={testing}
+                  className="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
+                >
+                  {testing ? 'Teste...' : 'Verbindung testen'}
+                </button>
+              )}
+              <button
+                onClick={handleSaveConfig}
+                className="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200"
+              >
+                Speichern
+              </button>
+              <button
+                onClick={handleCloseConfig}
+                className="px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
+              >
+                Abbrechen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ProvidersSection
+

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,98 @@
+import { Link, useLocation } from 'react-router-dom'
+
+const Sidebar = ({ isOpen, setIsOpen }) => {
+  const location = useLocation()
+
+  const menuItems = [
+    { path: '/', label: 'Home', icon: '🏠' },
+    { path: '/spaces', label: 'Spaces', icon: '📁' },
+    { path: '/impressum', label: 'Impressum', icon: 'ℹ️' },
+  ]
+
+  const isActive = (path) => {
+    if (path === '/') {
+      return location.pathname === '/'
+    }
+    return location.pathname.startsWith(path)
+  }
+
+  return (
+    <>
+      {/* Overlay for mobile */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-300"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`fixed lg:static top-0 left-0 h-full z-40 transform transition-all duration-300 ease-in-out bg-slate-800/95 backdrop-blur-sm border-r border-slate-600/50 shadow-xl ${
+          isOpen ? 'w-64 translate-x-0' : 'w-16 -translate-x-0 lg:translate-x-0'
+        }`}
+      >
+        <div className="p-4 border-b border-slate-700/50 flex items-center justify-between h-16">
+          {isOpen && (
+            <h1 className="text-xl font-bold text-white whitespace-nowrap overflow-hidden">
+              Certigo Addon
+            </h1>
+          )}
+          {/* Burger Menu Button - rechts in der Sidebar */}
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="ml-auto p-2 rounded-lg transition-all duration-200 flex-shrink-0 bg-slate-700/50 hover:bg-slate-700 text-white"
+            aria-label="Toggle menu"
+          >
+            <div className="w-5 h-4 relative flex flex-col justify-between">
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? 'rotate-45 translate-y-1.5' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? 'opacity-0' : 'opacity-100'
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-full bg-white rounded-full transition-all duration-300 ${
+                  isOpen ? '-rotate-45 -translate-y-1.5' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        <nav className="px-2 py-4 overflow-hidden">
+          <ul className="space-y-2">
+            {menuItems.map((item) => (
+              <li key={item.path}>
+                <Link
+                  to={item.path}
+                  className={`flex items-center px-3 py-3 rounded-lg transition-all duration-200 ${
+                    isActive(item.path)
+                      ? 'bg-slate-700 text-white font-semibold shadow-md'
+                      : 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
+                  }`}
+                  title={!isOpen ? item.label : ''}
+                >
+                  <span className={`text-xl flex-shrink-0 ${isOpen ? 'mr-3' : 'mx-auto'}`}>
+                    {item.icon}
+                  </span>
+                  {isOpen && (
+                    <span className="whitespace-nowrap overflow-hidden">
+                      {item.label}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </aside>
+    </>
+  )
+}
+
+export default Sidebar
+

frontend/src/index.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Checkmark Animation */
+.checkmark-animated {
+  animation: checkmarkScale 0.6s ease-in-out;
+}
+
+.circle-draw {
+  stroke-dasharray: 62.83;
+  stroke-dashoffset: 62.83;
+  animation: drawCircle 0.6s ease-in-out forwards;
+}
+
+.check-draw {
+  stroke-dasharray: 10;
+  stroke-dashoffset: 10;
+  animation: drawCheck 0.4s ease-in-out 0.3s forwards;
+}
+
+@keyframes drawCircle {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes drawCheck {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes checkmarkScale {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+

frontend/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+

frontend/src/pages/Home.jsx

@@ -0,0 +1,303 @@
+import { useEffect, useState, useRef, useCallback } from 'react'
+import ProvidersSection from '../components/ProvidersSection'
+
+const Home = () => {
+  const [data, setData] = useState(null)
+  const [stats, setStats] = useState(null)
+  const [loadingStats, setLoadingStats] = useState(true)
+  const [lastUpdate, setLastUpdate] = useState(null)
+  const intervalRef = useRef(null)
+  const isMountedRef = useRef(true)
+
+  // Fetch stats function
+  const fetchStats = useCallback(async (isInitial = false) => {
+    try {
+      if (isInitial) {
+        setLoadingStats(true)
+      }
+      const response = await fetch('/api/stats')
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const statsData = await response.json()
+      if (isMountedRef.current) {
+        setStats(statsData)
+        setLoadingStats(false)
+        setLastUpdate(new Date())
+      }
+    } catch (err) {
+      console.error('Error fetching stats:', err)
+      if (isMountedRef.current) {
+        setLoadingStats(false)
+      }
+    }
+  }, [])
+
+  // Fetch health function
+  const fetchHealth = useCallback(async () => {
+    try {
+      const response = await fetch('/api/health')
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const healthData = await response.json()
+      if (isMountedRef.current) {
+        setData(healthData)
+      }
+    } catch (err) {
+      console.error('Error fetching health:', err)
+    }
+  }, [])
+
+  // Handle visibility change - pause polling when tab is hidden
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // Tab is hidden, clear interval
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current)
+          intervalRef.current = null
+        }
+      } else {
+        // Tab is visible, resume polling
+        if (!intervalRef.current && isMountedRef.current) {
+          // Fetch immediately when tab becomes visible
+          fetch('/api/stats')
+            .then(res => res.json())
+            .then(statsData => {
+              if (isMountedRef.current) {
+                setStats(statsData)
+                setLastUpdate(new Date())
+              }
+            })
+            .catch(err => console.error('Error fetching stats:', err))
+          
+          fetch('/api/health')
+            .then(res => res.json())
+            .then(healthData => {
+              if (isMountedRef.current) {
+                setData(healthData)
+              }
+            })
+            .catch(err => console.error('Error fetching health:', err))
+          
+          // Resume polling
+          intervalRef.current = setInterval(() => {
+            if (isMountedRef.current) {
+              fetch('/api/stats')
+                .then(res => res.json())
+                .then(statsData => {
+                  if (isMountedRef.current) {
+                    setStats(statsData)
+                    setLastUpdate(new Date())
+                  }
+                })
+                .catch(err => console.error('Error fetching stats:', err))
+              
+              fetch('/api/health')
+                .then(res => res.json())
+                .then(healthData => {
+                  if (isMountedRef.current) {
+                    setData(healthData)
+                  }
+                })
+                .catch(err => console.error('Error fetching health:', err))
+            }
+          }, 5000)
+        }
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [])
+
+  useEffect(() => {
+    isMountedRef.current = true
+    
+    // Define fetch functions inside useEffect to avoid dependency issues
+    const fetchStatsInternal = async (isInitial = false) => {
+      try {
+        if (isInitial) {
+          setLoadingStats(true)
+        }
+        const response = await fetch('/api/stats')
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        const statsData = await response.json()
+        if (isMountedRef.current) {
+          setStats(statsData)
+          setLoadingStats(false)
+          setLastUpdate(new Date())
+        }
+      } catch (err) {
+        console.error('Error fetching stats:', err)
+        if (isMountedRef.current) {
+          setLoadingStats(false)
+        }
+      }
+    }
+
+    const fetchHealthInternal = async () => {
+      try {
+        const response = await fetch('/api/health')
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`)
+        }
+        const healthData = await response.json()
+        if (isMountedRef.current) {
+          setData(healthData)
+        }
+      } catch (err) {
+        console.error('Error fetching health:', err)
+      }
+    }
+    
+    // Initial fetch
+    fetchHealthInternal()
+    fetchStatsInternal(true) // Pass true for initial load to show loading state
+
+    // Set up polling interval (5 seconds)
+    intervalRef.current = setInterval(() => {
+      if (isMountedRef.current) {
+        fetchStatsInternal(false) // Pass false for background updates
+        fetchHealthInternal()
+      }
+    }, 5000)
+
+    // Cleanup on unmount
+    return () => {
+      isMountedRef.current = false
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, []) // Empty dependency array - only run on mount
+
+  return (
+    <div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
+      <div className="max-w-10xl mx-auto">
+        <h1 className="text-4xl font-bold text-white mb-4">Willkommen</h1>
+        <p className="text-lg text-slate-200 mb-8">
+          Dies ist die Startseite der Certigo Addon Anwendung.
+        </p>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+          {/* Stats Dashboard */}
+          <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-semibold text-white">
+                Statistiken
+              </h2>
+              {lastUpdate && (
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                  <span className="text-xs text-slate-400">
+                    {new Date(lastUpdate).toLocaleTimeString('de-DE', { 
+                      hour: '2-digit', 
+                      minute: '2-digit',
+                      second: '2-digit'
+                    })}
+                  </span>
+                </div>
+              )}
+            </div>
+            {!stats && loadingStats ? (
+              <p className="text-slate-400">Lade Statistiken...</p>
+            ) : stats ? (
+              <div className="grid grid-cols-1 gap-4">
+                <div className="bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg p-4 border border-blue-500/30">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-slate-300 mb-1">Spaces</p>
+                      <p className="text-3xl font-bold text-white">{stats.spaces}</p>
+                    </div>
+                    <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
+                      <svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-lg p-4 border border-green-500/30">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-slate-300 mb-1">FQDNs</p>
+                      <p className="text-3xl font-bold text-white">{stats.fqdns}</p>
+                    </div>
+                    <div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
+                      <svg className="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg p-4 border border-purple-500/30">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-slate-300 mb-1">CSRs</p>
+                      <p className="text-3xl font-bold text-white">{stats.csrs}</p>
+                    </div>
+                    <div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
+                      <svg className="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 rounded-lg p-4 border border-yellow-500/30">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-slate-300 mb-1">Zertifikate</p>
+                      <p className="text-3xl font-bold text-white">{stats.certificates || 0}</p>
+                    </div>
+                    <div className="w-12 h-12 bg-yellow-500/20 rounded-full flex items-center justify-center">
+                      <svg className="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <p className="text-slate-400">Fehler beim Laden der Statistiken</p>
+            )}
+          </div>
+
+          {/* System Status */}
+          <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
+            <h2 className="text-2xl font-semibold text-white mb-4">
+              System Status
+            </h2>
+            {data ? (
+              <div className="space-y-2">
+                <p className="text-slate-200">
+                  <span className="font-medium">Status:</span>{' '}
+                  <span className="text-green-400">{data.status}</span>
+                </p>
+                <p className="text-slate-200">
+                  <span className="font-medium">Nachricht:</span> {data.message}
+                </p>
+              </div>
+            ) : (
+              <p className="text-slate-400">Lade Daten...</p>
+            )}
+          </div>
+
+          {/* SSL Certificate Providers */}
+          <ProvidersSection />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home
+

frontend/src/pages/Impressum.jsx

@@ -0,0 +1,41 @@
+const Impressum = () => {
+  return (
+    <div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold text-white mb-4">Impressum</h1>
+        
+        <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 space-y-6">
+          <section>
+            <h2 className="text-2xl font-semibold text-white mb-3">
+              Angaben gemäß § 5 TMG
+            </h2>
+            <p className="text-slate-200">
+              Hier können Sie Ihre rechtlichen Angaben eintragen.
+            </p>
+          </section>
+          
+          <section>
+            <h2 className="text-2xl font-semibold text-white mb-3">
+              Kontakt
+            </h2>
+            <p className="text-slate-200">
+              Kontaktinformationen können hier eingetragen werden.
+            </p>
+          </section>
+          
+          <section>
+            <h2 className="text-2xl font-semibold text-white mb-3">
+              Haftungsausschluss
+            </h2>
+            <p className="text-slate-200">
+              Haftungsausschluss-Informationen können hier eingetragen werden.
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Impressum
+

frontend/src/pages/Spaces.jsx

@@ -0,0 +1,460 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+const Spaces = () => {
+  const navigate = useNavigate()
+  const [spaces, setSpaces] = useState([])
+  const [showForm, setShowForm] = useState(false)
+  const [formData, setFormData] = useState({
+    name: '',
+    description: ''
+  })
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [fetchError, setFetchError] = useState('')
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [spaceToDelete, setSpaceToDelete] = useState(null)
+  const [fqdnCount, setFqdnCount] = useState(0)
+  const [confirmChecked, setConfirmChecked] = useState(false)
+  const [deleteFqdnsChecked, setDeleteFqdnsChecked] = useState(false)
+  const [copiedId, setCopiedId] = useState(null)
+
+  useEffect(() => {
+    fetchSpaces()
+  }, [])
+
+  const fetchSpaces = async () => {
+    try {
+      setFetchError('')
+      const response = await fetch('/api/spaces')
+      if (response.ok) {
+        const data = await response.json()
+        // Stelle sicher, dass data ein Array ist
+        setSpaces(Array.isArray(data) ? data : [])
+      } else {
+        const errorText = `Fehler beim Abrufen der Spaces: ${response.status}`
+        console.error(errorText)
+        setFetchError(errorText)
+        setSpaces([])
+      }
+    } catch (err) {
+      const errorText = 'Fehler beim Abrufen der Spaces. Bitte stellen Sie sicher, dass das Backend läuft.'
+      console.error('Error fetching spaces:', err)
+      setFetchError(errorText)
+      setSpaces([])
+    }
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    if (!formData.name.trim()) {
+      setError('Bitte geben Sie einen Namen ein.')
+      setLoading(false)
+      return
+    }
+
+    try {
+      const response = await fetch('/api/spaces', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      })
+
+      if (response.ok) {
+        const newSpace = await response.json()
+        setSpaces([...spaces, newSpace])
+        setFormData({ name: '', description: '' })
+        setShowForm(false)
+      } else {
+        const errorData = await response.json()
+        setError(errorData.error || 'Fehler beim Erstellen des Space')
+      }
+    } catch (err) {
+      setError('Fehler beim Erstellen des Space')
+      console.error('Error creating space:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const handleDelete = async (space) => {
+    // Hole die Anzahl der FQDNs für diesen Space
+    let count = 0
+    try {
+      const countResponse = await fetch(`/api/spaces/${space.id}/fqdns/count`)
+      if (countResponse.ok) {
+        const countData = await countResponse.json()
+        count = countData.count || 0
+      }
+    } catch (err) {
+      console.error('Error fetching FQDN count:', err)
+      count = 0
+    }
+
+    // Setze State und öffne Modal erst nach dem Laden der FQDN-Anzahl
+    setFqdnCount(count)
+    setSpaceToDelete(space)
+    setConfirmChecked(false)
+    setDeleteFqdnsChecked(false)
+    setShowDeleteModal(true)
+  }
+
+  const confirmDelete = async () => {
+    if (!confirmChecked || !spaceToDelete) {
+      return
+    }
+
+    // Wenn FQDNs vorhanden sind, muss die Checkbox aktiviert sein
+    if (fqdnCount > 0 && !deleteFqdnsChecked) {
+      alert('Bitte aktivieren Sie die Checkbox, um die FQDNs mitzulöschen.')
+      return
+    }
+
+    try {
+      const url = fqdnCount > 0 && deleteFqdnsChecked
+        ? `/api/spaces/${spaceToDelete.id}?deleteFqdns=true`
+        : `/api/spaces/${spaceToDelete.id}`
+
+      const response = await fetch(url, {
+        method: 'DELETE',
+      })
+
+      if (response.ok) {
+        setSpaces(spaces.filter(space => space.id !== spaceToDelete.id))
+        setShowDeleteModal(false)
+        setSpaceToDelete(null)
+        setConfirmChecked(false)
+        setDeleteFqdnsChecked(false)
+        setFqdnCount(0)
+      } else {
+        const errorText = await response.text()
+        let errorMessage = 'Fehler beim Löschen des Space'
+        try {
+          const errorData = JSON.parse(errorText)
+          errorMessage = errorData.error || errorText
+        } catch {
+          errorMessage = errorText || errorMessage
+        }
+        alert(errorMessage)
+      }
+    } catch (err) {
+      console.error('Error deleting space:', err)
+      alert('Fehler beim Löschen des Space')
+    }
+  }
+
+  const cancelDelete = () => {
+    setShowDeleteModal(false)
+    setSpaceToDelete(null)
+    setConfirmChecked(false)
+    setDeleteFqdnsChecked(false)
+    setFqdnCount(0)
+  }
+
+  const copyToClipboard = async (id, e) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(id)
+      setCopiedId(id)
+      setTimeout(() => setCopiedId(null), 2000)
+    } catch (err) {
+      console.error('Fehler beim Kopieren:', err)
+    }
+  }
+
+  return (
+    <div className="p-8 min-h-full bg-gradient-to-r from-slate-700 to-slate-900">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-4xl font-bold text-white mb-2">Spaces</h1>
+            <p className="text-lg text-slate-200">
+              Verwalten Sie Ihre Spaces und Arbeitsbereiche.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowForm(!showForm)}
+            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200"
+          >
+            {showForm ? 'Abbrechen' : '+ Neuer Space'}
+          </button>
+        </div>
+
+        {/* Create Space Form */}
+        {showForm && (
+          <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6 mb-6">
+            <h2 className="text-2xl font-semibold text-white mb-4">
+              Neuen Space erstellen
+            </h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-slate-200 mb-2">
+                  Name *
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  placeholder="Geben Sie einen Namen ein"
+                  required
+                />
+              </div>
+              <div>
+                <label htmlFor="description" className="block text-sm font-medium text-slate-200 mb-2">
+                  Beschreibung
+                </label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  rows="4"
+                  className="w-full px-4 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                  placeholder="Geben Sie eine Beschreibung ein (optional)"
+                />
+              </div>
+              {error && (
+                <div className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm">
+                  {error}
+                </div>
+              )}
+              <div className="flex gap-3">
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
+                >
+                  {loading ? 'Wird erstellt...' : 'Space erstellen'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForm(false)
+                    setFormData({ name: '', description: '' })
+                    setError('')
+                  }}
+                  className="px-6 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
+                >
+                  Abbrechen
+                </button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Spaces List */}
+        <div className="bg-slate-800/80 backdrop-blur-sm rounded-lg shadow-xl border border-slate-600/50 p-6">
+          <h2 className="text-2xl font-semibold text-white mb-4">
+            Ihre Spaces
+          </h2>
+          {fetchError && (
+            <div className="mb-4 p-4 bg-red-500/20 border border-red-500/50 rounded-lg">
+              <p className="text-red-300 mb-2">{fetchError}</p>
+              <button
+                onClick={fetchSpaces}
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-all duration-200"
+              >
+                Erneut versuchen
+              </button>
+            </div>
+          )}
+          {!fetchError && spaces.length === 0 ? (
+            <p className="text-slate-300 text-center py-8">
+              Noch keine Spaces vorhanden. Erstellen Sie Ihren ersten Space!
+            </p>
+          ) : (
+            <div className="space-y-4">
+              {spaces.map((space) => (
+                <div
+                  key={space.id || Math.random()}
+                  className="bg-slate-700/50 rounded-lg p-4 border border-slate-600/50 hover:border-slate-500 transition-colors cursor-pointer shadow-soft"
+                  onClick={() => navigate(`/spaces/${space.id}`)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-xl font-semibold text-white mb-2">
+                        {space.name || 'Unbenannt'}
+                      </h3>
+                      {space.description && (
+                        <p className="text-slate-300 mb-2">{space.description}</p>
+                      )}
+                      <p className="text-xs text-slate-400">
+                        Erstellt: {space.createdAt ? new Date(space.createdAt).toLocaleString('de-DE') : 'Unbekannt'}
+                      </p>
+                      {space.id && (
+                        <p className="text-xs text-slate-500 font-mono mt-1">
+                          ID: {space.id}
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex gap-2 ml-4">
+                      <button
+                        onClick={(e) => copyToClipboard(space.id, e)}
+                        className="p-2 text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 rounded-lg transition-colors"
+                        title={copiedId === space.id ? 'Kopiert!' : 'ID kopieren'}
+                        aria-label="ID kopieren"
+                      >
+                        {copiedId === space.id ? (
+                          <svg
+                            className="w-5 h-5"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path d="M5 13l4 4L19 7" />
+                          </svg>
+                        ) : (
+                          <svg
+                            className="w-5 h-5"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                          </svg>
+                        )}
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDelete(space)
+                        }}
+                        className="p-2 text-red-400 hover:text-red-300 hover:bg-red-500/20 rounded-lg transition-colors"
+                        title="Space löschen"
+                        aria-label="Space löschen"
+                      >
+                        <svg
+                          className="w-5 h-5"
+                          fill="none"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && spaceToDelete && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-md w-full p-6">
+            <div className="flex items-center mb-4">
+              <div className="flex-shrink-0 w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center mr-4">
+                <svg
+                  className="w-6 h-6 text-red-400"
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-bold text-white">
+                Space löschen
+              </h3>
+            </div>
+
+            <div className="mb-6">
+              <p className="text-slate-300 mb-4">
+                Möchten Sie den Space <span className="font-semibold text-white">{spaceToDelete.name}</span> wirklich löschen?
+              </p>
+
+              {fqdnCount > 0 ? (
+                <div className="mb-4 p-4 bg-yellow-500/20 border border-yellow-500/50 rounded-lg">
+                  <p className="text-yellow-300 text-sm mb-3">
+                    ⚠️ Dieser Space enthält <span className="font-semibold">{fqdnCount}</span> {fqdnCount === 1 ? 'FQDN' : 'FQDNs'}. 
+                    Der Space kann nur gelöscht werden, wenn Sie die FQDNs mitlöschen.
+                  </p>
+                  <label className="flex items-start cursor-pointer group">
+                    <input
+                      type="checkbox"
+                      checked={deleteFqdnsChecked}
+                      onChange={(e) => setDeleteFqdnsChecked(e.target.checked)}
+                      className="mt-1 w-5 h-5 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-800 cursor-pointer"
+                    />
+                    <span className="ml-3 text-sm text-slate-300 group-hover:text-white transition-colors">
+                      Alle {fqdnCount} {fqdnCount === 1 ? 'FQDN' : 'FQDNs'} mit diesem Space löschen
+                    </span>
+                  </label>
+                </div>
+              ) : (
+                <p className="text-sm text-green-400 mb-4">
+                  ✓ Dieser Space enthält keine FQDNs und kann gelöscht werden.
+                </p>
+              )}
+
+              <p className="text-sm text-red-400 mb-4">
+                Diese Aktion kann nicht rückgängig gemacht werden.
+              </p>
+
+              <label className="flex items-start cursor-pointer group">
+                <input
+                  type="checkbox"
+                  checked={confirmChecked}
+                  onChange={(e) => setConfirmChecked(e.target.checked)}
+                  className="mt-1 w-5 h-5 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-800 cursor-pointer"
+                />
+                <span className="ml-3 text-sm text-slate-300 group-hover:text-white transition-colors">
+                  Ich bestätige, dass ich diesen Space unwiderruflich löschen möchte
+                </span>
+              </label>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={confirmDelete}
+                disabled={!confirmChecked || (fqdnCount > 0 && !deleteFqdnsChecked)}
+                className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200"
+              >
+                Löschen
+              </button>
+              <button
+                onClick={cancelDelete}
+                className="flex-1 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
+              >
+                Abbrechen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Spaces
+