fix: Implement correct rack navigation in Kabelueberwachung

- Added logic to read the 'rack' query parameter from the URL using useRouter and URLSearchParams.
- Set activeRack state based on the selected rack number from the Dashboard.
- Ensured rack selection is correctly handled upon navigation.
- Maintained manual rack switching functionality with buttons.

app/dashboard/page.jsx

@@ -1,5 +1,6 @@
 "use client"; // app/dashboard/page.jsx
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
@@ -14,7 +15,7 @@ import { Icon } from "@iconify/react";
 
 function Dashboard() {
   const [isClient, setIsClient] = useState(false);
-
+  const router = useRouter(); // Router instanzieren
   const [last20Messages, setLast20Messages] = useState([]);
   const [kueOnline, setkueOnline] = useState([]);
   const [ip, setIp] = useState("");
@@ -152,6 +153,11 @@ function Dashboard() {
       });
   }, []);
 
+  const handleModuleClick = (rackNumber) => {
+    // Navigiere zu /kabelueberwachung und übermittle den rackNumber als Parameter
+    router.push(`/kabelueberwachung?rack=${rackNumber}`);
+  };
+
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
     const numBaugruppen = Math.ceil(kueOnline.length / 8);
@@ -164,31 +170,31 @@ function Dashboard() {
           <div className="flex gap-1">
             {slots.map((version, index) => {
               const slotNumber = i * 8 + index + 1;
-
               const moduleVersion = window.kueVersion
                 ? window.kueVersion[slotNumber - 1]
                 : version;
 
-              // Überprüfe die Bedingungen für kueAlarm1, kueAlarm2 und kueCableBreak
               const hasAlarm1 = kueAlarm1.includes(slotNumber);
               const hasAlarm2 = kueAlarm2.includes(slotNumber);
               const hasCableBreak = kueCableBreak.includes(slotNumber);
-
-              // Setze die Klasse für rote Färbung, wenn ein Alarm oder Kabelbruch vorhanden ist
               const alarmClass =
                 hasAlarm1 || hasAlarm2 || hasCableBreak
                   ? "bg-red-500"
                   : "bg-white";
 
               return (
-                <KabelModulStatus
+                <div
                   key={slotNumber}
-                  slot={slotNumber}
-                  isOnline={version !== 0} // Prüfen, ob ein Modul online ist
-                  moduleVersion={moduleVersion}
-                  kueCableBreak={kueCableBreak}
-                  className={alarmClass} // Klasse für die Färbung hinzufügen
-                />
+                  className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
+                  onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
+                >
+                  <KabelModulStatus
+                    slot={slotNumber}
+                    isOnline={version !== 0} // Prüfen, ob ein Modul online ist
+                    moduleVersion={moduleVersion}
+                    kueCableBreak={kueCableBreak}
+                  />
+                </div>
               );
             })}
           </div>