feat: DateRangePicker in KVZ für Meldungen

.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.887
+NEXT_PUBLIC_APP_VERSION=1.6.888
 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.887
+NEXT_PUBLIC_APP_VERSION=1.6.888
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.888] – 2025-09-10
+
+- feat: TDR Meldungen DateRangePicker
+
+---
 ## [1.6.887] – 2025-09-10
 
 - style: actionbar in RSL und ISO

components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx

@@ -1,6 +1,9 @@
 "use client"; // KVZChartView.tsx
 
 import React, { useEffect } from "react";
+import DateRangePicker from "@/components/common/DateRangePicker";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
+import { setLoading } from "@/redux/slices/kabelueberwachungChartSlice";
 import ReactModal from "react-modal";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "@/redux/store";
@@ -31,11 +34,11 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
   slotIndex,
 }) => {
   const dispatch = useDispatch<AppDispatch>();
-  const isFullScreen = useSelector(
+  const { isFullScreen, slotNumber, vonDatum, bisDatum } = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+    (state: RootState) => state.kabelueberwachungChartSlice
   );
-  const slotNumber = useSelector(
+  const { vonDatum: pickerVonDatum, bisDatum: pickerBisDatum } = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.slotNumber
+    (state: RootState) => state.dateRangePicker
   );
 
   // Beim Öffnen Slot setzen (damit konsistent zu anderen Modals)
@@ -63,8 +66,19 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
     onClose();
   };
 
-  const toggleFullScreen = () => {
+  const toggleFullScreen = () => dispatch(setFullScreen(!isFullScreen));
-    dispatch(setFullScreen(!isFullScreen));
+
+  const handleFetchMessages = async () => {
+    const fromDate = pickerVonDatum ?? vonDatum;
+    const toDate = pickerBisDatum ?? bisDatum;
+    try {
+      dispatch(setLoading(true));
+      await dispatch(getMessagesThunk({ fromDate, toDate })).unwrap();
+    } catch (err) {
+      console.error("❌ Fehler beim Laden der Meldungen (KVZ)", err);
+    } finally {
+      dispatch(setLoading(false));
+    }
   };
 
   return (
@@ -80,12 +94,13 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "50rem",
+          width: isFullScreen ? "90vw" : "60rem",
-          height: isFullScreen ? "90vh" : "28rem",
+          height: isFullScreen ? "90vh" : "32rem",
           padding: "1rem",
           transition: "all 0.3s ease-in-out",
           display: "flex",
           flexDirection: "column",
+          overflowX: "hidden",
         },
       }}
     >
@@ -131,17 +146,28 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
       <div className="flex flex-col h-full">
         <h3 className="text-lg font-semibold mb-1">KVz Zustände & Meldungen</h3>
 
-        {/* LED Bereich */}
+        {/* Toolbar mit KÜ + DateRangePicker + Sensoren (analog zu anderen Modalen) */}
-        <div className="w-full flex justify-between mb-4">
+        <div className="w-full flex flex-wrap items-center gap-4 mb-4">
-          <div className="flex items-center">
+          <div className="flex items-center gap-2">
-            <label className="text-sm font-semibold">
+            <span className="text-xs font-semibold opacity-80 select-none">
               KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
-            </label>
+            </span>
           </div>
-          <div style={{ width: "12rem" }}>
+          <div className="flex items-center gap-3 flex-1 min-w-[20rem]">
+            <div className="relative z-[1500]">
+              <DateRangePicker />
+            </div>
+            <button
+              type="button"
+              onClick={handleFetchMessages}
+              className="btn-primary h-8 font-medium px-4"
+            >
+              Anzeigen
+            </button>
+          </div>
+          <div className="flex items-center justify-end" style={{ width: "12rem" }}>
             <FallSensors slotIndex={slotIndex} />
           </div>
-          <div></div>
         </div>
         {/* Meldungen Bereich */}
         <div className="flex-1 border rounded bg-white overflow-hidden">

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.887",
+  "version": "1.6.888",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.887",
+      "version": "1.6.888",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.887",
+  "version": "1.6.888",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",