From 653fa07f57c8feda16e9086e6aad403ef9798326 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:14:50 +0200
Subject: [PATCH] refactor(admin): split academy/[id], iace/hazards, ai-act
 pages

Extracted components and constants into _components/ subdirectories
to bring all three pages under the 300 LOC soft target (was 651/628/612,
now 255/232/278 LOC respectively). Zero behavior changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../academy/[id]/_components/CourseHeader.tsx |  50 ++
 .../academy/[id]/_components/CourseStats.tsx  |  33 ++
 .../academy/[id]/_components/CourseTabs.tsx   |  37 ++
 .../[id]/_components/EnrollmentsTab.tsx       |  59 +++
 .../academy/[id]/_components/LessonsTab.tsx   | 239 +++++++++
 .../academy/[id]/_components/OverviewTab.tsx  |  48 ++
 .../academy/[id]/_components/VideosTab.tsx    |  71 +++
 .../app/sdk/academy/[id]/page.tsx             | 496 ++----------------
 .../sdk/ai-act/_components/AISystemCard.tsx   | 116 ++++
 .../sdk/ai-act/_components/AddSystemForm.tsx  | 102 ++++
 .../ai-act/_components/LoadingSkeleton.tsx    |  25 +
 .../sdk/ai-act/_components/RiskPyramid.tsx    |  39 ++
 .../app/sdk/ai-act/_components/types.ts       |  12 +
 admin-compliance/app/sdk/ai-act/page.tsx      | 366 +------------
 .../hazards/_components/HazardForm.tsx        | 129 +++++
 .../hazards/_components/HazardTable.tsx       |  68 +++
 .../hazards/_components/LibraryModal.tsx      |  81 +++
 .../hazards/_components/RiskBadge.tsx         |  11 +
 .../[projectId]/hazards/_components/types.ts  |  92 ++++
 .../app/sdk/iace/[projectId]/hazards/page.tsx | 416 +--------------
 20 files changed, 1288 insertions(+), 1202 deletions(-)
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/CourseHeader.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/CourseStats.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/CourseTabs.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/EnrollmentsTab.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/LessonsTab.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/OverviewTab.tsx
 create mode 100644 admin-compliance/app/sdk/academy/[id]/_components/VideosTab.tsx
 create mode 100644 admin-compliance/app/sdk/ai-act/_components/AISystemCard.tsx
 create mode 100644 admin-compliance/app/sdk/ai-act/_components/AddSystemForm.tsx
 create mode 100644 admin-compliance/app/sdk/ai-act/_components/LoadingSkeleton.tsx
 create mode 100644 admin-compliance/app/sdk/ai-act/_components/RiskPyramid.tsx
 create mode 100644 admin-compliance/app/sdk/ai-act/_components/types.ts
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts

diff --git a/admin-compliance/app/sdk/academy/[id]/_components/CourseHeader.tsx b/admin-compliance/app/sdk/academy/[id]/_components/CourseHeader.tsx
new file mode 100644
index 0000000..2a7d230
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/CourseHeader.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import Link from 'next/link'
+import { Course, COURSE_CATEGORY_INFO } from '@/lib/sdk/academy/types'
+
+interface CourseHeaderProps {
+  course: Course
+  onDelete: () => void
+}
+
+export function CourseHeader({ course, onDelete }: CourseHeaderProps) {
+  const categoryInfo = COURSE_CATEGORY_INFO[course.category] || COURSE_CATEGORY_INFO['custom']
+
+  return (
+    <div className="flex items-start justify-between">
+      <div className="flex items-center gap-4">
+        <Link
+          href="/sdk/academy"
+          className="p-2 text-gray-500 hover:text-gray-700 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="M15 19l-7-7 7-7" />
+          </svg>
+        </Link>
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`px-2 py-1 text-xs rounded-full ${categoryInfo.bgColor} ${categoryInfo.color}`}>
+              {categoryInfo.label}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${
+              course.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
+            }`}>
+              {course.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
+            </span>
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">{course.title}</h1>
+          <p className="text-sm text-gray-500 mt-1">{course.description}</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onDelete}
+          className="px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+        >
+          Loeschen
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/CourseStats.tsx b/admin-compliance/app/sdk/academy/[id]/_components/CourseStats.tsx
new file mode 100644
index 0000000..3fd4bd0
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/CourseStats.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { Course, Lesson, Enrollment } from '@/lib/sdk/academy/types'
+
+interface CourseStatsProps {
+  course: Course
+  sortedLessons: Lesson[]
+  enrollments: Enrollment[]
+  completedEnrollments: number
+}
+
+export function CourseStats({ course, sortedLessons, enrollments, completedEnrollments }: CourseStatsProps) {
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      <div className="bg-white rounded-xl border border-gray-200 p-4">
+        <div className="text-sm text-gray-500">Lektionen</div>
+        <div className="text-2xl font-bold text-gray-900">{sortedLessons.length}</div>
+      </div>
+      <div className="bg-white rounded-xl border border-gray-200 p-4">
+        <div className="text-sm text-gray-500">Dauer</div>
+        <div className="text-2xl font-bold text-gray-900">{course.durationMinutes} Min.</div>
+      </div>
+      <div className="bg-white rounded-xl border border-gray-200 p-4">
+        <div className="text-sm text-gray-500">Teilnehmer</div>
+        <div className="text-2xl font-bold text-blue-600">{enrollments.length}</div>
+      </div>
+      <div className="bg-white rounded-xl border border-gray-200 p-4">
+        <div className="text-sm text-gray-500">Abgeschlossen</div>
+        <div className="text-2xl font-bold text-green-600">{completedEnrollments}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/CourseTabs.tsx b/admin-compliance/app/sdk/academy/[id]/_components/CourseTabs.tsx
new file mode 100644
index 0000000..d2ede1f
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/CourseTabs.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+type TabId = 'overview' | 'lessons' | 'enrollments' | 'videos'
+
+interface CourseTabsProps {
+  activeTab: TabId
+  onTabChange: (tab: TabId) => void
+}
+
+const TAB_LABELS: Record<TabId, string> = {
+  overview: 'Uebersicht',
+  lessons: 'Lektionen',
+  enrollments: 'Einschreibungen',
+  videos: 'Videos',
+}
+
+export function CourseTabs({ activeTab, onTabChange }: CourseTabsProps) {
+  return (
+    <div className="border-b border-gray-200">
+      <nav className="flex gap-1 -mb-px">
+        {(['overview', 'lessons', 'enrollments', 'videos'] as TabId[]).map(tab => (
+          <button
+            key={tab}
+            onClick={() => onTabChange(tab)}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === tab
+                ? 'border-purple-600 text-purple-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            {TAB_LABELS[tab]}
+          </button>
+        ))}
+      </nav>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/EnrollmentsTab.tsx b/admin-compliance/app/sdk/academy/[id]/_components/EnrollmentsTab.tsx
new file mode 100644
index 0000000..85383db
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/EnrollmentsTab.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { Enrollment, ENROLLMENT_STATUS_INFO, isEnrollmentOverdue, getDaysUntilDeadline } from '@/lib/sdk/academy/types'
+
+interface EnrollmentsTabProps {
+  enrollments: Enrollment[]
+  overdueEnrollments: number
+}
+
+export function EnrollmentsTab({ enrollments, overdueEnrollments }: EnrollmentsTabProps) {
+  return (
+    <div className="space-y-4">
+      {overdueEnrollments > 0 && (
+        <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
+          {overdueEnrollments} ueberfaellige Einschreibung(en)
+        </div>
+      )}
+      {enrollments.length === 0 ? (
+        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+          <p className="text-gray-500">Noch keine Einschreibungen fuer diesen Kurs.</p>
+        </div>
+      ) : (
+        enrollments.map(enrollment => {
+          const statusInfo = ENROLLMENT_STATUS_INFO[enrollment.status]
+          const overdue = isEnrollmentOverdue(enrollment)
+          const daysUntil = getDaysUntilDeadline(enrollment.deadline)
+          return (
+            <div key={enrollment.id} className={`bg-white rounded-xl border-2 p-5 ${overdue ? 'border-red-200' : 'border-gray-200'}`}>
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className={`px-2 py-0.5 text-xs rounded-full ${statusInfo?.bgColor} ${statusInfo?.color}`}>
+                      {statusInfo?.label}
+                    </span>
+                    {overdue && <span className="text-xs text-red-600">Ueberfaellig</span>}
+                  </div>
+                  <div className="font-medium text-gray-900">{enrollment.userName}</div>
+                  <div className="text-sm text-gray-500">{enrollment.userEmail}</div>
+                </div>
+                <div className="text-right">
+                  <div className="text-2xl font-bold text-gray-900">{enrollment.progress}%</div>
+                  <div className="text-xs text-gray-500">
+                    {enrollment.status === 'completed' ? 'Abgeschlossen' : `${daysUntil > 0 ? daysUntil + ' Tage verbleibend' : Math.abs(daysUntil) + ' Tage ueberfaellig'}`}
+                  </div>
+                </div>
+              </div>
+              <div className="mt-3 w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className={`h-full rounded-full ${enrollment.progress === 100 ? 'bg-green-500' : overdue ? 'bg-red-500' : 'bg-purple-500'}`}
+                  style={{ width: `${enrollment.progress}%` }}
+                />
+              </div>
+            </div>
+          )
+        })
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/LessonsTab.tsx b/admin-compliance/app/sdk/academy/[id]/_components/LessonsTab.tsx
new file mode 100644
index 0000000..c511b87
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/LessonsTab.tsx
@@ -0,0 +1,239 @@
+'use client'
+
+import { Lesson, QuizQuestion } from '@/lib/sdk/academy/types'
+
+interface LessonsTabProps {
+  sortedLessons: Lesson[]
+  selectedLesson: Lesson | null
+  onSelectLesson: (lesson: Lesson) => void
+  quizAnswers: Record<string, number>
+  onQuizAnswer: (answers: Record<string, number>) => void
+  quizResult: any
+  isSubmittingQuiz: boolean
+  onSubmitQuiz: () => void
+  onResetQuiz: () => void
+  isEditing: boolean
+  editTitle: string
+  editContent: string
+  onEditTitle: (v: string) => void
+  onEditContent: (v: string) => void
+  isSaving: boolean
+  saveMessage: { type: 'success' | 'error'; text: string } | null
+  onStartEdit: () => void
+  onCancelEdit: () => void
+  onSaveLesson: () => void
+  onApproveLesson: () => void
+}
+
+export function LessonsTab({
+  sortedLessons,
+  selectedLesson,
+  onSelectLesson,
+  quizAnswers,
+  onQuizAnswer,
+  quizResult,
+  isSubmittingQuiz,
+  onSubmitQuiz,
+  onResetQuiz,
+  isEditing,
+  editTitle,
+  editContent,
+  onEditTitle,
+  onEditContent,
+  isSaving,
+  saveMessage,
+  onStartEdit,
+  onCancelEdit,
+  onSaveLesson,
+  onApproveLesson,
+}: LessonsTabProps) {
+  return (
+    <div className="grid grid-cols-3 gap-6">
+      {/* Lesson Navigation */}
+      <div className="col-span-1 bg-white rounded-xl border border-gray-200 p-4">
+        <h3 className="text-sm font-semibold text-gray-700 mb-3">Lektionen</h3>
+        <div className="space-y-1">
+          {sortedLessons.map((lesson, i) => (
+            <button
+              key={lesson.id}
+              onClick={() => onSelectLesson(lesson)}
+              className={`w-full text-left p-3 rounded-lg text-sm transition-colors ${
+                selectedLesson?.id === lesson.id
+                  ? 'bg-purple-50 text-purple-700 border border-purple-200'
+                  : 'hover:bg-gray-50 text-gray-700'
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-gray-400 w-4">{i + 1}.</span>
+                <span className="truncate">{lesson.title}</span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Lesson Content */}
+      <div className="col-span-2 bg-white rounded-xl border border-gray-200 p-6">
+        {selectedLesson ? (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              {isEditing ? (
+                <input
+                  type="text"
+                  value={editTitle}
+                  onChange={e => onEditTitle(e.target.value)}
+                  className="text-xl font-semibold text-gray-900 border border-gray-300 rounded-lg px-3 py-1 flex-1 mr-3"
+                />
+              ) : (
+                <h2 className="text-xl font-semibold text-gray-900">{selectedLesson.title}</h2>
+              )}
+              <div className="flex items-center gap-2">
+                <span className={`px-3 py-1 text-xs rounded-full ${
+                  selectedLesson.type === 'quiz' ? 'bg-yellow-100 text-yellow-700' :
+                  selectedLesson.type === 'video' ? 'bg-blue-100 text-blue-700' :
+                  'bg-gray-100 text-gray-600'
+                }`}>
+                  {selectedLesson.type === 'quiz' ? 'Quiz' : selectedLesson.type === 'video' ? 'Video' : 'Text'}
+                </span>
+                {selectedLesson.type !== 'quiz' && !isEditing && (
+                  <>
+                    <button onClick={onStartEdit} className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
+                      Bearbeiten
+                    </button>
+                    <button onClick={onApproveLesson} disabled={isSaving} className="px-3 py-1 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50">
+                      Freigeben
+                    </button>
+                  </>
+                )}
+                {isEditing && (
+                  <>
+                    <button onClick={onCancelEdit} className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
+                      Abbrechen
+                    </button>
+                    <button onClick={onSaveLesson} disabled={isSaving} className="px-3 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50">
+                      {isSaving ? 'Speichert...' : 'Speichern'}
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {saveMessage && (
+              <div className={`p-3 rounded-lg text-sm ${
+                saveMessage.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'
+              }`}>
+                {saveMessage.text}
+              </div>
+            )}
+
+            {selectedLesson.type === 'video' && selectedLesson.videoUrl && (
+              <div className="aspect-video bg-gray-900 rounded-xl overflow-hidden">
+                <video src={selectedLesson.videoUrl} controls className="w-full h-full" />
+              </div>
+            )}
+
+            {isEditing && (selectedLesson.type === 'text' || selectedLesson.type === 'video') && (
+              <div className="space-y-2">
+                <label className="text-sm text-gray-500">Inhalt (Markdown)</label>
+                <textarea
+                  value={editContent}
+                  onChange={e => onEditContent(e.target.value)}
+                  rows={20}
+                  className="w-full border border-gray-300 rounded-xl p-4 text-sm font-mono text-gray-800 leading-relaxed resize-y focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                  placeholder="Markdown-Inhalt der Lektion..."
+                />
+                <p className="text-xs text-gray-400">Unterstuetzt: # Ueberschrift, ## Unterueberschrift, - Aufzaehlung, **fett**</p>
+              </div>
+            )}
+
+            {!isEditing && (selectedLesson.type === 'text' || selectedLesson.type === 'video') && selectedLesson.contentMarkdown && (
+              <div className="prose prose-sm max-w-none">
+                <div className="whitespace-pre-wrap text-gray-700 leading-relaxed">
+                  {selectedLesson.contentMarkdown.split('\n').map((line, i) => {
+                    if (line.startsWith('# ')) return <h1 key={i} className="text-2xl font-bold text-gray-900 mt-6 mb-3">{line.slice(2)}</h1>
+                    if (line.startsWith('## ')) return <h2 key={i} className="text-xl font-semibold text-gray-900 mt-5 mb-2">{line.slice(3)}</h2>
+                    if (line.startsWith('### ')) return <h3 key={i} className="text-lg font-medium text-gray-900 mt-4 mb-2">{line.slice(4)}</h3>
+                    if (line.startsWith('- **')) {
+                      const parts = line.slice(2).split('**')
+                      return <li key={i} className="ml-4 list-disc"><strong>{parts[1]}</strong>{parts[2] || ''}</li>
+                    }
+                    if (line.startsWith('- ')) return <li key={i} className="ml-4 list-disc">{line.slice(2)}</li>
+                    if (line.trim() === '') return <br key={i} />
+                    return <p key={i} className="mb-2">{line}</p>
+                  })}
+                </div>
+              </div>
+            )}
+
+            {selectedLesson.type === 'quiz' && selectedLesson.quizQuestions && (
+              <div className="space-y-6">
+                {selectedLesson.quizQuestions.map((q: QuizQuestion, qi: number) => (
+                  <div key={q.id} className="bg-gray-50 rounded-xl p-5">
+                    <h4 className="font-medium text-gray-900 mb-3">Frage {qi + 1}: {q.question}</h4>
+                    <div className="space-y-2">
+                      {q.options.map((option: string, oi: number) => {
+                        const isSelected = quizAnswers[q.id] === oi
+                        const showResult = quizResult && !quizResult.error
+                        const isCorrect = showResult && quizResult.results?.[qi]?.correct
+                        const wasSelected = showResult && isSelected
+
+                        let bgClass = 'bg-white border-gray-200 hover:border-purple-300'
+                        if (isSelected && !showResult) bgClass = 'bg-purple-50 border-purple-500'
+                        if (showResult && oi === q.correctOptionIndex) bgClass = 'bg-green-50 border-green-500'
+                        if (showResult && wasSelected && !isCorrect) bgClass = 'bg-red-50 border-red-500'
+
+                        return (
+                          <button
+                            key={oi}
+                            onClick={() => !quizResult && onQuizAnswer({ ...quizAnswers, [q.id]: oi })}
+                            disabled={!!quizResult}
+                            className={`w-full text-left p-3 rounded-lg border-2 transition-all ${bgClass}`}
+                          >
+                            <span className="text-sm text-gray-700">{String.fromCharCode(65 + oi)}) {option}</span>
+                          </button>
+                        )
+                      })}
+                    </div>
+                    {quizResult && !quizResult.error && quizResult.results?.[qi] && (
+                      <div className={`mt-3 p-3 rounded-lg text-sm ${
+                        quizResult.results[qi].correct ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
+                      }`}>
+                        {quizResult.results[qi].correct ? 'Richtig!' : 'Falsch.'} {q.explanation}
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {!quizResult ? (
+                  <button
+                    onClick={onSubmitQuiz}
+                    disabled={isSubmittingQuiz || Object.keys(quizAnswers).length < (selectedLesson.quizQuestions?.length || 0)}
+                    className="w-full py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-colors disabled:opacity-50 font-medium"
+                  >
+                    {isSubmittingQuiz ? 'Wird ausgewertet...' : 'Quiz auswerten'}
+                  </button>
+                ) : quizResult.error ? (
+                  <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">{quizResult.error}</div>
+                ) : (
+                  <div className={`rounded-xl p-6 text-center ${quizResult.passed ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
+                    <div className={`text-3xl font-bold ${quizResult.passed ? 'text-green-600' : 'text-red-600'}`}>
+                      {quizResult.score}%
+                    </div>
+                    <div className={`text-sm mt-1 ${quizResult.passed ? 'text-green-700' : 'text-red-700'}`}>
+                      {quizResult.passed ? 'Bestanden!' : 'Nicht bestanden'} — {quizResult.correctAnswers}/{quizResult.totalQuestions} richtig
+                    </div>
+                    <button onClick={onResetQuiz} className="mt-4 px-4 py-2 text-sm bg-white rounded-lg border hover:bg-gray-50">
+                      Quiz wiederholen
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          <p className="text-gray-500 text-center py-10">Waehlen Sie eine Lektion aus.</p>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/OverviewTab.tsx b/admin-compliance/app/sdk/academy/[id]/_components/OverviewTab.tsx
new file mode 100644
index 0000000..c71ea10
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/OverviewTab.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { Course, Lesson } from '@/lib/sdk/academy/types'
+
+interface OverviewTabProps {
+  course: Course
+  sortedLessons: Lesson[]
+}
+
+export function OverviewTab({ course, sortedLessons }: OverviewTabProps) {
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Kurs-Details</h3>
+        <dl className="grid grid-cols-2 gap-4 text-sm">
+          <div><dt className="text-gray-500">Bestehensgrenze</dt><dd className="font-medium text-gray-900">{course.passingScore}%</dd></div>
+          <div><dt className="text-gray-500">Pflicht fuer</dt><dd className="font-medium text-gray-900">{course.requiredForRoles?.join(', ') || 'Alle'}</dd></div>
+          <div><dt className="text-gray-500">Erstellt am</dt><dd className="font-medium text-gray-900">{new Date(course.createdAt).toLocaleDateString('de-DE')}</dd></div>
+          <div><dt className="text-gray-500">Aktualisiert am</dt><dd className="font-medium text-gray-900">{new Date(course.updatedAt).toLocaleDateString('de-DE')}</dd></div>
+        </dl>
+      </div>
+
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Lektionen ({sortedLessons.length})</h3>
+        <div className="space-y-2">
+          {sortedLessons.map((lesson, i) => (
+            <div key={lesson.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50">
+              <div className="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center text-sm font-medium">
+                {i + 1}
+              </div>
+              <div className="flex-1">
+                <div className="text-sm font-medium text-gray-900">{lesson.title}</div>
+                <div className="text-xs text-gray-500">{lesson.durationMinutes} Min. | {lesson.type === 'video' ? 'Video' : lesson.type === 'quiz' ? 'Quiz' : 'Text'}</div>
+              </div>
+              <span className={`px-2 py-1 text-xs rounded-full ${
+                lesson.type === 'quiz' ? 'bg-yellow-100 text-yellow-700' :
+                lesson.type === 'video' ? 'bg-blue-100 text-blue-700' :
+                'bg-gray-100 text-gray-600'
+              }`}>
+                {lesson.type === 'quiz' ? 'Quiz' : lesson.type === 'video' ? 'Video' : 'Text'}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/_components/VideosTab.tsx b/admin-compliance/app/sdk/academy/[id]/_components/VideosTab.tsx
new file mode 100644
index 0000000..b7d6a79
--- /dev/null
+++ b/admin-compliance/app/sdk/academy/[id]/_components/VideosTab.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+interface VideoStatus {
+  status: string
+  lessons?: Array<{ lessonId: string; status: string }>
+}
+
+interface VideosTabProps {
+  videoStatus: VideoStatus | null
+  isGeneratingVideos: boolean
+  onGenerateVideos: () => void
+  onCheckVideoStatus: () => void
+}
+
+export function VideosTab({ videoStatus, isGeneratingVideos, onGenerateVideos, onCheckVideoStatus }: VideosTabProps) {
+  return (
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold text-gray-900">Video-Generierung</h3>
+          <div className="flex gap-2">
+            <button onClick={onCheckVideoStatus} className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
+              Status pruefen
+            </button>
+            <button
+              onClick={onGenerateVideos}
+              disabled={isGeneratingVideos}
+              className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+            >
+              {isGeneratingVideos ? 'Wird gestartet...' : 'Videos generieren'}
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4 text-sm text-blue-700">
+          Videos werden mit ElevenLabs (Stimme) und HeyGen (Avatar) generiert.
+          Konfigurieren Sie die API-Keys in den Umgebungsvariablen.
+        </div>
+
+        {videoStatus && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-gray-500">Gesamtstatus:</span>
+              <span className={`px-2 py-1 text-xs rounded-full ${
+                videoStatus.status === 'completed' ? 'bg-green-100 text-green-700' :
+                videoStatus.status === 'processing' ? 'bg-yellow-100 text-yellow-700' :
+                'bg-gray-100 text-gray-600'
+              }`}>
+                {videoStatus.status}
+              </span>
+            </div>
+            {videoStatus.lessons?.map((ls) => (
+              <div key={ls.lessonId} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                <span className="text-sm text-gray-700">Lektion {ls.lessonId.slice(-4)}</span>
+                <span className={`text-xs ${ls.status === 'completed' ? 'text-green-600' : 'text-gray-500'}`}>
+                  {ls.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!videoStatus && (
+          <p className="text-sm text-gray-500 text-center py-8">
+            Klicken Sie auf "Videos generieren" um den Prozess zu starten.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/academy/[id]/page.tsx b/admin-compliance/app/sdk/academy/[id]/page.tsx
index e2d122f..8d0b62e 100644
--- a/admin-compliance/app/sdk/academy/[id]/page.tsx
+++ b/admin-compliance/app/sdk/academy/[id]/page.tsx
@@ -1,17 +1,13 @@
 'use client'
 
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import Link from 'next/link'
 import {
   Course,
   Lesson,
   Enrollment,
-  QuizQuestion,
-  COURSE_CATEGORY_INFO,
-  ENROLLMENT_STATUS_INFO,
   isEnrollmentOverdue,
-  getDaysUntilDeadline
 } from '@/lib/sdk/academy/types'
 import {
   fetchCourse,
@@ -20,8 +16,15 @@ import {
   submitQuiz,
   updateLesson,
   generateVideos,
-  getVideoStatus
+  getVideoStatus,
 } from '@/lib/sdk/academy/api'
+import { CourseHeader } from './_components/CourseHeader'
+import { CourseStats } from './_components/CourseStats'
+import { CourseTabs } from './_components/CourseTabs'
+import { OverviewTab } from './_components/OverviewTab'
+import { LessonsTab } from './_components/LessonsTab'
+import { EnrollmentsTab } from './_components/EnrollmentsTab'
+import { VideosTab } from './_components/VideosTab'
 
 type TabId = 'overview' | 'lessons' | 'enrollments' | 'videos'
 
@@ -81,8 +84,7 @@ export default function CourseDetailPage() {
   const handleSubmitQuiz = async () => {
     if (!selectedLesson) return
     const questions = selectedLesson.quizQuestions || []
-    const answers = questions.map((q: QuizQuestion) => quizAnswers[q.id] ?? -1)
-
+    const answers = questions.map((q: any) => quizAnswers[q.id] ?? -1)
     setIsSubmittingQuiz(true)
     try {
       const result = await submitQuiz(selectedLesson.id, { answers })
@@ -113,10 +115,7 @@ export default function CourseDetailPage() {
     setIsSaving(true)
     setSaveMessage(null)
     try {
-      await updateLesson(selectedLesson.id, {
-        title: editTitle,
-        content_url: editContent,
-      })
+      await updateLesson(selectedLesson.id, { title: editTitle, content_url: editContent })
       const updatedLesson = { ...selectedLesson, title: editTitle, contentMarkdown: editContent }
       setSelectedLesson(updatedLesson)
       if (course) {
@@ -138,9 +137,7 @@ export default function CourseDetailPage() {
     setIsSaving(true)
     setSaveMessage(null)
     try {
-      await updateLesson(selectedLesson.id, {
-        description: 'approved_for_video',
-      })
+      await updateLesson(selectedLesson.id, { description: 'approved_for_video' })
       const updatedLesson = { ...selectedLesson }
       if (course) {
         const updatedLessons = course.lessons.map(l => l.id === updatedLesson.id ? updatedLesson : l)
@@ -197,454 +194,61 @@ export default function CourseDetailPage() {
     )
   }
 
-  const categoryInfo = COURSE_CATEGORY_INFO[course.category] || COURSE_CATEGORY_INFO['custom']
   const sortedLessons = [...(course.lessons || [])].sort((a, b) => a.order - b.order)
   const completedEnrollments = enrollments.filter(e => e.status === 'completed').length
   const overdueEnrollments = enrollments.filter(e => isEnrollmentOverdue(e)).length
 
   return (
     <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-start justify-between">
-        <div className="flex items-center gap-4">
-          <Link
-            href="/sdk/academy"
-            className="p-2 text-gray-500 hover:text-gray-700 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="M15 19l-7-7 7-7" />
-            </svg>
-          </Link>
-          <div>
-            <div className="flex items-center gap-2 mb-1">
-              <span className={`px-2 py-1 text-xs rounded-full ${categoryInfo.bgColor} ${categoryInfo.color}`}>
-                {categoryInfo.label}
-              </span>
-              <span className={`px-2 py-1 text-xs rounded-full ${
-                course.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
-              }`}>
-                {course.status === 'published' ? 'Veroeffentlicht' : 'Entwurf'}
-              </span>
-            </div>
-            <h1 className="text-2xl font-bold text-gray-900">{course.title}</h1>
-            <p className="text-sm text-gray-500 mt-1">{course.description}</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleDeleteCourse}
-            className="px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-          >
-            Loeschen
-          </button>
-        </div>
-      </div>
+      <CourseHeader course={course} onDelete={handleDeleteCourse} />
+      <CourseStats
+        course={course}
+        sortedLessons={sortedLessons}
+        enrollments={enrollments}
+        completedEnrollments={completedEnrollments}
+      />
+      <CourseTabs activeTab={activeTab} onTabChange={setActiveTab} />
 
-      {/* Stats Row */}
-      <div className="grid grid-cols-4 gap-4">
-        <div className="bg-white rounded-xl border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Lektionen</div>
-          <div className="text-2xl font-bold text-gray-900">{sortedLessons.length}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Dauer</div>
-          <div className="text-2xl font-bold text-gray-900">{course.durationMinutes} Min.</div>
-        </div>
-        <div className="bg-white rounded-xl border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Teilnehmer</div>
-          <div className="text-2xl font-bold text-blue-600">{enrollments.length}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-gray-200 p-4">
-          <div className="text-sm text-gray-500">Abgeschlossen</div>
-          <div className="text-2xl font-bold text-green-600">{completedEnrollments}</div>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <div className="border-b border-gray-200">
-        <nav className="flex gap-1 -mb-px">
-          {(['overview', 'lessons', 'enrollments', 'videos'] as TabId[]).map(tab => (
-            <button
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === tab
-                  ? 'border-purple-600 text-purple-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              {{ overview: 'Uebersicht', lessons: 'Lektionen', enrollments: 'Einschreibungen', videos: 'Videos' }[tab]}
-            </button>
-          ))}
-        </nav>
-      </div>
-
-      {/* Overview Tab */}
       {activeTab === 'overview' && (
-        <div className="space-y-6">
-          <div className="bg-white rounded-xl border border-gray-200 p-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Kurs-Details</h3>
-            <dl className="grid grid-cols-2 gap-4 text-sm">
-              <div><dt className="text-gray-500">Bestehensgrenze</dt><dd className="font-medium text-gray-900">{course.passingScore}%</dd></div>
-              <div><dt className="text-gray-500">Pflicht fuer</dt><dd className="font-medium text-gray-900">{course.requiredForRoles?.join(', ') || 'Alle'}</dd></div>
-              <div><dt className="text-gray-500">Erstellt am</dt><dd className="font-medium text-gray-900">{new Date(course.createdAt).toLocaleDateString('de-DE')}</dd></div>
-              <div><dt className="text-gray-500">Aktualisiert am</dt><dd className="font-medium text-gray-900">{new Date(course.updatedAt).toLocaleDateString('de-DE')}</dd></div>
-            </dl>
-          </div>
-
-          {/* Lesson List Preview */}
-          <div className="bg-white rounded-xl border border-gray-200 p-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Lektionen ({sortedLessons.length})</h3>
-            <div className="space-y-2">
-              {sortedLessons.map((lesson, i) => (
-                <div key={lesson.id} className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50">
-                  <div className="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center text-sm font-medium">
-                    {i + 1}
-                  </div>
-                  <div className="flex-1">
-                    <div className="text-sm font-medium text-gray-900">{lesson.title}</div>
-                    <div className="text-xs text-gray-500">{lesson.durationMinutes} Min. | {lesson.type === 'video' ? 'Video' : lesson.type === 'quiz' ? 'Quiz' : 'Text'}</div>
-                  </div>
-                  <span className={`px-2 py-1 text-xs rounded-full ${
-                    lesson.type === 'quiz' ? 'bg-yellow-100 text-yellow-700' :
-                    lesson.type === 'video' ? 'bg-blue-100 text-blue-700' :
-                    'bg-gray-100 text-gray-600'
-                  }`}>
-                    {lesson.type === 'quiz' ? 'Quiz' : lesson.type === 'video' ? 'Video' : 'Text'}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
+        <OverviewTab course={course} sortedLessons={sortedLessons} />
       )}
 
-      {/* Lessons Tab - with content viewer and quiz player */}
       {activeTab === 'lessons' && (
-        <div className="grid grid-cols-3 gap-6">
-          {/* Lesson Navigation */}
-          <div className="col-span-1 bg-white rounded-xl border border-gray-200 p-4">
-            <h3 className="text-sm font-semibold text-gray-700 mb-3">Lektionen</h3>
-            <div className="space-y-1">
-              {sortedLessons.map((lesson, i) => (
-                <button
-                  key={lesson.id}
-                  onClick={() => { setSelectedLesson(lesson); setQuizResult(null); setQuizAnswers({}) }}
-                  className={`w-full text-left p-3 rounded-lg text-sm transition-colors ${
-                    selectedLesson?.id === lesson.id
-                      ? 'bg-purple-50 text-purple-700 border border-purple-200'
-                      : 'hover:bg-gray-50 text-gray-700'
-                  }`}
-                >
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs text-gray-400 w-4">{i + 1}.</span>
-                    <span className="truncate">{lesson.title}</span>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* Lesson Content */}
-          <div className="col-span-2 bg-white rounded-xl border border-gray-200 p-6">
-            {selectedLesson ? (
-              <div className="space-y-6">
-                <div className="flex items-center justify-between">
-                  {isEditing ? (
-                    <input
-                      type="text"
-                      value={editTitle}
-                      onChange={e => setEditTitle(e.target.value)}
-                      className="text-xl font-semibold text-gray-900 border border-gray-300 rounded-lg px-3 py-1 flex-1 mr-3"
-                    />
-                  ) : (
-                    <h2 className="text-xl font-semibold text-gray-900">{selectedLesson.title}</h2>
-                  )}
-                  <div className="flex items-center gap-2">
-                    <span className={`px-3 py-1 text-xs rounded-full ${
-                      selectedLesson.type === 'quiz' ? 'bg-yellow-100 text-yellow-700' :
-                      selectedLesson.type === 'video' ? 'bg-blue-100 text-blue-700' :
-                      'bg-gray-100 text-gray-600'
-                    }`}>
-                      {selectedLesson.type === 'quiz' ? 'Quiz' : selectedLesson.type === 'video' ? 'Video' : 'Text'}
-                    </span>
-                    {selectedLesson.type !== 'quiz' && !isEditing && (
-                      <>
-                        <button
-                          onClick={handleStartEdit}
-                          className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
-                        >
-                          Bearbeiten
-                        </button>
-                        <button
-                          onClick={handleApproveLesson}
-                          disabled={isSaving}
-                          className="px-3 py-1 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50"
-                        >
-                          Freigeben
-                        </button>
-                      </>
-                    )}
-                    {isEditing && (
-                      <>
-                        <button
-                          onClick={handleCancelEdit}
-                          className="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
-                        >
-                          Abbrechen
-                        </button>
-                        <button
-                          onClick={handleSaveLesson}
-                          disabled={isSaving}
-                          className="px-3 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
-                        >
-                          {isSaving ? 'Speichert...' : 'Speichern'}
-                        </button>
-                      </>
-                    )}
-                  </div>
-                </div>
-
-                {/* Save/Approve Message */}
-                {saveMessage && (
-                  <div className={`p-3 rounded-lg text-sm ${
-                    saveMessage.type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-red-50 text-red-700 border border-red-200'
-                  }`}>
-                    {saveMessage.text}
-                  </div>
-                )}
-
-                {/* Video Player */}
-                {selectedLesson.type === 'video' && selectedLesson.videoUrl && (
-                  <div className="aspect-video bg-gray-900 rounded-xl overflow-hidden">
-                    <video
-                      src={selectedLesson.videoUrl}
-                      controls
-                      className="w-full h-full"
-                    />
-                  </div>
-                )}
-
-                {/* Text Content - Edit Mode */}
-                {isEditing && (selectedLesson.type === 'text' || selectedLesson.type === 'video') && (
-                  <div className="space-y-2">
-                    <label className="text-sm text-gray-500">Inhalt (Markdown)</label>
-                    <textarea
-                      value={editContent}
-                      onChange={e => setEditContent(e.target.value)}
-                      rows={20}
-                      className="w-full border border-gray-300 rounded-xl p-4 text-sm font-mono text-gray-800 leading-relaxed resize-y focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-                      placeholder="Markdown-Inhalt der Lektion..."
-                    />
-                    <p className="text-xs text-gray-400">Unterstuetzt: # Ueberschrift, ## Unterueberschrift, - Aufzaehlung, **fett**</p>
-                  </div>
-                )}
-
-                {/* Text Content - View Mode */}
-                {!isEditing && (selectedLesson.type === 'text' || selectedLesson.type === 'video') && selectedLesson.contentMarkdown && (
-                  <div className="prose prose-sm max-w-none">
-                    <div className="whitespace-pre-wrap text-gray-700 leading-relaxed">
-                      {selectedLesson.contentMarkdown.split('\n').map((line, i) => {
-                        if (line.startsWith('# ')) return <h1 key={i} className="text-2xl font-bold text-gray-900 mt-6 mb-3">{line.slice(2)}</h1>
-                        if (line.startsWith('## ')) return <h2 key={i} className="text-xl font-semibold text-gray-900 mt-5 mb-2">{line.slice(3)}</h2>
-                        if (line.startsWith('### ')) return <h3 key={i} className="text-lg font-medium text-gray-900 mt-4 mb-2">{line.slice(4)}</h3>
-                        if (line.startsWith('- **')) {
-                          const parts = line.slice(2).split('**')
-                          return <li key={i} className="ml-4 list-disc"><strong>{parts[1]}</strong>{parts[2] || ''}</li>
-                        }
-                        if (line.startsWith('- ')) return <li key={i} className="ml-4 list-disc">{line.slice(2)}</li>
-                        if (line.trim() === '') return <br key={i} />
-                        return <p key={i} className="mb-2">{line}</p>
-                      })}
-                    </div>
-                  </div>
-                )}
-
-                {/* Quiz Player */}
-                {selectedLesson.type === 'quiz' && selectedLesson.quizQuestions && (
-                  <div className="space-y-6">
-                    {selectedLesson.quizQuestions.map((q: QuizQuestion, qi: number) => (
-                      <div key={q.id} className="bg-gray-50 rounded-xl p-5">
-                        <h4 className="font-medium text-gray-900 mb-3">Frage {qi + 1}: {q.question}</h4>
-                        <div className="space-y-2">
-                          {q.options.map((option: string, oi: number) => {
-                            const isSelected = quizAnswers[q.id] === oi
-                            const showResult = quizResult && !quizResult.error
-                            const isCorrect = showResult && quizResult.results?.[qi]?.correct
-                            const wasSelected = showResult && isSelected
-
-                            let bgClass = 'bg-white border-gray-200 hover:border-purple-300'
-                            if (isSelected && !showResult) bgClass = 'bg-purple-50 border-purple-500'
-                            if (showResult && oi === q.correctOptionIndex) bgClass = 'bg-green-50 border-green-500'
-                            if (showResult && wasSelected && !isCorrect) bgClass = 'bg-red-50 border-red-500'
-
-                            return (
-                              <button
-                                key={oi}
-                                onClick={() => !quizResult && setQuizAnswers({ ...quizAnswers, [q.id]: oi })}
-                                disabled={!!quizResult}
-                                className={`w-full text-left p-3 rounded-lg border-2 transition-all ${bgClass}`}
-                              >
-                                <span className="text-sm text-gray-700">{String.fromCharCode(65 + oi)}) {option}</span>
-                              </button>
-                            )
-                          })}
-                        </div>
-                        {quizResult && !quizResult.error && quizResult.results?.[qi] && (
-                          <div className={`mt-3 p-3 rounded-lg text-sm ${
-                            quizResult.results[qi].correct ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
-                          }`}>
-                            {quizResult.results[qi].correct ? 'Richtig!' : 'Falsch.'} {q.explanation}
-                          </div>
-                        )}
-                      </div>
-                    ))}
-
-                    {/* Quiz Submit / Result */}
-                    {!quizResult ? (
-                      <button
-                        onClick={handleSubmitQuiz}
-                        disabled={isSubmittingQuiz || Object.keys(quizAnswers).length < (selectedLesson.quizQuestions?.length || 0)}
-                        className="w-full py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-colors disabled:opacity-50 font-medium"
-                      >
-                        {isSubmittingQuiz ? 'Wird ausgewertet...' : 'Quiz auswerten'}
-                      </button>
-                    ) : quizResult.error ? (
-                      <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">{quizResult.error}</div>
-                    ) : (
-                      <div className={`rounded-xl p-6 text-center ${quizResult.passed ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
-                        <div className={`text-3xl font-bold ${quizResult.passed ? 'text-green-600' : 'text-red-600'}`}>
-                          {quizResult.score}%
-                        </div>
-                        <div className={`text-sm mt-1 ${quizResult.passed ? 'text-green-700' : 'text-red-700'}`}>
-                          {quizResult.passed ? 'Bestanden!' : 'Nicht bestanden'} — {quizResult.correctAnswers}/{quizResult.totalQuestions} richtig
-                        </div>
-                        <button
-                          onClick={() => { setQuizResult(null); setQuizAnswers({}) }}
-                          className="mt-4 px-4 py-2 text-sm bg-white rounded-lg border hover:bg-gray-50"
-                        >
-                          Quiz wiederholen
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            ) : (
-              <p className="text-gray-500 text-center py-10">Waehlen Sie eine Lektion aus.</p>
-            )}
-          </div>
-        </div>
+        <LessonsTab
+          sortedLessons={sortedLessons}
+          selectedLesson={selectedLesson}
+          onSelectLesson={(lesson) => { setSelectedLesson(lesson); setQuizResult(null); setQuizAnswers({}) }}
+          quizAnswers={quizAnswers}
+          onQuizAnswer={setQuizAnswers}
+          quizResult={quizResult}
+          isSubmittingQuiz={isSubmittingQuiz}
+          onSubmitQuiz={handleSubmitQuiz}
+          onResetQuiz={() => { setQuizResult(null); setQuizAnswers({}) }}
+          isEditing={isEditing}
+          editTitle={editTitle}
+          editContent={editContent}
+          onEditTitle={setEditTitle}
+          onEditContent={setEditContent}
+          isSaving={isSaving}
+          saveMessage={saveMessage}
+          onStartEdit={handleStartEdit}
+          onCancelEdit={handleCancelEdit}
+          onSaveLesson={handleSaveLesson}
+          onApproveLesson={handleApproveLesson}
+        />
       )}
 
-      {/* Enrollments Tab */}
       {activeTab === 'enrollments' && (
-        <div className="space-y-4">
-          {overdueEnrollments > 0 && (
-            <div className="bg-red-50 border border-red-200 rounded-xl p-4 text-sm text-red-700">
-              {overdueEnrollments} ueberfaellige Einschreibung(en)
-            </div>
-          )}
-          {enrollments.length === 0 ? (
-            <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
-              <p className="text-gray-500">Noch keine Einschreibungen fuer diesen Kurs.</p>
-            </div>
-          ) : (
-            enrollments.map(enrollment => {
-              const statusInfo = ENROLLMENT_STATUS_INFO[enrollment.status]
-              const overdue = isEnrollmentOverdue(enrollment)
-              const daysUntil = getDaysUntilDeadline(enrollment.deadline)
-              return (
-                <div key={enrollment.id} className={`bg-white rounded-xl border-2 p-5 ${overdue ? 'border-red-200' : 'border-gray-200'}`}>
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${statusInfo?.bgColor} ${statusInfo?.color}`}>
-                          {statusInfo?.label}
-                        </span>
-                        {overdue && <span className="text-xs text-red-600">Ueberfaellig</span>}
-                      </div>
-                      <div className="font-medium text-gray-900">{enrollment.userName}</div>
-                      <div className="text-sm text-gray-500">{enrollment.userEmail}</div>
-                    </div>
-                    <div className="text-right">
-                      <div className="text-2xl font-bold text-gray-900">{enrollment.progress}%</div>
-                      <div className="text-xs text-gray-500">
-                        {enrollment.status === 'completed' ? 'Abgeschlossen' : `${daysUntil > 0 ? daysUntil + ' Tage verbleibend' : Math.abs(daysUntil) + ' Tage ueberfaellig'}`}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="mt-3 w-full h-2 bg-gray-200 rounded-full overflow-hidden">
-                    <div
-                      className={`h-full rounded-full ${enrollment.progress === 100 ? 'bg-green-500' : overdue ? 'bg-red-500' : 'bg-purple-500'}`}
-                      style={{ width: `${enrollment.progress}%` }}
-                    />
-                  </div>
-                </div>
-              )
-            })
-          )}
-        </div>
+        <EnrollmentsTab enrollments={enrollments} overdueEnrollments={overdueEnrollments} />
       )}
 
-      {/* Videos Tab */}
       {activeTab === 'videos' && (
-        <div className="space-y-6">
-          <div className="bg-white rounded-xl border border-gray-200 p-6">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold text-gray-900">Video-Generierung</h3>
-              <div className="flex gap-2">
-                <button
-                  onClick={handleCheckVideoStatus}
-                  className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50"
-                >
-                  Status pruefen
-                </button>
-                <button
-                  onClick={handleGenerateVideos}
-                  disabled={isGeneratingVideos}
-                  className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
-                >
-                  {isGeneratingVideos ? 'Wird gestartet...' : 'Videos generieren'}
-                </button>
-              </div>
-            </div>
-
-            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-4 text-sm text-blue-700">
-              Videos werden mit ElevenLabs (Stimme) und HeyGen (Avatar) generiert.
-              Konfigurieren Sie die API-Keys in den Umgebungsvariablen.
-            </div>
-
-            {videoStatus && (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-gray-500">Gesamtstatus:</span>
-                  <span className={`px-2 py-1 text-xs rounded-full ${
-                    videoStatus.status === 'completed' ? 'bg-green-100 text-green-700' :
-                    videoStatus.status === 'processing' ? 'bg-yellow-100 text-yellow-700' :
-                    'bg-gray-100 text-gray-600'
-                  }`}>
-                    {videoStatus.status}
-                  </span>
-                </div>
-                {videoStatus.lessons?.map((ls: any) => (
-                  <div key={ls.lessonId} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                    <span className="text-sm text-gray-700">Lektion {ls.lessonId.slice(-4)}</span>
-                    <span className={`text-xs ${ls.status === 'completed' ? 'text-green-600' : 'text-gray-500'}`}>
-                      {ls.status}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {!videoStatus && (
-              <p className="text-sm text-gray-500 text-center py-8">
-                Klicken Sie auf "Videos generieren" um den Prozess zu starten.
-              </p>
-            )}
-          </div>
-        </div>
+        <VideosTab
+          videoStatus={videoStatus}
+          isGeneratingVideos={isGeneratingVideos}
+          onGenerateVideos={handleGenerateVideos}
+          onCheckVideoStatus={handleCheckVideoStatus}
+        />
       )}
     </div>
   )
diff --git a/admin-compliance/app/sdk/ai-act/_components/AISystemCard.tsx b/admin-compliance/app/sdk/ai-act/_components/AISystemCard.tsx
new file mode 100644
index 0000000..99e4052
--- /dev/null
+++ b/admin-compliance/app/sdk/ai-act/_components/AISystemCard.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import { AISystem } from './types'
+
+interface AISystemCardProps {
+  system: AISystem
+  onAssess: () => void
+  onEdit: () => void
+  onDelete: () => void
+  assessing: boolean
+}
+
+const classificationColors: Record<AISystem['classification'], string> = {
+  prohibited: 'bg-red-100 text-red-700 border-red-200',
+  'high-risk': 'bg-orange-100 text-orange-700 border-orange-200',
+  'limited-risk': 'bg-yellow-100 text-yellow-700 border-yellow-200',
+  'minimal-risk': 'bg-green-100 text-green-700 border-green-200',
+  unclassified: 'bg-gray-100 text-gray-500 border-gray-200',
+}
+
+const classificationLabels: Record<AISystem['classification'], string> = {
+  prohibited: 'Verboten',
+  'high-risk': 'Hochrisiko',
+  'limited-risk': 'Begrenztes Risiko',
+  'minimal-risk': 'Minimales Risiko',
+  unclassified: 'Nicht klassifiziert',
+}
+
+const statusColors: Record<AISystem['status'], string> = {
+  draft: 'bg-gray-100 text-gray-500',
+  classified: 'bg-blue-100 text-blue-700',
+  compliant: 'bg-green-100 text-green-700',
+  'non-compliant': 'bg-red-100 text-red-700',
+}
+
+const statusLabels: Record<AISystem['status'], string> = {
+  draft: 'Entwurf',
+  classified: 'Klassifiziert',
+  compliant: 'Konform',
+  'non-compliant': 'Nicht konform',
+}
+
+export function AISystemCard({ system, onAssess, onEdit, onDelete, assessing }: AISystemCardProps) {
+  return (
+    <div className={`bg-white rounded-xl border-2 p-6 ${
+      system.classification === 'high-risk' ? 'border-orange-200' :
+      system.classification === 'prohibited' ? 'border-red-200' : 'border-gray-200'
+    }`}>
+      <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 rounded-full ${classificationColors[system.classification]}`}>
+              {classificationLabels[system.classification]}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[system.status]}`}>
+              {statusLabels[system.status]}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{system.name}</h3>
+          <p className="text-sm text-gray-500 mt-1">{system.description}</p>
+          <div className="mt-2 text-sm text-gray-500">
+            <span>Sektor: {system.sector}</span>
+            {system.assessmentDate && (
+              <span className="ml-4">Klassifiziert: {system.assessmentDate.toLocaleDateString('de-DE')}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {system.obligations.length > 0 && (
+        <div className="mt-4 pt-4 border-t border-gray-100">
+          <p className="text-sm font-medium text-gray-700 mb-2">Pflichten nach AI Act:</p>
+          <div className="flex flex-wrap gap-2">
+            {system.obligations.map(obl => (
+              <span key={obl} className="px-2 py-1 text-xs bg-purple-50 text-purple-700 rounded">
+                {obl}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {system.assessmentResult && (
+        <div className="mt-3 p-3 bg-blue-50 rounded-lg">
+          <p className="text-xs font-medium text-blue-700">KI-Risikobewertung abgeschlossen</p>
+        </div>
+      )}
+
+      <div className="mt-4 flex items-center gap-2">
+        <button
+          onClick={onAssess}
+          disabled={assessing}
+          className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors disabled:opacity-50"
+        >
+          {assessing ? (
+            <span className="flex items-center justify-center gap-2">
+              <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              Bewertung laeuft...
+            </span>
+          ) : (
+            system.classification === 'unclassified' ? 'Klassifizierung starten' : 'Risikobewertung starten'
+          )}
+        </button>
+        <button onClick={onEdit} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          Bearbeiten
+        </button>
+        <button onClick={onDelete} className="px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors">
+          Loeschen
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/ai-act/_components/AddSystemForm.tsx b/admin-compliance/app/sdk/ai-act/_components/AddSystemForm.tsx
new file mode 100644
index 0000000..f321bde
--- /dev/null
+++ b/admin-compliance/app/sdk/ai-act/_components/AddSystemForm.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import { useState } from 'react'
+import { AISystem } from './types'
+
+interface AddSystemFormProps {
+  onSubmit: (system: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => void
+  onCancel: () => void
+  initialData?: AISystem | null
+}
+
+export function AddSystemForm({ onSubmit, onCancel, initialData }: AddSystemFormProps) {
+  const [formData, setFormData] = useState({
+    name: initialData?.name || '',
+    description: initialData?.description || '',
+    purpose: initialData?.purpose || '',
+    sector: initialData?.sector || '',
+    classification: (initialData?.classification || 'unclassified') as AISystem['classification'],
+    status: (initialData?.status || 'draft') as AISystem['status'],
+    obligations: initialData?.obligations || [] as string[],
+  })
+
+  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 ? 'KI-System bearbeiten' : 'Neues KI-System registrieren'}
+      </h3>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={e => setFormData({ ...formData, name: e.target.value })}
+            placeholder="z.B. Dokumenten-Scanner"
+            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 KI-System..."
+            rows={2}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Einsatzzweck</label>
+            <input
+              type="text"
+              value={formData.purpose}
+              onChange={e => setFormData({ ...formData, purpose: e.target.value })}
+              placeholder="z.B. Texterkennung"
+              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">Sektor</label>
+            <input
+              type="text"
+              value={formData.sector}
+              onChange={e => setFormData({ ...formData, sector: e.target.value })}
+              placeholder="z.B. Verwaltung"
+              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">Vorklassifizierung</label>
+          <select
+            value={formData.classification}
+            onChange={e => setFormData({ ...formData, classification: e.target.value as AISystem['classification'] })}
+            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="unclassified">Noch nicht klassifiziert</option>
+            <option value="minimal-risk">Minimales Risiko</option>
+            <option value="limited-risk">Begrenztes Risiko</option>
+            <option value="high-risk">Hochrisiko</option>
+            <option value="prohibited">Verboten</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.name}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          {initialData ? 'Speichern' : 'Registrieren'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/ai-act/_components/LoadingSkeleton.tsx b/admin-compliance/app/sdk/ai-act/_components/LoadingSkeleton.tsx
new file mode 100644
index 0000000..6510aaa
--- /dev/null
+++ b/admin-compliance/app/sdk/ai-act/_components/LoadingSkeleton.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+export function LoadingSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {[1, 2, 3, 4].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-24 bg-gray-200 rounded-full" />
+            <div className="h-5 w-20 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 mb-4" />
+          <div className="h-4 w-1/2 bg-gray-100 rounded" />
+          <div className="mt-4 pt-4 border-t border-gray-100">
+            <div className="flex gap-2">
+              <div className="h-8 flex-1 bg-gray-200 rounded-lg" />
+              <div className="h-8 w-24 bg-gray-200 rounded-lg" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/ai-act/_components/RiskPyramid.tsx b/admin-compliance/app/sdk/ai-act/_components/RiskPyramid.tsx
new file mode 100644
index 0000000..ef2830f
--- /dev/null
+++ b/admin-compliance/app/sdk/ai-act/_components/RiskPyramid.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { AISystem } from './types'
+
+interface RiskPyramidProps {
+  systems: AISystem[]
+}
+
+export function RiskPyramid({ systems }: RiskPyramidProps) {
+  const counts = {
+    prohibited: systems.filter(s => s.classification === 'prohibited').length,
+    'high-risk': systems.filter(s => s.classification === 'high-risk').length,
+    'limited-risk': systems.filter(s => s.classification === 'limited-risk').length,
+    'minimal-risk': systems.filter(s => s.classification === 'minimal-risk').length,
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">AI Act Risikopyramide</h3>
+      <div className="flex flex-col items-center space-y-1">
+        <div className="w-24 h-12 bg-red-500 text-white flex items-center justify-center rounded-t-lg text-sm font-medium">
+          Verboten ({counts.prohibited})
+        </div>
+        <div className="w-40 h-12 bg-orange-500 text-white flex items-center justify-center text-sm font-medium">
+          Hochrisiko ({counts['high-risk']})
+        </div>
+        <div className="w-56 h-12 bg-yellow-500 text-white flex items-center justify-center text-sm font-medium">
+          Begrenztes Risiko ({counts['limited-risk']})
+        </div>
+        <div className="w-72 h-12 bg-green-500 text-white flex items-center justify-center rounded-b-lg text-sm font-medium">
+          Minimales Risiko ({counts['minimal-risk']})
+        </div>
+      </div>
+      <div className="mt-4 text-center text-sm text-gray-500">
+        {systems.filter(s => s.classification === 'unclassified').length} System(e) noch nicht klassifiziert
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/ai-act/_components/types.ts b/admin-compliance/app/sdk/ai-act/_components/types.ts
new file mode 100644
index 0000000..58aed6b
--- /dev/null
+++ b/admin-compliance/app/sdk/ai-act/_components/types.ts
@@ -0,0 +1,12 @@
+export interface AISystem {
+  id: string
+  name: string
+  description: string
+  classification: 'prohibited' | 'high-risk' | 'limited-risk' | 'minimal-risk' | 'unclassified'
+  purpose: string
+  sector: string
+  status: 'draft' | 'classified' | 'compliant' | 'non-compliant'
+  obligations: string[]
+  assessmentDate: Date | null
+  assessmentResult: Record<string, unknown> | null
+}
diff --git a/admin-compliance/app/sdk/ai-act/page.tsx b/admin-compliance/app/sdk/ai-act/page.tsx
index 0572ac7..1243c12 100644
--- a/admin-compliance/app/sdk/ai-act/page.tsx
+++ b/admin-compliance/app/sdk/ai-act/page.tsx
@@ -3,312 +3,11 @@
 import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-interface AISystem {
-  id: string
-  name: string
-  description: string
-  classification: 'prohibited' | 'high-risk' | 'limited-risk' | 'minimal-risk' | 'unclassified'
-  purpose: string
-  sector: string
-  status: 'draft' | 'classified' | 'compliant' | 'non-compliant'
-  obligations: string[]
-  assessmentDate: Date | null
-  assessmentResult: Record<string, unknown> | null
-}
-
-// =============================================================================
-// LOADING SKELETON
-// =============================================================================
-
-function LoadingSkeleton() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      {[1, 2, 3, 4].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-24 bg-gray-200 rounded-full" />
-            <div className="h-5 w-20 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 mb-4" />
-          <div className="h-4 w-1/2 bg-gray-100 rounded" />
-          <div className="mt-4 pt-4 border-t border-gray-100">
-            <div className="flex gap-2">
-              <div className="h-8 flex-1 bg-gray-200 rounded-lg" />
-              <div className="h-8 w-24 bg-gray-200 rounded-lg" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// =============================================================================
-// COMPONENTS
-// =============================================================================
-
-function RiskPyramid({ systems }: { systems: AISystem[] }) {
-  const counts = {
-    prohibited: systems.filter(s => s.classification === 'prohibited').length,
-    'high-risk': systems.filter(s => s.classification === 'high-risk').length,
-    'limited-risk': systems.filter(s => s.classification === 'limited-risk').length,
-    'minimal-risk': systems.filter(s => s.classification === 'minimal-risk').length,
-  }
-
-  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">AI Act Risikopyramide</h3>
-      <div className="flex flex-col items-center space-y-1">
-        <div className="w-24 h-12 bg-red-500 text-white flex items-center justify-center rounded-t-lg text-sm font-medium">
-          Verboten ({counts.prohibited})
-        </div>
-        <div className="w-40 h-12 bg-orange-500 text-white flex items-center justify-center text-sm font-medium">
-          Hochrisiko ({counts['high-risk']})
-        </div>
-        <div className="w-56 h-12 bg-yellow-500 text-white flex items-center justify-center text-sm font-medium">
-          Begrenztes Risiko ({counts['limited-risk']})
-        </div>
-        <div className="w-72 h-12 bg-green-500 text-white flex items-center justify-center rounded-b-lg text-sm font-medium">
-          Minimales Risiko ({counts['minimal-risk']})
-        </div>
-      </div>
-      <div className="mt-4 text-center text-sm text-gray-500">
-        {systems.filter(s => s.classification === 'unclassified').length} System(e) noch nicht klassifiziert
-      </div>
-    </div>
-  )
-}
-
-function AddSystemForm({
-  onSubmit,
-  onCancel,
-  initialData,
-}: {
-  onSubmit: (system: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => void
-  onCancel: () => void
-  initialData?: AISystem | null
-}) {
-  const [formData, setFormData] = useState({
-    name: initialData?.name || '',
-    description: initialData?.description || '',
-    purpose: initialData?.purpose || '',
-    sector: initialData?.sector || '',
-    classification: (initialData?.classification || 'unclassified') as AISystem['classification'],
-    status: (initialData?.status || 'draft') as AISystem['status'],
-    obligations: initialData?.obligations || [] as string[],
-  })
-
-  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 ? 'KI-System bearbeiten' : 'Neues KI-System registrieren'}</h3>
-      <div className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
-          <input
-            type="text"
-            value={formData.name}
-            onChange={e => setFormData({ ...formData, name: e.target.value })}
-            placeholder="z.B. Dokumenten-Scanner"
-            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 KI-System..."
-            rows={2}
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Einsatzzweck</label>
-            <input
-              type="text"
-              value={formData.purpose}
-              onChange={e => setFormData({ ...formData, purpose: e.target.value })}
-              placeholder="z.B. Texterkennung"
-              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">Sektor</label>
-            <input
-              type="text"
-              value={formData.sector}
-              onChange={e => setFormData({ ...formData, sector: e.target.value })}
-              placeholder="z.B. Verwaltung"
-              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">Vorklassifizierung</label>
-          <select
-            value={formData.classification}
-            onChange={e => setFormData({ ...formData, classification: e.target.value as AISystem['classification'] })}
-            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="unclassified">Noch nicht klassifiziert</option>
-            <option value="minimal-risk">Minimales Risiko</option>
-            <option value="limited-risk">Begrenztes Risiko</option>
-            <option value="high-risk">Hochrisiko</option>
-            <option value="prohibited">Verboten</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.name}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          {initialData ? 'Speichern' : 'Registrieren'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function AISystemCard({
-  system,
-  onAssess,
-  onEdit,
-  onDelete,
-  assessing,
-}: {
-  system: AISystem
-  onAssess: () => void
-  onEdit: () => void
-  onDelete: () => void
-  assessing: boolean
-}) {
-  const classificationColors = {
-    prohibited: 'bg-red-100 text-red-700 border-red-200',
-    'high-risk': 'bg-orange-100 text-orange-700 border-orange-200',
-    'limited-risk': 'bg-yellow-100 text-yellow-700 border-yellow-200',
-    'minimal-risk': 'bg-green-100 text-green-700 border-green-200',
-    unclassified: 'bg-gray-100 text-gray-500 border-gray-200',
-  }
-
-  const classificationLabels = {
-    prohibited: 'Verboten',
-    'high-risk': 'Hochrisiko',
-    'limited-risk': 'Begrenztes Risiko',
-    'minimal-risk': 'Minimales Risiko',
-    unclassified: 'Nicht klassifiziert',
-  }
-
-  const statusColors = {
-    draft: 'bg-gray-100 text-gray-500',
-    classified: 'bg-blue-100 text-blue-700',
-    compliant: 'bg-green-100 text-green-700',
-    'non-compliant': 'bg-red-100 text-red-700',
-  }
-
-  const statusLabels = {
-    draft: 'Entwurf',
-    classified: 'Klassifiziert',
-    compliant: 'Konform',
-    'non-compliant': 'Nicht konform',
-  }
-
-  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${
-      system.classification === 'high-risk' ? 'border-orange-200' :
-      system.classification === 'prohibited' ? 'border-red-200' : 'border-gray-200'
-    }`}>
-      <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 rounded-full ${classificationColors[system.classification]}`}>
-              {classificationLabels[system.classification]}
-            </span>
-            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[system.status]}`}>
-              {statusLabels[system.status]}
-            </span>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">{system.name}</h3>
-          <p className="text-sm text-gray-500 mt-1">{system.description}</p>
-          <div className="mt-2 text-sm text-gray-500">
-            <span>Sektor: {system.sector}</span>
-            {system.assessmentDate && (
-              <span className="ml-4">Klassifiziert: {system.assessmentDate.toLocaleDateString('de-DE')}</span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {system.obligations.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-gray-100">
-          <p className="text-sm font-medium text-gray-700 mb-2">Pflichten nach AI Act:</p>
-          <div className="flex flex-wrap gap-2">
-            {system.obligations.map(obl => (
-              <span key={obl} className="px-2 py-1 text-xs bg-purple-50 text-purple-700 rounded">
-                {obl}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {system.assessmentResult && (
-        <div className="mt-3 p-3 bg-blue-50 rounded-lg">
-          <p className="text-xs font-medium text-blue-700">KI-Risikobewertung abgeschlossen</p>
-        </div>
-      )}
-
-      <div className="mt-4 flex items-center gap-2">
-        <button
-          onClick={onAssess}
-          disabled={assessing}
-          className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors disabled:opacity-50"
-        >
-          {assessing ? (
-            <span className="flex items-center justify-center gap-2">
-              <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-              </svg>
-              Bewertung laeuft...
-            </span>
-          ) : (
-            system.classification === 'unclassified' ? 'Klassifizierung starten' : 'Risikobewertung starten'
-          )}
-        </button>
-        <button
-          onClick={onEdit}
-          className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
-        >
-          Bearbeiten
-        </button>
-        <button
-          onClick={onDelete}
-          className="px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-        >
-          Loeschen
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
+import { AISystem } from './_components/types'
+import { LoadingSkeleton } from './_components/LoadingSkeleton'
+import { RiskPyramid } from './_components/RiskPyramid'
+import { AddSystemForm } from './_components/AddSystemForm'
+import { AISystemCard } from './_components/AISystemCard'
 
 export default function AIActPage() {
   const { state } = useSDK()
@@ -320,7 +19,6 @@ export default function AIActPage() {
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
 
-  // Fetch systems from backend on mount
   useEffect(() => {
     const fetchSystems = async () => {
       setLoading(true)
@@ -354,59 +52,43 @@ export default function AIActPage() {
   const handleAddSystem = async (data: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => {
     setError(null)
     if (editingSystem) {
-      // Edit existing system via PUT
       try {
         const res = await fetch(`/api/sdk/v1/compliance/ai/systems/${editingSystem.id}`, {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            name: data.name,
-            description: data.description,
-            purpose: data.purpose,
-            sector: data.sector,
-            classification: data.classification,
-            status: data.status,
-            obligations: data.obligations,
+            name: data.name, description: data.description, purpose: data.purpose,
+            sector: data.sector, classification: data.classification,
+            status: data.status, obligations: data.obligations,
           }),
         })
         if (res.ok) {
           const updated = await res.json()
           setSystems(prev => prev.map(s =>
-            s.id === editingSystem.id
-              ? { ...s, ...data, id: updated.id || editingSystem.id }
-              : s
+            s.id === editingSystem.id ? { ...s, ...data, id: updated.id || editingSystem.id } : s
           ))
         } else {
           setError('Speichern fehlgeschlagen')
         }
       } catch {
-        // Fallback: update locally
-        setSystems(prev => prev.map(s =>
-          s.id === editingSystem.id ? { ...s, ...data } : s
-        ))
+        setSystems(prev => prev.map(s => s.id === editingSystem.id ? { ...s, ...data } : s))
       }
       setEditingSystem(null)
     } else {
-      // Create new system via POST
       try {
         const res = await fetch('/api/sdk/v1/compliance/ai/systems', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            name: data.name,
-            description: data.description,
-            purpose: data.purpose,
-            sector: data.sector,
-            classification: data.classification,
-            status: data.status,
-            obligations: data.obligations,
+            name: data.name, description: data.description, purpose: data.purpose,
+            sector: data.sector, classification: data.classification,
+            status: data.status, obligations: data.obligations,
           }),
         })
         if (res.ok) {
           const created = await res.json()
           const newSystem: AISystem = {
-            ...data,
-            id: created.id,
+            ...data, id: created.id,
             assessmentDate: created.assessment_date ? new Date(created.assessment_date) : null,
             assessmentResult: created.assessment_result || null,
           }
@@ -415,10 +97,8 @@ export default function AIActPage() {
           setError('Registrierung fehlgeschlagen')
         }
       } catch {
-        // Fallback: add locally
         const newSystem: AISystem = {
-          ...data,
-          id: `ai-${Date.now()}`,
+          ...data, id: `ai-${Date.now()}`,
           assessmentDate: data.classification !== 'unclassified' ? new Date() : null,
           assessmentResult: null,
         }
@@ -450,16 +130,13 @@ export default function AIActPage() {
   const handleAssess = async (systemId: string) => {
     setAssessingId(systemId)
     setError(null)
-
     try {
       const res = await fetch(`/api/sdk/v1/compliance/ai/systems/${systemId}/assess`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
       })
-
       if (res.ok) {
         const result = await res.json()
-
         setSystems(prev => prev.map(s =>
           s.id === systemId
             ? {
@@ -490,12 +167,10 @@ export default function AIActPage() {
   const highRiskCount = systems.filter(s => s.classification === 'high-risk').length
   const compliantCount = systems.filter(s => s.status === 'compliant').length
   const unclassifiedCount = systems.filter(s => s.classification === 'unclassified').length
-
   const stepInfo = STEP_EXPLANATIONS['ai-act']
 
   return (
     <div className="space-y-6">
-      {/* Step Header */}
       <StepHeader
         stepId="ai-act"
         title={stepInfo.title}
@@ -514,7 +189,6 @@ export default function AIActPage() {
         </button>
       </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>
@@ -522,7 +196,6 @@ export default function AIActPage() {
         </div>
       )}
 
-      {/* Add/Edit System Form */}
       {showAddForm && (
         <AddSystemForm
           onSubmit={handleAddSystem}
@@ -531,7 +204,6 @@ export default function AIActPage() {
         />
       )}
 
-      {/* 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">KI-Systeme gesamt</div>
@@ -551,10 +223,8 @@ export default function AIActPage() {
         </div>
       </div>
 
-      {/* Risk Pyramid */}
       <RiskPyramid systems={systems} />
 
-      {/* Filter */}
       <div className="flex items-center gap-2 flex-wrap">
         <span className="text-sm text-gray-500">Filter:</span>
         {['all', 'high-risk', 'limited-risk', 'minimal-risk', 'unclassified', 'compliant', 'non-compliant'].map(f => (
@@ -562,9 +232,7 @@ export default function AIActPage() {
             key={f}
             onClick={() => setFilter(f)}
             className={`px-3 py-1 text-sm rounded-full transition-colors ${
-              filter === f
-                ? 'bg-purple-600 text-white'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
             }`}
           >
             {f === 'all' ? 'Alle' :
@@ -577,10 +245,8 @@ export default function AIActPage() {
         ))}
       </div>
 
-      {/* Loading */}
       {loading && <LoadingSkeleton />}
 
-      {/* AI Systems List */}
       {!loading && (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {filteredSystems.map(system => (
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
new file mode 100644
index 0000000..fb26a3b
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from 'react'
+import { HazardFormData, HAZARD_CATEGORIES, CATEGORY_LABELS, getRiskLevel, getRiskColor } from './types'
+import { RiskBadge } from './RiskBadge'
+
+interface HazardFormProps {
+  onSubmit: (data: HazardFormData) => void
+  onCancel: () => void
+}
+
+export function HazardForm({ onSubmit, onCancel }: HazardFormProps) {
+  const [formData, setFormData] = useState<HazardFormData>({
+    name: '',
+    description: '',
+    category: 'mechanical',
+    component_id: '',
+    severity: 3,
+    exposure: 3,
+    probability: 3,
+  })
+
+  const rInherent = formData.severity * formData.exposure * formData.probability
+  const riskLevel = getRiskLevel(rInherent)
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Neue Gefaehrdung</h3>
+      <div className="space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung *</label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="z.B. Quetschung durch Roboterarm"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 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 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            >
+              {HAZARD_CATEGORIES.map((cat) => (
+                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
+          <textarea
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            rows={2}
+            placeholder="Detaillierte Beschreibung der Gefaehrdung..."
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          />
+        </div>
+
+        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
+          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Risikobewertung (S x E x P)</h4>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+                Schwere (S): <span className="font-bold">{formData.severity}</span>
+              </label>
+              <input type="range" min={1} max={5} value={formData.severity}
+                onChange={(e) => setFormData({ ...formData, severity: Number(e.target.value) })}
+                className="w-full accent-purple-600"
+              />
+              <div className="flex justify-between text-xs text-gray-400"><span>Gering</span><span>Toedlich</span></div>
+            </div>
+            <div>
+              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+                Exposition (E): <span className="font-bold">{formData.exposure}</span>
+              </label>
+              <input type="range" min={1} max={5} value={formData.exposure}
+                onChange={(e) => setFormData({ ...formData, exposure: Number(e.target.value) })}
+                className="w-full accent-purple-600"
+              />
+              <div className="flex justify-between text-xs text-gray-400"><span>Selten</span><span>Staendig</span></div>
+            </div>
+            <div>
+              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+                Wahrscheinlichkeit (P): <span className="font-bold">{formData.probability}</span>
+              </label>
+              <input type="range" min={1} max={5} value={formData.probability}
+                onChange={(e) => setFormData({ ...formData, probability: Number(e.target.value) })}
+                className="w-full accent-purple-600"
+              />
+              <div className="flex justify-between text-xs text-gray-400"><span>Unwahrscheinlich</span><span>Sehr wahrscheinlich</span></div>
+            </div>
+          </div>
+
+          <div className={`mt-4 p-3 rounded-lg border ${getRiskColor(riskLevel)}`}>
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">R_inherent = S x E x P</span>
+              <div className="flex items-center gap-2">
+                <span className="text-lg font-bold">{rInherent}</span>
+                <RiskBadge level={riskLevel} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 flex items-center gap-3">
+        <button
+          onClick={() => onSubmit(formData)}
+          disabled={!formData.name}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          Hinzufuegen
+        </button>
+        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          Abbrechen
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
new file mode 100644
index 0000000..13de838
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { Hazard, CATEGORY_LABELS, STATUS_LABELS } from './types'
+import { RiskBadge } from './RiskBadge'
+
+interface HazardTableProps {
+  hazards: Hazard[]
+  onDelete: (id: string) => void
+}
+
+export function HazardTable({ hazards, onDelete }: HazardTableProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">S</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">E</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">P</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">R</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risiko</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+            {hazards
+              .sort((a, b) => b.r_inherent - a.r_inherent)
+              .map((hazard) => (
+                <tr key={hazard.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
+                  <td className="px-4 py-3">
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
+                    {hazard.description && (
+                      <div className="text-xs text-gray-500 truncate max-w-[250px]">{hazard.description}</div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600">{CATEGORY_LABELS[hazard.category] || hazard.category}</td>
+                  <td className="px-4 py-3 text-sm text-gray-600">{hazard.component_name || '--'}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.severity}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.exposure}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.probability}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-bold">{hazard.r_inherent}</td>
+                  <td className="px-4 py-3"><RiskBadge level={hazard.risk_level} /></td>
+                  <td className="px-4 py-3">
+                    <span className="text-xs text-gray-500">{STATUS_LABELS[hazard.status] || hazard.status}</span>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => onDelete(hazard.id)}
+                      className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                    >
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <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>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
new file mode 100644
index 0000000..2ab02f7
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { LibraryHazard, HAZARD_CATEGORIES, CATEGORY_LABELS } from './types'
+
+interface LibraryModalProps {
+  library: LibraryHazard[]
+  onAdd: (item: LibraryHazard) => void
+  onClose: () => void
+}
+
+export function LibraryModal({ library, onAdd, onClose }: LibraryModalProps) {
+  const [search, setSearch] = useState('')
+  const [filterCat, setFilterCat] = useState('')
+
+  const filtered = library.filter((h) => {
+    const matchSearch = !search || h.name.toLowerCase().includes(search.toLowerCase()) || h.description.toLowerCase().includes(search.toLowerCase())
+    const matchCat = !filterCat || h.category === filterCat
+    return matchSearch && matchCat
+  })
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Gefaehrdungsbibliothek</h3>
+            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="flex gap-3">
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Suchen..."
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            />
+            <select
+              value={filterCat}
+              onChange={(e) => setFilterCat(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            >
+              <option value="">Alle Kategorien</option>
+              {HAZARD_CATEGORIES.map((cat) => (
+                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="flex-1 overflow-auto p-4 space-y-2">
+          {filtered.length > 0 ? (
+            filtered.map((item) => (
+              <div key={item.id} className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750">
+                <div className="flex-1 min-w-0 mr-3">
+                  <div className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</div>
+                  <div className="text-xs text-gray-500 truncate">{item.description}</div>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-xs text-gray-400">{CATEGORY_LABELS[item.category] || item.category}</span>
+                    <span className="text-xs text-gray-400">S:{item.default_severity} E:{item.default_exposure} P:{item.default_probability}</span>
+                  </div>
+                </div>
+                <button
+                  onClick={() => onAdd(item)}
+                  className="flex-shrink-0 px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+                >
+                  Hinzufuegen
+                </button>
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-8 text-gray-500">Keine Eintraege gefunden</div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
new file mode 100644
index 0000000..d405a74
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { getRiskColor, getRiskLevelLabel } from './types'
+
+export function RiskBadge({ level }: { level: string }) {
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${getRiskColor(level)}`}>
+      {getRiskLevelLabel(level)}
+    </span>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts
new file mode 100644
index 0000000..ed90338
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts
@@ -0,0 +1,92 @@
+export interface Hazard {
+  id: string
+  name: string
+  description: string
+  component_id: string | null
+  component_name: string | null
+  category: string
+  status: string
+  severity: number
+  exposure: number
+  probability: number
+  r_inherent: number
+  risk_level: string
+  created_at: string
+}
+
+export interface LibraryHazard {
+  id: string
+  name: string
+  description: string
+  category: string
+  default_severity: number
+  default_exposure: number
+  default_probability: number
+}
+
+export interface HazardFormData {
+  name: string
+  description: string
+  category: string
+  component_id: string
+  severity: number
+  exposure: number
+  probability: number
+}
+
+export const HAZARD_CATEGORIES = [
+  'mechanical', 'electrical', 'thermal', 'noise', 'vibration',
+  'radiation', 'material', 'ergonomic', 'software', 'ai_specific',
+  'cybersecurity', 'functional_safety', 'environmental',
+]
+
+export const CATEGORY_LABELS: Record<string, string> = {
+  mechanical: 'Mechanisch',
+  electrical: 'Elektrisch',
+  thermal: 'Thermisch',
+  noise: 'Laerm',
+  vibration: 'Vibration',
+  radiation: 'Strahlung',
+  material: 'Stoffe/Materialien',
+  ergonomic: 'Ergonomie',
+  software: 'Software',
+  ai_specific: 'KI-spezifisch',
+  cybersecurity: 'Cybersecurity',
+  functional_safety: 'Funktionale Sicherheit',
+  environmental: 'Umgebung',
+}
+
+export const STATUS_LABELS: Record<string, string> = {
+  identified: 'Identifiziert',
+  assessed: 'Bewertet',
+  mitigated: 'Gemindert',
+  accepted: 'Akzeptiert',
+  closed: 'Geschlossen',
+}
+
+export function getRiskColor(level: string): string {
+  switch (level) {
+    case 'critical': return 'bg-red-100 text-red-700 border-red-200'
+    case 'high': return 'bg-orange-100 text-orange-700 border-orange-200'
+    case 'medium': return 'bg-yellow-100 text-yellow-700 border-yellow-200'
+    case 'low': return 'bg-green-100 text-green-700 border-green-200'
+    default: return 'bg-gray-100 text-gray-700 border-gray-200'
+  }
+}
+
+export function getRiskLevel(r: number): string {
+  if (r >= 100) return 'critical'
+  if (r >= 50) return 'high'
+  if (r >= 20) return 'medium'
+  return 'low'
+}
+
+export function getRiskLevelLabel(level: string): string {
+  switch (level) {
+    case 'critical': return 'Kritisch'
+    case 'high': return 'Hoch'
+    case 'medium': return 'Mittel'
+    case 'low': return 'Niedrig'
+    default: return level
+  }
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
index 2e35968..bdbeb2e 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
@@ -2,338 +2,10 @@
 
 import React, { useState, useEffect } from 'react'
 import { useParams } from 'next/navigation'
-
-interface Hazard {
-  id: string
-  name: string
-  description: string
-  component_id: string | null
-  component_name: string | null
-  category: string
-  status: string
-  severity: number
-  exposure: number
-  probability: number
-  r_inherent: number
-  risk_level: string
-  created_at: string
-}
-
-interface LibraryHazard {
-  id: string
-  name: string
-  description: string
-  category: string
-  default_severity: number
-  default_exposure: number
-  default_probability: number
-}
-
-const HAZARD_CATEGORIES = [
-  'mechanical', 'electrical', 'thermal', 'noise', 'vibration',
-  'radiation', 'material', 'ergonomic', 'software', 'ai_specific',
-  'cybersecurity', 'functional_safety', 'environmental',
-]
-
-const CATEGORY_LABELS: Record<string, string> = {
-  mechanical: 'Mechanisch',
-  electrical: 'Elektrisch',
-  thermal: 'Thermisch',
-  noise: 'Laerm',
-  vibration: 'Vibration',
-  radiation: 'Strahlung',
-  material: 'Stoffe/Materialien',
-  ergonomic: 'Ergonomie',
-  software: 'Software',
-  ai_specific: 'KI-spezifisch',
-  cybersecurity: 'Cybersecurity',
-  functional_safety: 'Funktionale Sicherheit',
-  environmental: 'Umgebung',
-}
-
-const STATUS_LABELS: Record<string, string> = {
-  identified: 'Identifiziert',
-  assessed: 'Bewertet',
-  mitigated: 'Gemindert',
-  accepted: 'Akzeptiert',
-  closed: 'Geschlossen',
-}
-
-function getRiskColor(level: string): string {
-  switch (level) {
-    case 'critical': return 'bg-red-100 text-red-700 border-red-200'
-    case 'high': return 'bg-orange-100 text-orange-700 border-orange-200'
-    case 'medium': return 'bg-yellow-100 text-yellow-700 border-yellow-200'
-    case 'low': return 'bg-green-100 text-green-700 border-green-200'
-    default: return 'bg-gray-100 text-gray-700 border-gray-200'
-  }
-}
-
-function getRiskLevel(r: number): string {
-  if (r >= 100) return 'critical'
-  if (r >= 50) return 'high'
-  if (r >= 20) return 'medium'
-  return 'low'
-}
-
-function getRiskLevelLabel(level: string): string {
-  switch (level) {
-    case 'critical': return 'Kritisch'
-    case 'high': return 'Hoch'
-    case 'medium': return 'Mittel'
-    case 'low': return 'Niedrig'
-    default: return level
-  }
-}
-
-function RiskBadge({ level }: { level: string }) {
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${getRiskColor(level)}`}>
-      {getRiskLevelLabel(level)}
-    </span>
-  )
-}
-
-interface HazardFormData {
-  name: string
-  description: string
-  category: string
-  component_id: string
-  severity: number
-  exposure: number
-  probability: number
-}
-
-function HazardForm({
-  onSubmit,
-  onCancel,
-}: {
-  onSubmit: (data: HazardFormData) => void
-  onCancel: () => void
-}) {
-  const [formData, setFormData] = useState<HazardFormData>({
-    name: '',
-    description: '',
-    category: 'mechanical',
-    component_id: '',
-    severity: 3,
-    exposure: 3,
-    probability: 3,
-  })
-
-  const rInherent = formData.severity * formData.exposure * formData.probability
-  const riskLevel = getRiskLevel(rInherent)
-
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Neue Gefaehrdung</h3>
-      <div className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung *</label>
-            <input
-              type="text"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              placeholder="z.B. Quetschung durch Roboterarm"
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 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 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
-          <textarea
-            value={formData.description}
-            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            rows={2}
-            placeholder="Detaillierte Beschreibung der Gefaehrdung..."
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-          />
-        </div>
-
-        {/* S/E/P Sliders */}
-        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
-          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Risikobewertung (S x E x P)</h4>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Schwere (S): <span className="font-bold">{formData.severity}</span>
-              </label>
-              <input
-                type="range"
-                min={1}
-                max={5}
-                value={formData.severity}
-                onChange={(e) => setFormData({ ...formData, severity: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Gering</span>
-                <span>Toedlich</span>
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Exposition (E): <span className="font-bold">{formData.exposure}</span>
-              </label>
-              <input
-                type="range"
-                min={1}
-                max={5}
-                value={formData.exposure}
-                onChange={(e) => setFormData({ ...formData, exposure: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Selten</span>
-                <span>Staendig</span>
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Wahrscheinlichkeit (P): <span className="font-bold">{formData.probability}</span>
-              </label>
-              <input
-                type="range"
-                min={1}
-                max={5}
-                value={formData.probability}
-                onChange={(e) => setFormData({ ...formData, probability: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Unwahrscheinlich</span>
-                <span>Sehr wahrscheinlich</span>
-              </div>
-            </div>
-          </div>
-
-          <div className={`mt-4 p-3 rounded-lg border ${getRiskColor(riskLevel)}`}>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">R_inherent = S x E x P</span>
-              <div className="flex items-center gap-2">
-                <span className="text-lg font-bold">{rInherent}</span>
-                <RiskBadge level={riskLevel} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-4 flex items-center gap-3">
-        <button
-          onClick={() => onSubmit(formData)}
-          disabled={!formData.name}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.name
-              ? 'bg-purple-600 text-white hover:bg-purple-700'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          Hinzufuegen
-        </button>
-        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-          Abbrechen
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function LibraryModal({
-  library,
-  onAdd,
-  onClose,
-}: {
-  library: LibraryHazard[]
-  onAdd: (item: LibraryHazard) => void
-  onClose: () => void
-}) {
-  const [search, setSearch] = useState('')
-  const [filterCat, setFilterCat] = useState('')
-
-  const filtered = library.filter((h) => {
-    const matchSearch = !search || h.name.toLowerCase().includes(search.toLowerCase()) || h.description.toLowerCase().includes(search.toLowerCase())
-    const matchCat = !filterCat || h.category === filterCat
-    return matchSearch && matchCat
-  })
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
-        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Gefaehrdungsbibliothek</h3>
-            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
-              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div className="flex gap-3">
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Suchen..."
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
-            <select
-              value={filterCat}
-              onChange={(e) => setFilterCat(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              <option value="">Alle Kategorien</option>
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-        <div className="flex-1 overflow-auto p-4 space-y-2">
-          {filtered.length > 0 ? (
-            filtered.map((item) => (
-              <div
-                key={item.id}
-                className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750"
-              >
-                <div className="flex-1 min-w-0 mr-3">
-                  <div className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</div>
-                  <div className="text-xs text-gray-500 truncate">{item.description}</div>
-                  <div className="flex items-center gap-2 mt-1">
-                    <span className="text-xs text-gray-400">{CATEGORY_LABELS[item.category] || item.category}</span>
-                    <span className="text-xs text-gray-400">S:{item.default_severity} E:{item.default_exposure} P:{item.default_probability}</span>
-                  </div>
-                </div>
-                <button
-                  onClick={() => onAdd(item)}
-                  className="flex-shrink-0 px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-                >
-                  Hinzufuegen
-                </button>
-              </div>
-            ))
-          ) : (
-            <div className="text-center py-8 text-gray-500">Keine Eintraege gefunden</div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
+import { Hazard, LibraryHazard, HazardFormData } from './_components/types'
+import { HazardForm } from './_components/HazardForm'
+import { LibraryModal } from './_components/LibraryModal'
+import { HazardTable } from './_components/HazardTable'
 
 export default function HazardsPage() {
   const params = useParams()
@@ -390,9 +62,7 @@ export default function HazardsPage() {
           probability: item.default_probability,
         }),
       })
-      if (res.ok) {
-        await fetchHazards()
-      }
+      if (res.ok) await fetchHazards()
     } catch (err) {
       console.error('Failed to add from library:', err)
     }
@@ -421,9 +91,7 @@ export default function HazardsPage() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
       })
-      if (res.ok) {
-        await fetchHazards()
-      }
+      if (res.ok) await fetchHazards()
     } catch (err) {
       console.error('Failed to get AI suggestions:', err)
     } finally {
@@ -435,9 +103,7 @@ export default function HazardsPage() {
     if (!confirm('Gefaehrdung wirklich loeschen?')) return
     try {
       const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${id}`, { method: 'DELETE' })
-      if (res.ok) {
-        await fetchHazards()
-      }
+      if (res.ok) await fetchHazards()
     } catch (err) {
       console.error('Failed to delete hazard:', err)
     }
@@ -523,12 +189,10 @@ export default function HazardsPage() {
         </div>
       )}
 
-      {/* Form */}
       {showForm && (
         <HazardForm onSubmit={handleSubmit} onCancel={() => setShowForm(false)} />
       )}
 
-      {/* Library Modal */}
       {showLibrary && (
         <LibraryModal
           library={library}
@@ -537,62 +201,8 @@ export default function HazardsPage() {
         />
       )}
 
-      {/* Hazard Table */}
       {hazards.length > 0 ? (
-        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">S</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">E</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">P</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">R</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risiko</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-                {hazards
-                  .sort((a, b) => b.r_inherent - a.r_inherent)
-                  .map((hazard) => (
-                    <tr key={hazard.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
-                      <td className="px-4 py-3">
-                        <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
-                        {hazard.description && (
-                          <div className="text-xs text-gray-500 truncate max-w-[250px]">{hazard.description}</div>
-                        )}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{CATEGORY_LABELS[hazard.category] || hazard.category}</td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{hazard.component_name || '--'}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.severity}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.exposure}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.probability}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-bold">{hazard.r_inherent}</td>
-                      <td className="px-4 py-3"><RiskBadge level={hazard.risk_level} /></td>
-                      <td className="px-4 py-3">
-                        <span className="text-xs text-gray-500">{STATUS_LABELS[hazard.status] || hazard.status}</span>
-                      </td>
-                      <td className="px-4 py-3 text-right">
-                        <button
-                          onClick={() => handleDelete(hazard.id)}
-                          className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
-                        >
-                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <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>
-                      </td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <HazardTable hazards={hazards} onDelete={handleDelete} />
       ) : (
         !showForm && (
           <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
@@ -607,16 +217,10 @@ export default function HazardsPage() {
               oder KI-Vorschlaege als Ausgangspunkt.
             </p>
             <div className="mt-6 flex items-center justify-center gap-3">
-              <button
-                onClick={() => setShowForm(true)}
-                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-              >
+              <button onClick={() => setShowForm(true)} className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                 Manuell hinzufuegen
               </button>
-              <button
-                onClick={fetchLibrary}
-                className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-              >
+              <button onClick={fetchLibrary} className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                 Bibliothek oeffnen
               </button>
             </div>