payload-reserve 1.6.0 → 2.1.0

package/dist/components/CalendarView/index.js

@@ -4,7 +4,7 @@ import { useConfig, useDocumentDrawer, useTranslation } from '@payloadcms/ui';
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computeSlotStates } from '../../utilities/computeSlotStates.js';
 import { statusToI18nKey } from '../../utilities/i18nUtils.js';
-import { localDayKey } from '../../utilities/slotUtils.js';
+import { getDayKeyInTimezone, getHourInTimezone } from '../../utilities/timezoneUtils.js';
 import { useTenantFilter } from '../../utilities/useTenantFilter.js';
 import styles from './CalendarView.module.css';
 import { LaneTimelineView } from './LaneTimelineView.js';
@@ -33,6 +33,38 @@ const CUSTOM_STATUS_PALETTE = [
     '#fca5a5',
     '#fdba74'
 ];
+// Safe ceiling for list fetches; when totalDocs exceeds this we surface a
+// "showing N of M" notice rather than silently truncating (review D9).
+const MAX_LIST_LIMIT = 2000;
+// Default visible-hour window for the week/day/lane grids; the actual window
+// expands to include any booking outside it so nothing is hidden (review D8).
+const DEFAULT_HOUR_START = 7;
+const DEFAULT_HOUR_END = 20;
+/**
+ * Visible-hour window covering `reservations` (in `timeZone`), never narrower
+ * than the default business window. Every booking's start hour gets a row, so a
+ * booking outside 7–20 is shown rather than silently dropped, and all three
+ * time views share one window.
+ */ function computeHourWindow(reservations, timeZone) {
+    let startHour = DEFAULT_HOUR_START;
+    let endHour = DEFAULT_HOUR_END;
+    for (const r of reservations){
+        if (!r.startTime) {
+            continue;
+        }
+        const sh = getHourInTimezone(new Date(r.startTime), timeZone);
+        startHour = Math.min(startHour, sh);
+        endHour = Math.max(endHour, sh + 1);
+        if (r.endTime) {
+            // round the ending hour up so a slot that ends mid-hour still has a row
+            endHour = Math.max(endHour, getHourInTimezone(new Date(r.endTime), timeZone) + 1);
+        }
+    }
+    return {
+        endHour: Math.min(endHour, 24),
+        startHour: Math.max(startHour, 0)
+    };
+}
 export const CalendarView = ()=>{
     const { config } = useConfig();
     const { t: _t } = useTranslation();
@@ -44,6 +76,39 @@ export const CalendarView = ()=>{
     const resourceSlug = slugs?.resources ?? 'resources';
     const reservationTenantParams = useTenantFilter(reservationSlug);
     const resourceTenantParams = useTenantFilter(resourceSlug);
+    // Day-boundary rendering uses the business timezone. In multiTenant mode that's
+    // the SELECTED tenant's zone, resolved server-side from the tenant cookie (the
+    // client can't map tenant→zone itself). Until that resolves — and for plain
+    // installs — fall back to the static global zone baked into admin config.
+    const staticReservationTimezone = config.admin?.custom?.reservationTimezone ?? 'UTC';
+    const [effectiveTimezone, setEffectiveTimezone] = useState(null);
+    const reservationTimezone = effectiveTimezone ?? staticReservationTimezone;
+    const tenantKey = JSON.stringify(reservationTenantParams);
+    useEffect(()=>{
+        let cancelled = false;
+        void (async ()=>{
+            try {
+                const res = await fetch(`${apiBase}/reserve/effective-timezone`, {
+                    credentials: 'same-origin'
+                });
+                if (!res.ok) {
+                    return;
+                }
+                const json = await res.json();
+                if (!cancelled && typeof json?.timeZone === 'string') {
+                    setEffectiveTimezone(json.timeZone);
+                }
+            } catch  {
+            // keep the static fallback
+            }
+        })();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        apiBase,
+        tenantKey
+    ]);
     const statusMachine = config.admin?.custom?.reservationStatusMachine;
     // The initial/pending status (what "pending" view shows)
     const defaultStatus = statusMachine?.defaultStatus ?? 'pending';
@@ -108,6 +173,11 @@ export const CalendarView = ()=>{
     const [viewMode, setViewMode] = useState('month');
     const [reservations, setReservations] = useState([]);
     const [loading, setLoading] = useState(true);
+    // { shown, total } when a fetch hit its cap, else null — drives a non-silent notice (D9)
+    const [truncation, setTruncation] = useState(null);
+    // Monotonic request counters so a slow earlier fetch can't overwrite a newer one (D5)
+    const reservationsSeq = useRef(0);
+    const pendingSeq = useRef(0);
     const [drawerDocId, setDrawerDocId] = useState(null);
     const [initialData, setInitialData] = useState(undefined);
     // Resource filter state
@@ -166,8 +236,10 @@ export const CalendarView = ()=>{
         if (viewMode === 'month') {
             start.setDate(1);
             start.setDate(start.getDate() - start.getDay());
-            end.setMonth(end.getMonth() + 1, 0);
-            end.setDate(end.getDate() + (6 - end.getDay()));
+            // The grid always renders 42 cells (6 weeks) from `start`; fetch the same
+            // span so trailing weeks aren't silently empty (review D1).
+            end.setTime(start.getTime());
+            end.setDate(start.getDate() + 41);
         } else if (viewMode === 'week') {
             const dayOfWeek = start.getDay();
             start.setDate(start.getDate() - dayOfWeek);
@@ -186,11 +258,12 @@ export const CalendarView = ()=>{
     // Availability data for the selected resource (null when no resource selected — grid unshaded)
     const { data: availability } = useResourceAvailability(apiBase, selectedResourceId || undefined, rangeStart, rangeEnd);
     const fetchReservations = useCallback(async ()=>{
+        const seq = ++reservationsSeq.current;
         setLoading(true);
         try {
             const params = new URLSearchParams({
                 depth: '1',
-                limit: '500',
+                limit: String(MAX_LIST_LIMIT),
                 sort: 'startTime',
                 'where[startTime][greater_than_equal]': rangeStart.toISOString(),
                 'where[startTime][less_than_equal]': rangeEnd.toISOString(),
@@ -198,11 +271,25 @@ export const CalendarView = ()=>{
             });
             const response = await fetch(`${apiUrl}?${params}`);
             const result = await response.json();
-            setReservations(result.docs ?? []);
+            if (seq !== reservationsSeq.current) {
+                return;
+            } // a newer fetch superseded this one
+            const docs = result.docs ?? [];
+            setReservations(docs);
+            const total = result.totalDocs ?? docs.length;
+            setTruncation(total > docs.length ? {
+                shown: docs.length,
+                total
+            } : null);
         } catch  {
+            if (seq !== reservationsSeq.current) {
+                return;
+            }
             setReservations([]);
         }
-        setLoading(false);
+        if (seq === reservationsSeq.current) {
+            setLoading(false);
+        }
     }, [
         rangeStart,
         rangeEnd,
@@ -217,8 +304,11 @@ export const CalendarView = ()=>{
     // Fetch pending count (always, for badge) — uses defaultStatus from config
     const fetchPendingCount = useCallback(async ()=>{
         try {
+            // limit:1 + depth:0 returns totalDocs (the full count) without downloading
+            // every pending doc — limit:0 in Payload means "no limit" (review D9).
             const params = new URLSearchParams({
-                limit: '0',
+                depth: '0',
+                limit: '1',
                 'where[status][equals]': defaultStatus,
                 ...reservationTenantParams
             });
@@ -240,18 +330,25 @@ export const CalendarView = ()=>{
     ]);
     // Fetch pending reservations when tab is active — uses defaultStatus from config
     const fetchPendingReservations = useCallback(async ()=>{
+        const seq = ++pendingSeq.current;
         try {
             const params = new URLSearchParams({
                 depth: '1',
-                limit: '500',
+                limit: String(MAX_LIST_LIMIT),
                 sort: 'startTime',
                 'where[status][equals]': defaultStatus,
                 ...reservationTenantParams
             });
             const response = await fetch(`${apiUrl}?${params}`);
             const result = await response.json();
+            if (seq !== pendingSeq.current) {
+                return;
+            }
             setPendingReservations(result.docs ?? []);
         } catch  {
+            if (seq !== pendingSeq.current) {
+                return;
+            }
             setPendingReservations([]);
         }
     }, [
@@ -540,7 +637,8 @@ export const CalendarView = ()=>{
     const getEventLabel = (r, compact)=>{
         const time = new Date(r.startTime).toLocaleTimeString([], {
             hour: '2-digit',
-            minute: '2-digit'
+            minute: '2-digit',
+            timeZone: reservationTimezone
         });
         const serviceName = getResName(r.service);
         if (compact) {
@@ -571,11 +669,13 @@ export const CalendarView = ()=>{
         const serviceName = getResName(r.service) || t('reservation:calendarUnknownService');
         const startStr = new Date(r.startTime).toLocaleTimeString([], {
             hour: '2-digit',
-            minute: '2-digit'
+            minute: '2-digit',
+            timeZone: reservationTimezone
         });
         const endStr = r.endTime ? new Date(r.endTime).toLocaleTimeString([], {
             hour: '2-digit',
-            minute: '2-digit'
+            minute: '2-digit',
+            timeZone: reservationTimezone
         }) : '?';
         const customerName = getCustomerName(r.customer) || t('reservation:calendarUnknownCustomer');
         const resourceNames = getResourceNames(r);
@@ -664,7 +764,7 @@ export const CalendarView = ()=>{
             d.setDate(d.getDate() + 1);
         }
         const today = new Date();
-        const todayStr = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+        const todayStr = getDayKeyInTimezone(today, reservationTimezone);
         return /*#__PURE__*/ _jsxs("div", {
             className: styles.monthGrid,
             children: [
@@ -681,12 +781,12 @@ export const CalendarView = ()=>{
                         children: d
                     }, d)),
                 days.map((day, i)=>{
-                    const dayStr = `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
-                    const isToday = dayStr === todayStr;
-                    const isOtherMonth = day.getMonth() !== currentDate.getMonth();
+                    const dayKey = getDayKeyInTimezone(day, reservationTimezone);
+                    const isToday = dayKey === todayStr;
+                    const isOtherMonth = dayKey.slice(0, 7) !== getDayKeyInTimezone(currentDate, reservationTimezone).slice(0, 7);
                     const dayReservations = filteredReservations.filter((r)=>{
-                        const rDate = new Date(r.startTime);
-                        return rDate.getFullYear() === day.getFullYear() && rDate.getMonth() === day.getMonth() && rDate.getDate() === day.getDate();
+                        const rKey = getDayKeyInTimezone(new Date(r.startTime), reservationTimezone);
+                        return rKey === dayKey;
                     });
                     const clickDate = new Date(day);
                     clickDate.setHours(9, 0, 0, 0);
@@ -723,17 +823,19 @@ export const CalendarView = ()=>{
             d.setDate(d.getDate() + i);
             weekDays.push(d);
         }
+        // Visible-hour window derived from the week's bookings (review D8)
+        const weekReservations = filteredReservations.filter((r)=>{
+            const k = getDayKeyInTimezone(new Date(r.startTime), reservationTimezone);
+            return weekDays.some((d)=>getDayKeyInTimezone(d, reservationTimezone) === k);
+        });
+        const { endHour: gridEndHour, startHour: gridStartHour } = computeHourWindow(weekReservations, reservationTimezone);
         const hours = Array.from({
-            length: 12
-        }, (_, i)=>i + 7);
-        // Grid bounds: hour 7 to hour 19 (end of last slot), step 60 min
-        const gridStartHour = 7;
-        const gridEndHour = gridStartHour + hours.length // 19
-        ;
+            length: gridEndHour - gridStartHour
+        }, (_, i)=>i + gridStartHour);
         const gridStep = 60;
         // Build per-day slot-state maps when a resource is selected
         const daySlotMaps = availability ? new Map(weekDays.map((day)=>{
-            const isoDay = localDayKey(day);
+            const isoDay = getDayKeyInTimezone(day, reservationTimezone);
             const dayAvail = availability.days.find((d)=>d.date === isoDay);
             const dayStart = new Date(day);
             dayStart.setHours(gridStartHour, 0, 0, 0);
@@ -771,6 +873,7 @@ export const CalendarView = ()=>{
                         children: d.toLocaleDateString([], {
                             day: 'numeric',
                             month: 'numeric',
+                            timeZone: reservationTimezone,
                             weekday: 'short'
                         })
                     }, i)),
@@ -784,14 +887,14 @@ export const CalendarView = ()=>{
                                 ]
                             }),
                             weekDays.map((day, di)=>{
+                                const isoDay = getDayKeyInTimezone(day, reservationTimezone);
                                 const cellReservations = filteredReservations.filter((r)=>{
                                     const rDate = new Date(r.startTime);
-                                    return rDate.getFullYear() === day.getFullYear() && rDate.getMonth() === day.getMonth() && rDate.getDate() === day.getDate() && rDate.getHours() === hour;
+                                    return getDayKeyInTimezone(rDate, reservationTimezone) === isoDay && getHourInTimezone(rDate, reservationTimezone) === hour;
                                 });
                                 const clickDate = new Date(day);
                                 clickDate.setHours(hour, 0, 0, 0);
                                 // Slot state (only when a resource is selected)
-                                const isoDay = localDayKey(day);
                                 const slotMap = daySlotMaps?.get(isoDay);
                                 const slotInfo = slotMap?.get(clickDate.toISOString()) ?? null;
                                 // Derive cell CSS class and interactivity based on slot state
@@ -856,18 +959,18 @@ export const CalendarView = ()=>{
         });
     };
     const renderDayView = ()=>{
+        // Build slot-state map for the current day when a resource is selected
+        const currentDayKey = getDayKeyInTimezone(currentDate, reservationTimezone);
+        // Visible-hour window derived from this day's bookings (review D8)
+        const dayReservations = filteredReservations.filter((r)=>getDayKeyInTimezone(new Date(r.startTime), reservationTimezone) === currentDayKey);
+        const { endHour: gridEndHour, startHour: gridStartHour } = computeHourWindow(dayReservations, reservationTimezone);
         const hours = Array.from({
-            length: 14
-        }, (_, i)=>i + 7);
-        // Grid bounds: hour 7 to hour 21 (end of last slot), step 60 min
-        const gridStartHour = 7;
-        const gridEndHour = gridStartHour + hours.length // 21
-        ;
+            length: gridEndHour - gridStartHour
+        }, (_, i)=>i + gridStartHour);
         const gridStep = 60;
-        // Build slot-state map for the current day when a resource is selected
         let daySlotMap = null;
         if (availability) {
-            const isoDay = localDayKey(currentDate);
+            const isoDay = currentDayKey;
             const dayAvail = availability.days.find((d)=>d.date === isoDay);
             const dayStart = new Date(currentDate);
             dayStart.setHours(gridStartHour, 0, 0, 0);
@@ -894,7 +997,7 @@ export const CalendarView = ()=>{
             children: hours.map((hour)=>{
                 const hourReservations = filteredReservations.filter((r)=>{
                     const rDate = new Date(r.startTime);
-                    return rDate.getFullYear() === currentDate.getFullYear() && rDate.getMonth() === currentDate.getMonth() && rDate.getDate() === currentDate.getDate() && rDate.getHours() === hour;
+                    return getDayKeyInTimezone(rDate, reservationTimezone) === currentDayKey && getHourInTimezone(rDate, reservationTimezone) === hour;
                 });
                 const clickDate = new Date(currentDate);
                 clickDate.setHours(hour, 0, 0, 0);
@@ -918,8 +1021,7 @@ export const CalendarView = ()=>{
                     }
                 }
                 // Time-off label
-                const isoDay = localDayKey(currentDate);
-                const dayAvail = availability?.days.find((d)=>d.date === isoDay);
+                const dayAvail = availability?.days.find((d)=>d.date === currentDayKey);
                 const timeOffEntry = slotInfo?.state === 'time-off' ? dayAvail?.timeOff.find((to)=>new Date(to.start) <= clickDate && clickDate < new Date(to.end)) : undefined;
                 const timeOffLabel = timeOffEntry?.type ?? timeOffEntry?.reason ?? null;
                 const handleClick = isNonInteractive ? undefined : availability ? ()=>handleSlotClick(clickDate.toISOString()) : ()=>handleDateClick(clickDate);
@@ -1003,6 +1105,7 @@ export const CalendarView = ()=>{
                 hour: '2-digit',
                 minute: '2-digit',
                 month: 'short',
+                timeZone: reservationTimezone,
                 year: 'numeric'
             });
         };
@@ -1159,21 +1262,25 @@ export const CalendarView = ()=>{
             endOfWeek.setDate(endOfWeek.getDate() + 6);
             return `${startOfWeek.toLocaleDateString([], {
                 day: 'numeric',
-                month: 'short'
+                month: 'short',
+                timeZone: reservationTimezone
             })} - ${endOfWeek.toLocaleDateString([], {
                 day: 'numeric',
                 month: 'short',
+                timeZone: reservationTimezone,
                 year: 'numeric'
             })}`;
         }
         return currentDate.toLocaleDateString([], {
             day: 'numeric',
             month: 'long',
+            timeZone: reservationTimezone,
             weekday: 'long',
             year: 'numeric'
         });
     }, [
         currentDate,
+        reservationTimezone,
         viewMode
     ]);
     const handleDrawerSave = useCallback(()=>{
@@ -1269,6 +1376,14 @@ export const CalendarView = ()=>{
                 ]
             }),
             viewMode !== 'pending' && renderStatusLegend(),
+            viewMode !== 'pending' && truncation && /*#__PURE__*/ _jsx("div", {
+                className: styles.truncationNotice,
+                role: "status",
+                children: t('reservation:calendarShowingNofM', {
+                    shown: String(truncation.shown),
+                    total: String(truncation.total)
+                })
+            }),
             resources.length > 1 && /*#__PURE__*/ _jsx("div", {
                 className: styles.filterBar,
                 children: /*#__PURE__*/ _jsxs("select", {
@@ -1296,12 +1411,19 @@ export const CalendarView = ()=>{
                     viewMode === 'month' && renderMonthView(),
                     viewMode === 'week' && renderWeekView(),
                     viewMode === 'day' && renderDayView(),
-                    viewMode === 'lanes' && /*#__PURE__*/ _jsx(LaneTimelineView, {
-                        apiBase: apiBase,
-                        day: currentDate,
-                        onBook: handleLaneBook,
-                        resources: selectedResourceId ? resources.filter((r)=>r.id === selectedResourceId) : resources
-                    })
+                    viewMode === 'lanes' && (()=>{
+                        const laneDayKey = getDayKeyInTimezone(currentDate, reservationTimezone);
+                        const { endHour, startHour } = computeHourWindow(filteredReservations.filter((r)=>getDayKeyInTimezone(new Date(r.startTime), reservationTimezone) === laneDayKey), reservationTimezone);
+                        return /*#__PURE__*/ _jsx(LaneTimelineView, {
+                            apiBase: apiBase,
+                            day: currentDate,
+                            endHour: endHour,
+                            onBook: handleLaneBook,
+                            resources: selectedResourceId ? resources.filter((r)=>r.id === selectedResourceId) : resources,
+                            startHour: startHour,
+                            timeZone: reservationTimezone
+                        });
+                    })()
                 ]
             }),
             viewMode === 'pending' && renderPendingView(),