getNextHourTime zu shared library hinzugefügt

apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx

@@ -3,6 +3,8 @@ import { useQuery } from "@tanstack/react-query";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { getConnectedDispatcherAPI } from "_querys/dispatcher";
 import { Plane, Workflow } from "lucide-react";
+import { formatDistance } from "date-fns";
+import { de } from "date-fns/locale";
 import { Badge } from "@repo/shared-components";
 
 export const ConnectedDispatcher = () => {
@@ -59,7 +61,10 @@ export const ConnectedDispatcher = () => {
 											</p>
 										</div>
 										{d.esimatedLogoutTime && (
-											<div className="tooltip tooltip-right" data-tip="Vorrausichtliche Abmeldung">
+											<div
+												className="tooltip tooltip-right"
+												data-tip={`vorraussichtliche Abmeldung in ${formatDistance(new Date(), new Date(d.esimatedLogoutTime), { locale: de })}`}
+											>
 												<p className="text-gray-500 font-thin ">
 													{new Date(d.esimatedLogoutTime).toLocaleTimeString([], {
 														hour: "2-digit",
@@ -74,11 +79,15 @@ export const ConnectedDispatcher = () => {
 										<div className="text-xs uppercase font-semibold opacity-60">{d.zone}</div>
 									</div>
 									<div>
-										{(d.publicUser as unknown as PublicUser).badges
-											.filter((b) => b.startsWith("D"))
-											.map((b) => (
-												<Badge badge={b as BADGES} className="h-8 w-12" />
-											))}
+										{(() => {
+											const badges = (d.publicUser as unknown as PublicUser).badges
+												.filter((b) => b.startsWith("D") && b.length == 2)
+												.sort((a, b) => a.localeCompare(b));
+											const lastBadge = badges[badges.length - 1];
+											return lastBadge ? (
+												<Badge badge={lastBadge as BADGES} className="h-8 w-12" />
+											) : null;
+										})()}
 									</div>
 								</li>
 							);