style: dark mode ISO, RSL und TDR

.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.880
+NEXT_PUBLIC_APP_VERSION=1.6.881
 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.880
+NEXT_PUBLIC_APP_VERSION=1.6.881
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.881] – 2025-09-09
+
+- feat: MUI test
+
+---
 ## [1.6.880] – 2025-09-09
 
 - style: dark mode Modal KÜ Einstellungen

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

@@ -281,26 +281,23 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
     handleFetchData,
   }));
 
+  // Sichtbarkeits-Flags
+  const isMesskurve = chartTitle === "Messkurve";
+
   return (
-    <div className="flex justify-between  p-1 bg-gray-100 rounded-lg ">
+    <div className="toolbar w-full flex flex-wrap items-center gap-2">
-      <div className="flex items-center">
+      <div className="flex items-center mr-2 min-w-[4rem]">
-        <label className="text-sm font-semibold">
+        <span className="text-xs font-semibold opacity-80 select-none">
           KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
-        </label>
+        </span>
       </div>
 
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-2 flex-wrap">
-        {/* DateRangePicker – für beide Ansichten sichtbar */}
+        {/* DateRangePicker immer sichtbar */}
-        <div>
+        <DateRangePicker />
-          <DateRangePicker compact />
-        </div>
 
-        {/* DIA0/DIA1/DIA2 Dropdown – nur sichtbar bei Messkurve */}
+        {/* Modus-Dropdown nur für Messkurve */}
-        <div
+        <div className={isMesskurve ? "" : "hidden"}>
-          style={{
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
-          }}
-        >
           <Listbox
             value={selectedMode}
             onChange={(value) => {
@@ -309,39 +306,29 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
             }}
           >
             <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">
+              <Listbox.Button className="dropdown-surface w-full flex items-center justify-between">
-                <span>
+                <span className="dropdown-text-fix">
                   {
                     {
                       DIA0: "Alle Messwerte",
-                      DIA1: "Stündliche Werte",
+                      DIA1: "Stündlich",
-                      DIA2: "Tägliche Werte",
+                      DIA2: "Täglich",
                     }[selectedMode]
                   }
                 </span>
-                <svg
+                <i className="bi bi-chevron-down opacity-70" />
-                  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">
+              <Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto">
                 {["DIA0", "DIA1", "DIA2"].map((mode) => (
                   <Listbox.Option
                     key={mode}
                     value={mode}
                     className={({ selected, active }) =>
-                      `px-4 py-1 cursor-pointer ${
+                      `px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
                         selected
-                          ? "bg-littwin-blue text-white"
+                          ? "dropdown-option-active"
                           : active
-                          ? "bg-gray-200"
+                          ? "dropdown-option-hover"
                           : ""
                       }`
                     }
@@ -349,8 +336,8 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
                     {
                       {
                         DIA0: "Alle Messwerte",
-                        DIA1: "Stündliche Werte",
+                        DIA1: "Stündlich",
-                        DIA2: "Tägliche Werte",
+                        DIA2: "Täglich",
                       }[mode]
                     }
                   </Listbox.Option>
@@ -359,41 +346,38 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
             </div>
           </Listbox>
         </div>
-        {/* Dropdown für Messkurve / Meldungen in View-Header umgezogen */}
 
-        {/* Buttons – nur sichtbar bei Messkurve, Platz bleibt erhalten */}
+        {/* Buttons nur für Messkurve */}
-        <div
+        <div className={isMesskurve ? "flex items-center gap-2" : "hidden"}>
-          style={{
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
-          }}
-          className="flex items-center space-x-2"
-        >
           <button
             onClick={handleStartRSL}
-            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
+            className="btn-primary h-8 font-medium px-3"
             disabled={isLoading || rslRunning}
+            type="button"
           >
-            {rslRunning ? "RSL läuft..." : "RSL Messung starten"}
+            {rslRunning ? "RSL läuft…" : "RSL Messung starten"}
           </button>
           <button
             onClick={handleFetchData}
-            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
+            className="btn-primary h-8 font-medium px-3"
             disabled={rslRunning}
+            type="button"
           >
             Daten laden
           </button>
         </div>
       </div>
+
       {rslRunning && (
-        <div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-black/60 backdrop-blur-sm">
           <div className="mb-4 text-center space-y-1">
-            <p className="text-lg font-semibold">RSL Messung läuft</p>
+            <p className="text-sm font-semibold">RSL Messung läuft</p>
-            <p className="text-sm text-gray-700">
+            <p className="text-xs opacity-80">
               Bitte warten…{" "}
               {Math.min(100, Math.round((rslProgress / TOTAL_DURATION) * 100))}%
             </p>
           </div>
-          <div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
+          <div className="w-2/3 max-w-xl h-3 bg-[var(--color-border)] rounded overflow-hidden shadow-inner">
             <div
               className="h-full bg-littwin-blue transition-all ease-linear"
               style={{ width: `${(rslProgress / TOTAL_DURATION) * 100}%` }}

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

@@ -1,31 +1,24 @@
 "use client"; // LoopChartView.tsx
 
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { Listbox } from "@headlessui/react";
 import ReactModal from "react-modal";
 import LoopMeasurementChart from "./LoopMeasurementChart";
 import Report from "../IsoMeasurementChart/Report";
 import LoopChartActionBar from "./LoopChartActionBar";
-import { useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { AppDispatch } from "@/redux/store";
+import { AppDispatch, RootState } from "@/redux/store";
-import { RootState } from "@/redux/store";
 import {
   setChartOpen,
   setFullScreen,
   setSlotNumber,
-} from "@/redux/slices/kabelueberwachungChartSlice";
-import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
-
-import { resetBrushRange } from "@/redux/slices/brushSlice";
-import { useLoopChartLoader } from "./LoopChartActionBar";
-
-import {
   setVonDatum,
   setBisDatum,
   setSelectedMode,
   setSelectedSlotType,
 } from "@/redux/slices/kabelueberwachungChartSlice";
+import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";
+import { resetBrushRange } from "@/redux/slices/brushSlice";
 import { resetDateRange } from "@/redux/slices/dateRangePickerSlice";
 
 interface LoopChartViewProps {
@@ -34,11 +27,7 @@ interface LoopChartViewProps {
   slotIndex: number;
 }
 
-const LoopChartView: React.FC<LoopChartViewProps> = ({
+function LoopChartView({ isOpen, onClose, slotIndex }: LoopChartViewProps) {
-  isOpen,
-  onClose,
-  slotIndex,
-}) => {
   const dispatch = useDispatch<AppDispatch>();
   const chartTitle = useSelector(
     (state: RootState) => state.loopChartType.chartTitle
@@ -48,9 +37,6 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
     (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
   );
 
-  // useLoopChartLoader hook
-  const loadLoopChartData = useLoopChartLoader();
-
   // slotNumber nicht direkt benötigt – wird intern über Redux genutzt
 
   // **Modal schließen + Redux-Status zurücksetzen**
@@ -58,64 +44,35 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
     const today = new Date();
     const thirtyDaysAgo = new Date();
     thirtyDaysAgo.setDate(today.getDate() - 30);
-
     const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
-
-    // Reset Datum
     dispatch(setVonDatum(toISO(thirtyDaysAgo)));
     dispatch(setBisDatum(toISO(today)));
-
-    // Reset DateRangePicker
     dispatch(resetDateRange());
-
+    dispatch(setSelectedMode("DIA0"));
-    // Reset Dropdowns
-    dispatch(setSelectedMode("DIA0")); // Reset to Alle Messwerte
     dispatch(setSelectedSlotType("schleifenwiderstand"));
-
-    // Sonstiges Reset
     dispatch(setChartOpen(false));
     dispatch(setFullScreen(false));
     dispatch(resetBrushRange());
-
     onClose();
   };
 
-  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => dispatch(setFullScreen(!isFullScreen));
-  const toggleFullScreen = () => {
-    dispatch(setFullScreen(!isFullScreen));
-  };
 
-  // Modal öffnen - RSL spezifische Einstellungen
   const actionBarRef = useRef<{ handleFetchData: () => void }>(null);
   useEffect(() => {
     if (isOpen) {
       const today = new Date();
       const thirtyDaysAgo = new Date();
       thirtyDaysAgo.setDate(today.getDate() - 30);
-
       const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
-
-      // Set slot number first
       dispatch(setSlotNumber(slotIndex));
-
-      // Set dates
       dispatch(setVonDatum(toISO(thirtyDaysAgo)));
       dispatch(setBisDatum(toISO(today)));
-
-      // Set RSL specific settings
       dispatch(setSelectedSlotType("schleifenwiderstand"));
-      dispatch(setSelectedMode("DIA0")); // Set to Alle Messwerte on open
+      dispatch(setSelectedMode("DIA0"));
-
+      const t = setTimeout(() => actionBarRef.current?.handleFetchData(), 120);
-      // Automatisch Daten laden wie Button-Klick
+      return () => clearTimeout(t);
-      const timer = setTimeout(() => {
-        actionBarRef.current?.handleFetchData();
-      }, 120);
-
-      // Cleanup timer
-      return () => clearTimeout(timer);
     }
-    //ESLint ignore
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, slotIndex, dispatch]);
 
   return (
@@ -124,76 +81,55 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
       onRequestClose={handleClose}
       ariaHideApp={false}
       style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        overlay: {
+          backgroundColor: "rgba(0,0,0,0.55)",
+          backdropFilter: "blur(2px)",
+        },
         content: {
-          top: "50%",
+          inset: "50% auto auto 50%",
-          left: "50%",
-          bottom: "auto",
-          marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "70rem",
+          width: isFullScreen ? "90vw" : "72rem",
-          height: isFullScreen ? "90vh" : "35rem",
+          height: isFullScreen ? "90vh" : "38rem",
-          padding: "1rem",
+          padding: 0,
-          transition: "all 0.3s ease-in-out",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          borderRadius: "14px",
           display: "flex",
           flexDirection: "column",
+          overflow: "hidden",
         },
       }}
+      contentLabel="Schleifenwiderstand"
     >
-      {/* Action-Buttons */}
+      <header className="modal-header relative pr-56">
-      <div
+        <h3 className="text-sm font-semibold tracking-wide">
-        style={{
+          Schleifenwiderstand
-          position: "absolute",
+        </h3>
-          top: "0.625rem",
+        <div className="absolute top-2 right-2 flex gap-2">
-          right: "0.625rem",
+          <button
-          display: "flex",
+            onClick={toggleFullScreen}
-          gap: "0.75rem",
+            className="icon-btn"
-        }}
+            aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
-      >
+            type="button"
-        {/* Fullscreen-Button */}
+          >
-        <button
+            <i
-          onClick={toggleFullScreen}
+              className={
-          style={{
+                isFullScreen
-            background: "transparent",
+                  ? "bi bi-fullscreen-exit"
-            border: "none",
+                  : "bi bi-arrows-fullscreen"
-            fontSize: "1.5rem",
+              }
-            cursor: "pointer",
+            />
-          }}
+          </button>
-        >
+          <button
-          <i
+            onClick={handleClose}
-            className={
+            className="icon-btn"
-              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+            aria-label="Schließen"
-            }
+            type="button"
-          ></i>
+          >
-        </button>
+            <i className="bi bi-x-lg" />
-
+          </button>
-        {/* Schließen-Button */}
+        </div>
-        <button
+        <div className="absolute top-2 right-28">
-          onClick={handleClose}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
-        >
-          <i className="bi bi-x-circle-fill"></i>
-        </button>
-      </div>
-
-      {/* Chart-Container */}
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <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") =>
@@ -201,37 +137,21 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
             }
           >
             <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">
+              <Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8">
-                <span>{chartTitle}</span>
+                <span className="dropdown-text-fix">{chartTitle}</span>
-                <svg
+                <i className="bi bi-chevron-down text-sm opacity-70" />
-                  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">
+              <Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto text-sm">
                 {(["Messkurve", "Meldungen"] as const).map((option) => (
                   <Listbox.Option
                     key={option}
                     value={option}
-                    className={({
+                    className={({ selected, active }) =>
-                      selected,
+                      `px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
-                      active,
-                    }: {
-                      selected: boolean;
-                      active: boolean;
-                    }) =>
-                      `px-4 py-1 cursor-pointer ${
                         selected
-                          ? "bg-littwin-blue text-white"
+                          ? "dropdown-option-active"
                           : active
-                          ? "bg-gray-200"
+                          ? "dropdown-option-hover"
                           : ""
                       }`
                     }
@@ -243,17 +163,19 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
             </div>
           </Listbox>
         </div>
+      </header>
+      <div className="flex flex-col flex-1 p-3 gap-3">
         <LoopChartActionBar ref={actionBarRef} />
-        <div style={{ flex: 1, height: "90%" }}>
+        <div className="flex-1 relative">
           {chartTitle === "Messkurve" ? (
             <LoopMeasurementChart />
           ) : (
-            <Report moduleType="RSL" autoLoad={false} />
+            <Report moduleType="RSL" autoLoad={chartTitle === "Meldungen"} />
           )}
         </div>
       </div>
     </ReactModal>
   );
-};
+}
 
 export default LoopChartView;

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

@@ -165,27 +165,32 @@ const TDRChartActionBar: React.FC = () => {
 
   return (
     <>
-      <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
+      <div className="toolbar w-full flex items-center gap-3 flex-wrap">
-        {/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
+        {/* Slot Badge */}
-        <div className="text-sm font-semibold">
+        <div className="flex items-center gap-2 pr-4">
-          {selectedSlot !== null ? `KÜ ${selectedSlot + 1}` : "Kein KÜ gewählt"}
+          <span className="font-semibold uppercase tracking-wide text-muted">KÜ</span>
+          <span className="font-medium px-2 py-0.5 rounded bg-surface-alt border border-base min-w-[3rem] text-center">
+            {selectedSlot !== null ? selectedSlot + 1 : "-"}
+          </span>
         </div>
-
+        {/* Referenz speichern */}
-        {/* ✅ Referenz setzen */}
         {selectedId !== null && (
           <button
             onClick={handleSetReference}
-            className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
+            type="button"
+            className="btn-primary h-8 px-3 font-medium"
           >
             TDR-Kurve als Referenz speichern
           </button>
         )}
-
+        {/* Start TDR */}
-        {/* 🚀 TDR starten */}
         <button
           onClick={handleStartTDR}
-          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
+          type="button"
           disabled={selectedSlot === null || tdrRunning}
+          className={`btn-primary h-8 px-4 whitespace-nowrap ${
+            tdrRunning ? "opacity-90" : ""
+          }`}
         >
           {tdrRunning
             ? `TDR läuft... (${Math.min(
@@ -194,27 +199,22 @@ const TDRChartActionBar: React.FC = () => {
               )}%)`
             : "TDR-Messung starten"}
         </button>
-
+        {/* Messung Dropdown */}
-        {/* 🔽 Dropdown für Messungen */}
+        <div className="ml-auto flex-1 min-w-[14rem] max-w-[30rem]">
-        <div className="flex items-center space-x-2">
           <Listbox
             value={selectedId}
             onChange={(id) => {
               setSelectedId(id);
-              if (id !== null) {
+              if (id !== null) dispatch(getTDRChartDataByIdThunk(id));
-                dispatch(getTDRChartDataByIdThunk(id));
-              }
             }}
             disabled={idsForSlot.length === 0}
           >
-            <div className="relative w-96">
+            <div className="relative w-full">
-              <Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+              <Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8 disabled:opacity-50 disabled:cursor-not-allowed">
-                <span className="whitespace-nowrap overflow-hidden text-ellipsis">
+                <span className="dropdown-text-fix whitespace-nowrap overflow-hidden text-ellipsis pr-2">
                   {selectedId
                     ? (() => {
-                        const selected = idsForSlot.find(
+                        const selected = idsForSlot.find((e) => e.id === selectedId);
-                          (e) => e.id === selectedId
-                        );
                         return selected
                           ? `${new Date(selected.t).toLocaleString("de-DE", {
                               day: "2-digit",
@@ -228,72 +228,59 @@ const TDRChartActionBar: React.FC = () => {
                       })()
                     : "Wähle Messung"}
                 </span>
-                <svg
+                <i className="bi bi-chevron-down text-sm opacity-70" />
-                  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">
+              <Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-72 overflow-auto text-sm bg-[var(--color-surface)] border border-base rounded-md shadow-lg p-1">
-                {idsForSlot.map((entry) => (
+                {idsForSlot.map((entry) => {
-                  <Listbox.Option
+                  const dateLabel = new Date(entry.t).toLocaleString("de-DE", {
-                    key={entry.id}
+                    day: "2-digit",
-                    value={entry.id}
+                    month: "2-digit",
-                    className={({ selected, active }) =>
+                    year: "numeric",
-                      `px-4 py-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis ${
+                    hour: "2-digit",
-                        selected
+                    minute: "2-digit",
-                          ? "bg-littwin-blue text-white"
+                    second: "2-digit",
-                          : active
+                  });
-                          ? "bg-gray-200"
+                  const fullText = `${dateLabel} – Fehlerstelle: ${entry.d} m`;
-                          : ""
+                  return (
-                      }`
+                    <Listbox.Option
-                    }
+                      key={entry.id}
-                  >
+                      value={entry.id}
-                    {new Date(entry.t).toLocaleString("de-DE", {
+                      title={fullText}
-                      day: "2-digit",
+                      className={({ selected, active }) => {
-                      month: "2-digit",
+                        const base = "px-3 h-8 cursor-pointer rounded-sm m-0.5 flex items-center justify-start transition-colors text-[13px]";
-                      year: "numeric",
+                        if (selected)
-                      hour: "2-digit",
+                          return `${base} dropdown-option-active font-medium`;
-                      minute: "2-digit",
+                        if (active)
-                      second: "2-digit",
+                          return `${base} dropdown-option-hover`;
-                    })}{" "}
+                        return `${base}`; // neutral text color comes from parent/theme
-                    – Fehlerstelle: {entry.d} m
+                      }}
-                  </Listbox.Option>
+                    >
-                ))}
+                      <span className="truncate w-full">{fullText}</span>
+                    </Listbox.Option>
+                  );
+                })}
               </Listbox.Options>
             </div>
           </Listbox>
         </div>
       </div>
       {tdrRunning && (
-        <div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
+        <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">
-            <p className="text-lg font-semibold">
+            <p className="text-lg font-semibold text-white">
               TDR Messung läuft... kann bis zu zwei Minuten dauern
             </p>
-            <p className="text-sm text-gray-700">
+            <p className="text-sm text-white/80">
-              Bitte warten…{" "}
+              Bitte warten… {Math.min(
-              {Math.min(
                 100,
                 Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
-              )}
+              )}%
-              %
             </p>
           </div>
-          <div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
+          <div className="w-2/3 max-w-xl h-3 bg-white/20 rounded overflow-hidden shadow-inner">
             <div
-              className="h-full bg-littwin-blue transition-all ease-linear"
+              className="h-full bg-accent transition-all ease-linear"
-              style={{
+              style={{ width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%` }}
-                width: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%`,
-              }}
             />
           </div>
         </div>

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

@@ -4,29 +4,20 @@ import React, { useEffect } from "react";
 import ReactModal from "react-modal";
 import TDRChart from "./TDRChart";
 import { useSelector, useDispatch } from "react-redux";
-import { AppDispatch } from "@/redux/store";
+import { AppDispatch, RootState } from "@/redux/store";
-import { RootState } from "@/redux/store";
 import {
   setChartOpen,
   setFullScreen,
   setSlotNumber,
-} from "@/redux/slices/kabelueberwachungChartSlice";
-
-import { resetBrushRange } from "@/redux/slices/brushSlice";
-
-import {
   setVonDatum,
   setBisDatum,
   setSelectedMode,
   setSelectedSlotType,
+  setChartTitle,
 } from "@/redux/slices/kabelueberwachungChartSlice";
-
+import { resetBrushRange } from "@/redux/slices/brushSlice";
-import {
+import { setSelectedSlot, setActiveMode } from "@/redux/slices/kueChartModeSlice";
-  setSelectedSlot,
-  setActiveMode,
-} from "@/redux/slices/kueChartModeSlice";
 import { Listbox } from "@headlessui/react";
-import { setChartTitle } from "@/redux/slices/kabelueberwachungChartSlice";
 import Report from "../IsoMeasurementChart/Report";
 
 interface TDRChartViewProps {
@@ -35,70 +26,48 @@ interface TDRChartViewProps {
   slotIndex: number;
 }
 
-const TDRChartView: React.FC<TDRChartViewProps> = ({
+const TDRChartView: React.FC<TDRChartViewProps> = ({ isOpen, onClose, slotIndex }) => {
-  isOpen,
-  onClose,
-  slotIndex,
-}) => {
   const dispatch = useDispatch<AppDispatch>();
+  const { isFullScreen, chartTitle } = useSelector((s: RootState) => s.kabelueberwachungChartSlice);
 
-  const { isFullScreen, chartTitle } = useSelector(
+  // Initialize defaults when opening
-    (state: RootState) => state.kabelueberwachungChartSlice
-  );
-
-  // **Modal öffnen - TDR spezifische Einstellungen**
   useEffect(() => {
-    if (isOpen) {
+    if (!isOpen) return;
-      const today = new Date();
-      const thirtyDaysAgo = new Date();
-      thirtyDaysAgo.setDate(today.getDate() - 30);
-
-      const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
-
-      // Set TDR mode and slot
-      dispatch(setActiveMode("TDR"));
-      dispatch(setSelectedSlot(slotIndex));
-
-      // Also set slot number for general chart slice
-      dispatch(setSlotNumber(slotIndex));
-
-      // Set dates
-      dispatch(setVonDatum(toISO(thirtyDaysAgo)));
-      dispatch(setBisDatum(toISO(today)));
-
-      // TDR specific settings (if needed)
-      dispatch(setSelectedSlotType("isolationswiderstand"));
-    }
-  }, [isOpen, slotIndex, dispatch]);
-
-  // **Modal schließen + Redux-Status zurücksetzen**
-  const handleClose = () => {
     const today = new Date();
     const thirtyDaysAgo = new Date();
     thirtyDaysAgo.setDate(today.getDate() - 30);
-
     const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
 
-    // Reset Datum
+    dispatch(setActiveMode("TDR"));
+    dispatch(setSelectedSlot(slotIndex));
+    dispatch(setSlotNumber(slotIndex));
+
     dispatch(setVonDatum(toISO(thirtyDaysAgo)));
     dispatch(setBisDatum(toISO(today)));
 
-    // Reset Dropdowns
+    if (chartTitle !== "Messkurve" && chartTitle !== "Meldungen") {
+      dispatch(setChartTitle("Messkurve"));
+    }
+    // Only run when opened or slot changes or chartTitle invalid
+  }, [isOpen, slotIndex, chartTitle, dispatch]);
+
+  const handleClose = () => {
+    // Reset generic chart slice to DIA1 isolationswiderstand defaults (same pattern as other modals)
+    const today = new Date();
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+    const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
+    dispatch(setVonDatum(toISO(thirtyDaysAgo)));
+    dispatch(setBisDatum(toISO(today)));
     dispatch(setSelectedMode("DIA1"));
     dispatch(setSelectedSlotType("isolationswiderstand"));
-
-    // Sonstiges Reset
     dispatch(setChartOpen(false));
     dispatch(setFullScreen(false));
     dispatch(resetBrushRange());
-
     onClose();
   };
 
-  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => dispatch(setFullScreen(!isFullScreen));
-  const toggleFullScreen = () => {
-    dispatch(setFullScreen(!isFullScreen));
-  };
 
   return (
     <ReactModal
@@ -106,77 +75,53 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
       onRequestClose={handleClose}
       ariaHideApp={false}
       style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        overlay: {
+          backgroundColor: "rgba(0,0,0,0.55)",
+          backdropFilter: "blur(2px)",
+        },
         content: {
-          top: "50%",
+          inset: "50% auto auto 50%",
-          left: "50%",
-          bottom: "auto",
-          marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "90vw" : "70rem",
+          width: isFullScreen ? "90vw" : "72rem",
-          height: isFullScreen ? "90vh" : "35rem",
+          height: isFullScreen ? "90vh" : "38rem",
-          padding: "1rem",
+          padding: 0,
-          transition: "all 0.3s ease-in-out",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-surface)",
+          borderRadius: "14px",
           display: "flex",
           flexDirection: "column",
+          overflow: "hidden",
         },
       }}
+      contentLabel="TDR Messung"
     >
-      {/* Action-Buttons */}
+      <header className="modal-header relative pr-56">
-      <div
+        <h3 className="text-sm font-semibold tracking-wide">TDR-Messung</h3>
-        style={{
+        <div className="absolute top-2 right-2 flex gap-2">
-          position: "absolute",
+          <button
-          top: "0.625rem",
+            onClick={toggleFullScreen}
-          right: "0.625rem",
+            className="icon-btn"
-          display: "flex",
+            aria-label={isFullScreen ? "Vollbild verlassen" : "Vollbild"}
-          gap: "0.75rem",
+            type="button"
-        }}
+          >
-      >
+            <i
-        {/* Fullscreen-Button */}
+              className={
-        <button
+                isFullScreen
-          onClick={toggleFullScreen}
+                  ? "bi bi-fullscreen-exit"
-          style={{
+                  : "bi bi-arrows-fullscreen"
-            background: "transparent",
+              }
-            border: "none",
+            />
-            fontSize: "1.5rem",
+          </button>
-            cursor: "pointer",
+          <button
-          }}
+            onClick={handleClose}
-        >
+            className="icon-btn"
-          <i
+            aria-label="Schließen"
-            className={
+            type="button"
-              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+          >
-            }
+            <i className="bi bi-x-lg" />
-          ></i>
+          </button>
-        </button>
+        </div>
-
+        <div className="absolute top-2 right-28">
-        {/* Schließen-Button */}
-        <button
-          onClick={handleClose}
-          style={{
-            background: "transparent",
-            border: "none",
-            fontSize: "1.5rem",
-            cursor: "pointer",
-          }}
-        >
-          <i className="bi bi-x-circle-fill"></i>
-        </button>
-      </div>
-
-      {/* Chart-Container */}
-      <div
-        style={{
-          flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-        }}
-      >
-        <div className="flex justify-between items-center mb-2 pr-24">
-          <h3 className="text-lg font-semibold">
-            {chartTitle === "Messkurve" ? "TDR-Messung" : "Meldungen"}
-          </h3>
-          {/* Dropdown Messkurve / Meldungen */}
           <Listbox
             value={chartTitle}
             onChange={(value: "Messkurve" | "Meldungen") =>
@@ -184,31 +129,21 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
             }
           >
             <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">
+              <Listbox.Button className="dropdown-surface w-full flex items-center justify-between h-8">
-                <span>{chartTitle}</span>
+                <span className="dropdown-text-fix">{chartTitle}</span>
-                <svg
+                <i className="bi bi-chevron-down text-sm opacity-70" />
-                  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">
+              <Listbox.Options className="dropdown-options absolute z-50 mt-1 w-full max-h-60 overflow-auto text-sm">
                 {(["Messkurve", "Meldungen"] as const).map((option) => (
                   <Listbox.Option
                     key={option}
                     value={option}
                     className={({ selected, active }) =>
-                      `px-4 py-1 cursor-pointer ${
+                      `px-3 py-1.5 cursor-pointer rounded-sm m-0.5 ${
                         selected
-                          ? "bg-littwin-blue text-white"
+                          ? "dropdown-option-active"
                           : active
-                          ? "bg-gray-200"
+                          ? "dropdown-option-hover"
                           : ""
                       }`
                     }
@@ -220,8 +155,9 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
             </div>
           </Listbox>
         </div>
-        {/* Chart oder Meldungen */}
+      </header>
-        <div style={{ flex: 1, height: "90%" }}>
+      <div className="flex flex-col flex-1 p-3 gap-3">
+        <div className="flex-1 relative">
           {chartTitle === "Messkurve" ? (
             <TDRChart isFullScreen={isFullScreen} />
           ) : (

package-lock.json

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

package.json

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