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>
+  );
+}