refactor: Seitenkomponenten ausgelagert in View-Komponenten

- meldungen.tsx → MeldungenView.tsx erstellt
  → beinhaltet Filterleiste, Tabellenansicht und Datenabruf
- system.tsx → SystemView.tsx ausgelagert
  → verbessert Lesbarkeit und Trennung von Routing und Inhalt
- View-Suffix verwendet für klare Struktur (Page = Entry, View = Inhalt)

components/main/reports/MeldungenTabelle.tsx

@@ -0,0 +1,51 @@
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+  v: string;
+};
+
+export default function MeldungenTabelle({
+  messages,
+}: {
+  messages: Meldung[];
+}) {
+  return (
+    <div className="overflow-auto max-h-[80vh]">
+      <table className="min-w-full border">
+        <thead className="bg-gray-100 text-left sticky top-0 z-10">
+          <tr>
+            <th className="p-2 border">Prio</th>
+            <th className="p-2 border">Zeitstempel</th>
+            <th className="p-2 border">Quelle</th>
+            <th className="p-2 border">Meldung</th>
+            <th className="p-2 border">Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {messages.map((msg, index) => (
+            <tr key={index} className="hover:bg-gray-50">
+              <td className="border p-2">
+                <div
+                  className="w-4 h-4 rounded"
+                  style={{ backgroundColor: msg.c }}
+                ></div>
+              </td>
+              <td className="border p-2">{msg.t}</td>
+              <td className="border p-2">{msg.i}</td>
+              <td className="border p-2">{msg.m}</td>
+              <td className="border p-2">{msg.v}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {messages.length === 0 && (
+        <div className="mt-4 text-center text-gray-500 italic">
+          Keine Meldungen im gewählten Zeitraum vorhanden.
+        </div>
+      )}
+    </div>
+  );
+}

components/main/reports/MeldungenView.tsx

@@ -0,0 +1,81 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
+import type { AppDispatch } from "@/redux/store";
+import type { RootState } from "@/redux/store";
+import DateRangePickerMeldungen from "./DateRangePickerMeldungen";
+import MeldungenTabelle from "./MeldungenTabelle";
+
+type Meldung = {
+  t: string;
+  s: number;
+  c: string;
+  m: string;
+  i: string;
+  v: string;
+};
+
+export default function MeldungenView() {
+  const dispatch = useDispatch<AppDispatch>();
+  const messages = useSelector((state: RootState) => state.messages.data);
+
+  const [sourceFilter, setSourceFilter] = useState("Alle");
+
+  const today = new Date();
+  const prior30 = new Date();
+  prior30.setDate(today.getDate() - 30);
+
+  const formatDate = (d: Date) => d.toISOString().split("T")[0];
+
+  const [fromDate, setFromDate] = useState<string>(formatDate(prior30));
+  const [toDate, setToDate] = useState<string>(formatDate(today));
+
+  useEffect(() => {
+    dispatch(getMessagesThunk({ fromDate, toDate }));
+  }, [dispatch, fromDate, toDate]);
+
+  const filteredMessages =
+    sourceFilter === "Alle"
+      ? messages
+      : messages.filter((m: Meldung) => m.i === sourceFilter);
+
+  const allSources = Array.from(
+    new Set(messages.map((m: Meldung) => m.i))
+  ).sort();
+
+  return (
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
+      <h1 className="text-xl font-bold mb-4">Berichte</h1>
+
+      <div className="flex flex-wrap gap-6 mb-6 items-end">
+        <DateRangePickerMeldungen
+          fromDate={fromDate}
+          toDate={toDate}
+          setFromDate={setFromDate}
+          setToDate={setToDate}
+        />
+        <button
+          onClick={() => dispatch(getMessagesThunk({ fromDate, toDate }))}
+          className="bg-littwin-blue text-white px-4 py-2 rounded h-fit"
+        >
+          Anzeigen
+        </button>
+        <select
+          value={sourceFilter}
+          onChange={(e) => setSourceFilter(e.target.value)}
+          className="border px-4 py-3 rounded h-fit ml-6"
+        >
+          <option value="Alle">Alle Quellen</option>
+          {allSources.map((src) => (
+            <option key={String(src)} value={String(src)}>
+              {String(src)}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <MeldungenTabelle messages={filteredMessages} />
+    </div>
+  );
+}

components/main/system/SystemOverviewGrid.tsx

@@ -20,9 +20,9 @@ export const SystemOverviewGrid = ({ voltages, onOpenDetail }: Props) => {
               {formatValue(value)} {unit}
               <button
                 onClick={() => onOpenDetail(key)}
-                className="ml-2 text-blue-600 hover:underline text-sm"
+                className="ml-2 text-littwin-blue hover:underline text-sm"
               >
-                Details
+                Detailansicht
               </button>
             </p>
           </div>

components/main/system/SystemView.tsx

@@ -0,0 +1,78 @@
+// components/main/system/system.tsx
+"use client";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "@/redux/store";
+import { getSystemVoltTempThunk } from "@/redux/thunks/getSystemVoltTempThunk";
+import { SystemOverviewGrid } from "@/components/main/system/SystemOverviewGrid";
+import { SystemCharts } from "@/components/main/system/SystemCharts";
+import { DetailModal } from "@/components/main/system/DetailModal";
+import type { HistoryEntry } from "@/components/main/system/SystemCharts";
+import { getSystemspannung5VplusThunk } from "@/redux/thunks/getSystemspannung5VplusThunk";
+import { getSystemspannung15VplusThunk } from "@/redux/thunks/getSystemspannung15VplusThunk";
+import { getSystemspannung15VminusThunk } from "@/redux/thunks/getSystemspannung15VminusThunk";
+import { getSystemspannung98VminusThunk } from "@/redux/thunks/getSystemspannung98VminusThunk";
+import { getTemperaturAdWandlerThunk } from "@/redux/thunks/getTemperaturAdWandlerThunk";
+import { getTemperaturProzessorThunk } from "@/redux/thunks/getTemperaturProzessorThunk";
+
+const SystemPage = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const voltages = useSelector(
+    (state: RootState) => state.systemVoltTemp.voltages
+  );
+
+  const history = useSelector(
+    (state: RootState) => state.systemVoltTemp.history
+  ) as HistoryEntry[];
+
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [zeitraum, setZeitraum] = useState<"DIA0" | "DIA1" | "DIA2">("DIA1");
+
+  useEffect(() => {
+    dispatch(getSystemVoltTempThunk());
+
+    const interval = setInterval(() => {
+      dispatch(getSystemVoltTempThunk());
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [dispatch]);
+
+  useEffect(() => {
+    dispatch(getSystemspannung5VplusThunk(zeitraum));
+    dispatch(getSystemspannung15VplusThunk(zeitraum));
+    dispatch(getSystemspannung15VminusThunk(zeitraum));
+    dispatch(getSystemspannung98VminusThunk(zeitraum));
+    dispatch(getTemperaturAdWandlerThunk(zeitraum));
+    dispatch(getTemperaturProzessorThunk(zeitraum));
+  }, [dispatch, zeitraum]);
+
+  const handleOpenDetail = (key: string) => {
+    setSelectedKey(key);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseDetail = () => {
+    setSelectedKey(null);
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="p-4">
+      <h1 className="text-xl font-bold mb-4">
+        System Spannungen & Temperaturen
+      </h1>
+      <SystemOverviewGrid voltages={voltages} onOpenDetail={handleOpenDetail} />
+      <SystemCharts history={history} zeitraum={zeitraum} />
+      <DetailModal
+        isOpen={isModalOpen}
+        selectedKey={selectedKey}
+        onClose={handleCloseDetail}
+        zeitraum={zeitraum}
+        setZeitraum={setZeitraum}
+      />
+    </div>
+  );
+};
+
+export default SystemPage;