Add tabs to aircraft popup

apps/dispatch/app/_store/mapStore.ts

@@ -51,6 +51,13 @@ interface MapStore {
 		elementId: number;
 	} | null;
 	setSearchPopup: (popup: MapStore["searchPopup"]) => void;
+	aircraftTabs: {
+		[aircraftId: string]: "home" | "fms" | "aircraft" | "mission" | "chat";
+	};
+	setAircraftTab: (
+		aircraftId: string,
+		tab: MapStore["aircraftTabs"][string],
+	) => void;
 }
 
 export const useMapStore = create<MapStore>((set, get) => ({
@@ -91,4 +98,12 @@ export const useMapStore = create<MapStore>((set, get) => ({
 		set((state) => ({
 			searchElements: elements,
 		})),
+	aircraftTabs: {},
+	setAircraftTab: (aircraftId, tab) =>
+		set((state) => ({
+			aircraftTabs: {
+				...state.aircraftTabs,
+				[aircraftId]: tab,
+			},
+		})),
 }));

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

@@ -2,7 +2,14 @@ import { Aircraft, useAircraftsStore } from "_store/aircraftsStore";
 import { Marker, Popup, useMap } from "react-leaflet";
 import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
 import { useMapStore } from "_store/mapStore";
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import {
+	Fragment,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from "react";
 import { cn } from "helpers/cn";
 import {
 	ChevronsRightLeft,
@@ -41,6 +48,38 @@ export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
 };
 
 const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
+	const setAircraftTab = useMapStore((state) => state.setAircraftTab);
+	const currentTab = useMapStore(
+		(state) => state.aircraftTabs[aircraft.id] || "home",
+	);
+
+	// Memoize the tab change handler to avoid unnecessary re-renders
+	const handleTabChange = useCallback(
+		(tab: "home" | "fms" | "aircraft" | "mission" | "chat") => {
+			if (currentTab !== tab) {
+				setAircraftTab(aircraft.id, tab);
+			}
+		},
+		[currentTab, aircraft.id, setAircraftTab],
+	);
+
+	const renderTabContent = useMemo(() => {
+		switch (currentTab) {
+			case "home":
+				return <div>Home Content</div>;
+			case "fms":
+				return <div>FMS Content</div>;
+			case "aircraft":
+				return <div>Aircraft Content</div>;
+			case "mission":
+				return <div>Mission Content</div>;
+			case "chat":
+				return <div>Chat Content</div>;
+			default:
+				return <div>Default Content</div>;
+		}
+	}, [currentTab]);
+
 	const setOpenAircraftMarker = useMapStore(
 		(state) => state.setOpenAircraftMarker,
 	);
@@ -88,15 +127,16 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 					}}
 				>
 					<div
-						className="p-2 px-3 flex justify-center items-center"
+						className="p-2 px-3 flex justify-center items-center cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
+						onClick={() => handleTabChange("home")}
 					>
 						<House className="text-sm" />
 					</div>
 					<div
-						className="p-2 px-4 flex justify-center items-center"
+						className="p-2 px-4 flex justify-center items-center cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
@@ -104,49 +144,53 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 						<ChevronsRightLeft className="text-sm" />
 					</div>
 					<div
-						className="flex justify-center items-center text-5xl font-bold p-2 px-6"
+						className="flex justify-center items-center text-5xl font-bold p-2 px-6 cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 							color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
 						}}
+						onClick={() => handleTabChange("fms")}
 					>
 						{aircraft.fmsStatus}
 					</div>
 					<div
-						className="p-2 w-100"
+						className="p-2 w-100 cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 							whiteSpace: "nowrap",
 						}}
+						onClick={() => handleTabChange("aircraft")}
 					>
 						<span className="text-white text-base font-medium">
-							{/* {aircraft.bosName} */} Christophorus 1
+							Christophorus 1
 							<br />
 							RTH
 						</span>
 					</div>
 					<div
-						className="p-2 w-150"
+						className="p-2 w-150 cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 							whiteSpace: "nowrap",
 						}}
+						onClick={() => handleTabChange("mission")}
 					>
 						<span className="text-white text-base font-medium">Einsatz</span>
 						<br />
 						<span className="text-white text-sm font-medium">__202504161</span>
 					</div>
 					<div
-						className="p-2 px-4 flex justify-center items-center"
+						className="p-2 px-4 flex justify-center items-center cursor-pointer"
 						style={{
 							backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
 						}}
+						onClick={() => handleTabChange("chat")}
 					>
 						<MessageSquareText className="text-sm" />
 					</div>
 				</div>
 			</div>
-			<div>test</div>
+			<div>{renderTabContent}</div>
 		</>
 	);
 };