Task #666: Today & Book buttons in room-booking calendar view

Added two quick actions inside the Protocol bookings "Calendar" view's day
panel header (artifacts/tx-os/src/pages/protocol.tsx):
- "Today" (اليوم): outline button that resets both selectedDay and a new
  controlled calendarMonth state to new Date(), so the month picker, day
  time-grid, and red now-line all snap to today. The Calendar is now
  controlled via month/onMonthChange (defaultMonth is initial-only and did
  not re-navigate after mount).
- "Book" (حجز): primary button gated by the same c?.canRequest capability as
  the existing toolbar new-booking button. Opens the new-booking dialog
  pre-filled with the currently selected day.

Implementation:
- Extended bookingDialog state with an optional `day?: Date`.
- BookingDialog now accepts an `initialDay?: Date` prop; for new (non-edit)
  bookings it pre-fills startsAt=09:00 and endsAt=10:00 on that day via a
  local dayAt(hour) helper (reuses toLocalInput). Edit flow unchanged.
- Added i18n keys protocol.bookings.today / protocol.bookings.book to both
  ar.json and en.json. Buttons use logical spacing (me-1) so they mirror in
  Arabic RTL.

No backend/API changes. List/Calendar toggle unaffected. tx-os typecheck
passes; HMR clean, no console errors. Screenshot tool unavailable (no
artifact registered in this repo), verified via typecheck + logs.
This commit is contained in:
Replit Agent
2026-07-07 10:36:01 +00:00
parent 644eacc0c4
commit ee3cf1178e
+8 -2
View File
@@ -564,6 +564,7 @@ export default function ProtocolPage() {
} | null>(null);
const [bookingsView, setBookingsView] = useState<"list" | "calendar">("list");
const [selectedDay, setSelectedDay] = useState<Date>(() => new Date());
const [calendarMonth, setCalendarMonth] = useState<Date>(() => new Date());
const now = useNow(60000);
const bookedDates = useMemo(() => {
const map = new Map<string, Date>();
@@ -969,7 +970,8 @@ export default function ProtocolPage() {
required
selected={selectedDay}
onSelect={(d) => d && setSelectedDay(d)}
defaultMonth={selectedDay}
month={calendarMonth}
onMonthChange={setCalendarMonth}
modifiers={{ booked: bookedDates }}
modifiersClassNames={{
booked:
@@ -992,7 +994,11 @@ export default function ProtocolPage() {
<Button
size="sm"
variant="outline"
onClick={() => setSelectedDay(new Date())}
onClick={() => {
const today = new Date();
setSelectedDay(today);
setCalendarMonth(today);
}}
>
<CalendarDays size={14} className="me-1" />
{t("protocol.bookings.today")}