some Fixes, see #45

apps/dispatch/app/(app)/dispatch/_components/pannel/MissionForm.tsx

@@ -296,6 +296,7 @@ export const MissionForm = () => {
 					<option value="primär">PRIMÄR</option>
 					<option value="sekundär">SEKUNDÄR</option>
 				</select>
+
 				{form.watch("type") === "primär" && (
 					<>
 						<select
@@ -321,74 +322,75 @@ export const MissionForm = () => {
 						{form.formState.errors.missionKeywordCategory && (
 							<p className="text-error text-sm mb-4">Bitte wähle eine Kategorie aus.</p>
 						)}
-						<select
-							{...form.register("missionKeywordAbbreviation")}
-							className="select select-primary select-bordered w-full mb-4"
-							onChange={(e) => {
-								const keyword = keywords?.find((k) => k.abreviation === e.target.value);
-								form.setValue("missionKeywordName", keyword?.name || (null as any));
-								form.setValue("missionKeywordAbbreviation", keyword?.abreviation || (null as any));
-								form.setValue("hpgMissionString", null);
-							}}
-							value={form.watch("missionKeywordAbbreviation") || "please_select"}
-						>
-							<option disabled value={"please_select"}>
-								Einsatzstichwort auswählen...
-							</option>
-							{keywords &&
-								keywords
-									.filter((k) => k.category === form.watch("missionKeywordCategory"))
-									.map((keyword) => (
-										<option key={keyword.id} value={keyword.abreviation}>
-											{keyword.name}
-										</option>
-									))}
-						</select>
-						{form.formState.errors.missionKeywordAbbreviation && (
-							<p className="text-error text-sm mb-4">Bitte wähle ein Stichwort aus.</p>
-						)}
-						<div className="mb-4">
-							<select
-								{...form.register("hpgMissionString")}
-								onChange={(e) => {
-									form.setValue("hpgMissionString", e.target.value);
-									const [name] = e.target.value.split(":");
-									const allHpgMissionTypes = keywords?.map((k) => k.hpgMissionTypes).flat();
-									const missionAdditionalInfo = form.watch("missionAdditionalInfo");
-									if (
-										!missionAdditionalInfo ||
-										allHpgMissionTypes?.find((t) => {
-											const [hpgName] = t.split(":");
-											return hpgName === missionAdditionalInfo;
-										})
-									) {
-										form.setValue("missionAdditionalInfo", name || "");
-									}
-								}}
-								className="select select-primary select-bordered w-full mb-2"
-								value={form.watch("hpgMissionString") || "please_select"}
-							>
-								<option disabled value="please_select">
-									Einsatz Szenario auswählen...
-								</option>
-								{keywords &&
-									keywords
-										.find((k) => k.name === form.watch("missionKeywordName"))
-										?.hpgMissionTypes?.map((missionString) => {
-											const [name] = missionString.split(":");
-											return (
-												<option key={missionString} value={missionString}>
-													{name}
-												</option>
-											);
-										})}
-							</select>
-							{validationRequired && (
-								<p className="text-sm text-warning">Szenario wird vor Alarmierung HPG-Validiert.</p>
-							)}
-						</div>
 					</>
 				)}
+				<select
+					{...form.register("missionKeywordAbbreviation")}
+					className="select select-primary select-bordered w-full mb-4"
+					onChange={(e) => {
+						const keyword = keywords?.find((k) => k.abreviation === e.target.value);
+						form.setValue("missionKeywordName", keyword?.name || (null as any));
+						form.setValue("missionKeywordAbbreviation", keyword?.abreviation || (null as any));
+						form.setValue("hpgMissionString", null);
+					}}
+					value={form.watch("missionKeywordAbbreviation") || "please_select"}
+				>
+					<option disabled value={"please_select"}>
+						Einsatzstichwort auswählen...
+					</option>
+					{keywords &&
+						keywords
+							.filter((k) => k.category === form.watch("missionKeywordCategory"))
+							.map((keyword) => (
+								<option key={keyword.id} value={keyword.abreviation}>
+									{keyword.name}
+								</option>
+							))}
+				</select>
+				{form.formState.errors.missionKeywordAbbreviation && (
+					<p className="text-error text-sm mb-4">Bitte wähle ein Stichwort aus.</p>
+				)}
+				<div className="mb-4">
+					<select
+						{...form.register("hpgMissionString")}
+						onChange={(e) => {
+							form.setValue("hpgMissionString", e.target.value);
+							const [name] = e.target.value.split(":");
+							const allHpgMissionTypes = keywords?.map((k) => k.hpgMissionTypes).flat();
+							const missionAdditionalInfo = form.watch("missionAdditionalInfo");
+							if (
+								!missionAdditionalInfo ||
+								allHpgMissionTypes?.find((t) => {
+									const [hpgName] = t.split(":");
+									return hpgName === missionAdditionalInfo;
+								})
+							) {
+								form.setValue("missionAdditionalInfo", name || "");
+							}
+						}}
+						className="select select-primary select-bordered w-full mb-2"
+						value={form.watch("hpgMissionString") || "please_select"}
+					>
+						<option disabled value="please_select">
+							Einsatz Szenario auswählen...
+						</option>
+						{keywords &&
+							keywords
+								.find((k) => k.name === form.watch("missionKeywordName"))
+								?.hpgMissionTypes?.map((missionString) => {
+									const [name] = missionString.split(":");
+									return (
+										<option key={missionString} value={missionString}>
+											{name}
+										</option>
+									);
+								})}
+					</select>
+					{validationRequired && (
+						<p className="text-sm text-warning">Szenario wird vor Alarmierung HPG-Validiert.</p>
+					)}
+				</div>
+
 				<textarea
 					{...form.register("missionAdditionalInfo")}
 					placeholder="Einsatzinformationen"

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">