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) => (
+				{missions.map((mission) => {
-					<div
+					const markerColor =
-						key={mission.id}
+						mission.hpgValidationState ===
-						className={cn(
+						(HpgValidationState.POSITION_AMANDED ||
-							"relative inline-flex items-center gap-2 text-nowrap w-full",
+							HpgValidationState.INVALID ||
-						)}
+							HpgValidationState.HPG_DISCONNECT ||
-						style={{
+							HpgValidationState.HPG_BUSY ||
-							backgroundColor: MISSION_STATUS_COLORS[mission.state],
+							HpgValidationState.HPG_INVALID_MISSION)
-							cursor: "pointer",
+							? MISSION_STATUS_COLORS["attention"]
-						}}
+							: MISSION_STATUS_COLORS[mission.state];
-					>
+					return (
-						<span
+						<div
-							className="mx-2 my-0.5 flex-1 cursor-pointer"
+							key={mission.id}
-							onClick={() => {
+							className={cn(
-								setOpenMissionMarker({
+								"relative inline-flex items-center gap-2 text-nowrap w-full",
-									open: [
+							)}
-										{
+							style={{
-											id: mission.id,
+								backgroundColor: markerColor,
-											tab: "home",
+								cursor: "pointer",
-										},
-									],
-									close: [],
-								});
-								map.setView([mission.addressLat, mission.addressLng], 12, {
-									animate: true,
-								});
 							}}
 						>
-							{mission.missionKeywordAbbreviation}
+							<span
-						</span>
+								className="mx-2 my-0.5 flex-1 cursor-pointer"
-					</div>
+								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) => (