feat(redux): Rename all Redux slices and store keys to match file names for clarity

- Renamed all slice names (createSlice `name` attribute) to match their file names (e.g. loopChartSlice, authSlice, kueDataSlice etc.) - Updated `store.ts` to register each reducer with consistent key names (e.g. state.loopChartSlice instead of state.loopChart) - Adjusted all `useSelector` and Redux state accesses across the codebase - Improves maintainability, searchability and consistency across files and Redux DevTools
2025-04-01 12:26:41 +02:00
parent 948bc0d5ea
commit 20e20dec30
41 changed files with 288 additions and 319 deletions
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -54,7 +54,7 @@ function Header() {
  const dispatch = useDispatch<AppDispatch>();

  const deviceName = useSelector(
-    (state: RootState) => state.systemSettings.deviceName
+    (state: RootState) => state.systemSettingsSlice.deviceName
  );

  useEffect(() => {
--- a/components/header/settingsModal/SettingsModal.tsx
+++ b/components/header/settingsModal/SettingsModal.tsx
@@ -29,35 +29,37 @@ function SettingModal({ showModal, onClose }) {
  const [showLoginForm, setShowLoginForm] = useState(false);

  const deviceName_Redux = useSelector(
-    (state: RootState) => state.systemSettings.deviceName
+    (state: RootState) => state.systemSettingsSlice.deviceName
  );
  const mac1_Redux = useSelector(
-    (state: RootState) => state.systemSettings.mac1
+    (state: RootState) => state.systemSettingsSlice.mac1
+  );
+  const ip_Redux = useSelector(
+    (state: RootState) => state.systemSettingsSlice.ip
  );
-  const ip_Redux = useSelector((state: RootState) => state.systemSettings.ip);
  const subnet_Redux = useSelector(
-    (state: RootState) => state.systemSettings.subnet
+    (state: RootState) => state.systemSettingsSlice.subnet
  );
  const gateway_Redux = useSelector(
-    (state: RootState) => state.systemSettings.gateway
+    (state: RootState) => state.systemSettingsSlice.gateway
  );
  const datetime_Redux = useSelector(
-    (state: RootState) => state.systemSettings.cplInternalTimestamp
+    (state: RootState) => state.systemSettingsSlice.cplInternalTimestamp
  );
  const ntp1_Redux = useSelector(
-    (state: RootState) => state.systemSettings.ntp1
+    (state: RootState) => state.systemSettingsSlice.ntp1
  );
  const ntp2_Redux = useSelector(
-    (state: RootState) => state.systemSettings.ntp2
+    (state: RootState) => state.systemSettingsSlice.ntp2
  );
  const ntp3_Redux = useSelector(
-    (state: RootState) => state.systemSettings.ntp3
+    (state: RootState) => state.systemSettingsSlice.ntp3
  );
  const ntpTimezone_Redux = useSelector(
-    (state: RootState) => state.systemSettings.ntpTimezone
+    (state: RootState) => state.systemSettingsSlice.ntpTimezone
  );
  const active_Redux = useSelector(
-    (state: RootState) => state.systemSettings.ntpActive
+    (state: RootState) => state.systemSettingsSlice.ntpActive
  );

  const [name, setName] = useState(deviceName_Redux || "");
--- a/components/main/analogeEingaenge/AnalogInputsChart.tsx
+++ b/components/main/analogeEingaenge/AnalogInputsChart.tsx
@@ -14,7 +14,7 @@ import {

 export default function AnalogInputsChart() {
  const analogInputs = useSelector(
-    (state: RootState) => state.analogeEingaenge
+    (state: RootState) => state.analogeEingaengeSlice
  );

  // Daten für das Diagramm vorbereiten
--- a/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
+++ b/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
@@ -12,7 +12,7 @@ export default function AnalogeEingaengeTable() {
  }, [dispatch]);

  const analogeEingaenge = useSelector(
-    (state: RootState) => state.analogeEingaenge
+    (state: RootState) => state.analogeEingaengeSlice
  );

  const [selectedEingang, setSelectedEingang] = useState(null);
--- a/components/main/einausgaenge/DigitalInputs.tsx
+++ b/components/main/einausgaenge/DigitalInputs.tsx
@@ -6,7 +6,7 @@ import { Icon } from "@iconify/react";

 export default function DigitalInputs({ openInputModal }) {
  const digitalInputs = useSelector(
-    (state: RootState) => state.digitalInputs.inputs
+    (state: RootState) => state.digitalInputsSlice.inputs
  );

  // **Gruppiere Eingänge in zwei Tabellen**
--- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
@@ -35,10 +35,10 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({

  // **Redux-States für aktive Messkurve (TDR oder Schleife)**
  const activeMode = useSelector(
-    (state: RootState) => state.kueChartMode.activeMode
+    (state: RootState) => state.kueChartModeSlice.activeMode
  );
  const isFullScreen = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
  );

  // **Modal schließen + Redux-Status zurücksetzen**
@@ -60,7 +60,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
    dispatch(setSelectedChartType(chartType));
  };
  //-------------------------------------
-
+  /* 
  useEffect(() => {
    //dispatch(fetchAllTDRChartData()); // Erstes Laden

@@ -70,7 +70,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({

    return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird
  }, [dispatch]);
-
+ */
  //-------------------------------------
  return (
    <ReactModal
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
@@ -20,10 +20,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
  const dispatch = useDispatch();

  const reduxVonDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.vonDatum
+    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
  );
  const reduxBisDatum = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.bisDatum
+    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
  );

  const today = new Date();
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -25,7 +25,7 @@ const LoopChartActionBar: React.FC = () => {
    isChartOpen,
    slotNumber,
    loopMeasurementCurveChartData,
-  } = useSelector((state: RootState) => state.kabelueberwachungChart);
+  } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);

  /**
   * API-URL-Erstellung für Entwicklung und Produktion
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -1,242 +1,149 @@
-"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useCallback, useEffect, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+"use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+
+import React, { useEffect, useRef, useState } from "react";
 import {
-  ComposedChart,
-  XAxis,
-  YAxis,
-  CartesianGrid,
+  Chart as ChartJS,
+  LineElement,
+  PointElement,
+  LinearScale,
+  TimeScale,
+  Title,
  Tooltip,
  Legend,
-  ResponsiveContainer,
-  Line,
-  Brush,
-} from "recharts";
-import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
+  Filler,
+  ChartOptions,
+} from "chart.js";
+import zoomPlugin from "chartjs-plugin-zoom";
+import "chartjs-adapter-date-fns";
+import { Line } from "react-chartjs-2";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../../redux/store";

-import CustomTooltip from "./CustomTooltip";
+ChartJS.register(
+  LineElement,
+  PointElement,
+  LinearScale,
+  TimeScale,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  zoomPlugin
+);

 const LoopMeasurementChart = () => {
-  const dispatch = useDispatch();
-  const unit = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.unit
-  );
+  const chartRef = useRef<any>(null);
+  const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
+    useSelector((state: RootState) => state.kabelueberwachungChartSlice);

-  const brushRange = useSelector((state: RootState) => state.brush);
-  const {
-    loopMeasurementCurveChartData,
-    selectedMode,
-    vonDatum,
-    bisDatum,
-    isFullScreen,
-  } = useSelector((state: RootState) => state.kabelueberwachungChart);
+  const [zoomed, setZoomed] = useState(false);

-  const formatierteDaten = useMemo(
-    () =>
-      loopMeasurementCurveChartData
-        .map((eintrag) => ({
-          zeit: new Date(eintrag.t).getTime(),
-          messwertMinimum: eintrag.i,
-          messwertMaximum: eintrag.a,
-          messwert: eintrag.m ?? null,
-          messwertDurchschnitt: ["DIA0", "DIA1", "DIA2"].includes(selectedMode)
-            ? eintrag.g ?? null
-            : null,
-        }))
-        .reverse(),
-    [loopMeasurementCurveChartData, selectedMode]
-  );
-
-  useEffect(() => {
-    if (brushRange.endIndex === 0 && formatierteDaten.length) {
-      dispatch(
-        setBrushRange({
-          startIndex: 0,
-          endIndex: formatierteDaten.length - 1,
-        })
-      );
-    }
-  }, [formatierteDaten, brushRange.endIndex, dispatch]);
-
-  const handleBrushChange = useCallback(
-    ({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => {
-      if (startIndex === undefined || endIndex === undefined) return;
-
-      dispatch(
-        setBrushRange({
-          startIndex,
-          endIndex,
-          startDate: new Date(
-            formatierteDaten[startIndex]?.zeit || formatierteDaten[0].zeit
-          )
-            .toISOString()
-            .split("T")[0],
-          endDate: new Date(
-            formatierteDaten[endIndex]?.zeit ||
-              formatierteDaten[formatierteDaten.length - 1].zeit
-          )
-            .toISOString()
-            .split("T")[0],
-        })
-      );
-    },
-    [dispatch, formatierteDaten]
-  );
-
-  useEffect(() => {
-    if (formatierteDaten.length) {
-      const startIndex = formatierteDaten.findIndex(
-        (d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
-      );
-
-      const endIndex = formatierteDaten.findIndex(
-        (d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
-      );
-
-      if (startIndex !== -1 && endIndex !== -1) {
-        dispatch(
-          setBrushRange({
-            startIndex,
-            endIndex,
-            startDate: vonDatum,
-            endDate: bisDatum,
-          })
-        );
-      }
-    }
-  }, [vonDatum, bisDatum, formatierteDaten, dispatch]);
-
-  useEffect(() => {
-    if (formatierteDaten.length > 0) {
-      dispatch(
-        setBrushRange({
-          startIndex: 0,
-          endIndex: formatierteDaten.length - 1,
-          startDate: new Date(formatierteDaten[0].zeit)
-            .toISOString()
-            .split("T")[0],
-          endDate: new Date(formatierteDaten[formatierteDaten.length - 1].zeit)
-            .toISOString()
-            .split("T")[0],
-        })
-      );
-    }
-  }, [selectedMode, formatierteDaten, dispatch]);
-
-  const legendLabelMap: Record<string, string> = {
-    messwertMinimum: "Minimum",
-    messwert: "Messwert",
-    messwertMaximum: "Maximum",
-    messwertDurchschnitt: "Durchschnitt",
+  const data = {
+    labels: loopMeasurementCurveChartData
+      .map((entry) => new Date(entry.t))
+      .reverse(),
+    datasets: [
+      {
+        label: "Messwert Minimum",
+        data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
+        borderColor: "lightgrey",
+        borderWidth: 1,
+        fill: false,
+        pointRadius: 0,
+      },
+      {
+        label: "Messwert Maximum",
+        data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
+        borderColor: "lightgrey",
+        borderWidth: 1,
+        fill: false,
+        pointRadius: 0,
+      },
+      selectedMode === "DIA0"
+        ? {
+            label: "Messwert",
+            data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
+            borderColor: "#00AEEF",
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 2,
+          }
+        : {
+            label: "Messwert Durchschnitt",
+            data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
+            borderColor: "#00AEEF",
+            borderWidth: 2,
+            fill: false,
+            pointRadius: 2,
+          },
+    ],
  };

+  const options: ChartOptions<"line"> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top" as const,
+      },
+      tooltip: {
+        mode: "index",
+        intersect: false,
+      },
+      zoom: {
+        pan: {
+          enabled: true,
+          mode: "x",
+        },
+        zoom: {
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true,
+          },
+          mode: "x",
+          onZoomComplete: () => setZoomed(true),
+        },
+        limits: {
+          x: { min: "original", max: "original" },
+          y: { min: "original", max: "original" },
+        },
+      },
+    },
+    scales: {
+      x: {
+        type: "time",
+        time: {
+          unit: "day",
+          tooltipFormat: "dd.MM.yyyy HH:mm",
+        },
+        title: {
+          display: true,
+          text: "Zeit",
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: unit,
+        },
+        ticks: {
+          precision: 0,
+        },
+      },
+    },
+  };
+
+  useEffect(() => {
+    if (!zoomed && chartRef.current) {
+      chartRef.current.resetZoom?.();
+    }
+  }, [loopMeasurementCurveChartData, selectedMode]);
+
  return (
    <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart data={formatierteDaten} margin={{ right: 90, left: 20 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis
-            dataKey="zeit"
-            domain={["dataMin", "dataMax"]}
-            allowDataOverflow={true}
-            interval={Math.floor(formatierteDaten.length / 15)}
-            tickFormatter={(zeit) => {
-              const date = new Date(zeit);
-              return `${date.getDate()}.${date.getMonth() + 1}`;
-            }}
-            tick={(props) => {
-              const { x, y, payload } = props;
-              const date = new Date(payload.value);
-              return (
-                <text
-                  x={x}
-                  y={y}
-                  dy={5}
-                  textAnchor="end"
-                  transform={`rotate(-25, ${x}, ${y})`}
-                >
-                  {`${date.getDate()}.${date.getMonth() + 1}`}
-                </text>
-              );
-            }}
-          />
-
-          <YAxis
-            label={{ value: unit, angle: -90, position: "insideLeft" }}
-            domain={["auto", "auto"]}
-            tickFormatter={(wert) => `${wert.toFixed(0)} `}
-          />
-          <Tooltip content={<CustomTooltip unit={unit} />} />
-          <Legend
-            verticalAlign="top"
-            align="center"
-            content={({ payload }) => {
-              if (!payload) return null;
-              const orderedPayload = [...payload].sort((a, b) => {
-                const order = [
-                  "messwertMinimum",
-                  "messwert",
-                  "messwertDurchschnitt",
-                  "messwertMaximum",
-                ];
-                return order.indexOf(a.value) - order.indexOf(b.value);
-              });
-              return (
-                <div
-                  style={{
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                  }}
-                >
-                  {orderedPayload.map((entry, index) => (
-                    <span
-                      key={index}
-                      style={{ margin: "0 10px", color: entry.color }}
-                    >
-                      ⬤ {legendLabelMap[entry.value] ?? entry.value}
-                    </span>
-                  ))}
-                </div>
-              );
-            }}
-          />
-
-          <Line
-            type="monotone"
-            dataKey="messwertMinimum"
-            stroke="lightgrey"
-            dot={false}
-          />
-          <Line
-            type="monotone"
-            dataKey="messwertMaximum"
-            stroke="lightgrey"
-            dot={false}
-          />
-          {["DIA1", "DIA2"].includes(selectedMode) && (
-            <Line
-              type="monotone"
-              dataKey="messwertDurchschnitt"
-              stroke="#00AEEF"
-              dot
-            />
-          )}
-          {selectedMode === "DIA0" && (
-            <Line type="monotone" dataKey="messwert" stroke="#00AEEF" dot />
-          )}
-          <Brush
-            dataKey="zeit"
-            height={30}
-            stroke="#8884d8"
-            onChange={handleBrushChange}
-            startIndex={brushRange.startIndex}
-            endIndex={brushRange.endIndex || formatierteDaten.length - 1}
-            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
-          />
-        </ComposedChart>
-      </ResponsiveContainer>
+      <Line ref={chartRef} data={data} options={options} />
    </div>
  );
 };
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/README.md
@@ -0,0 +1,54 @@
+### 🧭 Zoom-Verhalten beim Schleifen-/Isolationsdiagramm
+
+In dieser Komponente wird das automatische Nachladen der Messwerte temporär deaktiviert, wenn der Benutzer per Maus in das Diagramm zoomt oder pannt. Nach 30 Sekunden ohne Zoom/Pan-Aktion wird die automatische Aktualisierung wieder aktiviert. Dieses Verhalten dient dazu, den Zoom-Zustand nicht durch neue Daten zu verlieren.
+
+---
+
+### 📁 Enthaltene Komponenten
+
+- `LoopChartActionBar.tsx`  
+  → Auswahlleiste für Slot-Nummer, Zeitraum (über `DateRangePicker`), Messmodus (`DIA0`, `DIA1`, `DIA2`) und Slot-Typ (Schleife/Isolation).  
+  → Ruft alle 10 Sekunden neue Messdaten ab – außer der Zoom-Modus pausiert das.
+- `LoopMeasurementChart.tsx`  
+  → Das eigentliche Liniendiagramm mit Chart.js + Zoom-Plugin.  
+  → Erkennt Zoom/Pan und setzt `chartUpdatePaused`, bis 30 Sekunden Inaktivität vergangen sind.
+
+- `DateRangePicker.tsx`  
+  → Zeigt zwei Felder für Von-/Bis-Datum. Nutzt Redux, um globale Zeitfenster zu setzen.
+
+- `CustomTooltip.tsx`  
+  → Zeigt beim Hover über die Kurve kontextbezogene Werte wie Messwert, Min, Max und Durchschnitt (DIA0/1/2).
+
+---
+
+### 🟢 UML-Aktivitätsdiagramm (Zoom → Pause → Timer → Auto-Update)
+
+```mermaid
+flowchart TD
+    Start([Start])
+    ZoomEvent[[Zoom oder Pan erkannt]]
+    SetPause[Setze chartUpdatePaused = true]
+    StartTimer[Starte 30s Timer]
+    Check[Timer abgelaufen?]
+    SetResume[Setze chartUpdatePaused = false]
+    FetchData[[Datenabruf wieder erlaubt]]
+    End([Ende])
+
+    Start --> ZoomEvent --> SetPause --> StartTimer --> Check
+    Check -- Nein --> StartTimer
+    Check -- Ja --> SetResume --> FetchData --> End
+```
+
+stateDiagram-v2
+[*] --> AktualisierungAktiv
+
+    AktualisierungAktiv --> ZoomPause : Zoom/Pan erkannt
+    ZoomPause --> AktualisierungAktiv : 30 Sekunden Inaktivität
+
+    state AktualisierungAktiv {
+        [*] --> Normalbetrieb
+    }
+
+    state ZoomPause {
+        [*] --> CountdownLäuft
+    }
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
@@ -20,16 +20,16 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {

  // 🟢 **Hole den ausgewählten Slot und Messkurve aus Redux**
  const selectedId = useSelector(
-    (state: RootState) => state.tdrDataById.selectedId
+    (state: RootState) => state.tdrDataByIdSlice.selectedId
  );
  const selectedSlot = useSelector(
-    (state: RootState) => state.kueChartMode.selectedSlot
+    (state: RootState) => state.kueChartModeSlice.selectedSlot
  );
  const selectedChartType = useSelector(
-    (state: RootState) => state.kueChartMode.activeMode
+    (state: RootState) => state.kueChartModeSlice.activeMode
  );
  const tdrDataById = useSelector(
-    (state: RootState) => state.tdrDataById.dataById
+    (state: RootState) => state.tdrDataByIdSlice.dataById
  );
  //--------------------------------
  const tdrInitialData =
@@ -46,7 +46,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
  //--------------------------------
  const referenceChartData = useSelector((state: RootState) =>
    selectedSlot !== null
-      ? state.tdrReferenceChartDataBySlot.referenceData[selectedSlot] || []
+      ? state.tdrReferenceChartDataBySlotSlice.referenceData[selectedSlot] || []
      : []
  );
  //--------------------------------
@@ -58,7 +58,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {

  //--------------------------------
  const tdmChartData = useSelector(
-    (state: RootState) => state.tdmSingleChart.data
+    (state: RootState) => state.tdmSingleChartSlice.data
  );
  const pinDistance =
    selectedId !== null && Array.isArray(tdmChartData?.[selectedSlot ?? -1])
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
@@ -13,18 +13,18 @@ const TDRChartActionBar: React.FC = () => {

  // ✅ Redux: selectedSlot aus kueChartMode (0-basiert)
  const selectedSlot = useSelector(
-    (state: RootState) => state.kueChartMode.selectedSlot
+    (state: RootState) => state.kueChartModeSlice.selectedSlot
  );

  const tdmChartData = useSelector(
-    (state: RootState) => state.tdmSingleChart.data
+    (state: RootState) => state.tdmSingleChartSlice.data
  );

  const idsForSlot =
    selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];

  const tdrDataById = useSelector(
-    (state: RootState) => state.tdrDataById.dataById
+    (state: RootState) => state.tdrDataByIdSlice.dataById
  );
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const currentChartData = selectedId !== null ? tdrDataById[selectedId] : [];
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -37,7 +37,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
  ); */
  const selectedChartData = useSelector(
-    (state: RootState) => state.selectedChartData.selectedChartData
+    (state: RootState) => state.selectedChartDataSlice.selectedChartData
  );

  const dispatch = useDispatch();
@@ -77,7 +77,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
    kueAlarm2: kueAlarm2Raw,
    kueOverflow: kueOverflowRaw,
    kuePSTmMinus96V, // <- richtig, weil so im State vorhanden
-  } = useSelector((state: RootState) => state.kueData);
+  } = useSelector((state: RootState) => state.kueDataSlice);

  //---------------------------------------------
  const kueCableBreak = useMemo(
@@ -140,7 +140,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
  );
  //---------------------------------
  //---------------------------------
-  const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
+  const tdmChartData = useSelector(
+    (state: RootState) => state.tdmChartSlice.data
+  );
  const latestTdrDistanceMeters =
    Array.isArray(tdmChartData?.[slotIndex]) &&
    tdmChartData[slotIndex].length > 0 &&
--- a/components/main/kabelueberwachung/kue705FO/KueModal.tsx
+++ b/components/main/kabelueberwachung/kue705FO/KueModal.tsx
@@ -23,7 +23,7 @@ function KueModal({
  onModulNameChange,
 }: KueModalProps): JSX.Element {
  const isAdminLoggedIn = useSelector(
-    (state: any) => state.auth.isAdminLoggedIn
+    (state: any) => state.authSlice.isAdminLoggedIn
  );
  const [isAdmin, setIsAdmin] = useState(false);
  const dispatch = useDispatch();
@@ -61,7 +61,7 @@ function KueModal({
    kueLimit2Low,
    kueLimit2High,
    kueLoopInterval,
-  } = useSelector((state: any) => state.kueData);
+  } = useSelector((state: any) => state.kueDataSlice);

  const handleSaveWrapper = () => {
    handleSave({
--- a/components/main/settingsPageComponents/GeneralSettings.tsx
+++ b/components/main/settingsPageComponents/GeneralSettings.tsx
@@ -15,7 +15,7 @@ import { fetchSystemSettingsThunk } from "../../../redux/thunks/fetchSystemSetti
 const GeneralSettings: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const systemSettings = useSelector(
-    (state: RootState) => state.systemSettings
+    (state: RootState) => state.systemSettingsSlice
  );

  const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true);
--- a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
+++ b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
@@ -12,7 +12,9 @@ import {

 export default function OPCUAInterfaceSettings() {
  const dispatch = useDispatch();
-  const opcuaSettings = useSelector((state: RootState) => state.opcuaSettings);
+  const opcuaSettings = useSelector(
+    (state: RootState) => state.opcuaSettingsSlice
+  );

  // Lokale Zustände für das neue Benutzerformular
  const [newUsername, setNewUsername] = useState("");
--- a/components/main/uebersicht/Baugruppentraeger.tsx
+++ b/components/main/uebersicht/Baugruppentraeger.tsx
@@ -18,7 +18,7 @@ const Baugruppentraeger: React.FC = () => {
    kueAlarm1,
    kueAlarm2,
    kueGroundFault,
-  } = useSelector((state: RootState) => state.kueData);
+  } = useSelector((state: RootState) => state.kueDataSlice);

  // `kueOnline` sicherstellen, dass es nur Zahlen enthält
  const kueOnline = useMemo(
--- a/components/main/uebersicht/Last20MessagesTable.tsx
+++ b/components/main/uebersicht/Last20MessagesTable.tsx
@@ -9,7 +9,7 @@ const Last20MessagesTable: React.FC = () => {

  // Holt last20Messages aus Redux
  const rawLast20Messages = useSelector(
-    (state: RootState) => state.last20Messages.last20Messages
+    (state: RootState) => state.last20MessagesSlice.last20Messages
  );

  // Holt Daten aus `window.win_last20Messages` und speichert sie in Redux
--- a/components/main/uebersicht/NetworkInfo.tsx
+++ b/components/main/uebersicht/NetworkInfo.tsx
@@ -15,19 +15,21 @@ const NetworkInfo: React.FC = () => {
  }, [dispatch]);
  // Werte direkt aus Redux holen
  const ip =
-    useSelector((state: RootState) => state.systemSettings.ip) || "Unbekannt";
+    useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
+    "Unbekannt";
  const subnet =
-    useSelector((state: RootState) => state.systemSettings.subnet) ||
+    useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
    "Unbekannt";
  const gateway =
-    useSelector((state: RootState) => state.systemSettings.gateway) ||
+    useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
    "Unbekannt";
  const opcUaZustandRaw = useSelector(
-    (state: RootState) => state.opcuaSettings.opcUaZustand
+    (state: RootState) => state.opcuaSettingsSlice.opcUaZustand
  );
  const opcUaNodesetName =
-    useSelector((state: RootState) => state.opcuaSettings.opcUaNodesetName) ||
-    "Unbekannt";
+    useSelector(
+      (state: RootState) => state.opcuaSettingsSlice.opcUaNodesetName
+    ) || "Unbekannt";
  // OPC-UA Zustand in lesbaren Text umwandeln
  const opcUaZustand =
    Number(opcUaZustandRaw) === 1
--- a/components/main/uebersicht/VersionInfo.tsx
+++ b/components/main/uebersicht/VersionInfo.tsx
@@ -6,10 +6,10 @@ import { RootState } from "../../../redux/store";

 const VersionInfo: React.FC = () => {
  const appVersion =
-    useSelector((state: RootState) => state.systemSettings.appVersion) ||
+    useSelector((state: RootState) => state.systemSettingsSlice.appVersion) ||
    "Unbekannt";
  const webVersion = useSelector(
-    (state: RootState) => state.webVersion.version
+    (state: RootState) => state.webVersionSlice.version
  ); // Webversion aus Redux holen

  return (
--- a/pages/kabelueberwachung.tsx
+++ b/pages/kabelueberwachung.tsx
@@ -25,14 +25,14 @@ function Kabelueberwachung() {
    kueResidence,
    kueCableBreak,
    kueGroundFault,
-  } = useSelector((state) => state.kueData);
+  } = useSelector((state) => state.kueDataSlice);

  //----------------------------------------------------------------
  // 🚀 **TDR-Daten bereits in Redux abrufen**
  // Redux-Variablen abrufen
-  const tdrData = useSelector((state) => state.tdrChart.data);
-  const loading = useSelector((state) => state.tdrChart.loading);
-  const error = useSelector((state) => state.tdrChart.error);
+  const tdrData = useSelector((state) => state.tdrChartSlice.data);
+  const loading = useSelector((state) => state.tdrChartSlice.loading);
+  const error = useSelector((state) => state.tdrChartSlice.error);
  //----------------------------------------------------------------

  //----------------------------------------------------------------
@@ -110,7 +110,7 @@ function Kabelueberwachung() {
    data: loopData,
    loading: loopLoading,
    error: loopError,
-  } = useSelector((state: RootState) => state.loopChart);
+  } = useSelector((state: RootState) => state.loopChartSlice);

  // Zugriff z. B. auf Schleifenwiderstand von DIA1
  const dia1Schleifen = loopData["DIA1"]?.[4];
--- a/redux/slices/analogeEingaengeSlice.ts
+++ b/redux/slices/analogeEingaengeSlice.ts
@@ -68,7 +68,7 @@ export const loadFromWindow = createAsyncThunk(

 // Redux Slice
 const analogeEingaengeSlice = createSlice({
-  name: "analogeEingaenge",
+  name: "analogeEingaengeSlice",
  initialState,
  reducers: {
    setAnalogerEingang(
--- a/redux/slices/authSlice.ts
+++ b/redux/slices/authSlice.ts
@@ -2,7 +2,7 @@
 import { createSlice } from "@reduxjs/toolkit";

 const authSlice = createSlice({
-  name: "auth",
+  name: "authSlice",
  initialState: {
    isAdminLoggedIn: false,
    users: {
--- a/redux/slices/digitalInputsSlice.ts
+++ b/redux/slices/digitalInputsSlice.ts
@@ -18,7 +18,7 @@ const initialState: DigitalInputsState = {
 };

 const digitalInputsSlice = createSlice({
-  name: "digitalInputs",
+  name: "digitalInputsSlice",
  initialState,
  reducers: {
    setInputs: (state, action: PayloadAction<DigitalInput[]>) => {
--- a/redux/slices/digitalOutputsSlice.ts
+++ b/redux/slices/digitalOutputsSlice.ts
@@ -19,7 +19,7 @@ const initialState: DigitalOutputsState = {

 // Slice erstellen
 const digitalOutputsSlice = createSlice({
-  name: "digitalOutputs",
+  name: "digitalOutputsSlice",
  initialState,
  reducers: {
    setDigitalOutputs(state, action: PayloadAction<DigitalOutput[]>) {
--- a/redux/slices/kabelueberwachungChartSlice.ts
+++ b/redux/slices/kabelueberwachungChartSlice.ts
@@ -43,7 +43,7 @@ const initialState: KabelueberwachungChartState = {

 // Erstellung des Slices
 const kabelueberwachungChartSlice = createSlice({
-  name: "kabelueberwachungChart",
+  name: "kabelueberwachungChartSlice",
  initialState,
  reducers: {
    setSlotNumber: (state, action: PayloadAction<number | null>) => {
--- a/redux/slices/kueChartModeSlice.ts
+++ b/redux/slices/kueChartModeSlice.ts
@@ -12,7 +12,7 @@ const initialState: KueChartModeState = {
 };

 export const kueChartModeSlice = createSlice({
-  name: "kueChartMode",
+  name: "kueChartModeSlice",
  initialState,
  reducers: {
    setActiveMode: (state, action: PayloadAction<"Schleife" | "TDR">) => {
--- a/redux/slices/kueDataSlice.ts
+++ b/redux/slices/kueDataSlice.ts
@@ -82,7 +82,7 @@ const initialState: KueDataState = {
 };

 const kueDataSlice = createSlice({
-  name: "kueData",
+  name: "kueDataSlice",
  initialState,
  reducers: {
    setKueData: (state, action: PayloadAction<Partial<KueDataState>>) => {
--- a/redux/slices/last20MessagesSlice.ts
+++ b/redux/slices/last20MessagesSlice.ts
@@ -10,7 +10,7 @@ const initialState: Last20MessagesSlice = {
 };

 export const last20MessagesSlice = createSlice({
-  name: "last20Messages",
+  name: "last20MessagesSlice",
  initialState,
  reducers: {
    setLast20Messages: (state, action: PayloadAction<string | null>) => {
--- a/redux/slices/loopChartSlice.ts
+++ b/redux/slices/loopChartSlice.ts
@@ -21,7 +21,7 @@ const initialState: LoopChartState = {
 };

 const loopChartSlice = createSlice({
-  name: "loopChart",
+  name: "loopChartSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
--- a/redux/slices/opcuaSettingsSlice.ts
+++ b/redux/slices/opcuaSettingsSlice.ts
@@ -29,7 +29,7 @@ const initialState: OPCUASettingsState = {
 };

 const opcuaSettingsSlice = createSlice({
-  name: "opcuaSettings",
+  name: "opcuaSettingsSlice",
  initialState,
  reducers: {
    toggleOpcUaServer(state) {
--- a/redux/slices/selectedChartDataSlice.ts
+++ b/redux/slices/selectedChartDataSlice.ts
@@ -9,7 +9,7 @@ const initialState: SelectedChartDataState = {
 };

 const selectedChartDataSlice = createSlice({
-  name: "selectedChartData",
+  name: "selectedChartDataSlice",
  initialState,
  reducers: {
    setSelectedChartData(state, action: PayloadAction<any>) {
--- a/redux/slices/systemSettingsSlice.ts
+++ b/redux/slices/systemSettingsSlice.ts
@@ -32,7 +32,7 @@ const initialState: SystemSettingsState = {
 };

 const systemSettingsSlice = createSlice({
-  name: "systemSettings",
+  name: "systemSettingsSlice",
  initialState,
  reducers: {
    setSystemSettings: (
--- a/redux/slices/tdmChartSlice.ts
+++ b/redux/slices/tdmChartSlice.ts
@@ -16,7 +16,7 @@ const initialState: TDMChartState = {
 };

 const tdmChartSlice = createSlice({
-  name: "tdmChart",
+  name: "tdmChartSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
--- a/redux/slices/tdmSingleChartSlice.ts
+++ b/redux/slices/tdmSingleChartSlice.ts
@@ -24,7 +24,7 @@ const initialState: TDMChartState = {
 };

 const tdmSingleChartSlice = createSlice({
-  name: "tdmSingleChart",
+  name: "tdmSingleChartSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
--- a/redux/slices/tdrChartSlice.ts
+++ b/redux/slices/tdrChartSlice.ts
@@ -19,7 +19,7 @@ const initialState: TDRChartState = {
 };

 const tdrChartSlice = createSlice({
-  name: "tdrChart",
+  name: "tdrChartSlice",
  initialState,
  reducers: {
    setSelectedSlot: (state, action: PayloadAction<number>) => {
--- a/redux/slices/tdrDataByIdSlice.ts
+++ b/redux/slices/tdrDataByIdSlice.ts
@@ -8,7 +8,7 @@ const initialState = {
 };

 const tdrDataByIdSlice = createSlice({
-  name: "tdrDataById",
+  name: "tdrDataByIdSlice",
  initialState,
  reducers: {
    setTDRChartDataById: (
--- a/redux/slices/tdrReferenceChartDataBySlotSlice.ts
+++ b/redux/slices/tdrReferenceChartDataBySlotSlice.ts
@@ -15,7 +15,7 @@ const initialState: TDRReferenceChartState = {
 };

 const tdrReferenceChartDataBySlotSlice = createSlice({
-  name: "tdrReferenceChartDataBySlot",
+  name: "tdrReferenceChartDataBySlotSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
--- a/redux/slices/tdrReferenceChartSlice.ts
+++ b/redux/slices/tdrReferenceChartSlice.ts
@@ -16,7 +16,7 @@ const initialState: TDRReferenceChartState = {
 };

 const tdrReferenceChartSlice = createSlice({
-  name: "tdrReferenceChart",
+  name: "tdrReferenceChartSlice",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
--- a/redux/slices/webVersionSlice.ts
+++ b/redux/slices/webVersionSlice.ts
@@ -11,7 +11,7 @@ const initialState: WebVersionState = {
 };

 const webVersionSlice = createSlice({
-  name: "webVersion",
+  name: "webVersionSlice",
  initialState,
  reducers: {
    setWebVersion(state, action: PayloadAction<string>) {
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -24,26 +24,26 @@ import tdrReferenceChartDataBySlotReducer from "./slices/tdrReferenceChartDataBy

 const store = configureStore({
  reducer: {
-    auth: authReducer,
-    kueChartMode: kueChartModeReducer,
-    webVersion: webVersionReducer,
-    digitalInputs: digitalInputsReducer,
-    kabelueberwachungChart: kabelueberwachungChartReducer,
-    last20Messages: last20MessagesReducer,
-    systemSettings: systemSettingsReducer,
-    opcuaSettings: opcuaSettingsReducer,
-    digitalOutputs: digitalOutputsReducer,
-    analogeEingaenge: analogeEingaengeReducer,
-    brush: brushReducer,
-    tdrChart: tdrChartReducer,
-    tdrReferenceChart: tdrReferenceChartReducer,
-    loopChart: loopChartReducer,
-    tdmChart: tdmChartReducer,
-    tdrDataById: tdrDataByIdReducer,
-    kueData: kueDataReducer,
-    selectedChartData: selectedChartDataReducer,
-    tdmSingleChart: tdmSingleChartReducer,
-    tdrReferenceChartDataBySlot: tdrReferenceChartDataBySlotReducer,
+    authSlice: authReducer,
+    kueChartModeSlice: kueChartModeReducer,
+    webVersionSlice: webVersionReducer,
+    digitalInputsSlice: digitalInputsReducer,
+    kabelueberwachungChartSlice: kabelueberwachungChartReducer,
+    last20MessagesSlice: last20MessagesReducer,
+    systemSettingsSlice: systemSettingsReducer,
+    opcuaSettingsSlice: opcuaSettingsReducer,
+    digitalOutputsSlice: digitalOutputsReducer,
+    analogeEingaengeSlice: analogeEingaengeReducer,
+    brushSlice: brushReducer,
+    tdrChartSlice: tdrChartReducer,
+    tdrReferenceChartSlice: tdrReferenceChartReducer,
+    loopChartSlice: loopChartReducer,
+    tdmChartSlice: tdmChartReducer,
+    tdrDataByIdSlice: tdrDataByIdReducer,
+    kueDataSlice: kueDataReducer,
+    selectedChartDataSlice: selectedChartDataReducer,
+    tdmSingleChartSlice: tdmSingleChartReducer,
+    tdrReferenceChartDataBySlotSlice: tdrReferenceChartDataBySlotReducer,
  },
 });