@wealthx/shadcn 1.5.6 → 1.5.7

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

@@ -27,7 +27,7 @@ import { Toggle } from "./toggle";
 import { Badge } from "./badge";
 import { Avatar, AvatarFallback } from "./avatar";
 import { CalendarCheck, MapPin, Phone, Users, Video } from "lucide-react";
-import { formatDateLong } from "@/lib/format-date";
+import { formatDateLong } from "../../lib/format-date";
 import {
   AppointmentSlotSection,
   type AppointmentMeetingFormat,
@@ -259,16 +259,9 @@ const FORMAT_OPTIONS: {
   },
 ];
 
-// Pre-baked references — FORMAT_OPTIONS is a module constant so these are stable
-const FORMAT_CALL = FORMAT_OPTIONS[0];
-const FORMAT_OFFLINE = FORMAT_OPTIONS[3];
-// Icon shared by the "Online Meeting" collapsed option in client mode
-const ONLINE_MEETING_ICON = <Video className="h-4 w-4" />;
-
 function MeetingFormatSection({
   format,
   onFormatChange,
-  options = FORMAT_OPTIONS,
   offlineLocation,
   onOfflineLocationChange,
   customAddress,
@@ -279,7 +272,6 @@ function MeetingFormatSection({
 }: {
   format: AppointmentMeetingFormat;
   onFormatChange: (f: AppointmentMeetingFormat) => void;
-  options?: typeof FORMAT_OPTIONS;
   offlineLocation: AppointmentOfflineLocation;
   onOfflineLocationChange: (l: AppointmentOfflineLocation) => void;
   customAddress: string;
@@ -291,7 +283,7 @@ function MeetingFormatSection({
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-2">
-        {options.map((opt) => (
+        {FORMAT_OPTIONS.map((opt) => (
           <Toggle
             key={opt.value}
             variant="outline"
@@ -463,22 +455,6 @@ export function AppointmentBookDialog({
   // Guest form is shown in client mode when at least one identity field is missing.
   const showGuestForm = isClientMode && !(guestInfo?.name && guestInfo?.email);
 
-  // In client mode with a preset online platform, collapse Google Meet / MS Teams
-  // into a single "Online Meeting" option so the client sees 3 choices:
-  // Call | Online Meeting | Offline — without knowing the specific platform.
-  const visibleFormatOptions: typeof FORMAT_OPTIONS =
-    isClientMode && defaultMeetingFormat
-      ? [
-          FORMAT_CALL,
-          {
-            value: defaultMeetingFormat,
-            label: "Online Meeting",
-            icon: ONLINE_MEETING_ICON,
-          },
-          FORMAT_OFFLINE,
-        ]
-      : FORMAT_OPTIONS;
-
   const disabledDayOfWeek = React.useMemo(
     () =>
       schedule
@@ -578,7 +554,7 @@ export function AppointmentBookDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent size="2xl">
+      <DialogContent size="2xl" align="top">
         {submittedBooking ? (
           <BookingConfirmationScreen
             booking={submittedBooking}
@@ -691,26 +667,23 @@ export function AppointmentBookDialog({
                 </>
               )}
 
-              {/* Format picker
-                  - Advisor mode: all options (Call / Google Meet / MS Teams / Offline)
-                  - Client mode, no preset: all options
-                  - Client mode, preset online format: only [broker's platform, Offline]
-                    so clients can still choose in-person while the online platform is locked */}
-              <div className="flex flex-col gap-1.5">
-                <Label>Meeting format</Label>
-                <MeetingFormatSection
-                  format={meetingFormat}
-                  onFormatChange={setMeetingFormat}
-                  options={visibleFormatOptions}
-                  offlineLocation={offlineLocation}
-                  onOfflineLocationChange={setOfflineLocation}
-                  customAddress={customAddress}
-                  onCustomAddressChange={setCustomAddress}
-                  advisorOfficeAddress={advisorOfficeAddress}
-                  clientHomeAddress={clientHomeAddress}
-                  isClientMode={isClientMode}
-                />
-              </div>
+              {/* 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}
+                  />
+                </div>
+              )}
 
               {/* Phone selection — advisor mode, Call format, client has phones */}
               {!isClientMode &&
@@ -774,7 +747,11 @@ export function AppointmentBookDialog({
                   {date ? (
                     <div className="flex flex-col gap-3">
                       <p className="text-xs text-muted-foreground">
-                        {formatDateLong(date)}
+                        {date.toLocaleDateString("en-AU", {
+                          weekday: "long",
+                          day: "numeric",
+                          month: "long",
+                        })}
                       </p>
                       <AppointmentSlotSection
                         label="Morning"

package/src/components/ui/integration-card.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Check } from "lucide-react";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { cn } from "../../lib/utils";
+
+export interface IntegrationCardProps {
+  name: string;
+  description: string;
+  /** Image src for the integration logo (e.g. aggregator logo) */
+  logoSrc?: string;
+  /** Fallback icon node shown when no logoSrc is provided but a logo area is desired */
+  logoFallback?: React.ReactNode;
+  connected?: boolean;
+  onConnect?: () => void;
+  onDisconnect?: () => void;
+  /** Extra content rendered between description and action button (e.g. inbox assignment Select) */
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function IntegrationCard({
+  name,
+  description,
+  logoSrc,
+  logoFallback,
+  connected = false,
+  onConnect,
+  onDisconnect,
+  children,
+  className,
+}: IntegrationCardProps) {
+  const hasLogo = Boolean(logoSrc || logoFallback);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 border border-border p-4",
+        connected && "bg-muted/20",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {hasLogo && (
+          <div className="flex shrink-0 items-center">
+            {logoSrc ? (
+              <img
+                src={logoSrc}
+                alt={`${name} logo`}
+                className="h-8 w-16 object-contain object-left"
+              />
+            ) : (
+              <div className="flex h-9 w-9 items-center justify-center">
+                {logoFallback}
+              </div>
+            )}
+          </div>
+        )}
+        <span className="text-label-medium">{name}</span>
+        {connected && (
+          <Badge variant="success" className="gap-1">
+            <Check className="h-3 w-3" />
+            Connected
+          </Badge>
+        )}
+      </div>
+
+      <p className="text-body-small text-muted-foreground">{description}</p>
+
+      {children}
+
+      {!connected && onConnect && (
+        <div className="flex justify-end">
+          <Button variant="outline" size="sm" onClick={onConnect}>
+            Connect
+          </Button>
+        </div>
+      )}
+      {connected && onDisconnect && (
+        <div className="flex justify-end">
+          <Button variant="outline" size="sm" onClick={onDisconnect}>
+            Disconnect
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/kanban-column.tsx

@@ -101,7 +101,6 @@ export interface KanbanColumnProps {
   onCardClick?: (opportunityId: string) => void;
   onViewDetails?: (opportunityId: string) => void;
   onChangePriority?: (opportunityId: string) => void;
-  onLaunchAssistant?: (opportunityId: string) => void;
   onPutOnHold?: (opportunityId: string) => void;
   onDeleteOpportunity?: (opportunityId: string) => void;
   /** Fires when a card is dropped onto this column (HTML5 DnD). */
@@ -150,7 +149,6 @@ export function KanbanColumn({
   onCardClick,
   onViewDetails,
   onChangePriority,
-  onLaunchAssistant,
   onPutOnHold,
   onDeleteOpportunity,
   onCardDrop,
@@ -344,11 +342,6 @@ export function KanbanColumn({
                       ? () => onChangePriority(opp.id)
                       : undefined
                   }
-                  onLaunchAssistant={
-                    onLaunchAssistant
-                      ? () => onLaunchAssistant(opp.id)
-                      : undefined
-                  }
                   onPutOnHold={
                     onPutOnHold ? () => onPutOnHold(opp.id) : undefined
                   }

package/src/components/ui/onboarding-layout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button } from "./button";
-import { Stepper, Step, StepItem } from "./stepper";
+import { Stepper, Step, StepItem, StepIndicator, StepLabel } from "./stepper";
 import { cn } from "../../lib/utils";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -8,6 +8,7 @@ import { cn } from "../../lib/utils";
 export type OnboardingStep = {
   id: string;
   title: string;
+  description?: string;
   isOptional?: boolean;
   isLocked?: boolean;
 };
@@ -31,6 +32,106 @@ export type OnboardingLayoutProps = {
 
 // ─── OnboardingLayout ─────────────────────────────────────────────────────────
 
+// ─── OnboardingPanelLayoutProps ───────────────────────────────────────────────
+
+export type OnboardingPanelLayoutProps = {
+  title: string;
+  subtitle?: string;
+  steps: OnboardingStep[];
+  currentStepIndex: number;
+  canProceed?: boolean;
+  onBack: () => void;
+  onNext: () => void;
+  onSkip?: () => void;
+  className?: string;
+  children: React.ReactNode;
+};
+
+// ─── OnboardingPanelLayout ────────────────────────────────────────────────────
+
+export function OnboardingPanelLayout({
+  title,
+  subtitle,
+  steps,
+  currentStepIndex,
+  canProceed = true,
+  onBack,
+  onNext,
+  onSkip,
+  className,
+  children,
+}: OnboardingPanelLayoutProps) {
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === steps.length - 1;
+
+  return (
+    <div className={cn("flex h-screen bg-background font-sans", className)}>
+      {/* ── Left panel — vertical stepper ── */}
+      <div className="flex w-72 shrink-0 flex-col border-r border-border bg-muted/20 p-8">
+        <div className="flex flex-col gap-1 mb-8">
+          <span className="text-h1">{title}</span>
+          {subtitle && (
+            <span className="text-body-medium text-muted-foreground">
+              {subtitle}
+            </span>
+          )}
+        </div>
+        {steps.length > 1 && (
+          <Stepper
+            activeStep={currentStepIndex}
+            orientation="vertical"
+            className="flex-1"
+          >
+            {steps.map((step) => (
+              <Step key={step.id} className="flex-1">
+                <StepIndicator />
+                <div className="flex flex-1 flex-col">
+                  <StepLabel
+                    description={
+                      step.isLocked ? "Upgrade to unlock" : step.description
+                    }
+                  >
+                    {step.title}
+                  </StepLabel>
+                </div>
+              </Step>
+            ))}
+          </Stepper>
+        )}
+      </div>
+
+      {/* ── Right panel — content + footer ── */}
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex-1 overflow-y-auto px-10 py-8">
+          <div className="max-w-2xl">{children}</div>
+        </div>
+        <div className="flex items-center gap-2 border-t border-border px-10 py-4">
+          <Button
+            variant="outline-primary"
+            size="sm"
+            onClick={onNext}
+            disabled={!canProceed}
+          >
+            {isLastStep ? "Finish Setup" : "Next"}
+          </Button>
+          {!isFirstStep && (
+            <Button variant="outline-secondary" size="sm" onClick={onBack}>
+              Back
+            </Button>
+          )}
+          {onSkip && (
+            <Button variant="ghost" size="sm" onClick={onSkip}>
+              Skip for now
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── OnboardingLayout ─────────────────────────────────────────────────────────
+
 export function OnboardingLayout({
   steps,
   currentStepIndex,

package/src/components/ui/opportunity-card.tsx

@@ -9,7 +9,6 @@ import {
   MoreVertical,
   Clock,
   ArrowRight,
-  Bot,
   ChevronDown,
   ChevronRight,
 } from "lucide-react";
@@ -34,12 +33,6 @@ import {
 } from "@/components/ui/accordion";
 import { TaskCheckItem } from "@/components/ui/pipeline-primitives";
 import { Progress } from "@/components/ui/progress";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 
 /**
  * OpportunityCard — WealthX DS (L3 Card)
@@ -63,8 +56,6 @@ export interface OpportunityTask {
   id: string;
   title: string;
   completed: boolean;
-  aiAgentId?: string | null;
-  aiAgentName?: string | null;
 }
 
 export interface OpportunityCardProps {
@@ -121,7 +112,6 @@ export interface OpportunityCardProps {
   onTaskToggle?: (taskId: string) => void;
   onMarkAsDone?: () => void;
   onMoveToNextStage?: () => void;
-  onLaunchAssistant?: () => void;
   onChangePriority?: () => void;
   onDelete?: () => void;
   onPutOnHold?: () => void;
@@ -226,10 +216,6 @@ function TaskViewCard({
   const hasTasks = totalCount > 0;
   const allDone = hasTasks && completedCount === totalCount;
 
-  // Find the next pending task to surface AI agent info
-  const nextPendingTask = tasks.find((t) => !t.completed);
-  const agentName = nextPendingTask?.aiAgentName ?? null;
-
   const [subtasksExpanded, setSubtasksExpanded] = useState(false);
 
   const hasMenu = onViewDetails || onChangePriority || onPutOnHold || onDelete;
@@ -262,22 +248,7 @@ function TaskViewCard({
     );
   } else if (nextTask) {
     taskHeader = (
-      <>
-        <div className="flex items-center gap-1.5">
-          {agentName && (
-            <Bot
-              className="size-3.5 shrink-0 text-primary"
-              aria-hidden="true"
-            />
-          )}
-          <p className="truncate text-sm font-semibold leading-snug">
-            {nextTask}
-          </p>
-        </div>
-        {agentName && (
-          <p className="mt-0.5 text-xs text-muted-foreground">{agentName}</p>
-        )}
-      </>
+      <p className="truncate text-sm font-semibold leading-snug">{nextTask}</p>
     );
   } else {
     taskHeader = (
@@ -360,7 +331,6 @@ function TaskViewCard({
                   key={task.id}
                   title={task.title}
                   completed={task.completed}
-                  aiAgentName={task.aiAgentName}
                   onToggle={() => onTaskToggle?.(task.id)}
                   size="xs"
                 />
@@ -486,7 +456,6 @@ export function OpportunityCard({
   onTaskToggle,
   onMarkAsDone,
   onMoveToNextStage,
-  onLaunchAssistant,
   onChangePriority,
   onDelete,
   onPutOnHold,
@@ -596,25 +565,6 @@ export function OpportunityCard({
         </div>
 
         <div className="flex items-center gap-1 -mr-1 -mt-1" onClick={stopProp}>
-          {onLaunchAssistant && (
-            <TooltipProvider delay={0}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="size-7 shrink-0"
-                    onClick={onLaunchAssistant}
-                    aria-label="Launch AI"
-                  >
-                    <Bot className="size-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Launch AI</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
           {hasMenu && (
             <DropdownMenu>
               <DropdownMenuTrigger
@@ -762,7 +712,6 @@ export function OpportunityCard({
                       key={task.id}
                       title={task.title}
                       completed={task.completed}
-                      aiAgentName={task.aiAgentName}
                       onToggle={
                         onTaskToggle ? () => onTaskToggle(task.id) : undefined
                       }
@@ -926,7 +875,10 @@ export function LeadCard({
               Or the link below to fill out the loan application directly.
               <br />
               <a
-                href={`https://${loanApplicationUrl.replace(/^https?:\/\//, "")}`}
+                href={`https://${loanApplicationUrl.replace(
+                  /^https?:\/\//,
+                  "",
+                )}`}
                 target="_blank"
                 rel="noreferrer"
                 className="text-primary underline-offset-2 hover:underline"

package/src/components/ui/pipeline-board.tsx

@@ -95,7 +95,6 @@ export interface PipelineBoardProps {
   onMoveToNextStage?: (opportunityId: string) => void;
   onViewDetails?: (opportunityId: string) => void;
   onChangePriority?: (opportunityId: string) => void;
-  onLaunchAssistant?: (opportunityId: string) => void;
   onPutOnHold?: (opportunityId: string) => void;
   onDeleteOpportunity?: (opportunityId: string) => void;
   submittingOpportunityId?: string | null;
@@ -210,7 +209,6 @@ export function PipelineBoard({
   onMoveToNextStage,
   onViewDetails,
   onChangePriority,
-  onLaunchAssistant,
   onPutOnHold,
   onDeleteOpportunity,
   submittingOpportunityId,
@@ -268,7 +266,6 @@ export function PipelineBoard({
             onSendLoanApplication={col.onSendLoanApplication}
             onViewDetails={onViewDetails}
             onChangePriority={onChangePriority}
-            onLaunchAssistant={onLaunchAssistant}
             onPutOnHold={onPutOnHold}
             onDeleteOpportunity={onDeleteOpportunity}
             submittingOpportunityId={submittingOpportunityId}

package/src/components/ui/pipeline-chart.tsx

@@ -2,6 +2,12 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 import { useThemeVars } from "@/lib/theme-provider";
 import { formatCurrencyAbbrev } from "@/lib/format-currency";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
 
 /**
  * PipelineChart — WealthX DS (L4 Section)
@@ -65,8 +71,6 @@ export function PipelineChart({
 }: PipelineChartProps) {
   const themeVars = useThemeVars();
   const [activeId, setActiveId] = React.useState<string | null>(null);
-  const [tooltipX, setTooltipX] = React.useState(0);
-  const barRef = React.useRef<HTMLDivElement>(null);
 
   const nonEmpty = stages.filter((s) => s.value > 0);
   const total = nonEmpty.reduce((sum, s) => sum + s.value, 0);
@@ -86,63 +90,53 @@ export function PipelineChart({
     );
   }
 
-  const activeStage = activeId ? stages.find((s) => s.id === activeId) : null;
-
   return (
     <div
       className={cn("flex flex-col gap-3", className)}
       data-slot="pipeline-chart"
       style={themeVars as React.CSSProperties}
     >
-      {/* Stacked bar */}
-      <div
-        ref={barRef}
-        className="relative flex w-full overflow-hidden"
-        style={{ height: barHeight }}
-      >
-        {nonEmpty.map((stage, i) => {
-          const pct = (stage.value / total) * 100;
-          const color =
-            stage.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length];
-          const isActive = activeId === stage.id;
-
-          return (
-            <div
-              key={stage.id}
-              role="img"
-              className="relative h-full cursor-pointer transition-opacity"
-              style={{
-                width: `${pct}%`,
-                backgroundColor: color,
-                opacity: activeId && !isActive ? 0.5 : 1,
-                minWidth: 2,
-              }}
-              onMouseEnter={(e) => {
-                setActiveId(stage.id);
-                const bar = barRef.current;
-                if (!bar) return;
-                const rect = e.currentTarget.getBoundingClientRect();
-                const barRect = bar.getBoundingClientRect();
-                setTooltipX(rect.left + rect.width / 2 - barRect.left);
-              }}
-              onMouseLeave={() => setActiveId(null)}
-              aria-label={`${stage.name}: ${formatValue(stage.value)}`}
-            />
-          );
-        })}
-
-        {/* Tooltip */}
-        {activeStage && (
-          <div
-            className="pointer-events-none absolute -top-8 z-10 whitespace-nowrap border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-sm"
-            style={{ left: tooltipX, transform: "translateX(-50%)" }}
-          >
-            <span className="font-medium">{activeStage.name}</span>
-            {" — "}
-            {formatValue(activeStage.value)}
-          </div>
-        )}
-      </div>
+      {/* Stacked bar — TooltipContent uses a portal so it is never clipped */}
+      <TooltipProvider>
+        <div
+          className="relative flex w-full overflow-hidden"
+          style={{ height: barHeight }}
+        >
+          {nonEmpty.map((stage, i) => {
+            const pct = (stage.value / total) * 100;
+            const color =
+              stage.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length];
+            const isActive = activeId === stage.id;
+
+            return (
+              <Tooltip key={stage.id}>
+                <TooltipTrigger
+                  render={
+                    <div
+                      role="img"
+                      className="relative h-full cursor-pointer transition-opacity"
+                      style={{
+                        width: `${pct}%`,
+                        backgroundColor: color,
+                        opacity: activeId && !isActive ? 0.5 : 1,
+                        minWidth: 2,
+                      }}
+                      onMouseEnter={() => setActiveId(stage.id)}
+                      onMouseLeave={() => setActiveId(null)}
+                      aria-label={`${stage.name}: ${formatValue(stage.value)}`}
+                    />
+                  }
+                />
+                <TooltipContent side="top">
+                  <span className="font-medium">{stage.name}</span>
+                  {" — "}
+                  {formatValue(stage.value)}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </TooltipProvider>
 
       {/* Legend */}
       <div className="flex flex-wrap gap-x-4 gap-y-1.5">