warqadui 0.0.39 → 0.0.42

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,
@@ -3248,7 +3247,7 @@ var TableCell = import_react16.default.memo(
     );
   },
   (prev, next) => {
-    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
+    return prev.cell.getValue() === next.cell.getValue() && prev.cell.row.original === next.cell.row.original && prev.cell.row.getIsExpanded() === next.cell.row.getIsExpanded() && prev.cell.row.getIsSelected() === next.cell.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
   }
 );
 var TableRow = import_react16.default.memo(
@@ -3335,7 +3334,9 @@ function PostTable({
     }
     return initialState;
   });
-  const [data, setData] = (0, import_react16.useState)(controlledData || []);
+  const [internalData, setInternalData] = (0, import_react16.useState)(controlledData || []);
+  const isControlled = controlledData !== void 0;
+  const data = isControlled ? controlledData : internalData;
   const entryRowRef = (0, import_react16.useRef)(null);
   const focusAndScrollEntryRow = () => {
     setTimeout(() => {
@@ -3356,11 +3357,6 @@ function PostTable({
   (0, import_react16.useEffect)(() => {
     focusAndScrollEntryRow();
   }, []);
-  (0, import_react16.useEffect)(() => {
-    if (controlledData) {
-      setData(controlledData);
-    }
-  }, [controlledData]);
   const [entryData, setEntryData] = (0, import_react16.useState)({});
   const [editingIndex, setEditingIndex] = (0, import_react16.useState)(null);
   const [isSavingAsync, setIsSavingAsync] = (0, import_react16.useState)(false);
@@ -3392,23 +3388,21 @@ function PostTable({
     };
   });
   const handleSaveField = (0, import_react16.useCallback)(async () => {
-    const {
-      data: data2,
-      entryData: entryData2,
-      editingIndex: editingIndex2,
-      isSavingAsync: isSavingAsync2,
-      submitLoading: submitLoading2,
-      onChange: onChange2
-    } = latestStateRef.current;
+    const { data: data2, entryData: entryData2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
     if (Object.keys(entryData2).length === 0) return;
-    let newData = [...data2];
-    if (editingIndex2 !== null) {
-      newData[editingIndex2] = {
-        ...newData[editingIndex2],
-        ...entryData2
+    const actionType = editingIndex2 !== null ? "edit" : "add";
+    const entryToSave = { ...entryData2 };
+    const updated = [...data2];
+    let entryToPass;
+    if (actionType === "edit" && editingIndex2 !== null) {
+      updated[editingIndex2] = {
+        ...updated[editingIndex2],
+        ...entryToSave
       };
+      entryToPass = updated[editingIndex2];
     } else {
-      newData = [...newData, entryData2];
+      updated.push(entryToSave);
+      entryToPass = updated[updated.length - 1];
     }
     if (onChange2) {
       setIsSavingAsync(true);
@@ -3434,12 +3428,11 @@ function PostTable({
             }));
           }
         };
-        const type = editingIndex2 !== null ? "edit" : "add";
         const result = await onChange2({
-          entryData: entryData2,
+          entryData: entryToPass,
           actions,
-          actionType: type,
-          fullData: newData
+          actionType,
+          fullData: updated
         });
         if (result === false) {
           setIsSavingAsync(false);
@@ -3450,14 +3443,14 @@ function PostTable({
         return;
       }
     }
-    setData(newData);
+    setInternalData(updated);
     setEntryData({});
     setFieldErrors({});
     setIsSavingAsync(false);
     if (editingIndex2 !== null) {
       setEditingIndex(null);
     } else {
-      focusAndScrollEntryRow();
+      setTimeout(() => focusAndScrollEntryRow(), 0);
     }
   }, []);
   const handleCancelEdit = (0, import_react16.useCallback)(() => {
@@ -3470,43 +3463,56 @@ function PostTable({
   const handleEdit = (0, import_react16.useCallback)((index2, rowOriginal) => {
     const { onEdit: onEdit2 } = latestStateRef.current;
     setEditingIndex(index2);
-    setEntryData(rowOriginal);
+    setEntryData({ ...rowOriginal });
     if (onEdit2) onEdit2(rowOriginal);
   }, []);
   const handleDelete = (0, import_react16.useCallback)(
-    (index2) => {
+    async (index2) => {
       const { data: data2, editingIndex: editingIndex2, onChange: onChange2, onDelete: onDelete2 } = latestStateRef.current;
       const rowToDelete = data2[index2];
-      const newData = data2.filter((_, i) => i !== index2);
-      setData(newData);
-      if (onDelete2) onDelete2(rowToDelete);
-      const actions = {
-        focus: (columnId) => {
-          if (entryRowRef.current) {
-            const td = entryRowRef.current.querySelector(
-              `td[data-column-id="${columnId}"]`
-            );
-            if (td) {
-              const input = td.querySelector(
-                `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
-              );
-              if (input) input.focus();
+      const updated = data2.filter((_, i) => i !== index2);
+      if (onChange2) {
+        setIsSavingAsync(true);
+        try {
+          const actions = {
+            focus: (columnId) => {
+              if (entryRowRef.current) {
+                const td = entryRowRef.current.querySelector(
+                  `td[data-column-id="${columnId}"]`
+                );
+                if (td) {
+                  const input = td.querySelector(
+                    `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+                  );
+                  if (input) input.focus();
+                }
+              }
+            },
+            setError: (columnId, error) => {
+              setFieldErrors((prev) => ({
+                ...prev,
+                [columnId]: error
+              }));
             }
+          };
+          const result = await onChange2({
+            entryData: rowToDelete,
+            actions,
+            actionType: "delete",
+            fullData: updated
+          });
+          if (result === false) {
+            setIsSavingAsync(false);
+            return;
           }
-        },
-        setError: (columnId, error) => {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [columnId]: error
-          }));
+        } catch (error) {
+          setIsSavingAsync(false);
+          return;
         }
-      };
-      onChange2?.({
-        entryData: data2[index2],
-        actions,
-        actionType: "delete",
-        fullData: newData
-      });
+      }
+      setInternalData(updated);
+      if (onDelete2) onDelete2(rowToDelete);
+      setIsSavingAsync(false);
       if (editingIndex2 === index2) {
         handleCancelEdit();
       } else if (editingIndex2 !== null && editingIndex2 > index2) {
@@ -3900,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) => ({
@@ -3916,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;
@@ -3964,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"}`,
@@ -3972,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,
@@ -4091,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 = [
@@ -4125,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;
@@ -4180,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)(() => {
@@ -4206,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;
@@ -4214,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 = [];
@@ -4230,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);
@@ -4256,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 }),
@@ -4272,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",
@@ -4308,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
       )) }) })
@@ -4397,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
@@ -4422,12 +4533,13 @@ var useTransaction = ({
   if (date) 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
     });
@@ -4470,7 +4582,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 }),
@@ -4728,7 +4840,6 @@ var storage = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  A4DataView,
   Badge,
   Branding,
   Button,