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

feat: 1und 0 in Status in dashboard

Browse Source
This commit is contained in:
ISA
2025-06-30 14:59:29 +02:00
parent 971368045f
commit 268ed73cdd
6 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/main/dashboard/Last20MessagesTable.tsx
View File

@@ -1,5 +1,4 @@
"use client";
// @/components/main/dashboard/Last20MessagesTable.tsx
import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
@@ -14,27 +13,28 @@ type Meldung = {
i: string;
v: string;
};
export default function Last20MessagesTable() {
type Props = {
className?: string;
};
export default function Last20MessagesTable({ className }: Props) {
const dispatch = useDispatch<AppDispatch>();
type RootState = {
messages: {
data: Meldung[];
};
// add other slices if needed
};
const { data: messages } = useSelector((state: RootState) => state.messages);
const [sourceFilter, setSourceFilter] = useState<string>("Alle");
const [sourceFilter] = useState<string>("Alle");
// Datum initialisieren: von = heute - 30 Tage, bis = heute
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));
const [fromDate] = useState<string>(formatDate(prior30));
const [toDate] = useState<string>(formatDate(today));
useEffect(() => {
dispatch(getMessagesThunk({ fromDate, toDate }));
@@ -46,11 +46,7 @@ export default function Last20MessagesTable() {
: messages.filter((m: Meldung) => m.i === sourceFilter);
return (
<div className="flex flex-col gap-3 p-4 w-full max-w-full h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<h1 className="text-xl font-bold mb-4"></h1>
<div className="flex flex-wrap gap-6 mb-6 items-end"></div>
<div className={`flex flex-col gap-3 p-4 ${className}`}>
<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">
@@ -63,22 +59,20 @@ export default function Last20MessagesTable() {
</tr>
</thead>
<tbody>
{filteredMessages
.slice(0, 20)
.map((msg: Meldung, index: number) => (
<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> {/* NEU */}
</tr>
))}
{filteredMessages.slice(0, 20).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 && (