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

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

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

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

@@ -0,0 +1,17 @@
+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="h-6 w-3/4 bg-gray-200 rounded mb-2" />
+          <div className="h-4 w-full bg-gray-100 rounded mb-4" />
+          <div className="grid grid-cols-3 gap-4">
+            <div className="h-4 bg-gray-200 rounded" />
+            <div className="h-4 bg-gray-200 rounded" />
+            <div className="h-4 bg-gray-200 rounded" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

admin-compliance/app/sdk/risks/_components/RiskCard.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useState } from 'react'
+import { Risk, RiskStatus } from '@/lib/sdk'
+
+export function RiskCard({
+  risk,
+  onEdit,
+  onDelete,
+  onStatusChange,
+}: {
+  risk: Risk
+  onEdit: () => void
+  onDelete: () => void
+  onStatusChange: (status: RiskStatus) => void
+}) {
+  const [showMitigations, setShowMitigations] = useState(false)
+  const severityColors = {
+    CRITICAL: 'border-red-200 bg-red-50',
+    HIGH: 'border-orange-200 bg-orange-50',
+    MEDIUM: 'border-yellow-200 bg-yellow-50',
+    LOW: 'border-green-200 bg-green-50',
+  }
+
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${severityColors[risk.severity]}`}>
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="flex items-center gap-2">
+            <h4 className="font-semibold text-gray-900">{risk.title}</h4>
+            <span
+              className={`px-2 py-0.5 text-xs rounded-full ${
+                risk.severity === 'CRITICAL'
+                  ? 'bg-red-100 text-red-700'
+                  : risk.severity === 'HIGH'
+                  ? 'bg-orange-100 text-orange-700'
+                  : risk.severity === 'MEDIUM'
+                  ? 'bg-yellow-100 text-yellow-700'
+                  : 'bg-green-100 text-green-700'
+              }`}
+            >
+              {risk.severity}
+            </span>
+          </div>
+          <p className="text-sm text-gray-500 mt-1">{risk.description}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onEdit}
+            className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+              />
+            </svg>
+          </button>
+          <button
+            onClick={onDelete}
+            className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-4 grid grid-cols-4 gap-4 text-sm">
+        <div>
+          <span className="text-gray-500">Wahrscheinlichkeit:</span>
+          <span className="ml-2 font-medium">{risk.likelihood}/5</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Auswirkung:</span>
+          <span className="ml-2 font-medium">{risk.impact}/5</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Inherent:</span>
+          <span className="ml-2 font-medium">{risk.inherentRiskScore}</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Residual:</span>
+          <span className={`ml-2 font-medium ${
+            risk.residualRiskScore < risk.inherentRiskScore ? 'text-green-600' : ''
+          }`}>
+            {risk.residualRiskScore}
+          </span>
+          {risk.residualRiskScore < risk.inherentRiskScore && (
+            <span className="ml-1 text-xs text-green-600">
+              ({risk.inherentRiskScore} &rarr; {risk.residualRiskScore})
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-200 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500">Status:</span>
+          <select
+            value={risk.status}
+            onChange={(e) => onStatusChange(e.target.value as RiskStatus)}
+            className="px-2 py-1 text-sm border border-gray-300 rounded-lg"
+          >
+            <option value="IDENTIFIED">Identifiziert</option>
+            <option value="ASSESSED">Bewertet</option>
+            <option value="MITIGATED">Mitigiert</option>
+            <option value="ACCEPTED">Akzeptiert</option>
+            <option value="CLOSED">Geschlossen</option>
+          </select>
+        </div>
+        {risk.mitigation.length > 0 && (
+          <button
+            onClick={() => setShowMitigations(!showMitigations)}
+            className="text-sm text-purple-600 hover:text-purple-700"
+          >
+            {showMitigations ? 'Mitigationen ausblenden' : `${risk.mitigation.length} Mitigation(en) anzeigen`}
+          </button>
+        )}
+      </div>
+
+      {showMitigations && risk.mitigation.length > 0 && (
+        <div className="mt-3 space-y-2">
+          {risk.mitigation.map((m, idx) => (
+            <div key={idx} className="p-3 bg-gray-50 rounded-lg text-sm">
+              <div className="flex items-center justify-between">
+                <span className="font-medium text-gray-700">{m.controlId || `Mitigation ${idx + 1}`}</span>
+                <span className={`px-2 py-0.5 text-xs rounded-full ${
+                  m.status === 'IMPLEMENTED' ? 'bg-green-100 text-green-700' :
+                  m.status === 'IN_PROGRESS' ? 'bg-yellow-100 text-yellow-700' :
+                  'bg-gray-100 text-gray-500'
+                }`}>
+                  {m.status === 'IMPLEMENTED' ? 'Implementiert' :
+                   m.status === 'IN_PROGRESS' ? 'In Bearbeitung' : m.status || 'Geplant'}
+                </span>
+              </div>
+              {m.description && <p className="text-gray-500 mt-1">{m.description}</p>}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/risks/_components/RiskForm.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { useState } from 'react'
+import { RiskLikelihood, RiskImpact, calculateRiskScore, getRiskSeverityFromScore } from '@/lib/sdk'
+
+export interface RiskFormData {
+  title: string
+  description: string
+  category: string
+  likelihood: RiskLikelihood
+  impact: RiskImpact
+}
+
+export function RiskForm({
+  onSubmit,
+  onCancel,
+  initialData,
+}: {
+  onSubmit: (data: RiskFormData) => void
+  onCancel: () => void
+  initialData?: Partial<RiskFormData>
+}) {
+  const [formData, setFormData] = useState<RiskFormData>({
+    title: initialData?.title || '',
+    description: initialData?.description || '',
+    category: initialData?.category || 'technical',
+    likelihood: initialData?.likelihood || 3,
+    impact: initialData?.impact || 3,
+  })
+
+  const score = calculateRiskScore(formData.likelihood, formData.impact)
+  const severity = getRiskSeverityFromScore(score)
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">
+        {initialData ? 'Risiko bearbeiten' : 'Neues Risiko'}
+      </h3>
+
+      <div className="space-y-4">
+        <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. Datenverlust durch Systemausfall"
+            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 das Risiko..."
+            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">Kategorie</label>
+          <select
+            value={formData.category}
+            onChange={e => setFormData({ ...formData, category: e.target.value })}
+            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="legal">Rechtlich</option>
+            <option value="operational">Operativ</option>
+            <option value="strategic">Strategisch</option>
+          </select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Wahrscheinlichkeit (1-5)
+            </label>
+            <input
+              type="range"
+              min={1}
+              max={5}
+              value={formData.likelihood}
+              onChange={e => setFormData({ ...formData, likelihood: Number(e.target.value) as RiskLikelihood })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>Sehr unwahrscheinlich</span>
+              <span className="font-bold">{formData.likelihood}</span>
+              <span>Sehr wahrscheinlich</span>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Auswirkung (1-5)</label>
+            <input
+              type="range"
+              min={1}
+              max={5}
+              value={formData.impact}
+              onChange={e => setFormData({ ...formData, impact: Number(e.target.value) as RiskImpact })}
+              className="w-full"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>Gering</span>
+              <span className="font-bold">{formData.impact}</span>
+              <span>Katastrophal</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={`p-4 rounded-lg ${
+            severity === 'CRITICAL'
+              ? 'bg-red-50 border border-red-200'
+              : severity === 'HIGH'
+              ? 'bg-orange-50 border border-orange-200'
+              : severity === 'MEDIUM'
+              ? 'bg-yellow-50 border border-yellow-200'
+              : 'bg-green-50 border border-green-200'
+          }`}
+        >
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Berechneter Risikoscore:</span>
+            <span
+              className={`px-3 py-1 rounded-full text-sm font-bold ${
+                severity === 'CRITICAL'
+                  ? 'bg-red-100 text-red-700'
+                  : severity === 'HIGH'
+                  ? 'bg-orange-100 text-orange-700'
+                  : severity === 'MEDIUM'
+                  ? 'bg-yellow-100 text-yellow-700'
+                  : 'bg-green-100 text-green-700'
+              }`}
+            >
+              {score} ({severity})
+            </span>
+          </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.title}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.title
+              ? 'bg-purple-600 text-white hover:bg-purple-700'
+              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          Speichern
+        </button>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/risks/_components/RiskMatrix.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import React from 'react'
+import { Risk } from '@/lib/sdk'
+
+export function RiskMatrix({ risks, onCellClick }: { risks: Risk[]; onCellClick: (l: number, i: number) => void }) {
+  const matrix: Record<string, Risk[]> = {}
+
+  risks.forEach(risk => {
+    const key = `${risk.likelihood}-${risk.impact}`
+    if (!matrix[key]) matrix[key] = []
+    matrix[key].push(risk)
+  })
+
+  const getCellColor = (likelihood: number, impact: number): string => {
+    const score = likelihood * impact
+    if (score >= 20) return 'bg-red-500'
+    if (score >= 15) return 'bg-red-400'
+    if (score >= 12) return 'bg-orange-400'
+    if (score >= 8) return 'bg-yellow-400'
+    if (score >= 4) return 'bg-yellow-300'
+    return 'bg-green-400'
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">5x5 Risikomatrix</h3>
+      <div className="flex">
+        <div className="flex flex-col justify-center pr-2">
+          <div className="transform -rotate-90 whitespace-nowrap text-sm text-gray-500 font-medium">
+            Wahrscheinlichkeit
+          </div>
+        </div>
+
+        <div className="flex-1">
+          <div className="grid grid-cols-5 gap-1">
+            {[5, 4, 3, 2, 1].map(likelihood => (
+              <React.Fragment key={likelihood}>
+                {[1, 2, 3, 4, 5].map(impact => {
+                  const key = `${likelihood}-${impact}`
+                  const cellRisks = matrix[key] || []
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => onCellClick(likelihood, impact)}
+                      className={`aspect-square rounded-lg ${getCellColor(
+                        likelihood,
+                        impact
+                      )} hover:opacity-80 transition-opacity relative`}
+                    >
+                      {cellRisks.length > 0 && (
+                        <span className="absolute inset-0 flex items-center justify-center text-white font-bold text-lg">
+                          {cellRisks.length}
+                        </span>
+                      )}
+                    </button>
+                  )
+                })}
+              </React.Fragment>
+            ))}
+          </div>
+
+          <div className="mt-2 text-center text-sm text-gray-500 font-medium">Auswirkung</div>
+        </div>
+      </div>
+
+      <div className="mt-6 flex items-center justify-center gap-4 text-sm">
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-green-400" />
+          <span>Niedrig</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-yellow-400" />
+          <span>Mittel</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-orange-400" />
+          <span>Hoch</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-red-500" />
+          <span>Kritisch</span>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/risks/_hooks/useRisks.ts

@@ -0,0 +1,184 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useSDK, Risk, RiskLikelihood, RiskImpact, RiskSeverity, RiskStatus, RiskMitigation, calculateRiskScore, getRiskSeverityFromScore } from '@/lib/sdk'
+import { RiskFormData } from '../_components/RiskForm'
+
+export function useRisks() {
+  const { state, dispatch, addRisk } = useSDK()
+  const [showForm, setShowForm] = useState(false)
+  const [editingRisk, setEditingRisk] = useState<Risk | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [matrixFilter, setMatrixFilter] = useState<{ likelihood: number; impact: number } | null>(null)
+
+  useEffect(() => {
+    const fetchRisks = async () => {
+      try {
+        setLoading(true)
+        const res = await fetch('/api/sdk/v1/compliance/risks')
+        if (res.ok) {
+          const data = await res.json()
+          const backendRisks = data.risks || data
+          if (Array.isArray(backendRisks) && backendRisks.length > 0) {
+            const mapped: Risk[] = backendRisks.map((r: Record<string, unknown>) => ({
+              id: (r.risk_id || r.id || '') as string,
+              title: (r.title || '') as string,
+              description: (r.description || '') as string,
+              category: (r.category || 'technical') as string,
+              likelihood: (r.likelihood || 3) as RiskLikelihood,
+              impact: (r.impact || 3) as RiskImpact,
+              severity: ((r.inherent_risk || r.severity || 'MEDIUM') as string).toUpperCase() as RiskSeverity,
+              inherentRiskScore: (r.likelihood as number || 3) * (r.impact as number || 3),
+              residualRiskScore: (r.residual_likelihood as number || r.likelihood as number || 3) * (r.residual_impact as number || r.impact as number || 3),
+              status: (r.status || 'IDENTIFIED') as RiskStatus,
+              mitigation: (Array.isArray(r.mitigating_controls) ? (r.mitigating_controls as RiskMitigation[]) : []) as RiskMitigation[],
+              owner: (r.owner || null) as string | null,
+              relatedControls: [] as string[],
+              relatedRequirements: [] as string[],
+            }))
+            dispatch({ type: 'SET_STATE', payload: { risks: mapped } })
+            setError(null)
+          }
+        }
+      } catch {
+        // Backend unavailable — use SDK state as-is
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchRisks()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSubmit = async (data: RiskFormData) => {
+    const score = calculateRiskScore(data.likelihood, data.impact)
+    const severity = getRiskSeverityFromScore(score)
+
+    if (editingRisk) {
+      dispatch({
+        type: 'UPDATE_RISK',
+        payload: {
+          id: editingRisk.id,
+          data: { ...data, severity, inherentRiskScore: score, residualRiskScore: score },
+        },
+      })
+      try {
+        await fetch(`/api/sdk/v1/compliance/risks/${editingRisk.id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            title: data.title,
+            description: data.description,
+            category: data.category,
+            likelihood: data.likelihood,
+            impact: data.impact,
+          }),
+        })
+      } catch {
+        // Silently fail
+      }
+    } else {
+      const riskId = `risk-${Date.now()}`
+      const newRisk: Risk = {
+        id: riskId,
+        ...data,
+        severity,
+        inherentRiskScore: score,
+        residualRiskScore: score,
+        status: 'IDENTIFIED',
+        mitigation: [],
+        owner: null,
+        relatedControls: [],
+        relatedRequirements: [],
+      }
+      addRisk(newRisk)
+      try {
+        await fetch('/api/sdk/v1/compliance/risks', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            risk_id: riskId,
+            title: data.title,
+            description: data.description,
+            category: data.category,
+            likelihood: data.likelihood,
+            impact: data.impact,
+          }),
+        })
+      } catch {
+        // Silently fail
+      }
+    }
+
+    setShowForm(false)
+    setEditingRisk(null)
+  }
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Moechten Sie dieses Risiko wirklich loeschen?')) return
+    dispatch({ type: 'DELETE_RISK', payload: id })
+    try {
+      await fetch(`/api/sdk/v1/compliance/risks/${id}`, { method: 'DELETE' })
+    } catch {
+      // Silently fail
+    }
+  }
+
+  const handleStatusChange = async (riskId: string, status: RiskStatus) => {
+    dispatch({ type: 'UPDATE_RISK', payload: { id: riskId, data: { status } } })
+    try {
+      await fetch(`/api/sdk/v1/compliance/risks/${riskId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status }),
+      })
+    } catch {
+      // Silently fail
+    }
+  }
+
+  const handleEdit = (risk: Risk) => {
+    setEditingRisk(risk)
+    setShowForm(true)
+  }
+
+  const handleMatrixCellClick = (l: number, i: number) => {
+    if (matrixFilter && matrixFilter.likelihood === l && matrixFilter.impact === i) {
+      setMatrixFilter(null)
+    } else {
+      setMatrixFilter({ likelihood: l, impact: i })
+    }
+  }
+
+  const stats = {
+    totalRisks: state.risks.length,
+    criticalRisks: state.risks.filter(r => r.severity === 'CRITICAL').length,
+    highRisks: state.risks.filter(r => r.severity === 'HIGH').length,
+    mitigatedRisks: state.risks.filter(r => r.mitigation.length > 0).length,
+  }
+
+  const filteredRisks = state.risks
+    .filter(risk => !matrixFilter || (risk.likelihood === matrixFilter.likelihood && risk.impact === matrixFilter.impact))
+    .sort((a, b) => b.inherentRiskScore - a.inherentRiskScore)
+
+  return {
+    state,
+    showForm,
+    setShowForm,
+    editingRisk,
+    setEditingRisk,
+    loading,
+    error,
+    setError,
+    matrixFilter,
+    setMatrixFilter,
+    handleSubmit,
+    handleDelete,
+    handleStatusChange,
+    handleEdit,
+    handleMatrixCellClick,
+    stats,
+    filteredRisks,
+  }
+}

admin-compliance/app/sdk/risks/page.tsx

@@ -1,612 +1,37 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
-import { useSDK, Risk, RiskLikelihood, RiskImpact, RiskSeverity, RiskStatus, RiskMitigation, calculateRiskScore, getRiskSeverityFromScore } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-
-// =============================================================================
-// RISK MATRIX
-// =============================================================================
-
-function RiskMatrix({ risks, onCellClick }: { risks: Risk[]; onCellClick: (l: number, i: number) => void }) {
-  const matrix: Record<string, Risk[]> = {}
-
-  risks.forEach(risk => {
-    const key = `${risk.likelihood}-${risk.impact}`
-    if (!matrix[key]) matrix[key] = []
-    matrix[key].push(risk)
-  })
-
-  const getCellColor = (likelihood: number, impact: number): string => {
-    const score = likelihood * impact
-    if (score >= 20) return 'bg-red-500'
-    if (score >= 15) return 'bg-red-400'
-    if (score >= 12) return 'bg-orange-400'
-    if (score >= 8) return 'bg-yellow-400'
-    if (score >= 4) return 'bg-yellow-300'
-    return 'bg-green-400'
-  }
-
-  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">5x5 Risikomatrix</h3>
-      <div className="flex">
-        {/* Y-Axis Label */}
-        <div className="flex flex-col justify-center pr-2">
-          <div className="transform -rotate-90 whitespace-nowrap text-sm text-gray-500 font-medium">
-            Wahrscheinlichkeit
-          </div>
-        </div>
-
-        <div className="flex-1">
-          {/* Matrix Grid */}
-          <div className="grid grid-cols-5 gap-1">
-            {[5, 4, 3, 2, 1].map(likelihood => (
-              <React.Fragment key={likelihood}>
-                {[1, 2, 3, 4, 5].map(impact => {
-                  const key = `${likelihood}-${impact}`
-                  const cellRisks = matrix[key] || []
-                  return (
-                    <button
-                      key={key}
-                      onClick={() => onCellClick(likelihood, impact)}
-                      className={`aspect-square rounded-lg ${getCellColor(
-                        likelihood,
-                        impact
-                      )} hover:opacity-80 transition-opacity relative`}
-                    >
-                      {cellRisks.length > 0 && (
-                        <span className="absolute inset-0 flex items-center justify-center text-white font-bold text-lg">
-                          {cellRisks.length}
-                        </span>
-                      )}
-                    </button>
-                  )
-                })}
-              </React.Fragment>
-            ))}
-          </div>
-
-          {/* X-Axis Label */}
-          <div className="mt-2 text-center text-sm text-gray-500 font-medium">Auswirkung</div>
-        </div>
-      </div>
-
-      {/* Legend */}
-      <div className="mt-6 flex items-center justify-center gap-4 text-sm">
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 rounded bg-green-400" />
-          <span>Niedrig</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 rounded bg-yellow-400" />
-          <span>Mittel</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 rounded bg-orange-400" />
-          <span>Hoch</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 rounded bg-red-500" />
-          <span>Kritisch</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// RISK FORM
-// =============================================================================
-
-interface RiskFormData {
-  title: string
-  description: string
-  category: string
-  likelihood: RiskLikelihood
-  impact: RiskImpact
-}
-
-function RiskForm({
-  onSubmit,
-  onCancel,
-  initialData,
-}: {
-  onSubmit: (data: RiskFormData) => void
-  onCancel: () => void
-  initialData?: Partial<RiskFormData>
-}) {
-  const [formData, setFormData] = useState<RiskFormData>({
-    title: initialData?.title || '',
-    description: initialData?.description || '',
-    category: initialData?.category || 'technical',
-    likelihood: initialData?.likelihood || 3,
-    impact: initialData?.impact || 3,
-  })
-
-  const score = calculateRiskScore(formData.likelihood, formData.impact)
-  const severity = getRiskSeverityFromScore(score)
-
-  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">
-        {initialData ? 'Risiko bearbeiten' : 'Neues Risiko'}
-      </h3>
-
-      <div className="space-y-4">
-        <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. Datenverlust durch Systemausfall"
-            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 das Risiko..."
-            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">Kategorie</label>
-          <select
-            value={formData.category}
-            onChange={e => setFormData({ ...formData, category: e.target.value })}
-            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="legal">Rechtlich</option>
-            <option value="operational">Operativ</option>
-            <option value="strategic">Strategisch</option>
-          </select>
-        </div>
-
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Wahrscheinlichkeit (1-5)
-            </label>
-            <input
-              type="range"
-              min={1}
-              max={5}
-              value={formData.likelihood}
-              onChange={e => setFormData({ ...formData, likelihood: Number(e.target.value) as RiskLikelihood })}
-              className="w-full"
-            />
-            <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Sehr unwahrscheinlich</span>
-              <span className="font-bold">{formData.likelihood}</span>
-              <span>Sehr wahrscheinlich</span>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Auswirkung (1-5)</label>
-            <input
-              type="range"
-              min={1}
-              max={5}
-              value={formData.impact}
-              onChange={e => setFormData({ ...formData, impact: Number(e.target.value) as RiskImpact })}
-              className="w-full"
-            />
-            <div className="flex justify-between text-xs text-gray-500 mt-1">
-              <span>Gering</span>
-              <span className="font-bold">{formData.impact}</span>
-              <span>Katastrophal</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Risk Score Preview */}
-        <div
-          className={`p-4 rounded-lg ${
-            severity === 'CRITICAL'
-              ? 'bg-red-50 border border-red-200'
-              : severity === 'HIGH'
-              ? 'bg-orange-50 border border-orange-200'
-              : severity === 'MEDIUM'
-              ? 'bg-yellow-50 border border-yellow-200'
-              : 'bg-green-50 border border-green-200'
-          }`}
-        >
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium">Berechneter Risikoscore:</span>
-            <span
-              className={`px-3 py-1 rounded-full text-sm font-bold ${
-                severity === 'CRITICAL'
-                  ? 'bg-red-100 text-red-700'
-                  : severity === 'HIGH'
-                  ? 'bg-orange-100 text-orange-700'
-                  : severity === 'MEDIUM'
-                  ? 'bg-yellow-100 text-yellow-700'
-                  : 'bg-green-100 text-green-700'
-              }`}
-            >
-              {score} ({severity})
-            </span>
-          </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.title}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.title
-              ? 'bg-purple-600 text-white hover:bg-purple-700'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          Speichern
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// RISK CARD
-// =============================================================================
-
-function RiskCard({
-  risk,
-  onEdit,
-  onDelete,
-  onStatusChange,
-}: {
-  risk: Risk
-  onEdit: () => void
-  onDelete: () => void
-  onStatusChange: (status: RiskStatus) => void
-}) {
-  const [showMitigations, setShowMitigations] = useState(false)
-  const severityColors = {
-    CRITICAL: 'border-red-200 bg-red-50',
-    HIGH: 'border-orange-200 bg-orange-50',
-    MEDIUM: 'border-yellow-200 bg-yellow-50',
-    LOW: 'border-green-200 bg-green-50',
-  }
-
-  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${severityColors[risk.severity]}`}>
-      <div className="flex items-start justify-between">
-        <div>
-          <div className="flex items-center gap-2">
-            <h4 className="font-semibold text-gray-900">{risk.title}</h4>
-            <span
-              className={`px-2 py-0.5 text-xs rounded-full ${
-                risk.severity === 'CRITICAL'
-                  ? 'bg-red-100 text-red-700'
-                  : risk.severity === 'HIGH'
-                  ? 'bg-orange-100 text-orange-700'
-                  : risk.severity === 'MEDIUM'
-                  ? 'bg-yellow-100 text-yellow-700'
-                  : 'bg-green-100 text-green-700'
-              }`}
-            >
-              {risk.severity}
-            </span>
-          </div>
-          <p className="text-sm text-gray-500 mt-1">{risk.description}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={onEdit}
-            className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-              />
-            </svg>
-          </button>
-          <button
-            onClick={onDelete}
-            className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div className="mt-4 grid grid-cols-4 gap-4 text-sm">
-        <div>
-          <span className="text-gray-500">Wahrscheinlichkeit:</span>
-          <span className="ml-2 font-medium">{risk.likelihood}/5</span>
-        </div>
-        <div>
-          <span className="text-gray-500">Auswirkung:</span>
-          <span className="ml-2 font-medium">{risk.impact}/5</span>
-        </div>
-        <div>
-          <span className="text-gray-500">Inherent:</span>
-          <span className="ml-2 font-medium">{risk.inherentRiskScore}</span>
-        </div>
-        <div>
-          <span className="text-gray-500">Residual:</span>
-          <span className={`ml-2 font-medium ${
-            risk.residualRiskScore < risk.inherentRiskScore ? 'text-green-600' : ''
-          }`}>
-            {risk.residualRiskScore}
-          </span>
-          {risk.residualRiskScore < risk.inherentRiskScore && (
-            <span className="ml-1 text-xs text-green-600">
-              ({risk.inherentRiskScore} &rarr; {risk.residualRiskScore})
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* Status Workflow */}
-      <div className="mt-4 pt-4 border-t border-gray-200 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">Status:</span>
-          <select
-            value={risk.status}
-            onChange={(e) => onStatusChange(e.target.value as RiskStatus)}
-            className="px-2 py-1 text-sm border border-gray-300 rounded-lg"
-          >
-            <option value="IDENTIFIED">Identifiziert</option>
-            <option value="ASSESSED">Bewertet</option>
-            <option value="MITIGATED">Mitigiert</option>
-            <option value="ACCEPTED">Akzeptiert</option>
-            <option value="CLOSED">Geschlossen</option>
-          </select>
-        </div>
-        {risk.mitigation.length > 0 && (
-          <button
-            onClick={() => setShowMitigations(!showMitigations)}
-            className="text-sm text-purple-600 hover:text-purple-700"
-          >
-            {showMitigations ? 'Mitigationen ausblenden' : `${risk.mitigation.length} Mitigation(en) anzeigen`}
-          </button>
-        )}
-      </div>
-
-      {/* Expanded Mitigations */}
-      {showMitigations && risk.mitigation.length > 0 && (
-        <div className="mt-3 space-y-2">
-          {risk.mitigation.map((m, idx) => (
-            <div key={idx} className="p-3 bg-gray-50 rounded-lg text-sm">
-              <div className="flex items-center justify-between">
-                <span className="font-medium text-gray-700">{m.controlId || `Mitigation ${idx + 1}`}</span>
-                <span className={`px-2 py-0.5 text-xs rounded-full ${
-                  m.status === 'IMPLEMENTED' ? 'bg-green-100 text-green-700' :
-                  m.status === 'IN_PROGRESS' ? 'bg-yellow-100 text-yellow-700' :
-                  'bg-gray-100 text-gray-500'
-                }`}>
-                  {m.status === 'IMPLEMENTED' ? 'Implementiert' :
-                   m.status === 'IN_PROGRESS' ? 'In Bearbeitung' : m.status || 'Geplant'}
-                </span>
-              </div>
-              {m.description && <p className="text-gray-500 mt-1">{m.description}</p>}
-            </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="h-6 w-3/4 bg-gray-200 rounded mb-2" />
-          <div className="h-4 w-full bg-gray-100 rounded mb-4" />
-          <div className="grid grid-cols-3 gap-4">
-            <div className="h-4 bg-gray-200 rounded" />
-            <div className="h-4 bg-gray-200 rounded" />
-            <div className="h-4 bg-gray-200 rounded" />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
+import { RiskMatrix } from './_components/RiskMatrix'
+import { RiskForm } from './_components/RiskForm'
+import { RiskCard } from './_components/RiskCard'
+import { LoadingSkeleton } from './_components/LoadingSkeleton'
+import { useRisks } from './_hooks/useRisks'
 
 export default function RisksPage() {
-  const { state, dispatch, addRisk } = useSDK()
-  const [showForm, setShowForm] = useState(false)
-  const [editingRisk, setEditingRisk] = useState<Risk | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [matrixFilter, setMatrixFilter] = useState<{ likelihood: number; impact: number } | null>(null)
-
-  // Fetch risks from backend on mount
-  useEffect(() => {
-    const fetchRisks = async () => {
-      try {
-        setLoading(true)
-        const res = await fetch('/api/sdk/v1/compliance/risks')
-        if (res.ok) {
-          const data = await res.json()
-          const backendRisks = data.risks || data
-          if (Array.isArray(backendRisks) && backendRisks.length > 0) {
-            const mapped: Risk[] = backendRisks.map((r: Record<string, unknown>) => ({
-              id: (r.risk_id || r.id || '') as string,
-              title: (r.title || '') as string,
-              description: (r.description || '') as string,
-              category: (r.category || 'technical') as string,
-              likelihood: (r.likelihood || 3) as RiskLikelihood,
-              impact: (r.impact || 3) as RiskImpact,
-              severity: ((r.inherent_risk || r.severity || 'MEDIUM') as string).toUpperCase() as RiskSeverity,
-              inherentRiskScore: (r.likelihood as number || 3) * (r.impact as number || 3),
-              residualRiskScore: (r.residual_likelihood as number || r.likelihood as number || 3) * (r.residual_impact as number || r.impact as number || 3),
-              status: (r.status || 'IDENTIFIED') as RiskStatus,
-              mitigation: (Array.isArray(r.mitigating_controls) ? (r.mitigating_controls as RiskMitigation[]) : []) as RiskMitigation[],
-              owner: (r.owner || null) as string | null,
-              relatedControls: [] as string[],
-              relatedRequirements: [] as string[],
-            }))
-            dispatch({ type: 'SET_STATE', payload: { risks: mapped } })
-            setError(null)
-          }
-        }
-      } catch {
-        // Backend unavailable — use SDK state as-is
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchRisks()
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const handleSubmit = async (data: { title: string; description: string; category: string; likelihood: RiskLikelihood; impact: RiskImpact }) => {
-    const score = calculateRiskScore(data.likelihood, data.impact)
-    const severity = getRiskSeverityFromScore(score)
-
-    if (editingRisk) {
-      dispatch({
-        type: 'UPDATE_RISK',
-        payload: {
-          id: editingRisk.id,
-          data: {
-            ...data,
-            severity,
-            inherentRiskScore: score,
-            residualRiskScore: score,
-          },
-        },
-      })
-
-      // Persist to backend
-      try {
-        await fetch(`/api/sdk/v1/compliance/risks/${editingRisk.id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            title: data.title,
-            description: data.description,
-            category: data.category,
-            likelihood: data.likelihood,
-            impact: data.impact,
-          }),
-        })
-      } catch {
-        // Silently fail
-      }
-    } else {
-      const riskId = `risk-${Date.now()}`
-      const newRisk: Risk = {
-        id: riskId,
-        ...data,
-        severity,
-        inherentRiskScore: score,
-        residualRiskScore: score,
-        status: 'IDENTIFIED',
-        mitigation: [],
-        owner: null,
-        relatedControls: [],
-        relatedRequirements: [],
-      }
-      addRisk(newRisk)
-
-      // Persist to backend
-      try {
-        await fetch('/api/sdk/v1/compliance/risks', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            risk_id: riskId,
-            title: data.title,
-            description: data.description,
-            category: data.category,
-            likelihood: data.likelihood,
-            impact: data.impact,
-          }),
-        })
-      } catch {
-        // Silently fail
-      }
-    }
-
-    setShowForm(false)
-    setEditingRisk(null)
-  }
-
-  const handleDelete = async (id: string) => {
-    if (!confirm('Moechten Sie dieses Risiko wirklich loeschen?')) return
-
-    dispatch({ type: 'DELETE_RISK', payload: id })
-
-    try {
-      await fetch(`/api/sdk/v1/compliance/risks/${id}`, {
-        method: 'DELETE',
-      })
-    } catch {
-      // Silently fail
-    }
-  }
-
-  const handleStatusChange = async (riskId: string, status: RiskStatus) => {
-    dispatch({
-      type: 'UPDATE_RISK',
-      payload: { id: riskId, data: { status } },
-    })
-
-    try {
-      await fetch(`/api/sdk/v1/compliance/risks/${riskId}`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status }),
-      })
-    } catch {
-      // Silently fail
-    }
-  }
-
-  const handleEdit = (risk: Risk) => {
-    setEditingRisk(risk)
-    setShowForm(true)
-  }
-
-  // Stats
-  const totalRisks = state.risks.length
-  const criticalRisks = state.risks.filter(r => r.severity === 'CRITICAL').length
-  const highRisks = state.risks.filter(r => r.severity === 'HIGH').length
-  const mitigatedRisks = state.risks.filter(r => r.mitigation.length > 0).length
+  const {
+    state,
+    showForm,
+    setShowForm,
+    editingRisk,
+    setEditingRisk,
+    loading,
+    error,
+    setError,
+    matrixFilter,
+    setMatrixFilter,
+    handleSubmit,
+    handleDelete,
+    handleStatusChange,
+    handleEdit,
+    handleMatrixCellClick,
+    stats,
+    filteredRisks,
+  } = useRisks()
 
   const stepInfo = STEP_EXPLANATIONS['risks']
 
   return (
     <div className="space-y-6">
-      {/* Step Header */}
       <StepHeader
         stepId="risks"
         title={stepInfo.title}
@@ -627,7 +52,6 @@ export default function RisksPage() {
         )}
       </StepHeader>
 
-      {/* Error Banner */}
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
           <span>{error}</span>
@@ -635,56 +59,39 @@ export default function RisksPage() {
         </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">{totalRisks}</div>
+          <div className="text-3xl font-bold text-gray-900">{stats.totalRisks}</div>
         </div>
         <div className="bg-white rounded-xl border border-red-200 p-6">
           <div className="text-sm text-red-600">Kritisch</div>
-          <div className="text-3xl font-bold text-red-600">{criticalRisks}</div>
+          <div className="text-3xl font-bold text-red-600">{stats.criticalRisks}</div>
         </div>
         <div className="bg-white rounded-xl border border-orange-200 p-6">
           <div className="text-sm text-orange-600">Hoch</div>
-          <div className="text-3xl font-bold text-orange-600">{highRisks}</div>
+          <div className="text-3xl font-bold text-orange-600">{stats.highRisks}</div>
         </div>
         <div className="bg-white rounded-xl border border-green-200 p-6">
           <div className="text-sm text-green-600">Mit Mitigation</div>
-          <div className="text-3xl font-bold text-green-600">{mitigatedRisks}</div>
+          <div className="text-3xl font-bold text-green-600">{stats.mitigatedRisks}</div>
         </div>
       </div>
 
-      {/* Form */}
       {showForm && (
         <RiskForm
           onSubmit={handleSubmit}
-          onCancel={() => {
-            setShowForm(false)
-            setEditingRisk(null)
-          }}
+          onCancel={() => { setShowForm(false); setEditingRisk(null) }}
           initialData={editingRisk || undefined}
         />
       )}
 
-      {/* Loading */}
       {loading && <LoadingSkeleton />}
 
-      {/* Matrix */}
       {!loading && (
-        <RiskMatrix
-          risks={state.risks}
-          onCellClick={(l, i) => {
-            if (matrixFilter && matrixFilter.likelihood === l && matrixFilter.impact === i) {
-              setMatrixFilter(null)
-            } else {
-              setMatrixFilter({ likelihood: l, impact: i })
-            }
-          }}
-        />
+        <RiskMatrix risks={state.risks} onCellClick={handleMatrixCellClick} />
       )}
 
-      {/* Matrix Filter Badge */}
       {matrixFilter && (
         <div className="flex items-center gap-2">
           <span className="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded-full flex items-center gap-2">
@@ -699,30 +106,25 @@ export default function RisksPage() {
         </div>
       )}
 
-      {/* Risk List */}
       {!loading && state.risks.length > 0 && (
         <div>
           <h3 className="text-lg font-semibold text-gray-900 mb-4">
             {matrixFilter ? `Risiken (L=${matrixFilter.likelihood}, I=${matrixFilter.impact})` : 'Alle Risiken'}
           </h3>
           <div className="space-y-4">
-            {state.risks
-              .filter(risk => !matrixFilter || (risk.likelihood === matrixFilter.likelihood && risk.impact === matrixFilter.impact))
-              .sort((a, b) => b.inherentRiskScore - a.inherentRiskScore)
-              .map(risk => (
-                <RiskCard
-                  key={risk.id}
-                  risk={risk}
-                  onEdit={() => handleEdit(risk)}
-                  onDelete={() => handleDelete(risk.id)}
-                  onStatusChange={(status) => handleStatusChange(risk.id, status)}
-                />
-              ))}
+            {filteredRisks.map(risk => (
+              <RiskCard
+                key={risk.id}
+                risk={risk}
+                onEdit={() => handleEdit(risk)}
+                onDelete={() => handleDelete(risk.id)}
+                onStatusChange={(status) => handleStatusChange(risk.id, status)}
+              />
+            ))}
           </div>
         </div>
       )}
 
-      {/* Empty State */}
       {!loading && state.risks.length === 0 && !showForm && (
         <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
           <div className="w-16 h-16 mx-auto bg-orange-100 rounded-full flex items-center justify-center mb-4">