warqadui 0.0.46 → 0.0.47

package/dist/index.mjs

@@ -1063,13 +1063,18 @@ var useModal = (initialState = false) => {
   };
 };
 
+// src/hooks/uploads/useAntdImageUpload.tsx
+import { useState as useState7 } from "react";
+import { Image, Upload } from "antd";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+
 // src/components/Fields/Input.tsx
-import { forwardRef, useEffect as useEffect5, useState as useState7 } from "react";
+import { forwardRef, useEffect as useEffect5, useState as useState8 } from "react";
 import { Eye, EyeOff } from "lucide-react";
 import {
   Controller
 } from "react-hook-form";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var Input = forwardRef(
   ({
     label,
@@ -1085,8 +1090,8 @@ var Input = forwardRef(
     variant = "default",
     ...props
   }, ref) => {
-    const [isFocused, setIsFocused] = useState7(false);
-    const [showPassword, setShowPassword] = useState7(false);
+    const [isFocused, setIsFocused] = useState8(false);
+    const [showPassword, setShowPassword] = useState8(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     useEffect5(() => {
@@ -1110,12 +1115,12 @@ var Input = forwardRef(
         form.clearErrors("root");
       }
     }, [form?.watch(name)]);
-    const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ jsxs11(
+    const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ jsxs12(
       "div",
       {
         className: `${label ? "space-y-2" : ""} group relative ${containerClassName} `,
         children: [
-          label && /* @__PURE__ */ jsxs11(
+          label && /* @__PURE__ */ jsxs12(
             "label",
             {
               htmlFor: props.id,
@@ -1123,12 +1128,12 @@ var Input = forwardRef(
               style: { color: isFocused ? primaryColor : void 0 },
               children: [
                 label,
-                props.required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 ml-1", children: "*" })
+                props.required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
-            icon && /* @__PURE__ */ jsx17("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+            icon && /* @__PURE__ */ jsx18("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx18(
               "div",
               {
                 className: `transition-colors duration-200`,
@@ -1136,7 +1141,7 @@ var Input = forwardRef(
                 children: icon
               }
             ) }),
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               "input",
               {
                 ref,
@@ -1158,23 +1163,23 @@ var Input = forwardRef(
                 type: localType === "password" ? showPassword ? "text" : "password" : localType
               }
             ),
-            type === "password" && /* @__PURE__ */ jsx17(
+            type === "password" && /* @__PURE__ */ jsx18(
               "button",
               {
                 type: "button",
                 onClick: () => setShowPassword(!showPassword),
                 className: "absolute inset-y-0 right-0 pr-2.5 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors focus:outline-none cursor-pointer",
                 tabIndex: -1,
-                children: showPassword ? /* @__PURE__ */ jsx17(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx17(Eye, { className: "h-5 w-5" })
+                children: showPassword ? /* @__PURE__ */ jsx18(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx18(Eye, { className: "h-5 w-5" })
               }
             )
           ] }),
-          message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+          message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
         ]
       }
     );
     if (form && name && type === "number") {
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         Controller,
         {
           control: form.control,
@@ -1263,13 +1268,13 @@ var Input = forwardRef(
 );
 
 // src/components/Fields/PhoneInput.tsx
-import { forwardRef as forwardRef2, useState as useState8 } from "react";
+import { forwardRef as forwardRef2, useState as useState9 } from "react";
 import PhoneInputOriginal, {
   isValidPhoneNumber
 } from "react-phone-number-input";
 import "react-phone-number-input/style.css";
 import { Controller as Controller2 } from "react-hook-form";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var PhoneInput = forwardRef2(
   ({
     label,
@@ -1283,7 +1288,7 @@ var PhoneInput = forwardRef2(
     className = "",
     ...props
   }, ref) => {
-    const [isFocused, setIsFocused] = useState8(false);
+    const [isFocused, setIsFocused] = useState9(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     let message = error;
@@ -1298,8 +1303,8 @@ var PhoneInput = forwardRef2(
       }
       message = currentError?.message || message;
     }
-    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs12("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
-      /* @__PURE__ */ jsxs12(
+    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs13("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs13(
         "label",
         {
           className: `block text-xs font-medium transition-colors duration-200`,
@@ -1308,12 +1313,12 @@ var PhoneInput = forwardRef2(
           },
           children: [
             label,
-            props.required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ jsx19("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-        icon && /* @__PURE__ */ jsx18("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx19("div", { className: "absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsx19(
           "div",
           {
             className: `transition-colors duration-200`,
@@ -1321,7 +1326,7 @@ var PhoneInput = forwardRef2(
             children: icon
           }
         ) }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           PhoneInputOriginal,
           {
             ref,
@@ -1341,10 +1346,10 @@ var PhoneInput = forwardRef2(
           }
         )
       ] }),
-      message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
     if (form && name) {
-      return /* @__PURE__ */ jsx18(
+      return /* @__PURE__ */ jsx19(
         Controller2,
         {
           name,
@@ -1366,7 +1371,7 @@ PhoneInput.displayName = "PhoneInput";
 import React6, {
   createContext as createContext3,
   useContext as useContext3,
-  useState as useState9,
+  useState as useState10,
   useRef as useRef3,
   useEffect as useEffect6,
   forwardRef as forwardRef3
@@ -1374,7 +1379,7 @@ import React6, {
 import { createPortal } from "react-dom";
 import { ChevronDown as ChevronDown2, Check as Check2 } from "lucide-react";
 import { Controller as Controller3 } from "react-hook-form";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectContext = createContext3(void 0);
 var useSelectContext = () => {
   const context = useContext3(SelectContext);
@@ -1393,7 +1398,7 @@ var Select = forwardRef3((props, ref) => {
     }
   }, [value, name, form]);
   if (form && name) {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       Controller3,
       {
         name,
@@ -1405,7 +1410,7 @@ var Select = forwardRef3((props, ref) => {
             ref: fieldRef,
             onBlur
           }
-        }) => /* @__PURE__ */ jsx19(
+        }) => /* @__PURE__ */ jsx20(
           SelectRoot,
           {
             ...props,
@@ -1422,7 +1427,7 @@ var Select = forwardRef3((props, ref) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     SelectRoot,
     {
       ...props,
@@ -1455,10 +1460,10 @@ var SelectRoot = ({
   className = "",
   ...props
 }) => {
-  const [isOpen, setIsOpen] = useState9(false);
-  const [isFocused, setIsFocused] = useState9(false);
-  const [activeIndex, setActiveIndex] = useState9(-1);
-  const [registeredOptions, setRegisteredOptions] = useState9([]);
+  const [isOpen, setIsOpen] = useState10(false);
+  const [isFocused, setIsFocused] = useState10(false);
+  const [activeIndex, setActiveIndex] = useState10(-1);
+  const [registeredOptions, setRegisteredOptions] = useState10([]);
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
   const containerRef = useRef3(null);
@@ -1529,25 +1534,25 @@ var SelectRoot = ({
     disabled
   };
   const hasChildren = React6.Children.count(children) > 0;
-  return /* @__PURE__ */ jsx19(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx20(SelectContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: containerRef,
       className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
-        label && /* @__PURE__ */ jsxs13(
+        label && /* @__PURE__ */ jsxs14(
           "label",
           {
             className: `block text-xs font-medium transition-colors duration-200`,
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              required && /* @__PURE__ */ jsx19("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx20("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        hasChildren ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
-          /* @__PURE__ */ jsx19(
+        hasChildren ? children : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+          /* @__PURE__ */ jsx20(
             SelectTrigger,
             {
               id,
@@ -1558,7 +1563,7 @@ var SelectRoot = ({
               ...props
             }
           ),
-          allOptions && allOptions.length > 0 && /* @__PURE__ */ jsx19(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ jsx19(
+          allOptions && allOptions.length > 0 && /* @__PURE__ */ jsx20(SelectContent, { children: allOptions.map((opt, index) => /* @__PURE__ */ jsx20(
             SelectItem,
             {
               value: opt.value,
@@ -1568,7 +1573,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+        message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
       ]
     }
   ) });
@@ -1600,7 +1605,7 @@ var SelectTrigger = forwardRef3(
     const lastFocusTime = useRef3(0);
     const displayOption = options.find((o) => o.value === selectedValue);
     const displayValue = displayOption ? displayOption.label : selectedValue != null && selectedValue !== "" ? String(selectedValue) : placeholder;
-    return /* @__PURE__ */ jsx19("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsx20(
       "div",
       {
         id,
@@ -1649,8 +1654,8 @@ var SelectTrigger = forwardRef3(
           }
         },
         ...props,
-        children: children ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
-          icon && /* @__PURE__ */ jsx19(
+        children: children ? children : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+          icon && /* @__PURE__ */ jsx20(
             "div",
             {
               className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
@@ -1660,14 +1665,14 @@ var SelectTrigger = forwardRef3(
               children: icon
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "div",
             {
               className: `flex-1 truncate text-sm ${icon ? "" : "pl-2.5"} ${!selectedValue && selectedValue !== 0 && selectedValue !== false ? "text-gray-400 dark:text-zinc-500" : ""}`,
               children: displayValue
             }
           ),
-          /* @__PURE__ */ jsx19("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsx20(
             ChevronDown2,
             {
               className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -1682,7 +1687,7 @@ SelectTrigger.displayName = "SelectTrigger";
 var SelectContent = forwardRef3(
   ({ children, className = "", style, ...props }, ref) => {
     const { isOpen, setIsOpen, dropdownAnchorRef, dropdownContentRef } = useSelectContext();
-    const [dropdownStyle, setDropdownStyle] = useState9({});
+    const [dropdownStyle, setDropdownStyle] = useState10({});
     const updateDropdownPosition = () => {
       if (dropdownAnchorRef.current) {
         const rect = dropdownAnchorRef.current.getBoundingClientRect();
@@ -1713,7 +1718,7 @@ var SelectContent = forwardRef3(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return createPortal(
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(
         "div",
         {
           ref: dropdownContentRef,
@@ -1721,7 +1726,7 @@ var SelectContent = forwardRef3(
           style: { ...dropdownStyle, ...style },
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
-          children: /* @__PURE__ */ jsx19("div", { className: "flex flex-col gap-0.5", children: React6.Children.count(children) === 0 ? /* @__PURE__ */ jsx19("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
+          children: /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-0.5", children: React6.Children.count(children) === 0 ? /* @__PURE__ */ jsx20("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" }) : children })
         }
       ),
       document.body
@@ -1752,7 +1757,7 @@ var SelectItem = forwardRef3(
       setIsOpen(false);
       fieldInternalProps?.onBlur?.();
     };
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       "button",
       {
         ref,
@@ -1768,8 +1773,8 @@ var SelectItem = forwardRef3(
         },
         ...props,
         children: [
-          /* @__PURE__ */ jsx19("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
-          isSelected && /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("span", { className: "whitespace-nowrap truncate flex-1", children: children || label }),
+          isSelected && /* @__PURE__ */ jsx20(
             Check2,
             {
               className: "h-4 w-4 shrink-0 ml-2",
@@ -1784,11 +1789,11 @@ var SelectItem = forwardRef3(
 SelectItem.displayName = "SelectItem";
 
 // src/components/Fields/textArea.tsx
-import { forwardRef as forwardRef4, useEffect as useEffect7, useState as useState10 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect7, useState as useState11 } from "react";
 import {
   Controller as Controller4
 } from "react-hook-form";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var Textarea = forwardRef4(
   ({
     label,
@@ -1801,7 +1806,7 @@ var Textarea = forwardRef4(
     className = "",
     ...props
   }, ref) => {
-    const [isFocused, setIsFocused] = useState10(false);
+    const [isFocused, setIsFocused] = useState11(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     let message = error;
@@ -1812,8 +1817,8 @@ var Textarea = forwardRef4(
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
       message = errorObj?.message;
     }
-    const renderInput = (inputProps, ref2) => /* @__PURE__ */ jsxs14("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
-      /* @__PURE__ */ jsxs14(
+    const renderInput = (inputProps, ref2) => /* @__PURE__ */ jsxs15("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs15(
         "label",
         {
           htmlFor: props.id,
@@ -1821,11 +1826,11 @@ var Textarea = forwardRef4(
           style: { color: isFocused ? primaryColor : void 0 },
           children: [
             label,
-            props.required && /* @__PURE__ */ jsx20("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ jsx21("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx20("div", { className: "relative", children: /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21("div", { className: "relative", children: /* @__PURE__ */ jsx21(
         "textarea",
         {
           ref: ref2,
@@ -1846,7 +1851,7 @@ var Textarea = forwardRef4(
           ...inputProps
         }
       ) }),
-      message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ jsx21("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 !== "") {
@@ -1857,7 +1862,7 @@ var Textarea = forwardRef4(
       }
     }, [props.value, name, form]);
     if (form && name) {
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx21(
         Controller4,
         {
           control: form.control,
@@ -1896,7 +1901,7 @@ var Textarea = forwardRef4(
 import {
   createContext as createContext4,
   useContext as useContext4,
-  useState as useState12,
+  useState as useState13,
   useRef as useRef4,
   useEffect as useEffect8,
   forwardRef as forwardRef5
@@ -1905,7 +1910,7 @@ import { createPortal as createPortal2 } from "react-dom";
 import { Search, Loader2 as Loader22, ChevronDown as ChevronDown3, Check as Check3, X as X2 } from "lucide-react";
 
 // src/hooks/Fetches/useApis.tsx
-import { useState as useState11, useMemo as useMemo2 } from "react";
+import { useState as useState12, useMemo as useMemo2 } from "react";
 import axios from "axios";
 var useApi = () => {
   const { api: configApi } = useWarqadConfig();
@@ -1916,10 +1921,10 @@ var useApi = () => {
       withCredentials: true
     });
   }, [configApi]);
-  const [data, setData] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
-  const [pdfLoading, setPdfLoading] = useState11(false);
-  const [error, setError] = useState11(null);
+  const [data, setData] = useState12();
+  const [isLoading, setIsLoading] = useState12(false);
+  const [pdfLoading, setPdfLoading] = useState12(false);
+  const [error, setError] = useState12(null);
   const get = async ({ url, v = 1, params, delay }) => {
     setIsLoading(true);
     try {
@@ -2071,7 +2076,7 @@ var useApis_default = useApi;
 
 // src/components/Fields/searchApi.tsx
 import { Controller as Controller5 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var SearchApiContext = createContext4(
   void 0
 );
@@ -2095,12 +2100,12 @@ var SearchApi = forwardRef5(
       }
     }, [value, name, form]);
     if (form && name) {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         Controller5,
         {
           name,
           control: form.control,
-          render: ({ field }) => /* @__PURE__ */ jsx21(
+          render: ({ field }) => /* @__PURE__ */ jsx22(
             SearchApiRoot,
             {
               ...restProps,
@@ -2120,7 +2125,7 @@ var SearchApi = forwardRef5(
         }
       );
     }
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       SearchApiRoot,
       {
         ...restProps,
@@ -2163,15 +2168,15 @@ var SearchApiRoot = ({
   className = "",
   ...props
 }) => {
-  const [searchTerm, setSearchTerm] = useState12("");
+  const [searchTerm, setSearchTerm] = useState13("");
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
-  const [options, setOptions] = useState12([]);
-  const [isOpen, setIsOpen] = useState12(false);
-  const [isFocused, setIsFocused] = useState12(false);
-  const [activeIndex, setActiveIndex] = useState12(-1);
-  const [selectedObject, setSelectedObject] = useState12(void 0);
-  const [hasAttemptedHydration, setHasAttemptedHydration] = useState12(false);
+  const [options, setOptions] = useState13([]);
+  const [isOpen, setIsOpen] = useState13(false);
+  const [isFocused, setIsFocused] = useState13(false);
+  const [activeIndex, setActiveIndex] = useState13(-1);
+  const [selectedObject, setSelectedObject] = useState13(void 0);
+  const [hasAttemptedHydration, setHasAttemptedHydration] = useState13(false);
   const containerRef = useRef4(null);
   const dropdownAnchorRef = useRef4(null);
   const dropdownContentRef = useRef4(null);
@@ -2388,26 +2393,26 @@ var SearchApiRoot = ({
     onClear
   };
   const hasChildren = !!children;
-  return /* @__PURE__ */ jsx21(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx22(SearchApiContext.Provider, { value: valueCtx, children: /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: containerRef,
       className: `${label ? "space-y-2" : ""} group relative ${containerClassName}`,
       children: [
-        label && /* @__PURE__ */ jsxs15(
+        label && /* @__PURE__ */ jsxs16(
           "label",
           {
             className: `block text-xs font-medium transition-colors duration-200`,
             style: { color: isFocused || isOpen ? primaryColor : void 0 },
             children: [
               label,
-              required && /* @__PURE__ */ jsx21("span", { className: "text-red-500 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx22("span", { className: "text-red-500 ml-1", children: "*" })
             ]
           }
         ),
-        hasChildren ? children : /* @__PURE__ */ jsxs15(Fragment4, { children: [
-          /* @__PURE__ */ jsx21(SearchApiTrigger, { className, children: /* @__PURE__ */ jsx21(SearchApiInput, { ...props }) }),
-          /* @__PURE__ */ jsx21(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ jsx21(
+        hasChildren ? children : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+          /* @__PURE__ */ jsx22(SearchApiTrigger, { className, children: /* @__PURE__ */ jsx22(SearchApiInput, { ...props }) }),
+          /* @__PURE__ */ jsx22(SearchApiContent, { children: filteredOptions.map((opt, index) => /* @__PURE__ */ jsx22(
             SearchApiItem,
             {
               option: opt,
@@ -2437,7 +2442,7 @@ var SearchApiTrigger = forwardRef5(
       inputRef,
       searchTerm
     } = useSearchApiContext();
-    return /* @__PURE__ */ jsx21("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx22("div", { className: "relative", ref: dropdownAnchorRef, children: /* @__PURE__ */ jsxs16(
       "div",
       {
         className: `flex items-center w-full px-0 text-gray-900 dark:text-white transition-all duration-200 cursor-text py-1 ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full" : isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
@@ -2454,25 +2459,25 @@ var SearchApiTrigger = forwardRef5(
         },
         ...props,
         children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             "div",
             {
               className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
-              children: /* @__PURE__ */ jsx21(Search, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx22(Search, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx21("div", { className: "flex-1 relative ms-2", children }),
-          /* @__PURE__ */ jsx21("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ jsx21(Loader22, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
-            selectedValue && !disabled && /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("div", { className: "flex-1 relative ms-2", children }),
+          /* @__PURE__ */ jsx22("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ jsx22(Loader22, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-1", children: [
+            selectedValue && !disabled && /* @__PURE__ */ jsx22(
               "button",
               {
                 onClick: clearSelection,
                 type: "button",
                 className: "p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
-                children: /* @__PURE__ */ jsx21(X2, { className: "h-3 w-3" })
+                children: /* @__PURE__ */ jsx22(X2, { className: "h-3 w-3" })
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               ChevronDown3,
               {
                 className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
@@ -2552,9 +2557,9 @@ var SearchApiInput = forwardRef5(
           break;
       }
     };
-    return /* @__PURE__ */ jsxs15(Fragment4, { children: [
-      !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(
+    return /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      !isOpen && (selectedValue !== void 0 && selectedValue !== null && selectedValue !== "") && /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+      /* @__PURE__ */ jsx22(
         "input",
         {
           ref: setInternalInputRef,
@@ -2609,7 +2614,7 @@ var SearchApiContent = forwardRef5(
       options,
       error
     } = useSearchApiContext();
-    const [dropdownStyle, setDropdownStyle] = useState12({});
+    const [dropdownStyle, setDropdownStyle] = useState13({});
     const updateDropdownPosition = () => {
       if (dropdownAnchorRef.current) {
         const rect = dropdownAnchorRef.current.getBoundingClientRect();
@@ -2640,7 +2645,7 @@ var SearchApiContent = forwardRef5(
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined") return null;
     return createPortal2(
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           ref: dropdownContentRef,
@@ -2649,11 +2654,11 @@ var SearchApiContent = forwardRef5(
           onMouseDown: (e) => e.stopPropagation(),
           ...props,
           children: [
-            error && /* @__PURE__ */ jsx21("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
-            isLoading && options.length === 0 ? /* @__PURE__ */ jsxs15("div", { className: "p-4 text-center text-sm text-gray-500", children: [
-              /* @__PURE__ */ jsx21(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+            error && /* @__PURE__ */ jsx22("div", { className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 border-b border-gray-100 dark:border-zinc-800", children: error }),
+            isLoading && options.length === 0 ? /* @__PURE__ */ jsxs16("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+              /* @__PURE__ */ jsx22(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
               "Loading options..."
-            ] }) : children ? /* @__PURE__ */ jsx21("div", { className: "py-1", children }) : /* @__PURE__ */ jsx21("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
+            ] }) : children ? /* @__PURE__ */ jsx22("div", { className: "py-1", children }) : /* @__PURE__ */ jsx22("div", { className: "p-4 text-center text-sm text-gray-500", children: searchTerm ? `No results for "${searchTerm}"` : "No options available" })
           ]
         }
       ),
@@ -2682,7 +2687,7 @@ var SearchApiItem = forwardRef5(
     const optValue = getOptionValue(option);
     const isSelected = selectedValue === optValue;
     const isHighlighted = index === activeIndex;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs16(
       "button",
       {
         ref,
@@ -2701,8 +2706,8 @@ var SearchApiItem = forwardRef5(
         onMouseEnter: () => setActiveIndex(index),
         ...props,
         children: [
-          /* @__PURE__ */ jsx21("span", { className: "truncate", children: option[labelKey] }),
-          isSelected && /* @__PURE__ */ jsx21(Check3, { className: "h-4 w-4", style: { color: primaryColor } })
+          /* @__PURE__ */ jsx22("span", { className: "truncate", children: option[labelKey] }),
+          isSelected && /* @__PURE__ */ jsx22(Check3, { className: "h-4 w-4", style: { color: primaryColor } })
         ]
       },
       optValue || index
@@ -2712,7 +2717,7 @@ var SearchApiItem = forwardRef5(
 SearchApiItem.displayName = "SearchApiItem";
 
 // src/components/Fields/date.tsx
-import { forwardRef as forwardRef6, useState as useState13 } from "react";
+import { forwardRef as forwardRef6, useState as useState14 } from "react";
 import { DatePicker } from "antd";
 import {
   Controller as Controller6
@@ -2720,7 +2725,7 @@ import {
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { Calendar } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 dayjs.extend(customParseFormat);
 var DateInput = forwardRef6(
   ({
@@ -2739,7 +2744,7 @@ var DateInput = forwardRef6(
   }, ref) => {
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    const [isFocused, setIsFocused] = useState13(false);
+    const [isFocused, setIsFocused] = useState14(false);
     let message = error;
     if (form && name) {
       const {
@@ -2757,7 +2762,7 @@ var DateInput = forwardRef6(
       ${className}`;
     const renderDatePicker = (val, changeHandler, blurHandler, refProps) => {
       const dateValue = val && typeof val === "string" ? dayjs(val, "DD/MM/YYYY", true) : dayjs.isDayjs(val) ? val : null;
-      return /* @__PURE__ */ jsx22(
+      return /* @__PURE__ */ jsx23(
         DatePicker,
         {
           ref: refProps,
@@ -2784,7 +2789,7 @@ var DateInput = forwardRef6(
             boxShadow: isFocused && !message ? `${primaryColor}33 0px 0px 0px 2px` : void 0
           },
           classNames: { popup: { root: "z-50" } },
-          suffixIcon: /* @__PURE__ */ jsx22(
+          suffixIcon: /* @__PURE__ */ jsx23(
             Calendar,
             {
               className: "h-5 w-5 text-gray-400",
@@ -2796,8 +2801,8 @@ var DateInput = forwardRef6(
         }
       );
     };
-    return /* @__PURE__ */ jsxs16("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
-      label && /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
+      label && /* @__PURE__ */ jsxs17(
         "label",
         {
           className: "block text-xs font-medium transition-colors duration-200",
@@ -2806,11 +2811,11 @@ var DateInput = forwardRef6(
           },
           children: [
             label,
-            props.required && /* @__PURE__ */ jsx22("span", { className: "text-red-500 ml-1", children: "*" })
+            props.required && /* @__PURE__ */ jsx23("span", { className: "text-red-500 ml-1", children: "*" })
           ]
         }
       ),
-      form && name ? /* @__PURE__ */ jsx22(
+      form && name ? /* @__PURE__ */ jsx23(
         Controller6,
         {
           control: form.control,
@@ -2823,7 +2828,7 @@ var DateInput = forwardRef6(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message && /* @__PURE__ */ jsx22("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message && /* @__PURE__ */ jsx23("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
     ] });
   }
 );
@@ -2847,7 +2852,7 @@ var Fields = {
 var Fields_default = Fields;
 
 // src/components/tables/DataTable.tsx
-import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect9 } from "react";
+import React8, { useState as useState15, useMemo as useMemo3, useEffect as useEffect9 } from "react";
 import {
   useReactTable,
   getCoreRowModel,
@@ -2858,7 +2863,7 @@ import {
   flexRender
 } from "@tanstack/react-table";
 import { ChevronDown as ChevronDown4, Search as Search2 } from "lucide-react";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function DataTable({
   columns: userColumns,
   data,
@@ -2880,9 +2885,9 @@ function DataTable({
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
-  const [sorting, setSorting] = useState14([]);
-  const [columnFilters, setColumnFilters] = useState14([]);
-  const [columnVisibility, setColumnVisibility] = useState14(
+  const [sorting, setSorting] = useState15([]);
+  const [columnFilters, setColumnFilters] = useState15([]);
+  const [columnVisibility, setColumnVisibility] = useState15(
     () => {
       const initialVisibility = {};
       userColumns.forEach((col) => {
@@ -2896,9 +2901,9 @@ function DataTable({
       return initialVisibility;
     }
   );
-  const [rowSelection, setRowSelection] = useState14({});
-  const [globalFilter, setGlobalFilter] = useState14("");
-  const [pagination, setPagination] = useState14({
+  const [rowSelection, setRowSelection] = useState15({});
+  const [globalFilter, setGlobalFilter] = useState15("");
+  const [pagination, setPagination] = useState15({
     pageIndex: 0,
     pageSize: pageRows || 10
   });
@@ -2907,7 +2912,7 @@ function DataTable({
       setPagination((prev) => ({ ...prev, pageSize: pageRows }));
     }
   }, [pageRows]);
-  const [expanded, setExpanded] = useState14(() => {
+  const [expanded, setExpanded] = useState15(() => {
     const initialState = {};
     if (defaultExpanded && renderSubComponent && data) {
       data.forEach((row, idx) => {
@@ -2934,7 +2939,7 @@ function DataTable({
       {
         id: "_index",
         header: "#",
-        cell: ({ row }) => /* @__PURE__ */ jsx23("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+        cell: ({ row }) => /* @__PURE__ */ jsx24("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
         enableSorting: false
       },
       ...mappedColumns
@@ -2993,29 +2998,29 @@ function DataTable({
     table.getState().pagination.pageIndex,
     table.getState().pagination.pageSize
   ]);
-  return /* @__PURE__ */ jsxs17("div", { className: `space-y-4 w-full ${className}`, children: [
-    filterables && /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx23("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs18("div", { className: `space-y-4 w-full ${className}`, children: [
+    filterables && /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx24("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsx24(
         Fields_default.Input,
         {
           placeholder: searchPlaceholder,
           value: globalFilter,
           onChange: (e) => setGlobalFilter(e.target.value),
-          icon: /* @__PURE__ */ jsx23(Search2, { size: 16 }),
+          icon: /* @__PURE__ */ jsx24(Search2, { size: 16 }),
           className: "h-9!"
         }
       ) }),
-      /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs17("div", { className: "relative group", children: [
-        /* @__PURE__ */ jsxs17("button", { className: "flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors", children: [
+      /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs18("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxs18("button", { className: "flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors", children: [
           "Columns",
-          /* @__PURE__ */ jsx23(ChevronDown4, { size: 14, className: "text-gray-400" })
+          /* @__PURE__ */ jsx24(ChevronDown4, { size: 14, className: "text-gray-400" })
         ] }),
-        /* @__PURE__ */ jsx23("div", { className: "absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsx24("div", { className: "absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs18(
           "label",
           {
             className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 cursor-pointer capitalize",
             children: [
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 "input",
                 {
                   type: "checkbox",
@@ -3032,13 +3037,13 @@ function DataTable({
         )) })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx23("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative", children: /* @__PURE__ */ jsx23("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsx24("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative", children: /* @__PURE__ */ jsx24("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs18(
       "table",
       {
         className: "w-full text-left border-collapse",
         style: { accentColor: primaryColor },
         children: [
-          /* @__PURE__ */ jsx23("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
             "th",
             {
               className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3049,22 +3054,22 @@ function DataTable({
             },
             header.id
           )) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx23("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24("tbody", { className: "", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ jsx24(
             "tr",
             {
               className: "border-b border-gray-100 dark:border-zinc-800/50",
-              children: columns.map((_2, j) => /* @__PURE__ */ jsx23(
+              children: columns.map((_2, j) => /* @__PURE__ */ jsx24(
                 "td",
                 {
                   className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
-                  children: /* @__PURE__ */ jsx23("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
+                  children: /* @__PURE__ */ jsx24("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
                 },
                 `skeleton-cell-${j}`
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs17(React8.Fragment, { children: [
-            /* @__PURE__ */ jsx23(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs18(React8.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" : ""}`,
@@ -3079,7 +3084,7 @@ function DataTable({
                     }
                   }
                 },
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx23(
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx24(
                   "td",
                   {
                     className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" || cell.column.id === "select" || cell.column.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3092,14 +3097,14 @@ function DataTable({
                 ))
               }
             ),
-            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ jsx23("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx23("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ jsxs17("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
-              /* @__PURE__ */ jsx23("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.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__ */ jsx23("tr", { children: /* @__PURE__ */ jsx23(
+          ] }, row.id)) : /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
             "td",
             {
               colSpan: columns.length,
@@ -3111,7 +3116,7 @@ function DataTable({
             (group) => group.headers.some(
               (header) => header.column.columnDef.footer
             )
-          ) && /* @__PURE__ */ jsx23("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx23("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx23(
+          ) && /* @__PURE__ */ jsx24("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx24("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
             "td",
             {
               className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
@@ -3125,24 +3130,24 @@ function DataTable({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsx23("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ jsxs17(Fragment5, { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsx24("div", { className: "flex-1 text-xs text-gray-500", children: selectable && /* @__PURE__ */ jsxs18(Fragment6, { children: [
         table.getFilteredSelectedRowModel().rows.length,
         " of",
         " ",
         table.getFilteredRowModel().rows.length,
         " row(s) selected."
       ] }) }),
-      pageRows && table.getPageCount() > 1 && /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs17("span", { className: "text-sm text-gray-700 dark:text-gray-300 mr-2 select-none", children: [
+      pageRows && table.getPageCount() > 1 && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs18("span", { className: "text-sm text-gray-700 dark:text-gray-300 mr-2 select-none", children: [
           "Page",
           " ",
-          /* @__PURE__ */ jsx23("span", { className: "font-semibold", children: table.getState().pagination.pageIndex + 1 }),
+          /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: table.getState().pagination.pageIndex + 1 }),
           " ",
           "of ",
-          /* @__PURE__ */ jsx23("span", { className: "font-semibold", children: table.getPageCount() })
+          /* @__PURE__ */ jsx24("span", { className: "font-semibold", children: table.getPageCount() })
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             onClick: () => table.previousPage(),
@@ -3151,7 +3156,7 @@ function DataTable({
             children: "Previous"
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           "button",
           {
             onClick: () => table.nextPage(),
@@ -3167,7 +3172,7 @@ function DataTable({
 
 // src/components/tables/PostTable.tsx
 import React9, {
-  useState as useState15,
+  useState as useState16,
   useMemo as useMemo4,
   useEffect as useEffect10,
   useRef as useRef5,
@@ -3190,14 +3195,14 @@ import {
   ChevronDown as ChevronDown5,
   Loader2 as Loader23
 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var TableCell = React9.memo(
   ({
     cell,
     rowPadding,
     verticalLines
   }) => {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "td",
       {
         className: cn(
@@ -3232,8 +3237,8 @@ var TableRow = React9.memo(
   }) => {
     const isExpanded = row.getIsExpanded();
     const subComponentVisible = renderSubComponent && isExpanded && hasSubComponent(row.original);
-    return /* @__PURE__ */ jsxs18(React9.Fragment, { children: [
-      /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsxs19(React9.Fragment, { children: [
+      /* @__PURE__ */ jsx25(
         "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" : ""}`,
@@ -3246,7 +3251,7 @@ var TableRow = React9.memo(
               }
             }
           },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx24(
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx25(
             TableCell,
             {
               cell,
@@ -3257,8 +3262,8 @@ var TableRow = React9.memo(
           ))
         }
       ),
-      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" }),
+      subComponentVisible && /* @__PURE__ */ jsx25("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx25("td", { colSpan: columnsCount, className: "px-2 py-0", children: /* @__PURE__ */ jsxs19("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+        /* @__PURE__ */ jsx25("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
@@ -3291,10 +3296,10 @@ function PostTable({
 }) {
   const { theme } = useWarqadConfig();
   const primaryColor = theme?.primaryColor;
-  const [sorting, setSorting] = useState15([]);
-  const [columnFilters, setColumnFilters] = useState15([]);
-  const [columnVisibility, setColumnVisibility] = useState15({});
-  const [expanded, setExpanded] = useState15(() => {
+  const [sorting, setSorting] = useState16([]);
+  const [columnFilters, setColumnFilters] = useState16([]);
+  const [columnVisibility, setColumnVisibility] = useState16({});
+  const [expanded, setExpanded] = useState16(() => {
     const initialState = {};
     if (defaultExpanded && renderSubComponent && controlledData) {
       controlledData.forEach((row, idx) => {
@@ -3305,7 +3310,7 @@ function PostTable({
     }
     return initialState;
   });
-  const [internalData, setInternalData] = useState15(controlledData || []);
+  const [internalData, setInternalData] = useState16(controlledData || []);
   const isControlled = controlledData !== void 0;
   const data = isControlled ? controlledData : internalData;
   const entryRowRef = useRef5(null);
@@ -3328,10 +3333,10 @@ function PostTable({
   useEffect10(() => {
     focusAndScrollEntryRow();
   }, []);
-  const [entryData, setEntryData] = useState15({});
-  const [editingIndex, setEditingIndex] = useState15(null);
-  const [isSavingAsync, setIsSavingAsync] = useState15(false);
-  const [fieldErrors, setFieldErrors] = useState15({});
+  const [entryData, setEntryData] = useState16({});
+  const [editingIndex, setEditingIndex] = useState16(null);
+  const [isSavingAsync, setIsSavingAsync] = useState16(false);
+  const [fieldErrors, setFieldErrors] = useState16({});
   const latestStateRef = useRef5({
     data,
     entryData,
@@ -3498,25 +3503,25 @@ function PostTable({
       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(
+        return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx25(
             "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 })
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx25(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx25(Edit2, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             "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 })
+              children: submitLoading2 || isSavingAsync2 ? /* @__PURE__ */ jsx25(Loader23, { size: 16, className: "animate-spin" }) : /* @__PURE__ */ jsx25(Trash2, { size: 16 })
             }
           )
         ] });
@@ -3538,9 +3543,9 @@ function PostTable({
         size: 40,
         minSize: 40,
         maxSize: 40,
-        cell: ({ row }) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx24("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
-          renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ jsx24(
+        cell: ({ row }) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx25("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+          renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ jsx25(
             ChevronDown5,
             {
               size: 16,
@@ -3550,7 +3555,7 @@ function PostTable({
         ] }),
         enableSorting: false,
         meta: {
-          field: () => /* @__PURE__ */ jsx24("span", { className: "text-gray-400 font-medium px-2 block select-none", children: "#" })
+          field: () => /* @__PURE__ */ jsx25("span", { className: "text-gray-400 font-medium px-2 block select-none", children: "#" })
         }
       });
     }
@@ -3580,13 +3585,13 @@ function PostTable({
       isSavingAsync
     }
   });
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: `space-y-4 w-full ${className}`,
       style: { "--theme-primary": primaryColor || "#3b82f6" },
-      children: /* @__PURE__ */ jsx24("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ jsx24("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs18("table", { className: "w-full text-left border-collapse", children: [
-        /* @__PURE__ */ jsx24("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ jsx25("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs19("table", { className: "w-full text-left border-collapse", children: [
+        /* @__PURE__ */ jsx25("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx25("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
           "th",
           {
             className: cn(
@@ -3608,12 +3613,12 @@ function PostTable({
           },
           header.id
         )) }, headerGroup.id)) }),
-        /* @__PURE__ */ jsxs18("tbody", { className: "", children: [
-          isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsxs19("tbody", { className: "", children: [
+          isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx25(
             "tr",
             {
               className: "border-b border-gray-100 dark:border-zinc-800/50",
-              children: columns.map((col, j) => /* @__PURE__ */ jsx24(
+              children: columns.map((col, j) => /* @__PURE__ */ jsx25(
                 "td",
                 {
                   className: cn(
@@ -3626,13 +3631,13 @@ function PostTable({
                     minWidth: col.meta?.width ?? col.minSize,
                     maxWidth: col.meta?.width ?? col.maxSize
                   },
-                  children: /* @__PURE__ */ jsx24("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
+                  children: /* @__PURE__ */ jsx25("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
                 },
                 `skeleton-cell-${j}`
               ))
             },
             `skeleton-${i}`
-          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx24(
+          )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx25(
             TableRow,
             {
               row,
@@ -3643,7 +3648,7 @@ function PostTable({
               columnsCount: columns.length
             },
             row.id
-          )) : /* @__PURE__ */ jsx24("tr", { children: /* @__PURE__ */ jsx24(
+          )) : /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(
             "td",
             {
               colSpan: columns.length,
@@ -3651,7 +3656,7 @@ function PostTable({
               children: "No results found."
             }
           ) }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             "tr",
             {
               ref: entryRowRef,
@@ -3666,7 +3671,7 @@ function PostTable({
                 return visibleColumns.map((column) => {
                   const currentId = column.id || column.columnDef.accessorKey;
                   if (column.id === "actions") {
-                    return /* @__PURE__ */ jsx24(
+                    return /* @__PURE__ */ jsx25(
                       "td",
                       {
                         className: cn(
@@ -3674,38 +3679,38 @@ function PostTable({
                           "py-1! text-sm align-middle transition-colors duration-200",
                           verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""
                         ),
-                        children: /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ jsxs18(Fragment6, { children: [
-                          /* @__PURE__ */ jsx24(
+                        children: /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                          /* @__PURE__ */ jsx25(
                             "button",
                             {
                               onClick: handleSaveField,
                               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 || submitLoading ? /* @__PURE__ */ jsx24(
+                              children: isSavingAsync || submitLoading ? /* @__PURE__ */ jsx25(
                                 Loader23,
                                 {
                                   size: 16,
                                   className: "animate-spin"
                                 }
-                              ) : /* @__PURE__ */ jsx24(Check4, { size: 16, strokeWidth: 2.5 })
+                              ) : /* @__PURE__ */ jsx25(Check4, { size: 16, strokeWidth: 2.5 })
                             }
                           ),
-                          /* @__PURE__ */ jsx24(
+                          /* @__PURE__ */ jsx25(
                             "button",
                             {
                               onClick: handleCancelEdit,
                               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 })
+                              children: /* @__PURE__ */ jsx25(X3, { size: 16, strokeWidth: 2.5 })
                             }
                           )
-                        ] }) : /* @__PURE__ */ jsx24(Fragment6, { children: renderAddButton ? renderAddButton(
+                        ] }) : /* @__PURE__ */ jsx25(Fragment7, { children: renderAddButton ? renderAddButton(
                           entryData,
                           handleSaveField,
                           isSavingAsync
-                        ) : /* @__PURE__ */ jsxs18(
+                        ) : /* @__PURE__ */ jsxs19(
                           "button",
                           {
                             onClick: handleSaveField,
@@ -3716,14 +3721,14 @@ function PostTable({
                             },
                             title: "Add Row",
                             children: [
-                              isSavingAsync || submitLoading ? /* @__PURE__ */ jsx24(
+                              isSavingAsync || submitLoading ? /* @__PURE__ */ jsx25(
                                 Loader23,
                                 {
                                   size: 14,
                                   className: "animate-spin"
                                 }
-                              ) : /* @__PURE__ */ jsx24(Plus, { size: 14, strokeWidth: 2.5 }),
-                              /* @__PURE__ */ jsx24("span", { children: isSavingAsync || submitLoading ? "Adding..." : "Add" })
+                              ) : /* @__PURE__ */ jsx25(Plus, { size: 14, strokeWidth: 2.5 }),
+                              /* @__PURE__ */ jsx25("span", { children: isSavingAsync || submitLoading ? "Adding..." : "Add" })
                             ]
                           }
                         ) }) })
@@ -3749,7 +3754,7 @@ function PostTable({
                       });
                     }
                   };
-                  return /* @__PURE__ */ jsx24(
+                  return /* @__PURE__ */ jsx25(
                     "td",
                     {
                       "data-column-id": column.id,
@@ -3775,7 +3780,7 @@ function PostTable({
                         minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
                         maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
                       },
-                      children: /* @__PURE__ */ jsxs18(
+                      children: /* @__PURE__ */ jsxs19(
                         "div",
                         {
                           className: cn(
@@ -3806,7 +3811,7 @@ function PostTable({
                               onChange: onChangeValue,
                               rowData: entryData,
                               setRowData: setEntryData
-                            }) : /* @__PURE__ */ jsx24(
+                            }) : /* @__PURE__ */ jsx25(
                               Fields_default.Input,
                               {
                                 id: `pti-${accessor}`,
@@ -3818,7 +3823,7 @@ function PostTable({
                                 placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
                               }
                             ),
-                            typeof error === "string" && /* @__PURE__ */ jsx24("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-9999 pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
+                            typeof error === "string" && /* @__PURE__ */ jsx25("div", { className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 z-9999 pointer-events-none opacity-0 group-hover:opacity-100 focus-within:opacity-100 group-focus-within:opacity-100 transition-opacity whitespace-nowrap bg-red-500 text-white text-xs px-2.5 py-1.5 rounded shadow-lg before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-red-500", children: error })
                           ]
                         }
                       )
@@ -3834,7 +3839,7 @@ function PostTable({
           (group) => group.headers.some(
             (header) => header.column.columnDef.footer
           )
-        ) && /* @__PURE__ */ jsx24("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx24("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
+        ) && /* @__PURE__ */ jsx25("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx25("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
           "td",
           {
             className: cn(
@@ -3868,7 +3873,7 @@ import {
   getCoreRowModel as getCoreRowModel3,
   flexRender as flexRender3
 } from "@tanstack/react-table";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function SimpleTable({
   columns: userColumns,
   data,
@@ -3900,7 +3905,7 @@ function SimpleTable({
         id: "index",
         width: 75,
         className: "whitespace-nowrap px-2 text-center",
-        cell: (info) => /* @__PURE__ */ jsx25("span", { className: "tabular-nums", children: info.row.index + 1 + startIndex })
+        cell: (info) => /* @__PURE__ */ jsx26("span", { className: "tabular-nums", children: info.row.index + 1 + startIndex })
       });
     }
     return cols;
@@ -3917,17 +3922,17 @@ function SimpleTable({
       )
     );
   }, [table]);
-  return /* @__PURE__ */ jsxs19("div", { className: `w-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20("div", { className: `w-full overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs20(
       "table",
       {
         className: `w-full max-w-full text-left border-collapse table-fixed ${verticalLines ? "border border-black dark:border-white" : ""}`,
         children: [
-          /* @__PURE__ */ jsx25("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx26(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-200 dark:border-zinc-800"}`,
-              children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
+              children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx26(
                 "th",
                 {
                   className: `${rowPadding} font-semibold text-gray-900 dark:text-zinc-100 text-sm align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
@@ -3946,15 +3951,15 @@ function SimpleTable({
             },
             headerGroup.id
           )) }),
-          /* @__PURE__ */ jsx25("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading && data.length === 0 ? Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26("tbody", { className: "text-black dark:text-white font-semibold font-sans tabular-nums", children: isLoading && data.length === 0 ? Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx26(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"}`,
-              children: columns.map((col, colIdx) => /* @__PURE__ */ jsx25(
+              children: columns.map((col, colIdx) => /* @__PURE__ */ jsx26(
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
-                  children: /* @__PURE__ */ jsx25(
+                  children: /* @__PURE__ */ jsx26(
                     "div",
                     {
                       className: `h-4 bg-gray-200 dark:bg-zinc-800/50 rounded-sm animate-pulse ${colIdx % 2 === 0 ? "w-3/4" : "w-1/2"} ${colIdx === 0 ? "w-4" : ""}`
@@ -3965,18 +3970,18 @@ function SimpleTable({
               ))
             },
             `skeleton-row-${i}`
-          )) : data.length === 0 && !isLoading ? /* @__PURE__ */ jsx25("tr", { children: /* @__PURE__ */ jsx25(
+          )) : data.length === 0 && !isLoading ? /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26(
             "td",
             {
               colSpan: columns.length,
               className: "text-center text-gray-500 font-medium",
-              children: emptyState || /* @__PURE__ */ jsx25("div", { className: "py-8", children: "No transactions found." })
+              children: emptyState || /* @__PURE__ */ jsx26("div", { className: "py-8", children: "No transactions found." })
             }
-          ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx25(
+          ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx26(
             "tr",
             {
               className: `border-b ${verticalLines ? "border-black dark:border-white" : "border-gray-100 dark:border-zinc-800/60 last:border-0"} hover:bg-gray-50/50 dark:hover:bg-zinc-900/30 transition-colors`,
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx25(
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx26(
                 "td",
                 {
                   className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${cell.column.columnDef.className || "wrap-break-word"}`,
@@ -3987,11 +3992,11 @@ function SimpleTable({
             },
             row.id
           )) }),
-          hasFooters && !isLoading && /* @__PURE__ */ jsx25("tfoot", { className: "text-black dark:text-white font-bold font-sans tabular-nums", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx25(
+          hasFooters && !isLoading && /* @__PURE__ */ jsx26("tfoot", { className: "text-black dark:text-white font-bold font-sans tabular-nums", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx26(
             "tr",
             {
               className: `${verticalLines ? "border-t border-black dark:border-white" : "bg-gray-50/30 dark:bg-zinc-900/10"}`,
-              children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx25(
+              children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx26(
                 "td",
                 {
                   className: `text-sm ${rowPadding} ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
@@ -4008,13 +4013,13 @@ function SimpleTable({
         ]
       }
     ),
-    componentFooter && /* @__PURE__ */ jsx25("div", { className: "mt-2 pt-3 border-t border-gray-200 dark:border-zinc-800", children: componentFooter() })
+    componentFooter && /* @__PURE__ */ jsx26("div", { className: "mt-2 pt-3 border-t border-gray-200 dark:border-zinc-800", children: componentFooter() })
   ] });
 }
 
 // src/components/Badge.tsx
 import React11 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Badge = React11.forwardRef(
   ({
     children,
@@ -4036,7 +4041,7 @@ var Badge = React11.forwardRef(
       md: "px-2.5 py-1 text-xs leading-tight font-semibold",
       lg: "px-3 py-1.5 text-sm leading-tight font-semibold"
     };
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "span",
       {
         ref,
@@ -4050,13 +4055,13 @@ var Badge = React11.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Branding.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Branding = ({
   text,
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "p",
     {
       className: cn(
@@ -4070,7 +4075,7 @@ var Branding = ({
 };
 
 // src/hooks/Fetches/useA4DataView.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState16 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState17 } from "react";
 import { useReactToPrint } from "react-to-print";
 import {
   RefreshCw,
@@ -4080,7 +4085,7 @@ import {
   ChevronLeft,
   ChevronRight as ChevronRight2
 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
 var useA4StatementView = ({
   url,
   v = 1,
@@ -4131,11 +4136,11 @@ var useA4StatementView = ({
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
     const measureContainerRef = useRef6(null);
-    const [pages, setPages] = useState16([]);
-    const [isMeasuring, setIsMeasuring] = useState16(true);
-    const [globalFilter, setGlobalFilter] = useState16("");
-    const [currentPageIndex, setCurrentPageIndex] = useState16(0);
-    const [pageSearch, setPageSearch] = useState16("");
+    const [pages, setPages] = useState17([]);
+    const [isMeasuring, setIsMeasuring] = useState17(true);
+    const [globalFilter, setGlobalFilter] = useState17("");
+    const [currentPageIndex, setCurrentPageIndex] = useState17(0);
+    const [pageSearch, setPageSearch] = useState17("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4151,20 +4156,20 @@ var useA4StatementView = ({
     const columnsWithFooters = columns.filter(
       (col) => col.renderFooter && !col.hide
     );
-    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ jsxs20(
+    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ jsxs21(
       "div",
       {
         id: "a4-final-total",
         className: "mt-6 flex flex-wrap justify-end items-center pt-4 border-t border-black dark:border-zinc-700 print:border-black gap-4",
         children: [
-          /* @__PURE__ */ jsx28("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
-          columnsWithFooters.map((col, idx) => /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsx29("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
+          columnsWithFooters.map((col, idx) => /* @__PURE__ */ jsxs21(
             "div",
             {
               className: "flex items-center gap-3 px-4 py-2 rounded-md border border-black dark:border-zinc-700 print:border-black",
               children: [
-                /* @__PURE__ */ jsx28("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
-                /* @__PURE__ */ jsx28("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
+                /* @__PURE__ */ jsx29("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
+                /* @__PURE__ */ jsx29("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
               ]
             },
             col.key || idx
@@ -4251,28 +4256,28 @@ var useA4StatementView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ jsxs20(
+    const HeaderEl = /* @__PURE__ */ jsxs21(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs20("section", { children: [
-            /* @__PURE__ */ jsx28("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
-            /* @__PURE__ */ jsx28("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
+          /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs21("section", { children: [
+            /* @__PURE__ */ jsx29("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
+            /* @__PURE__ */ jsx29("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ jsxs20("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx28("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
-            /* @__PURE__ */ jsxs20("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
-              store?.address && /* @__PURE__ */ jsx28("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ jsx28("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ jsx28("span", { children: store.email })
+          /* @__PURE__ */ jsxs21("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx29("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
+            /* @__PURE__ */ jsxs21("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
+              store?.address && /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ jsx29("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ jsx29("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx28("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx28(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx29("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx29(
       InfoGrid,
       {
         className: "mb-4",
@@ -4280,29 +4285,29 @@ var useA4StatementView = ({
         isLoading: isActuallyLoading
       }
     ) }) : null;
-    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ jsx28("div", { className: "mb-4", children: /* @__PURE__ */ jsx28(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ jsx28("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-      url && !isActuallyLoading && /* @__PURE__ */ jsxs20(
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", 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: [
+      isActuallyLoading ? /* @__PURE__ */ jsx29("div", { className: "mb-4", children: /* @__PURE__ */ jsx29(ClassicSpin, {}) }) : 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(AlertCircle, { 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(FileX, { 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: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+      url && !isActuallyLoading && /* @__PURE__ */ jsxs21(
         "button",
         {
           onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
-            /* @__PURE__ */ jsx28(RefreshCw, { size: 14 }),
+            /* @__PURE__ */ jsx29(RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx28("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx29("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx29(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ jsxs20(
+          children: /* @__PURE__ */ jsxs21(
             "div",
             {
               ref: measureContainerRef,
@@ -4310,9 +4315,9 @@ var useA4StatementView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
-                  /* @__PURE__ */ jsx28("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsxs21("div", { className: "grow w-full px-8 pb-8", children: [
+                  /* @__PURE__ */ jsx29("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx29("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  /* @__PURE__ */ jsx29(
                     SimpleTable,
                     {
                       columns,
@@ -4330,52 +4335,52 @@ var useA4StatementView = ({
           )
         }
       ) }),
-      /* @__PURE__ */ jsx28("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx29("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ jsx29(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ jsx28(
+          children: /* @__PURE__ */ jsx29(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ jsxs20("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+              children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ jsxs21("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
                   headers,
-                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs20(
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs21(
                       "button",
                       {
                         onClick: async () => await getData(),
                         disabled: isLoading,
                         className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                         children: [
-                          /* @__PURE__ */ jsx28(
+                          /* @__PURE__ */ jsx29(
                             RefreshCw,
                             {
                               size: 16,
                               className: isLoading ? "animate-spin" : ""
                             }
                           ),
-                          /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold", children: "Reload" })
+                          /* @__PURE__ */ jsx29("span", { className: "text-xs font-semibold", children: "Reload" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs20(
+                    /* @__PURE__ */ jsxs21(
                       "button",
                       {
                         onClick: () => reactToPrintFn(),
                         className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                         children: [
-                          /* @__PURE__ */ jsx28(Printer, { size: 16 }),
+                          /* @__PURE__ */ jsx29(Printer, { size: 16 }),
                           "Print"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                      /* @__PURE__ */ jsx28(
+                    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                      /* @__PURE__ */ jsx29(
                         "button",
                         {
                           onClick: (e) => {
@@ -4386,11 +4391,11 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === 0,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ jsx28(ChevronLeft, { size: 18 })
+                          children: /* @__PURE__ */ jsx29(ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                        /* @__PURE__ */ jsxs20(
+                      /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ jsxs21(
                           Select,
                           {
                             value: currentPageIndex + 1,
@@ -4403,9 +4408,9 @@ var useA4StatementView = ({
                             variant: "ghost",
                             containerClassName: "inline-block",
                             children: [
-                              /* @__PURE__ */ jsx28(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ jsx28("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                              /* @__PURE__ */ jsxs20(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                                /* @__PURE__ */ jsx28("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ jsx28(
+                              /* @__PURE__ */ jsx29(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ jsx29("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ jsxs21(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ jsx29("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ jsx29(
                                   "input",
                                   {
                                     type: "text",
@@ -4417,17 +4422,17 @@ var useA4StatementView = ({
                                     autoFocus: true
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx28("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                /* @__PURE__ */ jsx29("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                   (p) => String(p).includes(pageSearch)
-                                ).map((p) => /* @__PURE__ */ jsx28(SelectItem, { value: p, children: p }, p)) })
+                                ).map((p) => /* @__PURE__ */ jsx29(SelectItem, { value: p, children: p }, p)) })
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx28("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                        /* @__PURE__ */ jsx28("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                        /* @__PURE__ */ jsx29("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ jsx29("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                       ] }),
-                      /* @__PURE__ */ jsx28(
+                      /* @__PURE__ */ jsx29(
                         "button",
                         {
                           onClick: (e) => {
@@ -4438,7 +4443,7 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === pages.length - 1,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ jsx28(ChevronRight2, { size: 18 })
+                          children: /* @__PURE__ */ jsx29(ChevronRight2, { size: 18 })
                         }
                       )
                     ] })
@@ -4446,10 +4451,10 @@ var useA4StatementView = ({
                 ] }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ jsxs20("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                    /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
-                    /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsxs21("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ jsxs21("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
+                    /* @__PURE__ */ jsx29("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
+                    /* @__PURE__ */ jsx29(
                       "input",
                       {
                         type: "text",
@@ -4460,9 +4465,9 @@ 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: tableTitle }) }),
-                  pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-7 print:h-0" }),
-                  statusOverlay ? /* @__PURE__ */ jsx28("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx28(
+                  pageIndex === 0 && /* @__PURE__ */ jsx29("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__ */ jsx29("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ jsx29("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ jsx29("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx29(
                     SimpleTable,
                     {
                       columns,
@@ -4498,10 +4503,10 @@ var useA4StatementView = ({
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useTransaction.tsx
-import { useEffect as useEffect12, useState as useState17 } from "react";
+import { useEffect as useEffect12, useState as useState18 } 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";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var useTransaction = ({
   url,
   v = 1,
@@ -4509,7 +4514,7 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = useState17(
+  const [date, setDate] = useState18(
     moment().format("DD/MM/YYYY")
   );
   const dateObj = {};
@@ -4554,21 +4559,21 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx29(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx30(
       "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(
+        children: /* @__PURE__ */ jsxs22("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__ */ jsx30("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__ */ jsx30(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx30("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx30(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsx30("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ jsx30("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__ */ jsxs22(
             "button",
             {
               onClick: () => getData(),
               className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
               children: [
-                /* @__PURE__ */ jsx29(RefreshCw2, { size: 14 }),
+                /* @__PURE__ */ jsx30(RefreshCw2, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -4576,14 +4581,14 @@ var useTransaction = ({
         ] })
       }
     ) : 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: [
-          /* @__PURE__ */ jsx29(Card.Title, { children: title }),
-          /* @__PURE__ */ jsx29(Card.Description, { children: description })
+    return /* @__PURE__ */ jsxs22(Card, { children: [
+      /* @__PURE__ */ jsx30(Card.Header, { children: /* @__PURE__ */ jsxs22("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx30(Card.Title, { children: title }),
+          /* @__PURE__ */ jsx30(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ jsxs21("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs22("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ jsx30(
             Fields_default.DateInput,
             {
               value: date,
@@ -4593,20 +4598,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ jsx29(Plus2, {}),
+              icon: /* @__PURE__ */ jsx30(Plus2, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx29(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx29("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx30("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx30(
         DataTable,
         {
           columns,