@withpotter/pages-bookings 0.13.0-next.101

package/dist/dashboard/(bookings)/availability/_components/availability-screen.js

@@ -0,0 +1,714 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { useQueryClient } from "@tanstack/react-query";
+import { CalendarClock, Plus } from "lucide-react";
+import {
+  ListPage,
+  ListStates,
+  StateView,
+  Card,
+  Field,
+  Select,
+  Button,
+  useToast,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  OptionButton
+} from "@withpotter/ui-kit";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { bookingsApi } from "@withpotter/lib/api/bookings";
+import { bookingCalendarApi } from "@withpotter/lib/api/booking-calendar";
+import { ApiRequestError } from "@withpotter/lib/api/core";
+import { resourcesApi } from "@withpotter/lib/api/resources";
+import { inventoryApi } from "@withpotter/lib/api/inventory";
+import { BlockTimeModal } from "@withpotter/pages-bookings/dashboard/(bookings)/resources/_components/block-time-modal";
+import {
+  ScheduleEditor,
+  getDefaultSchedule
+} from "@withpotter/pages-bookings/dashboard/(bookings)/resources/_components/schedule-editor";
+import { timezoneOptions } from "@withpotter/pages-bookings/dashboard/(bookings)/resources/_lib/schedule-timezone";
+import { MonthAvailability } from "./month-availability";
+const DURATIONS = [10, 15, 20, 30, 45, 60, 90, 120];
+function isoDate(d) {
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${month}-${day}`;
+}
+function formatSelectedDateRange(dates) {
+  const sorted = [...dates].sort();
+  const format = (date) => (/* @__PURE__ */ new Date(`${date}T00:00:00`)).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+  if (sorted.length <= 1) return format(sorted[0]);
+  return `${format(sorted[0])}\u2013${format(sorted[sorted.length - 1])}`;
+}
+function formatBlockedRange(startValue, endValue) {
+  const start = new Date(startValue);
+  const end = new Date(endValue);
+  const date = start.toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short"
+  });
+  const time = (value) => value.toLocaleTimeString(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+  return `${date} \xB7 ${time(start)}\u2013${time(end)}`;
+}
+function validateSchedule(schedule) {
+  for (let day = 0; day < 7; day++) {
+    const entry = schedule[day];
+    if (!entry?.available) continue;
+    if (!entry.slots?.length)
+      return "Every open day needs at least one time slot.";
+    const slots = [...entry.slots].sort(
+      (a, b) => a.start.localeCompare(b.start)
+    );
+    for (const slot of slots) {
+      if (!/^\d{2}:\d{2}$/.test(slot.start) || !/^\d{2}:\d{2}$/.test(slot.end)) {
+        return "Enter a valid opening and closing time.";
+      }
+      if (slot.end <= slot.start) {
+        return "A closing time must be later than its opening time.";
+      }
+    }
+    for (let index = 1; index < slots.length; index++) {
+      if (slots[index].start < slots[index - 1].end) {
+        return "Time slots on the same day cannot overlap.";
+      }
+    }
+  }
+  return null;
+}
+function AvailabilityScreen({
+  embedded = false
+}) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const availabilityQueryKey = (resource2) => tenant?.slug ? ["availability", resource2] : null;
+  function invalidateAvailability(resource2) {
+    const queryKey = availabilityQueryKey(resource2);
+    return queryKey ? queryClient.invalidateQueries({ queryKey }) : Promise.resolve();
+  }
+  const [savingDuration, setSavingDuration] = useState(false);
+  const [savingTimezone, setSavingTimezone] = useState(false);
+  const [savingWeek, setSavingWeek] = useState(false);
+  const [draftSchedule, setDraftSchedule] = useState(
+    null
+  );
+  const [selectedResourceId, setSelectedResourceId] = useState("");
+  const [showBlockModal, setShowBlockModal] = useState(false);
+  const [savingBlock, setSavingBlock] = useState(false);
+  const [blockError, setBlockError] = useState(null);
+  const [unblockingEventId, setUnblockingEventId] = useState(
+    null
+  );
+  const [selectedDates, setSelectedDates] = useState([]);
+  const [showBlockCalendar, setShowBlockCalendar] = useState(false);
+  const [blockDate, setBlockDate] = useState(null);
+  const [savingOpen, setSavingOpen] = useState(false);
+  const [previewMonth, setPreviewMonth] = useState(() => {
+    const today = /* @__PURE__ */ new Date();
+    return new Date(today.getFullYear(), today.getMonth(), 1);
+  });
+  const { from, to } = useMemo(() => {
+    const end = new Date(
+      previewMonth.getFullYear(),
+      previewMonth.getMonth() + 1,
+      0
+    );
+    return { from: isoDate(previewMonth), to: isoDate(end) };
+  }, [previewMonth]);
+  const resources = useApiQuery(
+    ["availability", "resources"],
+    (slug) => resourcesApi.list(slug),
+    { live: true }
+  );
+  const activeResources = useMemo(
+    () => (resources.data?.data ?? []).filter((r) => r.status === "active"),
+    [resources.data]
+  );
+  const resource = activeResources.find((r) => r.id === selectedResourceId) ?? activeResources[0];
+  const services = useApiQuery(
+    ["availability", "services"],
+    (slug) => inventoryApi.list(
+      slug,
+      { behavior: "bookable" },
+      { assignedOnly: false }
+    ),
+    { live: true }
+  );
+  const [selectedServiceId, setSelectedServiceId] = useState("");
+  const service = services.data?.items.find((item) => item.id === selectedServiceId) ?? services.data?.items[0];
+  const duration = service?.behaviors?.bookable?.durationMinutes ?? resource?.defaultDurationMinutes ?? 30;
+  const availability = useApiQuery(
+    ["availability", "slots", resource?.id ?? "", from, to, duration],
+    (slug) => bookingsApi.availability(slug, {
+      resourceId: resource.id,
+      dateFrom: from,
+      dateTo: to,
+      duration
+    }),
+    { enabled: Boolean(resource?.id), live: true }
+  );
+  const events = useApiQuery(
+    ["availability", "events", from, to],
+    (slug) => bookingCalendarApi.getEvents(slug, from, to),
+    { enabled: Boolean(resource?.id), live: true }
+  );
+  const days = useMemo(() => {
+    const byDate = /* @__PURE__ */ new Map();
+    for (const slot of availability.data?.slots ?? []) {
+      const list = byDate.get(slot.date) ?? [];
+      list.push(slot);
+      byDate.set(slot.date, list);
+    }
+    const bookedByDate = /* @__PURE__ */ new Map();
+    for (const ev of events.data ?? []) {
+      const start = new Date(ev.start);
+      const key = isoDate(start);
+      const list = bookedByDate.get(key) ?? [];
+      list.push({
+        startTime: start.toTimeString().slice(0, 5),
+        title: ev.title
+      });
+      bookedByDate.set(key, list);
+    }
+    const out = [];
+    const cursor = /* @__PURE__ */ new Date(`${from}T00:00:00`);
+    const end = /* @__PURE__ */ new Date(`${to}T00:00:00`);
+    while (cursor <= end) {
+      const key = isoDate(cursor);
+      const slots = byDate.get(key) ?? [];
+      out.push({
+        date: key,
+        weekday: cursor.toLocaleDateString(void 0, { weekday: "short" }),
+        label: cursor.toLocaleDateString(void 0, {
+          day: "numeric",
+          month: "long"
+        }),
+        slots,
+        bookings: bookedByDate.get(key) ?? [],
+        closed: slots.length === 0
+      });
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    return out;
+  }, [availability.data, events.data, from, to]);
+  const blockedEvents = useMemo(
+    () => (events.data ?? []).filter((event) => event.type === "block").sort((a, b) => a.start.localeCompare(b.start)),
+    [events.data]
+  );
+  const schedule = draftSchedule ?? resource?.schedule ?? getDefaultSchedule();
+  function selectDate(date) {
+    if (date < isoDate(/* @__PURE__ */ new Date())) {
+      toast({
+        title: "Past dates cannot be changed",
+        variant: "destructive"
+      });
+      return;
+    }
+    setSelectedDates((current) => {
+      if (current.includes(date))
+        return current.filter((item) => item !== date);
+      if (current.length === 0) return [date];
+      const first = /* @__PURE__ */ new Date(`${current[0]}T00:00:00`);
+      const last = /* @__PURE__ */ new Date(`${date}T00:00:00`);
+      const start = first < last ? first : last;
+      const end = first < last ? last : first;
+      const range = [];
+      for (const cursor = new Date(start); cursor <= end; ) {
+        range.push(isoDate(cursor));
+        cursor.setDate(cursor.getDate() + 1);
+      }
+      return range;
+    });
+  }
+  async function openSelectedDates() {
+    if (!tenant?.slug || !resource || selectedDates.length === 0) return;
+    setSavingOpen(true);
+    try {
+      const sorted = [...selectedDates].sort();
+      const alreadyOpen = sorted.filter(
+        (date) => days.find((day) => day.date === date)?.slots.some((slot) => slot.available) ?? false
+      );
+      const blockedDates = new Set(
+        blockedEvents.map((event) => isoDate(new Date(event.start)))
+      );
+      const datesToUnblock = sorted.filter(
+        (date) => !alreadyOpen.includes(date) && blockedDates.has(date)
+      );
+      if (datesToUnblock.length === 0 && alreadyOpen.length > 0) {
+        const label = alreadyOpen.length === sorted.length ? "These dates are already open for bookings." : `${alreadyOpen.length} selected date${alreadyOpen.length === 1 ? "" : "s"} already have booking slots.`;
+        toast({
+          title: "Availability already open",
+          description: label
+        });
+        return;
+      }
+      if (datesToUnblock.length === 0) {
+        toast({
+          title: "No availability block found",
+          description: "This date is controlled by the weekly schedule. Update the schedule to open it."
+        });
+        return;
+      }
+      await Promise.all(
+        datesToUnblock.map(
+          (date) => bookingCalendarApi.unblockTime(
+            tenant.slug,
+            resource.id,
+            date,
+            "00:00"
+          )
+        )
+      );
+      await Promise.all([
+        invalidateAvailability("slots"),
+        invalidateAvailability("events")
+      ]);
+      setSelectedDates([]);
+      setShowBlockCalendar(false);
+      toast({
+        title: alreadyOpen.length > 0 ? "Availability updated" : "Availability added"
+      });
+    } catch (error) {
+      toast({
+        title: "Could not add availability",
+        description: error instanceof ApiRequestError ? error.message : "Please try again. If the problem continues, check the service and provider setup.",
+        variant: "destructive"
+      });
+    } finally {
+      setSavingOpen(false);
+    }
+  }
+  async function saveDuration(minutes) {
+    if (!tenant?.slug || !service && !resource) return;
+    setSavingDuration(true);
+    try {
+      if (service) {
+        const behaviors = service.behaviors ?? {};
+        const bookable = behaviors.bookable ?? {};
+        const data = service.data ?? {};
+        await inventoryApi.update(tenant.slug, service.id, {
+          ...service,
+          behaviors: {
+            ...behaviors,
+            bookable: { ...bookable, durationMinutes: minutes }
+          },
+          // The data blob's own copy wins at save time; write both to agree.
+          data: { ...data, durationMinutes: minutes }
+        });
+        await Promise.all([
+          invalidateAvailability("services"),
+          invalidateAvailability("slots")
+        ]);
+      } else {
+        await resourcesApi.update(tenant.slug, resource.id, {
+          defaultDurationMinutes: minutes
+        });
+        await invalidateAvailability("resources");
+      }
+      toast({ title: "Appointment length updated" });
+    } catch {
+      toast({
+        title: "Could not update the appointment length",
+        variant: "destructive"
+      });
+    } finally {
+      setSavingDuration(false);
+    }
+  }
+  async function saveTimezone(timezone) {
+    if (!tenant?.slug || !resource) return;
+    setSavingTimezone(true);
+    try {
+      await resourcesApi.update(tenant.slug, resource.id, { timezone });
+      await Promise.all([
+        invalidateAvailability("resources"),
+        invalidateAvailability("slots")
+      ]);
+      toast({ title: "Timezone updated" });
+    } catch {
+      toast({ title: "Could not update timezone", variant: "destructive" });
+    } finally {
+      setSavingTimezone(false);
+    }
+  }
+  async function saveWeek() {
+    if (!tenant?.slug || !resource || !draftSchedule) return;
+    const validationError = validateSchedule(draftSchedule);
+    if (validationError) {
+      toast({ title: validationError, variant: "destructive" });
+      return;
+    }
+    setSavingWeek(true);
+    try {
+      await resourcesApi.update(tenant.slug, resource.id, {
+        schedule: draftSchedule
+      });
+      await invalidateAvailability("resources");
+      setDraftSchedule(null);
+      toast({ title: "Availability updated" });
+    } catch {
+      toast({ title: "Could not update availability", variant: "destructive" });
+    } finally {
+      setSavingWeek(false);
+    }
+  }
+  async function blockTime(data) {
+    if (!tenant?.slug) return;
+    setSavingBlock(true);
+    setBlockError(null);
+    try {
+      await bookingCalendarApi.blockTime(tenant.slug, data);
+      await Promise.all([
+        invalidateAvailability("slots"),
+        invalidateAvailability("events")
+      ]);
+      setShowBlockModal(false);
+      setBlockDate(null);
+      setSelectedDates([]);
+      setShowBlockCalendar(false);
+      toast({ title: "Time blocked" });
+    } catch (error) {
+      setBlockError(
+        error instanceof Error ? error.message : "Could not block that time"
+      );
+    } finally {
+      setSavingBlock(false);
+    }
+  }
+  async function unblockTime(event) {
+    if (!tenant?.slug || !resource?.id) return;
+    setUnblockingEventId(event.id);
+    try {
+      const start = new Date(event.start);
+      const end = new Date(event.end);
+      await bookingCalendarApi.unblockTime(
+        tenant.slug,
+        event.resourceId ?? resource.id,
+        isoDate(start),
+        start.toTimeString().slice(0, 5),
+        isoDate(end) !== isoDate(start) ? isoDate(end) : void 0
+      );
+      await Promise.all([
+        invalidateAvailability("slots"),
+        invalidateAvailability("events")
+      ]);
+      toast({ title: "Time block removed" });
+    } catch {
+      toast({ title: "Could not remove time block", variant: "destructive" });
+    } finally {
+      setUnblockingEventId(null);
+    }
+  }
+  const loading = resources.isLoading || services.isLoading;
+  const pageError = resources.error?.message ?? services.error?.message ?? availability.error?.message ?? events.error?.message ?? null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListStates,
+      {
+        loading,
+        isEmpty: !loading && !resource,
+        error: pageError,
+        errorPlacement: "bottom",
+        onRetry: () => {
+          void resources.refetch();
+          void services.refetch();
+          void availability.refetch();
+          void events.refetch();
+        },
+        empty: /* @__PURE__ */ jsx(
+          StateView,
+          {
+            kind: "empty",
+            icon: CalendarClock,
+            title: "Nobody takes bookings yet",
+            description: "Add the person or space customers book, and their week shows up here.",
+            action: { label: "Add staff", href: "/dashboard/resources" }
+          }
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs(Card, { variant: "soft", children: [
+            service ? /* @__PURE__ */ jsxs("div", { className: "mb-4 border-b border-[var(--border-subtle)] pb-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Service" }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-[var(--text-secondary)]", children: "Choose a service to view its booking availability." })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: (services.data?.items ?? []).map((item) => {
+                const itemDuration = item.behaviors?.bookable?.durationMinutes;
+                return /* @__PURE__ */ jsx(
+                  OptionButton,
+                  {
+                    shape: "card",
+                    selected: item.id === service.id,
+                    onClick: () => setSelectedServiceId(item.id),
+                    className: "text-left",
+                    children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: item.title }),
+                      /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-[var(--text-secondary)]", children: itemDuration ? `${itemDuration} minutes` : "Duration not set" })
+                    ] })
+                  },
+                  item.id
+                );
+              }) })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: "Appointment details" }),
+                !service && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    className: "mt-3 max-md:!min-h-9",
+                    asChild: true,
+                    children: /* @__PURE__ */ jsx(Link, { href: "/dashboard/catalog/new?intent=take-bookings", children: "Create a service" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-3 sm:w-auto", children: [
+                activeResources.length > 1 ? /* @__PURE__ */ jsx(Field, { label: "Provider", children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: resource?.id ?? "",
+                    onChange: (value) => {
+                      setSelectedResourceId(value);
+                      setDraftSchedule(null);
+                      setSelectedDates([]);
+                    },
+                    disabled: activeResources.length === 0,
+                    ariaLabel: "Provider",
+                    triggerClassName: "!min-h-11 !bg-[var(--bg-base)] !shadow-none !border-[var(--border-default)]",
+                    options: activeResources.map((item) => ({
+                      value: item.id,
+                      label: item.name
+                    }))
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsx(Field, { label: "Duration", children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: String(duration),
+                    onChange: (v) => void saveDuration(Number(v)),
+                    disabled: savingDuration || !service && !resource,
+                    ariaLabel: "Duration",
+                    triggerClassName: "!min-h-11 !bg-[var(--bg-base)] !shadow-none !border-[var(--border-default)]",
+                    options: DURATIONS.map((m) => ({
+                      value: String(m),
+                      label: `${m} minutes`
+                    }))
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Field, { label: "Timezone", children: /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    value: resource?.timezone ?? "Africa/Lagos",
+                    onChange: (value) => void saveTimezone(value),
+                    disabled: savingTimezone || !resource,
+                    ariaLabel: "Resource timezone",
+                    triggerClassName: "!min-h-11 !bg-[var(--bg-base)] !shadow-none !border-[var(--border-default)]",
+                    options: timezoneOptions(
+                      resource?.timezone ?? "Africa/Lagos"
+                    ).map((option) => ({
+                      value: option.value,
+                      label: option.label
+                    }))
+                  }
+                ) })
+              ] })
+            ] })
+          ] }),
+          schedule ? /* @__PURE__ */ jsxs(Card, { variant: "soft", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: "Weekly hours" }) }) }),
+            /* @__PURE__ */ jsx(
+              ScheduleEditor,
+              {
+                schedule,
+                onChange: setDraftSchedule,
+                title: null,
+                layout: "week-grid"
+              }
+            ),
+            draftSchedule ? /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3 rounded-lg border border-[var(--border-default)] bg-[var(--bg-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Weekly hours changed" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => setDraftSchedule(null),
+                    children: "Discard"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => void saveWeek(),
+                    disabled: savingWeek,
+                    children: savingWeek ? "Saving\u2026" : "Save hours"
+                  }
+                )
+              ] })
+            ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxs(Card, { variant: "soft", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: "Booking schedule" }) }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => setShowBlockCalendar(true),
+                  disabled: !resource,
+                  children: "Manage schedule"
+                }
+              )
+            ] }),
+            blockedEvents.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2 border-t border-[var(--border-subtle)] pt-3", children: blockedEvents.map((event) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "surface-inset flex items-center justify-between gap-3 p-3",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--text-primary)]", children: formatBlockedRange(event.start, event.end) }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-[var(--text-muted)]", children: event.title || "Blocked time" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghostDanger",
+                      size: "sm",
+                      onClick: () => void unblockTime(event),
+                      loading: unblockingEventId === event.id,
+                      children: "Remove"
+                    }
+                  )
+                ]
+              },
+              event.id
+            )) }) : /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between gap-3 border-t border-[var(--border-subtle)] pt-3", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: "No blocked time this month." }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "max-md:!p-3",
+                  "aria-label": "Add blocked time",
+                  title: "Add blocked time",
+                  onClick: () => setShowBlockCalendar(true),
+                  disabled: !resource,
+                  children: /* @__PURE__ */ jsx(Plus, {})
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: showBlockCalendar,
+        onOpenChange: (open) => {
+          setShowBlockCalendar(open);
+          if (!open) {
+            setSelectedDates([]);
+            setShowBlockModal(false);
+            setBlockDate(null);
+            setBlockError(null);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-lg !gap-2 !p-4", children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl", children: "Manage booking schedule" }) }),
+          /* @__PURE__ */ jsx(Card, { variant: "soft", padding: "sm", className: "mt-2", children: /* @__PURE__ */ jsx(
+            MonthAvailability,
+            {
+              month: previewMonth,
+              days,
+              selectedDates,
+              onSelectDate: selectDate,
+              onPrevious: () => setPreviewMonth(
+                (month) => new Date(month.getFullYear(), month.getMonth() - 1, 1)
+              ),
+              onNext: () => setPreviewMonth(
+                (month) => new Date(month.getFullYear(), month.getMonth() + 1, 1)
+              )
+            },
+            `${previewMonth.getFullYear()}-${previewMonth.getMonth()}`
+          ) }),
+          selectedDates.length > 0 ? showBlockModal && resource ? /* @__PURE__ */ jsx(
+            BlockTimeModal,
+            {
+              embedded: true,
+              resources: activeResources,
+              defaultResourceId: resource.id,
+              resourceLabel: "Provider",
+              defaultDate: blockDate ?? selectedDates[0],
+              defaultEndDate: selectedDates[selectedDates.length - 1],
+              dateRange: selectedDates.length > 1,
+              saving: savingBlock,
+              error: blockError,
+              onBlock: (data) => void blockTime(data),
+              onClose: () => {
+                if (!savingBlock) {
+                  setShowBlockModal(false);
+                  setBlockDate(null);
+                  setBlockError(null);
+                }
+              }
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "availability-selection-enter border-t border-[var(--border-subtle)] pt-4",
+              "aria-live": "polite",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { className: "text-ink block text-sm font-medium", children: selectedDates.length === 1 ? formatSelectedDateRange(selectedDates) : `${formatSelectedDateRange(selectedDates)} selected` }) }),
+                  /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setSelectedDates([]), children: "Clear" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-ink-muted mt-3 text-sm", children: "Opening uses the resource's weekly hours. Existing date-specific blocks will be removed." }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      onClick: () => void openSelectedDates(),
+                      loading: savingOpen,
+                      children: selectedDates.length === 1 ? "Open this date" : "Open these dates"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "secondary",
+                      onClick: () => {
+                        setBlockDate(selectedDates[0] ?? null);
+                        setShowBlockModal(true);
+                      },
+                      children: "Block this time"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ] })
+      }
+    )
+  ] });
+  if (embedded) return content;
+  return /* @__PURE__ */ jsx(ListPage, { largeTitle: true, title: "Availability", children: content });
+}
+export {
+  AvailabilityScreen
+};
+//# sourceMappingURL=availability-screen.js.map