@voyantjs/availability-ui 0.30.7 → 0.31.0

package/README.md

@@ -1,24 +1,25 @@
 # @voyantjs/availability-ui
 
-Reusable availability UI primitives for Voyant operator/admin apps.
-
-The initial package surface is intentionally leaf-level so downstream apps can
-replace copied availability UI incrementally while page-level composition stays
-app-owned.
+Reusable availability UI primitives and page compositions for Voyant
+operator/admin apps.
 
 ## Exports
 
 | Entry | Description |
 | --- | --- |
 | `.` | Barrel re-exports |
+| `./i18n` | Availability UI message provider, defaults, and helpers |
 | `./components/*` | Availability UI components |
 | `./utils` | Small formatting helpers |
 
 ## Surface
 
-The package exports reusable pieces that keep app-owned data fetching,
-routing, and mutations injected through props:
+The package exports reusable pieces that keep app-owned routing and the
+availability batch mutations injected through props:
 
+- `AvailabilityPage`
+- `AvailabilityRuleDetailPage`, `AvailabilitySlotDetailPage`,
+  `AvailabilityStartTimeDetailPage`
 - `AvailabilityOverview`
 - `AvailabilitySlotsTab`, `AvailabilityRulesTab`, `AvailabilityStartTimesTab`
 - `AvailabilityCloseoutsTab`, `AvailabilityPickupPointsTab`
@@ -27,10 +28,79 @@ routing, and mutations injected through props:
 - `AvailabilityPageSkeleton`, `AvailabilityBodySkeleton`, detail skeletons
 - `availability*Columns` table column builders
 - `AvailabilitySectionHeader`
+- `AvailabilityUiMessagesProvider` and i18n helpers from `./i18n`
 - `formatLocalizedSelectionLabel`
 
 ## Usage
 
+`AvailabilityPage` owns the common operator availability shell, data hooks,
+filters, overview metrics, table tabs, calendar tab, and rule/slot/start-time
+dialogs. Route navigation and batch mutations stay app-specific:
+
+```tsx
+import { AvailabilityPage } from "@voyantjs/availability-ui"
+
+<AvailabilityPage
+  onSlotOpen={(id) => navigate({ to: "/availability/$id", params: { id } })}
+  onRuleOpen={(id) => navigate({ to: "/availability/rules/$id", params: { id } })}
+  onStartTimeOpen={(id) =>
+    navigate({ to: "/availability/start-times/$id", params: { id } })
+  }
+  onProductOpen={(id) => navigate({ to: "/products/$id", params: { id } })}
+  onBulkUpdate={handleAvailabilityBulkUpdate}
+  onBulkDelete={handleAvailabilityBulkDelete}
+/>
+```
+
+Closeout and pickup-point mutations are not owned by `availability-react` yet.
+Pass `onCloseoutSubmit` and `onPickupPointSubmit` to use the package dialogs, or
+use the `slots.dialogs` escape hatch to render app-owned dialogs.
+
+Detail pages expose query/loader helpers that accept the app's API client:
+
+```tsx
+import {
+  AvailabilitySlotDetailPage,
+  loadAvailabilitySlotDetailPage,
+} from "@voyantjs/availability-ui"
+import { defaultFetcher } from "@voyantjs/availability-react"
+
+const client = { baseUrl: getApiUrl(), fetcher: defaultFetcher }
+
+export const Route = createFileRoute("/_workspace/availability/$id")({
+  loader: ({ context, params }) =>
+    loadAvailabilitySlotDetailPage(context.queryClient, client, params.id),
+  component: () => {
+    const { id } = Route.useParams()
+    return (
+      <AvailabilitySlotDetailPage
+        id={id}
+        onBack={() => navigate({ to: "/availability" })}
+        onOpenProduct={(productId) =>
+          navigate({ to: "/products/$id", params: { id: productId } })
+        }
+        onOpenStartTime={(startTimeId) =>
+          navigate({ to: "/availability/start-times/$id", params: { id: startTimeId } })
+        }
+      />
+    )
+  },
+})
+```
+
+Wrap consumers in `AvailabilityUiMessagesProvider` for package-level copy and
+locale-aware formatting. Without a provider the package falls back to English.
+
+```tsx
+import { AvailabilityUiMessagesProvider } from "@voyantjs/availability-ui/i18n"
+
+<AvailabilityUiMessagesProvider locale={resolvedLocale}>
+  <AvailabilityPage onBulkUpdate={handleBulkUpdate} onBulkDelete={handleBulkDelete} />
+</AvailabilityUiMessagesProvider>
+```
+
+Leaf components remain available for custom page shells:
+
 ```tsx
 import { AvailabilitySectionHeader } from "@voyantjs/availability-ui"
 

package/dist/components/availability-page.d.ts

@@ -0,0 +1,50 @@
+import { type AvailabilityCloseoutRow, type AvailabilityPickupPointRow, type AvailabilitySlotRow } from "@voyantjs/availability-react";
+import type { ReactNode } from "react";
+import { type AvailabilityCloseoutSubmitPayload, type AvailabilityPickupPointSubmitPayload, type AvailabilityRuleSubmitPayload, type AvailabilitySlotSubmitPayload, type AvailabilityStartTimeSubmitPayload } from "./availability-dialogs.js";
+import { type AvailabilityBulkDeleteFn, type AvailabilityBulkUpdateFn } from "./availability-tabs.js";
+export type AvailabilityPageTab = "slots" | "rules" | "start-times" | "closeouts" | "pickup-points" | "calendar";
+export type AvailabilityPageActiveFilter = "all" | "active" | "inactive";
+export type AvailabilityPageSlotStatusFilter = "all" | AvailabilitySlotRow["status"];
+export type AvailabilityPageBulkUpdateHandler = AvailabilityBulkUpdateFn;
+export type AvailabilityPageBulkDeleteHandler = AvailabilityBulkDeleteFn;
+type DialogSubmitContext = {
+    isEditing: boolean;
+    id?: string;
+};
+export type AvailabilityPageRuleSubmitHandler = (payload: AvailabilityRuleSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export type AvailabilityPageStartTimeSubmitHandler = (payload: AvailabilityStartTimeSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export type AvailabilityPageSlotSubmitHandler = (payload: AvailabilitySlotSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export type AvailabilityPageCloseoutSubmitHandler = (payload: AvailabilityCloseoutSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export type AvailabilityPagePickupPointSubmitHandler = (payload: AvailabilityPickupPointSubmitPayload, context: DialogSubmitContext) => Promise<void>;
+export interface AvailabilityPageSlots {
+    headerEnd?: ReactNode;
+    beforeOverview?: ReactNode;
+    afterOverview?: ReactNode;
+    beforeTabs?: ReactNode;
+    afterTabs?: ReactNode;
+    dialogs?: ReactNode;
+}
+export interface AvailabilityPageProps {
+    className?: string;
+    defaultTab?: AvailabilityPageTab;
+    bulkActionTarget?: string | null;
+    onBulkUpdate: AvailabilityPageBulkUpdateHandler;
+    onBulkDelete: AvailabilityPageBulkDeleteHandler;
+    onSlotOpen?: (slotId: string) => void;
+    onRuleOpen?: (ruleId: string) => void;
+    onStartTimeOpen?: (startTimeId: string) => void;
+    onProductOpen?: (productId: string) => void;
+    onCloseoutCreate?: () => void;
+    onCloseoutEdit?: (closeout: AvailabilityCloseoutRow) => void;
+    onPickupPointCreate?: () => void;
+    onPickupPointEdit?: (pickupPoint: AvailabilityPickupPointRow) => void;
+    onRuleSubmit?: AvailabilityPageRuleSubmitHandler;
+    onStartTimeSubmit?: AvailabilityPageStartTimeSubmitHandler;
+    onSlotSubmit?: AvailabilityPageSlotSubmitHandler;
+    onCloseoutSubmit?: AvailabilityPageCloseoutSubmitHandler;
+    onPickupPointSubmit?: AvailabilityPagePickupPointSubmitHandler;
+    slots?: AvailabilityPageSlots;
+}
+export declare function AvailabilityPage({ className, defaultTab, bulkActionTarget, onBulkUpdate, onBulkDelete, onSlotOpen, onRuleOpen, onStartTimeOpen, onProductOpen, onCloseoutCreate, onCloseoutEdit, onPickupPointCreate, onPickupPointEdit, onRuleSubmit, onStartTimeSubmit, onSlotSubmit, onCloseoutSubmit, onPickupPointSubmit, slots: pageSlots, }: AvailabilityPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=availability-page.d.ts.map

package/dist/components/availability-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-page.d.ts","sourceRoot":"","sources":["../../src/components/availability-page.tsx"],"names":[],"mappings":"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"}

package/dist/components/availability-page.js

@@ -0,0 +1,248 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { availabilityQueryKeys, useAvailabilityRuleMutation, useAvailabilitySlotMutation, useAvailabilityStartTimeMutation, useCloseouts, usePickupPoints, useProducts, useRules, useSlots, useStartTimes, } from "@voyantjs/availability-react";
+import { Button, cn, Label } from "@voyantjs/ui/components";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { CalendarProvider, CalendarView, } from "@voyantjs/ui/components/big-calendar";
+import { DateRangePicker } from "@voyantjs/ui/components/date-picker";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyantjs/ui/components/tabs";
+import { useState } from "react";
+import { useAvailabilityUiMessagesOrDefault } from "../i18n/index.js";
+import { AvailabilityCloseoutDialog, AvailabilityPickupPointDialog, AvailabilityRuleDialog, AvailabilitySlotDialog, AvailabilityStartTimeDialog, } from "./availability-dialogs.js";
+import { AvailabilityOverview } from "./availability-overview.js";
+import { AvailabilityBodySkeleton } from "./availability-skeletons.js";
+import { AvailabilityCloseoutsTab, AvailabilityPickupPointsTab, AvailabilityRulesTab, AvailabilitySlotsTab, AvailabilityStartTimesTab, } from "./availability-tabs.js";
+const noop = () => undefined;
+const noopId = (_id) => undefined;
+const noopCloseout = (_row) => undefined;
+const noopPickupPoint = (_row) => undefined;
+export function AvailabilityPage({ className, defaultTab = "slots", bulkActionTarget = null, onBulkUpdate, onBulkDelete, onSlotOpen = noopId, onRuleOpen = noopId, onStartTimeOpen = noopId, onProductOpen = noopId, onCloseoutCreate = noop, onCloseoutEdit = noopCloseout, onPickupPointCreate = noop, onPickupPointEdit = noopPickupPoint, onRuleSubmit, onStartTimeSubmit, onSlotSubmit, onCloseoutSubmit, onPickupPointSubmit, slots: pageSlots, }) {
+    const messages = useAvailabilityUiMessagesOrDefault();
+    const page = messages.page;
+    const queryClient = useQueryClient();
+    const ruleMutation = useAvailabilityRuleMutation();
+    const startTimeMutation = useAvailabilityStartTimeMutation();
+    const slotMutation = useAvailabilitySlotMutation();
+    const [productFilter, setProductFilter] = useState("all");
+    const [productSearch, setProductSearch] = useState("");
+    const [slotStatusFilter, setSlotStatusFilter] = useState("all");
+    const [slotDateRange, setSlotDateRange] = useState(null);
+    const [ruleActiveFilter, setRuleActiveFilter] = useState("all");
+    const [startTimeActiveFilter, setStartTimeActiveFilter] = useState("all");
+    const [closeoutDateRange, setCloseoutDateRange] = useState(null);
+    const [pickupPointActiveFilter, setPickupPointActiveFilter] = useState("all");
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const [calendarView, setCalendarView] = useState("month");
+    const [ruleSelection, setRuleSelection] = useState({});
+    const [startTimeSelection, setStartTimeSelection] = useState({});
+    const [slotSelection, setSlotSelection] = useState({});
+    const [closeoutSelection, setCloseoutSelection] = useState({});
+    const [pickupPointSelection, setPickupPointSelection] = useState({});
+    const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
+    const [startTimeDialogOpen, setStartTimeDialogOpen] = useState(false);
+    const [slotDialogOpen, setSlotDialogOpen] = useState(false);
+    const [closeoutDialogOpen, setCloseoutDialogOpen] = useState(false);
+    const [pickupPointDialogOpen, setPickupPointDialogOpen] = useState(false);
+    const [editingRule, setEditingRule] = useState();
+    const [editingStartTime, setEditingStartTime] = useState();
+    const [editingSlot, setEditingSlot] = useState();
+    const [editingCloseout, setEditingCloseout] = useState();
+    const [editingPickupPoint, setEditingPickupPoint] = useState();
+    const productsQuery = useProducts({ search: productSearch || undefined, limit: 25, offset: 0 });
+    const rulesQuery = useRules({ limit: 25, offset: 0 });
+    const startTimesQuery = useStartTimes({ limit: 25, offset: 0 });
+    const slotsQuery = useSlots({ limit: 25, offset: 0 });
+    const closeoutsQuery = useCloseouts({ limit: 25, offset: 0 });
+    const pickupPointsQuery = usePickupPoints({ limit: 25, offset: 0 });
+    const products = productsQuery.data?.data ?? [];
+    const rules = rulesQuery.data?.data ?? [];
+    const startTimes = startTimesQuery.data?.data ?? [];
+    const availabilitySlots = slotsQuery.data?.data ?? [];
+    const closeouts = closeoutsQuery.data?.data ?? [];
+    const pickupPoints = pickupPointsQuery.data?.data ?? [];
+    const matchesProduct = (productId) => productFilter === "all" || productId === productFilter;
+    const matchesActive = (active, filter) => filter === "all" || (filter === "active" ? active : !active);
+    const matchesDateRange = (date, range) => (!range?.from || date >= range.from) && (!range?.to || date <= range.to);
+    const filteredRules = rules.filter((rule) => matchesProduct(rule.productId) && matchesActive(rule.active, ruleActiveFilter));
+    const filteredStartTimes = startTimes.filter((startTime) => matchesProduct(startTime.productId) && matchesActive(startTime.active, startTimeActiveFilter));
+    const productFilteredSlots = availabilitySlots.filter((slot) => matchesProduct(slot.productId));
+    const filteredSlots = productFilteredSlots.filter((slot) => (slotStatusFilter === "all" || slot.status === slotStatusFilter) &&
+        matchesDateRange(slot.dateLocal, slotDateRange));
+    const filteredCloseouts = closeouts.filter((closeout) => matchesProduct(closeout.productId) && matchesDateRange(closeout.dateLocal, closeoutDateRange));
+    const filteredPickupPoints = pickupPoints.filter((pickupPoint) => matchesProduct(pickupPoint.productId) &&
+        matchesActive(pickupPoint.active, pickupPointActiveFilter));
+    const filteredProducts = products.filter((product) => productFilter === "all" || product.id === productFilter);
+    const constrainedSlots = [...filteredSlots]
+        .filter((slot) => slot.status === "sold_out" || slot.status === "closed")
+        .sort((left, right) => left.startsAt.localeCompare(right.startsAt));
+    const nowIso = new Date().toISOString();
+    const productsWithoutUpcomingDepartures = filteredProducts.filter((product) => !productFilteredSlots.some((slot) => slot.productId === product.id && slot.status === "open" && slot.startsAt >= nowIso));
+    const hasFilters = productFilter !== "all";
+    const selectedProduct = products.find((product) => product.id === productFilter) ?? null;
+    const slotStatusToColor = {
+        open: "green",
+        closed: "gray",
+        sold_out: "red",
+        cancelled: "yellow",
+    };
+    const calendarEvents = filteredSlots.map((slot) => {
+        const productName = products.find((product) => product.id === slot.productId)?.name;
+        return {
+            id: slot.id,
+            startDate: slot.startsAt,
+            endDate: slot.endsAt ?? slot.startsAt,
+            title: productName ?? slot.productName ?? messages.tabs.slots.title,
+            description: slot.notes ?? "",
+            color: slotStatusToColor[slot.status],
+        };
+    });
+    const queries = [
+        productsQuery,
+        rulesQuery,
+        startTimesQuery,
+        slotsQuery,
+        closeoutsQuery,
+        pickupPointsQuery,
+    ];
+    const isLoading = queries.some((query) => query.isPending);
+    const isError = queries.some((query) => query.isError);
+    const refreshAll = async () => {
+        await queryClient.invalidateQueries({ queryKey: availabilityQueryKeys.all });
+    };
+    const handleRuleSubmit = onRuleSubmit ??
+        (async (payload, context) => {
+            if (context.isEditing) {
+                await ruleMutation.update.mutateAsync({
+                    id: requireEditingId(context),
+                    input: payload,
+                });
+                return;
+            }
+            await ruleMutation.create.mutateAsync(payload);
+        });
+    const handleStartTimeSubmit = onStartTimeSubmit ??
+        (async (payload, context) => {
+            if (context.isEditing) {
+                await startTimeMutation.update.mutateAsync({
+                    id: requireEditingId(context),
+                    input: payload,
+                });
+                return;
+            }
+            await startTimeMutation.create.mutateAsync(payload);
+        });
+    const handleSlotSubmit = onSlotSubmit ??
+        (async (payload, context) => {
+            if (context.isEditing) {
+                await slotMutation.update.mutateAsync({
+                    id: requireEditingId(context),
+                    input: payload,
+                });
+                return;
+            }
+            await slotMutation.create.mutateAsync(payload);
+        });
+    const closeRuleDialog = () => {
+        setRuleDialogOpen(false);
+        setEditingRule(undefined);
+    };
+    const closeStartTimeDialog = () => {
+        setStartTimeDialogOpen(false);
+        setEditingStartTime(undefined);
+    };
+    const closeSlotDialog = () => {
+        setSlotDialogOpen(false);
+        setEditingSlot(undefined);
+    };
+    const closeCloseoutDialog = () => {
+        setCloseoutDialogOpen(false);
+        setEditingCloseout(undefined);
+    };
+    const closePickupPointDialog = () => {
+        setPickupPointDialogOpen(false);
+        setEditingPickupPoint(undefined);
+    };
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: messages.title }), _jsx("p", { className: "text-sm text-muted-foreground", children: messages.description })] }), _jsxs("div", { className: "flex w-full flex-col gap-3 md:w-72", children: [_jsx(AsyncCombobox, { value: productFilter === "all" ? null : productFilter, onChange: (value) => setProductFilter(value ?? "all"), items: products, selectedItem: selectedProduct, getKey: (product) => product.id, getLabel: (product) => product.name, onSearchChange: setProductSearch, placeholder: messages.allProducts, emptyText: productsQuery.isFetching ? page.loading : page.filters.productSearchEmpty, triggerClassName: "w-full" }), pageSlots?.headerEnd] })] }), isLoading ? (_jsx(AvailabilityBodySkeleton, {})) : isError ? (_jsx("div", { className: "rounded-md border p-6 text-sm text-muted-foreground", children: page.loadFailed })) : (_jsxs(_Fragment, { children: [pageSlots?.beforeOverview, _jsx(AvailabilityOverview, { messages: messages, products: products, constrainedSlots: constrainedSlots, openSlotsCount: filteredSlots.filter((slot) => slot.status === "open").length, filteredRules: filteredRules, filteredPickupPoints: filteredPickupPoints, productsWithoutUpcomingDepartures: productsWithoutUpcomingDepartures, search: "", setSearch: () => { }, productFilter: productFilter, setProductFilter: setProductFilter, hasFilters: hasFilters, onClearFilters: () => setProductFilter("all"), onOpenSlot: onSlotOpen, onOpenProduct: onProductOpen, onJumpToSlots: () => setActiveTab("slots"), showFilters: false }), pageSlots?.afterOverview, pageSlots?.beforeTabs, _jsxs(Tabs, { value: activeTab, onValueChange: (value) => setActiveTab((value ?? "slots")), children: [_jsxs(TabsList, { className: "flex w-full justify-start overflow-x-auto", children: [_jsx(TabsTrigger, { value: "slots", children: messages.tabSlots }), _jsx(TabsTrigger, { value: "rules", children: messages.tabRules }), _jsx(TabsTrigger, { value: "start-times", children: messages.tabStartTimes }), _jsx(TabsTrigger, { value: "closeouts", children: messages.tabCloseouts }), _jsx(TabsTrigger, { value: "pickup-points", children: messages.tabPickupPoints }), _jsx(TabsTrigger, { value: "calendar", children: page.calendarTab })] }), _jsx(AvailabilitySlotsTab, { messages: messages, products: products, filteredSlots: filteredSlots, slotSelection: slotSelection, setSlotSelection: setSlotSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: onBulkUpdate, handleBulkDelete: onBulkDelete, onCreate: () => {
+                                    setEditingSlot(undefined);
+                                    setSlotDialogOpen(true);
+                                }, onOpenRoute: onSlotOpen, onEdit: (row) => {
+                                    setEditingSlot(row);
+                                    setSlotDialogOpen(true);
+                                }, toolbar: _jsx(SlotsToolbar, { value: slotStatusFilter, onValueChange: setSlotStatusFilter, dateRange: slotDateRange, onDateRangeChange: setSlotDateRange }) }), _jsx(AvailabilityRulesTab, { messages: messages, products: products, filteredRules: filteredRules, ruleSelection: ruleSelection, setRuleSelection: setRuleSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: onBulkUpdate, handleBulkDelete: onBulkDelete, onCreate: () => {
+                                    setEditingRule(undefined);
+                                    setRuleDialogOpen(true);
+                                }, onOpenRoute: onRuleOpen, onEdit: (row) => {
+                                    setEditingRule(row);
+                                    setRuleDialogOpen(true);
+                                }, toolbar: _jsx(ActiveToolbar, { value: ruleActiveFilter, onValueChange: setRuleActiveFilter }) }), _jsx(AvailabilityStartTimesTab, { messages: messages, products: products, filteredStartTimes: filteredStartTimes, startTimeSelection: startTimeSelection, setStartTimeSelection: setStartTimeSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: onBulkUpdate, handleBulkDelete: onBulkDelete, onCreate: () => {
+                                    setEditingStartTime(undefined);
+                                    setStartTimeDialogOpen(true);
+                                }, onOpenRoute: onStartTimeOpen, onEdit: (row) => {
+                                    setEditingStartTime(row);
+                                    setStartTimeDialogOpen(true);
+                                }, toolbar: _jsx(ActiveToolbar, { value: startTimeActiveFilter, onValueChange: setStartTimeActiveFilter }) }), _jsx(AvailabilityCloseoutsTab, { messages: messages, products: products, filteredCloseouts: filteredCloseouts, closeoutSelection: closeoutSelection, setCloseoutSelection: setCloseoutSelection, bulkActionTarget: bulkActionTarget, handleBulkDelete: onBulkDelete, onCreate: onCloseoutSubmit
+                                    ? () => {
+                                        setEditingCloseout(undefined);
+                                        setCloseoutDialogOpen(true);
+                                    }
+                                    : onCloseoutCreate, onEdit: (row) => {
+                                    if (onCloseoutSubmit) {
+                                        setEditingCloseout(row);
+                                        setCloseoutDialogOpen(true);
+                                        return;
+                                    }
+                                    onCloseoutEdit(row);
+                                }, toolbar: _jsx(DateRangeToolbar, { value: closeoutDateRange, onValueChange: setCloseoutDateRange }) }), _jsx(AvailabilityPickupPointsTab, { messages: messages, products: products, filteredPickupPoints: filteredPickupPoints, pickupPointSelection: pickupPointSelection, setPickupPointSelection: setPickupPointSelection, bulkActionTarget: bulkActionTarget, handleBulkUpdate: onBulkUpdate, handleBulkDelete: onBulkDelete, onCreate: onPickupPointSubmit
+                                    ? () => {
+                                        setEditingPickupPoint(undefined);
+                                        setPickupPointDialogOpen(true);
+                                    }
+                                    : onPickupPointCreate, onEdit: (row) => {
+                                    if (onPickupPointSubmit) {
+                                        setEditingPickupPoint(row);
+                                        setPickupPointDialogOpen(true);
+                                        return;
+                                    }
+                                    onPickupPointEdit(row);
+                                }, toolbar: _jsx(ActiveToolbar, { value: pickupPointActiveFilter, onValueChange: setPickupPointActiveFilter }) }), _jsx(TabsContent, { value: "calendar", className: "flex flex-col gap-4", children: _jsx(CalendarProvider, { events: calendarEvents, onEventClick: (event) => onSlotOpen(event.id), children: _jsx(CalendarView, { view: calendarView, onViewChange: setCalendarView, onDayClick: () => setCalendarView("day") }) }) })] }), pageSlots?.afterTabs] })), _jsx(AvailabilityRuleDialog, { messages: messages, open: ruleDialogOpen, onOpenChange: setRuleDialogOpen, rule: editingRule, products: products, onSubmit: handleRuleSubmit, onSuccess: () => {
+                    closeRuleDialog();
+                    void refreshAll();
+                } }), _jsx(AvailabilityStartTimeDialog, { messages: messages, open: startTimeDialogOpen, onOpenChange: setStartTimeDialogOpen, startTime: editingStartTime, products: products, onSubmit: handleStartTimeSubmit, onSuccess: () => {
+                    closeStartTimeDialog();
+                    void refreshAll();
+                } }), _jsx(AvailabilitySlotDialog, { messages: messages, open: slotDialogOpen, onOpenChange: setSlotDialogOpen, slot: editingSlot, products: products, rules: rules, startTimes: startTimes, onSubmit: handleSlotSubmit, onSuccess: () => {
+                    closeSlotDialog();
+                    void refreshAll();
+                } }), onCloseoutSubmit ? (_jsx(AvailabilityCloseoutDialog, { messages: messages, open: closeoutDialogOpen, onOpenChange: setCloseoutDialogOpen, closeout: editingCloseout, products: products, slots: availabilitySlots, onSubmit: onCloseoutSubmit, onSuccess: () => {
+                    closeCloseoutDialog();
+                    void refreshAll();
+                } })) : null, onPickupPointSubmit ? (_jsx(AvailabilityPickupPointDialog, { messages: messages, open: pickupPointDialogOpen, onOpenChange: setPickupPointDialogOpen, pickupPoint: editingPickupPoint, products: products, onSubmit: onPickupPointSubmit, onSuccess: () => {
+                    closePickupPointDialog();
+                    void refreshAll();
+                } })) : null, pageSlots?.dialogs] }));
+}
+function requireEditingId(context) {
+    if (!context.id)
+        throw new Error("AvailabilityPage edit submit requires an id.");
+    return context.id;
+}
+function SlotsToolbar({ value, onValueChange, dateRange, onDateRangeChange, }) {
+    const messages = useAvailabilityUiMessagesOrDefault();
+    const page = messages.page;
+    const hasFilters = value !== "all" || Boolean(dateRange?.from) || Boolean(dateRange?.to);
+    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "availability-slot-status", className: "text-xs", children: page.filters.statusLabel }), _jsxs(Select, { value: value, onValueChange: (nextValue) => onValueChange((nextValue ?? "all")), children: [_jsx(SelectTrigger, { id: "availability-slot-status", className: "w-full sm:w-44", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "all", children: page.filters.allStatuses }), _jsx(SelectItem, { value: "open", children: messages.statusOpen }), _jsx(SelectItem, { value: "closed", children: messages.statusClosed }), _jsx(SelectItem, { value: "sold_out", children: messages.statusSoldOut }), _jsx(SelectItem, { value: "cancelled", children: messages.statusCancelled })] }) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: page.filters.dateRangeLabel }), _jsx(DateRangePicker, { value: dateRange, onChange: onDateRangeChange, className: "w-full sm:w-72", placeholder: page.filters.anyDate })] }), hasFilters ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                    onValueChange("all");
+                    onDateRangeChange(null);
+                }, children: page.filters.reset })) : null] }));
+}
+function DateRangeToolbar({ value, onValueChange, }) {
+    const page = useAvailabilityUiMessagesOrDefault().page;
+    const hasFilters = Boolean(value?.from) || Boolean(value?.to);
+    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-xs", children: page.filters.dateRangeLabel }), _jsx(DateRangePicker, { value: value, onChange: onValueChange, className: "w-full sm:w-72", placeholder: page.filters.anyDate })] }), hasFilters ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => onValueChange(null), children: page.filters.reset })) : null] }));
+}
+function ActiveToolbar({ value, onValueChange, }) {
+    const page = useAvailabilityUiMessagesOrDefault().page;
+    return (_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "availability-active-filter", className: "text-xs", children: page.filters.stateLabel }), _jsxs(Select, { value: value, onValueChange: (nextValue) => onValueChange((nextValue ?? "all")), children: [_jsx(SelectTrigger, { id: "availability-active-filter", className: "w-full sm:w-44", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectItem, { value: "all", children: page.filters.allStates }), _jsx(SelectItem, { value: "active", children: page.filters.active }), _jsx(SelectItem, { value: "inactive", children: page.filters.inactive })] }) })] })] }), value !== "all" ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => onValueChange("all"), children: page.filters.reset })) : null] }));
+}