some Fixes, see #45

apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx

@@ -5,10 +5,12 @@ import { useEffect, useRef, useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { getStationsAPI } from "_querys/stations";
 import toast from "react-hot-toast";
-import { editConnectedAircraftAPI } from "_querys/aircrafts";
+import { editConnectedAircraftAPI, getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { Prisma } from "@repo/db";
-import { debug } from "console";
 import { getNextDateWithTime } from "@repo/shared-components";
+import { Select } from "_components/Select";
+import { components } from "react-select";
+import { Radio } from "lucide-react";
 
 export const ConnectionBtn = () => {
 	const modalRef = useRef<HTMLDialogElement>(null);
@@ -56,6 +58,11 @@ export const ConnectionBtn = () => {
 
 	const [logoffHours, logoffMinutes] = form.logoffTime?.split(":").map(Number) || [];
 
+	const { data: connectedAircrafts } = useQuery({
+		queryKey: ["aircrafts"],
+		queryFn: () => getConnectedAircraftsAPI(),
+	});
+
 	useEffect(() => {
 		if (!logoffHours || !logoffMinutes || !connection.connectedAircraft) return;
 
@@ -126,27 +133,35 @@ export const ConnectionBtn = () => {
 						<h3 className="text-lg font-bold mb-5">Als Pilot anmelden</h3>
 					)}
 					{connection.status !== "connected" && (
-						<fieldset className="fieldset w-full">
-							<label className="floating-label w-full text-base">
-								<span>Station</span>
-								<select
-									onChange={(e) =>
-										setForm({
-											...form,
-											selectedStationId: parseInt(e.target.value),
-										})
-									}
-									value={form.selectedStationId ?? ""}
-									className="input w-full"
-								>
-									{stations?.map((station) => (
-										<option key={station.id} value={station.id}>
-											{station.bosCallsign}
-										</option>
-									))}
-								</select>
-							</label>
-						</fieldset>
+						<div className="w-full">
+							<Select
+								placeholder="Wähle eine Station"
+								onChange={(v) =>
+									setForm({
+										...form,
+										selectedStationId: parseInt(v),
+									})
+								}
+								value={form.selectedStationId ?? ""}
+								formatOptionLabel={(option: any) => option.component}
+								options={
+									stations?.map((station) => ({
+										value: station.id.toString(),
+										label: station.bosCallsign,
+										component: (
+											<div>
+												<span className="flex items-center gap-2">
+													{connectedAircrafts?.find((a) => a.stationId == station.id) && (
+														<Radio className="text-warning" size={15} />
+													)}
+													{station.bosCallsign}
+												</span>
+											</div>
+										),
+									})) ?? []
+								}
+							/>
+						</div>
 					)}
 					<fieldset className="fieldset w-full mt-2">
 						<label className="floating-label w-full text-base">