feat: Package 4 Phase 2 — Frontend-Fixes und Backend-Endpoints vervollständigt

- document-generator: STEP_EXPLANATIONS Key 'consent' → 'document-generator'
- Proxy: Content-Type nicht mehr hardcoded; forwarded vom Client (Fix für DOCX-Upload + multipart/arrayBuffer)
- Backend: GET /documents/{id}, DELETE /documents/{id}, GET /versions/{id} ergänzt
- Backend-Tests: 4 neue Tests für die neuen Endpoints
- consent/page.tsx: Create-Modal + handleCreateDocument() + DELETE-Handler verdrahtet
- einwilligungen/page.tsx: odentifier→identifier, ip_address, user_agent, history aus API gemappt; source nullable
- cookie-banner/page.tsx: handleExportCode() + Toast für 'Code exportieren' Button
- workflow/page.tsx: 'Neues Dokument' Button + createDocument() + Modal

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

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

@@ -67,7 +67,7 @@ function transformApiDocument(doc: ApiDocument): LegalDocument {
 // COMPONENTS
 // =============================================================================
 
-function DocumentCard({ document }: { document: LegalDocument }) {
+function DocumentCard({ document, onDelete }: { document: LegalDocument; onDelete: (id: string) => void }) {
   const typeColors = {
     'privacy-policy': 'bg-blue-100 text-blue-700',
     terms: 'bg-green-100 text-green-700',
@@ -149,6 +149,12 @@ function DocumentCard({ document }: { document: LegalDocument }) {
               Veroeffentlichen
             </button>
           )}
+          <button
+            onClick={() => onDelete(document.id)}
+            className="px-3 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+          >
+            Loeschen
+          </button>
         </div>
       </div>
     </div>
@@ -165,6 +171,9 @@ export default function ConsentPage() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [filter, setFilter] = useState<string>('all')
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [newDocForm, setNewDocForm] = useState({ type: 'privacy_policy', name: '', description: '' })
+  const [creating, setCreating] = useState(false)
 
   useEffect(() => {
     loadDocuments()
@@ -192,6 +201,51 @@ export default function ConsentPage() {
     }
   }
 
+  async function handleCreateDocument() {
+    if (!newDocForm.name.trim()) return
+    setCreating(true)
+    try {
+      const token = localStorage.getItem('bp_admin_token')
+      const res = await fetch('/api/admin/consent/documents', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(token ? { 'Authorization': `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify(newDocForm),
+      })
+      if (res.ok) {
+        setShowCreateModal(false)
+        setNewDocForm({ type: 'privacy_policy', name: '', description: '' })
+        await loadDocuments()
+      } else {
+        setError('Fehler beim Erstellen des Dokuments')
+      }
+    } catch {
+      setError('Verbindungsfehler beim Erstellen')
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function handleDeleteDocument(id: string) {
+    if (!confirm('Dokument wirklich löschen?')) return
+    try {
+      const token = localStorage.getItem('bp_admin_token')
+      const res = await fetch(`/api/admin/consent/documents/${id}`, {
+        method: 'DELETE',
+        headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+      })
+      if (res.ok || res.status === 204) {
+        setDocuments(prev => prev.filter(d => d.id !== id))
+      } else {
+        setError('Fehler beim Löschen des Dokuments')
+      }
+    } catch {
+      setError('Verbindungsfehler beim Löschen')
+    }
+  }
+
   const filteredDocuments = filter === 'all'
     ? documents
     : documents.filter(d => d.type === filter || d.status === filter)
@@ -211,7 +265,10 @@ export default function ConsentPage() {
         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>
@@ -308,7 +365,7 @@ export default function ConsentPage() {
       {/* Documents List */}
       <div className="space-y-4">
         {filteredDocuments.map(document => (
-          <DocumentCard key={document.id} document={document} />
+          <DocumentCard key={document.id} document={document} onDelete={handleDeleteDocument} />
         ))}
       </div>
 
@@ -323,6 +380,68 @@ export default function ConsentPage() {
           <p className="mt-2 text-gray-500">Passen Sie den Filter an oder erstellen Sie ein neues Dokument.</p>
         </div>
       )}
+
+      {/* Create Document Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h2 className="text-lg font-bold text-gray-900">Neues Dokument erstellen</h2>
+            </div>
+            <div className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Dokumenttyp</label>
+                <select
+                  value={newDocForm.type}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, type: e.target.value })}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                >
+                  <option value="privacy_policy">Datenschutzerklärung</option>
+                  <option value="terms">AGB</option>
+                  <option value="cookie_policy">Cookie-Richtlinie</option>
+                  <option value="imprint">Impressum</option>
+                  <option value="dpa">AVV (Auftragsverarbeitung)</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newDocForm.name}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, name: e.target.value })}
+                  placeholder="z.B. Datenschutzerklärung Website"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung (optional)</label>
+                <textarea
+                  rows={2}
+                  value={newDocForm.description}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, description: e.target.value })}
+                  placeholder="Kurze Beschreibung..."
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+              <button
+                onClick={() => setShowCreateModal(false)}
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg"
+              >
+                Abbrechen
+              </button>
+              <button
+                onClick={handleCreateDocument}
+                disabled={creating || !newDocForm.name.trim()}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+              >
+                {creating ? 'Erstellen...' : 'Erstellen'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

admin-compliance/app/(sdk)/sdk/cookie-banner/page.tsx

@@ -222,6 +222,7 @@ export default function CookieBannerPage() {
   const [categories, setCategories] = useState<CookieCategory[]>([])
   const [config, setConfig] = useState<BannerConfig>(defaultConfig)
   const [isSaving, setIsSaving] = useState(false)
+  const [exportToast, setExportToast] = useState<string | null>(null)
 
   React.useEffect(() => {
     const loadConfig = async () => {
@@ -263,6 +264,25 @@ export default function CookieBannerPage() {
     }
   }
 
+  const handleExportCode = async () => {
+    try {
+      const res = await fetch('/api/sdk/v1/einwilligungen/cookie-banner/embed-code')
+      if (res.ok) {
+        const data = await res.json()
+        const code = data.embed_code || data.script || ''
+        await navigator.clipboard.writeText(code)
+        setExportToast('Embed-Code in Zwischenablage kopiert!')
+        setTimeout(() => setExportToast(null), 3000)
+      } else {
+        setExportToast('Fehler beim Laden des Embed-Codes')
+        setTimeout(() => setExportToast(null), 3000)
+      }
+    } catch {
+      setExportToast('Fehler beim Kopieren in die Zwischenablage')
+      setTimeout(() => setExportToast(null), 3000)
+    }
+  }
+
   const handleSaveConfig = async () => {
     setIsSaving(true)
     try {
@@ -288,6 +308,13 @@ export default function CookieBannerPage() {
 
   return (
     <div className="space-y-6">
+      {/* Toast notification */}
+      {exportToast && (
+        <div className="fixed top-4 right-4 z-50 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-lg text-sm">
+          {exportToast}
+        </div>
+      )}
+
       {/* Step Header */}
       <StepHeader
         stepId="cookie-banner"
@@ -297,7 +324,10 @@ export default function CookieBannerPage() {
         tips={stepInfo.tips}
       >
         <div className="flex items-center gap-2">
-          <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          <button
+            onClick={handleExportCode}
+            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
             Code exportieren
           </button>
           <button

admin-compliance/app/(sdk)/sdk/document-generator/page.tsx

@@ -416,8 +416,8 @@ export default function DocumentGeneratorPage() {
     .map((t) => `## ${t.documentTitle || 'Abschnitt'}\n\n${t.text}`)
     .join('\n\n---\n\n')
 
-  // Step info - using 'consent' as base since document-generator doesn't exist yet
-  const stepInfo = STEP_EXPLANATIONS['consent'] || {
+  // Step info
+  const stepInfo = STEP_EXPLANATIONS['document-generator'] || {
     title: 'Dokumentengenerator',
     description: 'Generieren Sie rechtliche Dokumente aus lizenzkonformen Vorlagen',
     explanation: 'Der Dokumentengenerator nutzt frei lizenzierte Textbausteine um Datenschutzerklaerungen, AGB und andere rechtliche Dokumente zu erstellen.',

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

@@ -123,7 +123,7 @@ interface ConsentHistoryEntry {
 
 interface ConsentRecord {
   id: string
-  odentifier: string
+  identifier: string
   email: string
   firstName?: string
   lastName?: string
@@ -132,7 +132,7 @@ interface ConsentRecord {
   currentVersion: string
   grantedAt: Date | null
   withdrawnAt: Date | null
-  source: string
+  source: string | null
   ipAddress: string
   userAgent: string
   history: ConsentHistoryEntry[]
@@ -145,7 +145,7 @@ interface ConsentRecord {
 const mockRecords: ConsentRecord[] = [
   {
     id: 'c-1',
-    odentifier: 'usr-001',
+    identifier: 'usr-001',
     email: 'max.mustermann@example.de',
     firstName: 'Max',
     lastName: 'Mustermann',
@@ -194,7 +194,7 @@ const mockRecords: ConsentRecord[] = [
   },
   {
     id: 'c-2',
-    odentifier: 'usr-001',
+    identifier: 'usr-001',
     email: 'max.mustermann@example.de',
     firstName: 'Max',
     lastName: 'Mustermann',
@@ -220,7 +220,7 @@ const mockRecords: ConsentRecord[] = [
   },
   {
     id: 'c-3',
-    odentifier: 'usr-002',
+    identifier: 'usr-002',
     email: 'anna.schmidt@example.de',
     firstName: 'Anna',
     lastName: 'Schmidt',
@@ -256,7 +256,7 @@ const mockRecords: ConsentRecord[] = [
   },
   {
     id: 'c-4',
-    odentifier: 'usr-003',
+    identifier: 'usr-003',
     email: 'peter.meier@example.de',
     firstName: 'Peter',
     lastName: 'Meier',
@@ -305,7 +305,7 @@ const mockRecords: ConsentRecord[] = [
   },
   {
     id: 'c-5',
-    odentifier: 'usr-004',
+    identifier: 'usr-004',
     email: 'lisa.weber@example.de',
     firstName: 'Lisa',
     lastName: 'Weber',
@@ -331,7 +331,7 @@ const mockRecords: ConsentRecord[] = [
   },
   {
     id: 'c-6',
-    odentifier: 'usr-005',
+    identifier: 'usr-005',
     email: 'thomas.klein@example.de',
     firstName: 'Thomas',
     lastName: 'Klein',
@@ -491,7 +491,7 @@ function ConsentDetailModal({ record, onClose, onRevoke }: ConsentDetailModalPro
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-500">User-ID:</span>
-                  <span className="font-mono text-xs bg-gray-200 px-2 py-0.5 rounded">{record.odentifier}</span>
+                  <span className="font-mono text-xs bg-gray-200 px-2 py-0.5 rounded">{record.identifier}</span>
                 </div>
               </div>
             </div>
@@ -535,7 +535,7 @@ function ConsentDetailModal({ record, onClose, onRevoke }: ConsentDetailModalPro
               </div>
               <div>
                 <div className="text-gray-500 mb-1">Quelle</div>
-                <div className="bg-white px-3 py-2 rounded border">{record.source}</div>
+                <div className="bg-white px-3 py-2 rounded border">{record.source ?? '—'}</div>
               </div>
               <div className="col-span-2">
                 <div className="text-gray-500 mb-1">User-Agent</div>
@@ -683,7 +683,7 @@ function ConsentRecordRow({ record, onShowDetails }: ConsentRecordRowProps) {
     <tr className="hover:bg-gray-50">
       <td className="px-6 py-4">
         <div className="text-sm font-medium text-gray-900">{record.email}</div>
-        <div className="text-xs text-gray-500">{record.odentifier}</div>
+        <div className="text-xs text-gray-500">{record.identifier}</div>
       </td>
       <td className="px-6 py-4">
         <span className={`px-2 py-1 text-xs rounded-full ${typeColors[record.consentType]}`}>
@@ -755,19 +755,22 @@ export default function EinwilligungenPage() {
                 revoked_at?: string
                 consent_version?: string
                 source?: string
+                ip_address?: string
+                user_agent?: string
+                history?: ConsentHistoryEntry[]
               }) => ({
                 id: c.id,
-                odentifier: c.user_id,
+                identifier: c.user_id,
                 email: c.user_id,
                 consentType: (c.data_point_id as ConsentType) || 'privacy',
                 status: (c.revoked_at ? 'withdrawn' : 'granted') as ConsentStatus,
                 currentVersion: c.consent_version || '1.0',
                 grantedAt: c.granted_at ? new Date(c.granted_at) : null,
                 withdrawnAt: c.revoked_at ? new Date(c.revoked_at) : null,
-                source: c.source || 'API',
-                ipAddress: '',
-                userAgent: '',
-                history: [],
+                source: c.source ?? null,
+                ipAddress: c.ip_address ?? '',
+                userAgent: c.user_agent ?? '',
+                history: c.history ?? [],
               }))
               setRecords(mapped)
             }
@@ -786,7 +789,7 @@ export default function EinwilligungenPage() {
     const matchesFilter = filter === 'all' || record.consentType === filter || record.status === filter
     const matchesSearch = searchQuery === '' ||
       record.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      record.odentifier.toLowerCase().includes(searchQuery.toLowerCase())
+      record.identifier.toLowerCase().includes(searchQuery.toLowerCase())
     return matchesFilter && matchesSearch
   })
 

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

@@ -86,6 +86,9 @@ export default function WorkflowPage() {
   const [showApprovalModal, setShowApprovalModal] = useState<'approve' | 'reject' | null>(null)
   const [showCompareView, setShowCompareView] = useState(false)
   const [uploading, setUploading] = useState(false)
+  const [showNewDocModal, setShowNewDocModal] = useState(false)
+  const [newDocForm, setNewDocForm] = useState({ type: 'privacy_policy', name: '', description: '' })
+  const [creatingDoc, setCreatingDoc] = useState(false)
 
   // Refs for synchronized scrolling
   const leftPanelRef = useRef<HTMLDivElement>(null)
@@ -444,6 +447,31 @@ export default function WorkflowPage() {
     }
   }
 
+  const createDocument = async () => {
+    if (!newDocForm.name.trim()) return
+    setCreatingDoc(true)
+    try {
+      const res = await fetch('/api/admin/consent/documents', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(newDocForm),
+      })
+      if (res.ok) {
+        const newDoc: Document = await res.json()
+        setDocuments(prev => [newDoc, ...prev])
+        setSelectedDocument(newDoc)
+        setShowNewDocModal(false)
+        setNewDocForm({ type: 'privacy_policy', name: '', description: '' })
+      } else {
+        setError('Fehler beim Erstellen des Dokuments')
+      }
+    } catch {
+      setError('Verbindungsfehler beim Erstellen')
+    } finally {
+      setCreatingDoc(false)
+    }
+  }
+
   const getNextVersionNumber = () => {
     if (versions.length === 0) return '1.0'
     const latest = versions[0]
@@ -517,6 +545,13 @@ export default function WorkflowPage() {
               </span>
             )}
 
+            <button
+              onClick={() => setShowNewDocModal(true)}
+              className="px-3 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg"
+            >
+              + Neues Dokument
+            </button>
+
             <button
               onClick={() => setShowCompareView(true)}
               className="px-3 py-2 text-sm text-purple-600 hover:text-purple-800 border border-purple-300 rounded-lg hover:bg-purple-50"
@@ -1026,6 +1061,68 @@ export default function WorkflowPage() {
         </div>
       )}
 
+      {/* New Document Modal */}
+      {showNewDocModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h2 className="text-lg font-bold text-gray-900">Neues Dokument erstellen</h2>
+            </div>
+            <div className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Dokumenttyp</label>
+                <select
+                  value={newDocForm.type}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, type: e.target.value })}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                >
+                  <option value="privacy_policy">Datenschutzerklärung</option>
+                  <option value="terms">AGB</option>
+                  <option value="cookie_policy">Cookie-Richtlinie</option>
+                  <option value="imprint">Impressum</option>
+                  <option value="dpa">AVV (Auftragsverarbeitung)</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                <input
+                  type="text"
+                  value={newDocForm.name}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, name: e.target.value })}
+                  placeholder="z.B. Datenschutzerklärung Website"
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung (optional)</label>
+                <textarea
+                  rows={2}
+                  value={newDocForm.description}
+                  onChange={(e) => setNewDocForm({ ...newDocForm, description: e.target.value })}
+                  placeholder="Kurze Beschreibung..."
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+              <button
+                onClick={() => setShowNewDocModal(false)}
+                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg"
+              >
+                Abbrechen
+              </button>
+              <button
+                onClick={createDocument}
+                disabled={creatingDoc || !newDocForm.name.trim()}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+              >
+                {creatingDoc ? 'Erstellen...' : 'Erstellen'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Approval Modal */}
       {showApprovalModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">

admin-compliance/app/api/admin/consent/[[...path]]/route.ts

@@ -22,9 +22,9 @@ async function proxyRequest(
     : `${basePath}${searchParams ? `?${searchParams}` : ''}`
 
   try {
-    const headers: HeadersInit = {
-      'Content-Type': 'application/json',
-    }
+    const headers: HeadersInit = {}
+    const contentType = request.headers.get('Content-Type')
+    if (contentType) headers['Content-Type'] = contentType
 
     const headerNames = ['authorization', 'x-namespace-id', 'x-tenant-slug']
     for (const name of headerNames) {
@@ -47,9 +47,17 @@ async function proxyRequest(
     }
 
     if (method === 'POST' || method === 'PUT') {
-      const body = await request.text()
-      if (body) {
-        fetchOptions.body = body
+      const isMultipart = contentType?.includes('multipart/form-data')
+      if (isMultipart) {
+        const buffer = await request.arrayBuffer()
+        if (buffer.byteLength > 0) {
+          fetchOptions.body = buffer
+        }
+      } else {
+        const body = await request.text()
+        if (body) {
+          fetchOptions.body = body
+        }
       }
     }