From f43ddccc46776e350fce959324115f23d9b76db2 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 10 Sep 2025 08:27:33 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20DateRangePicker=20in=20KVZ=20f=C3=BCr?=
 =?UTF-8?q?=20Meldungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 CHANGELOG.md                                  |  5 ++
 .../kue705FO/Charts/KVZChart/KVZChartView.tsx | 56 ++++++++++++++-----
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 6 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/.env.development b/.env.development
index 422c5ec..9985aa7 100644
--- a/.env.development
+++ b/.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)
 
diff --git a/.env.production b/.env.production
index 05c87db..9c1f060 100644
--- a/.env.production
+++ b/.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
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ae6bac..c346cf6 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx b/components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx
index d7827d6..ae16132 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/KVZChart/KVZChartView.tsx
+++ b/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(
-    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
+  const { isFullScreen, slotNumber, vonDatum, bisDatum } = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice
   );
-  const slotNumber = useSelector(
-    (state: RootState) => state.kabelueberwachungChartSlice.slotNumber
+  const { vonDatum: pickerVonDatum, bisDatum: pickerBisDatum } = useSelector(
+    (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 = () => {
-    dispatch(setFullScreen(!isFullScreen));
+  const toggleFullScreen = () => 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",
-          height: isFullScreen ? "90vh" : "28rem",
+          width: isFullScreen ? "90vw" : "60rem",
+          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 */}
-        <div className="w-full flex justify-between mb-4">
-          <div className="flex items-center">
-            <label className="text-sm font-semibold">
+        {/* Toolbar mit KÜ + DateRangePicker + Sensoren (analog zu anderen Modalen) */}
+        <div className="w-full flex flex-wrap items-center gap-4 mb-4">
+          <div className="flex items-center gap-2">
+            <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">
diff --git a/package-lock.json b/package-lock.json
index bbf9f45..234166c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 25fb42d..e2a662c 100644
--- a/package.json
+++ b/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",