fix: Behebt "window is not defined" Fehler und ermöglicht erfolgreichen Build

- Import von `chartjs-plugin-zoom` in `LoopMeasurementChart.tsx` dynamisch in `useEffect` verschoben.
- Stellt sicher, dass `window` nur im Client-Umfeld genutzt wird.
- Erfolgreicher Next.js Production-Build getestet.

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,4 +1,4 @@
-// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
 import React, { useEffect } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
@@ -72,8 +72,12 @@ const LoopChartActionBar: React.FC = () => {
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
       {/* Datumsauswahl */}
       <DateRangePicker
-        setVonDatum={(date) => dispatch(setVonDatum(date))}
-        setBisDatum={(date) => dispatch(setBisDatum(date))}
+        setVonDatum={(date) =>
+          dispatch(setVonDatum(date.toISOString().split("T")[0]))
+        }
+        setBisDatum={(date) =>
+          dispatch(setBisDatum(date.toISOString().split("T")[0]))
+        }
       />
 
       {/* Dropdown für DIA-Modus */}

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -1,16 +1,23 @@
-// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useEffect, useRef } from "react";
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
-import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
-
-Chart.register(zoomPlugin); // Plugin registrieren
 
 const LoopMeasurementChart = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
+    }
+  }, []);
 
   // Daten & Datum aus Redux abrufen
   const { chartData, vonDatum, bisDatum } = useSelector(
@@ -122,7 +129,9 @@ const LoopMeasurementChart = () => {
               },
               y: {
                 ticks: {
-                  callback: (value) => value.toFixed(2) + " kOhm",
+                  callback: (value) =>
+                    (typeof value === "number" ? value.toFixed(2) : value) +
+                    " kOhm",
                 },
               },
             },
@@ -130,7 +139,8 @@ const LoopMeasurementChart = () => {
               tooltip: {
                 callbacks: {
                   label: (tooltipItem) => {
-                    const date = new Date(tooltipItem.raw.x);
+                    const rawItem = tooltipItem.raw as { x: number; y: number };
+                    const date = new Date(rawItem.x);
                     const timeString = `${date
                       .getHours()
                       .toString()
@@ -138,9 +148,9 @@ const LoopMeasurementChart = () => {
                       .getMinutes()
                       .toString()
                       .padStart(2, "0")}`;
-                    return `${
-                      tooltipItem.dataset.label
-                    }: ${tooltipItem.raw.y.toFixed(2)} kOhm `;
+                    return `${tooltipItem.dataset.label}: ${(
+                      tooltipItem.raw as { x: number; y: number }
+                    ).y.toFixed(2)} kOhm `;
                   },
                 },
               },