payload-reserve 1.0.0

package/dist/components/AvailabilityOverview/index.js

@@ -0,0 +1,277 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useTranslation } from '@payloadcms/ui';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import styles from './AvailabilityOverview.module.css';
+const DAY_MAP = {
+    fri: 5,
+    mon: 1,
+    sat: 6,
+    sun: 0,
+    thu: 4,
+    tue: 2,
+    wed: 3
+};
+export const AvailabilityOverview = ()=>{
+    const { config } = useConfig();
+    const { t: _t } = useTranslation();
+    const t = _t;
+    const slugs = config.admin?.custom?.reservationSlugs;
+    const DAY_NAMES = useMemo(()=>[
+            t('reservation:dayShortSun'),
+            t('reservation:dayShortMon'),
+            t('reservation:dayShortTue'),
+            t('reservation:dayShortWed'),
+            t('reservation:dayShortThu'),
+            t('reservation:dayShortFri'),
+            t('reservation:dayShortSat')
+        ], [
+        t
+    ]);
+    const [weekStart, setWeekStart] = useState(()=>{
+        const now = new Date();
+        const d = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        d.setDate(d.getDate() - d.getDay());
+        return d;
+    });
+    const [resources, setResources] = useState([]);
+    const [schedules, setSchedules] = useState([]);
+    const [reservations, setReservations] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const weekDays = useMemo(()=>{
+        return Array.from({
+            length: 7
+        }, (_, i)=>{
+            const d = new Date(weekStart);
+            d.setDate(d.getDate() + i);
+            return d;
+        });
+    }, [
+        weekStart
+    ]);
+    const weekEnd = useMemo(()=>{
+        const d = new Date(weekStart);
+        d.setDate(d.getDate() + 6);
+        d.setHours(23, 59, 59, 999);
+        return d;
+    }, [
+        weekStart
+    ]);
+    useEffect(()=>{
+        if (!slugs) {
+            return;
+        }
+        const fetchData = async ()=>{
+            setLoading(true);
+            const apiBase = `${config.serverURL ?? ''}${config.routes.api}`;
+            try {
+                const [resourcesRes, schedulesRes, reservationsRes] = await Promise.all([
+                    fetch(`${apiBase}/${slugs.resources}?where[active][equals]=true&limit=100`),
+                    fetch(`${apiBase}/${slugs.schedules}?where[active][equals]=true&limit=500`),
+                    fetch(`${apiBase}/${slugs.reservations}?${new URLSearchParams({
+                        depth: '0',
+                        limit: '500',
+                        'where[startTime][greater_than_equal]': weekStart.toISOString(),
+                        'where[startTime][less_than_equal]': weekEnd.toISOString(),
+                        'where[status][not_in]': 'cancelled,no-show'
+                    })}`)
+                ]);
+                const [rData, sData, resData] = await Promise.all([
+                    resourcesRes.json(),
+                    schedulesRes.json(),
+                    reservationsRes.json()
+                ]);
+                setResources(rData.docs ?? []);
+                setSchedules(sData.docs ?? []);
+                setReservations(resData.docs ?? []);
+            } catch  {
+                setResources([]);
+                setSchedules([]);
+                setReservations([]);
+            }
+            setLoading(false);
+        };
+        void fetchData();
+    }, [
+        weekStart,
+        weekEnd,
+        config.routes.api,
+        config.serverURL,
+        slugs
+    ]);
+    const navigateWeek = useCallback((direction)=>{
+        setWeekStart((prev)=>{
+            const next = new Date(prev);
+            next.setDate(next.getDate() + 7 * direction);
+            return next;
+        });
+    }, []);
+    const goToThisWeek = useCallback(()=>{
+        const now = new Date();
+        const d = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        d.setDate(d.getDate() - d.getDay());
+        setWeekStart(d);
+    }, []);
+    const getResourceId = (r)=>typeof r === 'object' ? r.id : r;
+    const getSlotsForResourceDay = (resourceId, day)=>{
+        const resourceSchedules = schedules.filter((s)=>getResourceId(s.resource) === resourceId);
+        const dateStr = day.toISOString().split('T')[0];
+        const dayOfWeek = day.getDay();
+        const slots = [];
+        for (const schedule of resourceSchedules){
+            // Check for exceptions
+            const exception = schedule.exceptions?.find((e)=>{
+                const excDate = new Date(e.date).toISOString().split('T')[0];
+                return excDate === dateStr;
+            });
+            if (exception) {
+                slots.push({
+                    type: 'exception',
+                    label: exception.reason || t('reservation:availabilityUnavailable')
+                });
+                continue;
+            }
+            if (schedule.scheduleType === 'recurring') {
+                for (const slot of schedule.recurringSlots ?? []){
+                    if (DAY_MAP[slot.day] === dayOfWeek) {
+                        slots.push({
+                            type: 'available',
+                            label: `${slot.startTime}-${slot.endTime}`
+                        });
+                    }
+                }
+            } else if (schedule.scheduleType === 'manual') {
+                for (const slot of schedule.manualSlots ?? []){
+                    const slotDate = new Date(slot.date).toISOString().split('T')[0];
+                    if (slotDate === dateStr) {
+                        slots.push({
+                            type: 'available',
+                            label: `${slot.startTime}-${slot.endTime}`
+                        });
+                    }
+                }
+            }
+        }
+        return slots;
+    };
+    const getBookingsForResourceDay = (resourceId, day)=>{
+        return reservations.filter((r)=>{
+            const rDate = new Date(r.startTime);
+            return getResourceId(r.resource) === resourceId && rDate.getFullYear() === day.getFullYear() && rDate.getMonth() === day.getMonth() && rDate.getDate() === day.getDate();
+        });
+    };
+    if (!slugs) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: styles.noResources,
+            children: t('reservation:availabilityNotConfigured')
+        });
+    }
+    if (loading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: styles.loading,
+            children: t('reservation:availabilityLoading')
+        });
+    }
+    const weekLabel = `${weekDays[0].toLocaleDateString([], {
+        day: 'numeric',
+        month: 'short'
+    })} - ${weekDays[6].toLocaleDateString([], {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+    })}`;
+    const gridColumns = `150px repeat(7, 1fr)`;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: styles.title,
+                children: t('reservation:availabilityTitle')
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.navigation,
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        className: styles.navButton,
+                        onClick: ()=>navigateWeek(-1),
+                        type: "button",
+                        children: "←"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: styles.navButton,
+                        onClick: goToThisWeek,
+                        type: "button",
+                        children: t('reservation:availabilityThisWeek')
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: styles.navButton,
+                        onClick: ()=>navigateWeek(1),
+                        type: "button",
+                        children: "→"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: styles.weekLabel,
+                        children: weekLabel
+                    })
+                ]
+            }),
+            resources.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                className: styles.noResources,
+                children: t('reservation:availabilityNoResources')
+            }) : /*#__PURE__*/ _jsxs("div", {
+                className: styles.grid,
+                style: {
+                    gridTemplateColumns: gridColumns
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.headerCell,
+                        children: t('reservation:availabilityResource')
+                    }),
+                    weekDays.map((day, i)=>/*#__PURE__*/ _jsxs("div", {
+                            className: styles.headerCell,
+                            children: [
+                                DAY_NAMES[day.getDay()],
+                                " ",
+                                day.getDate()
+                            ]
+                        }, i)),
+                    resources.map((resource)=>/*#__PURE__*/ _jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: styles.resourceName,
+                                    children: resource.name
+                                }),
+                                weekDays.map((day, di)=>{
+                                    const slots = getSlotsForResourceDay(resource.id, day);
+                                    const bookings = getBookingsForResourceDay(resource.id, day);
+                                    return /*#__PURE__*/ _jsxs("div", {
+                                        className: styles.cell,
+                                        children: [
+                                            slots.map((slot, si)=>/*#__PURE__*/ _jsx("div", {
+                                                    className: slot.type === 'exception' ? styles.slotException : styles.slotAvailable,
+                                                    children: slot.label
+                                                }, `slot-${si}`)),
+                                            bookings.map((b)=>/*#__PURE__*/ _jsxs("div", {
+                                                    className: styles.slotBooked,
+                                                    children: [
+                                                        new Date(b.startTime).toLocaleTimeString([], {
+                                                            hour: '2-digit',
+                                                            minute: '2-digit'
+                                                        }),
+                                                        ' ',
+                                                        t('reservation:availabilityBooked')
+                                                    ]
+                                                }, b.id))
+                                        ]
+                                    }, `cell-${resource.id}-${di}`);
+                                })
+                            ]
+                        }, resource.id))
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/components/AvailabilityOverview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AvailabilityOverview/index.tsx"],"sourcesContent":["'use client'\nimport type { AdminViewServerProps } from 'payload'\n\nimport { useConfig, useTranslation } from '@payloadcms/ui'\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { PluginT } from '../../translations/index.js'\n\nimport styles from './AvailabilityOverview.module.css'\n\ntype Resource = {\n  active?: boolean\n  id: string\n  name: string\n}\n\ntype Schedule = {\n  active?: boolean\n  exceptions?: Array<{ date: string; reason?: string }>\n  id: string\n  manualSlots?: Array<{ date: string; endTime: string; startTime: string }>\n  recurringSlots?: Array<{ day: string; endTime: string; startTime: string }>\n  resource: { id: string } | string\n  scheduleType: 'manual' | 'recurring'\n}\n\ntype Reservation = {\n  endTime?: string\n  id: string\n  resource: { id: string } | string\n  startTime: string\n  status: string\n}\n\nconst DAY_MAP: Record<string, number> = {\n  fri: 5,\n  mon: 1,\n  sat: 6,\n  sun: 0,\n  thu: 4,\n  tue: 2,\n  wed: 3,\n}\n\nexport const AvailabilityOverview: React.FC<AdminViewServerProps> = () => {\n  const { config } = useConfig()\n  const { t: _t } = useTranslation()\n  const t = _t as PluginT\n  const slugs = config.admin?.custom?.reservationSlugs\n\n  const DAY_NAMES = useMemo(\n    () => [\n      t('reservation:dayShortSun'),\n      t('reservation:dayShortMon'),\n      t('reservation:dayShortTue'),\n      t('reservation:dayShortWed'),\n      t('reservation:dayShortThu'),\n      t('reservation:dayShortFri'),\n      t('reservation:dayShortSat'),\n    ],\n    [t],\n  )\n\n  const [weekStart, setWeekStart] = useState(() => {\n    const now = new Date()\n    const d = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n    d.setDate(d.getDate() - d.getDay())\n    return d\n  })\n\n  const [resources, setResources] = useState<Resource[]>([])\n  const [schedules, setSchedules] = useState<Schedule[]>([])\n  const [reservations, setReservations] = useState<Reservation[]>([])\n  const [loading, setLoading] = useState(true)\n\n  const weekDays = useMemo(() => {\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(weekStart)\n      d.setDate(d.getDate() + i)\n      return d\n    })\n  }, [weekStart])\n\n  const weekEnd = useMemo(() => {\n    const d = new Date(weekStart)\n    d.setDate(d.getDate() + 6)\n    d.setHours(23, 59, 59, 999)\n    return d\n  }, [weekStart])\n\n  useEffect(() => {\n    if (!slugs) {return}\n\n    const fetchData = async () => {\n      setLoading(true)\n      const apiBase = `${config.serverURL ?? ''}${config.routes.api}`\n\n      try {\n        const [resourcesRes, schedulesRes, reservationsRes] = await Promise.all([\n          fetch(`${apiBase}/${slugs.resources}?where[active][equals]=true&limit=100`),\n          fetch(`${apiBase}/${slugs.schedules}?where[active][equals]=true&limit=500`),\n          fetch(\n            `${apiBase}/${slugs.reservations}?${new URLSearchParams({\n              depth: '0',\n              limit: '500',\n              'where[startTime][greater_than_equal]': weekStart.toISOString(),\n              'where[startTime][less_than_equal]': weekEnd.toISOString(),\n              'where[status][not_in]': 'cancelled,no-show',\n            })}`,\n          ),\n        ])\n\n        const [rData, sData, resData] = await Promise.all([\n          resourcesRes.json(),\n          schedulesRes.json(),\n          reservationsRes.json(),\n        ])\n\n        setResources(rData.docs ?? [])\n        setSchedules(sData.docs ?? [])\n        setReservations(resData.docs ?? [])\n      } catch {\n        setResources([])\n        setSchedules([])\n        setReservations([])\n      }\n      setLoading(false)\n    }\n\n    void fetchData()\n  }, [weekStart, weekEnd, config.routes.api, config.serverURL, slugs])\n\n  const navigateWeek = useCallback((direction: -1 | 1) => {\n    setWeekStart((prev) => {\n      const next = new Date(prev)\n      next.setDate(next.getDate() + 7 * direction)\n      return next\n    })\n  }, [])\n\n  const goToThisWeek = useCallback(() => {\n    const now = new Date()\n    const d = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n    d.setDate(d.getDate() - d.getDay())\n    setWeekStart(d)\n  }, [])\n\n  const getResourceId = (r: { id: string } | string) =>\n    typeof r === 'object' ? r.id : r\n\n  const getSlotsForResourceDay = (resourceId: string, day: Date) => {\n    const resourceSchedules = schedules.filter(\n      (s) => getResourceId(s.resource) === resourceId,\n    )\n    const dateStr = day.toISOString().split('T')[0]\n    const dayOfWeek = day.getDay()\n\n    const slots: Array<{ label: string; type: 'available' | 'exception' }> = []\n\n    for (const schedule of resourceSchedules) {\n      // Check for exceptions\n      const exception = schedule.exceptions?.find((e) => {\n        const excDate = new Date(e.date).toISOString().split('T')[0]\n        return excDate === dateStr\n      })\n\n      if (exception) {\n        slots.push({\n          type: 'exception',\n          label: exception.reason || t('reservation:availabilityUnavailable'),\n        })\n        continue\n      }\n\n      if (schedule.scheduleType === 'recurring') {\n        for (const slot of schedule.recurringSlots ?? []) {\n          if (DAY_MAP[slot.day] === dayOfWeek) {\n            slots.push({\n              type: 'available',\n              label: `${slot.startTime}-${slot.endTime}`,\n            })\n          }\n        }\n      } else if (schedule.scheduleType === 'manual') {\n        for (const slot of schedule.manualSlots ?? []) {\n          const slotDate = new Date(slot.date).toISOString().split('T')[0]\n          if (slotDate === dateStr) {\n            slots.push({\n              type: 'available',\n              label: `${slot.startTime}-${slot.endTime}`,\n            })\n          }\n        }\n      }\n    }\n\n    return slots\n  }\n\n  const getBookingsForResourceDay = (resourceId: string, day: Date) => {\n    return reservations.filter((r) => {\n      const rDate = new Date(r.startTime)\n      return (\n        getResourceId(r.resource) === resourceId &&\n        rDate.getFullYear() === day.getFullYear() &&\n        rDate.getMonth() === day.getMonth() &&\n        rDate.getDate() === day.getDate()\n      )\n    })\n  }\n\n  if (!slugs) {\n    return <div className={styles.noResources}>{t('reservation:availabilityNotConfigured')}</div>\n  }\n\n  if (loading) {\n    return <div className={styles.loading}>{t('reservation:availabilityLoading')}</div>\n  }\n\n  const weekLabel = `${weekDays[0].toLocaleDateString([], { day: 'numeric', month: 'short' })} - ${weekDays[6].toLocaleDateString([], { day: 'numeric', month: 'short', year: 'numeric' })}`\n\n  const gridColumns = `150px repeat(7, 1fr)`\n\n  return (\n    <div className={styles.wrapper}>\n      <h2 className={styles.title}>{t('reservation:availabilityTitle')}</h2>\n      <div className={styles.navigation}>\n        <button className={styles.navButton} onClick={() => navigateWeek(-1)} type=\"button\">\n          &larr;\n        </button>\n        <button className={styles.navButton} onClick={goToThisWeek} type=\"button\">\n          {t('reservation:availabilityThisWeek')}\n        </button>\n        <button className={styles.navButton} onClick={() => navigateWeek(1)} type=\"button\">\n          &rarr;\n        </button>\n        <span className={styles.weekLabel}>{weekLabel}</span>\n      </div>\n\n      {resources.length === 0 ? (\n        <div className={styles.noResources}>{t('reservation:availabilityNoResources')}</div>\n      ) : (\n        <div className={styles.grid} style={{ gridTemplateColumns: gridColumns }}>\n          {/* Header row */}\n          <div className={styles.headerCell}>{t('reservation:availabilityResource')}</div>\n          {weekDays.map((day, i) => (\n            <div className={styles.headerCell} key={i}>\n              {DAY_NAMES[day.getDay()]} {day.getDate()}\n            </div>\n          ))}\n\n          {/* Resource rows */}\n          {resources.map((resource) => (\n            <Fragment key={resource.id}>\n              <div className={styles.resourceName}>\n                {resource.name}\n              </div>\n              {weekDays.map((day, di) => {\n                const slots = getSlotsForResourceDay(resource.id, day)\n                const bookings = getBookingsForResourceDay(resource.id, day)\n\n                return (\n                  <div className={styles.cell} key={`cell-${resource.id}-${di}`}>\n                    {slots.map((slot, si) => (\n                      <div\n                        className={\n                          slot.type === 'exception'\n                            ? styles.slotException\n                            : styles.slotAvailable\n                        }\n                        key={`slot-${si}`}\n                      >\n                        {slot.label}\n                      </div>\n                    ))}\n                    {bookings.map((b) => (\n                      <div className={styles.slotBooked} key={b.id}>\n                        {new Date(b.startTime).toLocaleTimeString([], {\n                          hour: '2-digit',\n                          minute: '2-digit',\n                        })}{' '}\n                        {t('reservation:availabilityBooked')}\n                      </div>\n                    ))}\n                  </div>\n                )\n              })}\n            </Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["useConfig","useTranslation","Fragment","useCallback","useEffect","useMemo","useState","styles","DAY_MAP","fri","mon","sat","sun","thu","tue","wed","AvailabilityOverview","config","t","_t","slugs","admin","custom","reservationSlugs","DAY_NAMES","weekStart","setWeekStart","now","Date","d","getFullYear","getMonth","getDate","setDate","getDay","resources","setResources","schedules","setSchedules","reservations","setReservations","loading","setLoading","weekDays","Array","from","length","_","i","weekEnd","setHours","fetchData","apiBase","serverURL","routes","api","resourcesRes","schedulesRes","reservationsRes","Promise","all","fetch","URLSearchParams","depth","limit","toISOString","rData","sData","resData","json","docs","navigateWeek","direction","prev","next","goToThisWeek","getResourceId","r","id","getSlotsForResourceDay","resourceId","day","resourceSchedules","filter","s","resource","dateStr","split","dayOfWeek","slots","schedule","exception","exceptions","find","e","excDate","date","push","type","label","reason","scheduleType","slot","recurringSlots","startTime","endTime","manualSlots","slotDate","getBookingsForResourceDay","rDate","div","className","noResources","weekLabel","toLocaleDateString","month","year","gridColumns","wrapper","h2","title","navigation","button","navButton","onClick","span","grid","style","gridTemplateColumns","headerCell","map","resourceName","name","di","bookings","cell","si","slotException","slotAvailable","b","slotBooked","toLocaleTimeString","hour","minute"],"mappings":"AAAA;;AAGA,SAASA,SAAS,EAAEC,cAAc,QAAQ,iBAAgB;AAC1D,SAASC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAI3E,OAAOC,YAAY,oCAAmC;AA0BtD,MAAMC,UAAkC;IACtCC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK;AACP;AAEA,OAAO,MAAMC,uBAAuD;IAClE,MAAM,EAAEC,MAAM,EAAE,GAAGjB;IACnB,MAAM,EAAEkB,GAAGC,EAAE,EAAE,GAAGlB;IAClB,MAAMiB,IAAIC;IACV,MAAMC,QAAQH,OAAOI,KAAK,EAAEC,QAAQC;IAEpC,MAAMC,YAAYnB,QAChB,IAAM;YACJa,EAAE;YACFA,EAAE;YACFA,EAAE;YACFA,EAAE;YACFA,EAAE;YACFA,EAAE;YACFA,EAAE;SACH,EACD;QAACA;KAAE;IAGL,MAAM,CAACO,WAAWC,aAAa,GAAGpB,SAAS;QACzC,MAAMqB,MAAM,IAAIC;QAChB,MAAMC,IAAI,IAAID,KAAKD,IAAIG,WAAW,IAAIH,IAAII,QAAQ,IAAIJ,IAAIK,OAAO;QACjEH,EAAEI,OAAO,CAACJ,EAAEG,OAAO,KAAKH,EAAEK,MAAM;QAChC,OAAOL;IACT;IAEA,MAAM,CAACM,WAAWC,aAAa,GAAG9B,SAAqB,EAAE;IACzD,MAAM,CAAC+B,WAAWC,aAAa,GAAGhC,SAAqB,EAAE;IACzD,MAAM,CAACiC,cAAcC,gBAAgB,GAAGlC,SAAwB,EAAE;IAClE,MAAM,CAACmC,SAASC,WAAW,GAAGpC,SAAS;IAEvC,MAAMqC,WAAWtC,QAAQ;QACvB,OAAOuC,MAAMC,IAAI,CAAC;YAAEC,QAAQ;QAAE,GAAG,CAACC,GAAGC;YACnC,MAAMnB,IAAI,IAAID,KAAKH;YACnBI,EAAEI,OAAO,CAACJ,EAAEG,OAAO,KAAKgB;YACxB,OAAOnB;QACT;IACF,GAAG;QAACJ;KAAU;IAEd,MAAMwB,UAAU5C,QAAQ;QACtB,MAAMwB,IAAI,IAAID,KAAKH;QACnBI,EAAEI,OAAO,CAACJ,EAAEG,OAAO,KAAK;QACxBH,EAAEqB,QAAQ,CAAC,IAAI,IAAI,IAAI;QACvB,OAAOrB;IACT,GAAG;QAACJ;KAAU;IAEdrB,UAAU;QACR,IAAI,CAACgB,OAAO;YAAC;QAAM;QAEnB,MAAM+B,YAAY;YAChBT,WAAW;YACX,MAAMU,UAAU,GAAGnC,OAAOoC,SAAS,IAAI,KAAKpC,OAAOqC,MAAM,CAACC,GAAG,EAAE;YAE/D,IAAI;gBACF,MAAM,CAACC,cAAcC,cAAcC,gBAAgB,GAAG,MAAMC,QAAQC,GAAG,CAAC;oBACtEC,MAAM,GAAGT,QAAQ,CAAC,EAAEhC,MAAMe,SAAS,CAAC,qCAAqC,CAAC;oBAC1E0B,MAAM,GAAGT,QAAQ,CAAC,EAAEhC,MAAMiB,SAAS,CAAC,qCAAqC,CAAC;oBAC1EwB,MACE,GAAGT,QAAQ,CAAC,EAAEhC,MAAMmB,YAAY,CAAC,CAAC,EAAE,IAAIuB,gBAAgB;wBACtDC,OAAO;wBACPC,OAAO;wBACP,wCAAwCvC,UAAUwC,WAAW;wBAC7D,qCAAqChB,QAAQgB,WAAW;wBACxD,yBAAyB;oBAC3B,IAAI;iBAEP;gBAED,MAAM,CAACC,OAAOC,OAAOC,QAAQ,GAAG,MAAMT,QAAQC,GAAG,CAAC;oBAChDJ,aAAaa,IAAI;oBACjBZ,aAAaY,IAAI;oBACjBX,gBAAgBW,IAAI;iBACrB;gBAEDjC,aAAa8B,MAAMI,IAAI,IAAI,EAAE;gBAC7BhC,aAAa6B,MAAMG,IAAI,IAAI,EAAE;gBAC7B9B,gBAAgB4B,QAAQE,IAAI,IAAI,EAAE;YACpC,EAAE,OAAM;gBACNlC,aAAa,EAAE;gBACfE,aAAa,EAAE;gBACfE,gBAAgB,EAAE;YACpB;YACAE,WAAW;QACb;QAEA,KAAKS;IACP,GAAG;QAAC1B;QAAWwB;QAAShC,OAAOqC,MAAM,CAACC,GAAG;QAAEtC,OAAOoC,SAAS;QAAEjC;KAAM;IAEnE,MAAMmD,eAAepE,YAAY,CAACqE;QAChC9C,aAAa,CAAC+C;YACZ,MAAMC,OAAO,IAAI9C,KAAK6C;YACtBC,KAAKzC,OAAO,CAACyC,KAAK1C,OAAO,KAAK,IAAIwC;YAClC,OAAOE;QACT;IACF,GAAG,EAAE;IAEL,MAAMC,eAAexE,YAAY;QAC/B,MAAMwB,MAAM,IAAIC;QAChB,MAAMC,IAAI,IAAID,KAAKD,IAAIG,WAAW,IAAIH,IAAII,QAAQ,IAAIJ,IAAIK,OAAO;QACjEH,EAAEI,OAAO,CAACJ,EAAEG,OAAO,KAAKH,EAAEK,MAAM;QAChCR,aAAaG;IACf,GAAG,EAAE;IAEL,MAAM+C,gBAAgB,CAACC,IACrB,OAAOA,MAAM,WAAWA,EAAEC,EAAE,GAAGD;IAEjC,MAAME,yBAAyB,CAACC,YAAoBC;QAClD,MAAMC,oBAAoB7C,UAAU8C,MAAM,CACxC,CAACC,IAAMR,cAAcQ,EAAEC,QAAQ,MAAML;QAEvC,MAAMM,UAAUL,IAAIhB,WAAW,GAAGsB,KAAK,CAAC,IAAI,CAAC,EAAE;QAC/C,MAAMC,YAAYP,IAAI/C,MAAM;QAE5B,MAAMuD,QAAmE,EAAE;QAE3E,KAAK,MAAMC,YAAYR,kBAAmB;YACxC,uBAAuB;YACvB,MAAMS,YAAYD,SAASE,UAAU,EAAEC,KAAK,CAACC;gBAC3C,MAAMC,UAAU,IAAInE,KAAKkE,EAAEE,IAAI,EAAE/B,WAAW,GAAGsB,KAAK,CAAC,IAAI,CAAC,EAAE;gBAC5D,OAAOQ,YAAYT;YACrB;YAEA,IAAIK,WAAW;gBACbF,MAAMQ,IAAI,CAAC;oBACTC,MAAM;oBACNC,OAAOR,UAAUS,MAAM,IAAIlF,EAAE;gBAC/B;gBACA;YACF;YAEA,IAAIwE,SAASW,YAAY,KAAK,aAAa;gBACzC,KAAK,MAAMC,QAAQZ,SAASa,cAAc,IAAI,EAAE,CAAE;oBAChD,IAAI/F,OAAO,CAAC8F,KAAKrB,GAAG,CAAC,KAAKO,WAAW;wBACnCC,MAAMQ,IAAI,CAAC;4BACTC,MAAM;4BACNC,OAAO,GAAGG,KAAKE,SAAS,CAAC,CAAC,EAAEF,KAAKG,OAAO,EAAE;wBAC5C;oBACF;gBACF;YACF,OAAO,IAAIf,SAASW,YAAY,KAAK,UAAU;gBAC7C,KAAK,MAAMC,QAAQZ,SAASgB,WAAW,IAAI,EAAE,CAAE;oBAC7C,MAAMC,WAAW,IAAI/E,KAAK0E,KAAKN,IAAI,EAAE/B,WAAW,GAAGsB,KAAK,CAAC,IAAI,CAAC,EAAE;oBAChE,IAAIoB,aAAarB,SAAS;wBACxBG,MAAMQ,IAAI,CAAC;4BACTC,MAAM;4BACNC,OAAO,GAAGG,KAAKE,SAAS,CAAC,CAAC,EAAEF,KAAKG,OAAO,EAAE;wBAC5C;oBACF;gBACF;YACF;QACF;QAEA,OAAOhB;IACT;IAEA,MAAMmB,4BAA4B,CAAC5B,YAAoBC;QACrD,OAAO1C,aAAa4C,MAAM,CAAC,CAACN;YAC1B,MAAMgC,QAAQ,IAAIjF,KAAKiD,EAAE2B,SAAS;YAClC,OACE5B,cAAcC,EAAEQ,QAAQ,MAAML,cAC9B6B,MAAM/E,WAAW,OAAOmD,IAAInD,WAAW,MACvC+E,MAAM9E,QAAQ,OAAOkD,IAAIlD,QAAQ,MACjC8E,MAAM7E,OAAO,OAAOiD,IAAIjD,OAAO;QAEnC;IACF;IAEA,IAAI,CAACZ,OAAO;QACV,qBAAO,KAAC0F;YAAIC,WAAWxG,OAAOyG,WAAW;sBAAG9F,EAAE;;IAChD;IAEA,IAAIuB,SAAS;QACX,qBAAO,KAACqE;YAAIC,WAAWxG,OAAOkC,OAAO;sBAAGvB,EAAE;;IAC5C;IAEA,MAAM+F,YAAY,GAAGtE,QAAQ,CAAC,EAAE,CAACuE,kBAAkB,CAAC,EAAE,EAAE;QAAEjC,KAAK;QAAWkC,OAAO;IAAQ,GAAG,GAAG,EAAExE,QAAQ,CAAC,EAAE,CAACuE,kBAAkB,CAAC,EAAE,EAAE;QAAEjC,KAAK;QAAWkC,OAAO;QAASC,MAAM;IAAU,IAAI;IAE1L,MAAMC,cAAc,CAAC,oBAAoB,CAAC;IAE1C,qBACE,MAACP;QAAIC,WAAWxG,OAAO+G,OAAO;;0BAC5B,KAACC;gBAAGR,WAAWxG,OAAOiH,KAAK;0BAAGtG,EAAE;;0BAChC,MAAC4F;gBAAIC,WAAWxG,OAAOkH,UAAU;;kCAC/B,KAACC;wBAAOX,WAAWxG,OAAOoH,SAAS;wBAAEC,SAAS,IAAMrD,aAAa,CAAC;wBAAI2B,MAAK;kCAAS;;kCAGpF,KAACwB;wBAAOX,WAAWxG,OAAOoH,SAAS;wBAAEC,SAASjD;wBAAcuB,MAAK;kCAC9DhF,EAAE;;kCAEL,KAACwG;wBAAOX,WAAWxG,OAAOoH,SAAS;wBAAEC,SAAS,IAAMrD,aAAa;wBAAI2B,MAAK;kCAAS;;kCAGnF,KAAC2B;wBAAKd,WAAWxG,OAAO0G,SAAS;kCAAGA;;;;YAGrC9E,UAAUW,MAAM,KAAK,kBACpB,KAACgE;gBAAIC,WAAWxG,OAAOyG,WAAW;0BAAG9F,EAAE;+BAEvC,MAAC4F;gBAAIC,WAAWxG,OAAOuH,IAAI;gBAAEC,OAAO;oBAAEC,qBAAqBX;gBAAY;;kCAErE,KAACP;wBAAIC,WAAWxG,OAAO0H,UAAU;kCAAG/G,EAAE;;oBACrCyB,SAASuF,GAAG,CAAC,CAACjD,KAAKjC,kBAClB,MAAC8D;4BAAIC,WAAWxG,OAAO0H,UAAU;;gCAC9BzG,SAAS,CAACyD,IAAI/C,MAAM,GAAG;gCAAC;gCAAE+C,IAAIjD,OAAO;;2BADAgB;oBAMzCb,UAAU+F,GAAG,CAAC,CAAC7C,yBACd,MAACnF;;8CACC,KAAC4G;oCAAIC,WAAWxG,OAAO4H,YAAY;8CAChC9C,SAAS+C,IAAI;;gCAEfzF,SAASuF,GAAG,CAAC,CAACjD,KAAKoD;oCAClB,MAAM5C,QAAQV,uBAAuBM,SAASP,EAAE,EAAEG;oCAClD,MAAMqD,WAAW1B,0BAA0BvB,SAASP,EAAE,EAAEG;oCAExD,qBACE,MAAC6B;wCAAIC,WAAWxG,OAAOgI,IAAI;;4CACxB9C,MAAMyC,GAAG,CAAC,CAAC5B,MAAMkC,mBAChB,KAAC1B;oDACCC,WACET,KAAKJ,IAAI,KAAK,cACV3F,OAAOkI,aAAa,GACpBlI,OAAOmI,aAAa;8DAIzBpC,KAAKH,KAAK;mDAFN,CAAC,KAAK,EAAEqC,IAAI;4CAKpBF,SAASJ,GAAG,CAAC,CAACS,kBACb,MAAC7B;oDAAIC,WAAWxG,OAAOqI,UAAU;;wDAC9B,IAAIhH,KAAK+G,EAAEnC,SAAS,EAAEqC,kBAAkB,CAAC,EAAE,EAAE;4DAC5CC,MAAM;4DACNC,QAAQ;wDACV;wDAAI;wDACH7H,EAAE;;mDALmCyH,EAAE7D,EAAE;;uCAdd,CAAC,KAAK,EAAEO,SAASP,EAAE,CAAC,CAAC,EAAEuD,IAAI;gCAwBjE;;2BAjCahD,SAASP,EAAE;;;;;AAwCtC,EAAC"}

package/dist/components/CalendarView/CalendarView.module.css

@@ -0,0 +1,283 @@
+.wrapper {
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.navButtons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.navButton {
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px var(--theme-elevation-250);
+  padding: 6px 12px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.875rem;
+  color: var(--theme-text);
+  transition: box-shadow 100ms cubic-bezier(0, 0.2, 0.2, 1);
+}
+
+.navButton:hover {
+  box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+}
+
+.navButton:focus-visible {
+  outline: 2px solid var(--theme-text);
+  outline-offset: 2px;
+}
+
+.currentDate {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.viewToggle {
+  display: flex;
+  gap: 0;
+}
+
+.createButton {
+  background: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+  border: none;
+  border-radius: 3px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-right: 8px;
+  transition: background-color 100ms cubic-bezier(0, 0.2, 0.2, 1);
+}
+
+.createButton:hover {
+  background: var(--theme-elevation-600);
+}
+
+.createButton:focus-visible {
+  outline: 2px solid var(--theme-text);
+  outline-offset: 2px;
+}
+
+.viewToggleButton {
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
+  border: none;
+  border-radius: 0;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.75rem;
+  transition: background-color 100ms cubic-bezier(0, 0.2, 0.2, 1);
+}
+
+.createButton + .viewToggleButton {
+  border-radius: 3px 0 0 3px;
+}
+
+.viewToggleButton + .viewToggleButton {
+  box-shadow: inset 1px 0 0 var(--theme-elevation-200);
+}
+
+.viewToggleButton:last-child {
+  border-radius: 0 3px 3px 0;
+}
+
+.viewToggleButton:hover {
+  background: var(--theme-elevation-100);
+}
+
+.viewToggleButton.viewToggleButtonActive {
+  background: var(--theme-elevation-800);
+  color: var(--theme-elevation-0);
+}
+
+.viewToggleButton.viewToggleButtonActive:hover {
+  background: var(--theme-elevation-800);
+}
+
+.viewToggleButton:focus-visible {
+  outline: 2px solid var(--theme-text);
+  outline-offset: 2px;
+}
+
+.monthGrid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background: var(--theme-elevation-150);
+  border: 1px solid var(--theme-elevation-150);
+}
+
+.dayHeader {
+  padding: 8px 4px;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: var(--theme-elevation-50);
+}
+
+.dayCell {
+  min-height: 80px;
+  padding: 4px;
+  background: var(--theme-bg);
+  vertical-align: top;
+  cursor: pointer;
+}
+
+.dayCell:hover {
+  background: var(--theme-elevation-50);
+}
+
+.dayCellOtherMonth {
+  opacity: 0.4;
+}
+
+.dayCellToday {
+  background: var(--theme-elevation-50);
+}
+
+.dayNumber {
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+
+.eventItem {
+  font-size: 0.625rem;
+  padding: 2px 4px;
+  margin-bottom: 1px;
+  border-radius: 2px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eventItem:hover {
+  opacity: 0.8;
+}
+
+.statusPending {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.statusConfirmed {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.statusCompleted {
+  background: #d1fae5;
+  color: #065f46;
+}
+
+.statusCancelled {
+  background: #e5e7eb;
+  color: #6b7280;
+}
+
+.statusNoShow {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.weekView {
+  display: grid;
+  grid-template-columns: 60px repeat(7, 1fr);
+  gap: 1px;
+  background: var(--theme-elevation-150);
+  border: 1px solid var(--theme-elevation-150);
+}
+
+.timeLabel {
+  padding: 4px;
+  font-size: 0.625rem;
+  text-align: right;
+  background: var(--theme-bg);
+  min-height: 40px;
+}
+
+.weekCell {
+  padding: 2px;
+  background: var(--theme-bg);
+  min-height: 40px;
+  position: relative;
+  cursor: pointer;
+}
+
+.weekCell:hover {
+  background: var(--theme-elevation-50);
+}
+
+.dayView {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  gap: 1px;
+  background: var(--theme-elevation-150);
+  border: 1px solid var(--theme-elevation-150);
+}
+
+.dayViewCell {
+  padding: 4px;
+  background: var(--theme-bg);
+  min-height: 48px;
+  position: relative;
+  cursor: pointer;
+}
+
+.dayViewCell:hover {
+  background: var(--theme-elevation-50);
+}
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--theme-elevation-400);
+}
+
+.statusLegend {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.75rem;
+}
+
+.legendDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.currentTimeLine {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #ef4444;
+  z-index: 2;
+  pointer-events: none;
+}

package/dist/components/CalendarView/index.d.ts

@@ -0,0 +1,3 @@
+import type { AdminViewServerProps } from 'payload';
+import React from 'react';
+export declare const CalendarView: React.FC<AdminViewServerProps>;