feat: systemSettingsSlice hinzugefügt und Header sowie Einstellungen angepasst

- Neuen Redux Slice `systemSettingsSlice` erstellt, um Systemdaten zentral zu verwalten.
- Header-Icon für Systemeinstellungen holt jetzt Daten aus `systemSettingsSlice` statt `variablesSlice`.
- Die Einstellungen-Seite (`Allgemeine Einstellungen`) wurde umgestellt und liest nun ebenfalls aus `systemSettingsSlice`.
- UI-Optimierungen für die Einstellungen-Seite, um alle Eingabefelder kompakter darzustellen.

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -1,117 +1,180 @@
-import React, { useState, useEffect } from "react";
+"use client";
+import React, { useState } from "react";
+import { RootState } from "../../../redux/store";
 import { useSelector } from "react-redux";
-import handleClearDatabase from "../../header/settingsModal/handlers/handleReboot";
+import handleClearDatabase from "../../header/settingsModal/handlers/handleClearDatabase";
 import handleReboot from "../../header/settingsModal/handlers/handleReboot";
-import handleSetDateTime from "../../header/settingsModal/handlers/handleReboot";
-import handleSubmit from "../../header/settingsModal/handlers/handleReboot";
+import handleSetDateTime from "../../header/settingsModal/handlers/handleSetDateTime";
+import handleSubmit from "../../header/settingsModal/handlers/handleSubmit";
 
 const GeneralSettings = () => {
-  const deviceName_Redux = useSelector((state) => state.variables.deviceName);
-  const ip_Redux = useSelector((state) => state.variables.ip);
-  const subnet_Redux = useSelector((state) => state.variables.subnet);
-  const gateway_Redux = useSelector((state) => state.variables.gateway);
-  const datetime_Redux = useSelector(
-    (state) => state.variables.cplInternalTimestamp
+  const systemSettings = useSelector(
+    (state: RootState) => state.systemSettings
   );
-  const ntp1_Redux = useSelector((state) => state.variables.ntp1);
-  const ntp2_Redux = useSelector((state) => state.variables.ntp2);
-  const ntp3_Redux = useSelector((state) => state.variables.ntp3);
-  const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
-  const active_Redux = useSelector((state) => state.variables.ntpActive);
+  console.log("Redux SystemSettings:", systemSettings);
 
-  const [name, setName] = useState(deviceName_Redux || "");
-  const [ip, setIp] = useState(ip_Redux || "");
-  const [subnet, setSubnet] = useState(subnet_Redux || "");
-  const [gateway, setGateway] = useState(gateway_Redux || "");
-  const [systemUhr, setSystemUhr] = useState(datetime_Redux || "");
-  const [ntp1, setNtp1] = useState(ntp1_Redux || "");
-  const [ntp2, setNtp2] = useState(ntp2_Redux || "");
-  const [ntp3, setNtp3] = useState(ntp3_Redux || "");
-  const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || "");
-  const [active, setActive] = useState(active_Redux || "");
-
-  useEffect(() => {
-    setName(deviceName_Redux || "");
-    setIp(ip_Redux || "");
-    setSubnet(subnet_Redux || "");
-    setGateway(gateway_Redux || "");
-    setSystemUhr(datetime_Redux || "");
-    setNtp1(ntp1_Redux || "");
-    setNtp2(ntp2_Redux || "");
-    setNtp3(ntp3_Redux || "");
-    setNtpTimezone(ntpTimezone_Redux || "");
-    setActive(active_Redux || "");
-  }, [
-    deviceName_Redux,
-    ip_Redux,
-    subnet_Redux,
-    gateway_Redux,
-    datetime_Redux,
-    ntp1_Redux,
-    ntp2_Redux,
-    ntp3_Redux,
-    ntpTimezone_Redux,
-    active_Redux,
-  ]);
+  const [name, setName] = useState(systemSettings.deviceName || "");
+  const [ip, setIp] = useState(systemSettings.ip || "");
+  const [subnet, setSubnet] = useState(systemSettings.subnet || "");
+  const [gateway, setGateway] = useState(systemSettings.gateway || "");
+  const [systemUhr, setSystemUhr] = useState(
+    systemSettings.cplInternalTimestamp || ""
+  );
+  const [ntp1, setNtp1] = useState(systemSettings.ntp1 || "");
+  const [ntp2, setNtp2] = useState(systemSettings.ntp2 || "");
+  const [ntp3, setNtp3] = useState(systemSettings.ntp3 || "");
+  const [ntpTimezone, setNtpTimezone] = useState(
+    systemSettings.ntpTimezone || ""
+  );
+  const [active, setActive] = useState(systemSettings.ntpActive || false);
 
   return (
-    <div className="p-4 bg-gray-100">
-      <h2 className="text-lg font-bold mb-4">General Settings</h2>
-      <form>
-        <div className="mb-4">
-          <label className="block text-sm font-medium">Name:</label>
+    <div className="p-2 bg-gray-100">
+      <h2 className="text-md font-bold mb-2">General Settings</h2>
+      <form className="grid grid-cols-2 gap-2">
+        {/* ✅ Geräte-Name */}
+        <div className="col-span-2">
+          <label className="block text-xs font-medium">Name:</label>
           <input
             type="text"
-            className="border border-gray-300 rounded p-2 w-full"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </div>
 
-        <div className="mb-4 grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium">IP:</label>
-            <input
-              type="text"
-              className="border border-gray-300 rounded p-2 w-full"
-              value={ip}
-              onChange={(e) => setIp(e.target.value)}
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium">Subnet:</label>
-            <input
-              type="text"
-              className="border border-gray-300 rounded p-2 w-full"
-              value={subnet}
-              onChange={(e) => setSubnet(e.target.value)}
-            />
-          </div>
+        {/* ✅ Netzwerk-Einstellungen */}
+        <div>
+          <label className="block text-xs font-medium">IP:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={ip}
+            onChange={(e) => setIp(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium">Subnet:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={subnet}
+            onChange={(e) => setSubnet(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium">Gateway:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={gateway}
+            onChange={(e) => setGateway(e.target.value)}
+          />
         </div>
 
-        <div className="flex justify-between mt-4">
+        {/* ✅ System-Zeit */}
+        <div className="col-span-2 flex items-center gap-2">
+          <div className="flex-1">
+            <label className="block text-xs font-medium">Systemzeit:</label>
+            <input
+              type="text"
+              className="border border-gray-300 rounded p-1 w-full text-sm"
+              value={systemUhr}
+              disabled
+            />
+          </div>
           <button
-            className="bg-blue-500 text-white px-4 py-2 rounded"
+            type="button"
+            className="bg-gray-500 text-white px-3 py-1 rounded text-xs"
+            onClick={() => handleSetDateTime()}
+          >
+            Setzen
+          </button>
+        </div>
+
+        {/* ✅ NTP-Server */}
+        <div>
+          <label className="block text-xs font-medium">NTP Server 1:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={ntp1}
+            onChange={(e) => setNtp1(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium">NTP Server 2:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={ntp2}
+            onChange={(e) => setNtp2(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium">NTP Server 3:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={ntp3}
+            onChange={(e) => setNtp3(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium">Zeitzone:</label>
+          <input
+            type="text"
+            className="border border-gray-300 rounded p-1 w-full text-sm"
+            value={ntpTimezone}
+            onChange={(e) => setNtpTimezone(e.target.value)}
+          />
+        </div>
+        <div className="col-span-2 flex items-center gap-2">
+          <label className="block text-xs font-medium">NTP Aktiv:</label>
+          <input
+            type="checkbox"
+            checked={active}
+            onChange={(e) => setActive(e.target.checked)}
+          />
+        </div>
+
+        {/* ✅ Buttons */}
+        <div className="col-span-2 flex justify-between mt-2">
+          <button
+            type="button"
+            className="bg-blue-500 text-white px-3 py-1 rounded text-xs"
             onClick={() => handleReboot()}
           >
-            Neustart CPL
+            Neustart
           </button>
           <button
-            className="bg-blue-500 text-white px-4 py-2 rounded"
+            type="button"
+            className="bg-red-500 text-white px-3 py-1 rounded text-xs"
             onClick={() => handleClearDatabase()}
           >
             Datenbank leeren
           </button>
           <button
+            type="button"
+            className="bg-green-500 text-white px-3 py-1 rounded text-xs"
             onClick={() =>
               handleSubmit(
-                { name, ip, subnet, gateway },
-                { name: deviceName_Redux, ip: ip_Redux, subnet: subnet_Redux }
+                {
+                  name,
+                  ip,
+                  subnet,
+                  gateway,
+                  ntp1,
+                  ntp2,
+                  ntp3,
+                  ntpTimezone,
+                  active,
+                },
+                systemSettings
               )
             }
-            className="bg-blue-500 text-white px-4 py-2 rounded"
           >
-            Übernehmen
+            Speichern
           </button>
         </div>
       </form>