payload-reserve 1.0.2 → 1.1.0

package/dist/components/CalendarView/index.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 styles from './CalendarView.module.css';
+// Built-in status → CSS class map (for known statuses; custom statuses use inline style)
 const STATUS_CLASS_MAP = {
     cancelled: styles.statusCancelled,
     completed: styles.statusCompleted,
@@ -10,34 +11,101 @@ const STATUS_CLASS_MAP = {
     'no-show': styles.statusNoShow,
     pending: styles.statusPending
 };
-const STATUS_COLORS = {
+// Built-in default colors for known statuses
+const BUILTIN_STATUS_COLORS = {
     cancelled: '#e5e7eb',
     completed: '#d1fae5',
     confirmed: '#dbeafe',
     'no-show': '#fee2e2',
     pending: '#fef3c7'
 };
+// Palette for auto-assigning colors to custom statuses
+const CUSTOM_STATUS_PALETTE = [
+    '#fde68a',
+    '#c7d2fe',
+    '#a7f3d0',
+    '#fca5a5',
+    '#fdba74'
+];
 export const CalendarView = ()=>{
     const { config } = useConfig();
     const { t: _t } = useTranslation();
     const t = _t;
-    const STATUS_LABELS = useMemo(()=>({
-            cancelled: t('reservation:statusCancelled'),
-            completed: t('reservation:statusCompleted'),
-            confirmed: t('reservation:statusConfirmed'),
-            'no-show': t('reservation:statusNoShowLabel'),
-            pending: t('reservation:statusPending')
-        }), [
-        t
-    ]);
     const slugs = config.admin?.custom?.reservationSlugs;
     const reservationSlug = slugs?.reservations ?? 'reservations';
+    const apiUrl = `${config.serverURL ?? ''}${config.routes.api}/${reservationSlug}`;
+    const statusMachine = config.admin?.custom?.reservationStatusMachine;
+    // The initial/pending status (what "pending" view shows)
+    const defaultStatus = statusMachine?.defaultStatus ?? 'pending';
+    // Build STATUS_COLORS dynamically: built-ins first, then auto-assign palette for custom statuses
+    const STATUS_COLORS = useMemo(()=>{
+        const colors = {
+            ...BUILTIN_STATUS_COLORS
+        };
+        const statuses = statusMachine?.statuses ?? [];
+        statuses.forEach((s, i)=>{
+            if (!colors[s]) {
+                colors[s] = CUSTOM_STATUS_PALETTE[i % CUSTOM_STATUS_PALETTE.length];
+            }
+        });
+        return colors;
+    }, [
+        statusMachine
+    ]);
+    // Derive confirm/cancel target statuses from config transitions
+    // "confirm" = first non-terminal transition from defaultStatus
+    // "cancel"  = first terminal transition from defaultStatus (or fallback: 'cancelled')
+    const { cancelStatus, confirmStatus } = useMemo(()=>{
+        const terminalStatuses = statusMachine?.terminalStatuses ?? [
+            'completed',
+            'cancelled',
+            'no-show'
+        ];
+        const transitions = statusMachine?.transitions ?? {};
+        const defaultTransitions = transitions[defaultStatus] ?? [];
+        const nonTerminal = defaultTransitions.find((s)=>!terminalStatuses.includes(s));
+        const terminal = defaultTransitions.find((s)=>terminalStatuses.includes(s));
+        return {
+            cancelStatus: terminal ?? 'cancelled',
+            confirmStatus: nonTerminal ?? 'confirmed'
+        };
+    }, [
+        statusMachine,
+        defaultStatus
+    ]);
+    const STATUS_LABELS = useMemo(()=>{
+        const statuses = statusMachine?.statuses ?? [
+            'pending',
+            'confirmed',
+            'completed',
+            'cancelled',
+            'no-show'
+        ];
+        const labels = {};
+        for (const s of statuses){
+            // Attempt to look up a translation key, e.g. reservation:statusPending
+            const key = `reservation:status${s.charAt(0).toUpperCase() + s.slice(1).replace(/-./g, (m)=>m[1].toUpperCase())}`;
+            const translated = t(key);
+            // If translation returns the key itself, it's missing — fall back to capitalized status name
+            labels[s] = translated !== key ? translated : s.charAt(0).toUpperCase() + s.slice(1);
+        }
+        return labels;
+    }, [
+        statusMachine,
+        t
+    ]);
     const [currentDate, setCurrentDate] = useState(()=>new Date());
     const [viewMode, setViewMode] = useState('month');
     const [reservations, setReservations] = useState([]);
     const [loading, setLoading] = useState(true);
     const [drawerDocId, setDrawerDocId] = useState(null);
     const [initialData, setInitialData] = useState(undefined);
+    // Pending tab state
+    const [pendingReservations, setPendingReservations] = useState([]);
+    const [pendingCount, setPendingCount] = useState(0);
+    const [selectedIds, setSelectedIds] = useState(()=>new Set());
+    const [confirmingIds, setConfirmingIds] = useState(()=>new Set());
+    const [actionFeedback, setActionFeedback] = useState(null);
     const [DocumentDrawer, , { openDrawer }] = useDocumentDrawer({
         id: drawerDocId ?? undefined,
         collectionSlug: reservationSlug
@@ -75,7 +143,6 @@ export const CalendarView = ()=>{
     const fetchReservations = useCallback(async ()=>{
         setLoading(true);
         try {
-            const apiUrl = `${config.serverURL ?? ''}${config.routes.api}/${reservationSlug}`;
             const params = new URLSearchParams({
                 depth: '1',
                 limit: '500',
@@ -93,15 +160,205 @@ export const CalendarView = ()=>{
     }, [
         rangeStart,
         rangeEnd,
-        config.routes.api,
-        config.serverURL,
-        reservationSlug
+        apiUrl
     ]);
     useEffect(()=>{
         void fetchReservations();
     }, [
         fetchReservations
     ]);
+    // Fetch pending count (always, for badge) — uses defaultStatus from config
+    const fetchPendingCount = useCallback(async ()=>{
+        try {
+            const params = new URLSearchParams({
+                limit: '0',
+                'where[status][equals]': defaultStatus
+            });
+            const response = await fetch(`${apiUrl}?${params}`);
+            const result = await response.json();
+            setPendingCount(result.totalDocs ?? 0);
+        } catch  {
+        // silently ignore
+        }
+    }, [
+        apiUrl,
+        defaultStatus
+    ]);
+    useEffect(()=>{
+        void fetchPendingCount();
+    }, [
+        fetchPendingCount
+    ]);
+    // Fetch pending reservations when tab is active — uses defaultStatus from config
+    const fetchPendingReservations = useCallback(async ()=>{
+        try {
+            const params = new URLSearchParams({
+                depth: '1',
+                limit: '500',
+                sort: 'startTime',
+                'where[status][equals]': defaultStatus
+            });
+            const response = await fetch(`${apiUrl}?${params}`);
+            const result = await response.json();
+            setPendingReservations(result.docs ?? []);
+        } catch  {
+            setPendingReservations([]);
+        }
+    }, [
+        apiUrl,
+        defaultStatus
+    ]);
+    useEffect(()=>{
+        if (viewMode === 'pending') {
+            void fetchPendingReservations();
+        }
+    }, [
+        viewMode,
+        fetchPendingReservations
+    ]);
+    // Clear selection when leaving pending view
+    useEffect(()=>{
+        if (viewMode !== 'pending') {
+            setSelectedIds(new Set());
+            setActionFeedback(null);
+        }
+    }, [
+        viewMode
+    ]);
+    // Auto-clear feedback toast
+    useEffect(()=>{
+        if (!actionFeedback) {
+            return;
+        }
+        const timer = setTimeout(()=>setActionFeedback(null), 4000);
+        return ()=>clearTimeout(timer);
+    }, [
+        actionFeedback
+    ]);
+    const patchReservation = useCallback(async (id, data)=>{
+        try {
+            const response = await fetch(`${apiUrl}/${id}`, {
+                body: JSON.stringify(data),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                method: 'PATCH'
+            });
+            return response.ok;
+        } catch  {
+            return false;
+        }
+    }, [
+        apiUrl
+    ]);
+    // Uses confirmStatus derived from config transitions
+    const handleQuickConfirm = useCallback(async (id)=>{
+        setConfirmingIds((prev)=>new Set(prev).add(id));
+        const ok = await patchReservation(id, {
+            status: confirmStatus
+        });
+        setConfirmingIds((prev)=>{
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
+        setActionFeedback({
+            type: ok ? 'success' : 'error',
+            message: ok ? t('reservation:pendingConfirmSuccess') : t('reservation:pendingConfirmError')
+        });
+        if (ok) {
+            setSelectedIds((prev)=>{
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+            void fetchPendingReservations();
+            void fetchPendingCount();
+        }
+    }, [
+        patchReservation,
+        fetchPendingReservations,
+        fetchPendingCount,
+        t,
+        confirmStatus
+    ]);
+    // Uses cancelStatus derived from config transitions
+    const handleQuickCancel = useCallback(async (id)=>{
+        setConfirmingIds((prev)=>new Set(prev).add(id));
+        const ok = await patchReservation(id, {
+            status: cancelStatus
+        });
+        setConfirmingIds((prev)=>{
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+        });
+        setActionFeedback({
+            type: ok ? 'success' : 'error',
+            message: ok ? t('reservation:pendingCancelSuccess') : t('reservation:pendingCancelError')
+        });
+        if (ok) {
+            setSelectedIds((prev)=>{
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+            void fetchPendingReservations();
+            void fetchPendingCount();
+        }
+    }, [
+        patchReservation,
+        fetchPendingReservations,
+        fetchPendingCount,
+        t,
+        cancelStatus
+    ]);
+    const confirmSelected = useCallback(async ()=>{
+        const ids = Array.from(selectedIds);
+        if (ids.length === 0) {
+            return;
+        }
+        setConfirmingIds((prev)=>{
+            const next = new Set(prev);
+            for (const id of ids){
+                next.add(id);
+            }
+            return next;
+        });
+        const results = await Promise.allSettled(ids.map((id)=>patchReservation(id, {
+                status: confirmStatus
+            })));
+        setConfirmingIds((prev)=>{
+            const next = new Set(prev);
+            for (const id of ids){
+                next.delete(id);
+            }
+            return next;
+        });
+        const succeeded = results.filter((r)=>r.status === 'fulfilled' && r.value).length;
+        const failed = ids.length - succeeded;
+        if (failed === 0) {
+            setActionFeedback({
+                type: 'success',
+                message: `${succeeded} ${t('reservation:pendingConfirmSuccess').toLowerCase()}`
+            });
+        } else {
+            setActionFeedback({
+                type: failed === ids.length ? 'error' : 'success',
+                message: t('reservation:pendingBulkConfirmSuccess').replace('{{succeeded}}', String(succeeded)).replace('{{failed}}', String(failed))
+            });
+        }
+        setSelectedIds(new Set());
+        void fetchPendingReservations();
+        void fetchPendingCount();
+    }, [
+        selectedIds,
+        patchReservation,
+        fetchPendingReservations,
+        fetchPendingCount,
+        t,
+        confirmStatus
+    ]);
     const handleEventClick = useCallback((e, id)=>{
         e.stopPropagation();
         setDrawerDocId(id);
@@ -129,6 +386,11 @@ export const CalendarView = ()=>{
         });
         pendingDrawerOpen.current = true;
     }, []);
+    const openDocDrawer = useCallback((id)=>{
+        setDrawerDocId(id);
+        setInitialData(undefined);
+        pendingDrawerOpen.current = true;
+    }, []);
     const navigate = useCallback((direction)=>{
         setCurrentDate((prev)=>{
             const next = new Date(prev);
@@ -154,6 +416,19 @@ export const CalendarView = ()=>{
         }
         return field.name ?? '';
     };
+    const getCustomerName = (field)=>{
+        if (!field) {
+            return '';
+        }
+        if (typeof field === 'string') {
+            return '';
+        }
+        const parts = [
+            field.firstName,
+            field.lastName
+        ].filter(Boolean);
+        return parts.length > 0 ? parts.join(' ') : field.name ?? '';
+    };
     const getEventLabel = (r, compact)=>{
         const time = new Date(r.startTime).toLocaleTimeString([], {
             hour: '2-digit',
@@ -163,7 +438,7 @@ export const CalendarView = ()=>{
         if (compact) {
             return `${time} ${serviceName}`.trim();
         }
-        const customerName = getResName(r.customer);
+        const customerName = getCustomerName(r.customer);
         const parts = [
             time,
             serviceName,
@@ -171,6 +446,19 @@ export const CalendarView = ()=>{
         ].filter(Boolean);
         return parts.join(' - ');
     };
+    // Returns all resource names for a reservation — from items array if present, otherwise top-level resource
+    const getResourceNames = (r)=>{
+        if (r.items && r.items.length > 0) {
+            const names = r.items.map((item)=>getResName(item.resource)).filter((name)=>name.length > 0);
+            if (names.length > 0) {
+                return names;
+            }
+        }
+        const single = getResName(r.resource);
+        return single ? [
+            single
+        ] : [];
+    };
     const getEventTooltip = (r)=>{
         const serviceName = getResName(r.service) || t('reservation:calendarUnknownService');
         const startStr = new Date(r.startTime).toLocaleTimeString([], {
@@ -181,23 +469,43 @@ export const CalendarView = ()=>{
             hour: '2-digit',
             minute: '2-digit'
         }) : '?';
-        const customerName = getResName(r.customer) || t('reservation:calendarUnknownCustomer');
-        const resourceName = getResName(r.resource) || t('reservation:calendarUnknownResource');
+        const customerName = getCustomerName(r.customer) || t('reservation:calendarUnknownCustomer');
+        const resourceNames = getResourceNames(r);
+        const resourceStr = resourceNames.length > 0 ? resourceNames.join(', ') : t('reservation:calendarUnknownResource');
         const status = STATUS_LABELS[r.status] ?? r.status;
-        return `${serviceName}\n${startStr} - ${endStr}\n${t('reservation:tooltipCustomer')} ${customerName}\n${t('reservation:tooltipResource')} ${resourceName}\n${t('reservation:tooltipStatus')} ${status}`;
+        return [
+            serviceName,
+            `${startStr} - ${endStr}`,
+            `${t('reservation:tooltipCustomer')} ${customerName}`,
+            `${t('reservation:tooltipResource')} ${resourceStr}`,
+            `${t('reservation:tooltipStatus')} ${status}`
+        ].join('\n');
     };
-    const renderEventItem = (r, compact)=>/*#__PURE__*/ _jsx("div", {
-            className: `${styles.eventItem} ${STATUS_CLASS_MAP[r.status] ?? ''}`,
+    const renderEventItem = (r, compact)=>{
+        // Use CSS class for built-in statuses; also apply inline background for custom statuses
+        const cssClass = STATUS_CLASS_MAP[r.status] ?? '';
+        const color = STATUS_COLORS[r.status];
+        // Only apply inline style when there's no CSS class (custom statuses) or as a supplement
+        const inlineStyle = cssClass ? undefined : {
+            background: color
+        };
+        return /*#__PURE__*/ _jsx("div", {
+            className: `${styles.eventItem} ${cssClass}`,
             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)
         }, r.id);
-    const renderStatusLegend = ()=>/*#__PURE__*/ _jsx("div", {
+    };
+    // Dynamic legend: iterates all statuses from the status machine config
+    const renderStatusLegend = ()=>{
+        const statuses = statusMachine?.statuses ?? Object.keys(BUILTIN_STATUS_COLORS);
+        return /*#__PURE__*/ _jsx("div", {
             className: styles.statusLegend,
-            children: Object.entries(STATUS_LABELS).map(([key, label])=>/*#__PURE__*/ _jsxs("div", {
+            children: statuses.map((key)=>/*#__PURE__*/ _jsxs("div", {
                     className: styles.legendItem,
                     children: [
                         /*#__PURE__*/ _jsx("span", {
@@ -206,10 +514,11 @@ export const CalendarView = ()=>{
                                 background: STATUS_COLORS[key]
                             }
                         }),
-                        label
+                        STATUS_LABELS[key] ?? key
                     ]
                 }, key))
         });
+    };
     const renderCurrentTimeLine = (cellDate, cellHour)=>{
         const now = new Date();
         if (now.getFullYear() !== cellDate.getFullYear() || now.getMonth() !== cellDate.getMonth() || now.getDate() !== cellDate.getDate() || now.getHours() !== cellHour) {
@@ -391,6 +700,181 @@ export const CalendarView = ()=>{
             })
         });
     };
+    const renderPendingView = ()=>{
+        if (pendingReservations.length === 0) {
+            return /*#__PURE__*/ _jsx("div", {
+                className: styles.pendingEmpty,
+                children: t('reservation:pendingEmpty')
+            });
+        }
+        const allSelected = pendingReservations.length > 0 && pendingReservations.every((r)=>selectedIds.has(r.id));
+        const toggleSelectAll = ()=>{
+            if (allSelected) {
+                setSelectedIds(new Set());
+            } else {
+                setSelectedIds(new Set(pendingReservations.map((r)=>r.id)));
+            }
+        };
+        const toggleSelect = (id)=>{
+            setSelectedIds((prev)=>{
+                const next = new Set(prev);
+                if (next.has(id)) {
+                    next.delete(id);
+                } else {
+                    next.add(id);
+                }
+                return next;
+            });
+        };
+        const formatDateTime = (iso)=>{
+            const d = new Date(iso);
+            return d.toLocaleString([], {
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                month: 'short',
+                year: 'numeric'
+            });
+        };
+        return /*#__PURE__*/ _jsxs("div", {
+            className: styles.pendingView,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.pendingToolbar,
+                    children: [
+                        /*#__PURE__*/ _jsxs("label", {
+                            className: styles.selectAllLabel,
+                            children: [
+                                /*#__PURE__*/ _jsx("input", {
+                                    "aria-label": t('reservation:pendingSelectAll'),
+                                    checked: allSelected,
+                                    onChange: toggleSelectAll,
+                                    type: "checkbox"
+                                }),
+                                t('reservation:pendingSelectAll')
+                            ]
+                        }),
+                        selectedIds.size > 0 && /*#__PURE__*/ _jsx("button", {
+                            className: styles.bulkConfirmButton,
+                            disabled: confirmingIds.size > 0,
+                            onClick: ()=>void confirmSelected(),
+                            type: "button",
+                            children: confirmingIds.size > 0 ? t('reservation:pendingConfirming') : t('reservation:pendingConfirmSelected').replace('{{count}}', String(selectedIds.size))
+                        })
+                    ]
+                }),
+                actionFeedback && /*#__PURE__*/ _jsx("div", {
+                    className: `${styles.feedbackToast} ${actionFeedback.type === 'success' ? styles.feedbackSuccess : styles.feedbackError}`,
+                    children: actionFeedback.message
+                }),
+                /*#__PURE__*/ _jsxs("table", {
+                    className: styles.pendingTable,
+                    children: [
+                        /*#__PURE__*/ _jsx("thead", {
+                            children: /*#__PURE__*/ _jsxs("tr", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("th", {
+                                        "aria-label": t('reservation:pendingSelectAll'),
+                                        className: styles.pendingTh
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        className: styles.pendingTh,
+                                        children: t('reservation:fieldCustomer')
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        className: styles.pendingTh,
+                                        children: t('reservation:fieldService')
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        className: styles.pendingTh,
+                                        children: t('reservation:fieldResource')
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        className: styles.pendingTh,
+                                        children: t('reservation:pendingDateTime')
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        className: styles.pendingTh,
+                                        children: t('reservation:pendingActions')
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("tbody", {
+                            children: pendingReservations.map((r)=>{
+                                const isConfirming = confirmingIds.has(r.id);
+                                // Show all resources from items array if present, else top-level resource
+                                const resourceDisplay = getResourceNames(r).join(', ') || t('reservation:calendarUnknownResource');
+                                return /*#__PURE__*/ _jsxs("tr", {
+                                    className: styles.pendingRow,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: styles.pendingTd,
+                                            children: /*#__PURE__*/ _jsx("input", {
+                                                "aria-label": getCustomerName(r.customer) || r.id,
+                                                checked: selectedIds.has(r.id),
+                                                onChange: ()=>toggleSelect(r.id),
+                                                type: "checkbox"
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: styles.pendingTd,
+                                            children: /*#__PURE__*/ _jsx("span", {
+                                                className: styles.pendingCustomerLink,
+                                                onClick: ()=>openDocDrawer(r.id),
+                                                onKeyDown: (e)=>{
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        e.preventDefault();
+                                                        openDocDrawer(r.id);
+                                                    }
+                                                },
+                                                role: "button",
+                                                tabIndex: 0,
+                                                children: getCustomerName(r.customer) || t('reservation:calendarUnknownCustomer')
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: styles.pendingTd,
+                                            children: getResName(r.service) || t('reservation:calendarUnknownService')
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: styles.pendingTd,
+                                            children: resourceDisplay
+                                        }),
+                                        /*#__PURE__*/ _jsx("td", {
+                                            className: styles.pendingTd,
+                                            children: formatDateTime(r.startTime)
+                                        }),
+                                        /*#__PURE__*/ _jsxs("td", {
+                                            className: styles.pendingTd,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    className: styles.confirmButton,
+                                                    disabled: isConfirming,
+                                                    onClick: ()=>void handleQuickConfirm(r.id),
+                                                    title: t('reservation:pendingConfirm'),
+                                                    type: "button",
+                                                    children: "✓"
+                                                }),
+                                                /*#__PURE__*/ _jsx("button", {
+                                                    className: styles.cancelButton,
+                                                    disabled: isConfirming,
+                                                    onClick: ()=>void handleQuickCancel(r.id),
+                                                    title: t('reservation:pendingCancel'),
+                                                    type: "button",
+                                                    children: "✗"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, r.id);
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    };
     const dateLabel = useMemo(()=>{
         if (viewMode === 'month') {
             return currentDate.toLocaleDateString([], {
@@ -422,19 +906,25 @@ export const CalendarView = ()=>{
         currentDate,
         viewMode
     ]);
-    if (loading) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: styles.loading,
-            children: t('reservation:calendarLoading')
-        });
-    }
+    const handleDrawerSave = useCallback(()=>{
+        void fetchReservations();
+        void fetchPendingCount();
+        if (viewMode === 'pending') {
+            void fetchPendingReservations();
+        }
+    }, [
+        fetchReservations,
+        fetchPendingCount,
+        fetchPendingReservations,
+        viewMode
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: styles.wrapper,
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: styles.header,
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
+                    viewMode !== 'pending' && /*#__PURE__*/ _jsxs("div", {
                         className: styles.navButtons,
                         children: [
                             /*#__PURE__*/ _jsx("button", {
@@ -461,6 +951,7 @@ export const CalendarView = ()=>{
                             })
                         ]
                     }),
+                    viewMode === 'pending' && /*#__PURE__*/ _jsx("div", {}),
                     /*#__PURE__*/ _jsxs("div", {
                         className: styles.viewToggle,
                         children: [
@@ -482,24 +973,42 @@ export const CalendarView = ()=>{
                                 {
                                     key: 'day',
                                     label: t('reservation:calendarDay')
+                                },
+                                {
+                                    key: 'pending',
+                                    label: t('reservation:calendarPending')
                                 }
-                            ].map(({ key, label })=>/*#__PURE__*/ _jsx("button", {
+                            ].map(({ key, label })=>/*#__PURE__*/ _jsxs("button", {
                                     className: `${styles.viewToggleButton} ${viewMode === key ? styles.viewToggleButtonActive : ''}`,
                                     onClick: ()=>setViewMode(key),
                                     type: "button",
-                                    children: label
+                                    children: [
+                                        label,
+                                        key === 'pending' && pendingCount > 0 && /*#__PURE__*/ _jsx("span", {
+                                            className: styles.pendingBadge,
+                                            children: pendingCount
+                                        })
+                                    ]
                                 }, key))
                         ]
                     })
                 ]
             }),
-            renderStatusLegend(),
-            viewMode === 'month' && renderMonthView(),
-            viewMode === 'week' && renderWeekView(),
-            viewMode === 'day' && renderDayView(),
+            viewMode !== 'pending' && renderStatusLegend(),
+            loading && viewMode !== 'pending' ? /*#__PURE__*/ _jsx("div", {
+                className: styles.loading,
+                children: t('reservation:calendarLoading')
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    viewMode === 'month' && renderMonthView(),
+                    viewMode === 'week' && renderWeekView(),
+                    viewMode === 'day' && renderDayView()
+                ]
+            }),
+            viewMode === 'pending' && renderPendingView(),
             /*#__PURE__*/ _jsx(DocumentDrawer, {
                 initialData: initialData,
-                onSave: fetchReservations
+                onSave: handleDrawerSave
             })
         ]
     });