529c37d91a
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 35s
CI / test-python-backend-compliance (push) Successful in 30s
CI / test-python-document-crawler (push) Successful in 20s
CI / test-python-dsms-gateway (push) Successful in 28s
- admin-compliance: .dockerignore + Dockerfile bereinigt - dsfa-corpus/route.ts + legal-corpus/route.ts entfernt (obsolet) - webhooks/woodpecker/route.ts: minor fix - dsfa/[id]/page.tsx: Refactoring - service_modules.py + README.md: aktualisiert - Migration 028 → 032 umbenannt (legal_documents_extend) - docs: index.md + DEVELOPER.md aktualisiert Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1894 lines
75 KiB
TypeScript
1894 lines
75 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react'
|
|
import Link from 'next/link'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import {
|
|
DSFA,
|
|
DSFARisk,
|
|
DSFAMitigation,
|
|
DSFA_SECTIONS,
|
|
DSFA_STATUS_LABELS,
|
|
DSFA_RISK_LEVEL_LABELS,
|
|
DSFA_LEGAL_BASES,
|
|
DSFA_AFFECTED_RIGHTS,
|
|
calculateRiskLevel,
|
|
SDM_GOALS,
|
|
} from '@/lib/sdk/dsfa/types'
|
|
import type { SDMGoal, DSFARiskCategory } from '@/lib/sdk/dsfa/types'
|
|
import {
|
|
RISK_CATALOG,
|
|
RISK_CATEGORY_LABELS,
|
|
COMPONENT_FAMILY_LABELS,
|
|
getRisksByCategory,
|
|
getRisksBySDMGoal,
|
|
} from '@/lib/sdk/dsfa/risk-catalog'
|
|
import type { CatalogRisk } from '@/lib/sdk/dsfa/risk-catalog'
|
|
import {
|
|
MITIGATION_LIBRARY,
|
|
MITIGATION_TYPE_LABELS,
|
|
SDM_GOAL_LABELS,
|
|
EFFECTIVENESS_LABELS,
|
|
getMitigationsBySDMGoal,
|
|
getMitigationsByType,
|
|
getMitigationsForRisk,
|
|
} from '@/lib/sdk/dsfa/mitigation-library'
|
|
import type { CatalogMitigation } from '@/lib/sdk/dsfa/mitigation-library'
|
|
import {
|
|
getDSFA,
|
|
updateDSFASection,
|
|
addDSFARisk,
|
|
removeDSFARisk,
|
|
addDSFAMitigation,
|
|
updateDSFAMitigationStatus,
|
|
updateDSFA,
|
|
} from '@/lib/sdk/dsfa/api'
|
|
import {
|
|
RiskMatrix,
|
|
ApprovalPanel,
|
|
DSFASidebar,
|
|
ThresholdAnalysisSection,
|
|
StakeholderConsultationSection,
|
|
Art36Warning,
|
|
ReviewScheduleSection,
|
|
AIUseCaseSection,
|
|
} from '@/components/sdk/dsfa'
|
|
|
|
// =============================================================================
|
|
// SECTION EDITORS
|
|
// =============================================================================
|
|
|
|
interface SectionProps {
|
|
dsfa: DSFA
|
|
onUpdate: (data: Record<string, unknown>) => Promise<void>
|
|
isSubmitting: boolean
|
|
}
|
|
|
|
// Section 1: Systematische Beschreibung (Art. 35 Abs. 7 lit. a)
|
|
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 */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Datenkategorien *
|
|
</label>
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|
{formData.data_categories.map((cat, idx) => (
|
|
<span key={idx} className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm flex items-center gap-2">
|
|
{cat}
|
|
<button onClick={() => removeItem('data_categories', idx)} className="hover:text-blue-900">
|
|
<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={newCategory}
|
|
onChange={(e) => setNewCategory(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && addItem('data_categories', newCategory, setNewCategory)}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Kategorie hinzufuegen..."
|
|
/>
|
|
<button
|
|
onClick={() => addItem('data_categories', newCategory, setNewCategory)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Subjects */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Betroffene Personen *
|
|
</label>
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|
{formData.data_subjects.map((subj, idx) => (
|
|
<span key={idx} className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm flex items-center gap-2">
|
|
{subj}
|
|
<button onClick={() => removeItem('data_subjects', idx)} className="hover:text-green-900">
|
|
<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={newSubject}
|
|
onChange={(e) => setNewSubject(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && addItem('data_subjects', newSubject, setNewSubject)}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
|
placeholder="z.B. Kunden, Mitarbeiter..."
|
|
/>
|
|
<button
|
|
onClick={() => addItem('data_subjects', newSubject, setNewSubject)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recipients */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Empfaenger
|
|
</label>
|
|
<div className="flex flex-wrap gap-2 mb-2">
|
|
{formData.recipients.map((rec, idx) => (
|
|
<span key={idx} className="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm flex items-center gap-2">
|
|
{rec}
|
|
<button onClick={() => removeItem('recipients', idx)} className="hover:text-orange-900">
|
|
<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={newRecipient}
|
|
onChange={(e) => setNewRecipient(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && addItem('recipients', newRecipient, setNewRecipient)}
|
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Empfaenger hinzufuegen..."
|
|
/>
|
|
<button
|
|
onClick={() => addItem('recipients', newRecipient, setNewRecipient)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
)
|
|
}
|
|
|
|
// Section 2: Notwendigkeit & Verhaeltnismaessigkeit (Art. 35 Abs. 7 lit. b)
|
|
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)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Necessity */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Notwendigkeit der Verarbeitung *
|
|
</label>
|
|
<p className="text-xs text-gray-500 mb-2">
|
|
Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.
|
|
</p>
|
|
<textarea
|
|
value={formData.necessity_assessment}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, necessity_assessment: 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="Beschreiben Sie die Notwendigkeit..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Proportionality */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Verhaeltnismaessigkeit *
|
|
</label>
|
|
<p className="text-xs text-gray-500 mb-2">
|
|
Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.
|
|
</p>
|
|
<textarea
|
|
value={formData.proportionality_assessment}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, proportionality_assessment: 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="Beschreiben Sie die Verhaeltnismaessigkeit..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Data Minimization */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Datenminimierung
|
|
</label>
|
|
<p className="text-xs text-gray-500 mb-2">
|
|
Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?
|
|
</p>
|
|
<textarea
|
|
value={formData.data_minimization}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, data_minimization: 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 die Datenminimierungsmassnahmen..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Alternatives */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Gepruefe Alternativen
|
|
</label>
|
|
<p className="text-xs text-gray-500 mb-2">
|
|
Welche weniger eingriffsintensiven Alternativen wurden geprueft?
|
|
</p>
|
|
<textarea
|
|
value={formData.alternatives_considered}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, alternatives_considered: 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 gepruefe Alternativen..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Retention */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Speicherdauer / Loeschfristen
|
|
</label>
|
|
<textarea
|
|
value={formData.retention_justification}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, retention_justification: 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="Begruenden Sie die geplante Speicherdauer..."
|
|
/>
|
|
</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>
|
|
)
|
|
}
|
|
|
|
// Section 3: Risikobewertung (Art. 35 Abs. 7 lit. c)
|
|
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,
|
|
})
|
|
}
|
|
|
|
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)
|
|
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
|
|
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>
|
|
)
|
|
}
|
|
|
|
// Section 4: Abhilfemassnahmen (Art. 35 Abs. 7 lit. d)
|
|
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>
|
|
)
|
|
}
|
|
|
|
// Section 5: Stellungnahme DSB (Art. 35 Abs. 2 + Art. 36)
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// SDM COVERAGE OVERVIEW
|
|
// =============================================================================
|
|
|
|
function SDMCoverageOverview({ dsfa }: { dsfa: DSFA }) {
|
|
const goals = Object.keys(SDM_GOALS) as SDMGoal[]
|
|
const riskCount = dsfa.risks?.length || 0
|
|
const mitigationCount = dsfa.mitigations?.length || 0
|
|
|
|
// Count catalog risks and mitigations per SDM goal by matching descriptions
|
|
const goalCoverage = goals.map(goal => {
|
|
const catalogRisks = RISK_CATALOG.filter(r => r.sdmGoal === goal)
|
|
const catalogMitigations = MITIGATION_LIBRARY.filter(m => m.sdmGoals.includes(goal))
|
|
|
|
// Check if any DSFA risk descriptions contain catalog risk titles for this goal
|
|
const matchedRisks = catalogRisks.filter(cr =>
|
|
dsfa.risks?.some(r => r.description?.includes(cr.title))
|
|
).length
|
|
|
|
// Check if any DSFA mitigation descriptions contain catalog mitigation titles for this goal
|
|
const matchedMitigations = catalogMitigations.filter(cm =>
|
|
dsfa.mitigations?.some(m => m.description?.includes(cm.title))
|
|
).length
|
|
|
|
const totalCatalogRisks = catalogRisks.length
|
|
const totalCatalogMitigations = catalogMitigations.length
|
|
|
|
// Coverage: simple heuristic based on whether there are mitigations for risks in this area
|
|
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,
|
|
totalCatalogRisks,
|
|
totalCatalogMitigations,
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// RAG SEARCH PANEL
|
|
// =============================================================================
|
|
|
|
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
|
|
}
|
|
|
|
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()
|
|
// Auto-generate query from context
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MODALS
|
|
// =============================================================================
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function DSFAEditorPage() {
|
|
const params = useParams()
|
|
const router = useRouter()
|
|
const dsfaId = params.id as string
|
|
|
|
const [dsfa, setDSFA] = useState<DSFA | null>(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [activeSection, setActiveSection] = useState(0) // Start at Section 0: Threshold Analysis
|
|
const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
|
|
|
|
// Load DSFA data
|
|
useEffect(() => {
|
|
const loadDSFA = async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const data = await getDSFA(dsfaId)
|
|
setDSFA(data)
|
|
} catch (error) {
|
|
console.error('Failed to load DSFA:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
loadDSFA()
|
|
}, [dsfaId])
|
|
|
|
const handleSectionUpdate = useCallback(async (sectionNumber: number, data: Record<string, unknown>) => {
|
|
if (!dsfa) return
|
|
|
|
setIsSaving(true)
|
|
setSaveMessage(null)
|
|
|
|
try {
|
|
const updated = await updateDSFASection(dsfaId, sectionNumber, data)
|
|
setDSFA(updated)
|
|
setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
|
|
setTimeout(() => setSaveMessage(null), 3000)
|
|
} catch (error) {
|
|
console.error('Failed to update section:', error)
|
|
setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}, [dsfa, dsfaId])
|
|
|
|
const handleSubmitForReview = async () => {
|
|
// Implementation would call submitDSFAForReview
|
|
alert('Zur Pruefung einreichen - Coming soon')
|
|
}
|
|
|
|
const handleApprove = async (opinion: string) => {
|
|
// Implementation would call approveDSFA
|
|
alert('Genehmigen - Coming soon')
|
|
}
|
|
|
|
const handleReject = async (reason: string) => {
|
|
// Implementation would call approveDSFA with approved: false
|
|
alert('Ablehnen - Coming soon')
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<svg className="animate-spin w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!dsfa) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
|
<div className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">DSFA nicht gefunden</h3>
|
|
<p className="mt-2 text-gray-500">
|
|
Die angeforderte DSFA existiert nicht oder wurde geloescht.
|
|
</p>
|
|
<Link
|
|
href="/sdk/dsfa"
|
|
className="mt-4 inline-flex items-center gap-2 px-4 py-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Zurueck zur Uebersicht
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const sectionConfig = DSFA_SECTIONS.find(s => s.number === activeSection)
|
|
const statusColors: Record<string, string> = {
|
|
draft: 'bg-gray-100 text-gray-600',
|
|
in_review: 'bg-yellow-100 text-yellow-700',
|
|
approved: 'bg-green-100 text-green-700',
|
|
rejected: 'bg-red-100 text-red-700',
|
|
needs_update: 'bg-orange-100 text-orange-700',
|
|
}
|
|
|
|
// Handler for generic DSFA updates (used by new section components)
|
|
const handleGenericUpdate = useCallback(async (data: Record<string, unknown>) => {
|
|
if (!dsfa) return
|
|
|
|
setIsSaving(true)
|
|
setSaveMessage(null)
|
|
|
|
try {
|
|
const updated = await updateDSFA(dsfaId, data as Partial<DSFA>)
|
|
setDSFA(updated)
|
|
setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
|
|
setTimeout(() => setSaveMessage(null), 3000)
|
|
} catch (error) {
|
|
console.error('Failed to update DSFA:', error)
|
|
setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}, [dsfa, dsfaId])
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/sdk/dsfa"
|
|
className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
</Link>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`px-2 py-1 text-xs rounded-full ${statusColors[dsfa.status]}`}>
|
|
{DSFA_STATUS_LABELS[dsfa.status]}
|
|
</span>
|
|
<span className={`px-2 py-1 text-xs rounded-full ${
|
|
dsfa.overall_risk_level === 'low' ? 'bg-green-100 text-green-700' :
|
|
dsfa.overall_risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' :
|
|
dsfa.overall_risk_level === 'high' ? 'bg-orange-100 text-orange-700' :
|
|
'bg-red-100 text-red-700'
|
|
}`}>
|
|
Risiko: {DSFA_RISK_LEVEL_LABELS[dsfa.overall_risk_level]}
|
|
</span>
|
|
{dsfa.assessment_id && (
|
|
<span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
|
|
UCCA-verknuepft
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-gray-900 mt-1">{dsfa.name}</h1>
|
|
{dsfa.description && (
|
|
<p className="text-sm text-gray-500 mt-1">{dsfa.description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save Message */}
|
|
{saveMessage && (
|
|
<div className={`px-4 py-2 rounded-lg text-sm ${
|
|
saveMessage.type === 'success'
|
|
? 'bg-green-100 text-green-700'
|
|
: 'bg-red-100 text-red-700'
|
|
}`}>
|
|
{saveMessage.text}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Main Content: Sidebar + Content Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
{/* Left Column - Sidebar (1/4) */}
|
|
<div className="lg:col-span-1">
|
|
<DSFASidebar
|
|
dsfa={dsfa}
|
|
activeSection={activeSection}
|
|
onSectionChange={setActiveSection}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - Content (3/4) */}
|
|
<div className="lg:col-span-3 space-y-6">
|
|
{/* Section Content Card */}
|
|
<div className="bg-white rounded-xl border border-gray-200">
|
|
{/* Section Header */}
|
|
{sectionConfig && (
|
|
<div className="p-4 bg-gray-50 border-b border-gray-200 rounded-t-xl">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-900">
|
|
{sectionConfig.number}. {sectionConfig.titleDE}
|
|
</h2>
|
|
<p className="text-sm text-gray-500 mt-1">{sectionConfig.description}</p>
|
|
</div>
|
|
<span className="px-2 py-1 bg-blue-50 text-blue-600 rounded text-xs">
|
|
{sectionConfig.gdprRef}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Section Content */}
|
|
<div className="p-6">
|
|
{/* Section 0: Threshold Analysis (NEW) */}
|
|
{activeSection === 0 && (
|
|
<ThresholdAnalysisSection
|
|
dsfa={dsfa}
|
|
onUpdate={handleGenericUpdate}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
|
|
{/* Sections 1-4: Existing */}
|
|
{activeSection === 1 && (
|
|
<Section1Editor
|
|
dsfa={dsfa}
|
|
onUpdate={(data) => handleSectionUpdate(1, data)}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
{activeSection === 2 && (
|
|
<Section2Editor
|
|
dsfa={dsfa}
|
|
onUpdate={(data) => handleSectionUpdate(2, data)}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
{activeSection === 3 && (
|
|
<Section3Editor
|
|
dsfa={dsfa}
|
|
onUpdate={(data) => handleSectionUpdate(3, data)}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
{activeSection === 4 && (
|
|
<Section4Editor
|
|
dsfa={dsfa}
|
|
onUpdate={(data) => handleSectionUpdate(4, data)}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
|
|
{/* SDM Coverage Overview (shown in Section 3 and 4) */}
|
|
{(activeSection === 3 || activeSection === 4) && (dsfa.risks?.length > 0 || dsfa.mitigations?.length > 0) && (
|
|
<SDMCoverageOverview dsfa={dsfa} />
|
|
)}
|
|
|
|
{/* Section 5: Stakeholder Consultation (NEW) */}
|
|
{activeSection === 5 && (
|
|
<StakeholderConsultationSection
|
|
dsfa={dsfa}
|
|
onUpdate={handleGenericUpdate}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
|
|
{/* Section 6: DPO & Authority Consultation */}
|
|
{activeSection === 6 && (
|
|
<div className="space-y-6">
|
|
{/* Original Section 5 Editor (DPO Opinion) */}
|
|
<Section5Editor
|
|
dsfa={dsfa}
|
|
onUpdate={(data) => handleSectionUpdate(5, data)}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
|
|
{/* Art. 36 Warning (NEW) */}
|
|
<div className="border-t border-gray-200 pt-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
Art. 36 Behoerdenkonsultation
|
|
</h3>
|
|
<Art36Warning
|
|
dsfa={dsfa}
|
|
onUpdate={handleGenericUpdate}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Section 7: Review & Maintenance (NEW) */}
|
|
{activeSection === 7 && (
|
|
<ReviewScheduleSection
|
|
dsfa={dsfa}
|
|
onUpdate={handleGenericUpdate}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
|
|
{/* Section 8: KI-Anwendungsfälle (NEW) */}
|
|
{activeSection === 8 && (
|
|
<AIUseCaseSection
|
|
dsfa={dsfa}
|
|
onUpdate={handleGenericUpdate}
|
|
isSubmitting={isSaving}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Actions Row */}
|
|
<div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
|
|
{/* Navigation */}
|
|
<div className="flex items-center gap-2">
|
|
{activeSection > 0 && (
|
|
<button
|
|
onClick={() => setActiveSection(activeSection - 1)}
|
|
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Zurueck
|
|
</button>
|
|
)}
|
|
{activeSection < 8 && (
|
|
<button
|
|
onClick={() => setActiveSection(activeSection + 1)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
|
>
|
|
Weiter
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Info */}
|
|
<div className="flex items-center gap-4 text-sm text-gray-500">
|
|
<span>Risiken: {(dsfa.risks || []).length}</span>
|
|
<span>Massnahmen: {(dsfa.mitigations || []).length}</span>
|
|
<span>KI-Module: {(dsfa.ai_use_case_modules || []).length}</span>
|
|
<span>Version: {dsfa.version || 1}</span>
|
|
</div>
|
|
|
|
{/* Export */}
|
|
<div className="flex items-center gap-2">
|
|
<button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
|
|
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
|
|
</svg>
|
|
PDF
|
|
</button>
|
|
<button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
|
|
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
JSON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|