feat: Vorbereitung-Module auf 100% — Persistenz, Backend-Services, UCCA Frontend

Phase A: PostgreSQL State Store (sdk_states Tabelle, InMemory-Fallback)
Phase B: Modules dynamisch vom Backend, Scope DB-Persistenz, Source Policy State
Phase C: UCCA Frontend (3 Seiten, Wizard, RiskScoreGauge), Obligations Live-Daten
Phase D: Document Import (PDF/LLM/Gap-Analyse), System Screening (SBOM/OSV.dev)
Phase E: Company Profile CRUD mit Audit-Logging
Phase F: Tests (Python + TypeScript), flow-data.ts DB-Tabellen aktualisiert

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

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

@@ -19,11 +19,26 @@ interface DisplayModule extends ServiceModule {
   completionPercent: number
 }
 
+interface BackendModule {
+  id: string
+  name: string
+  display_name: string
+  description: string
+  service_type: string | null
+  processes_pii: boolean
+  ai_components: boolean
+  criticality: string
+  is_active: boolean
+  compliance_score: number | null
+  regulation_count: number
+  risk_count: number
+}
+
 // =============================================================================
-// AVAILABLE MODULES (Templates)
+// FALLBACK MODULES (used when backend is unavailable)
 // =============================================================================
 
-const availableModules: Omit<DisplayModule, 'status' | 'completionPercent'>[] = [
+const fallbackModules: Omit<DisplayModule, 'status' | 'completionPercent'>[] = [
   {
     id: 'mod-gdpr',
     name: 'DSGVO Compliance',
@@ -74,6 +89,34 @@ const availableModules: Omit<DisplayModule, 'status' | 'completionPercent'>[] =
   },
 ]
 
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function categorizeModule(name: string): ModuleCategory {
+  const lower = name.toLowerCase()
+  if (lower.includes('dsgvo') || lower.includes('gdpr') || lower.includes('datenschutz')) return 'gdpr'
+  if (lower.includes('ai act') || lower.includes('ki-verordnung')) return 'ai-act'
+  if (lower.includes('iso 27001') || lower.includes('iso27001') || lower.includes('isms')) return 'iso27001'
+  if (lower.includes('nis2') || lower.includes('netz- und informations')) return 'nis2'
+  return 'custom'
+}
+
+function mapBackendToDisplay(m: BackendModule): Omit<DisplayModule, 'status' | 'completionPercent'> {
+  return {
+    id: m.id,
+    name: m.display_name || m.name,
+    description: m.description || '',
+    category: categorizeModule(m.display_name || m.name),
+    regulations: [],
+    criticality: (m.criticality || 'MEDIUM').toUpperCase(),
+    processesPersonalData: m.processes_pii,
+    hasAIComponents: m.ai_components,
+    requirementsCount: m.regulation_count || 0,
+    controlsCount: m.risk_count || 0,
+  }
+}
+
 // =============================================================================
 // COMPONENTS
 // =============================================================================
@@ -124,13 +167,15 @@ function ModuleCard({
           </div>
           <h3 className="text-lg font-semibold text-gray-900">{module.name}</h3>
           <p className="text-sm text-gray-500 mt-1">{module.description}</p>
-          <div className="mt-2 flex flex-wrap gap-1">
-            {module.regulations.map(reg => (
-              <span key={reg} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
-                {reg}
-              </span>
-            ))}
-          </div>
+          {module.regulations.length > 0 && (
+            <div className="mt-2 flex flex-wrap gap-1">
+              {module.regulations.map(reg => (
+                <span key={reg} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">
+                  {reg}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       </div>
 
@@ -193,6 +238,33 @@ function ModuleCard({
 export default function ModulesPage() {
   const { state, dispatch } = useSDK()
   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)
+
+  // Load modules from backend
+  useEffect(() => {
+    async function loadModules() {
+      try {
+        const response = await fetch('/api/sdk/v1/modules')
+        if (response.ok) {
+          const data = await response.json()
+          if (data.modules && data.modules.length > 0) {
+            const mapped = data.modules.map(mapBackendToDisplay)
+            setAvailableModules(mapped)
+            setBackendError(null)
+          }
+        } else {
+          setBackendError('Backend nicht erreichbar — zeige Standard-Module')
+        }
+      } catch {
+        setBackendError('Backend nicht erreichbar — zeige Standard-Module')
+      } finally {
+        setIsLoadingModules(false)
+      }
+    }
+    loadModules()
+  }, [])
 
   // Convert SDK modules to display modules with additional UI properties
   const displayModules: DisplayModule[] = availableModules.map(template => {
@@ -243,7 +315,6 @@ export default function ModulesPage() {
   }
 
   const handleDeactivateModule = (moduleId: string) => {
-    // Remove module by updating state without it
     const updatedModules = state.modules.filter(m => m.id !== moduleId)
     dispatch({ type: 'SET_STATE', payload: { modules: updatedModules } })
   }
@@ -268,6 +339,18 @@ export default function ModulesPage() {
         </button>
       </StepHeader>
 
+      {/* Backend Status */}
+      {backendError && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">
+          {backendError}
+        </div>
+      )}
+
+      {/* Loading */}
+      {isLoadingModules && (
+        <div className="text-center py-8 text-gray-500">Lade Module vom Backend...</div>
+      )}
+
       {/* Stats */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
         <div className="bg-white rounded-xl border border-gray-200 p-6">