fix: DatePicker über Tabellenkopf anzeigen durch z-index und Portal-Lösung

- react-datepicker auf portalId 'root-portal' umgestellt
- CSS-Klasse 'custom-datepicker-popper' mit z-index: 9999 in globals.css ergänzt
- Problem behoben, dass DatePicker hinter dem sticky Tabellen-Header verborgen war
- Tailwind-Konfiguration um z-[60,70] erweitert, wenn nötig

.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.541
+NEXT_PUBLIC_APP_VERSION=1.6.542
 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.541
+NEXT_PUBLIC_APP_VERSION=1.6.542
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.6.542] – 2025-07-07
+
+- feat: lade nur spezifischen Spannungs-/Temperatur-Thunk beim Öffnen des Detailmodals
+
+- Entfernt globale Thunk-Aufrufe für alle Systemwerte bei Zeitraumwechsel
+- Detailansicht lädt nun nur den benötigten Redux-Thunk (z. B. +15V → Channel 108)
+- Zeitraumwechsel im Modal löst gezielt nur den zugehörigen Thunk aus
+- Reduziert unnötige Datenlast und verbessert Performance bei Embedded-Geräten
+
+---
 ## [1.6.541] – 2025-07-07
 
 - system

components/main/reports/DateRangePickerMeldungen.tsx

@@ -28,6 +28,8 @@ const DateRangePickerMeldungen: React.FC<Props> = ({
       <div className="flex items-center space-x-2">
         <label className="text-sm font-semibold">Von</label>
         <DatePicker
+          portalId="root-portal" // beliebige ID
+          popperClassName="custom-datepicker-popper"
           selected={parseISO(fromDate)}
           onChange={(date) => date && setFromDate(formatDate(date))}
           selectsStart
@@ -42,6 +44,8 @@ const DateRangePickerMeldungen: React.FC<Props> = ({
       <div className="flex items-center space-x-2">
         <label className="text-sm font-semibold">Bis</label>
         <DatePicker
+          portalId="root-portal" // beliebige ID
+          popperClassName="custom-datepicker-popper"
           selected={parseISO(toDate)}
           onChange={(date) => date && setToDate(formatDate(date))}
           selectsEnd

package-lock.json

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

package.json

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

styles/globals.css

@@ -57,3 +57,6 @@ body {
 .react-datepicker__day--today {
   border: 1px solid var(--littwin-blue);
 }
+.custom-datepicker-popper {
+  z-index: 9999 !important; /* Maximale Priorität */
+}

tailwind.config.js

@@ -7,6 +7,10 @@ module.exports = {
   ],
   theme: {
     extend: {
+      zIndex: {
+        60: "60",
+        70: "70",
+      },
       colors: {
         "littwin-blue": "#00AEEF",
       },