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>
 	);