warqadui 0.0.30 → 0.0.32

package/dist/index.mjs

@@ -1079,6 +1079,14 @@ var Input = forwardRef(
     const [showPassword, setShowPassword] = useState7(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
+    useEffect5(() => {
+      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 {
@@ -1161,39 +1169,62 @@ var Input = 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(
@@ -1203,20 +1234,20 @@ var Input = 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);
   }
 );
@@ -1343,6 +1374,14 @@ var useSelectContext = () => {
 };
 var Select = forwardRef3((props, ref) => {
   const { form, name, onChange, value, children, options = [] } = props;
+  useEffect6(() => {
+    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__ */ jsx19(
       Controller3,
@@ -1735,7 +1774,7 @@ var SelectItem = forwardRef3(
 SelectItem.displayName = "SelectItem";
 
 // src/components/Fields/textArea.tsx
-import { forwardRef as forwardRef4, useState as useState10 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect7, useState as useState10 } from "react";
 import {
   Controller as Controller4
 } from "react-hook-form";
@@ -1799,30 +1838,47 @@ var Textarea = forwardRef4(
       ) }),
       message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
+    useEffect7(() => {
+      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__ */ jsx20(
         Controller4,
         {
           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
+    );
   }
 );
 
@@ -1832,7 +1888,7 @@ import {
   useContext as useContext4,
   useState as useState12,
   useRef as useRef4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   forwardRef as forwardRef5
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -2021,6 +2077,14 @@ var useSearchApiContext = () => {
 var SearchApi = forwardRef5(
   (props, _) => {
     const { form, name, onChange, onSelect, onClear, value, children, ...restProps } = props;
+    useEffect8(() => {
+      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__ */ jsx21(
         Controller5,
@@ -2135,7 +2199,7 @@ var SearchApiRoot = ({
       setOptions([]);
     }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const timer = setTimeout(() => {
       if (isOpen) {
         fetchOptions(searchTerm);
@@ -2143,18 +2207,18 @@ var SearchApiRoot = ({
     }, 300);
     return () => clearTimeout(timer);
   }, [searchTerm, api, isOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isOpen && options.length === 0) {
       fetchOptions("");
     }
   }, [isOpen]);
-  useEffect7(() => {
-    if (currentValue && !selectedObject) {
+  useEffect8(() => {
+    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);
     }
@@ -2165,8 +2229,8 @@ var SearchApiRoot = ({
     }
     return option[valueKey];
   };
-  useEffect7(() => {
-    if (currentValue && !selectedObject && options.length > 0) {
+  useEffect8(() => {
+    if (currentValue !== void 0 && currentValue !== null && currentValue !== "" && !selectedObject && options.length > 0) {
       const found = options.find((o) => getOptionValue(o) === currentValue);
       if (found) {
         setSelectedObject(found);
@@ -2179,7 +2243,7 @@ var SearchApiRoot = ({
       }
     }
   }, [currentValue, options, obj]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (prevApiRef.current !== api) {
       prevApiRef.current = api;
       setSearchTerm("");
@@ -2204,7 +2268,7 @@ var SearchApiRoot = ({
       fetchOptions("");
     }
   }, [api, name, obj]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (containerRef.current && !containerRef.current.contains(target) && !(dropdownContentRef.current && dropdownContentRef.current.contains(target))) {
@@ -2219,13 +2283,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);
@@ -2480,7 +2544,7 @@ var SearchApiInput = forwardRef5(
       }
     };
     return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-      !isOpen && selectedValue && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      !isOpen && (selectedValue !== void 0 && selectedValue !== null && selectedValue !== "") && /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
       /* @__PURE__ */ jsx21(
         "input",
         {
@@ -2554,7 +2618,7 @@ var SearchApiContent = forwardRef5(
         setDropdownStyle(newStyle);
       }
     };
-    useEffect7(() => {
+    useEffect8(() => {
       if (isOpen) {
         updateDropdownPosition();
         window.addEventListener("scroll", updateDropdownPosition, true);
@@ -2774,7 +2838,7 @@ var Fields = {
 var Fields_default = Fields;
 
 // src/components/tables/DataTable.tsx
-import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect8 } from "react";
+import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect9 } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -2802,7 +2866,8 @@ function DataTable({
   defaultExpanded = false,
   onChange,
   selectable = true,
-  filterables = true
+  filterables = true,
+  emptyState
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
@@ -2828,7 +2893,7 @@ function DataTable({
     pageIndex: 0,
     pageSize: pageRows || 10
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (pageRows) {
       setPagination((prev) => ({ ...prev, pageSize: pageRows }));
     }
@@ -2894,7 +2959,7 @@ function DataTable({
     },
     manualPagination: false
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (onChange) {
       onChange({
         pagination: {
@@ -3030,7 +3095,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(
@@ -3092,7 +3157,13 @@ function DataTable({
 }
 
 // src/components/tables/PostTable.tsx
-import React9, { useState as useState15, useMemo as useMemo4, useEffect as useEffect9, useRef as useRef5 } from "react";
+import React9, {
+  useState as useState15,
+  useMemo as useMemo4,
+  useEffect as useEffect10,
+  useRef as useRef5,
+  useCallback as useCallback2
+} from "react";
 import {
   useReactTable as useReactTable2,
   getCoreRowModel as getCoreRowModel2,
@@ -3101,8 +3172,95 @@ import {
   getExpandedRowModel as getExpandedRowModel2,
   flexRender as flexRender2
 } from "@tanstack/react-table";
-import { Plus, Edit2, Trash2, Check as Check4, X as X3, ChevronDown as ChevronDown5 } from "lucide-react";
+import {
+  Plus,
+  Edit2,
+  Trash2,
+  Check as Check4,
+  X as X3,
+  ChevronDown as ChevronDown5,
+  Loader2 as Loader23
+} from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var TableCell = React9.memo(
+  ({
+    cell,
+    rowPadding,
+    verticalLines
+  }) => {
+    return /* @__PURE__ */ jsx24(
+      "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: flexRender2(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 = React9.memo(
+  ({
+    row,
+    rowPadding,
+    verticalLines,
+    renderSubComponent,
+    hasSubComponent,
+    columnsCount
+  }) => {
+    const isExpanded = row.getIsExpanded();
+    const subComponentVisible = renderSubComponent && isExpanded && hasSubComponent(row.original);
+    return /* @__PURE__ */ jsxs18(React9.Fragment, { children: [
+      /* @__PURE__ */ jsx24(
+        "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__ */ jsx24(
+            TableCell,
+            {
+              cell,
+              rowPadding,
+              verticalLines
+            },
+            cell.id
+          ))
+        }
+      ),
+      subComponentVisible && /* @__PURE__ */ jsx24("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx24("td", { colSpan: columnsCount, className: "px-2 py-0", children: /* @__PURE__ */ jsxs18("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+        /* @__PURE__ */ jsx24("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,
@@ -3116,7 +3274,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;
@@ -3152,10 +3311,10 @@ function PostTable({
       }
     }, 50);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     focusAndScrollEntryRow();
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (controlledData) {
       setData(controlledData);
     }
@@ -3164,18 +3323,46 @@ function PostTable({
   const [editingIndex, setEditingIndex] = useState15(null);
   const [isSavingAsync, setIsSavingAsync] = useState15(false);
   const [fieldErrors, setFieldErrors] = useState15({});
-  const handleSaveField = async () => {
-    if (Object.keys(entryData).length === 0) return;
-    let newData = [...data];
-    if (editingIndex !== null) {
-      newData[editingIndex] = {
-        ...newData[editingIndex],
-        ...entryData
+  const latestStateRef = useRef5({
+    data,
+    entryData,
+    editingIndex,
+    isSavingAsync,
+    submitLoading,
+    fieldErrors,
+    onChange
+  });
+  useEffect10(() => {
+    latestStateRef.current = {
+      data,
+      entryData,
+      editingIndex,
+      isSavingAsync,
+      submitLoading,
+      fieldErrors,
+      onChange
+    };
+  });
+  const handleSaveField = useCallback2(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 = {
@@ -3199,9 +3386,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
@@ -3219,83 +3406,93 @@ function PostTable({
     setEntryData({});
     setFieldErrors({});
     setIsSavingAsync(false);
-    if (editingIndex !== null) {
+    if (editingIndex2 !== null) {
       setEditingIndex(null);
     } else {
       focusAndScrollEntryRow();
     }
-  };
-  const handleCancelEdit = () => {
+  }, []);
+  const handleCancelEdit = useCallback2(() => {
     setEditingIndex(null);
     setEntryData({});
     setFieldErrors({});
-  };
-  const handleEdit = (index2, rowOriginal) => {
+  }, []);
+  const handleEdit = useCallback2((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 = useCallback2(
+    (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__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx24(
-          "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__ */ jsx24(Edit2, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx24(
-          "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__ */ jsx24(Trash2, { size: 16 })
-          }
-        )
-      ] });
-    }
-  };
+    },
+    [handleCancelEdit]
+  );
+  const actionColumn = useMemo4(
+    () => ({
+      id: "actions",
+      header: "Actions",
+      cell: ({ row, table: table2 }) => {
+        const { handleEdit: handleEdit2, handleDelete: handleDelete2, submitLoading: submitLoading2, isSavingAsync: isSavingAsync2 } = table2.options.meta;
+        return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Edit2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx24(Trash2, { size: 16 })
+            }
+          )
+        ] });
+      }
+    }),
+    []
+  );
   const columns = useMemo4(() => {
     const mappedUserColumns = userColumns.map((col) => ({
       ...col,
@@ -3344,6 +3541,12 @@ function PostTable({
       columnFilters,
       columnVisibility,
       expanded
+    },
+    meta: {
+      handleEdit,
+      handleDelete,
+      submitLoading,
+      isSavingAsync
     }
   });
   return /* @__PURE__ */ jsx24(
@@ -3398,54 +3601,18 @@ function PostTable({
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs18(React9.Fragment, { children: [
-            /* @__PURE__ */ jsx24(
-              "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__ */ jsx24(
-                  "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: flexRender2(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )
-                  },
-                  cell.id
-                ))
-              }
-            ),
-            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ jsx24("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx24("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ jsxs18("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
-              /* @__PURE__ */ jsx24("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__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx24(
+            TableRow,
+            {
+              row,
+              rowPadding,
+              verticalLines,
+              renderSubComponent,
+              hasSubComponent,
+              columnsCount: columns.length
+            },
+            row.id
+          )) : /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
             "td",
             {
               colSpan: columns.length,
@@ -3481,17 +3648,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__ */ jsx24("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-emerald-500/30 border-t-emerald-500 animate-spin" }) : /* @__PURE__ */ jsx24(Check4, { size: 16, strokeWidth: 2.5 })
+                              children: isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(
+                                Loader23,
+                                {
+                                  size: 16,
+                                  className: "animate-spin"
+                                }
+                              ) : /* @__PURE__ */ jsx24(Check4, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
                           /* @__PURE__ */ jsx24(
                             "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__ */ jsx24(X3, { size: 16, strokeWidth: 2.5 })
@@ -3505,15 +3678,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__ */ jsx24("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ jsx24(Plus, { size: 14, strokeWidth: 2.5 }),
-                              /* @__PURE__ */ jsx24("span", { children: isSavingAsync ? "Adding..." : "Add" })
+                              isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(
+                                Loader23,
+                                {
+                                  size: 14,
+                                  className: "animate-spin"
+                                }
+                              ) : /* @__PURE__ */ jsx24(Plus, { size: 14, strokeWidth: 2.5 }),
+                              /* @__PURE__ */ jsx24("span", { children: isSavingAsync || submitLoading ? "Adding..." : "Add" })
                             ]
                           }
                         ) }) })
@@ -3670,7 +3849,8 @@ function SimpleTable({
   startIndex = 0,
   isLoading = false,
   title,
-  enableSearch = false
+  enableSearch = false,
+  emptyState
 }) {
   const columns = useMemo5(() => {
     const cols = userColumns.filter((col) => !col.hide).map((col) => ({
@@ -3752,8 +3932,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__ */ jsx25("div", { className: "py-8", children: "No transactions found." })
             }
           ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx25(
             "tr",
@@ -3853,7 +4033,7 @@ var Branding = ({
 };
 
 // src/hooks/Fetches/useA4DataView.tsx
-import { useEffect as useEffect10, useRef as useRef6, useState as useState16 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState16 } from "react";
 import { useReactToPrint } from "react-to-print";
 import { RefreshCw, Printer, AlertCircle, FileX } from "lucide-react";
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -3868,7 +4048,7 @@ var useA4StatementView = ({
   const reactToPrintFn = useReactToPrint({
     contentRef
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (url) {
       get({ url, v, params, delay });
     }
@@ -3945,7 +4125,7 @@ var useA4StatementView = ({
         renderFooter: c.renderFooter ? c.renderFooter.toString() : ""
       }))
     });
-    useEffect10(() => {
+    useEffect11(() => {
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -3956,7 +4136,7 @@ var useA4StatementView = ({
         );
       }
     }, [depsString]);
-    useEffect10(() => {
+    useEffect11(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4026,24 +4206,22 @@ var useA4StatementView = ({
       }
     );
     const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx28("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx28(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
-    if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-96", children: /* @__PURE__ */ jsxs20("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__ */ jsx28("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__ */ jsx28(AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ jsx28(FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-        /* @__PURE__ */ jsx28("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
-        /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-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__ */ jsxs20(
-          "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__ */ jsx28(RefreshCw, { size: 16 }),
-              "Try Again"
-            ]
-          }
-        )
-      ] }) });
-    }
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[300px]", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      error ? /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ jsx28("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
+      /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+      url && /* @__PURE__ */ jsxs20(
+        "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__ */ jsx28(RefreshCw, { size: 14 }),
+            "Try Again"
+          ]
+        }
+      )
+    ] }) }) : void 0;
     return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col relative w-full items-center", children: [
       isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx28("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx28(
         "div",
@@ -4138,7 +4316,7 @@ var useA4StatementView = ({
               ] }),
               pageIndex === 0 && /* @__PURE__ */ jsx28("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
               pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-5 print:h-0" }),
-              (pageData.length > 0 || isLoading) && /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx28(
                 SimpleTable,
                 {
                   columns,
@@ -4148,6 +4326,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
                 }
               ),
@@ -4175,7 +4354,7 @@ var A4DataView = (props) => {
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useTransaction.tsx
-import { useEffect as useEffect11, useState as useState17 } from "react";
+import { useEffect as useEffect12, useState as useState17 } from "react";
 import { AlertCircle as AlertCircle2, FileX as FileX2, Plus as Plus2, RefreshCw as RefreshCw2 } from "lucide-react";
 import moment from "moment";
 import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -4202,7 +4381,7 @@ var useTransaction = ({
       delay
     });
   };
-  useEffect11(() => {
+  useEffect12(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -4229,30 +4408,28 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    if (!isLoading && (error || !data || data.length === 0)) {
-      return /* @__PURE__ */ jsx29(
-        "div",
-        {
-          className: `flex flex-col relative w-full items-center justify-center p-8 min-h-96 ${className}`,
-          children: /* @__PURE__ */ jsxs21("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__ */ jsx29("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__ */ jsx29(AlertCircle2, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx29("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ jsx29(FileX2, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
-            /* @__PURE__ */ jsx29("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-            /* @__PURE__ */ jsx29("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__ */ jsxs21(
-              "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__ */ jsx29(RefreshCw2, { size: 16 }),
-                  "Try Again"
-                ]
-              }
-            )
-          ] })
-        }
-      );
-    }
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx29(
+      "div",
+      {
+        className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
+        children: /* @__PURE__ */ jsxs21("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__ */ jsx29("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__ */ jsx29(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsx29("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ jsx29("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__ */ jsxs21(
+            "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__ */ jsx29(RefreshCw2, { size: 14 }),
+                "Try Again"
+              ]
+            }
+          )
+        ] })
+      }
+    ) : void 0;
     return /* @__PURE__ */ jsxs21(Card, { children: [
       /* @__PURE__ */ jsx29(Card.Header, { children: /* @__PURE__ */ jsxs21("header", { className: "flex items-center justify-between gap-4 py-2", children: [
         /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
@@ -4296,6 +4473,7 @@ var useTransaction = ({
           verticalLines,
           index,
           rowPadding,
+          emptyState,
           ...rest
         }
       ) }) })
@@ -4437,6 +4615,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;
+  }
+};
 export {
   A4DataView,
   Badge,
@@ -4479,6 +4717,7 @@ export {
   ThemeToggle,
   WarqadProvider,
   generatePdf,
+  storage,
   useA4DataView_default as useA4StatementView,
   useApis_default as useApi,
   useModal,