feat(use-case-compiler): MC-based compliance questionnaires with scoring

Implements the Use-Case Compiler that turns Master Controls into
interactive compliance audits. 5 templates (Vendor Check, SAST/DAST,
DSGVO, NIS2, CRA), deterministic + LLM question generation, scoring
engine with regulation/severity breakdown, and gap detection.

- Backend: 9 API endpoints, 22 unit tests (all pass)
- Frontend: Template selector, questionnaire, result dashboard
- Migration 027: usecase_audits + usecase_answers tables

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/use-case-audit/page.tsx

@@ -0,0 +1,208 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { UseCaseSelector } from './_components/UseCaseSelector'
+
+interface Template {
+  id: string
+  name: string
+  description: string
+  mc_filters: string[]
+  regulations: string[]
+}
+
+interface AuditSummary {
+  id: string
+  template_id: string
+  name: string
+  target_name: string
+  status: string
+  total_questions: number
+  answered_questions: number
+  compliance_score: number
+  created_at: string
+  completed_at: string | null
+}
+
+const TENANT_ID = '00000000-0000-0000-0000-000000000001'
+
+const STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  draft: { label: 'Entwurf', color: 'bg-gray-100 text-gray-700' },
+  in_progress: { label: 'In Bearbeitung', color: 'bg-blue-100 text-blue-700' },
+  completed: { label: 'Abgeschlossen', color: 'bg-green-100 text-green-700' },
+}
+
+export default function UseCaseAuditPage() {
+  const [view, setView] = useState<'list' | 'new'>('list')
+  const [templates, setTemplates] = useState<Template[]>([])
+  const [audits, setAudits] = useState<AuditSummary[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const loadData = useCallback(async () => {
+    try {
+      const [tRes, aRes] = await Promise.all([
+        fetch('/api/sdk/v1/use-case/templates'),
+        fetch('/api/sdk/v1/use-case/audits', {
+          headers: { 'X-Tenant-ID': TENANT_ID },
+        }),
+      ])
+      if (tRes.ok) {
+        const td = await tRes.json()
+        setTemplates(td.templates || [])
+      }
+      if (aRes.ok) {
+        const ad = await aRes.json()
+        setAudits(ad.audits || [])
+      }
+    } catch { /* ignore */ }
+  }, [])
+
+  useEffect(() => { loadData() }, [loadData])
+
+  const handleCreateAudit = async (templateId: string, name: string, targetName: string) => {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch('/api/sdk/v1/use-case/audits', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Tenant-ID': TENANT_ID,
+        },
+        body: JSON.stringify({
+          template_id: templateId,
+          name,
+          target_name: targetName,
+        }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.error || 'Audit konnte nicht erstellt werden')
+      }
+      const data = await res.json()
+      window.location.href = `/sdk/use-case-audit/${data.audit.id}`
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Use-Case Audits</h1>
+            <p className="text-gray-600 mt-2">
+              Compliance-Pruefungen aus Master Controls — interaktive Frageboegen mit Scoring.
+            </p>
+          </div>
+          {view === 'list' ? (
+            <button
+              onClick={() => setView('new')}
+              className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm"
+            >
+              + Neuen Audit starten
+            </button>
+          ) : (
+            <button
+              onClick={() => setView('list')}
+              className="px-4 py-2 text-sm text-blue-600 hover:text-blue-800 border border-blue-200 rounded-lg hover:bg-blue-50"
+            >
+              Zurueck zur Liste
+            </button>
+          )}
+        </div>
+
+        {error && (
+          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-red-700">{error}</p>
+            <button onClick={() => setError('')} className="text-sm text-red-500 mt-1 underline">
+              Schliessen
+            </button>
+          </div>
+        )}
+
+        {view === 'new' && (
+          <UseCaseSelector
+            templates={templates}
+            onCreateAudit={handleCreateAudit}
+            loading={loading}
+          />
+        )}
+
+        {view === 'list' && (
+          <div>
+            {audits.length > 0 ? (
+              <div className="space-y-3">
+                {audits.map(a => {
+                  const st = STATUS_LABELS[a.status] || STATUS_LABELS.draft
+                  const progress = a.total_questions > 0
+                    ? Math.round((a.answered_questions / a.total_questions) * 100)
+                    : 0
+                  return (
+                    <a
+                      key={a.id}
+                      href={`/sdk/use-case-audit/${a.id}`}
+                      className="block bg-white rounded-xl shadow-sm border border-gray-200 p-5 hover:shadow-md hover:border-blue-300 transition-all"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-semibold text-gray-900 truncate">{a.name}</h3>
+                          {a.target_name && (
+                            <p className="text-sm text-gray-500 mt-0.5">{a.target_name}</p>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-3 ml-4">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${st.color}`}>
+                            {st.label}
+                          </span>
+                          <div className="text-right">
+                            <div className="text-sm font-medium text-gray-700">
+                              {a.answered_questions}/{a.total_questions}
+                            </div>
+                            <div className="w-20 h-1.5 bg-gray-200 rounded-full mt-1">
+                              <div
+                                className="h-full bg-blue-500 rounded-full transition-all"
+                                style={{ width: `${progress}%` }}
+                              />
+                            </div>
+                          </div>
+                          {a.status === 'completed' && (
+                            <div className={`text-lg font-bold ${
+                              a.compliance_score >= 80 ? 'text-green-600' :
+                              a.compliance_score >= 50 ? 'text-yellow-600' : 'text-red-600'
+                            }`}>
+                              {Math.round(a.compliance_score)}%
+                            </div>
+                          )}
+                          <span className="text-xs text-gray-400">
+                            {new Date(a.created_at).toLocaleDateString('de-DE')}
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  )
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-16 bg-white rounded-xl border border-gray-200">
+                <div className="text-4xl mb-4">&#128203;</div>
+                <h3 className="text-lg font-medium text-gray-700 mb-2">Noch keine Audits</h3>
+                <p className="text-gray-500 mb-6">Starten Sie Ihren ersten Compliance-Audit.</p>
+                <button
+                  onClick={() => setView('new')}
+                  className="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm"
+                >
+                  Jetzt starten
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}