@withpotter/pages-bookings 0.13.0-next.101

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

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Download, MessageSquare, QrCode, Users } from "lucide-react";
+import { bookingsApi } from "@withpotter/lib/api/bookings";
+import { Card } from "@withpotter/ui-kit";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailColumns } from "@withpotter/ui-kit/detail-columns";
+import { formatDateTime } from "../_hooks";
+import { BookingLede } from "./booking-lede";
+import { BookingMeta } from "./booking-meta";
+import { BookingMoney } from "./booking-money";
+import { BookingSplit } from "./booking-split";
+import { CancellationNotice } from "./cancellation-notice";
+import { CustomerInfoCard } from "./customer-info-card";
+import { IntakeAnswersCard } from "./intake-answers-card";
+import { SecurityDepositCard } from "./security-deposit-card";
+import { TicketRowActions } from "./ticket-row-actions";
+import { resolveTicketCode } from "@withpotter/lib/ticket-access";
+function BookingDesktopLayout({
+  booking,
+  tickets,
+  statusConfig,
+  formatCurrency,
+  isPaid,
+  bookingAmount,
+  bookingTotal,
+  paidAmount,
+  split,
+  paymentReference,
+  paidAt,
+  allowedTransitions,
+  updatingStatus,
+  showStatusDropdown,
+  setShowStatusDropdown,
+  handleStatusUpdate,
+  bookingSingular,
+  tenant,
+  securityDeposit,
+  depositStatus,
+  onSettleDeposit,
+  onRecordPayment,
+  onChangeResource
+}) {
+  const hasMoney = bookingTotal > 0 || paidAmount > 0 || securityDeposit != null;
+  return /* @__PURE__ */ jsxs(
+    DetailColumns,
+    {
+      desktopOnly: true,
+      aside: /* @__PURE__ */ jsx(
+        CustomerInfoCard,
+        {
+          memberId: booking.memberId ?? void 0,
+          customerName: booking.customerName,
+          customerEmail: booking.customerEmail,
+          customerPhone: booking.customerPhone
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          BookingLede,
+          {
+            booking,
+            bookingAmount,
+            formatCurrency,
+            statusConfig,
+            allowedTransitions,
+            updatingStatus,
+            showStatusDropdown,
+            setShowStatusDropdown,
+            handleStatusUpdate,
+            isPaid,
+            hasMoney,
+            onRecordPayment,
+            onChangeResource
+          }
+        ),
+        booking.type === "event" && booking.contentId && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "w-fit", asChild: true, children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: `/dashboard/bookings/attendees?contentId=${booking.contentId}`,
+            children: [
+              /* @__PURE__ */ jsx(Users, {}),
+              "View attendees"
+            ]
+          }
+        ) }),
+        hasMoney && /* @__PURE__ */ jsx(
+          BookingMoney,
+          {
+            total: bookingTotal,
+            paidAmount,
+            isPaid,
+            paymentReference,
+            paidAt,
+            formatCurrency,
+            formatDateTime,
+            children: securityDeposit != null && depositStatus && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-3", children: /* @__PURE__ */ jsx(
+              SecurityDepositCard,
+              {
+                amount: securityDeposit,
+                status: depositStatus,
+                formatCurrency,
+                onSettle: onSettleDeposit
+              }
+            ) })
+          }
+        ),
+        split && split.participants.length > 0 && /* @__PURE__ */ jsx(BookingSplit, { split, formatCurrency }),
+        /* @__PURE__ */ jsx(CancellationNotice, { metadata: booking.metadata }),
+        /* @__PURE__ */ jsx(IntakeAnswersCard, { metadata: booking.metadata }),
+        booking.customerNote && /* @__PURE__ */ jsxs(Card, { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-[var(--text-primary)]", children: "What they told you" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "mt-1 shrink-0 text-[var(--text-tertiary)]" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: booking.customerNote })
+          ] })
+        ] }),
+        booking.type === "event" && tickets.length > 0 && /* @__PURE__ */ jsxs(Card, { padding: "none", className: "overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("h2", { className: "text-sm font-medium text-[var(--text-primary)]", 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(--text-secondary)] transition-colors hover:text-[var(--text-primary)]",
+                children: [
+                  /* @__PURE__ */ jsx(Download, {}),
+                  "Download all"
+                ]
+              }
+            )
+          ] }),
+          /* @__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: "flex items-center gap-3 px-4 py-3",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    QrCode,
+                    {
+                      className: ticket.checkedInAt ? "size-5 text-[var(--success)]" : ticket.status === "cancelled" ? "size-5 text-[var(--text-muted)]" : "size-5 text-[var(--text-tertiary)]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: [
+                      "Ticket ",
+                      idx + 1,
+                      " of ",
+                      tickets.length,
+                      ticket.attendeeName && /* @__PURE__ */ jsxs("span", { className: "font-normal text-[var(--text-tertiary)]", children: [
+                        " \u2014 ",
+                        ticket.attendeeName
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("p", { className: "font-mono text-xs text-[var(--text-muted)]", children: [
+                      ticketCode ?? "Issued soon",
+                      ticket.seatLabel && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-[var(--text-secondary)]", children: [
+                        "Seat ",
+                        ticket.seatLabel
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      TicketRowActions,
+                      {
+                        tenantSlug: tenant?.slug,
+                        bookingId: booking.id,
+                        ticketId: ticket.id,
+                        ticketCode,
+                        className: "mt-1"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[var(--text-tertiary)]", children: ticket.checkedInAt ? "Checked in" : ticket.status === "cancelled" ? "Cancelled" : "Not used" })
+                ]
+              },
+              ticket.id
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx(BookingMeta, { booking, bookingSingular })
+      ]
+    }
+  );
+}
+export {
+  BookingDesktopLayout
+};
+//# sourceMappingURL=booking-desktop-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-desktop-layout.tsx"],"sourcesContent":["import Link from 'next/link';\nimport { Download, MessageSquare, QrCode, Users } from 'lucide-react';\nimport { bookingsApi } from '@withpotter/lib/api/bookings';\nimport { Card } from '@withpotter/ui-kit';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { DetailColumns } from '@withpotter/ui-kit/detail-columns';\nimport { formatDateTime } from '../_hooks';\nimport { BookingLede } from './booking-lede';\nimport { BookingMeta } from './booking-meta';\nimport { BookingMoney } from './booking-money';\nimport { BookingSplit } from './booking-split';\nimport { CancellationNotice } from './cancellation-notice';\nimport { CustomerInfoCard } from './customer-info-card';\nimport { IntakeAnswersCard } from './intake-answers-card';\nimport { SecurityDepositCard } from './security-deposit-card';\nimport { TicketRowActions } from './ticket-row-actions';\nimport type { BookingLayoutProps } from './booking-layout-props';\nimport { resolveTicketCode } from '@withpotter/lib/ticket-access';\n\n/**\n * The booking, read top to bottom: what it is, what it owes, what was said\n * about it, and — in the small type at the bottom — where it came from.\n *\n * WHAT THIS PAGE USED TO BE. Four chips (two of them provenance wearing status\n * treatment), a card headed \"Appointment Details\" whose first element repeated\n * the reference number under an eyebrow reading APPOINTMENT, Date and Time as\n * labelled form fields, a Payment card containing the single word \"Unpaid\", and\n * a sidebar card called \"Info\" whose seven rows were the page saying itself\n * again. The reference number appeared three times. The customer's email\n * appeared twice. Nothing on the screen was the size of what it was worth.\n *\n * Every section is a `Card` now rather than a hand-rolled panel with a tinted\n * header band — the band was the reason each section read as heavier than the\n * fact inside it.\n */\nexport function BookingDesktopLayout({\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  depositStatus,\n  onSettleDeposit,\n  onRecordPayment,\n  onChangeResource,\n}: BookingLayoutProps) {\n  /**\n   * Is there money on this booking at all?\n   *\n   * A free class, a table held with no deposit, a viewing: nothing is owed and\n   * nothing was taken, and a Payment card on one of those is a heading over a\n   * blank. The deposit panel counts as money even when the booking itself is\n   * free, because a deposit is the thing being held.\n   */\n  const hasMoney =\n    bookingTotal > 0 || paidAmount > 0 || securityDeposit != null;\n\n  return (\n    <DetailColumns\n      desktopOnly\n      aside={\n        <CustomerInfoCard\n          memberId={booking.memberId ?? undefined}\n          customerName={booking.customerName}\n          customerEmail={booking.customerEmail}\n          customerPhone={booking.customerPhone}\n        />\n      }\n    >\n      <BookingLede\n        booking={booking}\n        bookingAmount={bookingAmount}\n        formatCurrency={formatCurrency}\n        statusConfig={statusConfig}\n        allowedTransitions={allowedTransitions}\n        updatingStatus={updatingStatus}\n        showStatusDropdown={showStatusDropdown}\n        setShowStatusDropdown={setShowStatusDropdown}\n        handleStatusUpdate={handleStatusUpdate}\n        isPaid={isPaid}\n        hasMoney={hasMoney}\n        onRecordPayment={onRecordPayment}\n        onChangeResource={onChangeResource}\n      />\n\n      {/* The attendee list is a place, not a state, so it is a link and it\n          lives with the booking rather than in the chip row. */}\n      {booking.type === 'event' && booking.contentId && (\n        <Button variant=\"secondary\" className=\"w-fit\" asChild>\n          <Link\n            href={`/dashboard/bookings/attendees?contentId=${booking.contentId}`}\n          >\n            <Users />\n            View attendees\n          </Link>\n        </Button>\n      )}\n\n      {hasMoney && (\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          {securityDeposit != null && depositStatus && (\n            <div className=\"border-t border-[var(--border-subtle)] pt-3\">\n              <SecurityDepositCard\n                amount={securityDeposit}\n                status={depositStatus}\n                formatCurrency={formatCurrency}\n                onSettle={onSettleDeposit}\n              />\n            </div>\n          )}\n        </BookingMoney>\n      )}\n\n      {split && split.participants.length > 0 && (\n        <BookingSplit split={split} formatCurrency={formatCurrency} />\n      )}\n\n      <CancellationNotice metadata={booking.metadata} />\n\n      <IntakeAnswersCard metadata={booking.metadata} />\n\n      {booking.customerNote && (\n        <Card className=\"space-y-3\">\n          <h2 className=\"text-sm font-medium text-[var(--text-primary)]\">\n            What they told you\n          </h2>\n          <div className=\"flex items-start gap-3\">\n            <MessageSquare className=\"mt-1 shrink-0 text-[var(--text-tertiary)]\" />\n            <p className=\"text-sm text-[var(--text-secondary)]\">\n              {booking.customerNote}\n            </p>\n          </div>\n        </Card>\n      )}\n\n      {booking.type === 'event' && tickets.length > 0 && (\n        <Card padding=\"none\" className=\"overflow-hidden\">\n          <div className=\"flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3\">\n            <h2 className=\"text-sm font-medium text-[var(--text-primary)]\">\n              Tickets ({tickets.length})\n            </h2>\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(--text-secondary)] transition-colors hover:text-[var(--text-primary)]\"\n              >\n                <Download />\n                Download all\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=\"flex items-center gap-3 px-4 py-3\"\n                >\n                  <QrCode\n                    className={\n                      ticket.checkedInAt\n                        ? 'size-5 text-[var(--success)]'\n                        : ticket.status === 'cancelled'\n                          ? 'size-5 text-[var(--text-muted)]'\n                          : 'size-5 text-[var(--text-tertiary)]'\n                    }\n                  />\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"text-sm font-medium text-[var(--text-primary)]\">\n                      Ticket {idx + 1} of {tickets.length}\n                      {ticket.attendeeName && (\n                        <span className=\"font-normal text-[var(--text-tertiary)]\">\n                          {' — '}\n                          {ticket.attendeeName}\n                        </span>\n                      )}\n                    </p>\n                    <p className=\"font-mono text-xs text-[var(--text-muted)]\">\n                      {ticketCode ?? 'Issued soon'}\n                      {ticket.seatLabel && (\n                        <span className=\"ml-2 text-[var(--text-secondary)]\">\n                          Seat {ticket.seatLabel}\n                        </span>\n                      )}\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                  <span className=\"shrink-0 text-xs text-[var(--text-tertiary)]\">\n                    {ticket.checkedInAt\n                      ? 'Checked in'\n                      : ticket.status === 'cancelled'\n                        ? 'Cancelled'\n                        : 'Not used'}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        </Card>\n      )}\n\n      <BookingMeta booking={booking} bookingSingular={bookingSingular} />\n    </DetailColumns>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=booking-layout-props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,189 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { ChevronDown, CreditCard, Video } from "lucide-react";
+import { Avatar, Card } from "@withpotter/ui-kit";
+import { joinLabelOf, meetingLinkOf } from "@withpotter/lib/booking-meeting-link";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { useBookingStatusConfig, formatFullDate, formatTime } from "../_hooks";
+function BookingLede({
+  booking,
+  bookingAmount,
+  formatCurrency,
+  statusConfig,
+  allowedTransitions,
+  updatingStatus,
+  showStatusDropdown,
+  setShowStatusDropdown,
+  handleStatusUpdate,
+  isPaid,
+  hasMoney,
+  onRecordPayment,
+  onChangeResource
+}) {
+  const statuses = useBookingStatusConfig();
+  const canChange = allowedTransitions.length > 0;
+  const time = booking.startTime ? `${formatTime(booking.startTime)}${booking.endTime ? ` \u2013 ${formatTime(booking.endTime)}` : ""}` : null;
+  const facts = [];
+  if (booking.content) {
+    facts.push({
+      key: "service",
+      label: "Service",
+      value: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: `/dashboard/catalog/${booking.content.id}`,
+          className: "text-[var(--text-primary)] underline-offset-2 hover:underline",
+          children: booking.content.title
+        }
+      )
+    });
+  }
+  if (booking.resourceName || onChangeResource) {
+    facts.push({
+      key: "with",
+      label: "With",
+      value: onChangeResource ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onChangeResource,
+          className: "flex items-center gap-2 rounded-lg text-left underline-offset-2 transition-transform duration-[var(--motion-fast)] ease-out hover:underline active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+          children: booking.resourceName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Avatar, { name: booking.resourceName, size: "xs" }),
+            booking.resourceName
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-[var(--text-link)]", children: "Assign someone" })
+        }
+      ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { name: booking.resourceName ?? "", size: "xs" }),
+        booking.resourceName
+      ] })
+    });
+  }
+  const meetingLink = meetingLinkOf(booking);
+  if (meetingLink) {
+    facts.push({
+      key: "join",
+      label: "Join",
+      value: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: meetingLink,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 rounded-lg text-[var(--text-link)] underline-offset-2 transition-transform duration-[var(--motion-fast)] ease-out hover:underline active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+          children: [
+            /* @__PURE__ */ jsx(Video, { className: "size-4" }),
+            joinLabelOf(meetingLink)
+          ]
+        }
+      )
+    });
+  }
+  if (bookingAmount > 0) {
+    facts.push({
+      key: "price",
+      label: "Price",
+      value: formatCurrency(bookingAmount)
+    });
+  }
+  if (booking.quantity && booking.quantity > 1) {
+    facts.push({
+      key: "guests",
+      label: "Guests",
+      value: String(booking.quantity)
+    });
+  }
+  const partySize = booking.schedulePayload?.partySize;
+  if (partySize != null) {
+    facts.push({
+      key: "party",
+      label: "Party size",
+      value: String(partySize)
+    });
+  }
+  const dropoff = booking.schedulePayload?.dropoffDate;
+  if (dropoff != null) {
+    facts.push({
+      key: "dropoff",
+      label: "Drop-off",
+      value: formatFullDate(String(dropoff))
+    });
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => canChange && setShowStatusDropdown(!showStatusDropdown),
+            disabled: !canChange,
+            className: `inline-flex items-center gap-2 rounded-lg ${canChange ? "cursor-pointer" : "cursor-default"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                StatusBadge,
+                {
+                  size: "md",
+                  status: booking.status,
+                  label: statusConfig.label,
+                  icon: statusConfig.icon
+                }
+              ),
+              canChange && /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-[var(--text-tertiary)]" })
+            ]
+          }
+        ),
+        showStatusDropdown && /* @__PURE__ */ jsx("div", { className: "absolute z-10 mt-1 w-48 rounded-lg border border-[var(--border-default)] bg-[var(--bg-base)] py-1 shadow-lg", children: allowedTransitions.map((status) => {
+          const config = statuses(booking?.type)[status];
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleStatusUpdate(status),
+              disabled: updatingStatus,
+              className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--interactive-hover)]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: config.color, children: config.icon }),
+                config.label
+              ]
+            },
+            status
+          );
+        }) })
+      ] }),
+      hasMoney && (onRecordPayment && !isPaid ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRecordPayment,
+          className: "rounded-lg transition-transform duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+          "aria-label": "Record a payment",
+          children: /* @__PURE__ */ jsx(StatusBadge, { size: "md", status: "unpaid", icon: /* @__PURE__ */ jsx(CreditCard, {}) })
+        }
+      ) : /* @__PURE__ */ jsx(
+        StatusBadge,
+        {
+          size: "md",
+          status: isPaid ? "paid" : "unpaid",
+          icon: /* @__PURE__ */ jsx(CreditCard, {})
+        }
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-[var(--text-primary)]", children: formatFullDate(booking.date) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: [
+        time ?? "No time set",
+        booking.durationMinutes ? ` \xB7 ${booking.durationMinutes} minutes` : ""
+      ] })
+    ] }),
+    facts.length > 0 && /* @__PURE__ */ jsx("dl", { className: "grid gap-3 border-t border-[var(--border-subtle)] pt-4 sm:grid-cols-2", children: facts.map((fact) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-xs text-[var(--text-tertiary)]", children: fact.label }),
+      /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-[var(--text-primary)]", children: fact.value })
+    ] }, fact.key)) })
+  ] });
+}
+export {
+  BookingLede
+};
+//# sourceMappingURL=booking-lede.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-lede.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport type { ReactNode } from 'react';\nimport { ChevronDown, CreditCard, Video } from 'lucide-react';\nimport { Avatar, Card } from '@withpotter/ui-kit';\nimport { joinLabelOf, meetingLinkOf } from '@withpotter/lib/booking-meeting-link';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport type { BookingItem } from '@withpotter/lib/api/types';\nimport { useBookingStatusConfig, formatFullDate, formatTime } from '../_hooks';\nimport type { BookingStatus } from '../_hooks';\n\n/**\n * What this booking IS, in the order somebody asks it.\n *\n * The page used to open on four chips and a card called \"Appointment Details\"\n * whose first element was a tile reading APPOINTMENT / Appointment #BKMT75KB8WCAX\n * / 60 minutes — an eyebrow label naming the page you are on, the reference\n * number for the third time on one screen, and a blue icon in a rounded square\n * standing in for a service nobody had chosen. Under it, Date and Time as two\n * labelled form fields, as though the record were being filled in rather than\n * read.\n *\n * A booking answers WHEN, WHAT, WITH WHOM, and WHERE IT STANDS. So the day and\n * the hour are the biggest thing on the page, the state sits above them where\n * the chips used to be — two badges, not four, because a mode and an origin are\n * facts about how it arrived, not states it is in — and the service, the person\n * serving it and the price are one row of facts underneath.\n */\nexport function BookingLede({\n  booking,\n  bookingAmount,\n  formatCurrency,\n  statusConfig,\n  allowedTransitions,\n  updatingStatus,\n  showStatusDropdown,\n  setShowStatusDropdown,\n  handleStatusUpdate,\n  isPaid,\n  hasMoney,\n  onRecordPayment,\n  onChangeResource,\n}: {\n  booking: BookingItem;\n  bookingAmount: number;\n  formatCurrency: (n: number) => string;\n  statusConfig: { label: string; icon: ReactNode };\n  allowedTransitions: BookingStatus[];\n  updatingStatus: boolean;\n  showStatusDropdown: boolean;\n  setShowStatusDropdown: (v: boolean) => void;\n  handleStatusUpdate: (status: BookingStatus) => void;\n  isPaid: boolean;\n  /**\n   * Whether any money is attached to this booking at all — a price, something\n   * already taken, or a deposit being held. The same test the Payment card\n   * below is drawn by.\n   */\n  hasMoney: boolean;\n  /** Opens the record-payment sheet. Absent when there is nothing to record. */\n  onRecordPayment?: () => void;\n  /**\n   * Opens the assign/change-resource sheet.\n   *\n   * Absent where the booking cannot take one — an event with a ticket, a\n   * booking whose service was deleted — so the row stays the plain fact it is\n   * everywhere else.\n   */\n  onChangeResource?: () => void;\n}) {\n  const statuses = useBookingStatusConfig();\n  const canChange = allowedTransitions.length > 0;\n\n  const time = booking.startTime\n    ? `${formatTime(booking.startTime)}${booking.endTime ? ` – ${formatTime(booking.endTime)}` : ''}`\n    : null;\n\n  const facts: { key: string; label: string; value: ReactNode }[] = [];\n\n  if (booking.content) {\n    facts.push({\n      key: 'service',\n      label: 'Service',\n      value: (\n        <Link\n          href={`/dashboard/catalog/${booking.content.id}`}\n          className=\"text-[var(--text-primary)] underline-offset-2 hover:underline\"\n        >\n          {booking.content.title}\n        </Link>\n      ),\n    });\n  }\n  /**\n   * WHO IT IS WITH, and — new — who it could be with instead.\n   *\n   * This was a name and a face with nothing to press, and the row was absent\n   * altogether when nobody was on it. Both were dead ends: a booking taken\n   * without a therapist could never be given one, and one taken against the\n   * wrong one could never be corrected, on any screen in the app. So the row\n   * shows even when it is empty, as long as the booking is one that can take\n   * somebody, and the name is the control.\n   */\n  if (booking.resourceName || onChangeResource) {\n    facts.push({\n      key: 'with',\n      label: 'With',\n      value: onChangeResource ? (\n        <button\n          type=\"button\"\n          onClick={onChangeResource}\n          className=\"flex items-center gap-2 rounded-lg text-left underline-offset-2 transition-transform duration-[var(--motion-fast)] ease-out hover:underline active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]\"\n        >\n          {booking.resourceName ? (\n            <>\n              <Avatar name={booking.resourceName} size=\"xs\" />\n              {booking.resourceName}\n            </>\n          ) : (\n            <span className=\"text-[var(--text-link)]\">Assign someone</span>\n          )}\n        </button>\n      ) : (\n        <span className=\"flex items-center gap-2\">\n          <Avatar name={booking.resourceName ?? ''} size=\"xs\" />\n          {booking.resourceName}\n        </span>\n      ),\n    });\n  }\n  /**\n   * The room, when there is one.\n   *\n   * Calendar sync mints a Meet room for a booking and writes it to\n   * `metadata.meetingLink`, the customer gets it in their confirmation and on\n   * the calendar invite — and the merchant, looking at the appointment in the\n   * dashboard at two minutes to the hour, had nowhere to see it. The one\n   * person who has to be in the call was the only one not told where it is.\n   *\n   * A fact about the appointment, sitting with the others, and the link IS the\n   * control: at four o'clock the act is to join.\n   */\n  const meetingLink = meetingLinkOf(booking);\n  if (meetingLink) {\n    facts.push({\n      key: 'join',\n      label: 'Join',\n      value: (\n        <a\n          href={meetingLink}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex items-center gap-2 rounded-lg text-[var(--text-link)] underline-offset-2 transition-transform duration-[var(--motion-fast)] ease-out hover:underline active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]\"\n        >\n          <Video className=\"size-4\" />\n          {joinLabelOf(meetingLink)}\n        </a>\n      ),\n    });\n  }\n  if (bookingAmount > 0) {\n    facts.push({\n      key: 'price',\n      label: 'Price',\n      value: formatCurrency(bookingAmount),\n    });\n  }\n  if (booking.quantity && booking.quantity > 1) {\n    facts.push({\n      key: 'guests',\n      label: 'Guests',\n      value: String(booking.quantity),\n    });\n  }\n  const partySize = booking.schedulePayload?.partySize;\n  if (partySize != null) {\n    facts.push({\n      key: 'party',\n      label: 'Party size',\n      value: String(partySize),\n    });\n  }\n  const dropoff = booking.schedulePayload?.dropoffDate;\n  if (dropoff != null) {\n    facts.push({\n      key: 'dropoff',\n      label: 'Drop-off',\n      value: formatFullDate(String(dropoff)),\n    });\n  }\n\n  return (\n    <Card className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {/* The state, and the one control that changes it. A status you can\n            advance is a status worth pressing, so the badge IS the trigger. */}\n        <div className=\"relative\">\n          <button\n            type=\"button\"\n            onClick={() =>\n              canChange && setShowStatusDropdown(!showStatusDropdown)\n            }\n            disabled={!canChange}\n            className={`inline-flex items-center gap-2 rounded-lg ${canChange ? 'cursor-pointer' : 'cursor-default'}`}\n          >\n            <StatusBadge\n              size=\"md\"\n              status={booking.status}\n              label={statusConfig.label}\n              icon={statusConfig.icon}\n            />\n            {canChange && (\n              <ChevronDown className=\"size-4 text-[var(--text-tertiary)]\" />\n            )}\n          </button>\n          {showStatusDropdown && (\n            <div className=\"absolute z-10 mt-1 w-48 rounded-lg border border-[var(--border-default)] bg-[var(--bg-base)] py-1 shadow-lg\">\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=\"flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover: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        {/* UNPAID IS A CLAIM, and it needs money behind it.\n         *\n         * This badge was unconditional, so a free appointment — no price, no\n         * deposit, nothing ever taken — opened on an amber \"Unpaid\" next to\n         * its status, and the Payment card that would have explained it is\n         * deliberately absent on exactly those bookings (see `hasMoney` in the\n         * layout: a Payment card over a free class is a heading over a blank).\n         * A state nobody can clear, over a debt that does not exist. John: no\n         * way to change unpaid to paid — there was nothing to change, and the\n         * badge said otherwise.\n         *\n         * When there IS a balance, the badge is the way to settle it. Taking\n         * cash at the desk lived only in the ⋯ menu, three items down, while\n         * the word describing the problem sat inert at the top of the page. */}\n        {hasMoney &&\n          (onRecordPayment && !isPaid ? (\n            <button\n              type=\"button\"\n              onClick={onRecordPayment}\n              className=\"rounded-lg transition-transform duration-[var(--motion-fast)] ease-out active:scale-[var(--motion-press-scale)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]\"\n              aria-label=\"Record a payment\"\n            >\n              <StatusBadge size=\"md\" status=\"unpaid\" icon={<CreditCard />} />\n            </button>\n          ) : (\n            <StatusBadge\n              size=\"md\"\n              status={isPaid ? 'paid' : 'unpaid'}\n              icon={<CreditCard />}\n            />\n          ))}\n      </div>\n\n      {/* WHEN, at the size of the question. */}\n      <div>\n        <p className=\"text-xl font-semibold text-[var(--text-primary)]\">\n          {formatFullDate(booking.date)}\n        </p>\n        <p className=\"mt-1 text-sm text-[var(--text-secondary)]\">\n          {time ?? 'No time set'}\n          {booking.durationMinutes\n            ? ` · ${booking.durationMinutes} minutes`\n            : ''}\n        </p>\n      </div>\n\n      {facts.length > 0 && (\n        <dl className=\"grid gap-3 border-t border-[var(--border-subtle)] pt-4 sm:grid-cols-2\">\n          {facts.map((fact) => (\n            <div key={fact.key}>\n              <dt className=\"text-xs text-[var(--text-tertiary)]\">\n                {fact.label}\n              </dt>\n              <dd className=\"mt-1 text-sm text-[var(--text-primary)]\">\n                {fact.value}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,38 @@
+"use client";
+import { Fragment, jsxs } from "react/jsx-runtime";
+import { formatDateTime } from "../_hooks";
+import {
+  BOOKING_MODE_LABELS,
+  BOOKING_ORIGIN_LABELS
+} from "./booking-constants";
+function BookingMeta({
+  booking,
+  bookingSingular
+}) {
+  const mode = BOOKING_MODE_LABELS[booking.bookingMode || "scheduled"] || "Scheduled";
+  const origin = booking.origin ? BOOKING_ORIGIN_LABELS[booking.origin] || booking.origin : null;
+  const parts = [
+    `${mode.toLowerCase()}${origin ? ` from the ${origin.toLowerCase()}` : ""}`,
+    booking.actorType ? `by ${booking.actorType}` : null,
+    booking.createdAt ? `on ${formatDateTime(booking.createdAt)}` : null
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+    /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+      bookingSingular,
+      " #",
+      booking.bookingNumber
+    ] }),
+    parts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " \xB7 Booked ",
+      parts.join(" ")
+    ] }),
+    booking.updatedAt && booking.updatedAt !== booking.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " \xB7 Last changed ",
+      formatDateTime(booking.updatedAt)
+    ] })
+  ] });
+}
+export {
+  BookingMeta
+};
+//# sourceMappingURL=booking-meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/dashboard/%28bookings%29/bookings/%5BbookingId%5D/_components/booking-meta.tsx"],"sourcesContent":["'use client';\n\nimport type { BookingItem } from '@withpotter/lib/api/types';\nimport { formatDateTime } from '../_hooks';\nimport {\n  BOOKING_MODE_LABELS,\n  BOOKING_ORIGIN_LABELS,\n} from './booking-constants';\n\n/**\n * How this booking came to exist — one line, at the bottom, in the small type.\n *\n * It was a card in the sidebar called \"Info\", carrying seven rows: the booking\n * number (which was also the page title, and the heading of the first card),\n * the type (which is the word the page is named after), the mode and the origin\n * (both of which were ALSO chips at the top of the page), who made it, and two\n * timestamps. Six of the seven rows were the screen repeating itself, in a\n * panel taking the same weight as the customer.\n *\n * None of it is worthless — \"who typed this in, from where, when\" is exactly\n * what you want when something looks wrong — but it is provenance, and\n * provenance goes in the footer. So it is a sentence: the reference, then how\n * it arrived, then who and when.\n */\nexport function BookingMeta({\n  booking,\n  bookingSingular,\n}: {\n  booking: BookingItem;\n  bookingSingular: string;\n}) {\n  const mode =\n    BOOKING_MODE_LABELS[booking.bookingMode || 'scheduled'] || 'Scheduled';\n  const origin = booking.origin\n    ? BOOKING_ORIGIN_LABELS[booking.origin] || booking.origin\n    : null;\n\n  const parts = [\n    `${mode.toLowerCase()}${origin ? ` from the ${origin.toLowerCase()}` : ''}`,\n    booking.actorType ? `by ${booking.actorType}` : null,\n    booking.createdAt ? `on ${formatDateTime(booking.createdAt)}` : null,\n  ].filter(Boolean);\n\n  return (\n    <p className=\"text-xs text-[var(--text-tertiary)]\">\n      <span className=\"font-mono\">\n        {bookingSingular} #{booking.bookingNumber}\n      </span>\n      {parts.length > 0 && <> · Booked {parts.join(' ')}</>}\n      {/* Only when it has actually been touched since. \"Updated\" printing the\n          creation timestamp a row under \"Created\" was two facts pretending to\n          be two facts. */}\n      {booking.updatedAt && booking.updatedAt !== booking.createdAt && (\n        <> · Last changed {formatDateTime(booking.updatedAt)}</>\n      )}\n    </p>\n  );\n}\n"],"mappings":";AA6CM,SAGqB,UAHrB;AA1CN,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAiBA,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,QAAM,OACJ,oBAAoB,QAAQ,eAAe,WAAW,KAAK;AAC7D,QAAM,SAAS,QAAQ,SACnB,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,SACjD;AAEJ,QAAM,QAAQ;AAAA,IACZ,GAAG,KAAK,YAAY,CAAC,GAAG,SAAS,aAAa,OAAO,YAAY,CAAC,KAAK,EAAE;AAAA,IACzE,QAAQ,YAAY,MAAM,QAAQ,SAAS,KAAK;AAAA,IAChD,QAAQ,YAAY,MAAM,eAAe,QAAQ,SAAS,CAAC,KAAK;AAAA,EAClE,EAAE,OAAO,OAAO;AAEhB,SACE,qBAAC,OAAE,WAAU,uCACX;AAAA,yBAAC,UAAK,WAAU,aACb;AAAA;AAAA,MAAgB;AAAA,MAAG,QAAQ;AAAA,OAC9B;AAAA,IACC,MAAM,SAAS,KAAK,iCAAE;AAAA;AAAA,MAAW,MAAM,KAAK,GAAG;AAAA,OAAE;AAAA,IAIjD,QAAQ,aAAa,QAAQ,cAAc,QAAQ,aAClD,iCAAE;AAAA;AAAA,MAAiB,eAAe,QAAQ,SAAS;AAAA,OAAE;AAAA,KAEzD;AAEJ;","names":[]}