golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add real-time booking collaboration via WebSocket

Browse Source 
- 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>
This commit is contained in:
HotelSync
2026-03-17 18:05:09 +03:00
parent 1d24e5a4c4
commit 3506105fc1
7 changed files with 1919 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/calendar/BookingCalendar.tsx
View File

@@ -16,6 +16,8 @@ const ROW_HEIGHT_COMPACT = 34
const LABEL_WIDTH = 160
const DAYS_VISIBLE = 30
export type BookingLock = { checkIn: string; checkOut: string; lockedBy: string }
interface BookingCalendarProps {
rooms: Room[]
bookings: Booking[]
@@ -26,6 +28,9 @@ interface BookingCalendarProps {
rentalObjects?: RentalObject[]
rentalBookings?: RentalBooking[]
onRentalBookingCreate?: (b: RentalBooking) => void
locks?: Map<string, BookingLock>
onDraftStart?: (roomId: string, checkIn: string, checkOut: string) => void
onDraftCancel?: (roomId: string) => void
}
const CATEGORY_ORDER: Record<string, number> = {
@@ -49,7 +54,7 @@ function getRoomTypeColor(type: string): string {
return map[type] ?? 'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300'
}
export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpdate, onBookingBulkUpdate, fadingBookingIds, rentalObjects, rentalBookings, onRentalBookingCreate }: BookingCalendarProps) {
export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpdate, onBookingBulkUpdate, fadingBookingIds, rentalObjects, rentalBookings, onRentalBookingCreate, locks = new Map(), onDraftStart, onDraftCancel }: BookingCalendarProps) {
const [startDate, setStartDate] = useState(() => startOfDay(new Date()))
const [visibleDays, setVisibleDays] = useState(DAYS_VISIBLE)
@@ -141,10 +146,17 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
const checkIn = format(addDays(startDate, minDay), 'yyyy-MM-dd')
const checkOut = format(addDays(startDate, maxDay + 1), 'yyyy-MM-dd')
setBookingModalDraft({ roomId: dragStart.roomId, checkIn, checkOut })
onDraftStart?.(dragStart.roomId, checkIn, checkOut)
setDragStart(null)
setDragEnd(null)
setDraft(null)
}, [dragStart, dragEnd, startDate])
}, [dragStart, dragEnd, startDate, onDraftStart])
const getLockStyle = (roomId: string) => {
const lock = locks.get(roomId)
if (!lock) return null
return getBlockStyle({ checkIn: lock.checkIn, checkOut: lock.checkOut, roomId } as Booking)
}
const getDraftStyle = (roomId: string) => {
if (!dragStart || dragEnd === null || dragStart.roomId !== roomId) return null
@@ -466,6 +478,30 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
style={{ left: draftStyle.left + 2, width: draftStyle.width }}
/>
)}
{/* Lock overlay — another manager is editing this room */}
{(() => {
const lockStyle = getLockStyle(room.id)
if (!lockStyle) return null
const lock = locks.get(room.id)!
return (
<div
className="absolute top-1 bottom-1 rounded-md pointer-events-none z-10"
style={{
left: lockStyle.left + 2,
width: lockStyle.width,
background: 'repeating-linear-gradient(45deg, rgba(100,116,139,0.2) 0px, rgba(100,116,139,0.2) 4px, rgba(100,116,139,0.05) 4px, rgba(100,116,139,0.05) 10px)',
border: '1.5px dashed rgba(100,116,139,0.55)',
}}
>
{lockStyle.width > 60 && (
<span className="absolute inset-x-1 top-1/2 -translate-y-1/2 text-[9px] text-slate-500 dark:text-slate-400 font-medium truncate text-center leading-tight select-none">
✏️ {lock.lockedBy}
</span>
)}
</div>
)
})()}
</div>
</div>
)
@@ -600,7 +636,10 @@ export function BookingCalendar({ rooms, bookings, onBookingCreate, onBookingUpd
open={true}
draft={bookingModalDraft}
rooms={rooms}
onClose={() => setBookingModalDraft(null)}
onClose={() => {
if (bookingModalDraft) onDraftCancel?.(bookingModalDraft.roomId)
setBookingModalDraft(null)
}}
onSave={(data) => {
onBookingCreate(data)
setBookingModalDraft(null)