lots of updates

frontend/src/components/pages/ScheduleOnSite.vue

@@ -152,7 +152,14 @@
 						density="compact"
 					></v-btn>
 				</div>
-				<div v-if="!isSidebarCollapsed" class="unscheduled-meetings-list">
+				<div
+					v-if="!isSidebarCollapsed"
+					class="unscheduled-meetings-list"
+					:class="{ 'drag-over-unscheduled': isUnscheduledDragOver }"
+					@dragover="handleUnscheduledDragOver"
+					@dragleave="handleUnscheduledDragLeave"
+					@drop="handleDropToUnscheduled"
+				>
 					<div v-if="unscheduledMeetings.length === 0" class="empty-state">
 						<v-icon size="large" color="grey-lighten-1">mdi-calendar-check</v-icon>
 						<p>No unscheduled meetings</p>
@@ -239,6 +246,7 @@ const isDragOver = ref(false);
 const dragOverSlot = ref(null);
 const draggedMeeting = ref(null);
 const originalMeetingForReschedule = ref(null); // Store original meeting data for reschedules
+const isUnscheduledDragOver = ref(false);
 
 // Sidebar state
 const isSidebarCollapsed = ref(false);
@@ -431,6 +439,12 @@ const formatDateForUrl = (date) => {
 	return date.toISOString().split("T")[0];
 };
 
+const getAddressText = (address) => {
+	if (!address) return "";
+	if (typeof address === "string") return address;
+	return address.full_address || address.fullAddress || address.name || "";
+};
+
 const selectTimeSlot = (date, time) => {
 	console.log("Selected time slot:", date, time);
 };
@@ -537,17 +551,21 @@ const handleMeetingDragStart = (event, meeting) => {
 	console.log("Rescheduling meeting:", draggedMeeting.value);
 };
 
+const resetDragState = () => {
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	isUnscheduledDragOver.value = false;
+	draggedMeeting.value = null;
+	originalMeetingForReschedule.value = null;
+};
+
 const handleDragEnd = (event) => {
 	// If drag was cancelled (not dropped successfully), restore the original meeting
 	if (originalMeetingForReschedule.value && draggedMeeting.value?.isRescheduling) {
 		// Meeting wasn't successfully dropped, so it's still in the array
 		console.log("Drag cancelled, meeting remains in original position");
 	}
-
-	draggedMeeting.value = null;
-	originalMeetingForReschedule.value = null;
-	isDragOver.value = false;
-	dragOverSlot.value = null;
+	resetDragState();
 };
 
 const handleDragOver = (event, date, time) => {
@@ -611,10 +629,7 @@ const handleDrop = async (event, date, time) => {
 		if (droppedMeeting.isRescheduling) {
 			await loadWeekMeetings();
 		}
-		isDragOver.value = false;
-		dragOverSlot.value = null;
-		draggedMeeting.value = null;
-		originalMeetingForReschedule.value = null;
+		resetDragState();
 		return;
 	}
 
@@ -710,10 +725,77 @@ const handleDrop = async (event, date, time) => {
 	}
 
 	// Reset drag state
-	isDragOver.value = false;
-	dragOverSlot.value = null;
-	draggedMeeting.value = null;
-	originalMeetingForReschedule.value = null;
+	resetDragState();
+};
+
+const handleUnscheduledDragOver = (event) => {
+	if (!draggedMeeting.value) return;
+	event.preventDefault();
+	event.dataTransfer.dropEffect = "move";
+	isUnscheduledDragOver.value = true;
+};
+
+const handleUnscheduledDragLeave = () => {
+	isUnscheduledDragOver.value = false;
+};
+
+const handleDropToUnscheduled = async (event) => {
+	event.preventDefault();
+
+	if (!draggedMeeting.value) return;
+
+	const droppedMeeting = { ...draggedMeeting.value };
+
+	// Only act when moving a scheduled meeting back to unscheduled
+	if (!droppedMeeting.isRescheduling || !droppedMeeting.id) {
+		resetDragState();
+		return;
+	}
+
+	try {
+		loadingStore.setLoading(true);
+
+		await Api.updateOnSiteMeeting(droppedMeeting.id, {
+			status: "Unscheduled",
+			start_time: null,
+			end_time: null,
+		});
+
+		// Remove from the scheduled list
+		meetings.value = meetings.value.filter(
+			(meeting) => meeting.name !== droppedMeeting.id && meeting.id !== droppedMeeting.id,
+		);
+
+		// Add to unscheduled list if not already present
+		const exists = unscheduledMeetings.value.some((m) => m.name === droppedMeeting.id);
+		if (!exists) {
+			unscheduledMeetings.value.unshift({
+				name: droppedMeeting.id,
+				address: getAddressText(droppedMeeting.address),
+				notes: droppedMeeting.notes || "",
+				status: "Unscheduled",
+				assigned_employee: droppedMeeting.assigned_employee || "",
+			});
+		}
+
+		notificationStore.addNotification({
+			type: "success",
+			title: "Meeting Unscheduled",
+			message: "Meeting moved back to the unscheduled list",
+			duration: 4000,
+		});
+	} catch (error) {
+		console.error("Error unscheduling meeting:", error);
+		notificationStore.addNotification({
+			type: "error",
+			title: "Error",
+			message: "Failed to move meeting to unscheduled",
+			duration: 5000,
+		});
+	} finally {
+		loadingStore.setLoading(false);
+		resetDragState();
+	}
 };
 
 const loadUnscheduledMeetings = async () => {
@@ -1001,6 +1083,12 @@ watch(
 	padding: 8px 0;
 }
 
+.unscheduled-meetings-list.drag-over-unscheduled {
+	border: 2px dashed #4caf50;
+	border-radius: 6px;
+	background-color: #f0fff3;
+}
+
 .empty-state {
 	display: flex;
 	flex-direction: column;