refactor(pages): renamed all route files to *Page.tsx for clarity and consistency

components/main/einausgaenge/modals/OutputModal.tsx

@@ -1,32 +1,94 @@
 "use client"; // /compoenents/main/einausgaenge/modals/OutputModal.tsx
-import React from "react";
+import React, { useState } from "react";
 
 export default function OutputModal({
   selectedOutput,
   closeOutputModal,
   isOpen,
+}: {
+  selectedOutput: any;
+  closeOutputModal: () => void;
+  isOpen: boolean;
 }) {
   if (!isOpen || !selectedOutput) return null;
 
+  const [label, setLabel] = useState(selectedOutput.label || "");
+  const [status, setStatus] = useState(selectedOutput.status || false);
+  const [timer, setTimer] = useState(0); // Optional: Sekunden für temporäres Einschalten
+
+  const handleSave = () => {
+    // TODO: Ersetze dies durch echten API-Call (z. B. per fetch)
+    console.log("🔧 Neue Einstellungen:", {
+      id: selectedOutput.id,
+      label,
+      status,
+      timer: timer > 0 ? timer : null,
+    });
+
+    // Optional: Fake-Aufruf an CGI-Endpoint
+    // location.href = `CPL?Service/ausgaenge.ACP&DA${selectedOutput.id}=${status ? 1 : 0}`;
+
+    closeOutputModal();
+  };
+
   return (
-    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
-      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+      <div className="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
-        <h2 className="text-lg font-bold mb-4">
+        <h2 className="text-xl font-bold mb-4 text-littwin-blue">
-          Details für Ausgang {selectedOutput.id}
+          Ausgang {selectedOutput.id} – Konfiguration
         </h2>
-        <p>
+
-          <strong>Bezeichnung:</strong> {selectedOutput.description}
+        <div className="mb-4">
-        </p>
+          <label className="block font-semibold mb-1">Bezeichnung</label>
-        <p>
+          <input
-          <strong>Status:</strong>{" "}
+            type="text"
-          {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
+            value={label}
-        </p>
+            onChange={(e) => setLabel(e.target.value)}
-        <button
+            className="w-full border border-gray-300 rounded px-3 py-2"
-          onClick={closeOutputModal}
+            placeholder="z. B. Licht Relais 1"
-          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+          />
-        >
+        </div>
-          Schließen
+
-        </button>
+        <div className="mb-4 flex items-center justify-between">
+          <label className="font-semibold">Status</label>
+          <button
+            onClick={() => setStatus(!status)}
+            className={`px-3 py-1 rounded text-white font-medium ${
+              status ? "bg-green-600" : "bg-gray-400"
+            }`}
+          >
+            {status ? "EIN" : "AUS"}
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <label className="block font-semibold mb-1">
+            Timer (Sekunden, optional)
+          </label>
+          <input
+            type="number"
+            min={0}
+            value={timer}
+            onChange={(e) => setTimer(parseInt(e.target.value))}
+            className="w-full border border-gray-300 rounded px-3 py-2"
+            placeholder="z. B. 5 für 5 Sekunden"
+          />
+        </div>
+
+        <div className="flex justify-end gap-2 mt-6">
+          <button
+            onClick={closeOutputModal}
+            className="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white"
+          >
+            Speichern
+          </button>
+        </div>
       </div>
     </div>
   );

components/navigation/Navigation.tsx

@@ -22,14 +22,14 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
   };
 
   const menuItems = [
-    { name: "Übersicht", path: "/dashboard" },
+    { name: "Übersicht", path: "/dashboardPage" },
-    { name: "Kabelüberwachung ", path: "/kabelueberwachung" },
+    { name: "Kabelüberwachung ", path: "/kabelueberwachungPage" },
-    { name: "Meldungseingänge ", path: "/digitalInputs" }, //vorher Digitale Ein -und Ausgänge
+    { name: "Meldungseingänge ", path: "/digitalInputsPage" }, //vorher Digitale Ein -und Ausgänge
-    { name: "Schaltausgänge ", path: "/digitalOutputs", disabled: true }, //vorher Digitale Ein -und Ausgänge
+    { name: "Schaltausgänge ", path: "/digitalOutputsPage", disabled: false }, //vorher Digitale Ein -und Ausgänge
-    { name: "Messwertüberwachung  ", path: "/analogeEingaenge" }, //vorher Analoge Eingänge
+    { name: "Messwertüberwachung  ", path: "/analogeEingaengePage" }, //vorher Analoge Eingänge
-    { name: "Berichte ", path: "/meldungen" },
+    { name: "Berichte ", path: "/meldungenPage" },
-    { name: "System ", path: "/system" },
+    { name: "System ", path: "/systemPage" },
-    { name: "Einstellungen ", path: "/einstellungen" },
+    { name: "Einstellungen ", path: "/einstellungenPage" },
     //{ name: "Zutriffskontrolle", path: "/zutrittskontrolle" },
 
     // Weitere Menüpunkte hier

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.329";
+const webVersion = "1.6.330";
 export default webVersion;