@wealthx/shadcn 1.5.12 → 1.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.12",
+  "version": "1.5.13",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -949,9 +949,9 @@
       "require": "./dist/components/ui/transactions-summary-block.js"
     },
     "./resource-center": {
-      "types": "./src/components/ui/resource-center.tsx",
-      "import": "./dist/components/ui/resource-center.mjs",
-      "require": "./dist/components/ui/resource-center.js"
+      "types": "./src/components/ui/resource-center/index.tsx",
+      "import": "./dist/components/ui/resource-center/index.mjs",
+      "require": "./dist/components/ui/resource-center/index.js"
     }
   }
 }

package/src/components/index.tsx

@@ -1262,6 +1262,7 @@ export {
   ResourceCarousel,
   ResourceCenterHeader,
   ResourceDocumentCard,
+  ResourceEmailEditorDialog,
   ResourceEmailTemplateCard,
   ResourceModal,
   ResourceVideoCard,
@@ -1271,6 +1272,7 @@ export type {
   ResourceCenterHeaderProps,
   ResourceDocumentCardProps,
   ResourceDocumentItem,
+  ResourceEmailEditorDialogProps,
   ResourceEmailTemplateCardProps,
   ResourceEmailTemplateItem,
   ResourceModalAttachment,

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

@@ -4,18 +4,10 @@ import { Badge } from "./badge";
 import { Button } from "./button";
 import { Separator } from "./separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
-import {
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  RefreshCw,
-  X,
-  CalendarClock,
-} from "lucide-react";
+import { ChevronLeft, ChevronRight } 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";
 
 export interface AppointmentCalendarItem {
@@ -60,48 +52,41 @@ export interface AppointmentCalendarViewProps {
   onToday?: () => void;
   onViewChange?: (view: "day" | "week" | "month") => void;
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
-  /** Slot rendered in the calendar toolbar right side (e.g. pending request button + new appointment button) */
+  /** Slot rendered in the calendar toolbar right side */
   toolbarActions?: ReactNode;
 }
 
 // ---------------------------------------------------------------------------
-// Status styling
+// Status config
 // ---------------------------------------------------------------------------
 
-const STATUS_COLORS: Record<AppointmentStatus, string> = {
-  pending: "border-l-warning bg-warning/5",
-  confirmed: "border-l-success bg-success/5",
-  cancelled: "border-l-destructive bg-destructive/5",
-  rescheduled: "border-l-info bg-info/5",
-};
-
-const STATUS_CONFIG: Record<
+const STATUS: Record<
   AppointmentStatus,
   {
-    variant: "warning" | "success" | "destructive" | "info";
+    card: string;
+    badge: "warning" | "success" | "destructive" | "info";
     label: string;
-    icon: ReactNode;
   }
 > = {
   pending: {
-    variant: "warning",
+    card: "border-l-warning bg-warning/[0.06]",
+    badge: "warning",
     label: "Pending",
-    icon: <CalendarClock size={12} />,
   },
   confirmed: {
-    variant: "success",
+    card: "border-l-success bg-success/[0.06]",
+    badge: "success",
     label: "Confirmed",
-    icon: <Check size={12} />,
   },
   cancelled: {
-    variant: "destructive",
+    card: "border-l-destructive bg-destructive/[0.06]",
+    badge: "destructive",
     label: "Cancelled",
-    icon: <X size={12} />,
   },
   rescheduled: {
-    variant: "info",
+    card: "border-l-info bg-info/[0.06]",
+    badge: "info",
     label: "Rescheduled",
-    icon: <RefreshCw size={12} />,
   },
 };
 
@@ -123,6 +108,75 @@ function getHourFromTime(time: string): number {
 
 const DEFAULT_HOURS = [9, 10, 11, 12, 13, 14, 15, 16, 17];
 
+// ---------------------------------------------------------------------------
+// Shared sub-components
+// ---------------------------------------------------------------------------
+
+function TimeGutter({ hour }: { hour: number }) {
+  return (
+    <div className="flex w-16 shrink-0 items-start justify-end border-r border-border pr-3 pt-2">
+      <span className="text-caption text-muted-foreground">
+        {formatHour(hour)}
+      </span>
+    </div>
+  );
+}
+
+function DayCard({
+  apt,
+  onSelect,
+}: {
+  apt: AppointmentCalendarItem;
+  onSelect?: (apt: AppointmentCalendarItem) => void;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      onClick={() => onSelect?.(apt)}
+      className={`h-auto w-full justify-start gap-3 border-l-2 px-3 py-3 text-left hover:opacity-80 ${STATUS[apt.status].card}`}
+    >
+      <Avatar className="h-8 w-8 shrink-0">
+        <AvatarFallback className="text-caption">
+          {apt.clientAvatarInitials}
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="text-body-small font-semibold">{apt.clientName}</span>
+        <span className="text-caption text-muted-foreground">
+          {apt.timeStart} – {apt.timeEnd}
+        </span>
+      </div>
+      <Badge variant={STATUS[apt.status].badge}>
+        {STATUS[apt.status].label}
+      </Badge>
+    </Button>
+  );
+}
+
+function AptChip({
+  apt,
+  onSelect,
+  className,
+}: {
+  apt: AppointmentCalendarItem;
+  onSelect?: (apt: AppointmentCalendarItem) => void;
+  className?: string;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      onClick={() => onSelect?.(apt)}
+      className={`h-auto w-full justify-start truncate border-l-2 text-left hover:opacity-80 ${STATUS[apt.status].card} ${className ?? ""}`}
+    >
+      <span className="truncate text-caption font-medium">
+        {apt.timeStart} {apt.clientName}
+      </span>
+    </Button>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Day view
 // ---------------------------------------------------------------------------
@@ -141,82 +195,51 @@ function DayView({
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
 }) {
   const d = new Date(date + "T00:00:00");
-  const dayLabel = formatWeekdayShort(d);
-  const dayShort = d.getDate();
   const isToday = date === today;
   const dayApts = appointments.filter((a) => a.date === date);
 
   return (
-    <div className="flex flex-col">
-      {/* Column header */}
-      <div className="grid grid-cols-[48px_1fr] border-b border-border">
-        <div className="border-r border-border" />
-        <div
-          className={`flex flex-col items-center gap-1 py-3 ${isToday ? "bg-primary/5" : ""}`}
-        >
+    <div className="flex flex-1 flex-col">
+      <div className="flex shrink-0 border-b border-border">
+        <div className="w-16 shrink-0 border-r border-border" />
+        <div className="flex flex-1 flex-col items-center gap-1 py-4">
           <span
-            className={`text-xs font-medium tracking-wide ${isToday ? "font-semibold text-primary" : "text-muted-foreground"}`}
+            className={`text-caption tracking-wide ${isToday ? "font-semibold text-primary" : "text-muted-foreground"}`}
           >
-            {dayLabel}
+            {formatWeekdayShort(d)}
           </span>
           <span
-            className={`flex h-10 w-10 items-center justify-center text-xl font-semibold ${isToday ? "bg-primary text-primary-foreground" : ""}`}
+            className={`flex h-10 w-10 items-center justify-center text-xl font-semibold ${isToday ? "text-primary" : ""}`}
           >
-            {dayShort}
+            {d.getDate()}
           </span>
         </div>
       </div>
 
-      {/* Hourly grid */}
-      {hours.map((hour) => {
-        const aptsAtHour = dayApts.filter(
-          (a) => getHourFromTime(a.timeStart) === hour,
-        );
-        return (
-          <div
-            key={hour}
-            className="grid min-h-[60px] grid-cols-[48px_1fr] border-b border-border/40 last:border-b-0"
-          >
-            <div
-              className={`flex items-start justify-end border-r border-border pr-2 pt-1 ${isToday ? "bg-primary/5" : ""}`}
-            >
-              <span className="text-[10px] text-muted-foreground">
-                {formatHour(hour)}
-              </span>
-            </div>
+      <div className="flex flex-1 flex-col">
+        {hours.map((hour) => {
+          const aptsAtHour = dayApts.filter(
+            (a) => getHourFromTime(a.timeStart) === hour,
+          );
+          return (
             <div
-              className={`flex flex-col gap-1.5 p-1.5 ${isToday ? "bg-primary/5" : ""}`}
+              key={hour}
+              className="flex flex-1 border-b border-border/40 last:border-b-0"
             >
-              {aptsAtHour.map((apt) => (
-                <Button
-                  key={apt.id}
-                  type="button"
-                  variant="ghost"
-                  onClick={() => onSelectAppointment?.(apt)}
-                  className={`h-auto w-full justify-start gap-3 border-l-2 px-3 py-2 text-left hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
-                >
-                  <Avatar className="h-7 w-7 shrink-0">
-                    <AvatarFallback className="text-xs">
-                      {apt.clientAvatarInitials}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div className="flex min-w-0 flex-1 flex-col">
-                    <span className="text-sm font-semibold">
-                      {apt.clientName}
-                    </span>
-                    <span className="text-xs text-muted-foreground">
-                      {apt.timeStart} – {apt.timeEnd}
-                    </span>
-                  </div>
-                  <Badge variant={STATUS_CONFIG[apt.status].variant}>
-                    {STATUS_CONFIG[apt.status].label}
-                  </Badge>
-                </Button>
-              ))}
+              <TimeGutter hour={hour} />
+              <div className="flex flex-1 flex-col gap-2 p-2">
+                {aptsAtHour.map((apt) => (
+                  <DayCard
+                    key={apt.id}
+                    apt={apt}
+                    onSelect={onSelectAppointment}
+                  />
+                ))}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
     </div>
   );
 }
@@ -239,25 +262,21 @@ function WeekView({
   onSelectAppointment?: (apt: AppointmentCalendarItem) => void;
 }) {
   return (
-    <div className="flex flex-col overflow-x-auto">
-      {/* Day headers */}
-      <div
-        className="grid border-b border-border"
-        style={{ gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)` }}
-      >
-        <div className="border-r border-border" />
+    <div className="flex flex-1 flex-col overflow-x-auto">
+      <div className="flex shrink-0 border-b border-border">
+        <div className="w-16 shrink-0 border-r border-border" />
         {weekDays.map((day) => (
           <div
             key={day.date}
-            className={`flex flex-col items-center border-r border-border py-2 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`}
+            className="flex flex-1 flex-col items-center border-r border-border py-3 last:border-r-0"
           >
             <span
-              className={`text-xs font-medium ${day.date === today ? "font-semibold text-primary" : "text-muted-foreground"}`}
+              className={`text-caption ${day.date === today ? "font-semibold text-primary" : "text-muted-foreground"}`}
             >
               {day.label}
             </span>
             <span
-              className={`text-sm font-semibold ${day.date === today ? "text-primary" : ""}`}
+              className={`text-body-small font-semibold ${day.date === today ? "text-primary" : ""}`}
             >
               {day.short}
             </span>
@@ -265,46 +284,37 @@ function WeekView({
         ))}
       </div>
 
-      {/* Time rows */}
-      {hours.map((hour) => (
-        <div
-          key={hour}
-          className="grid border-b border-border/40 last:border-b-0"
-          style={{
-            gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)`,
-          }}
-        >
-          <div className="flex items-start justify-end border-r border-border pr-2 pt-1">
-            <span className="text-[10px] text-muted-foreground">
-              {formatHour(hour)}
-            </span>
+      <div className="flex flex-1 flex-col">
+        {hours.map((hour) => (
+          <div
+            key={hour}
+            className="flex flex-1 border-b border-border/40 last:border-b-0"
+          >
+            <TimeGutter hour={hour} />
+            {weekDays.map((day) => {
+              const aptsAtCell = appointments.filter(
+                (a) =>
+                  a.date === day.date && getHourFromTime(a.timeStart) === hour,
+              );
+              return (
+                <div
+                  key={day.date}
+                  className="flex flex-1 flex-col overflow-hidden border-r border-border/40 p-1 last:border-r-0"
+                >
+                  {aptsAtCell.map((apt) => (
+                    <AptChip
+                      key={apt.id}
+                      apt={apt}
+                      onSelect={onSelectAppointment}
+                      className="px-2 py-1.5"
+                    />
+                  ))}
+                </div>
+              );
+            })}
           </div>
-          {weekDays.map((day) => {
-            const aptsAtCell = appointments.filter(
-              (a) =>
-                a.date === day.date && getHourFromTime(a.timeStart) === hour,
-            );
-            return (
-              <div
-                key={day.date}
-                className={`min-h-[44px] overflow-hidden border-r border-border/40 p-0.5 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`}
-              >
-                {aptsAtCell.map((apt) => (
-                  <Button
-                    key={apt.id}
-                    type="button"
-                    variant="ghost"
-                    className={`h-auto w-full justify-start truncate border-l-2 px-1 py-1 text-left text-xs font-medium hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
-                    onClick={() => onSelectAppointment?.(apt)}
-                  >
-                    {apt.timeStart} {apt.clientName}
-                  </Button>
-                ))}
-              </div>
-            );
-          })}
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }
@@ -355,71 +365,68 @@ function MonthView({
     `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 
   return (
-    <div className="flex flex-col">
-      {/* Day-of-week header row */}
-      <div className="grid grid-cols-7 border-b border-border">
+    <div className="flex flex-1 flex-col">
+      <div className="grid shrink-0 grid-cols-7 border-b border-border">
         {MONTH_DAY_HEADERS.map((d) => (
           <div
             key={d}
             className="flex items-center justify-center border-r border-border/40 py-2 last:border-r-0"
           >
-            <span className="text-xs font-medium text-muted-foreground">
+            <span className="text-caption font-medium text-muted-foreground">
               {d}
             </span>
           </div>
         ))}
       </div>
 
-      {/* Week rows */}
-      {grid.map((week, wi) => (
-        <div
-          key={wi}
-          className="grid grid-cols-7 border-b border-border last:border-b-0"
-        >
-          {week.map((day, di) => {
-            const iso = day ? toIso(day) : null;
-            const dayApts = iso
-              ? appointments.filter((a) => a.date === iso)
-              : [];
-            const isToday = iso === today;
-
-            return (
-              <div
-                key={di}
-                className={`min-h-[80px] border-r border-border/40 p-1 last:border-r-0 ${!day ? "bg-muted/20" : ""} ${isToday ? "bg-primary/5" : ""}`}
-              >
-                {day && (
-                  <>
-                    <div
-                      className={`mb-1 flex h-6 w-6 items-center justify-center text-xs font-semibold ${isToday ? "bg-primary text-primary-foreground" : "text-foreground"}`}
-                    >
-                      {day.getDate()}
-                    </div>
-                    <div className="flex flex-col gap-0.5">
-                      {dayApts.slice(0, 2).map((apt) => (
-                        <Button
-                          key={apt.id}
-                          type="button"
-                          variant="ghost"
-                          onClick={() => onSelectAppointment?.(apt)}
-                          className={`h-auto w-full justify-start truncate border-l-2 px-1 py-0.5 text-left text-[10px] font-medium hover:opacity-80 ${STATUS_COLORS[apt.status]}`}
-                        >
-                          {apt.timeStart} {apt.clientName}
-                        </Button>
-                      ))}
-                      {dayApts.length > 2 && (
-                        <p className="px-1 text-[10px] text-muted-foreground">
-                          +{dayApts.length - 2} more
-                        </p>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      ))}
+      <div className="flex flex-1 flex-col">
+        {grid.map((week, wi) => (
+          <div
+            key={wi}
+            className="flex flex-1 border-b border-border last:border-b-0"
+          >
+            {week.map((day, di) => {
+              const iso = day ? toIso(day) : null;
+              const dayApts = iso
+                ? appointments.filter((a) => a.date === iso)
+                : [];
+              const isToday = iso === today;
+
+              return (
+                <div
+                  key={di}
+                  className={`min-w-0 flex-1 border-r border-border/40 p-1.5 last:border-r-0 ${!day ? "bg-muted/20" : ""}`}
+                >
+                  {day && (
+                    <>
+                      <div
+                        className={`mb-1 flex h-6 w-6 items-center justify-center text-xs font-semibold ${isToday ? "text-primary" : "text-foreground"}`}
+                      >
+                        {day.getDate()}
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        {dayApts.slice(0, 2).map((apt) => (
+                          <AptChip
+                            key={apt.id}
+                            apt={apt}
+                            onSelect={onSelectAppointment}
+                            className="px-1.5 py-1"
+                          />
+                        ))}
+                        {dayApts.length > 2 && (
+                          <p className="px-1 text-caption text-muted-foreground">
+                            +{dayApts.length - 2} more
+                          </p>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }
@@ -447,8 +454,7 @@ export function AppointmentCalendarView({
   const effectiveViewDate = viewDate ?? dayViewDate ?? today;
 
   return (
-    <div className="flex flex-col border border-border bg-card">
-      {/* Toolbar */}
+    <div className="flex flex-1 flex-col min-h-0 border border-border bg-card">
       <div className="flex items-center justify-between gap-4 px-4 py-3">
         <div className="flex items-center gap-2">
           <Button
@@ -459,7 +465,7 @@ export function AppointmentCalendarView({
           >
             <ChevronLeft className="h-3.5 w-3.5" />
           </Button>
-          <p className="text-sm font-medium">{periodLabel}</p>
+          <p className="text-label-medium">{periodLabel}</p>
           <Button
             variant="outline"
             size="sm"
@@ -482,7 +488,7 @@ export function AppointmentCalendarView({
       <Tabs
         defaultValue={defaultView}
         onValueChange={(v) => onViewChange?.(v as "day" | "week" | "month")}
-        className="flex flex-col"
+        className="flex flex-col flex-1 min-h-0"
       >
         <div className="px-4 pt-3">
           <TabsList>
@@ -491,7 +497,10 @@ export function AppointmentCalendarView({
             <TabsTrigger value="month">Month</TabsTrigger>
           </TabsList>
         </div>
-        <TabsContent value="day" className="mt-0 max-h-[75vh] overflow-y-auto">
+        <TabsContent
+          value="day"
+          className="mt-0 min-h-0 flex-1 flex flex-col overflow-y-auto"
+        >
           <DayView
             appointments={appointments}
             date={effectiveViewDate}
@@ -500,7 +509,10 @@ export function AppointmentCalendarView({
             onSelectAppointment={onSelectAppointment}
           />
         </TabsContent>
-        <TabsContent value="week" className="mt-0 max-h-[75vh] overflow-y-auto">
+        <TabsContent
+          value="week"
+          className="mt-0 min-h-0 flex-1 flex flex-col overflow-y-auto"
+        >
           <WeekView
             appointments={appointments}
             weekDays={weekDays}
@@ -511,7 +523,7 @@ export function AppointmentCalendarView({
         </TabsContent>
         <TabsContent
           value="month"
-          className="mt-0 max-h-[75vh] overflow-y-auto"
+          className="mt-0 min-h-0 flex-1 flex flex-col overflow-y-auto"
         >
           <MonthView
             appointments={appointments}