style: Auswahlfarbe im DatePicker auf littwin-blue angepasst für konsistentes UI

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

@@ -1,3 +1,4 @@
+// /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
 import React, { useEffect } from "react";
 import DatePicker from "react-datepicker";
 import { useSelector, useDispatch } from "react-redux";

components/main/meldungen/DateRangePickerMeldungen.tsx

@@ -0,0 +1,59 @@
+// /components/main/meldungen/DateRangePickerMeldungen.tsx
+import React from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+type Props = {
+  fromDate: string;
+  toDate: string;
+  setFromDate: (val: string) => void;
+  setToDate: (val: string) => void;
+};
+
+const parseISO = (iso: string) => {
+  const [y, m, d] = iso.split("-").map(Number);
+  return new Date(y, m - 1, d);
+};
+
+const formatDate = (d: Date) => d.toLocaleDateString("sv-SE"); // YYYY-MM-DD
+
+const DateRangePickerMeldungen: React.FC<Props> = ({
+  fromDate,
+  toDate,
+  setFromDate,
+  setToDate,
+}) => {
+  return (
+    <div className="flex space-x-4 items-center">
+      <div className="flex items-center space-x-2">
+        <label className="text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={parseISO(fromDate)}
+          onChange={(date) => date && setFromDate(formatDate(date))}
+          selectsStart
+          startDate={parseISO(fromDate)}
+          endDate={parseISO(toDate)}
+          maxDate={new Date()}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <label className="text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={parseISO(toDate)}
+          onChange={(date) => date && setToDate(formatDate(date))}
+          selectsEnd
+          startDate={parseISO(fromDate)}
+          endDate={parseISO(toDate)}
+          maxDate={new Date()}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePickerMeldungen;

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.386";
+const webVersion = "1.6.387";
 export default webVersion;

package-lock.json

@@ -35,6 +35,7 @@
         "react-chartjs-2": "^5.3.0",
         "react-date-picker": "^11.0.0",
         "react-datepicker": "^8.0.0",
+        "react-day-picker": "^9.6.7",
         "react-dom": "^18.3.1",
         "react-modal": "^3.16.1",
         "react-redux": "^9.1.2",
@@ -686,6 +687,11 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
@@ -3579,6 +3585,11 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -7294,6 +7305,26 @@
         "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.6.7",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.6.7.tgz",
+      "integrity": "sha512-rCSt6X8FXQWpjykns/azRXjJk3cMSzkzGbDEXuEveFGNZgOjZULdJQ5wsu8Zfyo8ZgPBoYCBKQ5wRrgJfhJGbg==",
+      "dependencies": {
+        "@date-fns/tz": "1.2.0",
+        "date-fns": "4.1.0",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

package.json

@@ -40,6 +40,7 @@
     "react-chartjs-2": "^5.3.0",
     "react-date-picker": "^11.0.0",
     "react-datepicker": "^8.0.0",
+    "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
     "react-modal": "^3.16.1",
     "react-redux": "^9.1.2",

pages/meldungen.tsx

@@ -1,6 +1,7 @@
 "use client";
 // /pages/meldungen.tsx
 import React, { useState } from "react";
+import DateRangePickerMeldungen from "../components/main/meldungen/DateRangePickerMeldungen";
 
 type Meldung = {
   t: string;
@@ -47,15 +48,11 @@ export default function Messages() {
     try {
       const res = await fetch(url);
       const raw = await res.json();
-      console.log("URL:", url);
-      console.log("Daten vom Server:", raw);
-
       const data = Array.isArray(raw) ? raw : raw.data;
       if (!Array.isArray(data)) {
         console.error("Die empfangenen Daten sind kein Array:", data);
         return;
       }
-
       setMessages(data);
       setCurrentPage(1);
     } catch (err) {
@@ -73,28 +70,16 @@ export default function Messages() {
     <div className="p-4">
       <h1 className="text-xl font-bold mb-4">Berichte</h1>
 
-      <div className="flex flex-wrap gap-4 mb-4 items-end">
+      <div className="flex flex-wrap gap-6 mb-6 items-end">
-        <div>
+        <DateRangePickerMeldungen
-          <label className="block text-sm font-medium mb-1">Von Datum</label>
+          fromDate={fromDate}
-          <input
+          toDate={toDate}
-            type="date"
+          setFromDate={setFromDate}
-            value={fromDate}
+          setToDate={setToDate}
-            onChange={(e) => setFromDate(e.target.value)}
+        />
-            className="border px-2 py-1 rounded"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium mb-1">Bis Datum</label>
-          <input
-            type="date"
-            value={toDate}
-            onChange={(e) => setToDate(e.target.value)}
-            className="border px-2 py-1 rounded"
-          />
-        </div>
         <button
           onClick={fetchMessages}
-          className="bg-littwin-blue text-white px-4 py-2 rounded "
+          className="bg-littwin-blue text-white px-4 py-2 rounded h-fit"
         >
           Anzeigen
         </button>
@@ -139,7 +124,7 @@ export default function Messages() {
         <button
           onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
           disabled={currentPage === 1}
-          className="bg-littwin-blue text-white px-4 py-2 rounded "
+          className="bg-littwin-blue text-white px-4 py-2 rounded"
         >
           Zurück
         </button>
@@ -151,7 +136,7 @@ export default function Messages() {
             setCurrentPage((prev) => Math.min(prev + 1, totalPages))
           }
           disabled={currentPage === totalPages}
-          className="bg-littwin-blue text-white px-4 py-2 rounded "
+          className="bg-littwin-blue text-white px-4 py-2 rounded"
         >
           Weiter
         </button>

styles/globals.css

@@ -43,3 +43,17 @@ body {
     border: 1px solid #ccc; /* Optional: heller Rahmen */
   }
 }
+
+.react-datepicker__day--selected,
+.react-datepicker__day--keyboard-selected {
+  background-color: var(--littwin-blue) !important;
+  color: white !important;
+}
+
+.react-datepicker__day--selected:hover {
+  background-color: #0095cc !important; /* dunklere Version von Littwin-Blau */
+}
+
+.react-datepicker__day--today {
+  border: 1px solid var(--littwin-blue);
+}