@wealthx/shadcn 1.5.21 → 1.5.23

package/dist/index.js

@@ -8384,6 +8384,15 @@ function AppointmentConfirmDialog({
     ] })
   ] }) });
 }
+var DAY_MAP = {
+  Sun: 0,
+  Mon: 1,
+  Tue: 2,
+  Wed: 3,
+  Thu: 4,
+  Fri: 5,
+  Sat: 6
+};
 function AppointmentRescheduleDialog({
   open,
   onOpenChange,
@@ -8392,11 +8401,19 @@ function AppointmentRescheduleDialog({
   currentDate,
   currentTimeStart,
   currentTimeEnd,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onReschedule
 }) {
   const [date, setDate] = import_react13.default.useState(/* @__PURE__ */ new Date());
   const [slot, setSlot] = import_react13.default.useState();
   const [note, setNote] = import_react13.default.useState("");
+  const today = import_react13.default.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const disabledDayOfWeek = import_react13.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());
@@ -8414,87 +8431,93 @@ function AppointmentRescheduleDialog({
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogDescription, { children: "Select a new date and time slot. The client will be notified by email." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Separator, {}),
-    (currentDate || currentTimeStart) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react23.Calendar, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentDate
-        ] }),
-        currentTimeStart && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react23.Clock, { className: "h-3.5 w-3.5 shrink-0" }),
-          currentTimeStart,
-          currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-4 overflow-y-auto max-h-[calc(90vh-200px)]", children: [
+      (currentDate || currentTimeStart) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Current booking" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react23.Calendar, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentDate
+          ] }),
+          currentTimeStart && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react23.Clock, { className: "h-3.5 w-3.5 shrink-0" }),
+            currentTimeStart,
+            currentTimeEnd ? ` \u2013 ${currentTimeEnd}` : ""
+          ] })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { children: "New date" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          Calendar3,
-          {
-            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_runtime42.jsx)("div", { className: "flex flex-col gap-5", children: date ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid grid-cols-[auto_1fr] items-start gap-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { children: "New date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            Calendar3,
+            {
+              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_runtime42.jsx)("div", { className: "flex flex-col gap-5", children: date ? isLoadingSlots ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-semibold", children: "Loading slots\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs text-muted-foreground", children: "Fetching available times for the selected date." })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+              totalAvailable,
+              " available"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            AppointmentSlotSection,
+            {
+              label: "Morning",
+              slots: amSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            AppointmentSlotSection,
+            {
+              label: "Afternoon",
+              slots: pmSlots,
+              selectedSlotId: slot == null ? void 0 : slot.id,
+              onSelect: setSlot
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-            totalAvailable,
-            " available"
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Label, { htmlFor: "reschedule-note", children: [
+          "Note",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          AppointmentSlotSection,
-          {
-            label: "Morning",
-            slots: amSlots,
-            selectedSlotId: slot == null ? void 0 : slot.id,
-            onSelect: setSlot
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsxs)("div", { className: "flex h-full flex-col items-center justify-center gap-2 py-8 text-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-semibold", children: "Select a time slot" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xs text-muted-foreground", children: "Pick a date on the left to see available slots." })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Label, { htmlFor: "reschedule-note", children: [
-        "Note",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsxs)(DialogFooter, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DialogClose, { render: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "outline" }), children: "Cancel" }),
@@ -9058,12 +9081,17 @@ var import_jsx_runtime46 = require("react/jsx-runtime");
 function ClientSearch({
   clients,
   value,
-  onValueChange
+  onValueChange,
+  onSearch,
+  isSearching,
+  hasMore,
+  onLoadMore,
+  isLoadingMore
 }) {
   const [query, setQuery] = import_react14.default.useState("");
   const [open, setOpen] = import_react14.default.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);
   });
@@ -9073,67 +9101,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__ */ (0, import_jsx_runtime46.jsx)("div", { className: "absolute z-50 mt-1 w-full border border-border bg-popover shadow-md", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No clients found." }) : filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime46.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__ */ (0, import_jsx_runtime46.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__ */ (0, import_jsx_runtime46.jsx)("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Searching..." }) : filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "No clients found." }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime46.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__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium", children: c.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-muted-foreground", children: c.email })
+          ]
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium", children: c.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-muted-foreground", children: c.email })
-        ]
-      },
-      c.id
-    )) })
+        c.id
+      )),
+      hasMore && onLoadMore && /* @__PURE__ */ (0, import_jsx_runtime46.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__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Phone, { className: "h-4 w-4" }) },
-  {
+function getFormatOptions(platform) {
+  const call = {
+    value: "call",
+    label: "Call",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Phone, { className: "h-4 w-4" })
+  };
+  const googleMeet = {
     value: "google-meet",
     label: "Google Meet",
     icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Video, { className: "h-4 w-4" })
-  },
-  {
+  };
+  const msTeams = {
     value: "microsoft-teams",
     label: "MS Teams",
     icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Users, { className: "h-4 w-4" })
-  },
-  {
-    value: "offline",
-    label: "Offline",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.MapPin, { className: "h-4 w-4" })
-  }
-];
-var CLIENT_FORMAT_OPTIONS = [
-  { value: "call", label: "Call", icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Phone, { className: "h-4 w-4" }) },
-  {
-    value: "online",
-    label: "Online Meeting",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.Video, { className: "h-4 w-4" })
-  },
-  {
+  };
+  const offline = {
     value: "offline",
     label: "Offline Meeting",
     icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react26.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: format5,
   onFormatChange,
@@ -9250,7 +9290,7 @@ function BookingConfirmationScreen({
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { className: "w-full", onClick: onDone, children: "Done" })
   ] });
 }
-var DAY_MAP = {
+var DAY_MAP2 = {
   Sun: 0,
   Mon: 1,
   Tue: 2,
@@ -9263,6 +9303,11 @@ function AppointmentBookDialog({
   open,
   onOpenChange,
   clients = [],
+  onSearchClients,
+  isSearchingClients,
+  hasMoreClients,
+  onLoadMoreClients,
+  isLoadingMoreClients,
   meetingTypes = [],
   amSlots,
   pmSlots,
@@ -9273,14 +9318,15 @@ 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 = import_react14.default.useMemo(
-    () => schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP[d.day]).filter((n) => n !== void 0),
+    () => schedule == null ? void 0 : schedule.filter((d) => !d.enabled).map((d) => DAY_MAP2[d.day]).filter((n) => n !== void 0),
     [schedule]
   );
   const today = import_react14.default.useMemo(() => /* @__PURE__ */ new Date(), []);
@@ -9369,7 +9415,12 @@ function AppointmentBookDialog({
           {
             clients,
             value: clientId,
-            onValueChange: setClientId
+            onValueChange: setClientId,
+            onSearch: onSearchClients,
+            isSearching: isSearchingClients,
+            hasMore: hasMoreClients,
+            onLoadMore: onLoadMoreClients,
+            isLoadingMore: isLoadingMoreClients
           }
         )
       ] }),
@@ -9427,7 +9478,7 @@ function AppointmentBookDialog({
           )
         ] })
       ] }),
-      !(isClientMode && defaultMeetingFormat) && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Label, { children: "Meeting format" }),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           MeetingFormatSection,
@@ -9441,7 +9492,7 @@ function AppointmentBookDialog({
             advisorOfficeAddress,
             clientHomeAddress,
             isClientMode,
-            formatOptions: isClientMode ? CLIENT_FORMAT_OPTIONS : FORMAT_OPTIONS
+            formatOptions: getFormatOptions(onlinePlatform)
           }
         )
       ] }),
@@ -10041,6 +10092,9 @@ function AppointmentDetailSheet({
   clientProfile,
   amSlots,
   pmSlots,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onAccept,
   onDecline,
   onReschedule,
@@ -10241,6 +10295,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/index.mjs

@@ -364,7 +364,7 @@ import {
 } from "./chunk-R2ON6CAN.mjs";
 import {
   AppointmentBookDialog
-} from "./chunk-NEMWMXGL.mjs";
+} from "./chunk-3HFOSFOM.mjs";
 import {
   RadioGroup,
   RadioGroupCard,
@@ -384,7 +384,7 @@ import {
 } from "./chunk-V23CBULF.mjs";
 import {
   AppointmentDetailSheet
-} from "./chunk-F3MIRXRF.mjs";
+} from "./chunk-ONYADWSO.mjs";
 import {
   AppointmentGmailConnect
 } from "./chunk-7TMPOZDE.mjs";
@@ -408,7 +408,7 @@ import {
 import {
   AppointmentConfirmDialog,
   AppointmentRescheduleDialog
-} from "./chunk-SET6GFGL.mjs";
+} from "./chunk-ZSMQZ3VN.mjs";
 import {
   AppointmentSlotSection,
   AppointmentTimeSlotPicker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.21",
+  "version": "1.5.23",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/appointment-action-dialogs.tsx

@@ -138,9 +138,25 @@ export interface AppointmentRescheduleDialogProps {
   currentDate?: string;
   currentTimeStart?: string;
   currentTimeEnd?: string;
+  /**
+   * Fired when the user selects a different date in the calendar.
+   * Use this to fetch fresh `amSlots`/`pmSlots` for the new date.
+   */
+  onDateChange?: (date: Date) => void;
+  /**
+   * Advisor's weekly availability schedule. Days with `enabled: false` are
+   * disabled in the date picker so the user cannot select them.
+   */
+  schedule?: { day: string; enabled: boolean }[];
+  /** True while slots are being fetched for the selected date. */
+  isLoadingSlots?: boolean;
   onReschedule: (date: Date, slot: AppointmentTimeSlot, note: string) => void;
 }
 
+const DAY_MAP: Record<string, number> = {
+  Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6,
+};
+
 export function AppointmentRescheduleDialog({
   open,
   onOpenChange,
@@ -149,12 +165,26 @@ export function AppointmentRescheduleDialog({
   currentDate,
   currentTimeStart,
   currentTimeEnd,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onReschedule,
 }: AppointmentRescheduleDialogProps) {
   const [date, setDate] = React.useState<Date | undefined>(new Date());
   const [slot, setSlot] = React.useState<AppointmentTimeSlot | undefined>();
   const [note, setNote] = React.useState("");
 
+  const today = React.useMemo(() => new Date(), []);
+
+  const disabledDayOfWeek = React.useMemo(
+    () =>
+      schedule
+        ?.filter((d) => !d.enabled)
+        .map((d) => DAY_MAP[d.day])
+        .filter((n): n is number => n !== undefined),
+    [schedule],
+  );
+
   const handleOpenChange = (next: boolean) => {
     if (!next) {
       setDate(new Date());
@@ -181,6 +211,7 @@ export function AppointmentRescheduleDialog({
 
         <Separator />
 
+        <div className="flex flex-col gap-4 overflow-y-auto max-h-[calc(90vh-200px)]">
         {/* Current booking */}
         {(currentDate || currentTimeStart) && (
           <div className="flex flex-col gap-1.5">
@@ -215,10 +246,15 @@ export function AppointmentRescheduleDialog({
               onSelect={(d) => {
                 setDate(d);
                 setSlot(undefined);
+                if (d) onDateChange?.(d);
               }}
               captionLayout="label"
-              fromDate={new Date()}
-              disabled={{ before: new Date() }}
+              fromDate={today}
+              disabled={
+                disabledDayOfWeek && disabledDayOfWeek.length > 0
+                  ? [{ before: today }, { dayOfWeek: disabledDayOfWeek }]
+                  : { before: today }
+              }
               className="border border-border"
             />
           </div>
@@ -226,26 +262,35 @@ export function AppointmentRescheduleDialog({
           {/* Time slots */}
           <div className="flex flex-col gap-5">
             {date ? (
-              <>
-                <div className="flex items-center justify-between">
-                  <p className="text-sm font-semibold">Select a time slot</p>
-                  <span className="text-xs text-muted-foreground">
-                    {totalAvailable} available
-                  </span>
+              isLoadingSlots ? (
+                <div className="flex h-full flex-col items-center justify-center gap-2 py-8 text-center">
+                  <p className="text-sm font-semibold">Loading slots…</p>
+                  <p className="text-xs text-muted-foreground">
+                    Fetching available times for the selected date.
+                  </p>
                 </div>
-                <AppointmentSlotSection
-                  label="Morning"
-                  slots={amSlots}
-                  selectedSlotId={slot?.id}
-                  onSelect={setSlot}
-                />
-                <AppointmentSlotSection
-                  label="Afternoon"
-                  slots={pmSlots}
-                  selectedSlotId={slot?.id}
-                  onSelect={setSlot}
-                />
-              </>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm font-semibold">Select a time slot</p>
+                    <span className="text-xs text-muted-foreground">
+                      {totalAvailable} available
+                    </span>
+                  </div>
+                  <AppointmentSlotSection
+                    label="Morning"
+                    slots={amSlots}
+                    selectedSlotId={slot?.id}
+                    onSelect={setSlot}
+                  />
+                  <AppointmentSlotSection
+                    label="Afternoon"
+                    slots={pmSlots}
+                    selectedSlotId={slot?.id}
+                    onSelect={setSlot}
+                  />
+                </>
+              )
             ) : (
               <div className="flex h-full flex-col items-center justify-center gap-2 py-8 text-center">
                 <p className="text-sm font-semibold">Select a time slot</p>
@@ -274,6 +319,7 @@ export function AppointmentRescheduleDialog({
             rows={2}
           />
         </div>
+        </div>
 
         <DialogFooter>
           <DialogClose render={<Button variant="outline" />}>