feat: Datumsauswahl (von/bis) und Filter-Button für Meldungen hinzugefügt

- Von-Datum und Bis-Datum per DatePicker auswählbar
- Dynamischer URL-Aufbau für Produktions- und Entwicklungsumgebung
- Anzeige der gefilterten Meldungen direkt beim Klick auf „Anzeigen“
- Unterstützung für max. 500 Meldungen laut Lastenheft

pages/meldungen.tsx

@@ -16,19 +16,42 @@ const ITEMS_PER_PAGE = 10;
 export default function Messages() {
   const [messages, setMessages] = useState<Meldung[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
+  const [fromDate, setFromDate] = useState<string>(
+    () => new Date().toISOString().split("T")[0]
+  );
+  const [toDate, setToDate] = useState<string>(
+    () => new Date().toISOString().split("T")[0]
+  );
+
+  const fetchMessages = async () => {
+    const from = new Date(fromDate);
+    const to = new Date(toDate);
+
+    const fy = from.getFullYear();
+    const fm = String(from.getMonth() + 1).padStart(2, "0");
+    const fd = String(from.getDate()).padStart(2, "0");
+    const ty = to.getFullYear();
+    const tm = String(to.getMonth() + 1).padStart(2, "0");
+    const td = String(to.getDate()).padStart(2, "0");
+
+    const isDev =
+      typeof window !== "undefined" && window.location.hostname === "localhost";
+
+    const url = isDev
+      ? "/CPLmockData/meldungen/messages.json"
+      : `/CPL?Service/ae.ACP&MSS1=${fy};${fm};${fd};${ty};${tm};${td};All`;
+
+    try {
+      const res = await fetch(url);
+      const data = await res.json();
+      setMessages(data);
+      setCurrentPage(1);
+    } catch (err) {
+      console.error("Fehler beim Laden der Meldungen:", err);
+    }
+  };
 
   useEffect(() => {
-    const fetchMessages = async () => {
-      // https://10.10.0.222/CPL?Service/ae.ACP&MSS1=2025;01;01;2025;2;28;All
-      try {
-        const res = await fetch("/CPLmockData/meldungen/messages.json");
-        const data = await res.json();
-        setMessages(data);
-      } catch (err) {
-        console.error("Fehler beim Laden der Meldungen:", err);
-      }
-    };
-
     fetchMessages();
   }, []);
 
@@ -42,6 +65,33 @@ export default function Messages() {
     <div className="p-4">
       <h1 className="text-xl font-bold mb-4">Meldungen</h1>
 
+      <div className="flex flex-wrap gap-4 mb-4 items-end">
+        <div>
+          <label className="block text-sm font-medium mb-1">Von Datum</label>
+          <input
+            type="date"
+            value={fromDate}
+            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-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        >
+          Anzeigen
+        </button>
+      </div>
+
       <div className="overflow-x-auto">
         <table className="min-w-full border">
           <thead className="bg-gray-100 text-left">
@@ -72,7 +122,6 @@ export default function Messages() {
         </table>
       </div>
 
-      {/* Pagination */}
       <div className="flex justify-between items-center mt-4">
         <button
           onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}