Task #662: Google-Calendar-style room booking calendar view
Replaced the Protocol bookings "Calendar" view (previously an agenda list grouped by day) with a two-panel Google-Calendar layout in artifacts/tx-os/src/pages/protocol.tsx: - LEFT: a mini month day-picker (reuses components/ui/calendar.tsx, react-day-picker single mode) driving a selectedDay state. Days that have bookings get a small sky dot via a `booked` modifier. - RIGHT: a single-day vertical time-grid (BookingDayGrid) over working hours 07:00–22:00 (56px/hour). Bookings render as absolutely-positioned blocks: top = start offset, height = duration (min 22px), colored by status (BOOKING_BLOCK_STYLE) with an inline-start accent border and a title/room/time label. - Overlapping bookings are laid out side-by-side via interval-partition column assignment (layoutDayBookings), chained overlaps share a column count. - A live RED current-time line + red dot (useNow, 60s) shows only when the selected day is today and within grid hours. Details: - View-only (no drag/create); single-day grid only. No backend changes. - RTL/i18n: logical props (insetInlineStart, border-s) so it mirrors in Arabic; added protocol.bookings.emptyDay to ar.json + en.json. - Blocks with no visible intersection with the grid range are skipped (fixes a phantom-block bug for bookings fully before 7am / after 10pm, found in code review). - Removed the now-unused groupBookingsByDay helper. - List toggle preserved. tx-os typecheck passes.
This commit is contained in:
@@ -1596,6 +1596,7 @@
|
||||
"endsAt": "To",
|
||||
"viewList": "List",
|
||||
"viewCalendar": "Calendar",
|
||||
"emptyDay": "No bookings on this day.",
|
||||
"shareLinkTitle": "Public booking link (share with guests)",
|
||||
"copyLink": "Copy link",
|
||||
"linkCopied": "Link copied",
|
||||
|
||||
Reference in New Issue
Block a user