@withpotter/pages-bookings 0.13.0-next.101

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-mobile-layout.js

@@ -0,0 +1,315 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import {
+  Calendar,
+  ChevronDown,
+  ChevronRight,
+  Download,
+  Globe,
+  QrCode,
+  Ticket,
+  User,
+  Users,
+  Video
+} from "lucide-react";
+import { bookingsApi } from "@withpotter/lib/api/bookings";
+import { joinLabelOf, meetingLinkOf } from "@withpotter/lib/booking-meeting-link";
+import {
+  useBookingStatusConfig,
+  formatDateTime,
+  formatFullDate,
+  formatTime
+} from "../_hooks";
+import {
+  BOOKING_MODE_LABELS,
+  BOOKING_ORIGIN_LABELS,
+  BOOKING_TYPE_LABELS
+} from "./booking-constants";
+import { BookingMoney } from "./booking-money";
+import { BookingSplit } from "./booking-split";
+import { Badge } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { TicketRowActions } from "./ticket-row-actions";
+import { resolveTicketCode } from "@withpotter/lib/ticket-access";
+function BookingMobileLayout({
+  booking,
+  tickets,
+  statusConfig,
+  formatCurrency,
+  isPaid,
+  bookingAmount,
+  bookingTotal,
+  paidAmount,
+  split,
+  paymentReference,
+  paidAt,
+  allowedTransitions,
+  updatingStatus,
+  showStatusDropdown,
+  setShowStatusDropdown,
+  handleStatusUpdate,
+  bookingSingular,
+  tenant,
+  securityDeposit
+}) {
+  const statuses = useBookingStatusConfig();
+  const meetingLink = meetingLinkOf(booking);
+  return /* @__PURE__ */ jsxs("div", { className: "lg:hidden space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-[var(--info-bg)] rounded-ios-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(Calendar, { className: "size-5 text-[var(--info)]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        booking.resourceName ? /* @__PURE__ */ jsx("span", { className: "text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: booking.resourceName }) : booking.type && booking.type !== "resource" ? /* @__PURE__ */ jsx("span", { className: "text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]", children: BOOKING_TYPE_LABELS[booking.type] || booking.type }) : null,
+        booking.content ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: `/dashboard/catalog/${booking.content.id}`,
+            className: "block text-xl font-semibold text-[var(--text-primary)] truncate active:opacity-70 transition-opacity",
+            children: booking.content.title
+          }
+        ) : /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-[var(--text-primary)] truncate", children: [
+          bookingSingular,
+          " #",
+          booking.bookingNumber
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-tertiary)]", children: [
+          formatFullDate(booking.date),
+          booking.startTime && ` at ${formatTime(booking.startTime)}`,
+          booking.durationMinutes && ` \xB7 ${booking.durationMinutes} min`
+        ] })
+      ] }),
+      bookingAmount > 0 && /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-[var(--text-primary)] flex-shrink-0", children: formatCurrency(bookingAmount) })
+    ] }),
+    typeof booking.metadata?.meetingLink === "string" && booking.metadata.meetingLink && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: booking.metadata.meetingLink,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-3 rounded-ios-sm bg-[var(--info-bg)] px-4 py-3 transition-opacity active:opacity-70",
+        children: [
+          /* @__PURE__ */ jsx(Video, { className: "size-5 text-[var(--info)] flex-shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 text-sm font-medium text-[var(--text-primary)]", children: "Join the video call" }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--text-tertiary)] flex-shrink-0" })
+        ]
+      }
+    ),
+    (booking.customerName || booking.customerEmail) && /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: booking.memberId ? `/dashboard/customers/${booking.memberId}` : "#",
+        className: "flex items-center gap-3 active:opacity-70 transition-opacity",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-[var(--bg-muted)] rounded-full flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(User, { className: "size-4 text-[var(--text-tertiary)]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: booking.customerName || "Guest" }),
+            booking.customerEmail && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)] ml-1.5", children: booking.customerEmail })
+          ] }),
+          booking.memberId && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--text-muted)] flex-shrink-0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "-mx-4 px-4 overflow-x-auto scrollbar-none", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-max", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (allowedTransitions.length > 0)
+                setShowStatusDropdown(!showStatusDropdown);
+            },
+            disabled: allowedTransitions.length === 0,
+            className: "inline-flex items-center gap-2 rounded-lg",
+            children: [
+              /* @__PURE__ */ jsx(StatusBadge, { status: booking.status, label: statusConfig.label }),
+              allowedTransitions.length > 0 && /* @__PURE__ */ jsx(ChevronDown, { className: "text-[var(--text-tertiary)]" })
+            ]
+          }
+        ),
+        showStatusDropdown && /* @__PURE__ */ jsx("div", { className: "absolute z-10 mt-1 w-48 bg-[var(--bg-base)] border border-[var(--border-default)] rounded-ios-lg shadow-lg py-1", children: allowedTransitions.map((status) => {
+          const config = statuses(booking?.type)[status];
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleStatusUpdate(status),
+              disabled: updatingStatus,
+              className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-left active:bg-[var(--interactive-hover)]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: config.color, children: config.icon }),
+                config.label
+              ]
+            },
+            status
+          );
+        }) })
+      ] }),
+      (bookingTotal > 0 || paidAmount > 0 || securityDeposit != null) && /* @__PURE__ */ jsx(StatusBadge, { status: isPaid ? "paid" : "unpaid" }),
+      /* @__PURE__ */ jsxs(Badge, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(Ticket, {}),
+        BOOKING_MODE_LABELS[booking.bookingMode || "scheduled"] || "Scheduled"
+      ] }),
+      booking.origin && /* @__PURE__ */ jsxs(Badge, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(Globe, {}),
+        BOOKING_ORIGIN_LABELS[booking.origin] || booking.origin
+      ] })
+    ] }) }),
+    meetingLink && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: meetingLink,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "flex items-center justify-center gap-2 rounded-ios-lg bg-[var(--bg-subtle)] px-3 py-3 text-sm font-medium text-[var(--text-link)] active:scale-[var(--motion-press-scale)]",
+        children: [
+          /* @__PURE__ */ jsx(Video, { className: "size-4" }),
+          joinLabelOf(meetingLink)
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 border-b border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Date" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: formatFullDate(booking.date) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Time" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-[var(--text-primary)]", children: [
+              booking.startTime && formatTime(booking.startTime),
+              booking.endTime && ` \u2013 ${formatTime(booking.endTime)}`,
+              !booking.startTime && "\u2014"
+            ] })
+          ] })
+        ] }),
+        booking.quantity && booking.quantity > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Guests" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: booking.quantity })
+        ] }),
+        booking.schedulePayload && Object.keys(booking.schedulePayload).length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-1", children: [
+          booking.schedulePayload.partySize != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Party size" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: String(booking.schedulePayload.partySize) })
+          ] }),
+          booking.schedulePayload.dropoffDate != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Drop-off date" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: formatFullDate(
+              String(booking.schedulePayload.dropoffDate)
+            ) })
+          ] })
+        ] })
+      ] }),
+      bookingTotal > 0 && /* @__PURE__ */ jsx(
+        BookingMoney,
+        {
+          total: bookingTotal,
+          paidAmount,
+          isPaid,
+          paymentReference,
+          paidAt,
+          formatCurrency,
+          formatDateTime
+        }
+      )
+    ] }),
+    split && split.participants.length > 0 && /* @__PURE__ */ jsx(BookingSplit, { split, formatCurrency }),
+    booking.customerNote && /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden px-3 py-3", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[var(--text-tertiary)] uppercase tracking-wide mb-2", children: "Customer note" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)] bg-[var(--warning-bg)] p-3 rounded-ios-sm border border-[var(--warning)]/10", children: booking.customerNote })
+    ] }),
+    booking.type === "event" && tickets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 border-b border-[var(--border-subtle)] flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Ticket, { className: "size-4 text-[var(--text-tertiary)]" }),
+          /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-[var(--text-tertiary)] uppercase tracking-wide", children: [
+            "Tickets (",
+            tickets.length,
+            ")"
+          ] })
+        ] }),
+        tickets.length > 1 && tenant?.slug && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: bookingsApi.getTicketsPdfUrl(tenant.slug, booking.id),
+            className: "inline-flex items-center gap-2 text-sm font-medium text-[var(--accent-primary)] active:opacity-70",
+            children: [
+              /* @__PURE__ */ jsx(Download, {}),
+              "PDF"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-subtle)]", children: tickets.map((ticket, idx) => {
+        const ticketCode = resolveTicketCode({ ticket, booking });
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "px-3 py-3 flex items-center gap-3",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${ticket.checkedInAt ? "bg-[var(--success-bg)]" : ticket.status === "cancelled" ? "bg-[var(--bg-muted)]" : "bg-[var(--info-bg)]"}`,
+                  children: /* @__PURE__ */ jsx(
+                    QrCode,
+                    {
+                      className: `w-4 h-4 ${ticket.checkedInAt ? "text-[var(--success)]" : ticket.status === "cancelled" ? "text-[var(--text-muted)]" : "text-[var(--info)]"}`
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
+                  "Ticket ",
+                  idx + 1,
+                  ticket.attendeeName && /* @__PURE__ */ jsxs("span", { className: "text-[var(--text-tertiary)] font-normal", children: [
+                    " ",
+                    "\u2014 ",
+                    ticket.attendeeName
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)] font-mono truncate", children: ticketCode ?? "Issued soon" }),
+                /* @__PURE__ */ jsx(
+                  TicketRowActions,
+                  {
+                    tenantSlug: tenant?.slug,
+                    bookingId: booking.id,
+                    ticketId: ticket.id,
+                    ticketCode,
+                    className: "mt-1"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                StatusBadge,
+                {
+                  className: "flex-shrink-0",
+                  status: ticket.checkedInAt ? "checked_in" : ticket.status === "cancelled" ? "cancelled" : "confirmed",
+                  label: ticket.checkedInAt ? "Checked In" : ticket.status === "cancelled" ? "Cancelled" : "Active"
+                }
+              )
+            ]
+          },
+          ticket.id
+        );
+      }) })
+    ] }),
+    booking.type === "event" && booking.contentId && /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: `/dashboard/bookings/attendees?contentId=${booking.contentId}`,
+        className: "flex items-center gap-3 px-3 py-3 bg-[var(--bg-subtle)] rounded-ios-lg active:bg-[var(--bg-muted)] transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Users, { className: "size-5 text-[var(--info)]" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-[var(--text-primary)]", children: "View all attendees" }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--text-muted)]" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  BookingMobileLayout
+};
+//# sourceMappingURL=booking-mobile-layout.js.map

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-mobile-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-mobile-layout.tsx"],"sourcesContent":["import Link from 'next/link';\nimport {\n  Calendar,\n  ChevronDown,\n  ChevronRight,\n  Download,\n  Globe,\n  QrCode,\n  Ticket,\n  User,\n  Users,\n  Video,\n} from 'lucide-react';\nimport { bookingsApi } from '@withpotter/lib/api/bookings';\nimport { joinLabelOf, meetingLinkOf } from '@withpotter/lib/booking-meeting-link';\nimport {\n  useBookingStatusConfig,\n  formatDateTime,\n  formatFullDate,\n  formatTime,\n} from '../_hooks';\nimport {\n  BOOKING_MODE_LABELS,\n  BOOKING_ORIGIN_LABELS,\n  BOOKING_TYPE_LABELS,\n} from './booking-constants';\nimport { BookingMoney } from './booking-money';\nimport { BookingSplit } from './booking-split';\nimport type { BookingLayoutProps } from './booking-layout-props';\nimport { Badge } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { TicketRowActions } from './ticket-row-actions';\nimport { resolveTicketCode } from '@withpotter/lib/ticket-access';\n\n/**\n * Legacy narrow-viewport booking-detail layout (renders below `lg`, when the\n * JS isMobile hook is false but the CSS breakpoint is still sub-desktop).\n * Extracted verbatim from the page during the detail-scaffold pass.\n */\nexport function BookingMobileLayout({\n  booking,\n  tickets,\n  statusConfig,\n  formatCurrency,\n  isPaid,\n  bookingAmount,\n  bookingTotal,\n  paidAmount,\n  split,\n  paymentReference,\n  paidAt,\n  allowedTransitions,\n  updatingStatus,\n  showStatusDropdown,\n  setShowStatusDropdown,\n  handleStatusUpdate,\n  bookingSingular,\n  tenant,\n  securityDeposit,\n}: BookingLayoutProps) {\n  const statuses = useBookingStatusConfig();\n  const meetingLink = meetingLinkOf(booking);\n  return (\n    <div className=\"lg:hidden space-y-4\">\n      {/* What's being booked — the headline */}\n      <div className=\"flex items-center gap-3\">\n        <div className=\"w-10 h-10 bg-[var(--info-bg)] rounded-ios-sm flex items-center justify-center flex-shrink-0\">\n          <Calendar className=\"size-5 text-[var(--info)]\" />\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          {/* Name the court, not the category it belongs to. Same rule as the\n              desktop fact list. */}\n          {booking.resourceName ? (\n            <span className=\"text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n              {booking.resourceName}\n            </span>\n          ) : booking.type && booking.type !== 'resource' ? (\n            <span className=\"text-2xs font-medium uppercase tracking-wide text-[var(--text-muted)]\">\n              {BOOKING_TYPE_LABELS[booking.type] || booking.type}\n            </span>\n          ) : null}\n          {booking.content ? (\n            <Link\n              href={`/dashboard/catalog/${booking.content.id}`}\n              className=\"block text-xl font-semibold text-[var(--text-primary)] truncate active:opacity-70 transition-opacity\"\n            >\n              {booking.content.title}\n            </Link>\n          ) : (\n            <h2 className=\"text-xl font-semibold text-[var(--text-primary)] truncate\">\n              {bookingSingular} #{booking.bookingNumber}\n            </h2>\n          )}\n          <p className=\"text-sm text-[var(--text-tertiary)]\">\n            {formatFullDate(booking.date)}\n            {booking.startTime && ` at ${formatTime(booking.startTime)}`}\n            {booking.durationMinutes && ` · ${booking.durationMinutes} min`}\n          </p>\n        </div>\n        {bookingAmount > 0 && (\n          <span className=\"text-lg font-semibold text-[var(--text-primary)] flex-shrink-0\">\n            {formatCurrency(bookingAmount)}\n          </span>\n        )}\n      </div>\n\n      {/* JOIN THE CALL.\n          The phone is where somebody actually joins, so on this layout the\n          room is not a line of facts — it is the act, at the top, at the size\n          of a thumb. Shown only when calendar sync minted a room. */}\n      {typeof booking.metadata?.meetingLink === 'string' &&\n        booking.metadata.meetingLink && (\n          <a\n            href={booking.metadata.meetingLink}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"flex items-center gap-3 rounded-ios-sm bg-[var(--info-bg)] px-4 py-3 transition-opacity active:opacity-70\"\n          >\n            <Video className=\"size-5 text-[var(--info)] flex-shrink-0\" />\n            <span className=\"flex-1 min-w-0 text-sm font-medium text-[var(--text-primary)]\">\n              Join the video call\n            </span>\n            <ChevronRight className=\"size-4 text-[var(--text-tertiary)] flex-shrink-0\" />\n          </a>\n        )}\n\n      {/* Customer tag */}\n      {(booking.customerName || booking.customerEmail) && (\n        <Link\n          href={\n            booking.memberId ? `/dashboard/customers/${booking.memberId}` : '#'\n          }\n          className=\"flex items-center gap-3 active:opacity-70 transition-opacity\"\n        >\n          <div className=\"w-8 h-8 bg-[var(--bg-muted)] rounded-full flex items-center justify-center flex-shrink-0\">\n            <User className=\"size-4 text-[var(--text-tertiary)]\" />\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n              {booking.customerName || 'Guest'}\n            </span>\n            {booking.customerEmail && (\n              <span className=\"text-sm text-[var(--text-tertiary)] ml-1.5\">\n                {booking.customerEmail}\n              </span>\n            )}\n          </div>\n          {booking.memberId && (\n            <ChevronRight className=\"size-4 text-[var(--text-muted)] flex-shrink-0\" />\n          )}\n        </Link>\n      )}\n\n      {/* Inline status pills */}\n      <div className=\"-mx-4 px-4 overflow-x-auto scrollbar-none\">\n        <div className=\"flex items-center gap-2 w-max\">\n          {/* Booking Status */}\n          <div className=\"relative\">\n            <button\n              type=\"button\"\n              onClick={() => {\n                if (allowedTransitions.length > 0)\n                  setShowStatusDropdown(!showStatusDropdown);\n              }}\n              disabled={allowedTransitions.length === 0}\n              className=\"inline-flex items-center gap-2 rounded-lg\"\n            >\n              <StatusBadge status={booking.status} label={statusConfig.label} />\n              {allowedTransitions.length > 0 && (\n                <ChevronDown className=\"text-[var(--text-tertiary)]\" />\n              )}\n            </button>\n            {showStatusDropdown && (\n              <div className=\"absolute z-10 mt-1 w-48 bg-[var(--bg-base)] border border-[var(--border-default)] rounded-ios-lg shadow-lg py-1\">\n                {allowedTransitions.map((status) => {\n                  const config = statuses(booking?.type)[status];\n                  return (\n                    <button\n                      type=\"button\"\n                      key={status}\n                      onClick={() => handleStatusUpdate(status)}\n                      disabled={updatingStatus}\n                      className=\"w-full flex items-center gap-2 px-3 py-2 text-sm text-left active:bg-[var(--interactive-hover)]\"\n                    >\n                      <span className={config.color}>{config.icon}</span>\n                      {config.label}\n                    </button>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n\n          {/* Payment Status, only where money is attached — a free booking is\n              not unpaid, it is free. Same test the Payment card below uses. */}\n          {(bookingTotal > 0 || paidAmount > 0 || securityDeposit != null) && (\n            <StatusBadge status={isPaid ? 'paid' : 'unpaid'} />\n          )}\n\n          {/* Mode Badge */}\n          <Badge className=\"gap-2\">\n            <Ticket />\n            {BOOKING_MODE_LABELS[booking.bookingMode || 'scheduled'] ||\n              'Scheduled'}\n          </Badge>\n\n          {/* Origin Badge */}\n          {booking.origin && (\n            <Badge className=\"gap-2\">\n              <Globe />\n              {BOOKING_ORIGIN_LABELS[booking.origin] || booking.origin}\n            </Badge>\n          )}\n        </div>\n      </div>\n\n      {/* The room, when it has one — the same `metadata.meetingLink` the\n          confirmation email carries. A phone at the hour of the call is the\n          likeliest place this is wanted, so it is a full-width row rather than\n          a line of small print. */}\n      {meetingLink && (\n        <a\n          href={meetingLink}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className=\"flex items-center justify-center gap-2 rounded-ios-lg bg-[var(--bg-subtle)] px-3 py-3 text-sm font-medium text-[var(--text-link)] active:scale-[var(--motion-press-scale)]\"\n        >\n          <Video className=\"size-4\" />\n          {joinLabelOf(meetingLink)}\n        </a>\n      )}\n\n      {/* Details card: schedule + guests + payment */}\n      <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden\">\n        {/* Date & Time */}\n        <div className=\"px-3 py-3 border-b border-[var(--border-subtle)]\">\n          <div className=\"flex items-center justify-between\">\n            <div>\n              <span className=\"text-sm text-[var(--text-tertiary)]\">Date</span>\n              <p className=\"text-sm text-[var(--text-primary)]\">\n                {formatFullDate(booking.date)}\n              </p>\n            </div>\n            <div className=\"text-right\">\n              <span className=\"text-sm text-[var(--text-tertiary)]\">Time</span>\n              <p className=\"text-sm text-[var(--text-primary)]\">\n                {booking.startTime && formatTime(booking.startTime)}\n                {booking.endTime && ` – ${formatTime(booking.endTime)}`}\n                {!booking.startTime && '—'}\n              </p>\n            </div>\n          </div>\n          {booking.quantity && booking.quantity > 1 && (\n            <div className=\"mt-2 flex justify-between\">\n              <span className=\"text-sm text-[var(--text-tertiary)]\">\n                Guests\n              </span>\n              <span className=\"text-sm text-[var(--text-primary)]\">\n                {booking.quantity}\n              </span>\n            </div>\n          )}\n          {/* Schedule Payload Summary */}\n          {booking.schedulePayload &&\n            Object.keys(booking.schedulePayload).length > 0 && (\n              <div className=\"mt-2 space-y-1\">\n                {booking.schedulePayload.partySize != null && (\n                  <div className=\"flex justify-between\">\n                    <span className=\"text-sm text-[var(--text-tertiary)]\">\n                      Party size\n                    </span>\n                    <span className=\"text-sm text-[var(--text-primary)]\">\n                      {String(booking.schedulePayload.partySize)}\n                    </span>\n                  </div>\n                )}\n                {booking.schedulePayload.dropoffDate != null && (\n                  <div className=\"flex justify-between\">\n                    <span className=\"text-sm text-[var(--text-tertiary)]\">\n                      Drop-off date\n                    </span>\n                    <span className=\"text-sm text-[var(--text-primary)]\">\n                      {formatFullDate(\n                        String(booking.schedulePayload.dropoffDate),\n                      )}\n                    </span>\n                  </div>\n                )}\n              </div>\n            )}\n        </div>\n\n        {/* Payment summary */}\n        {bookingTotal > 0 && (\n          <BookingMoney\n            total={bookingTotal}\n            paidAmount={paidAmount}\n            isPaid={isPaid}\n            paymentReference={paymentReference}\n            paidAt={paidAt}\n            formatCurrency={formatCurrency}\n            formatDateTime={formatDateTime}\n          />\n        )}\n      </div>\n\n      {/* Group split */}\n      {split && split.participants.length > 0 && (\n        <BookingSplit split={split} formatCurrency={formatCurrency} />\n      )}\n\n      {/* Notes */}\n      {booking.customerNote && (\n        <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden px-3 py-3\">\n          <h3 className=\"text-sm font-medium text-[var(--text-tertiary)] uppercase tracking-wide mb-2\">\n            Customer note\n          </h3>\n          <p className=\"text-sm text-[var(--text-secondary)] bg-[var(--warning-bg)] p-3 rounded-ios-sm border border-[var(--warning)]/10\">\n            {booking.customerNote}\n          </p>\n        </div>\n      )}\n\n      {/* Individual Tickets (event bookings) */}\n      {booking.type === 'event' && tickets.length > 0 && (\n        <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden\">\n          <div className=\"px-3 py-3 border-b border-[var(--border-subtle)] flex items-center justify-between\">\n            <div className=\"flex items-center gap-2\">\n              <Ticket className=\"size-4 text-[var(--text-tertiary)]\" />\n              <h3 className=\"text-sm font-medium text-[var(--text-tertiary)] uppercase tracking-wide\">\n                Tickets ({tickets.length})\n              </h3>\n            </div>\n            {tickets.length > 1 && tenant?.slug && (\n              <a\n                href={bookingsApi.getTicketsPdfUrl(tenant.slug, booking.id)}\n                className=\"inline-flex items-center gap-2 text-sm font-medium text-[var(--accent-primary)] active:opacity-70\"\n              >\n                <Download />\n                PDF\n              </a>\n            )}\n          </div>\n          <div className=\"divide-y divide-[var(--border-subtle)]\">\n            {tickets.map((ticket, idx) => {\n              const ticketCode = resolveTicketCode({ ticket, booking });\n              return (\n                <div\n                  key={ticket.id}\n                  className=\"px-3 py-3 flex items-center gap-3\"\n                >\n                  <div\n                    className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${\n                      ticket.checkedInAt\n                        ? 'bg-[var(--success-bg)]'\n                        : ticket.status === 'cancelled'\n                          ? 'bg-[var(--bg-muted)]'\n                          : 'bg-[var(--info-bg)]'\n                    }`}\n                  >\n                    <QrCode\n                      className={`w-4 h-4 ${\n                        ticket.checkedInAt\n                          ? 'text-[var(--success)]'\n                          : ticket.status === 'cancelled'\n                            ? 'text-[var(--text-muted)]'\n                            : 'text-[var(--info)]'\n                      }`}\n                    />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                      Ticket {idx + 1}\n                      {ticket.attendeeName && (\n                        <span className=\"text-[var(--text-tertiary)] font-normal\">\n                          {' '}\n                          — {ticket.attendeeName}\n                        </span>\n                      )}\n                    </p>\n                    <p className=\"text-xs text-[var(--text-muted)] font-mono truncate\">\n                      {ticketCode ?? 'Issued soon'}\n                    </p>\n                    <TicketRowActions\n                      tenantSlug={tenant?.slug}\n                      bookingId={booking.id}\n                      ticketId={ticket.id}\n                      ticketCode={ticketCode}\n                      className=\"mt-1\"\n                    />\n                  </div>\n                  <StatusBadge\n                    className=\"flex-shrink-0\"\n                    status={\n                      ticket.checkedInAt\n                        ? 'checked_in'\n                        : ticket.status === 'cancelled'\n                          ? 'cancelled'\n                          : 'confirmed'\n                    }\n                    label={\n                      ticket.checkedInAt\n                        ? 'Checked In'\n                        : ticket.status === 'cancelled'\n                          ? 'Cancelled'\n                          : 'Active'\n                    }\n                  />\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      {/* View Attendees (event bookings only) */}\n      {booking.type === 'event' && booking.contentId && (\n        <Link\n          href={`/dashboard/bookings/attendees?contentId=${booking.contentId}`}\n          className=\"flex items-center gap-3 px-3 py-3 bg-[var(--bg-subtle)] rounded-ios-lg active:bg-[var(--bg-muted)] transition-colors\"\n        >\n          <Users className=\"size-5 text-[var(--info)]\" />\n          <span className=\"flex-1 text-sm font-medium text-[var(--text-primary)]\">\n            View all attendees\n          </span>\n          <ChevronRight className=\"size-4 text-[var(--text-muted)]\" />\n        </Link>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAmEU,cAsBE,YAtBF;AAnEV,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,aAAa,qBAAqB;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAO3B,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,WAAW,uBAAuB;AACxC,QAAM,cAAc,cAAc,OAAO;AACzC,SACE,qBAAC,SAAI,WAAU,uBAEb;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+FACb,8BAAC,YAAS,WAAU,6BAA4B,GAClD;AAAA,MACA,qBAAC,SAAI,WAAU,kBAGZ;AAAA,gBAAQ,eACP,oBAAC,UAAK,WAAU,yEACb,kBAAQ,cACX,IACE,QAAQ,QAAQ,QAAQ,SAAS,aACnC,oBAAC,UAAK,WAAU,yEACb,8BAAoB,QAAQ,IAAI,KAAK,QAAQ,MAChD,IACE;AAAA,QACH,QAAQ,UACP;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,sBAAsB,QAAQ,QAAQ,EAAE;AAAA,YAC9C,WAAU;AAAA,YAET,kBAAQ,QAAQ;AAAA;AAAA,QACnB,IAEA,qBAAC,QAAG,WAAU,6DACX;AAAA;AAAA,UAAgB;AAAA,UAAG,QAAQ;AAAA,WAC9B;AAAA,QAEF,qBAAC,OAAE,WAAU,uCACV;AAAA,yBAAe,QAAQ,IAAI;AAAA,UAC3B,QAAQ,aAAa,OAAO,WAAW,QAAQ,SAAS,CAAC;AAAA,UACzD,QAAQ,mBAAmB,SAAM,QAAQ,eAAe;AAAA,WAC3D;AAAA,SACF;AAAA,MACC,gBAAgB,KACf,oBAAC,UAAK,WAAU,kEACb,yBAAe,aAAa,GAC/B;AAAA,OAEJ;AAAA,IAMC,OAAO,QAAQ,UAAU,gBAAgB,YACxC,QAAQ,SAAS,eACf;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,QAAQ,SAAS;AAAA,QACvB,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAM,WAAU,2CAA0C;AAAA,UAC3D,oBAAC,UAAK,WAAU,iEAAgE,iCAEhF;AAAA,UACA,oBAAC,gBAAa,WAAU,oDAAmD;AAAA;AAAA;AAAA,IAC7E;AAAA,KAIF,QAAQ,gBAAgB,QAAQ,kBAChC;AAAA,MAAC;AAAA;AAAA,QACC,MACE,QAAQ,WAAW,wBAAwB,QAAQ,QAAQ,KAAK;AAAA,QAElE,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAU,4FACb,8BAAC,QAAK,WAAU,sCAAqC,GACvD;AAAA,UACA,qBAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,UAAK,WAAU,kDACb,kBAAQ,gBAAgB,SAC3B;AAAA,YACC,QAAQ,iBACP,oBAAC,UAAK,WAAU,8CACb,kBAAQ,eACX;AAAA,aAEJ;AAAA,UACC,QAAQ,YACP,oBAAC,gBAAa,WAAU,iDAAgD;AAAA;AAAA;AAAA,IAE5E;AAAA,IAIF,oBAAC,SAAI,WAAU,6CACb,+BAAC,SAAI,WAAU,iCAEb;AAAA,2BAAC,SAAI,WAAU,YACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,kBAAI,mBAAmB,SAAS;AAC9B,sCAAsB,CAAC,kBAAkB;AAAA,YAC7C;AAAA,YACA,UAAU,mBAAmB,WAAW;AAAA,YACxC,WAAU;AAAA,YAEV;AAAA,kCAAC,eAAY,QAAQ,QAAQ,QAAQ,OAAO,aAAa,OAAO;AAAA,cAC/D,mBAAmB,SAAS,KAC3B,oBAAC,eAAY,WAAU,+BAA8B;AAAA;AAAA;AAAA,QAEzD;AAAA,QACC,sBACC,oBAAC,SAAI,WAAU,mHACZ,6BAAmB,IAAI,CAAC,WAAW;AAClC,gBAAM,SAAS,SAAS,SAAS,IAAI,EAAE,MAAM;AAC7C,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cAEL,SAAS,MAAM,mBAAmB,MAAM;AAAA,cACxC,UAAU;AAAA,cACV,WAAU;AAAA,cAEV;AAAA,oCAAC,UAAK,WAAW,OAAO,OAAQ,iBAAO,MAAK;AAAA,gBAC3C,OAAO;AAAA;AAAA;AAAA,YANH;AAAA,UAOP;AAAA,QAEJ,CAAC,GACH;AAAA,SAEJ;AAAA,OAIE,eAAe,KAAK,aAAa,KAAK,mBAAmB,SACzD,oBAAC,eAAY,QAAQ,SAAS,SAAS,UAAU;AAAA,MAInD,qBAAC,SAAM,WAAU,SACf;AAAA,4BAAC,UAAO;AAAA,QACP,oBAAoB,QAAQ,eAAe,WAAW,KACrD;AAAA,SACJ;AAAA,MAGC,QAAQ,UACP,qBAAC,SAAM,WAAU,SACf;AAAA,4BAAC,SAAM;AAAA,QACN,sBAAsB,QAAQ,MAAM,KAAK,QAAQ;AAAA,SACpD;AAAA,OAEJ,GACF;AAAA,IAMC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAM,WAAU,UAAS;AAAA,UACzB,YAAY,WAAW;AAAA;AAAA;AAAA,IAC1B;AAAA,IAIF,qBAAC,SAAI,WAAU,wDAEb;AAAA,2BAAC,SAAI,WAAU,oDACb;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,+BAAC,SACC;AAAA,gCAAC,UAAK,WAAU,uCAAsC,kBAAI;AAAA,YAC1D,oBAAC,OAAE,WAAU,sCACV,yBAAe,QAAQ,IAAI,GAC9B;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA,gCAAC,UAAK,WAAU,uCAAsC,kBAAI;AAAA,YAC1D,qBAAC,OAAE,WAAU,sCACV;AAAA,sBAAQ,aAAa,WAAW,QAAQ,SAAS;AAAA,cACjD,QAAQ,WAAW,WAAM,WAAW,QAAQ,OAAO,CAAC;AAAA,cACpD,CAAC,QAAQ,aAAa;AAAA,eACzB;AAAA,aACF;AAAA,WACF;AAAA,QACC,QAAQ,YAAY,QAAQ,WAAW,KACtC,qBAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,UAAK,WAAU,uCAAsC,oBAEtD;AAAA,UACA,oBAAC,UAAK,WAAU,sCACb,kBAAQ,UACX;AAAA,WACF;AAAA,QAGD,QAAQ,mBACP,OAAO,KAAK,QAAQ,eAAe,EAAE,SAAS,KAC5C,qBAAC,SAAI,WAAU,kBACZ;AAAA,kBAAQ,gBAAgB,aAAa,QACpC,qBAAC,SAAI,WAAU,wBACb;AAAA,gCAAC,UAAK,WAAU,uCAAsC,wBAEtD;AAAA,YACA,oBAAC,UAAK,WAAU,sCACb,iBAAO,QAAQ,gBAAgB,SAAS,GAC3C;AAAA,aACF;AAAA,UAED,QAAQ,gBAAgB,eAAe,QACtC,qBAAC,SAAI,WAAU,wBACb;AAAA,gCAAC,UAAK,WAAU,uCAAsC,2BAEtD;AAAA,YACA,oBAAC,UAAK,WAAU,sCACb;AAAA,cACC,OAAO,QAAQ,gBAAgB,WAAW;AAAA,YAC5C,GACF;AAAA,aACF;AAAA,WAEJ;AAAA,SAEN;AAAA,MAGC,eAAe,KACd;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OAEJ;AAAA,IAGC,SAAS,MAAM,aAAa,SAAS,KACpC,oBAAC,gBAAa,OAAc,gBAAgC;AAAA,IAI7D,QAAQ,gBACP,qBAAC,SAAI,WAAU,kEACb;AAAA,0BAAC,QAAG,WAAU,gFAA+E,2BAE7F;AAAA,MACA,oBAAC,OAAE,WAAU,oHACV,kBAAQ,cACX;AAAA,OACF;AAAA,IAID,QAAQ,SAAS,WAAW,QAAQ,SAAS,KAC5C,qBAAC,SAAI,WAAU,wDACb;AAAA,2BAAC,SAAI,WAAU,sFACb;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,UAAO,WAAU,sCAAqC;AAAA,UACvD,qBAAC,QAAG,WAAU,2EAA0E;AAAA;AAAA,YAC5E,QAAQ;AAAA,YAAO;AAAA,aAC3B;AAAA,WACF;AAAA,QACC,QAAQ,SAAS,KAAK,QAAQ,QAC7B;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY,iBAAiB,OAAO,MAAM,QAAQ,EAAE;AAAA,YAC1D,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS;AAAA,cAAE;AAAA;AAAA;AAAA,QAEd;AAAA,SAEJ;AAAA,MACA,oBAAC,SAAI,WAAU,0CACZ,kBAAQ,IAAI,CAAC,QAAQ,QAAQ;AAC5B,cAAM,aAAa,kBAAkB,EAAE,QAAQ,QAAQ,CAAC;AACxD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,uEACT,OAAO,cACH,2BACA,OAAO,WAAW,cAChB,yBACA,qBACR;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAW,WACT,OAAO,cACH,0BACA,OAAO,WAAW,cAChB,6BACA,oBACR;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cACA,qBAAC,SAAI,WAAU,kBACb;AAAA,qCAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,kBACpD,MAAM;AAAA,kBACb,OAAO,gBACN,qBAAC,UAAK,WAAU,2CACb;AAAA;AAAA,oBAAI;AAAA,oBACF,OAAO;AAAA,qBACZ;AAAA,mBAEJ;AAAA,gBACA,oBAAC,OAAE,WAAU,uDACV,wBAAc,eACjB;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,YAAY,QAAQ;AAAA,oBACpB,WAAW,QAAQ;AAAA,oBACnB,UAAU,OAAO;AAAA,oBACjB;AAAA,oBACA,WAAU;AAAA;AAAA,gBACZ;AAAA,iBACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,QACE,OAAO,cACH,eACA,OAAO,WAAW,cAChB,cACA;AAAA,kBAER,OACE,OAAO,cACH,eACA,OAAO,WAAW,cAChB,cACA;AAAA;AAAA,cAEV;AAAA;AAAA;AAAA,UA3DK,OAAO;AAAA,QA4Dd;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,IAID,QAAQ,SAAS,WAAW,QAAQ,aACnC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,2CAA2C,QAAQ,SAAS;AAAA,QAClE,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAM,WAAU,6BAA4B;AAAA,UAC7C,oBAAC,UAAK,WAAU,yDAAwD,gCAExE;AAAA,UACA,oBAAC,gBAAa,WAAU,mCAAkC;AAAA;AAAA;AAAA,IAC5D;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-mobile-screen.js

@@ -0,0 +1,94 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { formatFullDate, formatTime } from "../_hooks";
+import { BOOKING_TYPE_LABELS } from "./booking-constants";
+import { CancelBookingModal } from "./cancel-booking-modal";
+import { MobileBookingDetailScreen } from "@withpotter/components/mobile/screens/booking-detail";
+import { joinLabelOf, meetingLinkOf } from "@withpotter/lib/booking-meeting-link";
+function BookingMobileScreen({
+  booking,
+  bookingSingular,
+  statusConfig,
+  formatCurrency,
+  isPaid,
+  bookingAmount,
+  allowedTransitions,
+  handleStatusUpdate,
+  showCancelModal,
+  setShowCancelModal,
+  cancelReason,
+  setCancelReason,
+  updatingStatus,
+  handleCancel,
+  onBack
+}) {
+  const customerName = booking.customerName || booking.customerEmail || "Guest";
+  const initials = customerName.split(" ").map((p) => p[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  const tone = statusConfig?.color?.includes("warning") ? "warn" : statusConfig?.color?.includes("success") ? "good" : statusConfig?.color?.includes("error") ? "bad" : "accent";
+  const facts = [
+    { label: "Booking #", value: booking.bookingNumber },
+    // A resource booking's type is the word "resource" — true, and useless to
+    // someone running a club. What they need is WHICH court. For every other
+    // type the label is already their own word (Appointment, Table
+    // Reservation, Room Booking), so it stays.
+    ...booking.resourceName ? [{ label: "Booked", value: booking.resourceName }] : booking.type && booking.type !== "resource" ? [
+      {
+        label: "Type",
+        value: BOOKING_TYPE_LABELS[booking.type] || booking.type
+      }
+    ] : [],
+    ...booking.durationMinutes ? [{ label: "Duration", value: `${booking.durationMinutes} min` }] : [],
+    ...bookingAmount ? [{ label: "Total", value: formatCurrency(bookingAmount) }] : [],
+    ...isPaid ? [{ label: "Payment", value: "Paid" }] : []
+  ];
+  const meetingLink = meetingLinkOf(booking);
+  const canAccept = allowedTransitions?.includes(
+    "confirmed"
+  );
+  const canDecline = allowedTransitions?.includes(
+    "cancelled"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MobileBookingDetailScreen,
+      {
+        title: booking.bookingNumber ? `${bookingSingular} #${booking.bookingNumber}` : bookingSingular,
+        statusLabel: statusConfig?.label || booking.status || "Pending",
+        statusTone: tone,
+        whenLabel: booking.date ? `${formatFullDate(booking.date)}${booking.startTime ? ` \xB7 ${formatTime(booking.startTime)}` : ""}` : "",
+        whatLabel: booking.content?.title || "Booking",
+        guestName: customerName,
+        guestInitials: initials || "G",
+        guestMeta: booking.customerEmail,
+        guestPhone: booking.customerPhone,
+        guestEmail: booking.customerEmail,
+        reference: booking.bookingNumber ? `#${booking.bookingNumber}` : void 0,
+        noteFromGuest: booking.customerNote || void 0,
+        meetingLink: meetingLink ?? void 0,
+        meetingLabel: meetingLink ? joinLabelOf(meetingLink) : void 0,
+        facts,
+        onBack,
+        onAccept: canAccept ? () => handleStatusUpdate("confirmed") : void 0,
+        onDecline: canDecline ? () => setShowCancelModal(true) : void 0
+      }
+    ),
+    showCancelModal && /* @__PURE__ */ jsx(
+      CancelBookingModal,
+      {
+        bookingNumber: booking.bookingNumber,
+        customerName: booking.customerName,
+        bookingDate: booking.date?.slice(0, 10),
+        resourceId: booking.resourceId,
+        onClose: () => setShowCancelModal(false),
+        handleCancel,
+        cancelReason,
+        setCancelReason,
+        updatingStatus
+      }
+    )
+  ] });
+}
+export {
+  BookingMobileScreen
+};
+//# sourceMappingURL=booking-mobile-screen.js.map

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-mobile-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-mobile-screen.tsx"],"sourcesContent":["'use client';\n\nimport type { BookingItem } from '@withpotter/lib/api/types';\nimport type { BookingStatus } from '../_hooks';\nimport { formatFullDate, formatTime } from '../_hooks';\nimport { BOOKING_TYPE_LABELS } from './booking-constants';\nimport { CancelBookingModal } from './cancel-booking-modal';\nimport { MobileBookingDetailScreen } from '@withpotter/components/mobile/screens/booking-detail';\nimport { joinLabelOf, meetingLinkOf } from '@withpotter/lib/booking-meeting-link';\n\n/**\n * The booking on a phone.\n *\n * Its own file for the house's reason — the page reached 523 lines — but also\n * because it IS its own thing: a native-shaped screen with an accept/decline\n * pair at the bottom, not a narrower copy of the record. Everything it needs is\n * handed to it, so the page stays a router between two layouts rather than a\n * screen with a second screen embedded in it.\n */\nexport function BookingMobileScreen({\n  booking,\n  bookingSingular,\n  statusConfig,\n  formatCurrency,\n  isPaid,\n  bookingAmount,\n  allowedTransitions,\n  handleStatusUpdate,\n  showCancelModal,\n  setShowCancelModal,\n  cancelReason,\n  setCancelReason,\n  updatingStatus,\n  handleCancel,\n  onBack,\n}: {\n  booking: BookingItem;\n  bookingSingular: string;\n  statusConfig: { label: string; color: string };\n  formatCurrency: (n: number) => string;\n  isPaid: boolean;\n  bookingAmount: number;\n  allowedTransitions: BookingStatus[];\n  handleStatusUpdate: (status: BookingStatus) => void;\n  showCancelModal: boolean;\n  setShowCancelModal: (v: boolean) => void;\n  cancelReason: string;\n  setCancelReason: (v: string) => void;\n  updatingStatus: boolean;\n  handleCancel: () => void;\n  onBack: () => void;\n}) {\n  const customerName = booking.customerName || booking.customerEmail || 'Guest';\n  const initials = customerName\n    .split(' ')\n    .map((p: string) => p[0])\n    .filter(Boolean)\n    .slice(0, 2)\n    .join('')\n    .toUpperCase();\n  const tone = statusConfig?.color?.includes('warning')\n    ? 'warn'\n    : statusConfig?.color?.includes('success')\n      ? 'good'\n      : statusConfig?.color?.includes('error')\n        ? 'bad'\n        : 'accent';\n  const facts: { label: string; value: string }[] = [\n    { label: 'Booking #', value: booking.bookingNumber },\n    // A resource booking's type is the word \"resource\" — true, and useless to\n    // someone running a club. What they need is WHICH court. For every other\n    // type the label is already their own word (Appointment, Table\n    // Reservation, Room Booking), so it stays.\n    ...(booking.resourceName\n      ? [{ label: 'Booked', value: booking.resourceName }]\n      : booking.type && booking.type !== 'resource'\n        ? [\n            {\n              label: 'Type',\n              value: BOOKING_TYPE_LABELS[booking.type] || booking.type,\n            },\n          ]\n        : []),\n    ...(booking.durationMinutes\n      ? [{ label: 'Duration', value: `${booking.durationMinutes} min` }]\n      : []),\n    ...(bookingAmount\n      ? [{ label: 'Total', value: formatCurrency(bookingAmount) }]\n      : []),\n    ...(isPaid ? [{ label: 'Payment', value: 'Paid' }] : []),\n  ];\n  const meetingLink = meetingLinkOf(booking);\n  const canAccept = (allowedTransitions as string[] | undefined)?.includes(\n    'confirmed',\n  );\n  const canDecline = (allowedTransitions as string[] | undefined)?.includes(\n    'cancelled',\n  );\n  return (\n    <>\n      <MobileBookingDetailScreen\n        title={\n          booking.bookingNumber\n            ? `${bookingSingular} #${booking.bookingNumber}`\n            : bookingSingular\n        }\n        statusLabel={statusConfig?.label || booking.status || 'Pending'}\n        statusTone={tone as 'warn' | 'good' | 'bad' | 'accent'}\n        whenLabel={\n          booking.date\n            ? `${formatFullDate(booking.date)}${booking.startTime ? ` · ${formatTime(booking.startTime)}` : ''}`\n            : ''\n        }\n        whatLabel={booking.content?.title || 'Booking'}\n        guestName={customerName}\n        guestInitials={initials || 'G'}\n        guestMeta={booking.customerEmail}\n        guestPhone={booking.customerPhone}\n        guestEmail={booking.customerEmail}\n        reference={\n          booking.bookingNumber ? `#${booking.bookingNumber}` : undefined\n        }\n        noteFromGuest={booking.customerNote || undefined}\n        meetingLink={meetingLink ?? undefined}\n        meetingLabel={meetingLink ? joinLabelOf(meetingLink) : undefined}\n        facts={facts}\n        onBack={onBack}\n        onAccept={canAccept ? () => handleStatusUpdate('confirmed') : undefined}\n        onDecline={canDecline ? () => setShowCancelModal(true) : undefined}\n      />\n      {showCancelModal && (\n        <CancelBookingModal\n          bookingNumber={booking.bookingNumber}\n          customerName={booking.customerName}\n          bookingDate={booking.date?.slice(0, 10)}\n          resourceId={booking.resourceId}\n          onClose={() => setShowCancelModal(false)}\n          handleCancel={handleCancel}\n          cancelReason={cancelReason}\n          setCancelReason={setCancelReason}\n          updatingStatus={updatingStatus}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-money.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card } from "@withpotter/ui-kit";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+function Row({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3 text-sm", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: label }),
+    children
+  ] });
+}
+function BookingMoney({
+  total,
+  paidAmount,
+  isPaid,
+  paymentReference,
+  paidAt,
+  formatCurrency,
+  formatDateTime,
+  children
+}) {
+  const settled = isPaid || total > 0 && paidAmount >= total;
+  const balance = Math.max(0, total - paidAmount);
+  const hasDeposit = !settled && paidAmount > 0;
+  return /* @__PURE__ */ jsxs(Card, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Payment" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xl font-semibold tabular-nums text-[var(--text-primary)]", children: formatCurrency(balance > 0 ? balance : total) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: settled ? "Settled in full" : balance > 0 && paidAmount > 0 ? `still owed of ${formatCurrency(total)}` : "to collect" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        StatusBadge,
+        {
+          size: "md",
+          status: settled ? "paid" : hasDeposit ? "partial" : "unpaid",
+          label: settled ? "Settled" : hasDeposit ? "Deposit taken" : "Unpaid"
+        }
+      )
+    ] }),
+    (hasDeposit || paymentReference || paidAt) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] pt-3", children: [
+      hasDeposit && /* @__PURE__ */ jsx(Row, { label: "Taken so far", children: /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-[var(--success)]", children: formatCurrency(paidAmount) }) }),
+      paymentReference && /* @__PURE__ */ jsx(Row, { label: "Reference", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-[var(--text-secondary)]", children: paymentReference }) }),
+      paidAt && /* @__PURE__ */ jsx(Row, { label: "Paid", children: /* @__PURE__ */ jsx("span", { className: "text-[var(--text-primary)]", children: formatDateTime(paidAt) }) })
+    ] }),
+    children
+  ] });
+}
+export {
+  BookingMoney
+};
+//# sourceMappingURL=booking-money.js.map

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-money.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-money.tsx"],"sourcesContent":["'use client';\n\nimport { Card } from '@withpotter/ui-kit';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\n\ninterface BookingMoneyProps {\n  /** Full price of the booking. */\n  total: number;\n  /** Amount collected so far (a deposit, or the full total). */\n  paidAmount: number;\n  /** Server's paid flag — treated as fully settled. */\n  isPaid: boolean;\n  paymentReference?: string;\n  paidAt?: string;\n  formatCurrency: (n: number) => string;\n  formatDateTime: (s: string) => string;\n  /** The deposit panel, when this booking rents something out. */\n  children?: React.ReactNode;\n}\n\nfunction Row({\n  label,\n  children,\n}: {\n  label: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex justify-between gap-3 text-sm\">\n      <span className=\"text-[var(--text-tertiary)]\">{label}</span>\n      {children}\n    </div>\n  );\n}\n\n/**\n * The booking's money as a record, not a boolean.\n *\n * Derives settled / deposit / balance-due from the amount collected, so a\n * booking with a deposit against it shows what is still owed instead of a flat\n * \"Unpaid\". Vertical-agnostic: every booking business (courts, tables, chairs,\n * rentals) reads deposit + balance the same way.\n *\n * THE FIGURE IS THE HEADLINE, and the state is a badge beside it. This opened\n * on a row reading \"Status  Unpaid\" — a whole card whose only content was a\n * word the chip at the top of the page had already said — and on a booking with\n * no price that row was the entire panel. A payment section with no money in it\n * is not a payment section, so with nothing owed and nothing taken it does not\n * render at all (see `hasMoney`).\n *\n * The pill was its own colour map, hand-rolled here: `bg-[var(--success-bg)]`\n * against a private ternary. Statuses are `StatusBadge`, everywhere in `src/`.\n */\nexport function BookingMoney({\n  total,\n  paidAmount,\n  isPaid,\n  paymentReference,\n  paidAt,\n  formatCurrency,\n  formatDateTime,\n  children,\n}: BookingMoneyProps) {\n  const settled = isPaid || (total > 0 && paidAmount >= total);\n  const balance = Math.max(0, total - paidAmount);\n  const hasDeposit = !settled && paidAmount > 0;\n\n  return (\n    <Card className=\"space-y-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div>\n          <h2 className=\"text-sm font-medium text-[var(--text-primary)]\">\n            Payment\n          </h2>\n          <p className=\"mt-1 text-xl font-semibold tabular-nums text-[var(--text-primary)]\">\n            {formatCurrency(balance > 0 ? balance : total)}\n          </p>\n          <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n            {settled\n              ? 'Settled in full'\n              : balance > 0 && paidAmount > 0\n                ? `still owed of ${formatCurrency(total)}`\n                : 'to collect'}\n          </p>\n        </div>\n        <StatusBadge\n          size=\"md\"\n          status={settled ? 'paid' : hasDeposit ? 'partial' : 'unpaid'}\n          label={settled ? 'Settled' : hasDeposit ? 'Deposit taken' : 'Unpaid'}\n        />\n      </div>\n\n      {(hasDeposit || paymentReference || paidAt) && (\n        <div className=\"space-y-2 border-t border-[var(--border-subtle)] pt-3\">\n          {hasDeposit && (\n            <Row label=\"Taken so far\">\n              <span className=\"font-medium tabular-nums text-[var(--success)]\">\n                {formatCurrency(paidAmount)}\n              </span>\n            </Row>\n          )}\n          {paymentReference && (\n            <Row label=\"Reference\">\n              <span className=\"font-mono text-xs text-[var(--text-secondary)]\">\n                {paymentReference}\n              </span>\n            </Row>\n          )}\n          {paidAt && (\n            <Row label=\"Paid\">\n              <span className=\"text-[var(--text-primary)]\">\n                {formatDateTime(paidAt)}\n              </span>\n            </Row>\n          )}\n        </div>\n      )}\n\n      {children}\n    </Card>\n  );\n}\n"],"mappings":";AA4BI,SACE,KADF;AA1BJ,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAiB5B,SAAS,IAAI;AAAA,EACX;AAAA,EACA;AACF,GAGG;AACD,SACE,qBAAC,SAAI,WAAU,sCACb;AAAA,wBAAC,UAAK,WAAU,+BAA+B,iBAAM;AAAA,IACpD;AAAA,KACH;AAEJ;AAoBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,UAAU,UAAW,QAAQ,KAAK,cAAc;AACtD,QAAM,UAAU,KAAK,IAAI,GAAG,QAAQ,UAAU;AAC9C,QAAM,aAAa,CAAC,WAAW,aAAa;AAE5C,SACE,qBAAC,QAAK,WAAU,aACd;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,2BAAC,SACC;AAAA,4BAAC,QAAG,WAAU,kDAAiD,qBAE/D;AAAA,QACA,oBAAC,OAAE,WAAU,sEACV,yBAAe,UAAU,IAAI,UAAU,KAAK,GAC/C;AAAA,QACA,oBAAC,OAAE,WAAU,4CACV,oBACG,oBACA,UAAU,KAAK,aAAa,IAC1B,iBAAiB,eAAe,KAAK,CAAC,KACtC,cACR;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAQ,UAAU,SAAS,aAAa,YAAY;AAAA,UACpD,OAAO,UAAU,YAAY,aAAa,kBAAkB;AAAA;AAAA,MAC9D;AAAA,OACF;AAAA,KAEE,cAAc,oBAAoB,WAClC,qBAAC,SAAI,WAAU,yDACZ;AAAA,oBACC,oBAAC,OAAI,OAAM,gBACT,8BAAC,UAAK,WAAU,kDACb,yBAAe,UAAU,GAC5B,GACF;AAAA,MAED,oBACC,oBAAC,OAAI,OAAM,aACT,8BAAC,UAAK,WAAU,kDACb,4BACH,GACF;AAAA,MAED,UACC,oBAAC,OAAI,OAAM,QACT,8BAAC,UAAK,WAAU,8BACb,yBAAe,MAAM,GACxB,GACF;AAAA,OAEJ;AAAA,IAGD;AAAA,KACH;AAEJ;","names":[]}

package/dist/dashboard/(bookings)/bookings/[bookingId]/_components/booking-split.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const STATUS = {
+  paid: { label: "Paid", cls: "bg-[var(--success-bg)] text-[var(--success)]" },
+  pending: {
+    label: "Pending",
+    cls: "bg-[var(--warning-bg)] text-[var(--warning)]"
+  },
+  cancelled: {
+    label: "Out",
+    cls: "bg-[var(--bg-muted)] text-[var(--text-muted)]"
+  }
+};
+function BookingSplit({ split, formatCurrency }) {
+  const { participants, summary } = split;
+  return /* @__PURE__ */ jsxs("div", { className: "max-lg:bg-[var(--bg-subtle)] max-lg:rounded-ios-lg lg:surface overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border-subtle)] px-4 py-3 lg:bg-[var(--bg-subtle)]", children: [
+      /* @__PURE__ */ jsx("h2", { className: "font-semibold text-[var(--text-primary)]", children: "Group split" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-tertiary)]", children: [
+        summary.paidCount,
+        "/",
+        summary.activeCount,
+        " paid"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: "Collected" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--text-primary)]", children: [
+          formatCurrency(summary.paidTotal),
+          " of",
+          " ",
+          formatCurrency(summary.pledgedTotal)
+        ] })
+      ] }),
+      summary.outstanding > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--text-secondary)]", children: "Outstanding" }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-[var(--warning)]", children: formatCurrency(summary.outstanding) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)] pt-1", children: participants.map((p) => {
+        const s = STATUS[p.status];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between gap-3 py-2",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: p.name }),
+                (p.email || p.phone) && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-[var(--text-tertiary)]", children: p.email || p.phone })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: formatCurrency(Number(p.shareAmount)) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${s.cls}`,
+                    children: s.label
+                  }
+                )
+              ] })
+            ]
+          },
+          p.id
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  BookingSplit
+};
+//# sourceMappingURL=booking-split.js.map