refactor: extract Kabelueberwachung logic into KabelueberwachungView for better structure

pages/einstellungen.tsx

@@ -1,85 +1,12 @@
-// /pages/einstellungen.tsx
-import React, { useState, useEffect } from "react";
-import { useAppDispatch } from "../redux/store";
-import { getSystemSettingsThunk } from "../redux/thunks/getSystemSettingsThunk";
-import GeneralSettings from "../components/main/settingsPageComponents/GeneralSettings";
-import OPCUAInterfaceSettings from "../components/main/settingsPageComponents/OPCUAInterfaceSettings";
-import DatabaseSettings from "../components/main/settingsPageComponents/DatabaseSettings";
-import NTPSettings from "../components/main/settingsPageComponents/NTPSettings";
-import UserManagementSettings from "../components/main/settingsPageComponents/UserManagementSettings";
+// pages/einstellungen.tsx
+import React from "react";
+import dynamic from "next/dynamic";
 
-export default function Settings() {
-  const [activeTab, setActiveTab] = useState("tab1");
-  const dispatch = useAppDispatch();
+const SettingsView = dynamic(
+  () => import("@/components/main/settingsPageComponents/SettingsView"),
+  { ssr: false }
+);
 
-  useEffect(() => {
-    dispatch(getSystemSettingsThunk());
-  }, [dispatch]);
-
-  return (
-    <div className="p-4">
-      {/* Tab-Navigation */}
-      <div className="flex border-b border-gray-200">
-        <button
-          className={`px-4 py-2 ${
-            activeTab === "tab1"
-              ? "border-b-2 border-littwin-blue text-littwin-blue"
-              : ""
-          }`}
-          onClick={() => setActiveTab("tab1")}
-        >
-          Allgemeine Einstellungen
-        </button>
-        <button
-          className={`px-4 py-2 ${
-            activeTab === "tab2"
-              ? "border-b-2 border-littwin-blue text-littwin-blue"
-              : ""
-          }`}
-          onClick={() => setActiveTab("tab2")}
-        >
-          OPCUA
-        </button>
-        <button
-          className={`px-4 py-2 ${
-            activeTab === "tab3"
-              ? "border-b-2 border-littwin-blue text-littwin-blue"
-              : ""
-          }`}
-          onClick={() => setActiveTab("tab3")}
-        >
-          Datenbank
-        </button>
-        <button
-          className={`px-4 py-2 ${
-            activeTab === "tab4"
-              ? "border-b-2 border-littwin-blue text-littwin-blue"
-              : ""
-          }`}
-          onClick={() => setActiveTab("tab4")}
-        >
-          NTP
-        </button>
-        <button
-          className={`px-4 py-2 ${
-            activeTab === "tab5"
-              ? "border-b-2 border-littwin-blue text-littwin-blue"
-              : ""
-          }`}
-          onClick={() => setActiveTab("tab5")}
-        >
-          Benutzerverwaltung
-        </button>
-      </div>
-
-      {/* Tab-Inhalt */}
-      <div className="mt-4">
-        {activeTab === "tab1" && <GeneralSettings />}
-        {activeTab === "tab2" && <OPCUAInterfaceSettings />}
-        {activeTab === "tab3" && <DatabaseSettings />}
-        {activeTab === "tab4" && <NTPSettings />}
-        {activeTab === "tab5" && <UserManagementSettings />}
-      </div>
-    </div>
-  );
+export default function EinstellungenPage() {
+  return <SettingsView />;
 }