refactorring dashboard

components/main/dashboard/NetworkInfo.tsx

@@ -0,0 +1,110 @@
+"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";
+
+const NetworkInfo: React.FC = () => {
+  const dispatch: AppDispatch = useDispatch();
+
+  // ✅ OPC UA Daten laden, wenn Komponente angezeigt wird
+  useEffect(() => {
+    dispatch(getSystemSettingsThunk());
+    dispatch(getOpcUaSettingsThunk());
+  }, [dispatch]);
+  // Werte direkt aus Redux holen
+  const ip =
+    useSelector((state: RootState) => state.systemSettingsSlice.ip) ||
+    "Unbekannt";
+  const subnet =
+    useSelector((state: RootState) => state.systemSettingsSlice.subnet) ||
+    "Unbekannt";
+  const gateway =
+    useSelector((state: RootState) => state.systemSettingsSlice.gateway) ||
+    "Unbekannt";
+  const opcUaZustandRaw = useSelector(
+    (state: RootState) => state.opcuaSettingsSlice.opcUaZustand
+  );
+
+  // OPC-UA Zustand in lesbaren Text umwandeln
+  const opcUaZustand =
+    Number(opcUaZustandRaw) === 1
+      ? "Server betriebsbereit"
+      : Number(opcUaZustandRaw) === 0
+      ? "Server außer Betrieb"
+      : "Unbekannt";
+
+  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">
+          <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">
+          <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">
+          <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>
+        {/* OPC UA Nodeset Name */}
+        {/* 
+       <div className="flex items-center space-x-4">
+          <div>
+            <p className="text-xs text-gray-500">Nodeset Name</p>
+            <p className="text-sm font-medium text-gray-700">
+              {opcUaNodesetName}
+            </p>
+          </div>
+        </div>
+*/}
+      </div>
+    </div>
+  );
+};
+
+export default NetworkInfo;