feat: 7 Vorbereitungs-Module auf 100% — Frontend, Proxy-Routen, Backend-Fixes

Profil: machineBuilder-Felder im POST-Body, PATCH-Handler
Scope: API-Route (GET/POST), ScopeDecisionTab Props + Buttons, Export-Druckansicht HTML
Anwendung: PUT-Handler, Bearbeiten-Button, Pagination/Search
Import: Verlauf laden, DELETE-Route, Offline-Badge, ObjectURL Memory-Leak fix
Screening: Security-Backlog Button verdrahtet, Scan-Verlauf
Module: Detail-Seite, GET-Proxy, Konfigurieren-Button, Modul-erstellen-Modal, Error-Toast
Quellen: 10 Proxy-Routen, Tab-Komponenten umgestellt, Dashboard-Tab, blocked_today Bug fix, Datum-Filter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

admin-compliance/app/(sdk)/sdk/modules/[moduleId]/page.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+interface ModuleDetail {
+  id: string
+  name: string
+  display_name: string
+  description: string
+  is_active: boolean
+  criticality: string
+  processes_pii: boolean
+  ai_components: boolean
+  compliance_score: number | null
+  regulation_count: number
+  risk_count: number
+  requirements?: Array<{
+    id: string
+    title: string
+    status: string
+    regulation: string
+  }>
+  controls?: Array<{
+    id: string
+    title: string
+    status: string
+    description: string
+  }>
+  regulations?: string[]
+}
+
+export default function ModuleDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const moduleId = params.moduleId as string
+
+  const [module, setModule] = useState<ModuleDetail | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const response = await fetch(`/api/sdk/v1/modules/${encodeURIComponent(moduleId)}`)
+        if (!response.ok) {
+          throw new Error('Modul nicht gefunden')
+        }
+        const data = await response.json()
+        setModule(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Fehler beim Laden')
+      } finally {
+        setLoading(false)
+      }
+    }
+    if (moduleId) load()
+  }, [moduleId])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-gray-500">Lade Modul-Details...</div>
+      </div>
+    )
+  }
+
+  if (error || !module) {
+    return (
+      <div className="space-y-4">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+          <h3 className="text-lg font-semibold text-red-800">Fehler</h3>
+          <p className="text-red-600 mt-1">{error || 'Modul nicht gefunden'}</p>
+        </div>
+        <Link href="/sdk/modules" className="text-purple-600 hover:text-purple-700">
+          Zurueck zur Uebersicht
+        </Link>
+      </div>
+    )
+  }
+
+  const criticalityColors: Record<string, string> = {
+    HIGH: 'bg-red-100 text-red-700',
+    MEDIUM: 'bg-yellow-100 text-yellow-700',
+    LOW: 'bg-green-100 text-green-700',
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-500">
+        <Link href="/sdk/modules" className="hover:text-purple-600">Module</Link>
+        <span>/</span>
+        <span className="text-gray-900">{module.display_name || module.name}</span>
+      </div>
+
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{module.display_name || module.name}</h1>
+          <p className="text-gray-500 mt-1">{module.description}</p>
+          <div className="flex items-center gap-3 mt-3">
+            <span className={`px-2 py-1 text-xs rounded-full ${module.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
+              {module.is_active ? 'Aktiv' : 'Inaktiv'}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${criticalityColors[module.criticality?.toUpperCase()] || 'bg-gray-100 text-gray-700'}`}>
+              {module.criticality}
+            </span>
+            {module.processes_pii && (
+              <span className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-700">PII</span>
+            )}
+            {module.ai_components && (
+              <span className="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-700">KI</span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={() => router.push('/sdk/modules')}
+          className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+        >
+          Zurueck
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <div className="text-sm text-gray-500">Compliance Score</div>
+          <div className="text-3xl font-bold text-purple-600">
+            {module.compliance_score != null ? `${module.compliance_score}%` : '—'}
+          </div>
+        </div>
+        <div className="bg-white rounded-xl border border-blue-200 p-6">
+          <div className="text-sm text-blue-600">Regulierungen</div>
+          <div className="text-3xl font-bold text-blue-600">{module.regulation_count || 0}</div>
+        </div>
+        <div className="bg-white rounded-xl border border-orange-200 p-6">
+          <div className="text-sm text-orange-600">Risiken</div>
+          <div className="text-3xl font-bold text-orange-600">{module.risk_count || 0}</div>
+        </div>
+      </div>
+
+      {/* Requirements */}
+      {module.requirements && module.requirements.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            <h3 className="font-semibold text-gray-900">Anforderungen</h3>
+          </div>
+          <div className="divide-y divide-gray-100">
+            {module.requirements.map(req => (
+              <div key={req.id} className="px-6 py-4 flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{req.title}</p>
+                  <p className="text-xs text-gray-500">{req.regulation}</p>
+                </div>
+                <span className={`px-2 py-1 text-xs rounded-full ${
+                  req.status === 'IMPLEMENTED' || req.status === 'VERIFIED'
+                    ? 'bg-green-100 text-green-700'
+                    : req.status === 'IN_PROGRESS'
+                    ? 'bg-yellow-100 text-yellow-700'
+                    : 'bg-gray-100 text-gray-500'
+                }`}>
+                  {req.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Controls */}
+      {module.controls && module.controls.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+            <h3 className="font-semibold text-gray-900">Kontrollen</h3>
+          </div>
+          <div className="divide-y divide-gray-100">
+            {module.controls.map(ctrl => (
+              <div key={ctrl.id} className="px-6 py-4">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-medium text-gray-900">{ctrl.title}</p>
+                  <span className={`px-2 py-1 text-xs rounded-full ${
+                    ctrl.status === 'IMPLEMENTED' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
+                  }`}>
+                    {ctrl.status}
+                  </span>
+                </div>
+                <p className="text-xs text-gray-500 mt-1">{ctrl.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Regulations */}
+      {module.regulations && module.regulations.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <h3 className="font-semibold text-gray-900 mb-3">Zugeordnete Regulierungen</h3>
+          <div className="flex flex-wrap gap-2">
+            {module.regulations.map(reg => (
+              <span key={reg} className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">{reg}</span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/(sdk)/sdk/modules/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import { useSDK, ServiceModule } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 
@@ -126,11 +127,13 @@ function ModuleCard({
   isActive,
   onActivate,
   onDeactivate,
+  onConfigure,
 }: {
   module: DisplayModule
   isActive: boolean
   onActivate: () => void
   onDeactivate: () => void
+  onConfigure: () => void
 }) {
   const categoryColors = {
     gdpr: 'bg-blue-100 text-blue-700',
@@ -208,7 +211,10 @@ function ModuleCard({
       <div className="mt-4 flex items-center gap-2">
         {isActive ? (
           <>
-            <button className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors">
+            <button
+              onClick={onConfigure}
+              className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors"
+            >
               Konfigurieren
             </button>
             <button
@@ -237,10 +243,16 @@ function ModuleCard({
 
 export default function ModulesPage() {
   const { state, dispatch } = useSDK()
+  const router = useRouter()
   const [filter, setFilter] = useState<string>('all')
   const [availableModules, setAvailableModules] = useState<Omit<DisplayModule, 'status' | 'completionPercent'>[]>(fallbackModules)
   const [isLoadingModules, setIsLoadingModules] = useState(true)
   const [backendError, setBackendError] = useState<string | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [newModuleName, setNewModuleName] = useState('')
+  const [newModuleCategory, setNewModuleCategory] = useState<ModuleCategory>('custom')
+  const [newModuleDescription, setNewModuleDescription] = useState('')
+  const [actionError, setActionError] = useState<string | null>(null)
 
   // Load modules from backend
   useEffect(() => {
@@ -312,26 +324,79 @@ export default function ModulesPage() {
       hasAIComponents: module.hasAIComponents,
     }
     dispatch({ type: 'ADD_MODULE', payload: serviceModule })
+    setActionError(null)
 
     try {
-      await fetch(`/api/sdk/v1/modules/${encodeURIComponent(module.id)}/activate`, {
+      const res = await fetch(`/api/sdk/v1/modules/${encodeURIComponent(module.id)}/activate`, {
         method: 'POST',
       })
+      if (!res.ok) throw new Error('Aktivierung fehlgeschlagen')
     } catch {
-      console.warn('Could not persist module activation to backend')
+      // Rollback optimistic update
+      const rollbackModules = state.modules.filter(m => m.id !== module.id)
+      dispatch({ type: 'SET_STATE', payload: { modules: rollbackModules } })
+      setActionError(`Modul "${module.name}" konnte nicht aktiviert werden.`)
+      setTimeout(() => setActionError(null), 5000)
     }
   }
 
   const handleDeactivateModule = async (moduleId: string) => {
+    const previousModules = [...state.modules]
     const updatedModules = state.modules.filter(m => m.id !== moduleId)
     dispatch({ type: 'SET_STATE', payload: { modules: updatedModules } })
+    setActionError(null)
 
     try {
-      await fetch(`/api/sdk/v1/modules/${encodeURIComponent(moduleId)}/deactivate`, {
+      const res = await fetch(`/api/sdk/v1/modules/${encodeURIComponent(moduleId)}/deactivate`, {
         method: 'POST',
       })
+      if (!res.ok) throw new Error('Deaktivierung fehlgeschlagen')
     } catch {
-      console.warn('Could not persist module deactivation to backend')
+      // Rollback optimistic update
+      dispatch({ type: 'SET_STATE', payload: { modules: previousModules } })
+      setActionError('Modul konnte nicht deaktiviert werden.')
+      setTimeout(() => setActionError(null), 5000)
+    }
+  }
+
+  const handleCreateModule = async () => {
+    if (!newModuleName.trim()) return
+
+    try {
+      const res = await fetch('/api/sdk/v1/modules', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: newModuleName,
+          category: newModuleCategory,
+          description: newModuleDescription,
+        }),
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        const newMod: Omit<DisplayModule, 'status' | 'completionPercent'> = {
+          id: data.id || `custom-${Date.now()}`,
+          name: newModuleName,
+          description: newModuleDescription,
+          category: newModuleCategory,
+          regulations: [],
+          criticality: 'MEDIUM',
+          processesPersonalData: false,
+          hasAIComponents: false,
+          requirementsCount: 0,
+          controlsCount: 0,
+        }
+        setAvailableModules(prev => [...prev, newMod])
+      }
+
+      setShowCreateModal(false)
+      setNewModuleName('')
+      setNewModuleCategory('custom')
+      setNewModuleDescription('')
+    } catch {
+      setActionError('Modul konnte nicht erstellt werden.')
+      setTimeout(() => setActionError(null), 5000)
     }
   }
 
@@ -347,7 +412,10 @@ export default function ModulesPage() {
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
       >
-        <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+        >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
           </svg>
@@ -355,6 +423,78 @@ export default function ModulesPage() {
         </button>
       </StepHeader>
 
+      {/* Error Toast */}
+      {actionError && (
+        <div className="fixed top-4 right-4 z-50 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg max-w-sm">
+          <div className="flex items-start gap-2">
+            <svg className="w-5 h-5 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <p className="text-sm text-red-700">{actionError}</p>
+          </div>
+        </div>
+      )}
+
+      {/* Create Module Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Eigenes Modul erstellen</h3>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newModuleName}
+                  onChange={e => setNewModuleName(e.target.value)}
+                  placeholder="z.B. ISO 42001 AI Management"
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+                <select
+                  value={newModuleCategory}
+                  onChange={e => setNewModuleCategory(e.target.value as ModuleCategory)}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                >
+                  <option value="gdpr">DSGVO</option>
+                  <option value="ai-act">AI Act</option>
+                  <option value="iso27001">ISO 27001</option>
+                  <option value="nis2">NIS2</option>
+                  <option value="custom">Eigene</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+                <textarea
+                  value={newModuleDescription}
+                  onChange={e => setNewModuleDescription(e.target.value)}
+                  placeholder="Was deckt dieses Modul ab?"
+                  rows={3}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-6">
+              <button
+                onClick={() => setShowCreateModal(false)}
+                className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
+              >
+                Abbrechen
+              </button>
+              <button
+                onClick={handleCreateModule}
+                disabled={!newModuleName.trim()}
+                className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+              >
+                Erstellen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Backend Status */}
       {backendError && (
         <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">
@@ -434,6 +574,7 @@ export default function ModulesPage() {
             isActive={state.modules.some(m => m.id === module.id)}
             onActivate={() => handleActivateModule(module)}
             onDeactivate={() => handleDeactivateModule(module.id)}
+            onConfigure={() => router.push(`/sdk/modules/${module.id}`)}
           />
         ))}
       </div>