feat: Struktur für Charts verbessert und Komponenten getrennt

- `LoopMeasurementChart.tsx` und `TDRChart.tsx` erstellt für separate Diagramm-Darstellungen.
- Neue Struktur unter `/components/modules/kue705FO/charts/` eingeführt.
- `ChartModal.tsx` bleibt für generelle Nutzung erhalten.
- Erhöhte Wartbarkeit und Modularität durch Trennung der Chart-Komponenten.

components/modules/kue705FO/Kue705FO.tsx

@@ -0,0 +1,449 @@
+"use client"; // components/modules/Kue705FO.tsx
+import React, { useState, useEffect, useRef } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
+import { useSelector } from "react-redux";
+import KueModal from "../../modales/kueModal/KueModal";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { RootState } from "../../../redux/store";
+import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
+import { useDispatch } from "react-redux";
+import {
+  setSelectedChartData,
+  setSelectedFileName,
+} from "../../../redux/slices/variablesSlice";
+import TDRPopup from "../../modales/kueModal/LoopTDRChartActionBar";
+import { createLoopChart, createTDRChart } from "../../../utils/chartUtils";
+import { getAlarmDisplayText } from "../../../utils/alarmUtils";
+import { goLoop } from "../../../utils/goLoop";
+import { goTDR } from "../../../utils/goTDR";
+import { loadTDRChartData } from "../../../utils/loadTDRChartData";
+import { loadLoopChartData } from "../../../utils/loadLoopChartData";
+import { Kue705FOProps } from "../../../types/components/Kue705FOProps";
+import ChartModal from "./charts/ChartModal";
+import { setActiveMode } from "../../../redux/slices/chartDataSlice";
+
+const Kue705FO: React.FC<Kue705FOProps> = ({
+  isolationswert,
+  schleifenwiderstand,
+  modulName,
+  kueOnline,
+  slotIndex,
+  tdrLocation,
+  alarmStatus,
+}) => {
+  /*   console.log(
+    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
+  ); */
+  const selectedChartData = useSelector(
+    (state: RootState) => state.variables.selectedChartData
+  );
+  const dispatch = useDispatch();
+
+  const chartRef = useRef(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null); // Plugin-Status für Chart.js
+  const [kueVersion, setKueVersion] = useState("V4.19");
+  const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
+  const [currentModulName, setCurrentModulName] = useState(modulName);
+  const [activeButton, setActiveButton] = useState("Schleife");
+  const [loopTitleText, setloopTitleText] = useState(
+    "Schleifenwiderstand [kOhm]"
+  );
+  const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand); // Initialisiere den loopDisplayValue mit schleifenwiderstand
+
+  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
+  const [groundFaultDisplayText, setGroundFaultDisplayText] =
+    useState("Erdschluss");
+  const [loopFaultDisplayText, setLoopFaultDisplayText] =
+    useState("Schleifenfehler");
+  const [isoFaultDisplayText, setIsoFaultDisplayText] =
+    useState("Isolationsfehler");
+  const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
+
+  const [loading, setLoading] = useState(false);
+  const [isoDisplayValue, setIsoDisplayValue] = useState<
+    string | JSX.Element
+  >(); //Test erstmal leer ohne isolationswert
+  const [showModal, setShowModal] = useState(false);
+  const [showChartModal, setShowChartModal] = useState(false);
+  const [chartData, setChartData] = useState(null);
+
+  useEffect(() => {
+    if (chartData) {
+      dispatch(setSelectedChartData(chartData));
+    }
+  }, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert
+
+  // Redux-Variablen abrufen
+  const {
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+    kueVersion: reduxKueVersion,
+    tdrActive,
+  } = useSelector((state: RootState) => state.variables);
+
+  const handleOpenModal = () => setShowModal(true);
+  const handleCloseModal = () => setShowModal(false);
+
+  const handleOpenChartModal = () => {
+    setShowChartModal(true);
+    if (activeButton === "TDR") {
+      loadTDRChartData(selectedFileName, setChartData);
+    } else {
+      loadLoopChartData(slotIndex, setChartData);
+    }
+  };
+
+  const handleButtonClick = (button: "Schleife" | "TDR") => {
+    if (button === "Schleife") {
+      setActiveButton("Schleife");
+      setloopTitleText("Schleifenwiderstand [kOhm]");
+      setLoopDisplayValue(schleifenwiderstand); // Setze den Wert auf schleifenwiderstand
+      dispatch(setActiveMode("Schleife")); // 🔥 Speichert den Modus in Redux
+    } else if (button === "TDR") {
+      setActiveButton("TDR");
+      setloopTitleText("Entfernung [Km]");
+      setLoopDisplayValue(
+        tdrLocation && tdrLocation[slotIndex] !== undefined
+          ? tdrLocation[slotIndex]
+          : "0"
+      ); // Setze den Wert auf tdrLocation oder "0" als Fallback
+      dispatch(setActiveMode("TDR")); // 🔥 Speichert den Modus in Redux
+    }
+  };
+
+  // Funktion aufrufen in handleRefreshClick
+  const handleRefreshClick = () => {
+    if (activeButton === "Schleife") {
+      goLoop(slotIndex, setLoading);
+    } else if (activeButton === "TDR") {
+      goTDR(slotIndex, setLoading);
+    }
+  };
+
+  const handleCloseChartModal = () => {
+    if (chartInstance.current) {
+      console.log("Chart wird beim Schließen des Modals zerstört.");
+      chartInstance.current.destroy();
+      chartInstance.current = null;
+    }
+    setShowChartModal(false);
+  };
+
+  // Funktion zum Erstellen des TDR-Charts
+
+  const chartInstance = useRef<Chart | null>(null);
+
+  const selectedFileName = useSelector(
+    (state: RootState) => state.variables.selectedFileName
+  );
+
+  // Füge das Plugin zu Chart.js hinzu
+  useEffect(() => {
+    // Lade das Plugin nur, wenn `window` verfügbar ist
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default); // Setze das Plugin
+        Chart.register(mod.default); // Plugin zur Chart.js-Instanz registrieren
+      });
+    }
+  }, []);
+
+  interface DataLoop {
+    t: number; // Zeit oder Index
+    m: number; // Isolationswiderstand
+    n: number; // Schleifenwiderstand
+  }
+
+  useEffect(() => {
+    const updateAlarmStatus = () => {
+      const alarmStatus =
+        (kueAlarm1 && kueAlarm1[slotIndex]) ||
+        (kueAlarm2 && kueAlarm2[slotIndex]) ||
+        (kueCableBreak && kueCableBreak[slotIndex]) ||
+        (kueGroundFault && kueGroundFault[slotIndex]);
+
+      setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
+    };
+
+    updateAlarmStatus();
+    const interval = setInterval(updateAlarmStatus, 10000);
+    return () => clearInterval(interval);
+  }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
+
+  useEffect(() => {
+    if (reduxKueVersion?.[slotIndex]) {
+      setKueVersion("V" + Number(reduxKueVersion[slotIndex]) / 100);
+    }
+  }, [slotIndex, reduxKueVersion]);
+  //---------------------------------------------------
+  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
+  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
+  useEffect(() => {
+    setIsoDisplayValue(
+      getAlarmDisplayText(
+        slotIndex,
+        kuePSTmMinus96V,
+        kueCableBreak,
+        kueGroundFault,
+        kueAlarm1,
+        kueAlarm2,
+        kueOverflow ?? undefined,
+        isolationswert,
+        isoDisplayText,
+        groundFaultDisplayText,
+        isoFaultDisplayText,
+        loopFaultDisplayText,
+        isoGreaterThan200
+      )
+    );
+  }, [
+    slotIndex,
+    isolationswert,
+    isoDisplayText,
+    groundFaultDisplayText,
+    isoFaultDisplayText,
+    loopFaultDisplayText,
+    isoGreaterThan200,
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+  ]);
+  //---------------------------------------------------
+
+  // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
+  useEffect(() => {
+    setCurrentModulName(modulName);
+    //console.log(`Modulname aktualisiert für Slot ${slotIndex}:`, modulName);
+  }, [modulName, slotIndex]);
+  //---------------------------------------------------
+  // Aktualisiert den Schleifenwiderstand, wenn sich der `schleifenwiderstand`-Prop ändert
+  useEffect(() => {
+    if (activeButton === "Schleife") {
+      setLoopDisplayValue(schleifenwiderstand);
+    }
+  }, [schleifenwiderstand, activeButton]);
+  //---------------------------------------------------
+  const noLetter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const input = e.currentTarget;
+    input.value = input.value.replace(/[^0-9]/g, "");
+  };
+  //---------------------------------------------------
+  //Auswahlmenü für Jahr, Monat und Sortierung
+  const [jahr, setJahr] = useState(new Date().getFullYear());
+  const [monat, setMonat] = useState(new Date().getMonth() + 1);
+  const [sortAscending, setSortAscending] = useState(true);
+
+  const handleSortToggle = () => {
+    setSortAscending(!sortAscending);
+    console.log(
+      "Sortierung umkehren:",
+      sortAscending ? "Absteigend" : "Aufsteigend"
+    );
+  };
+
+  const handleAktualisieren = () => {
+    console.log("Aktualisieren mit Jahr:", jahr, "Monat:", monat);
+    // Logik für die Aktualisierung hinzufügen
+  };
+
+  //---------------------------------------------------
+
+  //----------------------------------
+  useEffect(() => {
+    if (selectedChartData) {
+      createTDRChart(selectedChartData); // Neues Chart erstellen
+    }
+
+    return () => {
+      // Cleanup beim Komponentenwechsel
+      if (chartInstance.current) {
+        console.log("Chart wird beim Komponentenwechsel zerstört.");
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [selectedChartData]);
+
+  //----------------------------------
+
+  return (
+    <div
+      className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
+             scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3
+             "
+    >
+      {kueOnline === 1 ? (
+        <>
+          <div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
+            <div className="flex items-start justify-between h-[1.875rem]">
+              <div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
+                <span className="text-white text-[0.625rem]">
+                  {slotIndex + 1}
+                </span>
+              </div>
+
+              <h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
+                KÜ705-FO
+              </h3>
+
+              <button
+                onClick={handleOpenModal}
+                className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
+              >
+                <span className="text-white text-[1.25rem]">⚙</span>
+              </button>
+            </div>
+            {}
+            <KueModal
+              showModal={showModal}
+              onClose={handleCloseModal}
+              slot={slotIndex}
+              onModulNameChange={setCurrentModulName}
+            />
+            <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
+              <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
+                <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
+                  <span className="text-white text-[0.625rem]">Betrieb</span>
+                  <span className="text-white text-[0.625rem]">Alarm</span>
+                </div>
+                <div className="flex flex-col items-center space-y-[0.188rem]">
+                  <div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
+                  <div
+                    className={`w-[0.625rem] h-[0.625rem] rounded-full ${
+                      currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
+                    }`}
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            {/* Anzeige des Isolation */}
+            <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
+              <div className="text-center">
+                <span
+                  className={
+                    Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
+                    Number(kueCableBreak?.[slotIndex]) === 1 ||
+                    Number(kueGroundFault?.[slotIndex]) === 1 ||
+                    Number(kueAlarm1?.[slotIndex]) === 1 ||
+                    Number(kueAlarm2?.[slotIndex]) === 1
+                      ? "text-red-500 text-[0.875rem]"
+                      : Number(kueOverflow?.[slotIndex]) === 1
+                      ? "text-white text-[0.875rem]"
+                      : ""
+                  }
+                >
+                  {isoDisplayValue}
+                </span>
+
+                {Number(kuePSTmMinus96V?.[slotIndex]) !== 1 &&
+                  Number(kueCableBreak?.[slotIndex]) !== 1 &&
+                  Number(kueGroundFault?.[slotIndex]) !== 1 &&
+                  Number(kueAlarm1?.[slotIndex]) !== 1 &&
+                  Number(kueAlarm2?.[slotIndex]) !== 1 &&
+                  Number(kueOverflow?.[slotIndex]) !== 1 && (
+                    <div className="text-[0.5rem]">ISO MOhm</div>
+                  )}
+              </div>
+            </div>
+
+            <div className="absolute top-0 left-[4.688rem] w-[0.188rem] h-full bg-white z-0"></div>
+            <div className="absolute top-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>
+
+            <div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
+              {currentModulName || `Modul ${slotIndex + 1}`}
+            </div>
+
+            <div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
+              {kueVersion}
+            </div>
+          </div>
+
+          {/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
+          <div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[8.125rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
+            <span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-1">
+              {loopTitleText}
+            </span>
+
+            <div className="relative w-full h-[2.813rem]  bg-gray-100 border border-gray-400 flex items-center justify-center mt-4">
+              <button
+                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
+                className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
+                disabled={loading} // Disable button while loading
+              >
+                <span className="text-white text-[1.125rem]">⟳</span>
+              </button>
+
+              <div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
+                <div className="text-center text-black text-[0.625rem]">
+                  <p>
+                    {loopDisplayValue +
+                      (activeButton === "Schleife" ? " KOhm" : " Km")}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex mt-1 space-x-[0.063rem] ">
+              <button
+                onClick={() => handleButtonClick("Schleife")}
+                className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
+                  activeButton === "Schleife"
+                    ? "bg-littwin-blue"
+                    : "bg-gray-400"
+                }`}
+              >
+                Schleife
+              </button>
+              <button
+                onClick={() => handleButtonClick("TDR")}
+                className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
+                  Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
+                    ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
+                    : activeButton === "TDR"
+                    ? "bg-littwin-blue" // Aktiviert: Littwin Blau
+                    : "bg-gray-400" // Nicht geklickt: Dunkelgrau
+                }`}
+                disabled={
+                  Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
+                } // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
+              >
+                TDR
+              </button>
+            </div>
+
+            <button
+              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
+              className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
+            >
+              Messkurve
+            </button>
+          </div>
+
+          {/* Modal für Messkurve */}
+          {showChartModal && (
+            <ChartModal
+              isOpen={showChartModal}
+              onClose={handleCloseChartModal}
+              chartRef={chartRef}
+            />
+          )}
+        </>
+      ) : (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          <p>Kein Modul im Slot {slotIndex + 1}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Kue705FO;

components/modules/kue705FO/charts/ChartModal.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useRef } from "react";
+import ReactModal from "react-modal";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+import Chart from "chart.js/auto";
+import "chartjs-adapter-date-fns";
+import { parseISO } from "date-fns";
+import LoopTDRPopup from "../../../modales/kueModal/LoopTDRChartActionBar";
+
+interface ChartModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ChartModal: React.FC<ChartModalProps> = ({ isOpen, onClose }) => {
+  const chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<Chart | null>(null);
+
+  // Redux State abrufen
+  const chartData = useSelector((state: RootState) => state.chartData.data);
+  const activeMode = useSelector(
+    (state: RootState) => state.chartData.activeMode
+  );
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        const labels = chartData.map((entry) =>
+          entry.timestamp ? parseISO(entry.timestamp) : new Date()
+        );
+
+        chartInstance.current = new Chart(ctx, {
+          type: "line",
+          data: {
+            labels,
+            datasets: [
+              {
+                label: "Isolationswiderstand (MOhm)",
+                data: chartData.map((entry) => entry.isolation ?? 0),
+                borderColor: "rgba(0, 123, 255, 1)",
+                backgroundColor: "rgba(0, 123, 255, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-left",
+              },
+              {
+                label: "Schleifenwiderstand (kOhm)",
+                data: chartData.map((entry) => entry.loop ?? 0),
+                borderColor: "rgba(108, 117, 125, 1)",
+                backgroundColor: "rgba(108, 117, 125, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-right",
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: {
+                  unit: "hour",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
+                grid: {
+                  drawBorder: true, // 🔥 Stellt sicher, dass die X-Achse sichtbar ist
+                },
+              },
+              y: {
+                id: "y-left",
+                position: "left",
+                title: {
+                  display: true,
+                  text: "MOhm",
+                },
+                min: 0,
+                max:
+                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
+                  10,
+                grid: {
+                  drawOnChartArea: true, // 🔥 Korrektur, damit es sich nicht überlagert
+                },
+              },
+              "y-right": {
+                id: "y-right",
+                position: "right",
+                title: {
+                  display: true,
+                  text: "kOhm",
+                },
+                min: 0,
+                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
+                grid: {
+                  drawOnChartArea: false, // 🔥 Verhindert doppelte Linien
+                },
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData, activeMode]);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: "80%",
+          maxWidth: "50rem",
+          height: "30rem",
+          padding: "1rem",
+          overflow: "hidden",
+        },
+      }}
+    >
+      <button
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "0.625rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      {/* Beibehaltung der UI mit Kalender und Buttons */}
+      <div style={{ maxHeight: "100%", overflow: "auto" }}>
+        <LoopTDRPopup />
+      </div>
+
+      {/* Canvas für das Chart */}
+      <canvas
+        ref={chartRef}
+        style={{ width: "100%", height: "20rem", marginTop: "1rem" }}
+      ></canvas>
+    </ReactModal>
+  );
+};
+
+export default ChartModal;

components/modules/kue705FO/charts/LoopMeasurementChart.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import Chart from "chart.js/auto";
+import "chartjs-adapter-date-fns";
+import { parseISO } from "date-fns";
+
+const LoopMeasurementChart: React.FC = () => {
+  const chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<Chart | null>(null);
+
+  // Redux-Daten abrufen
+  const chartData = useSelector((state: RootState) => state.chartData.data);
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy(); // Bestehendes Chart zerstören
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        const labels = chartData.map((entry) =>
+          entry.timestamp ? parseISO(entry.timestamp) : new Date()
+        );
+
+        chartInstance.current = new Chart(ctx, {
+          type: "line",
+          data: {
+            labels,
+            datasets: [
+              {
+                label: "Schleifenwiderstand (kOhm)",
+                data: chartData.map((entry) => entry.loop ?? 0),
+                borderColor: "rgba(75, 192, 192, 1)", // Türkis
+                backgroundColor: "rgba(75, 192, 192, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-left",
+              },
+              {
+                label: "Zusätzliche Schleifenmesswerte",
+                data: chartData.map((entry) => entry.additional ?? 0),
+                borderColor: "rgba(255, 159, 64, 1)", // Orange
+                backgroundColor: "rgba(255, 159, 64, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-right",
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: {
+                  unit: "hour",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
+                grid: {
+                  drawBorder: true,
+                },
+              },
+              y: {
+                id: "y-left",
+                position: "left",
+                title: {
+                  display: true,
+                  text: "kOhm",
+                },
+                min: 0,
+                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
+              },
+              "y-right": {
+                id: "y-right",
+                position: "right",
+                title: {
+                  display: true,
+                  text: "Zusätzliche Werte",
+                },
+                min: 0,
+                max:
+                  Math.max(...chartData.map((entry) => entry.additional ?? 1)) +
+                  1,
+                grid: {
+                  drawOnChartArea: false,
+                },
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData]);
+
+  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+};
+
+export default LoopMeasurementChart;

components/modules/kue705FO/charts/TDRChart.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import Chart from "chart.js/auto";
+import "chartjs-adapter-date-fns";
+import { parseISO } from "date-fns";
+
+const TDRChart: React.FC = () => {
+  const chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<Chart | null>(null);
+  const chartData = useSelector((state: RootState) => state.chartData.data);
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        chartInstance.current = new Chart(ctx, {
+          type: "line",
+          data: {
+            labels: chartData.map((entry) => parseISO(entry.timestamp)),
+            datasets: [
+              {
+                label: "Isolationswiderstand (MOhm)",
+                data: chartData.map((entry) => entry.isolation ?? 0),
+                borderColor: "rgba(0, 123, 255, 1)",
+                backgroundColor: "rgba(0, 123, 255, 0.2)",
+                tension: 0.1,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: {
+                  unit: "hour",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: { display: true, text: "Zeit" },
+              },
+              y: {
+                title: { display: true, text: "MOhm" },
+                min: 0,
+                max:
+                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
+                  10,
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData]);
+
+  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+};
+
+export default TDRChart;

components/modules/kue705FO/handlers/firmwareUpdate.ts

@@ -0,0 +1,16 @@
+const firmwareUpdate = (slot: number) => {
+  const url = `${window.location.origin}/CPL?/kabelueberwachung.html&KSU${slot}=1`;
+  fetch(url, { method: "GET" })
+    .then((response) => {
+      if (response.ok) {
+        alert(`Update an ${slot + 1} erfolgreich gestartet!`);
+      } else {
+        alert("Fehler beim Update!");
+      }
+    })
+    .catch((error) => {
+      console.error("Fehler:", error);
+      alert("Fehler beim Update!");
+    });
+};
+export default firmwareUpdate;

components/modules/kue705FO/handlers/handleChange.ts

@@ -0,0 +1,18 @@
+import { Dispatch, SetStateAction } from "react";
+
+// Funktion zur Änderung der Werte
+const handleChange = (
+  setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
+  e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
+  slot: number // Typ für den Slot
+) => {
+  const value = e.target.value;
+  setter((prev: any[]) => {
+    // Typ für den vorherigen Zustand
+    const updated = [...prev];
+    updated[slot] = value;
+    return updated;
+  });
+};
+
+export default handleChange;

components/modules/kue705FO/handlers/handleDisplayEinschalten.ts

@@ -0,0 +1,16 @@
+const handleDisplayEinschalten = (slot: number) => {
+  const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
+  fetch(url, { method: "GET" })
+    .then((response) => {
+      if (response.ok) {
+        alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
+      } else {
+        alert("Fehler beim Einschalten des Displays!");
+      }
+    })
+    .catch((error) => {
+      console.error("Fehler:", error);
+      alert("Fehler beim Einschalten des Displays!");
+    });
+};
+export default handleDisplayEinschalten;

components/modules/kue705FO/handlers/handleSave.ts

@@ -0,0 +1,123 @@
+// components/modales/kueModal/handlers/handleSave.ts
+import { setVariables } from "../../../../redux/slices/variablesSlice";
+
+export interface OriginalValues {
+  kueID: string[];
+  kueBezeichnungen: string[];
+  isolationsgrenzwerte: number[];
+  verzoegerung: number[];
+  untereSchleifenGrenzwerte: number[];
+  obereSchleifenGrenzwerte: number[];
+  schleifenintervall: number[];
+}
+
+interface HandleSaveParams {
+  ids: string[]; // kueID im Redux-Slice
+  bezeichnungen: string[]; // kueBezeichnungen im Redux-Slice
+  isolationsgrenzwerte: number[];
+  verzoegerung: number[];
+  untereSchleifenGrenzwerte: number[];
+  obereSchleifenGrenzwerte: number[];
+  schleifenintervall: number[];
+  originalValues: OriginalValues;
+  slot: number;
+  dispatch: (action: any) => void;
+  onModulNameChange: (id: string) => void;
+  onClose: () => void;
+}
+
+const handleSave = ({
+  ids,
+  bezeichnungen,
+  isolationsgrenzwerte,
+  verzoegerung,
+  untereSchleifenGrenzwerte,
+  obereSchleifenGrenzwerte,
+  schleifenintervall,
+  originalValues,
+  slot,
+  dispatch,
+  onModulNameChange,
+  onClose,
+}: HandleSaveParams): void => {
+  const changes: Partial<{
+    KID: string;
+    KIA: string;
+    KL_: number;
+    KD_: number;
+    KR_: number;
+    KRO_: number;
+    KRI: number;
+  }> = {};
+
+  if (ids[slot] !== originalValues.kueID[slot]) {
+    changes.KID = ids[slot];
+  }
+  if (bezeichnungen[slot] !== originalValues.kueBezeichnungen[slot]) {
+    changes.KIA = bezeichnungen[slot];
+  }
+  if (
+    isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
+  ) {
+    changes.KL_ = isolationsgrenzwerte[slot];
+  }
+  if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
+    changes.KD_ = verzoegerung[slot];
+  }
+  if (
+    untereSchleifenGrenzwerte[slot] !==
+    originalValues.untereSchleifenGrenzwerte[slot]
+  ) {
+    changes.KR_ = untereSchleifenGrenzwerte[slot];
+  }
+  if (
+    obereSchleifenGrenzwerte[slot] !==
+    originalValues.obereSchleifenGrenzwerte[slot]
+  ) {
+    changes.KRO_ = obereSchleifenGrenzwerte[slot];
+  }
+  if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
+    changes.KRI = schleifenintervall[slot];
+  }
+
+  if (Object.keys(changes).length > 0) {
+    let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
+    Object.entries(changes).forEach(([paramKey, paramValue]) => {
+      if (paramValue !== undefined) {
+        url += `&${paramKey}${slot}=${encodeURIComponent(paramValue)}`;
+      }
+    });
+
+    fetch(url, { method: "GET" })
+      .then((response) => {
+        if (response.ok) {
+          alert("Daten erfolgreich gespeichert!");
+          onModulNameChange(ids[slot]);
+
+          dispatch(
+            setVariables({
+              kueID: [...ids],
+              kueBezeichnungen: [...bezeichnungen],
+              isolationsgrenzwerte: [...isolationsgrenzwerte],
+              verzoegerung: [...verzoegerung],
+              untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+              obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+              schleifenintervall: [...schleifenintervall],
+            })
+          );
+        } else {
+          alert("Fehler beim Speichern der Daten!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        alert("Fehler beim Senden der Daten!");
+      });
+  } else {
+    alert("Keine Änderungen vorgenommen.");
+  }
+
+  onClose();
+};
+
+export default handleSave;