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>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,205 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { DSFARisk } from '@/lib/sdk/dsfa/types'
|
||||
import type { SDMGoal } from '@/lib/sdk/dsfa/types'
|
||||
import {
|
||||
MITIGATION_LIBRARY,
|
||||
MITIGATION_TYPE_LABELS,
|
||||
SDM_GOAL_LABELS,
|
||||
EFFECTIVENESS_LABELS,
|
||||
} from '@/lib/sdk/dsfa/mitigation-library'
|
||||
import type { CatalogMitigation } from '@/lib/sdk/dsfa/mitigation-library'
|
||||
|
||||
export function AddMitigationModal({
|
||||
risks,
|
||||
onClose,
|
||||
onAdd,
|
||||
}: {
|
||||
risks: DSFARisk[]
|
||||
onClose: () => void
|
||||
onAdd: (data: { risk_id: string; description: string; type: string; responsible_party: string }) => void
|
||||
}) {
|
||||
const [mode, setMode] = useState<'library' | 'manual'>('library')
|
||||
const [riskId, setRiskId] = useState(risks[0]?.id || '')
|
||||
const [type, setType] = useState('technical')
|
||||
const [description, setDescription] = useState('')
|
||||
const [responsibleParty, setResponsibleParty] = useState('')
|
||||
const [typeFilter, setTypeFilter] = useState<'all' | 'technical' | 'organizational' | 'legal'>('all')
|
||||
const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
|
||||
|
||||
const filteredLibrary = MITIGATION_LIBRARY.filter(m => {
|
||||
if (typeFilter !== 'all' && m.type !== typeFilter) return false
|
||||
if (sdmFilter !== 'all' && !m.sdmGoals.includes(sdmFilter)) return false
|
||||
return true
|
||||
})
|
||||
|
||||
function selectCatalogMitigation(m: CatalogMitigation) {
|
||||
setType(m.type)
|
||||
setDescription(`${m.title}\n\n${m.description}\n\nRechtsgrundlage: ${m.legalBasis}`)
|
||||
setMode('manual')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Massnahme hinzufuegen</h3>
|
||||
|
||||
{/* Tab Toggle */}
|
||||
<div className="flex border-b mb-4">
|
||||
<button
|
||||
onClick={() => setMode('library')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
|
||||
mode === 'library' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Aus Bibliothek waehlen ({MITIGATION_LIBRARY.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode('manual')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
|
||||
mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Manuell eingeben
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mode === 'library' ? (
|
||||
<div className="space-y-3">
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={e => setTypeFilter(e.target.value as typeof typeFilter)}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
>
|
||||
<option value="all">Alle Typen</option>
|
||||
{Object.entries(MITIGATION_TYPE_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={sdmFilter}
|
||||
onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
>
|
||||
<option value="all">Alle SDM-Ziele</option>
|
||||
{Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Library List */}
|
||||
<div className="max-h-[40vh] overflow-y-auto space-y-2">
|
||||
{filteredLibrary.map(m => (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => selectCatalogMitigation(m)}
|
||||
className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono text-gray-400">{m.id}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
m.type === 'technical' ? 'bg-blue-50 text-blue-600' :
|
||||
m.type === 'organizational' ? 'bg-green-50 text-green-600' :
|
||||
'bg-purple-50 text-purple-600'
|
||||
}`}>
|
||||
{MITIGATION_TYPE_LABELS[m.type]}
|
||||
</span>
|
||||
{m.sdmGoals.map(g => (
|
||||
<span key={g} className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
|
||||
{SDM_GOAL_LABELS[g]}
|
||||
</span>
|
||||
))}
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
m.effectiveness === 'high' ? 'bg-green-50 text-green-700' :
|
||||
m.effectiveness === 'medium' ? 'bg-yellow-50 text-yellow-700' :
|
||||
'bg-gray-50 text-gray-500'
|
||||
}`}>
|
||||
{EFFECTIVENESS_LABELS[m.effectiveness]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900">{m.title}</div>
|
||||
<div className="text-xs text-gray-500 mt-1 line-clamp-2">{m.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{filteredLibrary.length === 0 && (
|
||||
<p className="text-sm text-gray-500 text-center py-4">Keine Massnahmen fuer die gewaehlten Filter.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Zugehoeriges Risiko</label>
|
||||
<select
|
||||
value={riskId}
|
||||
onChange={(e) => setRiskId(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
{risks.map(risk => (
|
||||
<option key={risk.id} value={risk.id}>
|
||||
{risk.description.substring(0, 50)}...
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Typ</label>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="technical">Technisch</option>
|
||||
<option value="organizational">Organisatorisch</option>
|
||||
<option value="legal">Rechtlich</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
rows={3}
|
||||
placeholder="Beschreiben Sie die Massnahme..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Verantwortlich</label>
|
||||
<input
|
||||
type="text"
|
||||
value={responsibleParty}
|
||||
onChange={(e) => setResponsibleParty(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
placeholder="Name oder Rolle..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onAdd({ risk_id: riskId, description, type, responsible_party: responsibleParty })}
|
||||
disabled={!description.trim() || mode === 'library'}
|
||||
className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
Hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
182
admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx
Normal file
182
admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
DSFA_RISK_LEVEL_LABELS,
|
||||
calculateRiskLevel,
|
||||
} from '@/lib/sdk/dsfa/types'
|
||||
import type { DSFARiskCategory } from '@/lib/sdk/dsfa/types'
|
||||
import type { SDMGoal } from '@/lib/sdk/dsfa/types'
|
||||
import {
|
||||
RISK_CATALOG,
|
||||
RISK_CATEGORY_LABELS,
|
||||
} from '@/lib/sdk/dsfa/risk-catalog'
|
||||
import type { CatalogRisk } from '@/lib/sdk/dsfa/risk-catalog'
|
||||
import { SDM_GOAL_LABELS } from '@/lib/sdk/dsfa/mitigation-library'
|
||||
|
||||
export function AddRiskModal({
|
||||
likelihood,
|
||||
impact,
|
||||
onClose,
|
||||
onAdd,
|
||||
}: {
|
||||
likelihood: 'low' | 'medium' | 'high'
|
||||
impact: 'low' | 'medium' | 'high'
|
||||
onClose: () => void
|
||||
onAdd: (data: { category: string; description: string }) => void
|
||||
}) {
|
||||
const [mode, setMode] = useState<'catalog' | 'manual'>('catalog')
|
||||
const [category, setCategory] = useState('confidentiality')
|
||||
const [description, setDescription] = useState('')
|
||||
const [catalogFilter, setCatalogFilter] = useState<DSFARiskCategory | 'all'>('all')
|
||||
const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
|
||||
|
||||
const { level } = calculateRiskLevel(likelihood, impact)
|
||||
|
||||
const filteredCatalog = RISK_CATALOG.filter(r => {
|
||||
if (catalogFilter !== 'all' && r.category !== catalogFilter) return false
|
||||
if (sdmFilter !== 'all' && r.sdmGoal !== sdmFilter) return false
|
||||
return true
|
||||
})
|
||||
|
||||
function selectCatalogRisk(risk: CatalogRisk) {
|
||||
setCategory(risk.category)
|
||||
setDescription(`${risk.title}\n\n${risk.description}`)
|
||||
setMode('manual')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Risiko hinzufuegen</h3>
|
||||
|
||||
<div className="mb-4 p-3 rounded-lg bg-gray-50">
|
||||
<div className="text-sm text-gray-500">
|
||||
Eintrittswahrscheinlichkeit: <span className="font-medium text-gray-700">{likelihood === 'low' ? 'Niedrig' : likelihood === 'medium' ? 'Mittel' : 'Hoch'}</span>
|
||||
{' | '}
|
||||
Auswirkung: <span className="font-medium text-gray-700">{impact === 'low' ? 'Niedrig' : impact === 'medium' ? 'Mittel' : 'Hoch'}</span>
|
||||
{' | '}
|
||||
Risikostufe: <span className="font-medium">{DSFA_RISK_LEVEL_LABELS[level]}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Toggle */}
|
||||
<div className="flex border-b mb-4">
|
||||
<button
|
||||
onClick={() => setMode('catalog')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
|
||||
mode === 'catalog' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Aus Katalog waehlen ({RISK_CATALOG.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setMode('manual')}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
|
||||
mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Manuell eingeben
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mode === 'catalog' ? (
|
||||
<div className="space-y-3">
|
||||
{/* Filters */}
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
value={catalogFilter}
|
||||
onChange={e => setCatalogFilter(e.target.value as DSFARiskCategory | 'all')}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
>
|
||||
<option value="all">Alle Kategorien</option>
|
||||
{Object.entries(RISK_CATEGORY_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={sdmFilter}
|
||||
onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
|
||||
className="text-sm border rounded px-2 py-1"
|
||||
>
|
||||
<option value="all">Alle SDM-Ziele</option>
|
||||
{Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Catalog List */}
|
||||
<div className="max-h-[40vh] overflow-y-auto space-y-2">
|
||||
{filteredCatalog.map(risk => (
|
||||
<button
|
||||
key={risk.id}
|
||||
onClick={() => selectCatalogRisk(risk)}
|
||||
className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono text-gray-400">{risk.id}</span>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
|
||||
{RISK_CATEGORY_LABELS[risk.category]}
|
||||
</span>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
|
||||
{SDM_GOAL_LABELS[risk.sdmGoal]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-900">{risk.title}</div>
|
||||
<div className="text-xs text-gray-500 mt-1 line-clamp-2">{risk.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{filteredCatalog.length === 0 && (
|
||||
<p className="text-sm text-gray-500 text-center py-4">Keine Risiken fuer die gewaehlten Filter.</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Kategorie</label>
|
||||
<select
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="confidentiality">Vertraulichkeit</option>
|
||||
<option value="integrity">Integritaet</option>
|
||||
<option value="availability">Verfuegbarkeit</option>
|
||||
<option value="rights_freedoms">Rechte & Freiheiten</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
rows={4}
|
||||
placeholder="Beschreiben Sie das Risiko..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 mt-6">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onAdd({ category, description })}
|
||||
disabled={!description.trim() || mode === 'catalog'}
|
||||
className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
Hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface RAGSearchResult {
|
||||
text: string
|
||||
regulation_code: string
|
||||
regulation_name: string
|
||||
regulation_short: string
|
||||
category: string
|
||||
article?: string
|
||||
source_url?: string
|
||||
score: number
|
||||
}
|
||||
|
||||
interface RAGSearchResponse {
|
||||
query: string
|
||||
results: RAGSearchResult[]
|
||||
count: number
|
||||
}
|
||||
|
||||
export function RAGSearchPanel({
|
||||
context,
|
||||
categories,
|
||||
onInsertText,
|
||||
}: {
|
||||
context: string
|
||||
categories?: string[]
|
||||
onInsertText?: (text: string) => void
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [query, setQuery] = useState('')
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
const [results, setResults] = useState<RAGSearchResponse | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||||
|
||||
const buildQuery = () => {
|
||||
if (query.trim()) return query.trim()
|
||||
return context.substring(0, 200)
|
||||
}
|
||||
|
||||
const handleSearch = async () => {
|
||||
const searchQuery = buildQuery()
|
||||
if (!searchQuery || searchQuery.length < 3) return
|
||||
|
||||
setIsSearching(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/sdk/v1/rag/search', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
query: searchQuery,
|
||||
collection: 'bp_dsfa_corpus',
|
||||
top_k: 5,
|
||||
}),
|
||||
})
|
||||
if (!response.ok) throw new Error(`Suche fehlgeschlagen (${response.status})`)
|
||||
const data: RAGSearchResponse = await response.json()
|
||||
setResults(data)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Suche fehlgeschlagen')
|
||||
setResults(null)
|
||||
} finally {
|
||||
setIsSearching(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInsert = (text: string, resultId: string) => {
|
||||
if (onInsertText) {
|
||||
onInsertText(text)
|
||||
} else {
|
||||
navigator.clipboard.writeText(text)
|
||||
}
|
||||
setCopiedId(resultId)
|
||||
setTimeout(() => setCopiedId(null), 2000)
|
||||
}
|
||||
|
||||
if (!isOpen) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm bg-indigo-50 text-indigo-700 rounded-lg border border-indigo-200 hover:bg-indigo-100 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
Empfehlung suchen (RAG)
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-indigo-50 border border-indigo-200 rounded-xl p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-indigo-800 flex items-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
DSFA-Wissenssuche (RAG)
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => { setIsOpen(false); setResults(null); setError(null) }}
|
||||
className="text-indigo-400 hover:text-indigo-600"
|
||||
>
|
||||
<svg className="w-4 h-4" 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>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||
placeholder={`Suchbegriff (oder leer fuer automatische Kontextsuche)...`}
|
||||
className="flex-1 px-3 py-2 text-sm border border-indigo-300 rounded-lg bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSearch}
|
||||
disabled={isSearching}
|
||||
className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSearching ? 'Suche...' : 'Suchen'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{results && results.results.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-indigo-600">{results.count} Ergebnis(se) gefunden</p>
|
||||
|
||||
{results.results.map((r, idx) => {
|
||||
const resultId = `${r.regulation_code}-${idx}`
|
||||
return (
|
||||
<div key={resultId} className="bg-white rounded-lg border border-indigo-100 p-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs font-medium text-indigo-600 mb-1">
|
||||
{r.regulation_name}{r.article ? ` — ${r.article}` : ''}
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 leading-relaxed whitespace-pre-line">
|
||||
{r.text.length > 400 ? r.text.substring(0, 400) + '...' : r.text}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<span className="text-xs text-gray-400 font-mono">
|
||||
{r.regulation_short || r.regulation_code} ({(r.score * 100).toFixed(0)}%)
|
||||
</span>
|
||||
{r.category && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{r.category}</span>
|
||||
)}
|
||||
{r.source_url && (
|
||||
<a href={r.source_url} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 hover:underline">Quelle</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleInsert(r.text, resultId)}
|
||||
className={`flex-shrink-0 px-3 py-1.5 text-xs rounded-lg transition-colors ${
|
||||
copiedId === resultId
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
|
||||
}`}
|
||||
title="In Beschreibung uebernehmen"
|
||||
>
|
||||
{copiedId === resultId ? 'Kopiert!' : 'Uebernehmen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{results && results.results.length === 0 && (
|
||||
<div className="text-sm text-indigo-600 text-center py-4">
|
||||
Keine Ergebnisse gefunden. Versuchen Sie einen anderen Suchbegriff.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { DSFA, SDM_GOALS } from '@/lib/sdk/dsfa/types'
|
||||
import type { SDMGoal } from '@/lib/sdk/dsfa/types'
|
||||
import { RISK_CATALOG } from '@/lib/sdk/dsfa/risk-catalog'
|
||||
import { MITIGATION_LIBRARY } from '@/lib/sdk/dsfa/mitigation-library'
|
||||
|
||||
export function SDMCoverageOverview({ dsfa }: { dsfa: DSFA }) {
|
||||
const goals = Object.keys(SDM_GOALS) as SDMGoal[]
|
||||
|
||||
const goalCoverage = goals.map(goal => {
|
||||
const catalogRisks = RISK_CATALOG.filter(r => r.sdmGoal === goal)
|
||||
const catalogMitigations = MITIGATION_LIBRARY.filter(m => m.sdmGoals.includes(goal))
|
||||
|
||||
const matchedRisks = catalogRisks.filter(cr =>
|
||||
dsfa.risks?.some(r => r.description?.includes(cr.title))
|
||||
).length
|
||||
|
||||
const matchedMitigations = catalogMitigations.filter(cm =>
|
||||
dsfa.mitigations?.some(m => m.description?.includes(cm.title))
|
||||
).length
|
||||
|
||||
const hasRisks = matchedRisks > 0 || dsfa.risks?.some(r => {
|
||||
const cat = r.category
|
||||
if (goal === 'vertraulichkeit' && cat === 'confidentiality') return true
|
||||
if (goal === 'integritaet' && cat === 'integrity') return true
|
||||
if (goal === 'verfuegbarkeit' && cat === 'availability') return true
|
||||
if (goal === 'nichtverkettung' && cat === 'rights_freedoms') return true
|
||||
return false
|
||||
})
|
||||
|
||||
const coverage = matchedMitigations > 0 ? 'covered' :
|
||||
hasRisks ? 'gaps' : 'no_data'
|
||||
|
||||
return {
|
||||
goal,
|
||||
info: SDM_GOALS[goal],
|
||||
matchedRisks,
|
||||
matchedMitigations,
|
||||
coverage,
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="mt-6 bg-white rounded-xl border p-6">
|
||||
<h3 className="text-md font-semibold text-gray-900 mb-1">SDM-Abdeckung (Gewaehrleistungsziele)</h3>
|
||||
<p className="text-xs text-gray-500 mb-4">Uebersicht ueber die Abdeckung der 7 Gewaehrleistungsziele des Standard-Datenschutzmodells.</p>
|
||||
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{goalCoverage.map(({ goal, info, matchedRisks, matchedMitigations, coverage }) => (
|
||||
<div
|
||||
key={goal}
|
||||
className={`p-3 rounded-lg text-center border ${
|
||||
coverage === 'covered' ? 'bg-green-50 border-green-200' :
|
||||
coverage === 'gaps' ? 'bg-yellow-50 border-yellow-200' :
|
||||
'bg-gray-50 border-gray-200'
|
||||
}`}
|
||||
>
|
||||
<div className={`text-lg mb-1 ${
|
||||
coverage === 'covered' ? 'text-green-600' :
|
||||
coverage === 'gaps' ? 'text-yellow-600' :
|
||||
'text-gray-400'
|
||||
}`}>
|
||||
{coverage === 'covered' ? '\u2713' : coverage === 'gaps' ? '!' : '\u2013'}
|
||||
</div>
|
||||
<div className="text-xs font-medium text-gray-900 leading-tight">{info.name}</div>
|
||||
<div className="text-[10px] text-gray-500 mt-1">
|
||||
{matchedRisks}R / {matchedMitigations}M
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-3 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-green-500"></span> Abgedeckt</span>
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-yellow-500"></span> Luecken</span>
|
||||
<span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-gray-300"></span> Keine Daten</span>
|
||||
<span className="ml-auto">R = Risiken, M = Massnahmen</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { DSFA, DSFA_LEGAL_BASES } from '@/lib/sdk/dsfa/types'
|
||||
|
||||
interface SectionProps {
|
||||
dsfa: DSFA
|
||||
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
export function Section1Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
processing_description: dsfa.processing_description || '',
|
||||
processing_purpose: dsfa.processing_purpose || '',
|
||||
data_categories: dsfa.data_categories || [],
|
||||
data_subjects: dsfa.data_subjects || [],
|
||||
recipients: dsfa.recipients || [],
|
||||
legal_basis: dsfa.legal_basis || '',
|
||||
legal_basis_details: dsfa.legal_basis_details || '',
|
||||
})
|
||||
const [newCategory, setNewCategory] = useState('')
|
||||
const [newSubject, setNewSubject] = useState('')
|
||||
const [newRecipient, setNewRecipient] = useState('')
|
||||
|
||||
const handleSave = () => {
|
||||
onUpdate(formData)
|
||||
}
|
||||
|
||||
const addItem = (field: 'data_categories' | 'data_subjects' | 'recipients', value: string, setter: (v: string) => void) => {
|
||||
if (value.trim()) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: [...prev[field], value.trim()]
|
||||
}))
|
||||
setter('')
|
||||
}
|
||||
}
|
||||
|
||||
const removeItem = (field: 'data_categories' | 'data_subjects' | 'recipients', index: number) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: prev[field].filter((_, i) => i !== index)
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Processing Purpose */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Verarbeitungszweck *
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.processing_purpose}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, processing_purpose: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
rows={3}
|
||||
placeholder="Beschreiben Sie den Zweck der Datenverarbeitung..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Processing Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Beschreibung der Verarbeitung *
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.processing_description}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, processing_description: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
rows={4}
|
||||
placeholder="Detaillierte Beschreibung der Verarbeitungsvorgaenge..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Data Categories */}
|
||||
<TagListField
|
||||
label="Datenkategorien *"
|
||||
items={formData.data_categories}
|
||||
newValue={newCategory}
|
||||
onNewValueChange={setNewCategory}
|
||||
onAdd={() => addItem('data_categories', newCategory, setNewCategory)}
|
||||
onRemove={(idx) => removeItem('data_categories', idx)}
|
||||
placeholder="Kategorie hinzufuegen..."
|
||||
colorClass="bg-blue-100 text-blue-700"
|
||||
hoverClass="hover:text-blue-900"
|
||||
/>
|
||||
|
||||
{/* Data Subjects */}
|
||||
<TagListField
|
||||
label="Betroffene Personen *"
|
||||
items={formData.data_subjects}
|
||||
newValue={newSubject}
|
||||
onNewValueChange={setNewSubject}
|
||||
onAdd={() => addItem('data_subjects', newSubject, setNewSubject)}
|
||||
onRemove={(idx) => removeItem('data_subjects', idx)}
|
||||
placeholder="z.B. Kunden, Mitarbeiter..."
|
||||
colorClass="bg-green-100 text-green-700"
|
||||
hoverClass="hover:text-green-900"
|
||||
/>
|
||||
|
||||
{/* Recipients */}
|
||||
<TagListField
|
||||
label="Empfaenger"
|
||||
items={formData.recipients}
|
||||
newValue={newRecipient}
|
||||
onNewValueChange={setNewRecipient}
|
||||
onAdd={() => addItem('recipients', newRecipient, setNewRecipient)}
|
||||
onRemove={(idx) => removeItem('recipients', idx)}
|
||||
placeholder="Empfaenger hinzufuegen..."
|
||||
colorClass="bg-orange-100 text-orange-700"
|
||||
hoverClass="hover:text-orange-900"
|
||||
/>
|
||||
|
||||
{/* Legal Basis */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Rechtsgrundlage *
|
||||
</label>
|
||||
<select
|
||||
value={formData.legal_basis}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, legal_basis: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<option value="">Bitte waehlen...</option>
|
||||
{Object.entries(DSFA_LEGAL_BASES).map(([key, label]) => (
|
||||
<option key={key} value={key}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Legal Basis Details */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Begruendung der Rechtsgrundlage
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.legal_basis_details}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, legal_basis_details: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
rows={3}
|
||||
placeholder="Erlaeutern Sie, warum diese Rechtsgrundlage anwendbar ist..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** Reusable tag-list input used for data_categories, data_subjects, recipients */
|
||||
function TagListField({
|
||||
label,
|
||||
items,
|
||||
newValue,
|
||||
onNewValueChange,
|
||||
onAdd,
|
||||
onRemove,
|
||||
placeholder,
|
||||
colorClass,
|
||||
hoverClass,
|
||||
}: {
|
||||
label: string
|
||||
items: string[]
|
||||
newValue: string
|
||||
onNewValueChange: (v: string) => void
|
||||
onAdd: () => void
|
||||
onRemove: (idx: number) => void
|
||||
placeholder: string
|
||||
colorClass: string
|
||||
hoverClass: string
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{items.map((item, idx) => (
|
||||
<span key={idx} className={`px-3 py-1 ${colorClass} rounded-full text-sm flex items-center gap-2`}>
|
||||
{item}
|
||||
<button onClick={() => onRemove(idx)} className={hoverClass}>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newValue}
|
||||
onChange={(e) => onNewValueChange(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && onAdd()}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
<button
|
||||
onClick={onAdd}
|
||||
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { DSFA } from '@/lib/sdk/dsfa/types'
|
||||
|
||||
interface SectionProps {
|
||||
dsfa: DSFA
|
||||
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
export function Section2Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
necessity_assessment: dsfa.necessity_assessment || '',
|
||||
proportionality_assessment: dsfa.proportionality_assessment || '',
|
||||
data_minimization: dsfa.data_minimization || '',
|
||||
alternatives_considered: dsfa.alternatives_considered || '',
|
||||
retention_justification: dsfa.retention_justification || '',
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
onUpdate(formData)
|
||||
}
|
||||
|
||||
const fields = [
|
||||
{
|
||||
key: 'necessity_assessment',
|
||||
label: 'Notwendigkeit der Verarbeitung *',
|
||||
hint: 'Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.',
|
||||
placeholder: 'Beschreiben Sie die Notwendigkeit...',
|
||||
rows: 4,
|
||||
},
|
||||
{
|
||||
key: 'proportionality_assessment',
|
||||
label: 'Verhaeltnismaessigkeit *',
|
||||
hint: 'Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.',
|
||||
placeholder: 'Beschreiben Sie die Verhaeltnismaessigkeit...',
|
||||
rows: 4,
|
||||
},
|
||||
{
|
||||
key: 'data_minimization',
|
||||
label: 'Datenminimierung',
|
||||
hint: 'Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?',
|
||||
placeholder: 'Beschreiben Sie die Datenminimierungsmassnahmen...',
|
||||
rows: 3,
|
||||
},
|
||||
{
|
||||
key: 'alternatives_considered',
|
||||
label: 'Gepruefe Alternativen',
|
||||
hint: 'Welche weniger eingriffsintensiven Alternativen wurden geprueft?',
|
||||
placeholder: 'Beschreiben Sie gepruefe Alternativen...',
|
||||
rows: 3,
|
||||
},
|
||||
{
|
||||
key: 'retention_justification',
|
||||
label: 'Speicherdauer / Loeschfristen',
|
||||
hint: undefined,
|
||||
placeholder: 'Begruenden Sie die geplante Speicherdauer...',
|
||||
rows: 3,
|
||||
},
|
||||
] as const
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{fields.map(({ key, label, hint, placeholder, rows }) => (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
|
||||
{hint && <p className="text-xs text-gray-500 mb-2">{hint}</p>}
|
||||
<textarea
|
||||
value={formData[key]}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, [key]: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
rows={rows}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
DSFA,
|
||||
DSFARisk,
|
||||
DSFA_RISK_LEVEL_LABELS,
|
||||
DSFA_AFFECTED_RIGHTS,
|
||||
calculateRiskLevel,
|
||||
} from '@/lib/sdk/dsfa/types'
|
||||
import { RiskMatrix } from '@/components/sdk/dsfa'
|
||||
import { RAGSearchPanel } from './RAGSearchPanel'
|
||||
import { AddRiskModal } from './AddRiskModal'
|
||||
|
||||
interface SectionProps {
|
||||
dsfa: DSFA
|
||||
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
export function Section3Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
|
||||
const [selectedRisk, setSelectedRisk] = useState<DSFARisk | null>(null)
|
||||
const [showAddRiskModal, setShowAddRiskModal] = useState(false)
|
||||
const [newRiskLikelihood, setNewRiskLikelihood] = useState<'low' | 'medium' | 'high'>('medium')
|
||||
const [newRiskImpact, setNewRiskImpact] = useState<'low' | 'medium' | 'high'>('medium')
|
||||
const [affectedRights, setAffectedRights] = useState<string[]>(dsfa.affected_rights || [])
|
||||
|
||||
const handleAddRisk = (likelihood: 'low' | 'medium' | 'high', impact: 'low' | 'medium' | 'high') => {
|
||||
setNewRiskLikelihood(likelihood)
|
||||
setNewRiskImpact(impact)
|
||||
setShowAddRiskModal(true)
|
||||
}
|
||||
|
||||
const toggleAffectedRight = (rightId: string) => {
|
||||
setAffectedRights(prev =>
|
||||
prev.includes(rightId)
|
||||
? prev.filter(r => r !== rightId)
|
||||
: [...prev, rightId]
|
||||
)
|
||||
}
|
||||
|
||||
const handleSaveSection = () => {
|
||||
onUpdate({
|
||||
affected_rights: affectedRights,
|
||||
overall_risk_level: dsfa.overall_risk_level,
|
||||
})
|
||||
}
|
||||
|
||||
const levelColors = {
|
||||
low: 'bg-green-100 text-green-700 border-green-200',
|
||||
medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
|
||||
high: 'bg-orange-100 text-orange-700 border-orange-200',
|
||||
very_high: 'bg-red-100 text-red-700 border-red-200',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Risk Matrix */}
|
||||
<div className="bg-gray-50 rounded-xl p-6">
|
||||
<RiskMatrix
|
||||
risks={dsfa.risks || []}
|
||||
onRiskSelect={(risk) => setSelectedRisk(risk)}
|
||||
onAddRisk={handleAddRisk}
|
||||
selectedRiskId={selectedRisk?.id}
|
||||
readOnly={dsfa.status !== 'draft' && dsfa.status !== 'needs_update'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Triggered Rules from UCCA */}
|
||||
{dsfa.triggered_rule_codes && dsfa.triggered_rule_codes.length > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4">
|
||||
<h4 className="text-sm font-medium text-red-800 mb-2">
|
||||
DSFA-ausloesende Regeln (aus UCCA)
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{dsfa.triggered_rule_codes.map(code => (
|
||||
<span key={code} className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">
|
||||
{code}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk List */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-3">Identifizierte Risiken ({(dsfa.risks || []).length})</h4>
|
||||
{(dsfa.risks || []).length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<svg className="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<p>Noch keine Risiken erfasst</p>
|
||||
<p className="text-sm mt-1">Klicken Sie in der Matrix auf eine Zelle, um ein Risiko hinzuzufuegen.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{(dsfa.risks || []).map(risk => {
|
||||
const { level } = calculateRiskLevel(risk.likelihood, risk.impact)
|
||||
return (
|
||||
<div
|
||||
key={risk.id}
|
||||
className={`p-4 rounded-xl border cursor-pointer transition-all ${
|
||||
selectedRisk?.id === risk.id ? 'ring-2 ring-purple-500' : ''
|
||||
} ${levelColors[level]}`}
|
||||
onClick={() => setSelectedRisk(risk)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{risk.description}</div>
|
||||
<div className="text-sm mt-1 opacity-75">
|
||||
Kategorie: {risk.category === 'confidentiality' ? 'Vertraulichkeit' :
|
||||
risk.category === 'integrity' ? 'Integritaet' :
|
||||
risk.category === 'availability' ? 'Verfuegbarkeit' :
|
||||
'Rechte & Freiheiten'}
|
||||
</div>
|
||||
<div className="text-sm opacity-75">
|
||||
Eintrittswahrscheinlichkeit: {risk.likelihood === 'low' ? 'Niedrig' : risk.likelihood === 'medium' ? 'Mittel' : 'Hoch'} |
|
||||
Auswirkung: {risk.impact === 'low' ? 'Niedrig' : risk.impact === 'medium' ? 'Mittel' : 'Hoch'}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${levelColors[level]}`}>
|
||||
{DSFA_RISK_LEVEL_LABELS[level]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* RAG Search for Risks */}
|
||||
<RAGSearchPanel
|
||||
context={`Risiken Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
|
||||
categories={['risk_assessment', 'threshold_analysis']}
|
||||
/>
|
||||
|
||||
{/* Affected Rights */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-3">Betroffene Rechte & Freiheiten</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{DSFA_AFFECTED_RIGHTS.map(right => (
|
||||
<label
|
||||
key={right.id}
|
||||
className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
|
||||
affectedRights.includes(right.id)
|
||||
? 'bg-purple-50 border-purple-300'
|
||||
: 'bg-white border-gray-200 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={affectedRights.includes(right.id)}
|
||||
onChange={() => toggleAffectedRight(right.id)}
|
||||
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
||||
/>
|
||||
<span className="text-sm">{right.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handleSaveSection}
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add Risk Modal */}
|
||||
{showAddRiskModal && (
|
||||
<AddRiskModal
|
||||
likelihood={newRiskLikelihood}
|
||||
impact={newRiskImpact}
|
||||
onClose={() => setShowAddRiskModal(false)}
|
||||
onAdd={async (riskData) => {
|
||||
// This would call the API
|
||||
setShowAddRiskModal(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { DSFA, DSFAMitigation } from '@/lib/sdk/dsfa/types'
|
||||
import { RAGSearchPanel } from './RAGSearchPanel'
|
||||
import { AddMitigationModal } from './AddMitigationModal'
|
||||
|
||||
interface SectionProps {
|
||||
dsfa: DSFA
|
||||
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
export function Section4Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
|
||||
const [showAddMitigation, setShowAddMitigation] = useState(false)
|
||||
|
||||
const mitigationsByType = {
|
||||
technical: (dsfa.mitigations || []).filter(m => m.type === 'technical'),
|
||||
organizational: (dsfa.mitigations || []).filter(m => m.type === 'organizational'),
|
||||
legal: (dsfa.mitigations || []).filter(m => m.type === 'legal'),
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const styles = {
|
||||
planned: 'bg-gray-100 text-gray-600',
|
||||
in_progress: 'bg-yellow-100 text-yellow-700',
|
||||
implemented: 'bg-blue-100 text-blue-700',
|
||||
verified: 'bg-green-100 text-green-700',
|
||||
}
|
||||
const labels = {
|
||||
planned: 'Geplant',
|
||||
in_progress: 'In Umsetzung',
|
||||
implemented: 'Umgesetzt',
|
||||
verified: 'Verifiziert',
|
||||
}
|
||||
return (
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${styles[status as keyof typeof styles] || styles.planned}`}>
|
||||
{labels[status as keyof typeof labels] || status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const renderMitigationSection = (
|
||||
title: string,
|
||||
icon: React.ReactNode,
|
||||
mitigations: DSFAMitigation[],
|
||||
bgColor: string
|
||||
) => (
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{icon}
|
||||
<h4 className="text-sm font-medium text-gray-700">{title} ({mitigations.length})</h4>
|
||||
</div>
|
||||
{mitigations.length === 0 ? (
|
||||
<div className={`p-4 rounded-lg ${bgColor} text-center text-sm text-gray-500`}>
|
||||
Keine Massnahmen definiert
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{mitigations.map(m => (
|
||||
<div key={m.id} className={`p-4 rounded-lg ${bgColor} border border-gray-200`}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-900">{m.description}</div>
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
Verantwortlich: {m.responsible_party || '-'}
|
||||
{m.tom_reference && ` | TOM: ${m.tom_reference}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusBadge(m.status)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Add Mitigation Button */}
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setShowAddMitigation(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Massnahme hinzufuegen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Technical Measures */}
|
||||
{renderMitigationSection(
|
||||
'Technische Massnahmen',
|
||||
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>,
|
||||
mitigationsByType.technical,
|
||||
'bg-blue-50'
|
||||
)}
|
||||
|
||||
{/* Organizational Measures */}
|
||||
{renderMitigationSection(
|
||||
'Organisatorische Massnahmen',
|
||||
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>,
|
||||
mitigationsByType.organizational,
|
||||
'bg-green-50'
|
||||
)}
|
||||
|
||||
{/* Legal Measures */}
|
||||
{renderMitigationSection(
|
||||
'Rechtliche Massnahmen',
|
||||
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>,
|
||||
mitigationsByType.legal,
|
||||
'bg-purple-50'
|
||||
)}
|
||||
|
||||
{/* RAG Search for Mitigations */}
|
||||
<RAGSearchPanel
|
||||
context={`Massnahmen Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
|
||||
categories={['mitigation', 'risk_assessment']}
|
||||
/>
|
||||
|
||||
{/* TOM References */}
|
||||
{dsfa.tom_references && dsfa.tom_references.length > 0 && (
|
||||
<div className="bg-gray-50 rounded-xl p-4">
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">Verknuepfte TOM-Eintraege</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{dsfa.tom_references.map((ref, idx) => (
|
||||
<span key={idx} className="px-3 py-1 bg-white border border-gray-200 rounded-full text-sm text-gray-600">
|
||||
{ref}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Mitigation Modal */}
|
||||
{showAddMitigation && (
|
||||
<AddMitigationModal
|
||||
risks={dsfa.risks || []}
|
||||
onClose={() => setShowAddMitigation(false)}
|
||||
onAdd={async (mitigationData) => {
|
||||
// This would call the API
|
||||
setShowAddMitigation(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { DSFA } from '@/lib/sdk/dsfa/types'
|
||||
|
||||
interface SectionProps {
|
||||
dsfa: DSFA
|
||||
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
||||
isSubmitting: boolean
|
||||
}
|
||||
|
||||
export function Section5Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
dpo_consulted: dsfa.dpo_consulted || false,
|
||||
dpo_name: dsfa.dpo_name || '',
|
||||
dpo_opinion: dsfa.dpo_opinion || '',
|
||||
authority_consulted: dsfa.authority_consulted || false,
|
||||
authority_reference: dsfa.authority_reference || '',
|
||||
authority_decision: dsfa.authority_decision || '',
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
onUpdate(formData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* DPO Consultation */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.dpo_consulted}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, dpo_consulted: e.target.checked }))}
|
||||
className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="font-medium text-blue-800">
|
||||
Datenschutzbeauftragter wurde konsultiert
|
||||
</span>
|
||||
</label>
|
||||
<p className="text-sm text-blue-600 mt-2">
|
||||
Gemaess Art. 35 Abs. 2 DSGVO muss bei einer DSFA der Rat des DSB eingeholt werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.dpo_consulted && (
|
||||
<div className="mt-4 space-y-4 pt-4 border-t border-blue-200">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-800 mb-2">Name des DSB</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.dpo_name}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, dpo_name: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
placeholder="Name des Datenschutzbeauftragten"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-800 mb-2">Stellungnahme des DSB</label>
|
||||
<textarea
|
||||
value={formData.dpo_opinion}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, dpo_opinion: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
|
||||
rows={4}
|
||||
placeholder="Stellungnahme und Empfehlungen des DSB..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Authority Consultation */}
|
||||
<div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.authority_consulted}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, authority_consulted: e.target.checked }))}
|
||||
className="w-5 h-5 rounded border-gray-300 text-orange-600 focus:ring-orange-500"
|
||||
/>
|
||||
<span className="font-medium text-orange-800">
|
||||
Aufsichtsbehoerde wurde konsultiert (Art. 36)
|
||||
</span>
|
||||
</label>
|
||||
<p className="text-sm text-orange-600 mt-2">
|
||||
Falls nach Durchfuehrung der Massnahmen weiterhin ein hohes Risiko besteht, ist die Aufsichtsbehoerde zu konsultieren.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.authority_consulted && (
|
||||
<div className="mt-4 space-y-4 pt-4 border-t border-orange-200">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-orange-800 mb-2">Aktenzeichen / Referenz</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.authority_reference}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, authority_reference: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
|
||||
placeholder="Aktenzeichen der Behoerde"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-orange-800 mb-2">Entscheidung der Behoerde</label>
|
||||
<textarea
|
||||
value={formData.authority_decision}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, authority_decision: e.target.value }))}
|
||||
className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
|
||||
rows={4}
|
||||
placeholder="Entscheidung und Auflagen der Aufsichtsbehoerde..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div className="text-sm text-gray-600">
|
||||
<p className="font-medium text-gray-700 mb-1">Hinweis zur Konsultation</p>
|
||||
<p>
|
||||
Die Konsultation der Aufsichtsbehoerde ist nur erforderlich, wenn nach Umsetzung der
|
||||
geplanten Massnahmen weiterhin ein hohes Risiko fuer die Rechte und Freiheiten der
|
||||
betroffenen Personen besteht.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="flex justify-end pt-4 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
9
admin-compliance/app/sdk/dsfa/[id]/_components/index.ts
Normal file
9
admin-compliance/app/sdk/dsfa/[id]/_components/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export { Section1Editor } from './Section1Editor'
|
||||
export { Section2Editor } from './Section2Editor'
|
||||
export { Section3Editor } from './Section3Editor'
|
||||
export { Section4Editor } from './Section4Editor'
|
||||
export { Section5Editor } from './Section5Editor'
|
||||
export { SDMCoverageOverview } from './SDMCoverageOverview'
|
||||
export { RAGSearchPanel } from './RAGSearchPanel'
|
||||
export { AddRiskModal } from './AddRiskModal'
|
||||
export { AddMitigationModal } from './AddMitigationModal'
|
||||
File diff suppressed because it is too large
Load Diff
137
admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx
Normal file
137
admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
203
admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx
Normal file
203
admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
296
admin-compliance/app/sdk/notfallplan/_components/Modals.tsx
Normal file
296
admin-compliance/app/sdk/notfallplan/_components/Modals.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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'
|
||||
307
admin-compliance/app/sdk/notfallplan/_components/types.ts
Normal file
307
admin-compliance/app/sdk/notfallplan/_components/types.ts
Normal file
@@ -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,
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user