ebe72c3ab0
- 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)
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|