From 80e3b218279a4ef63dbee6685298089975f30219 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sat, 21 Mar 2026 00:56:49 +0300
Subject: [PATCH] Fix: drag ghost visual, check-in date auto-fill, backend
 room_id patch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BookingCalendar: replace tiny ghost badge with full-size booking block
  (same color, correct width based on nights × cell width, centered on cursor)
- BookingModal: auto-set check-out to check-in+1 day when check-in changes
- Backend PATCH /bookings/:id: add room_id to allowed fields so drag-to-move saves correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/src/routes/bookings.ts              |  2 +-
 src/components/bookings/BookingModal.tsx    | 10 +++++--
 src/components/calendar/BookingCalendar.tsx | 31 +++++++++++++--------
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/backend/src/routes/bookings.ts b/backend/src/routes/bookings.ts
index 137babc..55d6c0c 100644
--- a/backend/src/routes/bookings.ts
+++ b/backend/src/routes/bookings.ts
@@ -144,7 +144,7 @@ const bookings: FastifyPluginAsync = async (fastify) => {
       const hotelId = await getHotelId(slug)
       if (!hotelId) return reply.code(404).send({ error: 'Hotel not found' })
 
-      const allowed = ['guest_name','guest_email','guest_phone','check_in','check_out',
+      const allowed = ['room_id','guest_name','guest_email','guest_phone','check_in','check_out',
                        'adults','children','status','source','total_amount','paid_amount','notes']
       const updates: string[] = []
       const values: unknown[] = []
diff --git a/src/components/bookings/BookingModal.tsx b/src/components/bookings/BookingModal.tsx
index b6fef56..e6b9fa8 100644
--- a/src/components/bookings/BookingModal.tsx
+++ b/src/components/bookings/BookingModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { format } from 'date-fns'
+import { format, addDays } from 'date-fns'
 import { Star, Banknote, CreditCard, AlertCircle, Map, Plus, Trash2, Tag, Minus, BedDouble, Tv2, Send, Loader2, CheckCircle2 } from 'lucide-react'
 import { MOCK_DISCOUNTS } from '../../pages/DiscountsPage'
 import type { Discount } from '../../pages/DiscountsPage'
@@ -298,7 +298,13 @@ export function BookingModal({ open, draft, rooms, bookings = [], onClose, onSav
                     <input
                       type="date" className="input"
                       value={form.checkIn}
-                      onChange={e => set('checkIn', e.target.value)}
+                      onChange={e => {
+                        const newCheckIn = e.target.value
+                        set('checkIn', newCheckIn)
+                        if (newCheckIn && (!form.checkOut || form.checkOut <= newCheckIn)) {
+                          set('checkOut', format(addDays(new Date(newCheckIn), 1), 'yyyy-MM-dd'))
+                        }
+                      }}
                     />
                   </div>
                   <div>
diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx
index 4ce7583..e4a750a 100644
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -753,17 +753,26 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
       )}
 
       {/* Drag ghost element */}
-      {movingBooking && ghostPos && (
-        <div
-          className={cn(
-            'fixed z-[9999] pointer-events-none px-3 py-1.5 rounded-lg text-white text-xs font-semibold shadow-xl border-2 border-white/40',
-            BOOKING_STATUS_COLORS[movingBooking.status],
-          )}
-          style={{ left: ghostPos.x + 14, top: ghostPos.y - 16 }}
-        >
-          {movingBooking.guestName}
-        </div>
-      )}
+      {movingBooking && ghostPos && (() => {
+        const nights = differenceInDays(parseISO(movingBooking.checkOut), parseISO(movingBooking.checkIn))
+        const ghostWidth = Math.max(80, Math.min(nights * CELL_WIDTH - 4, 320))
+        return (
+          <div
+            className={cn(
+              'fixed z-[9999] pointer-events-none flex items-center px-2 rounded-md text-white text-xs font-semibold shadow-2xl border-l-4 opacity-90',
+              BOOKING_STATUS_COLORS[movingBooking.status],
+            )}
+            style={{
+              left: ghostPos.x - ghostWidth / 2,
+              top: ghostPos.y - ROW_HEIGHT / 2 + 4,
+              width: ghostWidth,
+              height: ROW_HEIGHT - 8,
+            }}
+          >
+            <span className="truncate drop-shadow-sm">{movingBooking.guestName}</span>
+          </div>
+        )
+      })()}
 
       {/* Rental booking modal */}
       {rentalModal && (