feat(cra): priority frontend — weights control, P0/P1 tier badges, quick wins

CRA tab now shows the priority layer: a weights control (5 business objectives,
high/medium/low) that re-computes the assessment live; a Prio column with
P0..P3 tier badges (P0 = non-negotiable floor, reason on hover); the table in
backend priority order; and a Quick-Wins block (high impact, low effort). Demo
flags the safety-cross-linked findings as safety_impact so the P0 floor shows.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

admin-compliance/app/sdk/iace/[projectId]/cra/_components/CRACyberView.tsx

@@ -18,6 +18,22 @@ function RiskBadge({ level }: { level: string }) {
   )
 }
 
+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>
+  )
+}
+
 function FindingsTable({ findings }: { findings: CRAFinding[] }) {
   const [open, setOpen] = useState<Record<string, boolean>>({})
   const toggle = (id: string) => setOpen((o) => ({ ...o, [id]: !o[id] }))
@@ -26,6 +42,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
       <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>
@@ -37,6 +54,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
           {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>
@@ -63,7 +81,7 @@ function FindingsTable({ findings }: { findings: CRAFinding[] }) {
               </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={5} className="px-4 py-2">
+                  <td colSpan={6} className="px-4 py-2">
                     <p className="text-[10px] text-gray-400 mb-1">Best-Practice-Tiefe (Golden-Set-Crosswalk)</p>
                     <div className="flex flex-wrap gap-1 items-center">
                       <span className="text-[10px] text-gray-500 mr-1">NIST 800-53:</span>
@@ -166,6 +184,25 @@ export function CRACyberView({ data }: { data: CRADemo }) {
         <FindingsTable findings={data.findings} />
       </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>
+      )}
+
       {/* Recommended measures — full curated text + norm references */}
       <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-1">Empfohlene Maßnahmen</h2>

admin-compliance/app/sdk/iace/[projectId]/cra/_components/WeightsControl.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Weights } from '../_hooks/useCRA'
+
+const OBJECTIVES: { id: string; label: string }[] = [
+  { id: 'access', label: 'Zugang / Authentifizierung' },
+  { id: 'data', label: 'Datenvertraulichkeit' },
+  { id: 'network_api', label: 'Netzwerk / API' },
+  { id: 'supply_updates', label: 'Updates / Supply-Chain' },
+  { id: 'monitoring', label: 'Monitoring / Incident' },
+]
+
+export function WeightsControl({ weights, onChange }: { weights: Weights; onChange: (w: Weights) => void }) {
+  const set = (id: string, v: string) => onChange({ ...weights, [id]: v })
+  return (
+    <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">Ihre Prioritäten</h2>
+      <p className="text-[11px] text-gray-400 mb-3">
+        Gewichten Sie, was für Sie zuerst zählt. Kritische, aktiv ausnutzbare und personengefährdende
+        Befunde bleiben unabhängig davon ganz oben (P0). Grobe Vorsortierung — Feinordnung im Ticketsystem.
+      </p>
+      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {OBJECTIVES.map((o) => (
+          <label key={o.id} className="flex items-center justify-between gap-2 text-xs">
+            <span className="text-gray-600 dark:text-gray-300">{o.label}</span>
+            <select
+              value={weights[o.id] || 'medium'}
+              onChange={(e) => set(o.id, e.target.value)}
+              className="rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-2 py-1"
+            >
+              <option value="high">Hoch</option>
+              <option value="medium">Mittel</option>
+              <option value="low">Niedrig</option>
+            </select>
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}