@wealthx/shadcn 1.2.2 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "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",
@@ -368,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",
@@ -447,6 +467,56 @@
       "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,22 @@ export type {
   AccordionContentProps,
 } from "./ui/accordion";
 
+export { AdvisorCard, AdvisorInviteCard } from "./ui/advisor-card";
+export type {
+  AdvisorCardProps,
+  AdvisorInviteCardProps,
+  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 +81,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 +171,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,
@@ -531,6 +627,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,
@@ -539,6 +644,8 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
+  PaginationNavButtons,
+  TablePagination,
 } from "./ui/pagination";
 export type {
   PaginationProps,
@@ -548,6 +655,8 @@ export type {
   PaginationPreviousProps,
   PaginationNextProps,
   PaginationEllipsisProps,
+  PaginationNavButtonsProps,
+  TablePaginationProps,
 } from "./ui/pagination";
 
 export { PipelineAlerts } from "./ui/pipeline-alerts";
@@ -603,6 +712,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";
 
@@ -654,15 +769,6 @@ export type {
 export { Separator } from "./ui/separator";
 export type { SeparatorProps } from "./ui/separator";
 
-export { SidebarNav } from "./ui/sidebar-nav";
-export type {
-  SidebarNavProps,
-  SidebarNavSubItem,
-  SidebarNavItem,
-  SidebarNavMetricItem,
-  SidebarNavMetricsGroup,
-} from "./ui/sidebar-nav";
-
 export {
   Sheet,
   SheetClose,

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,284 @@
+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,
+  Plus,
+} 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;
+  /** Broker company name — shown as text fallback when no logo is provided */
+  companyName?: string;
+  /** URL of the broker company logo — renders as avatar image */
+  companyLogoUrl?: string;
+  /** Explicit initials for the avatar fallback; derived from companyName if omitted */
+  avatarInitials?: string;
+  /** Whether this is the client's primary assigned advisor */
+  isPrimary?: boolean;
+  /**
+   * Upcoming appointments shown as stacked strips.
+   * - `undefined` — strip section hidden
+   * - `null` or `[]` — empty state: "No upcoming appointments"
+   * - array of items — one coloured strip per appointment
+   */
+  appointments?: 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 an appointment strip is clicked; receives the appointment index */
+  onViewAppointment?: (index: number) => void;
+}
+
+export interface AdvisorInviteCardProps {
+  /** Called when the "Add Advisor" CTA is clicked */
+  onInvite?: () => 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,
+  companyName,
+  companyLogoUrl,
+  avatarInitials,
+  isPrimary = false,
+  appointments,
+  onRefer,
+  onMoreOptions,
+  onBookAppointment,
+  onViewAppointment,
+}: AdvisorCardProps) {
+  const hasAppointments = appointments !== undefined;
+  const appointmentList =
+    appointments === null ||
+    (Array.isArray(appointments) && appointments.length === 0)
+      ? null
+      : appointments;
+
+  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 ??
+              (companyName
+                ? companyName
+                    .split(" ")
+                    .map((w) => w[0])
+                    .join("")
+                    .slice(0, 2)
+                    .toUpperCase()
+                : 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-sm text-muted-foreground">
+              <Phone className="h-4 w-4 shrink-0" />
+              <span>{phone}</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <Mail className="h-4 w-4 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 strips ── */}
+      {hasAppointments && (
+        <>
+          <Separator />
+          {appointmentList ? (
+            appointmentList.map((appt, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <Separator />}
+                <div
+                  className={`flex items-center gap-3 px-4 py-3 ${STRIP_BG[appt.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[appt.status]}
+                        className="text-[10px]"
+                      >
+                        {STATUS_LABEL[appt.status]}
+                      </Badge>
+                      {appt.appointmentType && (
+                        <span className="truncate text-sm font-semibold">
+                          {appt.appointmentType}
+                        </span>
+                      )}
+                    </div>
+                    <p className="whitespace-nowrap text-sm text-muted-foreground">
+                      {appt.date} · {appt.timeStart}–{appt.timeEnd}
+                    </p>
+                  </div>
+                  {onViewAppointment && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 shrink-0 gap-1 px-2 text-xs"
+                      onClick={() => onViewAppointment(i)}
+                    >
+                      View
+                      <ChevronRight className="h-3 w-3" />
+                    </Button>
+                  )}
+                </div>
+              </React.Fragment>
+            ))
+          ) : (
+            /* Empty state */
+            <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 flex-col gap-2 px-4 py-3">
+        {onBookAppointment && (
+          <Button
+            variant="outline-primary"
+            size="sm"
+            className="w-full"
+            onClick={onBookAppointment}
+          >
+            Book Appointment
+          </Button>
+        )}
+        {onRefer && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={onRefer}
+          >
+            Refer {name} to Others
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AdvisorInviteCard
+// ---------------------------------------------------------------------------
+
+export function AdvisorInviteCard({ onInvite }: AdvisorInviteCardProps) {
+  return (
+    <Button
+      variant="ghost"
+      onClick={onInvite}
+      className="flex h-auto w-full flex-col items-center justify-center gap-3 border border-dashed border-border bg-card p-8 text-center transition-colors hover:bg-muted/40"
+    >
+      <div className="flex h-10 w-10 items-center justify-center border border-dashed border-muted-foreground/40">
+        <Plus className="h-5 w-5 text-muted-foreground" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium">Add Another Advisor</p>
+        <p className="text-xs text-muted-foreground">
+          Connect more advisors to your account
+        </p>
+      </div>
+    </Button>
+  );
+}

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