added onClick events for marker-cluster

apps/dispatch/app/_store/chatStore.ts

@@ -3,6 +3,8 @@ import { ChatMessage } from "@repo/db";
 import { socket } from "dispatch/socket";
 
 interface ChatStore {
+	reportTabOpen: boolean;
+	setReportTabOpen: (open: boolean) => void;
 	ownId: null | string;
 	selectedChat: string | null;
 	chatOpen: boolean;
@@ -20,6 +22,8 @@ interface ChatStore {
 }
 
 export const useChatStore = create<ChatStore>((set, get) => ({
+	reportTabOpen: false,
+	setReportTabOpen: (open: boolean) => set({ reportTabOpen: open }),
 	ownId: null,
 	chatOpen: false,
 	selectedChat: null,

apps/dispatch/app/_store/mapStore.ts

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

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

@@ -3,16 +3,20 @@ import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
 import { useChatStore } from "_store/chatStore";
 import { useSession } from "next-auth/react";
 import { Fragment, useEffect, useRef, useState } from "react";
-import {
+import { Dispatcher } from "dispatch/_components/navbar/_components/action";
-	Dispatcher,
-	getDispatcher,
-} from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
-import { useReportStore } from "_store/reportStore";
+
+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[];
+};
 
 export const Chat = () => {
-	const { setReportOpen } = useReportStore();
 	const {
+		setReportTabOpen,
+		reportTabOpen,
 		chatOpen,
 		setChatOpen,
 		sendMessage,
@@ -62,7 +66,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")}>
@@ -73,7 +77,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

@@ -1,18 +1,15 @@
 "use client";
 import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
-import { useReportStore, sendReport } from "_store/reportStore";
 import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
-import {
+import { Dispatcher } from "dispatch/_components/navbar/_components/action";
-	Dispatcher,
-	getDispatcher,
-} from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
 import { useChatStore } from "_store/chatStore";
+import { getDispatcher } from "dispatch/_components/left/Chat";
 
 export const Report = () => {
-	const { setChatOpen } = useChatStore();
+	const { setChatOpen, setReportTabOpen, reportTabOpen, setOwnId } =
-	const { reportOpen, setReportOpen, setOwnId } = useReportStore();
+		useChatStore();
 	const [sending, setSending] = useState(false);
 	const session = useSession();
 	const [selectedPlayer, setSelectedPlayer] = useState<string>("");
@@ -23,7 +20,7 @@ export const Report = () => {
 	useEffect(() => {
 		if (!session.data?.user.id) return;
 		setOwnId(session.data.user.id);
-	}, [session]);
+	}, [session, setOwnId]);
 
 	useEffect(() => {
 		const fetchDispatcher = async () => {
@@ -53,20 +50,23 @@ export const Report = () => {
 
 	return (
 		<div
-			className={cn("dropdown dropdown-right", reportOpen && "dropdown-open")}
+			className={cn(
+				"dropdown dropdown-right",
+				reportTabOpen && "dropdown-open",
+			)}
 		>
 			<div className="indicator">
 				<button
 					className="btn btn-soft btn-sm btn-error"
 					onClick={() => {
 						setChatOpen(false);
-						setReportOpen(!reportOpen);
+						setReportTabOpen(!reportTabOpen);
 					}}
 				>
 					<ExclamationTriangleIcon className="w-4 h-4" />
 				</button>
 			</div>
-			{reportOpen && (
+			{reportTabOpen && (
 				<div
 					tabIndex={0}
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
@@ -107,7 +107,16 @@ export const Report = () => {
 									e.preventDefault();
 									if (message.length < 1 || !selectedPlayer) return;
 									setSending(true);
-									sendReport(selectedPlayer, message)
+									fetch("/api/dispatch/report", {
+										method: "POST",
+										headers: {
+											"Content-Type": "application/json",
+										},
+										body: JSON.stringify({
+											userId: selectedPlayer,
+											message: message,
+										}),
+									})
 										.then(() => {
 											setMessage("");
 											setSending(false);

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

@@ -356,7 +356,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 			/>
 			{openAircraftMarker.some((m) => m.id === aircraft.id) && !hideMarker && (
 				<SmartPopup
-					id={aircraft.id}
+					id={`aircraft-${aircraft.id}`}
 					ref={popupRef}
 					position={[aircraft.location.lat, aircraft.location.lng]}
 					autoClose={false}

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

@@ -342,7 +342,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 			/>
 			{openMissionMarker.some((m) => m.id === mission.id) && !hideMarker && (
 				<SmartPopup
-					id={mission.id.toString()}
+					id={`cluster-${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"
@@ -227,10 +265,9 @@ export const MarkerCluster = () => {
 					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[];
-};