feat: Dashboard Meldungen Status 1 oder 0

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.503
+NEXT_PUBLIC_APP_VERSION=1.6.506
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.503
+NEXT_PUBLIC_APP_VERSION=1.6.506
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.6.506] – 2025-06-30
+
+- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
+
+---
+## [1.6.505] – 2025-06-30
+
+- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
+
+---
+## [1.6.504] – 2025-06-30
+
+- feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI
+
+---
 ## [1.6.503] – 2025-06-30
 
 - feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI

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
+  t: string;
-  s: number; // Status
+  s: number;
-  c: string; // Farbe
+  c: string;
-  m: string; // Meldung
+  m: string;
-  i: string; // Modul/Quelle
+  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 }> = ({
+  const [sourceFilter, setSourceFilter] = useState<string>("Alle");
-  className,
+
-}) => {
+  // Datum initialisieren: von = heute - 30 Tage, bis = heute
-  const [messages, setMessages] = useState<Meldung[]>([]);
+  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 () => {
+    dispatch(getMessagesThunk({ fromDate, toDate }));
-      const today = new Date();
+  }, [dispatch, fromDate, toDate]);
-      const prior30 = new Date();
-      prior30.setDate(today.getDate() - 30);
 
-      const format = (d: Date) =>
+  const filteredMessages =
-        `${d.getFullYear()};${(d.getMonth() + 1)
+    sourceFilter === "Alle"
-          .toString()
+      ? messages
-          .padStart(2, "0")};${d.getDate().toString().padStart(2, "0")}`;
+      : messages.filter((m: Meldung) => m.i === sourceFilter);
-
-      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();
-  }, []);
 
   return (
-    <div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
+    <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">
-      <div className="overflow-x-auto overflow-y-auto border rounded shadow-sm h-[95%] pt-1">
+      <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 ? (
+            {filteredMessages
-              <tr>
+              .slice(0, 20)
-                <td
+              .map((msg: Meldung, index: number) => (
-                  colSpan={5}
-                  className="text-center italic text-gray-500 p-4"
-                >
-                  Keine Meldungen verfügbar.
-                </td>
-              </tr>
-            ) : (
-              messages.map((msg, index) => (
                 <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;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.503",
+  "version": "1.6.506",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.503",
+      "version": "1.6.506",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@iconify-icons/ri": "^1.2.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.503",
+  "version": "1.6.506",
   "private": true,
   "scripts": {
     "dev": "next dev",

redux/thunks/getLast20MessagesThunk.ts

@@ -1,13 +1,21 @@
-// /redux/thunks/getLast20MessagesThunk.ts
+// redux/thunks/getLast20MessagesThunk.ts
 import { createAsyncThunk } from "@reduxjs/toolkit";
-import { fetchLast20MessagesFromWindow } from "../../services/fetchLast20MessagesService";
+import { fetchMessagesService } from "@/services/fetchMessagesService";
-import { setLast20Messages } from "../slices/last20MessagesSlice";
 
 export const getLast20MessagesThunk = createAsyncThunk(
-  "last20Messages/fetchLast20Messages",
+  "last20Messages/fetch",
-  async (_, { dispatch }) => {
+  async () => {
-    const messages = await fetchLast20MessagesFromWindow();
+    const toDate = new Date();
-    dispatch(setLast20Messages(messages));
+    const fromDate = new Date();
-    return messages;
+    fromDate.setDate(toDate.getDate() - 30); // z.B. letzte 30 Tage
+
+    const allMessages = await fetchMessagesService(
+      fromDate.toISOString().split("T")[0],
+      toDate.toISOString().split("T")[0]
+    );
+
+    const last20 = allMessages.slice(-20);
+    console.log("Last 20 messages in thunk:", last20);
+    return last20;
   }
 );