feat(iace-frontend): expandable detail rows for missing + extra benchmark findings

The "Zugeordnet" tab already expanded to a GT-vs-Engine detail comparison; the
"Fehlend" and "Engine Findings" tabs were flat and could not be inspected.
Extracted GTDetailBlock / EngineDetailBlock from DetailComparison and made both
tables expandable (chevron) — missing rows show the full GT entry, extra rows
show the full engine hazard (incl. measures, norms, clarification status).

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

admin-compliance/app/sdk/iace/[projectId]/benchmark/_components/HazardComparisonTable.tsx

@@ -87,7 +87,7 @@ export function HazardComparisonTable({ matched, missing, extra }: Props) {
       <div className="overflow-x-auto">
         {tab === 'matched' && <MatchedTable pairs={realMatched} clarStatusByHazard={clarStatusByHazard} projectId={projectId} />}
         {tab === 'missing' && <MissingTable entries={allMissing} />}
-        {tab === 'extra' && <ExtraTable entries={allExtra} />}
+        {tab === 'extra' && <ExtraTable entries={allExtra} clarStatusByHazard={clarStatusByHazard} projectId={projectId} />}
       </div>
     </div>
   )
@@ -175,16 +175,17 @@ function formatLifecycles(raw: string): string {
   return raw.split(',').map(s => s.trim()).map(s => LIFECYCLE_LABELS[s] || s).join(', ')
 }
 
-/** Side-by-side detail comparison of GT entry vs. Engine hazard */
+function Chevron({ open }: { open: boolean }) {
-function DetailComparison({ gt, engine, clarStatus, projectId }: {
+  return (
-  gt: GroundTruthEntry
+    <svg className={`w-3 h-3 text-gray-400 transition-transform ${open ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  engine: HazardSummary
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-  clarStatus?: HazardClarStatus
+    </svg>
-  projectId?: string
+  )
-}) {
+}
+
+/** Ground Truth (professional) detail block — reused by matched + missing rows. */
+function GTDetailBlock({ gt }: { gt: GroundTruthEntry }) {
   return (
-    <div className="grid grid-cols-2 gap-4 text-xs">
-      {/* Left: Ground Truth */}
     <div className="space-y-2">
       <div className="font-semibold text-red-700 dark:text-red-400 uppercase text-[10px]">Ground Truth (Fachmann)</div>
       <DetailRow label="Gefaehrdung" gt={gt.hazard_type} />
@@ -203,7 +204,14 @@ function DetailComparison({ gt, engine, clarStatus, projectId }: {
       <DetailRow label="Hinreichend" gt={gt.sufficient ? 'JA' : 'NEIN'} />
       {gt.comment && <DetailRow label="Kommentar" gt={gt.comment} />}
     </div>
-      {/* Right: Engine */}
+  )
+}
+
+/** Engine (automatic) detail block — reused by matched + extra rows. */
+function EngineDetailBlock({ engine, clarStatus, projectId }: {
+  engine: HazardSummary; clarStatus?: HazardClarStatus; projectId?: string
+}) {
+  return (
     <div className="space-y-2">
       <div className="font-semibold text-purple-700 dark:text-purple-400 uppercase text-[10px]">Engine (automatisch)</div>
       <DetailRow label="Gefaehrdung" gt={engine.name} />
@@ -231,6 +239,20 @@ function DetailComparison({ gt, engine, clarStatus, projectId }: {
         return <DetailRow label="Referenzierte Normen" gt={norms.join(' | ')} />
       })()}
     </div>
+  )
+}
+
+/** Side-by-side detail comparison of GT entry vs. Engine hazard */
+function DetailComparison({ gt, engine, clarStatus, projectId }: {
+  gt: GroundTruthEntry
+  engine: HazardSummary
+  clarStatus?: HazardClarStatus
+  projectId?: string
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4 text-xs">
+      <GTDetailBlock gt={gt} />
+      <EngineDetailBlock engine={engine} clarStatus={clarStatus} projectId={projectId} />
     </div>
   )
 }
@@ -310,6 +332,7 @@ function DetailRow({ label, gt, multiline }: { label: string; gt: string; multil
 }
 
 function MissingTable({ entries }: { entries: GroundTruthEntry[] }) {
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({})
   if (entries.length === 0) return <EmptyState text="Keine fehlenden Gefaehrdungen" />
   return (
     <table className="w-full text-xs">
@@ -324,22 +347,37 @@ function MissingTable({ entries }: { entries: GroundTruthEntry[] }) {
         </tr>
       </thead>
       <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
-        {entries.map((e, i) => (
+        {entries.map((e, i) => {
-          <tr key={i} className="hover:bg-red-50/50">
+          const isOpen = expanded[i]
-            <td className="px-3 py-2 text-gray-400">{e.nr}</td>
+          return (
+            <React.Fragment key={i}>
+              <tr className="hover:bg-red-50/50 cursor-pointer" onClick={() => setExpanded(p => ({ ...p, [i]: !p[i] }))}>
+                <td className="px-3 py-2 text-gray-400">
+                  <div className="flex items-center gap-1"><Chevron open={isOpen} />{e.nr}</div>
+                </td>
                 <td className="px-3 py-2 font-medium text-gray-800 dark:text-gray-200">{e.hazard_type}</td>
                 <td className="px-3 py-2 text-gray-600 truncate max-w-[200px]">{e.hazard_cause}</td>
                 <td className="px-3 py-2 text-gray-500">{e.component_zone}</td>
                 <td className="px-3 py-2 text-center"><RiskBadge risk={e.risk_in.r} /></td>
                 <td className="px-3 py-2 text-gray-500">{e.measure_type}</td>
               </tr>
-        ))}
+              {isOpen && (
+                <tr className="bg-gray-50/70 dark:bg-gray-850">
+                  <td colSpan={6} className="px-4 py-3"><GTDetailBlock gt={e} /></td>
+                </tr>
+              )}
+            </React.Fragment>
+          )
+        })}
       </tbody>
     </table>
   )
 }
 
-function ExtraTable({ entries }: { entries: HazardSummary[] }) {
+function ExtraTable({ entries, clarStatusByHazard, projectId }: {
+  entries: HazardSummary[]; clarStatusByHazard: Record<string, HazardClarStatus>; projectId?: string
+}) {
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({})
   if (entries.length === 0) return <EmptyState text="Keine zusaetzlichen Engine-Gefaehrdungen" />
   return (
     <table className="w-full text-xs">
@@ -351,13 +389,27 @@ function ExtraTable({ entries }: { entries: HazardSummary[] }) {
         </tr>
       </thead>
       <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
-        {entries.map((e, i) => (
+        {entries.map((e, i) => {
-          <tr key={i} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+          const isOpen = expanded[i]
-            <td className="px-3 py-2 text-gray-800 dark:text-gray-200">{e.name}</td>
+          return (
+            <React.Fragment key={i}>
+              <tr className="hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer" onClick={() => setExpanded(p => ({ ...p, [i]: !p[i] }))}>
+                <td className="px-3 py-2 text-gray-800 dark:text-gray-200">
+                  <div className="flex items-center gap-1"><Chevron open={isOpen} />{e.name}</div>
+                </td>
                 <td className="px-3 py-2 text-gray-500">{e.category}</td>
                 <td className="px-3 py-2 text-gray-400">{e.zone || '-'}</td>
               </tr>
-        ))}
+              {isOpen && (
+                <tr className="bg-gray-50/70 dark:bg-gray-850">
+                  <td colSpan={3} className="px-4 py-3">
+                    <EngineDetailBlock engine={e} clarStatus={clarStatusByHazard[e.id]} projectId={projectId} />
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          )
+        })}
       </tbody>
     </table>
   )