feat: Redux-Integration für Meldungen, Anzeige von 'v' statt 's' in UI

pages/meldungen.tsx

@@ -2,6 +2,8 @@
 // /pages/meldungen.tsx
 import React, { useState, useEffect } from "react";
 import DateRangePickerMeldungen from "@/components/main/reports/DateRangePickerMeldungen";
+import { useSelector, useDispatch } from "react-redux";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
 
 type Meldung = {
   t: string;
@@ -9,10 +11,14 @@ type Meldung = {
   c: string;
   m: string;
   i: string;
+  v: string; // NEU: für Anzeige
 };
 
 export default function Messages() {
-  const [messages, setMessages] = useState<Meldung[]>([]);
+  const dispatch = useDispatch();
+  const { data: messages, loading } = useSelector(
+    (state: any) => state.messages
+  );
 
   const [sourceFilter, setSourceFilter] = useState<string>("Alle");
 
@@ -26,49 +32,18 @@ export default function Messages() {
   const [fromDate, setFromDate] = useState<string>(formatDate(prior30));
   const [toDate, setToDate] = useState<string>(formatDate(today));
 
-  const fetchMessages = async () => {
-    const from = new Date(fromDate);
-    const to = new Date(toDate);
-
-    const fy = from.getFullYear();
-    const fm = String(from.getMonth() + 1).padStart(2, "0");
-    const fd = String(from.getDate()).padStart(2, "0");
-    const ty = to.getFullYear();
-    const tm = String(to.getMonth() + 1).padStart(2, "0");
-    const td = String(to.getDate()).padStart(2, "0");
-
-    const isDev =
-      typeof window !== "undefined" && window.location.hostname === "localhost";
-    //http://10.10.0.118/CPL?Service/empty.ACP&MSS1=2025;06;01;2025;06;26;All
-    const url = isDev
-      ? `/api/cpl/messages`
-      : `/CPL?Service/ae.ACP&MSS1=${fy};${fm};${fd};${ty};${tm};${td};All`;
-
-    try {
-      const res = await fetch(url);
-      const raw = await res.json();
-      const data = Array.isArray(raw) ? raw : raw.data;
-      if (!Array.isArray(data)) {
-        console.error("Die empfangenen Daten sind kein Array:", data);
-        return;
-      }
-      setMessages(data);
-    } catch (err) {
-      console.error("Fehler beim Laden der Meldungen:", err);
-    }
-  };
+  useEffect(() => {
+    dispatch(getMessagesThunk({ fromDate, toDate }));
+  }, [dispatch, fromDate, toDate]);
 
   const filteredMessages =
     sourceFilter === "Alle"
       ? messages
-      : messages.filter((m) => m.i === sourceFilter);
+      : messages.filter((m: Meldung) => m.i === sourceFilter);
 
-  const allSources = Array.from(new Set(messages.map((m) => m.i))).sort();
-  // einmal beim laden de Seite die Meldungen abrufen
-  useEffect(() => {
-    fetchMessages();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const allSources = Array.from(
+    new Set(messages.map((m: Meldung) => m.i))
+  ).sort();
 
   return (
     <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
@@ -82,7 +57,7 @@ export default function Messages() {
           setToDate={setToDate}
         />
         <button
-          onClick={fetchMessages}
+          onClick={() => dispatch(getMessagesThunk({ fromDate, toDate }))}
           className="bg-littwin-blue text-white px-4 py-2 rounded h-fit"
         >
           Anzeigen
@@ -90,7 +65,7 @@ export default function Messages() {
         <select
           value={sourceFilter}
           onChange={(e) => setSourceFilter(e.target.value)}
-          className=" border border-solid border-spacing-1 px-4 py-3 rounded h-fit ml-6"
+          className="border border-solid border-spacing-1 px-4 py-3 rounded h-fit ml-6"
         >
           <option value="Alle">Alle Quellen</option>
           {allSources.map((src) => (
@@ -109,11 +84,11 @@ export default function Messages() {
               <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>
+              <th className="p-2 border">Wert</th> {/* statt Status */}
             </tr>
           </thead>
           <tbody>
-            {filteredMessages.map((msg, index) => (
+            {filteredMessages.map((msg: Meldung, index: number) => (
               <tr key={index} className="hover:bg-gray-50">
                 <td className="border p-2">
                   <div
@@ -124,7 +99,7 @@ export default function Messages() {
                 <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>