refactor(admin): split modules, security-backlog, consent pages

Extract components and hooks to _components/ and _hooks/ subdirectories
to bring all three page.tsx files under the 500-LOC hard cap.

modules/page.tsx:       595 → 239 LOC
security-backlog/page.tsx: 586 → 174 LOC
consent/page.tsx:       569 → 305 LOC

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

admin-compliance/app/sdk/consent/_components/DocumentCard.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import React from 'react'
+import type { LegalDocument } from '../_hooks/useConsentDocuments'
+
+export function DocumentCard({
+  document,
+  onDelete,
+  onEdit,
+  onPreview,
+}: {
+  document: LegalDocument
+  onDelete: (id: string) => void
+  onEdit: (id: string) => void
+  onPreview: (doc: LegalDocument) => void
+}) {
+  const typeColors = {
+    'privacy-policy': 'bg-blue-100 text-blue-700',
+    terms: 'bg-green-100 text-green-700',
+    'cookie-policy': 'bg-yellow-100 text-yellow-700',
+    imprint: 'bg-gray-100 text-gray-700',
+    dpa: 'bg-purple-100 text-purple-700',
+  }
+
+  const typeLabels = {
+    'privacy-policy': 'Datenschutz',
+    terms: 'AGB',
+    'cookie-policy': 'Cookie-Richtlinie',
+    imprint: 'Impressum',
+    dpa: 'AVV',
+  }
+
+  const statusColors = {
+    draft: 'bg-yellow-100 text-yellow-700',
+    active: 'bg-green-100 text-green-700',
+    archived: 'bg-gray-100 text-gray-500',
+  }
+
+  const statusLabels = {
+    draft: 'Entwurf',
+    active: 'Aktiv',
+    archived: 'Archiviert',
+  }
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${
+      document.status === 'draft' ? 'border-yellow-200' : 'border-gray-200'
+    }`}>
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-2">
+            <span className={`px-2 py-1 text-xs rounded-full ${typeColors[document.type]}`}>
+              {typeLabels[document.type]}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[document.status]}`}>
+              {statusLabels[document.status]}
+            </span>
+            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded uppercase">
+              {document.language}
+            </span>
+            <span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
+              v{document.version}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{document.name}</h3>
+        </div>
+      </div>
+
+      {document.changes.length > 0 && (
+        <div className="mt-3">
+          <span className="text-sm text-gray-500">Letzte Aenderungen:</span>
+          <ul className="mt-1 text-sm text-gray-600 list-disc list-inside">
+            {document.changes.slice(0, 2).map((change, i) => (
+              <li key={i}>{change}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
+        <div className="text-gray-500">
+          <span>Autor: {document.author}</span>
+          <span className="mx-2">|</span>
+          <span>Aktualisiert: {document.lastUpdated.toLocaleDateString('de-DE')}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => onEdit(document.id)}
+            className="px-3 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+          >
+            Bearbeiten
+          </button>
+          <button
+            onClick={() => onPreview(document)}
+            className="px-3 py-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            Vorschau
+          </button>
+          {document.status === 'draft' && (
+            <button
+              onClick={() => onEdit(document.id)}
+              className="px-3 py-1 bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
+            >
+              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>
+  )
+}