ISO & RSL dropdowns moved to headers like TDR; removed old dropdowns from action bars, cleaned imports, fixed TypeScript issues

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartView.tsx

@@ -1,6 +1,7 @@
 "use client"; // LoopChartView.tsx
 
 import React, { useEffect } from "react";
+import { Listbox } from "@headlessui/react";
 import ReactModal from "react-modal";
 import LoopMeasurementChart from "./LoopMeasurementChart";
 import Report from "../IsoMeasurementChart/Report";
@@ -13,6 +14,7 @@ import {
   setFullScreen,
   setSlotNumber,
 } from "@/redux/slices/kabelueberwachungChartSlice";
+import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
 
 import { resetBrushRange } from "@/redux/slices/brushSlice";
 import { useLoopChartLoader } from "./LoopChartActionBar";
@@ -178,9 +180,59 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
           height: "100%",
         }}
       >
-        <h3 className="text-lg font-semibold">
-          {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
-        </h3>
+        <div className="flex justify-between items-center mb-2 pr-24">
+          <h3 className="text-lg font-semibold">
+            {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
+          </h3>
+          <Listbox
+            value={chartTitle}
+            onChange={(value: "Messkurve" | "Meldungen") =>
+              dispatch(setLoopChartTitle(value))
+            }
+          >
+            <div className="relative w-40">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span>{chartTitle}</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">
+                {(["Messkurve", "Meldungen"] as const).map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={({
+                      selected,
+                      active,
+                    }: {
+                      selected: boolean;
+                      active: boolean;
+                    }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {option}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
         <LoopChartActionBar />
         <div style={{ flex: 1, height: "90%" }}>
           {chartTitle === "Messkurve" ? <LoopMeasurementChart /> : <Report />}