feat(ui): Slot-Nummer nach links verschoben und Datumsauswahl horizontal ausgerichtet

- Slot-Nr.-Anzeige nach links im ActionBar verschoben.
- Datum-Labels („Von“ & „Bis“) und Eingabefelder horizontal ausgerichtet.
- Verbesserte UI/UX der Chart-Steuerungskomponenten.

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

@@ -8,9 +8,20 @@ import {
 } from "../../../../../redux/slices/kabelueberwachungChartSlice";
 import "react-datepicker/dist/react-datepicker.css";
 
-const DateRangePicker: React.FC = () => {
-  const dispatch = useDispatch();
+// ✅ 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
   );
@@ -19,37 +30,40 @@ const DateRangePicker: React.FC = () => {
   );
 
   return (
-    <div className="flex space-x-4">
-      <div>
+    <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) {
-              dispatch(setVonDatum(date.toISOString().split("T")[0]));
+              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>
+      <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) {
-              dispatch(setBisDatum(date.toISOString().split("T")[0]));
+              setBisDatum(date);
             }
           }}
           selectsEnd
           startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
           endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
-          minDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          minDate={new Date(minDate)}
+          maxDate={new Date(maxDate)}
           dateFormat="dd.MM.yyyy"
           className="border px-2 py-1 rounded"
         />