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:
@@ -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")}
|
||||
|
||||
Reference in New Issue
Block a user