added sorting and Connected Icon on Station

apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx

@@ -419,6 +419,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 				label: station.bosCallsign,
 				value: station.id,
 				type: "station" as const,
+				isOnline: !!conenctedAircrafts?.find((a) => a.stationId === station.id),
 			})) || []),
 		...(!mission.hpgFireEngineState || mission.hpgFireEngineState === "NOT_REQUESTED"
 			? [{ label: "Feuerwehr", value: "FW", type: "vehicle" as const }]
@@ -429,7 +430,21 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 		...(!mission.hpgPoliceState || mission.hpgPoliceState === "NOT_REQUESTED"
 			? [{ label: "POLizei", value: "POL", type: "vehicle" as const }]
 			: []),
-	];
+	].sort((a, b) => {
+		// 1. Vehicles first
+		if (a.type === "vehicle" && b.type !== "vehicle") return -1;
+		if (a.type !== "vehicle" && b.type === "vehicle") return 1;
+
+		// 2. Online stations before offline stations
+		if (a.type === "station" && b.type === "station") {
+			if (a.isOnline && !b.isOnline) return -1;
+			if (!a.isOnline && b.isOnline) return 1;
+		}
+
+		// 3. Otherwise, sort alphabetically by label
+		return a.label.localeCompare(b.label);
+		return 0;
+	});
 
 	useEffect(() => {
 		const firstOption = stationsOptions[0];
@@ -568,7 +583,6 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 						<button
 							className="btn btn-sm btn-primary btn-outline"
 							onClick={async () => {
-								console.log("Selected Station:", selectedStation);
 								if (typeof selectedStation === "string") {
 									await sendAlertMutation.mutate({
 										id: mission.id,

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

@@ -259,16 +259,23 @@ export const MissionForm = () => {
 					placeholder="Wähle ein oder mehrere Rettungsmittel aus"
 					isMulti
 					form={form}
-					options={stations?.map((s) => ({
-						label: (
-							/* TODO: Only show radio icon if station online and sort online stations to the top */
-							<span className="flex items-center gap-2">
-								<Radio className="text-success" size={15} />
-								{s.bosCallsign}
-							</span>
-						),
-						value: s.id,
-					}))}
+					options={stations
+						?.sort((a, b) => {
+							const aHasAircraft = aircrafts?.some((ac) => ac.stationId === a.id) ? 0 : 1;
+							const bHasAircraft = aircrafts?.some((ac) => ac.stationId === b.id) ? 0 : 1;
+							return aHasAircraft - bHasAircraft;
+						})
+						.map((s) => ({
+							label: (
+								<span className="flex items-center gap-2">
+									{aircrafts?.some((a) => a.stationId === s.id) && (
+										<Radio className="text-success" size={15} />
+									)}
+									{s.bosCallsign}
+								</span>
+							),
+							value: s.id,
+						}))}
 				/>
 			</div>