@wealthx/shadcn 1.5.11 → 1.5.13

package/dist/{chunk-O5CP6VP6.mjs → chunk-BF5FKUF6.mjs}

@@ -2,6 +2,9 @@ import {
   Field,
   FieldLabel
 } from "./chunk-MUV4EGDW.mjs";
+import {
+  PaginationNavButtons
+} from "./chunk-SSUK6C2K.mjs";
 import {
   Table,
   TableBody,
@@ -43,14 +46,16 @@ import {
 import {
   Button
 } from "./chunk-NOOEKOWY.mjs";
-import {
-  cn
-} from "./chunk-AFML43VJ.mjs";
 
 // src/components/ui/bank-statement-generate-dialog.tsx
 import { useEffect, useMemo, useState } from "react";
 import { format, parseISO, subDays } from "date-fns";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "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);
 }
@@ -74,29 +79,37 @@ function BankStatementGenerateDialog({
 }) {
   const [statementName, setStatementName] = useState("Bank Statement 1");
   const [rangePreset, setRangePreset] = useState(90);
-  const [fromDate, setFromDate] = useState("");
-  const [toDate, setToDate] = useState("");
+  const [fromDate, setFromDate] = useState(
+    () => presetToDateRange(90).from
+  );
+  const [toDate, setToDate] = useState(() => presetToDateRange(90).to);
   const [applicantType, setApplicantType] = useState("");
   const [selectedAccountIds, setSelectedAccountIds] = useState([]);
+  const [accountPage, setAccountPage] = useState(1);
   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);
@@ -112,12 +125,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 = useMemo(() => {
     if (fromDate && toDate) {
       return `${format(parseISO(fromDate), "dd MMM yyyy")} \u2013 ${format(parseISO(toDate), "dd MMM yyyy")}`;
@@ -139,7 +153,8 @@ function BankStatementGenerateDialog({
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
-      className: cn("max-w-[700px]", className),
+      size: "3xl",
+      className,
       "data-slot": "bank-statement-generate-dialog",
       children: [
         /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Generate Bank Statement" }) }),
@@ -163,15 +178,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__ */ jsx(ToggleGroupItem, { value: "90", className: "flex-1", children: "3 Months" }),
@@ -207,19 +214,18 @@ function BankStatementGenerateDialog({
             {
               value: applicantType,
               onValueChange: (v) => handleApplicantTypeChange(v),
+              items: APPLICANT_TYPE_LABELS,
               children: [
                 /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Applicant Type" }) }),
                 /* @__PURE__ */ jsxs(SelectContent, { children: [
-                  /* @__PURE__ */ jsx(SelectItem, { value: "primary", children: "Main applicant" }),
-                  hasCoApplicant && /* @__PURE__ */ jsx(SelectItem, { value: "secondary", children: "Co-applicant" })
+                  /* @__PURE__ */ jsx(SelectItem, { value: "primary", children: APPLICANT_TYPE_LABELS.primary }),
+                  hasCoApplicant && /* @__PURE__ */ jsx(SelectItem, { value: "secondary", children: APPLICANT_TYPE_LABELS.secondary })
                 ] })
               ]
             }
           ),
-          applicantType && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
-            isLoadingAccounts && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }),
-            !isLoadingAccounts && bankAccounts.length === 0 && /* @__PURE__ */ 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__ */ jsxs(Table, { children: [
+          applicantType && /* @__PURE__ */ jsx("div", { className: "mt-1", children: isLoadingAccounts ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }) : bankAccounts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-body-medium text-muted-foreground", children: "No bank accounts found for the selected applicant" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Table, { className: "table-fixed", children: [
               /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
                 /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
                   Checkbox,
@@ -231,42 +237,77 @@ function BankStatementGenerateDialog({
                   }
                 ) }),
                 /* @__PURE__ */ jsx(TableHead, { children: "Account Name" }),
-                /* @__PURE__ */ jsx(TableHead, { children: "Account Number" }),
-                /* @__PURE__ */ jsx(TableHead, { children: "Period" }),
-                /* @__PURE__ */ jsx(TableHead, { children: "Last Updated" })
+                /* @__PURE__ */ jsx(TableHead, { className: "w-40", children: "Account Number" }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-52", children: "Period" }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-28", children: "Last Updated" })
               ] }) }),
-              /* @__PURE__ */ jsx(TableBody, { children: bankAccounts.map((account) => {
+              /* @__PURE__ */ jsx(TableBody, { children: pagedAccounts.map((account) => {
                 var _a, _b;
-                return /* @__PURE__ */ jsxs(TableRow, { children: [
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      checked: selectedAccountIds.includes(account.id),
-                      onCheckedChange: () => handleToggleAccount(account.id),
-                      "aria-label": `Select ${account.name}`
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    account.institutionLogo && /* @__PURE__ */ jsx(
-                      "img",
-                      {
-                        src: account.institutionLogo,
-                        alt: (_a = account.institutionName) != null ? _a : "",
-                        className: "size-8 rounded object-cover"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
-                  ] }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: periodLabel }) }),
-                  /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: account.lastUpdated ? format(
-                    parseISO(account.lastUpdated),
-                    "dd MMM yyyy"
-                  ) : "\u2014" }) })
-                ] }, account.id);
+                const isSelected = selectedAccountIds.includes(
+                  account.id
+                );
+                return /* @__PURE__ */ jsxs(
+                  TableRow,
+                  {
+                    "data-state": isSelected ? "selected" : void 0,
+                    children: [
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: isSelected,
+                          onCheckedChange: () => handleToggleAccount(account.id),
+                          "aria-label": `Select ${account.name}`
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                        account.institutionLogo && /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: account.institutionLogo,
+                            alt: (_a = account.institutionName) != null ? _a : "",
+                            className: "size-8 object-cover"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
+                      ] }) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: periodLabel }) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-body-medium", children: account.lastUpdated ? format(
+                        parseISO(account.lastUpdated),
+                        "dd MMM yyyy"
+                      ) : "\u2014" }) })
+                    ]
+                  },
+                  account.id
+                );
               }) })
+            ] }),
+            accountPageCount > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2", children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsxs(DialogFooter, { children: [
           /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }),

package/dist/{chunk-ZMTCMP2G.mjs → chunk-EB626HVW.mjs}

@@ -424,15 +424,19 @@ function ChatComposer({
   mode,
   channel: channelProp = "chat",
   onChannelChange,
+  isEmailIntegrated = false,
   contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   className
 }) {
-  const [channel, setChannel] = React.useState(channelProp);
+  const [channel, setChannel] = React.useState(
+    isEmailIntegrated ? channelProp : "chat"
+  );
   const [emailTo, setEmailTo] = React.useState(contactEmail);
   const [emailCc, setEmailCc] = React.useState("");
   const [showCc, setShowCc] = React.useState(false);
@@ -482,7 +486,7 @@ function ChatComposer({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx(
+        isEmailIntegrated && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx(
           Tabs,
           {
             value: channel,
@@ -617,7 +621,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__ */ jsx(Send, { className: "mr-1.5 size-3.5" }),
@@ -672,9 +681,11 @@ function ChatThread({
   isAiTyping = false,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -682,12 +693,53 @@ function ChatThread({
   onUnmarkUrgent,
   onArchive,
   onAssignToAdvisor,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   onBack,
   onShowLeadInfo,
   className
 }) {
   const aiIsHandling = mode === "ai";
   const isClosed = status === "closed";
+  const scrollRef = React.useRef(null);
+  const preLoadScrollHeightRef = React.useRef(null);
+  const handleScroll = (e) => {
+    if (!hasMoreMessages || isLoadingMoreMessages || !onLoadMoreMessages) {
+      return;
+    }
+    if (e.currentTarget.scrollTop <= 80) {
+      preLoadScrollHeightRef.current = e.currentTarget.scrollHeight;
+      onLoadMoreMessages();
+    }
+  };
+  const prevLastMessageIdRef = React.useRef(void 0);
+  const prevContactIdRef = React.useRef(contact.id);
+  React.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]);
+  React.useLayoutEffect(() => {
+    if (!isAiTyping) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isAiTyping]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-background", className), children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -777,9 +829,12 @@ function ChatThread({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: scrollRef,
+        onScroll: handleScroll,
         className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4",
         tabIndex: 0,
         children: [
+          isLoadingMoreMessages && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-1 text-caption text-muted-foreground", children: "Loading older messages..." }),
           messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(MessageSquare, { className: "size-8 opacity-30" }),
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No messages yet" })
@@ -817,10 +872,12 @@ function ChatThread({
         mode,
         channel,
         onChannelChange,
+        isEmailIntegrated,
         contactEmail: contact.email,
         inputValue,
         onInputChange,
         onSend,
+        onSendEmail,
         onTakeOver,
         onLetAiHandle
       }
@@ -1171,11 +1228,15 @@ function ConversationsPage({
   onChannelFilterChange,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   internalNotes,
   showLeadPanel = true,
   hasMore,
   isLoadingMore,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   isAiTyping,
   notesSaveStatus,
   onSelectConversation,
@@ -1184,6 +1245,7 @@ function ConversationsPage({
   onFilterChange,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -1252,9 +1314,11 @@ function ConversationsPage({
             isAiTyping,
             channel,
             onChannelChange,
+            isEmailIntegrated,
             inputValue,
             onInputChange,
             onSend,
+            onSendEmail,
             onTakeOver,
             onLetAiHandle,
             onReopen,
@@ -1262,6 +1326,9 @@ function ConversationsPage({
             onUnmarkUrgent,
             onArchive,
             onAssignToAdvisor,
+            hasMoreMessages,
+            isLoadingMoreMessages,
+            onLoadMoreMessages,
             onBack: () => setMobilePanel("list"),
             onShowLeadInfo: () => setMobilePanel("lead"),
             className: cn(