From ea21c8d141b22ea89d707c12a2f984b049d16b3b Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Thu, 5 Jun 2025 22:56:17 +0200
Subject: [PATCH] Fix some bugs #34

---
 .../_components/navbar/ModeSwitchDropdown.tsx | 29 ++++--
 .../pilot/_components/ConnectedDispatcher.tsx | 96 +++++++++++++++++++
 apps/dispatch/app/pilot/page.tsx              |  2 +
 pnpm-lock.yaml                                |  3 -
 4 files changed, 118 insertions(+), 12 deletions(-)
 create mode 100644 apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx

diff --git a/apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx b/apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx
index 2e89c7b6..3a323a6c 100644
--- a/apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx
+++ b/apps/dispatch/app/_components/navbar/ModeSwitchDropdown.tsx
@@ -1,30 +1,41 @@
 "use client";
 
-import { ArrowLeftRight, Plane, Workflow } from "lucide-react";
+import { ArrowLeftRight, Plane, Radar, Workflow } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 export default function ModeSwitchDropdown() {
 	const path = usePathname();
+	const session = useSession();
 
 	return (
 		<div className="dropdown z-[9999]">
 			<div tabIndex={0} role="button" className="btn m-1">
-				<ArrowLeftRight /> {path.includes("pilot") && "Pilot"}
+				<ArrowLeftRight size={22} /> {path.includes("pilot") && "Pilot"}
 				{path.includes("dispatch") && "Leitstelle"}
 			</div>
 			<ul
 				tabIndex={0}
 				className="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
 			>
+				{session.data?.user.permissions?.includes("DISPO") && (
+					<li>
+						<Link href={"/dispatch"}>
+							<Workflow size={22} /> Leitstelle
+						</Link>
+					</li>
+				)}
+				{session.data?.user.permissions?.includes("PILOT") && (
+					<li>
+						<Link href={"/pilot"}>
+							<Plane size={22} /> Pilot
+						</Link>
+					</li>
+				)}
 				<li>
-					<Link href={"/dispatch"}>
-						<Workflow /> Leitstelle
-					</Link>
-				</li>
-				<li>
-					<Link href={"/pilot"}>
-						<Plane /> Pilot
+					<Link href={"/tracker"}>
+						<Radar size={22} /> Tracker
 					</Link>
 				</li>
 			</ul>
diff --git a/apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx b/apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx
new file mode 100644
index 00000000..d81bf1b4
--- /dev/null
+++ b/apps/dispatch/app/pilot/_components/ConnectedDispatcher.tsx
@@ -0,0 +1,96 @@
+import { BADGES, PublicUser } from "@repo/db";
+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({
+		queryKey: ["dispatcher"],
+		queryFn: () => getConnectedDispatcherAPI(),
+		refetchInterval: 10000,
+	});
+	const { data: aircrafts } = useQuery({
+		queryKey: ["aircrafts"],
+		queryFn: () => getConnectedAircraftsAPI(),
+		refetchInterval: 10000,
+	});
+
+	const connections = (aircrafts?.length || 0) + (dispatcher?.length || 0);
+
+	return (
+		<div className="relative">
+			<div className="absolute top-5 right-10 min-w-120 z-99999">
+				<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 flex items-center justify-between">
+						<span>
+							{connections} {connections == 1 ? "Verbundenes Mitglied" : "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">
+						{!dispatcher?.length && (
+							<p className="text-center text-gray-500">Aktuell sind keine Disponenten verbunden</p>
+						)}
+						<ul className="list bg-base-100 rounded-box shadow-md">
+							{dispatcher?.map((d) => {
+								return (
+									<li className="list-row" key={d.id}>
+										<div className="w-[100px tabular-nums] flex flex-col items-center text-center">
+											<div className="tooltip tooltip-right" data-tip="Online seit">
+												<p>
+													{new Date(d.loginTime).toLocaleTimeString([], {
+														hour: "2-digit",
+														minute: "2-digit",
+													})}
+												</p>
+											</div>
+											{d.esimatedLogoutTime && (
+												<div
+													className="tooltip tooltip-right"
+													data-tip="Vorrausichtliche Abmeldung"
+												>
+													<p className="text-gray-500 font-thin ">
+														{new Date(d.esimatedLogoutTime).toLocaleTimeString([], {
+															hour: "2-digit",
+															minute: "2-digit",
+														})}
+													</p>
+												</div>
+											)}
+										</div>
+										<div>
+											<div>{(d.publicUser as unknown as PublicUser)?.firstname}</div>
+											<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 name={b as BADGES} className="h-8 w-12" />
+												))}
+										</div>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/dispatch/app/pilot/page.tsx b/apps/dispatch/app/pilot/page.tsx
index 20d8d35c..24b817e6 100644
--- a/apps/dispatch/app/pilot/page.tsx
+++ b/apps/dispatch/app/pilot/page.tsx
@@ -5,6 +5,7 @@ import { Chat } from "../_components/left/Chat";
 import { Report } from "../_components/left/Report";
 import { Dme } from "pilot/_components/dme/Dme";
 import dynamic from "next/dynamic";
+import { ConnectedDispatcher } from "./_components/ConnectedDispatcher";
 const Map = dynamic(() => import("../_components/map/Map"), {
 	ssr: false,
 });
@@ -22,6 +23,7 @@ const DispatchPage = () => {
 				</div>
 				<div className="flex w-2/3 h-full">
 					<Map />
+					<ConnectedDispatcher />
 				</div>
 				<div className="flex w-1/3 h-full">
 					<div className="flex flex-col w-full h-full p-4 bg-base-300">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f3926b44..f7bacd60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,9 +57,6 @@ importers:
       '@repo/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
-      '@types/cookie-parser':
-        specifier: ^1.4.8
-        version: 1.4.8(@types/express@5.0.2)
       '@types/cors':
         specifier: ^2.8.18
         version: 2.8.18