@wealthx/shadcn 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -173,6 +173,16 @@
       "import": "./dist/components/ui/alert.mjs",
       "require": "./dist/components/ui/alert.js"
     },
+    "./page-header": {
+      "types": "./src/components/ui/page-header.tsx",
+      "import": "./dist/components/ui/page-header.mjs",
+      "require": "./dist/components/ui/page-header.js"
+    },
+    "./page-top-bar": {
+      "types": "./src/components/ui/page-top-bar.tsx",
+      "import": "./dist/components/ui/page-top-bar.mjs",
+      "require": "./dist/components/ui/page-top-bar.js"
+    },
     "./pagination": {
       "types": "./src/components/ui/pagination.tsx",
       "import": "./dist/components/ui/pagination.mjs",
@@ -248,6 +258,11 @@
       "import": "./dist/components/ui/chip.mjs",
       "require": "./dist/components/ui/chip.js"
     },
+    "./color-picker": {
+      "types": "./src/components/ui/color-picker.tsx",
+      "import": "./dist/components/ui/color-picker.mjs",
+      "require": "./dist/components/ui/color-picker.js"
+    },
     "./combobox": {
       "types": "./src/components/ui/combobox.tsx",
       "import": "./dist/components/ui/combobox.mjs",
@@ -363,6 +378,16 @@
       "import": "./dist/components/ui/backoffice-alert-history-chart.mjs",
       "require": "./dist/components/ui/backoffice-alert-history-chart.js"
     },
+    "./backoffice-alerts-chart": {
+      "types": "./src/components/ui/backoffice-alerts-chart.tsx",
+      "import": "./dist/components/ui/backoffice-alerts-chart.mjs",
+      "require": "./dist/components/ui/backoffice-alerts-chart.js"
+    },
+    "./backoffice-connections-chart": {
+      "types": "./src/components/ui/backoffice-connections-chart.tsx",
+      "import": "./dist/components/ui/backoffice-connections-chart.mjs",
+      "require": "./dist/components/ui/backoffice-connections-chart.js"
+    },
     "./pipeline-primitives": {
       "types": "./src/components/ui/pipeline-primitives.tsx",
       "import": "./dist/components/ui/pipeline-primitives.mjs",
@@ -413,6 +438,11 @@
       "import": "./dist/components/ui/stage-timeline.mjs",
       "require": "./dist/components/ui/stage-timeline.js"
     },
+    "./stepper": {
+      "types": "./src/components/ui/stepper.tsx",
+      "import": "./dist/components/ui/stepper.mjs",
+      "require": "./dist/components/ui/stepper.js"
+    },
     "./ai-assistant-drawer": {
       "types": "./src/components/ui/ai-assistant-drawer.tsx",
       "import": "./dist/components/ui/ai-assistant-drawer.mjs",
@@ -432,6 +462,61 @@
       "types": "./src/components/ui/opportunity-summary-tab.tsx",
       "import": "./dist/components/ui/opportunity-summary-tab.mjs",
       "require": "./dist/components/ui/opportunity-summary-tab.js"
+    },
+    "./sidebar-nav": {
+      "types": "./src/components/ui/sidebar-nav.tsx",
+      "import": "./dist/components/ui/sidebar-nav.mjs",
+      "require": "./dist/components/ui/sidebar-nav.js"
+    },
+    "./appointment-time-slot-picker": {
+      "types": "./src/components/ui/appointment-time-slot-picker.tsx",
+      "import": "./dist/components/ui/appointment-time-slot-picker.mjs",
+      "require": "./dist/components/ui/appointment-time-slot-picker.js"
+    },
+    "./advisor-card": {
+      "types": "./src/components/ui/advisor-card.tsx",
+      "import": "./dist/components/ui/advisor-card.mjs",
+      "require": "./dist/components/ui/advisor-card.js"
+    },
+    "./appointment-upcoming-card": {
+      "types": "./src/components/ui/appointment-upcoming-card.tsx",
+      "import": "./dist/components/ui/appointment-upcoming-card.mjs",
+      "require": "./dist/components/ui/appointment-upcoming-card.js"
+    },
+    "./appointment-mini-card": {
+      "types": "./src/components/ui/appointment-mini-card.tsx",
+      "import": "./dist/components/ui/appointment-mini-card.mjs",
+      "require": "./dist/components/ui/appointment-mini-card.js"
+    },
+    "./appointment-gmail-connect": {
+      "types": "./src/components/ui/appointment-gmail-connect.tsx",
+      "import": "./dist/components/ui/appointment-gmail-connect.mjs",
+      "require": "./dist/components/ui/appointment-gmail-connect.js"
+    },
+    "./appointment-calendar-view": {
+      "types": "./src/components/ui/appointment-calendar-view.tsx",
+      "import": "./dist/components/ui/appointment-calendar-view.mjs",
+      "require": "./dist/components/ui/appointment-calendar-view.js"
+    },
+    "./appointment-action-dialogs": {
+      "types": "./src/components/ui/appointment-action-dialogs.tsx",
+      "import": "./dist/components/ui/appointment-action-dialogs.mjs",
+      "require": "./dist/components/ui/appointment-action-dialogs.js"
+    },
+    "./appointment-book-dialog": {
+      "types": "./src/components/ui/appointment-book-dialog.tsx",
+      "import": "./dist/components/ui/appointment-book-dialog.mjs",
+      "require": "./dist/components/ui/appointment-book-dialog.js"
+    },
+    "./appointment-detail-sheet": {
+      "types": "./src/components/ui/appointment-detail-sheet.tsx",
+      "import": "./dist/components/ui/appointment-detail-sheet.mjs",
+      "require": "./dist/components/ui/appointment-detail-sheet.js"
+    },
+    "./appointment-availability-settings": {
+      "types": "./src/components/ui/appointment-availability-settings.tsx",
+      "import": "./dist/components/ui/appointment-availability-settings.mjs",
+      "require": "./dist/components/ui/appointment-availability-settings.js"
     }
   }
 }

package/src/components/index.tsx

@@ -11,6 +11,21 @@ export type {
   AccordionContentProps,
 } from "./ui/accordion";
 
+export { AdvisorCard } from "./ui/advisor-card";
+export type {
+  AdvisorCardProps,
+  AdvisorAppointmentStrip,
+} from "./ui/advisor-card";
+
+export { AppointmentUpcomingCard } from "./ui/appointment-upcoming-card";
+export type {
+  AppointmentUpcomingCardProps,
+  AppointmentUpcomingData,
+  AppointmentUpcomingAdvisor,
+  AppointmentUpcomingStatus,
+  AppointmentUpcomingSlot,
+} from "./ui/appointment-upcoming-card";
+
 export { AddColumnModal } from "./ui/add-column-modal";
 export type {
   AddColumnModalProps,
@@ -65,6 +80,72 @@ export type {
   AlertDialogTriggerProps,
 } from "./ui/alert-dialog";
 
+export { AppointmentAvailabilitySettings } from "./ui/appointment-availability-settings";
+export type {
+  AppointmentAvailabilitySettingsProps,
+  AppointmentAvailabilityPrefs,
+  AppointmentBlockedDate,
+  AppointmentDaySchedule,
+} from "./ui/appointment-availability-settings";
+
+export {
+  AppointmentConfirmDialog,
+  AppointmentRescheduleDialog,
+} from "./ui/appointment-action-dialogs";
+export type {
+  AppointmentConfirmAction,
+  AppointmentConfirmDialogProps,
+  AppointmentRescheduleDialogProps,
+} from "./ui/appointment-action-dialogs";
+
+export { AppointmentBookDialog } from "./ui/appointment-book-dialog";
+export type {
+  AppointmentBookDialogProps,
+  AppointmentBookingSlot,
+  AppointmentClient,
+  AppointmentOfflineLocation,
+} from "./ui/appointment-book-dialog";
+
+export { AppointmentCalendarView } from "./ui/appointment-calendar-view";
+export type {
+  AppointmentCalendarViewProps,
+  AppointmentCalendarItem,
+  AppointmentWeekDay,
+} from "./ui/appointment-calendar-view";
+
+export { AppointmentDetailSheet } from "./ui/appointment-detail-sheet";
+export type {
+  AppointmentDetailSheetProps,
+  AppointmentDetailItem,
+  AppointmentClientProfile,
+  LoanApplicationStatus,
+} from "./ui/appointment-detail-sheet";
+
+export { AppointmentGmailConnect } from "./ui/appointment-gmail-connect";
+export type {
+  AppointmentGmailConnectProps,
+  GmailConnection,
+  GmailConnectionState,
+} from "./ui/appointment-gmail-connect";
+
+export { AppointmentMiniCard } from "./ui/appointment-mini-card";
+export type {
+  AppointmentMiniCardProps,
+  AppointmentMiniCardItem,
+} from "./ui/appointment-mini-card";
+
+export {
+  AppointmentTimeSlotPicker,
+  AppointmentSlotSection,
+} from "./ui/appointment-time-slot-picker";
+export type {
+  AppointmentTimeSlotPickerProps,
+  AppointmentSlotSectionProps,
+  AppointmentTimeSlot,
+  AppointmentStatus,
+  AppointmentMeetingFormat,
+} from "./ui/appointment-time-slot-picker";
+
 export {
   Avatar,
   AvatarImage,
@@ -89,6 +170,20 @@ export type {
   AlertHistoryPeriod,
 } from "./ui/backoffice-alert-history-chart";
 
+export { BackofficeAlertsChart } from "./ui/backoffice-alerts-chart";
+export type {
+  BackofficeAlertsChartProps,
+  AlertSummaryDataPoint,
+  AlertSummaryPeriod,
+} from "./ui/backoffice-alerts-chart";
+
+export { BackofficeConnectionsChart } from "./ui/backoffice-connections-chart";
+export type {
+  BackofficeConnectionsChartProps,
+  ConnectionSummaryDataPoint,
+  ConnectionSummaryPeriod,
+} from "./ui/backoffice-connections-chart";
+
 export { BackofficeContactHistoryChart } from "./ui/backoffice-contact-history-chart";
 export type {
   BackofficeContactHistoryChartProps,
@@ -153,6 +248,20 @@ export type { CheckboxProps, CheckboxCardProps } from "./ui/checkbox";
 export { Chip } from "./ui/chip";
 export type { ChipProps } from "./ui/chip";
 
+export {
+  ColorPicker,
+  ColorPickerContent,
+  ColorSwatch,
+  COLOR_PICKER_PRESETS,
+  isValidHex,
+  normalizeHex,
+} from "./ui/color-picker";
+export type {
+  ColorPickerProps,
+  ColorPickerContentProps,
+  ColorSwatchProps,
+} from "./ui/color-picker";
+
 export {
   Combobox,
   ComboboxTrigger,
@@ -191,6 +300,7 @@ export {
 export type {
   DataTableProps,
   ColumnDef,
+  PaginationState,
   SortingState,
   ColumnFiltersState,
   VisibilityState,
@@ -516,6 +626,15 @@ export type {
 export { OpportunitySummaryTab } from "./ui/opportunity-summary-tab";
 export type { OpportunitySummaryTabProps } from "./ui/opportunity-summary-tab";
 
+export { SidebarNav } from "./ui/sidebar-nav";
+export type {
+  SidebarNavProps,
+  SidebarNavItem,
+  SidebarNavSubItem,
+  SidebarNavMetricItem,
+  SidebarNavMetricsGroup,
+} from "./ui/sidebar-nav";
+
 export {
   Pagination,
   PaginationContent,
@@ -524,6 +643,8 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationNavButtons,
+  TablePagination,
 } from "./ui/pagination";
 export type {
   PaginationProps,
@@ -533,6 +654,8 @@ export type {
   PaginationPreviousProps,
   PaginationNextProps,
   PaginationEllipsisProps,
+  PaginationNavButtonsProps,
+  TablePaginationProps,
 } from "./ui/pagination";
 
 export { PipelineAlerts } from "./ui/pipeline-alerts";
@@ -588,6 +711,12 @@ export type {
   PopoverDescriptionProps,
 } from "./ui/popover";
 
+export { PageHeader } from "./ui/page-header";
+export type { PageHeaderProps } from "./ui/page-header";
+
+export { PageTopBar } from "./ui/page-top-bar";
+export type { PageTopBarProps } from "./ui/page-top-bar";
+
 export { Progress } from "./ui/progress";
 export type { ProgressProps } from "./ui/progress";
 
@@ -680,6 +809,23 @@ export type {
   StageTimelineTask,
 } from "./ui/stage-timeline";
 
+export {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepLabel,
+  StepContent,
+  StepItem,
+} from "./ui/stepper";
+export type {
+  StepperProps,
+  StepProps,
+  StepIndicatorProps,
+  StepLabelProps,
+  StepContentProps,
+  StepItemProps,
+} from "./ui/stepper";
+
 export { Switch, SwitchCard } from "./ui/switch";
 export type { SwitchProps, SwitchCardProps } from "./ui/switch";
 

package/src/components/ui/add-column-modal.tsx

@@ -8,7 +8,7 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
@@ -262,17 +262,17 @@ export function AddColumnModal({
                       className="flex-1"
                       disabled={loading}
                     />
-                    <button
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
                       onClick={() => removeTask(task.id)}
                       disabled={loading}
-                      className={cn(
-                        buttonVariants({ variant: "ghost", size: "icon" }),
-                        "size-9 shrink-0 text-muted-foreground hover:text-destructive",
-                      )}
+                      className="size-9 shrink-0 text-muted-foreground hover:text-destructive"
                       aria-label="Remove task"
                     >
                       <Trash2 className="size-4" />
-                    </button>
+                    </Button>
                   </div>
 
                   {aiAgents.length > 0 && (

package/src/components/ui/add-lead-modal.tsx

@@ -126,13 +126,16 @@ export function AddLeadModal({
             disabled={isSubmitting}
           />
           {searchValue && (
-            <button
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
               onClick={() => onSearchChange?.("")}
-              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              className="absolute right-2.5 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
               aria-label="Clear search"
             >
               <X className="size-3.5" />
-            </button>
+            </Button>
           )}
         </div>
 

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

@@ -0,0 +1,227 @@
+import React from "react";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Separator } from "./separator";
+import {
+  Calendar,
+  CalendarCheck,
+  ChevronRight,
+  Mail,
+  MoreVertical,
+  Phone,
+} from "lucide-react";
+import type { AppointmentStatus } from "./appointment-time-slot-picker";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** Appointment data shown in the strip inside the advisor card */
+export interface AdvisorAppointmentStrip {
+  status: AppointmentStatus;
+  /** Human-readable appointment type — e.g. "Financial Review" */
+  appointmentType?: string;
+  /** Display date string — e.g. "Wed, 23 Apr 2026" */
+  date: string;
+  /** Display start time — e.g. "2:00 PM" */
+  timeStart: string;
+  /** Display end time — e.g. "2:30 PM" */
+  timeEnd: string;
+}
+
+export interface AdvisorCardProps {
+  /** Advisor full name */
+  name: string;
+  /** Job title / role label */
+  role: string;
+  /** Phone number string */
+  phone: string;
+  /** Email address */
+  email: string;
+  /** URL of the broker company logo — renders as avatar image */
+  companyLogoUrl?: string;
+  /** Initials shown in Avatar fallback when no companyLogoUrl is provided */
+  avatarInitials?: string;
+  /** Whether this is the client's primary assigned advisor */
+  isPrimary?: boolean;
+  /**
+   * Upcoming appointment data shown in the strip.
+   * - `undefined` — strip is hidden (feature not applicable)
+   * - `null` — empty state: "No upcoming appointments"
+   * - object — appointment info with status colour
+   */
+  appointment?: AdvisorAppointmentStrip | null;
+  /** Called when "Refer [name] to Others" is clicked */
+  onRefer?: () => void;
+  /** Called when the ⋮ overflow menu is clicked */
+  onMoreOptions?: () => void;
+  /** Called when "Book Appointment" is clicked */
+  onBookAppointment?: () => void;
+  /** Called when "View →" in the appointment strip is clicked */
+  onViewAppointment?: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Status config
+// ---------------------------------------------------------------------------
+
+const STATUS_VARIANT: Record<
+  AppointmentStatus,
+  "warning" | "success" | "destructive" | "info"
+> = {
+  pending: "warning",
+  confirmed: "success",
+  cancelled: "destructive",
+  rescheduled: "info",
+};
+
+const STATUS_LABEL: Record<AppointmentStatus, string> = {
+  pending: "Pending",
+  confirmed: "Confirmed",
+  cancelled: "Cancelled",
+  rescheduled: "Rescheduled",
+};
+
+const STRIP_BG: Record<AppointmentStatus, string> = {
+  pending: "bg-warning/5",
+  confirmed: "bg-success/5",
+  cancelled: "bg-destructive/5",
+  rescheduled: "bg-info/5",
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AdvisorCard({
+  name,
+  role,
+  phone,
+  email,
+  companyLogoUrl,
+  avatarInitials,
+  isPrimary = false,
+  appointment,
+  onRefer,
+  onMoreOptions,
+  onBookAppointment,
+  onViewAppointment,
+}: AdvisorCardProps) {
+  return (
+    <div className="flex flex-col border border-border bg-card">
+      {/* ── Advisor info ── */}
+      <div className="flex items-start gap-4 p-4">
+        <Avatar className="h-10 w-10 shrink-0">
+          {companyLogoUrl && (
+            <AvatarImage src={companyLogoUrl} alt={`${name} company logo`} />
+          )}
+          <AvatarFallback className="text-sm">
+            {avatarInitials ?? name.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <p className="text-sm font-semibold leading-tight">{name}</p>
+          <p className="text-sm text-muted-foreground">{role}</p>
+          <div className="mt-2 flex flex-col gap-1">
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Phone className="h-3 w-3 shrink-0" />
+              <span>{phone}</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Mail className="h-3 w-3 shrink-0" />
+              <span>{email}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Badge + overflow menu */}
+        <div className="flex shrink-0 items-center gap-1.5">
+          {isPrimary && <Badge variant="success">Primary</Badge>}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onMoreOptions}
+            aria-label="More options"
+          >
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Appointment strip ── */}
+      {appointment !== undefined && (
+        <>
+          <Separator />
+          {appointment ? (
+            /* Has appointment */
+            <div
+              className={`flex items-center gap-3 px-4 py-3 ${STRIP_BG[appointment.status]}`}
+            >
+              <CalendarCheck className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant={STATUS_VARIANT[appointment.status]}
+                    className="text-[10px]"
+                  >
+                    {STATUS_LABEL[appointment.status]}
+                  </Badge>
+                  {appointment.appointmentType && (
+                    <span className="truncate text-xs text-muted-foreground">
+                      {appointment.appointmentType}
+                    </span>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {appointment.date} · {appointment.timeStart}–
+                  {appointment.timeEnd}
+                </p>
+              </div>
+              {onViewAppointment && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 shrink-0 gap-1 px-2 text-xs"
+                  onClick={onViewAppointment}
+                >
+                  View
+                  <ChevronRight className="h-3 w-3" />
+                </Button>
+              )}
+            </div>
+          ) : (
+            /* No appointment */
+            <div className="flex items-center gap-3 px-4 py-3">
+              <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <p className="flex-1 text-xs text-muted-foreground">
+                No upcoming appointments
+              </p>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* ── Footer actions ── */}
+      <Separator />
+      <div className="flex items-center gap-2 px-4 py-3">
+        {onBookAppointment && (
+          <Button
+            variant="outline-primary"
+            size="sm"
+            onClick={onBookAppointment}
+          >
+            Book Appointment
+          </Button>
+        )}
+        {onRefer && (
+          <Button variant="outline" size="sm" onClick={onRefer}>
+            Refer {name} to Others
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/ai-assistant-drawer.tsx

@@ -141,10 +141,11 @@ function AiTaskCard({
   onSelect: (text: string) => void;
 }) {
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
       onClick={() => onSelect(suggestion.title)}
-      className="flex flex-col gap-1 border border-border bg-background p-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="h-auto w-full flex-col items-start gap-1 border border-border bg-background p-3 text-left hover:bg-muted/50"
     >
       <span className="text-sm font-medium text-foreground">
         {suggestion.title}
@@ -152,7 +153,7 @@ function AiTaskCard({
       <span className="text-xs text-muted-foreground">
         {suggestion.description}
       </span>
-    </button>
+    </Button>
   );
 }