feat: Dashboard Meldungen Status 1 oder 0

components/main/dashboard/Last20MessagesTable.tsx

@@ -1,86 +1,71 @@
 "use client";
-import React, { useEffect, useState } from "react";
+// @/components/main/dashboard/Last20MessagesTable.tsx
+
+import React, { useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
+import type { AppDispatch } from "@/redux/store";
 
 type Meldung = {
-  t: string; // Zeitstempel
-  s: number; // Status
-  c: string; // Farbe
-  m: string; // Meldung
-  i: string; // Modul/Quelle
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+  v: string;
 };
+export default function Last20MessagesTable() {
+  const dispatch = useDispatch<AppDispatch>();
+  type RootState = {
+    messages: {
+      data: Meldung[];
+    };
+    // add other slices if needed
+  };
+  const { data: messages } = useSelector((state: RootState) => state.messages);
 
-const Last20MessagesTable: React.FC<{ className?: string }> = ({
-  className,
-}) => {
-  const [messages, setMessages] = useState<Meldung[]>([]);
+  const [sourceFilter, setSourceFilter] = useState<string>("Alle");
+
+  // Datum initialisieren: von = heute - 30 Tage, bis = heute
+  const today = new Date();
+  const prior30 = new Date();
+  prior30.setDate(today.getDate() - 30);
+
+  const formatDate = (d: Date) => d.toISOString().split("T")[0];
+
+  const [fromDate, setFromDate] = useState<string>(formatDate(prior30));
+  const [toDate, setToDate] = useState<string>(formatDate(today));
 
   useEffect(() => {
-    const fetchLast20Messages = async () => {
-      const today = new Date();
-      const prior30 = new Date();
-      prior30.setDate(today.getDate() - 30);
+    dispatch(getMessagesThunk({ fromDate, toDate }));
+  }, [dispatch, fromDate, toDate]);
 
-      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/last20MessagesAPIHandler`
-        : `/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);
-      }
-    };
-
-    fetchLast20Messages();
-  }, []);
+  const filteredMessages =
+    sourceFilter === "Alle"
+      ? messages
+      : messages.filter((m: Meldung) => m.i === sourceFilter);
 
   return (
-    <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">
+    <div className="flex flex-col gap-3 p-4 w-full max-w-full h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
+      <h1 className="text-xl font-bold mb-4"></h1>
+
+      <div className="flex flex-wrap gap-6 mb-6 items-end"></div>
+
+      <div className="overflow-auto max-h-[80vh]">
         <table className="min-w-full border">
           <thead className="bg-gray-100 text-left sticky top-0 z-10">
             <tr>
               <th className="p-2 border">Prio</th>
-              <th className="p-2 border">Zeit</th>
+              <th className="p-2 border">Zeitstempel</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>
-            {messages.length === 0 ? (
-              <tr>
-                <td
-                  colSpan={5}
-                  className="text-center italic text-gray-500 p-4"
-                >
-                  Keine Meldungen verfügbar.
-                </td>
-              </tr>
-            ) : (
-              messages.map((msg, index) => (
+            {filteredMessages
+              .slice(0, 20)
+              .map((msg: Meldung, index: number) => (
                 <tr key={index} className="hover:bg-gray-50">
                   <td className="border p-2">
                     <div
@@ -88,18 +73,20 @@ const Last20MessagesTable: React.FC<{ className?: string }> = ({
                       style={{ backgroundColor: msg.c }}
                     ></div>
                   </td>
-                  <td className="border p-2 whitespace-nowrap">{msg.t}</td>
+                  <td className="border p-2">{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>
+                  <td className="border p-2">{msg.v}</td> {/* NEU */}
                 </tr>
-              ))
-            )}
+              ))}
           </tbody>
         </table>
+        {messages.length === 0 && (
+          <div className="mt-4 text-center text-gray-500 italic">
+            Keine Meldungen im gewählten Zeitraum vorhanden.
+          </div>
+        )}
       </div>
     </div>
   );
-};
-
-export default Last20MessagesTable;
+}