feat(vendor-assessment): Pruefprotokoll + Frontend + Sidebar

Phase 4-5: Professional Pruefprotokoll report builder with styled HTML
output (Kopfdaten, Kategorie-Scores, L1/L2 Check-Hierarchie, Findings,
Freigabe-Block). Frontend at /sdk/vendor-assessment with 3-step flow:
DocumentUploader → AssessmentProgress → PruefprotokollView.

Sidebar: "Use-Case Audits" → "Vertragspruefung" renamed.

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

admin-compliance/app/sdk/vendor-assessment/page.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import React, { useState, useCallback } from 'react'
+import { DocumentUploader } from './_components/DocumentUploader'
+import { AssessmentProgress } from './_components/AssessmentProgress'
+import { PruefprotokollView } from './_components/PruefprotokollView'
+
+type View = 'upload' | 'progress' | 'result'
+
+interface AssessmentResult {
+  vendor_name: string
+  documents: DocumentResult[]
+  findings: Finding[]
+  overall_score: number
+  category_scores: Record<string, number>
+  cross_check_findings: CrossCheckFinding[]
+  report_html: string
+  checked_at: string
+}
+
+interface DocumentResult {
+  label: string
+  url: string
+  doc_type: string
+  word_count: number
+  completeness_pct: number
+  correctness_pct: number
+  checks: Check[]
+  findings_count: number
+  error: string
+}
+
+interface Check {
+  id: string
+  label: string
+  passed: boolean
+  severity: string
+  level: number
+  parent: string | null
+  skipped: boolean
+  hint: string
+  matched_text: string
+}
+
+interface Finding {
+  id: string
+  category: string
+  severity: string
+  type: string
+  title: string
+  description: string
+  recommendation: string
+  document_label: string
+  document_type: string
+}
+
+interface CrossCheckFinding {
+  id: string
+  label: string
+  severity: string
+  hint: string
+}
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_COMPLIANCE_API_URL || ''
+
+export default function VendorAssessmentPage() {
+  const [view, setView] = useState<View>('upload')
+  const [assessmentId, setAssessmentId] = useState<string>('')
+  const [result, setResult] = useState<AssessmentResult | null>(null)
+  const [error, setError] = useState('')
+
+  const handleStartAssessment = useCallback(async (
+    vendorName: string,
+    documents: Array<{ doc_type: string; label: string; url: string }>,
+  ) => {
+    setError('')
+    try {
+      const res = await fetch(`${BACKEND_URL}/api/vendor-compliance/assessments`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ vendor_name: vendorName, documents }),
+      })
+      if (!res.ok) throw new Error(await res.text())
+      const data = await res.json()
+      setAssessmentId(data.assessment_id)
+      setView('progress')
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Starten')
+    }
+  }, [])
+
+  const handleComplete = useCallback((data: AssessmentResult) => {
+    setResult(data)
+    setView('result')
+  }, [])
+
+  const handleReset = useCallback(() => {
+    setView('upload')
+    setAssessmentId('')
+    setResult(null)
+    setError('')
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-5xl mx-auto px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Vertragspruefung</h1>
+          <p className="text-gray-600 mt-2">
+            Automatisierte Pruefung von Auftragsverarbeitungsvertraegen gem. Art. 28 DSGVO
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-red-700 text-sm">{error}</p>
+            <button onClick={() => setError('')} className="text-xs text-red-500 mt-1 underline">
+              Schliessen
+            </button>
+          </div>
+        )}
+
+        {view === 'upload' && (
+          <DocumentUploader onStart={handleStartAssessment} />
+        )}
+
+        {view === 'progress' && assessmentId && (
+          <AssessmentProgress
+            assessmentId={assessmentId}
+            backendUrl={BACKEND_URL}
+            onComplete={handleComplete}
+            onError={(msg) => { setError(msg); setView('upload') }}
+          />
+        )}
+
+        {view === 'result' && result && (
+          <PruefprotokollView result={result} onReset={handleReset} />
+        )}
+      </div>
+    </div>
+  )
+}