Add FMS history & FMS set Status Tabs, Show BOS use & fix Popup height

apps/dispatch/app/_store/aircraftsStore.ts

@@ -4,6 +4,7 @@ export interface Aircraft {
 	id: string;
 	bosName: string;
 	bosNameShort: string;
+	bosNutzung: string;
 	fmsStatus: string;
 	fmsLog: {
 		status: string;
@@ -35,8 +36,9 @@ export const useAircraftsStore = create<AircraftStore>((set) => ({
 	aircrafts: [
 		{
 			id: "1",
-			bosName: "Aircraft 1",
-			bosNameShort: "A1",
+			bosName: "Christoph 31",
+			bosNameShort: "CHX31",
+			bosNutzung: "RTH",
 			fmsStatus: "1",
 			fmsLog: [],
 			location: {
@@ -49,8 +51,9 @@ export const useAircraftsStore = create<AircraftStore>((set) => ({
 		},
 		{
 			id: "2",
-			bosName: "Aircraft 2",
-			bosNameShort: "A2",
+			bosName: "Christoph Berlin",
+			bosNameShort: "CHX83",
+			bosNutzung: "ITH",
 			fmsStatus: "2",
 			fmsLog: [],
 			location: {
@@ -63,9 +66,10 @@ export const useAircraftsStore = create<AircraftStore>((set) => ({
 		},
 		{
 			id: "3",
-			bosName: "Aircraft 3",
-			bosNameShort: "A3",
-			fmsStatus: "3",
+			bosName: "Christoph 100",
+			bosNameShort: "CHX100",
+			bosNutzung: "RTH",
+			fmsStatus: "7",
 			fmsLog: [],
 			location: {
 				lat: 52.497519717230155,
@@ -77,8 +81,9 @@ export const useAircraftsStore = create<AircraftStore>((set) => ({
 		},
 		{
 			id: "4",
-			bosName: "Aircraft 4",
+			bosName: "Christophorus 1",
 			bosNameShort: "A4",
+			bosNutzung: "RTH",
 			fmsStatus: "6",
 			fmsLog: [],
 			location: {

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

@@ -1,5 +1,5 @@
 import { Aircraft, useAircraftsStore } from "_store/aircraftsStore";
-import { Marker, Popup, useMap } from "react-leaflet";
+import { Marker, useMap } from "react-leaflet";
 import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
 import { useMapStore } from "_store/mapStore";
 import {
@@ -13,13 +13,14 @@ import {
 import { cn } from "helpers/cn";
 import {
 	ChevronsRightLeft,
-	Cross,
 	House,
 	MessageSquareText,
 	Minimize2,
-	Route,
 } from "lucide-react";
 import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
+import FMSStatusHistory, {
+	FMSStatusSelector,
+} from "./_components/AircraftMarkerTabs";
 
 export const FMS_STATUS_COLORS: { [key: string]: string } = {
 	"0": "rgb(126,0,5)",
@@ -66,9 +67,9 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 	const renderTabContent = useMemo(() => {
 		switch (currentTab) {
 			case "home":
-				return <div>Home Content</div>;
+				return <FMSStatusHistory />;
 			case "fms":
-				return <div>FMS Content</div>;
+				return <FMSStatusSelector aircraft={aircraft} />;
 			case "aircraft":
 				return <div>Aircraft Content</div>;
 			case "mission":
@@ -76,9 +77,9 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 			case "chat":
 				return <div>Chat Content</div>;
 			default:
-				return <div>Default Content</div>;
+				return <span className="text-gray-100">Error</span>;
 		}
-	}, [currentTab]);
+	}, [currentTab, aircraft]);
 
 	const setOpenAircraftMarker = useMapStore(
 		(state) => state.setOpenAircraftMarker,
@@ -162,9 +163,9 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 						onClick={() => handleTabChange("aircraft")}
 					>
 						<span className="text-white text-base font-medium">
-							Christophorus 1
+							{aircraft.bosName}
 							<br />
-							RTH
+							{aircraft.bosNutzung}
 						</span>
 					</div>
 					<div
@@ -326,9 +327,11 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 					closeOnClick={false}
 					autoPan={false}
 					wrapperClassName="relative"
-					className="w-[502px] h-[220px]"
+					className="w-[502px]"
 				>
-					<AircraftPopupContent aircraft={aircraft} />
+					<div style={{ height: "auto", maxHeight: "90vh", overflowY: "auto" }}>
+						<AircraftPopupContent aircraft={aircraft} />
+					</div>
 				</SmartPopup>
 			)}
 		</Fragment>

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

@@ -0,0 +1,71 @@
+"use client";
+import React, { useState } from "react";
+import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "../AircraftMarker";
+import { Aircraft } from "_store/aircraftsStore";
+
+const FMSStatusHistory = () => {
+	const dummyData = [
+		{ status: "3", time: "12:00" },
+		{ status: "4", time: "12:30" },
+		{ status: "7", time: "14:54" },
+		{ status: "8", time: "13:30" },
+		{ status: "1", time: "13:30" },
+	];
+
+	return (
+		<div className="p-4">
+			<ul className="space-y-2">
+				{dummyData.map((entry, index) => (
+					<li key={index} className="flex items-center gap-2">
+						<span
+							className="font-bold text-base"
+							style={{
+								color: FMS_STATUS_TEXT_COLORS[entry.status],
+							}}
+						>
+							{entry.status}
+						</span>
+						<span className="text-base-content">{entry.time}</span>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
+
+const FMSStatusSelector = ({ aircraft }: { aircraft: Aircraft }) => {
+	const [hoveredStatus, setHoveredStatus] = useState<string | null>(null);
+
+	return (
+		<div className="flex gap-2 p-4 justify-center">
+			{Array.from({ length: 9 }, (_, i) => (i + 1).toString()).map((status) => (
+				<div
+					key={status}
+					className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold"
+					style={{
+						backgroundColor:
+							hoveredStatus === status
+								? FMS_STATUS_COLORS[status]
+								: aircraft.fmsStatus === status
+									? FMS_STATUS_COLORS[status]
+									: "var(--color-base-200)",
+						color: aircraft.fmsStatus === status ? "white" : "gray",
+					}}
+					onMouseEnter={() => setHoveredStatus(status)}
+					onMouseLeave={() => setHoveredStatus(null)}
+					onClick={() => {
+						// Handle status change logic here
+						console.log(
+							`Status changed to: ${status} for aircraft ${aircraft.id}`,
+						);
+					}}
+				>
+					{status}
+				</div>
+			))}
+		</div>
+	);
+};
+
+export { FMSStatusSelector };
+export default FMSStatusHistory;