erste Test ohne Fehler

app/access/page.jsx

@@ -1,10 +1,8 @@
-// pages/Zutrittskontrolle.jsx
+"use client";
 import React from "react";
-import Layout from "../components/Layout";
 
 function Access() {
   return (
-    <Layout>
     <div className="bg-gray-100 min-h-screen p-8">
       <div className="bg-white rounded-lg shadow p-6 mb-8">
         <h2 className="text-xl font-bold text-blue-500 mb-4">
@@ -129,7 +127,6 @@ function Access() {
         </div>
       </div>
     </div>
-    </Layout>
   );
 }
 

app/analogeEingaenge/page.jsx

@@ -1,5 +1,5 @@
+"use client";
 import React, { useState } from "react";
-import Layout from "../components/Layout";
 
 function AnalogeEingaenge() {
   const [activeConfig, setActiveConfig] = useState(null);
@@ -81,7 +81,6 @@ function AnalogeEingaenge() {
   ];
 
   return (
-    <Layout>
     <div className="bg-gray-100 min-h-screen p-8">
       <h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -217,7 +216,6 @@ function AnalogeEingaenge() {
         </div>
       )}
     </div>
-    </Layout>
   );
 }
 

app/dashboard/page.jsx

@@ -1,5 +1,6 @@
+"use client";
 import React, { useEffect } from "react";
-import Layout from "../components/Layout";
+
 import Image from "next/image";
 import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird
 import "@fontsource/roboto"; // Standardimport für alle Schriftstärken
@@ -7,7 +8,6 @@ import "bootstrap-icons/font/bootstrap-icons.css";
 
 function Dashboard() {
   return (
-    <Layout>
     <div className="bg-gray-100 flex flex-col min-h-screen">
       <div className="flex flex-grow w-full">
         {/* Main Section */}
@@ -17,7 +17,6 @@ function Dashboard() {
         </main>
       </div>
     </div>
-    </Layout>
   );
 }
 

app/einausgaenge/page.jsx

@@ -1,6 +1,5 @@
-// pages/Einausgaenge.jsx
+"use client";
 import React, { useState } from "react";
-import Layout from "../components/Layout";
 
 function Einausgaenge() {
   // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen)
@@ -62,7 +61,6 @@ function Einausgaenge() {
   const [activeTab, setActiveTab] = useState("inputs");
 
   return (
-    <Layout>
     <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">
@@ -120,9 +118,7 @@ function Einausgaenge() {
                     <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>
+                    <td className="py-3 px-4 text-left">{input.description}</td>
                   </tr>
                 ))}
               </tbody>
@@ -159,7 +155,6 @@ function Einausgaenge() {
         )}
       </div>
     </div>
-    </Layout>
   );
 }
 

app/kabelueberwachung/page.jsx

@@ -1,6 +1,5 @@
-"use client"; // Ganz oben hinzufügen
+"use client";
 import React, { useState } from "react";
-import Layout from "../layout"; // Korrigierter Pfad zu Layout
 
 function Kabelueberwachung() {
   const [activeTab, setActiveTab] = useState(1);
@@ -13,7 +12,6 @@ function Kabelueberwachung() {
   ];
 
   return (
-    <Layout>
     <div className="bg-gray-100 flex-1 p-4 overflow-hidden">
       {/* Tabs */}
       <ul className="flex border-b border-gray-200">
@@ -43,9 +41,7 @@ function Kabelueberwachung() {
           (rack) =>
             activeTab === rack.id && (
               <div key={rack.id}>
-                  <h2 className="text-lg font-bold mb-4">
-                    {rack.name} Inhalte
-                  </h2>
+                <h2 className="text-lg font-bold mb-4">{rack.name} Inhalte</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">
@@ -87,7 +83,6 @@ function Kabelueberwachung() {
         )}
       </div>
     </div>
-    </Layout>
   );
 }
 

app/layout.js

@@ -1,25 +1,27 @@
-"use client"; // Ganz oben hinzufügen
+"use client"; // Nur in Client-Komponenten verwenden, nicht in Layout-Dateien
 import React from "react";
 import Header from "../components/Header";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import "../app/globals.css";
 
-// Diese Datei befindet sich in /app/layout.jsx
+// Diese Datei befindet sich in /app/layout.js
 export default function RootLayout({ children }) {
   return (
     <html lang="de">
       <head>
         {/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */}
       </head>
-      <body className="bg-gray-100 flex flex-col min-h-screen">
+      <body>
         {/* Hier das Layout mit Header, Navigation und Footer */}
+        <div className="bg-gray-100 flex flex-col min-h-screen">
           <Header className="bg-gray-300 p-4 flex-shrink-0" />
           <div className="flex flex-grow w-full">
             <Navigation />
             <main className="flex-1 p-8">{children}</main>
           </div>
           <Footer className="bg-gray-300 p-4 flex-shrink-0" />
+        </div>
       </body>
     </html>
   );

app/meldungen/page.jsx

@@ -1,6 +1,5 @@
-// pages/Meldungen.jsx
+"use client";
 import React, { useState } from "react";
-import Layout from "../components/Layout";
 
 function Meldungen() {
   const [rowsPerPage, setRowsPerPage] = useState(25);
@@ -28,7 +27,6 @@ function Meldungen() {
   });
 
   return (
-    <Layout>
     <div className="flex flex-col h-full">
       {/* Filterleiste */}
       <div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
@@ -131,7 +129,6 @@ function Meldungen() {
         </ul>
       </div>
     </div>
-    </Layout>
   );
 }
 

app/page.js

@@ -1,9 +1,14 @@
-import Image from "next/image";
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation"; // App-Router Hook für Navigation
 
 export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <h1>Next.js startseite</h1>
-    </div>
-  );
+  const router = useRouter();
+
+  useEffect(() => {
+    // Umleitung zur Dashboard-Seite bei der Initialisierung
+    router.push("/dashboard");
+  }, [router]);
+
+  return <div>Wird geladen...</div>; // Temporärer Ladezustand
 }

components/Footer.jsx

@@ -1,4 +1,4 @@
-// components/Footer.jsx
+"use client";
 import React from "react";
 
 function Footer() {

components/Header.jsx

@@ -1,4 +1,4 @@
-// components/Header.jsx
+"use client";
 import React from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";