@wealthx/shadcn 1.5.12 → 1.5.14

package/dist/{chunk-CPM6P63C.mjs → chunk-GMF7INNS.mjs}

@@ -2,6 +2,9 @@ import {
   Field,
   FieldLabel
 } from "./chunk-MUV4EGDW.mjs";
+import {
+  PaginationNavButtons
+} from "./chunk-SSUK6C2K.mjs";
 import {
   Table,
   TableBody,
@@ -47,11 +50,12 @@ import {
 // 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);
 }
@@ -81,25 +85,31 @@ function BankStatementGenerateDialog({
   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);
@@ -107,11 +117,6 @@ function BankStatementGenerateDialog({
       setToDate(to);
     }
   };
-  const handlePresetChange = (val) => {
-    if (val.length === 0) return;
-    const raw = val[0];
-    applyPreset(raw === "custom" ? "custom" : Number(raw));
-  };
   const areAllSelected = bankAccounts.length > 0 && selectedAccountIds.length === bankAccounts.length;
   const isSomeSelected = selectedAccountIds.length > 0 && !areAllSelected;
   const handleToggleAccount = (id) => {
@@ -120,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")}`;
@@ -218,10 +224,8 @@ function BankStatementGenerateDialog({
               ]
             }
           ),
-          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,
@@ -233,11 +237,11 @@ 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;
                 const isSelected = selectedAccountIds.includes(
                   account.id
@@ -255,20 +259,20 @@ function BankStatementGenerateDialog({
                           "aria-label": `Select ${account.name}`
                         }
                       ) }),
-                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
                         account.institutionLogo && /* @__PURE__ */ jsx(
                           "img",
                           {
                             src: account.institutionLogo,
                             alt: (_a = account.institutionName) != null ? _a : "",
-                            className: "size-8 object-cover"
+                            className: "size-8 shrink-0 object-cover"
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
+                        /* @__PURE__ */ jsx("span", { className: "truncate 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(
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "truncate text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "truncate text-body-medium", children: periodLabel }) }),
+                      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "truncate text-body-medium", children: account.lastUpdated ? format(
                         parseISO(account.lastUpdated),
                         "dd MMM yyyy"
                       ) : "\u2014" }) })
@@ -277,8 +281,33 @@ function BankStatementGenerateDialog({
                   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" }),