@wealthx/shadcn 1.5.12 → 1.5.14

package/dist/components/ui/bank-statement-generate-dialog.js

@@ -911,6 +911,9 @@ function FieldLabel(_a) {
   );
 }
 
+// src/components/ui/pagination.tsx
+var import_lucide_react7 = require("lucide-react");
+
 // src/components/ui/select.tsx
 var import_lucide_react6 = require("lucide-react");
 var import_select = require("@base-ui/react/select");
@@ -1058,10 +1061,68 @@ function SelectScrollDownButton(_a) {
   );
 }
 
+// src/components/ui/pagination.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function PaginationNavButtons({
+  hasPrev,
+  hasNext,
+  onFirst,
+  onPrev,
+  onNext,
+  onLast
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        "aria-label": "Go to first page",
+        disabled: !hasPrev,
+        onClick: onFirst,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronsLeftIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        "aria-label": "Go to previous page",
+        disabled: !hasPrev,
+        onClick: onPrev,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronLeftIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        "aria-label": "Go to next page",
+        disabled: !hasNext,
+        onClick: onNext,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRightIcon, { className: "size-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Button,
+      {
+        "aria-label": "Go to last page",
+        disabled: !hasNext,
+        onClick: onLast,
+        size: "icon-sm",
+        variant: "outline",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronsRightIcon, { className: "size-4" })
+      }
+    )
+  ] });
+}
+
 // src/components/ui/spinner.tsx
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var spinnerVariants = (0, import_class_variance_authority3.cva)("animate-spin shrink-0", {
   variants: {
     size: {
@@ -1077,8 +1138,8 @@ var spinnerVariants = (0, import_class_variance_authority3.cva)("animate-spin sh
 });
 function Spinner(_a) {
   var _b = _a, { className, size } = _b, props = __objRest(_b, ["className", "size"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_lucide_react7.LoaderCircle,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_lucide_react8.LoaderCircle,
     __spreadValues({
       "aria-hidden": "true",
       className: cn(spinnerVariants({ size }), className),
@@ -1088,15 +1149,15 @@ function Spinner(_a) {
 }
 
 // src/components/ui/table.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Table(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: "relative w-full overflow-x-auto",
       "data-slot": "table-container",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "table",
         __spreadValues({
           className: cn("w-full caption-bottom text-body-small", className),
@@ -1108,7 +1169,7 @@ function Table(_a) {
 }
 function TableHeader(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "thead",
     __spreadValues({
       className: cn("[&_tr]:border-b", className),
@@ -1118,7 +1179,7 @@ function TableHeader(_a) {
 }
 function TableBody(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "tbody",
     __spreadValues({
       className: cn("[&_tr:last-child]:border-0", className),
@@ -1128,7 +1189,7 @@ function TableBody(_a) {
 }
 function TableRow(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "tr",
     __spreadValues({
       className: cn(
@@ -1141,7 +1202,7 @@ function TableRow(_a) {
 }
 function TableHead(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "th",
     __spreadValues({
       className: cn(
@@ -1155,7 +1216,7 @@ function TableHead(_a) {
 }
 function TableCell(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "td",
     __spreadValues({
       className: cn(
@@ -1176,7 +1237,7 @@ var import_toggle2 = require("@base-ui/react/toggle");
 // src/components/ui/toggle.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_toggle = require("@base-ui/react/toggle");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority4.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -1199,7 +1260,7 @@ var toggleVariants = (0, import_class_variance_authority4.cva)(
 );
 
 // src/components/ui/toggle-group.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ToggleGroupContext = React5.createContext({
   size: "default",
   variant: "default",
@@ -1221,7 +1282,7 @@ function ToggleGroup(_a) {
     "type",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_toggle_group.ToggleGroup,
     __spreadProps(__spreadValues({
       className: cn(
@@ -1236,7 +1297,7 @@ function ToggleGroup(_a) {
       multiple: type === "multiple",
       style: { "--gap": spacing }
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
     })
   );
 }
@@ -1253,7 +1314,7 @@ function ToggleGroupItem(_a) {
     "size"
   ]);
   const context = React5.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_toggle2.Toggle,
     __spreadProps(__spreadValues({
       className: cn(
@@ -1277,11 +1338,12 @@ function ToggleGroupItem(_a) {
 }
 
 // src/components/ui/bank-statement-generate-dialog.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = 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);
 }
@@ -1311,25 +1373,31 @@ function BankStatementGenerateDialog({
   const [toDate, setToDate] = (0, import_react5.useState)(() => presetToDateRange(90).to);
   const [applicantType, setApplicantType] = (0, import_react5.useState)("");
   const [selectedAccountIds, setSelectedAccountIds] = (0, import_react5.useState)([]);
+  const [accountPage, setAccountPage] = (0, import_react5.useState)(1);
   (0, import_react5.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);
@@ -1337,11 +1405,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) => {
@@ -1350,12 +1413,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_react5.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")}`;
@@ -1374,18 +1438,18 @@ function BankStatementGenerateDialog({
       selectedAccountIds
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     DialogContent,
     {
       size: "3xl",
       className,
       "data-slot": "bank-statement-generate-dialog",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DialogTitle, { children: "Generate Bank Statement" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Field, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldLabel, { children: "Name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogTitle, { children: "Generate Bank Statement" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Field, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldLabel, { children: "Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               Input,
               {
                 value: statementName,
@@ -1394,9 +1458,9 @@ function BankStatementGenerateDialog({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-small text-muted-foreground", children: "Statement period" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-small text-muted-foreground", children: "Statement period" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               ToggleGroup,
               {
                 type: "single",
@@ -1405,16 +1469,16 @@ function BankStatementGenerateDialog({
                 onValueChange: handlePresetChange,
                 className: "w-full",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleGroupItem, { value: "90", className: "flex-1", children: "3 Months" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleGroupItem, { value: "180", className: "flex-1", children: "6 Months" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleGroupItem, { value: "365", className: "flex-1", children: "12 Months" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleGroupItem, { value: "custom", className: "flex-1", children: "Custom" })
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "90", className: "flex-1", children: "3 Months" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "180", className: "flex-1", children: "6 Months" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "365", className: "flex-1", children: "12 Months" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToggleGroupItem, { value: "custom", className: "flex-1", children: "Custom" })
                 ]
               }
             )
           ] }),
-          rangePreset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          rangePreset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               DatePicker,
               {
                 value: fromDate ? (0, import_date_fns3.parseISO)(fromDate) : void 0,
@@ -1423,7 +1487,7 @@ function BankStatementGenerateDialog({
                 className: "flex-1"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               DatePicker,
               {
                 value: toDate ? (0, import_date_fns3.parseISO)(toDate) : void 0,
@@ -1433,27 +1497,25 @@ function BankStatementGenerateDialog({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             Select,
             {
               value: applicantType,
               onValueChange: (v) => handleApplicantTypeChange(v),
               items: APPLICANT_TYPE_LABELS,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectValue, { placeholder: "Applicant Type" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SelectContent, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: "primary", children: APPLICANT_TYPE_LABELS.primary }),
-                  hasCoApplicant && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: "secondary", children: APPLICANT_TYPE_LABELS.secondary })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectValue, { placeholder: "Applicant Type" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SelectContent, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectItem, { value: "primary", children: APPLICANT_TYPE_LABELS.primary }),
+                  hasCoApplicant && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SelectItem, { value: "secondary", children: APPLICANT_TYPE_LABELS.secondary })
                 ] })
               ]
             }
           ),
-          applicantType && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mt-1", children: [
-            isLoadingAccounts && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, { size: "lg" }) }),
-            !isLoadingAccounts && bankAccounts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsxs)(Table, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableRow, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHead, { className: "w-10", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          applicantType && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-1", children: isLoadingAccounts ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center p-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Spinner, { size: "lg" }) }) : bankAccounts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Table, { className: "table-fixed", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableRow, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { className: "w-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   Checkbox,
                   {
                     checked: areAllSelected,
@@ -1462,22 +1524,22 @@ function BankStatementGenerateDialog({
                     "aria-label": "Select all accounts"
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHead, { children: "Account Name" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHead, { children: "Account Number" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHead, { children: "Period" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHead, { children: "Last Updated" })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { children: "Account Name" }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { className: "w-40", children: "Account Number" }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { className: "w-52", children: "Period" }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHead, { className: "w-28", children: "Last Updated" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableBody, { children: bankAccounts.map((account) => {
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableBody, { children: pagedAccounts.map((account) => {
                 var _a, _b;
                 const isSelected = selectedAccountIds.includes(
                   account.id
                 );
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                   TableRow,
                   {
                     "data-state": isSelected ? "selected" : void 0,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                         Checkbox,
                         {
                           checked: isSelected,
@@ -1485,20 +1547,20 @@ function BankStatementGenerateDialog({
                           "aria-label": `Select ${account.name}`
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
-                        account.institutionLogo && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                        account.institutionLogo && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                           "img",
                           {
                             src: account.institutionLogo,
                             alt: (_a = account.institutionName) != null ? _a : "",
-                            className: "size-8 object-cover"
+                            className: "size-8 shrink-0 object-cover"
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
                       ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-medium", children: periodLabel }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-body-medium", children: account.lastUpdated ? (0, import_date_fns3.format)(
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-body-medium", children: (_b = account.accountNo) != null ? _b : "\u2014" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-body-medium", children: periodLabel }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-body-medium", children: account.lastUpdated ? (0, import_date_fns3.format)(
                         (0, import_date_fns3.parseISO)(account.lastUpdated),
                         "dd MMM yyyy"
                       ) : "\u2014" }) })
@@ -1507,12 +1569,37 @@ function BankStatementGenerateDialog({
                   account.id
                 );
               }) })
+            ] }),
+            accountPageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.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_runtime17.jsxs)(DialogFooter, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogFooter, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "ghost", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             Button,
             {
               onClick: handleSubmit,

package/dist/components/ui/bank-statement-generate-dialog.mjs

@@ -1,7 +1,8 @@
 import {
   BankStatementGenerateDialog
-} from "../../chunk-CPM6P63C.mjs";
+} from "../../chunk-GMF7INNS.mjs";
 import "../../chunk-MUV4EGDW.mjs";
+import "../../chunk-SSUK6C2K.mjs";
 import "../../chunk-GT3RU6GA.mjs";
 import "../../chunk-IKXYTCSB.mjs";
 import "../../chunk-USOVLDGS.mjs";

package/dist/components/ui/bank-statement-pdf-viewer.js

@@ -437,8 +437,8 @@ function BankStatementPDFViewer({
       ),
       "data-slot": "bank-statement-pdf-viewer",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 shrink-0 items-center justify-between border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               Button,
               {
@@ -450,7 +450,7 @@ function BankStatementPDFViewer({
                 children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronLeft, { className: "size-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-body-medium tabular-nums", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "shrink-0 text-body-medium tabular-nums", children: [
               "Account ",
               currentAccountIndex + 1,
               " of ",
@@ -467,7 +467,7 @@ function BankStatementPDFViewer({
                 children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronRight, { className: "size-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-2 text-body-medium text-muted-foreground", children: accountLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-2 min-w-0 truncate text-body-medium text-muted-foreground", children: accountLabel })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(

package/dist/components/ui/bank-statement-pdf-viewer.mjs

@@ -1,6 +1,6 @@
 import {
   BankStatementPDFViewer
-} from "../../chunk-BXL74CM2.mjs";
+} from "../../chunk-UXWNUMQA.mjs";
 import "../../chunk-JVMXMFBB.mjs";
 import "../../chunk-LI2CTS5O.mjs";
 import "../../chunk-XYSRRDBH.mjs";