Letzten 20 Meldungen in components ausgelagert

components/main/uebersicht/last20MessagesTable/Last20MessagesTable.tsx

@@ -0,0 +1,63 @@
+"use client";
+import React from "react";
+
+interface Last20MessagesTableProps {
+  last20Messages: string[][];
+}
+
+const Last20MessagesTable: React.FC<Last20MessagesTableProps> = ({
+  last20Messages,
+}) => {
+  return (
+    <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
+      <table className="min-w-full border border-gray-200 text-left table-fixed ">
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">ID</th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Modul
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Zeitstempel
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
+              Meldung
+            </th>
+            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
+              Status
+            </th>
+          </tr>
+        </thead>
+        <tbody className="text-xs text-gray-600 laptop:text-xs 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="px-4 w-1/7">{columns[0]}</td>
+                <td className="px-4 w-1/7">{columns[1]}</td>
+                <td className="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="px-4 w-2/7">{columns[3]}</td>
+                <td className="px-4 w-1/7">{columns[4]}</td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td className="px-4 text-center" colSpan={5}>
+                Keine Meldungen verfügbar.
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Last20MessagesTable;

config/webVersion.ts

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

pages/dashboard.tsx

@@ -16,6 +16,7 @@ import {
   setOpcUaNodesetName,
 } from "../redux/slices/variablesSlice";
 import webVersion from "../config/webVersion";
+import Last20MessagesTable from "../components/main/uebersicht/last20MessagesTable/Last20MessagesTable";
 
 function Dashboard() {
   const router = useRouter();
@@ -157,57 +158,7 @@ function Dashboard() {
       </div>
 
       <div className="flex flex-col lg:flex-row gap-0 overflow-hidden  flex-grow">
-        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
+        <Last20MessagesTable last20Messages={last20Messages} />
-          <table className="min-w-full border border-gray-200 text-left table-fixed ">
-            <thead className="bg-gray-100 border-b border-gray-300">
-              <tr>
-                <th className="py-1 px-4 text-gray-700 text-sm font-medium">
-                  ID
-                </th>
-                <th className="py-1 px-4 text-gray-700 text-sm font-medium">
-                  Modul
-                </th>
-                <th className="py-1 px-4 text-gray-700 text-sm font-medium">
-                  Zeitstempel
-                </th>
-                <th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
-                  Meldung
-                </th>
-                <th className="py-1 px-4 text-gray-700 text-sm font-medium">
-                  Status
-                </th>
-              </tr>
-            </thead>
-
-            <tbody className="text-xs text-gray-600  laptop:text-xs 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="px-4 w-1/7">{columns[0]}</td>
-                    <td className="px-4 w-1/7">{columns[1]}</td>
-                    <td className="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="px-4 w-2/7">{columns[3]}</td>
-                    <td className="px-4 w-1/7">{columns[4]}</td>
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td className="px-4 text-center" colSpan={5}>
-                    Keine Meldungen verfügbar.
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
 
         <div
           className="shadow-md rounded-lg