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,38 +76,49 @@ const PopupContent = ({
 							: "",
 					}}
 				/>
-				{missions.map((mission) => (
-					<div
-						key={mission.id}
-						className={cn(
-							"relative inline-flex items-center gap-2 text-nowrap w-full",
-						)}
-						style={{
-							backgroundColor: MISSION_STATUS_COLORS[mission.state],
-							cursor: "pointer",
-						}}
-					>
-						<span
-							className="mx-2 my-0.5 flex-1 cursor-pointer"
-							onClick={() => {
-								setOpenMissionMarker({
-									open: [
-										{
-											id: mission.id,
-											tab: "home",
-										},
-									],
-									close: [],
-								});
-								map.setView([mission.addressLat, mission.addressLng], 12, {
-									animate: true,
-								});
+				{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: markerColor,
+								cursor: "pointer",
 							}}
 						>
-							{mission.missionKeywordAbbreviation}
-						</span>
-					</div>
-				))}
+							<span
+								className="mx-2 my-0.5 flex-1 cursor-pointer"
+								onClick={() => {
+									setOpenMissionMarker({
+										open: [
+											{
+												id: mission.id,
+												tab: "home",
+											},
+										],
+										close: [],
+									});
+									map.setView([mission.addressLat, mission.addressLng], 12, {
+										animate: true,
+									});
+								}}
+							>
+								{mission.missionKeywordAbbreviation}
+							</span>
+						</div>
+					);
+				})}
 				{aircrafts
 					.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
 					.map((aircraft) => (