hotel-manage-stack/room-planner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Vacancy participates in the Gantt bracket system

Browse source 
- A vacant room spans into adjacent vacant days (left/right border removed, card extends into the margin) exactly like multi-night bookings
- An occupied room adjacent to a vacant day shows a grey 'vacant' sliver bracket on that side (previously no bracket rendered at all when the neighbouring day was empty)
- previous_status falls back to 'vacant' when nothing occupied yesterday; next_status falls back to 'vacant' when nothing occupies tomorrow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-04 18:43:59 +00:00
parent b528624be0
commit 7fb9e245d9
2 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
backend/src/lib/booking-flow.js
View file

@ -118,6 +118,13 @@ export function classifyRoom(site, allBookings, viewDate, yesterday, tomorrow) {
// flips the status to 'departed'. Do not override — let real status drive colour. // flips the status to 'departed'. Do not override — let real status drive colour.
const prevStatus = prevBooking ? (prevBooking.booking_status || '').toLowerCase() : null const prevStatus = prevBooking ? (prevBooking.booking_status || '').toLowerCase() : null
// Vacancy participates in the bracket system like bookings: a vacant room
// spans into adjacent vacant days (no side border), while a day adjacent to
// vacancy on an occupied room shows a grey 'vacant' bracket on that side.
const prevVacant = !prevBooking
const nextVacant = !nextBooking
const isVacantFlow = !primaryBooking
// NewBook may return category info as flat fields or a nested object. // NewBook may return category info as flat fields or a nested object.
const catId = site.site_category_id ?? site.category_id ?? site.category?.id ?? null const catId = site.site_category_id ?? site.category_id ?? site.category?.id ?? null
const catName = site.site_category_name ?? site.category_name ?? site.category?.name ?? '' const catName = site.site_category_name ?? site.category_name ?? site.category?.name ?? ''
@ -135,13 +142,15 @@ export function classifyRoom(site, allBookings, viewDate, yesterday, tomorrow) {
flow_type: flowType, flow_type: flowType,
booking: primaryBooking, booking: primaryBooking,
spans_previous: !!primaryBooking && !!arrivalDate && arrivalDate < viewDate, spans_previous: isVacantFlow
spans_next: spansNext, ? prevVacant
: !!primaryBooking && !!arrivalDate && arrivalDate < viewDate,
spans_next: isVacantFlow ? nextVacant : spansNext,
previous_booking: prevBooking, previous_booking: prevBooking,
next_booking: nextBooking, next_booking: nextBooking,
previous_status: prevStatus, previous_status: prevStatus ?? (prevVacant ? 'vacant' : null),
next_status: nextBooking ? (nextBooking.booking_status || '').toLowerCase() : null, next_status: nextBooking ? (nextBooking.booking_status || '').toLowerCase() : 'vacant',
departing_booking: effectiveDeparting, departing_booking: effectiveDeparting,
departing_time: effectiveDeparting ? toTimeStr(effectiveDeparting.booking_departure) : null, departing_time: effectiveDeparting ? toTimeStr(effectiveDeparting.booking_departure) : null,

2
frontend/src/index.css
View file

@ -440,6 +440,7 @@ html, body, #root {
.room-card[data-previous-status="confirmed"]::before { border-color: #10b981; } .room-card[data-previous-status="confirmed"]::before { border-color: #10b981; }
.room-card[data-previous-status="unconfirmed"]::before { border-color: #f59e0b; } .room-card[data-previous-status="unconfirmed"]::before { border-color: #f59e0b; }
.room-card[data-previous-status="departed"]::before { border-color: #a855f7; } .room-card[data-previous-status="departed"]::before { border-color: #a855f7; }
.room-card[data-previous-status="vacant"]::before { border-color: #d1d5db; }
/* Right bracket: next adjacent booking status. */ /* Right bracket: next adjacent booking status. */
.room-card[data-next-status]::after { .room-card[data-next-status]::after {
@ -459,6 +460,7 @@ html, body, #root {
.room-card[data-next-status="confirmed"]::after { border-color: #10b981; } .room-card[data-next-status="confirmed"]::after { border-color: #10b981; }
.room-card[data-next-status="unconfirmed"]::after { border-color: #f59e0b; } .room-card[data-next-status="unconfirmed"]::after { border-color: #f59e0b; }
.room-card[data-next-status="departed"]::after { border-color: #a855f7; } .room-card[data-next-status="departed"]::after { border-color: #a855f7; }
.room-card[data-next-status="vacant"]::after { border-color: #d1d5db; }
/* Departure time shown in left-bracket sliver (while prev booking still 'arrived'). /* Departure time shown in left-bracket sliver (while prev booking still 'arrived').
The bracket widens to 19px when a time is shown; the time reads vertically. */ The bracket widens to 19px when a time is shown; the time reads vertically. */