@wealthx/shadcn 1.3.2 → 1.3.4

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

@@ -27,6 +27,7 @@ import { Toggle } from "./toggle";
 import { Badge } from "./badge";
 import { Avatar, AvatarFallback } from "./avatar";
 import { MapPin, Phone, Video } from "lucide-react";
+import { formatDateLong } from "@/lib/format-date";
 import {
   AppointmentSlotSection,
   type AppointmentMeetingFormat,
@@ -58,6 +59,20 @@ export type AppointmentBookingSlot = AppointmentTimeSlot;
 
 export type AppointmentOfflineLocation = "office" | "home" | "custom";
 
+/**
+ * Guest identity for **client / public booking mode**.
+ *
+ * - **Authenticated user** (e.g. app.wealthx.au): pass all three fields →
+ *   the name/email/phone form is hidden and the values are submitted silently.
+ * - **Public booking** (unauthenticated): omit this prop or leave fields
+ *   empty → the form is shown so the guest can fill in their details.
+ */
+export interface AppointmentGuestInfo {
+  name?: string;
+  email?: string;
+  phone?: string;
+}
+
 export interface AppointmentBookDialogProps {
   open: boolean;
   onOpenChange: (v: boolean) => void;
@@ -79,6 +94,11 @@ export interface AppointmentBookDialogProps {
   meetingTypes?: string[];
   amSlots: AppointmentTimeSlot[];
   pmSlots: AppointmentTimeSlot[];
+  /**
+   * 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 clients cannot select them.
@@ -104,6 +124,17 @@ export interface AppointmentBookDialogProps {
    * Used when rebooking from a cancelled appointment via `AppointmentDetailSheet`.
    */
   initialClientId?: string;
+  /**
+   * Guest identity for **client / public booking mode** only.
+   * When all fields are provided the guest form is hidden; when any field is
+   * missing the guest must fill in their own details.
+   * Ignored in advisor mode.
+   *
+   * @remarks Mount-time initialiser only — state is seeded from this prop on
+   * first render. Subsequent prop changes are ignored. Use the `key` prop to
+   * force a full reset when `guestInfo` changes.
+   */
+  guestInfo?: AppointmentGuestInfo;
   onBook?: (data: {
     /** Empty string in client mode */
     clientId: string;
@@ -116,6 +147,12 @@ export interface AppointmentBookDialogProps {
     offlineLocation?: AppointmentOfflineLocation;
     customAddress?: string;
     callPhone?: string;
+    /** Client mode only — name of the guest/user making the booking */
+    guestName?: string;
+    /** Client mode only — email of the guest/user */
+    guestEmail?: string;
+    /** Client mode only — phone of the guest/user (optional) */
+    guestPhone?: string;
   }) => void;
 }
 
@@ -291,6 +328,20 @@ function MeetingFormatSection({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DAY_MAP: Record<string, number> = {
+  Sun: 0,
+  Mon: 1,
+  Tue: 2,
+  Wed: 3,
+  Thu: 4,
+  Fri: 5,
+  Sat: 6,
+};
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
@@ -302,28 +353,27 @@ export function AppointmentBookDialog({
   meetingTypes = [],
   amSlots,
   pmSlots,
+  onDateChange,
   schedule,
   advisorOfficeAddress,
   clientHomeAddress,
   advisorInfo,
   initialClientId,
+  guestInfo,
   onBook,
 }: AppointmentBookDialogProps) {
   const isClientMode = clients.length === 0;
-
-  const DAY_MAP: Record<string, number> = {
-    Sun: 0,
-    Mon: 1,
-    Tue: 2,
-    Wed: 3,
-    Thu: 4,
-    Fri: 5,
-    Sat: 6,
-  };
-  const disabledDayOfWeek = schedule
-    ?.filter((d) => !d.enabled)
-    .map((d) => DAY_MAP[d.day])
-    .filter((n): n is number => n !== undefined);
+  // Guest form is shown in client mode when at least one identity field is missing.
+  const showGuestForm = isClientMode && !(guestInfo?.name && guestInfo?.email);
+
+  const disabledDayOfWeek = React.useMemo(
+    () =>
+      schedule
+        ?.filter((d) => !d.enabled)
+        .map((d) => DAY_MAP[d.day])
+        .filter((n): n is number => n !== undefined),
+    [schedule],
+  );
 
   const [clientId, setClientId] = React.useState<string | undefined>(undefined);
   const [meetingType, setMeetingType] = React.useState("");
@@ -343,7 +393,15 @@ export function AppointmentBookDialog({
     undefined,
   );
 
-  const selectedClient = clients.find((c) => c.id === clientId);
+  // Guest identity — client / public booking mode only
+  const [guestName, setGuestName] = React.useState(guestInfo?.name ?? "");
+  const [guestEmail, setGuestEmail] = React.useState(guestInfo?.email ?? "");
+  const [guestPhone, setGuestPhone] = React.useState(guestInfo?.phone ?? "");
+
+  const selectedClient = React.useMemo(
+    () => clients.find((c) => c.id === clientId),
+    [clients, clientId],
+  );
 
   // Pre-select client when dialog opens with an initialClientId (e.g. rebook after cancellation)
   React.useEffect(() => {
@@ -368,9 +426,16 @@ export function AppointmentBookDialog({
     meetingFormat !== "offline" ||
     offlineLocation !== "custom" ||
     !!customAddress.trim();
+  const guestReady =
+    !showGuestForm || (!!guestName.trim() && !!guestEmail.trim());
 
   const canSubmit =
-    clientReady && meetingTypeReady && !!date && !!selectedSlot && offlineReady;
+    clientReady &&
+    meetingTypeReady &&
+    !!date &&
+    !!selectedSlot &&
+    offlineReady &&
+    guestReady;
 
   const handleOpenChange = (next: boolean) => {
     if (!next) {
@@ -383,6 +448,9 @@ export function AppointmentBookDialog({
       setSelectedSlot(undefined);
       setNotes("");
       setSelectedPhone(undefined);
+      setGuestName(guestInfo?.name ?? "");
+      setGuestEmail(guestInfo?.email ?? "");
+      setGuestPhone(guestInfo?.phone ?? "");
     }
     onOpenChange(next);
   };
@@ -421,7 +489,6 @@ export function AppointmentBookDialog({
         <Separator />
 
         <div className="flex flex-col gap-4">
-          {/* Client search — advisor mode only */}
           {!isClientMode && (
             <div className="flex flex-col gap-1.5">
               <Label>Client</Label>
@@ -433,7 +500,6 @@ export function AppointmentBookDialog({
             </div>
           )}
 
-          {/* Appointment type — shown only when meetingTypes provided */}
           {meetingTypes.length > 0 && (
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="book-apt-type">
@@ -454,7 +520,49 @@ export function AppointmentBookDialog({
             </div>
           )}
 
-          {/* Meeting format */}
+          {/* Guest identity — public booking only */}
+          {showGuestForm && (
+            <>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="guest-name">Full name</Label>
+                <Input
+                  id="guest-name"
+                  placeholder="Your full name"
+                  value={guestName}
+                  onChange={(e) => setGuestName(e.target.value)}
+                  autoComplete="name"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="guest-email">Email</Label>
+                <Input
+                  id="guest-email"
+                  type="email"
+                  placeholder="your@email.com"
+                  value={guestEmail}
+                  onChange={(e) => setGuestEmail(e.target.value)}
+                  autoComplete="email"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="guest-phone">
+                  Phone{" "}
+                  <span className="font-normal text-muted-foreground">
+                    (optional)
+                  </span>
+                </Label>
+                <Input
+                  id="guest-phone"
+                  type="tel"
+                  placeholder="+61 4XX XXX XXX"
+                  value={guestPhone}
+                  onChange={(e) => setGuestPhone(e.target.value)}
+                  autoComplete="tel"
+                />
+              </div>
+            </>
+          )}
+
           <div className="flex flex-col gap-1.5">
             <Label>Meeting format</Label>
             <MeetingFormatSection
@@ -515,6 +623,7 @@ export function AppointmentBookDialog({
                 onSelect={(d) => {
                   setDate(d);
                   setSelectedSlot(undefined);
+                  if (d) onDateChange?.(d);
                 }}
                 captionLayout="label"
                 fromDate={new Date()}
@@ -531,11 +640,7 @@ export function AppointmentBookDialog({
               {date ? (
                 <div className="flex flex-col gap-3">
                   <p className="text-xs text-muted-foreground">
-                    {date.toLocaleDateString("en-AU", {
-                      weekday: "long",
-                      day: "numeric",
-                      month: "long",
-                    })}
+                    {formatDateLong(date)}
                   </p>
                   <AppointmentSlotSection
                     label="Morning"
@@ -604,6 +709,15 @@ export function AppointmentBookDialog({
                       : undefined,
                   callPhone:
                     meetingFormat === "call" ? selectedPhone : undefined,
+                  guestName: isClientMode
+                    ? guestName.trim() || undefined
+                    : undefined,
+                  guestEmail: isClientMode
+                    ? guestEmail.trim() || undefined
+                    : undefined,
+                  guestPhone: isClientMode
+                    ? guestPhone.trim() || undefined
+                    : undefined,
                 });
                 handleOpenChange(false);
               }

package/src/components/ui/appointment-calendar-view.tsx

@@ -13,6 +13,7 @@ import {
   CalendarClock,
 } from "lucide-react";
 import type { AppointmentStatus } from "./appointment-time-slot-picker";
+import { formatWeekdayShort } from "@/lib/format-date";
 
 // Re-export so consumers who import AppointmentStatus from this module still work
 export type { AppointmentStatus } from "./appointment-time-slot-picker";
@@ -137,9 +138,7 @@ function DayView({
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
 }) {
   const d = new Date(date + "T00:00:00");
-  const dayLabel = d
-    .toLocaleDateString("en-AU", { weekday: "short" })
-    .toUpperCase();
+  const dayLabel = formatWeekdayShort(d);
   const dayShort = d.getDate();
   const isToday = date === today;
   const dayApts = appointments.filter((a) => a.date === date);

package/src/components/ui/appointment-gmail-connect.tsx

@@ -2,15 +2,12 @@ import { Badge } from "./badge";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Separator } from "./separator";
-import { Spinner } from "./spinner";
-import { Check, Copy, Link2, Mail, ShieldCheck, Unlink } from "lucide-react";
+import { Check, Copy, ExternalLink, Link2, Mail, Settings } from "lucide-react";
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-export type GmailConnectionState = "disconnected" | "connecting" | "connected";
-
 export interface GmailConnection {
   connected: boolean;
   email?: string;
@@ -19,14 +16,14 @@ export interface GmailConnection {
 }
 
 export interface AppointmentGmailConnectProps {
+  /** Global Gmail connection state sourced from Settings > Integrations */
   connection: GmailConnection;
-  state?: GmailConnectionState;
-  onConnect?: () => void;
-  onDisconnect?: () => void;
-  /** Booking link to display in the calendar link section (connected state only) */
+  /** Booking link to display when connected */
   calendarLink?: string;
-  /** Called when the user clicks the copy button next to the calendar link */
+  /** Called when user clicks the copy button next to the calendar link */
   onCopyLink?: () => void;
+  /** Called when user clicks "Go to Integrations" in the not-connected state */
+  onGoToIntegrations?: () => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -45,30 +42,14 @@ const PERMISSIONS = [
 
 export function AppointmentGmailConnect({
   connection,
-  state = "disconnected",
-  onConnect,
-  onDisconnect,
   calendarLink,
   onCopyLink,
+  onGoToIntegrations,
 }: AppointmentGmailConnectProps) {
-  if (state === "connecting") {
-    return (
-      <div className="flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center">
-        <Spinner className="h-6 w-6 text-primary" />
-        <div className="flex flex-col gap-1">
-          <p className="text-sm font-medium">Connecting to Gmail…</p>
-          <p className="text-xs text-muted-foreground">
-            Complete the sign-in in the popup window.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
   if (connection.connected) {
     return (
       <div className="flex flex-col border border-border bg-card">
-        {/* Header — mail icon + title/email + badge + connected-since + disconnect */}
+        {/* Header */}
         <div className="flex items-center gap-3 px-5 py-4">
           <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-primary/10">
             <Mail className="h-5 w-5 text-primary" />
@@ -84,18 +65,18 @@ export function AppointmentGmailConnect({
             Active
           </Badge>
           {connection.connectedAt && (
-            <p className="shrink-0 text-sm text-muted-foreground">
+            <p className="shrink-0 text-xs text-muted-foreground">
               Connected since {connection.connectedAt}
             </p>
           )}
           <Button
             size="sm"
             variant="ghost"
-            className="shrink-0 gap-1.5 text-destructive hover:text-destructive"
-            onClick={onDisconnect}
+            className="shrink-0 gap-1.5 text-muted-foreground"
+            onClick={onGoToIntegrations}
           >
-            <Unlink className="h-3.5 w-3.5" />
-            Disconnect
+            <Settings className="h-3.5 w-3.5" />
+            Manage
           </Button>
         </div>
 
@@ -108,13 +89,13 @@ export function AppointmentGmailConnect({
           </p>
           {PERMISSIONS.map((perm) => (
             <div key={perm} className="flex items-center gap-2">
-              <ShieldCheck className="h-4 w-4 shrink-0 text-success" />
+              <Check className="h-3.5 w-3.5 shrink-0 text-success" />
               <span className="text-sm text-muted-foreground">{perm}</span>
             </div>
           ))}
         </div>
 
-        {/* Calendar appointment link — only rendered when a link is available */}
+        {/* Calendar appointment link */}
         {calendarLink && (
           <>
             <Separator />
@@ -152,7 +133,7 @@ export function AppointmentGmailConnect({
     );
   }
 
-  // Disconnected state
+  // Not connected — direct user to Integrations instead of a second OAuth flow
   return (
     <div className="flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center">
       <div className="flex h-12 w-12 items-center justify-center bg-muted">
@@ -160,16 +141,16 @@ export function AppointmentGmailConnect({
       </div>
 
       <div className="flex flex-col gap-1.5">
-        <p className="text-base font-semibold">Connect your Gmail account</p>
+        <p className="text-base font-semibold">Gmail not connected</p>
         <p className="max-w-xs text-sm text-muted-foreground">
-          Link your Gmail to let clients book appointments and receive
-          confirmation emails automatically.
+          Connect your Gmail account in Integrations to enable calendar booking
+          and appointment confirmations.
         </p>
       </div>
 
       <div className="flex w-full max-w-xs flex-col gap-2 text-left">
         <p className="text-sm font-medium text-muted-foreground">
-          This will allow WealthX to:
+          Once connected, WealthX will be able to:
         </p>
         {PERMISSIONS.map((perm) => (
           <div key={perm} className="flex items-center gap-2">
@@ -179,9 +160,9 @@ export function AppointmentGmailConnect({
         ))}
       </div>
 
-      <Button onClick={onConnect} className="gap-2">
-        <Mail className="h-4 w-4" />
-        Connect Gmail
+      <Button onClick={onGoToIntegrations} className="gap-2">
+        <ExternalLink className="h-4 w-4" />
+        Go to Integrations
       </Button>
     </div>
   );

package/src/components/ui/auth-logo.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type AuthLogoProps = {
+  logoUrl?: string;
+  wealthxLogoUrl?: string;
+  className?: string;
+};
+
+export function AuthLogo({
+  logoUrl,
+  wealthxLogoUrl,
+  className,
+}: AuthLogoProps) {
+  const wealthxMark = wealthxLogoUrl ? (
+    <img src={wealthxLogoUrl} alt="WealthX" className="h-5 w-auto" />
+  ) : (
+    <span className="text-sm font-semibold tracking-tight text-foreground">
+      WealthX
+    </span>
+  );
+
+  if (!logoUrl) {
+    return (
+      <div className={cn("flex items-center justify-center", className)}>
+        {wealthxLogoUrl ? (
+          <img src={wealthxLogoUrl} alt="WealthX" className="h-8 w-auto" />
+        ) : (
+          <span className="text-lg font-semibold tracking-tight text-foreground">
+            WealthX
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center gap-3", className)}>
+      <img
+        src={logoUrl}
+        alt="Partner logo"
+        className="h-8 w-auto object-contain"
+      />
+      <div className="flex items-center gap-1.5">
+        <span className="text-xs text-muted-foreground">Powered by</span>
+        {wealthxMark}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/auth-page-layout.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type AuthPageLayoutProps = {
+  logo?: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  wide?: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function AuthPageLayout({
+  logo,
+  title,
+  subtitle,
+  wide = false,
+  className,
+  children,
+}: AuthPageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-screen w-full flex-col items-center justify-center px-10 py-16 font-sans",
+        className,
+      )}
+    >
+      {logo && (
+        <div className="absolute top-8 left-1/2 -translate-x-1/2">{logo}</div>
+      )}
+
+      <div
+        className={cn(
+          "flex w-full flex-col items-center gap-10",
+          wide ? "max-w-full" : "max-w-[581px]",
+        )}
+      >
+        {(title || subtitle) && (
+          <div className="flex w-[320px] flex-col items-center gap-2 text-center">
+            {title && (
+              <h1 className="m-0 text-[30px] font-semibold leading-9 text-card-foreground">
+                {title}
+              </h1>
+            )}
+            {subtitle && (
+              <p className="m-0 text-sm font-normal leading-5 text-muted-foreground">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className={cn("w-full", wide ? "max-w-full" : "w-[320px]")}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/borrowing-capacity-line-chart.tsx

@@ -12,10 +12,6 @@ import {
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import { useThemeVars } from "@/lib/theme-provider";
-import { Card, CardContent, CardHeader, CardTitle } from "./card";
-import { Empty, EmptyDescription } from "./empty";
-import { Skeleton } from "./skeleton";
-import { cn } from "@/lib/utils";
 import {
   FALLBACK_TICK,
   FALLBACK_PRIMARY,
@@ -24,7 +20,13 @@ import {
   FALLBACK_GRID_COLOR,
   ChartLegendItem,
   formatAbbrev,
+  formatMonthLabel,
+  formatTooltipDate,
 } from "./chart-shared";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
 
 ChartJS.register(
@@ -126,14 +128,14 @@ const DASH_PATTERN: number[] = [6, 4];
 
 /** "2025-01" or "2025-01-15" → "Jan '25" for x-axis ticks */
 function formatDateLabel(iso: string): string {
-  const d = new Date(`${iso.slice(0, 7)}-01T00:00:00`);
-  return d.toLocaleDateString("en-US", { month: "short", year: "2-digit" });
+  const normalized = `${iso.slice(0, 7)}-01T00:00:00`;
+  return formatMonthLabel(normalized);
 }
 
 /** "2025-01" → "Jan 2025" for tooltip header */
 function formatDateTooltip(iso: string): string {
-  const d = new Date(`${iso.slice(0, 7)}-01T00:00:00`);
-  return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+  const normalized = `${iso.slice(0, 7)}-01T00:00:00`;
+  return formatTooltipDate(normalized, "monthly");
 }
 
 // ---------------------------------------------------------------------------

package/src/components/ui/button.tsx

@@ -23,11 +23,11 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-border focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary":
           "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
         "outline-secondary":
-          "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
+          "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:border-brand-secondary focus-visible:ring-brand-secondary/30",
         ghost:
           "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",

package/src/components/ui/calendar.tsx

@@ -11,6 +11,7 @@ import {
   type DayButton,
 } from "react-day-picker";
 import { cn } from "@/lib/utils";
+import { formatDateShort } from "@/lib/format-date";
 import { Button, buttonVariants } from "@/components/ui/button";
 
 /**
@@ -222,7 +223,7 @@ function CalendarDayButton({
         defaultClassNames.day,
         className,
       )}
-      data-day={day.date.toLocaleDateString()}
+      data-day={formatDateShort(day.date.toISOString())}
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       data-range-start={modifiers.range_start}