@wealthx/shadcn 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/index.tsx

@@ -11,9 +11,10 @@ export type {
   AccordionContentProps,
 } from "./ui/accordion";
 
-export { AdvisorCard } from "./ui/advisor-card";
+export { AdvisorCard, AdvisorInviteCard } from "./ui/advisor-card";
 export type {
   AdvisorCardProps,
+  AdvisorInviteCardProps,
   AdvisorAppointmentStrip,
 } from "./ui/advisor-card";
 

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

@@ -10,6 +10,7 @@ import {
   Mail,
   MoreVertical,
   Phone,
+  Plus,
 } from "lucide-react";
 import type { AppointmentStatus } from "./appointment-time-slot-picker";
 
@@ -39,27 +40,34 @@ export interface AdvisorCardProps {
   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;
-  /** Initials shown in Avatar fallback when no companyLogoUrl is provided */
+  /** 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 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
+   * 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
    */
-  appointment?: AdvisorAppointmentStrip | null;
+  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 the appointment strip is clicked */
-  onViewAppointment?: () => 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;
 }
 
 // ---------------------------------------------------------------------------
@@ -99,15 +107,23 @@ export function AdvisorCard({
   role,
   phone,
   email,
+  companyName,
   companyLogoUrl,
   avatarInitials,
   isPrimary = false,
-  appointment,
+  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 ── */}
@@ -117,7 +133,15 @@ export function AdvisorCard({
             <AvatarImage src={companyLogoUrl} alt={`${name} company logo`} />
           )}
           <AvatarFallback className="text-sm">
-            {avatarInitials ?? name.slice(0, 2).toUpperCase()}
+            {avatarInitials ??
+              (companyName
+                ? companyName
+                    .split(" ")
+                    .map((w) => w[0])
+                    .join("")
+                    .slice(0, 2)
+                    .toUpperCase()
+                : name.slice(0, 2).toUpperCase())}
           </AvatarFallback>
         </Avatar>
 
@@ -125,12 +149,12 @@ export function AdvisorCard({
           <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" />
+            <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-xs text-muted-foreground">
-              <Mail className="h-3 w-3 shrink-0" />
+            <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>
@@ -151,49 +175,52 @@ export function AdvisorCard({
         </div>
       </div>
 
-      {/* ── Appointment strip ── */}
-      {appointment !== undefined && (
+      {/* ── Appointment strips ── */}
+      {hasAppointments && (
         <>
           <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>
+          {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>
-                <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>
+              </React.Fragment>
+            ))
           ) : (
-            /* No appointment */
+            /* 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">
@@ -206,18 +233,24 @@ export function AdvisorCard({
 
       {/* ── Footer actions ── */}
       <Separator />
-      <div className="flex items-center gap-2 px-4 py-3">
+      <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" onClick={onRefer}>
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={onRefer}
+          >
             Refer {name} to Others
           </Button>
         )}
@@ -225,3 +258,27 @@ export function AdvisorCard({
     </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>
+  );
+}