Penalty Nachricht im Admin form, abgelaufen für Timebans in tabelle werden Farblich dargestellt

apps/hub/app/(app)/admin/penalty/columns.tsx

@@ -30,12 +30,17 @@ export const penaltyColumns: ColumnDef<Penalty & { Report: Report; CreatedUser:
 						new Date(row.original.until || Date.now()),
 						{ locale: de },
 					);
+					const isExpired = new Date(row.original.until || Date.now()) < new Date();
 					return (
 						<div
-							className={cn("text-warning flex gap-3", row.original.suspended && "text-gray-400")}
+							className={cn(
+								"text-warning flex gap-3",
+								(row.original.suspended || isExpired) && "text-gray-400",
+							)}
 						>
 							<Timer />
-							Zeit Sperre ({length}) {row.original.suspended && "(ausgesetzt)"}
+							Zeit Sperre ({length}) {row.original.suspended && "(ausgesetzt)"}{" "}
+							{isExpired && !row.original.suspended && "(abgelaufen)"}
 						</div>
 					);
 				}
@@ -78,14 +83,14 @@ export const penaltyColumns: ColumnDef<Penalty & { Report: Report; CreatedUser:
 				<div className="flex gap-2">
 					<Link href={`/admin/penalty/${row.original.id}`}>
 						<button className="btn btn-sm btn-outline btn-info flex items-center gap-2">
-							<Shield className="w-4 h-4" />
+							<Shield className="h-4 w-4" />
 							Anzeigen
 						</button>
 					</Link>
 					{report && (
 						<Link href={`/admin/report/${report.id}`}>
 							<button className="btn btn-sm btn-outliney flex items-center gap-2">
-								<TriangleAlert className="w-4 h-4" />
+								<TriangleAlert className="h-4 w-4" />
 								Report Anzeigen
 							</button>
 						</Link>

apps/hub/app/(app)/admin/penalty/page.tsx

@@ -10,6 +10,12 @@ export default function ReportPage() {
 				CreatedUser: true,
 				Report: true,
 			}}
+			initialOrderBy={[
+				{
+					id: "timestamp",
+					desc: true,
+				},
+			]}
 			columns={penaltyColumns}
 		/>
 	);