@voyantjs/availability-ui 0.21.1

package/dist/components/availability-dialogs.js

@@ -0,0 +1,341 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { booleanOptions, formatDateTime, NONE_VALUE, nullableNumber, nullableString, slotStatusOptions, toIsoDateTime, toLocalDateTimeInput, } from "@voyantjs/availability-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { zodResolver } from "../form-resolver.js";
+function getRuleFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.rule.validationProductRequired),
+        timezone: z.string().min(1, messages.dialogs.rule.validationTimezoneRequired),
+        recurrenceRule: z.string().min(1, messages.dialogs.rule.validationRecurrenceRequired),
+        maxCapacity: z.coerce.number().int().min(0),
+        maxPickupCapacity: z.string().optional(),
+        minTotalPax: z.string().optional(),
+        cutoffMinutes: z.string().optional(),
+        earlyBookingLimitMinutes: z.string().optional(),
+        active: z.boolean(),
+    });
+}
+export function AvailabilityRuleDialog(props) {
+    const ruleMessages = props.messages.dialogs.rule;
+    const ruleFormSchema = getRuleFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(ruleFormSchema),
+        defaultValues: {
+            productId: "",
+            timezone: "Europe/Bucharest",
+            recurrenceRule: "FREQ=DAILY;INTERVAL=1",
+            maxCapacity: 0,
+            maxPickupCapacity: "",
+            minTotalPax: "",
+            cutoffMinutes: "",
+            earlyBookingLimitMinutes: "",
+            active: true,
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.rule) {
+            form.reset({
+                productId: props.rule.productId,
+                timezone: props.rule.timezone,
+                recurrenceRule: props.rule.recurrenceRule,
+                maxCapacity: props.rule.maxCapacity,
+                maxPickupCapacity: props.rule.maxPickupCapacity?.toString() ?? "",
+                minTotalPax: "",
+                cutoffMinutes: props.rule.cutoffMinutes?.toString() ?? "",
+                earlyBookingLimitMinutes: "",
+                active: props.rule.active,
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.open, props.rule]);
+    const isEditing = Boolean(props.rule);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            timezone: values.timezone,
+            recurrenceRule: values.recurrenceRule,
+            maxCapacity: values.maxCapacity,
+            maxPickupCapacity: nullableNumber(values.maxPickupCapacity),
+            minTotalPax: nullableNumber(values.minTotalPax),
+            cutoffMinutes: nullableNumber(values.cutoffMinutes),
+            earlyBookingLimitMinutes: nullableNumber(values.earlyBookingLimitMinutes),
+            active: values.active,
+        }, { isEditing, id: props.rule?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? ruleMessages.editTitle : ruleMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: ruleMessages.productLabel, placeholder: ruleMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), form.formState.errors.productId ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.productId.message })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.timezoneLabel }), _jsx(Input, { ...form.register("timezone"), placeholder: ruleMessages.timezonePlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.maxCapacityLabel }), _jsx(Input, { ...form.register("maxCapacity"), type: "number", min: 0 })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.recurrenceRuleLabel }), _jsx(Textarea, { ...form.register("recurrenceRule"), placeholder: ruleMessages.recurrenceRulePlaceholder, className: "font-mono text-xs" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.maxPickupCapacityLabel }), _jsx(Input, { ...form.register("maxPickupCapacity"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.minimumTotalPaxLabel }), _jsx(Input, { ...form.register("minTotalPax"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.cutoffMinutesLabel }), _jsx(Input, { ...form.register("cutoffMinutes"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: ruleMessages.earlyBookingLimitMinutesLabel }), _jsx(Input, { ...form.register("earlyBookingLimitMinutes"), type: "number", min: 0 })] })] }), _jsx(SwitchField, { title: ruleMessages.activeTitle, description: ruleMessages.activeDescription, checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) })] }), _jsx(DialogActions, { cancel: ruleMessages.cancel, save: ruleMessages.save, create: ruleMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}
+function getStartTimeFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.startTime.validationProductRequired),
+        label: z.string().optional(),
+        startTimeLocal: z.string().min(1, messages.dialogs.startTime.validationStartTimeRequired),
+        durationMinutes: z.string().optional(),
+        sortOrder: z.coerce.number().int(),
+        active: z.boolean(),
+    });
+}
+export function AvailabilityStartTimeDialog(props) {
+    const startTimeMessages = props.messages.dialogs.startTime;
+    const startTimeFormSchema = getStartTimeFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(startTimeFormSchema),
+        defaultValues: {
+            productId: "",
+            label: "",
+            startTimeLocal: "09:00",
+            durationMinutes: "",
+            sortOrder: 0,
+            active: true,
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.startTime) {
+            form.reset({
+                productId: props.startTime.productId,
+                label: props.startTime.label ?? "",
+                startTimeLocal: props.startTime.startTimeLocal,
+                durationMinutes: props.startTime.durationMinutes?.toString() ?? "",
+                sortOrder: props.startTime.sortOrder,
+                active: props.startTime.active,
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.open, props.startTime]);
+    const isEditing = Boolean(props.startTime);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            label: nullableString(values.label),
+            startTimeLocal: values.startTimeLocal,
+            durationMinutes: nullableNumber(values.durationMinutes),
+            sortOrder: values.sortOrder,
+            active: values.active,
+        }, { isEditing, id: props.startTime?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? startTimeMessages.editTitle : startTimeMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: startTimeMessages.productLabel, placeholder: startTimeMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.labelLabel }), _jsx(Input, { ...form.register("label"), placeholder: startTimeMessages.labelPlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.startTimeLabel }), _jsx(Input, { ...form.register("startTimeLocal"), type: "time" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.durationMinutesLabel }), _jsx(Input, { ...form.register("durationMinutes"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: startTimeMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] })] }), _jsx(SwitchField, { title: startTimeMessages.activeTitle, description: startTimeMessages.activeDescription, checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) })] }), _jsx(DialogActions, { cancel: startTimeMessages.cancel, save: startTimeMessages.save, create: startTimeMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}
+function getSlotFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.slot.validationProductRequired),
+        availabilityRuleId: z.string().optional(),
+        startTimeId: z.string().optional(),
+        dateLocal: z.string().min(1, messages.dialogs.slot.validationDateRequired),
+        startsAt: z.string().min(1, messages.dialogs.slot.validationStartsAtRequired),
+        endsAt: z.string().optional(),
+        timezone: z.string().min(1, messages.dialogs.slot.validationTimezoneRequired),
+        status: z.enum(["open", "closed", "sold_out", "cancelled"]),
+        unlimited: z.boolean(),
+        initialPax: z.string().optional(),
+        remainingPax: z.string().optional(),
+        initialPickups: z.string().optional(),
+        remainingPickups: z.string().optional(),
+        remainingResources: z.string().optional(),
+        pastCutoff: z.boolean(),
+        tooEarly: z.boolean(),
+        notes: z.string().optional(),
+    });
+}
+export function AvailabilitySlotDialog(props) {
+    const slotMessages = props.messages.dialogs.slot;
+    const slotFormSchema = getSlotFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(slotFormSchema),
+        defaultValues: {
+            productId: "",
+            availabilityRuleId: NONE_VALUE,
+            startTimeId: NONE_VALUE,
+            dateLocal: "",
+            startsAt: "",
+            endsAt: "",
+            timezone: "Europe/Bucharest",
+            status: "open",
+            unlimited: false,
+            initialPax: "",
+            remainingPax: "",
+            initialPickups: "",
+            remainingPickups: "",
+            remainingResources: "",
+            pastCutoff: false,
+            tooEarly: false,
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.slot) {
+            form.reset({
+                productId: props.slot.productId,
+                availabilityRuleId: props.slot.availabilityRuleId ?? NONE_VALUE,
+                startTimeId: props.slot.startTimeId ?? NONE_VALUE,
+                dateLocal: props.slot.dateLocal,
+                startsAt: toLocalDateTimeInput(props.slot.startsAt),
+                endsAt: toLocalDateTimeInput(props.slot.endsAt),
+                timezone: props.slot.timezone,
+                status: props.slot.status,
+                unlimited: props.slot.unlimited,
+                initialPax: props.slot.initialPax?.toString() ?? "",
+                remainingPax: props.slot.remainingPax?.toString() ?? "",
+                initialPickups: "",
+                remainingPickups: "",
+                remainingResources: "",
+                pastCutoff: false,
+                tooEarly: false,
+                notes: props.slot.notes ?? "",
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.open, props.slot]);
+    const selectedProductId = form.watch("productId");
+    const filteredRules = props.rules.filter((rule) => rule.productId === selectedProductId);
+    const filteredStartTimes = props.startTimes.filter((startTime) => startTime.productId === selectedProductId);
+    const isEditing = Boolean(props.slot);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            availabilityRuleId: values.availabilityRuleId === NONE_VALUE ? null : (values.availabilityRuleId ?? null),
+            startTimeId: values.startTimeId === NONE_VALUE ? null : (values.startTimeId ?? null),
+            dateLocal: values.dateLocal,
+            startsAt: new Date(values.startsAt).toISOString(),
+            endsAt: toIsoDateTime(values.endsAt),
+            timezone: values.timezone,
+            status: values.status,
+            unlimited: values.unlimited,
+            initialPax: nullableNumber(values.initialPax),
+            remainingPax: nullableNumber(values.remainingPax),
+            initialPickups: nullableNumber(values.initialPickups),
+            remainingPickups: nullableNumber(values.remainingPickups),
+            remainingResources: nullableNumber(values.remainingResources),
+            pastCutoff: values.pastCutoff,
+            tooEarly: values.tooEarly,
+            notes: nullableString(values.notes),
+        }, { isEditing, id: props.slot?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? slotMessages.editTitle : slotMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: slotMessages.productLabel, placeholder: slotMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.ruleLabel }), _jsxs(Select, { value: form.watch("availabilityRuleId") ?? NONE_VALUE, onValueChange: (value) => form.setValue("availabilityRuleId", value ?? NONE_VALUE), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: slotMessages.optionalRulePlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE_VALUE, children: slotMessages.noRule }), filteredRules.map((rule) => (_jsxs(SelectItem, { value: rule.id, children: [rule.timezone, " \u00B7 ", rule.recurrenceRule] }, rule.id)))] })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.startTimeLabel }), _jsxs(Select, { value: form.watch("startTimeId") ?? NONE_VALUE, onValueChange: (value) => form.setValue("startTimeId", value ?? NONE_VALUE), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: slotMessages.optionalStartTimePlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE_VALUE, children: slotMessages.noStartTime }), filteredStartTimes.map((startTime) => (_jsx(SelectItem, { value: startTime.id, children: startTime.label ?? startTime.startTimeLocal }, startTime.id)))] })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.dateLabel }), _jsx(Input, { ...form.register("dateLocal"), type: "date" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.timezoneLabel }), _jsx(Input, { ...form.register("timezone"), placeholder: slotMessages.timezonePlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.startsAtLabel }), _jsx(Input, { ...form.register("startsAt"), type: "datetime-local" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.endsAtLabel }), _jsx(Input, { ...form.register("endsAt"), type: "datetime-local" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.statusLabel }), _jsxs(Select, { items: slotStatusOptions, value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: slotStatusOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: {
+                                                                    open: props.messages.statusOpen,
+                                                                    closed: props.messages.statusClosed,
+                                                                    sold_out: props.messages.statusSoldOut,
+                                                                    cancelled: props.messages.statusCancelled,
+                                                                }[option.value] }, option.value))) })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.unlimitedLabel }), _jsxs(Select, { items: booleanOptions, value: String(form.watch("unlimited")), onValueChange: (value) => form.setValue("unlimited", value === "true"), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: booleanOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.value === "true" ? slotMessages.yes : slotMessages.no }, option.value))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.initialPaxLabel }), _jsx(Input, { ...form.register("initialPax"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.remainingPaxLabel }), _jsx(Input, { ...form.register("remainingPax"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.remainingResourcesLabel }), _jsx(Input, { ...form.register("remainingResources"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.initialPickupsLabel }), _jsx(Input, { ...form.register("initialPickups"), type: "number", min: 0 })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.remainingPickupsLabel }), _jsx(Input, { ...form.register("remainingPickups"), type: "number", min: 0 })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(SwitchField, { title: slotMessages.pastCutoffTitle, description: slotMessages.pastCutoffDescription, checked: form.watch("pastCutoff"), onCheckedChange: (checked) => form.setValue("pastCutoff", checked) }), _jsx(SwitchField, { title: slotMessages.tooEarlyTitle, description: slotMessages.tooEarlyDescription, checked: form.watch("tooEarly"), onCheckedChange: (checked) => form.setValue("tooEarly", checked) })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: slotMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: slotMessages.notesPlaceholder })] })] }), _jsx(DialogActions, { cancel: slotMessages.cancel, save: slotMessages.save, create: slotMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}
+function getCloseoutFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.closeout.validationProductRequired),
+        slotId: z.string().optional(),
+        dateLocal: z.string().min(1, messages.dialogs.closeout.validationDateRequired),
+        reason: z.string().optional(),
+    });
+}
+export function AvailabilityCloseoutDialog(props) {
+    const closeoutMessages = props.messages.dialogs.closeout;
+    const closeoutFormSchema = getCloseoutFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(closeoutFormSchema),
+        defaultValues: {
+            productId: "",
+            slotId: NONE_VALUE,
+            dateLocal: "",
+            reason: "",
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.closeout) {
+            form.reset({
+                productId: props.closeout.productId,
+                slotId: props.closeout.slotId ?? NONE_VALUE,
+                dateLocal: props.closeout.dateLocal,
+                reason: props.closeout.reason ?? "",
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.closeout, props.open]);
+    const selectedProductId = form.watch("productId");
+    const filteredSlots = props.slots.filter((slot) => slot.productId === selectedProductId);
+    const isEditing = Boolean(props.closeout);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            slotId: values.slotId === NONE_VALUE ? null : (values.slotId ?? null),
+            dateLocal: values.dateLocal,
+            reason: nullableString(values.reason),
+        }, { isEditing, id: props.closeout?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? closeoutMessages.editTitle : closeoutMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: closeoutMessages.productLabel, placeholder: closeoutMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: closeoutMessages.slotLabel }), _jsxs(Select, { value: form.watch("slotId") ?? NONE_VALUE, onValueChange: (value) => form.setValue("slotId", value ?? NONE_VALUE), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: closeoutMessages.optionalSlotPlaceholder }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NONE_VALUE, children: closeoutMessages.productLevelOption }), filteredSlots.map((slot) => (_jsxs(SelectItem, { value: slot.id, children: [slot.dateLocal, " \u00B7 ", formatDateTime(slot.startsAt)] }, slot.id)))] })] })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: closeoutMessages.dateLabel }), _jsx(DatePicker, { value: form.watch("dateLocal") || null, onChange: (nextValue) => form.setValue("dateLocal", nextValue ?? "", {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            }), placeholder: closeoutMessages.datePlaceholder, className: "w-full" })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: closeoutMessages.reasonLabel }), _jsx(Textarea, { ...form.register("reason"), placeholder: closeoutMessages.reasonPlaceholder })] })] }), _jsx(DialogActions, { cancel: closeoutMessages.cancel, save: closeoutMessages.save, create: closeoutMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}
+function getPickupPointFormSchema(messages) {
+    return z.object({
+        productId: z.string().min(1, messages.dialogs.pickupPoint.validationProductRequired),
+        name: z.string().min(1, messages.dialogs.pickupPoint.validationNameRequired),
+        description: z.string().optional(),
+        locationText: z.string().optional(),
+        active: z.boolean(),
+    });
+}
+export function AvailabilityPickupPointDialog(props) {
+    const pickupPointMessages = props.messages.dialogs.pickupPoint;
+    const pickupPointFormSchema = getPickupPointFormSchema(props.messages);
+    const form = useForm({
+        resolver: zodResolver(pickupPointFormSchema),
+        defaultValues: {
+            productId: "",
+            name: "",
+            description: "",
+            locationText: "",
+            active: true,
+        },
+    });
+    useEffect(() => {
+        if (props.open && props.pickupPoint) {
+            form.reset({
+                productId: props.pickupPoint.productId,
+                name: props.pickupPoint.name,
+                description: props.pickupPoint.description ?? "",
+                locationText: props.pickupPoint.locationText ?? "",
+                active: props.pickupPoint.active,
+            });
+        }
+        else if (props.open) {
+            form.reset();
+        }
+    }, [form, props.open, props.pickupPoint]);
+    const isEditing = Boolean(props.pickupPoint);
+    const onSubmit = async (values) => {
+        await props.onSubmit({
+            productId: values.productId,
+            name: values.name,
+            description: nullableString(values.description),
+            locationText: nullableString(values.locationText),
+            active: values.active,
+        }, { isEditing, id: props.pickupPoint?.id });
+        props.onSuccess();
+    };
+    return (_jsx(Dialog, { open: props.open, onOpenChange: props.onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? pickupPointMessages.editTitle : pickupPointMessages.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductSelect, { label: pickupPointMessages.productLabel, placeholder: pickupPointMessages.selectProductPlaceholder, products: props.products, value: form.watch("productId"), onValueChange: (value) => form.setValue("productId", value ?? "") }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: pickupPointMessages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: pickupPointMessages.namePlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: pickupPointMessages.locationTextLabel }), _jsx(Input, { ...form.register("locationText"), placeholder: pickupPointMessages.locationTextPlaceholder })] }), _jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: pickupPointMessages.descriptionLabel }), _jsx(Textarea, { ...form.register("description"), placeholder: pickupPointMessages.descriptionPlaceholder })] }), _jsx(SwitchField, { title: pickupPointMessages.activeTitle, description: pickupPointMessages.activeDescription, checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) })] }), _jsx(DialogActions, { cancel: pickupPointMessages.cancel, save: pickupPointMessages.save, create: pickupPointMessages.create, isEditing: isEditing, isSubmitting: form.formState.isSubmitting, onCancel: () => props.onOpenChange(false) })] })] }) }));
+}
+function ProductSelect({ label, placeholder, products, value, onValueChange, }) {
+    return (_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { children: label }), _jsxs(Select, { items: products.map((product) => ({ label: product.name, value: product.id })), value: value, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: products.map((product) => (_jsx(SelectItem, { value: product.id, children: product.name }, product.id))) })] })] }));
+}
+function SwitchField({ title, description, checked, onCheckedChange, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: title }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] }), _jsx(Switch, { checked: checked, onCheckedChange: onCheckedChange })] }));
+}
+function DialogActions({ cancel, save, create, isEditing, isSubmitting, onCancel, }) {
+    return (_jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancel }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? save : create] })] }));
+}

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

@@ -0,0 +1,39 @@
+import type { AvailabilityPickupPointRow, AvailabilityRuleRow, AvailabilitySlotRow, ProductOption } from "@voyantjs/availability-react";
+import { type AvailabilityColumnsMessages } from "./availability-columns.js";
+export interface AvailabilityOverviewMessages extends AvailabilityColumnsMessages {
+    allProducts: string;
+    clearFilters: string;
+    searchPlaceholder: string;
+    overview: {
+        openSlotsTitle: string;
+        openSlotsDescription: string;
+        constrainedSlotsTitle: string;
+        constrainedSlotsDescription: string;
+        activeRulesTitle: string;
+        activeRulesDescription: string;
+        pickupPointsTitle: string;
+        pickupPointsDescription: string;
+        capacityWatchlistTitle: string;
+        capacityWatchlistEmpty: string;
+        coverageGapsTitle: string;
+        coverageGapsEmpty: string;
+        coverageGapDescription: string;
+    };
+}
+export declare function AvailabilityOverview({ messages, products, constrainedSlots, filteredRules, filteredPickupPoints, productsWithoutActiveRules, search, setSearch, productFilter, setProductFilter, hasFilters, onClearFilters, onOpenSlot, onOpenProduct, }: {
+    messages: AvailabilityOverviewMessages;
+    products: ProductOption[];
+    constrainedSlots: AvailabilitySlotRow[];
+    filteredRules: AvailabilityRuleRow[];
+    filteredPickupPoints: AvailabilityPickupPointRow[];
+    productsWithoutActiveRules: ProductOption[];
+    search: string;
+    setSearch: (value: string) => void;
+    productFilter: string;
+    setProductFilter: (value: string) => void;
+    hasFilters: boolean;
+    onClearFilters: () => void;
+    onOpenSlot: (slotId: string) => void;
+    onOpenProduct: (productId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=availability-overview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"availability-overview.d.ts","sourceRoot":"","sources":["../../src/components/availability-overview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,0BAA0B,EAC1B,mBAAmB,EACnB,mBAAmB,EACnB,aAAa,EACd,MAAM,8BAA8B,CAAA;AAiBrC,OAAO,EAAE,KAAK,2BAA2B,EAAsB,MAAM,2BAA2B,CAAA;AAEhG,MAAM,WAAW,4BAA6B,SAAQ,2BAA2B;IAC/E,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,EAAE;QACR,cAAc,EAAE,MAAM,CAAA;QACtB,oBAAoB,EAAE,MAAM,CAAA;QAC5B,qBAAqB,EAAE,MAAM,CAAA;QAC7B,2BAA2B,EAAE,MAAM,CAAA;QACnC,gBAAgB,EAAE,MAAM,CAAA;QACxB,sBAAsB,EAAE,MAAM,CAAA;QAC9B,iBAAiB,EAAE,MAAM,CAAA;QACzB,uBAAuB,EAAE,MAAM,CAAA;QAC/B,sBAAsB,EAAE,MAAM,CAAA;QAC9B,sBAAsB,EAAE,MAAM,CAAA;QAC9B,iBAAiB,EAAE,MAAM,CAAA;QACzB,iBAAiB,EAAE,MAAM,CAAA;QACzB,sBAAsB,EAAE,MAAM,CAAA;KAC/B,CAAA;CACF;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,0BAA0B,EAC1B,MAAM,EACN,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,UAAU,EACV,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,4BAA4B,CAAA;IACtC,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,gBAAgB,EAAE,mBAAmB,EAAE,CAAA;IACvC,aAAa,EAAE,mBAAmB,EAAE,CAAA;IACpC,oBAAoB,EAAE,0BAA0B,EAAE,CAAA;IAClD,0BAA0B,EAAE,aAAa,EAAE,CAAA;IAC3C,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,2CA4HA"}

package/dist/components/availability-overview.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatDateTime, productNameById } from "@voyantjs/availability-react";
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, OverviewMetric, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { CalendarDays, Clock3, Package, Search, Truck } from "lucide-react";
+import { getSlotStatusLabel } from "./availability-columns.js";
+export function AvailabilityOverview({ messages, products, constrainedSlots, filteredRules, filteredPickupPoints, productsWithoutActiveRules, search, setSearch, productFilter, setProductFilter, hasFilters, onClearFilters, onOpenSlot, onOpenProduct, }) {
+    const openSlotsCount = constrainedSlots.filter((slot) => slot.status === "open").length;
+    const activeRulesCount = filteredRules.filter((rule) => rule.active).length;
+    const activePickupPointsCount = filteredPickupPoints.filter((pickupPoint) => pickupPoint.active).length;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(OverviewMetric, { title: messages.overview.openSlotsTitle, value: openSlotsCount, description: messages.overview.openSlotsDescription, icon: CalendarDays }), _jsx(OverviewMetric, { title: messages.overview.constrainedSlotsTitle, value: constrainedSlots.length, description: messages.overview.constrainedSlotsDescription, icon: Clock3 }), _jsx(OverviewMetric, { title: messages.overview.activeRulesTitle, value: activeRulesCount, description: messages.overview.activeRulesDescription, icon: Package }), _jsx(OverviewMetric, { title: messages.overview.pickupPointsTitle, value: activePickupPointsCount, description: messages.overview.pickupPointsDescription, icon: Truck })] }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-2", children: [_jsxs(Card, { size: "sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.overview.capacityWatchlistTitle }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: constrainedSlots.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: messages.overview.capacityWatchlistEmpty })) : (constrainedSlots.slice(0, 4).map((slot) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onOpenSlot(slot.id), children: [_jsxs("div", { className: "font-medium", children: [productNameById(products, slot.productId, slot.productName), " \u00B7 ", slot.dateLocal] }), _jsxs("div", { className: "text-muted-foreground", children: [formatDateTime(slot.startsAt), " \u00B7 ", getSlotStatusLabel(slot.status, messages), " \u00B7", " ", messages.remainingPaxLabel, ": ", slot.remainingPax ?? messages.details.noValue] })] }, slot.id)))) })] }), _jsxs(Card, { size: "sm", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.overview.coverageGapsTitle }) }), _jsx(CardContent, { className: "space-y-3 text-sm", children: productsWithoutActiveRules.length === 0 ? (_jsx("p", { className: "text-muted-foreground", children: messages.overview.coverageGapsEmpty })) : (productsWithoutActiveRules.slice(0, 4).map((product) => (_jsxs("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onOpenProduct(product.id), children: [_jsx("div", { className: "font-medium", children: product.name }), _jsx("div", { className: "text-muted-foreground", children: messages.overview.coverageGapDescription })] }, product.id)))) })] })] }), _jsxs("div", { className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between", children: [_jsxs("div", { className: "flex flex-1 flex-col gap-3 md:flex-row md:items-center", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: messages.searchPlaceholder, value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: productFilter, onValueChange: (value) => setProductFilter(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-full md:w-56", children: _jsx(SelectValue, { placeholder: messages.allProducts }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: messages.allProducts }), products.map((product) => (_jsx(SelectItem, { value: product.id, children: product.name }, product.id)))] })] })] }), hasFilters ? (_jsx(Button, { variant: "outline", onClick: onClearFilters, children: messages.clearFilters })) : null] })] }));
+}

package/dist/components/availability-section-header.d.ts

@@ -0,0 +1,8 @@
+export interface AvailabilitySectionHeaderProps {
+    actionLabel: string;
+    description: string;
+    onAction: () => void;
+    title: string;
+}
+export declare function AvailabilitySectionHeader({ actionLabel, description, onAction, title, }: AvailabilitySectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=availability-section-header.d.ts.map

package/dist/components/availability-section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-section-header.d.ts","sourceRoot":"","sources":["../../src/components/availability-section-header.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,yBAAyB,CAAC,EACxC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,KAAK,GACN,EAAE,8BAA8B,2CAahC"}

package/dist/components/availability-section-header.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components";
+import { Plus } from "lucide-react";
+export function AvailabilitySectionHeader({ actionLabel, description, onAction, title, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), _jsxs(Button, { onClick: onAction, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), actionLabel] })] }));
+}

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

@@ -0,0 +1,6 @@
+export declare function AvailabilityBodySkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function AvailabilityPageSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function AvailabilityRuleDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function AvailabilityStartTimeDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function AvailabilitySlotDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=availability-skeletons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"availability-skeletons.d.ts","sourceRoot":"","sources":["../../src/components/availability-skeletons.tsx"],"names":[],"mappings":"AAWA,wBAAgB,wBAAwB,4CAqEvC;AAED,wBAAgB,wBAAwB,4CAUvC;AAED,wBAAgB,8BAA8B,4CAmE7C;AAED,wBAAgB,mCAAmC,4CAqDlD;AAED,wBAAgB,8BAA8B,4CA6D7C"}

package/dist/components/availability-skeletons.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from "@voyantjs/ui/components/card";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+export function AvailabilityBodySkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "h-9 w-full max-w-sm" }), _jsx(Skeleton, { className: "h-9 w-44" })] }), _jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-2", children: _jsx(Skeleton, { className: "h-3.5 w-28" }) }), _jsxs(CardContent, { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-20" }), _jsx(Skeleton, { className: "h-3 w-40" })] })] }, i))) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-52" }) }), _jsx(CardContent, { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-32" })] }, i))) })] }), _jsxs("div", { className: "flex items-center gap-1 border-b", children: [_jsx(Skeleton, { className: "h-9 w-20" }), _jsx(Skeleton, { className: "h-9 w-20" }), _jsx(Skeleton, { className: "h-9 w-28" }), _jsx(Skeleton, { className: "h-9 w-24" }), _jsx(Skeleton, { className: "h-9 w-32" })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Date" }), _jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Remaining" }), _jsx(TableHead, { children: "Capacity" })] }) }), _jsx(SkeletonTableRows, { rows: 6, columns: 5, columnWidths: ["w-24", "w-40", "w-16", "w-16", "w-16"] })] }) })] }));
+}
+export function AvailabilityPageSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-40" }), _jsx(Skeleton, { className: "h-4 w-96" })] }), _jsx(AvailabilityBodySkeleton, {})] }));
+}
+export function AvailabilityRuleDetailSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-9 w-9 rounded-md" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-48" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-5 w-14 rounded-full" }), _jsx(Skeleton, { className: "h-5 w-24 rounded" })] })] }), _jsx(Skeleton, { className: "h-9 w-32" }), _jsx(Skeleton, { className: "h-9 w-24" })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-24" }) }), _jsxs(CardContent, { className: "grid gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-20" }), _jsx(Skeleton, { className: "h-3.5 w-40" })] }), _jsx(Skeleton, { className: "h-3.5 w-24" }), _jsx(Skeleton, { className: "h-24 w-full rounded-md" })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-32" }) }), _jsx(CardContent, { className: "grid gap-3", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-32" }), _jsx(Skeleton, { className: "h-3.5 w-16" })] }, i))) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx(Skeleton, { className: "h-5 w-36" })] }), _jsx(CardContent, { className: "space-y-2", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }, i))) })] })] }));
+}
+export function AvailabilityStartTimeDetailSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-9 w-9 rounded-md" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-56" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-5 w-16 rounded" }), _jsx(Skeleton, { className: "h-5 w-14 rounded-full" })] })] }), _jsx(Skeleton, { className: "h-9 w-32" }), _jsx(Skeleton, { className: "h-9 w-24" })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-40" }) }), _jsx(CardContent, { className: "grid gap-3", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-24" }), _jsx(Skeleton, { className: "h-3.5 w-32" })] }, i))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx(Skeleton, { className: "h-5 w-36" })] }), _jsx(CardContent, { className: "space-y-3", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("div", { className: "rounded-md border p-3 space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-3 w-32" })] }, i))) })] })] })] }));
+}
+export function AvailabilitySlotDetailSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "h-9 w-9 rounded-md" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-7 w-72" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-5 w-16 rounded-full" }), _jsx(Skeleton, { className: "h-5 w-24 rounded" })] })] }), _jsx(Skeleton, { className: "h-9 w-32" }), _jsx(Skeleton, { className: "h-9 w-24" })] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsx(PairListCard, { titleWidth: "w-24", rows: 7 }), _jsx(PairListCard, { titleWidth: "w-28", rows: 7 })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx(Skeleton, { className: "h-5 w-36" })] }), _jsx(CardContent, { className: "space-y-3", children: Array.from({ length: 3 }).map((_, i) => (_jsxs("div", { className: "rounded-md border p-3 space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-3 w-56" }), _jsx(Skeleton, { className: "h-3 w-44" })] }, i))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Skeleton, { className: "h-4 w-4" }), _jsx(Skeleton, { className: "h-5 w-44" })] }), _jsx(CardContent, { className: "space-y-2", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }, i))) })] })] }));
+}
+function PairListCard({ titleWidth, rows }) {
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: `h-5 ${titleWidth}` }) }), _jsx(CardContent, { className: "grid gap-3", children: Array.from({ length: rows }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-28" }), _jsx(Skeleton, { className: "h-3.5 w-32" })] }, i))) })] }));
+}
+function SkeletonTableRows({ rows = 6, columns = 4, columnWidths, }) {
+    return (_jsx(TableBody, { children: Array.from({ length: rows }).map((_, r) => (_jsx(TableRow
+        // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholders
+        , { children: Array.from({ length: columns }).map((__, c) => {
+                const width = columnWidths?.[c] ?? (c === 0 ? "w-2/3" : c === columns - 1 ? "w-16" : "w-1/2");
+                return (_jsx(TableCell
+                // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholders
+                , { children: _jsx(Skeleton, { className: `h-4 ${width}` }) }, c));
+            }) }, r))) }));
+}