Initial pannel layout

apps/dispatch/app/(dispatch)/_components/pannel/Missions.tsx

@@ -0,0 +1,34 @@
+import { useMissionsStore } from "_store/missionsStore";
+
+export const Missions = () => {
+	const { missions } = useMissionsStore();
+
+	return (
+		<div>
+			<table className="table table-xs">
+				<thead>
+					<tr>
+						<th>ID</th>
+						<th>Einsatzmittel</th>
+						<th>Ort</th>
+						<th></th>
+					</tr>
+				</thead>
+				<tbody>
+					{missions.map((mission) => (
+						<tr key={mission.id}>
+							<td>{mission.id}</td>
+							<td>{mission.missionCategory}</td>
+							<td>
+								{mission.addressStreet}, {mission.addressCity}
+							</td>
+							<td>
+								<button className="btn btn-sm">Details</button>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+};

apps/dispatch/app/(dispatch)/_components/pannel/OpenButton.tsx

@@ -1,13 +1,18 @@
+"use client";
 import { usePannelStore } from "_store/pannelStore";
+import { cn } from "helpers/cn";
 
 export const OpenButton = () => {
-	const { setOpen } = usePannelStore();
+	const { setOpen, isOpen } = usePannelStore();
 	return (
 		<button
 			onClick={() => {
 				setOpen(true);
 			}}
-			className="btn absolute inset-y-0 right-0 z-9999"
+			className={cn(
+				"btn rounded-r-none absolute inset-y-2.5 right-0 z-999999 transition-all duration-500 ease",
+				isOpen && "transform translate-x-full",
+			)}
 		>
 			Open
 		</button>

apps/dispatch/app/(dispatch)/_components/pannel/Pannel.tsx

@@ -1,15 +1,19 @@
+import { Missions } from "(dispatch)/_components/pannel/Missions";
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
 
 export const Pannel = () => {
 	const { isOpen, setOpen } = usePannelStore();
 	return (
-		<div className={cn("flex-1 max-w-[200px] z-9999999")}>
+		<div className={cn("flex-1 max-w-[400px] z-9999999")}>
 			<div className="bg-base-100 h-full w-full">
 				<div className="flex justify-between items-center p-4">
 					<h1 className="text-xl font-bold">Pannel</h1>
-					<button onClick={() => setOpen(false)}>Close</button>
+					<button className="btn" onClick={() => setOpen(false)}>
+						Close
+					</button>
 				</div>
+				<Missions />
 			</div>
 		</div>
 	);

apps/dispatch/app/(dispatch)/page.tsx

@@ -2,6 +2,7 @@
 
 import { OpenButton } from "(dispatch)/_components/pannel/OpenButton";
 import { Pannel } from "(dispatch)/_components/pannel/Pannel";
+import MapToastCard2 from "(dispatch)/_components/toast/ToastCard";
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
@@ -13,14 +14,15 @@ export default () => {
 		<div
 			className={cn(
 				"relative flex-1 flex transition-all duration-500 ease",
-				!isOpen && "w-[calc(100%+200px)]",
+				!isOpen && "w-[calc(100%+400px)]",
 				isOpen && "w-[100%]",
 			)}
 		>
 			{/* <MapToastCard2 /> */}
-			<Map>
+			<div className="flex-1 relative flex">
 				<OpenButton />
-			</Map>
+				<Map />
+			</div>
 			<Pannel />
 		</div>
 	);

apps/dispatch/app/_store/missionsStore.ts

@@ -2,7 +2,21 @@ import { create } from "zustand";
 
 interface Mission {
 	id: string;
-	name: string;
+	addressLat: number;
+	addressLng: number;
+	addressStreet: string;
+	addressCity: string;
+	addressZip: string;
+	missionCategory: string;
+	missionKeyword: string;
+	missionSummary: string;
+	missionPatientInfo: string;
+	missionAdditionalInfo: string;
+	hpgAmbulanceState?: "ready" | "arrived" | "onway";
+	hpgFireEngineState?: "ready" | "arrived" | "onway";
+	hpgPoliceState?: "ready" | "arrived" | "onway";
+	hpgLocationLat?: number;
+	hpgLocationLng?: number;
 }
 
 interface MissionStore {
@@ -10,7 +24,21 @@ interface MissionStore {
 	setMissions: (missions: Mission[]) => void;
 }
 
-export const missionsStore = create<MissionStore>((set) => ({
-	missions: [],
+export const useMissionsStore = create<MissionStore>((set) => ({
+	missions: [
+		{
+			id: "01250325",
+			addressLat: 52.520008,
+			addressLng: 13.404954,
+			addressStreet: "Alexanderplatz",
+			addressCity: "Berlin",
+			addressZip: "10178",
+			missionAdditionalInfo: "Additional info",
+			missionCategory: "Category",
+			missionKeyword: "Keyword",
+			missionPatientInfo: "Patient info",
+			missionSummary: "Summary",
+		},
+	],
 	setMissions: (missions) => set({ missions }),
 }));

apps/dispatch/app/_store/pannelStore.ts

@@ -1,3 +1,4 @@
+"use client";
 import { create } from "zustand";
 
 interface PannelStore {
@@ -6,6 +7,6 @@ interface PannelStore {
 }
 
 export const usePannelStore = create<PannelStore>((set) => ({
-	isOpen: true,
+	isOpen: false,
 	setOpen: (isOpen) => set({ isOpen }),
 }));