From 99d2a3d4519e77cb868cb4f3513dfbdf292e8eab Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 7 Jul 2025 15:17:17 +0200
Subject: [PATCH] fix: TDR select List mouseover gray 200

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 CHANGELOG.md                                  | 10 ++
 .../Charts/TDRChart/TDRChartActionBar.tsx     | 98 ++++++++++++++-----
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 6 files changed, 89 insertions(+), 29 deletions(-)

diff --git a/.env.development b/.env.development
index d8ac331..6df49cb 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.548
+NEXT_PUBLIC_APP_VERSION=1.6.550
 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 2ecc318..ed28cad 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.548
+NEXT_PUBLIC_APP_VERSION=1.6.550
 NEXT_PUBLIC_CPL_MODE=production
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index cda39dc..dbfa5af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [1.6.550] – 2025-07-07
+
+- fix: List mouseover -> hover:bg-gray-200
+
+---
+## [1.6.549] – 2025-07-07
+
+- fix: List mouseover -> hover:bg-gray-200
+
+---
 ## [1.6.548] – 2025-07-07
 
 - fix: es soll dann nur wenn der Button Anziegen geklickt wird anzeigenund nicht automatisch nach ein Datumauswahl
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
index 3348232..cd78cce 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
@@ -7,6 +7,7 @@ import { RootState } from "@/redux/store";
 import { fetchTDMDataBySlotThunk } from "@/redux/thunks/getTDMListBySlotThunk";
 import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
 import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
+import { Listbox } from "@headlessui/react";
 
 const TDRChartActionBar: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -121,7 +122,7 @@ const TDRChartActionBar: React.FC = () => {
       {selectedId !== null && (
         <button
           onClick={handleSetReference}
-          className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-blue-100"
+          className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
         >
           TDR-Kurve als Referenz speichern
         </button>
@@ -129,31 +130,80 @@ const TDRChartActionBar: React.FC = () => {
 
       {/* 🔽 Dropdown für Messungen */}
       <div className="flex items-center space-x-2">
-        <label htmlFor="tdrIdSelect" className="text-sm font-semibold">
-          TDR Messung
-        </label>
-        <select
-          id="tdrIdSelect"
-          value={selectedId ?? ""}
-          onChange={handleSelectChange}
-          className="border rounded px-2 py-1 text-sm"
+        <Listbox
+          value={selectedId}
+          onChange={(id) => {
+            setSelectedId(id);
+            if (id !== null) {
+              dispatch(getTDRChartDataByIdThunk(id));
+            }
+          }}
           disabled={idsForSlot.length === 0}
         >
-          <option value="">-- Wähle Messung --</option>
-          {idsForSlot.map((entry) => (
-            <option key={entry.id} value={entry.id}>
-              {new Date(entry.t).toLocaleString("de-DE", {
-                day: "2-digit",
-                month: "2-digit",
-                year: "numeric",
-                hour: "2-digit",
-                minute: "2-digit",
-                second: "2-digit",
-              })}{" "}
-              – Fehlerstelle: {entry.d} m
-            </option>
-          ))}
-        </select>
+          <div className="relative w-72">
+            <Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+              <span>
+                {selectedId
+                  ? (() => {
+                      const selected = idsForSlot.find(
+                        (e) => e.id === selectedId
+                      );
+                      return selected
+                        ? `${new Date(selected.t).toLocaleString("de-DE", {
+                            day: "2-digit",
+                            month: "2-digit",
+                            year: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            second: "2-digit",
+                          })} – Fehlerstelle: ${selected.d} m`
+                        : "Wähle Messung";
+                    })()
+                  : "Wähle Messung"}
+              </span>
+              <svg
+                className="w-5 h-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <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">
+              {idsForSlot.map((entry) => (
+                <Listbox.Option
+                  key={entry.id}
+                  value={entry.id}
+                  className={({ selected, active }) =>
+                    `px-4 py-1 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-gray-200"
+                        : ""
+                    }`
+                  }
+                >
+                  {new Date(entry.t).toLocaleString("de-DE", {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  })}{" "}
+                  – Fehlerstelle: {entry.d} m
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
       </div>
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index 9e568c6..a17e9aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.548",
+  "version": "1.6.550",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.548",
+      "version": "1.6.550",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",
diff --git a/package.json b/package.json
index f058a97..70c1cb0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.548",
+  "version": "1.6.550",
   "private": true,
   "scripts": {
     "dev": "next dev",