@withpotter/pages-bookings 0.13.0-next.101

package/dist/dashboard/(bookings)/calendar/_components/month-grid.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { springs, eases } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import {
+  monthDays,
+  parseISO,
+  toISODate,
+  bookingsByDay,
+  fullness
+} from "./calendar-range";
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function MonthGrid({
+  anchor,
+  events,
+  resourceCount,
+  onOpenDay
+}) {
+  const reduce = useReducedMotion();
+  const days = useMemo(() => monthDays(anchor), [anchor]);
+  const counts = useMemo(() => bookingsByDay(events), [events]);
+  const today = toISODate(/* @__PURE__ */ new Date());
+  const leadingBlanks = parseISO(days[0]).getDay();
+  const grid = {
+    hidden: {},
+    shown: { transition: { staggerChildren: reduce ? 0 : 8e-3 } }
+  };
+  const cell = {
+    hidden: reduce ? {} : { opacity: 0, y: 6 },
+    shown: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.2, ease: eases.settle }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "surface p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-2 grid grid-cols-7 gap-2", children: WEEKDAYS.map((w) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "px-1 text-3xs uppercase tracking-wide text-[var(--text-muted)]",
+        children: w
+      },
+      w
+    )) }),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        variants: grid,
+        initial: "hidden",
+        animate: "shown",
+        className: "grid grid-cols-7 gap-2",
+        children: [
+          Array.from({ length: leadingBlanks }).map((_, i) => /* @__PURE__ */ jsx("span", {}, `blank-${i}`)),
+          days.map((d) => {
+            const booked = counts.get(d) ?? 0;
+            const fill = fullness(booked, resourceCount);
+            const dt = parseISO(d);
+            return /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                variants: cell,
+                onClick: () => onOpenDay(d),
+                whileHover: reduce ? void 0 : { y: -2 },
+                whileTap: reduce ? void 0 : { scale: 0.98 },
+                transition: springs.snappy,
+                className: cn(
+                  "flex min-h-[76px] flex-col justify-between rounded-lg border p-2 text-left transition-[background-color,border-color,box-shadow] duration-[var(--motion-fast)]",
+                  d === today ? "border-brand-500/50 bg-brand-500/[0.08]" : "border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)] hover:bg-[var(--interactive-hover)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-sm font-semibold tabular-nums",
+                        d === today ? "text-brand-500" : "text-[var(--text-primary)]"
+                      ),
+                      children: dt.getDate()
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-2xs text-[var(--text-tertiary)]", children: booked > 0 ? `${booked} booked` : "" }),
+                    /* @__PURE__ */ jsx("span", { className: "block h-1 rounded-full bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "block h-1 rounded-full bg-brand-500",
+                        initial: reduce ? false : { scaleX: 0 },
+                        animate: { scaleX: fill },
+                        style: { transformOrigin: "left" },
+                        transition: { duration: 0.4, ease: eases.settle }
+                      }
+                    ) })
+                  ] })
+                ]
+              },
+              d
+            );
+          })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MonthGrid
+};
+//# sourceMappingURL=month-grid.js.map

package/dist/dashboard/(bookings)/calendar/_components/month-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/calendar/_components/month-grid.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs, eases } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\nimport type { CalendarEventItem } from '@withpotter/lib/api/types';\nimport {\n  monthDays,\n  parseISO,\n  toISODate,\n  bookingsByDay,\n  fullness,\n} from './calendar-range';\n\nconst WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nexport interface MonthGridProps {\n  anchor: string;\n  events: CalendarEventItem[];\n  resourceCount: number;\n  onOpenDay: (date: string) => void;\n}\n\n/**\n * A month you read for shape, not for detail.\n *\n * A month of individual bookings is unreadable and nobody tries — what the\n * question \"what does next month look like?\" actually wants is where the busy\n * weeks are and where the holes are. So each day carries its count and a\n * fullness bar, and pressing one drops into the day board where the detail is.\n */\nexport function MonthGrid({\n  anchor,\n  events,\n  resourceCount,\n  onOpenDay,\n}: MonthGridProps) {\n  const reduce = useReducedMotion();\n  const days = useMemo(() => monthDays(anchor), [anchor]);\n  const counts = useMemo(() => bookingsByDay(events), [events]);\n  const today = toISODate(new Date());\n\n  // Blank cells so the 1st lands under its weekday.\n  const leadingBlanks = parseISO(days[0]).getDay();\n\n  const grid = {\n    hidden: {},\n    shown: { transition: { staggerChildren: reduce ? 0 : 0.008 } },\n  };\n  const cell = {\n    hidden: reduce ? {} : { opacity: 0, y: 6 },\n    shown: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.2, ease: eases.settle },\n    },\n  };\n\n  return (\n    <div className=\"surface p-3\">\n      <div className=\"mb-2 grid grid-cols-7 gap-2\">\n        {WEEKDAYS.map((w) => (\n          <span\n            key={w}\n            className=\"px-1 text-3xs uppercase tracking-wide text-[var(--text-muted)]\"\n          >\n            {w}\n          </span>\n        ))}\n      </div>\n\n      <motion.div\n        variants={grid}\n        initial=\"hidden\"\n        animate=\"shown\"\n        className=\"grid grid-cols-7 gap-2\"\n      >\n        {Array.from({ length: leadingBlanks }).map((_, i) => (\n          <span key={`blank-${i}`} />\n        ))}\n\n        {days.map((d) => {\n          const booked = counts.get(d) ?? 0;\n          const fill = fullness(booked, resourceCount);\n          const dt = parseISO(d);\n          return (\n            <motion.button\n              key={d}\n              variants={cell}\n              onClick={() => onOpenDay(d)}\n              whileHover={reduce ? undefined : { y: -2 }}\n              whileTap={reduce ? undefined : { scale: 0.98 }}\n              transition={springs.snappy}\n              className={cn(\n                'flex min-h-[76px] flex-col justify-between rounded-lg border p-2 text-left transition-[background-color,border-color,box-shadow] duration-[var(--motion-fast)]',\n                d === today\n                  ? 'border-brand-500/50 bg-brand-500/[0.08]'\n                  : 'border-[var(--border-default)] bg-[var(--bg-base)] hover:border-[var(--border-strong)] hover:bg-[var(--interactive-hover)]',\n              )}\n            >\n              <span\n                className={cn(\n                  'text-sm font-semibold tabular-nums',\n                  d === today ? 'text-brand-500' : 'text-[var(--text-primary)]',\n                )}\n              >\n                {dt.getDate()}\n              </span>\n\n              <span className=\"space-y-1\">\n                <span className=\"block text-2xs text-[var(--text-tertiary)]\">\n                  {booked > 0 ? `${booked} booked` : ''}\n                </span>\n                <span className=\"block h-1 rounded-full bg-[var(--bg-muted)]\">\n                  <motion.span\n                    className=\"block h-1 rounded-full bg-brand-500\"\n                    initial={reduce ? false : { scaleX: 0 }}\n                    animate={{ scaleX: fill }}\n                    style={{ transformOrigin: 'left' }}\n                    transition={{ duration: 0.4, ease: eases.settle }}\n                  />\n                </span>\n              </span>\n            </motion.button>\n          );\n        })}\n      </motion.div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/(bookings)/calendar/_components/resource-day-grid.js

@@ -0,0 +1,325 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { motion, useReducedMotion } from "motion/react";
+import { Plus, Ban } from "lucide-react";
+import { springs, eases, PRESS_SCALE_LARGE } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import { Button } from "@withpotter/ui-kit/button";
+import { statusTextClass } from "@withpotter/components/shared/status-badge";
+import { useBlockDrag } from "./use-block-drag";
+import { formatTime } from "./format";
+const HOUR_PX = 60;
+function hhmm(h) {
+  return `${String(h).padStart(2, "0")}:00`;
+}
+function clockLabel(h) {
+  const suffix = h >= 12 ? "pm" : "am";
+  const hour = h % 12 === 0 ? 12 : h % 12;
+  return `${hour}${suffix}`;
+}
+function hourOf(iso) {
+  const d = new Date(iso);
+  return d.getHours() + d.getMinutes() / 60;
+}
+function ResourceDayGrid({
+  date,
+  resources,
+  events,
+  openHour = 8,
+  closeHour = 20,
+  resourceLabel,
+  onBookSlot,
+  onSelectEvent,
+  onMoveEvent,
+  loading
+}) {
+  const reduce = useReducedMotion();
+  const [nowHour, setNowHour] = useState(null);
+  useEffect(() => {
+    const tick = () => {
+      const d = /* @__PURE__ */ new Date();
+      const isToday = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}` === date;
+      setNowHour(isToday ? d.getHours() + d.getMinutes() / 60 : null);
+    };
+    tick();
+    const id = setInterval(tick, 6e4);
+    return () => clearInterval(id);
+  }, [date]);
+  const hours = useMemo(() => {
+    const out = [];
+    for (let h = openHour; h < closeHour; h += 1) out.push(h);
+    return out;
+  }, [openHour, closeHour]);
+  const byResource = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const r of resources) map.set(r.id, []);
+    const loose = [];
+    for (const e of events) {
+      if (e.isAllDay) continue;
+      if (e.resourceId && map.has(e.resourceId)) map.get(e.resourceId).push(e);
+      else loose.push(e);
+    }
+    return { map, loose };
+  }, [events, resources]);
+  const column = {
+    hidden: {},
+    shown: { transition: { staggerChildren: reduce ? 0 : 0.03 } }
+  };
+  const block = {
+    hidden: reduce ? {} : { opacity: 0, y: 8 },
+    shown: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.24, ease: eases.settle }
+    }
+  };
+  const gridHeight = hours.length * HOUR_PX;
+  const {
+    moving,
+    dragging,
+    dragged,
+    columnRefs,
+    canMove,
+    startDrag,
+    handleDrop
+  } = useBlockDrag({
+    resources,
+    gridHeight,
+    hourPx: HOUR_PX,
+    onMoveEvent
+  });
+  if (resources.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-dashed border-[var(--border-default)] px-6 py-14 text-center", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: loading ? "Loading the board" : `No ${resourceLabel.plural.toLowerCase()} yet` }),
+      !loading && /* @__PURE__ */ jsxs("p", { className: "mx-auto mt-1 max-w-sm text-sm text-[var(--text-tertiary)]", children: [
+        "Add the ",
+        resourceLabel.plural.toLowerCase(),
+        " you take bookings against and the day fills in as columns here."
+      ] })
+    ] });
+  }
+  return (
+    /* ONE GREY ON THIS SCREEN, and it is the strip's. The board drew itself on
+       `--bg-elevated` under a week strip of `surface` boxes, so the page
+       carried two panel colours eight pixels apart — and the cells, which
+       paint nothing, let the page wash through under both. `surface` is the
+       house's card fill; everything inside it now shows it. */
+    /* @__PURE__ */ jsxs("div", { className: "surface overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "max-h-[calc(100dvh-15rem)] overflow-auto", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "grid min-w-max",
+          style: {
+            gridTemplateColumns: `56px repeat(${resources.length}, minmax(180px, 1fr))`
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "sticky left-0 top-0 z-40 border-b border-r border-[var(--border-default)] bg-[var(--card-bg)]" }),
+            resources.map((r) => {
+              const busy = (byResource.map.get(r.id) ?? []).filter(
+                (e) => e.type === "booking"
+              ).length;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "sticky top-0 z-30 flex items-baseline justify-between gap-2 border-b border-r border-[var(--border-default)] bg-[var(--card-bg)] px-3 py-3 last:border-r-0",
+                  children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: r.name }),
+                    busy > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-brand-500/15 px-2 py-0.5 text-3xs font-medium tabular-nums text-brand-500", children: busy })
+                  ]
+                },
+                r.id
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "sticky left-0 z-20 border-r border-[var(--border-subtle)] bg-[var(--card-bg)]",
+                style: { height: gridHeight },
+                children: hours.map((h) => /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "relative border-b border-[var(--border-subtle)] last:border-b-0",
+                    style: { height: HOUR_PX },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "absolute right-2 text-2xs tabular-nums text-[var(--text-muted)]",
+                          h === openHour ? "top-1" : "-top-2"
+                        ),
+                        children: clockLabel(h)
+                      }
+                    )
+                  },
+                  h
+                ))
+              }
+            ),
+            resources.map((r, colIndex) => {
+              const mine = byResource.map.get(r.id) ?? [];
+              return /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  variants: column,
+                  initial: "hidden",
+                  animate: "shown",
+                  ref: (el) => {
+                    columnRefs.current.set(r.id, el);
+                  },
+                  className: cn(
+                    "relative border-r border-[var(--border-subtle)] last:border-r-0",
+                    /* The column holding the dragged block rises above its
+                       neighbours, so the block travels OVER the next schedule
+                       instead of sliding behind it. */
+                    dragging && (byResource.map.get(r.id) ?? []).some(
+                      (ev) => ev.id === dragging
+                    ) && "z-30"
+                  ),
+                  style: { height: gridHeight },
+                  children: [
+                    hours.map((h) => /* @__PURE__ */ jsx(
+                      FreeBand,
+                      {
+                        hour: h,
+                        top: (h - openHour) * HOUR_PX,
+                        reduce: !!reduce,
+                        onClick: () => onBookSlot(r.id, hhmm(h), hhmm(h + 1))
+                      },
+                      h
+                    )),
+                    nowHour !== null && nowHour >= openHour && nowHour < closeHour && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "pointer-events-none absolute inset-x-0 z-20",
+                        style: { top: (nowHour - openHour) * HOUR_PX },
+                        "aria-hidden": true,
+                        children: /* @__PURE__ */ jsx("div", { className: "relative h-px w-full bg-brand-500/70", children: colIndex === 0 && /* @__PURE__ */ jsx("span", { className: "absolute -left-[3px] -top-[3px] h-[7px] w-[7px] rounded-full bg-brand-500" }) })
+                      }
+                    ),
+                    mine.map((e) => {
+                      const startH = hourOf(e.start);
+                      const endH = hourOf(e.end);
+                      const top = (startH - openHour) * HOUR_PX;
+                      const height = Math.max((endH - startH) * HOUR_PX, 24);
+                      if (top + height < 0 || top > gridHeight) return null;
+                      const isBlock = e.type === "block";
+                      return /* @__PURE__ */ jsxs(
+                        motion.button,
+                        {
+                          type: "button",
+                          variants: block,
+                          onClick: () => {
+                            if (dragged.current) return;
+                            onSelectEvent(e);
+                          },
+                          drag: canMove(e),
+                          dragMomentum: false,
+                          dragElastic: 0.04,
+                          dragConstraints: {
+                            top: -top,
+                            bottom: gridHeight - top - height
+                          },
+                          onDragStart: () => startDrag(e.id),
+                          onDragEnd: (_, info) => void handleDrop(
+                            e,
+                            info.offset,
+                            info.point.x,
+                            top,
+                            height
+                          ),
+                          animate: {
+                            x: moving?.id === e.id ? moving.dx : 0,
+                            y: moving?.id === e.id ? moving.dy : 0
+                          },
+                          whileHover: reduce ? void 0 : { scale: 1.01 },
+                          whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+                          whileDrag: { scale: 1.03, zIndex: 40 },
+                          transition: springs.snappy,
+                          className: cn(
+                            "absolute inset-x-2 z-10 overflow-hidden rounded-lg px-3 py-2 text-left",
+                            "transition-colors duration-[var(--motion-fast)]",
+                            canMove(e) && "cursor-grab active:cursor-grabbing",
+                            isBlock ? "border border-dashed border-[var(--warning)]/40 bg-[var(--warning-bg)] text-[var(--warning)]" : e.type === "synced" ? "border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)]" : "bg-brand-500/[0.16] text-[var(--text-primary)] ring-1 ring-inset ring-brand-500/30 hover:ring-brand-500/60"
+                          ),
+                          style: {
+                            top,
+                            height,
+                            // A booking is an object resting on the day, so it casts.
+                            boxShadow: isBlock || e.type === "synced" ? void 0 : "var(--shadow-md)"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 truncate text-xs font-medium", children: [
+                              isBlock ? /* @__PURE__ */ jsx(Ban, { className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "aria-hidden": true,
+                                  className: cn(
+                                    "size-2 shrink-0 rounded-full bg-current",
+                                    statusTextClass(e.status ?? "")
+                                  )
+                                }
+                              ),
+                              e.customerName || e.title
+                            ] }),
+                            height > 38 && /* @__PURE__ */ jsx("span", { className: "block truncate text-2xs opacity-70", children: isBlock ? e.blockReason || "Blocked" : e.serviceName ?? `${formatTime(e.start)} \u2013 ${formatTime(e.end)}` })
+                          ]
+                        },
+                        e.id
+                      );
+                    })
+                  ]
+                },
+                r.id
+              );
+            })
+          ]
+        }
+      ) }),
+      byResource.loose.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] px-4 py-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "mb-2 text-2xs uppercase tracking-wide text-[var(--text-muted)]", children: [
+          "Not assigned to a ",
+          resourceLabel.singular.toLowerCase()
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: byResource.loose.map((e) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => onSelectEvent(e),
+            children: e.customerName || e.title
+          },
+          e.id
+        )) })
+      ] })
+    ] })
+  );
+}
+function FreeBand({
+  hour,
+  top,
+  reduce,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      onClick,
+      "aria-label": `Book ${clockLabel(hour)}`,
+      whileHover: reduce ? void 0 : { scale: 1.015 },
+      whileTap: reduce ? void 0 : { scale: PRESS_SCALE_LARGE },
+      transition: springs.snappy,
+      className: "group absolute inset-x-2 flex items-center justify-center rounded-lg border border-transparent transition-colors duration-[var(--motion-fast)] hover:border-brand-500/30 hover:bg-brand-500/[0.06]",
+      style: { top: top + 4, height: HOUR_PX - 8 },
+      "data-hour": hour,
+      children: /* @__PURE__ */ jsxs("span", { className: "pointer-events-none flex items-center gap-1 text-2xs font-medium text-brand-500 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100", children: [
+        /* @__PURE__ */ jsx(Plus, {}),
+        "Book"
+      ] })
+    }
+  );
+}
+export {
+  ResourceDayGrid
+};
+//# sourceMappingURL=resource-day-grid.js.map

package/dist/dashboard/(bookings)/calendar/_components/resource-day-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/calendar/_components/resource-day-grid.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Plus, Ban } from 'lucide-react';\nimport { springs, eases, PRESS_SCALE_LARGE } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\nimport type { CalendarEventItem, ResourceItem } from '@withpotter/lib/api/types';\nimport type { EntityLabel } from '@withpotter/lib/intents/types';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { statusTextClass } from '@withpotter/components/shared/status-badge';\nimport { useBlockDrag, type MoveEvent } from './use-block-drag';\nimport { formatTime } from './format';\n\nexport interface ResourceDayGridProps {\n  /** yyyy-mm-dd being shown. */\n  date: string;\n  resources: ResourceItem[];\n  events: CalendarEventItem[];\n  /** Earliest and latest hour to draw, in 24h. Derived from the day's data. */\n  openHour?: number;\n  closeHour?: number;\n  resourceLabel: EntityLabel;\n  onBookSlot: (resourceId: string, startTime: string, endTime: string) => void;\n  onSelectEvent: (event: CalendarEventItem) => void;\n  /**\n   * A booking was dragged to a new time. Resolve `true` to keep it there,\n   * `false` to send it back — the grid holds the block at the dropped position\n   * until this settles, so the question can be asked with the answer already\n   * drawn.\n   */\n  onMoveEvent?: MoveEvent;\n  loading?: boolean;\n}\n\n/** Row height for one hour. Big enough to hold a name and press comfortably. */\nconst HOUR_PX = 60;\n\nfunction hhmm(h: number) {\n  return `${String(h).padStart(2, '0')}:00`;\n}\n\nfunction clockLabel(h: number) {\n  const suffix = h >= 12 ? 'pm' : 'am';\n  const hour = h % 12 === 0 ? 12 : h % 12;\n  return `${hour}${suffix}`;\n}\n\n/** Local hour of an ISO timestamp. */\nfunction hourOf(iso: string) {\n  const d = new Date(iso);\n  return d.getHours() + d.getMinutes() / 60;\n}\n\n/**\n * The day as a front desk actually reads it: one column per bookable thing,\n * time running down.\n *\n * The design decision that drives everything here is that FREE TIME IS THE\n * SUBJECT. A week-grid diary draws booked and open hours as the same kind of\n * cell, with the open ones simply empty — which is backwards, because the open\n * ones are the only hours you can still sell. So here the empty bands are the\n * loud, pressable, hoverable element and the booked blocks go quiet: they are\n * settled business, and settled business does not need to shout.\n */\nexport function ResourceDayGrid({\n  date,\n  resources,\n  events,\n  openHour = 8,\n  closeHour = 20,\n  resourceLabel,\n  onBookSlot,\n  onSelectEvent,\n  onMoveEvent,\n  loading,\n}: ResourceDayGridProps) {\n  const reduce = useReducedMotion();\n\n  /**\n   * Where we are in the day, as a fraction of an hour past `openHour`.\n   *\n   * A desk board without a now-line makes you do the arithmetic yourself every\n   * time you look at it. Ticks each minute; null when the day being shown is\n   * not today, because a line marking \"now\" on next Tuesday means nothing.\n   */\n  const [nowHour, setNowHour] = useState<number | null>(null);\n  useEffect(() => {\n    const tick = () => {\n      const d = new Date();\n      const isToday =\n        `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}` ===\n        date;\n      setNowHour(isToday ? d.getHours() + d.getMinutes() / 60 : null);\n    };\n    tick();\n    const id = setInterval(tick, 60_000);\n    return () => clearInterval(id);\n  }, [date]);\n\n  const hours = useMemo(() => {\n    const out: number[] = [];\n    for (let h = openHour; h < closeHour; h += 1) out.push(h);\n    return out;\n  }, [openHour, closeHour]);\n\n  /** Events grouped by the column they belong to. */\n  const byResource = useMemo(() => {\n    const map = new Map<string, CalendarEventItem[]>();\n    for (const r of resources) map.set(r.id, []);\n    const loose: CalendarEventItem[] = [];\n    for (const e of events) {\n      if (e.isAllDay) continue;\n      if (e.resourceId && map.has(e.resourceId)) map.get(e.resourceId)!.push(e);\n      else loose.push(e);\n    }\n    return { map, loose };\n  }, [events, resources]);\n\n  const column = {\n    hidden: {},\n    shown: { transition: { staggerChildren: reduce ? 0 : 0.03 } },\n  };\n  const block = {\n    hidden: reduce ? {} : { opacity: 0, y: 8 },\n    shown: {\n      opacity: 1,\n      y: 0,\n      transition: { duration: 0.24, ease: eases.settle },\n    },\n  };\n\n  const gridHeight = hours.length * HOUR_PX;\n\n  const {\n    moving,\n    dragging,\n    dragged,\n    columnRefs,\n    canMove,\n    startDrag,\n    handleDrop,\n  } = useBlockDrag({\n    resources,\n    gridHeight,\n    hourPx: HOUR_PX,\n    onMoveEvent,\n  });\n\n  // With nothing to put in columns there is no grid to draw. Rendering the\n  // frame anyway pushed the time gutter into the first resource column and\n  // produced a lone axis floating against an empty board.\n  if (resources.length === 0) {\n    return (\n      <div className=\"rounded-xl border border-dashed border-[var(--border-default)] px-6 py-14 text-center\">\n        <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n          {loading\n            ? 'Loading the board'\n            : `No ${resourceLabel.plural.toLowerCase()} yet`}\n        </p>\n        {!loading && (\n          <p className=\"mx-auto mt-1 max-w-sm text-sm text-[var(--text-tertiary)]\">\n            Add the {resourceLabel.plural.toLowerCase()} you take bookings\n            against and the day fills in as columns here.\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    /* ONE GREY ON THIS SCREEN, and it is the strip's. The board drew itself on\n       `--bg-elevated` under a week strip of `surface` boxes, so the page\n       carried two panel colours eight pixels apart — and the cells, which\n       paint nothing, let the page wash through under both. `surface` is the\n       house's card fill; everything inside it now shows it. */\n    <div className=\"surface overflow-hidden\">\n      {/* The board scrolls, not the page — the same change the week grid took,\n          for the same reason: reading down to the evening must not carry the\n          column headings off the screen. */}\n      <div className=\"max-h-[calc(100dvh-15rem)] overflow-auto\">\n        <div\n          className=\"grid min-w-max\"\n          style={{\n            gridTemplateColumns: `56px repeat(${resources.length}, minmax(180px, 1fr))`,\n          }}\n        >\n          {/* Column headers. Opaque where they are sticky — content scrolls\n            under them — but the SAME fill as the card, not a second grey. */}\n          <div className=\"sticky left-0 top-0 z-40 border-b border-r border-[var(--border-default)] bg-[var(--card-bg)]\" />\n          {resources.map((r) => {\n            const busy = (byResource.map.get(r.id) ?? []).filter(\n              (e) => e.type === 'booking',\n            ).length;\n            return (\n              <div\n                key={r.id}\n                className=\"sticky top-0 z-30 flex items-baseline justify-between gap-2 border-b border-r border-[var(--border-default)] bg-[var(--card-bg)] px-3 py-3 last:border-r-0\"\n              >\n                <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n                  {r.name}\n                </p>\n                {busy > 0 && (\n                  <span className=\"shrink-0 rounded-full bg-brand-500/15 px-2 py-0.5 text-3xs font-medium tabular-nums text-brand-500\">\n                    {busy}\n                  </span>\n                )}\n              </div>\n            );\n          })}\n\n          {/* Time gutter */}\n          <div\n            className=\"sticky left-0 z-20 border-r border-[var(--border-subtle)] bg-[var(--card-bg)]\"\n            style={{ height: gridHeight }}\n          >\n            {hours.map((h) => (\n              <div\n                key={h}\n                className=\"relative border-b border-[var(--border-subtle)] last:border-b-0\"\n                style={{ height: HOUR_PX }}\n              >\n                {/* The label straddles the line that starts its hour — except\n                    the first, which has no line above it and half of which was\n                    being cut off by the card's own edge. */}\n                <span\n                  className={cn(\n                    'absolute right-2 text-2xs tabular-nums text-[var(--text-muted)]',\n                    h === openHour ? 'top-1' : '-top-2',\n                  )}\n                >\n                  {clockLabel(h)}\n                </span>\n              </div>\n            ))}\n          </div>\n\n          {/* One column per resource */}\n          {resources.map((r, colIndex) => {\n            const mine = byResource.map.get(r.id) ?? [];\n            return (\n              <motion.div\n                key={r.id}\n                variants={column}\n                initial=\"hidden\"\n                animate=\"shown\"\n                /* Measured on drop to work out which schedule the block was\n                   let go over. */\n                ref={(el) => {\n                  columnRefs.current.set(r.id, el);\n                }}\n                className={cn(\n                  'relative border-r border-[var(--border-subtle)] last:border-r-0',\n                  /* The column holding the dragged block rises above its\n                     neighbours, so the block travels OVER the next schedule\n                     instead of sliding behind it. */\n                  dragging &&\n                    (byResource.map.get(r.id) ?? []).some(\n                      (ev) => ev.id === dragging,\n                    ) &&\n                    'z-30',\n                )}\n                style={{ height: gridHeight }}\n              >\n                {/* Free bands: one per hour, pressable. Drawn first so booked\n                  blocks sit on top of them. */}\n                {hours.map((h) => (\n                  <FreeBand\n                    key={h}\n                    hour={h}\n                    top={(h - openHour) * HOUR_PX}\n                    reduce={!!reduce}\n                    onClick={() => onBookSlot(r.id, hhmm(h), hhmm(h + 1))}\n                  />\n                ))}\n\n                {/* Now-line. Lives inside the column because this is the only\n                  element whose coordinate space already excludes the header. */}\n                {nowHour !== null &&\n                  nowHour >= openHour &&\n                  nowHour < closeHour && (\n                    <div\n                      className=\"pointer-events-none absolute inset-x-0 z-20\"\n                      style={{ top: (nowHour - openHour) * HOUR_PX }}\n                      aria-hidden\n                    >\n                      <div className=\"relative h-px w-full bg-brand-500/70\">\n                        {/* One marker for the line, on the first column only —\n                          a dot per column reads as three separate events. */}\n                        {colIndex === 0 && (\n                          <span className=\"absolute -left-[3px] -top-[3px] h-[7px] w-[7px] rounded-full bg-brand-500\" />\n                        )}\n                      </div>\n                    </div>\n                  )}\n\n                {/* Booked and blocked, positioned by real time. */}\n                {mine.map((e) => {\n                  const startH = hourOf(e.start);\n                  const endH = hourOf(e.end);\n                  const top = (startH - openHour) * HOUR_PX;\n                  const height = Math.max((endH - startH) * HOUR_PX, 24);\n                  if (top + height < 0 || top > gridHeight) return null;\n                  const isBlock = e.type === 'block';\n                  return (\n                    <motion.button\n                      key={e.id}\n                      type=\"button\"\n                      variants={block}\n                      onClick={() => {\n                        if (dragged.current) return;\n                        onSelectEvent(e);\n                      }}\n                      /* ONLY A BOOKING MOVES. A block-out is the absence of a\n                         booking and a synced event belongs to somebody else's\n                         calendar; dragging either would promise something this\n                         screen cannot deliver. */\n                      /* Both axes: down the day is a new time, across the\n                         board is a new person. */\n                      drag={canMove(e)}\n                      dragMomentum={false}\n                      dragElastic={0.04}\n                      dragConstraints={{\n                        top: -top,\n                        bottom: gridHeight - top - height,\n                      }}\n                      onDragStart={() => startDrag(e.id)}\n                      onDragEnd={(_, info) =>\n                        void handleDrop(\n                          e,\n                          info.offset,\n                          info.point.x,\n                          top,\n                          height,\n                        )\n                      }\n                      animate={{\n                        x: moving?.id === e.id ? moving.dx : 0,\n                        y: moving?.id === e.id ? moving.dy : 0,\n                      }}\n                      whileHover={reduce ? undefined : { scale: 1.01 }}\n                      whileTap={\n                        reduce ? undefined : { scale: PRESS_SCALE_LARGE }\n                      }\n                      /* Off the board and under the hand: a bigger lift than\n                         the hover, the house's deepest card shadow, and out of\n                         its own column's stacking so it can travel over the\n                         next one. */\n                      whileDrag={{ scale: 1.03, zIndex: 40 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute inset-x-2 z-10 overflow-hidden rounded-lg px-3 py-2 text-left',\n                        'transition-colors duration-[var(--motion-fast)]',\n                        canMove(e) && 'cursor-grab active:cursor-grabbing',\n                        isBlock\n                          ? 'border border-dashed border-[var(--warning)]/40 bg-[var(--warning-bg)] text-[var(--warning)]'\n                          : e.type === 'synced'\n                            ? 'border border-[var(--border-default)] bg-[var(--bg-muted)] text-[var(--text-secondary)]'\n                            : 'bg-brand-500/[0.16] text-[var(--text-primary)] ring-1 ring-inset ring-brand-500/30 hover:ring-brand-500/60',\n                      )}\n                      style={{\n                        top,\n                        height,\n                        // A booking is an object resting on the day, so it casts.\n                        boxShadow:\n                          isBlock || e.type === 'synced'\n                            ? undefined\n                            : 'var(--shadow-md)',\n                      }}\n                    >\n                      {/* A MARK, and it is the state. A blocked slot wore a `Ban` and a\n                          booking wore nothing, so the one kind of event you can act on was\n                          the one with no glyph. The dot takes its colour from the shared\n                          status map through `bg-current`, so this is not a sixteenth private\n                          copy of \"confirmed is blue\". */}\n                      <span className=\"flex items-center gap-2 truncate text-xs font-medium\">\n                        {isBlock ? (\n                          <Ban className=\"flex-shrink-0\" />\n                        ) : (\n                          <span\n                            aria-hidden\n                            className={cn(\n                              'size-2 shrink-0 rounded-full bg-current',\n                              statusTextClass(e.status ?? ''),\n                            )}\n                          />\n                        )}\n                        {e.customerName || e.title}\n                      </span>\n                      {height > 38 && (\n                        <span className=\"block truncate text-2xs opacity-70\">\n                          {/* What it is, or when it is. Never the word \"confirmed\" —\n                              the dot already said that, and a status repeated as a\n                              caption is a caption spent. */}\n                          {isBlock\n                            ? e.blockReason || 'Blocked'\n                            : (e.serviceName ??\n                              `${formatTime(e.start)} – ${formatTime(e.end)}`)}\n                        </span>\n                      )}\n                    </motion.button>\n                  );\n                })}\n              </motion.div>\n            );\n          })}\n        </div>\n      </div>\n\n      {byResource.loose.length > 0 && (\n        <div className=\"border-t border-[var(--border-subtle)] px-4 py-3\">\n          <p className=\"mb-2 text-2xs uppercase tracking-wide text-[var(--text-muted)]\">\n            Not assigned to a {resourceLabel.singular.toLowerCase()}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {byResource.loose.map((e) => (\n              <Button\n                variant=\"ghost\"\n                key={e.id}\n                onClick={() => onSelectEvent(e)}\n              >\n                {e.customerName || e.title}\n              </Button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * An hour nobody has bought yet.\n *\n * Quiet until you approach it, then it becomes an offer: the band lifts, tints\n * toward brand, and a Book affordance fades in. That reveal-on-hover is the\n * whole point of the redesign — the calendar should feel like it wants the gap\n * filled.\n */\nfunction FreeBand({\n  hour,\n  top,\n  reduce,\n  onClick,\n}: {\n  hour: number;\n  top: number;\n  reduce: boolean;\n  onClick: () => void;\n}) {\n  return (\n    <motion.button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={`Book ${clockLabel(hour)}`}\n      whileHover={reduce ? undefined : { scale: 1.015 }}\n      whileTap={reduce ? undefined : { scale: PRESS_SCALE_LARGE }}\n      transition={springs.snappy}\n      /* INSET FROM THE COLUMN, not flush with it. At `inset-x-1` and a\n         two-pixel vertical trim the band's rounded edge sat against the\n         column's own border and the hour lines above and below it — a 10px\n         radius reads as a mistake when it is touching a straight line. It\n         stands off all four edges now, so the offer looks placed in the gap\n         rather than jammed into it. */\n      className=\"group absolute inset-x-2 flex items-center justify-center rounded-lg border border-transparent transition-colors duration-[var(--motion-fast)] hover:border-brand-500/30 hover:bg-brand-500/[0.06]\"\n      style={{ top: top + 4, height: HOUR_PX - 8 }}\n      data-hour={hour}\n    >\n      <span className=\"pointer-events-none flex items-center gap-1 text-2xs font-medium text-brand-500 opacity-0 transition-opacity duration-[var(--motion-fast)] group-hover:opacity-100\">\n        <Plus />\n        Book\n      </span>\n    </motion.button>\n  );\n}\n"],"mappings":"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","names":[]}