From 6f776b2fa85fd69debf2b3999519d000b4f1d7de Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Mon, 11 May 2026 11:18:12 +0200
Subject: [PATCH] fix(iace): FAB pointer-events fix + Initialisieren auf
 Betriebszustaende-Seite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FAB-Container bekommt pointer-events-none, nur Button + Panel sind klickbar
  (behebt: Buttons auf der rechten Seite waren nicht klickbar)
- Initialisieren + Neu-Initialisieren Buttons von Interview-Seite auf
  Betriebszustaende-Seite verschoben (natuerlicher Flow: Grenzen → States → Init)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../[projectId]/_components/IACEFlowFAB.tsx   |  6 +-
 .../[projectId]/operational-states/page.tsx   | 86 +++++++++++++++++++
 2 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/admin-compliance/app/sdk/iace/[projectId]/_components/IACEFlowFAB.tsx b/admin-compliance/app/sdk/iace/[projectId]/_components/IACEFlowFAB.tsx
index d8b1388..e797336 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/_components/IACEFlowFAB.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/_components/IACEFlowFAB.tsx
@@ -95,13 +95,13 @@ export default function IACEFlowFAB() {
   }
 
   return (
-    <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+    <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end pointer-events-none">
       {/* Expanded Panel */}
       <div
         ref={panelRef}
         className={`mb-3 w-[300px] max-h-[70vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 transition-all duration-200 origin-bottom-right ${
           isOpen
-            ? 'opacity-100 scale-100 translate-y-0'
+            ? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
             : 'opacity-0 scale-95 translate-y-2 pointer-events-none'
         }`}
       >
@@ -223,7 +223,7 @@ export default function IACEFlowFAB() {
       <button
         ref={fabRef}
         onClick={() => setIsOpen((o) => !o)}
-        className="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all flex items-center justify-center"
+        className="pointer-events-auto w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all flex items-center justify-center"
         title="CE-Prozessschritte"
       >
         {/* Steps/flow icon */}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/operational-states/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/operational-states/page.tsx
index 26d8e74..0580e80 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/operational-states/page.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/operational-states/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { useOperationalStates, type OperationalStateInfo } from './_hooks/useOperationalStates'
 
@@ -57,6 +58,31 @@ export default function OperationalStatesPage() {
     deltaLoading,
   } = useOperationalStates(projectId)
 
+  const [initStatus, setInitStatus] = useState<'idle' | 'running' | 'done' | 'error'>('idle')
+  const [initResult, setInitResult] = useState<{ steps: { name: string; status: string; count: number; details?: string }[]; summary?: Record<string, number> } | null>(null)
+
+  async function handleInitialize(force: boolean) {
+    // Save current selection first
+    await saveSelection(selectedStates)
+    setInitStatus('running')
+    setInitResult(null)
+    try {
+      const url = `/api/sdk/v1/iace/projects/${projectId}/initialize${force ? '?force=true' : ''}`
+      const res = await fetch(url, { method: 'POST' })
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}))
+        alert(err.error || 'Initialisierung fehlgeschlagen')
+        setInitStatus('error')
+        return
+      }
+      const data = await res.json()
+      setInitResult(data)
+      setInitStatus('done')
+    } catch {
+      setInitStatus('error')
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -213,6 +239,66 @@ export default function OperationalStatesPage() {
         )}
       </div>
 
+      {/* Initialize Section */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
+        <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-1">Projekt initialisieren</h2>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
+          Erzeugt Gefaehrdungen und Massnahmen basierend auf Maschinenbeschreibung, Komponenten und den ausgewaehlten Betriebszustaenden.
+        </p>
+        <div className="flex items-center gap-3">
+          <button
+            disabled={initStatus === 'running' || selectedStates.length === 0}
+            onClick={() => handleInitialize(false)}
+            className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {initStatus === 'running' ? (
+              <>
+                <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
+                Analyse laeuft...
+              </>
+            ) : (
+              <>
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                Initialisieren
+              </>
+            )}
+          </button>
+          <button
+            disabled={initStatus === 'running' || selectedStates.length === 0}
+            onClick={() => {
+              if (!confirm('Alle bestehenden Gefaehrdungen und Massnahmen loeschen und neu erstellen?')) return
+              handleInitialize(true)
+            }}
+            className="flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Neu initialisieren
+          </button>
+        </div>
+
+        {initResult && (
+          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
+            <h3 className="text-sm font-semibold text-green-800 dark:text-green-300">Initialisierung abgeschlossen</h3>
+            <div className="space-y-1">
+              {initResult.steps.map((s, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs">
+                  <span className={s.status === 'done' ? 'text-green-600' : s.status === 'skipped' ? 'text-gray-400' : 'text-red-500'}>
+                    {s.status === 'done' ? '\u2713' : s.status === 'skipped' ? '\u25CB' : '\u2717'}
+                  </span>
+                  <span className="text-gray-700 dark:text-gray-300">{s.name}</span>
+                  {s.count > 0 && <span className="text-gray-400">({s.count})</span>}
+                  {s.details && <span className="text-gray-400 text-[10px]">— {s.details}</span>}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
       {/* Footer Actions */}
       <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
         <button