WIP Mission Popup

apps/dispatch/app/_store/mapStore.ts

@@ -12,7 +12,7 @@ interface MapStore {
 	};
 	openMissionMarker: {
 		id: number;
-		tab: "home" | "details" | "chat" | "log";
+		tab: "home" | "details" | "patient" | "log";
 	}[];
 	setOpenMissionMarker: (mission: {
 		open: MapStore["openMissionMarker"];

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

@@ -11,7 +11,14 @@ import {
 	useState,
 } from "react";
 import { cn } from "helpers/cn";
-import { ClipboardList, Cross, House, Minimize2, Route } from "lucide-react";
+import {
+	ClipboardList,
+	Cross,
+	House,
+	Minimize2,
+	Route,
+	SmartphoneNfc,
+} from "lucide-react";
 import {
 	calculateAnchor,
 	SmartPopup,
@@ -20,6 +27,8 @@ import {
 import { Mission, MissionState } from "@repo/db";
 import Einsatzdetails, {
 	FMSStatusHistory,
+	Patientdetails,
+	Rettungsmittel,
 } from "./_components/MissionMarkerTabs";
 
 export const MISSION_STATUS_COLORS: Record<MissionState, string> = {
@@ -42,7 +51,7 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 	);
 
 	const handleTabChange = useCallback(
-		(tab: "home" | "details" | "chat" | "log") => {
+		(tab: "home" | "details" | "patient" | "log") => {
 			console.log("handleTabChange", tab);
 			setMissionMarker({
 				open: [
@@ -62,9 +71,9 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 			case "home":
 				return <Einsatzdetails mission={mission} />;
 			case "details":
-				return <div>Details Content</div>;
+				return <Rettungsmittel mission={mission} />;
-			case "chat":
+			case "patient":
-				return <div>Chat Content</div>;
+				return <Patientdetails mission={mission} />;
 			case "log":
 				return <FMSStatusHistory mission={mission} />;
 			default:
@@ -137,26 +146,26 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 						style={{
 							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
 							borderBottom:
-								currentTab === "details"
+								currentTab === "patient"
 									? `5px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]}`
 									: "5px solid transparent",
 						}}
-						onClick={() => handleTabChange("details")}
+						onClick={() => handleTabChange("patient")}
 					>
-						<Route className="text-sm" />
+						<Cross className="text-sm" />
 					</div>
 					<div
 						className="p-2 px-4 flex justify-center items-center cursor-pointer"
 						style={{
 							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
 							borderBottom:
-								currentTab === "chat"
+								currentTab === "details"
 									? `5px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]}`
 									: "5px solid transparent",
 						}}
-						onClick={() => handleTabChange("chat")}
+						onClick={() => handleTabChange("details")}
 					>
-						<Cross className="text-sm" />
+						<SmartphoneNfc className="text-sm" />
 					</div>
 					<div
 						className="p-2 px-4 flex justify-center items-center cursor-pointer ml-auto"

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

@@ -13,6 +13,8 @@ import {
 	Plus,
 	Repeat2,
 	Trash,
+	User,
+	SmartphoneNfc,
 } from "lucide-react";
 import {
 	getPublicUser,
@@ -42,7 +44,8 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 				</li>
 				<li className="flex items-center gap-2 mt-3">
 					<Hash size={16} />
-					__{mission.id}
+					__{new Date().toISOString().slice(0, 10).replace(/-/g, "")}
+					{mission.id}
 				</li>
 			</ul>
 			<div className="divider mt-0 mb-0" />
@@ -97,6 +100,59 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 	);
 };
 
+const Patientdetails = ({ mission }: { mission: Mission }) => {
+	return (
+		<div className="p-4 text-base-content">
+			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+				<User /> Patientendetails
+			</h2>
+			<p className="text-base-content font-semibold">
+				{mission.missionPatientInfo}
+			</p>
+		</div>
+	);
+};
+
+const Rettungsmittel = () => {
+	// Mockup data
+	const mockupData = [
+		{ bosCallsign: "Christoph 31", FMSstatus: 2, min: 6 },
+		{ bosCallsign: "RTW", FMSstatus: 3, min: 2 },
+		{ bosCallsign: "Polizei", FMSstatus: 4, min: 0 },
+	];
+
+	return (
+		<div className="p-4 text-base-content">
+			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+				<SmartphoneNfc /> Rettungsmittel
+			</h2>
+			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
+				{mockupData.map((item, index) => (
+					<li key={index} className="flex items-center gap-2">
+						<span
+							className="font-bold text-base"
+							style={{
+								color: FMS_STATUS_TEXT_COLORS[item.FMSstatus],
+							}}
+						>
+							{item.FMSstatus}
+						</span>
+						<span className="text-base-content">
+							<span className="font-bold">{item.bosCallsign}</span>
+							{item.min > 0 && (
+								<>
+									<br />
+									Ankunft in ca. {item.min} min
+								</>
+							)}
+						</span>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+};
+
 const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 	const session = useSession();
 	const [isAddingNote, setIsAddingNote] = useState(false);
@@ -212,5 +268,5 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 	);
 };
 
-export { FMSStatusHistory };
+export { FMSStatusHistory, Patientdetails, Rettungsmittel };
 export default Einsatzdetails;

apps/dispatch/app/dispatch/page.tsx

@@ -7,7 +7,7 @@ import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
 const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
 
-export default () => {
+const DispatchPage = () => {
 	const { isOpen } = usePannelStore();
 	return (
 		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
@@ -27,3 +27,7 @@ export default () => {
 		</div>
 	);
 };
+
+DispatchPage.displayName = "DispatchPage";
+
+export default DispatchPage;