feat: dynamische URL-Anpassung für Entwicklungs- und Produktionsumgebung

- Navigation und Weiterleitungen angepasst, um dynamisch `.html`-Endungen in Produktionsumgebung anzuhängen.
- Nutzung von `NEXT_PUBLIC_NODE_ENV` ermöglicht unterschiedliche URL-Strukturen in Entwicklungs- und Produktionsumgebung.
- `Navigation`-Komponente und `index.js` entsprechend konfiguriert, um `.html` in der Produktionsumgebung automatisch anzuhängen.
- Verbesserte Konsistenz und Funktionalität zwischen beiden Umgebungen, 404-Fehler in Produktion behoben.

pages/einausgaenge.js

@@ -0,0 +1,161 @@
+"use client";
+import React, { useState } from "react";
+
+function Einausgaenge() {
+  // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen)
+  const inputs = [
+    {
+      id: 1,
+      name: "Eingang 1",
+      status: "Aktiv",
+      description: "Beschreibung 1",
+    },
+    {
+      id: 2,
+      name: "Eingang 2",
+      status: "Inaktiv",
+      description: "Beschreibung 2",
+    },
+    {
+      id: 3,
+      name: "Eingang 3",
+      status: "Aktiv",
+      description: "Beschreibung 3",
+    },
+    {
+      id: 4,
+      name: "Eingang 4",
+      status: "Inaktiv",
+      description: "Beschreibung 4",
+    },
+  ];
+
+  const outputs = [
+    {
+      id: 1,
+      name: "Ausgang 1",
+      status: "Aktiv",
+      description: "Beschreibung 1",
+    },
+    {
+      id: 2,
+      name: "Ausgang 2",
+      status: "Inaktiv",
+      description: "Beschreibung 2",
+    },
+    {
+      id: 3,
+      name: "Ausgang 3",
+      status: "Aktiv",
+      description: "Beschreibung 3",
+    },
+    {
+      id: 4,
+      name: "Ausgang 4",
+      status: "Inaktiv",
+      description: "Beschreibung 4",
+    },
+  ];
+
+  // Zustand für aktiven Tab (Ein- oder Ausgänge)
+  const [activeTab, setActiveTab] = useState("inputs");
+
+  return (
+    <div className="bg-gray-100 min-h-screen p-8">
+      {/* Tabs für Ein- und Ausgänge */}
+      <ul className="flex border-b border-gray-200">
+        <li
+          className={`mr-1 ${
+            activeTab === "inputs" ? "border-blue-500 text-blue-600" : ""
+          }`}
+        >
+          <button
+            onClick={() => setActiveTab("inputs")}
+            className={`inline-block px-4 py-2 rounded-t-lg ${
+              activeTab === "inputs"
+                ? "bg-blue-500 text-white"
+                : "bg-white text-black hover:bg-gray-200"
+            }`}
+          >
+            Eingänge
+          </button>
+        </li>
+        <li
+          className={`mr-1 ${
+            activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
+          }`}
+        >
+          <button
+            onClick={() => setActiveTab("outputs")}
+            className={`inline-block px-4 py-2 rounded-t-lg ${
+              activeTab === "outputs"
+                ? "bg-blue-500 text-white"
+                : "bg-white text-black hover:bg-gray-200"
+            }`}
+          >
+            Ausgänge
+          </button>
+        </li>
+      </ul>
+
+      {/* Inhalt für die aktiven Tabs */}
+      <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
+        {activeTab === "inputs" && (
+          <div>
+            <h2 className="text-lg font-bold mb-4">Eingänge</h2>
+            <table className="min-w-full bg-white border border-gray-300">
+              <thead>
+                <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
+                  <th className="py-3 px-4 text-left">ID</th>
+                  <th className="py-3 px-4 text-left">Name</th>
+                  <th className="py-3 px-4 text-left">Status</th>
+                  <th className="py-3 px-4 text-left">Beschreibung</th>
+                </tr>
+              </thead>
+              <tbody className="text-gray-600 text-sm">
+                {inputs.map((input) => (
+                  <tr key={input.id} className="border-b border-gray-200">
+                    <td className="py-3 px-4 text-left">{input.id}</td>
+                    <td className="py-3 px-4 text-left">{input.name}</td>
+                    <td className="py-3 px-4 text-left">{input.status}</td>
+                    <td className="py-3 px-4 text-left">{input.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {activeTab === "outputs" && (
+          <div>
+            <h2 className="text-lg font-bold mb-4">Ausgänge</h2>
+            <table className="min-w-full bg-white border border-gray-300">
+              <thead>
+                <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
+                  <th className="py-3 px-4 text-left">ID</th>
+                  <th className="py-3 px-4 text-left">Name</th>
+                  <th className="py-3 px-4 text-left">Status</th>
+                  <th className="py-3 px-4 text-left">Beschreibung</th>
+                </tr>
+              </thead>
+              <tbody className="text-gray-600 text-sm">
+                {outputs.map((output) => (
+                  <tr key={output.id} className="border-b border-gray-200">
+                    <td className="py-3 px-4 text-left">{output.id}</td>
+                    <td className="py-3 px-4 text-left">{output.name}</td>
+                    <td className="py-3 px-4 text-left">{output.status}</td>
+                    <td className="py-3 px-4 text-left">
+                      {output.description}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Einausgaenge;