feat(iace): CRA / Cyber tab — demo CRA integration on the Kistenhub project
New "CRA / Cyber" tab in the IACE project (Zusatzmodule). Treats the Kistenhubgeraet CE project as if it had an IoT module; invented cyber findings are mapped to CRA Annex I requirements via the REAL backend mapper output (faithful), and crucially cross-linked to the existing CE safety hazards they re-open (cyber defeats a mechanically-mitigated guard -> CRA x Machinery Reg). Frontend fixture for now; live wiring to the mapper endpoint follows. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,160 @@
|
||||
'use client'
|
||||
|
||||
import { CRADemo } from '../_hooks/useCRADemo'
|
||||
|
||||
const RISK_BADGE: Record<string, string> = {
|
||||
CRITICAL: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
|
||||
HIGH: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
||||
MEDIUM: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
LOW: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
|
||||
}
|
||||
|
||||
function RiskBadge({ level }: { level: string }) {
|
||||
return (
|
||||
<span className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-semibold ${RISK_BADGE[level] || RISK_BADGE.LOW}`}>
|
||||
{level}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export function CRACyberView({ data }: { data: CRADemo }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Co-Pilot framing — advisory, not alarmist */}
|
||||
<div className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/60 dark:bg-purple-900/20 p-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">CRA / Cyber-Risiko</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{data.scenario}</p>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Wir verknüpfen die Cyber-Befunde Ihres Repo-Scans mit den CRA-Anforderungen (Annex I) und mit Ihrer
|
||||
bestehenden CE-Risikobeurteilung. Die Punkte sind Handlungsfelder zur gemeinsamen Klärung mit DSB/Anwalt —
|
||||
keine automatische Verstoßfeststellung. <span className="italic">Demo: erfundene Findings, echtes CRA-Mapping.</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Summary tiles */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<Tile label="Cyber-Befunde" value={String(data.findings.length)} />
|
||||
<Tile label="CRA-Anforderungen betroffen" value={String(data.requirements_touched.length)} sub="von 40 (Annex I)" />
|
||||
<Tile label="Abdeckung" value={`${data.coverage_pct}%`} sub="Findings → Anforderung" />
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
|
||||
<p className="text-[11px] text-gray-500 mb-1">Risiko-Verteilung</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as const).map((lvl) =>
|
||||
data.by_risk[lvl] ? (
|
||||
<span key={lvl} className={`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-semibold ${RISK_BADGE[lvl]}`}>
|
||||
{data.by_risk[lvl]} {lvl}
|
||||
</span>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cyber meets Safety — the core integration idea */}
|
||||
<div className="rounded-xl border border-orange-200 dark:border-orange-800 bg-white dark:bg-gray-800">
|
||||
<div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
|
||||
<h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Cyber trifft Safety</h2>
|
||||
<p className="text-xs text-gray-500 mt-0.5">
|
||||
Wo ein Cyber-Risiko eine bereits <span className="font-medium">mechanisch gemilderte</span> Gefährdung Ihrer
|
||||
CE-Risikobeurteilung wieder öffnet (CRA × Maschinen-VO).
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{data.cross_links.map((cl, i) => (
|
||||
<div key={i} className="rounded-lg border border-orange-200 dark:border-orange-800/60 bg-orange-50/50 dark:bg-orange-900/10 p-3">
|
||||
<p className="text-sm font-medium text-gray-800 dark:text-gray-200">{cl.safety_hazard}</p>
|
||||
<p className="text-[11px] text-gray-500 mt-0.5">{cl.safety_ref}</p>
|
||||
<div className="mt-2 grid md:grid-cols-2 gap-2 text-xs">
|
||||
<div className="text-gray-600 dark:text-gray-300">
|
||||
<span className="text-gray-400">Bisherige Maßnahme:</span> {cl.original_measure}
|
||||
</div>
|
||||
<div className="text-gray-600 dark:text-gray-300">
|
||||
<span className="text-gray-400">Cyber-Befunde:</span> {cl.cyber_finding_ids.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-700 dark:text-gray-300 mt-2">{cl.cyber_breaks_it}</p>
|
||||
<span className="inline-block mt-2 rounded px-1.5 py-0.5 text-[10px] font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
|
||||
Restrisiko: {cl.residual}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Findings -> CRA requirement */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700">
|
||||
<h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Befunde → CRA-Anforderung</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-gray-500 border-b border-gray-200 dark:border-gray-700 text-left">
|
||||
<th className="py-2 px-4">Cyber-Befund</th>
|
||||
<th className="py-2 px-3">CRA-Anforderung</th>
|
||||
<th className="py-2 px-3">Annex I</th>
|
||||
<th className="py-2 px-3">Risiko</th>
|
||||
<th className="py-2 px-4">Maßnahmen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.findings.map((f) => (
|
||||
<tr key={f.id} className="border-b border-gray-100 dark:border-gray-700/50 align-top">
|
||||
<td className="py-2 px-4 max-w-xs">
|
||||
<div className="text-gray-800 dark:text-gray-200">{f.title}</div>
|
||||
<div className="text-[10px] text-gray-400">{f.id} · {f.cwe} · {f.location}</div>
|
||||
</td>
|
||||
<td className="py-2 px-3 text-gray-600 dark:text-gray-300">
|
||||
<span className="font-medium">{f.primary_requirement}</span> {f.requirement_title}
|
||||
{f.requirement_ids.length > 1 && (
|
||||
<span className="text-[10px] text-gray-400"> +{f.requirement_ids.length - 1}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-gray-500">{f.annex_anchor}</td>
|
||||
<td className="py-2 px-3"><RiskBadge level={f.risk_level} /></td>
|
||||
<td className="py-2 px-4 text-gray-600 dark:text-gray-300">
|
||||
{f.measures.length ? f.measures.map((me) => me.id).join(', ') : <span className="text-gray-400">—</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Measures + deadlines */}
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
||||
<h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">Empfohlene Maßnahmen</h2>
|
||||
<ul className="space-y-1.5">
|
||||
{data.open_measures.map((me) => (
|
||||
<li key={me.id} className="text-xs text-gray-600 dark:text-gray-300">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200">{me.id}</span> — {me.description}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
|
||||
<h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">CRA-Fristen</h2>
|
||||
<ul className="space-y-1.5">
|
||||
{data.deadlines.map((d) => (
|
||||
<li key={d.date} className="text-xs text-gray-600 dark:text-gray-300 flex gap-2">
|
||||
<span className="font-mono text-gray-500">{d.date}</span> {d.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Tile({ label, value, sub }: { label: string; value: string; sub?: string }) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
|
||||
<p className="text-[11px] text-gray-500">{label}</p>
|
||||
<p className="text-xl font-semibold text-gray-900 dark:text-gray-100">{value}</p>
|
||||
{sub && <p className="text-[10px] text-gray-400">{sub}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user