feat: CustomTooltip in eigene Komponente ausgelagert

- CustomTooltip in `CustomTooltip.tsx` ausgelagert für bessere Code-Struktur
- `LoopMeasurementChart.tsx` angepasst und `CustomTooltip` importiert
- Verbesserung der Wiederverwendbarkeit und Lesbarkeit des Codes

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

@@ -0,0 +1,75 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
+import {
+  setVonDatum,
+  setBisDatum,
+} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+import "react-datepicker/dist/react-datepicker.css";
+
+// ✅ Props definieren
+interface DateRangePickerProps {
+  setVonDatum: (date: Date) => void;
+  setBisDatum: (date: Date) => void;
+  minDate: string;
+  maxDate: string;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  setVonDatum,
+  setBisDatum,
+  minDate,
+  maxDate,
+}) => {
+  const reduxVonDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.vonDatum
+  );
+  const reduxBisDatum = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.bisDatum
+  );
+
+  return (
+    <div className="flex space-x-4 items-center">
+      <div className="flex items-center space-x-2">
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          onChange={(date) => {
+            if (date) {
+              setVonDatum(date);
+            }
+          }}
+          selectsStart
+          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          minDate={new Date(minDate)}
+          maxDate={new Date(maxDate)}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          onChange={(date) => {
+            if (date) {
+              setBisDatum(date);
+            }
+          }}
+          selectsEnd
+          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          minDate={new Date(minDate)}
+          maxDate={new Date(maxDate)}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;