refactorring dashboard

components/main/dashboard/Baugruppentraeger.tsx

@@ -0,0 +1,92 @@
+"use client"; // components/main/uebersicht/Baugruppentraeger.tsx
+import React, { useMemo, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useRouter } from "next/navigation";
+import { RootState, useAppDispatch } from "@/redux/store";
+import KabelModulStatus from "./modulesStatus/KabelModulStatus";
+import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
+
+const Baugruppentraeger: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const router = useRouter(); // useRouter für Navigation hinzufügen
+
+  // Redux-Variablen direkt hier abrufen
+  const {
+    kueOnline: kueOnlineRaw,
+    kueVersion,
+    kueCableBreak,
+    kueAlarm1,
+    kueAlarm2,
+    kueGroundFault,
+  } = useSelector((state: RootState) => state.kueDataSlice);
+
+  // `kueOnline` sicherstellen, dass es nur Zahlen enthält
+  const kueOnline = useMemo(
+    () =>
+      kueOnlineRaw.map((value) =>
+        typeof value === "string" ? parseFloat(value) || 0 : value
+      ),
+    [kueOnlineRaw]
+  );
+
+  // Klick-Handler für Routing
+  const handleModuleClick = (rackNumber: number) => {
+    router.push(`/kabelueberwachung?rack=${rackNumber}`);
+  };
+
+  const baugruppen: JSX.Element[] = [];
+  const numBaugruppen = Math.ceil(kueOnline.length / 8);
+
+  for (let i = 0; i < numBaugruppen; i++) {
+    const slots = kueOnline.slice(i * 8, (i + 1) * 8);
+
+    baugruppen.push(
+      <div
+        key={i}
+        className="flex bg-white shadow-md rounded-lg mb-4 xl:mb-0 lg:mb-0 border border-gray-200 w-full laptop:scale-y-75 xl:scale-y-90"
+      >
+        <div className="flex gap-1">
+          {slots.map((version, index) => {
+            const slotNumber = i * 8 + index + 1;
+            const isSlotOnline = kueOnline[slotNumber - 1] === 1;
+            const rawModuleVersion = kueVersion[slotNumber - 1] || version;
+
+            // Sicherstellen, dass moduleVersion eine Zahl ist
+            const moduleVersion =
+              typeof rawModuleVersion === "number"
+                ? rawModuleVersion
+                : parseFloat(rawModuleVersion) || 0;
+
+            const rackNumber = Math.ceil(slotNumber / 8);
+
+            return (
+              <div
+                key={slotNumber}
+                className="cursor-pointer"
+                onClick={() => handleModuleClick(rackNumber)}
+              >
+                <KabelModulStatus
+                  slot={slotNumber}
+                  isOnline={isSlotOnline}
+                  moduleVersion={moduleVersion}
+                  kueCableBreak={kueCableBreak}
+                  kueAlarm1={kueAlarm1}
+                  kueAlarm2={kueAlarm2}
+                  kueGroundFault={kueGroundFault}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+  //--------------------------------------------
+  useEffect(() => {
+    dispatch(getKueDataThunk());
+  }, [dispatch]);
+  //--------------------------------------------
+  return <>{baugruppen}</>;
+};
+
+export default Baugruppentraeger;