@wealthx/shadcn 1.5.11 → 1.5.13

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

@@ -65,6 +65,11 @@ module.exports = __toCommonJS(bank_statement_generate_dialog_exports);
 var import_react5 = require("react");
 var import_date_fns3 = require("date-fns");
 
+// src/components/ui/button.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_lucide_react = require("lucide-react");
+
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -104,11 +109,6 @@ function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/ui/button.tsx
-var import_react = require("react");
-var import_class_variance_authority = require("class-variance-authority");
-var import_lucide_react = require("lucide-react");
-
 // src/lib/slot.tsx
 var React = __toESM(require("react"));
 function mergeRefs(...refs) {
@@ -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,7 +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);
 }
@@ -1301,29 +1367,37 @@ function BankStatementGenerateDialog({
 }) {
   const [statementName, setStatementName] = (0, import_react5.useState)("Bank Statement 1");
   const [rangePreset, setRangePreset] = (0, import_react5.useState)(90);
-  const [fromDate, setFromDate] = (0, import_react5.useState)("");
-  const [toDate, setToDate] = (0, import_react5.useState)("");
+  const [fromDate, setFromDate] = (0, import_react5.useState)(
+    () => presetToDateRange(90).from
+  );
+  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);
@@ -1339,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")}`;
@@ -1363,17 +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,
     {
-      className: cn("max-w-[700px]", className),
+      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,
@@ -1382,35 +1458,27 @@ 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",
                 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_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,
@@ -1419,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,
@@ -1429,26 +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: "Main applicant" }),
-                  hasCoApplicant && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectItem, { value: "secondary", children: "Co-applicant" })
+                /* @__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,
@@ -1457,47 +1524,82 @@ 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;
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableRow, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    Checkbox,
-                    {
-                      checked: selectedAccountIds.includes(account.id),
-                      onCheckedChange: () => handleToggleAccount(account.id),
-                      "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)(
-                      "img",
-                      {
-                        src: account.institutionLogo,
-                        alt: (_a = account.institutionName) != null ? _a : "",
-                        className: "size-8 rounded 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_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)(
-                    (0, import_date_fns3.parseISO)(account.lastUpdated),
-                    "dd MMM yyyy"
-                  ) : "\u2014" }) })
-                ] }, account.id);
+                const isSelected = selectedAccountIds.includes(
+                  account.id
+                );
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                  TableRow,
+                  {
+                    "data-state": isSelected ? "selected" : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                        Checkbox,
+                        {
+                          checked: isSelected,
+                          onCheckedChange: () => handleToggleAccount(account.id),
+                          "aria-label": `Select ${account.name}`
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex 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"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-medium font-semibold", children: account.name || account.institutionName || "\u2014" })
+                      ] }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "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: "text-body-medium", children: periodLabel }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime18.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_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-O5CP6VP6.mjs";
+} from "../../chunk-BF5FKUF6.mjs";
 import "../../chunk-MUV4EGDW.mjs";
+import "../../chunk-SSUK6C2K.mjs";
 import "../../chunk-GT3RU6GA.mjs";
 import "../../chunk-IKXYTCSB.mjs";
 import "../../chunk-USOVLDGS.mjs";