From d7cc83ebdde64dd2bec087a1d9db763fc9646cc3 Mon Sep 17 00:00:00 2001
From: poduck <poduck@gmail.com>
Date: Thu, 27 Nov 2025 20:14:48 -0500
Subject: [PATCH] feat: Implement drag-and-drop in Month View with 'Day Snap'
 time slot overlay

---
 frontend/src/pages/OwnerScheduler.tsx | 158 ++++++++++++++++++++++++--
 1 file changed, 148 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/OwnerScheduler.tsx b/frontend/src/pages/OwnerScheduler.tsx
index 0744c28..21c24ca 100644
--- a/frontend/src/pages/OwnerScheduler.tsx
+++ b/frontend/src/pages/OwnerScheduler.tsx
@@ -89,6 +89,7 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
   const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
+  const [monthDropTarget, setMonthDropTarget] = useState<{ date: Date; rect: DOMRect } | null>(null);
 
   // State for editing appointments
   const [editDateTime, setEditDateTime] = useState('');
@@ -529,12 +530,17 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
     e.dataTransfer.setData('appointmentId', appointmentId);
     e.dataTransfer.effectAllowed = 'move';
 
-    // Calculate where on the appointment the drag started (relative to appointment, not timeline)
-    const target = e.currentTarget as HTMLElement;
-    const rect = target.getBoundingClientRect();
-    const offsetX = e.clientX - rect.left;  // Just the offset within the appointment itself
-    const offsetMinutes = Math.round((offsetX / (PIXELS_PER_MINUTE * zoomLevel)) / 15) * 15;
-    setDragOffsetMinutes(offsetMinutes);
+    // In month view, we don't track minute offset
+    if (viewMode === 'month') {
+      setDragOffsetMinutes(0);
+    } else {
+      // Calculate where on the appointment the drag started (relative to appointment, not timeline)
+      const target = e.currentTarget as HTMLElement;
+      const rect = target.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;  // Just the offset within the appointment itself
+      const offsetMinutes = Math.round((offsetX / (PIXELS_PER_MINUTE * zoomLevel)) / 15) * 15;
+      setDragOffsetMinutes(offsetMinutes);
+    }
 
     setTimeout(() => setDraggedAppointmentId(appointmentId), 0);
   };
@@ -542,10 +548,63 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
   const handleDragEnd = () => {
     setDraggedAppointmentId(null);
     setPreviewState(null);
+    setMonthDropTarget(null);
     // Reset isDragging after a short delay to allow click detection
     setTimeout(() => setIsDragging(false), 100);
   };
 
+  const handleMonthCellDragOver = (e: React.DragEvent, date: Date) => {
+    if (!draggedAppointmentId) return;
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Debounce the state update slightly or just check if changed
+    const target = e.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    
+    if (!monthDropTarget || monthDropTarget.date.getTime() !== date.getTime()) {
+      setMonthDropTarget({ date, rect });
+    }
+  };
+
+  const handleMonthTimeDrop = (e: React.DragEvent, targetHour: number, targetMinute: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!draggedAppointmentId || !monthDropTarget) return;
+
+    const appointment = appointments.find(a => a.id === draggedAppointmentId);
+    if (appointment) {
+      const newStartTime = new Date(monthDropTarget.date);
+      newStartTime.setHours(targetHour, targetMinute, 0, 0);
+      
+      // Preserve duration, keep resource
+      // Add to history
+      addToHistory({
+        type: 'move',
+        appointmentId: appointment.id,
+        before: {
+          startTime: new Date(appointment.startTime),
+          resourceId: appointment.resourceId,
+          durationMinutes: appointment.durationMinutes
+        },
+        after: {
+          startTime: newStartTime,
+          resourceId: appointment.resourceId,
+          durationMinutes: appointment.durationMinutes
+        }
+      });
+
+      updateMutation.mutate({
+        id: appointment.id,
+        updates: {
+          startTime: newStartTime
+        }
+      });
+    }
+    setMonthDropTarget(null);
+    setDraggedAppointmentId(null);
+  };
+
   const handleAppointmentClick = (appointment: Appointment) => {
     // Only open modal if we didn't actually drag or resize
     if (!isDragging && !isResizing) {
@@ -831,10 +890,11 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
                   return (
                     <div
                       key={index}
-                      className={`bg-white dark:bg-gray-900 min-h-[120px] p-2 transition-colors ${
-                        date ? 'hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer' : 'bg-gray-50 dark:bg-gray-800/50'
-                      }`}
+                      className={`bg-white dark:bg-gray-900 min-h-[120px] p-2 transition-colors relative ${
+                        date ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : 'bg-gray-50 dark:bg-gray-800/50'
+                      } ${monthDropTarget?.date.getTime() === date?.getTime() ? 'ring-2 ring-brand-500 ring-inset bg-brand-50 dark:bg-brand-900/20' : ''}`}
                       onClick={() => { if (date) { setViewDate(date); setViewMode('day'); } }}
+                      onDragOver={(e) => date && handleMonthCellDragOver(e, date)}
                     >
                       {date && (
                         <>
@@ -850,10 +910,15 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
                               const service = services.find(s => s.id === apt.serviceId);
                               const resource = resources.find(r => r.id === apt.resourceId);
                               const startTime = new Date(apt.startTime);
+                              const isDragged = apt.id === draggedAppointmentId;
+                              
                               return (
                                 <div
                                   key={apt.id}
-                                  className="text-xs p-1.5 rounded bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 truncate cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-800/50 transition-colors"
+                                  className={`text-xs p-1.5 rounded bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200 truncate cursor-grab active:cursor-grabbing hover:bg-blue-200 dark:hover:bg-blue-800/50 transition-colors ${isDragged ? 'opacity-50' : ''}`}
+                                  draggable
+                                  onDragStart={(e) => handleDragStart(e, apt.id)}
+                                  onDragEnd={handleDragEnd}
                                   onClick={(e) => { e.stopPropagation(); handleAppointmentClick(apt); }}
                                   title={`${apt.customerName} - ${service?.name} with ${resource?.name}`}
                                 >
@@ -878,6 +943,79 @@ const OwnerScheduler: React.FC<OwnerSchedulerProps> = ({ user, business }) => {
           </div>
         </div>
       )}
+      
+      {/* Month View Drop Overlay */}
+      {monthDropTarget && draggedAppointmentId && (
+        <Portal>
+          <div 
+            className="fixed z-50 bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-brand-200 dark:border-brand-800 overflow-hidden flex flex-col"
+            style={{
+              top: Math.min(window.innerHeight - 320, Math.max(10, monthDropTarget.rect.top - 20)), // Try to center vertically or keep on screen
+              left: monthDropTarget.rect.left - 10,
+              width: monthDropTarget.rect.width + 20,
+              height: 300,
+              animation: 'fadeIn 0.2s ease-out'
+            }}
+            onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }} // Consume drag over
+          >
+            <div className="bg-brand-50 dark:bg-brand-900/30 px-3 py-2 border-b border-brand-100 dark:border-brand-800 flex items-center justify-between shrink-0">
+              <span className="text-xs font-bold text-brand-700 dark:text-brand-300 uppercase tracking-wider">
+                Move to {monthDropTarget.date.getDate()}
+              </span>
+              <div className="text-[10px] text-brand-500 dark:text-brand-400 bg-brand-100 dark:bg-brand-800/50 px-1.5 py-0.5 rounded-full">
+                Drop in slot
+              </div>
+            </div>
+            <div className="flex-1 overflow-y-auto p-1 custom-scrollbar">
+              {Array.from({ length: END_HOUR - START_HOUR }, (_, i) => START_HOUR + i).map(hour => {
+                // Check if we have conflicts (simple check)
+                const dayStart = new Date(monthDropTarget.date);
+                dayStart.setHours(hour, 0, 0, 0);
+                const dayEnd = new Date(dayStart);
+                dayEnd.setMinutes(59);
+                
+                const hasAppt = filteredAppointments.some(a => {
+                  if (a.id === draggedAppointmentId) return false; // Don't count self
+                  const t = new Date(a.startTime);
+                  return t >= dayStart && t <= dayEnd;
+                });
+
+                return (
+                  <div key={hour} className="flex flex-col gap-1 mb-1">
+                    {/* Hour Slot */}
+                    <div 
+                      className={`flex items-center gap-2 p-2 rounded cursor-pointer transition-colors border border-transparent hover:border-brand-300 dark:hover:border-brand-600 ${hasAppt ? 'bg-gray-50 dark:bg-gray-700/30' : 'hover:bg-brand-50 dark:hover:bg-brand-900/20'}`}
+                      onDrop={(e) => handleMonthTimeDrop(e, hour, 0)}
+                      onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+                    >
+                      <div className="w-12 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
+                        {hour > 12 ? `${hour - 12} PM` : `${hour} ${hour === 12 ? 'PM' : 'AM'}`}
+                      </div>
+                      <div className="flex-1 h-6 border-l border-gray-200 dark:border-gray-700 pl-2 flex items-center">
+                        {hasAppt && <div className="h-1.5 w-1.5 rounded-full bg-gray-400 dark:bg-gray-500 mr-2" title="Existing appointment"></div>}
+                        <div className="h-px flex-1 bg-gray-100 dark:bg-gray-800"></div>
+                      </div>
+                    </div>
+                    {/* Half Hour Slot */}
+                    <div 
+                      className={`flex items-center gap-2 p-2 rounded cursor-pointer transition-colors border border-transparent hover:border-brand-300 dark:hover:border-brand-600 ${hasAppt ? 'bg-gray-50 dark:bg-gray-700/30' : 'hover:bg-brand-50 dark:hover:bg-brand-900/20'}`}
+                      onDrop={(e) => handleMonthTimeDrop(e, hour, 30)}
+                      onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+                    >
+                      <div className="w-12 text-right text-[10px] text-gray-400 dark:text-gray-500">
+                        :30
+                      </div>
+                      <div className="flex-1 h-4 border-l border-dashed border-gray-200 dark:border-gray-700 pl-2 flex items-center">
+                         <div className="h-px flex-1 bg-gray-50 dark:bg-gray-800"></div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </Portal>
+      )}
 
       {/* Day/Week View - Timeline */}
       {viewMode !== 'month' && (