payload-reserve 1.3.2 → 1.5.0

package/dist/components/CalendarView/index.js

@@ -2,8 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 styles from './CalendarView.module.css';
+import { LaneTimelineView } from './LaneTimelineView.js';
+import { useResourceAvailability } from './useResourceAvailability.js';
 // Built-in status → CSS class map (for known statuses; custom statuses use inline style)
 const STATUS_CLASS_MAP = {
     cancelled: styles.statusCancelled,
@@ -35,6 +39,7 @@ export const CalendarView = ()=>{
     const slugs = config.admin?.custom?.reservationSlugs;
     const reservationSlug = slugs?.reservations ?? 'reservations';
     const apiUrl = `${config.serverURL ?? ''}${config.routes.api}/${reservationSlug}`;
+    const apiBase = `${config.serverURL ?? ''}${config.routes.api}`;
     const statusMachine = config.admin?.custom?.reservationStatusMachine;
     // The initial/pending status (what "pending" view shows)
     const defaultStatus = statusMachine?.defaultStatus ?? 'pending';
@@ -173,6 +178,8 @@ export const CalendarView = ()=>{
         currentDate,
         viewMode
     ]);
+    // 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 ()=>{
         setLoading(true);
         try {
@@ -453,6 +460,28 @@ export const CalendarView = ()=>{
         });
         pendingDrawerOpen.current = true;
     }, []);
+    // Click-to-book: open new-reservation drawer pre-filled with startTime + optional resource
+    const handleSlotClick = useCallback((startIso)=>{
+        setDrawerDocId(null);
+        setInitialData({
+            ...selectedResourceId ? {
+                resource: selectedResourceId
+            } : {},
+            startTime: startIso
+        });
+        pendingDrawerOpen.current = true;
+    }, [
+        selectedResourceId
+    ]);
+    // Lane-specific book: pre-fills both the specific resource and startTime
+    const handleLaneBook = useCallback((resourceId, startIso)=>{
+        setDrawerDocId(null);
+        setInitialData({
+            resource: resourceId,
+            startTime: startIso
+        });
+        pendingDrawerOpen.current = true;
+    }, []);
     const openDocDrawer = useCallback((id)=>{
         setDrawerDocId(id);
         setInitialData(undefined);
@@ -466,6 +495,7 @@ export const CalendarView = ()=>{
             } else if (viewMode === 'week') {
                 next.setDate(next.getDate() + 7 * direction);
             } else {
+                // day, lanes: step one day at a time
                 next.setDate(next.getDate() + direction);
             }
             return next;
@@ -556,15 +586,28 @@ export const CalendarView = ()=>{
         const inlineStyle = cssClass ? undefined : {
             background: color
         };
-        return /*#__PURE__*/ _jsx("div", {
-            className: `${styles.eventItem} ${cssClass}`,
+        const hasItems = Array.isArray(r.items) && r.items.length > 0;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: `${styles.eventItem} ${cssClass} ${hasItems && !compact ? styles.eventItemExpanded : ''}`,
             onClick: (e)=>handleEventClick(e, r.id),
             onKeyDown: (e)=>handleEventKeyDown(e, r.id),
             role: "button",
             style: inlineStyle,
             tabIndex: 0,
             title: getEventTooltip(r),
-            children: getEventLabel(r, compact)
+            children: [
+                getEventLabel(r, compact),
+                hasItems && /*#__PURE__*/ _jsx("div", {
+                    className: styles.itemBadges,
+                    children: r.items.map((it, i)=>{
+                        const name = typeof it.resource === 'object' ? it.resource?.name : it.resource;
+                        return /*#__PURE__*/ _jsx("span", {
+                            className: styles.itemBadge,
+                            children: String(name ?? '')
+                        }, i);
+                    })
+                })
+            ]
         }, r.id);
     };
     // Dynamic legend: iterates all statuses from the status machine config
@@ -672,6 +715,40 @@ export const CalendarView = ()=>{
         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
+        ;
+        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 dayAvail = availability.days.find((d)=>d.date === isoDay);
+            const dayStart = new Date(day);
+            dayStart.setHours(gridStartHour, 0, 0, 0);
+            const dayEnd = new Date(day);
+            dayEnd.setHours(gridEndHour, 0, 0, 0);
+            const slots = dayAvail ? computeSlotStates({
+                busy: availability.busy,
+                capacityMode: availability.capacityMode,
+                dayEnd,
+                dayStart,
+                quantity: availability.quantity,
+                requiredPools: availability.requiredPools,
+                shiftWindows: dayAvail.shiftWindows,
+                step: gridStep,
+                timeOff: dayAvail.timeOff
+            }) : [];
+            // Index by slot start ISO for fast lookup
+            const slotByStart = new Map(slots.map((s)=>[
+                    s.start.toISOString(),
+                    s
+                ]));
+            return [
+                isoDay,
+                slotByStart
+            ];
+        })) : null;
         return /*#__PURE__*/ _jsxs("div", {
             className: styles.weekView,
             children: [
@@ -702,19 +779,62 @@ export const CalendarView = ()=>{
                                 });
                                 const clickDate = new Date(day);
                                 clickDate.setHours(hour, 0, 0, 0);
-                                return /*#__PURE__*/ _jsxs("div", {
-                                    className: styles.weekCell,
-                                    onClick: ()=>handleDateClick(clickDate),
-                                    onKeyDown: (e)=>{
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault();
+                                // 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
+                                let slotClass = '';
+                                let isNonInteractive = false;
+                                if (slotInfo) {
+                                    if (slotInfo.state === 'off-shift') {
+                                        slotClass = styles.slotOffShift;
+                                        isNonInteractive = true;
+                                    } else if (slotInfo.state === 'time-off') {
+                                        slotClass = styles.slotTimeOff;
+                                        isNonInteractive = true;
+                                    } else if (slotInfo.state === 'full') {
+                                        slotClass = styles.slotFull;
+                                        isNonInteractive = true;
+                                    } else {
+                                        slotClass = styles.slotFree;
+                                    }
+                                }
+                                // Time-off label: show type/reason from dayAvail when in time-off state
+                                const dayAvail = availability?.days.find((d)=>d.date === isoDay);
+                                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);
+                                const handleKeyDown = isNonInteractive ? undefined : (e)=>{
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        if (availability) {
+                                            handleSlotClick(clickDate.toISOString());
+                                        } else {
                                             handleDateClick(clickDate);
                                         }
-                                    },
+                                    }
+                                };
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    className: `${styles.weekCell} ${slotClass}`,
+                                    onClick: handleClick,
+                                    onKeyDown: handleKeyDown,
                                     role: "button",
-                                    tabIndex: 0,
+                                    tabIndex: isNonInteractive ? -1 : 0,
                                     children: [
                                         renderCurrentTimeLine(day, hour),
+                                        timeOffLabel && /*#__PURE__*/ _jsx("span", {
+                                            className: styles.timeOffLabel,
+                                            children: timeOffLabel
+                                        }),
+                                        slotInfo && availability && availability.quantity > 1 && /*#__PURE__*/ _jsxs("span", {
+                                            className: styles.capacityBadge,
+                                            children: [
+                                                slotInfo.occupancy,
+                                                "/",
+                                                availability.quantity
+                                            ]
+                                        }),
                                         cellReservations.map((r)=>renderEventItem(r, false))
                                     ]
                                 }, `cell-${hour}-${di}`);
@@ -728,6 +848,36 @@ export const CalendarView = ()=>{
         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
+        ;
+        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 dayAvail = availability.days.find((d)=>d.date === isoDay);
+            const dayStart = new Date(currentDate);
+            dayStart.setHours(gridStartHour, 0, 0, 0);
+            const dayEnd = new Date(currentDate);
+            dayEnd.setHours(gridEndHour, 0, 0, 0);
+            const slots = dayAvail ? computeSlotStates({
+                busy: availability.busy,
+                capacityMode: availability.capacityMode,
+                dayEnd,
+                dayStart,
+                quantity: availability.quantity,
+                requiredPools: availability.requiredPools,
+                shiftWindows: dayAvail.shiftWindows,
+                step: gridStep,
+                timeOff: dayAvail.timeOff
+            }) : [];
+            daySlotMap = new Map(slots.map((s)=>[
+                    s.start.toISOString(),
+                    s
+                ]));
+        }
         return /*#__PURE__*/ _jsx("div", {
             className: styles.dayView,
             children: hours.map((hour)=>{
@@ -737,6 +887,41 @@ export const CalendarView = ()=>{
                 });
                 const clickDate = new Date(currentDate);
                 clickDate.setHours(hour, 0, 0, 0);
+                // Slot state (only when a resource is selected)
+                const slotInfo = daySlotMap?.get(clickDate.toISOString()) ?? null;
+                // Derive cell CSS class and interactivity based on slot state
+                let slotClass = '';
+                let isNonInteractive = false;
+                if (slotInfo) {
+                    if (slotInfo.state === 'off-shift') {
+                        slotClass = styles.slotOffShift;
+                        isNonInteractive = true;
+                    } else if (slotInfo.state === 'time-off') {
+                        slotClass = styles.slotTimeOff;
+                        isNonInteractive = true;
+                    } else if (slotInfo.state === 'full') {
+                        slotClass = styles.slotFull;
+                        isNonInteractive = true;
+                    } else {
+                        slotClass = styles.slotFree;
+                    }
+                }
+                // Time-off label
+                const isoDay = localDayKey(currentDate);
+                const dayAvail = availability?.days.find((d)=>d.date === isoDay);
+                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);
+                const handleKeyDown = isNonInteractive ? undefined : (e)=>{
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        if (availability) {
+                            handleSlotClick(clickDate.toISOString());
+                        } else {
+                            handleDateClick(clickDate);
+                        }
+                    }
+                };
                 return /*#__PURE__*/ _jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ _jsxs("div", {
@@ -747,18 +932,25 @@ export const CalendarView = ()=>{
                             ]
                         }),
                         /*#__PURE__*/ _jsxs("div", {
-                            className: styles.dayViewCell,
-                            onClick: ()=>handleDateClick(clickDate),
-                            onKeyDown: (e)=>{
-                                if (e.key === 'Enter' || e.key === ' ') {
-                                    e.preventDefault();
-                                    handleDateClick(clickDate);
-                                }
-                            },
+                            className: `${styles.dayViewCell} ${slotClass}`,
+                            onClick: handleClick,
+                            onKeyDown: handleKeyDown,
                             role: "button",
-                            tabIndex: 0,
+                            tabIndex: isNonInteractive ? -1 : 0,
                             children: [
                                 renderCurrentTimeLine(currentDate, hour),
+                                timeOffLabel && /*#__PURE__*/ _jsx("span", {
+                                    className: styles.timeOffLabel,
+                                    children: timeOffLabel
+                                }),
+                                slotInfo && availability && availability.quantity > 1 && /*#__PURE__*/ _jsxs("span", {
+                                    className: styles.capacityBadge,
+                                    children: [
+                                        slotInfo.occupancy,
+                                        "/",
+                                        availability.quantity
+                                    ]
+                                }),
                                 hourReservations.map((r)=>renderEventItem(r, false))
                             ]
                         })
@@ -1041,6 +1233,10 @@ export const CalendarView = ()=>{
                                     key: 'day',
                                     label: t('reservation:calendarDay')
                                 },
+                                {
+                                    key: 'lanes',
+                                    label: t('reservation:calendarLanes')
+                                },
                                 {
                                     key: 'pending',
                                     label: t('reservation:calendarPending')
@@ -1081,14 +1277,20 @@ export const CalendarView = ()=>{
                     ]
                 })
             }),
-            loading && viewMode !== 'pending' ? /*#__PURE__*/ _jsx("div", {
+            loading && viewMode !== 'pending' && viewMode !== 'lanes' ? /*#__PURE__*/ _jsx("div", {
                 className: styles.loading,
                 children: t('reservation:calendarLoading')
             }) : /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
                     viewMode === 'month' && renderMonthView(),
                     viewMode === 'week' && renderWeekView(),
-                    viewMode === 'day' && renderDayView()
+                    viewMode === 'day' && renderDayView(),
+                    viewMode === 'lanes' && /*#__PURE__*/ _jsx(LaneTimelineView, {
+                        apiBase: apiBase,
+                        day: currentDate,
+                        onBook: handleLaneBook,
+                        resources: selectedResourceId ? resources.filter((r)=>r.id === selectedResourceId) : resources
+                    })
                 ]
             }),
             viewMode === 'pending' && renderPendingView(),