feat: zeige die neuesten 20 Meldungen in Last20MessagesTable

- Daten aus API chronologisch absteigend sortiert (neueste zuerst)
- Anzeige auf die ersten 20 Einträge begrenzt
- Verhalten nun konsistent mit Seite /meldungen

components/main/uebersicht/Last20MessagesTable.tsx

@@ -1,65 +1,76 @@
-"use client"; // /components/main/uebersicht/Last20MessagesTable.tsx
-import React, { useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { RootState } from "../../../redux/store";
-import { setLast20Messages } from "../../../redux/slices/last20MessagesSlice";
+"use client";
+import React, { useEffect, useState } from "react";
 
-type Props = {
-  className?: string;
+type Meldung = {
+  t: string; // Zeitstempel
+  s: number; // Status
+  c: string; // Farbe
+  m: string; // Meldung
+  i: string; // Modul/Quelle
 };
 
-const Last20MessagesTable: React.FC<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-
-  const rawLast20Messages = useSelector(
-    (state: RootState) => state.last20MessagesSlice.last20Messages
-  );
+const Last20MessagesTable: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  const [messages, setMessages] = useState<Meldung[]>([]);
 
   useEffect(() => {
-    const loadWindowMessages = () => {
-      if (typeof window !== "undefined" && (window as any).win_last20Messages) {
-        dispatch(setLast20Messages((window as any).win_last20Messages));
+    const fetchLast20Messages = async () => {
+      const today = new Date();
+      const prior30 = new Date();
+      prior30.setDate(today.getDate() - 30);
+
+      const format = (d: Date) =>
+        `${d.getFullYear()};${(d.getMonth() + 1)
+          .toString()
+          .padStart(2, "0")};${d.getDate().toString().padStart(2, "0")}`;
+
+      const from = format(prior30);
+      const to = format(today);
+
+      const isDev =
+        typeof window !== "undefined" &&
+        window.location.hostname === "localhost";
+
+      const url = isDev
+        ? `/api/cpl/messages?MSS1=${from};${to};All`
+        : `/CPL?Service/ae.ACP&MSS1=${from};${to};All`;
+
+      try {
+        const res = await fetch(url);
+        const raw = await res.json();
+        const data = Array.isArray(raw) ? raw : raw.data;
+        if (!Array.isArray(data)) return;
+
+        const sorted = [...data].sort(
+          (a, b) => new Date(b.t).getTime() - new Date(a.t).getTime()
+        );
+        const last20 = sorted.slice(0, 20); // NEUESTE zuerst
+
+        setMessages(last20);
+      } catch (err) {
+        console.error("Fehler beim Laden der Meldungen:", err);
       }
     };
 
-    loadWindowMessages();
-    const interval = setInterval(loadWindowMessages, 1000);
-    return () => clearInterval(interval);
-  }, [dispatch]);
-
-  const parseMessages = (messages: string | null) => {
-    if (!messages) return [];
-
-    return messages
-      .split("<tr>")
-      .slice(1)
-      .map((row) =>
-        row
-          .replace(/<\/tr>/, "")
-          .split("</td><td>")
-          .map((col) => col.replace(/<[^>]+>/g, ""))
-      );
-  };
-
-  const allMessages = parseMessages(rawLast20Messages);
+    fetchLast20Messages();
+  }, []);
 
   return (
-    <div className={`bg-white  p-1 rounded-lg overflow-auto ${className}`}>
-      {/*     <h1 className="text-xl font-bold mb-4">Letzte 20 Meldungen</h1> */}
-
+    <div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
       <div className="overflow-x-auto overflow-y-auto border rounded shadow-sm h-[95%] pt-1">
         <table className="min-w-full border">
           <thead className="bg-gray-100 text-left sticky top-0 z-10">
             <tr>
-              <th className="p-2 border">ID</th>
-              <th className="p-2 border">Modul</th>
-              <th className="p-2 border">Zeitstempel</th>
+              <th className="p-2 border">Prio</th>
+              <th className="p-2 border">Zeit</th>
+              <th className="p-2 border">Quelle</th>
               <th className="p-2 border">Meldung</th>
               <th className="p-2 border">Status</th>
             </tr>
           </thead>
           <tbody>
-            {allMessages.length === 0 ? (
+            {messages.length === 0 ? (
               <tr>
                 <td
                   colSpan={5}
@@ -69,14 +80,18 @@ const Last20MessagesTable: React.FC<Props> = ({ className }) => {
                 </td>
               </tr>
             ) : (
-              allMessages.map((msg, index) => (
+              messages.map((msg, index) => (
                 <tr key={index} className="hover:bg-gray-50">
-                  <td className="border p-2">{msg[0]}</td>
-                  <td className="border p-2">{msg[1]}</td>
-                  <td className="border p-2 whitespace-nowrap">{msg[2]}</td>
-
-                  <td className="border p-2">{msg[3]}</td>
-                  <td className="border p-2">{msg[4]}</td>
+                  <td className="border p-2">
+                    <div
+                      className="w-4 h-4 rounded"
+                      style={{ backgroundColor: msg.c }}
+                    ></div>
+                  </td>
+                  <td className="border p-2 whitespace-nowrap">{msg.t}</td>
+                  <td className="border p-2">{msg.i}</td>
+                  <td className="border p-2">{msg.m}</td>
+                  <td className="border p-2">{msg.s}</td>
                 </tr>
               ))
             )}