From 4880b6473ec0339d67615fb7a08989cf3401b21d Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Sun, 29 Sep 2024 17:35:15 +0200
Subject: [PATCH] dashboard ohne Scrollbalken

---
 app/dashboard/page.jsx                     | 106 +++++++++++----------
 app/layout.js                              |   8 +-
 components/Footer.jsx                      |   2 +-
 components/Navigation.jsx                  |   2 +-
 components/modulesStatus/Access1Status.jsx |   8 +-
 components/modulesStatus/Access2Status.jsx |   8 +-
 components/modulesStatus/CPLStatus.jsx     |   8 +-
 components/modulesStatus/Kue705_FO.jsx     |   8 +-
 8 files changed, 77 insertions(+), 73 deletions(-)

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 9d77117..2e0b962 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -82,58 +82,65 @@ function Dashboard() {
   const renderBaugruppentraeger = () => {
     const baugruppen = [];
 
-    // Es gibt 4 Baugruppenträger, jeder mit 8 Slots
-    for (let i = 0; i < 4; i++) {
+    // Dynamisch berechnen, wie viele Baugruppenträger benötigt werden, basierend auf der Länge von kueVersion
+    const numBaugruppen = Math.ceil(kueVersion.length / 8);
+
+    for (let i = 0; i < numBaugruppen; i++) {
       const slots = kueVersion.slice(i * 8, (i + 1) * 8);
 
-      baugruppen.push(
-        <div key={i} className="flex bg-white shadow-md rounded-lg p-2">
-          <div className="flex gap-2">
-            {slots.map((version, index) => {
-              const slotNumber = i * 8 + index + 1;
-              return version !== 0 ? (
-                <Kue705_FO key={slotNumber} slot={slotNumber} />
-              ) : (
-                <div
-                  key={slotNumber}
-                  className="w-12 h-24 flex items-center justify-center border border-gray-300"
-                >
-                  <span className="text-xs text-gray-500">Leer</span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+      // Prüfen, ob der Baugruppenträger überhaupt Zahlen oder "0" enthält
+      const containsNumbersOrZero = slots.some(
+        (version) => version !== "" && version !== null && version !== undefined
       );
+
+      if (containsNumbersOrZero) {
+        baugruppen.push(
+          <div key={i} className="flex bg-white shadow-md rounded-lg  ">
+            <div className="flex gap-1">
+              {slots.map((version, index) => {
+                const slotNumber = i * 8 + index + 1;
+                return version !== 0 ? (
+                  <Kue705_FO key={slotNumber} slot={slotNumber} />
+                ) : (
+                  <div
+                    key={slotNumber}
+                    className="w-10 h-20 flex items-center justify-center border border-gray-300"
+                  >
+                    <span className="text-xs text-gray-500">Leer</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      }
     }
 
     return baugruppen;
   };
 
   return (
-    <div className="bg-gray-100 flex flex-col min-h-screen ">
+    <div className="flex flex-col p-4">
       {/* Letzte Meldungen - Titel und Icon Bereich */}
-      <div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8">
-        <div className="flex justify-between gap-1 ">
+      <div className="flex justify-between items-center w-full lg:w-2/3">
+        <div className="flex justify-between gap-1">
           <Icon
             icon="ri:calendar-schedule-line"
             className="text-blue-500 text-4xl"
           />
-
           <h1 className="text-xl font-bold text-gray-700">
             Letzten 20 Meldungen
           </h1>
         </div>
-
         <Icon
           icon="ph:trash"
           className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
         />
       </div>
 
-      <div className="flex flex-col lg:flex-row gap-8">
+      <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
         {/* Meldungen Liste */}
-        <div className="bg-white shadow-md rounded-lg  w-full lg:w-2/3">
+        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex-shrink-0">
           <table className="min-w-full border border-gray-200 text-left">
             <thead className="bg-gray-100 border-b border-gray-300">
               <tr>
@@ -154,18 +161,23 @@ function Dashboard() {
                 </th>
               </tr>
             </thead>
-            <tbody className="text-xs text-gray-600">
+            <tbody className="text-xs text-gray-600 flex-shrink-0">
               {last20Messages.length > 0 ? (
                 last20Messages.map((columns, index) => (
                   <tr
                     key={index}
                     className="border-b border-gray-200 hover:bg-gray-50"
                   >
-                    <td className="py-3 px-4 w-1/7">{columns[0]}</td>
-                    <td className="py-3 px-4 w-1/7">{columns[1]}</td>
-                    <td className="py-3 px-4 w-2/7">{columns[2]}</td>
-                    <td className="py-3 px-4 w-2/7">{columns[3]}</td>
-                    <td className="py-3 px-4w-1/7">{columns[4]}</td>
+                    <td className="py-1 px-4 w-1/7">{columns[0]}</td>
+                    <td className="py-1 px-4 w-1/7">{columns[1]}</td>
+                    <td className="py-1 px-4 w-3/7 whitespace-nowrap">
+                      <div className="flex flex-row space-x-2">
+                        <span>{columns[2].split(" ")[0]}</span>
+                        <span>{columns[2].split(" ")[1]}</span>
+                      </div>
+                    </td>
+                    <td className="py-1 px-4 w-2/7">{columns[3]}</td>
+                    <td className="py-1 px-4 w-1/7">{columns[4]}</td>
                   </tr>
                 ))
               ) : (
@@ -180,7 +192,7 @@ function Dashboard() {
         </div>
 
         {/* Sidebar mit Informationen */}
-        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
+        <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
           {/* Versionsinformationen */}
           <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
             <h2 className="text-lg font-semibold text-gray-700 mb-2">
@@ -196,24 +208,22 @@ function Dashboard() {
           </div>
 
           {/* Beispiel für Geräteanzeige */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
-            <div className="flex flex-row item-center justify-between ">
+          <div className="bg-gray-50  rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
+            <div className="flex flex-row item-center justify-between bg-red-600 p-1">
               <CPLStatus />
               <Access1Status />
               <Access2Status />
             </div>
             <div className="flex flex-col item-center justify-between gap-1">
               <div className="flex flex-row item-center justify-between space-y-0">
-                <div className="bg-gray-100 flex flex-col min-h-screen p-4">
-                  <div className="flex flex-col gap-8 mt-4">
-                    {loading ? (
-                      <p>Lädt...</p>
-                    ) : error ? (
-                      <p className="text-red-500">{error}</p>
-                    ) : (
-                      renderBaugruppentraeger()
-                    )}
-                  </div>
+                <div className="flex flex-col gap-1 mt-2">
+                  {loading ? (
+                    <p>Lädt...</p>
+                  ) : error ? (
+                    <p className="text-red-500">{error}</p>
+                  ) : (
+                    renderBaugruppentraeger()
+                  )}
                 </div>
               </div>
             </div>
@@ -221,8 +231,8 @@ function Dashboard() {
         </div>
       </div>
 
-      {/* Footer Informationen */}
-      <div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow-md border border-gray-200">
+      {/* IP, Subnet und Gateway Informationen */}
+      <div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
         <div className="flex items-center space-x-4">
           <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
           <div>
diff --git a/app/layout.js b/app/layout.js
index 8341698..b45ff9b 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -14,13 +14,13 @@ export default function RootLayout({ children }) {
       </head>
       <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="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
+          <Header className="bg-gray-300  " />
           <div className="flex flex-grow w-full">
             <Navigation />
-            <main className="flex-1 p-8">{children}</main>
+            <main className="flex-1 ">{children}</main>
           </div>
-          <Footer className="bg-gray-300 p-4 flex-shrink-0" />
+          <Footer className="bg-gray-300 " />
         </div>
       </body>
     </html>
diff --git a/components/Footer.jsx b/components/Footer.jsx
index 20e75a7..22a2404 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -3,7 +3,7 @@ import React from "react";
 
 function Footer() {
   return (
-    <footer className="bg-gray-300 p-4 flex-shrink-0">
+    <footer className="bg-gray-300 p-4 overflow-hidden">
       <div className="container mx-auto flex justify-between">
         <div>
           <p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index bb4b034..c0a0e76 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -24,7 +24,7 @@ function Navigation() {
 
   return (
     <aside>
-      <nav className="w-64 flex-shrink-0 h-full mt-24">
+      <nav className="w-64 flex-shrink-0 mt-24 overflow-hidden">
         {menuItems.map((item) => (
           <Link href={item.path} key={item.name}>
             <div
diff --git a/components/modulesStatus/Access1Status.jsx b/components/modulesStatus/Access1Status.jsx
index ffa1043..4b3ac8b 100644
--- a/components/modulesStatus/Access1Status.jsx
+++ b/components/modulesStatus/Access1Status.jsx
@@ -3,13 +3,11 @@ import React from "react";
 
 const Access1Status = () => {
   return (
-    <div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
       {/* Grüner Streifen auf der linken Seite */}
-      <div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
       {/* Blauer Hauptbereich */}
-      <div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
-        Access 1
-      </div>
+      <div className="flex flex-row text-white text-xs ">Access 1</div>
     </div>
   );
 };
diff --git a/components/modulesStatus/Access2Status.jsx b/components/modulesStatus/Access2Status.jsx
index 4ff2450..aed3068 100644
--- a/components/modulesStatus/Access2Status.jsx
+++ b/components/modulesStatus/Access2Status.jsx
@@ -3,13 +3,11 @@ import React from "react";
 
 const Access2Status = () => {
   return (
-    <div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
       {/* Grüner Streifen auf der linken Seite */}
-      <div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
       {/* Blauer Hauptbereich */}
-      <div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
-        Access 2
-      </div>
+      <div className="flex flex-row text-white text-xs ">Access 2</div>
     </div>
   );
 };
diff --git a/components/modulesStatus/CPLStatus.jsx b/components/modulesStatus/CPLStatus.jsx
index da8d2a0..a051a91 100644
--- a/components/modulesStatus/CPLStatus.jsx
+++ b/components/modulesStatus/CPLStatus.jsx
@@ -3,13 +3,11 @@ import React from "react";
 
 const CPLStatus = () => {
   return (
-    <div className="border border-gray-400 w-32 h-16 flex items-center justify-center relative">
+    <div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
       {/* Grüner Streifen auf der linken Seite */}
-      <div className="absolute left-0 top-0 h-full w-1/6 bg-green-500"></div>
+      <div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
       {/* Blauer Hauptbereich */}
-      <div className="bg-blue-500 flex-1 flex items-center justify-center text-white text-xl h-16">
-        CPL
-      </div>
+      <div className="text-white text-xs ">CPL</div>
     </div>
   );
 };
diff --git a/components/modulesStatus/Kue705_FO.jsx b/components/modulesStatus/Kue705_FO.jsx
index 99d1d73..5c13682 100644
--- a/components/modulesStatus/Kue705_FO.jsx
+++ b/components/modulesStatus/Kue705_FO.jsx
@@ -3,17 +3,17 @@ import React from "react";
 
 const Kue705_FO = ({ slot }) => {
   return (
-    <div className="border border-gray-400 w-12 h-24 flex flex-col">
+    <div className="border border-gray-400 w-10 h-20 flex flex-col">
       {/* Erstes Kind, nimmt den restlichen Platz ein */}
       <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
         <div className="flex w-full p-1 mb-4 items-start justify-start">
           {slot}
         </div>
-        <div>KÜ705</div>
-        <div>FO</div>
+        <div className="text-xs">KÜ705</div>
+        <div className="text-xs">FO</div>
       </div>
       {/* Die unteren Abschnitte behalten ihre festen Höhen */}
-      <div className="bg-green-500 w-full h-1/6"></div>
+      <div className="bg-green-500 w-full h-3/6"></div>
       <div className="bg-blue-500 w-full h-1/6"></div>
     </div>
   );