6d3bdf8e74
All checks were successful
CI/CD / go-lint (push) Has been skipped
CI/CD / python-lint (push) Has been skipped
CI/CD / nodejs-lint (push) Has been skipped
CI/CD / test-go-ai-compliance (push) Successful in 41s
CI/CD / test-python-backend-compliance (push) Successful in 40s
CI/CD / test-python-document-crawler (push) Successful in 23s
CI/CD / test-python-dsms-gateway (push) Successful in 18s
CI/CD / validate-canonical-controls (push) Successful in 11s
CI/CD / Deploy (push) Successful in 4s
Backend: provenance endpoint (obligations, doc refs, merged duplicates, regulations summary) + atomic-stats aggregation endpoint. Frontend: ControlDetail mit Provenance-Sektionen, klickbare Navigation, neue /sdk/atomic-controls Seite mit Stats-Bar und gefilterer Liste. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
778 lines
36 KiB
TypeScript
778 lines
36 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import {
|
|
ArrowLeft, ExternalLink, BookOpen, Scale, FileText,
|
|
Eye, CheckCircle2, Trash2, Pencil, Clock,
|
|
ChevronLeft, SkipForward, GitMerge, Search, Landmark,
|
|
} from 'lucide-react'
|
|
import {
|
|
CanonicalControl, EFFORT_LABELS, BACKEND_URL,
|
|
SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
|
|
ObligationTypeBadge, GenerationStrategyBadge,
|
|
ExtractionMethodBadge, RegulationCountBadge,
|
|
VERIFICATION_METHODS, CATEGORY_OPTIONS,
|
|
ObligationInfo, DocumentReference, MergedDuplicate, RegulationSummary,
|
|
} from './helpers'
|
|
|
|
interface SimilarControl {
|
|
control_id: string
|
|
title: string
|
|
severity: string
|
|
release_state: string
|
|
tags: string[]
|
|
license_rule: number | null
|
|
verification_method: string | null
|
|
category: string | null
|
|
similarity: number
|
|
}
|
|
|
|
interface ParentLink {
|
|
parent_control_id: string
|
|
parent_title: string
|
|
link_type: string
|
|
confidence: number
|
|
source_regulation: string | null
|
|
source_article: string | null
|
|
parent_citation: Record<string, string> | null
|
|
obligation: {
|
|
text: string
|
|
action: string
|
|
object: string
|
|
normative_strength: string
|
|
} | null
|
|
}
|
|
|
|
interface TraceabilityData {
|
|
control_id: string
|
|
title: string
|
|
is_atomic: boolean
|
|
parent_links: ParentLink[]
|
|
children: Array<{
|
|
control_id: string
|
|
title: string
|
|
category: string
|
|
severity: string
|
|
decomposition_method: string
|
|
}>
|
|
source_count: number
|
|
// Extended provenance fields
|
|
obligations?: ObligationInfo[]
|
|
obligation_count?: number
|
|
document_references?: DocumentReference[]
|
|
merged_duplicates?: MergedDuplicate[]
|
|
merged_duplicates_count?: number
|
|
regulations_summary?: RegulationSummary[]
|
|
}
|
|
|
|
interface ControlDetailProps {
|
|
ctrl: CanonicalControl
|
|
onBack: () => void
|
|
onEdit: () => void
|
|
onDelete: (controlId: string) => void
|
|
onReview: (controlId: string, action: string) => void
|
|
onRefresh?: () => void
|
|
onNavigateToControl?: (controlId: string) => void
|
|
// Review mode navigation
|
|
reviewMode?: boolean
|
|
reviewIndex?: number
|
|
reviewTotal?: number
|
|
onReviewPrev?: () => void
|
|
onReviewNext?: () => void
|
|
}
|
|
|
|
export function ControlDetail({
|
|
ctrl,
|
|
onBack,
|
|
onEdit,
|
|
onDelete,
|
|
onReview,
|
|
onRefresh,
|
|
onNavigateToControl,
|
|
reviewMode,
|
|
reviewIndex = 0,
|
|
reviewTotal = 0,
|
|
onReviewPrev,
|
|
onReviewNext,
|
|
}: ControlDetailProps) {
|
|
const [similarControls, setSimilarControls] = useState<SimilarControl[]>([])
|
|
const [loadingSimilar, setLoadingSimilar] = useState(false)
|
|
const [selectedDuplicates, setSelectedDuplicates] = useState<Set<string>>(new Set())
|
|
const [merging, setMerging] = useState(false)
|
|
const [traceability, setTraceability] = useState<TraceabilityData | null>(null)
|
|
const [loadingTrace, setLoadingTrace] = useState(false)
|
|
|
|
const loadTraceability = useCallback(async () => {
|
|
setLoadingTrace(true)
|
|
try {
|
|
// Try provenance first (extended data), fall back to traceability
|
|
let res = await fetch(`${BACKEND_URL}?endpoint=provenance&id=${ctrl.control_id}`)
|
|
if (!res.ok) {
|
|
res = await fetch(`${BACKEND_URL}?endpoint=traceability&id=${ctrl.control_id}`)
|
|
}
|
|
if (res.ok) {
|
|
setTraceability(await res.json())
|
|
}
|
|
} catch { /* ignore */ }
|
|
finally { setLoadingTrace(false) }
|
|
}, [ctrl.control_id])
|
|
|
|
useEffect(() => {
|
|
loadSimilarControls()
|
|
loadTraceability()
|
|
setSelectedDuplicates(new Set())
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [ctrl.control_id])
|
|
|
|
const loadSimilarControls = async () => {
|
|
setLoadingSimilar(true)
|
|
try {
|
|
const res = await fetch(`${BACKEND_URL}?endpoint=similar&id=${ctrl.control_id}`)
|
|
if (res.ok) {
|
|
setSimilarControls(await res.json())
|
|
}
|
|
} catch { /* ignore */ }
|
|
finally { setLoadingSimilar(false) }
|
|
}
|
|
|
|
const toggleDuplicate = (controlId: string) => {
|
|
setSelectedDuplicates(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(controlId)) next.delete(controlId)
|
|
else next.add(controlId)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const handleMergeDuplicates = async () => {
|
|
if (selectedDuplicates.size === 0) return
|
|
if (!confirm(`${selectedDuplicates.size} Controls als Duplikate markieren und Tags/Anchors in ${ctrl.control_id} zusammenfuehren?`)) return
|
|
|
|
setMerging(true)
|
|
try {
|
|
// For each duplicate: mark as deprecated
|
|
for (const dupId of selectedDuplicates) {
|
|
await fetch(`${BACKEND_URL}?endpoint=update-control&id=${dupId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ release_state: 'deprecated' }),
|
|
})
|
|
}
|
|
// Refresh to show updated state
|
|
if (onRefresh) onRefresh()
|
|
setSelectedDuplicates(new Set())
|
|
loadSimilarControls()
|
|
} catch {
|
|
alert('Fehler beim Zusammenfuehren')
|
|
} finally {
|
|
setMerging(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="border-b border-gray-200 bg-white px-6 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<button onClick={onBack} className="text-gray-400 hover:text-gray-600">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</button>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
|
|
<SeverityBadge severity={ctrl.severity} />
|
|
<StateBadge state={ctrl.release_state} />
|
|
<LicenseRuleBadge rule={ctrl.license_rule} />
|
|
<VerificationMethodBadge method={ctrl.verification_method} />
|
|
<CategoryBadge category={ctrl.category} />
|
|
<TargetAudienceBadge audience={ctrl.target_audience} />
|
|
<GenerationStrategyBadge strategy={ctrl.generation_strategy} />
|
|
<ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{reviewMode && (
|
|
<div className="flex items-center gap-1 mr-3">
|
|
<button onClick={onReviewPrev} disabled={reviewIndex === 0} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
<span className="text-xs text-gray-500 font-medium">{reviewIndex + 1} / {reviewTotal}</span>
|
|
<button onClick={onReviewNext} disabled={reviewIndex >= reviewTotal - 1} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
|
|
<SkipForward className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<button onClick={onEdit} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
|
|
<Pencil className="w-3.5 h-3.5 inline mr-1" />Bearbeiten
|
|
</button>
|
|
<button onClick={() => onDelete(ctrl.control_id)} className="px-3 py-1.5 text-sm text-red-600 border border-red-300 rounded-lg hover:bg-red-50">
|
|
<Trash2 className="w-3.5 h-3.5 inline mr-1" />Loeschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full space-y-6">
|
|
{/* Objective */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Ziel</h3>
|
|
<p className="text-sm text-gray-700 leading-relaxed">{ctrl.objective}</p>
|
|
</section>
|
|
|
|
{/* Rationale */}
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Begruendung</h3>
|
|
<p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
|
|
</section>
|
|
|
|
{/* Quellennachweis (Rule 1 + 2) — dynamic label based on source_type */}
|
|
{ctrl.source_citation && (
|
|
<section className={`border rounded-lg p-4 ${
|
|
ctrl.source_citation.source_type === 'law' ? 'bg-blue-50 border-blue-200' :
|
|
ctrl.source_citation.source_type === 'guideline' ? 'bg-indigo-50 border-indigo-200' :
|
|
'bg-teal-50 border-teal-200'
|
|
}`}>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Scale className={`w-4 h-4 ${
|
|
ctrl.source_citation.source_type === 'law' ? 'text-blue-600' :
|
|
ctrl.source_citation.source_type === 'guideline' ? 'text-indigo-600' :
|
|
'text-teal-600'
|
|
}`} />
|
|
<h3 className={`text-sm font-semibold ${
|
|
ctrl.source_citation.source_type === 'law' ? 'text-blue-900' :
|
|
ctrl.source_citation.source_type === 'guideline' ? 'text-indigo-900' :
|
|
'text-teal-900'
|
|
}`}>{
|
|
ctrl.source_citation.source_type === 'law' ? 'Gesetzliche Grundlage' :
|
|
ctrl.source_citation.source_type === 'guideline' ? 'Behoerdliche Leitlinie' :
|
|
'Standard / Best Practice'
|
|
}</h3>
|
|
{ctrl.source_citation.source_type === 'law' && (
|
|
<span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Direkte gesetzliche Pflicht</span>
|
|
)}
|
|
{ctrl.source_citation.source_type === 'guideline' && (
|
|
<span className="text-xs bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full">Aufsichtsbehoerdliche Empfehlung</span>
|
|
)}
|
|
{(ctrl.source_citation.source_type === 'standard' || (!ctrl.source_citation.source_type && ctrl.license_rule === 2)) && (
|
|
<span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded-full">Freiwilliger Standard</span>
|
|
)}
|
|
{(!ctrl.source_citation.source_type && ctrl.license_rule === 1) && (
|
|
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Noch nicht klassifiziert</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1">
|
|
{ctrl.source_citation.source ? (
|
|
<p className="text-sm font-medium text-blue-900 mb-1">
|
|
{ctrl.source_citation.source}
|
|
{ctrl.source_citation.article && ` — ${ctrl.source_citation.article}`}
|
|
{ctrl.source_citation.paragraph && ` ${ctrl.source_citation.paragraph}`}
|
|
</p>
|
|
) : ctrl.generation_metadata?.source_regulation ? (
|
|
<p className="text-sm font-medium text-blue-900 mb-1">{String(ctrl.generation_metadata.source_regulation)}</p>
|
|
) : null}
|
|
{ctrl.source_citation.license && (
|
|
<p className="text-xs text-blue-600">Lizenz: {ctrl.source_citation.license}</p>
|
|
)}
|
|
{ctrl.source_citation.license_notice && (
|
|
<p className="text-xs text-blue-600 mt-0.5">{ctrl.source_citation.license_notice}</p>
|
|
)}
|
|
</div>
|
|
{ctrl.source_citation.url && (
|
|
<a
|
|
href={ctrl.source_citation.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap"
|
|
>
|
|
<ExternalLink className="w-3.5 h-3.5" />Quelle
|
|
</a>
|
|
)}
|
|
</div>
|
|
{ctrl.source_original_text && (
|
|
<details className="mt-3">
|
|
<summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
|
|
<p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto whitespace-pre-wrap">
|
|
{ctrl.source_original_text}
|
|
</p>
|
|
</details>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{/* Rechtsgrundlagen / Traceability (atomic controls) */}
|
|
{traceability && traceability.parent_links.length > 0 && (
|
|
<section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Landmark className="w-4 h-4 text-violet-600" />
|
|
<h3 className="text-sm font-semibold text-violet-900">
|
|
Rechtsgrundlagen ({traceability.source_count} {traceability.source_count === 1 ? 'Quelle' : 'Quellen'})
|
|
</h3>
|
|
<ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
|
|
{traceability.regulations_summary && traceability.regulations_summary.map(rs => (
|
|
<span key={rs.regulation_code} className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-violet-200 text-violet-800">
|
|
{rs.regulation_code}
|
|
</span>
|
|
))}
|
|
{loadingTrace && <span className="text-xs text-violet-400">Laden...</span>}
|
|
</div>
|
|
<div className="space-y-3">
|
|
{traceability.parent_links.map((link, i) => (
|
|
<div key={i} className="bg-white/60 border border-violet-100 rounded-lg p-3">
|
|
<div className="flex items-start gap-2">
|
|
<Scale className="w-4 h-4 text-violet-500 mt-0.5 flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{link.source_regulation && (
|
|
<span className="text-sm font-semibold text-violet-900">{link.source_regulation}</span>
|
|
)}
|
|
{link.source_article && (
|
|
<span className="text-sm text-violet-700">{link.source_article}</span>
|
|
)}
|
|
{!link.source_regulation && link.parent_citation?.source && (
|
|
<span className="text-sm font-semibold text-violet-900">
|
|
{link.parent_citation.source}
|
|
{link.parent_citation.article && ` — ${link.parent_citation.article}`}
|
|
</span>
|
|
)}
|
|
<span className={`text-xs px-1.5 py-0.5 rounded ${
|
|
link.link_type === 'decomposition' ? 'bg-violet-100 text-violet-600' :
|
|
link.link_type === 'dedup_merge' ? 'bg-blue-100 text-blue-600' :
|
|
'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{link.link_type === 'decomposition' ? 'Ableitung' :
|
|
link.link_type === 'dedup_merge' ? 'Dedup' :
|
|
link.link_type}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-violet-600 mt-1">
|
|
via{' '}
|
|
{onNavigateToControl ? (
|
|
<button
|
|
onClick={() => onNavigateToControl(link.parent_control_id)}
|
|
className="font-mono font-medium text-purple-700 bg-purple-50 px-1 py-0.5 rounded hover:bg-purple-100 hover:underline"
|
|
>
|
|
{link.parent_control_id}
|
|
</button>
|
|
) : (
|
|
<span className="font-mono font-medium text-purple-700 bg-purple-50 px-1 py-0.5 rounded">
|
|
{link.parent_control_id}
|
|
</span>
|
|
)}
|
|
{link.parent_title && (
|
|
<span className="text-violet-500 ml-1">— {link.parent_title}</span>
|
|
)}
|
|
</p>
|
|
{link.obligation && (
|
|
<p className="text-xs text-violet-500 mt-1.5 bg-violet-50 rounded p-2">
|
|
<span className={`inline-block mr-1.5 px-1.5 py-0.5 rounded text-xs font-medium ${
|
|
link.obligation.normative_strength === 'must' ? 'bg-red-100 text-red-700' :
|
|
link.obligation.normative_strength === 'should' ? 'bg-amber-100 text-amber-700' :
|
|
'bg-green-100 text-green-700'
|
|
}`}>
|
|
{link.obligation.normative_strength === 'must' ? 'MUSS' :
|
|
link.obligation.normative_strength === 'should' ? 'SOLL' : 'KANN'}
|
|
</span>
|
|
{link.obligation.text.slice(0, 200)}
|
|
{link.obligation.text.length > 200 ? '...' : ''}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Fallback: simple parent display when traceability not loaded yet */}
|
|
{ctrl.parent_control_uuid && (!traceability || traceability.parent_links.length === 0) && !loadingTrace && (
|
|
<section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<GitMerge className="w-4 h-4 text-violet-600" />
|
|
<h3 className="text-sm font-semibold text-violet-900">Atomares Control</h3>
|
|
<ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
|
|
</div>
|
|
<p className="text-sm text-violet-800">
|
|
Abgeleitet aus Eltern-Control{' '}
|
|
<span className="font-mono font-semibold text-purple-700 bg-purple-100 px-1.5 py-0.5 rounded">
|
|
{ctrl.parent_control_id || ctrl.parent_control_uuid}
|
|
</span>
|
|
{ctrl.parent_control_title && (
|
|
<span className="text-violet-700 ml-1">— {ctrl.parent_control_title}</span>
|
|
)}
|
|
</p>
|
|
</section>
|
|
)}
|
|
|
|
{/* Document References (atomic controls) */}
|
|
{traceability && traceability.is_atomic && traceability.document_references && traceability.document_references.length > 0 && (
|
|
<section className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<FileText className="w-4 h-4 text-indigo-600" />
|
|
<h3 className="text-sm font-semibold text-indigo-900">
|
|
Original-Dokumente ({traceability.document_references.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{traceability.document_references.map((dr, i) => (
|
|
<div key={i} className="flex items-center gap-2 text-sm bg-white/60 border border-indigo-100 rounded-lg p-2">
|
|
<span className="font-semibold text-indigo-900">{dr.regulation_code}</span>
|
|
{dr.article && <span className="text-indigo-700">{dr.article}</span>}
|
|
{dr.paragraph && <span className="text-indigo-600 text-xs">{dr.paragraph}</span>}
|
|
<span className="ml-auto flex items-center gap-1.5">
|
|
<ExtractionMethodBadge method={dr.extraction_method} />
|
|
{dr.confidence !== null && (
|
|
<span className="text-xs text-gray-500">{(dr.confidence * 100).toFixed(0)}%</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Obligations (rich controls) */}
|
|
{traceability && !traceability.is_atomic && traceability.obligations && traceability.obligations.length > 0 && (
|
|
<section className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Scale className="w-4 h-4 text-amber-600" />
|
|
<h3 className="text-sm font-semibold text-amber-900">
|
|
Abgeleitete Pflichten ({traceability.obligation_count ?? traceability.obligations.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{traceability.obligations.map((ob) => (
|
|
<div key={ob.candidate_id} className="bg-white/60 border border-amber-100 rounded-lg p-3">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
<span className="font-mono text-xs text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded">{ob.candidate_id}</span>
|
|
<span className={`inline-block px-1.5 py-0.5 rounded text-xs font-medium ${
|
|
ob.normative_strength === 'must' ? 'bg-red-100 text-red-700' :
|
|
ob.normative_strength === 'should' ? 'bg-amber-100 text-amber-700' :
|
|
'bg-green-100 text-green-700'
|
|
}`}>
|
|
{ob.normative_strength === 'must' ? 'MUSS' :
|
|
ob.normative_strength === 'should' ? 'SOLL' : 'KANN'}
|
|
</span>
|
|
{ob.action && <span className="text-xs text-amber-600">{ob.action}</span>}
|
|
{ob.object && <span className="text-xs text-amber-500">→ {ob.object}</span>}
|
|
</div>
|
|
<p className="text-xs text-gray-700 leading-relaxed">
|
|
{ob.obligation_text.slice(0, 300)}
|
|
{ob.obligation_text.length > 300 ? '...' : ''}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Merged Duplicates */}
|
|
{traceability && traceability.merged_duplicates && traceability.merged_duplicates.length > 0 && (
|
|
<section className="bg-slate-50 border border-slate-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<GitMerge className="w-4 h-4 text-slate-600" />
|
|
<h3 className="text-sm font-semibold text-slate-900">
|
|
Zusammengefuehrte Duplikate ({traceability.merged_duplicates_count ?? traceability.merged_duplicates.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{traceability.merged_duplicates.map((dup) => (
|
|
<div key={dup.control_id} className="flex items-center gap-2 text-sm">
|
|
{onNavigateToControl ? (
|
|
<button
|
|
onClick={() => onNavigateToControl(dup.control_id)}
|
|
className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded hover:bg-purple-100 hover:underline"
|
|
>
|
|
{dup.control_id}
|
|
</button>
|
|
) : (
|
|
<span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{dup.control_id}</span>
|
|
)}
|
|
<span className="text-gray-700 flex-1 truncate">{dup.title}</span>
|
|
{dup.source_regulation && (
|
|
<span className="text-xs text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded">{dup.source_regulation}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Child controls (rich controls that have atomic children) */}
|
|
{traceability && traceability.children.length > 0 && (
|
|
<section className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<GitMerge className="w-4 h-4 text-emerald-600" />
|
|
<h3 className="text-sm font-semibold text-emerald-900">
|
|
Abgeleitete Controls ({traceability.children.length})
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{traceability.children.map((child) => (
|
|
<div key={child.control_id} className="flex items-center gap-2 text-sm">
|
|
{onNavigateToControl ? (
|
|
<button
|
|
onClick={() => onNavigateToControl(child.control_id)}
|
|
className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded hover:bg-purple-100 hover:underline"
|
|
>
|
|
{child.control_id}
|
|
</button>
|
|
) : (
|
|
<span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{child.control_id}</span>
|
|
)}
|
|
<span className="text-gray-700 flex-1 truncate">{child.title}</span>
|
|
<SeverityBadge severity={child.severity} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Impliziter Gesetzesbezug (Rule 3 — reformuliert, kein Originaltext) */}
|
|
{!ctrl.source_citation && ctrl.open_anchors.length > 0 && (
|
|
<section className="bg-amber-50 border border-amber-200 rounded-lg p-3">
|
|
<div className="flex items-center gap-2">
|
|
<Scale className="w-4 h-4 text-amber-600" />
|
|
<div className="flex-1">
|
|
<p className="text-xs text-amber-800 font-medium">Abgeleitet aus regulatorischen Anforderungen</p>
|
|
<p className="text-xs text-amber-700 mt-0.5">
|
|
Dieser Control wurde aus geschuetzten Quellen reformuliert (z.B. BSI Grundschutz, ISO 27001).
|
|
Die konkreten Massnahmen leiten sich aus den Open-Source-Referenzen unten ab.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Scope */}
|
|
{(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Geltungsbereich</h3>
|
|
<div className="grid grid-cols-3 gap-4 text-xs">
|
|
{ctrl.scope.platforms?.length ? (
|
|
<div><span className="text-gray-500">Plattformen:</span> <span className="text-gray-700">{ctrl.scope.platforms.join(', ')}</span></div>
|
|
) : null}
|
|
{ctrl.scope.components?.length ? (
|
|
<div><span className="text-gray-500">Komponenten:</span> <span className="text-gray-700">{ctrl.scope.components.join(', ')}</span></div>
|
|
) : null}
|
|
{ctrl.scope.data_classes?.length ? (
|
|
<div><span className="text-gray-500">Datenklassen:</span> <span className="text-gray-700">{ctrl.scope.data_classes.join(', ')}</span></div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Requirements */}
|
|
{ctrl.requirements.length > 0 && (
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Anforderungen</h3>
|
|
<ol className="list-decimal list-inside space-y-1">
|
|
{ctrl.requirements.map((r, i) => (
|
|
<li key={i} className="text-sm text-gray-700">{r}</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
)}
|
|
|
|
{/* Test Procedure */}
|
|
{ctrl.test_procedure.length > 0 && (
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Pruefverfahren</h3>
|
|
<ol className="list-decimal list-inside space-y-1">
|
|
{ctrl.test_procedure.map((s, i) => (
|
|
<li key={i} className="text-sm text-gray-700">{s}</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
)}
|
|
|
|
{/* Evidence — handles both {type, description} objects and plain strings */}
|
|
{ctrl.evidence.length > 0 && (
|
|
<section>
|
|
<h3 className="text-sm font-semibold text-gray-900 mb-2">Nachweise</h3>
|
|
<div className="space-y-2">
|
|
{ctrl.evidence.map((ev, i) => (
|
|
<div key={i} className="flex items-start gap-2 text-sm text-gray-700">
|
|
<FileText className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
|
|
{typeof ev === 'string' ? (
|
|
<div>{ev}</div>
|
|
) : (
|
|
<div><span className="font-medium">{ev.type}:</span> {ev.description}</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Meta */}
|
|
<section className="grid grid-cols-3 gap-4 text-xs text-gray-500">
|
|
{ctrl.risk_score !== null && <div>Risiko-Score: <span className="text-gray-700 font-medium">{ctrl.risk_score}</span></div>}
|
|
{ctrl.implementation_effort && <div>Aufwand: <span className="text-gray-700 font-medium">{EFFORT_LABELS[ctrl.implementation_effort] || ctrl.implementation_effort}</span></div>}
|
|
{ctrl.tags.length > 0 && (
|
|
<div className="col-span-3 flex items-center gap-1 flex-wrap">
|
|
{ctrl.tags.map(t => (
|
|
<span key={t} className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{t}</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Open Anchors */}
|
|
<section className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<BookOpen className="w-4 h-4 text-green-700" />
|
|
<h3 className="text-sm font-semibold text-green-900">Open-Source-Referenzen ({ctrl.open_anchors.length})</h3>
|
|
</div>
|
|
{ctrl.open_anchors.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{ctrl.open_anchors.map((anchor, i) => (
|
|
<div key={i} className="flex items-center gap-2 text-sm">
|
|
<ExternalLink className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
|
|
<span className="font-medium text-green-800">{anchor.framework}</span>
|
|
<span className="text-green-700">{anchor.ref}</span>
|
|
{anchor.url && (
|
|
<a href={anchor.url} target="_blank" rel="noopener noreferrer" className="text-green-600 hover:text-green-800 underline text-xs ml-auto">
|
|
Link
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-green-600">Keine Referenzen vorhanden.</p>
|
|
)}
|
|
</section>
|
|
|
|
{/* Generation Metadata (internal) */}
|
|
{ctrl.generation_metadata && (
|
|
<section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Clock className="w-4 h-4 text-gray-500" />
|
|
<h3 className="text-sm font-semibold text-gray-700">Generierungsdetails (intern)</h3>
|
|
</div>
|
|
<div className="text-xs text-gray-600 space-y-1">
|
|
{ctrl.generation_metadata.processing_path && (
|
|
<p>Pfad: {String(ctrl.generation_metadata.processing_path)}</p>
|
|
)}
|
|
{ctrl.generation_metadata.decomposition_method && (
|
|
<p>Methode: {String(ctrl.generation_metadata.decomposition_method)}</p>
|
|
)}
|
|
{ctrl.generation_metadata.pass0b_model && (
|
|
<p>LLM: {String(ctrl.generation_metadata.pass0b_model)}</p>
|
|
)}
|
|
{ctrl.generation_metadata.obligation_type && (
|
|
<p>Obligation-Typ: {String(ctrl.generation_metadata.obligation_type)}</p>
|
|
)}
|
|
{ctrl.generation_metadata.similarity_status && (
|
|
<p className="text-red-600">Similarity: {String(ctrl.generation_metadata.similarity_status)}</p>
|
|
)}
|
|
{Array.isArray(ctrl.generation_metadata.similar_controls) && (
|
|
<div>
|
|
<p className="font-medium">Aehnliche Controls:</p>
|
|
{(ctrl.generation_metadata.similar_controls as Array<Record<string, unknown>>).map((s, i) => (
|
|
<p key={i} className="ml-2">{String(s.control_id)} — {String(s.title)} ({String(s.similarity)})</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Similar Controls (Dedup) */}
|
|
<section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Search className="w-4 h-4 text-gray-600" />
|
|
<h3 className="text-sm font-semibold text-gray-800">Aehnliche Controls</h3>
|
|
{loadingSimilar && <span className="text-xs text-gray-400">Laden...</span>}
|
|
</div>
|
|
|
|
{similarControls.length > 0 ? (
|
|
<>
|
|
<div className="mb-3 p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
|
|
<input type="radio" checked readOnly className="text-purple-600" />
|
|
<span className="text-sm font-medium text-purple-700">{ctrl.control_id} — {ctrl.title}</span>
|
|
<span className="text-xs text-gray-400 ml-auto">Behalten (Haupt-Control)</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{similarControls.map(sim => (
|
|
<div key={sim.control_id} className="p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedDuplicates.has(sim.control_id)}
|
|
onChange={() => toggleDuplicate(sim.control_id)}
|
|
className="text-red-600"
|
|
/>
|
|
<span className="text-xs font-mono text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{sim.control_id}</span>
|
|
<span className="text-sm text-gray-700 flex-1">{sim.title}</span>
|
|
<span className="text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">
|
|
{(sim.similarity * 100).toFixed(1)}%
|
|
</span>
|
|
<LicenseRuleBadge rule={sim.license_rule} />
|
|
<VerificationMethodBadge method={sim.verification_method} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{selectedDuplicates.size > 0 && (
|
|
<button
|
|
onClick={handleMergeDuplicates}
|
|
disabled={merging}
|
|
className="mt-3 flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
<GitMerge className="w-3.5 h-3.5" />
|
|
{merging ? 'Zusammenfuehren...' : `${selectedDuplicates.size} Duplikat(e) zusammenfuehren`}
|
|
</button>
|
|
)}
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-gray-500">
|
|
{loadingSimilar ? 'Suche aehnliche Controls...' : 'Keine aehnlichen Controls gefunden.'}
|
|
</p>
|
|
)}
|
|
</section>
|
|
|
|
{/* Review Actions */}
|
|
{['needs_review', 'too_close', 'duplicate'].includes(ctrl.release_state) && (
|
|
<section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Eye className="w-4 h-4 text-yellow-700" />
|
|
<h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
|
|
{reviewMode && (
|
|
<span className="text-xs text-yellow-600 ml-auto">Review-Modus aktiv</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => onReview(ctrl.control_id, 'approve')}
|
|
className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
|
|
>
|
|
<CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />
|
|
Akzeptieren
|
|
</button>
|
|
<button
|
|
onClick={() => onReview(ctrl.control_id, 'reject')}
|
|
className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5 inline mr-1" />
|
|
Ablehnen
|
|
</button>
|
|
<button
|
|
onClick={onEdit}
|
|
className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
|
|
>
|
|
<Pencil className="w-3.5 h-3.5 inline mr-1" />
|
|
Ueberarbeiten
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|