Mission Marker Home & Log Page

apps/dispatch/app/_store/missionsStore.ts

@@ -23,10 +23,10 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 			missionAdditionalInfo: "",
 			addressLat: 52.520008,
 			addressLng: 13.404954,
-			missionKeywordName: "Test",
+			missionKeywordName: "TestKName",
-			missionKeywordCategory: "Test",
+			missionKeywordCategory: "TestKCategory",
-			missionKeywordAbbreviation: "Test",
+			missionKeywordAbbreviation: "TestKAbbreviation",
-			missionPatientInfo: "Test",
+			missionPatientInfo: "TestPatientInfo",
 			missionStationIds: [],
 			createdUserId: "1",
 			missionLog: [],
@@ -73,7 +73,7 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 		});
 		if (!res.ok) return undefined;
 		const data = await res.json();
-		set({ missions: data });
+		//set({ missions: data });
 		return undefined;
 	},
 	setMission: (mission) =>

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

@@ -47,6 +47,7 @@ export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
 	"7": "rgb(243,27,25)",
 	"8": "rgb(255,143,0)",
 	"9": "rgb(9,212,33)",
+	N: "rgb(153,153,153)",
 };
 
 const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
@@ -97,7 +98,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 					});
 				}}
 			>
-				<Minimize2 className="text-white " size={15} />
+				<Minimize2 className="text-white" size={16} />
 			</div>
 
 			<div

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

@@ -1,5 +1,5 @@
 import { useMissionsStore } from "_store/missionsStore";
-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 {
@@ -11,10 +11,12 @@ import {
 	useState,
 } from "react";
 import { cn } from "helpers/cn";
-import { Cross, House, Minimize2, Route } from "lucide-react";
+import { ClipboardList, Cross, House, Minimize2, Route } from "lucide-react";
 import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
 import { Mission, MissionState } from "@repo/db";
-import FMSStatusHistory from "./_components/MissionMarkerTabs";
+import Einsatzdetails, {
+	FMSStatusHistory,
+} from "./_components/MissionMarkerTabs";
 
 export const MISSION_STATUS_COLORS: Record<MissionState, string> = {
 	draft: "#0092b8",
@@ -31,11 +33,13 @@ export const MISSION_STATUS_TEXT_COLORS: Record<MissionState, string> = {
 const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 	const setMissionTab = useMapStore((state) => state.setMissionTab);
 	const currentTab = useMapStore(
-		(state) => state.missionTabs[mission.id] || "home",
+		(state) =>
+			state.missionTabs[mission.id] ||
+			("home" as "home" | "details" | "chat" | "log"),
 	);
 
 	const handleTabChange = useCallback(
-		(tab: "home" | "details" | "chat") => {
+		(tab: "home" | "details" | "chat" | "log") => {
 			if (currentTab !== tab) {
 				setMissionTab(mission.id, tab);
 			}
@@ -46,11 +50,13 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 	const renderTabContent = useMemo(() => {
 		switch (currentTab) {
 			case "home":
-				return <FMSStatusHistory />;
+				return <Einsatzdetails />;
 			case "details":
 				return <div>Details Content</div>;
 			case "chat":
 				return <div>Chat Content</div>;
+			case "log":
+				return <FMSStatusHistory />;
 			default:
 				return <span className="text-gray-100">Error</span>;
 		}
@@ -72,7 +78,7 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 					});
 				}}
 			>
-				<Minimize2 className="text-white" />
+				<Minimize2 className="text-white" size={16} />
 			</div>
 
 			<div
@@ -142,6 +148,19 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 					>
 						<Cross className="text-sm" />
 					</div>
+					<div
+						className="p-2 px-4 flex justify-center items-center cursor-pointer ml-auto"
+						style={{
+							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
+							borderBottom:
+								currentTab === "log"
+									? `5px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]}`
+									: "5px solid transparent",
+						}}
+						onClick={() => handleTabChange("log")}
+					>
+						<ClipboardList className="text-sm" />
+					</div>
 				</div>
 			</div>
 			<div>{renderTabContent}</div>
@@ -239,7 +258,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 							"
 						></div>
 						<span class="text-white text-[15px] text-nowrap">
-							${mission.missionSummary}
+							${mission.missionKeywordCategory}
 						</span>
 						<div 
 							data-id="${mission.id}"

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

@@ -1,41 +1,132 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { FMS_STATUS_TEXT_COLORS } from "../AircraftMarker";
+import {
+	Ban,
+	BellRing,
+	Flag,
+	Hash,
+	ListCollapse,
+	LocateFixed,
+	MapPin,
+	Navigation,
+	Plus,
+	Repeat2,
+} from "lucide-react";
+
+const Einsatzdetails = () => {
+	return (
+		<div className="p-4 text-base-content">
+			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+				<Flag /> Einsatzdetails
+			</h2>
+			<ul className="text-base-content font-semibold">
+				<li className="flex items-center gap-2 mb-1">
+					<BellRing size={16} /> AB_ATMUNG
+				</li>
+				<li className="flex items-center gap-2 mb-1">
+					<ListCollapse size={16} />
+					Gleichbleibende Atembeschwerden
+				</li>
+				<li className="flex items-center gap-2 mt-3">
+					<Hash size={16} />
+					__202504161
+				</li>
+			</ul>
+			<div className="divider mt-0 mb-0" />
+			<div className="text-sm font-semibold">
+				<p className="flex items-center gap-2">
+					<MapPin size={16} /> 52.520008, 13.404954
+				</p>
+				<p className="flex items-center gap-2">
+					<Navigation size={16} /> Alexanderplatz
+				</p>
+				<p className="flex items-center gap-2">
+					<LocateFixed size={16} /> Berlin, 10178
+				</p>
+			</div>
+			<div className="divider mt-0 mb-0" />
+			<div className="flex items-center gap-2 w-full pr-2">
+				<button className="btn btn-sm btn-info btn-outline btn-block basis-5/8">
+					<span className="flex items-center gap-2">
+						<BellRing size={16} /> Alarmieren
+					</span>
+				</button>
+
+				<button className="btn btn-sm btn-primary btn-dash btn-block basis-3/8">
+					<span className="flex items-center gap-2">
+						<Repeat2 size={18} /> Daten übernehmen
+					</span>
+				</button>
+			</div>
+		</div>
+	);
+};
 
 const FMSStatusHistory = () => {
+	const [isAddingNote, setIsAddingNote] = useState(false);
+	const [note, setNote] = useState("");
+
 	const dummyData = [
-		{ status: "3", time: "12:00", unit: "RTW", unitshort: "RTW" },
+		{
-		{ status: "3", time: "12:01", unit: "Christoph 31", unitshort: "CHX31" },
+			status: "N",
-		{ status: "4", time: "12:09", unit: "RTW", unitshort: "RTW" },
+			time: "12:39",
-		{ status: "4", time: "12:11", unit: "Christoph 31", unitshort: "CHX31" },
+			unit: "RTH defekt, verbleibt an Einsatzort",
-		{ status: "7", time: "12:34", unit: "RTW", unitshort: "RTW" },
+			unitshort: "",
+		},
 		{ status: "1", time: "12:38", unit: "Christoph 31", unitshort: "CHX31" },
+		{ status: "7", time: "12:34", unit: "RTW", unitshort: "RTW" },
+		{ status: "4", time: "12:11", unit: "Christoph 31", unitshort: "CHX31" },
+		{ status: "4", time: "12:09", unit: "RTW", unitshort: "RTW" },
+		{ status: "3", time: "12:01", unit: "Christoph 31", unitshort: "CHX31" },
+		{ status: "3", time: "12:00", unit: "RTW", unitshort: "RTW" },
 	];
 
 	return (
 		<div className="p-4">
 			<div className="flex items-center gap-2">
-				{[
+				{!isAddingNote ? (
-					...new Map(dummyData.map((entry) => [entry.unit, entry])).values(),
+					<button
-				].map((entry, index, array) => (
+						className="text-base-content text-base cursor-pointer"
-					<React.Fragment key={index}>
+						onClick={() => setIsAddingNote(true)}
-						<div className="flex items-center gap-2">
+					>
-							<span
+						<span className="flex items-center gap-2">
-								className="font-bold text-base"
+							<Plus size={18} /> Notiz hinzufügen
-								style={{
+						</span>
-									color: FMS_STATUS_TEXT_COLORS[entry.status],
+					</button>
-								}}
+				) : (
-							>
+					<div className="flex items-center gap-2 w-full">
-								{entry.status}
+						<input
-							</span>
+							type="text"
-							<span className="text-base-content">{entry.unitshort}</span>
+							placeholder=""
-						</div>
+							className="input input-sm text-base-content"
-						{index < array.length - 1 && <span className="mx-1">|</span>}
+							value={note}
-					</React.Fragment>
+							onChange={(e) => setNote(e.target.value)}
-				))}
+						/>
+						<button
+							className="btn btn-sm btn-primary btn-outline"
+							onClick={() => {
+								console.log("Note submitted:", note);
+								setIsAddingNote(false);
+								setNote("");
+							}}
+						>
+							<Plus size={20} />
+						</button>
+						<button
+							className="btn btn-sm btn-outline"
+							onClick={() => {
+								setIsAddingNote(false);
+								setNote("");
+							}}
+						>
+							<Ban size={20} />
+						</button>
+					</div>
+				)}
 			</div>
 			<div className="divider m-0" />
-			<ul className="space-y-2">
+			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
 				{dummyData.map((entry, index) => (
 					<li key={index} className="flex items-center gap-2">
 						<span className="text-base-content">{entry.time}</span>
@@ -55,4 +146,5 @@ const FMSStatusHistory = () => {
 	);
 };
 
-export default FMSStatusHistory;
+export { FMSStatusHistory };
+export default Einsatzdetails;