feat(iace-frontend): Risikobewertung tab with dual risk model + live formula

New tab /sdk/iace/[projectId]/risikobewertung. Per hazard it shows BOTH models
side by side — EN-62061-style (S/F/W/P) and Fine-Kinney (P/E/C) — with
BreakPilot's justified suggested values from public data, the visible formula,
and editable fields that recompute the score + risk band live. The professional
adjusts the values (e.g. from his own licensed DIN/Beuth data); we only supply
the formula + inputs, reproduce no norm table.

Consumes GET .../hazards/:hid/risk-suggestion. Registered in IACE_NAV_ITEMS.

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

admin-compliance/app/sdk/iace/[projectId]/risikobewertung/_components/RiskModelCard.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { HazardLite, RiskSuggestion } from '../_hooks/useRiskAssessment'
+
+function enLevel(idx: number): string {
+  if (idx >= 45) return 'kritisch'
+  if (idx >= 30) return 'hoch'
+  if (idx >= 18) return 'mittel'
+  if (idx >= 9) return 'gering'
+  return 'vernachlaessigbar'
+}
+
+function fkBand(score: number): string {
+  if (score > 400) return 'sehr hoch'
+  if (score > 200) return 'hoch'
+  if (score > 70) return 'wesentlich'
+  if (score > 20) return 'moeglich'
+  return 'gering'
+}
+
+function badgeColor(label: string): string {
+  switch (label) {
+    case 'kritisch':
+    case 'sehr hoch':
+      return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+    case 'hoch':
+      return 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300'
+    case 'mittel':
+    case 'wesentlich':
+      return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300'
+    case 'gering':
+    case 'moeglich':
+      return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
+    default:
+      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
+  }
+}
+
+function Field({
+  label,
+  value,
+  step,
+  justification,
+  onChange,
+}: {
+  label: string
+  value: number
+  step?: number
+  justification: string
+  onChange: (v: number) => void
+}) {
+  return (
+    <div className="flex items-start gap-2">
+      <div className="flex-1">
+        <div className="text-xs font-medium text-gray-700 dark:text-gray-300">{label}</div>
+        <div className="text-[11px] text-gray-400 leading-tight" title={justification}>
+          {justification}
+        </div>
+      </div>
+      <input
+        type="number"
+        step={step || 1}
+        value={value}
+        onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+        className="w-16 px-2 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-right"
+      />
+    </div>
+  )
+}
+
+function Panel({
+  title,
+  formula,
+  score,
+  badge,
+  children,
+}: {
+  title: string
+  formula: string
+  score: number
+  badge: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="text-sm font-semibold text-gray-800 dark:text-gray-200">{title}</div>
+        <span className={`text-[11px] px-2 py-0.5 rounded-full ${badgeColor(badge)}`}>{badge}</span>
+      </div>
+      <div className="space-y-1.5">{children}</div>
+      <div className="pt-2 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
+        <code className="text-[11px] text-gray-500">{formula}</code>
+        <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
+          R = {Number.isInteger(score) ? score : score.toFixed(1)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export function RiskModelCard({
+  hazard,
+  suggestion,
+}: {
+  hazard: HazardLite
+  suggestion?: RiskSuggestion
+}) {
+  const [en, setEn] = useState({ s: 0, f: 0, w: 0, p: 0 })
+  const [fk, setFk] = useState({ p: 0, e: 0, c: 0 })
+
+  useEffect(() => {
+    if (!suggestion) return
+    setEn({
+      s: suggestion.en62061.severity.value,
+      f: suggestion.en62061.frequency.value,
+      w: suggestion.en62061.probability.value,
+      p: suggestion.en62061.avoidance.value,
+    })
+    setFk({
+      p: suggestion.fine_kinney.probability.value,
+      e: suggestion.fine_kinney.exposure.value,
+      c: suggestion.fine_kinney.consequence.value,
+    })
+  }, [suggestion])
+
+  if (!suggestion) {
+    return (
+      <div className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-sm text-gray-500">
+        {hazard.name} — keine Bewertung verfuegbar
+      </div>
+    )
+  }
+
+  const enScore = en.s * (en.f + en.w + en.p)
+  const fkScore = fk.p * fk.e * fk.c
+
+  return (
+    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 space-y-3">
+      <div className="flex items-center justify-between gap-3 flex-wrap">
+        <div className="font-semibold text-gray-900 dark:text-gray-100">{hazard.name}</div>
+        <span className="text-xs text-gray-400">Kontaktart: {suggestion.contact_mode}</span>
+      </div>
+      <div className="grid md:grid-cols-2 gap-4">
+        <Panel title="EN-62061-Stil" formula={suggestion.en62061.formula} score={enScore} badge={enLevel(enScore)}>
+          <Field label="Schwere S" value={en.s} justification={suggestion.en62061.severity.justification} onChange={(v) => setEn({ ...en, s: v })} />
+          <Field label="Haeufigkeit F" value={en.f} justification={suggestion.en62061.frequency.justification} onChange={(v) => setEn({ ...en, f: v })} />
+          <Field label="Wahrscheinlichkeit W" value={en.w} justification={suggestion.en62061.probability.justification} onChange={(v) => setEn({ ...en, w: v })} />
+          <Field label="Vermeidbarkeit P" value={en.p} justification={suggestion.en62061.avoidance.justification} onChange={(v) => setEn({ ...en, p: v })} />
+        </Panel>
+        <Panel title="Fine-Kinney (US)" formula={suggestion.fine_kinney.formula} score={fkScore} badge={fkBand(fkScore)}>
+          <Field label="Wahrscheinlichkeit P" value={fk.p} step={0.1} justification={suggestion.fine_kinney.probability.justification} onChange={(v) => setFk({ ...fk, p: v })} />
+          <Field label="Exposition E" value={fk.e} step={0.5} justification={suggestion.fine_kinney.exposure.justification} onChange={(v) => setFk({ ...fk, e: v })} />
+          <Field label="Konsequenz C" value={fk.c} justification={suggestion.fine_kinney.consequence.justification} onChange={(v) => setFk({ ...fk, c: v })} />
+        </Panel>
+      </div>
+      <p className="text-[11px] text-gray-400">{suggestion.note}</p>
+    </div>
+  )
+}