@wealthx/shadcn 1.5.22 → 1.5.23

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);