@wealthx/shadcn 1.5.22 → 1.5.24

package/src/components/ui/ai-conversations.tsx

@@ -684,6 +684,15 @@ export interface ChatComposerProps {
   /** Active reply channel. Defaults to "chat". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * The channel this conversation belongs to.
+   *
+   * - `"chat"` (default) — chat composer shown normally.
+   * - `"email"` + `isEmailIntegrated=true` — email tab is active by default.
+   * - `"email"` + `isEmailIntegrated=false` — composer is replaced with a
+   *   prompt to integrate email.
+   */
+  channelType?: AiConvChannel;
   /**
    * When true, the Email tab is shown in the composer. Defaults to false —
    * consumers must opt in once their tenant's email integration is wired up.
@@ -807,6 +816,7 @@ export function ChatComposer({
   mode,
   channel: channelProp = "chat",
   onChannelChange,
+  channelType = "chat",
   isEmailIntegrated = false,
   contactEmail = "",
   inputValue = "",
@@ -817,10 +827,16 @@ export function ChatComposer({
   onLetAiHandle,
   className,
 }: ChatComposerProps) {
+  const showIntegrateEmailPrompt =
+    channelType === "email" && !isEmailIntegrated;
+
   // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change.
+  // When channelType is email and integrated, default to email tab.
+  const initialChannel =
+    channelType === "email" && isEmailIntegrated ? "email" : channelProp;
   // Force chat when email isn't integrated so the panel never lands on a hidden tab.
   const [channel, setChannel] = React.useState<AiConvChannel>(
-    isEmailIntegrated ? channelProp : "chat",
+    isEmailIntegrated ? initialChannel : "chat",
   );
   const [emailTo, setEmailTo] = React.useState(contactEmail);
   const [emailCc, setEmailCc] = React.useState("");
@@ -850,6 +866,25 @@ export function ChatComposer({
     onChannelChange?.(c);
   };
 
+  if (showIntegrateEmailPrompt) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center gap-2 border-t border-border bg-muted/30 px-6 py-8 text-center",
+          className,
+        )}
+      >
+        <Mail className="h-8 w-8 text-muted-foreground" />
+        <p className="text-sm font-medium text-foreground">
+          Email integration required
+        </p>
+        <p className="text-xs text-muted-foreground">
+          Please integrate your email to reply to this conversation.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div
       className={cn(
@@ -1030,6 +1065,15 @@ export interface ChatThreadProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * The channel this conversation belongs to.
+   *
+   * - `"chat"` (default) — chat composer shown normally.
+   * - `"email"` + `isEmailIntegrated=true` — email tab is active by default.
+   * - `"email"` + `isEmailIntegrated=false` — composer is replaced with a
+   *   prompt to integrate email.
+   */
+  channelType?: AiConvChannel;
   /**
    * When true, the Email tab is shown in the composer. Defaults to false.
    */
@@ -1068,6 +1112,7 @@ export function ChatThread({
   isAiTyping = false,
   channel,
   onChannelChange,
+  channelType,
   isEmailIntegrated,
   inputValue,
   onInputChange,
@@ -1310,6 +1355,7 @@ export function ChatThread({
           mode={mode}
           channel={channel}
           onChannelChange={onChannelChange}
+          channelType={channelType}
           isEmailIntegrated={isEmailIntegrated}
           contactEmail={contact.email}
           inputValue={inputValue}
@@ -1818,6 +1864,15 @@ export interface ConversationsPageProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * The channel this conversation belongs to.
+   *
+   * - `"chat"` (default) — chat composer shown normally.
+   * - `"email"` + `isEmailIntegrated=true` — email tab is active by default.
+   * - `"email"` + `isEmailIntegrated=false` — composer is replaced with a
+   *   prompt to integrate email.
+   */
+  channelType?: AiConvChannel;
   /**
    * When true, the Email tab is shown in the composer. Defaults to false.
    */
@@ -1884,6 +1939,7 @@ export function ConversationsPage({
   onChannelFilterChange,
   channel,
   onChannelChange,
+  channelType,
   isEmailIntegrated,
   inputValue,
   internalNotes,
@@ -1975,6 +2031,7 @@ export function ConversationsPage({
             isAiTyping={isAiTyping}
             channel={channel}
             onChannelChange={onChannelChange}
+            channelType={channelType}
             isEmailIntegrated={isEmailIntegrated}
             inputValue={inputValue}
             onInputChange={onInputChange}

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" />}>

package/src/components/ui/appointment-book-dialog.tsx

@@ -87,6 +87,20 @@ export interface AppointmentBookDialogProps {
    * "Book Appointment".
    */
   clients?: AppointmentClient[];
+  /**
+   * Fired when the user types in the client search field.
+   * Use this to fetch clients from an API based on the query.
+   * When omitted, clients are filtered locally by name/email.
+   */
+  onSearchClients?: (query: string) => void;
+  /** True while a client search request is in-flight. */
+  isSearchingClients?: boolean;
+  /** True when more client results can be loaded. */
+  hasMoreClients?: boolean;
+  /** Fired when the user clicks "Load more" in the client dropdown. */
+  onLoadMoreClients?: () => void;
+  /** True while a load-more request is in-flight. */
+  isLoadingMoreClients?: boolean;
   /**
    * Meeting type options. Omit or pass an empty array to hide the meeting
    * type field (useful in client mode where the type is implicit).
@@ -125,14 +139,25 @@ export interface AppointmentBookDialogProps {
    */
   initialClientId?: string;
   /**
-   * Pre-set meeting format from the advisor's availability settings.
-   * In **client mode**, when this is provided the meeting format picker is
-   * hidden — the client books using this format only.
-   * Has no effect in advisor mode (advisors always see the format picker).
+   * Pre-set meeting format when the dialog opens.
    *
    * @remarks Mount-time initialiser only.
    */
   defaultMeetingFormat?: AppointmentMeetingFormat;
+  /**
+   * Which online meeting platform the advisor has integrated.
+   *
+   * - `"google-meet"` — show only Google Meet
+   * - `"microsoft-teams"` — show only MS Teams
+   * - `"any"` — show both Google Meet and MS Teams
+   *
+   * In **client mode**, this replaces the generic "Online Meeting" option
+   * with the specific platform(s). In **advisor mode** this has no effect
+   * (advisors always see all four formats).
+   *
+   * When omitted in client mode, the generic "Online Meeting" option is shown.
+   */
+  onlinePlatform?: "google-meet" | "microsoft-teams" | "any";
   /**
    * Guest identity for **client / public booking mode** only.
    * When all fields are provided the guest form is hidden; when any field is
@@ -173,58 +198,94 @@ function ClientSearch({
   clients,
   value,
   onValueChange,
+  onSearch,
+  isSearching,
+  hasMore,
+  onLoadMore,
+  isLoadingMore,
 }: {
   clients: AppointmentClient[];
   value: string | undefined;
   onValueChange: (id: string | undefined) => void;
+  onSearch?: (query: string) => void;
+  isSearching?: boolean;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  isLoadingMore?: boolean;
 }) {
   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 q = query.toLowerCase();
-    return (
-      c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q)
-    );
-  });
+
+  const filtered = onSearch
+    ? clients
+    : clients.filter((c) => {
+        const q = query.toLowerCase();
+        return (
+          c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q)
+        );
+      });
 
   return (
     <div className="relative">
       <Input
         value={selected ? selected.name : query}
         onChange={(e) => {
-          setQuery(e.target.value);
+          const v = e.target.value;
+          setQuery(v);
           if (selected) onValueChange(undefined);
-          setOpen(e.target.value.length > 0);
+          setOpen(v.length > 0);
+          onSearch?.(v);
         }}
         onBlur={() => setTimeout(() => setOpen(false), 150)}
         placeholder="Search by name or email…"
         autoComplete="off"
       />
-      {open && (filtered.length > 0 || query.length > 0) && (
-        <div className="absolute z-50 mt-1 w-full border border-border bg-popover shadow-md">
-          {filtered.length === 0 ? (
+      {open && (filtered.length > 0 || query.length > 0 || isSearching) && (
+        <div className="absolute z-50 mt-1 max-h-64 w-full overflow-y-auto border border-border bg-popover shadow-md">
+          {isSearching ? (
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+              Searching...
+            </p>
+          ) : filtered.length === 0 ? (
             <p className="px-3 py-6 text-center text-sm text-muted-foreground">
               No clients found.
             </p>
           ) : (
-            filtered.map((c) => (
-              <Button
-                key={c.id}
-                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);
-                }}
-              >
-                <span className="text-sm font-medium">{c.name}</span>
-                <span className="text-xs text-muted-foreground">{c.email}</span>
-              </Button>
-            ))
+            <>
+              {filtered.map((c) => (
+                <Button
+                  key={c.id}
+                  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);
+                  }}
+                >
+                  <span className="text-sm font-medium">{c.name}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {c.email}
+                  </span>
+                </Button>
+              ))}
+              {hasMore && onLoadMore && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="w-full text-sm text-primary"
+                  disabled={isLoadingMore}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={onLoadMore}
+                >
+                  {isLoadingMore ? "Loading..." : "Load more"}
+                </Button>
+              )}
+            </>
           )}
         </div>
       )}
@@ -277,6 +338,36 @@ const CLIENT_FORMAT_OPTIONS: FormatOption[] = [
   },
 ];
 
+function getFormatOptions(
+  platform?: "google-meet" | "microsoft-teams" | "any",
+): FormatOption[] {
+  const call: FormatOption = {
+    value: "call",
+    label: "Call",
+    icon: <Phone className="h-4 w-4" />,
+  };
+  const googleMeet: FormatOption = {
+    value: "google-meet",
+    label: "Google Meet",
+    icon: <Video className="h-4 w-4" />,
+  };
+  const msTeams: FormatOption = {
+    value: "microsoft-teams",
+    label: "MS Teams",
+    icon: <Users className="h-4 w-4" />,
+  };
+  const offline: FormatOption = {
+    value: "offline",
+    label: "Offline Meeting",
+    icon: <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,
@@ -458,6 +549,11 @@ export function AppointmentBookDialog({
   open,
   onOpenChange,
   clients = [],
+  onSearchClients,
+  isSearchingClients,
+  hasMoreClients,
+  onLoadMoreClients,
+  isLoadingMoreClients,
   meetingTypes = [],
   amSlots,
   pmSlots,
@@ -468,10 +564,11 @@ export function AppointmentBookDialog({
   advisorInfo,
   initialClientId,
   defaultMeetingFormat,
+  onlinePlatform,
   guestInfo,
   onBook,
 }: AppointmentBookDialogProps) {
-  const isClientMode = clients.length === 0;
+  const isClientMode = clients.length === 0 && !onSearchClients;
   // Guest form is shown in client mode when at least one identity field is missing.
   const showGuestForm = isClientMode && !(guestInfo?.name && guestInfo?.email);
 
@@ -620,6 +717,11 @@ export function AppointmentBookDialog({
                     clients={clients}
                     value={clientId}
                     onValueChange={setClientId}
+                    onSearch={onSearchClients}
+                    isSearching={isSearchingClients}
+                    hasMore={hasMoreClients}
+                    onLoadMore={onLoadMoreClients}
+                    isLoadingMore={isLoadingMoreClients}
                   />
                 </div>
               )}
@@ -687,26 +789,21 @@ export function AppointmentBookDialog({
                 </>
               )}
 
-              {/* Format picker — hidden in client mode when broker pre-set a platform */}
-              {!(isClientMode && defaultMeetingFormat) && (
-                <div className="flex flex-col gap-1.5">
-                  <Label>Meeting format</Label>
-                  <MeetingFormatSection
-                    format={meetingFormat}
-                    onFormatChange={setMeetingFormat}
-                    offlineLocation={offlineLocation}
-                    onOfflineLocationChange={setOfflineLocation}
-                    customAddress={customAddress}
-                    onCustomAddressChange={setCustomAddress}
-                    advisorOfficeAddress={advisorOfficeAddress}
-                    clientHomeAddress={clientHomeAddress}
-                    isClientMode={isClientMode}
-                    formatOptions={
-                      isClientMode ? CLIENT_FORMAT_OPTIONS : FORMAT_OPTIONS
-                    }
-                  />
-                </div>
-              )}
+              <div className="flex flex-col gap-1.5">
+                <Label>Meeting format</Label>
+                <MeetingFormatSection
+                  format={meetingFormat}
+                  onFormatChange={setMeetingFormat}
+                  offlineLocation={offlineLocation}
+                  onOfflineLocationChange={setOfflineLocation}
+                  customAddress={customAddress}
+                  onCustomAddressChange={setCustomAddress}
+                  advisorOfficeAddress={advisorOfficeAddress}
+                  clientHomeAddress={clientHomeAddress}
+                  isClientMode={isClientMode}
+                  formatOptions={getFormatOptions(onlinePlatform)}
+                />
+              </div>
 
               {/* Phone selection — advisor mode, Call format, client has phones */}
               {!isClientMode &&

package/src/components/ui/appointment-detail-sheet.tsx

@@ -82,6 +82,18 @@ export interface AppointmentDetailSheetProps {
   clientProfile?: AppointmentClientProfile;
   amSlots: AppointmentTimeSlot[];
   pmSlots: AppointmentTimeSlot[];
+  /**
+   * Fired when the user selects a different date in the reschedule dialog.
+   * 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 reschedule date picker.
+   */
+  schedule?: { day: string; enabled: boolean }[];
+  /** True while slots are being fetched for the selected date. */
+  isLoadingSlots?: boolean;
   onAccept?: (id: string) => void;
   onDecline?: (id: string) => void;
   onReschedule?: (
@@ -167,6 +179,9 @@ export function AppointmentDetailSheet({
   clientProfile,
   amSlots,
   pmSlots,
+  onDateChange,
+  schedule,
+  isLoadingSlots,
   onAccept,
   onDecline,
   onReschedule,
@@ -440,6 +455,9 @@ export function AppointmentDetailSheet({
         currentDate={appointment.date}
         currentTimeStart={appointment.timeStart}
         currentTimeEnd={appointment.timeEnd}
+        onDateChange={onDateChange}
+        schedule={schedule}
+        isLoadingSlots={isLoadingSlots}
         onReschedule={(date, slot, note) => {
           onReschedule?.(appointment.id, date, slot, note);
           setRescheduleOpen(false);