warqadui 0.0.41 → 0.0.43

package/dist/index.d.mts

@@ -499,8 +499,9 @@ interface SimpleTableProps<TData> {
     title?: string;
     enableSearch?: boolean;
     emptyState?: React__default.ReactNode;
+    skeletonCount?: number;
 }
-declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: "primary" | "danger" | "warning" | "success";
@@ -571,13 +572,14 @@ declare const useApi: () => {
     }>;
 };
 
-declare const useA4StatementView: ({ url, v, delay, params, }?: {
+declare const useA4StatementView: ({ url, v, delay, params, startPage, }?: {
     url?: string;
     v?: 0 | 1 | 2;
     delay?: number;
     params?: Record<string, any>;
+    startPage?: number;
 }) => {
-    A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, tableTitle, }: {
+    A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, tableTitle, startPage: componentStartPage, isLoading: externalLoading, }: {
         tableTitle?: string;
         columns?: SimpleTableColumn<any>[];
         data?: any[];
@@ -590,20 +592,21 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
         rowPadding?: string;
         verticalLines?: boolean;
         headers?: React.ReactNode;
+        startPage?: number;
+        isLoading?: boolean;
     }) => react_jsx_runtime.JSX.Element;
     data: any;
     isLoading: boolean;
     get: FetchFunction;
     reactToPrintFn: react_to_print.UseReactToPrintFn;
 };
-type A4DataViewProps = Parameters<ReturnType<typeof useA4StatementView>["A4DataView"]>[0] & Parameters<typeof useA4StatementView>[0];
-declare const A4DataView: (props: A4DataViewProps) => react_jsx_runtime.JSX.Element;
 
-declare const useTransaction: ({ url, v, delay, params, }: {
+declare const useTransaction: ({ url, v, delay, params, dateFilter, }: {
     url: string;
     v?: 0 | 1 | 2;
     delay?: number;
     params?: Record<string, any>;
+    dateFilter?: boolean;
 }) => {
     TransactionViewComponent: ({ columns, data, error, pageRows, searchPlaceholder, selectable, filterables, verticalLines, index, rowPadding, className, title, description, onCreate, createTitle, ...rest }: {
         columns: DataTableColumn[];
@@ -709,4 +712,4 @@ interface StorageManager {
  */
 declare const storage: StorageManager;
 
-export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };
+export { Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };

package/dist/index.d.ts

@@ -499,8 +499,9 @@ interface SimpleTableProps<TData> {
     title?: string;
     enableSearch?: boolean;
     emptyState?: React__default.ReactNode;
+    skeletonCount?: number;
 }
-declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function SimpleTable<TData>({ columns: userColumns, data, className, renderFooter: componentFooter, rowPadding, verticalLines, index, startIndex, isLoading, title, enableSearch, emptyState, skeletonCount, }: SimpleTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: "primary" | "danger" | "warning" | "success";
@@ -571,13 +572,14 @@ declare const useApi: () => {
     }>;
 };
 
-declare const useA4StatementView: ({ url, v, delay, params, }?: {
+declare const useA4StatementView: ({ url, v, delay, params, startPage, }?: {
     url?: string;
     v?: 0 | 1 | 2;
     delay?: number;
     params?: Record<string, any>;
+    startPage?: number;
 }) => {
-    A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, tableTitle, }: {
+    A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, tableTitle, startPage: componentStartPage, isLoading: externalLoading, }: {
         tableTitle?: string;
         columns?: SimpleTableColumn<any>[];
         data?: any[];
@@ -590,20 +592,21 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
         rowPadding?: string;
         verticalLines?: boolean;
         headers?: React.ReactNode;
+        startPage?: number;
+        isLoading?: boolean;
     }) => react_jsx_runtime.JSX.Element;
     data: any;
     isLoading: boolean;
     get: FetchFunction;
     reactToPrintFn: react_to_print.UseReactToPrintFn;
 };
-type A4DataViewProps = Parameters<ReturnType<typeof useA4StatementView>["A4DataView"]>[0] & Parameters<typeof useA4StatementView>[0];
-declare const A4DataView: (props: A4DataViewProps) => react_jsx_runtime.JSX.Element;
 
-declare const useTransaction: ({ url, v, delay, params, }: {
+declare const useTransaction: ({ url, v, delay, params, dateFilter, }: {
     url: string;
     v?: 0 | 1 | 2;
     delay?: number;
     params?: Record<string, any>;
+    dateFilter?: boolean;
 }) => {
     TransactionViewComponent: ({ columns, data, error, pageRows, searchPlaceholder, selectable, filterables, verticalLines, index, rowPadding, className, title, description, onCreate, createTitle, ...rest }: {
         columns: DataTableColumn[];
@@ -709,4 +712,4 @@ interface StorageManager {
  */
 declare const storage: StorageManager;
 
-export { A4DataView, Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };
+export { Badge, type BadgeProps, Branding, type BrandingProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClassicSpin, CodeBlock, DashboardLayout, DataTable, type DataTableColumn, DateInput, type DateInputProps, type DeleteFunction, type FetchFunction, type FetchProps, Fields, InfoGrid, Input, type InputProps, LoadingBox, LoadingSpin, Modal, type ModalProps, type NavItem, type NavItems, type Option, OverlaySpin, PageA4, PageHeader, type PdfOptions, PhoneInput, type PhoneInputProps, type PostFunction, PostTable, type PostTableActions, type PostTableChangeParams, type PutFunction, SearchApi, SearchApiContent, SearchApiInput, SearchApiItem, type SearchApiProps, SearchApiTrigger, Select, SelectContent, SelectItem, type SelectProps, SelectTrigger, SimpleTable, type SimpleTableColumn, type StorageManager, type StoreConfig, Textarea, type TextareaProps, type ThemeConfig, ThemeProvider, ThemeToggle, type UseModalReturn, type WarqadConfig, type WarqadConfigContextType, WarqadProvider, generatePdf, storage, useA4StatementView, useApi, useModal, useSearchApiContext, useSelectContext, useTheme, useTransaction, useWarqadConfig };

package/dist/index.js

@@ -30,7 +30,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  A4DataView: () => A4DataView,
   Badge: () => Badge,
   Branding: () => Branding,
   Button: () => Button,
@@ -3907,7 +3906,8 @@ function SimpleTable({
   isLoading = false,
   title,
   enableSearch = false,
-  emptyState
+  emptyState,
+  skeletonCount = 5
 }) {
   const columns = (0, import_react17.useMemo)(() => {
     const cols = userColumns.filter((col) => !col.hide).map((col) => ({
@@ -3923,9 +3923,9 @@ function SimpleTable({
       cols.unshift({
         header: "#",
         id: "index",
-        width: 45,
-        className: "whitespace-nowrap pr-2",
-        cell: (info) => info.row.index + 1 + startIndex
+        width: 75,
+        className: "whitespace-nowrap px-2 text-center",
+        cell: (info) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "tabular-nums", children: info.row.index + 1 + startIndex })
       });
     }
     return cols;
@@ -3971,7 +3971,7 @@ function SimpleTable({
             },
             headerGroup.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading && data.length === 0 ? Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"}`,
@@ -3979,13 +3979,18 @@ function SimpleTable({
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-zinc-800 rounded-sm animate-pulse w-full" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                    "div",
+                    {
+                      className: `h-4 bg-gray-200 dark:bg-zinc-800/50 rounded-sm animate-pulse ${colIdx % 2 === 0 ? "w-3/4" : "w-1/2"} ${colIdx === 0 ? "w-4" : ""}`
+                    }
+                  )
                 },
                 `skeleton-col-${colIdx}`
               ))
             },
             `skeleton-row-${i}`
-          )) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          )) : data.length === 0 && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "td",
             {
               colSpan: columns.length,
@@ -4098,17 +4103,22 @@ var useA4StatementView = ({
   url,
   v = 1,
   delay,
-  params
+  params,
+  startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
   const contentRef = (0, import_react19.useRef)(null);
   const reactToPrintFn = (0, import_react_to_print.useReactToPrint)({
     contentRef
   });
-  (0, import_react19.useEffect)(() => {
+  const getData = async () => {
     if (url) {
-      get({ url, v, params, delay });
+      console.log("url", delay);
+      await get({ url, v, params, delay });
     }
+  };
+  (0, import_react19.useEffect)(() => {
+    getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4DataViewComponent = ({
     columns = [
@@ -4132,13 +4142,18 @@ var useA4StatementView = ({
     rowPadding = "p-3",
     verticalLines = true,
     headers,
-    tableTitle = "Recent Transactions"
+    tableTitle = "Recent Transactions",
+    startPage: componentStartPage = startPage,
+    isLoading: externalLoading
   }) => {
     const { store } = useWarqadConfig();
+    const isActuallyLoading = externalLoading ?? isLoading;
     const measureContainerRef = (0, import_react19.useRef)(null);
     const [pages, setPages] = (0, import_react19.useState)([]);
     const [isMeasuring, setIsMeasuring] = (0, import_react19.useState)(true);
     const [globalFilter, setGlobalFilter] = (0, import_react19.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react19.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react19.useState)("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4187,11 +4202,15 @@ var useA4StatementView = ({
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
+        if (componentStartPage !== -1) {
+          setCurrentPageIndex(Math.max(0, componentStartPage - 1));
+        }
       } else {
         setIsMeasuring(false);
         setPages(
           (prev) => prev.length === 1 && prev[0].length === 0 ? prev : [[]]
         );
+        setCurrentPageIndex(0);
       }
     }, [depsString]);
     (0, import_react19.useEffect)(() => {
@@ -4213,7 +4232,6 @@ var useA4StatementView = ({
         const thHeight = getH(tableHeaderEl);
         const tfHeight = getH(tableFooterEl);
         const finalTotalHeight = getH(finalTotalEl);
-        const MAX_CONTENT_HEIGHT = 950;
         let currentChunks = [];
         let currentChunk = [];
         let currentHeight = headerHeight + infoGridHeight + tableTitleHeight + thHeight + tfHeight;
@@ -4221,7 +4239,8 @@ var useA4StatementView = ({
           const rowHeight = getH(row);
           const isLastRow = i === rowEls.length - 1;
           const requiredHeight = isLastRow ? rowHeight + finalTotalHeight : rowHeight;
-          if (currentHeight + requiredHeight > MAX_CONTENT_HEIGHT) {
+          const currentPageLimit = currentChunks.length === 0 ? 920 : 980;
+          if (currentHeight + requiredHeight > currentPageLimit) {
             if (currentChunk.length > 0) {
               currentChunks.push([...currentChunk]);
               currentChunk = [];
@@ -4237,7 +4256,15 @@ var useA4StatementView = ({
         const validPages = currentChunks.filter(
           (chunk) => chunk && chunk.length > 0
         );
-        setPages(validPages.length > 0 ? validPages : [[]]);
+        const finalPages = validPages.length > 0 ? validPages : [[]];
+        setPages(finalPages);
+        if (componentStartPage === -1) {
+          setCurrentPageIndex(finalPages.length - 1);
+        } else if (componentStartPage > 1) {
+          setCurrentPageIndex(
+            Math.min(componentStartPage - 1, finalPages.length - 1)
+          );
+        }
         setIsMeasuring(false);
       }, 150);
       return () => clearTimeout(timer);
@@ -4263,15 +4290,22 @@ var useA4StatementView = ({
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[300px]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-      url && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      InfoGrid,
+      {
+        className: "mb-4",
+        items: info,
+        isLoading: isActuallyLoading
+      }
+    ) }) : null;
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "button",
         {
-          onClick: () => get({ url, v, params, delay }),
+          onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.RefreshCw, { size: 14 }),
@@ -4279,7 +4313,7 @@ var useA4StatementView = ({
           ]
         }
       )
-    ] }) }) : void 0;
+    ] }) }) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
       isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
@@ -4315,82 +4349,157 @@ var useA4StatementView = ({
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        PageA4,
+        "div",
         {
-          className: "w-full",
-          pageNumber: pageIndex + 1,
-          totalPages: pages.length,
-          isLastPage: pageIndex === pages.length - 1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
-              headers,
-              printable && pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-                  "button",
-                  {
-                    onClick: () => url && get({ url, v, params, delay }),
-                    disabled: isLoading,
-                    className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
-                    children: [
+          className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            PageA4,
+            {
+              className: "w-full",
+              pageNumber: pageIndex + 1,
+              totalPages: pages.length,
+              isLastPage: pageIndex === pages.length - 1,
+              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+                  headers,
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      "button",
+                      {
+                        onClick: async () => await getData(),
+                        disabled: isLoading,
+                        className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                            import_lucide_react12.RefreshCw,
+                            {
+                              size: 16,
+                              className: isLoading ? "animate-spin" : ""
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      "button",
+                      {
+                        onClick: () => reactToPrintFn(),
+                        className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Printer, { size: 16 }),
+                          "Print"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                        import_lucide_react12.RefreshCw,
+                        "button",
                         {
-                          size: 16,
-                          className: isLoading ? "animate-spin" : ""
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setCurrentPageIndex(
+                              (p) => Math.max(0, p - 1)
+                            );
+                          },
+                          disabled: currentPageIndex === 0,
+                          className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-                  "button",
-                  {
-                    onClick: () => reactToPrintFn(),
-                    className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Printer, { size: 16 }),
-                      "Print"
-                    ]
-                  }
-                )
-              ] }) })
-            ] }),
-            pageIndex === 0 && HeaderEl,
-            pageIndex === 0 && DisplayInfoGridEl,
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  "input",
-                  {
-                    type: "text",
-                    value: globalFilter,
-                    onChange: (e) => setGlobalFilter(e.target.value),
-                    placeholder: "Search...",
-                    className: "block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
-                  }
-                )
-              ] }),
-              pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-              pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-5 print:h-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                SimpleTable,
-                {
-                  columns,
-                  data: pageData,
-                  className: "bg-transparent!",
-                  rowPadding,
-                  index,
-                  startIndex: pages.slice(0, pageIndex).reduce((acc, curr) => acc + curr.length, 0),
-                  verticalLines,
-                  emptyState,
-                  isLoading: isLoading || isMeasuring && pages.length === 1 && pages[0].length === 0
-                }
-              ),
-              pageIndex === pages.length - 1 && !isLoading && DisplayFinalTotalEl
-            ] })
-          ] })
+                      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                          Select,
+                          {
+                            value: currentPageIndex + 1,
+                            onChange: (val) => {
+                              const num = Number(val);
+                              if (!isNaN(num)) {
+                                setCurrentPageIndex(num - 1);
+                              }
+                            },
+                            variant: "ghost",
+                            containerClassName: "inline-block",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                                  "input",
+                                  {
+                                    type: "text",
+                                    placeholder: "Page...",
+                                    className: "w-full px-2 py-1 text-[11px] border rounded bg-gray-50 dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 outline-none focus:ring-1 focus:ring-blue-500 text-gray-900 dark:text-white",
+                                    value: pageSearch,
+                                    onChange: (e) => setPageSearch(e.target.value),
+                                    onKeyDown: (e) => e.stopPropagation(),
+                                    autoFocus: true
+                                  }
+                                ) }),
+                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                  (p) => String(p).includes(pageSearch)
+                                ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectItem, { value: p, children: p }, p)) })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setCurrentPageIndex(
+                              (p) => Math.min(pages.length - 1, p + 1)
+                            );
+                          },
+                          disabled: currentPageIndex === pages.length - 1,
+                          className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ChevronRight, { size: 18 })
+                        }
+                      )
+                    ] })
+                  ] }) })
+                ] }),
+                pageIndex === 0 && HeaderEl,
+                pageIndex === 0 && DisplayInfoGridEl,
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      "input",
+                      {
+                        type: "text",
+                        value: globalFilter,
+                        onChange: (e) => setGlobalFilter(e.target.value),
+                        placeholder: "Search...",
+                        className: "block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
+                      }
+                    )
+                  ] }),
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    SimpleTable,
+                    {
+                      columns,
+                      data: pageData,
+                      className: "bg-transparent!",
+                      rowPadding,
+                      index,
+                      startIndex: pages.slice(0, pageIndex).reduce((acc, curr) => acc + curr.length, 0),
+                      verticalLines,
+                      emptyState: null,
+                      isLoading: isActuallyLoading || isMeasuring && pages.length === 1 && pages[0].length === 0
+                    }
+                  ),
+                  pageIndex === pages.length - 1 && !isActuallyLoading && !statusOverlay && DisplayFinalTotalEl
+                ] })
+              ] })
+            },
+            pageIndex
+          )
         },
         pageIndex
       )) }) })
@@ -4404,11 +4513,6 @@ var useA4StatementView = ({
     reactToPrintFn
   };
 };
-var A4DataView = (props) => {
-  const { url, v, delay, params, ...rest } = props;
-  const { A4DataView: View } = useA4StatementView({ url, v, delay, params });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(View, { ...rest });
-};
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useTransaction.tsx
@@ -4420,21 +4524,23 @@ var useTransaction = ({
   url,
   v = 1,
   delay,
-  params = {}
+  params = {},
+  dateFilter = true
 }) => {
   const [date, setDate] = (0, import_react20.useState)(
     (0, import_moment.default)().format("DD/MM/YYYY")
   );
   const dateObj = {};
-  if (date) dateObj.date = date;
+  if (date && dateFilter) dateObj.date = date;
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
   const getData = () => {
+    console.log(dateObj);
     get({
       url,
       v,
       params: {
-        ...dateObj,
-        ...params
+        ...params,
+        ...dateObj
       },
       delay
     });
@@ -4477,7 +4583,7 @@ var useTransaction = ({
           url && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "button",
             {
-              onClick: () => get({ url, v, params, delay }),
+              onClick: () => getData(),
               className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
@@ -4495,7 +4601,7 @@ var useTransaction = ({
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Description, { children: description })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("section", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             Fields_default.DateInput,
             {
               value: date,
@@ -4735,7 +4841,6 @@ var storage = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  A4DataView,
   Badge,
   Branding,
   Button,