feat: Zeitspanne-Funktion mit Von/Bis und Button-Trigger im DetailModal eingebaut

- Chart-Daten werden jetzt erst bei Klick auf „Daten laden“ geladen
- Von/Bis-Zeitauswahl über Redux-State korrekt eingebunden
- Styling der Eingabefelder und Dropdowns vereinheitlicht (eine Zeile)
- Lokalen State für Zeitspanne entfernt und durch Redux ersetzt

components/main/system/DetailModal.tsx

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "@/redux/store";
 import { Listbox } from "@headlessui/react";
 import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
+import DateRangePicker from "@/components/common/DateRangePicker";
 
 import {
   Chart as ChartJS,
@@ -121,6 +122,14 @@ export const DetailModal = ({
   const [chartData, setChartData] = useState<any>({
     datasets: [],
   });
+  const vonDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
+  );
+  const bisDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
+  );
+
+  const [filteredData, setFilteredData] = useState<ReduxDataEntry[]>([]);
 
   const reduxData = useSelector((state: RootState) => {
     switch (selectedKey) {
@@ -170,8 +179,19 @@ export const DetailModal = ({
     loadZoomPlugin();
   }, []);
 
-  useEffect(() => {
-    const sortedData = [...reduxData].reverse();
+  const handleFetchData = () => {
+    let sortedData = [...reduxData].reverse();
+
+    if (vonDatum && bisDatum) {
+      const vonDate = new Date(vonDatum);
+      const bisDate = new Date(bisDatum);
+      sortedData = sortedData.filter((entry) => {
+        const entryDate = new Date(entry.t);
+        return entryDate >= vonDate && entryDate <= bisDate;
+      });
+    }
+
+    setFilteredData(sortedData);
 
     setChartData({
       datasets: [
@@ -207,7 +227,7 @@ export const DetailModal = ({
         },
       ],
     });
-  }, [reduxData]);
+  };
 
   useEffect(() => {
     if (chartRef.current && selectedKey) {
@@ -259,7 +279,8 @@ export const DetailModal = ({
           </div>
         </div>
 
-        <div className="flex items-center space-x-2 mb-4">
+        <div className="flex items-center justify-start gap-4 mb-4 flex-wrap">
+          <DateRangePicker />
           <label className="font-medium">Zeitraum:</label>
           <Listbox value={zeitraum} onChange={setZeitraum}>
             <div className="relative w-48">
@@ -312,6 +333,12 @@ export const DetailModal = ({
               </Listbox.Options>
             </div>
           </Listbox>
+          <button
+            onClick={handleFetchData}
+            className="px-4 py-1 bg-littwin-blue text-white rounded text-sm"
+          >
+            Daten laden
+          </button>
         </div>
 
         <div className="h-[85%]">