Add report Window & reposition Chat WIndow

apps/dispatch/app/_store/reportStore.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface ReportStore {
+	ownId: null | string;
+	reportOpen: boolean;
+	setReportOpen: (open: boolean) => void;
+	setOwnId: (id: string) => void;
+}
+
+export const useReportStore = create<ReportStore>((set) => ({
+	ownId: null,
+	reportOpen: false,
+	setReportOpen: (open: boolean) => set({ reportOpen: open }),
+	setOwnId: (id: string) => set({ ownId: id }),
+}));
+// TODO: implement logic for reports

apps/dispatch/app/dispatch/_components/left/Chat.tsx

@@ -8,8 +8,10 @@ import {
 	getDispatcher,
 } from "dispatch/_components/navbar/_components/action";
 import { cn } from "helpers/cn";
+import { useReportStore } from "_store/reportStore";
 
 export const Chat = () => {
+	const { setReportOpen } = useReportStore();
 	const {
 		chatOpen,
 		setChatOpen,
@@ -63,9 +65,7 @@ export const Chat = () => {
 	}, [addTabValue, chats]);
 
 	return (
-		<div
+		<div className={cn("dropdown dropdown-right", chatOpen && "dropdown-open")}>
-			className={cn("dropdown dropdown-center", chatOpen && "dropdown-open")}
-		>
 			<div className="indicator">
 				{Object.values(chats).some((c) => c.notification) && (
 					<span className="indicator-item status status-info"></span>
@@ -73,7 +73,7 @@ export const Chat = () => {
 				<button
 					className="btn btn-soft btn-sm btn-primary"
 					onClick={() => {
-						console.log("clicked");
+						setReportOpen(false);
 						setChatOpen(!chatOpen);
 						if (selectedChat) {
 							setChatNotification(selectedChat, false);
@@ -86,7 +86,7 @@ export const Chat = () => {
 			{chatOpen && (
 				<div
 					tabIndex={0}
-					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100]"
+					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-primary"
 				>
 					<div className="card-body">
 						<div className="join">

apps/dispatch/app/dispatch/_components/left/Report.tsx

@@ -0,0 +1,132 @@
+"use client";
+import { ExclamationTriangleIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
+import { useReportStore } from "_store/reportStore";
+import { useSession } from "next-auth/react";
+import { useEffect, useRef, useState } from "react";
+import {
+	Dispatcher,
+	getDispatcher,
+} from "dispatch/_components/navbar/_components/action";
+import { cn } from "helpers/cn";
+import { useChatStore } from "_store/chatStore";
+
+export const Report = () => {
+	const { setChatOpen } = useChatStore();
+	const { reportOpen, setReportOpen, setOwnId } = useReportStore();
+	const [sending, setSending] = useState(false);
+	const session = useSession();
+	const [selectedPlayer, setSelectedPlayer] = useState<string>("");
+	const [message, setMessage] = useState<string>("");
+	const [dispatcher, setDispatcher] = useState<Dispatcher[] | null>(null);
+	const timeout = useRef<NodeJS.Timeout | null>(null);
+
+	useEffect(() => {
+		if (!session.data?.user.id) return;
+		setOwnId(session.data.user.id);
+	}, [session]);
+
+	useEffect(() => {
+		const fetchDispatcher = async () => {
+			const data = await getDispatcher();
+			if (data) {
+				const filteredDispatcher = data.filter(
+					(user) => user.userId !== session.data?.user.id,
+				);
+				setDispatcher(filteredDispatcher);
+			}
+			if (!selectedPlayer && data[0]) setSelectedPlayer(data[0].userId);
+		};
+
+		timeout.current = setInterval(() => {
+			fetchDispatcher();
+		}, 1000000);
+		fetchDispatcher();
+
+		return () => {
+			if (timeout.current) {
+				clearInterval(timeout.current);
+				timeout.current = null;
+				console.log("cleared");
+			}
+		};
+	}, [selectedPlayer]);
+
+	return (
+		<div
+			className={cn("dropdown dropdown-right", reportOpen && "dropdown-open")}
+		>
+			<div className="indicator">
+				<button
+					className="btn btn-soft btn-sm btn-error"
+					onClick={() => {
+						setChatOpen(false);
+						setReportOpen(!reportOpen);
+					}}
+				>
+					<ExclamationTriangleIcon className="w-4 h-4" />
+				</button>
+			</div>
+			{reportOpen && (
+				<div
+					tabIndex={0}
+					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
+				>
+					<div className="card-body">
+						<div className="join">
+							<select
+								className="select select-sm w-full"
+								value={selectedPlayer}
+								onChange={(e) => setSelectedPlayer(e.target.value)}
+							>
+								{!dispatcher?.length && (
+									<option disabled={true}>Keine Spieler gefunden</option>
+								)}
+								{dispatcher?.map((user) => (
+									<option key={user.userId} value={user.userId}>
+										{user.name}
+									</option>
+								))}
+							</select>
+						</div>
+						<div className="join mt-4">
+							<div className="w-full">
+								<label className="input join-item w-full">
+									<input
+										type="text"
+										required
+										className="w-full"
+										placeholder="Nachricht eingeben"
+										onChange={(e) => setMessage(e.target.value)}
+										value={message}
+									/>
+								</label>
+							</div>
+							<button
+								className="btn btn-soft join-item"
+								onClick={(e) => {
+									e.preventDefault();
+									if (message.length < 1 || !selectedPlayer) return;
+									setSending(true);
+									// TODO: Implement logic for reports
+									/* sendReport(selectedPlayer, message).then(() => {
+										setMessage("");
+										setSending(false);
+									}); */
+									setMessage("");
+									setSending(false);
+								}}
+								disabled={sending}
+							>
+								{sending ? (
+									<span className="loading loading-spinner loading-sm"></span>
+								) : (
+									<PaperPlaneIcon />
+								)}
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};

apps/dispatch/app/dispatch/_components/navbar/Navbar.tsx

@@ -5,7 +5,6 @@ import { ThemeSwap } from "./_components/ThemeSwap";
 import { Audio } from "./_components/Audio";
 import { useState } from "react";
 import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
-import { Chat } from "./_components/Chat";
 import Link from "next/link";
 
 export default function Navbar() {
@@ -25,11 +24,6 @@ export default function Navbar() {
 			<div className="flex items-center gap-2">
 				<a className="btn btn-ghost text-xl">VAR Leitstelle V2</a>
 			</div>
-			<div className="bg-base-200 rounded-box flex items-center gap-2 p-1">
-				<div className="flex items-center gap-2">
-					<Chat />
-				</div>
-			</div>
 
 			<div className="flex items-center gap-5">
 				<div className="flex items-center gap-2">

apps/dispatch/app/dispatch/page.tsx

@@ -4,6 +4,8 @@ import { Pannel } from "dispatch/_components/pannel/Pannel";
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
+import { Chat } from "./_components/left/Chat";
+import { Report } from "./_components/left/Report";
 const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
 
 const DispatchPage = () => {
@@ -12,6 +14,12 @@ const DispatchPage = () => {
 		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
 			{/* <MapToastCard2 /> */}
 			<div className="flex flex-1 relative">
+				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
+					<Chat />
+					<div className="mt-2">
+						<Report />
+					</div>
+				</div>
 				<Map />
 			</div>
 			<div