refactor(admin): split evidence, import, portfolio pages

Extract components and hooks from oversized pages into colocated
_components/ and _hooks/ subdirectories to enforce the 500-LOC hard cap.
page.tsx files reduced to 205, 121, and 136 LOC respectively.

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

admin-compliance/app/sdk/import/_components/FileItem.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import type { ImportedDocumentType } from '@/lib/sdk/types'
+
+export interface UploadedFile {
+  id: string
+  file: File
+  type: ImportedDocumentType
+  status: 'pending' | 'uploading' | 'analyzing' | 'complete' | 'error'
+  progress: number
+  error?: string
+}
+
+export const DOCUMENT_TYPES: { value: ImportedDocumentType; label: string; icon: string }[] = [
+  { value: 'DSFA', label: 'Datenschutz-Folgenabschaetzung (DSFA)', icon: '📄' },
+  { value: 'TOM', label: 'Technisch-organisatorische Massnahmen (TOMs)', icon: '🔒' },
+  { value: 'VVT', label: 'Verarbeitungsverzeichnis (VVT)', icon: '📊' },
+  { value: 'AGB', label: 'Allgemeine Geschaeftsbedingungen (AGB)', icon: '📜' },
+  { value: 'PRIVACY_POLICY', label: 'Datenschutzerklaerung', icon: '🔐' },
+  { value: 'COOKIE_POLICY', label: 'Cookie-Richtlinie', icon: '🍪' },
+  { value: 'RISK_ASSESSMENT', label: 'Risikobewertung', icon: '⚠️' },
+  { value: 'AUDIT_REPORT', label: 'Audit-Bericht', icon: '✅' },
+  { value: 'OTHER', label: 'Sonstiges Dokument', icon: '📎' },
+]
+
+export function FileItem({
+  file,
+  onTypeChange,
+  onRemove,
+}: {
+  file: UploadedFile
+  onTypeChange: (id: string, type: ImportedDocumentType) => void
+  onRemove: (id: string) => void
+}) {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-white rounded-xl border border-gray-200">
+      <div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+        <svg className="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+        </svg>
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <p className="font-medium text-gray-900 truncate">{file.file.name}</p>
+        <p className="text-sm text-gray-500">{(file.file.size / 1024 / 1024).toFixed(2)} MB</p>
+      </div>
+
+      <select
+        value={file.type}
+        onChange={e => onTypeChange(file.id, e.target.value as ImportedDocumentType)}
+        disabled={file.status !== 'pending'}
+        className="px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 disabled:opacity-50"
+      >
+        {DOCUMENT_TYPES.map(dt => (
+          <option key={dt.value} value={dt.value}>
+            {dt.icon} {dt.label}
+          </option>
+        ))}
+      </select>
+
+      {file.status === 'pending' && (
+        <button onClick={() => onRemove(file.id)} className="p-2 text-gray-400 hover:text-red-500 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="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+      {file.status === 'uploading' && (
+        <div className="flex items-center gap-2">
+          <div className="w-20 h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div className="h-full bg-purple-600 rounded-full transition-all" style={{ width: `${file.progress}%` }} />
+          </div>
+          <span className="text-sm text-gray-500">{file.progress}%</span>
+        </div>
+      )}
+      {file.status === 'analyzing' && (
+        <div className="flex items-center gap-2 text-purple-600">
+          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          <span className="text-sm">Analysiere...</span>
+        </div>
+      )}
+      {file.status === 'complete' && file.error === 'offline' && (
+        <div className="flex items-center gap-1 text-amber-600">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <span className="text-sm">Offline — nicht analysiert</span>
+        </div>
+      )}
+      {file.status === 'complete' && file.error !== 'offline' && (
+        <div className="flex items-center gap-1 text-green-600">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <span className="text-sm">Fertig</span>
+        </div>
+      )}
+      {file.status === 'error' && (
+        <div className="flex items-center gap-1 text-red-600">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <span className="text-sm">{file.error || 'Fehler'}</span>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/import/_components/GapAnalysisPreview.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import type { GapAnalysis, GapItem } from '@/lib/sdk/types'
+
+export function GapAnalysisPreview({ analysis }: { analysis: GapAnalysis }) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
+          <span className="text-2xl">📊</span>
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">Gap-Analyse Ergebnis</h3>
+          <p className="text-sm text-gray-500">
+            {analysis.totalGaps} Luecken in {analysis.gaps.length} Kategorien gefunden
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 gap-4 mb-6">
+        <div className="text-center p-4 bg-red-50 rounded-xl">
+          <div className="text-3xl font-bold text-red-600">{analysis.criticalGaps}</div>
+          <div className="text-sm text-red-600 font-medium">Kritisch</div>
+        </div>
+        <div className="text-center p-4 bg-orange-50 rounded-xl">
+          <div className="text-3xl font-bold text-orange-600">{analysis.highGaps}</div>
+          <div className="text-sm text-orange-600 font-medium">Hoch</div>
+        </div>
+        <div className="text-center p-4 bg-yellow-50 rounded-xl">
+          <div className="text-3xl font-bold text-yellow-600">{analysis.mediumGaps}</div>
+          <div className="text-sm text-yellow-600 font-medium">Mittel</div>
+        </div>
+        <div className="text-center p-4 bg-green-50 rounded-xl">
+          <div className="text-3xl font-bold text-green-600">{analysis.lowGaps}</div>
+          <div className="text-sm text-green-600 font-medium">Niedrig</div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {analysis.gaps.slice(0, 5).map((gap: GapItem) => (
+          <div
+            key={gap.id}
+            className={`p-4 rounded-lg border-l-4 ${
+              gap.severity === 'CRITICAL' ? 'bg-red-50 border-red-500' :
+              gap.severity === 'HIGH' ? 'bg-orange-50 border-orange-500' :
+              gap.severity === 'MEDIUM' ? 'bg-yellow-50 border-yellow-500' :
+              'bg-green-50 border-green-500'
+            }`}
+          >
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="font-medium text-gray-900">{gap.category}</div>
+                <p className="text-sm text-gray-600 mt-1">{gap.description}</p>
+              </div>
+              <span className={`px-2 py-1 text-xs font-medium rounded ${
+                gap.severity === 'CRITICAL' ? 'bg-red-100 text-red-700' :
+                gap.severity === 'HIGH' ? 'bg-orange-100 text-orange-700' :
+                gap.severity === 'MEDIUM' ? 'bg-yellow-100 text-yellow-700' :
+                'bg-green-100 text-green-700'
+              }`}>
+                {gap.severity}
+              </span>
+            </div>
+            <div className="mt-2 text-xs text-gray-500">
+              Regulierung: {gap.regulation} | Aktion: {gap.requiredAction}
+            </div>
+          </div>
+        ))}
+        {analysis.gaps.length > 5 && (
+          <p className="text-sm text-gray-500 text-center py-2">
+            + {analysis.gaps.length - 5} weitere Luecken
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/import/_components/ImportHistory.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+export function ImportHistory({
+  importHistory,
+  historyLoading,
+  onDelete,
+}: {
+  importHistory: any[]
+  historyLoading: boolean
+  onDelete: (id: string) => void
+}) {
+  if (historyLoading) {
+    return <div className="text-center py-4 text-sm text-gray-500">Import-Verlauf wird geladen...</div>
+  }
+
+  if (importHistory.length === 0) return null
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+      <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
+        <h3 className="font-semibold text-gray-900">Import-Verlauf</h3>
+        <p className="text-sm text-gray-500">{importHistory.length} fruehere Imports</p>
+      </div>
+      <div className="divide-y divide-gray-100">
+        {importHistory.map((item: any, idx: number) => (
+          <div key={item.id || idx} className="px-6 py-4 flex items-center justify-between hover:bg-gray-50">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-900">{item.name || item.filename || `Import #${idx + 1}`}</p>
+                <p className="text-xs text-gray-500">
+                  {item.document_type || item.type || 'Unbekannt'} — {item.uploaded_at ? new Date(item.uploaded_at).toLocaleString('de-DE') : 'Unbekannt'}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={() => onDelete(item.id)}
+              className="p-2 text-gray-400 hover:text-red-500 transition-colors"
+              title="Import loeschen"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/import/_components/UploadZone.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+
+export function UploadZone({
+  onFilesAdded,
+  isDisabled,
+}: {
+  onFilesAdded: (files: File[]) => void
+  isDisabled: boolean
+}) {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    if (!isDisabled) setIsDragging(true)
+  }, [isDisabled])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      if (isDisabled) return
+      const files = Array.from(e.dataTransfer.files).filter(
+        f => f.type === 'application/pdf' || f.type.startsWith('image/')
+      )
+      if (files.length > 0) onFilesAdded(files)
+    },
+    [onFilesAdded, isDisabled]
+  )
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && !isDisabled) {
+        onFilesAdded(Array.from(e.target.files))
+      }
+    },
+    [onFilesAdded, isDisabled]
+  )
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`relative border-2 border-dashed rounded-xl p-12 text-center transition-all ${
+        isDisabled
+          ? 'border-gray-200 bg-gray-50 cursor-not-allowed'
+          : isDragging
+          ? 'border-purple-500 bg-purple-50'
+          : 'border-gray-300 hover:border-purple-400 hover:bg-purple-50/50 cursor-pointer'
+      }`}
+    >
+      <input
+        type="file"
+        accept=".pdf,image/*"
+        multiple
+        onChange={handleFileSelect}
+        disabled={isDisabled}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+      />
+      <div className="flex flex-col items-center gap-4">
+        <div className={`w-16 h-16 rounded-full flex items-center justify-center ${isDragging ? 'bg-purple-100' : 'bg-gray-100'}`}>
+          <svg
+            className={`w-8 h-8 ${isDragging ? 'text-purple-600' : 'text-gray-400'}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+            />
+          </svg>
+        </div>
+        <div>
+          <p className="text-lg font-medium text-gray-900">
+            {isDragging ? 'Dateien hier ablegen' : 'Dokumente hochladen'}
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            Ziehen Sie PDF-Dateien hierher oder klicken Sie zum Auswaehlen
+          </p>
+        </div>
+        <div className="flex items-center gap-2 text-xs text-gray-400">
+          <span>Unterstuetzte Formate:</span>
+          <span className="px-2 py-0.5 bg-gray-100 rounded">PDF</span>
+          <span className="px-2 py-0.5 bg-gray-100 rounded">JPG</span>
+          <span className="px-2 py-0.5 bg-gray-100 rounded">PNG</span>
+        </div>
+      </div>
+    </div>
+  )
+}