feat: MUI test

.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.879
+NEXT_PUBLIC_APP_VERSION=1.6.880
 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.879
+NEXT_PUBLIC_APP_VERSION=1.6.880
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.880] – 2025-09-09
+
+- style: dark mode Modal KÜ Einstellungen
+
+---
 ## [1.6.879] – 2025-09-08
 
 - WIP: dark mode Modale

components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartActionBar.tsx

@@ -41,7 +41,6 @@ export const useIsoChartLoader = () => {
       )};${formatDate(bisDatum)};${slotNumber};${type};`;
     }
 
-    console.log("API URL:", url);
     return url;
   };
 
@@ -143,19 +142,10 @@ export const useIsoDataLoader = () => {
       const waitTime = Math.max(0, MIN_LOADING_TIME_MS - elapsedTime);
       await new Promise((resolve) => setTimeout(resolve, waitTime));
 
-      console.log("▶️ Automatisches Laden - Isolationswiderstand-Daten für:");
-      console.log("  Slot:", slotNumber);
-      console.log("  Modus:", selectedMode);
-      console.log("  Von:", vonDatum);
-      console.log("  Bis:", bisDatum);
-
       if (Array.isArray(jsonData) && jsonData.length > 0) {
         dispatch(setIsoMeasurementCurveChartData(jsonData));
         dispatch(setChartOpen(true));
       } else {
-        console.log(
-          "⚠️ Keine Messdaten im gewählten Zeitraum gefunden (automatisches Laden)"
-        );
         dispatch(setIsoMeasurementCurveChartData([]));
         dispatch(setChartOpen(false));
       }
@@ -170,8 +160,6 @@ export const useIsoDataLoader = () => {
 };
 
 //-----------------------------------------------------------------------------------IsoChartActionBar
-// ...existing code...
-
 const IsoChartActionBar = forwardRef((_props, ref) => {
   IsoChartActionBar.displayName = "IsoChartActionBar";
   const dispatch = useAppDispatch();
@@ -281,33 +269,36 @@ const IsoChartActionBar = forwardRef((_props, ref) => {
     }
   };
 
-  useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({ handleFetchData }));
-    handleFetchData,
+
-  }));
+  const hiddenWhenMeldungen = chartTitle !== "Messkurve";
 
   return (
-    <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-2">
+    <div className="toolbar w-full justify-between flex-wrap">
-      <div className="flex items-center">
+      <div className="flex items-center gap-2 pr-4">
-        <label className="text-sm font-semibold">
+        <span className=" font-semibold uppercase tracking-wide text-muted">
-          KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
+          KÜ
-        </label>
+        </span>
+        <span className=" font-medium px-2 py-0.5 rounded bg-surface-alt border border-base min-w-[3rem] text-center">
+          {slotNumber !== null ? slotNumber + 1 : "-"}
+        </span>
       </div>
-
+      <div className="flex items-center gap-2 flex-1 justify-end">
-      <div className="flex items-center space-x-2">
-        {/* DateRangePicker – für beide Ansichten sichtbar, da Meldungen auch datumsabhängig sind */}
         <div
-          style={{
+          className={
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+            hiddenWhenMeldungen
-          }}
+              ? "opacity-0 pointer-events-none"
+              : "opacity-100"
+          }
         >
           <DateRangePicker />
         </div>
-
-        {/* DIA0-DIA2 Dropdown - Platz reservieren, aber ausblenden wenn Meldungen */}
         <div
-          style={{
+          className={`transition-opacity ${
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
+            hiddenWhenMeldungen
-          }}
+              ? "opacity-0 pointer-events-none"
+              : "opacity-100"
+          }`}
         >
           <Listbox
             value={selectedMode}
@@ -317,39 +308,29 @@ const IsoChartActionBar = 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"
                           : ""
                       }`
                     }
@@ -357,9 +338,9 @@ const IsoChartActionBar = forwardRef((_props, ref) => {
                     {
                       {
                         DIA0: "Alle Messwerte",
-                        DIA1: "Stündliche Werte",
+                        DIA1: "Stündlich",
-                        DIA2: "Tägliche Werte",
+                        DIA2: "Täglich",
-                      }[mode]
+                      }[mode as "DIA0" | "DIA1" | "DIA2"]
                     }
                   </Listbox.Option>
                 ))}
@@ -367,17 +348,12 @@ const IsoChartActionBar = forwardRef((_props, ref) => {
             </div>
           </Listbox>
         </div>
-
-        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" - immer anzeigen */}
-        {/* Dropdown für Auswahl zwischen "Messkurve" und "Meldungen" entfernt */}
-
-        {/* Daten laden Button – lädt je nach Ansicht Messkurve oder Meldungen */}
         <button
-          style={{
-            visibility: chartTitle === "Messkurve" ? "visible" : "hidden",
-          }}
           onClick={handleFetchData}
-          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+          className={`btn-primary h-8  font-medium px-3 ${
+            hiddenWhenMeldungen ? "invisible" : "visible"
+          }`}
+          type="button"
         >
           Daten laden
         </button>

components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/IsoChartView.tsx

@@ -1,4 +1,4 @@
-"use client"; // IsoChartView.tsx
+"use client";
 
 import React, { useEffect, useRef } from "react";
 import { Listbox } from "@headlessui/react";
@@ -7,23 +7,18 @@ import IsoMeasurementChart from "./IsoMeasurementChart";
 import IsoChartActionBar from "./IsoChartActionBar";
 import Report from "./Report";
 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,
   setChartTitle,
-} from "@/redux/slices/kabelueberwachungChartSlice";
-
-import { resetBrushRange } from "@/redux/slices/brushSlice";
-
-import {
   setVonDatum,
   setBisDatum,
   setSelectedMode,
   setSelectedSlotType,
 } from "@/redux/slices/kabelueberwachungChartSlice";
+import { resetBrushRange } from "@/redux/slices/brushSlice";
 import { resetDateRange } from "@/redux/slices/dateRangePickerSlice";
 
 interface IsoChartViewProps {
@@ -32,85 +27,59 @@ interface IsoChartViewProps {
   slotIndex: number;
 }
 
+type ActionBarRefType = { handleFetchData: () => void };
+
 const IsoChartView: React.FC<IsoChartViewProps> = ({
   isOpen,
   onClose,
   slotIndex,
 }) => {
   const dispatch = useDispatch<AppDispatch>();
-  // removed unused loadData
-
   const { isFullScreen, chartTitle } = useSelector(
     (state: RootState) => state.kabelueberwachungChartSlice
   );
 
-  // **Modal schließen + Redux-Status zurücksetzen**
+  const actionBarRef = useRef<ActionBarRefType>(null);
-  const handleClose = () => {
+
+  const initDates = () => {
     const today = new Date();
     const thirtyDaysAgo = new Date();
     thirtyDaysAgo.setDate(today.getDate() - 30);
-
+    const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
-    const toISO = (date: Date) => date.toLocaleDateString("sv-SE");
-
-    // Reset Datum
     dispatch(setVonDatum(toISO(thirtyDaysAgo)));
     dispatch(setBisDatum(toISO(today)));
+  };
 
-    // Reset DateRangePicker
+  const handleClose = () => {
+    initDates();
     dispatch(resetDateRange());
-
+    dispatch(setSelectedMode("DIA0"));
-    // Reset Dropdowns
-    dispatch(setSelectedMode("DIA0")); // Reset to Alle Messwerte
     dispatch(setSelectedSlotType("isolationswiderstand"));
-    dispatch(setChartTitle("Messkurve")); // Reset zu Messkurve
+    dispatch(setChartTitle("Messkurve"));
-
-    // 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 - ISO spezifische Einstellungen
-  type ActionBarRefType = { handleFetchData: () => void };
-  const actionBarRef = useRef<ActionBarRefType>(null);
   useEffect(() => {
     if (isOpen) {
+      dispatch(setSlotNumber(slotIndex));
+      // inline initDates to avoid extra dependency
       const today = new Date();
       const thirtyDaysAgo = new Date();
       thirtyDaysAgo.setDate(today.getDate() - 30);
-
+      const toISO = (d: Date) => d.toLocaleDateString("sv-SE");
-      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 ISO specific settings
       dispatch(setSelectedSlotType("isolationswiderstand"));
-      dispatch(setSelectedMode("DIA0")); // Set to Alle Messwerte on open
+      dispatch(setSelectedMode("DIA0"));
-
-      // Set default to Messkurve
       dispatch(setChartTitle("Messkurve"));
-
+      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-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, slotIndex, dispatch]);
 
   return (
@@ -119,74 +88,55 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
       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="Isolationswiderstand"
     >
-      {/* Action-Buttons */}
+      <header className="modal-header relative pr-56">
-      <div
+        <h3 className="text-sm font-semibold tracking-wide">
-        style={{
+          Isolationswiderstand
-          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">Isolationswiderstand</h3>
           <Listbox
             value={chartTitle}
             onChange={(value: "Messkurve" | "Meldungen") =>
@@ -194,52 +144,36 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
             }
           >
             <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>
+                <span className="dropdown-text-fix">{chartTitle}</span>
-                  {chartTitle === "Meldungen" ? "Meldungen" : "Messkurve"}
+                <i className="bi bi-chevron-down text-sm opacity-70" />
-                </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">
+              <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"
                           : ""
                       }`
                     }
                   >
-                    {option === "Meldungen" ? "Meldungen" : "Messkurve"}
+                    {option}
                   </Listbox.Option>
                 ))}
               </Listbox.Options>
             </div>
           </Listbox>
         </div>
+      </header>
+      <div className="flex flex-col flex-1 p-3 gap-3">
         <IsoChartActionBar ref={actionBarRef} />
-        <div style={{ flex: 1, height: "90%" }}>
+        <div className="flex-1 relative">
           {chartTitle === "Messkurve" ? (
             <IsoMeasurementChart />
           ) : (

components/main/kabelueberwachung/kue705FO/Charts/IsoMeasurementChart/Report.tsx

@@ -224,43 +224,47 @@ const Report: React.FC<ReportProps> = ({ moduleType, autoLoad = true }) => {
           gewählten Zeitraum gefunden.
         </div>
       ) : (
-        <div className="flex-1 overflow-auto ">
+        <div className="flex-1 overflow-auto table-scroll-region">
-          <table className="min-w-full border text-sm">
+          <div className="data-table-wrapper">
-            <thead className="bg-gray-100 text-left sticky top-0 z-10">
+            <table className="data-table">
-              <tr>
+              <thead>
-                <th className="p-2 border">Prio</th>
+                <tr>
-                <th className="p-2 border">Zeitstempel</th>
+                  <th style={{ width: "60px" }}>Prio</th>
-                <th className="p-2 border">Quelle</th>
+                  <th style={{ minWidth: "180px" }}>Zeitstempel</th>
-                <th className="p-2 border">Meldung</th>
+                  <th style={{ minWidth: "140px" }}>Quelle</th>
-                <th className="p-2 border">Status</th>
+                  <th style={{ minWidth: "260px" }}>Meldung</th>
-              </tr>
+                  <th style={{ minWidth: "120px" }}>Status</th>
-            </thead>
-            <tbody>
-              {filteredMessages.map((msg, index) => (
-                <tr key={index} className="hover:bg-gray-200">
-                  <td className="border p-2">
-                    <div
-                      className="w-4 h-4 rounded"
-                      style={{ backgroundColor: msg.c }}
-                    ></div>
-                  </td>
-                  <td className="border p-2">
-                    {new Date(msg.t).toLocaleString("de-DE", {
-                      day: "2-digit",
-                      month: "2-digit",
-                      year: "numeric",
-                      hour: "2-digit",
-                      minute: "2-digit",
-                      second: "2-digit",
-                    })}
-                  </td>
-                  <td className="border p-2">{msg.i}</td>
-                  <td className="border p-2">{msg.m}</td>
-                  <td className="border p-2">{msg.v}</td>
                 </tr>
-              ))}
+              </thead>
-            </tbody>
+              <tbody>
-          </table>
+                {filteredMessages.map((msg, index) => (
+                  <tr key={index}>
+                    <td>
+                      <div
+                        className="prio-dot"
+                        style={{ backgroundColor: msg.c }}
+                      />
+                    </td>
+                    <td>
+                      {new Date(msg.t).toLocaleString("de-DE", {
+                        day: "2-digit",
+                        month: "2-digit",
+                        year: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        second: "2-digit",
+                      })}
+                    </td>
+                    <td>{msg.i}</td>
+                    <td className="truncate max-w-[22ch]" title={msg.m}>
+                      {msg.m}
+                    </td>
+                    <td>{msg.v}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
 

components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx

@@ -41,68 +41,71 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
       window.kabelModalOpen = showModal;
     }
   }, [showModal]);
-  //-----------------------------------------------------
 
-  //------------------------------------------------------
   return (
     <ReactModal
       isOpen={showModal}
       onRequestClose={onClose}
+      shouldCloseOnOverlayClick
       ariaHideApp={false}
       style={{
         overlay: {
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          backgroundColor: "rgba(0,0,0,0.55)",
           zIndex: 100,
+          backdropFilter: "blur(2px)",
         },
         content: {
-          top: "50%",
+          inset: "50% auto auto 50%",
-          left: "50%",
           transform: "translate(-50%, -50%)",
-          width: "90%",
+          width: "min(900px,92vw)",
-          maxWidth: "850px",
+          maxHeight: "80vh",
-          padding: "0px",
+          padding: 0,
-          border: "none",
+          border: "1px solid var(--color-border)",
-          borderRadius: "8px",
+          background: "var(--color-surface)",
-          position: "relative",
+          borderRadius: "12px",
-          bottom: "auto",
+          overflow: "hidden",
-          right: "auto",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
+      contentLabel={`Einstellungen KÜ ${slot + 1}`}
     >
-      <div className="p-2 flex justify-between items-center rounded-t-md bg-surface-alt border-b border-base">
+      <div className="modal-header">
-        <h2 className="text-base font-bold text-fg">
+        <h2 className="text-sm font-semibold tracking-wide text-fg">
           Einstellungen KÜ {slot + 1}
         </h2>
         <button
           onClick={onClose}
-          className="text-2xl text-fg-muted hover:text-fg transition-colors focus:outline-none focus:ring-2 focus:ring-accent/50 rounded"
+          className="icon-btn"
           aria-label="Modal schließen"
+          type="button"
         >
-          <i className="bi bi-x-circle-fill"></i>
+          <i className="bi bi-x-lg text-base" />
         </button>
       </div>
 
-      <div className="flex justify-start bg-surface-alt space-x-2 p-2 border-b border-base">
+      <div className="flex justify-start bg-surface-alt px-3 pt-2 gap-2 border-b border-base">
         {[
           { label: "Allgemein", key: "kue" as const },
-          { label: "TDR ", key: "tdr" as const },
+          { label: "TDR", key: "tdr" as const },
           { label: "KVz", key: "kvz" as const },
           { label: "Knotenpunkte", key: "knoten" as const },
-        ].map(({ label, key }) => (
+        ].map(({ label, key }) => {
-          <button
+          const isActive = activeTab === key;
-            key={key}
+          return (
-            onClick={() => setActiveTab(key)}
+            <button
-            className={`px-4 py-1 rounded-t font-semibold text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-accent/40 ${
+              key={key}
-              activeTab === key
+              type="button"
-                ? "bg-surface text-accent shadow-sm"
+              onClick={() => setActiveTab(key)}
-                : "text-fg-muted hover:text-fg"
+              className={`tab-btn ${isActive ? "tab-btn-active" : ""}`}
-            }`}
+              aria-current={isActive ? "page" : undefined}
-          >
+            >
-            {label}
+              {label}
-          </button>
+            </button>
-        ))}
+          );
+        })}
       </div>
-      <div className="p-4 bg-surface rounded-b-md h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] overflow-y-auto text-fg">
+      <div className="modal-body-scroll px-5 py-4 flex-1 h-[20rem] laptop:h-[24rem] 2xl:h-[30rem] text-fg">
         {activeTab === "kue" && (
           <KueEinstellung
             slot={slot}

docs/TODO.md

@@ -87,8 +87,7 @@ in Rot, wenn Schleifenfehler ansteht
 - [x] TODO: RSL starten in RSL Messung starten umbenennen
 - [x] TODO: TDR-Messung starten statt TDR aktivieren in ChartBar
 - [x] TODO: KÜ TDR-aktiviert alert entfernen
-- [ ] TODO: Systemdaten unter Detailansicht ein Verlaufsdiagramm hinzufügen mit Datumsauswahl
+- [x] TODO: Systemdaten unter Detailansicht ein Verlaufsdiagramm hinzufügen mit Datumsauswahl
-- [ ] TODO: Playwright testen mit der Entwicklung
 
 # Kai Schmidt:
 
@@ -98,10 +97,22 @@ in Rot, wenn Schleifenfehler ansteht
 
 [x] TODO: Formatierung der Kabelüberwachungswerten in den visuellen Einschüben (Isowert mit Komma und 2 Nachkommastellen; RSL mit Komma und 3 Noachkommastellen) Nachkommastellen immer anzeigen und mit Nullen auffüllen.
 
-[ ] TODO: Admin User nach einer Zeit von einer Stunde löschen (Cookie oder Local Storrage)
+[x] TODO: lange Modulnamen bei KÜ ermöglichen (48 Zeichen) bei Version ab V4.30. Laufschrift möglich?
 
-[ ] TODO: lange Modulnamen bei KÜ ermöglichen (48 Zeichen) bei Version ab V4.30. Laufschrift möglich?
+# ------------------------------------------
+
+# 08.09.2025
+
+[x] TODO: Beim Ausführen einer TDR-Messung (Klick auf blauen Button in der TDR-Detailseite) erscheint keine Rückmeldung. Dort müsste ein Hinweis erscheinen “TDR-Messung wird ausgeführt und kann bis zu zwei Minuten dauern”
+
+## 09.09.2025
+
+[x] TODO: Admin User nach einer Zeit von einer Stunde löschen (Cookie oder Local Storrage)
 
 [ ] TODO: Darkmode ermöglichen
 
 [ ] TODO: Wenn im Browser Darkmode eingschaltet ist muss die Webseite erkennbar sein.
+
+[ ] TODO: KÜ TDR-aktiviert alert entfernen
+
+[ ] TODO: Playwright testen mit der Entwicklung

package-lock.json

@@ -1,13 +1,15 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.879",
+  "version": "1.6.880",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.879",
+      "version": "1.6.880",
       "dependencies": {
+        "@emotion/react": "^11.13.0",
+        "@emotion/styled": "^11.13.0",
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",
         "@iconify-icons/ri": "^1.2.10",
@@ -15,6 +17,7 @@
         "@iconify/icons-mdi": "^1.2.48",
         "@iconify/json": "^2.2.253",
         "@iconify/react": "^5.0.2",
+        "@mui/material": "^6.0.0",
         "@reduxjs/toolkit": "^2.3.0",
         "autoprefixer": "^10.4.20",
         "bcryptjs": "^2.4.3",
@@ -112,7 +115,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
       "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
@@ -174,7 +176,6 @@
       "version": "7.27.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
       "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.27.5",
         "@babel/types": "^7.27.3",
@@ -215,7 +216,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
       "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "dev": true,
       "dependencies": {
         "@babel/traverse": "^7.27.1",
         "@babel/types": "^7.27.1"
@@ -254,7 +254,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -263,7 +262,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
       "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -294,7 +292,6 @@
       "version": "7.27.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
       "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.27.3"
       },
@@ -539,7 +536,6 @@
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
       "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/parser": "^7.27.2",
@@ -553,7 +549,6 @@
       "version": "7.27.4",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
       "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.27.3",
@@ -571,7 +566,6 @@
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
       "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
         "@babel/helper-validator-identifier": "^7.27.1"
@@ -644,6 +638,167 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -1374,7 +1529,6 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1388,7 +1542,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1397,7 +1550,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1405,14 +1557,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
-      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1423,6 +1573,222 @@
       "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.5.0.tgz",
+      "integrity": "sha512-LGb8t8i6M2ZtS3Drn3GbTI1DVhDY6FJ9crEey2lZ0aN2EMZo8IZBZj9wRf4vqbZHaWjsYgtbOnJw5V8UWbmK2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.5.0.tgz",
+      "integrity": "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.5.0",
+        "@mui/system": "^6.5.0",
+        "@mui/types": "~7.2.24",
+        "@mui/utils": "^6.4.9",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^6.5.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "license": "MIT"
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.9.tgz",
+      "integrity": "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/utils": "^6.4.9",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.5.0.tgz",
+      "integrity": "sha512-8woC2zAqF4qUDSPIBZ8v3sakj+WgweolpyM/FXf8jAx6FMls+IE4Y8VDZc+zS805J7PRz31vz73n2SovKGaYgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.5.0.tgz",
+      "integrity": "sha512-XcbBYxDS+h/lgsoGe78ExXFZXtuIlSBpn/KsZq8PtZcIkUNJInkuDqcLd2rVBQrDC1u+rvVovdaWPf2FHKJf3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.4.9",
+        "@mui/styled-engine": "^6.5.0",
+        "@mui/types": "~7.2.24",
+        "@mui/utils": "^6.4.9",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.24",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
+      "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz",
+      "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/types": "~7.2.24",
+        "@types/prop-types": "^15.7.14",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.11.tgz",
@@ -1681,6 +2047,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-aria/focus": {
       "version": "3.20.5",
       "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.5.tgz",
@@ -2236,17 +2612,21 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="
-      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.23",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
       "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
-      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2270,6 +2650,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/redux-mock-store": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@types/redux-mock-store/-/redux-mock-store-1.5.0.tgz",
@@ -3347,6 +3736,21 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
@@ -3574,7 +3978,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3825,6 +4228,31 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -4143,7 +4571,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -4418,7 +4845,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -4600,6 +5026,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/escodegen": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
@@ -5007,18 +5445,6 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/eslint/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint/node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -5359,6 +5785,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -5514,7 +5946,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5689,7 +6120,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -5826,7 +6256,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -5834,6 +6263,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -5945,7 +6389,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -5961,7 +6404,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -6062,8 +6504,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
-      "dev": true
     },
     "node_modules/is-async-function": {
       "version": "2.1.1",
@@ -6152,7 +6593,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -7652,7 +8092,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -7669,8 +8108,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-      "dev": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -7832,8 +8270,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-      "dev": true
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
@@ -8578,7 +9015,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -8590,7 +9026,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -8646,8 +9081,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-      "dev": true
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
@@ -8671,6 +9105,15 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
@@ -9456,7 +9899,6 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
@@ -10190,6 +10632,12 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -10281,7 +10729,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.879",
+  "version": "1.6.880",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",
@@ -71,7 +71,10 @@
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.6",
     "recharts": "^2.15.1",
-    "redux": "^5.0.1"
+    "redux": "^5.0.1",
+    "@mui/material": "^6.0.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.54.2",

pages/_app.tsx

@@ -13,7 +13,6 @@ import Footer from "@/components/footer/Footer";
 import { store } from "@/redux/store";
 import Script from "next/script";
 import DeviceEventsBridge from "@/components/common/DeviceEventsBridge";
-import { usePathname } from "next/navigation";
 
 // Thunks importieren
 import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
@@ -39,22 +38,33 @@ if (typeof window !== "undefined") {
 }
 
 import "@/styles/globals.css";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { muiTheme, buildTheme } from "@/styles/muiTheme";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  // Rebuild theme on client if dark mode toggles (simple example)
+  const [theme, setTheme] = useState(muiTheme);
+  useEffect(() => {
+    const observer = new MutationObserver(() => setTheme(buildTheme()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
   return (
     <Provider store={store}>
-      {/* Load global data: dev -> API mock JS; prod -> real device JS from public */}
+      <ThemeProvider theme={theme}>
-      {process.env.NODE_ENV === "development" ? (
+        <CssBaseline />
-        <Script
+        {process.env.NODE_ENV === "development" ? (
-          src="/api/cpl/kabelueberwachungAPIHandler"
+          <Script
-          strategy="afterInteractive"
+            src="/api/cpl/kabelueberwachungAPIHandler"
-        />
+            strategy="afterInteractive"
-      ) : (
+          />
-        <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
+        ) : (
-      )}
+          <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
-      <AppContent Component={Component} pageProps={pageProps} />
+        )}
-      {/* Bridge window events -> Redux (works across all pages) */}
+        <AppContent Component={Component} pageProps={pageProps} />
-      <DeviceEventsBridge />
+        <DeviceEventsBridge />
+      </ThemeProvider>
     </Provider>
   );
 }
@@ -67,7 +77,6 @@ function AppContent({
   pageProps: AppProps["pageProps"];
 }): JSX.Element {
   const dispatch = useAppDispatch();
-  const pathnameHook = usePathname();
   const [sessionExpired] = useState(false);
   const mode = "DIA0"; // oder aus Router oder Session
   const type = 0; // Beispiel: 0 für "loop", 1 für "iso" (bitte ggf. anpassen)

styles/globals.css

@@ -72,6 +72,15 @@ body {
   .text-balance {
     text-wrap: balance;
   }
+  /* Generic focus ring */
+  .focus-ring {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .focus-ring:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
   /* Semantic shortcut utilities */
   .bg-background {
     background-color: var(--color-background);
@@ -229,6 +238,207 @@ body {
     opacity: 0.6;
     cursor: not-allowed;
   }
+
+  /* Icon button (used in modals/toolbars) */
+  .icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    color: var(--color-fg-muted);
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+  .icon-btn:hover {
+    background: var(--color-surface-alt);
+    color: var(--color-fg);
+  }
+  .icon-btn:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  /* Toolbar container */
+  .toolbar {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    background: var(--color-surface-alt);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  /* Tab buttons (settings modal, etc.) */
+  .tab-btn {
+    position: relative;
+    font-weight: 600;
+    font-size: 0.75rem; /* text-xs */
+    padding: 0.375rem 0.875rem;
+    border-radius: 0.375rem 0.375rem 0 0;
+    transition: color 0.15s ease, background-color 0.15s ease;
+  }
+  .tab-btn-active {
+    background: var(--color-surface);
+    color: var(--color-accent);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
+  .tab-btn:not(.tab-btn-active) {
+    color: var(--color-fg-muted);
+  }
+  .tab-btn:not(.tab-btn-active):hover {
+    color: var(--color-fg);
+  }
+
+  /* Modal panel base */
+  .modal-panel {
+    background: var(--color-surface);
+    color: var(--color-fg);
+    border: 1px solid var(--color-border);
+    border-radius: 0.75rem;
+    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.35),
+      0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 0.875rem;
+    background: var(--color-surface-alt);
+    border-bottom: 1px solid var(--color-border);
+    border-radius: 0.75rem 0.75rem 0 0;
+  }
+  .modal-footer {
+    padding: 0.75rem 1rem;
+    background: var(--color-surface-alt);
+    border-top: 1px solid var(--color-border);
+    border-radius: 0 0 0.75rem 0.75rem;
+  }
+  .modal-body-scroll {
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .modal-body-scroll::-webkit-scrollbar {
+    width: 8px;
+  }
+  .modal-body-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .modal-body-scroll::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 4px;
+  }
+  .modal-body-scroll::-webkit-scrollbar-thumb:hover {
+    background: var(--color-fg-muted);
+  }
+
+  /* Dropdown (Listbox) styling helpers */
+  .dropdown-surface {
+    background: var(--color-surface);
+    color: var(--color-fg);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8125rem;
+  }
+  .dropdown-options {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  }
+  .dropdown-option-active {
+    background: var(--color-accent);
+    color: #fff;
+  }
+  .dropdown-option-hover:not(.dropdown-option-active) {
+    background: var(--color-surface-alt);
+  }
+  /* Data table helpers */
+  .data-table-wrapper {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+    background: var(--color-surface-alt);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.5rem 0.75rem;
+  }
+  .data-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.75rem; /* text-xs */
+  }
+  .data-table th,
+  .data-table td {
+    padding: 0.4rem 0.6rem;
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    vertical-align: middle;
+  }
+  .data-table th:last-child,
+  .data-table td:last-child {
+    border-right: none;
+  }
+  .data-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    background: var(--color-surface-alt);
+    font-weight: 600;
+    font-size: 0.72rem; /* improved readability */
+    color: var(--color-fg-muted);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    letter-spacing: 0.5px;
+  }
+  .data-table tbody tr:hover {
+    background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
+  }
+  .data-table tbody tr:nth-child(even) {
+    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+  }
+  .data-table tbody tr:nth-child(even):hover {
+    background: color-mix(in srgb, var(--color-surface-alt) 85%, transparent);
+  }
+  .data-table tbody td {
+    font-size: 0.75rem;
+  }
+  .data-table thead th:first-child {
+    border-top-left-radius: 0.35rem;
+  }
+  .data-table thead th:last-child {
+    border-top-right-radius: 0.35rem;
+  }
+  .prio-dot {
+    width: 0.85rem;
+    height: 0.85rem;
+    border-radius: 0.25rem;
+    box-shadow: 0 0 0 1px var(--color-border);
+  }
+  .table-scroll-region {
+    scrollbar-width: thin;
+  }
+  .table-scroll-region::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+  }
+  .table-scroll-region::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .table-scroll-region::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 6px;
+  }
+  .table-scroll-region::-webkit-scrollbar-thumb:hover {
+    background: var(--color-fg-muted);
+  }
 }
 
 /* Form elements use tokens */

styles/muiTheme.ts

@@ -0,0 +1,50 @@
+import { createTheme } from '@mui/material/styles';
+
+// Map existing CSS variable tokens to MUI palette via getComputedStyle at runtime (for SSR fallback provide defaults)
+const cssVar = (name: string, fallback: string) => {
+  if (typeof window === 'undefined') return fallback;
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return v || fallback;
+};
+
+export const buildTheme = () => {
+  const mode: 'light' | 'dark' = (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) ? 'dark' : 'light';
+  const primaryMain = cssVar('--color-accent', '#00aeef');
+  const bgDefault = cssVar('--color-background', mode === 'dark' ? '#0f1115' : '#f1f5f9');
+  const bgPaper = cssVar('--color-surface', mode === 'dark' ? '#1c232d' : '#ffffff');
+  const textPrimary = cssVar('--color-fg', mode === 'dark' ? '#e2e8f0' : '#0f172a');
+  const textSecondary = cssVar('--color-fg-muted', mode === 'dark' ? '#94a3b8' : '#475569');
+
+  return createTheme({
+    palette: {
+      mode,
+      primary: { main: primaryMain },
+      background: { default: bgDefault, paper: bgPaper },
+      text: { primary: textPrimary, secondary: textSecondary },
+      divider: cssVar('--color-border', mode === 'dark' ? '#334155' : '#e2e8f0'),
+    },
+    shape: { borderRadius: 8 },
+    typography: {
+      fontFamily: 'Roboto, Arial, Helvetica, sans-serif',
+      button: { textTransform: 'none', fontWeight: 600 },
+      fontSize: 14,
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: { borderRadius: 8 },
+          containedPrimary: {
+            boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: { backgroundImage: 'none' }
+        }
+      }
+    }
+  });
+};
+
+export const muiTheme = buildTheme();