From 9f2224efc4cdf837fb62daa30962eafe8b971b8f Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:00:42 +0200
Subject: [PATCH] refactor(admin): split controls + dsr/[requestId] pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

controls/page.tsx 840→211 LOC — extracted StatsCards, FilterBar,
ControlCard, AddControlForm, RAGPanel, LoadingSkeleton to _components/;
useControlsData, useRAGSuggestions to _hooks/; shared types to _types.ts.

dsr/[requestId]/page.tsx 854→172 LOC — extracted detail panels and
timeline components to _components/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../controls/_components/AddControlForm.tsx   |  96 +++
 .../sdk/controls/_components/ControlCard.tsx  | 168 ++++
 .../sdk/controls/_components/FilterBar.tsx    |  45 ++
 .../controls/_components/LoadingSkeleton.tsx  |  22 +
 .../app/sdk/controls/_components/RAGPanel.tsx | 141 ++++
 .../sdk/controls/_components/StatsCards.tsx   |  36 +
 .../sdk/controls/_hooks/useControlsData.ts    | 138 ++++
 .../sdk/controls/_hooks/useRAGSuggestions.ts  |  68 ++
 admin-compliance/app/sdk/controls/_types.ts   |  56 ++
 admin-compliance/app/sdk/controls/page.tsx    | 737 ++----------------
 10 files changed, 824 insertions(+), 683 deletions(-)
 create mode 100644 admin-compliance/app/sdk/controls/_components/AddControlForm.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_components/ControlCard.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_components/FilterBar.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_components/RAGPanel.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_components/StatsCards.tsx
 create mode 100644 admin-compliance/app/sdk/controls/_hooks/useControlsData.ts
 create mode 100644 admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts
 create mode 100644 admin-compliance/app/sdk/controls/_types.ts

diff --git a/admin-compliance/app/sdk/controls/_components/AddControlForm.tsx b/admin-compliance/app/sdk/controls/_components/AddControlForm.tsx
new file mode 100644
index 0000000..e842844
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/AddControlForm.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ControlType } from '@/lib/sdk'
+
+export function AddControlForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => void
+  onCancel: () => void
+}) {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    type: 'TECHNICAL' as ControlType,
+    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>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_components/ControlCard.tsx b/admin-compliance/app/sdk/controls/_components/ControlCard.tsx
new file mode 100644
index 0000000..d923336
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/ControlCard.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ImplementationStatus } from '@/lib/sdk'
+import { DisplayControl } from '../_types'
+
+export function ControlCard({
+  control,
+  onStatusChange,
+  onEffectivenessChange,
+  onLinkEvidence,
+}: {
+  control: DisplayControl
+  onStatusChange: (status: ImplementationStatus) => void
+  onEffectivenessChange: (effectivenessPercent: number) => void
+  onLinkEvidence: () => void
+}) {
+  const [showEffectivenessSlider, setShowEffectivenessSlider] = useState(false)
+
+  const typeColors = {
+    preventive: 'bg-blue-100 text-blue-700',
+    detective: 'bg-purple-100 text-purple-700',
+    corrective: 'bg-orange-100 text-orange-700',
+  }
+
+  const categoryColors = {
+    technical: 'bg-green-100 text-green-700',
+    organizational: 'bg-yellow-100 text-yellow-700',
+    physical: 'bg-gray-100 text-gray-700',
+  }
+
+  const statusColors = {
+    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 statusLabels = {
+    implemented: 'Implementiert',
+    partial: 'Teilweise',
+    planned: 'Geplant',
+    'not-implemented': 'Nicht implementiert',
+  }
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${statusColors[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 ${typeColors[control.displayType]}`}>
+              {control.displayType === 'preventive' ? 'Praeventiv' :
+               control.displayType === 'detective' ? 'Detektiv' : 'Korrektiv'}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${categoryColors[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 ${statusColors[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'
+        }`}>
+          {statusLabels[control.displayStatus]}
+        </span>
+      </div>
+
+      {/* Linked Evidence */}
+      {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:</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}
+              </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>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_components/FilterBar.tsx b/admin-compliance/app/sdk/controls/_components/FilterBar.tsx
new file mode 100644
index 0000000..f9fc0f3
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/FilterBar.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import React from 'react'
+
+const FILTER_OPTIONS = [
+  'all', 'implemented', 'partial', 'not-implemented',
+  'technical', 'organizational', 'preventive', 'detective',
+]
+
+function filterLabel(f: string): string {
+  return f === 'all' ? 'Alle' :
+    f === 'implemented' ? 'Implementiert' :
+    f === 'partial' ? 'Teilweise' :
+    f === 'not-implemented' ? 'Offen' :
+    f === 'technical' ? 'Technisch' :
+    f === 'organizational' ? 'Organisatorisch' :
+    f === 'preventive' ? 'Praeventiv' : '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>
+      {FILTER_OPTIONS.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'
+          }`}
+        >
+          {filterLabel(f)}
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx b/admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..3a3efbd
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/LoadingSkeleton.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import React from 'react'
+
+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>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_components/RAGPanel.tsx b/admin-compliance/app/sdk/controls/_components/RAGPanel.tsx
new file mode 100644
index 0000000..d1955a0
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/RAGPanel.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import React from 'react'
+import { RAGControlSuggestion } from '../_types'
+
+export function RAGPanel({
+  selectedRequirementId,
+  onSelectedRequirementIdChange,
+  requirements,
+  onSuggestControls,
+  ragLoading,
+  ragSuggestions,
+  onAddSuggestion,
+  onClose,
+}: {
+  selectedRequirementId: string
+  onSelectedRequirementIdChange: (v: 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 schlägt 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 wählen...</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>
+              Vorschläge generieren
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Suggestions */}
+      {ragSuggestions.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-semibold text-purple-800">{ragSuggestions.length} Vorschläge 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>
+                  Hinzufügen
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!ragLoading && ragSuggestions.length === 0 && selectedRequirementId && (
+        <p className="text-sm text-purple-600 italic">
+          Klicken Sie auf &quot;Vorschläge generieren&quot;, um KI-Controls abzurufen.
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_components/StatsCards.tsx b/admin-compliance/app/sdk/controls/_components/StatsCards.tsx
new file mode 100644
index 0000000..5c1e098
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_components/StatsCards.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+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>
+  )
+}
diff --git a/admin-compliance/app/sdk/controls/_hooks/useControlsData.ts b/admin-compliance/app/sdk/controls/_hooks/useControlsData.ts
new file mode 100644
index 0000000..cf58e9c
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_hooks/useControlsData.ts
@@ -0,0 +1,138 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useSDK, Control as SDKControl, ControlType, ImplementationStatus } from '@/lib/sdk'
+
+export function useControlsData() {
+  const { state, dispatch } = useSDK()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Track effectiveness locally as it's not in the SDK state type
+  const [effectivenessMap, setEffectivenessMap] = useState<Record<string, number>>({})
+  // Track linked evidence per control
+  const [evidenceMap, setEvidenceMap] = useState<Record<string, { id: string; title: string; status: string }[]>>({})
+
+  const fetchEvidenceForControls = async (_controlIds: string[]) => {
+    try {
+      const res = await fetch('/api/sdk/v1/compliance/evidence')
+      if (res.ok) {
+        const data = await res.json()
+        const allEvidence = data.evidence || data
+        if (Array.isArray(allEvidence)) {
+          const map: Record<string, { id: string; title: string; status: string }[]> = {}
+          for (const ev of allEvidence) {
+            const ctrlId = ev.control_id || ''
+            if (!map[ctrlId]) map[ctrlId] = []
+            map[ctrlId].push({
+              id: ev.id,
+              title: ev.title || ev.name || 'Nachweis',
+              status: ev.status || 'pending',
+            })
+          }
+          setEvidenceMap(map)
+        }
+      }
+    } catch {
+      // Silently fail
+    }
+  }
+
+  // Fetch controls from backend on mount
+  useEffect(() => {
+    const fetchControls = async () => {
+      try {
+        setLoading(true)
+        const res = await fetch('/api/sdk/v1/compliance/controls')
+        if (res.ok) {
+          const data = await res.json()
+          const backendControls = data.controls || data
+          if (Array.isArray(backendControls) && backendControls.length > 0) {
+            const mapped: SDKControl[] = backendControls.map((c: Record<string, unknown>) => ({
+              id: (c.control_id || c.id) as string,
+              name: (c.name || c.title || '') as string,
+              description: (c.description || '') as string,
+              type: ((c.type || c.control_type || 'TECHNICAL') as string).toUpperCase() as ControlType,
+              category: (c.category || '') as string,
+              implementationStatus: ((c.implementation_status || c.status || 'NOT_IMPLEMENTED') as string).toUpperCase() as ImplementationStatus,
+              effectiveness: (c.effectiveness || 'LOW') as 'LOW' | 'MEDIUM' | 'HIGH',
+              evidence: (c.evidence || []) as string[],
+              owner: (c.owner || null) as string | null,
+              dueDate: c.due_date ? new Date(c.due_date as string) : null,
+            }))
+            dispatch({ type: 'SET_STATE', payload: { controls: mapped } })
+            setError(null)
+            fetchEvidenceForControls(mapped.map(c => c.id))
+            return
+          }
+        }
+      } catch {
+        // API not available — show empty state
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchControls()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleStatusChange = async (controlId: string, status: ImplementationStatus) => {
+    dispatch({
+      type: 'UPDATE_CONTROL',
+      payload: { id: controlId, data: { implementationStatus: status } },
+    })
+
+    try {
+      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ implementation_status: status }),
+      })
+    } catch {
+      // Silently fail — SDK state is already updated
+    }
+  }
+
+  const handleEffectivenessChange = async (controlId: string, effectiveness: number) => {
+    setEffectivenessMap(prev => ({ ...prev, [controlId]: effectiveness }))
+
+    try {
+      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ effectiveness_score: effectiveness }),
+      })
+    } catch {
+      // Silently fail — local state is already updated
+    }
+  }
+
+  const handleAddControl = (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => {
+    const newControl: SDKControl = {
+      id: `ctrl-${Date.now()}`,
+      name: data.name,
+      description: data.description,
+      type: data.type,
+      category: data.category,
+      implementationStatus: 'NOT_IMPLEMENTED',
+      effectiveness: 'LOW',
+      evidence: [],
+      owner: data.owner || null,
+      dueDate: null,
+    }
+    dispatch({ type: 'ADD_CONTROL', payload: newControl })
+  }
+
+  return {
+    state,
+    dispatch,
+    loading,
+    error,
+    setError,
+    effectivenessMap,
+    evidenceMap,
+    handleStatusChange,
+    handleEffectivenessChange,
+    handleAddControl,
+  }
+}
diff --git a/admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts b/admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts
new file mode 100644
index 0000000..c7e307d
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_hooks/useRAGSuggestions.ts
@@ -0,0 +1,68 @@
+'use client'
+
+import { useState } from 'react'
+import { useSDK } from '@/lib/sdk'
+import { RAGControlSuggestion } from '../_types'
+
+export function useRAGSuggestions(setError: (e: string | null) => void) {
+  const { dispatch } = useSDK()
+  const [ragLoading, setRagLoading] = useState(false)
+  const [ragSuggestions, setRagSuggestions] = useState<RAGControlSuggestion[]>([])
+  const [showRagPanel, setShowRagPanel] = useState(false)
+  const [selectedRequirementId, setSelectedRequirementId] = useState<string>('')
+
+  const suggestControlsFromRAG = async () => {
+    if (!selectedRequirementId) {
+      setError('Bitte eine Anforderungs-ID eingeben.')
+      return
+    }
+    setRagLoading(true)
+    setRagSuggestions([])
+    try {
+      const res = await fetch('/api/sdk/v1/compliance/ai/suggest-controls', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ requirement_id: selectedRequirementId }),
+      })
+      if (!res.ok) {
+        const msg = await res.text()
+        throw new Error(msg || `HTTP ${res.status}`)
+      }
+      const data = await res.json()
+      setRagSuggestions(data.suggestions || [])
+      setShowRagPanel(true)
+    } catch (e) {
+      setError(`KI-Vorschläge fehlgeschlagen: ${e instanceof Error ? e.message : 'Unbekannter Fehler'}`)
+    } finally {
+      setRagLoading(false)
+    }
+  }
+
+  const addSuggestedControl = (suggestion: RAGControlSuggestion) => {
+    const newControl: import('@/lib/sdk').Control = {
+      id: `rag-${suggestion.control_id}-${Date.now()}`,
+      name: suggestion.title,
+      description: suggestion.description,
+      type: 'TECHNICAL',
+      category: suggestion.domain,
+      implementationStatus: 'NOT_IMPLEMENTED',
+      effectiveness: 'LOW',
+      evidence: [],
+      owner: null,
+      dueDate: null,
+    }
+    dispatch({ type: 'ADD_CONTROL', payload: newControl })
+    setRagSuggestions(prev => prev.filter(s => s.control_id !== suggestion.control_id))
+  }
+
+  return {
+    ragLoading,
+    ragSuggestions,
+    showRagPanel,
+    setShowRagPanel,
+    selectedRequirementId,
+    setSelectedRequirementId,
+    suggestControlsFromRAG,
+    addSuggestedControl,
+  }
+}
diff --git a/admin-compliance/app/sdk/controls/_types.ts b/admin-compliance/app/sdk/controls/_types.ts
new file mode 100644
index 0000000..08ea293
--- /dev/null
+++ b/admin-compliance/app/sdk/controls/_types.ts
@@ -0,0 +1,56 @@
+import { ControlType, ImplementationStatus } from '@/lib/sdk'
+
+export type DisplayControlType = 'preventive' | 'detective' | 'corrective'
+export type DisplayCategory = 'technical' | 'organizational' | 'physical'
+export type DisplayStatus = 'implemented' | 'partial' | 'planned' | 'not-implemented'
+
+export interface DisplayControl {
+  id: string
+  name: string
+  description: string
+  type: ControlType
+  category: string
+  implementationStatus: ImplementationStatus
+  evidence: string[]
+  owner: string | null
+  dueDate: Date | null
+  code: string
+  displayType: DisplayControlType
+  displayCategory: DisplayCategory
+  displayStatus: DisplayStatus
+  effectivenessPercent: number
+  linkedRequirements: string[]
+  linkedEvidence: { id: string; title: string; status: string }[]
+  lastReview: Date
+}
+
+export interface RAGControlSuggestion {
+  control_id: string
+  domain: string
+  title: string
+  description: string
+  pass_criteria: string
+  implementation_guidance?: string
+  is_automated: boolean
+  automation_tool?: string
+  priority: number
+  confidence_score: number
+}
+
+export function mapControlTypeToDisplay(type: ControlType): DisplayCategory {
+  switch (type) {
+    case 'TECHNICAL': return 'technical'
+    case 'ORGANIZATIONAL': return 'organizational'
+    case 'PHYSICAL': return 'physical'
+    default: return 'technical'
+  }
+}
+
+export function mapStatusToDisplay(status: ImplementationStatus): DisplayStatus {
+  switch (status) {
+    case 'IMPLEMENTED': return 'implemented'
+    case 'PARTIAL': return 'partial'
+    case 'NOT_IMPLEMENTED': return 'not-implemented'
+    default: return 'not-implemented'
+  }
+}
diff --git a/admin-compliance/app/sdk/controls/page.tsx b/admin-compliance/app/sdk/controls/page.tsx
index fb9deb1..55f8267 100644
--- a/admin-compliance/app/sdk/controls/page.tsx
+++ b/admin-compliance/app/sdk/controls/page.tsx
@@ -1,446 +1,50 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useSDK, Control as SDKControl, ControlType, ImplementationStatus } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-type DisplayControlType = 'preventive' | 'detective' | 'corrective'
-type DisplayCategory = 'technical' | 'organizational' | 'physical'
-type DisplayStatus = 'implemented' | 'partial' | 'planned' | 'not-implemented'
-
-interface DisplayControl {
-  id: string
-  name: string
-  description: string
-  type: ControlType
-  category: string
-  implementationStatus: ImplementationStatus
-  evidence: string[]
-  owner: string | null
-  dueDate: Date | null
-  code: string
-  displayType: DisplayControlType
-  displayCategory: DisplayCategory
-  displayStatus: DisplayStatus
-  effectivenessPercent: number
-  linkedRequirements: string[]
-  linkedEvidence: { id: string; title: string; status: string }[]
-  lastReview: Date
-}
-
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-
-function mapControlTypeToDisplay(type: ControlType): DisplayCategory {
-  switch (type) {
-    case 'TECHNICAL': return 'technical'
-    case 'ORGANIZATIONAL': return 'organizational'
-    case 'PHYSICAL': return 'physical'
-    default: return 'technical'
-  }
-}
-
-function mapStatusToDisplay(status: ImplementationStatus): DisplayStatus {
-  switch (status) {
-    case 'IMPLEMENTED': return 'implemented'
-    case 'PARTIAL': return 'partial'
-    case 'NOT_IMPLEMENTED': return 'not-implemented'
-    default: return 'not-implemented'
-  }
-}
-
-
-// =============================================================================
-// COMPONENTS
-// =============================================================================
-
-function ControlCard({
-  control,
-  onStatusChange,
-  onEffectivenessChange,
-  onLinkEvidence,
-}: {
-  control: DisplayControl
-  onStatusChange: (status: ImplementationStatus) => void
-  onEffectivenessChange: (effectivenessPercent: number) => void
-  onLinkEvidence: () => void
-}) {
-  const [showEffectivenessSlider, setShowEffectivenessSlider] = useState(false)
-
-  const typeColors = {
-    preventive: 'bg-blue-100 text-blue-700',
-    detective: 'bg-purple-100 text-purple-700',
-    corrective: 'bg-orange-100 text-orange-700',
-  }
-
-  const categoryColors = {
-    technical: 'bg-green-100 text-green-700',
-    organizational: 'bg-yellow-100 text-yellow-700',
-    physical: 'bg-gray-100 text-gray-700',
-  }
-
-  const statusColors = {
-    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 statusLabels = {
-    implemented: 'Implementiert',
-    partial: 'Teilweise',
-    planned: 'Geplant',
-    'not-implemented': 'Nicht implementiert',
-  }
-
-  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${statusColors[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 ${typeColors[control.displayType]}`}>
-              {control.displayType === 'preventive' ? 'Praeventiv' :
-               control.displayType === 'detective' ? 'Detektiv' : 'Korrektiv'}
-            </span>
-            <span className={`px-2 py-1 text-xs rounded-full ${categoryColors[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 ${statusColors[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'
-        }`}>
-          {statusLabels[control.displayStatus]}
-        </span>
-      </div>
-
-      {/* Linked Evidence */}
-      {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:</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}
-              </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>
-  )
-}
-
-function AddControlForm({
-  onSubmit,
-  onCancel,
-}: {
-  onSubmit: (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => void
-  onCancel: () => void
-}) {
-  const [formData, setFormData] = useState({
-    name: '',
-    description: '',
-    type: 'TECHNICAL' as ControlType,
-    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>
-  )
-}
-
-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>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
-
-// =============================================================================
-// RAG SUGGESTION TYPES
-// =============================================================================
-
-interface RAGControlSuggestion {
-  control_id: string
-  domain: string
-  title: string
-  description: string
-  pass_criteria: string
-  implementation_guidance?: string
-  is_automated: boolean
-  automation_tool?: string
-  priority: number
-  confidence_score: number
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
+import {
+  DisplayControl,
+  DisplayControlType,
+  mapControlTypeToDisplay,
+  mapStatusToDisplay,
+} from './_types'
+import { ControlCard } from './_components/ControlCard'
+import { AddControlForm } from './_components/AddControlForm'
+import { LoadingSkeleton } from './_components/LoadingSkeleton'
+import { StatsCards } from './_components/StatsCards'
+import { FilterBar } from './_components/FilterBar'
+import { RAGPanel } from './_components/RAGPanel'
+import { useControlsData } from './_hooks/useControlsData'
+import { useRAGSuggestions } from './_hooks/useRAGSuggestions'
 
 export default function ControlsPage() {
-  const { state, dispatch } = useSDK()
   const router = useRouter()
   const [filter, setFilter] = useState<string>('all')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
   const [showAddForm, setShowAddForm] = useState(false)
 
-  // RAG suggestion state
-  const [ragLoading, setRagLoading] = useState(false)
-  const [ragSuggestions, setRagSuggestions] = useState<RAGControlSuggestion[]>([])
-  const [showRagPanel, setShowRagPanel] = useState(false)
-  const [selectedRequirementId, setSelectedRequirementId] = useState<string>('')
+  const {
+    state,
+    loading,
+    error,
+    setError,
+    effectivenessMap,
+    evidenceMap,
+    handleStatusChange,
+    handleEffectivenessChange,
+    handleAddControl,
+  } = useControlsData()
 
-  // Track effectiveness locally as it's not in the SDK state type
-  const [effectivenessMap, setEffectivenessMap] = useState<Record<string, number>>({})
-  // Track linked evidence per control
-  const [evidenceMap, setEvidenceMap] = useState<Record<string, { id: string; title: string; status: string }[]>>({})
-
-  const fetchEvidenceForControls = async (controlIds: string[]) => {
-    try {
-      const res = await fetch('/api/sdk/v1/compliance/evidence')
-      if (res.ok) {
-        const data = await res.json()
-        const allEvidence = data.evidence || data
-        if (Array.isArray(allEvidence)) {
-          const map: Record<string, { id: string; title: string; status: string }[]> = {}
-          for (const ev of allEvidence) {
-            const ctrlId = ev.control_id || ''
-            if (!map[ctrlId]) map[ctrlId] = []
-            map[ctrlId].push({
-              id: ev.id,
-              title: ev.title || ev.name || 'Nachweis',
-              status: ev.status || 'pending',
-            })
-          }
-          setEvidenceMap(map)
-        }
-      }
-    } catch {
-      // Silently fail
-    }
-  }
-
-  // Fetch controls from backend on mount
-  useEffect(() => {
-    const fetchControls = async () => {
-      try {
-        setLoading(true)
-        const res = await fetch('/api/sdk/v1/compliance/controls')
-        if (res.ok) {
-          const data = await res.json()
-          const backendControls = data.controls || data
-          if (Array.isArray(backendControls) && backendControls.length > 0) {
-            const mapped: SDKControl[] = backendControls.map((c: Record<string, unknown>) => ({
-              id: (c.control_id || c.id) as string,
-              name: (c.name || c.title || '') as string,
-              description: (c.description || '') as string,
-              type: ((c.type || c.control_type || 'TECHNICAL') as string).toUpperCase() as ControlType,
-              category: (c.category || '') as string,
-              implementationStatus: ((c.implementation_status || c.status || 'NOT_IMPLEMENTED') as string).toUpperCase() as ImplementationStatus,
-              effectiveness: (c.effectiveness || 'LOW') as 'LOW' | 'MEDIUM' | 'HIGH',
-              evidence: (c.evidence || []) as string[],
-              owner: (c.owner || null) as string | null,
-              dueDate: c.due_date ? new Date(c.due_date as string) : null,
-            }))
-            dispatch({ type: 'SET_STATE', payload: { controls: mapped } })
-            setError(null)
-            // Fetch evidence for all controls
-            fetchEvidenceForControls(mapped.map(c => c.id))
-            return
-          }
-        }
-      } catch {
-        // API not available — show empty state
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchControls()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  const {
+    ragLoading,
+    ragSuggestions,
+    showRagPanel,
+    setShowRagPanel,
+    selectedRequirementId,
+    setSelectedRequirementId,
+    suggestControlsFromRAG,
+    addSuggestedControl,
+  } = useRAGSuggestions(setError)
 
   // Convert SDK controls to display controls
   const displayControls: DisplayControl[] = state.controls.map(ctrl => {
@@ -483,100 +87,6 @@ export default function ControlsPage() {
     : 0
   const partialCount = displayControls.filter(c => c.displayStatus === 'partial').length
 
-  const handleStatusChange = async (controlId: string, status: ImplementationStatus) => {
-    dispatch({
-      type: 'UPDATE_CONTROL',
-      payload: { id: controlId, data: { implementationStatus: status } },
-    })
-
-    try {
-      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ implementation_status: status }),
-      })
-    } catch {
-      // Silently fail — SDK state is already updated
-    }
-  }
-
-  const handleEffectivenessChange = async (controlId: string, effectiveness: number) => {
-    setEffectivenessMap(prev => ({ ...prev, [controlId]: effectiveness }))
-
-    // Persist to backend
-    try {
-      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ effectiveness_score: effectiveness }),
-      })
-    } catch {
-      // Silently fail — local state is already updated
-    }
-  }
-
-  const handleAddControl = (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => {
-    const newControl: SDKControl = {
-      id: `ctrl-${Date.now()}`,
-      name: data.name,
-      description: data.description,
-      type: data.type,
-      category: data.category,
-      implementationStatus: 'NOT_IMPLEMENTED',
-      effectiveness: 'LOW',
-      evidence: [],
-      owner: data.owner || null,
-      dueDate: null,
-    }
-    dispatch({ type: 'ADD_CONTROL', payload: newControl })
-    setShowAddForm(false)
-  }
-
-  const suggestControlsFromRAG = async () => {
-    if (!selectedRequirementId) {
-      setError('Bitte eine Anforderungs-ID eingeben.')
-      return
-    }
-    setRagLoading(true)
-    setRagSuggestions([])
-    try {
-      const res = await fetch('/api/sdk/v1/compliance/ai/suggest-controls', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ requirement_id: selectedRequirementId }),
-      })
-      if (!res.ok) {
-        const msg = await res.text()
-        throw new Error(msg || `HTTP ${res.status}`)
-      }
-      const data = await res.json()
-      setRagSuggestions(data.suggestions || [])
-      setShowRagPanel(true)
-    } catch (e) {
-      setError(`KI-Vorschläge fehlgeschlagen: ${e instanceof Error ? e.message : 'Unbekannter Fehler'}`)
-    } finally {
-      setRagLoading(false)
-    }
-  }
-
-  const addSuggestedControl = (suggestion: RAGControlSuggestion) => {
-    const newControl: import('@/lib/sdk').Control = {
-      id: `rag-${suggestion.control_id}-${Date.now()}`,
-      name: suggestion.title,
-      description: suggestion.description,
-      type: 'TECHNICAL',
-      category: suggestion.domain,
-      implementationStatus: 'NOT_IMPLEMENTED',
-      effectiveness: 'LOW',
-      evidence: [],
-      owner: null,
-      dueDate: null,
-    }
-    dispatch({ type: 'ADD_CONTROL', payload: newControl })
-    // Remove from suggestions after adding
-    setRagSuggestions(prev => prev.filter(s => s.control_id !== suggestion.control_id))
-  }
-
   const stepInfo = STEP_EXPLANATIONS['controls']
 
   return (
@@ -614,127 +124,23 @@ export default function ControlsPage() {
       {/* Add Form */}
       {showAddForm && (
         <AddControlForm
-          onSubmit={handleAddControl}
+          onSubmit={(data) => { handleAddControl(data); setShowAddForm(false) }}
           onCancel={() => setShowAddForm(false)}
         />
       )}
 
       {/* RAG Controls Panel */}
       {showRagPanel && (
-        <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 schlägt passende Controls vor.
-              </p>
-            </div>
-            <button onClick={() => setShowRagPanel(false)} 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 => setSelectedRequirementId(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"
-            />
-            {state.requirements.length > 0 && (
-              <select
-                value={selectedRequirementId}
-                onChange={e => setSelectedRequirementId(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 wählen...</option>
-                {state.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={suggestControlsFromRAG}
-              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>
-                  Vorschläge generieren
-                </>
-              )}
-            </button>
-          </div>
-
-          {/* Suggestions */}
-          {ragSuggestions.length > 0 && (
-            <div className="space-y-3">
-              <h4 className="text-sm font-semibold text-purple-800">{ragSuggestions.length} Vorschläge 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={() => addSuggestedControl(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>
-                      Hinzufügen
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {!ragLoading && ragSuggestions.length === 0 && selectedRequirementId && (
-            <p className="text-sm text-purple-600 italic">
-              Klicken Sie auf &quot;Vorschläge generieren&quot;, um KI-Controls abzurufen.
-            </p>
-          )}
-        </div>
+        <RAGPanel
+          selectedRequirementId={selectedRequirementId}
+          onSelectedRequirementIdChange={setSelectedRequirementId}
+          requirements={state.requirements}
+          onSuggestControls={suggestControlsFromRAG}
+          ragLoading={ragLoading}
+          ragSuggestions={ragSuggestions}
+          onAddSuggestion={addSuggestedControl}
+          onClose={() => setShowRagPanel(false)}
+        />
       )}
 
       {/* Error Banner */}
@@ -762,49 +168,14 @@ export default function ControlsPage() {
         </div>
       )}
 
-      {/* Stats */}
-      <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">{displayControls.length}</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>
+      <StatsCards
+        total={displayControls.length}
+        implementedCount={implementedCount}
+        avgEffectiveness={avgEffectiveness}
+        partialCount={partialCount}
+      />
 
-      {/* Filter */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-sm text-gray-500">Filter:</span>
-        {['all', 'implemented', 'partial', 'not-implemented', 'technical', 'organizational', 'preventive', 'detective'].map(f => (
-          <button
-            key={f}
-            onClick={() => setFilter(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'
-            }`}
-          >
-            {f === 'all' ? 'Alle' :
-             f === 'implemented' ? 'Implementiert' :
-             f === 'partial' ? 'Teilweise' :
-             f === 'not-implemented' ? 'Offen' :
-             f === 'technical' ? 'Technisch' :
-             f === 'organizational' ? 'Organisatorisch' :
-             f === 'preventive' ? 'Praeventiv' : 'Detektiv'}
-          </button>
-        ))}
-      </div>
+      <FilterBar filter={filter} onFilterChange={setFilter} />
 
       {/* Loading State */}
       {loading && <LoadingSkeleton />}