warqadui 0.0.41 → 0.0.43

package/dist/index.mjs

@@ -3882,7 +3882,8 @@ function SimpleTable({
   isLoading = false,
   title,
   enableSearch = false,
-  emptyState
+  emptyState,
+  skeletonCount = 5
 }) {
   const columns = useMemo5(() => {
     const cols = userColumns.filter((col) => !col.hide).map((col) => ({
@@ -3898,9 +3899,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__ */ jsx25("span", { className: "tabular-nums", children: info.row.index + 1 + startIndex })
       });
     }
     return cols;
@@ -3946,7 +3947,7 @@ function SimpleTable({
             },
             headerGroup.id
           )) }),
-          /* @__PURE__ */ jsx25("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx25("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__ */ jsx25(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"}`,
@@ -3954,13 +3955,18 @@ function SimpleTable({
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
-                  children: /* @__PURE__ */ jsx25("div", { className: "h-4 bg-gray-200 dark:bg-zinc-800 rounded-sm animate-pulse w-full" })
+                  children: /* @__PURE__ */ jsx25(
+                    "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__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(
+          )) : data.length === 0 && !isLoading ? /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(
             "td",
             {
               colSpan: columns.length,
@@ -4067,23 +4073,35 @@ var Branding = ({
 // src/hooks/Fetches/useA4DataView.tsx
 import { useEffect as useEffect11, useRef as useRef6, useState as useState16 } from "react";
 import { useReactToPrint } from "react-to-print";
-import { RefreshCw, Printer, AlertCircle, FileX } from "lucide-react";
+import {
+  RefreshCw,
+  Printer,
+  AlertCircle,
+  FileX,
+  ChevronLeft,
+  ChevronRight as ChevronRight2
+} from "lucide-react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
 var useA4StatementView = ({
   url,
   v = 1,
   delay,
-  params
+  params,
+  startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
   const contentRef = useRef6(null);
   const reactToPrintFn = useReactToPrint({
     contentRef
   });
-  useEffect11(() => {
+  const getData = async () => {
     if (url) {
-      get({ url, v, params, delay });
+      console.log("url", delay);
+      await get({ url, v, params, delay });
     }
+  };
+  useEffect11(() => {
+    getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4DataViewComponent = ({
     columns = [
@@ -4107,13 +4125,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 = useRef6(null);
     const [pages, setPages] = useState16([]);
     const [isMeasuring, setIsMeasuring] = useState16(true);
     const [globalFilter, setGlobalFilter] = useState16("");
+    const [currentPageIndex, setCurrentPageIndex] = useState16(0);
+    const [pageSearch, setPageSearch] = useState16("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4162,11 +4185,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]);
     useEffect11(() => {
@@ -4188,7 +4215,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;
@@ -4196,7 +4222,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 = [];
@@ -4212,7 +4239,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);
@@ -4238,15 +4273,22 @@ var useA4StatementView = ({
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx28("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx28(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[300px]", children: /* @__PURE__ */ jsxs20("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__ */ jsx28("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__ */ jsx28(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ jsx28("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ jsx28("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__ */ jsxs20(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx28("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx28(
+      InfoGrid,
+      {
+        className: "mb-4",
+        items: info,
+        isLoading: isActuallyLoading
+      }
+    ) }) : null;
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs20("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__ */ jsx28("div", { className: "mb-4", children: /* @__PURE__ */ jsx28(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx28("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__ */ jsx28(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ jsx28("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__ */ jsx28("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__ */ jsxs20(
         "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__ */ jsx28(RefreshCw, { size: 14 }),
@@ -4254,7 +4296,7 @@ var useA4StatementView = ({
           ]
         }
       )
-    ] }) }) : void 0;
+    ] }) }) : null;
     return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col relative w-full items-center", children: [
       isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx28("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx28(
         "div",
@@ -4290,82 +4332,157 @@ var useA4StatementView = ({
         }
       ) }),
       /* @__PURE__ */ jsx28("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ jsx28(
-        PageA4,
+        "div",
         {
-          className: "w-full",
-          pageNumber: pageIndex + 1,
-          totalPages: pages.length,
-          isLastPage: pageIndex === pages.length - 1,
-          children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full grow w-full", children: [
-            /* @__PURE__ */ jsxs20("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
-              headers,
-              printable && pageIndex === 0 && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxs20(
-                  "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__ */ jsx28(
+            PageA4,
+            {
+              className: "w-full",
+              pageNumber: pageIndex + 1,
+              totalPages: pages.length,
+              isLastPage: pageIndex === pages.length - 1,
+              children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ jsxs20("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+                  headers,
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs20(
+                      "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__ */ jsx28(
+                            RefreshCw,
+                            {
+                              size: 16,
+                              className: isLoading ? "animate-spin" : ""
+                            }
+                          ),
+                          /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold", children: "Reload" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs20(
+                      "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__ */ jsx28(Printer, { size: 16 }),
+                          "Print"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
                       /* @__PURE__ */ jsx28(
-                        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__ */ jsx28(ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold", children: "Reload" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs20(
-                  "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__ */ jsx28(Printer, { size: 16 }),
-                      "Print"
-                    ]
-                  }
-                )
-              ] }) })
-            ] }),
-            pageIndex === 0 && HeaderEl,
-            pageIndex === 0 && DisplayInfoGridEl,
-            /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
-              pageIndex === 0 && /* @__PURE__ */ jsxs20("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__ */ jsx28("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__ */ jsx28(
-                  "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__ */ jsx28("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__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-              pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-5 print:h-0" }),
-              /* @__PURE__ */ jsx28(
-                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__ */ jsxs20("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ jsxs20(
+                          Select,
+                          {
+                            value: currentPageIndex + 1,
+                            onChange: (val) => {
+                              const num = Number(val);
+                              if (!isNaN(num)) {
+                                setCurrentPageIndex(num - 1);
+                              }
+                            },
+                            variant: "ghost",
+                            containerClassName: "inline-block",
+                            children: [
+                              /* @__PURE__ */ jsx28(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__ */ jsx28("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ jsxs20(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ jsx28("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__ */ jsx28(
+                                  "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__ */ jsx28("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                  (p) => String(p).includes(pageSearch)
+                                ).map((p) => /* @__PURE__ */ jsx28(SelectItem, { value: p, children: p }, p)) })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx28("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ jsx28("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                      ] }),
+                      /* @__PURE__ */ jsx28(
+                        "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__ */ jsx28(ChevronRight2, { size: 18 })
+                        }
+                      )
+                    ] })
+                  ] }) })
+                ] }),
+                pageIndex === 0 && HeaderEl,
+                pageIndex === 0 && DisplayInfoGridEl,
+                /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ jsxs20("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__ */ jsx28("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__ */ jsx28(
+                      "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__ */ jsx28("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__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ jsx28("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx28(
+                    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
       )) }) })
@@ -4379,11 +4496,6 @@ var useA4StatementView = ({
     reactToPrintFn
   };
 };
-var A4DataView = (props) => {
-  const { url, v, delay, params, ...rest } = props;
-  const { A4DataView: View } = useA4StatementView({ url, v, delay, params });
-  return /* @__PURE__ */ jsx28(View, { ...rest });
-};
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useTransaction.tsx
@@ -4395,21 +4507,23 @@ var useTransaction = ({
   url,
   v = 1,
   delay,
-  params = {}
+  params = {},
+  dateFilter = true
 }) => {
   const [date, setDate] = useState17(
     moment().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
     });
@@ -4452,7 +4566,7 @@ var useTransaction = ({
           url && /* @__PURE__ */ jsxs21(
             "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__ */ jsx29(RefreshCw2, { size: 14 }),
@@ -4470,7 +4584,7 @@ var useTransaction = ({
           /* @__PURE__ */ jsx29(Card.Description, { children: description })
         ] }),
         /* @__PURE__ */ jsxs21("section", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ jsx29(
+          dateFilter && /* @__PURE__ */ jsx29(
             Fields_default.DateInput,
             {
               value: date,
@@ -4709,7 +4823,6 @@ var storage = {
   }
 };
 export {
-  A4DataView,
   Badge,
   Branding,
   Button,

package/dist/styles.js

@@ -511,6 +511,10 @@ select:-webkit-autofill:focus {
 .z-50 {
   z-index: 50;
 }
+.mx-0\\.5 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -588,6 +592,9 @@ select:-webkit-autofill:focus {
 .block {
   display: block;
 }
+.inline-block {
+  display: inline-block;
+}
 .inline {
   display: inline;
 }
@@ -654,18 +661,27 @@ select:-webkit-autofill:focus {
 .max-h-60 {
   max-height: 15rem;
 }
+.max-h-64 {
+  max-height: 16rem;
+}
 .min-h-24 {
   min-height: 6rem;
 }
 .min-h-\\[300px\\] {
   min-height: 300px;
 }
+.min-h-\\[400px\\] {
+  min-height: 400px;
+}
 .min-h-screen {
   min-height: 100vh;
 }
 .w-1 {
   width: 0.25rem;
 }
+.w-1\\/2 {
+  width: 50%;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -717,6 +733,9 @@ select:-webkit-autofill:focus {
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[100px\\] {
+  min-width: 100px;
+}
 .min-w-\\[40px\\] {
   min-width: 40px;
 }
@@ -974,6 +993,9 @@ select:-webkit-autofill:focus {
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-l-2 {
   border-left-width: 2px;
 }
@@ -1143,6 +1165,9 @@ select:-webkit-autofill:focus {
   -o-object-fit: cover;
   object-fit: cover;
 }
+.p-0 {
+  padding: 0px;
+}
 .p-0\\.5 {
   padding: 0.125rem;
 }
@@ -1262,6 +1287,9 @@ select:-webkit-autofill:focus {
 .pl-10 {
   padding-left: 2.5rem;
 }
+.pl-2 {
+  padding-left: 0.5rem;
+}
 .pl-2\\.5 {
   padding-left: 0.625rem;
 }
@@ -1333,6 +1361,9 @@ select:-webkit-autofill:focus {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
+.text-\\[11px\\] {
+  font-size: 11px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1897,6 +1928,9 @@ select:-webkit-autofill:focus {
 .disabled\\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
+.disabled\\:opacity-30:disabled {
+  opacity: 0.3;
+}
 .disabled\\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -2018,6 +2052,9 @@ select:-webkit-autofill:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
 }
+.dark\\:bg-zinc-800\\/50:is(.dark *) {
+  background-color: rgb(39 39 42 / 0.5);
+}
 .dark\\:bg-zinc-900:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));