From 1599226f530118ac9b29716bdffc001e67d740e0 Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Mon, 2 Jun 2025 21:36:02 +0200
Subject: [PATCH] Update Tracker Connections UI

---
 .../_components/ConnectedDispatcher.tsx       | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx b/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
index 2295dee2..d23a9f88 100644
--- a/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
+++ b/apps/dispatch/app/tracker/_components/ConnectedDispatcher.tsx
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Badge } from "_components/Badge/Badge";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { getConnectedDispatcherAPI } from "_querys/connected-user";
+import { Plane, Workflow } from "lucide-react";
 
 export const ConnectedDispatcher = () => {
 	const { data: dispatcher } = useQuery({
@@ -21,18 +22,23 @@ export const ConnectedDispatcher = () => {
 			<div className="collapse collapse-arrow bg-base-100 border-base-300 border">
 				<input type="checkbox" />
 				{/* <div className="collapse-title font-semibold">Kein Disponent Online</div> */}
-				<div className="collapse-title font-semibold">
-					{(aircrafts?.length || 0) + (dispatcher?.length || 0)} Verbundene Mitglieder
+				<div className="collapse-title font-semibold flex items-center justify-between">
+					<span>{(aircrafts?.length || 0) + (dispatcher?.length || 0)} Verbundene Mitglieder</span>
+					<div className="gap-2 flex items-center">
+						<div
+							className={`badge badge-outline ${
+								(dispatcher?.length || 0) > 0 ? "badge-success" : "badge-error"
+							}`}
+						>
+							<Workflow size={14} /> {dispatcher?.length || 0}
+						</div>
+						<div className="badge badge-outline badge-primary">
+							<Plane size={14} /> {aircrafts?.length || 0}
+						</div>
+					</div>
 				</div>
 				<div className="collapse-content">
 					<ul className="list bg-base-100 rounded-box shadow-md">
-						<li className="text-xs opacity-60 tracking-wide">
-							Disponenten: {dispatcher?.length || 0}
-						</li>
-						<li className="pb-2 text-xs opacity-60 tracking-wide">
-							Piloten: {aircrafts?.length || 0}
-						</li>
-
 						{dispatcher?.map((d) => {
 							return (
 								<li className="list-row" key={d.id}>