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

Widen left bracket sliver 3× for overdue checkouts on today's view

Browse source 
When viewing today and the departing booking is still 'arrived' in NewBook
(not yet checked out), the blue left-bracket sliver now extends ~3× wider
into the arriving card slot with a light blue fill, making the uncleared
checkout visually prominent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-10 12:10:24 +00:00
parent 8606bbbf6d
commit d14670b060
2 changed files with 28 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/RoomCard.tsx
View file

@ -108,6 +108,9 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
? room.departing_time.slice(0, 5) ? room.departing_time.slice(0, 5)
: null : null
// On today specifically: previous booking still hasn't checked out — widen the bracket
const isOverdueCheckout = isToday && !!sliverDepartTime
// CSS data attributes for the Gantt bracket system // CSS data attributes for the Gantt bracket system
const dataAttrs: Record<string, string> = {} const dataAttrs: Record<string, string> = {}
if (bookingStatus) dataAttrs['data-booking-status'] = bookingStatus if (bookingStatus) dataAttrs['data-booking-status'] = bookingStatus
@ -139,7 +142,7 @@ function RoomCard({ room, viewDate, config, onClick }: Props) {
return ( return (
<div <div
className={`room-card${isBlocked ? ' room-blocked' : ''}${sliverDepartTime ? ' has-sliver-time' : ''}`} className={`room-card${isBlocked ? ' room-blocked' : ''}${sliverDepartTime ? ' has-sliver-time' : ''}${isOverdueCheckout ? ' has-overdue-checkout' : ''}`}
{...(dataAttrs as React.HTMLAttributes<HTMLDivElement>)} {...(dataAttrs as React.HTMLAttributes<HTMLDivElement>)}
onClick={() => onClick(room)} onClick={() => onClick(room)}
> >

24
frontend/src/index.css
View file

@ -487,6 +487,15 @@ html, body, #root {
letter-spacing: .04em; letter-spacing: .04em;
} }
/* Overdue checkout today: bracket extends ~3× into the arriving card slot */
.room-card.has-overdue-checkout {
padding-left: 24px;
}
.room-card.has-overdue-checkout[data-previous-status]::before {
width: 46px;
background: rgba(59, 130, 246, 0.1);
}
/* Blocked room */ /* Blocked room */
.room-card.room-blocked { .room-card.room-blocked {
background: #4b5563; background: #4b5563;
@ -1063,3 +1072,18 @@ html, body, #root {
padding: 40px; padding: 40px;
text-align: center; text-align: center;
} }
/* Sidebar scrollbar */
.nav-scroll::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.nav-scroll::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
.nav-scroll::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }