apps/dispatch/app/_components/SmartPopup.tsx

@@ -24,7 +24,7 @@ export const useSmartPopup = () => {
 export const calculateAnchor = (
 	id: string,
 	mode: "popup" | "marker",
-	ignoreMarker?: boolean,
+	options?: { ignoreMarker?: boolean; ignoreCluster?: boolean },
 ) => {
 	const otherMarkers = document.querySelectorAll(".map-collision");
 	// get markers and check if they are overlapping
@@ -36,8 +36,9 @@ export const calculateAnchor = (
 	if (!otherMarkers || !ownMarker) return "topleft";
 
 	const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
-		if (mode === "popup" && marker.id === `marker-${id}`) return false;
+		if (mode === "popup" && marker.id === `marker-domain-${id}`) return false;
-		if (ignoreMarker && marker.id.startsWith("marker")) return false;
+		if (options?.ignoreMarker && marker.id.includes("marker")) return false;
+		if (options?.ignoreCluster && marker.id.includes("cluster")) return false;
 
 		const rect1 = (marker as HTMLElement).getBoundingClientRect();
 		const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -76,12 +77,6 @@ export const calculateAnchor = (
 	centerOfOverlappingMarkers.x /= markersPosition.length;
 	centerOfOverlappingMarkers.y /= markersPosition.length;
 
-	if (id == "2") {
-		console.log("markersInCluser", marksersInCluster);
-		console.log("ownMarkerPosition", ownMarkerPosition);
-		console.log("centerOfOverlappingMarkers", centerOfOverlappingMarkers);
-	}
-
 	if (marksersInCluster.length > 1) {
 		if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
 			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -107,24 +102,25 @@ export interface SmartPopupRef {
 }
 
 export const SmartPopup = (
-	props: PopupProps & { ignoreMarker?: boolean } & RefAttributes<LPopup> & {
+	props: PopupProps &
+		RefAttributes<LPopup> & {
+			options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
 			smartPopupRef?: Ref<SmartPopupRef>;
 			id: string;
 			wrapperClassName?: string;
 		},
 ) => {
 	const [showContent, setShowContent] = useState(false);
-	const { smartPopupRef, id, className, wrapperClassName, ignoreMarker } =
+	const { smartPopupRef, id, className, wrapperClassName, options } = props;
-		props;
 
 	const [anchor, setAnchor] = useState<
 		"topleft" | "topright" | "bottomleft" | "bottomright"
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(id, "popup", ignoreMarker);
+		const newAnchor = calculateAnchor(id, "popup", options);
 		setAnchor(newAnchor);
-	}, [id, ignoreMarker]);
+	}, [id, options]);
 
 	useImperativeHandle(smartPopupRef, () => ({
 		handleConflict,

apps/dispatch/app/_store/mapStore.ts

@@ -1,4 +1,3 @@
-import { popup } from "leaflet";
 import { create } from "zustand";
 
 interface MapStore {

apps/dispatch/app/_store/missionsStore.ts

@@ -3,6 +3,7 @@ import { MissionOptionalDefaults } from "@repo/db/zod";
 import { serverApi } from "helpers/axios";
 import { create } from "zustand";
 import { toast } from "react-hot-toast";
+import axios from "axios";
 
 interface MissionStore {
 	missions: Mission[];
@@ -17,15 +18,8 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 	missions: [],
 	setMissions: (missions) => set({ missions }),
 	createMission: async (mission) => {
-		const res = await fetch("/api/mission", {
+		const { data } = await serverApi.put<Mission>("/mission", mission);
-			method: "PUT",
+
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(mission),
-		});
-		if (!res.ok) return new Error("Failed to create mission");
-		const data = await res.json();
 		set((state) => ({ missions: [...state.missions, data] }));
 		return data;
 	},

apps/dispatch/app/_store/reportStore.ts

@@ -1,32 +0,0 @@
-import { create } from "zustand";
-import { PrismaClient } from "@prisma/client";
-
-interface ReportStore {
-	ownId: null | string;
-	reportOpen: boolean;
-	setReportOpen: (open: boolean) => void;
-	setOwnId: (id: string) => void;
-}
-
-export const useReportStore = create<ReportStore>((set) => ({
-	ownId: null,
-	reportOpen: false,
-	setReportOpen: (open: boolean) => set({ reportOpen: open }),
-	setOwnId: (id: string) => set({ ownId: id }),
-}));
-
-const prisma = new PrismaClient();
-
-export const sendReport = async (receiverId: string, message: string) => {
-	try {
-		await prisma.reportMessage.create({
-			data: {
-				receiverId,
-				message,
-			},
-		});
-	} catch (error) {
-		console.error("Failed to send report:", error);
-		throw error;
-	}
-};

apps/dispatch/app/dispatch/_components/left/Chat.tsx

@@ -5,17 +5,11 @@ import { useSession } from "next-auth/react";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { Dispatcher } from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
-import { useReportStore } from "_store/reportStore";
+import { getDispatcher } from "pilot/_components/navbar/action";
-import { serverApi } from "helpers/axios";
-
-export const getDispatcher = async () => {
-	const res = await serverApi.get<Dispatcher[]>(`/dispatcher`);
-	return res.data;
-};
 
 export const Chat = () => {
-	const { setReportOpen } = useReportStore();
 	const {
+		setReportTabOpen,
 		chatOpen,
 		setChatOpen,
 		sendMessage,
@@ -65,7 +59,7 @@ export const Chat = () => {
 				console.log("cleared");
 			}
 		};
-	}, [addTabValue, chats]);
+	}, [addTabValue, chats, session.data?.user.id]);
 
 	return (
 		<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
@@ -76,7 +70,7 @@ export const Chat = () => {
 				<button
 					className="btn btn-soft btn-sm btn-primary"
 					onClick={() => {
-						setReportOpen(false);
+						setReportTabOpen(false);
 						setChatOpen(!chatOpen);
 						if (selectedChat) {
 							setChatNotification(selectedChat, false);

apps/dispatch/app/dispatch/_components/left/Report.tsx

@@ -4,9 +4,9 @@ import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
 import { Dispatcher } from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
-import { useLeftMenuStore } from "_store/leftMenuStore";
-import { getDispatcher } from "dispatch/_components/left/Chat";
 import { serverApi } from "helpers/axios";
+import { getDispatcher } from "pilot/_components/navbar/action";
+import { useLeftMenuStore } from "_store/leftMenuStore";
 
 export const Report = () => {
 	const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =

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

@@ -224,7 +224,6 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 };
 
 const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
-	const aircrafts = useAircraftsStore((state) => state.aircrafts);
 	const [hideMarker, setHideMarker] = useState(false);
 	const map = useMap();
 	const markerRef = useRef<LMarker>(null);
@@ -266,7 +265,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(aircraft.id, "marker");
+		const newAnchor = calculateAnchor(`aircraft-${aircraft.id}`, "marker");
 		setAnchor(newAnchor);
 	}, [aircraft.id]);
 
@@ -296,7 +295,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 		anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
 	) => {
 		return `<div 
-						id="marker-${aircraft.id}"
+						id="marker-aircraft-${aircraft.id}"
 						class="${cn(
 							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
@@ -332,7 +331,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 							data-id="${aircraft.id}"
 							data-anchor-lat="${aircraft.location.lat}"
 							data-anchor-lng="${aircraft.location.lng}"
-							id="marker-domain-${aircraft.id}" 
+							id="marker-domain-aircraft-${aircraft.id}" 
 							class="${cn(
 								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 								anchor.includes("left") && "-translate-x-1/2",
@@ -356,7 +355,10 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 			/>
 			{openAircraftMarker.some((m) => m.id === aircraft.id) && !hideMarker && (
 				<SmartPopup
-					id={aircraft.id}
+					options={{
+						ignoreCluster: true,
+					}}
+					id={`aircraft-${aircraft.id}`}
 					ref={popupRef}
 					position={[aircraft.location.lat, aircraft.location.lng]}
 					autoClose={false}

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

@@ -258,7 +258,10 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(mission.id.toString(), "marker");
+		const newAnchor = calculateAnchor(
+			`mission-${mission.id.toString()}`,
+			"marker",
+		);
 		setAnchor(newAnchor);
 	}, [mission.id]);
 
@@ -288,7 +291,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 		anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
 	) => {
 		return `<div 
-						id="marker-${mission.id}"
+						id="marker-mission-${mission.id}"
 						class="${cn(
 							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
@@ -318,7 +321,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 						data-anchor-lat="${mission.addressLat}"
 							data-anchor-lng="${mission.addressLng}"
 							data-id="${mission.id}"
-							id="marker-domain-${mission.id}" 
+							id="marker-domain-mission-${mission.id}" 
 							class="${cn(
 								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 								anchor.includes("left") && "-translate-x-1/2",
@@ -342,7 +345,10 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 			/>
 			{openMissionMarker.some((m) => m.id === mission.id) && !hideMarker && (
 				<SmartPopup
-					id={mission.id.toString()}
+					options={{
+						ignoreCluster: true,
+					}}
+					id={`mission-${mission.id.toString()}`}
 					ref={popupRef}
 					position={[mission.addressLat, mission.addressLng]}
 					autoClose={false}

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

@@ -1,6 +1,7 @@
 import { Mission } from "@repo/db";
 import { SmartPopup, useSmartPopup } from "_components/SmartPopup";
 import { Aircraft, useAircraftsStore } from "_store/aircraftsStore";
+import { useMapStore } from "_store/mapStore";
 import { useMissionsStore } from "_store/missionsStore";
 import {
 	FMS_STATUS_COLORS,
@@ -22,6 +23,10 @@ const PopupContent = ({
 	missions: Mission[];
 }) => {
 	const { anchor } = useSmartPopup();
+	const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore(
+		(state) => state,
+	);
+	const map = useMap();
 
 	let borderColor = "";
 
@@ -33,7 +38,9 @@ const PopupContent = ({
 		}
 	} else if (anchor.includes("bottom")) {
 		if (aircrafts.length > 0) {
-			borderColor = FMS_STATUS_TEXT_COLORS[aircrafts[0]!.fmsStatus] || "white";
+			borderColor =
+				FMS_STATUS_TEXT_COLORS[aircrafts[aircrafts.length - 1]!.fmsStatus] ||
+				"white";
 		} else if (missions.length > 0) {
 			borderColor = MISSION_STATUS_TEXT_COLORS[missions[0]!.state];
 		}
@@ -44,7 +51,7 @@ const PopupContent = ({
 			<div className="relative flex flex-col text-white min-w-[200px]">
 				<div
 					className={cn(
-						"absolute w-[calc(100%+2px)] h-4 z-99",
+						"absolute w-[calc(100%+2px)] h-4 z-99 pointer-events-none",
 						anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
 						anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
 					)}
@@ -69,9 +76,26 @@ const PopupContent = ({
 						)}
 						style={{
 							backgroundColor: MISSION_STATUS_COLORS[mission.state],
+							cursor: "pointer",
 						}}
 					>
-						<span className="mx-2 my-0.5">
+						<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>
@@ -79,10 +103,24 @@ const PopupContent = ({
 				{aircrafts.map((aircraft) => (
 					<div
 						key={aircraft.id}
-						className="relative w-auto inline-flex items-center gap-2 text-nowrap"
+						className="relative w-auto inline-flex items-center gap-2 text-nowrap cursor-pointer"
 						style={{
 							backgroundColor: FMS_STATUS_COLORS[aircraft.fmsStatus],
 						}}
+						onClick={() => {
+							setOpenAircraftMarker({
+								open: [
+									{
+										id: aircraft.id,
+										tab: "aircraft",
+									},
+								],
+								close: [],
+							});
+							map.setView([aircraft.location.lat, aircraft.location.lng], 12, {
+								animate: true,
+							});
+						}}
 					>
 						<span
 							className="mx-2 my-0.5 text-gt font-bold"
@@ -178,36 +216,34 @@ export const MarkerCluster = () => {
 				}
 			});
 
-			setCluster((prev) => {
+			const clusterWithAvgPos = newCluster.map((c) => {
-				return prev.map((c) => {
+				const aircraftPos = c.aircrafts.map((a) => [
-					const aircraftPos = c.aircrafts.map((a) => [
+					a.location.lat,
-						a.location.lat,
+					a.location.lng,
-						a.location.lng,
+				]);
-					]);
+				const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
-					const missionPos = c.missions.map((m) => [
+				const allPos = [...aircraftPos, ...missionPos];
-						m.addressLat,
-						m.addressLng,
-					]);
-					const allPos = [...aircraftPos, ...missionPos];
 
-					// Calculate the average position of all markers in the cluster
+				// Calculate the average position of all markers in the cluster
-					const avgLat =
-						allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
-					const avgLng =
-						allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
 
-					return {
+				const avgLat =
-						...c,
+					allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
-						lat: avgLat,
+				const avgLng =
-						lng: avgLng,
+					allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
-					};
+
-				});
+				console.log(allPos, { avgLat, avgLng });
+
+				return {
+					...c,
+					lat: avgLat,
+					lng: avgLng,
+				};
 			});
 
 			if (zoom >= 9) {
 				setCluster([]);
 			} else {
-				setCluster(newCluster);
+				setCluster(clusterWithAvgPos);
 			}
 		};
 		handleZoom();
@@ -220,17 +256,18 @@ export const MarkerCluster = () => {
 		<>
 			{cluster.map((c, i) => (
 				<SmartPopup
-					ignoreMarker
+					options={{
+						ignoreMarker: true,
+					}}
 					id={`cluster-${i}`}
 					wrapperClassName="relative"
 					key={i}
 					position={[c.lat, c.lng]}
 					autoPan={false}
 					autoClose={false}
+					className="w-[202px]"
 				>
-					<div>
+					<PopupContent aircrafts={c.aircrafts} missions={c.missions} />
-						<PopupContent aircrafts={c.aircrafts} missions={c.missions} />
-					</div>
 				</SmartPopup>
 			))}
 		</>

apps/dispatch/app/dispatch/_components/navbar/_components/action.ts

@@ -9,10 +9,3 @@ export interface Dispatcher {
 	name: string;
 	socketId: string;
 }
-
-export const getDispatcher = async () => {
-	const res = await fetch(`
-        ${process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL}/dispatcher`);
-	const data = await res.json();
-	return data as Dispatcher[];
-};