Fix Pilot-conenction

apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Connection.tsx

@@ -3,11 +3,10 @@
 import { useSession } from "next-auth/react";
 import { useDispatchConnectionStore } from "../../../../../_store/dispatch/connectionStore";
 import { useEffect, useRef, useState } from "react";
-import { toast } from "react-hot-toast";
 import { useMutation } from "@tanstack/react-query";
 import { Prisma } from "@repo/db";
 import { changeDispatcherAPI } from "_querys/dispatcher";
-import { getNextDateWithTime } from "@repo/shared-components";
+import { Button, getNextDateWithTime } from "@repo/shared-components";
 
 export const ConnectionBtn = () => {
 	const modalRef = useRef<HTMLDialogElement>(null);
@@ -20,44 +19,19 @@ export const ConnectionBtn = () => {
 		mutationFn: ({ id, data }: { id: number; data: Prisma.ConnectedDispatcherUpdateInput }) =>
 			changeDispatcherAPI(id, data),
 	});
-	const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
 	const session = useSession();
 	const uid = session.data?.user?.id;
 
 	// useEffect für die Logoff-Zeit
 	const [logoffHours, logoffMinutes] = form.logoffTime?.split(":").map(Number) || [];
 
-	useEffect(() => {
-		if (!logoffHours || !logoffMinutes) return;
-		if (logoffDebounce) clearTimeout(logoffDebounce);
-
-		const timeout = setTimeout(async () => {
-			if (!logoffHours || !logoffMinutes || !connection.connectedDispatcher) return;
-			await changeDispatcherMutation.mutateAsync({
-				id: connection.connectedDispatcher?.id,
-				data: {
-					esimatedLogoutTime:
-						logoffHours && logoffMinutes ? getNextDateWithTime(logoffHours, logoffMinutes) : null,
-				},
-			});
-			toast.success("Änderung gespeichert!");
-			modalRef.current?.close();
-		}, 2000);
-
-		setLogoffDebounce(timeout);
-
-		// Cleanup function
-		return () => {
-			if (logoffDebounce) clearTimeout(logoffDebounce);
-		};
-	}, [form.logoffTime, connection.connectedDispatcher]);
-
 	useEffect(() => {
 		// Disconnect the socket when the component unmounts
 		return () => {
 			connection.disconnect();
 		};
 	}, [connection.disconnect]);
+
 	if (!uid) return null;
 	return (
 		<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
@@ -122,16 +96,36 @@ export const ConnectionBtn = () => {
 						<form method="dialog" className="w-full flex justify-between">
 							<button className="btn btn-soft">Zurück</button>
 							{connection.status == "connected" ? (
-								<button
-									className="btn btn-soft btn-error"
-									type="submit"
-									onSubmit={() => false}
-									onClick={() => {
-										connection.disconnect();
-									}}
-								>
-									Verbindung Trennen
-								</button>
+								<>
+									<Button
+										className="btn"
+										onClick={async () => {
+											if (!connection.connectedDispatcher?.id) return;
+											await changeDispatcherMutation.mutateAsync({
+												id: connection.connectedDispatcher?.id,
+												data: {
+													esimatedLogoutTime:
+														logoffHours && logoffMinutes
+															? getNextDateWithTime(logoffHours, logoffMinutes)
+															: null,
+												},
+											});
+											modalRef.current?.close();
+										}}
+									>
+										Logoff-Zeit speichern
+									</Button>
+									<button
+										className="btn btn-soft btn-error"
+										type="submit"
+										onSubmit={() => false}
+										onClick={() => {
+											connection.disconnect();
+										}}
+									>
+										Verbindung Trennen
+									</button>
+								</>
 							) : (
 								<button
 									type="submit"