refactor: KueModal in SettingsModalWrapper umbenannt für bessere Klarheit

- Neuer Name beschreibt die Funktion als dynamischer Modal-Wrapper für KUE-, TDR- und Knotenpunkte-Einstellungen
- Verbesserte Lesbarkeit und Struktur im Projekt
- Keine Änderung an Funktionalität, nur Umbenennung der Datei

components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx

@@ -0,0 +1,111 @@
+"use client";
+import { useState, useEffect } from "react";
+import ReactModal from "react-modal";
+import KueEinstellung from "./KueEinstellung";
+import TdrEinstellung from "./TdrEinstellung";
+import Knotenpunkte from "./Knotenpunkte";
+
+interface KueModalProps {
+  showModal: boolean;
+  onClose: () => void;
+  slot: number;
+  onModulNameChange: (id: string) => void;
+}
+
+export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
+  // 🧠 Tab wird initial nur einmal aus globalem Speicher geladen
+  const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
+    if (typeof window !== "undefined" && (window as any).__lastKueTab) {
+      return (window as any).__lastKueTab;
+    }
+    return "kue";
+  });
+
+  // 🔁 Bei jeder Tab-Änderung speichern wir ihn global
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      (window as any).__lastKueTab = activeTab;
+    }
+  }, [activeTab]);
+
+  return (
+    <ReactModal
+      isOpen={showModal}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: {
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 100,
+        },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          transform: "translate(-50%, -50%)",
+          width: "90%",
+          maxWidth: "850px",
+          padding: "0px",
+          border: "none",
+          borderRadius: "8px",
+          position: "relative",
+        },
+      }}
+    >
+      <div className="p-2 flex justify-between items-center rounded-t-md">
+        <h2 className="text-base font-bold">Steckplatz {slot + 1}</h2>
+        <button onClick={onClose} className="text-2xl hover:text-gray-200">
+          <i className="bi bi-x-circle-fill"></i>
+        </button>
+      </div>
+
+      <div className="flex justify-center bg-gray-100 space-x-2 p-2">
+        <button
+          onClick={() => setActiveTab("kue")}
+          className={`px-4 py-1 rounded-t font-bold text-base ${
+            activeTab === "kue"
+              ? "bg-white text-blue-600"
+              : "text-gray-500 hover:text-black"
+          }`}
+        >
+          KUE Einstellung
+        </button>
+        <button
+          onClick={() => setActiveTab("tdr")}
+          className={`px-4 py-1 rounded-t font-bold text-sm ${
+            activeTab === "tdr"
+              ? "bg-white text-blue-600"
+              : "text-gray-500 hover:text-black"
+          }`}
+        >
+          TDR Einstellung
+        </button>
+        <button
+          onClick={() => setActiveTab("knoten")}
+          className={`px-4 py-1 rounded-t font-bold text-sm ${
+            activeTab === "knoten"
+              ? "bg-white text-blue-600"
+              : "text-gray-500 hover:text-black"
+          }`}
+        >
+          Knotenpunkte
+        </button>
+      </div>
+
+      <div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
+        {activeTab === "kue" && (
+          <KueEinstellung
+            slot={slot}
+            onModulNameChange={(id) => {
+              console.log("Modulname geändert:", id);
+            }}
+            onClose={onClose}
+          />
+        )}
+        {activeTab === "tdr" && <TdrEinstellung slot={slot} />}
+        {activeTab === "knoten" && <Knotenpunkte slot={slot} />}
+      </div>
+    </ReactModal>
+  );
+}