From 1c1af4e38da953a79f83bbcfd282d3b2961c3ade Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Wed, 15 Apr 2026 08:22:24 +0200
Subject: [PATCH] refactor(admin): split requirements page.tsx into colocated
 components

Break 838-line page.tsx into _types.ts, _data.ts (templates),
_components/{AddRequirementForm,RequirementCard,LoadingSkeleton}.tsx,
and _hooks/useRequirementsData.ts. page.tsx is now 246 LOC (wiring
only). No behavior changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../_components/AddRequirementForm.tsx        |  98 +++
 .../_components/LoadingSkeleton.tsx           |  18 +
 .../_components/RequirementCard.tsx           | 125 ++++
 .../app/sdk/requirements/_data.ts             | 110 +++
 .../_hooks/useRequirementsData.ts             | 246 +++++++
 .../app/sdk/requirements/_types.ts            |  42 ++
 .../app/sdk/requirements/page.tsx             | 642 +-----------------
 7 files changed, 664 insertions(+), 617 deletions(-)
 create mode 100644 admin-compliance/app/sdk/requirements/_components/AddRequirementForm.tsx
 create mode 100644 admin-compliance/app/sdk/requirements/_components/LoadingSkeleton.tsx
 create mode 100644 admin-compliance/app/sdk/requirements/_components/RequirementCard.tsx
 create mode 100644 admin-compliance/app/sdk/requirements/_data.ts
 create mode 100644 admin-compliance/app/sdk/requirements/_hooks/useRequirementsData.ts
 create mode 100644 admin-compliance/app/sdk/requirements/_types.ts

diff --git a/admin-compliance/app/sdk/requirements/_components/AddRequirementForm.tsx b/admin-compliance/app/sdk/requirements/_components/AddRequirementForm.tsx
new file mode 100644
index 0000000..e697635
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_components/AddRequirementForm.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { useState } from 'react'
+import { RiskSeverity } from '@/lib/sdk'
+import { AddRequirementData } from '../_types'
+
+export function AddRequirementForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (data: AddRequirementData) => void
+  onCancel: () => void
+}) {
+  const [formData, setFormData] = useState<AddRequirementData>({
+    regulation: '',
+    article: '',
+    title: '',
+    description: '',
+    criticality: 'MEDIUM' as RiskSeverity,
+  })
+
+  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 Anforderung</h3>
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Verordnung *</label>
+            <input
+              type="text"
+              value={formData.regulation}
+              onChange={e => setFormData({ ...formData, regulation: e.target.value })}
+              placeholder="z.B. DSGVO"
+              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">Artikel</label>
+            <input
+              type="text"
+              value={formData.article}
+              onChange={e => setFormData({ ...formData, article: e.target.value })}
+              placeholder="z.B. Art. 6"
+              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>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+          <input
+            type="text"
+            value={formData.title}
+            onChange={e => setFormData({ ...formData, title: e.target.value })}
+            placeholder="z.B. Rechtmaessigkeit der Verarbeitung"
+            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 Anforderung..."
+            rows={3}
+            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">Kritikalitaet</label>
+          <select
+            value={formData.criticality}
+            onChange={e => setFormData({ ...formData, criticality: e.target.value as RiskSeverity })}
+            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="LOW">Niedrig</option>
+            <option value="MEDIUM">Mittel</option>
+            <option value="HIGH">Hoch</option>
+            <option value="CRITICAL">Kritisch</option>
+          </select>
+        </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.title || !formData.regulation}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.title && formData.regulation ? '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/requirements/_components/LoadingSkeleton.tsx b/admin-compliance/app/sdk/requirements/_components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..91e205a
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_components/LoadingSkeleton.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+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>
+          <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
+          <div className="h-4 w-full bg-gray-100 rounded" />
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/requirements/_components/RequirementCard.tsx b/admin-compliance/app/sdk/requirements/_components/RequirementCard.tsx
new file mode 100644
index 0000000..8e504fa
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_components/RequirementCard.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { RequirementStatus } from '@/lib/sdk'
+import { DisplayRequirement } from '../_types'
+
+export function RequirementCard({
+  requirement,
+  onStatusChange,
+  onDelete,
+  expanded,
+  onToggleDetails,
+  linkedControls,
+}: {
+  requirement: DisplayRequirement
+  onStatusChange: (status: RequirementStatus) => void
+  onDelete: () => void
+  expanded: boolean
+  onToggleDetails: () => void
+  linkedControls: { id: string; name: string }[]
+}) {
+  const priorityColors = {
+    critical: 'bg-red-100 text-red-700',
+    high: 'bg-orange-100 text-orange-700',
+    medium: 'bg-yellow-100 text-yellow-700',
+    low: 'bg-green-100 text-green-700',
+  }
+
+  const statusColors = {
+    compliant: 'bg-green-100 text-green-700 border-green-200',
+    partial: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    'non-compliant': 'bg-red-100 text-red-700 border-red-200',
+    'not-applicable': 'bg-gray-100 text-gray-500 border-gray-200',
+  }
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${statusColors[requirement.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">
+              {requirement.code}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${priorityColors[requirement.priority]}`}>
+              {requirement.priority === 'critical' ? 'Kritisch' :
+               requirement.priority === 'high' ? 'Hoch' :
+               requirement.priority === 'medium' ? 'Mittel' : 'Niedrig'}
+            </span>
+            <span className="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded">
+              {requirement.regulation}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{requirement.title}</h3>
+          <p className="text-sm text-gray-500 mt-1">{requirement.description}</p>
+          <p className="text-xs text-gray-400 mt-2">Quelle: {requirement.source}</p>
+        </div>
+        <select
+          value={requirement.status}
+          onChange={(e) => onStatusChange(e.target.value as RequirementStatus)}
+          className={`px-3 py-1 text-sm rounded-full border ${statusColors[requirement.displayStatus]}`}
+        >
+          <option value="NOT_STARTED">Nicht begonnen</option>
+          <option value="IN_PROGRESS">In Bearbeitung</option>
+          <option value="IMPLEMENTED">Implementiert</option>
+          <option value="VERIFIED">Verifiziert</option>
+        </select>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
+        <div className="flex items-center gap-4 text-sm text-gray-500">
+          <span>{requirement.controlsLinked} Kontrollen</span>
+          <span>{requirement.evidenceCount} Nachweise</span>
+        </div>
+        <button
+          onClick={onToggleDetails}
+          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
+        >
+          {expanded ? 'Details ausblenden' : 'Details anzeigen'}
+        </button>
+      </div>
+
+      {expanded && (
+        <div className="mt-4 pt-4 border-t border-gray-200 space-y-3">
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-1">Vollstaendige Beschreibung</h4>
+            <p className="text-sm text-gray-600">{requirement.description || 'Keine Beschreibung vorhanden.'}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-1">Zugeordnete Kontrollen ({linkedControls.length})</h4>
+            {linkedControls.length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {linkedControls.map(c => (
+                  <span key={c.id} className="px-2 py-1 text-xs bg-green-50 text-green-700 rounded">{c.name}</span>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-400">Keine Kontrollen zugeordnet</p>
+            )}
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <h4 className="text-sm font-medium text-gray-700 mb-1">Status-Historie</h4>
+              <div className="flex items-center gap-2 text-sm text-gray-500">
+                <span className={`px-2 py-0.5 text-xs rounded-full ${
+                  requirement.displayStatus === 'compliant' ? 'bg-green-100 text-green-700' :
+                  requirement.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
+                  'bg-red-100 text-red-700'
+                }`}>
+                  {requirement.status === 'NOT_STARTED' ? 'Nicht begonnen' :
+                   requirement.status === 'IN_PROGRESS' ? 'In Bearbeitung' :
+                   requirement.status === 'IMPLEMENTED' ? 'Implementiert' : 'Verifiziert'}
+                </span>
+              </div>
+            </div>
+            <button
+              onClick={onDelete}
+              className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 border border-red-200 rounded-lg transition-colors"
+            >
+              Loeschen
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/requirements/_data.ts b/admin-compliance/app/sdk/requirements/_data.ts
new file mode 100644
index 0000000..090f4bd
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_data.ts
@@ -0,0 +1,110 @@
+import { DisplayRequirement } from './_types'
+
+// Fallback templates (used when backend is unavailable)
+export const requirementTemplates: Omit<DisplayRequirement, 'displayStatus' | 'controlsLinked' | 'evidenceCount'>[] = [
+  {
+    id: 'req-gdpr-6',
+    regulation: 'DSGVO',
+    article: 'Art. 6',
+    code: 'GDPR-6.1',
+    title: 'Rechtmaessigkeit der Verarbeitung',
+    description: 'Personenbezogene Daten duerfen nur verarbeitet werden, wenn eine Rechtsgrundlage vorliegt.',
+    source: 'DSGVO Art. 6',
+    category: 'Rechtmaessigkeit',
+    priority: 'critical',
+    criticality: 'CRITICAL',
+    applicableModules: ['mod-gdpr'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-gdpr-13',
+    regulation: 'DSGVO',
+    article: 'Art. 13/14',
+    code: 'GDPR-13',
+    title: 'Informationspflichten',
+    description: 'Betroffene Personen muessen ueber die Datenverarbeitung informiert werden.',
+    source: 'DSGVO Art. 13/14',
+    category: 'Transparenz',
+    priority: 'high',
+    criticality: 'HIGH',
+    applicableModules: ['mod-gdpr'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-ai-act-9',
+    regulation: 'AI Act',
+    article: 'Art. 9',
+    code: 'AI-ACT-9',
+    title: 'Risikomanagementsystem',
+    description: 'Hochrisiko-KI-Systeme erfordern ein Risikomanagementsystem.',
+    source: 'AI Act Art. 9',
+    category: 'KI-Governance',
+    priority: 'high',
+    criticality: 'HIGH',
+    applicableModules: ['mod-ai-act'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-gdpr-32',
+    regulation: 'DSGVO',
+    article: 'Art. 32',
+    code: 'GDPR-32',
+    title: 'Sicherheit der Verarbeitung',
+    description: 'Geeignete technische und organisatorische Massnahmen zur Datensicherheit.',
+    source: 'DSGVO Art. 32',
+    category: 'Sicherheit',
+    priority: 'critical',
+    criticality: 'CRITICAL',
+    applicableModules: ['mod-gdpr', 'mod-iso27001'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-gdpr-35',
+    regulation: 'DSGVO',
+    article: 'Art. 35',
+    code: 'GDPR-35',
+    title: 'Datenschutz-Folgenabschaetzung',
+    description: 'Bei hohem Risiko ist eine DSFA durchzufuehren.',
+    source: 'DSGVO Art. 35',
+    category: 'Risikobewertung',
+    priority: 'high',
+    criticality: 'HIGH',
+    applicableModules: ['mod-gdpr'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-ai-act-13',
+    regulation: 'AI Act',
+    article: 'Art. 13',
+    code: 'AI-ACT-13',
+    title: 'Transparenzanforderungen',
+    description: 'KI-Systeme muessen fuer Nutzer nachvollziehbar und transparent sein.',
+    source: 'AI Act Art. 13',
+    category: 'Transparenz',
+    priority: 'high',
+    criticality: 'HIGH',
+    applicableModules: ['mod-ai-act'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+  {
+    id: 'req-nis2-21',
+    regulation: 'NIS2',
+    article: 'Art. 21',
+    code: 'NIS2-21',
+    title: 'Risikomanagementmassnahmen',
+    description: 'Wesentliche und wichtige Einrichtungen muessen Cybersicherheitsmassnahmen implementieren.',
+    source: 'NIS2 Art. 21',
+    category: 'Cybersicherheit',
+    priority: 'high',
+    criticality: 'HIGH',
+    applicableModules: ['mod-nis2'],
+    status: 'NOT_STARTED',
+    controls: [],
+  },
+]
diff --git a/admin-compliance/app/sdk/requirements/_hooks/useRequirementsData.ts b/admin-compliance/app/sdk/requirements/_hooks/useRequirementsData.ts
new file mode 100644
index 0000000..a93d508
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_hooks/useRequirementsData.ts
@@ -0,0 +1,246 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useSDK, Requirement as SDKRequirement, RequirementStatus, RiskSeverity } from '@/lib/sdk'
+import { AddRequirementData } from '../_types'
+import { requirementTemplates } from '../_data'
+
+export function useRequirementsData() {
+  const { state, dispatch } = useSDK()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [ragExtracting, setRagExtracting] = useState(false)
+  const [ragResult, setRagResult] = useState<{ created: number; skipped_duplicates: number; message: string } | null>(null)
+
+  const extractFromRAG = async () => {
+    setRagExtracting(true)
+    setRagResult(null)
+    try {
+      const res = await fetch('/api/sdk/v1/compliance/extract-requirements-from-rag', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ max_per_query: 20 }),
+      })
+      if (res.ok) {
+        const data = await res.json()
+        setRagResult({ created: data.created, skipped_duplicates: data.skipped_duplicates, message: data.message })
+        // Reload requirements list
+        const listRes = await fetch('/api/sdk/v1/compliance/requirements')
+        if (listRes.ok) {
+          const listData = await listRes.json()
+          const reqs = listData.requirements || listData
+          if (Array.isArray(reqs) && reqs.length > 0) {
+            const mapped = reqs.map((r: Record<string, unknown>) => ({
+              id: (r.requirement_id || r.id) as string,
+              regulation: (r.regulation_code || r.regulation || '') as string,
+              article: (r.article || '') as string,
+              title: (r.title || '') as string,
+              description: (r.description || '') as string,
+              criticality: ((r.criticality || r.priority || 'MEDIUM') as string).toUpperCase() as RiskSeverity,
+              applicableModules: [] as string[],
+              status: 'NOT_STARTED' as RequirementStatus,
+              controls: [] as string[],
+            }))
+            dispatch({ type: 'SET_STATE', payload: { requirements: mapped } })
+          }
+        }
+      } else {
+        setRagResult({ created: 0, skipped_duplicates: 0, message: 'RAG-Extraktion fehlgeschlagen' })
+      }
+    } catch {
+      setRagResult({ created: 0, skipped_duplicates: 0, message: 'RAG-Extraktion nicht erreichbar' })
+    } finally {
+      setRagExtracting(false)
+    }
+  }
+
+  // Fetch requirements from backend on mount
+  useEffect(() => {
+    const fetchRequirements = async () => {
+      try {
+        setLoading(true)
+        const res = await fetch('/api/sdk/v1/compliance/requirements')
+        if (res.ok) {
+          const data = await res.json()
+          const backendRequirements = data.requirements || data
+          if (Array.isArray(backendRequirements) && backendRequirements.length > 0) {
+            // Map backend data to SDK format and load into state
+            const mapped: SDKRequirement[] = backendRequirements.map((r: Record<string, unknown>) => ({
+              id: (r.requirement_id || r.id) as string,
+              regulation: (r.regulation_code || r.regulation || '') as string,
+              article: (r.article || '') as string,
+              title: (r.title || '') as string,
+              description: (r.description || '') as string,
+              criticality: ((r.criticality || r.priority || 'MEDIUM') as string).toUpperCase() as RiskSeverity,
+              applicableModules: (r.applicable_modules || []) as string[],
+              status: (r.status || 'NOT_STARTED') as RequirementStatus,
+              controls: (r.controls || []) as string[],
+            }))
+            dispatch({ type: 'SET_STATE', payload: { requirements: mapped } })
+            setError(null)
+            return
+          }
+        }
+        // If backend returns empty or fails, fall back to templates
+        loadFromTemplates()
+      } catch {
+        // Backend unavailable — use templates
+        loadFromTemplates()
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    const loadFromTemplates = () => {
+      if (state.requirements.length > 0) return // Already have data
+      if (state.modules.length === 0) return // No modules yet
+
+      const activeModuleIds = state.modules.map(m => m.id)
+      const relevantRequirements = requirementTemplates.filter(r =>
+        r.applicableModules.some(m => activeModuleIds.includes(m))
+      )
+
+      relevantRequirements.forEach(req => {
+        const sdkRequirement: SDKRequirement = {
+          id: req.id,
+          regulation: req.regulation,
+          article: req.article,
+          title: req.title,
+          description: req.description,
+          criticality: req.criticality,
+          applicableModules: req.applicableModules,
+          status: 'NOT_STARTED',
+          controls: [],
+        }
+        dispatch({ type: 'ADD_REQUIREMENT', payload: sdkRequirement })
+      })
+    }
+
+    fetchRequirements()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleStatusChange = async (requirementId: string, status: RequirementStatus) => {
+    const previousStatus = state.requirements.find(r => r.id === requirementId)?.status
+    dispatch({
+      type: 'UPDATE_REQUIREMENT',
+      payload: { id: requirementId, data: { status } },
+    })
+
+    // Persist to backend
+    try {
+      const res = await fetch(`/api/sdk/v1/compliance/requirements/${requirementId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ implementation_status: status.toLowerCase() }),
+      })
+      if (!res.ok) {
+        // Rollback on failure
+        if (previousStatus) {
+          dispatch({ type: 'UPDATE_REQUIREMENT', payload: { id: requirementId, data: { status: previousStatus } } })
+        }
+        setError('Status-Aenderung konnte nicht gespeichert werden')
+      }
+    } catch {
+      if (previousStatus) {
+        dispatch({ type: 'UPDATE_REQUIREMENT', payload: { id: requirementId, data: { status: previousStatus } } })
+      }
+      setError('Backend nicht erreichbar — Aenderung zurueckgesetzt')
+    }
+  }
+
+  const handleDeleteRequirement = async (requirementId: string) => {
+    if (!confirm('Anforderung wirklich loeschen?')) return
+
+    try {
+      const res = await fetch(`/api/sdk/v1/compliance/requirements/${requirementId}`, {
+        method: 'DELETE',
+      })
+      if (res.ok) {
+        dispatch({ type: 'SET_STATE', payload: { requirements: state.requirements.filter(r => r.id !== requirementId) } })
+      } else {
+        setError('Loeschen fehlgeschlagen')
+      }
+    } catch {
+      setError('Backend nicht erreichbar')
+    }
+  }
+
+  const handleAddRequirement = async (data: AddRequirementData): Promise<boolean> => {
+    // Try to resolve regulation_id from backend
+    let regulationId = ''
+    try {
+      const regRes = await fetch(`/api/sdk/v1/compliance/regulations/${data.regulation}`)
+      if (regRes.ok) {
+        const regData = await regRes.json()
+        regulationId = regData.id
+      }
+    } catch {
+      // Regulation not found — still add locally
+    }
+
+    const priorityMap: Record<string, number> = { LOW: 1, MEDIUM: 2, HIGH: 3, CRITICAL: 4 }
+
+    if (regulationId) {
+      try {
+        const res = await fetch('/api/sdk/v1/compliance/requirements', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            regulation_id: regulationId,
+            article: data.article,
+            title: data.title,
+            description: data.description,
+            priority: priorityMap[data.criticality] || 2,
+          }),
+        })
+        if (res.ok) {
+          const created = await res.json()
+          const newReq: SDKRequirement = {
+            id: created.id,
+            regulation: data.regulation,
+            article: data.article,
+            title: data.title,
+            description: data.description,
+            criticality: data.criticality,
+            applicableModules: [],
+            status: 'NOT_STARTED',
+            controls: [],
+          }
+          dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
+          return true
+        }
+      } catch {
+        // Fall through to local-only add
+      }
+    }
+
+    // Fallback: add locally only
+    const newReq: SDKRequirement = {
+      id: `req-${Date.now()}`,
+      regulation: data.regulation,
+      article: data.article,
+      title: data.title,
+      description: data.description,
+      criticality: data.criticality,
+      applicableModules: [],
+      status: 'NOT_STARTED',
+      controls: [],
+    }
+    dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
+    return true
+  }
+
+  return {
+    state,
+    loading,
+    error,
+    setError,
+    ragExtracting,
+    ragResult,
+    setRagResult,
+    extractFromRAG,
+    handleStatusChange,
+    handleDeleteRequirement,
+    handleAddRequirement,
+  }
+}
diff --git a/admin-compliance/app/sdk/requirements/_types.ts b/admin-compliance/app/sdk/requirements/_types.ts
new file mode 100644
index 0000000..0a5cff0
--- /dev/null
+++ b/admin-compliance/app/sdk/requirements/_types.ts
@@ -0,0 +1,42 @@
+import { Requirement as SDKRequirement, RequirementStatus, RiskSeverity } from '@/lib/sdk'
+
+export type DisplayPriority = 'critical' | 'high' | 'medium' | 'low'
+export type DisplayStatus = 'compliant' | 'partial' | 'non-compliant' | 'not-applicable'
+
+export interface DisplayRequirement extends SDKRequirement {
+  code: string
+  source: string
+  category: string
+  priority: DisplayPriority
+  displayStatus: DisplayStatus
+  controlsLinked: number
+  evidenceCount: number
+}
+
+export function mapCriticalityToPriority(criticality: RiskSeverity): DisplayPriority {
+  switch (criticality) {
+    case 'CRITICAL': return 'critical'
+    case 'HIGH': return 'high'
+    case 'MEDIUM': return 'medium'
+    case 'LOW': return 'low'
+    default: return 'medium'
+  }
+}
+
+export function mapStatusToDisplayStatus(status: RequirementStatus): DisplayStatus {
+  switch (status) {
+    case 'VERIFIED':
+    case 'IMPLEMENTED': return 'compliant'
+    case 'IN_PROGRESS': return 'partial'
+    case 'NOT_STARTED': return 'non-compliant'
+    default: return 'non-compliant'
+  }
+}
+
+export interface AddRequirementData {
+  regulation: string
+  article: string
+  title: string
+  description: string
+  criticality: RiskSeverity
+}
diff --git a/admin-compliance/app/sdk/requirements/page.tsx b/admin-compliance/app/sdk/requirements/page.tsx
index 91f6c8a..15e2bf5 100644
--- a/admin-compliance/app/sdk/requirements/page.tsx
+++ b/admin-compliance/app/sdk/requirements/page.tsx
@@ -1,519 +1,39 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
-import { useSDK, Requirement as SDKRequirement, RequirementStatus, RiskSeverity } from '@/lib/sdk'
+import { useState } from 'react'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-type DisplayPriority = 'critical' | 'high' | 'medium' | 'low'
-type DisplayStatus = 'compliant' | 'partial' | 'non-compliant' | 'not-applicable'
-
-interface DisplayRequirement extends SDKRequirement {
-  code: string
-  source: string
-  category: string
-  priority: DisplayPriority
-  displayStatus: DisplayStatus
-  controlsLinked: number
-  evidenceCount: number
-}
-
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-
-function mapCriticalityToPriority(criticality: RiskSeverity): DisplayPriority {
-  switch (criticality) {
-    case 'CRITICAL': return 'critical'
-    case 'HIGH': return 'high'
-    case 'MEDIUM': return 'medium'
-    case 'LOW': return 'low'
-    default: return 'medium'
-  }
-}
-
-function mapStatusToDisplayStatus(status: RequirementStatus): DisplayStatus {
-  switch (status) {
-    case 'VERIFIED':
-    case 'IMPLEMENTED': return 'compliant'
-    case 'IN_PROGRESS': return 'partial'
-    case 'NOT_STARTED': return 'non-compliant'
-    default: return 'non-compliant'
-  }
-}
-
-// =============================================================================
-// FALLBACK TEMPLATES (used when backend is unavailable)
-// =============================================================================
-
-const requirementTemplates: Omit<DisplayRequirement, 'displayStatus' | 'controlsLinked' | 'evidenceCount'>[] = [
-  {
-    id: 'req-gdpr-6',
-    regulation: 'DSGVO',
-    article: 'Art. 6',
-    code: 'GDPR-6.1',
-    title: 'Rechtmaessigkeit der Verarbeitung',
-    description: 'Personenbezogene Daten duerfen nur verarbeitet werden, wenn eine Rechtsgrundlage vorliegt.',
-    source: 'DSGVO Art. 6',
-    category: 'Rechtmaessigkeit',
-    priority: 'critical',
-    criticality: 'CRITICAL',
-    applicableModules: ['mod-gdpr'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-gdpr-13',
-    regulation: 'DSGVO',
-    article: 'Art. 13/14',
-    code: 'GDPR-13',
-    title: 'Informationspflichten',
-    description: 'Betroffene Personen muessen ueber die Datenverarbeitung informiert werden.',
-    source: 'DSGVO Art. 13/14',
-    category: 'Transparenz',
-    priority: 'high',
-    criticality: 'HIGH',
-    applicableModules: ['mod-gdpr'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-ai-act-9',
-    regulation: 'AI Act',
-    article: 'Art. 9',
-    code: 'AI-ACT-9',
-    title: 'Risikomanagementsystem',
-    description: 'Hochrisiko-KI-Systeme erfordern ein Risikomanagementsystem.',
-    source: 'AI Act Art. 9',
-    category: 'KI-Governance',
-    priority: 'high',
-    criticality: 'HIGH',
-    applicableModules: ['mod-ai-act'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-gdpr-32',
-    regulation: 'DSGVO',
-    article: 'Art. 32',
-    code: 'GDPR-32',
-    title: 'Sicherheit der Verarbeitung',
-    description: 'Geeignete technische und organisatorische Massnahmen zur Datensicherheit.',
-    source: 'DSGVO Art. 32',
-    category: 'Sicherheit',
-    priority: 'critical',
-    criticality: 'CRITICAL',
-    applicableModules: ['mod-gdpr', 'mod-iso27001'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-gdpr-35',
-    regulation: 'DSGVO',
-    article: 'Art. 35',
-    code: 'GDPR-35',
-    title: 'Datenschutz-Folgenabschaetzung',
-    description: 'Bei hohem Risiko ist eine DSFA durchzufuehren.',
-    source: 'DSGVO Art. 35',
-    category: 'Risikobewertung',
-    priority: 'high',
-    criticality: 'HIGH',
-    applicableModules: ['mod-gdpr'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-ai-act-13',
-    regulation: 'AI Act',
-    article: 'Art. 13',
-    code: 'AI-ACT-13',
-    title: 'Transparenzanforderungen',
-    description: 'KI-Systeme muessen fuer Nutzer nachvollziehbar und transparent sein.',
-    source: 'AI Act Art. 13',
-    category: 'Transparenz',
-    priority: 'high',
-    criticality: 'HIGH',
-    applicableModules: ['mod-ai-act'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-  {
-    id: 'req-nis2-21',
-    regulation: 'NIS2',
-    article: 'Art. 21',
-    code: 'NIS2-21',
-    title: 'Risikomanagementmassnahmen',
-    description: 'Wesentliche und wichtige Einrichtungen muessen Cybersicherheitsmassnahmen implementieren.',
-    source: 'NIS2 Art. 21',
-    category: 'Cybersicherheit',
-    priority: 'high',
-    criticality: 'HIGH',
-    applicableModules: ['mod-nis2'],
-    status: 'NOT_STARTED',
-    controls: [],
-  },
-]
-
-// =============================================================================
-// COMPONENTS
-// =============================================================================
-
-function AddRequirementForm({
-  onSubmit,
-  onCancel,
-}: {
-  onSubmit: (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => void
-  onCancel: () => void
-}) {
-  const [formData, setFormData] = useState({
-    regulation: '',
-    article: '',
-    title: '',
-    description: '',
-    criticality: 'MEDIUM' as RiskSeverity,
-  })
-
-  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 Anforderung</h3>
-      <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Verordnung *</label>
-            <input
-              type="text"
-              value={formData.regulation}
-              onChange={e => setFormData({ ...formData, regulation: e.target.value })}
-              placeholder="z.B. DSGVO"
-              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">Artikel</label>
-            <input
-              type="text"
-              value={formData.article}
-              onChange={e => setFormData({ ...formData, article: e.target.value })}
-              placeholder="z.B. Art. 6"
-              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>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
-          <input
-            type="text"
-            value={formData.title}
-            onChange={e => setFormData({ ...formData, title: e.target.value })}
-            placeholder="z.B. Rechtmaessigkeit der Verarbeitung"
-            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 Anforderung..."
-            rows={3}
-            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">Kritikalitaet</label>
-          <select
-            value={formData.criticality}
-            onChange={e => setFormData({ ...formData, criticality: e.target.value as RiskSeverity })}
-            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="LOW">Niedrig</option>
-            <option value="MEDIUM">Mittel</option>
-            <option value="HIGH">Hoch</option>
-            <option value="CRITICAL">Kritisch</option>
-          </select>
-        </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.title || !formData.regulation}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.title && formData.regulation ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          Hinzufuegen
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function RequirementCard({
-  requirement,
-  onStatusChange,
-  onDelete,
-  expanded,
-  onToggleDetails,
-  linkedControls,
-}: {
-  requirement: DisplayRequirement
-  onStatusChange: (status: RequirementStatus) => void
-  onDelete: () => void
-  expanded: boolean
-  onToggleDetails: () => void
-  linkedControls: { id: string; name: string }[]
-}) {
-  const priorityColors = {
-    critical: 'bg-red-100 text-red-700',
-    high: 'bg-orange-100 text-orange-700',
-    medium: 'bg-yellow-100 text-yellow-700',
-    low: 'bg-green-100 text-green-700',
-  }
-
-  const statusColors = {
-    compliant: 'bg-green-100 text-green-700 border-green-200',
-    partial: 'bg-yellow-100 text-yellow-700 border-yellow-200',
-    'non-compliant': 'bg-red-100 text-red-700 border-red-200',
-    'not-applicable': 'bg-gray-100 text-gray-500 border-gray-200',
-  }
-
-  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${statusColors[requirement.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">
-              {requirement.code}
-            </span>
-            <span className={`px-2 py-1 text-xs rounded-full ${priorityColors[requirement.priority]}`}>
-              {requirement.priority === 'critical' ? 'Kritisch' :
-               requirement.priority === 'high' ? 'Hoch' :
-               requirement.priority === 'medium' ? 'Mittel' : 'Niedrig'}
-            </span>
-            <span className="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded">
-              {requirement.regulation}
-            </span>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">{requirement.title}</h3>
-          <p className="text-sm text-gray-500 mt-1">{requirement.description}</p>
-          <p className="text-xs text-gray-400 mt-2">Quelle: {requirement.source}</p>
-        </div>
-        <select
-          value={requirement.status}
-          onChange={(e) => onStatusChange(e.target.value as RequirementStatus)}
-          className={`px-3 py-1 text-sm rounded-full border ${statusColors[requirement.displayStatus]}`}
-        >
-          <option value="NOT_STARTED">Nicht begonnen</option>
-          <option value="IN_PROGRESS">In Bearbeitung</option>
-          <option value="IMPLEMENTED">Implementiert</option>
-          <option value="VERIFIED">Verifiziert</option>
-        </select>
-      </div>
-
-      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
-        <div className="flex items-center gap-4 text-sm text-gray-500">
-          <span>{requirement.controlsLinked} Kontrollen</span>
-          <span>{requirement.evidenceCount} Nachweise</span>
-        </div>
-        <button
-          onClick={onToggleDetails}
-          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
-        >
-          {expanded ? 'Details ausblenden' : 'Details anzeigen'}
-        </button>
-      </div>
-
-      {expanded && (
-        <div className="mt-4 pt-4 border-t border-gray-200 space-y-3">
-          <div>
-            <h4 className="text-sm font-medium text-gray-700 mb-1">Vollstaendige Beschreibung</h4>
-            <p className="text-sm text-gray-600">{requirement.description || 'Keine Beschreibung vorhanden.'}</p>
-          </div>
-          <div>
-            <h4 className="text-sm font-medium text-gray-700 mb-1">Zugeordnete Kontrollen ({linkedControls.length})</h4>
-            {linkedControls.length > 0 ? (
-              <div className="flex flex-wrap gap-2">
-                {linkedControls.map(c => (
-                  <span key={c.id} className="px-2 py-1 text-xs bg-green-50 text-green-700 rounded">{c.name}</span>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm text-gray-400">Keine Kontrollen zugeordnet</p>
-            )}
-          </div>
-          <div className="flex items-center justify-between">
-            <div>
-              <h4 className="text-sm font-medium text-gray-700 mb-1">Status-Historie</h4>
-              <div className="flex items-center gap-2 text-sm text-gray-500">
-                <span className={`px-2 py-0.5 text-xs rounded-full ${
-                  requirement.displayStatus === 'compliant' ? 'bg-green-100 text-green-700' :
-                  requirement.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
-                  'bg-red-100 text-red-700'
-                }`}>
-                  {requirement.status === 'NOT_STARTED' ? 'Nicht begonnen' :
-                   requirement.status === 'IN_PROGRESS' ? 'In Bearbeitung' :
-                   requirement.status === 'IMPLEMENTED' ? 'Implementiert' : 'Verifiziert'}
-                </span>
-              </div>
-            </div>
-            <button
-              onClick={onDelete}
-              className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 border border-red-200 rounded-lg transition-colors"
-            >
-              Loeschen
-            </button>
-          </div>
-        </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>
-          <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
-          <div className="h-4 w-full bg-gray-100 rounded" />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
+import { DisplayRequirement, mapCriticalityToPriority, mapStatusToDisplayStatus, AddRequirementData } from './_types'
+import { requirementTemplates } from './_data'
+import { AddRequirementForm } from './_components/AddRequirementForm'
+import { RequirementCard } from './_components/RequirementCard'
+import { LoadingSkeleton } from './_components/LoadingSkeleton'
+import { useRequirementsData } from './_hooks/useRequirementsData'
 
 export default function RequirementsPage() {
-  const { state, dispatch } = useSDK()
+  const {
+    state,
+    loading,
+    error,
+    setError,
+    ragExtracting,
+    ragResult,
+    setRagResult,
+    extractFromRAG,
+    handleStatusChange,
+    handleDeleteRequirement,
+    handleAddRequirement,
+  } = useRequirementsData()
+
   const [filter, setFilter] = useState<string>('all')
   const [searchQuery, setSearchQuery] = useState('')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
   const [showAddForm, setShowAddForm] = useState(false)
   const [expandedId, setExpandedId] = useState<string | null>(null)
-  const [ragExtracting, setRagExtracting] = useState(false)
-  const [ragResult, setRagResult] = useState<{ created: number; skipped_duplicates: number; message: string } | null>(null)
 
-  const extractFromRAG = async () => {
-    setRagExtracting(true)
-    setRagResult(null)
-    try {
-      const res = await fetch('/api/sdk/v1/compliance/extract-requirements-from-rag', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ max_per_query: 20 }),
-      })
-      if (res.ok) {
-        const data = await res.json()
-        setRagResult({ created: data.created, skipped_duplicates: data.skipped_duplicates, message: data.message })
-        // Reload requirements list
-        const listRes = await fetch('/api/sdk/v1/compliance/requirements')
-        if (listRes.ok) {
-          const listData = await listRes.json()
-          const reqs = listData.requirements || listData
-          if (Array.isArray(reqs) && reqs.length > 0) {
-            const mapped = reqs.map((r: Record<string, unknown>) => ({
-              id: (r.requirement_id || r.id) as string,
-              regulation: (r.regulation_code || r.regulation || '') as string,
-              article: (r.article || '') as string,
-              title: (r.title || '') as string,
-              description: (r.description || '') as string,
-              criticality: ((r.criticality || r.priority || 'MEDIUM') as string).toUpperCase() as import('@/lib/sdk').RiskSeverity,
-              applicableModules: [] as string[],
-              status: 'NOT_STARTED' as import('@/lib/sdk').RequirementStatus,
-              controls: [] as string[],
-            }))
-            dispatch({ type: 'SET_STATE', payload: { requirements: mapped } })
-          }
-        }
-      } else {
-        setRagResult({ created: 0, skipped_duplicates: 0, message: 'RAG-Extraktion fehlgeschlagen' })
-      }
-    } catch {
-      setRagResult({ created: 0, skipped_duplicates: 0, message: 'RAG-Extraktion nicht erreichbar' })
-    } finally {
-      setRagExtracting(false)
-    }
+  const onSubmitAdd = async (data: AddRequirementData) => {
+    const ok = await handleAddRequirement(data)
+    if (ok) setShowAddForm(false)
   }
 
-  // Fetch requirements from backend on mount
-  useEffect(() => {
-    const fetchRequirements = async () => {
-      try {
-        setLoading(true)
-        const res = await fetch('/api/sdk/v1/compliance/requirements')
-        if (res.ok) {
-          const data = await res.json()
-          const backendRequirements = data.requirements || data
-          if (Array.isArray(backendRequirements) && backendRequirements.length > 0) {
-            // Map backend data to SDK format and load into state
-            const mapped: SDKRequirement[] = backendRequirements.map((r: Record<string, unknown>) => ({
-              id: (r.requirement_id || r.id) as string,
-              regulation: (r.regulation_code || r.regulation || '') as string,
-              article: (r.article || '') as string,
-              title: (r.title || '') as string,
-              description: (r.description || '') as string,
-              criticality: ((r.criticality || r.priority || 'MEDIUM') as string).toUpperCase() as RiskSeverity,
-              applicableModules: (r.applicable_modules || []) as string[],
-              status: (r.status || 'NOT_STARTED') as RequirementStatus,
-              controls: (r.controls || []) as string[],
-            }))
-            dispatch({ type: 'SET_STATE', payload: { requirements: mapped } })
-            setError(null)
-            return
-          }
-        }
-        // If backend returns empty or fails, fall back to templates
-        loadFromTemplates()
-      } catch {
-        // Backend unavailable — use templates
-        loadFromTemplates()
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    const loadFromTemplates = () => {
-      if (state.requirements.length > 0) return // Already have data
-      if (state.modules.length === 0) return // No modules yet
-
-      const activeModuleIds = state.modules.map(m => m.id)
-      const relevantRequirements = requirementTemplates.filter(r =>
-        r.applicableModules.some(m => activeModuleIds.includes(m))
-      )
-
-      relevantRequirements.forEach(req => {
-        const sdkRequirement: SDKRequirement = {
-          id: req.id,
-          regulation: req.regulation,
-          article: req.article,
-          title: req.title,
-          description: req.description,
-          criticality: req.criticality,
-          applicableModules: req.applicableModules,
-          status: 'NOT_STARTED',
-          controls: [],
-        }
-        dispatch({ type: 'ADD_REQUIREMENT', payload: sdkRequirement })
-      })
-    }
-
-    fetchRequirements()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
   // Convert SDK requirements to display requirements
   const displayRequirements: DisplayRequirement[] = state.requirements.map(req => {
     const template = requirementTemplates.find(t => t.id === req.id)
@@ -546,118 +66,6 @@ export default function RequirementsPage() {
   const partialCount = displayRequirements.filter(r => r.displayStatus === 'partial').length
   const nonCompliantCount = displayRequirements.filter(r => r.displayStatus === 'non-compliant').length
 
-  const handleStatusChange = async (requirementId: string, status: RequirementStatus) => {
-    const previousStatus = state.requirements.find(r => r.id === requirementId)?.status
-    dispatch({
-      type: 'UPDATE_REQUIREMENT',
-      payload: { id: requirementId, data: { status } },
-    })
-
-    // Persist to backend
-    try {
-      const res = await fetch(`/api/sdk/v1/compliance/requirements/${requirementId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ implementation_status: status.toLowerCase() }),
-      })
-      if (!res.ok) {
-        // Rollback on failure
-        if (previousStatus) {
-          dispatch({ type: 'UPDATE_REQUIREMENT', payload: { id: requirementId, data: { status: previousStatus } } })
-        }
-        setError('Status-Aenderung konnte nicht gespeichert werden')
-      }
-    } catch {
-      if (previousStatus) {
-        dispatch({ type: 'UPDATE_REQUIREMENT', payload: { id: requirementId, data: { status: previousStatus } } })
-      }
-      setError('Backend nicht erreichbar — Aenderung zurueckgesetzt')
-    }
-  }
-
-  const handleDeleteRequirement = async (requirementId: string) => {
-    if (!confirm('Anforderung wirklich loeschen?')) return
-
-    try {
-      const res = await fetch(`/api/sdk/v1/compliance/requirements/${requirementId}`, {
-        method: 'DELETE',
-      })
-      if (res.ok) {
-        dispatch({ type: 'SET_STATE', payload: { requirements: state.requirements.filter(r => r.id !== requirementId) } })
-      } else {
-        setError('Loeschen fehlgeschlagen')
-      }
-    } catch {
-      setError('Backend nicht erreichbar')
-    }
-  }
-
-  const handleAddRequirement = async (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => {
-    // Try to resolve regulation_id from backend
-    let regulationId = ''
-    try {
-      const regRes = await fetch(`/api/sdk/v1/compliance/regulations/${data.regulation}`)
-      if (regRes.ok) {
-        const regData = await regRes.json()
-        regulationId = regData.id
-      }
-    } catch {
-      // Regulation not found — still add locally
-    }
-
-    const priorityMap: Record<string, number> = { LOW: 1, MEDIUM: 2, HIGH: 3, CRITICAL: 4 }
-
-    if (regulationId) {
-      try {
-        const res = await fetch('/api/sdk/v1/compliance/requirements', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            regulation_id: regulationId,
-            article: data.article,
-            title: data.title,
-            description: data.description,
-            priority: priorityMap[data.criticality] || 2,
-          }),
-        })
-        if (res.ok) {
-          const created = await res.json()
-          const newReq: SDKRequirement = {
-            id: created.id,
-            regulation: data.regulation,
-            article: data.article,
-            title: data.title,
-            description: data.description,
-            criticality: data.criticality,
-            applicableModules: [],
-            status: 'NOT_STARTED',
-            controls: [],
-          }
-          dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
-          setShowAddForm(false)
-          return
-        }
-      } catch {
-        // Fall through to local-only add
-      }
-    }
-
-    // Fallback: add locally only
-    const newReq: SDKRequirement = {
-      id: `req-${Date.now()}`,
-      regulation: data.regulation,
-      article: data.article,
-      title: data.title,
-      description: data.description,
-      criticality: data.criticality,
-      applicableModules: [],
-      status: 'NOT_STARTED',
-      controls: [],
-    }
-    dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
-    setShowAddForm(false)
-  }
-
   const stepInfo = STEP_EXPLANATIONS['requirements']
 
   return (
@@ -713,7 +121,7 @@ export default function RequirementsPage() {
       {/* Add Form */}
       {showAddForm && (
         <AddRequirementForm
-          onSubmit={handleAddRequirement}
+          onSubmit={onSubmitAdd}
           onCancel={() => setShowAddForm(false)}
         />
       )}