From 44cfd2ab81577ff423b28ec9891e542171f913e3 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 8 Jul 2025 07:09:27 +0200
Subject: [PATCH] refactor: Zeitraum-Dropdown in DetailModal auf Listbox mit
 Littwin-Design umgestellt

- <select> durch Headless UI Listbox ersetzt
- Optionen DIA0, DIA1, DIA2 mit deutschem Label dargestellt
- Einheitliches Styling mit littwin-blue wie in anderen Komponenten
---
 .env.development                       |  2 +-
 .env.production                        |  2 +-
 CHANGELOG.md                           | 10 ++++
 components/main/system/DetailModal.tsx | 67 +++++++++++++++++++++-----
 package-lock.json                      |  4 +-
 package.json                           |  2 +-
 6 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/.env.development b/.env.development
index b21c1a6..32305f2 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.555
+NEXT_PUBLIC_APP_VERSION=1.6.556
 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 1d34ac9..c00411c 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.555
+NEXT_PUBLIC_APP_VERSION=1.6.556
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bdbb42..44e3a2c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [1.6.556] – 2025-07-08
+
+- refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt
+
+- selectedMode (DIA0/DIA1/DIA2) ersetzt durch Headless UI Listbox
+- selectedSlotType (Schleifen-/Isolationswiderstand) ebenfalls als Listbox
+- Einheitliches Dropdown-Design mit MeldungenView und TDRChartActionBar
+- Littwin-blue Stil für ausgewählte Optionen integriert
+
+---
 ## [1.6.555] – 2025-07-08
 
 - refactor: LoopChartActionBar Dropdowns auf Listbox mit Littwin-Design umgestellt
diff --git a/components/main/system/DetailModal.tsx b/components/main/system/DetailModal.tsx
index 004b7e4..a7e72c2 100644
--- a/components/main/system/DetailModal.tsx
+++ b/components/main/system/DetailModal.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { Line } from "react-chartjs-2";
 import { useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
+import { Listbox } from "@headlessui/react";
 
 type Props = {
   isOpen: boolean;
@@ -78,19 +79,59 @@ export const DetailModal = ({
           </button>
         </div>
 
-        <div className="mb-4">
-          <label className="mr-2 font-medium">Zeitraum:</label>
-          <select
-            className="border px-2 py-1 rounded"
-            value={zeitraum}
-            onChange={(e) =>
-              setZeitraum(e.target.value as "DIA0" | "DIA1" | "DIA2")
-            }
-          >
-            <option value="DIA0">Alle Messwerte</option>
-            <option value="DIA1">Stündlich</option>
-            <option value="DIA2">Täglich</option>
-          </select>
+        <div className="flex items-center space-x-2 mb-4">
+          <label className="font-medium">Zeitraum:</label>
+          <Listbox value={zeitraum} onChange={setZeitraum}>
+            <div className="relative w-48">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>
+                  {
+                    {
+                      DIA0: "Alle Messwerte",
+                      DIA1: "Stündlich",
+                      DIA2: "Täglich",
+                    }[zeitraum]
+                  }
+                </span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {["DIA0", "DIA1", "DIA2"].map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={({ selected, active }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-blue-100"
+                          : ""
+                      }`
+                    }
+                  >
+                    {
+                      {
+                        DIA0: "Alle Messwerte",
+                        DIA1: "Stündlich",
+                        DIA2: "Täglich",
+                      }[option]
+                    }
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
         </div>
 
         <div className="h-[85%]">
diff --git a/package-lock.json b/package-lock.json
index 7f88c74..c774b2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.555",
+  "version": "1.6.556",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.555",
+      "version": "1.6.556",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",
diff --git a/package.json b/package.json
index 223efd7..77fe1a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.555",
+  "version": "1.6.556",
   "private": true,
   "scripts": {
     "dev": "next dev",