@withpotter/pages-bookings 0.13.0-next.101

package/dist/dashboard/(bookings)/resources/_components/resource-form.js

@@ -0,0 +1,420 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import {
+  kindToResourceType
+} from "@withpotter/lib/resource-types";
+import { ScheduleEditor, getDefaultSchedule } from "./schedule-editor";
+import { availabilityWords } from "../_lib/shapes";
+import { Button } from "@withpotter/ui-kit/button";
+import { FormDialog } from "@withpotter/ui-kit/form-dialog";
+import { ErrorBanner } from "@withpotter/ui-kit/error-banner";
+import { Input, NumberField, Select } from "@withpotter/ui-kit";
+import { ImageUpload } from "@withpotter/components/image-upload";
+import { guessTimezone } from "../_lib/schedule-timezone";
+import { ScheduleTimezoneField } from "./schedule-timezone-field";
+import { useBusinessLocations } from "@withpotter/lib/use-business-locations";
+import { Textarea } from "@withpotter/ui-kit";
+const FORM_ID = "resource-form";
+function ResourceForm({
+  open,
+  category,
+  categories,
+  resource,
+  onSave,
+  onClose
+}) {
+  const isEditing = !!resource;
+  const [categoryId, setCategoryId] = useState(category.id);
+  const groups = categories ?? [];
+  const active = groups.find((c) => c.id === categoryId) ?? category;
+  const { byTheNight } = availabilityWords(active.kind);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [role, setRole] = useState("");
+  const [skills, setSkills] = useState("");
+  const [schedule, setSchedule] = useState(getDefaultSchedule());
+  const [defaultDuration, setDefaultDuration] = useState(60);
+  const [bufferMinutes, setBufferMinutes] = useState(0);
+  const [advanceBookingDays, setAdvanceBookingDays] = useState(30);
+  const [maxBookingsPerSlot, setMaxBookingsPerSlot] = useState(1);
+  const [price, setPrice] = useState("");
+  const [locationId, setLocationId] = useState("");
+  const [timezone, setTimezone] = useState(guessTimezone);
+  const [saving, setSaving] = useState(false);
+  const { locations, isMultiSite } = useBusinessLocations();
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (resource) {
+      setName(resource.name);
+      setDescription(resource.description || "");
+      setImageUrl(resource.imageUrl || "");
+      setRole(
+        typeof resource.metadata?.role === "string" ? resource.metadata.role : ""
+      );
+      setSkills(resource.skills?.join(", ") || "");
+      setSchedule(resource.schedule || getDefaultSchedule());
+      setDefaultDuration(resource.defaultDurationMinutes || 60);
+      setBufferMinutes(resource.bufferMinutes || 0);
+      setAdvanceBookingDays(resource.advanceBookingDays || 30);
+      setMaxBookingsPerSlot(resource.maxBookingsPerSlot || 1);
+      setPrice(resource.price != null ? String(resource.price) : "");
+      setLocationId(resource.locationId ?? "");
+      setTimezone(resource.timezone || guessTimezone());
+      setCategoryId(resource.categoryId ?? category.id);
+    } else {
+      setName("");
+      setDescription("");
+      setImageUrl("");
+      setRole("");
+      setSkills("");
+      setSchedule(getDefaultSchedule());
+      setDefaultDuration(60);
+      setBufferMinutes(0);
+      setAdvanceBookingDays(30);
+      setMaxBookingsPerSlot(active.kind === "space" ? 10 : 1);
+      setPrice("");
+      setLocationId("");
+      setTimezone(guessTimezone());
+      setCategoryId(category.id);
+    }
+    setError(null);
+  }, [resource, open, category.id, active.kind]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Name is required");
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const metadata = { ...resource?.metadata ?? {} };
+      if (role.trim()) metadata.role = role.trim();
+      else delete metadata.role;
+      const data = {
+        name: name.trim(),
+        categoryId,
+        type: kindToResourceType(active.kind),
+        description: description.trim() || void 0,
+        imageUrl: imageUrl.trim() || void 0,
+        skills: skills ? skills.split(",").map((s) => s.trim()).filter(Boolean) : void 0,
+        metadata,
+        schedule,
+        timezone,
+        defaultDurationMinutes: defaultDuration,
+        bufferMinutes,
+        advanceBookingDays,
+        maxBookingsPerSlot,
+        price: price ? Number(price) : void 0,
+        // Omitted rather than sent empty: the API reads absence as "the main
+        // location", which is the right default and not the same instruction
+        // as an empty string.
+        ...locationId ? { locationId } : {}
+      };
+      await onSave(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+  if (!open) return null;
+  const nameLabel = active.kind === "person" ? "Full name" : active.kind === "space" ? "Space name" : active.kind === "unit" ? "Unit name" : "Equipment name";
+  const namePlaceholder = active.kind === "person" ? "e.g., Dr. Sarah Johnson" : active.kind === "space" ? "e.g., Studio A" : active.kind === "unit" ? "e.g., Ocean View Suite" : "e.g., Projector HD-1";
+  return (
+    /* FormDialog, not a right-edge slide-over. The panel this drew is the one
+       FormDialog was written to delete — five surfaces had each hand-rolled the
+       same edge panel, and none of them closed on Escape, trapped Tab or
+       restored focus. `lg` because the body genuinely uses the width: a
+       two-column grid and the week's schedule editor. */
+    /* @__PURE__ */ jsx(
+      FormDialog,
+      {
+        title: isEditing ? `Edit ${active.label.toLowerCase()}` : `Add ${active.label.toLowerCase()}`,
+        size: "lg",
+        onClose,
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", form: FORM_ID, loading: saving, children: saving ? "Saving\u2026" : isEditing ? "Save changes" : `Add ${active.label.toLowerCase()}` })
+        ] }),
+        children: /* @__PURE__ */ jsxs("form", { id: FORM_ID, onSubmit: handleSubmit, className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
+            active.kind === "person" && /* @__PURE__ */ jsx(
+              ImageUpload,
+              {
+                value: imageUrl || void 0,
+                onChange: (url) => setImageUrl(url ?? ""),
+                label: "Photo",
+                aspectRatio: "square",
+                size: "avatar"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: "resource-name",
+                  className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                  children: nameLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "resource-name",
+                  type: "text",
+                  value: name,
+                  onChange: (e) => setName(e.target.value),
+                  placeholder: namePlaceholder,
+                  className: "w-full"
+                }
+              )
+            ] })
+          ] }),
+          groups.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-group",
+                className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                children: "Group"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                id: "resource-group",
+                value: categoryId,
+                onChange: setCategoryId,
+                options: groups.map((g) => ({
+                  value: g.id,
+                  label: g.labelPlural
+                }))
+              }
+            )
+          ] }),
+          isMultiSite && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-location",
+                className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                children: "Location"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                id: "resource-location",
+                value: locationId,
+                onChange: setLocationId,
+                options: locations.map((l) => ({
+                  value: l.id,
+                  label: l.name
+                })),
+                placeholder: "Main location"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-description",
+                className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                children: "Description"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                id: "resource-description",
+                value: description,
+                onChange: (e) => setDescription(e.target.value),
+                placeholder: "Brief description...",
+                rows: 3,
+                className: "w-full resize-none"
+              }
+            )
+          ] }),
+          active.kind !== "person" && /* @__PURE__ */ jsx(
+            ImageUpload,
+            {
+              value: imageUrl || void 0,
+              onChange: (url) => setImageUrl(url ?? ""),
+              label: "Image",
+              aspectRatio: "video"
+            }
+          ),
+          active.kind === "person" && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-role",
+                className: "mb-2 block text-sm font-medium text-[var(--text-primary)]",
+                children: "Role"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "resource-role",
+                type: "text",
+                value: role,
+                onChange: (e) => setRole(e.target.value),
+                placeholder: "e.g., Physiotherapist",
+                className: "w-full"
+              }
+            )
+          ] }),
+          active.kind === "person" && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-skills",
+                className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                children: "Skills / specialties"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "resource-skills",
+                type: "text",
+                value: skills,
+                onChange: (e) => setSkills(e.target.value),
+                placeholder: "e.g., Coloring, Braids, Styling",
+                className: "w-full"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: "Comma-separated list of skills" })
+          ] }),
+          (active.kind === "space" || active.kind === "equipment") && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "resource-capacity",
+                className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                children: "At once"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NumberField,
+              {
+                id: "resource-capacity",
+                min: 1,
+                decimal: false,
+                value: maxBookingsPerSlot,
+                onChange: (v) => setMaxBookingsPerSlot(v ?? 1),
+                className: "w-full"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--text-tertiary)]", children: "How many bookings can share it" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-default)] pt-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)] mb-4", children: "How it is booked" }),
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 mb-4", children: [
+              !byTheNight && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "resource-duration",
+                    className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                    children: "Duration (minutes)"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NumberField,
+                  {
+                    id: "resource-duration",
+                    min: 5,
+                    decimal: false,
+                    value: defaultDuration,
+                    onChange: (v) => setDefaultDuration(v ?? 5),
+                    className: "w-full"
+                  }
+                )
+              ] }),
+              !byTheNight && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "resource-buffer",
+                    className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                    children: "Gap after (minutes)"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NumberField,
+                  {
+                    id: "resource-buffer",
+                    min: 0,
+                    decimal: false,
+                    value: bufferMinutes,
+                    onChange: (v) => setBufferMinutes(v ?? 0),
+                    className: "w-full"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "resource-advance",
+                    className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                    children: "Booked ahead (days)"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NumberField,
+                  {
+                    id: "resource-advance",
+                    min: 1,
+                    decimal: false,
+                    value: advanceBookingDays,
+                    onChange: (v) => setAdvanceBookingDays(v ?? 1),
+                    className: "w-full"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    htmlFor: "resource-price",
+                    className: "block text-sm font-medium text-[var(--text-primary)] mb-2",
+                    children: byTheNight ? "Price a night" : "Price"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "resource-price",
+                    type: "number",
+                    min: 0,
+                    step: "0.01",
+                    value: price,
+                    onChange: (e) => setPrice(e.target.value),
+                    placeholder: "0.00",
+                    className: "w-full"
+                  }
+                )
+              ] })
+            ] }),
+            !byTheNight && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ScheduleEditor, { schedule, onChange: setSchedule }),
+              /* @__PURE__ */ jsx(ScheduleTimezoneField, { value: timezone, onChange: setTimezone })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ErrorBanner, { children: error })
+        ] })
+      }
+    )
+  );
+}
+export {
+  ResourceForm
+};
+//# sourceMappingURL=resource-form.js.map

package/dist/dashboard/(bookings)/resources/_components/resource-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/resources/_components/resource-form.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect } from 'react';\nimport {\n  kindToResourceType,\n  type Resource,\n  type ResourceCategory,\n  type WeeklySchedule,\n} from '@withpotter/lib/resource-types';\nimport { ScheduleEditor, getDefaultSchedule } from './schedule-editor';\nimport { availabilityWords } from '../_lib/shapes';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { FormDialog } from '@withpotter/ui-kit/form-dialog';\nimport { ErrorBanner } from '@withpotter/ui-kit/error-banner';\nimport { Input, NumberField, Select } from '@withpotter/ui-kit';\nimport { ImageUpload } from '@withpotter/components/image-upload';\nimport { guessTimezone } from '../_lib/schedule-timezone';\nimport { ScheduleTimezoneField } from './schedule-timezone-field';\nimport { useBusinessLocations } from '@withpotter/lib/use-business-locations';\nimport { Textarea } from '@withpotter/ui-kit';\n\n/** The footer's submit button lives outside the <form>, so it points at this. */\nconst FORM_ID = 'resource-form';\n\n// ─── Props ───────────────────────────────────────────────────────────────────\n\ninterface ResourceFormProps {\n  open: boolean;\n  /** The group it lands in unless the merchant picks another. */\n  category: ResourceCategory;\n  /**\n   * Every group, so a business with more than one is asked which.\n   *\n   * The roster creates from the page header now rather than from inside a\n   * group's own screen, so the group is no longer implied by where you pressed.\n   * One group and the question does not exist; two and it must be asked, or\n   * the new court quietly joins the coaches.\n   */\n  categories?: ResourceCategory[];\n  resource?: Resource | null;\n  onSave: (data: Record<string, unknown>) => Promise<void>;\n  onClose: () => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport function ResourceForm({\n  open,\n  category,\n  categories,\n  resource,\n  onSave,\n  onClose,\n}: ResourceFormProps) {\n  const isEditing = !!resource;\n  const [categoryId, setCategoryId] = useState(category.id);\n  const groups = categories ?? [];\n  /** Labels and defaults follow the group actually chosen, not the one passed. */\n  const active = groups.find((c) => c.id === categoryId) ?? category;\n  const { byTheNight } = availabilityWords(active.kind);\n\n  // Form state\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [imageUrl, setImageUrl] = useState('');\n  const [role, setRole] = useState('');\n  const [skills, setSkills] = useState('');\n  const [schedule, setSchedule] =\n    useState<WeeklySchedule>(getDefaultSchedule());\n  const [defaultDuration, setDefaultDuration] = useState(60);\n  const [bufferMinutes, setBufferMinutes] = useState(0);\n  const [advanceBookingDays, setAdvanceBookingDays] = useState(30);\n  const [maxBookingsPerSlot, setMaxBookingsPerSlot] = useState(1);\n  const [price, setPrice] = useState('');\n  const [locationId, setLocationId] = useState('');\n  const [timezone, setTimezone] = useState(guessTimezone);\n  const [saving, setSaving] = useState(false);\n\n  // A court, room or chair sits at one address. Only asked once a second\n  // branch exists — before that there is one answer and the API supplies it.\n  const { locations, isMultiSite } = useBusinessLocations();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (resource) {\n      setName(resource.name);\n      setDescription(resource.description || '');\n      setImageUrl(resource.imageUrl || '');\n      setRole(\n        typeof resource.metadata?.role === 'string'\n          ? resource.metadata.role\n          : '',\n      );\n      setSkills(resource.skills?.join(', ') || '');\n      setSchedule(resource.schedule || getDefaultSchedule());\n      setDefaultDuration(resource.defaultDurationMinutes || 60);\n      setBufferMinutes(resource.bufferMinutes || 0);\n      setAdvanceBookingDays(resource.advanceBookingDays || 30);\n      setMaxBookingsPerSlot(resource.maxBookingsPerSlot || 1);\n      setPrice(resource.price != null ? String(resource.price) : '');\n      setLocationId(resource.locationId ?? '');\n      setTimezone(resource.timezone || guessTimezone());\n      setCategoryId(resource.categoryId ?? category.id);\n    } else {\n      setName('');\n      setDescription('');\n      setImageUrl('');\n      setRole('');\n      setSkills('');\n      setSchedule(getDefaultSchedule());\n      setDefaultDuration(60);\n      setBufferMinutes(0);\n      setAdvanceBookingDays(30);\n      setMaxBookingsPerSlot(active.kind === 'space' ? 10 : 1);\n      setPrice('');\n      setLocationId('');\n      setTimezone(guessTimezone());\n      setCategoryId(category.id);\n    }\n    setError(null);\n  }, [resource, open, category.id, active.kind]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!name.trim()) {\n      setError('Name is required');\n      return;\n    }\n\n    setSaving(true);\n    setError(null);\n\n    try {\n      const metadata = { ...(resource?.metadata ?? {}) };\n      if (role.trim()) metadata.role = role.trim();\n      else delete metadata.role;\n\n      const data = {\n        name: name.trim(),\n        categoryId,\n        type: kindToResourceType(active.kind),\n        description: description.trim() || undefined,\n        imageUrl: imageUrl.trim() || undefined,\n        skills: skills\n          ? skills\n              .split(',')\n              .map((s) => s.trim())\n              .filter(Boolean)\n          : undefined,\n        metadata,\n        schedule,\n        timezone,\n        defaultDurationMinutes: defaultDuration,\n        bufferMinutes,\n        advanceBookingDays,\n        maxBookingsPerSlot,\n        price: price ? Number(price) : undefined,\n        // Omitted rather than sent empty: the API reads absence as \"the main\n        // location\", which is the right default and not the same instruction\n        // as an empty string.\n        ...(locationId ? { locationId } : {}),\n      };\n      await onSave(data);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to save');\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  if (!open) return null;\n\n  // Labels that adapt based on category kind\n  const nameLabel =\n    active.kind === 'person'\n      ? 'Full name'\n      : active.kind === 'space'\n        ? 'Space name'\n        : active.kind === 'unit'\n          ? 'Unit name'\n          : 'Equipment name';\n\n  const namePlaceholder =\n    active.kind === 'person'\n      ? 'e.g., Dr. Sarah Johnson'\n      : active.kind === 'space'\n        ? 'e.g., Studio A'\n        : active.kind === 'unit'\n          ? 'e.g., Ocean View Suite'\n          : 'e.g., Projector HD-1';\n\n  return (\n    /* FormDialog, not a right-edge slide-over. The panel this drew is the one\n       FormDialog was written to delete — five surfaces had each hand-rolled the\n       same edge panel, and none of them closed on Escape, trapped Tab or\n       restored focus. `lg` because the body genuinely uses the width: a\n       two-column grid and the week's schedule editor. */\n    <FormDialog\n      title={\n        isEditing\n          ? `Edit ${active.label.toLowerCase()}`\n          : `Add ${active.label.toLowerCase()}`\n      }\n      size=\"lg\"\n      onClose={onClose}\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={onClose}>\n            Cancel\n          </Button>\n          {/* `form`, because the footer sits outside the <form> element. */}\n          <Button type=\"submit\" form={FORM_ID} loading={saving}>\n            {saving\n              ? 'Saving…'\n              : isEditing\n                ? 'Save changes'\n                : `Add ${active.label.toLowerCase()}`}\n          </Button>\n        </>\n      }\n    >\n      <form id={FORM_ID} onSubmit={handleSubmit} className=\"space-y-4\">\n        {/* THE FACE SITS WITH THE NAME.\n            A person's photo was a full-width dashed zone further down the form,\n            which read as a header across the top of the fields rather than as\n            one of them. It is 80px beside the name now — the shape a staff form\n            takes everywhere a merchant has seen one. A room or a court keeps\n            the wide field lower down, where a picture of a place is a picture\n            of a place. */}\n        <div className=\"flex items-end gap-4\">\n          {active.kind === 'person' && (\n            <ImageUpload\n              value={imageUrl || undefined}\n              onChange={(url) => setImageUrl(url ?? '')}\n              label=\"Photo\"\n              aspectRatio=\"square\"\n              size=\"avatar\"\n            />\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <label\n              htmlFor=\"resource-name\"\n              className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n            >\n              {nameLabel}\n            </label>\n            <Input\n              id=\"resource-name\"\n              type=\"text\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder={namePlaceholder}\n              className=\"w-full\"\n            />\n          </div>\n        </div>\n\n        {/* Which group it joins. One group and there is nothing to ask. */}\n        {groups.length > 1 && (\n          <div>\n            <label\n              htmlFor=\"resource-group\"\n              className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n            >\n              Group\n            </label>\n            <Select\n              id=\"resource-group\"\n              value={categoryId}\n              onChange={setCategoryId}\n              options={groups.map((g) => ({\n                value: g.id,\n                label: g.labelPlural,\n              }))}\n            />\n          </div>\n        )}\n\n        {/* Which branch it is at. Hidden on a single-site business. */}\n        {isMultiSite && (\n          <div>\n            <label\n              htmlFor=\"resource-location\"\n              className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n            >\n              Location\n            </label>\n            <Select\n              id=\"resource-location\"\n              value={locationId}\n              onChange={setLocationId}\n              options={locations.map((l) => ({\n                value: l.id,\n                label: l.name,\n              }))}\n              placeholder=\"Main location\"\n            />\n          </div>\n        )}\n\n        {/* Description */}\n        <div>\n          <label\n            htmlFor=\"resource-description\"\n            className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n          >\n            Description\n          </label>\n          <Textarea\n            id=\"resource-description\"\n            value={description}\n            onChange={(e) => setDescription(e.target.value)}\n            placeholder=\"Brief description...\"\n            rows={3}\n            className=\"w-full resize-none\"\n          />\n        </div>\n\n        {/* THE PICTURE, WITH SOMEWHERE TO PUT ONE.\n         *\n         * This was a bare `type=\"url\"` field placeholdered `https://...`, which\n         * asks a merchant adding a member of staff to go and host a photograph\n         * somewhere first and come back with a link. John, 2026-08-23: *\"when\n         * adding a staff it's showing import image with url, there's no\n         * affordance to upload an image\"*.\n         *\n         * `ImageUpload` is the app's image field and has been all along — drop\n         * it, browse for it, or paste a link, with the link input still there\n         * under the zone. This screen was simply not using it. Nothing about\n         * the value changes: both produce a URL in `imageUrl`.\n         *\n         * A person is not here: a face is 80px beside the name field at the\n         * top of this form, not a banner across it. This is the wide zone,\n         * and a picture of a room or a court IS wide.\n         */}\n        {active.kind !== 'person' && (\n          <ImageUpload\n            value={imageUrl || undefined}\n            onChange={(url) => setImageUrl(url ?? '')}\n            label=\"Image\"\n            aspectRatio=\"video\"\n          />\n        )}\n\n        {/* Skills (person kind only) */}\n        {active.kind === 'person' && (\n          <div>\n            <label\n              htmlFor=\"resource-role\"\n              className=\"mb-2 block text-sm font-medium text-[var(--text-primary)]\"\n            >\n              Role\n            </label>\n            <Input\n              id=\"resource-role\"\n              type=\"text\"\n              value={role}\n              onChange={(e) => setRole(e.target.value)}\n              placeholder=\"e.g., Physiotherapist\"\n              className=\"w-full\"\n            />\n          </div>\n        )}\n\n        {active.kind === 'person' && (\n          <div>\n            <label\n              htmlFor=\"resource-skills\"\n              className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n            >\n              Skills / specialties\n            </label>\n            <Input\n              id=\"resource-skills\"\n              type=\"text\"\n              value={skills}\n              onChange={(e) => setSkills(e.target.value)}\n              placeholder=\"e.g., Coloring, Braids, Styling\"\n              className=\"w-full\"\n            />\n            <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n              Comma-separated list of skills\n            </p>\n          </div>\n        )}\n\n        {/* Capacity (space kind) */}\n        {/* SHARED, NOT JUST SPATIAL.\n\n            Capacity was asked only of a space, which left a merchant with ten\n            interchangeable rackets no way to say so: either ten rows nobody\n            picks between, or one row that takes one booking a slot. The rule is\n            the same for both — if a customer would say \"that one\" it is a row,\n            and if they would only say \"one of those\" it is this number. A\n            person is one person and a let is one let, so neither is asked. */}\n        {(active.kind === 'space' || active.kind === 'equipment') && (\n          <div>\n            <label\n              htmlFor=\"resource-capacity\"\n              className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n            >\n              At once\n            </label>\n            <NumberField\n              id=\"resource-capacity\"\n              min={1}\n              decimal={false}\n              value={maxBookingsPerSlot}\n              onChange={(v) => setMaxBookingsPerSlot(v ?? 1)}\n              className=\"w-full\"\n            />\n            <p className=\"mt-1 text-xs text-[var(--text-tertiary)]\">\n              How many bookings can share it\n            </p>\n          </div>\n        )}\n\n        {/* Scheduling section */}\n        <div className=\"border-t border-[var(--border-default)] pt-4\">\n          <h3 className=\"text-sm font-semibold text-[var(--text-primary)] mb-4\">\n            How it is booked\n          </h3>\n\n          {/* A NIGHT IS NOT A SESSION.\n\n              Duration, the gap after, and a week of opening hours are the three\n              questions an hour-shaped booking answers. An apartment answers\n              none of them — it is taken by the night — and asking anyway put\n              \"9am to 5pm, Monday to Friday\" on a holiday let and a 60-minute\n              duration on a three-night stay. The shape decides which questions\n              exist; it is the same form otherwise. */}\n          <div className=\"grid grid-cols-2 gap-4 mb-4\">\n            {/* Duration */}\n            {!byTheNight && (\n              <div>\n                <label\n                  htmlFor=\"resource-duration\"\n                  className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n                >\n                  Duration (minutes)\n                </label>\n                <NumberField\n                  id=\"resource-duration\"\n                  min={5}\n                  decimal={false}\n                  value={defaultDuration}\n                  onChange={(v) => setDefaultDuration(v ?? 5)}\n                  className=\"w-full\"\n                />\n              </div>\n            )}\n\n            {/* Buffer */}\n            {!byTheNight && (\n              <div>\n                <label\n                  htmlFor=\"resource-buffer\"\n                  className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n                >\n                  Gap after (minutes)\n                </label>\n                <NumberField\n                  id=\"resource-buffer\"\n                  min={0}\n                  decimal={false}\n                  value={bufferMinutes}\n                  onChange={(v) => setBufferMinutes(v ?? 0)}\n                  className=\"w-full\"\n                />\n              </div>\n            )}\n\n            {/* Advance booking */}\n            <div>\n              <label\n                htmlFor=\"resource-advance\"\n                className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n              >\n                Booked ahead (days)\n              </label>\n              <NumberField\n                id=\"resource-advance\"\n                min={1}\n                decimal={false}\n                value={advanceBookingDays}\n                onChange={(v) => setAdvanceBookingDays(v ?? 1)}\n                className=\"w-full\"\n              />\n            </div>\n\n            {/* Price */}\n            <div>\n              <label\n                htmlFor=\"resource-price\"\n                className=\"block text-sm font-medium text-[var(--text-primary)] mb-2\"\n              >\n                {byTheNight ? 'Price a night' : 'Price'}\n              </label>\n              <Input\n                id=\"resource-price\"\n                type=\"number\"\n                min={0}\n                step=\"0.01\"\n                value={price}\n                onChange={(e) => setPrice(e.target.value)}\n                placeholder=\"0.00\"\n                className=\"w-full\"\n              />\n            </div>\n          </div>\n\n          {/* Schedule Editor — see the note above: not for a let. */}\n          {!byTheNight && (\n            <>\n              <ScheduleEditor schedule={schedule} onChange={setSchedule} />\n              <ScheduleTimezoneField value={timezone} onChange={setTimezone} />\n            </>\n          )}\n        </div>\n\n        <ErrorBanner>{error}</ErrorBanner>\n      </form>\n    </FormDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/dashboard/(bookings)/resources/_components/resource-picker.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { Building2, DoorOpen, Plus, Users, Wrench } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input } from "@withpotter/ui-kit";
+import { OptionButton } from "@withpotter/ui-kit/option-button";
+import { allPresets, customPreset } from "../_lib/presets";
+const ICON_BY_KIND = {
+  person: Users,
+  space: DoorOpen,
+  equipment: Wrench,
+  unit: Building2
+};
+const HEADING_BY_KIND = {
+  person: "People",
+  space: "Places",
+  equipment: "Kit",
+  unit: "Stays"
+};
+function ResourcePicker({
+  selectedId,
+  category,
+  onPick,
+  onCategoryChange
+}) {
+  const filterKind = category ?? "";
+  const categoryOpen = !!category;
+  const matchingPresets = allPresets();
+  const filteredPresets = filterKind ? matchingPresets.filter((preset) => preset.kind === filterKind) : matchingPresets;
+  const order = [
+    "person",
+    "space",
+    "equipment",
+    "unit"
+  ];
+  const visibleKinds = filterKind ? [filterKind] : order;
+  const blocks = visibleKinds.map((kind) => ({
+    kind,
+    items: (() => {
+      const all = filteredPresets.filter((p) => p.kind === kind);
+      return all;
+    })()
+  })).filter((block) => block.items.length > 0);
+  const closeCategory = () => {
+    onCategoryChange(null);
+  };
+  const [ownName, setOwnName] = useState("");
+  const own = filterKind ? customPreset(filterKind, ownName) : null;
+  const addOwn = () => {
+    if (!own) return;
+    closeCategory();
+    onPick(own);
+  };
+  const blockContent = blocks.map(({ kind, items }) => {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3", children: items.map((preset) => /* @__PURE__ */ jsx(
+        OptionButton,
+        {
+          shape: "card",
+          selected: selectedId === preset.id,
+          className: "min-h-14 justify-start bg-[var(--bg-muted)]/60 px-4 text-base",
+          onClick: () => {
+            if (categoryOpen) closeCategory();
+            onPick(preset);
+          },
+          children: preset.plural
+        },
+        preset.id
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: ownName,
+            onChange: (e) => setOwnName(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addOwn();
+              }
+            },
+            placeholder: "Not listed? Type your own, e.g. Master barbers",
+            "aria-label": "Name your own"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: addOwn,
+            disabled: !own,
+            icon: /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            children: "Add"
+          }
+        )
+      ] })
+    ] }, kind);
+  });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: categoryOpen && filterKind ? /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, x: 12 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -12 },
+      transition: { duration: 0.16 },
+      children: blockContent
+    },
+    `presets-${filterKind}`
+  ) : /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, x: -12 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 12 },
+      transition: { duration: 0.16 },
+      className: "grid grid-cols-2 gap-2 sm:grid-cols-4",
+      children: ["person", "space", "equipment", "unit"].map((kind) => {
+        const Icon = ICON_BY_KIND[kind];
+        return /* @__PURE__ */ jsxs(
+          OptionButton,
+          {
+            shape: "card",
+            selected: filterKind === kind,
+            className: "min-h-24 flex-col items-start justify-between gap-3 bg-[var(--bg-muted)]/60 p-4 text-left",
+            onClick: () => onCategoryChange(kind),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-5 text-[var(--text-tertiary)]" }),
+              /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold", children: HEADING_BY_KIND[kind] })
+            ]
+          },
+          kind
+        );
+      })
+    },
+    "categories"
+  ) }) });
+}
+export {
+  ResourcePicker
+};
+//# sourceMappingURL=resource-picker.js.map

package/dist/dashboard/(bookings)/resources/_components/resource-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/dashboard/%28bookings%29/resources/_components/resource-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { Building2, DoorOpen, Plus, Users, Wrench } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input } from '@withpotter/ui-kit';\nimport { OptionButton } from '@withpotter/ui-kit/option-button';\nimport type { ResourceCategoryKind } from '@withpotter/lib/resource-types';\nimport { allPresets, customPreset, type ResourcePreset } from '../_lib/presets';\n\nconst ICON_BY_KIND: Record<ResourceCategoryKind, LucideIcon> = {\n  person: Users,\n  space: DoorOpen,\n  equipment: Wrench,\n  unit: Building2,\n};\n\n/**\n * The heading over each block of nouns.\n *\n * NOT the shape titles. \"Someone\" and \"A stay\" are answers to the question\n * *what does a booking take up* — they read as a sentence because they were\n * the whole control. Standing above a row of concrete words they have to be\n * the category those words belong to instead, or the grid reads \"Someone:\n * Stylist, Barber\", which is nobody's English.\n */\nconst HEADING_BY_KIND: Record<ResourceCategoryKind, string> = {\n  person: 'People',\n  space: 'Places',\n  equipment: 'Kit',\n  unit: 'Stays',\n};\n\n/**\n * The grid of things this business could be booking.\n *\n * A merchant's own trade first, because that is the list with their word in\n * it, and everything else one press away — a kart track, a storage yard and a\n * hotel with a restaurant in it all exist and none of them is an archetype.\n * The picker stays focused on the supported resource types and presets.\n */\nexport function ResourcePicker({\n  selectedId,\n  category,\n  onPick,\n  onCategoryChange,\n}: {\n  intentKeys: string[];\n  selectedId: string | null;\n  showingAll: boolean;\n  category: ResourceCategoryKind | null;\n  onPick: (preset: ResourcePreset) => void;\n  onCategoryChange: (kind: ResourceCategoryKind | null) => void;\n}) {\n  const filterKind = category ?? '';\n  const categoryOpen = !!category;\n  const matchingPresets = allPresets();\n  const filteredPresets = filterKind\n    ? matchingPresets.filter((preset) => preset.kind === filterKind)\n    : matchingPresets;\n\n  // The trade's leading shape leads the grid, the same order `shapesFor` puts\n  // the shapes in — a restaurant opens on Places, a shortlet on Stays.\n  const order: ResourceCategoryKind[] = [\n    'person',\n    'space',\n    'equipment',\n    'unit',\n  ];\n  const visibleKinds = filterKind ? [filterKind] : order;\n  const blocks = visibleKinds\n    .map((kind) => ({\n      kind,\n      items: (() => {\n        const all = filteredPresets.filter((p) => p.kind === kind);\n        return all;\n      })(),\n    }))\n    .filter((block) => block.items.length > 0);\n\n  const closeCategory = () => {\n    onCategoryChange(null);\n  };\n\n  /* The list ends in a blank, because a list of nouns is never finished. */\n  const [ownName, setOwnName] = useState('');\n  const own = filterKind ? customPreset(filterKind, ownName) : null;\n  const addOwn = () => {\n    if (!own) return;\n    closeCategory();\n    onPick(own);\n  };\n\n  const blockContent = blocks.map(({ kind, items }) => {\n    return (\n      <div key={kind} className=\"space-y-3\">\n        <div className=\"grid grid-cols-2 gap-2 sm:grid-cols-3\">\n          {items.map((preset) => (\n            <OptionButton\n              key={preset.id}\n              shape=\"card\"\n              selected={selectedId === preset.id}\n              className=\"min-h-14 justify-start bg-[var(--bg-muted)]/60 px-4 text-base\"\n              onClick={() => {\n                if (categoryOpen) closeCategory();\n                onPick(preset);\n              }}\n            >\n              {preset.plural}\n            </OptionButton>\n          ))}\n        </div>\n        <div className=\"flex gap-2\">\n          <Input\n            value={ownName}\n            onChange={(e) => setOwnName(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                addOwn();\n              }\n            }}\n            placeholder=\"Not listed? Type your own, e.g. Master barbers\"\n            aria-label=\"Name your own\"\n          />\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={addOwn}\n            disabled={!own}\n            icon={<Plus className=\"size-4\" />}\n          >\n            Add\n          </Button>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <AnimatePresence mode=\"wait\" initial={false}>\n        {categoryOpen && filterKind ? (\n          <motion.div\n            key={`presets-${filterKind}`}\n            initial={{ opacity: 0, x: 12 }}\n            animate={{ opacity: 1, x: 0 }}\n            exit={{ opacity: 0, x: -12 }}\n            transition={{ duration: 0.16 }}\n          >\n            {blockContent}\n          </motion.div>\n        ) : (\n          <motion.div\n            key=\"categories\"\n            initial={{ opacity: 0, x: -12 }}\n            animate={{ opacity: 1, x: 0 }}\n            exit={{ opacity: 0, x: 12 }}\n            transition={{ duration: 0.16 }}\n            className=\"grid grid-cols-2 gap-2 sm:grid-cols-4\"\n          >\n            {(['person', 'space', 'equipment', 'unit'] as const).map((kind) => {\n              const Icon = ICON_BY_KIND[kind];\n              return (\n                <OptionButton\n                  key={kind}\n                  shape=\"card\"\n                  selected={filterKind === kind}\n                  className=\"min-h-24 flex-col items-start justify-between gap-3 bg-[var(--bg-muted)]/60 p-4 text-left\"\n                  onClick={() => onCategoryChange(kind)}\n                >\n                  <Icon className=\"size-5 text-[var(--text-tertiary)]\" />\n                  <span className=\"block text-sm font-semibold\">\n                    {HEADING_BY_KIND[kind]}\n                  </span>\n                </OptionButton>\n              );\n            })}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}