warqadui 0.0.30 → 0.0.32

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,
@@ -1156,6 +1157,14 @@ var Input = (0, import_react8.forwardRef)(
     const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
+    (0, import_react8.useEffect)(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     let message = error;
     if (form && name) {
       const {
@@ -1238,39 +1247,62 @@ var Input = (0, import_react8.forwardRef)(
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              ref: fieldRef,
-              onBlur: () => {
-                onBlur2();
-              },
-              value: value ? String(value).split(".").map(
-                (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-              ).join(".") : "",
-              onChange: (e) => {
-                const rawValue = e.target.value.replace(/,/g, "");
-                if (!/^\d*\.?\d*$/.test(rawValue)) return;
-                if (rawValue === "") {
-                  onChange("");
-                } else {
-                  const numValue = Number(rawValue);
-                  if (!isNaN(numValue) && String(numValue) === rawValue) {
-                    onChange(numValue);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const hasValue = value !== void 0 && value !== null && value !== "";
+            const hasPropsValue = props.value !== void 0 && props.value !== null && props.value !== "";
+            const displayValue = hasValue ? value : hasPropsValue ? props.value : "";
+            return renderInput(
+              {
+                ref: fieldRef,
+                onBlur: () => {
+                  onBlur2();
+                },
+                value: displayValue !== "" ? String(displayValue).split(".").map(
+                  (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                ).join(".") : "",
+                onChange: (e) => {
+                  const rawValue = e.target.value.replace(/,/g, "");
+                  if (!/^\d*\.?\d*$/.test(rawValue)) return;
+                  if (rawValue === "") {
+                    onChange("");
+                    props.onChange?.("");
                   } else {
-                    onChange(rawValue);
+                    const numValue = Number(rawValue);
+                    if (!isNaN(numValue) && String(numValue) === rawValue) {
+                      onChange(numValue);
+                      props.onChange?.(numValue);
+                    } else {
+                      onChange(rawValue);
+                      props.onChange?.(rawValue);
+                    }
                   }
                 }
-                props.onChange?.(e);
-              }
-            },
-            "text"
-          )
+              },
+              "text"
+            );
+          }
         }
       );
     }
-    let inputPropsObj = form && name ? form.register(name, type === "number" ? { valueAsNumber: true } : {}) : {};
+    let inputPropsObj = {};
+    const originalOnChange = props.onChange;
+    if (form && name) {
+      const registeredProps = form.register(
+        name,
+        type === "number" ? { valueAsNumber: true } : {}
+      );
+      inputPropsObj = {
+        ...registeredProps,
+        onChange: (e) => {
+          registeredProps.onChange(e);
+          const rawValue = e.target.value.replace(/,/g, "");
+          originalOnChange?.(
+            type === "number" ? rawValue === "" ? "" : Number(rawValue) : e.target.value
+          );
+        }
+      };
+    }
     if (type === "number" && (!form || !name)) {
-      const originalOnChange = props.onChange;
       inputPropsObj = {
         ...inputPropsObj,
         value: props.value !== void 0 && props.value !== null ? String(props.value).split(".").map(
@@ -1280,20 +1312,20 @@ var Input = (0, import_react8.forwardRef)(
           const rawValue = e.target.value.replace(/,/g, "");
           if (!/^\d*\.?\d*$/.test(rawValue)) return;
           if (originalOnChange) {
-            const fakeEvent = {
-              ...e,
-              target: {
-                ...e.target,
-                value: rawValue,
-                valueAsNumber: rawValue === "" ? NaN : Number(rawValue)
-              }
-            };
-            originalOnChange(fakeEvent);
+            originalOnChange(rawValue === "" ? "" : Number(rawValue));
           }
         }
       };
       return renderInput(inputPropsObj, "text");
     }
+    if (!form || !name) {
+      inputPropsObj = {
+        ...inputPropsObj,
+        onChange: (e) => {
+          originalOnChange?.(e.target.value);
+        }
+      };
+    }
     return renderInput(inputPropsObj, type === "number" ? "text" : type);
   }
 );
@@ -1411,6 +1443,14 @@ var useSelectContext = () => {
 };
 var Select = (0, import_react10.forwardRef)((props, ref) => {
   const { form, name, onChange, value, children, options = [] } = props;
+  (0, import_react10.useEffect)(() => {
+    if (form && name && value !== void 0 && value !== null && value !== "") {
+      const currentFormValue = form.getValues(name);
+      if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+        form.setValue(name, value);
+      }
+    }
+  }, [value, name, form]);
   if (form && name) {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_react_hook_form3.Controller,
@@ -1865,30 +1905,47 @@ var Textarea = (0, import_react11.forwardRef)(
       ) }),
       message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
+    (0, import_react11.useEffect)(() => {
+      if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, props.value);
+        }
+      }
+    }, [props.value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         import_react_hook_form4.Controller,
         {
           control: form.control,
           name,
-          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
-            {
-              value: value || "",
-              // Ensure controlled input doesn't warn about uncontrolled
-              onChange: (e) => {
-                onChange(e);
-                props.onChange?.(e);
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => {
+            const displayValue = value !== void 0 && value !== null && value !== "" ? value : props.value;
+            return renderInput(
+              {
+                value: displayValue || "",
+                onChange: (e) => {
+                  onChange(e);
+                  props.onChange?.(e);
+                },
+                onBlur: () => {
+                  onBlur2();
+                }
               },
-              onBlur: () => {
-                onBlur2();
-              }
-            },
-            fieldRef
-          )
+              fieldRef
+            );
+          }
         }
       );
     }
-    return renderInput({}, ref);
+    return renderInput(
+      {
+        onChange: (e) => {
+          props.onChange?.(e);
+        }
+      },
+      ref
+    );
   }
 );
 
@@ -2080,6 +2137,14 @@ var useSearchApiContext = () => {
 var SearchApi = (0, import_react13.forwardRef)(
   (props, _) => {
     const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
+    (0, import_react13.useEffect)(() => {
+      if (form && name && value !== void 0 && value !== null && value !== "") {
+        const currentFormValue = form.getValues(name);
+        if (currentFormValue === void 0 || currentFormValue === "" || currentFormValue === 0) {
+          form.setValue(name, value);
+        }
+      }
+    }, [value, name, form]);
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         import_react_hook_form5.Controller,
@@ -2208,12 +2273,12 @@ var SearchApiRoot = ({
     }
   }, [isOpen]);
   (0, import_react13.useEffect)(() => {
-    if (currentValue && !selectedObject) {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject) {
       setHasAttemptedHydration(false);
       fetchOptions(currentValue).finally(() => {
         setHasAttemptedHydration(true);
       });
-    } else if (!currentValue) {
+    } else if (currentValue === void 0 || currentValue === null || currentValue === "") {
       setHasAttemptedHydration(true);
       if (selectedObject) setSelectedObject(void 0);
     }
@@ -2225,7 +2290,7 @@ var SearchApiRoot = ({
     return option[valueKey];
   };
   (0, import_react13.useEffect)(() => {
-    if (currentValue && !selectedObject && options.length > 0) {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject && options.length > 0) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) {
         setSelectedObject(found);
@@ -2278,13 +2343,13 @@ var SearchApiRoot = ({
   }, [fieldInternalProps]);
   const getDisplayValue = () => {
     if (selectedObject) return selectedObject[labelKey];
-    if (options.length > 0 && currentValue) {
+    if (options.length > 0 && (currentValue !== void 0 && currentValue !== null && currentValue !== "")) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) return found[labelKey];
     }
-    if (isLoading || currentValue && !hasAttemptedHydration)
+    if (isLoading || currentValue !== void 0 && currentValue !== null && currentValue !== "" && !hasAttemptedHydration)
       return "Loading...";
-    return currentValue || "";
+    return currentValue !== void 0 && currentValue !== null && currentValue !== "" ? currentValue : "";
   };
   const handleSelect = (option) => {
     const val = getOptionValue(option);
@@ -2539,7 +2604,7 @@ var SearchApiInput = (0, import_react13.forwardRef)(
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      !isOpen && selectedValue && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      !isOpen && (selectedValue !== void 0 && selectedValue !== null && selectedValue !== "") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "input",
         {
@@ -2851,7 +2916,8 @@ function DataTable({
   defaultExpanded = false,
   onChange,
   selectable = true,
-  filterables = true
+  filterables = true,
+  emptyState
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -3079,7 +3145,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 +3211,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 +3303,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 +3352,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 +3415,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,83 +3435,93 @@ 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);
-    setData(newData);
-    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}']`
+  }, []);
+  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) => {
+          if (entryRowRef.current) {
+            const td = entryRowRef.current.querySelector(
+              `td[data-column-id="${columnId}"]`
             );
-            if (input) input.focus();
+            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
+          }));
         }
-      },
-      setError: (columnId, error) => {
-        setFieldErrors((prev) => ({
-          ...prev,
-          [columnId]: error
-        }));
+      };
+      onChange2?.({
+        entryData: data2[index2],
+        actions,
+        actionType: "delete",
+        fullData: newData
+      });
+      if (editingIndex2 === index2) {
+        handleCancelEdit();
+      } else if (editingIndex2 !== null && editingIndex2 > index2) {
+        setEditingIndex(editingIndex2 - 1);
       }
-    };
-    onChange?.({
-      entryData: data[index2],
-      actions,
-      actionType: "delete",
-      fullData: newData
-    });
-    if (editingIndex === index2) {
-      handleCancelEdit();
-    } else if (editingIndex !== null && editingIndex > index2) {
-      setEditingIndex(editingIndex - 1);
-    }
-  };
-  const actionColumn = {
-    id: "actions",
-    header: "Actions",
-    cell: ({ row }) => {
-      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",
-            title: "Edit",
-            children: /* @__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",
-            title: "Delete",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Trash2, { size: 16 })
-          }
-        )
-      ] });
-    }
-  };
+    },
+    [handleCancelEdit]
+  );
+  const actionColumn = (0, import_react16.useMemo)(
+    () => ({
+      id: "actions",
+      header: "Actions",
+      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: () => 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: 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: () => 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: 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 +3570,12 @@ function PostTable({
       columnFilters,
       columnVisibility,
       expanded
+    },
+    meta: {
+      handleEdit,
+      handleDelete,
+      submitLoading,
+      isSavingAsync
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3440,54 +3630,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 +3677,23 @@ 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 +3707,21 @@ 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 +3874,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 +3957,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 +4231,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 +4341,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 +4351,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 +4433,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 +4498,7 @@ var useTransaction = ({
           verticalLines,
           index,
           rowPadding,
+          emptyState,
           ...rest
         }
       ) }) })
@@ -4475,6 +4640,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 +4743,7 @@ var generatePdf = async (elementId, options = {}) => {
   ThemeToggle,
   WarqadProvider,
   generatePdf,
+  storage,
   useA4StatementView,
   useApi,
   useModal,