refactor(admin): split controls, training, control-provenance, iace/verification pages

Each page.tsx exceeded the 500-LOC hard cap. Extracted components and hooks into
colocated _components/ and _hooks/ directories; page.tsx is now a thin orchestrator.

- controls/page.tsx: 944 → 180 LOC; extracted ControlCard, AddControlForm,
  LoadingSkeleton, TransitionErrorBanner, StatsCards, FilterBar, RAGPanel into
  _components/ and useControlsData, useRAGSuggestions into _hooks/; types into _types.ts
- training/page.tsx: 780 → 288 LOC; extracted ContentTab (inline content generator tab)
  into _components/ContentTab.tsx
- control-provenance/page.tsx: 739 → 122 LOC; extracted MarkdownRenderer, UsageBadge,
  PermBadge, LicenseMatrix, SourceRegistry into _components/; PROVENANCE_SECTIONS
  static data into _data/provenance-sections.ts
- iace/[projectId]/verification/page.tsx: 673 → 196 LOC; extracted StatusBadge,
  VerificationForm, CompleteModal, SuggestEvidenceModal, VerificationTable into _components/

Zero behavior changes; logic relocated verbatim.

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

admin-compliance/app/sdk/controls/_components/AddControlForm.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useState } from 'react'
+import type { ControlType } from '@/lib/sdk'
+
+interface FormData {
+  name: string
+  description: string
+  type: ControlType
+  category: string
+  owner: string
+}
+
+export function AddControlForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (data: FormData) => void
+  onCancel: () => void
+}) {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    description: '',
+    type: 'TECHNICAL',
+    category: '',
+    owner: '',
+  })
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Neue Kontrolle</h3>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={e => setFormData({ ...formData, name: e.target.value })}
+            placeholder="z.B. Zugriffskontrolle"
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+          <textarea
+            value={formData.description}
+            onChange={e => setFormData({ ...formData, description: e.target.value })}
+            placeholder="Beschreiben Sie die Kontrolle..."
+            rows={2}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+            <select
+              value={formData.type}
+              onChange={e => setFormData({ ...formData, type: e.target.value as ControlType })}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            >
+              <option value="TECHNICAL">Technisch</option>
+              <option value="ORGANIZATIONAL">Organisatorisch</option>
+              <option value="PHYSICAL">Physisch</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+            <input
+              type="text"
+              value={formData.category}
+              onChange={e => setFormData({ ...formData, category: e.target.value })}
+              placeholder="z.B. Zutrittskontrolle"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Verantwortlich</label>
+            <input
+              type="text"
+              value={formData.owner}
+              onChange={e => setFormData({ ...formData, owner: e.target.value })}
+              placeholder="z.B. IT Security"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-3">
+        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          Abbrechen
+        </button>
+        <button
+          onClick={() => onSubmit(formData)}
+          disabled={!formData.name}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          Hinzufuegen
+        </button>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/ControlCard.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+import { useState } from 'react'
+import type { DisplayControl, DisplayControlType, DisplayCategory, DisplayStatus } from '../_types'
+import type { ImplementationStatus } from '@/lib/sdk'
+
+const TYPE_COLORS: Record<DisplayControlType, string> = {
+  preventive: 'bg-blue-100 text-blue-700',
+  detective: 'bg-purple-100 text-purple-700',
+  corrective: 'bg-orange-100 text-orange-700',
+}
+
+const CATEGORY_COLORS: Record<DisplayCategory, string> = {
+  technical: 'bg-green-100 text-green-700',
+  organizational: 'bg-yellow-100 text-yellow-700',
+  physical: 'bg-gray-100 text-gray-700',
+}
+
+const STATUS_COLORS: Record<DisplayStatus, string> = {
+  implemented: 'border-green-200 bg-green-50',
+  partial: 'border-yellow-200 bg-yellow-50',
+  planned: 'border-blue-200 bg-blue-50',
+  'not-implemented': 'border-red-200 bg-red-50',
+}
+
+const STATUS_LABELS: Record<DisplayStatus, string> = {
+  implemented: 'Implementiert',
+  partial: 'Teilweise',
+  planned: 'Geplant',
+  'not-implemented': 'Nicht implementiert',
+}
+
+export function ControlCard({
+  control,
+  onStatusChange,
+  onEffectivenessChange,
+  onLinkEvidence,
+}: {
+  control: DisplayControl
+  onStatusChange: (status: ImplementationStatus) => void
+  onEffectivenessChange: (effectivenessPercent: number) => void
+  onLinkEvidence: () => void
+}) {
+  const [showEffectivenessSlider, setShowEffectivenessSlider] = useState(false)
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${STATUS_COLORS[control.displayStatus]}`}>
+      <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 bg-gray-100 text-gray-700 rounded font-mono">{control.code}</span>
+            <span className={`px-2 py-1 text-xs rounded-full ${TYPE_COLORS[control.displayType]}`}>
+              {control.displayType === 'preventive' ? 'Praeventiv' :
+               control.displayType === 'detective' ? 'Detektiv' : 'Korrektiv'}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${CATEGORY_COLORS[control.displayCategory]}`}>
+              {control.displayCategory === 'technical' ? 'Technisch' :
+               control.displayCategory === 'organizational' ? 'Organisatorisch' : 'Physisch'}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{control.name}</h3>
+          <p className="text-sm text-gray-500 mt-1">{control.description}</p>
+        </div>
+        <select
+          value={control.implementationStatus}
+          onChange={(e) => onStatusChange(e.target.value as ImplementationStatus)}
+          className={`px-3 py-1 text-sm rounded-full border ${STATUS_COLORS[control.displayStatus]}`}
+        >
+          <option value="NOT_IMPLEMENTED">Nicht implementiert</option>
+          <option value="PARTIAL">Teilweise</option>
+          <option value="IMPLEMENTED">Implementiert</option>
+        </select>
+      </div>
+
+      <div className="mt-4">
+        <div
+          className="flex items-center justify-between text-sm mb-1 cursor-pointer"
+          onClick={() => setShowEffectivenessSlider(!showEffectivenessSlider)}
+        >
+          <span className="text-gray-500">Wirksamkeit</span>
+          <span className="font-medium">{control.effectivenessPercent}%</span>
+        </div>
+        <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all ${
+              control.effectivenessPercent >= 80 ? 'bg-green-500' :
+              control.effectivenessPercent >= 50 ? 'bg-yellow-500' : 'bg-red-500'
+            }`}
+            style={{ width: `${control.effectivenessPercent}%` }}
+          />
+        </div>
+        {showEffectivenessSlider && (
+          <div className="mt-2">
+            <input
+              type="range" min={0} max={100} value={control.effectivenessPercent}
+              onChange={(e) => onEffectivenessChange(Number(e.target.value))}
+              className="w-full"
+            />
+          </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>Verantwortlich: </span>
+          <span className="font-medium text-gray-700">{control.owner || 'Nicht zugewiesen'}</span>
+        </div>
+        <div className="text-gray-500">Letzte Pruefung: {control.lastReview.toLocaleDateString('de-DE')}</div>
+      </div>
+
+      <div className="mt-3 flex items-center justify-between">
+        <div className="flex items-center gap-1 flex-wrap">
+          {control.linkedRequirements.slice(0, 3).map(req => (
+            <span key={req} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{req}</span>
+          ))}
+          {control.linkedRequirements.length > 3 && (
+            <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">+{control.linkedRequirements.length - 3}</span>
+          )}
+        </div>
+        <span className={`px-3 py-1 text-xs rounded-full ${
+          control.displayStatus === 'implemented' ? 'bg-green-100 text-green-700' :
+          control.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
+          control.displayStatus === 'planned' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700'
+        }`}>
+          {STATUS_LABELS[control.displayStatus]}
+        </span>
+      </div>
+
+      {control.linkedEvidence.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-gray-100">
+          <span className="text-xs text-gray-500 mb-1 block">
+            Nachweise: {control.linkedEvidence.length}
+            {(() => {
+              const e2plus = control.linkedEvidence.filter((ev: { confidenceLevel?: string }) =>
+                ev.confidenceLevel && ['E2', 'E3', 'E4'].includes(ev.confidenceLevel)
+              ).length
+              return e2plus > 0 ? ` (${e2plus} E2+)` : ''
+            })()}
+          </span>
+          <div className="flex items-center gap-1 flex-wrap">
+            {control.linkedEvidence.map(ev => (
+              <span key={ev.id} className={`px-2 py-0.5 text-xs rounded ${
+                ev.status === 'valid' ? 'bg-green-50 text-green-700' :
+                ev.status === 'expired' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'
+              }`}>
+                {ev.title}
+                {(ev as { confidenceLevel?: string }).confidenceLevel && (
+                  <span className="ml-1 opacity-70">({(ev as { confidenceLevel?: string }).confidenceLevel})</span>
+                )}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="mt-3 pt-3 border-t border-gray-100">
+        <button onClick={onLinkEvidence} className="text-sm text-purple-600 hover:text-purple-700 font-medium">
+          Evidence verknuepfen
+        </button>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/FilterBar.tsx

@@ -0,0 +1,37 @@
+const FILTERS = ['all', 'implemented', 'partial', 'not-implemented', 'technical', 'organizational', 'preventive', 'detective']
+
+const FILTER_LABELS: Record<string, string> = {
+  all: 'Alle',
+  implemented: 'Implementiert',
+  partial: 'Teilweise',
+  'not-implemented': 'Offen',
+  technical: 'Technisch',
+  organizational: 'Organisatorisch',
+  preventive: 'Praeventiv',
+  detective: 'Detektiv',
+}
+
+export function FilterBar({
+  filter,
+  onFilterChange,
+}: {
+  filter: string
+  onFilterChange: (f: string) => void
+}) {
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <span className="text-sm text-gray-500">Filter:</span>
+      {FILTERS.map(f => (
+        <button
+          key={f}
+          onClick={() => onFilterChange(f)}
+          className={`px-3 py-1 text-sm rounded-full transition-colors ${
+            filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+          }`}
+        >
+          {FILTER_LABELS[f]}
+        </button>
+      ))}
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx

@@ -0,0 +1,18 @@
+export function LoadingSkeleton() {
+  return (
+    <div className="space-y-4">
+      {[1, 2, 3].map(i => (
+        <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
+          <div className="flex items-center gap-2 mb-3">
+            <div className="h-5 w-20 bg-gray-200 rounded" />
+            <div className="h-5 w-16 bg-gray-200 rounded-full" />
+            <div className="h-5 w-16 bg-gray-200 rounded-full" />
+          </div>
+          <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
+          <div className="h-4 w-full bg-gray-100 rounded" />
+          <div className="mt-4 h-2 bg-gray-200 rounded-full" />
+        </div>
+      ))}
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/RAGPanel.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import type { RAGControlSuggestion } from '../_types'
+
+export function RAGPanel({
+  selectedRequirementId,
+  onSelectedRequirementIdChange,
+  requirements,
+  onSuggestControls,
+  ragLoading,
+  ragSuggestions,
+  onAddSuggestion,
+  onClose,
+}: {
+  selectedRequirementId: string
+  onSelectedRequirementIdChange: (id: string) => void
+  requirements: { id: string; title?: string }[]
+  onSuggestControls: () => void
+  ragLoading: boolean
+  ragSuggestions: RAGControlSuggestion[]
+  onAddSuggestion: (s: RAGControlSuggestion) => void
+  onClose: () => void
+}) {
+  return (
+    <div className="bg-purple-50 border border-purple-200 rounded-xl p-6">
+      <div className="flex items-start justify-between mb-4">
+        <div>
+          <h3 className="text-lg font-semibold text-purple-900">KI-Controls aus RAG vorschlagen</h3>
+          <p className="text-sm text-purple-700 mt-1">
+            Geben Sie eine Anforderungs-ID ein. Das KI-System analysiert die Anforderung mit Hilfe des RAG-Corpus
+            und schlaegt passende Controls vor.
+          </p>
+        </div>
+        <button onClick={onClose} className="text-purple-400 hover:text-purple-600 ml-4">
+          <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>
+      </div>
+
+      <div className="flex items-center gap-3 mb-4">
+        <input
+          type="text"
+          value={selectedRequirementId}
+          onChange={e => onSelectedRequirementIdChange(e.target.value)}
+          placeholder="Anforderungs-UUID eingeben..."
+          className="flex-1 px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white"
+        />
+        {requirements.length > 0 && (
+          <select
+            value={selectedRequirementId}
+            onChange={e => onSelectedRequirementIdChange(e.target.value)}
+            className="px-3 py-2 border border-purple-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-purple-500"
+          >
+            <option value="">Aus Liste waehlen...</option>
+            {requirements.slice(0, 20).map(r => (
+              <option key={r.id} value={r.id}>{r.id.substring(0, 8)}... — {r.title?.substring(0, 40)}</option>
+            ))}
+          </select>
+        )}
+        <button
+          onClick={onSuggestControls}
+          disabled={ragLoading || !selectedRequirementId}
+          className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-colors ${
+            ragLoading || !selectedRequirementId
+              ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
+              : 'bg-purple-600 text-white hover:bg-purple-700'
+          }`}
+        >
+          {ragLoading ? (
+            <>
+              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+              Analysiere...
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              Vorschlaege generieren
+            </>
+          )}
+        </button>
+      </div>
+
+      {ragSuggestions.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-semibold text-purple-800">{ragSuggestions.length} Vorschlaege gefunden:</h4>
+          {ragSuggestions.map((suggestion) => (
+            <div key={suggestion.control_id} className="bg-white border border-purple-200 rounded-lg p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded font-mono">
+                      {suggestion.control_id}
+                    </span>
+                    <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{suggestion.domain}</span>
+                    <span className="text-xs text-gray-500">Konfidenz: {Math.round(suggestion.confidence_score * 100)}%</span>
+                  </div>
+                  <h5 className="font-semibold text-gray-900">{suggestion.title}</h5>
+                  <p className="text-sm text-gray-600 mt-1">{suggestion.description}</p>
+                  {suggestion.pass_criteria && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      <span className="font-medium">Erfolgskriterium:</span> {suggestion.pass_criteria}
+                    </p>
+                  )}
+                  {suggestion.is_automated && (
+                    <span className="mt-1 inline-block px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded">
+                      Automatisierbar {suggestion.automation_tool ? `(${suggestion.automation_tool})` : ''}
+                    </span>
+                  )}
+                </div>
+                <button
+                  onClick={() => onAddSuggestion(suggestion)}
+                  className="flex-shrink-0 flex items-center gap-1 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                  </svg>
+                  Hinzufuegen
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!ragLoading && ragSuggestions.length === 0 && selectedRequirementId && (
+        <p className="text-sm text-purple-600 italic">
+          Klicken Sie auf &quot;Vorschlaege generieren&quot;, um KI-Controls abzurufen.
+        </p>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/StatsCards.tsx

@@ -0,0 +1,32 @@
+export function StatsCards({
+  total,
+  implementedCount,
+  avgEffectiveness,
+  partialCount,
+}: {
+  total: number
+  implementedCount: number
+  avgEffectiveness: number
+  partialCount: number
+}) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="text-sm text-gray-500">Gesamt</div>
+        <div className="text-3xl font-bold text-gray-900">{total}</div>
+      </div>
+      <div className="bg-white rounded-xl border border-green-200 p-6">
+        <div className="text-sm text-green-600">Implementiert</div>
+        <div className="text-3xl font-bold text-green-600">{implementedCount}</div>
+      </div>
+      <div className="bg-white rounded-xl border border-purple-200 p-6">
+        <div className="text-sm text-purple-600">Durchschn. Wirksamkeit</div>
+        <div className="text-3xl font-bold text-purple-600">{avgEffectiveness}%</div>
+      </div>
+      <div className="bg-white rounded-xl border border-yellow-200 p-6">
+        <div className="text-sm text-yellow-600">Teilweise</div>
+        <div className="text-3xl font-bold text-yellow-600">{partialCount}</div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/controls/_components/TransitionErrorBanner.tsx

@@ -0,0 +1,40 @@
+export function TransitionErrorBanner({
+  controlId,
+  violations,
+  onDismiss,
+}: {
+  controlId: string
+  violations: string[]
+  onDismiss: () => void
+}) {
+  return (
+    <div className="p-4 bg-orange-50 border border-orange-200 rounded-lg">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-3">
+          <svg className="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" 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>
+          <div>
+            <h4 className="font-medium text-orange-800">Status-Transition blockiert ({controlId})</h4>
+            <ul className="mt-2 space-y-1">
+              {violations.map((v, i) => (
+                <li key={i} className="text-sm text-orange-700 flex items-start gap-2">
+                  <span className="text-orange-400 mt-0.5">•</span>
+                  <span>{v}</span>
+                </li>
+              ))}
+            </ul>
+            <a href="/sdk/evidence" className="mt-2 inline-block text-sm text-purple-600 hover:text-purple-700 font-medium">
+              Evidence hinzufuegen →
+            </a>
+          </div>
+        </div>
+        <button onClick={onDismiss} className="text-orange-400 hover:text-orange-600 ml-4">
+          <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>
+      </div>
+    </div>
+  )
+}