refactor(admin): split dsfa, audit-llm, quality pages

Extract components and hooks from oversized page files (563/561/520 LOC)
into colocated _components/ and _hooks/ subdirectories. All three
page.tsx files are now thin orchestrators under 300 LOC each
(dsfa: 216, audit-llm: 121, quality: 163). Zero behavior changes.

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

admin-compliance/app/sdk/dsfa/_components/DSFACard.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+export interface DSFA {
+  id: string
+  title: string
+  description: string
+  status: 'draft' | 'in-review' | 'approved' | 'needs-update'
+  createdAt: string
+  updatedAt: string
+  approvedBy: string | null
+  riskLevel: 'low' | 'medium' | 'high' | 'critical'
+  processingActivity: string
+  dataCategories: string[]
+  recipients: string[]
+  measures: string[]
+}
+
+export function DSFACard({
+  dsfa,
+  onStatusChange,
+  onDelete,
+}: {
+  dsfa: DSFA
+  onStatusChange: (id: string, status: string) => void
+  onDelete: (id: string) => void
+}) {
+  const statusColors = {
+    draft: 'bg-gray-100 text-gray-600 border-gray-200',
+    'in-review': 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    approved: 'bg-green-100 text-green-700 border-green-200',
+    'needs-update': 'bg-orange-100 text-orange-700 border-orange-200',
+  }
+
+  const statusLabels = {
+    draft: 'Entwurf',
+    'in-review': 'In Pruefung',
+    approved: 'Genehmigt',
+    'needs-update': 'Aktualisierung erforderlich',
+  }
+
+  const riskColors = {
+    low: 'bg-green-100 text-green-700',
+    medium: 'bg-yellow-100 text-yellow-700',
+    high: 'bg-orange-100 text-orange-700',
+    critical: 'bg-red-100 text-red-700',
+  }
+
+  const createdDate = dsfa.createdAt
+    ? new Date(dsfa.createdAt).toLocaleDateString('de-DE')
+    : '—'
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${
+      dsfa.status === 'needs-update' ? 'border-orange-200' :
+      dsfa.status === 'approved' ? 'border-green-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 ${statusColors[dsfa.status]}`}>
+              {statusLabels[dsfa.status]}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${riskColors[dsfa.riskLevel]}`}>
+              Risiko: {dsfa.riskLevel === 'low' ? 'Niedrig' :
+                       dsfa.riskLevel === 'medium' ? 'Mittel' :
+                       dsfa.riskLevel === 'high' ? 'Hoch' : 'Kritisch'}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{dsfa.title}</h3>
+          <p className="text-sm text-gray-500 mt-1">{dsfa.description}</p>
+        </div>
+      </div>
+
+      <div className="mt-4 text-sm text-gray-600">
+        <p><span className="text-gray-500">Verarbeitungstaetigkeit:</span> {dsfa.processingActivity}</p>
+      </div>
+
+      <div className="mt-3 flex flex-wrap gap-1">
+        {dsfa.dataCategories.map(cat => (
+          <span key={cat} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
+            {cat}
+          </span>
+        ))}
+      </div>
+
+      {dsfa.measures.length > 0 && (
+        <div className="mt-3">
+          <span className="text-sm text-gray-500">Massnahmen:</span>
+          <div className="flex flex-wrap gap-1 mt-1">
+            {dsfa.measures.map(m => (
+              <span key={m} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
+                {m}
+              </span>
+            ))}
+          </div>
+        </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>Erstellt: {createdDate}</span>
+          {dsfa.approvedBy && (
+            <span className="ml-4">Genehmigt von: {dsfa.approvedBy}</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {dsfa.status === 'draft' && (
+            <button
+              onClick={() => onStatusChange(dsfa.id, 'in-review')}
+              className="px-3 py-1 text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors text-xs"
+            >
+              Zur Pruefung
+            </button>
+          )}
+          {dsfa.status === 'in-review' && (
+            <button
+              onClick={() => onStatusChange(dsfa.id, 'approved')}
+              className="px-3 py-1 text-green-600 hover:bg-green-50 rounded-lg transition-colors text-xs"
+            >
+              Genehmigen
+            </button>
+          )}
+          <button
+            onClick={() => onDelete(dsfa.id)}
+            className="px-3 py-1 text-red-500 hover:bg-red-50 rounded-lg transition-colors text-xs"
+          >
+            Loeschen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}