Add real-time booking collaboration via WebSocket

- Backend: /ws relay endpoint (@fastify/websocket)
- Frontend: useHotelSocket hook with lock/unlock/booking events
- Calendar: lock overlay with diagonal stripes shows other manager editing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/CalendarPage.tsx

@@ -1,14 +1,18 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { BookingCalendar } from '../components/calendar/BookingCalendar'
 import { RENTAL_OBJECTS, MOCK_RENTAL_BOOKINGS } from '../data/rentalData'
 import { useModules } from '../contexts/ModulesContext'
 import { useAuth } from '../contexts/AuthContext'
 import { api } from '../lib/api'
+import { useHotelSocket } from '../hooks/useHotelSocket'
+import type { WsMessage } from '../hooks/useHotelSocket'
 import type { Room, Booking } from '../types'
 import type { RentalBooking } from '../data/rentalData'
 
+export type BookingLock = { checkIn: string; checkOut: string; lockedBy: string }
+
 export function CalendarPage() {
-  const { user } = useAuth()
+  const { user, session } = useAuth()
   const slug = user?.hotelSlug ?? ''
   const { statuses } = useModules()
   const isRentalActive = statuses['rental'] === 'active' || statuses['rental'] === 'trial'
@@ -17,6 +21,7 @@ export function CalendarPage() {
   const [bookings, setBookings] = useState<Booking[]>([])
   const [fadingBookings, setFadingBookings] = useState<Set<string>>(new Set())
   const [rentalBookings, setRentalBookings] = useState<RentalBooking[]>(MOCK_RENTAL_BOOKINGS)
+  const [locks, setLocks] = useState<Map<string, BookingLock>>(new Map())
 
   useEffect(() => {
     if (!slug) return
@@ -29,6 +34,23 @@ export function CalendarPage() {
     }).catch(console.error)
   }, [slug])
 
+  const handleWsMessage = useCallback((msg: WsMessage) => {
+    if (msg.type === 'lock') {
+      setLocks(prev => new Map(prev).set(msg.roomId, { checkIn: msg.checkIn, checkOut: msg.checkOut, lockedBy: msg.lockedBy }))
+    } else if (msg.type === 'unlock') {
+      setLocks(prev => { const n = new Map(prev); n.delete(msg.roomId); return n })
+    } else if (msg.type === 'booking:created') {
+      setBookings(prev => prev.find(b => b.id === msg.booking.id) ? prev : [...prev, msg.booking])
+      setLocks(prev => { const n = new Map(prev); n.delete(msg.booking.roomId); return n })
+    } else if (msg.type === 'booking:updated') {
+      setBookings(prev => prev.map(b => b.id === msg.booking.id ? msg.booking : b))
+    } else if (msg.type === 'booking:deleted') {
+      setBookings(prev => prev.filter(b => b.id !== msg.bookingId))
+    }
+  }, [])
+
+  const { send } = useHotelSocket({ slug, token: session?.token ?? null, onMessage: handleWsMessage })
+
   const handleCreate = async (data: Partial<Booking>) => {
     try {
       const created = await api.bookings.create(slug, {
@@ -39,6 +61,8 @@ export function CalendarPage() {
         totalAmount: data.totalAmount, notes: data.notes,
       })
       setBookings(prev => [...prev, created])
+      send({ type: 'booking:created', booking: created })
+      if (data.roomId) send({ type: 'unlock', roomId: data.roomId })
     } catch (err) {
       console.error('Failed to create booking:', err)
     }
@@ -54,6 +78,7 @@ export function CalendarPage() {
         totalAmount: data.totalAmount, notes: data.notes,
       })
       setBookings(prev => prev.map(b => b.id === id ? updated : b))
+      send({ type: 'booking:updated', booking: updated })
       if (data.status === 'cancelled') {
         setFadingBookings(prev => new Set([...prev, id]))
         setTimeout(() => {
@@ -79,14 +104,19 @@ export function CalendarPage() {
         results.forEach(r => { next = next.map(b => b.id === r.id ? r : b) })
         return next
       })
+      results.forEach(r => send({ type: 'booking:updated', booking: r }))
     } catch (err) {
       console.error('Failed to bulk update bookings:', err)
     }
   }
 
-  const handleRentalCreate = (b: RentalBooking) => {
-    setRentalBookings(prev => [...prev, b])
-  }
+  const handleDraftStart = useCallback((roomId: string, checkIn: string, checkOut: string) => {
+    send({ type: 'lock', roomId, checkIn, checkOut, lockedBy: user?.name ?? 'Менеджер' })
+  }, [send, user?.name])
+
+  const handleDraftCancel = useCallback((roomId: string) => {
+    send({ type: 'unlock', roomId })
+  }, [send])
 
   return (
     <div className="flex flex-col h-full">
@@ -100,7 +130,10 @@ export function CalendarPage() {
           fadingBookingIds={fadingBookings}
           rentalObjects={isRentalActive ? RENTAL_OBJECTS : undefined}
           rentalBookings={isRentalActive ? rentalBookings : undefined}
-          onRentalBookingCreate={isRentalActive ? handleRentalCreate : undefined}
+          onRentalBookingCreate={isRentalActive ? (b: RentalBooking) => setRentalBookings(prev => [...prev, b]) : undefined}
+          locks={locks}
+          onDraftStart={handleDraftStart}
+          onDraftCancel={handleDraftCancel}
         />
       </div>
     </div>