feat(cra): CRA/Cyber-Tab in 3 Zielgruppen-Ebenen + Brücke /sdk/cra
Frontend-Reorganisation (kein Datenmodell-Umbau): - Ebene 1 (Management): CRA-Readiness, offene Risiken (Klartext Kritisch/Hoch/..), Handlungsaufwand nach Evidenz-Typ, betroffene Vorschriften, Top-Risiken, Fristen. - Ebene 2 (Safety × Cyber): "Cyber öffnet CE-Gefährdung erneut" als Hero (USP). - Ebene 3 (Technik): Befund-Tabelle einklappbar, interne IDs (CRA-AI-x/CWE/NIST/ OWASP/ISO) nur im Detail, Maßnahmen-Namen statt M-IDs, größere Schrift. - Brücke: IACE-CRA-Tab ↔ /sdk/cra (Readiness-Check) beidseitig verlinkt. - CRACyberView in Unterkomponenten gesplittet (LOC < 300). scripts/qa/poc_cra_article_assign.py: PoC Artikel/Absatz-Zuordnung (Pfad B2b, zurückgestellt — nicht MVP). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -1,312 +1,37 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useState } from 'react'
|
||||
import { CRADemo, CRAFinding, Measure } 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>
|
||||
)
|
||||
}
|
||||
|
||||
const TIER_BADGE: Record<string, string> = {
|
||||
P0: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
|
||||
P1: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
||||
P2: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
P3: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300',
|
||||
}
|
||||
|
||||
function TierBadge({ tier, reason }: { tier?: string; reason?: string }) {
|
||||
if (!tier) return <span className="text-gray-300">—</span>
|
||||
return (
|
||||
<span title={reason} className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-bold ${TIER_BADGE[tier] || TIER_BADGE.P3}`}>
|
||||
{tier}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const EVIDENCE_LABEL: Record<string, string> = {
|
||||
code: 'Code-nah',
|
||||
hybrid: 'Code + Prozess',
|
||||
process: 'Prozess',
|
||||
document: 'Dokumentation',
|
||||
}
|
||||
|
||||
// "Code-nah" = der Scan kann es im Quellcode verorten → Code-Fix im Ticket möglich.
|
||||
// Sonst = Prozess/Organisation: wir benennen den Sollzustand, kein Auto-Fix.
|
||||
function EvidenceTag({ et }: { et?: string }) {
|
||||
if (!et || !EVIDENCE_LABEL[et]) return null
|
||||
const codeish = et === 'code' || et === 'hybrid'
|
||||
return (
|
||||
<span
|
||||
title={codeish ? 'Code-Fix im Ticket möglich (wenn der Scan die Stelle sieht)' : 'Prozess-/Build-Maßnahme — kein Auto-Fix'}
|
||||
className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
codeish
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
|
||||
: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'}`}
|
||||
>
|
||||
{EVIDENCE_LABEL[et]}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function FindingsTable({ findings, measuresById }: { findings: CRAFinding[]; measuresById: Record<string, Measure> }) {
|
||||
const [open, setOpen] = useState<Record<string, boolean>>({})
|
||||
const toggle = (id: string) => setOpen((o) => ({ ...o, [id]: !o[id] }))
|
||||
return (
|
||||
<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-3">Prio</th>
|
||||
<th className="py-2 px-4">Cyber-Befund</th>
|
||||
<th className="py-2 px-3">CRA-Anforderung</th>
|
||||
<th className="py-2 px-3">Risiko</th>
|
||||
<th className="py-2 px-3">Maßnahmen</th>
|
||||
<th className="py-2 px-3 text-right">Best Practice</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{findings.map((f) => (
|
||||
<Fragment key={f.id}>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-700/50 align-top">
|
||||
<td className="py-2 px-3"><TierBadge tier={f.priority_tier} reason={f.priority_reason} /></td>
|
||||
<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>
|
||||
<div className="mt-1"><EvidenceTag et={f.evidence_type} /></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>
|
||||
)}
|
||||
<div className="text-[10px] text-gray-400">{f.annex_anchor}</div>
|
||||
</td>
|
||||
<td className="py-2 px-3"><RiskBadge level={f.risk_level} /></td>
|
||||
<td className="py-2 px-3 text-gray-600 dark:text-gray-300">
|
||||
{f.measures.length ? f.measures.join(', ') : <span className="text-gray-400">—</span>}
|
||||
</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
<button
|
||||
onClick={() => toggle(f.id)}
|
||||
className="text-[11px] text-purple-600 hover:underline whitespace-nowrap"
|
||||
>
|
||||
Standard & Maßnahmen {open[f.id] ? '▲' : '▼'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{open[f.id] && (
|
||||
<tr className="border-b border-gray-100 dark:border-gray-700/50 bg-gray-50/60 dark:bg-gray-900/30">
|
||||
<td colSpan={6} className="px-4 py-3 space-y-3">
|
||||
{/* Best-Practice-Standard — der Maßstab (kein Code-Rezept) */}
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 mb-1">
|
||||
<span className="font-semibold text-gray-600 dark:text-gray-300">Best-Practice-Standard</span>
|
||||
{' '}— woran „erfüllt" gemessen wird (Kontroll-Frameworks, noch kein Code-Rezept):
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1 items-center">
|
||||
<span className="text-[10px] text-gray-500 mr-1">NIST 800-53:</span>
|
||||
{f.nist_refs.map((n) => (
|
||||
<span key={n} className="inline-block rounded bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300 px-1.5 py-0.5 text-[10px] font-mono">{n}</span>
|
||||
))}
|
||||
<span className="text-[10px] text-gray-500 mx-1">OWASP:</span>
|
||||
{f.owasp_refs.map((o) => (
|
||||
<span key={o.code} className="inline-block rounded bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 px-1.5 py-0.5 text-[10px] font-medium">{o.code} · {o.label}</span>
|
||||
))}
|
||||
{f.iso27001_ref.length > 0 && (
|
||||
<>
|
||||
<span className="text-[10px] text-gray-500 mx-1">ISO 27001:</span>
|
||||
{f.iso27001_ref.map((iso) => (
|
||||
<span key={iso} className="inline-block rounded bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300 px-1.5 py-0.5 text-[10px]">{iso}</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Maßnahmen (wählbar) — kuratierte Kern-Maßnahme + belegte Optionen, zusammengeführt */}
|
||||
<div>
|
||||
<p className="text-[10px] text-gray-500 mb-1">
|
||||
<span className="font-semibold text-gray-600 dark:text-gray-300">Maßnahmen (wählbar)</span>
|
||||
{' '}— passend kombinieren, nicht alle abhaken. Das Risiko ist geschlossen, wenn die Pflicht real erfüllt ist.
|
||||
</p>
|
||||
{f.measures.length > 0 && (
|
||||
<ul className="space-y-1 mb-1.5">
|
||||
{f.measures.map((mid) => {
|
||||
const m = measuresById[mid]
|
||||
return (
|
||||
<li key={mid} className="text-[10px] text-gray-600 dark:text-gray-300">
|
||||
<span className="inline-block rounded bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 px-1 py-0.5 text-[9px] mr-1">kuratiert</span>
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200">{m ? m.name : mid}</span>
|
||||
{m && m.description ? <span className="text-gray-500"> — {m.description}</span> : null}
|
||||
{m && m.norm_refs && m.norm_refs.length > 0 ? <span className="text-gray-400"> · {m.norm_refs.join(', ')}</span> : null}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
{f.regulatory_breadth && f.regulatory_breadth.length > 0 && (
|
||||
<ul className="space-y-0.5">
|
||||
{f.regulatory_breadth.map((c) => (
|
||||
<li key={c.control_id} className="text-[10px] text-gray-600 dark:text-gray-300">
|
||||
<span className="inline-block rounded bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-200 px-1 py-0.5 text-[9px] mr-1">{c.use_case || 'Option'}</span>
|
||||
<span className="font-mono text-gray-500">{c.control_id}</span> {c.title}
|
||||
<span className="text-gray-400"> · {c.source_regulation}{c.source_article ? `, ${c.source_article}` : ''}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{f.measures.length === 0 && (!f.regulatory_breadth || f.regulatory_breadth.length === 0) && (
|
||||
<p className="text-[10px] text-gray-400">Keine kuratierte Maßnahme hinterlegt — Standard (oben) + Code-Fix aus dem Scan nutzen.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-gray-400 italic">
|
||||
Konkreter Code-Fix (Patch, z. B. Verschlüsselungsverfahren/Schlüssel) folgt aus dem Repo-Scan, sobald das Repository angebunden ist.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { CRADemo, Measure } from '../_hooks/useCRADemo'
|
||||
import { ManagementSummary } from './ManagementSummary'
|
||||
import { CyberSafetyHero } from './CyberSafetyHero'
|
||||
import { TechFindings } from './TechFindings'
|
||||
|
||||
export function CRACyberView({ data }: { data: CRADemo }) {
|
||||
const measuresById: Record<string, Measure> = Object.fromEntries(
|
||||
data.open_measures.map((m) => [m.id, m]),
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8">
|
||||
{/* 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>
|
||||
<header className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/60 dark:bg-purple-900/20 p-5">
|
||||
<h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">CRA / Cyber-Risiko</h1>
|
||||
<p className="text-base text-gray-700 dark:text-gray-200 mt-1">{data.scenario}</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Wir verknüpfen die Cyber-Befunde Ihres Repo-Scans mit den CRA-Anforderungen 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 Befunde, echtes CRA-Mapping.</span>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 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>
|
||||
{/* Ebene 1 — Management: Risiko & Aufwand auf einen Blick */}
|
||||
<ManagementSummary data={data} measuresById={measuresById} />
|
||||
|
||||
{/* 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>
|
||||
{/* Ebene 2 — Safety × Cyber: das Alleinstellungsmerkmal */}
|
||||
<CyberSafetyHero data={data} />
|
||||
|
||||
{/* 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>
|
||||
<p className="text-[11px] text-gray-500 mt-1 leading-relaxed">
|
||||
So liest du einen Befund: <span className="font-medium text-gray-600 dark:text-gray-300">Cyber-Befund</span> (was der Scan sah)
|
||||
{' → '}<span className="font-medium text-gray-600 dark:text-gray-300">CRA-Anforderung</span> (was das Gesetz verlangt)
|
||||
{' → '}<span className="font-medium text-gray-600 dark:text-gray-300">Best-Practice-Standard</span> (woran „erfüllt" gemessen wird)
|
||||
{' → '}<span className="font-medium text-gray-600 dark:text-gray-300">Maßnahmen</span> (mögliche Umsetzungen — passend wählen, nicht alle).
|
||||
Klick „Standard & Maßnahmen" für die Details je Befund.
|
||||
</p>
|
||||
</div>
|
||||
<FindingsTable findings={data.findings} measuresById={measuresById} />
|
||||
</div>
|
||||
|
||||
{/* Quick wins — high impact, low effort (second view) */}
|
||||
{data.findings.some((f) => f.quick_win) && (
|
||||
<div className="rounded-xl border border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-900/10 p-4">
|
||||
<h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Quick Wins</h2>
|
||||
<p className="text-[11px] text-gray-500 mb-2">Hohe Wirkung bei geringem Aufwand — gut für den Einstieg.</p>
|
||||
<ul className="space-y-1.5">
|
||||
{data.findings.filter((f) => f.quick_win).map((f) => (
|
||||
<li key={f.id} className="text-xs text-gray-700 dark:text-gray-300 flex items-start gap-2">
|
||||
<TierBadge tier={f.priority_tier} reason={f.priority_reason} />
|
||||
<span>
|
||||
{f.title} <span className="text-gray-400">→ {f.primary_requirement}</span>
|
||||
{f.measures.length > 0 && <span className="text-gray-400"> · {f.measures.join(', ')}</span>}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CRA deadlines */}
|
||||
<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="flex flex-wrap gap-4">
|
||||
{data.deadlines.map((d) => (
|
||||
<li key={d.date} className="text-xs text-gray-600 dark:text-gray-300 flex items-center gap-2">
|
||||
<span className="font-mono text-gray-500">{d.date}</span> {d.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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>}
|
||||
{/* Ebene 3 — Technik: Controls, Standards, Maßnahmen (einklappbar) */}
|
||||
<TechFindings data={data} measuresById={measuresById} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
'use client'
|
||||
|
||||
import { CRADemo } from '../_hooks/useCRADemo'
|
||||
|
||||
export function CyberSafetyHero({ data }: { data: CRADemo }) {
|
||||
if (!data.cross_links.length) return null
|
||||
return (
|
||||
<section className="rounded-xl border-2 border-orange-300 dark:border-orange-700 bg-orange-50/60 dark:bg-orange-900/15">
|
||||
<div className="px-5 py-4 border-b border-orange-200 dark:border-orange-800/60">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||
Cyber öffnet eine bestehende CE-Gefährdung erneut
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
|
||||
Wo ein Cyber-Risiko eine in Ihrer CE-Risikobeurteilung bereits{' '}
|
||||
<span className="font-medium">mechanisch gemilderte</span> Gefährdung wieder aufreißt
|
||||
— der Schnittpunkt von Maschinenverordnung und Cyber Resilience Act.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-5 space-y-4">
|
||||
{data.cross_links.map((cl, i) => (
|
||||
<div key={i} className="rounded-lg border border-orange-200 dark:border-orange-800/60 bg-white dark:bg-gray-800 p-5">
|
||||
<p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{cl.safety_hazard}</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">{cl.safety_ref}</p>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-3 text-sm">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 px-3 py-1 font-medium">
|
||||
CE: gemindert
|
||||
</span>
|
||||
<span className="text-gray-400">→</span>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 px-3 py-1 font-medium">
|
||||
Cyber: wieder offen
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid gap-3 md:grid-cols-2">
|
||||
<div className="text-sm text-gray-700 dark:text-gray-200">
|
||||
<span className="text-gray-500">Bisherige Schutzmaßnahme:</span><br />
|
||||
{cl.original_measure}
|
||||
</div>
|
||||
<div className="text-sm text-gray-700 dark:text-gray-200">
|
||||
<span className="text-gray-500">Auslösende Cyber-Befunde:</span><br />
|
||||
{cl.cyber_finding_ids.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-800 dark:text-gray-200 mt-3">
|
||||
<span className="font-medium">Warum:</span> {cl.cyber_breaks_it}
|
||||
</p>
|
||||
<span className="inline-block mt-3 rounded px-2.5 py-1 text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
|
||||
Restrisiko: {cl.residual}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
'use client'
|
||||
|
||||
import { CRADemo, CRAFinding, Measure } from '../_hooks/useCRADemo'
|
||||
import { RISK_BADGE, RISK_LABEL } from './cra-badges'
|
||||
|
||||
const TOTAL_ANNEX_I = 40 // CRA Annex I — Anzahl grundlegender Anforderungen
|
||||
const EFFORT_LABEL: Record<string, string> = {
|
||||
code: 'Entwicklung (Code)', hybrid: 'Entwicklung + Prozess',
|
||||
process: 'Prozess / Organisation', document: 'Dokumentation',
|
||||
}
|
||||
|
||||
function measureNames(ids: string[], byId: Record<string, Measure>): string[] {
|
||||
return ids.map((m) => byId[m]?.name || m)
|
||||
}
|
||||
|
||||
// Top-Risiken in Klartext: zuerst die Cyber-trifft-Safety-Fälle (höchste Wirkung),
|
||||
// danach mit den höchstpriorisierten Einzelbefunden auffüllen.
|
||||
function topRisks(data: CRADemo, byId: Record<string, Measure>) {
|
||||
const fById: Record<string, CRAFinding> = Object.fromEntries(data.findings.map((f) => [f.id, f]))
|
||||
const risks: { title: string; impact: string; systems: string[]; measures: string[]; level: string }[] = []
|
||||
for (const cl of data.cross_links) {
|
||||
const fs = cl.cyber_finding_ids.map((id) => fById[id]).filter(Boolean)
|
||||
risks.push({
|
||||
title: cl.safety_hazard,
|
||||
impact: cl.cyber_breaks_it,
|
||||
systems: Array.from(new Set(fs.map((f) => f.location).filter(Boolean))),
|
||||
measures: measureNames(Array.from(new Set(fs.flatMap((f) => f.measures))), byId),
|
||||
level: 'CRITICAL',
|
||||
})
|
||||
}
|
||||
const usedIds = new Set(data.cross_links.flatMap((c) => c.cyber_finding_ids))
|
||||
const rest = data.findings
|
||||
.filter((f) => !usedIds.has(f.id) && (f.priority_tier === 'P0' || f.priority_tier === 'P1'))
|
||||
.sort((a, b) => (b.priority_score || 0) - (a.priority_score || 0))
|
||||
for (const f of rest) {
|
||||
if (risks.length >= 4) break
|
||||
risks.push({
|
||||
title: f.requirement_title || f.title,
|
||||
impact: f.title,
|
||||
systems: f.location ? [f.location] : [],
|
||||
measures: measureNames(f.measures, byId),
|
||||
level: f.risk_level,
|
||||
})
|
||||
}
|
||||
return risks.slice(0, 4)
|
||||
}
|
||||
|
||||
export function ManagementSummary({ data, measuresById }: { data: CRADemo; measuresById: Record<string, Measure> }) {
|
||||
const readiness = Math.round(
|
||||
(100 * Math.max(0, TOTAL_ANNEX_I - data.requirements_touched.length)) / TOTAL_ANNEX_I,
|
||||
)
|
||||
const effort: Record<string, number> = {}
|
||||
for (const f of data.findings) {
|
||||
const k = f.evidence_type || 'process'
|
||||
effort[k] = (effort[k] || 0) + 1
|
||||
}
|
||||
const regulations = Array.from(new Set([
|
||||
'Cyber Resilience Act (CRA)',
|
||||
'Maschinenverordnung (EU) 2023/1230',
|
||||
...data.findings.flatMap((f) => (f.regulatory_breadth || []).map((c) => c.source_regulation)),
|
||||
].filter(Boolean))).slice(0, 6)
|
||||
const risks = topRisks(data, measuresById)
|
||||
|
||||
return (
|
||||
<section className="space-y-5">
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{/* Readiness */}
|
||||
<div className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/60 dark:bg-purple-900/20 p-5">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">CRA-Readiness</p>
|
||||
<p className="text-4xl font-bold text-purple-700 dark:text-purple-300 mt-1">{readiness}%</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Anteil der {TOTAL_ANNEX_I} CRA-Anforderungen ohne offenen Befund (indikativ)
|
||||
</p>
|
||||
</div>
|
||||
{/* Offene Risiken */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">Offene Risiken</p>
|
||||
<div className="space-y-1.5">
|
||||
{(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as const).map((lvl) =>
|
||||
data.by_risk[lvl] ? (
|
||||
<div key={lvl} className="flex items-center gap-2">
|
||||
<span className={`inline-flex w-8 justify-center rounded px-2 py-0.5 text-sm font-bold ${RISK_BADGE[lvl]}`}>
|
||||
{data.by_risk[lvl]}
|
||||
</span>
|
||||
<span className="text-sm text-gray-700 dark:text-gray-200">{RISK_LABEL[lvl]}</span>
|
||||
</div>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Handlungsaufwand */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">Handlungsaufwand</p>
|
||||
<p className="text-3xl font-bold text-gray-900 dark:text-gray-100">{data.findings.length}</p>
|
||||
<p className="text-xs text-gray-500 mb-2">offene Befunde</p>
|
||||
<ul className="space-y-1">
|
||||
{Object.entries(effort).map(([k, n]) => (
|
||||
<li key={k} className="text-sm text-gray-700 dark:text-gray-200">
|
||||
{n}× {EFFORT_LABEL[k] || k}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Betroffene Vorschriften */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">Betroffene Vorschriften</p>
|
||||
<ul className="space-y-1.5">
|
||||
{regulations.map((r) => (
|
||||
<li key={r} className="text-sm text-gray-700 dark:text-gray-200 flex items-start gap-1.5">
|
||||
<span className="text-purple-500 mt-0.5">•</span>{r}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top-Risiken in Klartext */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-3">Wichtigste Risiken</h3>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{risks.map((r, i) => (
|
||||
<div key={i} className="rounded-lg border border-gray-100 dark:border-gray-700/60 p-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`inline-block rounded px-2 py-0.5 text-xs font-semibold ${RISK_BADGE[r.level] || RISK_BADGE.LOW}`}>
|
||||
{RISK_LABEL[r.level] || r.level}
|
||||
</span>
|
||||
<span className="text-base font-medium text-gray-900 dark:text-gray-100">{r.title}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">{r.impact}</p>
|
||||
{r.systems.length > 0 && (
|
||||
<p className="text-sm text-gray-500 mb-1">
|
||||
<span className="font-medium text-gray-600 dark:text-gray-300">Betroffene Systeme:</span> {r.systems.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
{r.measures.length > 0 && (
|
||||
<p className="text-sm text-gray-500">
|
||||
<span className="font-medium text-gray-600 dark:text-gray-300">Empfohlene Maßnahmen:</span> {r.measures.join(' · ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CRA-Fristen */}
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">CRA-Fristen</h3>
|
||||
<ul className="flex flex-wrap gap-x-6 gap-y-2">
|
||||
{data.deadlines.map((d) => (
|
||||
<li key={d.date} className="text-sm text-gray-700 dark:text-gray-200 flex items-center gap-2">
|
||||
<span className="font-mono font-medium text-purple-600 dark:text-purple-400">{d.date}</span> {d.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useState } from 'react'
|
||||
import { CRADemo, CRAFinding, Measure } from '../_hooks/useCRADemo'
|
||||
import { EvidenceTag, RiskBadge, TierBadge } from './cra-badges'
|
||||
|
||||
function FindingDetail({ f, measuresById }: { f: CRAFinding; measuresById: Record<string, Measure> }) {
|
||||
return (
|
||||
<td colSpan={5} className="px-4 py-4 space-y-4">
|
||||
{/* Best-Practice-Standard — der Maßstab (kein Code-Rezept) */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">
|
||||
Best-Practice-Standard — woran „erfüllt" gemessen wird
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5 items-center text-sm">
|
||||
<span className="text-gray-500">Gesetz:</span>
|
||||
<span className="rounded bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300 px-2 py-0.5 font-mono text-xs">
|
||||
{f.primary_requirement} · {f.annex_anchor}
|
||||
</span>
|
||||
<span className="text-gray-500 ml-2">NIST:</span>
|
||||
{f.nist_refs.map((n) => (
|
||||
<span key={n} className="rounded bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-0.5 font-mono text-xs">{n}</span>
|
||||
))}
|
||||
<span className="text-gray-500 ml-2">OWASP:</span>
|
||||
{f.owasp_refs.map((o) => (
|
||||
<span key={o.code} className="rounded bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 px-2 py-0.5 text-xs font-medium">{o.code} · {o.label}</span>
|
||||
))}
|
||||
{f.iso27001_ref.length > 0 && (
|
||||
<>
|
||||
<span className="text-gray-500 ml-2">ISO 27001:</span>
|
||||
{f.iso27001_ref.map((iso) => (
|
||||
<span key={iso} className="rounded bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300 px-2 py-0.5 text-xs">{iso}</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Maßnahmen (wählbar) — kuratiert + belegte Optionen */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-1.5">
|
||||
Maßnahmen (wählbar — passend kombinieren, nicht alle abhaken)
|
||||
</p>
|
||||
{f.measures.length > 0 && (
|
||||
<ul className="space-y-1.5 mb-2">
|
||||
{f.measures.map((mid) => {
|
||||
const m = measuresById[mid]
|
||||
return (
|
||||
<li key={mid} className="text-sm text-gray-700 dark:text-gray-200">
|
||||
<span className="font-medium">{m ? m.name : mid}</span>
|
||||
{m?.description ? <span className="text-gray-500"> — {m.description}</span> : null}
|
||||
{m?.norm_refs?.length ? <span className="text-gray-400"> · {m.norm_refs.join(', ')}</span> : null}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
{f.regulatory_breadth && f.regulatory_breadth.length > 0 && (
|
||||
<ul className="space-y-1">
|
||||
{f.regulatory_breadth.map((c) => (
|
||||
<li key={c.control_id} className="text-sm text-gray-600 dark:text-gray-300">
|
||||
<span className="rounded bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-200 px-1.5 py-0.5 text-xs mr-1.5">{c.use_case || 'Option'}</span>
|
||||
{c.title}<span className="text-gray-400"> · {c.source_regulation}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-400 italic">
|
||||
Befund-Kennung {f.id} · {f.cwe}. Konkreter Code-Fix folgt aus dem Repo-Scan, sobald das Repository angebunden ist.
|
||||
</p>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
|
||||
export function TechFindings({ data, measuresById }: { data: CRADemo; measuresById: Record<string, Measure> }) {
|
||||
const [show, setShow] = useState(false)
|
||||
const [open, setOpen] = useState<Record<string, boolean>>({})
|
||||
const toggle = (id: string) => setOpen((o) => ({ ...o, [id]: !o[id] }))
|
||||
const mNames = (ids: string[]) => ids.map((m) => measuresById[m]?.name || m)
|
||||
|
||||
return (
|
||||
<section className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<button
|
||||
onClick={() => setShow((s) => !s)}
|
||||
className="w-full flex items-center justify-between px-5 py-4 text-left"
|
||||
>
|
||||
<span>
|
||||
<span className="text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||
Technische Details — für Entwickler & Auditoren
|
||||
</span>
|
||||
<span className="block text-sm text-gray-500 mt-0.5">
|
||||
{data.findings.length} Cyber-Befunde mit Standard-Crosswalk & Maßnahmen
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-purple-600 text-sm">{show ? 'ausblenden ▲' : 'anzeigen ▼'}</span>
|
||||
</button>
|
||||
|
||||
{show && (
|
||||
<div className="px-2 pb-4 overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-gray-500 border-b border-gray-200 dark:border-gray-700 text-left">
|
||||
<th className="py-2 px-3">Prio</th>
|
||||
<th className="py-2 px-4">Cyber-Befund & Pflicht</th>
|
||||
<th className="py-2 px-3">Risiko</th>
|
||||
<th className="py-2 px-3">Maßnahmen</th>
|
||||
<th className="py-2 px-3 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.findings.map((f) => (
|
||||
<Fragment key={f.id}>
|
||||
<tr className="border-b border-gray-100 dark:border-gray-700/50 align-top">
|
||||
<td className="py-3 px-3"><TierBadge tier={f.priority_tier} reason={f.priority_reason} /></td>
|
||||
<td className="py-3 px-4 max-w-md">
|
||||
<div className="text-gray-900 dark:text-gray-100 font-medium">{f.title}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-300">Pflicht: {f.requirement_title}</div>
|
||||
<div className="mt-1.5"><EvidenceTag et={f.evidence_type} /></div>
|
||||
</td>
|
||||
<td className="py-3 px-3"><RiskBadge level={f.risk_level} /></td>
|
||||
<td className="py-3 px-3 text-gray-700 dark:text-gray-200">
|
||||
{f.measures.length ? mNames(f.measures).join(' · ') : <span className="text-gray-400">—</span>}
|
||||
</td>
|
||||
<td className="py-3 px-3 text-right">
|
||||
<button onClick={() => toggle(f.id)} className="text-sm text-purple-600 hover:underline whitespace-nowrap">
|
||||
{open[f.id] ? 'weniger ▲' : 'Standard & Maßnahmen ▼'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{open[f.id] && (
|
||||
<tr className="border-b border-gray-100 dark:border-gray-700/50 bg-gray-50/60 dark:bg-gray-900/30">
|
||||
<FindingDetail f={f} measuresById={measuresById} />
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{data.findings.some((f) => f.quick_win) && (
|
||||
<div className="mt-4 mx-3 rounded-lg border border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-900/10 p-4">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">Quick Wins</h3>
|
||||
<p className="text-sm text-gray-500 mb-2">Hohe Wirkung bei geringem Aufwand — gut für den Einstieg.</p>
|
||||
<ul className="space-y-1.5">
|
||||
{data.findings.filter((f) => f.quick_win).map((f) => (
|
||||
<li key={f.id} className="text-sm text-gray-700 dark:text-gray-200 flex items-start gap-2">
|
||||
<TierBadge tier={f.priority_tier} reason={f.priority_reason} />
|
||||
<span>{f.title}
|
||||
{f.measures.length > 0 && <span className="text-gray-500"> · {mNames(f.measures).join(' · ')}</span>}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
|
||||
export 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',
|
||||
}
|
||||
|
||||
export const RISK_LABEL: Record<string, string> = {
|
||||
CRITICAL: 'Kritisch', HIGH: 'Hoch', MEDIUM: 'Mittel', LOW: 'Niedrig',
|
||||
}
|
||||
|
||||
export function RiskBadge({ level }: { level: string }) {
|
||||
return (
|
||||
<span className={`inline-block rounded px-2 py-0.5 text-sm font-semibold ${RISK_BADGE[level] || RISK_BADGE.LOW}`}>
|
||||
{RISK_LABEL[level] || level}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const TIER_BADGE: Record<string, string> = {
|
||||
P0: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
|
||||
P1: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
||||
P2: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
|
||||
P3: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300',
|
||||
}
|
||||
|
||||
export function TierBadge({ tier, reason }: { tier?: string; reason?: string }) {
|
||||
if (!tier) return <span className="text-gray-300">—</span>
|
||||
return (
|
||||
<span title={reason} className={`inline-block rounded px-2 py-0.5 text-sm font-bold ${TIER_BADGE[tier] || TIER_BADGE.P3}`}>
|
||||
{tier}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const EVIDENCE_LABEL: Record<string, string> = {
|
||||
code: 'Code-nah', hybrid: 'Code + Prozess', process: 'Prozess', document: 'Dokumentation',
|
||||
}
|
||||
|
||||
// "Code-nah" = der Scan kann es im Quellcode verorten → Code-Fix im Ticket möglich.
|
||||
// Sonst = Prozess/Organisation: wir benennen den Sollzustand, kein Auto-Fix.
|
||||
export function EvidenceTag({ et }: { et?: string }) {
|
||||
if (!et || !EVIDENCE_LABEL[et]) return null
|
||||
const codeish = et === 'code' || et === 'hybrid'
|
||||
return (
|
||||
<span
|
||||
title={codeish ? 'Code-Fix im Ticket möglich (wenn der Scan die Stelle sieht)' : 'Prozess-/Build-Maßnahme — kein Auto-Fix'}
|
||||
className={`inline-block rounded px-2 py-0.5 text-xs font-medium ${
|
||||
codeish
|
||||
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
|
||||
: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'}`}
|
||||
>
|
||||
{EVIDENCE_LABEL[et]}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -15,8 +15,16 @@ export default function CRAPage() {
|
||||
}
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-sm text-gray-500">
|
||||
Projektgebundene CE × Cyber-Analyse
|
||||
</span>
|
||||
<a href="/sdk/cra" className="text-sm text-purple-600 hover:underline whitespace-nowrap">
|
||||
Allgemeiner CRA-Readiness-Check →
|
||||
</a>
|
||||
</div>
|
||||
{!live && (
|
||||
<p className="text-[11px] text-amber-600 dark:text-amber-400">
|
||||
<p className="text-sm text-amber-600 dark:text-amber-400">
|
||||
Backend nicht erreichbar — statisches Szenario angezeigt.
|
||||
</p>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user