feat: TDR Meldungen DateRangePicker

.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.886
+NEXT_PUBLIC_APP_VERSION=1.6.887
 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.886
+NEXT_PUBLIC_APP_VERSION=1.6.887
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.887] – 2025-09-10
+
+- style: actionbar in RSL und ISO
+
+---
 ## [1.6.886] – 2025-09-10
 
 - WIP: von bis Zeitraum in ISO und TDR, aber TDR ist WIP

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -7,7 +7,6 @@ import { AppDispatch } from "../../../../../../redux/store";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 import { getColor } from "../../../../../../utils/colors";
-import TDRChartActionBar from "./TDRChartActionBar";
 import { getReferenceCurveBySlotThunk } from "../../../../../../redux/thunks/getReferenceCurveBySlotThunk";
 
 const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
@@ -213,7 +212,6 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
 
   return (
   <div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
-      <TDRChartActionBar />
 
       {tdrChartData.length === 0 ? (
         <div className="flex items-center justify-center h-full text-gray-500 italic">

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

@@ -153,7 +153,8 @@ const TDRChartActionBar: React.FC = () => {
 
   return (
     <>
-      <div className="toolbar w-full flex items-center gap-3 flex-wrap">
+      <div className="toolbar w-full justify-between flex-wrap">
+        {/* KÜ number left, controls right, like IsoChartActionBar */}
         <div className="flex items-center gap-2 pr-4">
           <span className="font-semibold uppercase tracking-wide text-muted">
             KÜ
@@ -162,9 +163,10 @@ const TDRChartActionBar: React.FC = () => {
             {selectedSlot !== null ? selectedSlot + 1 : "-"}
           </span>
         </div>
-        {/* Date range only in Meldungen (requirement) */}
-        {isMeldungen && <DateRangePicker />}
+        <div className="flex items-center gap-3 flex-1 justify-end">
           {isMeldungen ? (
+            <>
+              <DateRangePicker />
               <button
                 type="button"
                 onClick={handleFetchMessages}
@@ -173,6 +175,7 @@ const TDRChartActionBar: React.FC = () => {
               >
                 Anzeigen
               </button>
+            </>
           ) : (
             <>
               {selectedId !== null && (
@@ -274,6 +277,7 @@ const TDRChartActionBar: React.FC = () => {
             </>
           )}
         </div>
+        {/* Progress Overlay */}
         {tdrRunning && (
           <div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-[rgba(0,0,0,0.55)] backdrop-blur-sm">
             <div className="mb-4 text-center space-y-1">
@@ -297,6 +301,7 @@ const TDRChartActionBar: React.FC = () => {
             </div>
           </div>
         )}
+      </div>
     </>
   );
 };

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartView.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect } from "react";
 import ReactModal from "react-modal";
 import TDRChart from "./TDRChart";
+import TDRChartActionBar from "./TDRChartActionBar";
 import { useSelector, useDispatch } from "react-redux";
 import { AppDispatch, RootState } from "@/redux/store";
 import {
@@ -166,6 +167,8 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
         </div>
       </header>
       <div className="flex flex-col flex-1 p-3 gap-3">
+        {/* Action Bar (wie bei ISO / Loop) */}
+        <TDRChartActionBar />
         <div className="flex-1 relative">
           {chartTitle === "Messkurve" ? (
             <TDRChart isFullScreen={isFullScreen} />

package-lock.json

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

package.json

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