warqadui 0.0.30 → 0.0.31

package/dist/index.js

@@ -71,6 +71,7 @@ __export(index_exports, {
   ThemeToggle: () => ThemeToggle,
   WarqadProvider: () => WarqadProvider,
   generatePdf: () => generatePdf,
+  storage: () => storage,
   useA4StatementView: () => useA4DataView_default,
   useApi: () => useApis_default,
   useModal: () => useModal,
@@ -2851,7 +2852,8 @@ function DataTable({
   defaultExpanded = false,
   onChange,
   selectable = true,
-  filterables = true
+  filterables = true,
+  emptyState
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -3079,7 +3081,7 @@ function DataTable({
             {
               colSpan: columns.length,
               className: "h-32 text-center text-sm text-gray-500",
-              children: "No results found."
+              children: emptyState || "No results found."
             }
           ) }) }),
           table.getFooterGroups().some(
@@ -3145,6 +3147,85 @@ var import_react16 = __toESM(require("react"));
 var import_react_table2 = require("@tanstack/react-table");
 var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var TableCell = import_react16.default.memo(
+  ({
+    cell,
+    rowPadding,
+    verticalLines
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "td",
+      {
+        className: cn(
+          rowPadding,
+          "text-sm text-gray-700 dark:text-gray-200",
+          verticalLines && "border-x border-gray-200 dark:border-zinc-800",
+          cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
+          cell.column.columnDef.meta?.className
+        ),
+        style: {
+          width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
+          minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
+          maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
+        },
+        children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+      },
+      cell.id
+    );
+  },
+  (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;
+  }
+);
+var TableRow = import_react16.default.memo(
+  ({
+    row,
+    rowPadding,
+    verticalLines,
+    renderSubComponent,
+    hasSubComponent,
+    columnsCount
+  }) => {
+    const isExpanded = row.getIsExpanded();
+    const subComponentVisible = renderSubComponent && isExpanded && hasSubComponent(row.original);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react16.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "tr",
+        {
+          className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
+          "data-state": row.getIsSelected() && "selected",
+          onClick: (e) => {
+            if (renderSubComponent && hasSubComponent(row.original)) {
+              const target = e.target;
+              if (!target.closest("button, a, input, select, textarea")) {
+                row.toggleExpanded();
+              }
+            }
+          },
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            TableCell,
+            {
+              cell,
+              rowPadding,
+              verticalLines
+            },
+            cell.id
+          ))
+        }
+      ),
+      subComponentVisible && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: columnsCount, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
+        renderSubComponent({
+          row: row.original,
+          index: row.index
+        })
+      ] }) }) })
+    ] });
+  },
+  (prev, next) => {
+    return prev.row.original === next.row.original && prev.row.getIsExpanded() === next.row.getIsExpanded() && prev.row.getIsSelected() === next.row.getIsSelected() && prev.rowPadding === next.rowPadding && prev.verticalLines === next.verticalLines;
+  }
+);
 function PostTable({
   columns: userColumns,
   data: controlledData,
@@ -3158,7 +3239,8 @@ function PostTable({
   renderSubComponent,
   hasSubComponent = () => true,
   // default to true if renderSubComponent is provided
-  defaultExpanded = false
+  defaultExpanded = false,
+  submitLoading = false
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -3206,18 +3288,46 @@ function PostTable({
   const [editingIndex, setEditingIndex] = (0, import_react16.useState)(null);
   const [isSavingAsync, setIsSavingAsync] = (0, import_react16.useState)(false);
   const [fieldErrors, setFieldErrors] = (0, import_react16.useState)({});
-  const handleSaveField = async () => {
-    if (Object.keys(entryData).length === 0) return;
-    let newData = [...data];
-    if (editingIndex !== null) {
-      newData[editingIndex] = {
-        ...newData[editingIndex],
-        ...entryData
+  const latestStateRef = (0, import_react16.useRef)({
+    data,
+    entryData,
+    editingIndex,
+    isSavingAsync,
+    submitLoading,
+    fieldErrors,
+    onChange
+  });
+  (0, import_react16.useEffect)(() => {
+    latestStateRef.current = {
+      data,
+      entryData,
+      editingIndex,
+      isSavingAsync,
+      submitLoading,
+      fieldErrors,
+      onChange
+    };
+  });
+  const handleSaveField = (0, import_react16.useCallback)(async () => {
+    const {
+      data: data2,
+      entryData: entryData2,
+      editingIndex: editingIndex2,
+      isSavingAsync: isSavingAsync2,
+      submitLoading: submitLoading2,
+      onChange: onChange2
+    } = latestStateRef.current;
+    if (Object.keys(entryData2).length === 0) return;
+    let newData = [...data2];
+    if (editingIndex2 !== null) {
+      newData[editingIndex2] = {
+        ...newData[editingIndex2],
+        ...entryData2
       };
     } else {
-      newData = [...newData, entryData];
+      newData = [...newData, entryData2];
     }
-    if (onChange) {
+    if (onChange2) {
       setIsSavingAsync(true);
       try {
         const actions = {
@@ -3241,9 +3351,9 @@ function PostTable({
             }));
           }
         };
-        const type = editingIndex !== null ? "edit" : "add";
-        const result = await onChange({
-          entryData,
+        const type = editingIndex2 !== null ? "edit" : "add";
+        const result = await onChange2({
+          entryData: entryData2,
           actions,
           actionType: type,
           fullData: newData
@@ -3261,23 +3371,24 @@ function PostTable({
     setEntryData({});
     setFieldErrors({});
     setIsSavingAsync(false);
-    if (editingIndex !== null) {
+    if (editingIndex2 !== null) {
       setEditingIndex(null);
     } else {
       focusAndScrollEntryRow();
     }
-  };
-  const handleCancelEdit = () => {
+  }, []);
+  const handleCancelEdit = (0, import_react16.useCallback)(() => {
     setEditingIndex(null);
     setEntryData({});
     setFieldErrors({});
-  };
-  const handleEdit = (index2, rowOriginal) => {
+  }, []);
+  const handleEdit = (0, import_react16.useCallback)((index2, rowOriginal) => {
     setEditingIndex(index2);
     setEntryData(rowOriginal);
-  };
-  const handleDelete = (index2) => {
-    const newData = data.filter((_, i) => i !== index2);
+  }, []);
+  const handleDelete = (0, import_react16.useCallback)((index2) => {
+    const { data: data2, editingIndex: editingIndex2, onChange: onChange2 } = latestStateRef.current;
+    const newData = data2.filter((_, i) => i !== index2);
     setData(newData);
     const actions = {
       focus: (columnId) => {
@@ -3300,44 +3411,47 @@ function PostTable({
         }));
       }
     };
-    onChange?.({
-      entryData: data[index2],
+    onChange2?.({
+      entryData: data2[index2],
       actions,
       actionType: "delete",
       fullData: newData
     });
-    if (editingIndex === index2) {
+    if (editingIndex2 === index2) {
       handleCancelEdit();
-    } else if (editingIndex !== null && editingIndex > index2) {
-      setEditingIndex(editingIndex - 1);
+    } else if (editingIndex2 !== null && editingIndex2 > index2) {
+      setEditingIndex(editingIndex2 - 1);
     }
-  };
-  const actionColumn = {
+  }, [handleCancelEdit]);
+  const actionColumn = (0, import_react16.useMemo)(() => ({
     id: "actions",
     header: "Actions",
-    cell: ({ row }) => {
+    cell: ({ row, table: table2 }) => {
+      const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
       return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
-            onClick: () => handleEdit(row.index, row.original),
-            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-(--theme-primary) dark:hover:text-(--theme-primary) transition-colors",
+            onClick: () => handleEdit2(row.index, row.original),
+            disabled: submitLoading2 || isSavingAsync2,
+            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-(--theme-primary) dark:hover:text-(--theme-primary) transition-colors disabled:opacity-50",
             title: "Edit",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Edit2, { size: 16 })
+            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Edit2, { size: 16 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
-            onClick: () => handleDelete(row.index),
-            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors",
+            onClick: () => handleDelete2(row.index),
+            disabled: submitLoading2 || isSavingAsync2,
+            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-50",
             title: "Delete",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
+            children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
           }
         )
       ] });
     }
-  };
+  }), []);
   const columns = (0, import_react16.useMemo)(() => {
     const mappedUserColumns = userColumns.map((col) => ({
       ...col,
@@ -3386,6 +3500,12 @@ function PostTable({
       columnFilters,
       columnVisibility,
       expanded
+    },
+    meta: {
+      handleEdit,
+      handleDelete,
+      submitLoading,
+      isSavingAsync
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3440,54 +3560,18 @@ function PostTable({
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react16.default.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              "tr",
-              {
-                className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
-                "data-state": row.getIsSelected() && "selected",
-                onClick: (e) => {
-                  if (renderSubComponent && hasSubComponent(row.original)) {
-                    const target = e.target;
-                    if (!target.closest(
-                      "button, a, input, select, textarea"
-                    )) {
-                      row.toggleExpanded();
-                    }
-                  }
-                },
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  "td",
-                  {
-                    className: cn(
-                      rowPadding,
-                      "text-sm text-gray-700 dark:text-gray-200",
-                      verticalLines && "border-x border-gray-200 dark:border-zinc-800",
-                      cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
-                      cell.column.columnDef.meta?.className
-                    ),
-                    style: {
-                      width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
-                      minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
-                      maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
-                    },
-                    children: (0, import_react_table2.flexRender)(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )
-                  },
-                  cell.id
-                ))
-              }
-            ),
-            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
-              renderSubComponent({
-                row: row.original,
-                index: row.index
-              })
-            ] }) }) })
-          ] }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            TableRow,
+            {
+              row,
+              rowPadding,
+              verticalLines,
+              renderSubComponent,
+              hasSubComponent,
+              columnsCount: columns.length
+            },
+            row.id
+          )) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "td",
             {
               colSpan: columns.length,
@@ -3523,17 +3607,17 @@ function PostTable({
                             "button",
                             {
                               onClick: handleSaveField,
-                              disabled: isSavingAsync,
+                              disabled: isSavingAsync || submitLoading,
                               className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-green-500/10 text-green-600 dark:bg-emerald-500/20 dark:text-emerald-400 hover:bg-green-500 hover:text-white dark:hover:bg-emerald-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
                               title: "Update",
-                              children: isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-emerald-500/30 border-t-emerald-500 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
+                              children: isSavingAsync || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             "button",
                             {
                               onClick: handleCancelEdit,
-                              disabled: isSavingAsync,
+                              disabled: isSavingAsync || submitLoading,
                               className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400 hover:bg-red-500 hover:text-white dark:hover:bg-red-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
                               title: "Cancel",
                               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.X, { size: 16, strokeWidth: 2.5 })
@@ -3547,15 +3631,15 @@ function PostTable({
                           "button",
                           {
                             onClick: handleSaveField,
-                            disabled: isSavingAsync,
+                            disabled: isSavingAsync || submitLoading,
                             className: "w-full cursor-pointer h-8 flex items-center justify-center gap-1.5 rounded-lg text-white text-xs font-medium transition-all shadow-sm hover:shadow-md hover:-translate-y-px active:scale-95 active:translate-y-0 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed",
                             style: {
                               backgroundColor: "var(--theme-primary)"
                             },
                             title: "Add Row",
                             children: [
-                              isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
-                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: isSavingAsync ? "Adding..." : "Add" })
+                              isSavingAsync || submitLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Loader2, { size: 14, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: isSavingAsync || submitLoading ? "Adding..." : "Add" })
                             ]
                           }
                         ) }) })
@@ -3708,7 +3792,8 @@ function SimpleTable({
   startIndex = 0,
   isLoading = false,
   title,
-  enableSearch = false
+  enableSearch = false,
+  emptyState
 }) {
   const columns = (0, import_react17.useMemo)(() => {
     const cols = userColumns.filter((col) => !col.hide).map((col) => ({
@@ -3790,8 +3875,8 @@ function SimpleTable({
             "td",
             {
               colSpan: columns.length,
-              className: "text-center py-8 text-gray-500 font-medium",
-              children: "No transactions found."
+              className: "text-center text-gray-500 font-medium",
+              children: emptyState || /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "py-8", children: "No transactions found." })
             }
           ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "tr",
@@ -4064,24 +4149,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;
-    if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-96", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 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-xl text-center shadow-sm", children: [
-        error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-xl 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-8 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)(
-          "button",
-          {
-            onClick: () => get({ url, v, params, delay }),
-            className: "flex items-center gap-2 px-6 py-2.5 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",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.RefreshCw, { size: 16 }),
-              "Try Again"
-            ]
-          }
-        )
-      ] }) });
-    }
+    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)(
+        "button",
+        {
+          onClick: () => get({ url, v, params, delay }),
+          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 }),
+            "Try Again"
+          ]
+        }
+      )
+    ] }) }) : void 0;
     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",
@@ -4176,7 +4259,7 @@ var useA4StatementView = ({
               ] }),
               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: "Recent Transactions" }) }),
               pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-5 print:h-0" }),
-              (pageData.length > 0 || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 SimpleTable,
                 {
                   columns,
@@ -4186,6 +4269,7 @@ var useA4StatementView = ({
                   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
                 }
               ),
@@ -4267,30 +4351,28 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        "div",
-        {
-          className: `flex flex-col relative w-full items-center justify-center p-8 min-h-96 ${className}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 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-xl text-center shadow-sm", children: [
-            error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-            url && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-              "button",
-              {
-                onClick: () => get({ url, v, params, delay }),
-                className: "flex items-center gap-2 px-6 py-2.5 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",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 16 }),
-                  "Try Again"
-                ]
-              }
-            )
-          ] })
-        }
-      );
-    }
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "div",
+      {
+        className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.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_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.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 data." : "There are no transactions or records available to display here." }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "button",
+            {
+              onClick: () => get({ url, v, params, delay }),
+              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 }),
+                "Try Again"
+              ]
+            }
+          )
+        ] })
+      }
+    ) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-1", children: [
@@ -4334,6 +4416,7 @@ var useTransaction = ({
           verticalLines,
           index,
           rowPadding,
+          emptyState,
           ...rest
         }
       ) }) })
@@ -4475,6 +4558,66 @@ var generatePdf = async (elementId, options = {}) => {
     throw error;
   }
 };
+
+// src/utils/storage.ts
+var isBrowser = typeof window !== "undefined" && typeof localStorage !== "undefined";
+var storage = {
+  set(key, value) {
+    if (!isBrowser) return;
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.error(`[storage] Error saving key "${key}":`, error);
+    }
+  },
+  get(key) {
+    if (!isBrowser) return key ? null : {};
+    if (key !== void 0) {
+      try {
+        const item = localStorage.getItem(key);
+        if (item === null) return null;
+        return JSON.parse(item);
+      } catch (error) {
+        const rawValue = localStorage.getItem(key);
+        return rawValue;
+      }
+    }
+    const allItems = {};
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (k) {
+        const value = localStorage.getItem(k);
+        try {
+          allItems[k] = value ? JSON.parse(value) : null;
+        } catch {
+          allItems[k] = value;
+        }
+      }
+    }
+    return allItems;
+  },
+  remove(key) {
+    if (!isBrowser) return;
+    localStorage.removeItem(key);
+  },
+  clear() {
+    if (!isBrowser) return;
+    localStorage.clear();
+  },
+  has(key) {
+    if (!isBrowser) return false;
+    return localStorage.getItem(key) !== null;
+  },
+  keys() {
+    if (!isBrowser) return [];
+    const keys = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key) keys.push(key);
+    }
+    return keys;
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   A4DataView,
@@ -4518,6 +4661,7 @@ var generatePdf = async (elementId, options = {}) => {
   ThemeToggle,
   WarqadProvider,
   generatePdf,
+  storage,
   useA4StatementView,
   useApi,
   useModal,