fix: KVZ Button style wie die anderen (ISO, RSL, TDR) und mit eigene Modal

components/main/kabelueberwachung/kue705FO/Kue705FO.tsx

@@ -2,13 +2,14 @@
 import React, { useState, useMemo } from "react";
 import { useSelector } from "react-redux";
 import KueModal from "./modals/SettingsModalWrapper";
-import FallSensors from "../../fall-detection-sensors/FallSensors";
+// import FallSensors from "../../fall-detection-sensors/FallSensors";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 import { Kue705FOProps } from "../../../../types/Kue705FOProps";
 // Import the new specialized ChartView components
 import IsoChartView from "./Charts/IsoMeasurementChart/IsoChartView";
 import LoopChartView from "./Charts/LoopMeasurementChart/LoopChartView";
 import TDRChartView from "./Charts/TDRChart/TDRChartView";
+import KVZChartView from "./Charts/KVZChart/KVZChartView";
 // Keep ChartSwitcher import for backwards compatibility if needed
 // import ChartSwitcher from "./Charts/ChartSwitcher";
 // Remove separate chart imports since we use ChartView components
@@ -68,7 +69,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [showIsoModal, setShowIsoModal] = useState(false);
   const [showRslModal, setShowRslModal] = useState(false);
   const [showTdrModal, setShowTdrModal] = useState(false);
-  const [showKvzPanel, setShowKvzPanel] = useState(false);
+  const [showKvzModal, setShowKvzModal] = useState(false);
   // Keep original showChartModal for backwards compatibility if needed
   // const [showChartModal, setShowChartModal] = useState(false);
   // Removed unused loopMeasurementCurveChartData state
@@ -85,7 +86,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     tdrActive, // <- TDR aktiv Status hinzugefügt
     kvzPresence, // <- KVz Presence Array hinzugefügt
     kvzActive, // <- KVz Active Array hinzugefügt
-    kvzStatus, // <- KVz LED Status Array hinzugefügt
+    // kvzStatus, // <- KVz LED Status Array (jetzt nur im KVZ Modal verwendet)
   } = useSelector((state: RootState) => state.kueDataSlice);
 
   //---------------------------------------------
@@ -174,8 +175,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   };
 
   const openKvzModal = () => {
-    setShowKvzPanel(!showKvzPanel);
+    setShowKvzModal(true);
   };
+  const closeKvzModal = () => setShowKvzModal(false);
   //----------------------------------
   //hooks einbinden
   const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
@@ -240,12 +242,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     kvzActive?.[slotIndex] === 1 &&
     isAdminLoggedIn;
 
-  // KVz LED Status abrufen (4 LEDs pro Slot)
-  const getKvzLedStatus = (ledIndex: number) => {
-    const arrayIndex = slotIndex * 4 + ledIndex;
-    return kvzStatus?.[arrayIndex] === 1;
-  };
-
   // Removed useChartData(loopMeasurementCurveChartData) as the state was unused
 
   //---------------------------------
@@ -431,8 +427,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                     ? "bg-littwin-blue text-white cursor-pointer"
                     : "bg-gray-400 cursor-default"
                 } text-[0.625rem] flex items-center justify-center p-2 min-w-[2.5rem]`}
+                disabled={!isKvzActiveForSlot}
+                title={
+                  isKvzActiveForSlot ? "KVZ öffnen" : "KVZ nicht verfügbar"
+                }
               >
-                {isKvzActiveForSlot ? "KVz" : "\u00A0\u00A0\u00A0"}
+                {isKvzActiveForSlot ? "KVZ" : "\u00A0\u00A0\u00A0"}
               </button>
             </div>
 
@@ -467,15 +467,22 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
               slotIndex={slotIndex}
             />
           )}
+          {isKvzActiveForSlot && (
+            <KVZChartView
+              isOpen={showKvzModal}
+              onClose={closeKvzModal}
+              slotIndex={slotIndex}
+            />
+          )}
         </>
       )}
 
-      {/* KVz Panel - Anzeige ganz unten, nur wenn KVz aktiv ist */}
-      {showKvzPanel && isKvzActiveForSlot && (
+      {/* Früher inline Panel – jetzt eigenes Modal (KVZChartView) */}
+      {/* {showKvzPanel && isKvzActiveForSlot && (
         <div className="flex flex-col items-center  ">
           <FallSensors slotIndex={slotIndex} />
         </div>
-      )}
+      )} */}
 
       {/* Offline-View */}
       {kueOnline !== 1 && (