esLint

2025-06-26 22:56:20 +02:00
parent 137839da98
commit b9651a53a9
82 changed files with 7476 additions and 4171 deletions
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -7,7 +7,7 @@ import SettingsModal from "@/components/header/settingsModal/SettingsModal";
 import { RootState } from "@/redux/store";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch } from "@/redux/store";
-import decodeToken from "@/utils/decodeToken";
+
 import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";

 function Header() {
@@ -16,7 +16,6 @@ function Header() {
  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
  // Removed duplicate declaration of deviceName

-  const handleSettingsClick = () => setShowSettingsModal(true);
  const handleCloseSettingsModal = () => setShowSettingsModal(false);

  const handleLogout = () => {
@@ -26,13 +25,6 @@ function Header() {
    router.push("/offline.html"); // Weiterleitung
  };

-  const handleLogin = () => {
-    const token = JSON.stringify({ exp: Date.now() + 5 * 60 * 1000 }); // Beispiel-Token mit 5 Minuten Ablaufzeit
-    sessionStorage.setItem("token", token); // Token speichern
-    localStorage.setItem("isAdminLoggedIn", "true"); // Admin-Status setzen
-    setIsAdminLoggedIn(true); // Zustand sofort aktualisieren
-  };
-
  useEffect(() => {
    // Initialer Check beim Laden der Komponente
    const isAdmin = localStorage.getItem("isAdminLoggedIn") === "true";
--- a/components/header/settingsModal/SettingsModal.tsx
+++ b/components/header/settingsModal/SettingsModal.tsx
@@ -1,5 +1,5 @@
 "use client"; // components/header/settingsModal/SettingsModal.tsx
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import ReactModal from "react-modal";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import { RootState } from "../../../redux/store";
@@ -8,13 +8,7 @@ import handleClearDatabase from "./handlers/handleClearDatabase";
 import handleReboot from "./handlers/handleReboot";
 import handleSetDateTime from "./handlers/handleSetDateTime";
 import handleSubmit from "./handlers/handleSubmit";
-import bcrypt from "bcryptjs";
-import CryptoJS from "crypto-js";
 import { useAdminAuth } from "./hooks/useAdminAuth";
-import { useSystemSettings } from "./hooks/useSystemSettings";
-import { generateKeyAndIV, generateToken } from "./utils/cryptoUtils";
-import USERS from "./config/users";
-import handleAdminLogin from "./handlers/handleAdminLogin";

 ReactModal.setAppElement("#__next");

@@ -27,13 +21,6 @@ function SettingModal({
 }) {
  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(showModal);

-  const { formValues, setFormValues } = useSystemSettings(showModal);
-
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [showLoginForm, setShowLoginForm] = useState(false);
-
  const deviceName_Redux = useSelector(
    (state: RootState) => state.systemSettingsSlice.deviceName
  );
@@ -69,11 +56,11 @@ function SettingModal({
  );

  const [name, setName] = useState(deviceName_Redux || "");
-  const [mac1, setMac1] = useState(mac1_Redux || "");
+  const [mac1] = useState(mac1_Redux || "");
  const [ip, setIp] = useState(ip_Redux || "");
  const [subnet, setSubnet] = useState(subnet_Redux || "");
  const [gateway, setGateway] = useState(gateway_Redux || "");
-  const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
+  const [systemUhr] = useState(datetime_Redux || "");
  const [ntp1, setNtp1] = useState(ntp1_Redux || "");
  const [ntp2, setNtp2] = useState(ntp2_Redux || "");
  const [ntp3, setNtp3] = useState(ntp3_Redux || "");
@@ -82,7 +69,7 @@ function SettingModal({
    typeof active_Redux === "boolean" ? active_Redux : active_Redux === "true"
  );

-  const [originalValues, setOriginalValues] = useState({
+  const [originalValues] = useState({
    name: name,
    ip: ip,
    subnet: subnet,
@@ -93,6 +80,8 @@ function SettingModal({
    ntpTimezone: ntpTimezone,
    active: active,
  });
+
+  // const [showLoginForm, setShowLoginForm] = useState(false);
  const currentValues = {
    name,
    ip,
@@ -266,9 +255,7 @@ function SettingModal({
              Neustart CPL
            </button>
            <button
-              onClick={() =>
-                isAdminLoggedIn ? logoutAdmin() : setShowLoginForm(true)
-              }
+              onClick={() => (isAdminLoggedIn ? logoutAdmin() : null)}
              className="bg-littwin-blue text-white px-3 py-1 xl:px-4 xl:py-2 rounded w-full md:w-auto"
            >
              {isAdminLoggedIn ? "Admin abmelden" : "Admin anmelden"}
--- a/components/icons/CogIcon.tsx
+++ b/components/icons/CogIcon.tsx
@@ -1,17 +1,20 @@
-import React from "react";
+// /components/icons/CogIcon.tsx
+import Image from "next/image";

 type Props = {
  className?: string;
  onClick?: () => void;
 };

-export default function CogIcon({ className, onClick }: Props) {
-  return (
-    <img
-      src="/icons/mdi--cog-outline.svg"
-      alt="Einstellungen"
-      className={className}
-      onClick={onClick}
-    />
-  );
-}
+const CogIcon: React.FC<Props> = ({ className, onClick }) => (
+  <Image
+    src="/icons/mdi--cog-outline.svg"
+    alt="Einstellungen"
+    className={className}
+    onClick={onClick}
+    width={24}
+    height={24}
+  />
+);
+
+export default CogIcon;
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/components/main/analogInputs/AnalogInputsChart.tsx
@@ -46,10 +46,12 @@ export default function AnalogInputsChart({
  ) as unknown as AnalogInput | null;

  const dispatch = useDispatch<AppDispatch>();
+  type AnalogInputHistoryPoint = { t: string | number | Date; m: number };
+
  const { data } = useSelector(
    (state: RootState) => state.analogInputsHistory
  ) as {
-    data: { [key: string]: any[] };
+    data: { [key: string]: AnalogInputHistoryPoint[] };
  };

  useEffect(() => {
@@ -92,7 +94,7 @@ export default function AnalogInputsChart({
        label: `Messkurve ${selectedInput?.label ?? "Eingang"} [${
          selectedInput?.unit ?? ""
        }]`,
-        data: inputData.map((point: any) => ({
+        data: inputData.map((point: AnalogInputHistoryPoint) => ({
          x: point.t,
          y: point.m,
        })),
--- a/components/main/analogInputs/AnalogInputsSettingsModal.tsx
+++ b/components/main/analogInputs/AnalogInputsSettingsModal.tsx
@@ -1,8 +1,17 @@
 "use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
 import React, { useEffect, useState } from "react";

+interface AnalogInput {
+  id: number;
+  label?: string;
+  offset?: number | string;
+  factor?: number | string;
+  loggerInterval: string;
+  unit?: string;
+}
+
 interface Props {
-  selectedInput: any;
+  selectedInput: AnalogInput;
  isOpen: boolean;
  onClose: () => void;
 }
--- a/components/main/analogInputs/AnalogInputsTable.tsx
+++ b/components/main/analogInputs/AnalogInputsTable.tsx
@@ -15,7 +15,7 @@ export default function AnalogInputsTable({
  setIsSettingsModalOpen,
 }: {
  setSelectedId: (id: number) => void;
-  setSelectedInput: (input: any) => void;
+  setSelectedInput: (input: AnalogInput) => void;
  setIsSettingsModalOpen: (open: boolean) => void;
 }) {
  const dispatch = useDispatch<AppDispatch>();
--- a/components/main/einausgaenge/DigitalInputs.tsx
+++ b/components/main/einausgaenge/DigitalInputs.tsx
@@ -9,7 +9,12 @@ import inputIcon from "@iconify/icons-mdi/input";
 import loginIcon from "@iconify/icons-mdi/login";

 type Props = {
-  openInputModal: (input: any) => void;
+  openInputModal: (input: {
+    id: number;
+    eingangOffline: boolean;
+    status: boolean;
+    label: string;
+  }) => void;
  inputRange: { start: number; end: number };
 };

--- a/components/main/einausgaenge/DigitalOutputsWidget.tsx
+++ b/components/main/einausgaenge/DigitalOutputsWidget.tsx
@@ -8,9 +8,10 @@ import settingsIcon from "@iconify/icons-mdi/settings";
 import outputIcon from "@iconify/icons-mdi/output";
 import switchIcon from "@iconify/icons-ion/switch";
 import { setDigitalOutputs } from "@/redux/slices/digitalOutputsSlice";
+import type { DigitalOutput } from "@/types/digitalOutput";

-interface DigitalOutputsWidgetProps {
-  openOutputModal: (output: any) => void;
+export interface DigitalOutputsWidgetProps {
+  openOutputModal: (output: DigitalOutput) => void;
 }

 export default function DigitalOutputsWidget({
--- a/components/main/einausgaenge/modals/DigitalOutputsModal.tsx
+++ b/components/main/einausgaenge/modals/DigitalOutputsModal.tsx
@@ -2,13 +2,14 @@
 import React, { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../redux/store";
+import type { DigitalOutput } from "@/types/digitalOutput";

 export default function DigitalOutputsModal({
  selectedOutput,
  closeOutputModal,
  isOpen,
 }: {
-  selectedOutput: any;
+  selectedOutput: DigitalOutput | null;
  closeOutputModal: () => void;
  isOpen: boolean;
 }) {
@@ -18,7 +19,7 @@ export default function DigitalOutputsModal({

  const [label, setLabel] = useState("");
  const [status, setStatus] = useState(false);
-  const [timer, setTimer] = useState(0);
+
  const [isSaving, setIsSaving] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

@@ -27,7 +28,7 @@ export default function DigitalOutputsModal({
    if (isOpen && selectedOutput) {
      setLabel(selectedOutput.label || "");
      setStatus(selectedOutput.status || false);
-      setTimer(0);
+
      setErrorMsg("");
    }
  }, [isOpen, selectedOutput]);
@@ -84,6 +85,7 @@ export default function DigitalOutputsModal({
        }
      }
    } catch (err) {
+      console.error("Fehler beim Speichern:", err);
      setErrorMsg("❌ Fehler beim Speichern.");
    } finally {
      setIsSaving(false);
--- a/components/main/einausgaenge/modals/InputModal.tsx
+++ b/components/main/einausgaenge/modals/InputModal.tsx
@@ -3,13 +3,12 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
-import switchIcon from "@iconify/icons-ion/switch";
 import { updateInvert, updateLabel } from "@/redux/slices/digitalInputsSlice";

 type InputModalProps = {
  selectedInput: {
    id: number;
-    [key: string]: any;
+    [key: string]: unknown;
  } | null;
  closeInputModal: () => void;
  isOpen: boolean;
@@ -51,8 +50,24 @@ export default function InputModal({
    }
  }, [reduxInput, isInitialLoad]);

+  useEffect(() => {
+    if (isOpen && selectedInput) {
+      setIsInitialLoad(true);
+    }
+  }, [isOpen, selectedInput]);
+
+  useEffect(() => {
+    if (isOpen && selectedInput) {
+      setIsInitialLoad(true);
+    }
+  }, [isOpen, selectedInput]);
+
  if (!isOpen || !selectedInput || !reduxInput) return null;

+  const handleClose = () => {
+    closeInputModal();
+  };
+
  const sendCgiUpdate = async (param: string) => {
    const url = `/CPL?/eingaenge.html&${param}`;
    //console.log("📡 CGI senden:", url);
@@ -103,7 +118,15 @@ export default function InputModal({
        alert("✅ Daten erfolgreich an die CPL-Hardware gesendet!");
      } else {
        // ENTWICKLUNGSUMGEBUNG (lokale API)
-        const updates: any = { id };
+        type Updates = {
+          id: number;
+          label?: string;
+          invert?: number;
+          timeFilter?: number;
+          weighting?: number;
+          zaehlerAktiv?: number;
+        };
+        const updates: Updates = { id };
        if (label !== reduxInput.label) {
          updates.label = label;
          dispatch(updateLabel({ id, label }));
@@ -148,21 +171,15 @@ export default function InputModal({

      setIsInitialLoad(true);
      closeInputModal();
-    } catch (err: any) {
-      alert("❌ Fehler beim Speichern: " + err.message);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        alert("❌ Fehler beim Speichern: " + err.message);
+      } else {
+        alert("❌ Fehler beim Speichern: Unbekannter Fehler");
+      }
    }
  };

-  const handleClose = () => {
-    setIsInitialLoad(true);
-    closeInputModal();
-  };
-  useEffect(() => {
-    if (isOpen && selectedInput) {
-      setIsInitialLoad(true);
-    }
-  }, [isOpen, selectedInput]);
-
  return (
    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
--- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
@@ -1,24 +1,19 @@
 "use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx

-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import ReactModal from "react-modal";
 import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
-import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
 import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
 import TDRChart from "./TDRChart/TDRChart";
 import { useSelector, useDispatch } from "react-redux";
-import { AppDispatch } from "../../../../../redux/store";
-import { RootState } from "../../../../../redux/store";
+import { AppDispatch } from "@/redux/store";
+import { RootState } from "@/redux/store";
 import {
  setChartOpen,
  setFullScreen,
-} from "../../../../../redux/slices/kabelueberwachungChartSlice";
-import {
-  setSelectedSlot,
-  setSelectedChartType,
-} from "../../../../../redux/slices/tdrChartSlice";
-import { resetBrushRange } from "../../../../../redux/slices/brushSlice";
-import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/getTDMListBySlotThunk";
+} from "@/redux/slices/kabelueberwachungChartSlice";
+
+import { resetBrushRange } from "@/redux/slices/brushSlice";
 import { useLoopChartLoader } from "./LoopMeasurementChart/LoopChartActionBar";

 import {
@@ -26,7 +21,7 @@ import {
  setBisDatum,
  setSelectedMode,
  setSelectedSlotType,
-} from "../../../../../redux/slices/kabelueberwachungChartSlice";
+} from "@/redux/slices/kabelueberwachungChartSlice";

 interface ChartSwitcherProps {
  isOpen: boolean;
@@ -34,11 +29,7 @@ interface ChartSwitcherProps {
  slotIndex: number;
 }

-const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
-  isOpen,
-  onClose,
-  slotIndex,
-}) => {
+const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
  const dispatch = useDispatch<AppDispatch>();
  const chartTitle = useSelector(
    (state: RootState) => state.loopChartType.chartTitle
@@ -82,24 +73,20 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
  };

  // **Slot und Messkurve setzen**
-  const setChartType = (chartType: "TDR" | "Schleife") => {
-    dispatch(setSelectedSlot(slotIndex));
-    dispatch(setSelectedChartType(chartType));
-  };
-  //-------------------------------------
+  // const setChartType = (chartType: "TDR" | "Schleife") => {
+  //   dispatch(setSelectedSlot(slotIndex));
+  //   dispatch(setSelectedChartType(chartType));
+  // };

-  const { loadLoopChartData } = useLoopChartLoader();
-  useEffect(() => {
-    if (isOpen && activeMode === "Schleife") {
-      loadLoopChartData();
-    }
-  }, [isOpen, activeMode]);
-  //-------------------------------------
+  // useLoopChartLoader hook
+  const loadLoopChartData = useLoopChartLoader();
+
+  // Slot number from Redux
  const slotNumber = useSelector(
    (state: RootState) => state.kabelueberwachungChartSlice.slotNumber
  );

-  // immmer beim öffnen das Modal die letzte 30 Tage anzeigen
+  // immer beim Öffnen das Modal die letzten 30 Tage anzeigen
  useEffect(() => {
    if (isOpen && activeMode === "Schleife" && slotNumber !== null) {
      const today = new Date();
@@ -113,12 +100,11 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({

      // Warten, bis Redux gesetzt ist → dann Daten laden
      setTimeout(() => {
-        loadLoopChartData();
+        loadLoopChartData.loadLoopChartData();
      }, 10); // kleiner Delay, damit Redux-State sicher aktualisiert ist
    }
-  }, [isOpen, activeMode, slotNumber]);
+  }, [isOpen, activeMode, slotNumber, dispatch, loadLoopChartData]);

-  //-----------------------------------------
  return (
    <ReactModal
      isOpen={isOpen}
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx
@@ -4,7 +4,14 @@ import React from "react";

 interface CustomTooltipProps {
  active?: boolean;
-  payload?: any[];
+  payload?: Array<{
+    dataKey: string;
+    value: number;
+    name?: string;
+    color?: string;
+    unit?: string;
+    // Add other known properties here as needed
+  }>;
  label?: string;
  unit?: string;
 }
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
@@ -2,11 +2,11 @@
 import React, { useEffect } from "react";
 import DatePicker from "react-datepicker";
 import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+import { RootState } from "@/redux/store";
 import {
  setVonDatum,
  setBisDatum,
-} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+} from "@/redux/slices/kabelueberwachungChartSlice";
 import "react-datepicker/dist/react-datepicker.css";

 const DateRangePicker: React.FC = () => {
@@ -38,6 +38,7 @@ const DateRangePicker: React.FC = () => {
  useEffect(() => {
    if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
    if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, reduxVonDatum, reduxBisDatum]);

  return (
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -3,24 +3,22 @@
 import React from "react";
 import DateRangePicker from "./DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+import { RootState } from "@/redux/store";
 import {
-  setVonDatum,
-  setBisDatum,
  setLoopMeasurementCurveChartData,
  setSelectedMode,
  setSelectedSlotType,
  setChartOpen,
-  setFullScreen,
  setLoading,
-} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
-import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
-import { setChartTitle } from "../../../../../../redux/slices/loopChartTypeSlice";
+} from "@/redux/slices/kabelueberwachungChartSlice";
+import { setBrushRange } from "@/redux/slices/brushSlice";
+import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
 //-----------------------------------------------------------------------------------useLoopChartLoader
 export const useLoopChartLoader = () => {
  const dispatch = useDispatch();
  const { vonDatum, bisDatum, selectedMode, selectedSlotType, slotNumber } =
    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
+  const hasShownNoDataAlert = React.useRef(false);

  const formatDate = (dateString: string) => {
    const [year, month, day] = dateString.split("-");
@@ -77,7 +75,10 @@ export const useLoopChartLoader = () => {
      } else {
        dispatch(setLoopMeasurementCurveChartData([]));
        dispatch(setChartOpen(false));
-        alert("⚠️ Keine Daten im gewählten Zeitraum.");
+        if (!hasShownNoDataAlert.current) {
+          alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden.");
+          hasShownNoDataAlert.current = true; // ⬅️ Nur einmal zeigen
+        }
      }
    } catch (err) {
      console.error("❌ Fehler beim Laden:", err);
@@ -99,9 +100,9 @@ const LoopChartActionBar: React.FC = () => {
    bisDatum,
    selectedMode,
    selectedSlotType,
-    isChartOpen,
+
    slotNumber,
-    loopMeasurementCurveChartData,
+
    isLoading,
  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);

--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -1,8 +1,8 @@
-"use client";
+"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+import { RootState } from "@/redux/store";
 import {
  Chart as ChartJS,
  LineElement,
@@ -32,8 +32,16 @@ ChartJS.register(
 import { getColor } from "../../../../../../utils/colors";
 import { PulseLoader } from "react-spinners";

-const usePreviousData = (data: any[]) => {
-  const ref = useRef<any[]>([]);
+type LoopMeasurementEntry = {
+  t: string;
+  i: number;
+  m: number;
+  g: number;
+  a: number;
+};
+
+const usePreviousData = (data: LoopMeasurementEntry[]) => {
+  const ref = useRef<LoopMeasurementEntry[]>([]);
  useEffect(() => {
    ref.current = data;
  }, [data]);
@@ -57,7 +65,10 @@ const LoopMeasurementChart = () => {
  const previousData = usePreviousData(loopMeasurementCurveChartData);

  // Vergleichsfunktion
-  const isEqual = (a: any[], b: any[]): boolean => {
+  const isEqual = (
+    a: LoopMeasurementEntry[],
+    b: LoopMeasurementEntry[]
+  ): boolean => {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (
@@ -196,6 +207,7 @@ const LoopMeasurementChart = () => {
        options,
      });
    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);

  return (
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
@@ -1,7 +1,6 @@
-// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
-"use client";
+"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

-import React, { useEffect, useRef, useMemo } from "react";
+import React, { useEffect, useRef } from "react";
 import { RootState } from "../../../../../../redux/store";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch } from "../../../../../../redux/store";
@@ -32,10 +31,6 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
    (state: RootState) => state.tdrDataByIdSlice.dataById
  );
  //--------------------------------
-  const tdrInitialData =
-    selectedId !== null && tdrDataById[selectedId]
-      ? tdrDataById[selectedId]
-      : [];

  //--------------------------------
  // Kombinierte Logik: ID hat Vorrang, sonst Initial-Daten für Slot
@@ -206,8 +201,10 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
        }
      }
    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
-    JSON.stringify(tdrChartData),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(tdrChartData), // eslint-disable-next-line react-hooks/exhaustive-deps
    JSON.stringify(referenceChartData),
    selectedSlot,
    selectedChartType,
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
@@ -2,11 +2,11 @@

 import React, { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import { useAppDispatch } from "../../../../../../redux/store";
-import { RootState } from "../../../../../../redux/store";
-import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/getTDMListBySlotThunk";
-import { getTDRChartDataByIdThunk } from "../../../../../../redux/thunks/getTDRChartDataByIdThunk";
-import { getReferenceCurveBySlotThunk } from "../../../../../../redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
+import { useAppDispatch } from "@/redux/store";
+import { RootState } from "@/redux/store";
+import { fetchTDMDataBySlotThunk } from "@/redux/thunks/getTDMListBySlotThunk";
+import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
+import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen

 const TDRChartActionBar: React.FC = () => {
  const dispatch = useAppDispatch();
@@ -91,10 +91,16 @@ const TDRChartActionBar: React.FC = () => {
  // 📥 Beim Slot-Wechsel TDM-Liste + letzte ID laden
  useEffect(() => {
    if (selectedSlot !== null) {
-      dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action: any) => {
-        const slotData = action.payload?.data;
-        if (slotData?.length > 0) {
-          const lastId = slotData[0].id;
+      dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action) => {
+        // action can be a PayloadAction with payload or a rejected action
+        const payload = (
+          action as {
+            payload?: { data?: { id: number; t: string; d: number }[] };
+          }
+        ).payload;
+        const slotData = payload?.data;
+        if ((slotData ?? []).length > 0) {
+          const lastId = (slotData ?? [])[0].id;
          setSelectedId(lastId);
          dispatch(getTDRChartDataByIdThunk(lastId));
        }
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -1,5 +1,5 @@
 "use client"; // components/modules/kue705FO/Kue705FO.tsx
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useRef, useMemo } from "react";
 import { useSelector } from "react-redux";
 import KueModal from "./modals/SettingsModalWrapper";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -9,14 +9,15 @@ import ChartSwitcher from "./Charts/ChartSwitcher";
 import { RootState } from "../../../../redux/store";
 import { useDispatch } from "react-redux";
 //-------hooks----------------
-import useChartPlugin from "./hooks/useChartPlugin";
+
 import useAlarmStatus from "./hooks/useAlarmStatus";
 import useKueVersion from "./hooks/useKueVersion";
 import useIsoDisplay from "./hooks/useIsoDisplay";
 import useLoopDisplay from "./hooks/useLoopDisplay";
 import useModulName from "./hooks/useModulName";
-import useChartData from "./hooks/useChartData";
-import useTDRChart from "./hooks/useTDRChart";
+
+import type { Chart } from "chart.js";
+
 //--------handlers----------------
 import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
 import handleOpenModal from "./handlers/handleOpenModal";
@@ -36,15 +37,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
  /*   console.log(
    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
  ); */
-  const selectedChartData = useSelector(
-    (state: RootState) => state.selectedChartDataSlice.selectedChartData
-  );

  const dispatch = useDispatch();
  const { kueName } = useSelector((state: RootState) => state.kueDataSlice);

-  const chartRef = useRef(null);
-
  const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
    "Schleife"
  );
@@ -52,21 +48,17 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
  const [loopTitleText, setloopTitleText] = useState(
    "Schleifenwiderstand [kOhm]"
  );
-  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 [isoDisplayText] = useState("Aderbruch");
+  const [groundFaultDisplayText] = useState("Erdschluss");
+  const [loopFaultDisplayText] = useState("Schleifenfehler");
+  const [isoFaultDisplayText] = useState("Isolationsfehler");
+  const [isoGreaterThan200] = useState(">200 MOhm");

  const [loading, setLoading] = useState(false);

  const [showModal, setShowModal] = useState(false);
  const [showChartModal, setShowChartModal] = useState(false);
-  const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
-    useState(null);
+  // Removed unused loopMeasurementCurveChartData state

  //------- Redux-Variablen abrufen--------------------------------
  const {
@@ -108,6 +100,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
    handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
  const refreshClick = () =>
    handleRefreshClick(activeButton, slotIndex, setLoading);
+  // Create a ref for the chart instance to pass as the second argument
+  const chartInstance = useRef<Chart | null>(null);
+
  const closeChartModal = () =>
    handleCloseChartModal(setShowChartModal, chartInstance);
  //----------------------------------
@@ -122,23 +117,20 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
  );
  const isoDisplayValue = useIsoDisplay(
    slotIndex,
-    kuePSTmMinus96V,
-    kueCableBreak,
-    kueGroundFault,
-    kueAlarm1,
-    kueAlarm2,
-    kueOverflow,
-    isolationswert,
+    !!kuePSTmMinus96V?.[slotIndex],
+    !!kueCableBreak?.[slotIndex],
+    !!kueGroundFault?.[slotIndex],
+    !!kueAlarm1?.[slotIndex],
+    !!kueAlarm2?.[slotIndex],
+    !!kueOverflow?.[slotIndex],
+    Number(isolationswert),
    isoDisplayText,
    groundFaultDisplayText,
    isoFaultDisplayText,
    loopFaultDisplayText,
    isoGreaterThan200
  );
-  const { currentModulName, setCurrentModulName } = useModulName(
-    slotIndex,
-    modulName
-  );
+  const { setCurrentModulName } = useModulName(slotIndex, modulName);
  //---------------------------------
  //---------------------------------
  const tdmChartData = useSelector(
@@ -167,9 +159,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
    loopValue,
    activeButton
  );
-  const zoomPlugin = useChartPlugin();
-  useChartData(loopMeasurementCurveChartData);
-  const { chartInstance } = useTDRChart(selectedChartData);
+
+  // Removed useChartData(loopMeasurementCurveChartData) as the state was unused

  //---------------------------------

@@ -283,8 +274,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
                    ), // Hier sicherstellen, dass nur number übergeben wird
                  Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
                  tdrLocation,
-                  slotIndex,
-                  dispatch
+                  dispatch,
+                  slotIndex
                )
              }
              className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
--- a/components/main/kabelueberwachung/kue705FO/handlers/handleChange.ts
+++ b/components/main/kabelueberwachung/kue705FO/handlers/handleChange.ts
@@ -2,12 +2,12 @@ import { Dispatch, SetStateAction } from "react";

 // Funktion zur Änderung der Werte
 const handleChange = (
-  setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
+  setter: Dispatch<SetStateAction<string[]>>, // Typ für den Setter (z.B. string[])
  e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
  slot: number // Typ für den Slot
 ) => {
  const value = e.target.value;
-  setter((prev: any[]) => {
+  setter((prev: string[]) => {
    // Typ für den vorherigen Zustand
    const updated = [...prev];
    updated[slot] = value;
--- a/components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
+++ b/components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
@@ -1,7 +1,9 @@
 // components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
+import { Chart } from "chart.js";
+
 const handleCloseChartModal = (
  setShowChartModal: (value: boolean) => void,
-  chartInstance: any
+  chartInstance: React.MutableRefObject<Chart | null>
 ) => {
  if (chartInstance.current) {
    console.log("Chart wird beim Schließen des Modals zerstört.");
--- a/components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
+++ b/components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
@@ -1,7 +1,7 @@
 // components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
 import { Dispatch, SetStateAction } from "react";
-import { goLoop } from "../../../../../utils/goLoop";
-import { goTDR } from "../../../../../utils/goTDR";
+import { goLoop } from "@/utils/goLoop";
+import { goTDR } from "@/utils/goTDR";

 const handleRefreshClick = (
  activeButton: "Schleife" | "TDR",
--- a/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts
+++ b/components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts
@@ -32,13 +32,13 @@ export interface HandleSaveParams {
    speicherintervall: number[];
  };
  slot: number;
-  dispatch: any;
+  dispatch: import("redux").Dispatch;
  onModulNameChange: (id: string) => void;
  onClose: () => void;
-  onFormUpdate?: (updated: any) => void; // Added this property
+  onFormUpdate?: (updated: Record<string, unknown>) => void; // Specify a more precise type instead of 'any'
 }

-const isDifferent = (a: any, b: any): boolean => {
+const isDifferent = (a: unknown, b: unknown): boolean => {
  const aNum = Number(a);
  const bNum = Number(b);
  if (!isNaN(aNum) && !isNaN(bNum)) {
@@ -62,7 +62,7 @@ const handleSave = async ({
  onModulNameChange,
  onClose,
 }: HandleSaveParams): Promise<void> => {
-  const changesForFile: Record<string, any> = {};
+  const changesForFile: Record<string, string | number> = {};

  if (isDifferent(ids[slot], originalValues.kueID[slot])) {
    changesForFile.KID = ids[slot];
--- a/components/main/kabelueberwachung/kue705FO/hooks/useChartData.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useChartData.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { setSelectedChartData } from "../../../../../redux/slices/selectedChartDataSlice";

-const useChartData = (loopMeasurementCurveChartData: any) => {
+const useChartData = (loopMeasurementCurveChartData: unknown) => {
  const dispatch = useDispatch();

  useEffect(() => {
--- a/components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
@@ -1,9 +1,10 @@
 // components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
 import { useState, useEffect } from "react";
+import { Plugin } from "chart.js";
 import Chart from "chart.js/auto";

 const useChartPlugin = () => {
-  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+  const [zoomPlugin, setZoomPlugin] = useState<Plugin | null>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
--- a/components/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts
@@ -4,13 +4,13 @@ import { getAlarmDisplayText } from "../../../../../utils/alarmUtils";

 const useIsoDisplay = (
  slotIndex: number,
-  kuePSTmMinus96V: any,
-  kueCableBreak: any,
-  kueGroundFault: any,
-  kueAlarm1: any,
-  kueAlarm2: any,
-  kueOverflow: any,
-  isolationswert: any,
+  kuePSTmMinus96V: boolean,
+  kueCableBreak: boolean,
+  kueGroundFault: boolean,
+  kueAlarm1: boolean,
+  kueAlarm2: boolean,
+  kueOverflow: boolean,
+  isolationswert: number,
  isoDisplayText: string,
  groundFaultDisplayText: string,
  isoFaultDisplayText: string,
@@ -25,12 +25,12 @@ const useIsoDisplay = (
    setIsoDisplayValue(
      getAlarmDisplayText(
        slotIndex,
-        kuePSTmMinus96V,
-        kueCableBreak,
-        kueGroundFault,
-        kueAlarm1,
-        kueAlarm2,
-        kueOverflow ?? undefined,
+        [kuePSTmMinus96V ? 1 : 0],
+        [kueCableBreak ? 1 : 0],
+        [kueGroundFault ? 1 : 0],
+        [kueAlarm1 ? 1 : 0],
+        [kueAlarm2 ? 1 : 0],
+        [kueOverflow ? 1 : 0],
        isolationswert,
        isoDisplayText,
        groundFaultDisplayText,
--- a/components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
@@ -1,7 +1,7 @@
 // components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
 import { useEffect, useState } from "react";

-const useKueVersion = (slotIndex: number, reduxKueVersion: any) => {
+const useKueVersion = (slotIndex: number, reduxKueVersion: number[]) => {
  const [kueVersion, setKueVersion] = useState("V4.19");

  useEffect(() => {
--- a/components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
@@ -1,27 +1,22 @@
 // components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
-import { useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import Chart from "chart.js/auto";
-import { createTDRChart } from "../../../../../utils/chartUtils";

-const useTDRChart = (selectedChartData: any) => {
-  const chartInstance = useRef<Chart | null>(null);
+type ZoomPluginType = { id: string } | null;
+
+const useChartPlugin = () => {
+  const [zoomPlugin, setZoomPlugin] = useState<ZoomPluginType>(null);

  useEffect(() => {
-    if (selectedChartData) {
-      createTDRChart(selectedChartData); // Neues Chart erstellen
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
    }
+  }, []);

-    return () => {
-      // Cleanup beim Komponentenwechsel
-      if (chartInstance.current) {
-        console.log("Chart wird beim Komponentenwechsel zerstört.");
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [selectedChartData]);
-
-  return { chartInstance };
+  return zoomPlugin;
 };

-export default useTDRChart;
+export default useChartPlugin;
--- a/components/main/kabelueberwachung/kue705FO/kue705FO-Funktionen/handleButtonClick.ts
+++ b/components/main/kabelueberwachung/kue705FO/kue705FO-Funktionen/handleButtonClick.ts
@@ -1,9 +1,10 @@
 // components/main/kabelueberwachung/kue705FO/kue705FO-Funktionen/handleButtonClick.ts
 import { Dispatch } from "react";
+import { AppDispatch } from "@/redux/store";
 import {
  setActiveMode,
  setSelectedSlot,
-} from "../../../../../redux/slices/kueChartModeSlice";
+} from "@/redux/slices/kueChartModeSlice";

 const handleButtonClick = (
  button: "Schleife" | "TDR",
@@ -12,8 +13,8 @@ const handleButtonClick = (
  setLoopDisplayValue: Dispatch<React.SetStateAction<number | string>>,
  schleifenwiderstand: number,
  tdrLocation: number[] | undefined,
-  slotIndex: number,
-  dispatch: Dispatch<any>
+  dispatch: AppDispatch,
+  slotIndex: number
 ) => {
  // 🔥 Speichert den gewählten Slot im Redux-Store
  dispatch(setSelectedSlot(slotIndex));
--- a/components/main/kabelueberwachung/kue705FO/modals/Knotenpunkte.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/Knotenpunkte.tsx
@@ -16,7 +16,7 @@ interface Props {
  onClose?: () => void;
 }

-export default function Knotenpunkte({ slot, onClose }: Props) {
+export default function Knotenpunkte({ slot }: Props) {
  const [knotenNamen, setKnotenNamen] = useState<string[]>(Array(10).fill(""));
  const [linienNamen, setLinienNamen] = useState<string[]>(Array(10).fill(""));
  const [linienLaenge, setLinienLaenge] = useState<number[]>(Array(10).fill(0));
--- a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import type { RootState } from "../../../../../redux/store";
 import handleSave from "../handlers/handleSave";
@@ -29,7 +29,7 @@ const memoryIntervalOptions = [

 export default function KueEinstellung({
  slot,
-  showModal,
+
  onClose = () => {},
  onModulNameChange,
 }: Props) {
--- a/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
@@ -12,17 +12,24 @@ interface KueModalProps {
  onModulNameChange: (id: string) => void;
 }

+declare global {
+  interface Window {
+    __lastKueTab?: "kue" | "tdr" | "knoten";
+    kabelModalOpen?: boolean;
+  }
+}
+
 export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
  const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
-    if (typeof window !== "undefined" && (window as any).__lastKueTab) {
-      return (window as any).__lastKueTab;
+    if (typeof window !== "undefined" && window.__lastKueTab) {
+      return window.__lastKueTab;
    }
    return "kue";
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
-      (window as any).__lastKueTab = activeTab;
+      window.__lastKueTab = activeTab;
    }
  }, [activeTab]);

@@ -68,13 +75,13 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {

      <div className="flex justify-start bg-gray-100 space-x-2 p-2">
        {[
-          { label: "Allgemein", key: "kue" },
-          { label: "TDR ", key: "tdr" },
-          { label: "Knotenpunkte", key: "knoten" },
+          { label: "Allgemein", key: "kue" as const },
+          { label: "TDR ", key: "tdr" as const },
+          { label: "Knotenpunkte", key: "knoten" as const },
        ].map(({ label, key }) => (
          <button
            key={key}
-            onClick={() => setActiveTab(key as any)}
+            onClick={() => setActiveTab(key)}
            className={`px-4 py-1 rounded-t font-bold text-sm ${
              activeTab === key
                ? "bg-white text-littwin-blue"
--- a/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
@@ -1,11 +1,17 @@
 "use client";
+type TdrData = {
+  daempfung: string;
+  geschwindigkeit: string;
+  trigger: string;
+};
+
 declare global {
  interface Window {
-    __tdrCache?: Record<string, { data: any; tdrActive: boolean }>;
+    __tdrCache?: Record<string, { data: TdrData; tdrActive: boolean }>;
  }
 }

-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../../../redux/store";

--- a/components/main/settingsPageComponents/GeneralSettings.tsx
+++ b/components/main/settingsPageComponents/GeneralSettings.tsx
@@ -2,11 +2,11 @@
 import React, { useState, useEffect } from "react";
 import { RootState } from "../../../redux/store";
 import { useSelector } from "react-redux";
-import handleClearDatabase from "./handlers/dbHandlers/handleClearDatabase";
+
 import handleReboot from "./handlers/handleReboot";
 import handleSetDateTime from "./handlers/handleSetDateTime";
-import { useAdminAuth } from "./hooks/useAdminAuth";
-import handleAdminLogin from "./handlers/handleAdminLogin";
+// import { useAdminAuth } from "./hooks/useAdminAuth";
+// import handleAdminLogin from "./handlers/handleAdminLogin";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../../redux/store";
 import { getSystemSettingsThunk } from "../../../redux/thunks/getSystemSettingsThunk";
@@ -18,12 +18,7 @@ const GeneralSettings: React.FC = () => {
    (state: RootState) => state.systemSettingsSlice
  );

-  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);
-  const [loginSuccess, setLoginSuccess] = useState(false);
-
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
+  // const [error, setError] = useState("");

  const [name, setName] = useState(systemSettings.deviceName || "");
  const [mac1, setMac1] = useState(systemSettings.mac1 || "");
@@ -34,26 +29,14 @@ const GeneralSettings: React.FC = () => {
    systemSettings.cplInternalTimestamp || ""
  );

-  const handleLogin = async () => {
-    handleAdminLogin(
-      username,
-      password,
-      () => {
-        setLoginSuccess(true);
-        setError("");
-      },
-      (errorMsg) => {
-        setLoginSuccess(false);
-        setError(errorMsg);
-      },
-      dispatch
-    );
-  };
+  // Add loginSuccess state if you want to use it for feedback
+  // const [loginSuccess, setLoginSuccess] = useState(false);

  useEffect(() => {
    if (!systemSettings.deviceName) {
      dispatch(getSystemSettingsThunk());
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  /*
  fix: Initialwerte in Allgemeine Einstellungen bei Seitenaufruf setzen
@@ -198,10 +181,7 @@ const GeneralSettings: React.FC = () => {
                */}

        {/* Feedback */}
-        {loginSuccess && (
-          <p className="text-green-600 text-xs">Login erfolgreich!</p>
-        )}
-        {error && <p className="text-red-500 text-xs">{error}</p>}
+        {/* You can add feedback here if needed */}

        {/* Buttons */}
        <div className="col-span-2 flex flex-wrap md:justify-between gap-1 mt-2">
--- a/components/main/settingsPageComponents/NTPSettings.tsx
+++ b/components/main/settingsPageComponents/NTPSettings.tsx
@@ -1,30 +1,31 @@
 "use client";
 import React from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { RootState } from "../../../redux/store";

 import handleNtpSubmit from "./handlers/handleNtpSubmit";

 const NTPSettings: React.FC = () => {
-  const dispatch = useDispatch();
  const systemSettings = useSelector(
    (state: RootState) => state.systemSettingsSlice
  );

+  // Lokale States mit Fallback-Werten absichern
+  const [ntp1, setNtp1] = React.useState(systemSettings?.ntp1 ?? "");
+  const [ntp2, setNtp2] = React.useState(systemSettings?.ntp2 ?? "");
+  const [ntp3, setNtp3] = React.useState(systemSettings?.ntp3 ?? "");
+  const [ntpTimezone, setNtpTimezone] = React.useState(
+    systemSettings?.ntpTimezone ?? ""
+  );
+  const [active, setActive] = React.useState(
+    systemSettings?.ntpActive ?? false
+  );
+
  // Wenn Daten noch nicht geladen sind, Ladeanzeige anzeigen
  if (!systemSettings || systemSettings.ntp1 === undefined) {
    return <p className="text-xs text-gray-500">Lade NTP-Daten...</p>;
  }

-  // Lokale States mit Fallback-Werten absichern
-  const [ntp1, setNtp1] = React.useState(systemSettings.ntp1 ?? "");
-  const [ntp2, setNtp2] = React.useState(systemSettings.ntp2 ?? "");
-  const [ntp3, setNtp3] = React.useState(systemSettings.ntp3 ?? "");
-  const [ntpTimezone, setNtpTimezone] = React.useState(
-    systemSettings.ntpTimezone ?? ""
-  );
-  const [active, setActive] = React.useState(systemSettings.ntpActive ?? false);
-
  return (
    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
      <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
--- a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
+++ b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
@@ -1,14 +1,9 @@
 "use client"; // /components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
 import React, { useState } from "react";
+import Image from "next/image";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../redux/store";
-import {
-  setOpcUaEncryption,
-  toggleOpcUaServer,
-  setOpcUaNodesetName,
-  addOpcUaUser,
-  removeOpcUaUser,
-} from "../../../redux/slices/opcuaSettingsSlice";
+import { toggleOpcUaServer } from "../../../redux/slices/opcuaSettingsSlice";

 export default function OPCUAInterfaceSettings() {
  const dispatch = useDispatch();
@@ -17,29 +12,28 @@ export default function OPCUAInterfaceSettings() {
  );

  // Lokale Zustände für das neue Benutzerformular
-  const [newUsername, setNewUsername] = useState("");
-  const [newPassword, setNewPassword] = useState("");
+
  const [nodesetName, setNodesetName] = useState(
    opcuaSettings.opcUaNodesetName
  );

-  const handleAddUser = () => {
-    if (newUsername.trim() && newPassword.trim()) {
-      dispatch(addOpcUaUser({ username: newUsername, password: newPassword }));
-      setNewUsername("");
-      setNewPassword("");
-    }
-  };
-
-  const handleNodesetUpdate = () => {
-    dispatch(setOpcUaNodesetName(nodesetName));
-  };
-
  return (
    <div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto ">
      <div className="flex justify-between items-center mb-3">
-        <h2 className="text-base font-semibold">OPCUA Server Einstellungen</h2>
-        <img src="/images/OPCUA.jpg" alt="OPCUA Logo" className="h-12 w-auto" />
+        <Image
+          src="/images/OPCUA.jpg"
+          alt="OPCUA Logo"
+          width={48}
+          height={48}
+          className="h-12 w-auto"
+        />
+        <Image
+          src="/images/OPCUA.jpg"
+          alt="OPCUA Logo"
+          width={48}
+          height={48}
+          className="h-12 w-auto"
+        />
      </div>

      {/* ✅ Server Aktivierung */}
--- a/components/main/settingsPageComponents/handlers/handleAdminLogin.ts
+++ b/components/main/settingsPageComponents/handlers/handleAdminLogin.ts
@@ -2,14 +2,15 @@
 import bcrypt from "bcryptjs";
 import { generateToken } from "../utils/cryptoUtils";
 import USERS from "../config/users";
-import { setAdminLoggedIn } from "../../../../redux/slices/authSlice"; // ✅ Wichtig
+import { setAdminLoggedIn } from "@/redux/slices/authSlice"; // ✅ Wichtig
+import { AppDispatch } from "@/redux/store"; // Import your AppDispatch type

 const handleAdminLogin = (
  username: string,
  password: string,
  onSuccess: () => void,
-  onError: (errorMsg: string) => void,
-  dispatch: any // ✅ neu
+  onError: (message: string) => void,
+  dispatch: AppDispatch // Use the correct dispatch type
 ) => {
  const user = USERS.Admin;
  bcrypt.compare(password, user.password, (err, isMatch) => {
--- a/components/main/settingsPageComponents/handlers/handleGeneralSubmit.ts
+++ b/components/main/settingsPageComponents/handlers/handleGeneralSubmit.ts
@@ -16,7 +16,6 @@ const handleGeneralSubmit = (
 ) => {
  const changes: { [key: string]: string } = {};
  let networkChanges = false;
-  let newIp: string | null = null;

  if (current.name !== original.name) {
    changes.SNNA = current.name;
@@ -24,7 +23,6 @@ const handleGeneralSubmit = (
  }
  if (current.ip !== original.ip) {
    changes.SEI01 = current.ip;
-    newIp = current.ip;
    networkChanges = true;
  }
  if (current.subnet !== original.subnet) {
--- a/components/main/uebersicht/Baugruppentraeger.tsx
+++ b/components/main/uebersicht/Baugruppentraeger.tsx
@@ -2,9 +2,9 @@
 import React, { useMemo, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { useRouter } from "next/navigation";
-import { RootState, useAppDispatch } from "../../../redux/store";
+import { RootState, useAppDispatch } from "@/redux/store";
 import KabelModulStatus from "./modulesStatus/KabelModulStatus";
-import { getKueDataThunk } from "../../../redux/thunks/getKueDataThunk";
+import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";

 const Baugruppentraeger: React.FC = () => {
  const dispatch = useAppDispatch();
--- a/components/main/uebersicht/Last20MessagesTable.tsx
+++ b/components/main/uebersicht/Last20MessagesTable.tsx
@@ -33,7 +33,7 @@ const Last20MessagesTable: React.FC<{ className?: string }> = ({
        window.location.hostname === "localhost";

      const url = isDev
-        ? `/api/cpl/messages?MSS1=${from};${to};All`
+        ? `/api/cpl/last20MessagesAPIHandler`
        : `/CPL?Service/ae.ACP&MSS1=${from};${to};All`;

      try {
--- a/components/main/uebersicht/NetworkInfo.tsx
+++ b/components/main/uebersicht/NetworkInfo.tsx
@@ -1,9 +1,10 @@
 "use client"; //components/main/uebersicht/NetworkInfo.tsx
 import React, { useEffect } from "react";
+import Image from "next/image";
 import { useSelector, useDispatch } from "react-redux";
-import { RootState, AppDispatch } from "../../../redux/store";
-import { getSystemSettingsThunk } from "../../../redux/thunks/getSystemSettingsThunk";
-import { getOpcUaSettingsThunk } from "../../../redux/thunks/getOpcUaSettingsThunk";
+import { RootState, AppDispatch } from "@/redux/store";
+import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
+import { getOpcUaSettingsThunk } from "@/redux/thunks/getOpcUaSettingsThunk";

 const NetworkInfo: React.FC = () => {
  const dispatch: AppDispatch = useDispatch();
@@ -26,10 +27,7 @@ const NetworkInfo: React.FC = () => {
  const opcUaZustandRaw = useSelector(
    (state: RootState) => state.opcuaSettingsSlice.opcUaZustand
  );
-  const opcUaNodesetName =
-    useSelector(
-      (state: RootState) => state.opcuaSettingsSlice.opcUaNodesetName
-    ) || "Unbekannt";
+
  // OPC-UA Zustand in lesbaren Text umwandeln
  const opcUaZustand =
    Number(opcUaZustandRaw) === 1
@@ -41,47 +39,59 @@ const NetworkInfo: React.FC = () => {
  return (
    <div className="w-full flex-direction: row flex">
      <div className=" flex-grow flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
-        <div className="flex items-center space-x-4">
-          <img
-            src="/images/IP-icon.svg"
-            alt="IP Address"
-            className="w-6 text-littwin-blue"
-          />
-          <div>
-            <p className="text-xs text-gray-500">IP-Adresse</p>
-            <p className="text-sm font-medium text-gray-700">{ip}</p>
-          </div>
+        <Image
+          src="/images/IP-icon.svg"
+          alt="IP Address"
+          width={24}
+          height={24}
+          className="w-6 text-littwin-blue"
+          priority
+        />
+        <div>
+          <p className="text-xs text-gray-500">IP-Adresse</p>
+          <p className="text-sm font-medium text-gray-700">{ip}</p>
        </div>
+      </div>

-        <div className="flex items-center space-x-4">
-          <img
-            src="/images/subnet-mask.svg"
-            alt="subnet mask"
-            className="w-6"
-          />
-          <div>
-            <p className="text-xs text-gray-500">Subnet-Maske</p>
-            <p className="text-sm font-medium text-gray-700">{subnet}</p>
-          </div>
+      <div className="flex items-center space-x-4">
+        <Image
+          src="/images/subnet-mask.svg"
+          alt="subnet mask"
+          width={24}
+          height={24}
+          className="w-6"
+          priority
+        />
+        <div>
+          <p className="text-xs text-gray-500">Subnet-Maske</p>
+          <p className="text-sm font-medium text-gray-700">{subnet}</p>
        </div>
+      </div>

-        <div className="flex items-center space-x-4">
-          <img src="/images/gateway.svg" alt="gateway" className="w-6" />
-          <div>
-            <p className="text-xs text-gray-500">Gateway</p>
-            <p className="text-sm font-medium text-gray-700">{gateway}</p>
-          </div>
+      <div className="flex items-center space-x-4">
+        <Image
+          src="/images/gateway.svg"
+          alt="gateway"
+          width={24}
+          height={24}
+          className="w-6"
+          priority
+        />
+        <div>
+          <p className="text-xs text-gray-500">Gateway</p>
+          <p className="text-sm font-medium text-gray-700">{gateway}</p>
        </div>
+      </div>

-        <div className="flex items-center space-x-4">
-          <div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
-          <div>
-            <p className="text-xs text-gray-500">Status</p>
-            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
-          </div>
+      <div className="flex items-center space-x-4">
+        <div className="text-xs font-bold text-littwin-blue">OPC-UA</div>
+        <div>
+          <p className="text-xs text-gray-500">Status</p>
+          <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
        </div>
-        {/* OPC UA Nodeset Name */}
-        {/* 
+      </div>
+      {/* OPC UA Nodeset Name */}
+      {/* 
       <div className="flex items-center space-x-4">
          <div>
            <p className="text-xs text-gray-500">Nodeset Name</p>
@@ -91,7 +101,6 @@ const NetworkInfo: React.FC = () => {
          </div>
        </div>
 */}
-      </div>
    </div>
  );
 };