Fix hpg validation color in MarkerCluster

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

@@ -1,4 +1,9 @@
-import { ConnectedAircraft, Mission, Station } from "@repo/db";
+import {
+	ConnectedAircraft,
+	HpgValidationState,
+	Mission,
+	Station,
+} from "@repo/db";
 import { useQuery } from "@tanstack/react-query";
 import { SmartPopup, useSmartPopup } from "_components/SmartPopup";
 import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
@@ -71,14 +76,24 @@ const PopupContent = ({
 							: "",
 					}}
 				/>
-				{missions.map((mission) => (
+				{missions.map((mission) => {
+					const markerColor =
+						mission.hpgValidationState ===
+						(HpgValidationState.POSITION_AMANDED ||
+							HpgValidationState.INVALID ||
+							HpgValidationState.HPG_DISCONNECT ||
+							HpgValidationState.HPG_BUSY ||
+							HpgValidationState.HPG_INVALID_MISSION)
+							? MISSION_STATUS_COLORS["attention"]
+							: MISSION_STATUS_COLORS[mission.state];
+					return (
 						<div
 							key={mission.id}
 							className={cn(
 								"relative inline-flex items-center gap-2 text-nowrap w-full",
 							)}
 							style={{
-							backgroundColor: MISSION_STATUS_COLORS[mission.state],
+								backgroundColor: markerColor,
 								cursor: "pointer",
 							}}
 						>
@@ -102,7 +117,8 @@ const PopupContent = ({
 								{mission.missionKeywordAbbreviation}
 							</span>
 						</div>
-				))}
+					);
+				})}
 				{aircrafts
 					.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
 					.map((aircraft) => (