@wealthx/shadcn 1.5.22 → 1.5.23

package/dist/{chunk-NEMWMXGL.mjs → chunk-3HFOSFOM.mjs}

@@ -64,12 +64,17 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ClientSearch({
   clients,
   value,
-  onValueChange
+  onValueChange,
+  onSearch,
+  isSearching,
+  hasMore,
+  onLoadMore,
+  isLoadingMore
 }) {
   const [query, setQuery] = React.useState("");
   const [open, setOpen] = React.useState(false);
   const selected = clients.find((c) => c.id === value);
-  const filtered = clients.filter((c) => {
+  const filtered = onSearch ? clients : clients.filter((c) => {
     const q = query.toLowerCase();
     return c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q);
   });
@@ -79,67 +84,79 @@ function ClientSearch({
       {
         value: selected ? selected.name : query,
         onChange: (e) => {
-          setQuery(e.target.value);
+          const v = e.target.value;
+          setQuery(v);
           if (selected) onValueChange(void 0);
-          setOpen(e.target.value.length > 0);
+          setOpen(v.length > 0);
+          onSearch == null ? void 0 : onSearch(v);
         },
         onBlur: () => setTimeout(() => setOpen(false), 150),
         placeholder: "Search by name or email\u2026",
         autoComplete: "off"
       }
     ),
-    open && (filtered.length > 0 || query.length > 0) && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full border border-border bg-popover shadow-md", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No clients found." }) : filtered.map((c) => /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        className: "h-auto w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-primary/5",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => {
-          onValueChange(c.id);
-          setQuery("");
-          setOpen(false);
+    open && (filtered.length > 0 || query.length > 0 || isSearching) && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 max-h-64 w-full overflow-y-auto border border-border bg-popover shadow-md", children: isSearching ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Searching..." }) : filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No clients found." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      filtered.map((c) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          className: "h-auto w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-primary/5",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            onValueChange(c.id);
+            setQuery("");
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: c.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: c.email })
+          ]
         },
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: c.name }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: c.email })
-        ]
-      },
-      c.id
-    )) })
+        c.id
+      )),
+      hasMore && onLoadMore && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "w-full text-sm text-primary",
+          disabled: isLoadingMore,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: onLoadMore,
+          children: isLoadingMore ? "Loading..." : "Load more"
+        }
+      )
+    ] }) })
   ] });
 }
-var FORMAT_OPTIONS = [
-  { value: "call", label: "Call", icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }) },
-  {
+function getFormatOptions(platform) {
+  const call = {
+    value: "call",
+    label: "Call",
+    icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" })
+  };
+  const googleMeet = {
     value: "google-meet",
     label: "Google Meet",
     icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
-  },
-  {
+  };
+  const msTeams = {
     value: "microsoft-teams",
     label: "MS Teams",
     icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" })
-  },
-  {
-    value: "offline",
-    label: "Offline",
-    icon: /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" })
-  }
-];
-var CLIENT_FORMAT_OPTIONS = [
-  { value: "call", label: "Call", icon: /* @__PURE__ */ jsx(Phone, { className: "h-4 w-4" }) },
-  {
-    value: "online",
-    label: "Online Meeting",
-    icon: /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" })
-  },
-  {
+  };
+  const offline = {
     value: "offline",
     label: "Offline Meeting",
     icon: /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" })
-  }
-];
+  };
+  if (platform === "google-meet") return [call, googleMeet, offline];
+  if (platform === "microsoft-teams") return [call, msTeams, offline];
+  if (platform === "any") return [call, googleMeet, msTeams, offline];
+  return [call, offline];
+}
 function MeetingFormatSection({
   format,
   onFormatChange,
@@ -269,6 +286,11 @@ function AppointmentBookDialog({
   open,
   onOpenChange,
   clients = [],
+  onSearchClients,
+  isSearchingClients,
+  hasMoreClients,
+  onLoadMoreClients,
+  isLoadingMoreClients,
   meetingTypes = [],
   amSlots,
   pmSlots,
@@ -279,11 +301,12 @@ function AppointmentBookDialog({
   advisorInfo,
   initialClientId,
   defaultMeetingFormat,
+  onlinePlatform,
   guestInfo,
   onBook
 }) {
   var _a, _b, _c;
-  const isClientMode = clients.length === 0;
+  const isClientMode = clients.length === 0 && !onSearchClients;
   const showGuestForm = isClientMode && !((guestInfo == null ? void 0 : guestInfo.name) && (guestInfo == null ? void 0 : guestInfo.email));
   const disabledDayOfWeek = React.useMemo(
     () => schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP[d.day]).filter((n) => n !== void 0),
@@ -375,7 +398,12 @@ function AppointmentBookDialog({
           {
             clients,
             value: clientId,
-            onValueChange: setClientId
+            onValueChange: setClientId,
+            onSearch: onSearchClients,
+            isSearching: isSearchingClients,
+            hasMore: hasMoreClients,
+            onLoadMore: onLoadMoreClients,
+            isLoadingMore: isLoadingMoreClients
           }
         )
       ] }),
@@ -433,7 +461,7 @@ function AppointmentBookDialog({
           )
         ] })
       ] }),
-      !(isClientMode && defaultMeetingFormat) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsx(Label, { children: "Meeting format" }),
         /* @__PURE__ */ jsx(
           MeetingFormatSection,
@@ -447,7 +475,7 @@ function AppointmentBookDialog({
             advisorOfficeAddress,
             clientHomeAddress,
             isClientMode,
-            formatOptions: isClientMode ? CLIENT_FORMAT_OPTIONS : FORMAT_OPTIONS
+            formatOptions: getFormatOptions(onlinePlatform)
           }
         )
       ] }),

package/dist/{chunk-F3MIRXRF.mjs → chunk-ONYADWSO.mjs}

@@ -1,7 +1,7 @@
 import {
   AppointmentConfirmDialog,
   AppointmentRescheduleDialog
-} from "./chunk-SET6GFGL.mjs";
+} from "./chunk-ZSMQZ3VN.mjs";
 import {
   Sheet,
   SheetContent
@@ -86,6 +86,9 @@ function AppointmentDetailSheet({
   clientProfile,
   amSlots,
   pmSlots,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onAccept,
   onDecline,
   onReschedule,
@@ -286,6 +289,9 @@ function AppointmentDetailSheet({
         currentDate: appointment.date,
         currentTimeStart: appointment.timeStart,
         currentTimeEnd: appointment.timeEnd,
+        onDateChange,
+        schedule,
+        isLoadingSlots,
         onReschedule: (date, slot, note) => {
           onReschedule == null ? void 0 : onReschedule(appointment.id, date, slot, note);
           setRescheduleOpen(false);

package/dist/{chunk-SET6GFGL.mjs → chunk-ZSMQZ3VN.mjs}

@@ -98,6 +98,15 @@ function AppointmentConfirmDialog({
     ] })
   ] }) });
 }
+var DAY_MAP = {
+  Sun: 0,
+  Mon: 1,
+  Tue: 2,
+  Wed: 3,
+  Thu: 4,
+  Fri: 5,
+  Sat: 6
+};
 function AppointmentRescheduleDialog({
   open,
   onOpenChange,
@@ -106,11 +115,19 @@ function AppointmentRescheduleDialog({
   currentDate,
   currentTimeStart,
   currentTimeEnd,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onReschedule
 }) {
   const [date, setDate] = React.useState(/* @__PURE__ */ new Date());
   const [slot, setSlot] = React.useState();
   const [note, setNote] = React.useState("");
+  const today = React.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const disabledDayOfWeek = React.useMemo(
+    () => schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP[d.day]).filter((n) => n !== void 0),
+    [schedule]
+  );
   const handleOpenChange = (next) => {
     if (!next) {
       setDate(/* @__PURE__ */ new Date());
@@ -128,87 +145,93 @@ function AppointmentRescheduleDialog({
       /* @__PURE__ */ jsx(DialogDescription, { children: "Select a new date and time slot. The client will be notified by email." })
     ] }),
     /* @__PURE__ */ jsx(Separator, {}),
-    (currentDate || currentTimeStart) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground", children: [
-        currentDate && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentDate
-        ] }),
-        currentTimeStart && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentTimeStart,
-          currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto max-h-[calc(90vh-200px)]", children: [
+      (currentDate || currentTimeStart) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground", children: [
+          currentDate && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentDate
+          ] }),
+          currentTimeStart && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentTimeStart,
+            currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx(Label, { children: "New date" }),
-        /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            mode: "single",
-            selected: date,
-            onSelect: (d) => {
-              setDate(d);
-              setSlot(void 0);
-            },
-            captionLayout: "label",
-            fromDate: /* @__PURE__ */ new Date(),
-            disabled: { before: /* @__PURE__ */ new Date() },
-            className: "border border-border"
-          }
-        )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5", children: date ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { children: "New date" }),
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: date,
+              onSelect: (d) => {
+                setDate(d);
+                setSlot(void 0);
+                if (d) onDateChange == null ? void 0 : onDateChange(d);
+              },
+              captionLayout: "label",
+              fromDate: today,
+              disabled: disabledDayOfWeek && disabledDayOfWeek.length > 0 ? [{ before: today }, { dayOfWeek: disabledDayOfWeek }] : { before: today },
+              className: "border border-border"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-5", children: date ? isLoadingSlots ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Loading slots\u2026" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Fetching available times for the selected date." })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              totalAvailable,
+              " available"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            AppointmentSlotSection,
+            {
+              label: "Morning",
+              slots: amSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AppointmentSlotSection,
+            {
+              label: "Afternoon",
+              slots: pmSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-            totalAvailable,
-            " available"
-          ] })
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: "reschedule-note", children: [
+          "Note",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
         ] }),
         /* @__PURE__ */ jsx(
-          AppointmentSlotSection,
+          Textarea,
           {
-            label: "Morning",
-            slots: amSlots,
-            selectedSlotId: slot == null ? void 0 : slot.id,
-            onSelect: setSlot
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AppointmentSlotSection,
-          {
-            label: "Afternoon",
-            slots: pmSlots,
-            selectedSlotId: slot == null ? void 0 : slot.id,
-            onSelect: setSlot
+            id: "reschedule-note",
+            placeholder: "e.g. Rescheduling due to an internal conflict \u2014 apologies for the inconvenience\u2026",
+            value: note,
+            onChange: (e) => setNote(e.target.value),
+            className: "w-full resize-none",
+            rows: 2
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsxs(Label, { htmlFor: "reschedule-note", children: [
-        "Note",
-        " ",
-        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          id: "reschedule-note",
-          placeholder: "e.g. Rescheduling due to an internal conflict \u2014 apologies for the inconvenience\u2026",
-          value: note,
-          onChange: (e) => setNote(e.target.value),
-          className: "w-full resize-none",
-          rows: 2
-        }
-      )
+      ] })
     ] }),
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Cancel" }),

package/dist/components/ui/appointment-action-dialogs.js

@@ -1054,6 +1054,15 @@ function AppointmentConfirmDialog({
     ] })
   ] }) });
 }
+var DAY_MAP = {
+  Sun: 0,
+  Mon: 1,
+  Tue: 2,
+  Wed: 3,
+  Thu: 4,
+  Fri: 5,
+  Sat: 6
+};
 function AppointmentRescheduleDialog({
   open,
   onOpenChange,
@@ -1062,11 +1071,19 @@ function AppointmentRescheduleDialog({
   currentDate,
   currentTimeStart,
   currentTimeEnd,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onReschedule
 }) {
   const [date, setDate] = import_react3.default.useState(/* @__PURE__ */ new Date());
   const [slot, setSlot] = import_react3.default.useState();
   const [note, setNote] = import_react3.default.useState("");
+  const today = import_react3.default.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const disabledDayOfWeek = import_react3.default.useMemo(
+    () => schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP[d.day]).filter((n) => n !== void 0),
+    [schedule]
+  );
   const handleOpenChange = (next) => {
     if (!next) {
       setDate(/* @__PURE__ */ new Date());
@@ -1084,87 +1101,93 @@ function AppointmentRescheduleDialog({
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogDescription, { children: "Select a new date and time slot. The client will be notified by email." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Separator, {}),
-    (currentDate || currentTimeStart) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-4 border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground", children: [
-        currentDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Calendar, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentDate
-        ] }),
-        currentTimeStart && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Clock, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentTimeStart,
-          currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-4 overflow-y-auto max-h-[calc(90vh-200px)]", children: [
+      (currentDate || currentTimeStart) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-4 border border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground", children: [
+          currentDate && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Calendar, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentDate
+          ] }),
+          currentTimeStart && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Clock, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentTimeStart,
+            currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { children: "New date" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          Calendar,
-          {
-            mode: "single",
-            selected: date,
-            onSelect: (d) => {
-              setDate(d);
-              setSlot(void 0);
-            },
-            captionLayout: "label",
-            fromDate: /* @__PURE__ */ new Date(),
-            disabled: { before: /* @__PURE__ */ new Date() },
-            className: "border border-border"
-          }
-        )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col gap-5", children: date ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Label, { children: "New date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Calendar,
+            {
+              mode: "single",
+              selected: date,
+              onSelect: (d) => {
+                setDate(d);
+                setSlot(void 0);
+                if (d) onDateChange == null ? void 0 : onDateChange(d);
+              },
+              captionLayout: "label",
+              fromDate: today,
+              disabled: disabledDayOfWeek && disabledDayOfWeek.length > 0 ? [{ before: today }, { dayOfWeek: disabledDayOfWeek }] : { before: today },
+              className: "border border-border"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col gap-5", children: date ? isLoadingSlots ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold", children: "Loading slots\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground", children: "Fetching available times for the selected date." })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+              totalAvailable,
+              " available"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            AppointmentSlotSection,
+            {
+              label: "Morning",
+              slots: amSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            AppointmentSlotSection,
+            {
+              label: "Afternoon",
+              slots: pmSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-            totalAvailable,
-            " available"
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Label, { htmlFor: "reschedule-note", children: [
+          "Note",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          AppointmentSlotSection,
-          {
-            label: "Morning",
-            slots: amSlots,
-            selectedSlotId: slot == null ? void 0 : slot.id,
-            onSelect: setSlot
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          AppointmentSlotSection,
+          Textarea,
           {
-            label: "Afternoon",
-            slots: pmSlots,
-            selectedSlotId: slot == null ? void 0 : slot.id,
-            onSelect: setSlot
+            id: "reschedule-note",
+            placeholder: "e.g. Rescheduling due to an internal conflict \u2014 apologies for the inconvenience\u2026",
+            value: note,
+            onChange: (e) => setNote(e.target.value),
+            className: "w-full resize-none",
+            rows: 2
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Label, { htmlFor: "reschedule-note", children: [
-        "Note",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Textarea,
-        {
-          id: "reschedule-note",
-          placeholder: "e.g. Rescheduling due to an internal conflict \u2014 apologies for the inconvenience\u2026",
-          value: note,
-          onChange: (e) => setNote(e.target.value),
-          className: "w-full resize-none",
-          rows: 2
-        }
-      )
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DialogFooter, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogClose, { render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { variant: "outline" }), children: "Cancel" }),

package/dist/components/ui/appointment-action-dialogs.mjs

@@ -1,7 +1,7 @@
 import {
   AppointmentConfirmDialog,
   AppointmentRescheduleDialog
-} from "../../chunk-SET6GFGL.mjs";
+} from "../../chunk-ZSMQZ3VN.mjs";
 import "../../chunk-CQ7HKBEX.mjs";
 import "../../chunk-2GIYVERS.mjs";
 import "../../chunk-BS75ICOO.mjs";