From 2a25b66a2fc595bcd1a5fc6a4d53ab1cfe4dea5a Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Tue, 9 Jun 2026 18:43:43 +0200
Subject: [PATCH] feat(iace-frontend): expandable detail rows for missing +
 extra benchmark findings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../_components/HazardComparisonTable.tsx     | 184 +++++++++++-------
 1 file changed, 118 insertions(+), 66 deletions(-)

diff --git a/admin-compliance/app/sdk/iace/[projectId]/benchmark/_components/HazardComparisonTable.tsx b/admin-compliance/app/sdk/iace/[projectId]/benchmark/_components/HazardComparisonTable.tsx
index 0e52e5f1..54a40f07 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/benchmark/_components/HazardComparisonTable.tsx
+++ b/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,6 +175,73 @@ function formatLifecycles(raw: string): string {
   return raw.split(',').map(s => s.trim()).map(s => LIFECYCLE_LABELS[s] || s).join(', ')
 }
 
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg className={`w-3 h-3 text-gray-400 transition-transform ${open ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+    </svg>
+  )
+}
+
+/** Ground Truth (professional) detail block — reused by matched + missing rows. */
+function GTDetailBlock({ gt }: { gt: GroundTruthEntry }) {
+  return (
+    <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} />
+      <DetailRow label="Ursache" gt={gt.hazard_cause} />
+      <DetailRow label="Gefahrenstelle" gt={gt.component_zone} />
+      <DetailRow label="Lebensphasen" gt={gt.lifecycle_phases?.join(', ') || '-'} />
+      <DetailRow label="Risiko" gt={`F=${gt.risk_in.f} W=${gt.risk_in.w} P=${gt.risk_in.p} S=${gt.risk_in.s} => R=${gt.risk_in.r}`} />
+      {gt.risk_out.r > 0 && (
+        <DetailRow label="Restrisiko" gt={`F=${gt.risk_out.f} W=${gt.risk_out.w} P=${gt.risk_out.p} S=${gt.risk_out.s} => R=${gt.risk_out.r}`} />
+      )}
+      <DetailRow label="Massnahmen" gt={gt.measures?.join('\n') || '-'} multiline />
+      <DetailRow label="Typ" gt={gt.measure_type || '-'} />
+      {gt.norm_references?.length > 0 && (
+        <DetailRow label="Normen" gt={gt.norm_references.join(', ')} />
+      )}
+      <DetailRow label="Hinreichend" gt={gt.sufficient ? 'JA' : 'NEIN'} />
+      {gt.comment && <DetailRow label="Kommentar" gt={gt.comment} />}
+    </div>
+  )
+}
+
+/** 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} />
+      <DetailRow label="Szenario" gt={engine.scenario || extractScenario(engine.description) || '-'} />
+      <DetailRow label="Gefahrenstelle" gt={engine.zone || '-'} />
+      {engine.lifecycle_phase && (
+        <DetailRow label="Lebensphasen" gt={formatLifecycles(engine.lifecycle_phase)} />
+      )}
+      <DetailRow label="Moeglicher Schaden" gt={engine.possible_harm || '-'} />
+      <DetailRow label="Trigger" gt={engine.trigger_event || '-'} />
+      {engine.affected_person && (
+        <DetailRow label="Betroffene Personen" gt={engine.affected_person} />
+      )}
+      {engine.mitigations && engine.mitigations.length > 0 ? (
+        <DetailRow label="Massnahmen" gt={engine.mitigations.join('\n')} multiline />
+      ) : (
+        <DetailRow label="Massnahmen" gt="(keine zugeordnet)" />
+      )}
+      {clarStatus && clarStatus.total > 0 && (
+        <ClarificationBanner status={clarStatus} projectId={projectId} />
+      )}
+      {(() => {
+        const norms = extractEngineNorms(engine.description)
+        if (norms.length === 0) return null
+        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
@@ -184,53 +251,8 @@ function DetailComparison({ gt, engine, clarStatus, projectId }: {
 }) {
   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} />
-        <DetailRow label="Ursache" gt={gt.hazard_cause} />
-        <DetailRow label="Gefahrenstelle" gt={gt.component_zone} />
-        <DetailRow label="Lebensphasen" gt={gt.lifecycle_phases?.join(', ') || '-'} />
-        <DetailRow label="Risiko" gt={`F=${gt.risk_in.f} W=${gt.risk_in.w} P=${gt.risk_in.p} S=${gt.risk_in.s} => R=${gt.risk_in.r}`} />
-        {gt.risk_out.r > 0 && (
-          <DetailRow label="Restrisiko" gt={`F=${gt.risk_out.f} W=${gt.risk_out.w} P=${gt.risk_out.p} S=${gt.risk_out.s} => R=${gt.risk_out.r}`} />
-        )}
-        <DetailRow label="Massnahmen" gt={gt.measures?.join('\n') || '-'} multiline />
-        <DetailRow label="Typ" gt={gt.measure_type || '-'} />
-        {gt.norm_references?.length > 0 && (
-          <DetailRow label="Normen" gt={gt.norm_references.join(', ')} />
-        )}
-        <DetailRow label="Hinreichend" gt={gt.sufficient ? 'JA' : 'NEIN'} />
-        {gt.comment && <DetailRow label="Kommentar" gt={gt.comment} />}
-      </div>
-      {/* Right: Engine */}
-      <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} />
-        <DetailRow label="Szenario" gt={engine.scenario || extractScenario(engine.description) || '-'} />
-        <DetailRow label="Gefahrenstelle" gt={engine.zone || '-'} />
-        {engine.lifecycle_phase && (
-          <DetailRow label="Lebensphasen" gt={formatLifecycles(engine.lifecycle_phase)} />
-        )}
-        <DetailRow label="Moeglicher Schaden" gt={engine.possible_harm || '-'} />
-        <DetailRow label="Trigger" gt={engine.trigger_event || '-'} />
-        {engine.affected_person && (
-          <DetailRow label="Betroffene Personen" gt={engine.affected_person} />
-        )}
-        {engine.mitigations && engine.mitigations.length > 0 ? (
-          <DetailRow label="Massnahmen" gt={engine.mitigations.join('\n')} multiline />
-        ) : (
-          <DetailRow label="Massnahmen" gt="(keine zugeordnet)" />
-        )}
-        {clarStatus && clarStatus.total > 0 && (
-          <ClarificationBanner status={clarStatus} projectId={projectId} />
-        )}
-        {(() => {
-          const norms = extractEngineNorms(engine.description)
-          if (norms.length === 0) return null
-          return <DetailRow label="Referenzierte Normen" gt={norms.join(' | ')} />
-        })()}
-      </div>
+      <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) => (
-          <tr key={i} className="hover:bg-red-50/50">
-            <td className="px-3 py-2 text-gray-400">{e.nr}</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>
-        ))}
+        {entries.map((e, i) => {
+          const isOpen = expanded[i]
+          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) => (
-          <tr key={i} className="hover:bg-gray-50 dark:hover:bg-gray-700/30">
-            <td className="px-3 py-2 text-gray-800 dark:text-gray-200">{e.name}</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>
-        ))}
+        {entries.map((e, i) => {
+          const isOpen = expanded[i]
+          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>
   )