@wealthx/shadcn 1.5.11 → 1.5.13

package/dist/index.js

@@ -369,6 +369,7 @@ __export(index_exports, {
   ResourceCarousel: () => ResourceCarousel,
   ResourceCenterHeader: () => ResourceCenterHeader,
   ResourceDocumentCard: () => ResourceDocumentCard,
+  ResourceEmailEditorDialog: () => ResourceEmailEditorDialog,
   ResourceEmailTemplateCard: () => ResourceEmailTemplateCard,
   ResourceModal: () => ResourceModal,
   ResourceVideoCard: () => ResourceVideoCard,
@@ -2615,15 +2616,19 @@ function ChatComposer({
   mode,
   channel: channelProp = "chat",
   onChannelChange,
+  isEmailIntegrated = false,
   contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   className
 }) {
-  const [channel, setChannel] = import_react5.default.useState(channelProp);
+  const [channel, setChannel] = import_react5.default.useState(
+    isEmailIntegrated ? channelProp : "chat"
+  );
   const [emailTo, setEmailTo] = import_react5.default.useState(contactEmail);
   const [emailCc, setEmailCc] = import_react5.default.useState("");
   const [showCc, setShowCc] = import_react5.default.useState(false);
@@ -2673,7 +2678,7 @@ function ChatComposer({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        isEmailIntegrated && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Tabs,
           {
             value: channel,
@@ -2808,7 +2813,12 @@ function ChatComposer({
                       Button,
                       {
                         size: "sm",
-                        onClick: () => onSend == null ? void 0 : onSend(inputValue),
+                        onClick: () => onSendEmail == null ? void 0 : onSendEmail({
+                          content: inputValue,
+                          to: emailTo,
+                          cc: emailCc,
+                          subject: emailSubject
+                        }),
                         disabled: !inputValue.trim() || !emailTo.trim(),
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Send, { className: "mr-1.5 size-3.5" }),
@@ -2863,9 +2873,11 @@ function ChatThread({
   isAiTyping = false,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -2873,12 +2885,53 @@ function ChatThread({
   onUnmarkUrgent,
   onArchive,
   onAssignToAdvisor,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   onBack,
   onShowLeadInfo,
   className
 }) {
   const aiIsHandling = mode === "ai";
   const isClosed = status === "closed";
+  const scrollRef = import_react5.default.useRef(null);
+  const preLoadScrollHeightRef = import_react5.default.useRef(null);
+  const handleScroll = (e) => {
+    if (!hasMoreMessages || isLoadingMoreMessages || !onLoadMoreMessages) {
+      return;
+    }
+    if (e.currentTarget.scrollTop <= 80) {
+      preLoadScrollHeightRef.current = e.currentTarget.scrollHeight;
+      onLoadMoreMessages();
+    }
+  };
+  const prevLastMessageIdRef = import_react5.default.useRef(void 0);
+  const prevContactIdRef = import_react5.default.useRef(contact.id);
+  import_react5.default.useLayoutEffect(() => {
+    var _a, _b;
+    const el = scrollRef.current;
+    if (!el) return;
+    if (preLoadScrollHeightRef.current !== null) {
+      el.scrollTop = el.scrollHeight - preLoadScrollHeightRef.current;
+      preLoadScrollHeightRef.current = null;
+      prevLastMessageIdRef.current = (_a = messages[messages.length - 1]) == null ? void 0 : _a.id;
+      prevContactIdRef.current = contact.id;
+      return;
+    }
+    const currentLastId = (_b = messages[messages.length - 1]) == null ? void 0 : _b.id;
+    const contactChanged = prevContactIdRef.current !== contact.id;
+    const tailChanged = prevLastMessageIdRef.current !== currentLastId;
+    if (contactChanged || tailChanged) {
+      el.scrollTop = el.scrollHeight;
+    }
+    prevLastMessageIdRef.current = currentLastId;
+    prevContactIdRef.current = contact.id;
+  }, [contact.id, messages]);
+  import_react5.default.useLayoutEffect(() => {
+    if (!isAiTyping) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isAiTyping]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex flex-col bg-background", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
@@ -2968,9 +3021,12 @@ function ChatThread({
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
+        ref: scrollRef,
+        onScroll: handleScroll,
         className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4",
         tabIndex: 0,
         children: [
+          isLoadingMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex justify-center py-1 text-caption text-muted-foreground", children: "Loading older messages..." }),
           messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.MessageSquare, { className: "size-8 opacity-30" }),
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm", children: "No messages yet" })
@@ -3008,10 +3064,12 @@ function ChatThread({
         mode,
         channel,
         onChannelChange,
+        isEmailIntegrated,
         contactEmail: contact.email,
         inputValue,
         onInputChange,
         onSend,
+        onSendEmail,
         onTakeOver,
         onLetAiHandle
       }
@@ -3362,11 +3420,15 @@ function ConversationsPage({
   onChannelFilterChange,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   internalNotes,
   showLeadPanel = true,
   hasMore,
   isLoadingMore,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   isAiTyping,
   notesSaveStatus,
   onSelectConversation,
@@ -3375,6 +3437,7 @@ function ConversationsPage({
   onFilterChange,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -3443,9 +3506,11 @@ function ConversationsPage({
             isAiTyping,
             channel,
             onChannelChange,
+            isEmailIntegrated,
             inputValue,
             onInputChange,
             onSend,
+            onSendEmail,
             onTakeOver,
             onLetAiHandle,
             onReopen,
@@ -3453,6 +3518,9 @@ function ConversationsPage({
             onUnmarkUrgent,
             onArchive,
             onAssignToAdvisor,
+            hasMoreMessages,
+            isLoadingMoreMessages,
+            onLoadMoreMessages,
             onBack: () => setMobilePanel("list"),
             onShowLeadInfo: () => setMobilePanel("lead"),
             className: cn(
@@ -9392,32 +9460,26 @@ function AppointmentBookDialog({
 // src/components/ui/appointment-calendar-view.tsx
 var import_lucide_react27 = require("lucide-react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var STATUS_COLORS = {
-  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"
-};
-var STATUS_CONFIG2 = {
+var STATUS = {
   pending: {
-    variant: "warning",
-    label: "Pending",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.CalendarClock, { size: 12 })
+    card: "border-l-warning bg-warning/[0.06]",
+    badge: "warning",
+    label: "Pending"
   },
   confirmed: {
-    variant: "success",
-    label: "Confirmed",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.Check, { size: 12 })
+    card: "border-l-success bg-success/[0.06]",
+    badge: "success",
+    label: "Confirmed"
   },
   cancelled: {
-    variant: "destructive",
-    label: "Cancelled",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.X, { size: 12 })
+    card: "border-l-destructive bg-destructive/[0.06]",
+    badge: "destructive",
+    label: "Cancelled"
   },
   rescheduled: {
-    variant: "info",
-    label: "Rescheduled",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.RefreshCw, { size: 12 })
+    card: "border-l-info bg-info/[0.06]",
+    badge: "info",
+    label: "Rescheduled"
   }
 };
 function formatHour(h) {
@@ -9431,6 +9493,55 @@ function getHourFromTime(time) {
   return time.includes("PM") && h !== 12 ? h + 12 : h;
 }
 var DEFAULT_HOURS = [9, 10, 11, 12, 13, 14, 15, 16, 17];
+function TimeGutter({ hour }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex w-16 shrink-0 items-start justify-end border-r border-border pr-3 pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-caption text-muted-foreground", children: formatHour(hour) }) });
+}
+function DayCard({
+  apt,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      onClick: () => onSelect == null ? void 0 : 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}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Avatar, { className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AvatarFallback, { className: "text-caption", children: apt.clientAvatarInitials }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-body-small font-semibold", children: apt.clientName }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-caption text-muted-foreground", children: [
+            apt.timeStart,
+            " \u2013 ",
+            apt.timeEnd
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Badge, { variant: STATUS[apt.status].badge, children: STATUS[apt.status].label })
+      ]
+    }
+  );
+}
+function AptChip({
+  apt,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      onClick: () => onSelect == null ? void 0 : onSelect(apt),
+      className: `h-auto w-full justify-start truncate border-l-2 text-left hover:opacity-80 ${STATUS[apt.status].card} ${className != null ? className : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "truncate text-caption font-medium", children: [
+        apt.timeStart,
+        " ",
+        apt.clientName
+      ] })
+    }
+  );
+}
 function DayView({
   appointments,
   date,
@@ -9439,85 +9550,51 @@ function DayView({
   onSelectAppointment
 }) {
   const d = /* @__PURE__ */ 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 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid grid-cols-[48px_1fr] border-b border-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "border-r border-border" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-        "div",
-        {
-          className: `flex flex-col items-center gap-1 py-3 ${isToday ? "bg-primary/5" : ""}`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "span",
-              {
-                className: `text-xs font-medium tracking-wide ${isToday ? "font-semibold text-primary" : "text-muted-foreground"}`,
-                children: dayLabel
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "span",
-              {
-                className: `flex h-10 w-10 items-center justify-center text-xl font-semibold ${isToday ? "bg-primary text-primary-foreground" : ""}`,
-                children: dayShort
-              }
-            )
-          ]
-        }
-      )
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-16 shrink-0 border-r border-border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-1 flex-col items-center gap-1 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "span",
+          {
+            className: `text-caption tracking-wide ${isToday ? "font-semibold text-primary" : "text-muted-foreground"}`,
+            children: formatWeekdayShort(d)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "span",
+          {
+            className: `flex h-10 w-10 items-center justify-center text-xl font-semibold ${isToday ? "text-primary" : ""}`,
+            children: d.getDate()
+          }
+        )
+      ] })
     ] }),
-    hours.map((hour) => {
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-1 flex-col", children: hours.map((hour) => {
       const aptsAtHour = dayApts.filter(
         (a) => getHourFromTime(a.timeStart) === hour
       );
       return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "div",
         {
-          className: "grid min-h-[60px] grid-cols-[48px_1fr] border-b border-border/40 last:border-b-0",
+          className: "flex flex-1 border-b border-border/40 last:border-b-0",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "div",
-              {
-                className: `flex items-start justify-end border-r border-border pr-2 pt-1 ${isToday ? "bg-primary/5" : ""}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-[10px] text-muted-foreground", children: formatHour(hour) })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TimeGutter, { hour }),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-1 flex-col gap-2 p-2", children: aptsAtHour.map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              DayCard,
               {
-                className: `flex flex-col gap-1.5 p-1.5 ${isToday ? "bg-primary/5" : ""}`,
-                children: aptsAtHour.map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    onClick: () => onSelectAppointment == null ? void 0 : 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]}`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Avatar, { className: "h-7 w-7 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AvatarFallback, { className: "text-xs", children: apt.clientAvatarInitials }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-sm font-semibold", children: apt.clientName }),
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-                          apt.timeStart,
-                          " \u2013 ",
-                          apt.timeEnd
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Badge, { variant: STATUS_CONFIG2[apt.status].variant, children: STATUS_CONFIG2[apt.status].label })
-                    ]
-                  },
-                  apt.id
-                ))
-              }
-            )
+                apt,
+                onSelect: onSelectAppointment
+              },
+              apt.id
+            )) })
           ]
         },
         hour
       );
-    })
+    }) })
   ] });
 }
 function WeekView({
@@ -9527,49 +9604,39 @@ function WeekView({
   hours,
   onSelectAppointment
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col overflow-x-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-      "div",
-      {
-        className: "grid border-b border-border",
-        style: { gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)` },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "border-r border-border" }),
-          weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-            "div",
-            {
-              className: `flex flex-col items-center border-r border-border py-2 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                  "span",
-                  {
-                    className: `text-xs font-medium ${day.date === today ? "font-semibold text-primary" : "text-muted-foreground"}`,
-                    children: day.label
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                  "span",
-                  {
-                    className: `text-sm font-semibold ${day.date === today ? "text-primary" : ""}`,
-                    children: day.short
-                  }
-                )
-              ]
-            },
-            day.date
-          ))
-        ]
-      }
-    ),
-    hours.map((hour) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-1 flex-col overflow-x-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-16 shrink-0 border-r border-border" }),
+      weekDays.map((day) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        "div",
+        {
+          className: "flex flex-1 flex-col items-center border-r border-border py-3 last:border-r-0",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "span",
+              {
+                className: `text-caption ${day.date === today ? "font-semibold text-primary" : "text-muted-foreground"}`,
+                children: day.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              "span",
+              {
+                className: `text-body-small font-semibold ${day.date === today ? "text-primary" : ""}`,
+                children: day.short
+              }
+            )
+          ]
+        },
+        day.date
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-1 flex-col", children: hours.map((hour) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       "div",
       {
-        className: "grid border-b border-border/40 last:border-b-0",
-        style: {
-          gridTemplateColumns: `48px repeat(${weekDays.length}, 1fr)`
-        },
+        className: "flex flex-1 border-b border-border/40 last:border-b-0",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex items-start justify-end border-r border-border pr-2 pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-[10px] text-muted-foreground", children: formatHour(hour) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TimeGutter, { hour }),
           weekDays.map((day) => {
             const aptsAtCell = appointments.filter(
               (a) => a.date === day.date && getHourFromTime(a.timeStart) === hour
@@ -9577,19 +9644,13 @@ function WeekView({
             return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "div",
               {
-                className: `min-h-[44px] overflow-hidden border-r border-border/40 p-0.5 last:border-r-0 ${day.date === today ? "bg-primary/5" : ""}`,
-                children: aptsAtCell.map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                  Button,
+                className: "flex flex-1 flex-col overflow-hidden border-r border-border/40 p-1 last:border-r-0",
+                children: aptsAtCell.map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  AptChip,
                   {
-                    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 == null ? void 0 : onSelectAppointment(apt),
-                    children: [
-                      apt.timeStart,
-                      " ",
-                      apt.clientName
-                    ]
+                    apt,
+                    onSelect: onSelectAppointment,
+                    className: "px-2 py-1.5"
                   },
                   apt.id
                 ))
@@ -9600,7 +9661,7 @@ function WeekView({
         ]
       },
       hour
-    ))
+    )) })
   ] });
 }
 var MONTH_DAY_HEADERS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -9632,19 +9693,19 @@ function MonthView({
   const vd = /* @__PURE__ */ new Date(viewDate + "T00:00:00");
   const grid = generateMonthGrid(vd.getFullYear(), vd.getMonth());
   const toIso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid grid-cols-7 border-b border-border", children: MONTH_DAY_HEADERS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "grid shrink-0 grid-cols-7 border-b border-border", children: MONTH_DAY_HEADERS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
         className: "flex items-center justify-center border-r border-border/40 py-2 last:border-r-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: d })
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-caption font-medium text-muted-foreground", children: d })
       },
       d
     )) }),
-    grid.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-1 flex-col", children: grid.map((week, wi) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "div",
       {
-        className: "grid grid-cols-7 border-b border-border last:border-b-0",
+        className: "flex flex-1 border-b border-border last:border-b-0",
         children: week.map((day, di) => {
           const iso = day ? toIso(day) : null;
           const dayApts = iso ? appointments.filter((a) => a.date === iso) : [];
@@ -9652,32 +9713,26 @@ function MonthView({
           return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "div",
             {
-              className: `min-h-[80px] border-r border-border/40 p-1 last:border-r-0 ${!day ? "bg-muted/20" : ""} ${isToday ? "bg-primary/5" : ""}`,
+              className: `min-w-0 flex-1 border-r border-border/40 p-1.5 last:border-r-0 ${!day ? "bg-muted/20" : ""}`,
               children: day && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                   "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"}`,
+                    className: `mb-1 flex h-6 w-6 items-center justify-center text-xs font-semibold ${isToday ? "text-primary" : "text-foreground"}`,
                     children: day.getDate()
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-                  dayApts.slice(0, 2).map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                    Button,
+                  dayApts.slice(0, 2).map((apt) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    AptChip,
                     {
-                      type: "button",
-                      variant: "ghost",
-                      onClick: () => onSelectAppointment == null ? void 0 : 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]}`,
-                      children: [
-                        apt.timeStart,
-                        " ",
-                        apt.clientName
-                      ]
+                      apt,
+                      onSelect: onSelectAppointment,
+                      className: "px-1.5 py-1"
                     },
                     apt.id
                   )),
-                  dayApts.length > 2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "px-1 text-[10px] text-muted-foreground", children: [
+                  dayApts.length > 2 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "px-1 text-caption text-muted-foreground", children: [
                     "+",
                     dayApts.length - 2,
                     " more"
@@ -9690,7 +9745,7 @@ function MonthView({
         })
       },
       wi
-    ))
+    )) })
   ] });
 }
 function AppointmentCalendarView({
@@ -9711,7 +9766,7 @@ function AppointmentCalendarView({
 }) {
   var _a;
   const effectiveViewDate = (_a = viewDate != null ? viewDate : dayViewDate) != null ? _a : today;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-col border border-border bg-card", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex flex-1 flex-col min-h-0 border border-border bg-card", children: [
     /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -9724,7 +9779,7 @@ function AppointmentCalendarView({
             children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.ChevronLeft, { className: "h-3.5 w-3.5" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-sm font-medium", children: periodLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-label-medium", children: periodLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button,
           {
@@ -9745,38 +9800,52 @@ function AppointmentCalendarView({
       {
         defaultValue: defaultView,
         onValueChange: (v) => onViewChange == null ? void 0 : onViewChange(v),
-        className: "flex flex-col",
+        className: "flex flex-col flex-1 min-h-0",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "px-4 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(TabsList, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsTrigger, { value: "day", children: "Day" }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsTrigger, { value: "week", children: "Week" }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsTrigger, { value: "month", children: "Month" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsContent, { value: "day", className: "mt-0 max-h-[75vh] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            DayView,
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            TabsContent,
             {
-              appointments,
-              date: effectiveViewDate,
-              today,
-              hours,
-              onSelectAppointment
+              value: "day",
+              className: "mt-0 min-h-0 flex-1 flex flex-col overflow-y-auto",
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                DayView,
+                {
+                  appointments,
+                  date: effectiveViewDate,
+                  today,
+                  hours,
+                  onSelectAppointment
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsContent, { value: "week", className: "mt-0 max-h-[75vh] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-            WeekView,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            TabsContent,
             {
-              appointments,
-              weekDays,
-              today,
-              hours,
-              onSelectAppointment
+              value: "week",
+              className: "mt-0 min-h-0 flex-1 flex flex-col overflow-y-auto",
+              children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                WeekView,
+                {
+                  appointments,
+                  weekDays,
+                  today,
+                  hours,
+                  onSelectAppointment
+                }
+              )
             }
-          ) }),
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             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",
               children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                 MonthView,
                 {
@@ -9798,7 +9867,7 @@ function AppointmentCalendarView({
 var import_react14 = __toESM(require("react"));
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var STATUS_CONFIG3 = {
+var STATUS_CONFIG2 = {
   pending: {
     variant: "warning",
     label: "Pending",
@@ -9852,7 +9921,7 @@ function AppointmentDetailSheet({
   const [confirmAction, setConfirmAction] = import_react14.default.useState(null);
   const [rescheduleOpen, setRescheduleOpen] = import_react14.default.useState(false);
   if (!appointment) return null;
-  const { variant, label, icon } = STATUS_CONFIG3[appointment.status];
+  const { variant, label, icon } = STATUS_CONFIG2[appointment.status];
   const isCancelled = appointment.status === "cancelled";
   const isConfirmed = appointment.status === "confirmed";
   const fmt2 = appointment.meetingFormat;
@@ -11991,6 +12060,11 @@ function BankStatementDocumentTable({
 var import_react21 = require("react");
 var import_date_fns3 = require("date-fns");
 var import_jsx_runtime61 = require("react/jsx-runtime");
+var APPLICANT_TYPE_LABELS = {
+  primary: "Main applicant",
+  secondary: "Co-applicant"
+};
+var ACCOUNTS_PAGE_SIZE = 5;
 function toIsoDate(date) {
   return date.toISOString().slice(0, 10);
 }
@@ -12014,29 +12088,37 @@ function BankStatementGenerateDialog({
 }) {
   const [statementName, setStatementName] = (0, import_react21.useState)("Bank Statement 1");
   const [rangePreset, setRangePreset] = (0, import_react21.useState)(90);
-  const [fromDate, setFromDate] = (0, import_react21.useState)("");
-  const [toDate, setToDate] = (0, import_react21.useState)("");
+  const [fromDate, setFromDate] = (0, import_react21.useState)(
+    () => presetToDateRange(90).from
+  );
+  const [toDate, setToDate] = (0, import_react21.useState)(() => presetToDateRange(90).to);
   const [applicantType, setApplicantType] = (0, import_react21.useState)("");
   const [selectedAccountIds, setSelectedAccountIds] = (0, import_react21.useState)([]);
+  const [accountPage, setAccountPage] = (0, import_react21.useState)(1);
   (0, import_react21.useEffect)(() => {
     if (!open) return;
     const timer = setTimeout(() => {
-      setStatementName("Bank Statement 1");
-      setApplicantType("");
-      setSelectedAccountIds([]);
       const { from, to } = presetToDateRange(90);
+      setStatementName("Bank Statement 1");
       setRangePreset(90);
       setFromDate(from);
       setToDate(to);
+      setApplicantType("");
+      setSelectedAccountIds([]);
+      setAccountPage(1);
     }, 0);
     return () => clearTimeout(timer);
   }, [open]);
   const handleApplicantTypeChange = (type) => {
     setApplicantType(type);
     setSelectedAccountIds([]);
+    setAccountPage(1);
     onApplicantTypeChange == null ? void 0 : onApplicantTypeChange(type);
   };
-  const applyPreset = (preset) => {
+  const handlePresetChange = (val) => {
+    if (val.length === 0) return;
+    const raw = val[0];
+    const preset = raw === "custom" ? "custom" : Number(raw);
     setRangePreset(preset);
     if (preset !== "custom") {
       const { from, to } = presetToDateRange(preset);
@@ -12052,12 +12134,13 @@ function BankStatementGenerateDialog({
     );
   };
   const handleToggleAll = () => {
-    if (areAllSelected) {
-      setSelectedAccountIds([]);
-    } else {
-      setSelectedAccountIds(bankAccounts.map((a) => a.id));
-    }
+    setSelectedAccountIds(areAllSelected ? [] : bankAccounts.map((a) => a.id));
   };
+  const accountPageCount = Math.ceil(bankAccounts.length / ACCOUNTS_PAGE_SIZE);
+  const pagedAccounts = bankAccounts.slice(
+    (accountPage - 1) * ACCOUNTS_PAGE_SIZE,
+    accountPage * ACCOUNTS_PAGE_SIZE
+  );
   const periodLabel = (0, import_react21.useMemo)(() => {
     if (fromDate && toDate) {
       return `${(0, import_date_fns3.format)((0, import_date_fns3.parseISO)(fromDate), "dd MMM yyyy")} \u2013 ${(0, import_date_fns3.format)((0, import_date_fns3.parseISO)(toDate), "dd MMM yyyy")}`;
@@ -12079,7 +12162,8 @@ function BankStatementGenerateDialog({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     DialogContent,
     {
-      className: cn("max-w-[700px]", className),
+      size: "3xl",
+      className,
       "data-slot": "bank-statement-generate-dialog",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogTitle, { children: "Generate Bank Statement" }) }),
@@ -12103,15 +12187,7 @@ function BankStatementGenerateDialog({
                 type: "single",
                 variant: "outline",
                 value: [String(rangePreset)],
-                onValueChange: (val) => {
-                  if (val.length === 0) return;
-                  const raw = val[0];
-                  if (raw === "custom") {
-                    applyPreset("custom");
-                  } else {
-                    applyPreset(Number(raw));
-                  }
-                },
+                onValueChange: handlePresetChange,
                 className: "w-full",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ToggleGroupItem, { value: "90", className: "flex-1", children: "3 Months" }),
@@ -12147,19 +12223,18 @@ function BankStatementGenerateDialog({
             {
               value: applicantType,
               onValueChange: (v) => handleApplicantTypeChange(v),
+              items: APPLICANT_TYPE_LABELS,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectValue, { placeholder: "Applicant Type" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(SelectContent, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem, { value: "primary", children: "Main applicant" }),
-                  hasCoApplicant && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem, { value: "secondary", children: "Co-applicant" })
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem, { value: "primary", children: APPLICANT_TYPE_LABELS.primary }),
+                  hasCoApplicant && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem, { value: "secondary", children: APPLICANT_TYPE_LABELS.secondary })
                 ] })
               ]
             }
           ),
-          applicantType && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "mt-1", children: [
-            isLoadingAccounts && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Spinner, { size: "lg" }) }),
-            !isLoadingAccounts && bankAccounts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "py-4 text-center text-body-medium text-muted-foreground", children: "No bank accounts found for the selected applicant" }),
-            !isLoadingAccounts && bankAccounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Table, { children: [
+          applicantType && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "mt-1", children: isLoadingAccounts ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Spinner, { size: "lg" }) }) : bankAccounts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "py-4 text-center text-body-medium text-muted-foreground", children: "No bank accounts found for the selected applicant" }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Table, { className: "table-fixed", children: [
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(TableRow, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { className: "w-10", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   Checkbox,
@@ -12171,42 +12246,77 @@ function BankStatementGenerateDialog({
                   }
                 ) }),
                 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { children: "Account Name" }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { children: "Account Number" }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { children: "Period" }),
-                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { children: "Last Updated" })
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { className: "w-40", children: "Account Number" }),
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { className: "w-52", children: "Period" }),
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableHead, { className: "w-28", children: "Last Updated" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableBody, { children: bankAccounts.map((account) => {
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableBody, { children: pagedAccounts.map((account) => {
                 var _a, _b;
-                return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(TableRow, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                    Checkbox,
-                    {
-                      checked: selectedAccountIds.includes(account.id),
-                      onCheckedChange: () => handleToggleAccount(account.id),
-                      "aria-label": `Select ${account.name}`
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    account.institutionLogo && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-                      "img",
-                      {
-                        src: account.institutionLogo,
-                        alt: (_a = account.institutionName) != null ? _a : "",
-                        className: "size-8 rounded object-cover"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
-                  ] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: periodLabel }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: account.lastUpdated ? (0, import_date_fns3.format)(
-                    (0, import_date_fns3.parseISO)(account.lastUpdated),
-                    "dd MMM yyyy"
-                  ) : "\u2014" }) })
-                ] }, account.id);
+                const isSelected = selectedAccountIds.includes(
+                  account.id
+                );
+                return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+                  TableRow,
+                  {
+                    "data-state": isSelected ? "selected" : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                        Checkbox,
+                        {
+                          checked: isSelected,
+                          onCheckedChange: () => handleToggleAccount(account.id),
+                          "aria-label": `Select ${account.name}`
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2", children: [
+                        account.institutionLogo && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                          "img",
+                          {
+                            src: account.institutionLogo,
+                            alt: (_a = account.institutionName) != null ? _a : "",
+                            className: "size-8 object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
+                      ] }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: periodLabel }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-body-medium", children: account.lastUpdated ? (0, import_date_fns3.format)(
+                        (0, import_date_fns3.parseISO)(account.lastUpdated),
+                        "dd MMM yyyy"
+                      ) : "\u2014" }) })
+                    ]
+                  },
+                  account.id
+                );
               }) })
+            ] }),
+            accountPageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "text-body-small text-muted-foreground", children: [
+                (accountPage - 1) * ACCOUNTS_PAGE_SIZE + 1,
+                "\u2013",
+                Math.min(
+                  accountPage * ACCOUNTS_PAGE_SIZE,
+                  bankAccounts.length
+                ),
+                " ",
+                "of ",
+                bankAccounts.length,
+                " accounts"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                PaginationNavButtons,
+                {
+                  hasPrev: accountPage > 1,
+                  hasNext: accountPage < accountPageCount,
+                  onFirst: () => setAccountPage(1),
+                  onPrev: () => setAccountPage((p) => p - 1),
+                  onNext: () => setAccountPage((p) => p + 1),
+                  onLast: () => setAccountPage(accountPageCount)
+                }
+              )
             ] })
-          ] })
+          ] }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DialogFooter, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }),
@@ -21872,7 +21982,7 @@ function ApplicantCardTab({
   ] });
 }
 var STATUS_OPTIONS = ["verified", "pending", "rejected"];
-var STATUS_CONFIG4 = {
+var STATUS_CONFIG3 = {
   verified: {
     Icon: import_lucide_react56.CheckCircle2,
     label: "Verified",
@@ -21905,7 +22015,7 @@ function DocRow({
     label: statusLabel,
     iconCls,
     triggerCls
-  } = STATUS_CONFIG4[status];
+  } = STATUS_CONFIG3[status];
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     "div",
     {
@@ -21953,7 +22063,7 @@ function DocRow({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SelectContent, { children: STATUS_OPTIONS.map((v) => {
-                const { Icon, label, iconCls: iconCls2 } = STATUS_CONFIG4[v];
+                const { Icon, label, iconCls: iconCls2 } = STATUS_CONFIG3[v];
                 return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SelectItem, { value: v, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("span", { className: "flex items-center gap-1.5", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Icon, { className: cn("size-3.5", iconCls2) }),
                   label
@@ -26352,7 +26462,7 @@ function IncomeWorkDetails({
 // src/components/ui/loan-application-badge.tsx
 var import_lucide_react66 = require("lucide-react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var STATUS_CONFIG5 = {
+var STATUS_CONFIG4 = {
   SENT: {
     label: "Sent Application",
     statusClassName: "border-info/40 bg-info/10 text-info-text",
@@ -26373,7 +26483,7 @@ function LoanApplicationBadge({
   status,
   className
 }) {
-  const { label, statusClassName, showCheck } = STATUS_CONFIG5[status];
+  const { label, statusClassName, showCheck } = STATUS_CONFIG4[status];
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
     Badge,
     {
@@ -26549,10 +26659,107 @@ function ChevronRightIcon4({ className }) {
   );
 }
 
-// src/components/ui/resource-center.tsx
+// src/components/ui/resource-center/resource-carousel.tsx
 var import_react43 = require("react");
 var import_lucide_react67 = require("lucide-react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
+function ResourceCarousel({
+  title,
+  items,
+  headerAction,
+  onViewModeChange,
+  className
+}) {
+  const scrollRef = (0, import_react43.useRef)(null);
+  const [viewMode, setViewMode] = (0, import_react43.useState)("compact");
+  function scrollLeft() {
+    var _a;
+    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: -380, behavior: "smooth" });
+  }
+  function scrollRight() {
+    var _a;
+    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: 380, behavior: "smooth" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: cn("flex flex-col gap-4", className), children: [
+    (title || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex flex-1 items-center gap-4 min-w-0", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h2", { className: "text-h3 text-foreground", children: title }),
+        headerAction && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 flex justify-end", children: headerAction })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+        ToggleGroup,
+        {
+          type: "single",
+          variant: "outline",
+          value: [viewMode],
+          onValueChange: (v) => {
+            if (v.length > 0) {
+              const mode = v[0];
+              setViewMode(mode);
+              onViewModeChange == null ? void 0 : onViewModeChange(mode);
+            }
+          },
+          "aria-label": "View mode",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleGroupItem, { value: "compact", "aria-label": "Compact view", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.GalleryHorizontal, { className: "size-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ToggleGroupItem, { value: "grid", "aria-label": "Grid view", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.LayoutGrid, { className: "size-4" }) })
+          ]
+        }
+      )
+    ] }),
+    items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "py-8 text-center text-body-small text-muted-foreground", children: "No items available" }) : viewMode === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "grid grid-cols-4 gap-6 max-[1280px]:grid-cols-3 max-[900px]:grid-cols-2 max-[600px]:grid-cols-1", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { children: item }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "group/track relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: scrollLeft,
+          "aria-label": "Scroll left",
+          className: cn(
+            "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+            "flex size-9 items-center justify-center",
+            "border border-border bg-background shadow-sm",
+            "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.ChevronLeft, { className: "size-4 text-foreground" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        "div",
+        {
+          ref: scrollRef,
+          className: "flex gap-4 overflow-x-auto scroll-smooth pb-2",
+          style: { scrollbarWidth: "none" },
+          children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "w-[360px] shrink-0", children: item }, i))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: scrollRight,
+          "aria-label": "Scroll right",
+          className: cn(
+            "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
+            "flex size-9 items-center justify-center",
+            "border border-border bg-background shadow-sm",
+            "opacity-0 transition-opacity duration-200 group-hover/track:opacity-100",
+            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.ChevronRight, { className: "size-4 text-foreground" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/ui/resource-center/resource-center-header.tsx
+var import_react44 = require("react");
+var import_lucide_react69 = require("lucide-react");
+
+// src/components/ui/resource-center/resource-modal.tsx
+var import_lucide_react68 = require("lucide-react");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 function ResourceModal({
   open,
   onClose,
@@ -26561,17 +26768,17 @@ function ResourceModal({
   tags,
   attachments
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Dialog, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
     DialogContent,
     {
       size: "2xl",
       className: "flex flex-col gap-4 p-0 overflow-hidden",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(DialogHeader, { className: "px-6 pt-6 pb-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DialogTitle, { className: "text-lg font-semibold", children: title }),
-          tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(DialogHeader, { className: "px-6 pt-6 pb-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(DialogTitle, { className: "text-h5", children: title }),
+          tags && tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Badge, { variant: "secondary", children: tag }, tag)) })
         ] }),
-        videoUrl && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "aspect-video w-full bg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        videoUrl && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "aspect-video w-full bg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
           "iframe",
           {
             src: videoUrl,
@@ -26581,54 +26788,139 @@ function ResourceModal({
             allowFullScreen: true
           }
         ) }),
-        attachments && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex flex-col gap-2 px-6 pb-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Attachments" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-col gap-1", children: attachments.map((attachment, i) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+        attachments && attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex flex-col gap-2 px-6 pb-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-body-small font-medium text-foreground", children: "Attachments" }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "flex flex-col gap-1", children: attachments.map((attachment, i) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
             "a",
             {
               href: attachment.url,
               download: true,
-              className: "flex items-center gap-2 text-sm text-primary hover:underline",
+              className: "flex items-center gap-2 text-body-small text-primary hover:underline",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Download, { className: "size-3.5 shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_lucide_react68.Download, { className: "size-3.5 shrink-0" }),
                 attachment.name
               ]
             },
             i
           )) })
         ] }),
-        (!attachments || attachments.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "pb-2" })
+        (!attachments || attachments.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "pb-2" })
       ]
     }
   ) });
 }
+
+// src/components/ui/resource-center/resource-center-header.tsx
+var import_jsx_runtime133 = require("react/jsx-runtime");
+function ResourceCenterHeader({
+  title,
+  description,
+  backgroundImageUrl,
+  backgroundVideoUrl,
+  watchVideoUrl
+}) {
+  const [watchModalOpen, setWatchModalOpen] = (0, import_react44.useState)(false);
+  const hasBackground = !!backgroundImageUrl || !!backgroundVideoUrl;
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative flex min-h-[480px] w-full items-center overflow-hidden max-[900px]:min-h-[360px] max-[600px]:min-h-[260px]"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 z-[0]",
+                hasBackground ? "bg-foreground" : "bg-gradient-to-br from-primary to-foreground"
+              )
+            }
+          ),
+          backgroundImageUrl && !backgroundVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            "img",
+            {
+              src: backgroundImageUrl,
+              alt: "",
+              "aria-hidden": "true",
+              className: "absolute inset-0 h-full w-full object-cover z-[1]"
+            }
+          ),
+          backgroundVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            "video",
+            {
+              className: "absolute inset-0 h-full w-full object-cover z-[1]",
+              src: backgroundVideoUrl,
+              autoPlay: true,
+              muted: true,
+              loop: true,
+              playsInline: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 z-[2]",
+                hasBackground ? "bg-black/50" : "bg-black/20"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "relative z-[3] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("h1", { className: "text-[56px] font-bold text-white leading-none max-[900px]:text-[40px] max-[600px]:text-[32px]", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { className: "text-body-medium text-white/80 leading-relaxed", children: description }),
+            watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Button, { variant: "default", onClick: () => setWatchModalOpen(true), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react69.Play, { className: "mr-2 size-4" }),
+              "Watch Now"
+            ] }) })
+          ] })
+        ]
+      }
+    ),
+    watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      ResourceModal,
+      {
+        open: watchModalOpen,
+        onClose: () => setWatchModalOpen(false),
+        title,
+        videoUrl: watchVideoUrl
+      }
+    )
+  ] });
+}
+
+// src/components/ui/resource-center/resource-cards.tsx
+var import_react45 = require("react");
+var import_lucide_react70 = require("lucide-react");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 function ResourceVideoCard({ video }) {
-  const [modalOpen, setModalOpen] = (0, import_react43.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  const [modalOpen, setModalOpen] = (0, import_react45.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setModalOpen(true),
         className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "relative w-full overflow-hidden bg-muted aspect-video", children: [
-            video.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "relative w-full overflow-hidden bg-muted aspect-video", children: [
+            video.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "img",
               {
                 src: video.thumbnailUrl,
                 alt: video.title,
                 className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Play, { className: "size-10 text-muted-foreground opacity-40" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex size-12 items-center justify-center bg-background/90", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Play, { className: "size-5 text-foreground" }) }) }),
-            video.duration && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-xs font-medium text-white", children: video.duration })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react70.Play, { className: "size-10 text-muted-foreground opacity-40" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex size-12 items-center justify-center bg-background/90", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react70.Play, { className: "size-5 text-foreground" }) }) }),
+            video.duration && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "absolute bottom-2 right-2 bg-black/70 px-1.5 py-0.5 text-caption text-white", children: video.duration })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm font-medium text-foreground leading-snug line-clamp-2 group-hover:text-primary", children: video.title })
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-body-medium font-semibold text-foreground leading-snug line-clamp-2", children: video.title })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       ResourceModal,
       {
         open: modalOpen,
@@ -26646,7 +26938,7 @@ function ResourceEmailTemplateCard({
   onClick
 }) {
   if (template.isAddTemplate) {
-    return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
       "button",
       {
         type: "button",
@@ -26654,25 +26946,25 @@ function ResourceEmailTemplateCard({
         className: cn(
           "flex w-full flex-col items-center justify-center gap-3",
           "border-2 border-dashed border-border bg-muted/40",
-          "aspect-[3/4] hover:border-primary hover:bg-muted/70 transition-colors",
+          "aspect-video hover:border-primary hover:bg-muted/70 transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-2xl text-muted-foreground/60", children: "+" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: "Add Template" })
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex size-10 items-center justify-center border-2 border-dashed border-muted-foreground/40", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-2xl text-muted-foreground/60", children: "+" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-body-small font-medium text-muted-foreground", children: "Add Template" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "button",
     {
       type: "button",
       onClick,
       className: "group relative flex w-full flex-col gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "relative w-full overflow-hidden border border-border bg-background aspect-[3/4]", children: [
-          template.htmlContent ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "relative w-full overflow-hidden border border-border bg-background aspect-video", children: [
+          template.htmlContent ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "iframe",
             {
               srcDoc: template.htmlContent,
@@ -26686,12 +26978,12 @@ function ResourceEmailTemplateCard({
               },
               sandbox: "allow-same-origin"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-xs text-muted-foreground", children: "No preview available" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-sm font-medium text-white", children: "Use Template" }) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-caption text-muted-foreground", children: "No preview available" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-foreground/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-body-small font-medium text-white", children: "Use Template" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm font-medium text-foreground leading-snug line-clamp-1", children: template.title }),
-          template.type && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Badge, { variant: "secondary", className: "shrink-0 text-xs", children: template.type === "system" ? "System" : "Company" })
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: template.title }),
+          template.type && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Badge, { variant: "secondary", className: "shrink-0", children: template.type === "system" ? "System" : "Company" })
         ] })
       ]
     }
@@ -26701,42 +26993,42 @@ function ResourceDocumentCard({
   document: document2,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
       "button",
       {
         type: "button",
         onClick,
-        className: "group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-[3/4]",
+        className: "group relative w-full overflow-hidden border border-border bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aspect-video",
         children: [
-          document2.pdfUrl ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          document2.pdfUrl ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "iframe",
             {
               src: document2.pdfUrl,
               title: document2.title,
               className: "h-full w-full pointer-events-none"
             }
-          ) : document2.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          ) : document2.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "img",
             {
               src: document2.thumbnailUrl,
               alt: document2.title,
               className: "h-full w-full object-cover"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex items-center justify-center bg-muted-foreground/10 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Download, { className: "size-8 text-muted-foreground opacity-50" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-xs text-muted-foreground", children: document2.title })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex h-full w-full flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex items-center justify-center bg-muted-foreground/10 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react70.Download, { className: "size-8 text-muted-foreground opacity-50" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "text-caption text-muted-foreground", children: document2.title })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "absolute inset-0 bg-foreground/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex flex-col gap-1 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-sm font-medium text-foreground leading-snug line-clamp-1", children: document2.title }),
-        document2.tags && document2.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-wrap gap-1", children: document2.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "flex flex-col gap-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("p", { className: "text-body-small font-medium text-foreground leading-snug line-clamp-1", children: document2.title }),
+        document2.tags && document2.tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "flex flex-wrap gap-1", children: document2.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Badge, { variant: "secondary", children: tag }, tag)) })
       ] }),
-      document2.downloadUrl && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+      document2.downloadUrl && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
         "a",
         {
           href: document2.downloadUrl,
@@ -26744,134 +27036,99 @@ function ResourceDocumentCard({
           onClick: (e) => e.stopPropagation(),
           className: "shrink-0",
           "aria-label": `Download ${document2.title}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Button, { variant: "outline", size: "icon", className: "size-8", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Download, { className: "size-4" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { variant: "outline", size: "icon", className: "size-8", children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react70.Download, { className: "size-4" }) })
         }
       )
     ] })
   ] });
 }
-function ResourceCarousel({
-  title,
-  items,
-  headerAction,
-  className
+
+// src/components/ui/resource-center/resource-email-editor-dialog.tsx
+var import_react46 = require("react");
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var EDITOR_CONTENT_TYPES = [
+  "Columns",
+  "Button",
+  "Divider",
+  "Heading",
+  "Paragraph",
+  "Image",
+  "Social",
+  "Menu",
+  "HTML"
+];
+function ResourceEmailEditorDialog({
+  open,
+  onClose,
+  onSave,
+  editorSlot
 }) {
-  const scrollRef = (0, import_react43.useRef)(null);
-  function scrollLeft() {
-    var _a;
-    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: -300, behavior: "smooth" });
+  const [templateName, setTemplateName] = (0, import_react46.useState)("");
+  function handleSave() {
+    onSave(templateName);
   }
-  function scrollRight() {
-    var _a;
-    (_a = scrollRef.current) == null ? void 0 : _a.scrollBy({ left: 300, behavior: "smooth" });
+  function handleClose() {
+    setTemplateName("");
+    onClose();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: cn("flex flex-col gap-4", className), children: [
-    (title || headerAction) && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h2", { className: "text-lg font-semibold text-foreground", children: title }),
-      headerAction && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "shrink-0", children: headerAction })
-    ] }),
-    items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "py-8 text-center text-sm text-muted-foreground", children: "No items available" }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "group relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Dialog, { open, onOpenChange: (v) => !v && handleClose(), children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+    DialogContent,
+    {
+      size: "4xl",
+      className: "flex flex-col gap-0 p-0 overflow-hidden h-[90vh]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "shrink-0 border-b border-border px-6 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-label-small text-muted-foreground mb-1", children: "Template Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+            Input,
+            {
+              placeholder: "Enter template name",
+              value: templateName,
+              onChange: (e) => setTemplateName(e.target.value),
+              className: "border-none shadow-none px-0 text-body-medium h-auto focus-visible:ring-0 bg-transparent"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex-1 overflow-hidden", children: editorSlot != null ? editorSlot : /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EditorPlaceholder, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "shrink-0 flex items-center justify-between border-t border-border px-6 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { variant: "outline", onClick: handleClose, children: "Back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Button, { variant: "default", onClick: handleSave, children: "Save Email" })
+        ] })
+      ]
+    }
+  ) });
+}
+function EditorPlaceholder() {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex flex-1 items-center justify-center bg-[#f4f4f4]", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "max-w-[500px] w-full border-2 border-dashed border-[#9ecbf0] bg-[#e8f4ff] px-16 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-body-small text-[#5c9fd8]", children: "No content here. Drag content from right." }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "w-[280px] shrink-0 flex flex-col border-l border-border bg-background", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex border-b border-border", children: ["Content", "Blocks", "Body"].map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
         "button",
         {
           type: "button",
-          onClick: scrollLeft,
-          "aria-label": "Scroll left",
           className: cn(
-            "absolute left-0 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
-            "flex size-9 items-center justify-center",
-            "border border-border bg-background shadow-sm",
-            "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            "flex flex-1 flex-col items-center gap-1 py-3 text-caption",
+            i === 0 ? "text-foreground border-b-2 border-foreground" : "text-muted-foreground"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.ChevronLeft, { className: "size-4 text-foreground" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+          children: tab
+        },
+        tab
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "grid grid-cols-3 gap-2 p-3", children: EDITOR_CONTENT_TYPES.map((item) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
         "div",
         {
-          ref: scrollRef,
-          className: "flex gap-4 overflow-x-auto scroll-smooth pb-2",
-          style: { scrollbarWidth: "none" },
-          children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "w-[220px] shrink-0", children: item }, i))
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: scrollRight,
-          "aria-label": "Scroll right",
-          className: cn(
-            "absolute right-0 top-1/2 z-10 translate-x-1/2 -translate-y-1/2",
-            "flex size-9 items-center justify-center",
-            "border border-border bg-background shadow-sm",
-            "opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-            "hover:bg-muted focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.ChevronRight, { className: "size-4 text-foreground" })
-        }
-      )
+          className: "flex flex-col items-center gap-1.5 border border-border p-2 hover:bg-muted transition-colors cursor-grab",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "size-6 bg-foreground/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[10px] text-foreground/40", children: "\u25A4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[11px] text-foreground leading-none text-center", children: item })
+          ]
+        },
+        item
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "mt-auto border-t border-border py-2.5 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-caption text-muted-foreground", children: "\u26A1 by Unlayer Editor" }) })
     ] })
   ] });
 }
-function ResourceCenterHeader({
-  title,
-  description,
-  backgroundVideoUrl,
-  watchVideoUrl
-}) {
-  const [watchModalOpen, setWatchModalOpen] = (0, import_react43.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
-      "div",
-      {
-        className: cn(
-          "relative flex min-h-[400px] w-full items-center overflow-hidden bg-foreground"
-        ),
-        children: [
-          backgroundVideoUrl ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-            "video",
-            {
-              className: "absolute inset-0 h-full w-full object-cover opacity-60 z-[1]",
-              src: backgroundVideoUrl,
-              autoPlay: true,
-              muted: true,
-              loop: true,
-              playsInline: true
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "absolute inset-0 bg-foreground z-[1]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "absolute inset-0 bg-black/40 z-[1]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "relative z-[2] flex flex-col gap-4 px-8 py-12 md:px-16 max-w-3xl", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("h1", { className: "text-3xl font-bold text-background md:text-4xl", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "text-base text-background/80 leading-relaxed", children: description }),
-            watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
-              Button,
-              {
-                variant: "outline",
-                className: "border-background text-background bg-transparent hover:bg-background/10 hover:text-background",
-                onClick: () => setWatchModalOpen(true),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react67.Play, { className: "mr-2 size-4" }),
-                  "Watch Now"
-                ]
-              }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    watchVideoUrl && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      ResourceModal,
-      {
-        open: watchModalOpen,
-        onClose: () => setWatchModalOpen(false),
-        title,
-        videoUrl: watchVideoUrl
-      }
-    )
-  ] });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AICollectedDataSection,
@@ -27164,6 +27421,7 @@ function ResourceCenterHeader({
   ResourceCarousel,
   ResourceCenterHeader,
   ResourceDocumentCard,
+  ResourceEmailEditorDialog,
   ResourceEmailTemplateCard,
   ResourceModal,
   ResourceVideoCard,