refactor(admin): split dsfa/[id] and notfallplan page.tsx into colocated components

dsfa/[id]/page.tsx (1893 LOC -> 350 LOC) split into 9 components:
Section1-5Editor, SDMCoverageOverview, RAGSearchPanel, AddRiskModal,
AddMitigationModal. Page is now a thin orchestrator.

notfallplan/page.tsx (1890 LOC -> 435 LOC) split into 8 modules:
types.ts, ConfigTab, IncidentsTab, TemplatesTab, ExercisesTab, Modals,
ApiSections. All under the 500-line hard cap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import React from 'react'
+import type { ApiContact, ApiScenario, ApiExercise } from './types'
+
+export function ApiContactsSection({ apiContacts, apiLoading, onAdd, onDelete }: {
+  apiContacts: ApiContact[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-base font-semibold">Notfallkontakte (Datenbank)</h3>
+          <p className="text-sm text-gray-500">Zentral gespeicherte Kontakte fuer den Notfall</p>
+        </div>
+        <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+          + Kontakt hinzufuegen
+        </button>
+      </div>
+      {apiLoading ? (
+        <div className="text-sm text-gray-500 py-4 text-center">Lade Kontakte...</div>
+      ) : apiContacts.length === 0 ? (
+        <div className="text-sm text-gray-400 py-4 text-center">Noch keine Kontakte hinterlegt</div>
+      ) : (
+        <div className="space-y-2">
+          {apiContacts.map(contact => (
+            <div key={contact.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div className="flex items-center gap-3">
+                {contact.is_primary && <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">Primaer</span>}
+                {contact.available_24h && <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">24/7</span>}
+                <div>
+                  <span className="font-medium text-sm">{contact.name}</span>
+                  {contact.role && <span className="text-gray-500 text-sm ml-2">({contact.role})</span>}
+                  <div className="text-xs text-gray-400">{contact.email} {contact.phone && `| ${contact.phone}`}</div>
+                </div>
+              </div>
+              <button onClick={() => onDelete(contact.id)} className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">
+                Loeschen
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ApiScenariosSection({ apiScenarios, apiLoading, onAdd, onDelete }: {
+  apiScenarios: ApiScenario[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-base font-semibold">Notfallszenarien (Datenbank)</h3>
+          <p className="text-sm text-gray-500">Definierte Szenarien und Reaktionsplaene</p>
+        </div>
+        <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+          + Szenario hinzufuegen
+        </button>
+      </div>
+      {apiLoading ? (
+        <div className="text-sm text-gray-500 py-4 text-center">Lade Szenarien...</div>
+      ) : apiScenarios.length === 0 ? (
+        <div className="text-sm text-gray-400 py-4 text-center">Noch keine Szenarien definiert</div>
+      ) : (
+        <div className="space-y-2">
+          {apiScenarios.map(scenario => (
+            <div key={scenario.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div>
+                <span className="font-medium text-sm">{scenario.title}</span>
+                <div className="flex items-center gap-2 mt-1">
+                  {scenario.category && <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{scenario.category}</span>}
+                  <span className={`text-xs px-2 py-0.5 rounded ${
+                    scenario.severity === 'critical' ? 'bg-red-100 text-red-700' :
+                    scenario.severity === 'high' ? 'bg-orange-100 text-orange-700' :
+                    scenario.severity === 'medium' ? 'bg-yellow-100 text-yellow-700' :
+                    'bg-green-100 text-green-700'
+                  }`}>{scenario.severity}</span>
+                </div>
+                {scenario.description && <p className="text-xs text-gray-500 mt-1 truncate max-w-lg">{scenario.description}</p>}
+              </div>
+              <button onClick={() => onDelete(scenario.id)} className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">
+                Loeschen
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ApiExercisesSection({ apiExercises, apiLoading, onAdd, onDelete }: {
+  apiExercises: ApiExercise[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold">Uebungen (Datenbank)</h3>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-gray-500">{apiExercises.length} Eintraege</span>
+          <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
+            + Neue Uebung
+          </button>
+        </div>
+      </div>
+      {apiExercises.length === 0 ? (
+        <div className="text-sm text-gray-400 py-2 text-center">Noch keine Uebungen in der Datenbank</div>
+      ) : (
+        <div className="space-y-2">
+          {apiExercises.map(ex => (
+            <div key={ex.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div>
+                <span className="font-medium text-sm">{ex.title}</span>
+                <div className="flex items-center gap-2 mt-1">
+                  <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{ex.exercise_type}</span>
+                  {ex.exercise_date && <span className="text-xs text-gray-400">{new Date(ex.exercise_date).toLocaleDateString('de-DE')}</span>}
+                  {ex.outcome && <span className={`text-xs px-2 py-0.5 rounded ${ex.outcome === 'passed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{ex.outcome}</span>}
+                </div>
+              </div>
+              <button
+                onClick={() => { if (window.confirm(`Uebung "${ex.title}" loeschen?`)) onDelete(ex.id) }}
+                className="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                title="Loeschen"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import React from 'react'
+import type { NotfallplanConfig } from './types'
+
+export function ConfigTab({
+  config,
+  setConfig,
+}: {
+  config: NotfallplanConfig
+  setConfig: React.Dispatch<React.SetStateAction<NotfallplanConfig>>
+}) {
+  return (
+    <div className="space-y-8">
+      {/* Meldewege */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Meldewege (intern → Aufsichtsbehoerde)</h3>
+        <p className="text-sm text-gray-500 mb-4">
+          Definieren Sie die interne Eskalationskette bei einer Datenpanne.
+        </p>
+        <div className="space-y-3">
+          {config.meldewege.map((step, idx) => (
+            <div key={step.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center text-sm font-bold">
+                {step.order}
+              </span>
+              <div className="flex-1 grid grid-cols-3 gap-2">
+                <input
+                  type="text"
+                  value={step.role}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], role: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Rolle"
+                  className="text-sm border rounded px-2 py-1"
+                />
+                <input
+                  type="text"
+                  value={step.name}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], name: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Name"
+                  className="text-sm border rounded px-2 py-1"
+                />
+                <input
+                  type="text"
+                  value={step.action}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], action: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Aktion"
+                  className="text-sm border rounded px-2 py-1"
+                />
+              </div>
+              <div className="flex-shrink-0 text-xs text-gray-500">
+                max. {step.maxHours}h
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Zustaendigkeiten */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Zustaendigkeiten</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left py-2 pr-4">Rolle</th>
+                <th className="text-left py-2 pr-4">Name</th>
+                <th className="text-left py-2 pr-4">E-Mail</th>
+                <th className="text-left py-2">Telefon</th>
+              </tr>
+            </thead>
+            <tbody>
+              {config.zustaendigkeiten.map((z, idx) => (
+                <tr key={z.id} className="border-b last:border-0">
+                  <td className="py-2 pr-4 font-medium">{z.role}</td>
+                  <td className="py-2 pr-4">
+                    <input
+                      type="text"
+                      value={z.name}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], name: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="Name eingeben"
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                  <td className="py-2 pr-4">
+                    <input
+                      type="email"
+                      value={z.email}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], email: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="email@example.com"
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                  <td className="py-2">
+                    <input
+                      type="tel"
+                      value={z.phone}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], phone: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="+49..."
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Aufsichtsbehoerde */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Zustaendige Aufsichtsbehoerde</h3>
+        <div className="grid grid-cols-2 gap-4">
+          {(['name', 'state', 'email', 'phone'] as const).map(field => (
+            <div key={field}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {field === 'name' ? 'Name' : field === 'state' ? 'Bundesland' : field === 'email' ? 'E-Mail' : 'Telefon'}
+              </label>
+              <input
+                type={field === 'email' ? 'email' : field === 'phone' ? 'tel' : 'text'}
+                value={config.aufsichtsbehoerde[field]}
+                onChange={e => setConfig(prev => ({
+                  ...prev,
+                  aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, [field]: e.target.value },
+                }))}
+                placeholder={field === 'name' ? 'z.B. LfD Niedersachsen' :
+                  field === 'state' ? 'z.B. Niedersachsen' :
+                  field === 'email' ? 'poststelle@lfd.niedersachsen.de' : '+49...'}
+                className="w-full text-sm border rounded px-3 py-2"
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Eskalationsstufen */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Eskalationsstufen</h3>
+        <div className="space-y-4">
+          {config.eskalationsstufen.map((stufe) => (
+            <div key={stufe.id} className="p-4 bg-gray-50 rounded-lg">
+              <div className="flex items-center gap-3 mb-2">
+                <span className={`px-2 py-1 rounded text-xs font-bold ${
+                  stufe.level === 1 ? 'bg-yellow-100 text-yellow-800' :
+                  stufe.level === 2 ? 'bg-orange-100 text-orange-800' :
+                  'bg-red-100 text-red-800'
+                }`}>
+                  Stufe {stufe.level}
+                </span>
+                <span className="font-medium">{stufe.label}</span>
+              </div>
+              <p className="text-sm text-gray-600 mb-2">Ausloeser: {stufe.triggerCondition}</p>
+              <ul className="list-disc list-inside text-sm text-gray-700">
+                {stufe.actions.map((action, i) => (
+                  <li key={i}>{action}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Sofortmassnahmen-Checkliste */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Sofortmassnahmen-Checkliste</h3>
+        <p className="text-sm text-gray-500 mb-4">
+          Diese Massnahmen sind sofort bei Entdeckung einer Datenpanne durchzufuehren.
+        </p>
+        <ul className="space-y-2">
+          {config.sofortmassnahmen.map((m, idx) => (
+            <li key={idx} className="flex items-start gap-3 p-2">
+              <span className="flex-shrink-0 w-6 h-6 rounded border-2 border-gray-300 mt-0.5" />
+              <span className="text-sm">{m}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/ExercisesTab.tsx

@@ -0,0 +1,207 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { Exercise } from './types'
+
+const SCENARIO_PRESETS = [
+  { label: 'Ransomware-Angriff', scenario: 'Ein Ransomware-Angriff verschluesselt saemtliche Produktivdaten. Backups sind vorhanden, aber der letzte Restore-Test liegt 6 Monate zurueck.' },
+  { label: 'Datenabfluss durch Mitarbeiter', scenario: 'Ein ausscheidender Mitarbeiter hat vor seinem letzten Arbeitstag umfangreiche Kundendaten auf einen privaten USB-Stick kopiert.' },
+  { label: 'Cloud-Provider-Ausfall', scenario: 'Ihr primaerer Cloud-Provider meldet einen groesseren Ausfall. Die Wiederherstellungszeit ist unbekannt. Betroffene koennen keine DSGVO-Rechte ausueben.' },
+  { label: 'Phishing-Angriff', scenario: 'Mehrere Mitarbeiter haben auf einen Phishing-Link geklickt. Es besteht Verdacht, dass Anmeldedaten kompromittiert wurden und auf Personaldaten zugegriffen wurde.' },
+]
+
+export function ExercisesTab({
+  exercises,
+  setExercises,
+  showAdd,
+  setShowAdd,
+}: {
+  exercises: Exercise[]
+  setExercises: React.Dispatch<React.SetStateAction<Exercise[]>>
+  showAdd: boolean
+  setShowAdd: (v: boolean) => void
+}) {
+  const [newExercise, setNewExercise] = useState<Partial<Exercise>>({
+    title: '',
+    type: 'tabletop',
+    scenario: '',
+    scheduledDate: '',
+    participants: [],
+    lessonsLearned: '',
+  })
+
+  function addExercise() {
+    if (!newExercise.title || !newExercise.scheduledDate) return
+    const exercise: Exercise = {
+      id: `EX-${Date.now()}`,
+      title: newExercise.title || '',
+      type: (newExercise.type as Exercise['type']) || 'tabletop',
+      scenario: newExercise.scenario || '',
+      scheduledDate: newExercise.scheduledDate || '',
+      participants: newExercise.participants || [],
+      lessonsLearned: '',
+    }
+    setExercises(prev => [...prev, exercise])
+    setShowAdd(false)
+    setNewExercise({ title: '', type: 'tabletop', scenario: '', scheduledDate: '', participants: [], lessonsLearned: '' })
+  }
+
+  function completeExercise(id: string, lessonsLearned: string) {
+    setExercises(prev => prev.map(ex =>
+      ex.id === id
+        ? { ...ex, completedDate: new Date().toISOString(), lessonsLearned }
+        : ex
+    ))
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">Notfalluebungen & Tests</h3>
+          <p className="text-sm text-gray-500">Planen und dokumentieren Sie regelmaessige Notfalluebungen.</p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
+        >
+          + Uebung planen
+        </button>
+      </div>
+
+      {/* Add Exercise Form */}
+      {showAdd && (
+        <div className="bg-white rounded-lg border p-6 space-y-4">
+          <h4 className="font-medium">Neue Uebung planen</h4>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
+              <input
+                type="text"
+                value={newExercise.title}
+                onChange={e => setNewExercise(prev => ({ ...prev, title: e.target.value }))}
+                placeholder="z.B. Tabletop: Ransomware-Angriff"
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+              <select
+                value={newExercise.type}
+                onChange={e => setNewExercise(prev => ({ ...prev, type: e.target.value as Exercise['type'] }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              >
+                <option value="tabletop">Tabletop-Uebung</option>
+                <option value="simulation">Simulation</option>
+                <option value="full_drill">Vollstaendige Uebung</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Geplantes Datum</label>
+              <input
+                type="date"
+                value={newExercise.scheduledDate}
+                onChange={e => setNewExercise(prev => ({ ...prev, scheduledDate: e.target.value }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Szenario
+                <span className="text-gray-400 font-normal ml-2">oder Vorlage waehlen:</span>
+              </label>
+              <div className="flex flex-wrap gap-2 mb-2">
+                {SCENARIO_PRESETS.map(preset => (
+                  <button
+                    key={preset.label}
+                    onClick={() => setNewExercise(prev => ({
+                      ...prev,
+                      scenario: preset.scenario,
+                      title: prev.title || `Tabletop: ${preset.label}`,
+                    }))}
+                    className="text-xs px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200"
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+              <textarea
+                value={newExercise.scenario}
+                onChange={e => setNewExercise(prev => ({ ...prev, scenario: e.target.value }))}
+                placeholder="Beschreiben Sie das Uebungsszenario..."
+                rows={3}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
+              Abbrechen
+            </button>
+            <button
+              onClick={addExercise}
+              disabled={!newExercise.title || !newExercise.scheduledDate}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+            >
+              Uebung planen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Exercises List */}
+      {exercises.length === 0 ? (
+        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
+          <p className="text-lg mb-2">Keine Uebungen geplant</p>
+          <p className="text-sm">Regelmaessige Notfalluebungen sind essentiell fuer ein funktionierendes Datenpannen-Management.</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {exercises.map(exercise => (
+            <div key={exercise.id} className="bg-white rounded-lg border p-6">
+              <div className="flex items-center gap-2 mb-2">
+                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                  exercise.completedDate ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {exercise.completedDate ? 'Abgeschlossen' : 'Geplant'}
+                </span>
+                <span className="text-xs text-gray-500 capitalize">
+                  {exercise.type === 'tabletop' ? 'Tabletop' : exercise.type === 'simulation' ? 'Simulation' : 'Vollstaendige Uebung'}
+                </span>
+              </div>
+              <h4 className="font-medium mb-1">{exercise.title}</h4>
+              <p className="text-sm text-gray-600 mb-2">{exercise.scenario}</p>
+              <div className="flex items-center gap-4 text-xs text-gray-500">
+                <span>Geplant: {new Date(exercise.scheduledDate).toLocaleDateString('de-DE')}</span>
+                {exercise.completedDate && (
+                  <span>Durchgefuehrt: {new Date(exercise.completedDate).toLocaleDateString('de-DE')}</span>
+                )}
+              </div>
+              {exercise.lessonsLearned && (
+                <div className="mt-3 p-3 bg-blue-50 rounded text-sm">
+                  <span className="font-medium text-blue-800">Lessons Learned:</span>
+                  <p className="text-blue-700 mt-1">{exercise.lessonsLearned}</p>
+                </div>
+              )}
+              {!exercise.completedDate && (
+                <div className="mt-3">
+                  <button
+                    onClick={() => {
+                      const lessons = prompt('Lessons Learned aus der Uebung:')
+                      if (lessons !== null) {
+                        completeExercise(exercise.id, lessons)
+                      }
+                    }}
+                    className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200"
+                  >
+                    Als durchgefuehrt markieren
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/IncidentsTab.tsx

@@ -0,0 +1,292 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import type { Incident, IncidentStatus, IncidentSeverity } from './types'
+import {
+  INCIDENT_STATUS_LABELS,
+  INCIDENT_STATUS_COLORS,
+  SEVERITY_LABELS,
+  SEVERITY_COLORS,
+} from './types'
+
+function CountdownTimer({ detectedAt }: { detectedAt: string }) {
+  const [remaining, setRemaining] = useState('')
+  const [overdue, setOverdue] = useState(false)
+
+  useEffect(() => {
+    function update() {
+      const detected = new Date(detectedAt).getTime()
+      const deadline = detected + 72 * 60 * 60 * 1000
+      const now = Date.now()
+      const diff = deadline - now
+
+      if (diff <= 0) {
+        const overdueMs = Math.abs(diff)
+        const hours = Math.floor(overdueMs / (1000 * 60 * 60))
+        const mins = Math.floor((overdueMs % (1000 * 60 * 60)) / (1000 * 60))
+        setRemaining(`${hours}h ${mins}min ueberfaellig`)
+        setOverdue(true)
+      } else {
+        const hours = Math.floor(diff / (1000 * 60 * 60))
+        const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+        setRemaining(`${hours}h ${mins}min verbleibend`)
+        setOverdue(false)
+      }
+    }
+    update()
+    const interval = setInterval(update, 60000)
+    return () => clearInterval(interval)
+  }, [detectedAt])
+
+  return (
+    <span className={`text-sm font-medium ${overdue ? 'text-red-600' : 'text-orange-600'}`}>
+      72h-Frist: {remaining}
+    </span>
+  )
+}
+
+export function IncidentsTab({
+  incidents,
+  setIncidents,
+  showAdd,
+  setShowAdd,
+  onAdd,
+  onStatusChange,
+  onDelete,
+}: {
+  incidents: Incident[]
+  setIncidents: React.Dispatch<React.SetStateAction<Incident[]>>
+  showAdd: boolean
+  setShowAdd: (v: boolean) => void
+  onAdd?: (incident: Partial<Incident>) => Promise<void>
+  onStatusChange?: (id: string, status: IncidentStatus) => Promise<void>
+  onDelete?: (id: string) => Promise<void>
+}) {
+  const [newIncident, setNewIncident] = useState<Partial<Incident>>({
+    title: '',
+    description: '',
+    severity: 'medium',
+    affectedDataCategories: [],
+    estimatedAffectedPersons: 0,
+    measures: [],
+    art34Required: false,
+    art34Justification: '',
+  })
+
+  async function addIncident() {
+    if (!newIncident.title) return
+    if (onAdd) {
+      await onAdd(newIncident)
+    } else {
+      const incident: Incident = {
+        id: `INC-${Date.now()}`,
+        title: newIncident.title || '',
+        description: newIncident.description || '',
+        detectedAt: new Date().toISOString(),
+        detectedBy: 'Admin',
+        status: 'detected',
+        severity: newIncident.severity as IncidentSeverity || 'medium',
+        affectedDataCategories: newIncident.affectedDataCategories || [],
+        estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
+        measures: newIncident.measures || [],
+        art34Required: newIncident.art34Required || false,
+        art34Justification: newIncident.art34Justification || '',
+      }
+      setIncidents(prev => [incident, ...prev])
+    }
+    setShowAdd(false)
+    setNewIncident({
+      title: '', description: '', severity: 'medium',
+      affectedDataCategories: [], estimatedAffectedPersons: 0,
+      measures: [], art34Required: false, art34Justification: '',
+    })
+  }
+
+  async function updateStatus(id: string, status: IncidentStatus) {
+    if (onStatusChange) {
+      await onStatusChange(id, status)
+    } else {
+      setIncidents(prev => prev.map(inc =>
+        inc.id === id
+          ? {
+              ...inc,
+              status,
+              ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
+              ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
+            }
+          : inc
+      ))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">Incident-Register (Art. 33 Abs. 5)</h3>
+          <p className="text-sm text-gray-500">Alle Datenpannen dokumentieren — auch nicht-meldepflichtige.</p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700"
+        >
+          + Datenpanne melden
+        </button>
+      </div>
+
+      {/* Add Incident Form */}
+      {showAdd && (
+        <div className="bg-white rounded-lg border p-6 space-y-4">
+          <h4 className="font-medium">Neue Datenpanne erfassen</h4>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
+              <input
+                type="text"
+                value={newIncident.title}
+                onChange={e => setNewIncident(prev => ({ ...prev, title: e.target.value }))}
+                placeholder="Kurzbeschreibung der Datenpanne"
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+              <textarea
+                value={newIncident.description}
+                onChange={e => setNewIncident(prev => ({ ...prev, description: e.target.value }))}
+                placeholder="Detaillierte Beschreibung: Was ist passiert, wie wurde es entdeckt?"
+                rows={3}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+              <select
+                value={newIncident.severity}
+                onChange={e => setNewIncident(prev => ({ ...prev, severity: e.target.value as IncidentSeverity }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              >
+                <option value="low">Niedrig</option>
+                <option value="medium">Mittel</option>
+                <option value="high">Hoch</option>
+                <option value="critical">Kritisch</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Geschaetzte Betroffene</label>
+              <input
+                type="number"
+                value={newIncident.estimatedAffectedPersons}
+                onChange={e => setNewIncident(prev => ({ ...prev, estimatedAffectedPersons: parseInt(e.target.value) || 0 }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2 flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={newIncident.art34Required}
+                onChange={e => setNewIncident(prev => ({ ...prev, art34Required: e.target.checked }))}
+                className="rounded"
+              />
+              <label className="text-sm">Hohes Risiko fuer Betroffene (Art. 34 Benachrichtigungspflicht)</label>
+            </div>
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
+              Abbrechen
+            </button>
+            <button
+              onClick={addIncident}
+              disabled={!newIncident.title}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+            >
+              Datenpanne erfassen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Incidents List */}
+      {incidents.length === 0 ? (
+        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
+          <p className="text-lg mb-2">Keine Datenpannen erfasst</p>
+          <p className="text-sm">Dokumentieren Sie hier alle Datenpannen — auch solche, die nicht meldepflichtig sind (Art. 33 Abs. 5).</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {incidents.map(incident => (
+            <div key={incident.id} className="bg-white rounded-lg border p-6">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs text-gray-500 font-mono">{incident.id}</span>
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${INCIDENT_STATUS_COLORS[incident.status]}`}>
+                      {INCIDENT_STATUS_LABELS[incident.status]}
+                    </span>
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${SEVERITY_COLORS[incident.severity]}`}>
+                      {SEVERITY_LABELS[incident.severity]}
+                    </span>
+                    {incident.art34Required && (
+                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                        Art. 34
+                      </span>
+                    )}
+                  </div>
+                  <h4 className="font-medium">{incident.title}</h4>
+                </div>
+                {incident.status !== 'closed' && incident.status !== 'reported' && incident.status !== 'not_reportable' && (
+                  <CountdownTimer detectedAt={incident.detectedAt} />
+                )}
+              </div>
+              <p className="text-sm text-gray-600 mb-3">{incident.description}</p>
+              <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
+                <span>Entdeckt: {new Date(incident.detectedAt).toLocaleString('de-DE')}</span>
+                <span>Betroffene: ~{incident.estimatedAffectedPersons}</span>
+                {incident.reportedToAuthorityAt && (
+                  <span>Gemeldet: {new Date(incident.reportedToAuthorityAt).toLocaleString('de-DE')}</span>
+                )}
+              </div>
+              {incident.status !== 'closed' && (
+                <div className="flex gap-2">
+                  {incident.status === 'detected' && (
+                    <button onClick={() => updateStatus(incident.id, 'classified')} className="text-xs px-3 py-1 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200">
+                      Klassifizieren
+                    </button>
+                  )}
+                  {incident.status === 'classified' && (
+                    <button onClick={() => updateStatus(incident.id, 'assessed')} className="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200">
+                      Bewerten
+                    </button>
+                  )}
+                  {incident.status === 'assessed' && (
+                    <>
+                      <button onClick={() => updateStatus(incident.id, 'reported')} className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200">
+                        Als gemeldet markieren
+                      </button>
+                      <button onClick={() => updateStatus(incident.id, 'not_reportable')} className="text-xs px-3 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200">
+                        Nicht meldepflichtig
+                      </button>
+                    </>
+                  )}
+                  {(incident.status === 'reported' || incident.status === 'not_reportable') && (
+                    <button onClick={() => updateStatus(incident.id, 'closed')} className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
+                      Abschliessen
+                    </button>
+                  )}
+                  {onDelete && (
+                    <button
+                      onClick={() => { if (window.confirm('Incident loeschen?')) onDelete(incident.id) }}
+                      className="text-xs px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded ml-auto"
+                    >
+                      Loeschen
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/Modals.tsx

@@ -0,0 +1,296 @@
+'use client'
+
+import React from 'react'
+
+interface ModalShellProps {
+  title: string
+  onClose: () => void
+  children: React.ReactNode
+  footer: React.ReactNode
+}
+
+function ModalShell({ title, onClose, children, footer }: ModalShellProps) {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">{title}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">{children}</div>
+        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">{footer}</div>
+      </div>
+    </div>
+  )
+}
+
+// ---- Contact Modal ----
+
+export function ContactModal({
+  newContact,
+  setNewContact,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newContact: { name: string; role: string; email: string; phone: string; is_primary: boolean; available_24h: boolean }
+  setNewContact: React.Dispatch<React.SetStateAction<typeof newContact>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Notfallkontakt hinzufuegen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newContact.name || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Hinzufuegen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+        <input
+          type="text"
+          value={newContact.name}
+          onChange={e => setNewContact(p => ({ ...p, name: e.target.value }))}
+          placeholder="Vollstaendiger Name"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Rolle</label>
+        <input
+          type="text"
+          value={newContact.role}
+          onChange={e => setNewContact(p => ({ ...p, role: e.target.value }))}
+          placeholder="z.B. Datenschutzbeauftragter"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
+          <input
+            type="email"
+            value={newContact.email}
+            onChange={e => setNewContact(p => ({ ...p, email: e.target.value }))}
+            placeholder="email@example.com"
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
+          <input
+            type="tel"
+            value={newContact.phone}
+            onChange={e => setNewContact(p => ({ ...p, phone: e.target.value }))}
+            placeholder="+49..."
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-6">
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={newContact.is_primary}
+            onChange={e => setNewContact(p => ({ ...p, is_primary: e.target.checked }))}
+            className="rounded"
+          />
+          Primaerkontakt
+        </label>
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={newContact.available_24h}
+            onChange={e => setNewContact(p => ({ ...p, available_24h: e.target.checked }))}
+            className="rounded"
+          />
+          24/7 erreichbar
+        </label>
+      </div>
+    </ModalShell>
+  )
+}
+
+// ---- Exercise Modal ----
+
+export function ExerciseModal({
+  newExercise,
+  setNewExercise,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newExercise: { title: string; exercise_type: string; exercise_date: string; notes: string }
+  setNewExercise: React.Dispatch<React.SetStateAction<typeof newExercise>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Neue Uebung planen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newExercise.title || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Uebung erstellen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+        <input
+          type="text"
+          value={newExercise.title}
+          onChange={e => setNewExercise(p => ({ ...p, title: e.target.value }))}
+          placeholder="z.B. Tabletop-Uebung Ransomware"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Uebungstyp</label>
+          <select
+            value={newExercise.exercise_type}
+            onChange={e => setNewExercise(p => ({ ...p, exercise_type: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="tabletop">Tabletop</option>
+            <option value="simulation">Simulation</option>
+            <option value="walkthrough">Walkthrough</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Datum</label>
+          <input
+            type="date"
+            value={newExercise.exercise_date}
+            onChange={e => setNewExercise(p => ({ ...p, exercise_date: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
+        <textarea
+          value={newExercise.notes}
+          onChange={e => setNewExercise(p => ({ ...p, notes: e.target.value }))}
+          placeholder="Ziele, Teilnehmer, Ablauf..."
+          rows={3}
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+    </ModalShell>
+  )
+}
+
+// ---- Scenario Modal ----
+
+export function ScenarioModal({
+  newScenario,
+  setNewScenario,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newScenario: { title: string; category: string; severity: string; description: string }
+  setNewScenario: React.Dispatch<React.SetStateAction<typeof newScenario>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Notfallszenario hinzufuegen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newScenario.title || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Hinzufuegen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+        <input
+          type="text"
+          value={newScenario.title}
+          onChange={e => setNewScenario(p => ({ ...p, title: e.target.value }))}
+          placeholder="z.B. Ransomware-Angriff auf Produktivsysteme"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+          <select
+            value={newScenario.category}
+            onChange={e => setNewScenario(p => ({ ...p, category: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="data_breach">Datenpanne</option>
+            <option value="system_failure">Systemausfall</option>
+            <option value="physical">Physischer Vorfall</option>
+            <option value="other">Sonstiges</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+          <select
+            value={newScenario.severity}
+            onChange={e => setNewScenario(p => ({ ...p, severity: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="low">Niedrig</option>
+            <option value="medium">Mittel</option>
+            <option value="high">Hoch</option>
+            <option value="critical">Kritisch</option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+        <textarea
+          value={newScenario.description}
+          onChange={e => setNewScenario(p => ({ ...p, description: e.target.value }))}
+          placeholder="Kurzbeschreibung des Szenarios und moeglicher Auswirkungen..."
+          rows={3}
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+    </ModalShell>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/TemplatesTab.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { MeldeTemplate } from './types'
+
+export function TemplatesTab({
+  templates,
+  setTemplates,
+  onSave,
+}: {
+  templates: MeldeTemplate[]
+  setTemplates: React.Dispatch<React.SetStateAction<MeldeTemplate[]>>
+  onSave?: (template: MeldeTemplate) => Promise<void>
+}) {
+  const [saving, setSaving] = useState<string | null>(null)
+
+  async function handleSave(template: MeldeTemplate) {
+    if (!onSave) return
+    setSaving(template.id)
+    try {
+      await onSave(template)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold">Melde-Templates</h3>
+        <p className="text-sm text-gray-500">
+          Vorlagen fuer Meldungen an die Aufsichtsbehoerde (Art. 33) und Benachrichtigung Betroffener (Art. 34).
+        </p>
+      </div>
+
+      {templates.map(template => (
+        <div key={template.id} className="bg-white rounded-lg border p-6">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded text-xs font-bold ${
+                template.type === 'art33'
+                  ? 'bg-blue-100 text-blue-800'
+                  : 'bg-purple-100 text-purple-800'
+              }`}>
+                {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
+              </span>
+              <h4 className="font-medium">{template.title}</h4>
+            </div>
+            {onSave && (
+              <button
+                onClick={() => handleSave(template)}
+                disabled={saving === template.id}
+                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {saving === template.id ? 'Gespeichert...' : 'Speichern'}
+              </button>
+            )}
+          </div>
+          <textarea
+            value={template.content}
+            onChange={e => {
+              setTemplates(prev => prev.map(t =>
+                t.id === template.id ? { ...t, content: e.target.value } : t
+              ))
+            }}
+            rows={12}
+            className="w-full border rounded px-3 py-2 text-sm font-mono"
+          />
+        </div>
+      ))}
+    </div>
+  )
+}

admin-compliance/app/sdk/notfallplan/_components/index.ts

@@ -0,0 +1,7 @@
+export { ConfigTab } from './ConfigTab'
+export { IncidentsTab } from './IncidentsTab'
+export { TemplatesTab } from './TemplatesTab'
+export { ExercisesTab } from './ExercisesTab'
+export { ContactModal, ExerciseModal, ScenarioModal } from './Modals'
+export { ApiContactsSection, ApiScenariosSection, ApiExercisesSection } from './ApiSections'
+export * from './types'

admin-compliance/app/sdk/notfallplan/_components/types.ts

@@ -0,0 +1,307 @@
+export type Tab = 'config' | 'incidents' | 'templates' | 'exercises'
+
+export type IncidentStatus = 'detected' | 'classified' | 'assessed' | 'reported' | 'not_reportable' | 'closed'
+export type IncidentSeverity = 'low' | 'medium' | 'high' | 'critical'
+
+export interface NotfallplanConfig {
+  meldewege: MeldeStep[]
+  zustaendigkeiten: Zustaendigkeit[]
+  aufsichtsbehoerde: {
+    name: string
+    state: string
+    email: string
+    phone: string
+    url: string
+  }
+  eskalationsstufen: Eskalationsstufe[]
+  sofortmassnahmen: string[]
+}
+
+export interface MeldeStep {
+  id: string
+  order: number
+  role: string
+  name: string
+  action: string
+  maxHours: number
+}
+
+export interface Zustaendigkeit {
+  id: string
+  role: string
+  name: string
+  email: string
+  phone: string
+}
+
+export interface Eskalationsstufe {
+  id: string
+  level: number
+  label: string
+  triggerCondition: string
+  actions: string[]
+}
+
+export interface Incident {
+  id: string
+  title: string
+  description: string
+  detectedAt: string
+  detectedBy: string
+  status: IncidentStatus
+  severity: IncidentSeverity
+  affectedDataCategories: string[]
+  estimatedAffectedPersons: number
+  measures: string[]
+  art34Required: boolean
+  art34Justification: string
+  reportedToAuthorityAt?: string
+  notifiedAffectedAt?: string
+  closedAt?: string
+  closedBy?: string
+  lessonsLearned?: string
+}
+
+export interface MeldeTemplate {
+  id: string
+  type: 'art33' | 'art34'
+  title: string
+  content: string
+}
+
+export interface Exercise {
+  id: string
+  title: string
+  type: 'tabletop' | 'simulation' | 'full_drill'
+  scenario: string
+  scheduledDate: string
+  completedDate?: string
+  participants: string[]
+  lessonsLearned: string
+  nextExerciseDate?: string
+}
+
+export interface ApiContact {
+  id: string
+  name: string
+  role: string | null
+  email: string | null
+  phone: string | null
+  is_primary: boolean
+  available_24h: boolean
+  created_at: string | null
+}
+
+export interface ApiScenario {
+  id: string
+  title: string
+  category: string | null
+  severity: string
+  description: string | null
+  is_active: boolean
+  created_at: string | null
+}
+
+export interface ApiExercise {
+  id: string
+  title: string
+  exercise_type: string
+  exercise_date: string | null
+  outcome: string | null
+  notes: string | null
+  created_at: string | null
+}
+
+export const INCIDENT_STATUS_LABELS: Record<IncidentStatus, string> = {
+  detected: 'Erkannt',
+  classified: 'Klassifiziert',
+  assessed: 'Bewertet',
+  reported: 'Gemeldet',
+  not_reportable: 'Nicht meldepflichtig',
+  closed: 'Abgeschlossen',
+}
+
+export const INCIDENT_STATUS_COLORS: Record<IncidentStatus, string> = {
+  detected: 'bg-red-100 text-red-800',
+  classified: 'bg-yellow-100 text-yellow-800',
+  assessed: 'bg-blue-100 text-blue-800',
+  reported: 'bg-green-100 text-green-800',
+  not_reportable: 'bg-gray-100 text-gray-800',
+  closed: 'bg-gray-100 text-gray-600',
+}
+
+export const SEVERITY_LABELS: Record<IncidentSeverity, string> = {
+  low: 'Niedrig',
+  medium: 'Mittel',
+  high: 'Hoch',
+  critical: 'Kritisch',
+}
+
+export const SEVERITY_COLORS: Record<IncidentSeverity, string> = {
+  low: 'bg-green-100 text-green-800',
+  medium: 'bg-yellow-100 text-yellow-800',
+  high: 'bg-orange-100 text-orange-800',
+  critical: 'bg-red-100 text-red-800',
+}
+
+export const NOTFALLPLAN_API = '/api/sdk/v1/notfallplan'
+
+export const DEFAULT_CONFIG: NotfallplanConfig = {
+  meldewege: [
+    { id: '1', order: 1, role: 'Entdecker', name: '', action: 'Incident melden an IT-Sicherheit', maxHours: 0 },
+    { id: '2', order: 2, role: 'IT-Sicherheit', name: '', action: 'Erstbewertung und Klassifizierung', maxHours: 4 },
+    { id: '3', order: 3, role: 'Datenschutzbeauftragter', name: '', action: 'Meldepflicht pruefen (Art. 33)', maxHours: 12 },
+    { id: '4', order: 4, role: 'Geschaeftsfuehrung', name: '', action: 'Freigabe der Meldung', maxHours: 24 },
+    { id: '5', order: 5, role: 'DSB', name: '', action: 'Meldung an Aufsichtsbehoerde', maxHours: 72 },
+  ],
+  zustaendigkeiten: [
+    { id: '1', role: 'Incident Owner', name: '', email: '', phone: '' },
+    { id: '2', role: 'Datenschutzbeauftragter', name: '', email: '', phone: '' },
+    { id: '3', role: 'IT-Sicherheit', name: '', email: '', phone: '' },
+    { id: '4', role: 'Recht / Legal', name: '', email: '', phone: '' },
+    { id: '5', role: 'Kommunikation / PR', name: '', email: '', phone: '' },
+  ],
+  aufsichtsbehoerde: {
+    name: '',
+    state: '',
+    email: '',
+    phone: '',
+    url: '',
+  },
+  eskalationsstufen: [
+    { id: '1', level: 1, label: 'Standard', triggerCondition: 'Einzelfall, keine sensiblen Daten', actions: ['IT-Sicherheit informieren', 'DSB benachrichtigen'] },
+    { id: '2', level: 2, label: 'Erhoehte Prioritaet', triggerCondition: 'Sensible Daten oder > 100 Betroffene', actions: ['Geschaeftsfuehrung informieren', 'Notfallteam einberufen'] },
+    { id: '3', level: 3, label: 'Kritisch', triggerCondition: 'Besondere Kategorien Art. 9 oder > 1000 Betroffene', actions: ['Sofortige Krisensitzung', 'Art. 34 Benachrichtigung vorbereiten', 'PR/Kommunikation einbinden'] },
+  ],
+  sofortmassnahmen: [
+    'Betroffene Systeme isolieren / vom Netz nehmen',
+    'Zugriffsrechte pruefen und ggf. sperren',
+    'Beweise sichern (Logs, Screenshots)',
+    'Zeitleiste der Ereignisse dokumentieren',
+    'Erstbewertung: Art der Daten, Anzahl Betroffene, Schaden',
+    'DSB unverzueglich informieren',
+  ],
+}
+
+export const DEFAULT_TEMPLATES: MeldeTemplate[] = [
+  {
+    id: 'tpl-art33',
+    type: 'art33',
+    title: 'Meldung an Aufsichtsbehoerde (Art. 33 DSGVO)',
+    content: `Meldung einer Verletzung des Schutzes personenbezogener Daten
+gemaess Art. 33 DSGVO
+
+1. Beschreibung der Verletzung:
+[Art der Verletzung, betroffene Kategorien personenbezogener Daten]
+
+2. Kategorien und ungefaehre Zahl der betroffenen Personen:
+[Anzahl und Kategorien der Betroffenen]
+
+3. Kategorien und ungefaehre Zahl der betroffenen Datensaetze:
+[Datensatz-Kategorien und Anzahl]
+
+4. Name und Kontaktdaten des Datenschutzbeauftragten:
+[Name, E-Mail, Telefon]
+
+5. Beschreibung der wahrscheinlichen Folgen:
+[Moegliche Auswirkungen auf die Betroffenen]
+
+6. Beschreibung der ergriffenen/vorgeschlagenen Massnahmen:
+[Sofortmassnahmen und geplante Abhilfemassnahmen]
+
+7. Zeitpunkt der Feststellung:
+[Datum, Uhrzeit]
+
+8. Begruendung bei verspaeteter Meldung (falls > 72h):
+[Begruendung]`,
+  },
+  {
+    id: 'tpl-art34',
+    type: 'art34',
+    title: 'Benachrichtigung Betroffene (Art. 34 DSGVO)',
+    content: `Benachrichtigung ueber eine Verletzung des Schutzes
+Ihrer personenbezogenen Daten
+
+Sehr geehrte/r [Name/Betroffene],
+
+wir informieren Sie gemaess Art. 34 DSGVO ueber eine Verletzung
+des Schutzes personenbezogener Daten, die Ihre Daten betrifft.
+
+Was ist passiert?
+[Beschreibung in klarer, einfacher Sprache]
+
+Welche Daten sind betroffen?
+[Betroffene Datenkategorien]
+
+Welche Folgen sind moeglich?
+[Moegliche Auswirkungen]
+
+Was haben wir unternommen?
+[Ergriffene Massnahmen]
+
+Was koennen Sie tun?
+[Empfehlungen fuer Betroffene, z.B. Passwort aendern]
+
+Kontakt:
+Unser Datenschutzbeauftragter steht Ihnen fuer Rueckfragen
+zur Verfuegung:
+[Name, E-Mail, Telefon]
+
+Mit freundlichen Gruessen
+[Verantwortlicher]`,
+  },
+]
+
+const STORAGE_KEY = 'bp_notfallplan'
+
+export function loadFromStorage(): {
+  config: NotfallplanConfig
+  incidents: Incident[]
+  templates: MeldeTemplate[]
+  exercises: Exercise[]
+} {
+  if (typeof window === 'undefined') {
+    return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
+  }
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch {
+    // ignore
+  }
+  return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
+}
+
+export function saveToStorage(data: {
+  config: NotfallplanConfig
+  incidents: Incident[]
+  templates: MeldeTemplate[]
+  exercises: Exercise[]
+}) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+}
+
+export function apiToIncident(raw: any): Incident {
+  return {
+    id: raw.id,
+    title: raw.title,
+    description: raw.description || '',
+    detectedAt: raw.detected_at,
+    detectedBy: raw.detected_by || 'Admin',
+    status: raw.status,
+    severity: raw.severity,
+    affectedDataCategories: raw.affected_data_categories || [],
+    estimatedAffectedPersons: raw.estimated_affected_persons || 0,
+    measures: raw.measures || [],
+    art34Required: raw.art34_required || false,
+    art34Justification: raw.art34_justification || '',
+    reportedToAuthorityAt: raw.reported_to_authority_at,
+    notifiedAffectedAt: raw.notified_affected_at,
+    closedAt: raw.closed_at,
+    closedBy: raw.closed_by,
+    lessonsLearned: raw.lessons_learned,
+  }
+}