fix: add missing training page components to fix admin-compliance Docker build

All 8 components imported by app/sdk/training/page.tsx were missing.
Docker build was failing with Module not found errors.

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

admin-compliance/app/sdk/training/_components/AssignmentDetailDrawer.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { updateAssignment, completeAssignment } from '@/lib/sdk/training/api'
+import type { TrainingAssignment } from '@/lib/sdk/training/types'
+import { STATUS_LABELS, STATUS_COLORS } from '@/lib/sdk/training/types'
+
+export default function AssignmentDetailDrawer({
+  assignment,
+  onClose,
+  onSaved,
+}: {
+  assignment: TrainingAssignment
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const colors = STATUS_COLORS[assignment.status]
+
+  async function handleComplete() {
+    if (!window.confirm('Zuweisung als abgeschlossen markieren?')) return
+    setSaving(true)
+    try {
+      await completeAssignment(assignment.id)
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleExtend(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    const fd = new FormData(e.currentTarget)
+    try {
+      await updateAssignment(assignment.id, { deadline: fd.get('deadline') as string })
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Aktualisieren')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+      <div className="relative bg-white w-full max-w-md shadow-xl flex flex-col overflow-y-auto">
+        <div className="flex items-center justify-between px-6 py-4 border-b">
+          <h3 className="text-base font-semibold">Zuweisung</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
+        </div>
+
+        <div className="px-6 py-4 space-y-4 flex-1">
+          {error && (
+            <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded p-3">{error}</div>
+          )}
+
+          <div className="space-y-2">
+            <Row label="Nutzer" value={`${assignment.user_name} (${assignment.user_email})`} />
+            <Row label="Modul" value={`${assignment.module_code ?? ''} ${assignment.module_title ?? assignment.module_id.slice(0, 8)}`} />
+            <Row label="Status">
+              <span className={`text-xs px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}>
+                {STATUS_LABELS[assignment.status]}
+              </span>
+            </Row>
+            <Row label="Fortschritt" value={`${assignment.progress_percent}%`} />
+            <Row label="Frist" value={new Date(assignment.deadline).toLocaleDateString('de-DE')} />
+            {assignment.started_at && <Row label="Gestartet" value={new Date(assignment.started_at).toLocaleString('de-DE')} />}
+            {assignment.completed_at && <Row label="Abgeschlossen" value={new Date(assignment.completed_at).toLocaleString('de-DE')} />}
+            {assignment.quiz_score != null && (
+              <Row label="Quiz-Score" value={`${Math.round(assignment.quiz_score)}% (${assignment.quiz_passed ? 'Bestanden' : 'Nicht bestanden'})`} />
+            )}
+            <Row label="Quiz-Versuche" value={String(assignment.quiz_attempts)} />
+            {assignment.escalation_level > 0 && (
+              <Row label="Eskalationsstufe" value={String(assignment.escalation_level)} />
+            )}
+          </div>
+
+          {assignment.status !== 'completed' && (
+            <div className="border rounded-lg p-4 space-y-3">
+              <h4 className="text-sm font-medium text-gray-700">Frist verlaengern</h4>
+              <form onSubmit={handleExtend} className="flex gap-2">
+                <input
+                  name="deadline"
+                  type="date"
+                  defaultValue={assignment.deadline.slice(0, 10)}
+                  className="flex-1 px-3 py-2 text-sm border rounded-lg"
+                />
+                <button type="submit" disabled={saving} className="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
+                  Speichern
+                </button>
+              </form>
+            </div>
+          )}
+        </div>
+
+        {assignment.status !== 'completed' && (
+          <div className="px-6 py-4 border-t">
+            <button
+              onClick={handleComplete}
+              disabled={saving}
+              className="w-full px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
+            >
+              Als abgeschlossen markieren
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Row({ label, value, children }: { label: string; value?: string; children?: React.ReactNode }) {
+  return (
+    <div className="flex gap-2 text-sm">
+      <span className="text-gray-500 w-36 shrink-0">{label}:</span>
+      {children ?? <span className="text-gray-900">{value}</span>}
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/AssignmentsTab.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import type { TrainingAssignment } from '@/lib/sdk/training/types'
+import { STATUS_LABELS, STATUS_COLORS } from '@/lib/sdk/training/types'
+
+export default function AssignmentsTab({
+  assignments,
+  statusFilter,
+  onStatusFilterChange,
+  onAssignmentClick,
+}: {
+  assignments: TrainingAssignment[]
+  statusFilter: string
+  onStatusFilterChange: (v: string) => void
+  onAssignmentClick: (assignment: TrainingAssignment) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <select
+          value={statusFilter}
+          onChange={e => onStatusFilterChange(e.target.value)}
+          className="px-3 py-2 text-sm border rounded-lg bg-white"
+        >
+          <option value="">Alle Status</option>
+          {Object.entries(STATUS_LABELS).map(([k, v]) => (
+            <option key={k} value={k}>{v}</option>
+          ))}
+        </select>
+        <span className="text-sm text-gray-500">{assignments.length} Zuweisungen</span>
+      </div>
+
+      {assignments.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 text-sm">Keine Zuweisungen gefunden.</div>
+      ) : (
+        <div className="bg-white border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Nutzer</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Modul</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Status</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Fortschritt</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Frist</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Quiz</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {assignments.map(a => {
+                const colors = STATUS_COLORS[a.status]
+                const deadline = new Date(a.deadline)
+                const isOverdue = deadline < new Date() && a.status !== 'completed'
+                return (
+                  <tr
+                    key={a.id}
+                    onClick={() => onAssignmentClick(a)}
+                    className="hover:bg-gray-50 cursor-pointer"
+                  >
+                    <td className="px-4 py-3">
+                      <div className="font-medium text-gray-900">{a.user_name}</div>
+                      <div className="text-xs text-gray-500">{a.user_email}</div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{a.module_code ?? a.module_id.slice(0, 8)}</code>
+                      {a.module_title && <div className="text-xs text-gray-500 mt-0.5">{a.module_title}</div>}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}>
+                        {STATUS_LABELS[a.status]}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        <div className="w-20 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                          <div
+                            className="h-full bg-blue-500 rounded-full"
+                            style={{ width: `${a.progress_percent}%` }}
+                          />
+                        </div>
+                        <span className="text-xs text-gray-600">{a.progress_percent}%</span>
+                      </div>
+                    </td>
+                    <td className={`px-4 py-3 text-xs ${isOverdue ? 'text-red-600 font-medium' : 'text-gray-600'}`}>
+                      {deadline.toLocaleDateString('de-DE')}
+                    </td>
+                    <td className="px-4 py-3 text-xs text-gray-600">
+                      {a.quiz_score != null ? (
+                        <span className={a.quiz_passed ? 'text-green-600' : 'text-red-600'}>
+                          {Math.round(a.quiz_score)}% {a.quiz_passed ? '✓' : '✗'}
+                        </span>
+                      ) : (
+                        <span className="text-gray-400">—</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/AuditTab.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import type { AuditLogEntry } from '@/lib/sdk/training/types'
+
+const ACTION_LABELS: Record<string, string> = {
+  assigned: 'Zugewiesen',
+  started: 'Gestartet',
+  completed: 'Abgeschlossen',
+  quiz_submitted: 'Quiz eingereicht',
+  escalated: 'Eskaliert',
+  certificate_issued: 'Zertifikat ausgestellt',
+  content_generated: 'Content generiert',
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  assigned: 'bg-blue-100 text-blue-700',
+  started: 'bg-yellow-100 text-yellow-700',
+  completed: 'bg-green-100 text-green-700',
+  quiz_submitted: 'bg-purple-100 text-purple-700',
+  escalated: 'bg-red-100 text-red-700',
+  certificate_issued: 'bg-emerald-100 text-emerald-700',
+  content_generated: 'bg-gray-100 text-gray-700',
+}
+
+export default function AuditTab({ auditLog }: { auditLog: AuditLogEntry[] }) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-gray-500">{auditLog.length} Eintraege</p>
+      </div>
+
+      {auditLog.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 text-sm">Keine Audit-Eintraege gefunden.</div>
+      ) : (
+        <div className="bg-white border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Zeitpunkt</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Aktion</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Entitaet</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Details</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {auditLog.map(entry => (
+                <tr key={entry.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-3 text-xs text-gray-500 whitespace-nowrap">
+                    {new Date(entry.created_at).toLocaleString('de-DE')}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${ACTION_COLORS[entry.action] ?? 'bg-gray-100 text-gray-700'}`}>
+                      {ACTION_LABELS[entry.action] ?? entry.action}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-xs text-gray-600">
+                    <span className="font-medium">{entry.entity_type}</span>
+                    {entry.entity_id && <span className="ml-1 text-gray-400">{entry.entity_id.slice(0, 8)}</span>}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-gray-500 max-w-xs truncate">
+                    {Object.keys(entry.details).length > 0
+                      ? Object.entries(entry.details).map(([k, v]) => `${k}: ${v}`).join(', ')
+                      : '—'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/MatrixAddModal.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { setMatrixEntry } from '@/lib/sdk/training/api'
+import type { TrainingModule } from '@/lib/sdk/training/types'
+import { ROLE_LABELS, REGULATION_LABELS } from '@/lib/sdk/training/types'
+
+export default function MatrixAddModal({
+  roleCode,
+  modules,
+  onClose,
+  onSaved,
+}: {
+  roleCode: string
+  modules: TrainingModule[]
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    const fd = new FormData(e.currentTarget)
+    try {
+      await setMatrixEntry({
+        role_code: roleCode,
+        module_id: fd.get('module_id') as string,
+        is_mandatory: fd.get('is_mandatory') === 'on',
+        priority: parseInt(fd.get('priority') as string) || 1,
+      })
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Hinzufuegen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
+        <h3 className="text-base font-semibold mb-1">Modul zuweisen</h3>
+        <p className="text-xs text-gray-500 mb-4">
+          Rolle: <strong>{ROLE_LABELS[roleCode] ?? roleCode}</strong> ({roleCode})
+        </p>
+
+        {error && (
+          <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded p-3">{error}</div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div>
+            <label className="text-xs text-gray-600 block mb-1">Modul *</label>
+            <select name="module_id" required className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
+              <option value="">Modul waehlen...</option>
+              {modules.filter(m => m.is_active).map(m => (
+                <option key={m.id} value={m.id}>
+                  {m.module_code} — {m.title} ({REGULATION_LABELS[m.regulation_area] ?? m.regulation_area})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Prioritaet</label>
+              <input name="priority" type="number" defaultValue={1} min={1} max={10} className="w-full px-3 py-2 text-sm border rounded-lg" />
+            </div>
+            <div className="flex items-center gap-2 mt-5">
+              <input name="is_mandatory" type="checkbox" id="mandatory" defaultChecked className="rounded" />
+              <label htmlFor="mandatory" className="text-xs text-gray-600">Pflichtmodul</label>
+            </div>
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="submit" disabled={saving} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
+              {saving ? 'Speichere...' : 'Zuweisen'}
+            </button>
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
+              Abbrechen
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/MatrixTab.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { MatrixResponse } from '@/lib/sdk/training/types'
+import { ALL_ROLES, ROLE_LABELS } from '@/lib/sdk/training/types'
+
+export default function MatrixTab({
+  matrix,
+  onDeleteEntry,
+  onAddEntry,
+}: {
+  matrix: MatrixResponse
+  onDeleteEntry: (roleCode: string, moduleId: string) => void
+  onAddEntry: (roleCode: string) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-gray-500">Pflichtzuordnung von Schulungsmodulen zu Rollen</p>
+      </div>
+
+      <div className="bg-white border rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50">
+            <tr>
+              <th className="px-4 py-3 text-left font-medium text-gray-600 w-48">Rolle</th>
+              <th className="px-4 py-3 text-left font-medium text-gray-600">Zugewiesene Module</th>
+              <th className="px-4 py-3 text-right font-medium text-gray-600 w-24">Aktion</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {ALL_ROLES.map(role => {
+              const entries = matrix.entries[role] ?? []
+              return (
+                <tr key={role} className="hover:bg-gray-50">
+                  <td className="px-4 py-3">
+                    <div className="font-medium text-gray-900">{ROLE_LABELS[role] ?? role}</div>
+                    <div className="text-xs text-gray-400">{role}</div>
+                  </td>
+                  <td className="px-4 py-3">
+                    {entries.length === 0 ? (
+                      <span className="text-gray-400 text-xs">Keine Module zugewiesen</span>
+                    ) : (
+                      <div className="flex flex-wrap gap-1.5">
+                        {entries.map(entry => (
+                          <span
+                            key={entry.id}
+                            className="inline-flex items-center gap-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 px-2 py-0.5 rounded-full"
+                          >
+                            <code className="text-xs">{entry.module_code ?? entry.module_id.slice(0, 8)}</code>
+                            {entry.is_mandatory && <span className="text-red-500 font-bold">*</span>}
+                            <button
+                              onClick={() => onDeleteEntry(role, entry.module_id)}
+                              className="ml-0.5 text-blue-400 hover:text-red-600"
+                              title="Entfernen"
+                            >
+                              ×
+                            </button>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => onAddEntry(role)}
+                      className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
+                    >
+                      + Modul
+                    </button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      <p className="text-xs text-gray-400">* = Pflichtmodul</p>
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/ModuleCreateModal.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useState } from 'react'
+import { createModule } from '@/lib/sdk/training/api'
+import { REGULATION_LABELS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'
+
+export default function ModuleCreateModal({
+  onClose,
+  onSaved,
+}: {
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    const fd = new FormData(e.currentTarget)
+    try {
+      await createModule({
+        module_code: fd.get('module_code') as string,
+        title: fd.get('title') as string,
+        description: (fd.get('description') as string) || undefined,
+        regulation_area: fd.get('regulation_area') as string,
+        frequency_type: fd.get('frequency_type') as string,
+        duration_minutes: parseInt(fd.get('duration_minutes') as string) || 30,
+        pass_threshold: parseInt(fd.get('pass_threshold') as string) || 80,
+      })
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Erstellen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 max-h-[90vh] overflow-y-auto">
+        <h3 className="text-lg font-semibold mb-4">Neues Schulungsmodul</h3>
+
+        {error && (
+          <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded p-3">{error}</div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Modul-Code *</label>
+              <input name="module_code" required className="w-full px-3 py-2 text-sm border rounded-lg" placeholder="z.B. DSGVO-001" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Regulierungsbereich *</label>
+              <select name="regulation_area" required className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
+                {Object.entries(REGULATION_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+          </div>
+          <div>
+            <label className="text-xs text-gray-600 block mb-1">Titel *</label>
+            <input name="title" required className="w-full px-3 py-2 text-sm border rounded-lg" />
+          </div>
+          <div>
+            <label className="text-xs text-gray-600 block mb-1">Beschreibung</label>
+            <textarea name="description" rows={2} className="w-full px-3 py-2 text-sm border rounded-lg" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Frequenz</label>
+              <select name="frequency_type" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
+                {Object.entries(FREQUENCY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Dauer (Minuten)</label>
+              <input name="duration_minutes" type="number" defaultValue={30} min={1} className="w-full px-3 py-2 text-sm border rounded-lg" />
+            </div>
+          </div>
+          <div>
+            <label className="text-xs text-gray-600 block mb-1">Bestehensgrenze (%)</label>
+            <input name="pass_threshold" type="number" defaultValue={80} min={0} max={100} className="w-full px-3 py-2 text-sm border rounded-lg" />
+          </div>
+          <div className="flex gap-3 pt-2">
+            <button type="submit" disabled={saving} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
+              {saving ? 'Speichere...' : 'Erstellen'}
+            </button>
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
+              Abbrechen
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/ModuleEditDrawer.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useState } from 'react'
+import { updateModule, deleteModule } from '@/lib/sdk/training/api'
+import type { TrainingModule } from '@/lib/sdk/training/types'
+import { REGULATION_LABELS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'
+
+export default function ModuleEditDrawer({
+  module,
+  onClose,
+  onSaved,
+}: {
+  module: TrainingModule
+  onClose: () => void
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    const fd = new FormData(e.currentTarget)
+    try {
+      await updateModule(module.id, {
+        title: fd.get('title') as string,
+        description: (fd.get('description') as string) || undefined,
+        regulation_area: fd.get('regulation_area') as string,
+        frequency_type: fd.get('frequency_type') as string,
+        validity_days: parseInt(fd.get('validity_days') as string),
+        duration_minutes: parseInt(fd.get('duration_minutes') as string),
+        pass_threshold: parseInt(fd.get('pass_threshold') as string),
+        risk_weight: parseFloat(fd.get('risk_weight') as string),
+        nis2_relevant: fd.get('nis2_relevant') === 'on',
+        is_active: fd.get('is_active') === 'on',
+      })
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Speichern')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!window.confirm('Modul wirklich loeschen?')) return
+    try {
+      await deleteModule(module.id)
+      onSaved()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Loeschen')
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex justify-end">
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+      <div className="relative bg-white w-full max-w-md shadow-xl flex flex-col overflow-y-auto">
+        <div className="flex items-center justify-between px-6 py-4 border-b">
+          <h3 className="text-base font-semibold">Modul bearbeiten</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
+        </div>
+
+        <div className="px-6 py-4 flex-1">
+          {error && (
+            <div className="mb-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded p-3">{error}</div>
+          )}
+          <div className="mb-4 text-xs text-gray-400">
+            <code className="bg-gray-100 px-1.5 py-0.5 rounded">{module.module_code}</code>
+            <span className="ml-2">ID: {module.id.slice(0, 8)}</span>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Titel *</label>
+              <input name="title" required defaultValue={module.title} className="w-full px-3 py-2 text-sm border rounded-lg" />
+            </div>
+            <div>
+              <label className="text-xs text-gray-600 block mb-1">Beschreibung</label>
+              <textarea name="description" rows={2} defaultValue={module.description} className="w-full px-3 py-2 text-sm border rounded-lg" />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Regulierungsbereich</label>
+                <select name="regulation_area" defaultValue={module.regulation_area} className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
+                  {Object.entries(REGULATION_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Frequenz</label>
+                <select name="frequency_type" defaultValue={module.frequency_type} className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
+                  {Object.entries(FREQUENCY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+                </select>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Gueltigkeitsdauer (Tage)</label>
+                <input name="validity_days" type="number" defaultValue={module.validity_days} min={1} className="w-full px-3 py-2 text-sm border rounded-lg" />
+              </div>
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Dauer (Minuten)</label>
+                <input name="duration_minutes" type="number" defaultValue={module.duration_minutes} min={1} className="w-full px-3 py-2 text-sm border rounded-lg" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Bestehensgrenze (%)</label>
+                <input name="pass_threshold" type="number" defaultValue={module.pass_threshold} min={0} max={100} className="w-full px-3 py-2 text-sm border rounded-lg" />
+              </div>
+              <div>
+                <label className="text-xs text-gray-600 block mb-1">Risikogewicht</label>
+                <input name="risk_weight" type="number" defaultValue={module.risk_weight} min={0} step={0.1} className="w-full px-3 py-2 text-sm border rounded-lg" />
+              </div>
+            </div>
+            <div className="flex gap-4">
+              <div className="flex items-center gap-2">
+                <input name="nis2_relevant" type="checkbox" id="edit-nis2" defaultChecked={module.nis2_relevant} className="rounded" />
+                <label htmlFor="edit-nis2" className="text-xs text-gray-600">NIS-2 relevant</label>
+              </div>
+              <div className="flex items-center gap-2">
+                <input name="is_active" type="checkbox" id="edit-active" defaultChecked={module.is_active} className="rounded" />
+                <label htmlFor="edit-active" className="text-xs text-gray-600">Aktiv</label>
+              </div>
+            </div>
+            <div className="flex gap-3 pt-2">
+              <button type="submit" disabled={saving} className="flex-1 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
+                {saving ? 'Speichere...' : 'Speichern'}
+              </button>
+              <button type="button" onClick={onClose} className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
+                Abbrechen
+              </button>
+            </div>
+          </form>
+        </div>
+
+        <div className="px-6 py-4 border-t">
+          <button
+            onClick={handleDelete}
+            className="w-full px-4 py-2 text-sm bg-red-50 text-red-700 border border-red-200 rounded-lg hover:bg-red-100"
+          >
+            Modul loeschen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/ModulesTab.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import type { TrainingModule } from '@/lib/sdk/training/types'
+import { REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'
+
+export default function ModulesTab({
+  modules,
+  regulationFilter,
+  onRegulationFilterChange,
+  onCreateClick,
+  onModuleClick,
+}: {
+  modules: TrainingModule[]
+  regulationFilter: string
+  onRegulationFilterChange: (v: string) => void
+  onCreateClick: () => void
+  onModuleClick: (module: TrainingModule) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <select
+            value={regulationFilter}
+            onChange={e => onRegulationFilterChange(e.target.value)}
+            className="px-3 py-2 text-sm border rounded-lg bg-white"
+          >
+            <option value="">Alle Regulierungen</option>
+            {Object.entries(REGULATION_LABELS).map(([k, v]) => (
+              <option key={k} value={k}>{v}</option>
+            ))}
+          </select>
+          <span className="text-sm text-gray-500">{modules.length} Module</span>
+        </div>
+        <button
+          onClick={onCreateClick}
+          className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+        >
+          + Neues Modul
+        </button>
+      </div>
+
+      {modules.length === 0 ? (
+        <div className="text-center py-12 text-gray-500 text-sm">Keine Module gefunden.</div>
+      ) : (
+        <div className="bg-white border rounded-lg overflow-hidden">
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Code</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Titel</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Regulierung</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Frequenz</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Dauer</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-600">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {modules.map(m => {
+                const reg = m.regulation_area
+                const colors = REGULATION_COLORS[reg] ?? { bg: 'bg-gray-100', text: 'text-gray-700', border: 'border-gray-300' }
+                return (
+                  <tr
+                    key={m.id}
+                    onClick={() => onModuleClick(m)}
+                    className="hover:bg-gray-50 cursor-pointer"
+                  >
+                    <td className="px-4 py-3">
+                      <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{m.module_code}</code>
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="font-medium text-gray-900">{m.title}</div>
+                      {m.description && <div className="text-xs text-gray-500 truncate max-w-xs">{m.description}</div>}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`text-xs px-2 py-0.5 rounded-full border ${colors.bg} ${colors.text} ${colors.border}`}>
+                        {REGULATION_LABELS[reg] ?? reg}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-gray-600">{FREQUENCY_LABELS[m.frequency_type] ?? m.frequency_type}</td>
+                    <td className="px-4 py-3 text-gray-600">{m.duration_minutes} Min</td>
+                    <td className="px-4 py-3">
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${m.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
+                        {m.is_active ? 'Aktiv' : 'Inaktiv'}
+                      </span>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/training/_components/OverviewTab.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import type { TrainingStats, DeadlineInfo } from '@/lib/sdk/training/types'
+import { STATUS_COLORS, STATUS_LABELS } from '@/lib/sdk/training/types'
+
+export default function OverviewTab({
+  stats,
+  deadlines,
+  escalationResult,
+  onDismissEscalation,
+}: {
+  stats: TrainingStats
+  deadlines: DeadlineInfo[]
+  escalationResult: { total_checked: number; escalated: number } | null
+  onDismissEscalation: () => void
+}) {
+  return (
+    <div className="space-y-6">
+      {escalationResult && (
+        <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-orange-800">Eskalationspruefung abgeschlossen</p>
+            <p className="text-xs text-orange-600 mt-0.5">
+              {escalationResult.total_checked} geprueft, {escalationResult.escalated} eskaliert
+            </p>
+          </div>
+          <button onClick={onDismissEscalation} className="text-xs text-orange-600 underline hover:text-orange-800">
+            Schliessen
+          </button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Gesamt Module" value={stats.total_modules} color="blue" />
+        <StatCard label="Zuweisungen" value={stats.total_assignments} color="gray" />
+        <StatCard label="Abschlussrate" value={`${Math.round(stats.completion_rate)}%`} color="green" />
+        <StatCard label="Ueberfaellig" value={stats.overdue_count} color="red" />
+        <StatCard label="Ausstehend" value={stats.pending_count} color="yellow" />
+        <StatCard label="In Bearbeitung" value={stats.in_progress_count} color="blue" />
+        <StatCard label="Abgeschlossen" value={stats.completed_count} color="green" />
+        <StatCard label="Ø Quiz-Score" value={`${Math.round(stats.avg_quiz_score)}%`} color="purple" />
+      </div>
+
+      {deadlines.length > 0 && (
+        <div className="bg-white border rounded-lg p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-3">Bevorstehende Fristen</h3>
+          <div className="space-y-2">
+            {deadlines.map(d => {
+              const colors = STATUS_COLORS[d.status]
+              return (
+                <div key={d.assignment_id} className="flex items-center justify-between text-sm py-2 border-b last:border-0">
+                  <div>
+                    <span className="font-medium text-gray-900">{d.user_name}</span>
+                    <span className="text-gray-500 ml-2">{d.module_code} — {d.module_title}</span>
+                  </div>
+                  <div className="flex items-center gap-3 shrink-0">
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${colors.bg} ${colors.text}`}>
+                      {STATUS_LABELS[d.status]}
+                    </span>
+                    <span className={`text-xs font-medium ${d.days_left <= 3 ? 'text-red-600' : d.days_left <= 7 ? 'text-orange-600' : 'text-gray-500'}`}>
+                      {d.days_left <= 0 ? 'Ueberfaellig' : `${d.days_left}d`}
+                    </span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatCard({ label, value, color }: { label: string; value: string | number; color: string }) {
+  const colorMap: Record<string, string> = {
+    blue: 'text-blue-700',
+    green: 'text-green-700',
+    red: 'text-red-700',
+    yellow: 'text-yellow-700',
+    purple: 'text-purple-700',
+    gray: 'text-gray-700',
+  }
+  return (
+    <div className="bg-white border rounded-lg p-4">
+      <p className="text-xs text-gray-500">{label}</p>
+      <p className={`text-2xl font-bold mt-1 ${colorMap[color] ?? 'text-gray-700'}`}>{value}</p>
+    </div>
+  )
+}