Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Berichte light und dark mode

Browse Source
This commit is contained in:
ISA
2025-08-18 16:03:57 +02:00
parent 6756bbf0f8
commit 7e41e5131f
9 changed files with 48 additions and 7790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/main/reports/MeldungenTabelle.tsx
View File

@@ -15,25 +15,38 @@ export default function MeldungenTabelle({
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">
<thead className="bg-white text-gray-900 dark:bg-gray-900 dark:text-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>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Prio
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Zeitstempel
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Quelle
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Meldung
</th>
<th className="p-2 border bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Status
</th>
</tr>
</thead>
<tbody>
{messages.map((msg, index) => (
<tr key={index} className="hover:bg-gray-200">
<td className="border p-2">
<tr
key={index}
className="hover:bg-gray-100 dark:hover:bg-gray-700"
>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: msg.c }}
></div>
</td>
<td className="border p-2">
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{new Date(msg.t).toLocaleString("de-DE", {
day: "2-digit",
month: "2-digit",
@@ -43,10 +56,15 @@ export default function MeldungenTabelle({
second: "2-digit",
})}
</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>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.i}
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.m}
</td>
<td className="border p-2 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
{msg.v}
</td>
</tr>
))}
</tbody>

12
components/main/reports/MeldungenView.tsx
View File

@@ -67,7 +67,7 @@ export default function MeldungenView() {
<Listbox value={sourceFilter} onChange={setSourceFilter}>
<div className="relative ml-6 w-64">
<Listbox.Button className="w-full border px-4 py-2 rounded text-left bg-white flex justify-between items-center">
<Listbox.Button className="bg-white text-gray-900 w-full border px-4 py-2 rounded text-left flex justify-between items-center dark:bg-gray-900 dark:text-gray-100">
<span>{sourceFilter}</span>
<svg
className="w-5 h-5 text-gray-400"
@@ -83,17 +83,19 @@ export default function MeldungenView() {
/>
</svg>
</Listbox.Button>
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto">
<Listbox.Options className="bg-white absolute z-50 mt-1 w-full border rounded dark:bg-gray-900">
{sources.map((src) => (
<Listbox.Option
key={src}
value={src}
className={({ selected, active }) =>
`px-4 py-2 cursor-pointer ${
className={({ selected, active, disabled }) =>
`px-4 py-2 cursor-pointer text-gray-900 dark:text-gray-100 ${
selected
? "bg-littwin-blue text-white"
: active
? "bg-blue-100"
? "bg-blue-100 dark:bg-gray-700 dark:text-white"
: disabled
? "opacity-50 text-gray-400 dark:text-gray-500 cursor-not-allowed"
: ""
}`
}