warqadui 0.0.50 → 0.0.52

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AdminProtectedRoute: () => AdminProtectedRoute,
   Badge: () => Badge,
   Branding: () => Branding,
   Button: () => Button,
@@ -46,6 +47,7 @@ __export(index_exports, {
   DataTable: () => DataTable,
   DateInput: () => DateInput,
   Fields: () => Fields_default,
+  Guard: () => Guard,
   InfoGrid: () => InfoGrid,
   Input: () => Input,
   LoadingBox: () => LoadingBox,
@@ -56,6 +58,8 @@ __export(index_exports, {
   PageHeader: () => PageHeader,
   PhoneInput: () => PhoneInput,
   PostTable: () => PostTable,
+  ProfileDropdown: () => ProfileDropdown,
+  ProtectedRoute: () => ProtectedRoute,
   SearchApi: () => SearchApi,
   SearchApiContent: () => SearchApiContent,
   SearchApiInput: () => SearchApiInput,
@@ -69,6 +73,8 @@ __export(index_exports, {
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
+  ThemedLogin: () => ThemedLogin,
+  UnProtectedRoute: () => UnProtectedRoute,
   Views: () => Views_default,
   WarqadProvider: () => WarqadProvider,
   generatePdf: () => generatePdf,
@@ -77,6 +83,9 @@ __export(index_exports, {
   useA4StatementView: () => useA4DataView_default,
   useAntdImageUpload: () => useAntdImageUpload_default,
   useApi: () => useApis_default,
+  useAuth: () => useAuth_default,
+  useAuthStore: () => useAuthStore,
+  useLogin: () => useLogin,
   useModal: () => useModal,
   useSearchApiContext: () => useSearchApiContext,
   useSelectContext: () => useSelectContext,
@@ -363,7 +372,10 @@ var ThemeProvider = ({ children }) => {
       localStorage.setItem("theme", "light");
     }
   }, [isDarkMode]);
-  const toggleTheme = () => setIsDarkMode((prev) => !prev);
+  const toggleTheme = () => {
+    console.log("Toggle theme clicked, currently isDarkMode:", isDarkMode);
+    setTheme(isDarkMode ? "light" : "dark");
+  };
   const setTheme = (theme) => setIsDarkMode(theme === "dark");
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeContext.Provider, { value: { isDarkMode, toggleTheme, setTheme }, children });
 };
@@ -1178,19 +1190,20 @@ var Input = (0, import_react8.forwardRef)(
         }
       }
     }, [props.value, name, form]);
-    let message = error;
+    let message2 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message = errorObj?.message;
+      message2 = errorObj?.message;
     }
+    const watchedValue = form?.watch(name);
     (0, import_react8.useEffect)(() => {
-      if (form && name) {
+      if (form && name && form.formState.errors?.root) {
         form.clearErrors("root");
       }
-    }, [form?.watch(name)]);
+    }, [watchedValue, name, form]);
     const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
@@ -1250,7 +1263,7 @@ var Input = (0, import_react8.forwardRef)(
               }
             )
           ] }),
-          message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+          message2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
         ]
       }
     );
@@ -1365,7 +1378,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
     const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    let message = error;
+    let message2 = error;
     if (form && name) {
       const {
         formState: { errors }
@@ -1375,7 +1388,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
       for (const part of nameParts) {
         currentError = currentError?.[part];
       }
-      message = currentError?.message || message;
+      message2 = currentError?.message || message2;
     }
     const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -1420,7 +1433,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
           }
         )
       ] }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -1569,7 +1582,7 @@ var SelectRoot = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [fieldInternalProps]);
-  let message = error;
+  let message2 = error;
   if (form && name) {
     const {
       formState: { errors }
@@ -1579,7 +1592,7 @@ var SelectRoot = ({
     for (const part of nameParts) {
       currentError = currentError?.[part];
     }
-    message = currentError?.message || message;
+    message2 = currentError?.message || message2;
   }
   const allOptions = initialOptions?.length ? initialOptions : registeredOptions;
   const valueCtx = {
@@ -1640,7 +1653,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        message && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+        message2 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
       ]
     }
   ) });
@@ -1874,13 +1887,13 @@ var Textarea = (0, import_react11.forwardRef)(
     const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    let message = error;
+    let message2 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message = errorObj?.message;
+      message2 = errorObj?.message;
     }
     const renderInput = (inputProps, ref2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -1916,7 +1929,7 @@ var Textarea = (0, import_react11.forwardRef)(
           ...inputProps
         }
       ) }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
     (0, import_react11.useEffect)(() => {
       if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
@@ -2402,7 +2415,7 @@ var SearchApiRoot = ({
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
   );
-  let message = error || errorMessage;
+  let message2 = error || errorMessage;
   if (form && name) {
     const {
       formState: { errors }
@@ -2412,7 +2425,7 @@ var SearchApiRoot = ({
     for (const part of nameParts) {
       currentError = currentError?.[part];
     }
-    message = currentError?.message || message;
+    message2 = currentError?.message || message2;
   }
   const valueCtx = {
     isOpen,
@@ -2446,7 +2459,7 @@ var SearchApiRoot = ({
     form,
     name,
     obj,
-    error: message,
+    error: message2,
     onSelect,
     onClear
   };
@@ -2801,19 +2814,19 @@ var DateInput = (0, import_react14.forwardRef)(
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
-    let message = error;
+    let message2 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message = errorObj?.message;
+      message2 = errorObj?.message;
     }
     const inputStyles = `w-full px-2.5 py-1 rounded-xl border! shadow-none transition-all! duration-200! outline-none!
       bg-white! dark:bg-zinc-900!
       text-gray-900! dark:text-zinc-100!
       hover:bg-white! dark:hover:bg-zinc-900!
-      ${message ? "border-red-500 hover:border-red-500 [&.ant-picker-focused]:border-red-500 [&.ant-picker-focused]:ring-red-500/20" : "border-gray-200 dark:border-zinc-700 hover:border-gray-200 dark:hover:border-zinc-700 [&.ant-picker-focused]:ring-2"}
+      ${message2 ? "border-red-500 hover:border-red-500 [&.ant-picker-focused]:border-red-500 [&.ant-picker-focused]:ring-red-500/20" : "border-gray-200 dark:border-zinc-700 hover:border-gray-200 dark:hover:border-zinc-700 [&.ant-picker-focused]:ring-2"}
       [&.ant-picker-focused]:bg-white dark:[&.ant-picker-focused]:bg-zinc-900
       ${className}`;
     const renderDatePicker = (val, changeHandler, blurHandler, refProps) => {
@@ -2841,8 +2854,8 @@ var DateInput = (0, import_react14.forwardRef)(
           needConfirm: false,
           style: {
             height: "36px",
-            borderColor: isFocused && !message ? primaryColor : void 0,
-            boxShadow: isFocused && !message ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+            borderColor: isFocused && !message2 ? primaryColor : void 0,
+            boxShadow: isFocused && !message2 ? `${primaryColor}33 0px 0px 0px 2px` : void 0
           },
           classNames: { popup: { root: "z-50" } },
           suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2863,7 +2876,7 @@ var DateInput = (0, import_react14.forwardRef)(
         {
           className: "block text-xs font-medium transition-colors duration-200",
           style: {
-            color: message ? "#ef4444" : isFocused ? primaryColor : void 0
+            color: message2 ? "#ef4444" : isFocused ? primaryColor : void 0
           },
           children: [
             label,
@@ -2884,7 +2897,7 @@ var DateInput = (0, import_react14.forwardRef)(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
   }
 );
@@ -4097,11 +4110,620 @@ var Branding = ({
   );
 };
 
-// src/hooks/Fetches/useA4DataView.tsx
-var import_react19 = require("react");
-var import_react_to_print = require("react-to-print");
+// src/hooks/useLogin.tsx
+var import_react19 = __toESM(require("react"));
+var import_react_hook_form7 = require("react-hook-form");
+var import_zod = require("@hookform/resolvers/zod");
+var z = __toESM(require("zod"));
+
+// src/components/Login/ThemedLogins.tsx
 var import_lucide_react12 = require("lucide-react");
+var import_react_router_dom2 = require("react-router-dom");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var TechLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-[#0A0B10]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex lg:w-3/5 relative overflow-hidden bg-slate-900 border-r border-slate-800", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "absolute inset-0 z-0 opacity-60 bg-cover bg-center transition-transform hover:scale-110 duration-[20s]",
+          style: { backgroundImage: `url('${image || "/tech_bg.png"}')` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-[#0A0B10] via-transparent to-purple-500/10 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative z-20 p-12 flex flex-col justify-between w-full h-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-10 w-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(79,70,229,0.5)]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Terminal, { className: "text-white w-6 h-6" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold text-white tracking-widest uppercase", children: brandName || "DevNode" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-5xl font-extrabold text-white mb-6 leading-tight", children: [
+            "Build the ",
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-indigo-400", children: "Future" }),
+            " of Web."
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-400 text-lg leading-relaxed mb-8", children: "Join thousands of developers building scalable applications with our state-of-the-art infrastructure." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-slate-500 text-sm", children: [
+          "\xA9 2026 ",
+          brandName || "DevNode",
+          "."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-2/5 p-8 lg:p-16 flex flex-col justify-center bg-white dark:bg-[#0A0B10] relative transition-colors duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "button",
+          {
+            onClick: () => navigate(backUrl),
+            disabled: isLoading,
+            className: "p-2 rounded-lg text-slate-500 hover:text-indigo-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-12", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-3xl font-bold text-slate-900 dark:text-white mb-3 tracking-tight", children: title || "Welcome Back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400", children: subtitle || "Please enter your credentials to access your dashboard." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Email Address",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "maoo@example.com",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    import_lucide_react12.Mail,
+                    {
+                      size: 18,
+                      className: "text-slate-400 dark:text-slate-500"
+                    }
+                  ),
+                  className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-12"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "password",
+                  label: "Password",
+                  type: "password",
+                  disabled: isLoading,
+                  placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    import_lucide_react12.Lock,
+                    {
+                      size: 18,
+                      className: "text-slate-400 dark:text-slate-500"
+                    }
+                  ),
+                  className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-12"
+                }
+              ),
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                Button,
+                {
+                  type: "submit",
+                  isLoading,
+                  className: "w-full bg-indigo-600 hover:bg-indigo-500 text-white h-12 font-semibold flex items-center justify-center gap-2",
+                  children: [
+                    isLoading ? "Logging in..." : "Authenticate Now",
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowRight, { size: 18 })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var TravelLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex lg:w-1/2 relative overflow-hidden bg-slate-100 border-r border-slate-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "absolute inset-0 z-0 bg-cover bg-center transition-transform hover:scale-105 duration-[30s]",
+          style: { backgroundImage: `url('${image || "/travel_bg.png"}')` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-br from-orange-500/20 via-transparent to-black/30 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative z-20 p-16 flex flex-col justify-between w-full h-full text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-10 w-10 bg-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Plane, { className: "text-white w-6 h-6 rotate-45" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold tracking-tight", children: brandName || "Wanderlust" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-6xl font-black mb-8 leading-[1.1]", children: [
+          "Your Next ",
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-orange-400", children: "Adventure" }),
+          " ",
+          "Starts Now."
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-white/70 text-sm", children: [
+          "Discover the world with ",
+          brandName || "Wanderlust",
+          "."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-1/2 p-10 lg:p-24 flex flex-col justify-center bg-white dark:bg-slate-950 relative transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "button",
+          {
+            onClick: () => navigate(backUrl),
+            disabled: isLoading,
+            className: "p-2 rounded-lg text-slate-500 hover:text-orange-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-orange-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-12 text-center lg:text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-4xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight", children: title || "Login to Explore" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400 text-lg", children: subtitle || "Enter your details to access your travel dashboard." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Email Address",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "traveler@world.com",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    import_lucide_react12.Mail,
+                    {
+                      size: 18,
+                      className: "text-slate-400 dark:text-slate-500"
+                    }
+                  ),
+                  className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-14 rounded-xl"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "password",
+                  label: "Password",
+                  type: "password",
+                  disabled: isLoading,
+                  placeholder: "Secret journey phrase",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    import_lucide_react12.Lock,
+                    {
+                      size: 18,
+                      className: "text-slate-400 dark:text-slate-500"
+                    }
+                  ),
+                  className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-14 rounded-xl"
+                }
+              ),
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-orange-600 dark:text-orange-400 text-sm font-bold text-center lg:text-left animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                Button,
+                {
+                  type: "submit",
+                  isLoading,
+                  className: "w-full bg-orange-500 hover:bg-orange-600 text-white h-14 rounded-xl font-bold text-lg flex items-center justify-center gap-2 transition-all",
+                  children: [
+                    isLoading ? "Logging in..." : "Start Journey",
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Plane, { size: 20, className: "rotate-45" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var HealthcareLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-[#F0F7FF] dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-[450px] flex flex-col justify-center bg-white dark:bg-slate-900 shadow-2xl z-30 relative px-10 lg:px-14 transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "button",
+          {
+            onClick: () => navigate(backUrl),
+            disabled: isLoading,
+            className: "p-2 rounded-lg text-slate-500 hover:text-blue-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-blue-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-[340px] w-full mx-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3 mb-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-12 w-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-md shadow-blue-200 dark:shadow-blue-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.HeartPulse, { className: "text-white w-7 h-7" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold text-slate-800 dark:text-white tracking-tight", children: brandName || "CarePoint" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-3xl font-bold text-slate-800 dark:text-white mb-3 tracking-tight", children: title || "Clinical Login" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400 font-medium leading-relaxed", children: subtitle || "Secure access for staff and healthcare professionals." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-7",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Employee Email",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "dr.name@carepoint.org",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Mail, { size: 18, className: "text-blue-500" }),
+                  className: "bg-slate-50/50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white h-13 rounded-lg border-2"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "password",
+                  label: "Staff Password",
+                  type: "password",
+                  disabled: isLoading,
+                  placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Lock, { size: 18, className: "text-blue-500" }),
+                  className: "bg-slate-50/50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white h-13 rounded-lg border-2"
+                }
+              ),
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-600 dark:text-red-400 text-sm font-bold animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                Button,
+                {
+                  type: "submit",
+                  isLoading,
+                  className: "w-full bg-blue-600 hover:bg-blue-700 text-white h-13 rounded-lg font-bold flex items-center justify-center gap-2 transition-all shadow-lg active:translate-y-0.5",
+                  children: [
+                    isLoading ? "Logging in..." : "Secure Login",
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.MonitorCheck, { size: 18 })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex flex-1 relative overflow-hidden bg-slate-900", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "absolute inset-0 z-0 bg-cover bg-center brightness-110",
+          style: { backgroundImage: `url('${image || "/medicine_bg.png"}')` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-l from-transparent via-blue-900/10 to-blue-900/40 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative z-20 p-20 flex flex-col items-center justify-center w-full h-full text-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-w-2xl bg-white/20 backdrop-blur-xl border border-white/30 p-12 rounded-[40px] shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-5xl font-black text-white mb-6 leading-tight drop-shadow-sm", children: [
+        "Next-Gen ",
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-blue-100", children: "Patient Management" })
+      ] }) }) })
+    ] })
+  ] });
+};
+var ThemedLogin = (props) => {
+  switch (props.theme) {
+    case "tech":
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TechLogin, { ...props });
+    case "travel":
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TravelLogin, { ...props });
+    case "healthcare":
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HealthcareLogin, { ...props });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TechLogin, { ...props });
+  }
+};
+
+// src/hooks/useLogin.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var defaultLoginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required")
+});
+var useLogin = (props) => {
+  const form = (0, import_react_hook_form7.useForm)({
+    resolver: (0, import_zod.zodResolver)(props.schema || defaultLoginSchema),
+    defaultValues: props.defaultValues || {
+      email: "",
+      password: ""
+    }
+  });
+  const propsRef = import_react19.default.useRef(props);
+  propsRef.current = props;
+  const Login = import_react19.default.useMemo(() => {
+    const StableLogin = () => {
+      const currentProps = propsRef.current;
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        ThemedLogin,
+        {
+          form,
+          onSubmit: currentProps.onSubmit,
+          theme: currentProps.theme,
+          image: currentProps.image,
+          brandName: currentProps.brandName,
+          title: currentProps.title,
+          subtitle: currentProps.subtitle,
+          backUrl: currentProps.backUrl,
+          isLoading: currentProps.isLoading
+        }
+      );
+    };
+    return StableLogin;
+  }, [form]);
+  return {
+    form,
+    Login
+  };
+};
+
+// src/components/ProfileDropdown.tsx
+var import_react20 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ProfileDropdown = ({
+  name,
+  image,
+  items,
+  className,
+  triggerMode = "click",
+  size = "md"
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+  const dropdownRef = (0, import_react20.useRef)(null);
+  const [loadingItems, setLoadingItems] = (0, import_react20.useState)({});
+  const sizeConfigs = {
+    sm: {
+      avatar: "h-8 w-8",
+      initials: "text-base",
+      container: "gap-2 px-2 py-1.5",
+      name: "text-xs",
+      role: "text-[8px]"
+    },
+    md: {
+      avatar: "h-10 w-10",
+      initials: "text-lg",
+      container: "gap-3 px-3 py-2",
+      name: "text-sm",
+      role: "text-[10px]"
+    },
+    lg: {
+      avatar: "h-12 w-12",
+      initials: "text-xl",
+      container: "gap-4 px-4 py-2.5",
+      name: "text-base",
+      role: "text-[12px]"
+    }
+  };
+  const currentSize = sizeConfigs[size];
+  (0, import_react20.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const toggleDropdown = () => setIsOpen(!isOpen);
+  const openDropdown = () => triggerMode === "hover" && setIsOpen(true);
+  const closeDropdown = () => triggerMode === "hover" && setIsOpen(false);
+  const handleItemClick = async (item, index) => {
+    if (item.disabled || loadingItems[index]) return;
+    if (item.onClick) {
+      const result = item.onClick();
+      if (result instanceof Promise) {
+        setLoadingItems((prev) => ({ ...prev, [index]: true }));
+        try {
+          await result;
+        } finally {
+          setLoadingItems((prev) => ({ ...prev, [index]: false }));
+          setIsOpen(false);
+        }
+      } else {
+        setIsOpen(false);
+      }
+    } else {
+      setIsOpen(false);
+    }
+  };
+  const fallbackInitial = name ? name.charAt(0).toUpperCase() : "?";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      ref: dropdownRef,
+      className: cn("relative inline-block text-left ", className),
+      onMouseEnter: openDropdown,
+      onMouseLeave: closeDropdown,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: triggerMode === "click" ? toggleDropdown : void 0,
+            className: cn(
+              "flex items-center rounded-xl transition-all duration-200 hover:bg-gray-100 dark:hover:bg-white/5 group focus:outline-none cursor-pointer",
+              currentSize.container
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "relative overflow-hidden rounded-full ring-2 ring-transparent group-hover:ring-blue-500/30 transition-all duration-300 shadow-sm border border-gray-100 dark:border-white/10 flex items-center justify-center bg-blue-50 dark:bg-blue-900/20",
+                    currentSize.avatar
+                  ),
+                  children: image ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    "img",
+                    {
+                      src: image,
+                      alt: name,
+                      className: "h-full w-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-blue-600 dark:text-blue-400 font-semibold",
+                        currentSize.initials
+                      ),
+                      children: fallbackInitial
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-start mr-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "font-semibold text-gray-700 dark:text-gray-200 leading-tight",
+                      currentSize.name
+                    ),
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "text-gray-500 dark:text-gray-400 uppercase tracking-wider font-medium",
+                      currentSize.role
+                    ),
+                    children: "Account"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                "svg",
+                {
+                  className: cn(
+                    "h-4 w-4 text-gray-400 transition-transform duration-300",
+                    isOpen && "rotate-180"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-0 top-full pt-2 w-64 origin-top-right z-50 group-data-[state=open]:animate-in group-data-[state=closed]:animate-out fade-in zoom-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "py-2", children: items.map((item, index) => {
+          const isLoading = loadingItems[index];
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "button",
+            {
+              onClick: () => handleItemClick(item, index),
+              disabled: item.disabled || isLoading,
+              className: cn(
+                "flex w-full items-center gap-3 px-4 py-3 text-sm transition-all duration-150",
+                "text-gray-700 dark:text-gray-200",
+                !item.disabled && !isLoading ? "hover:bg-blue-50/50 dark:hover:bg-blue-900/10 active:bg-blue-100 dark:active:bg-blue-900/20" : "opacity-40 cursor-not-allowed grayscale",
+                item.className
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LoadingSpin, { size: "sm", className: "text-blue-500" }) : item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-grow text-left font-medium", children: item.label })
+              ]
+            },
+            index
+          );
+        }) }) }) })
+      ]
+    }
+  );
+};
+
+// src/hooks/Fetches/useA4DataView.tsx
+var import_react21 = require("react");
+var import_react_to_print = require("react-to-print");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var useA4StatementView = ({
   url,
   v = 1,
@@ -4110,7 +4732,7 @@ var useA4StatementView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = (0, import_react19.useRef)(null);
+  const contentRef = (0, import_react21.useRef)(null);
   const reactToPrintFn = (0, import_react_to_print.useReactToPrint)({
     contentRef
   });
@@ -4120,7 +4742,7 @@ var useA4StatementView = ({
       await get({ url, v, params, delay });
     }
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4DataViewComponent = ({
@@ -4151,12 +4773,12 @@ var useA4StatementView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = (0, import_react19.useRef)(null);
-    const [pages, setPages] = (0, import_react19.useState)([]);
-    const [isMeasuring, setIsMeasuring] = (0, import_react19.useState)(true);
-    const [globalFilter, setGlobalFilter] = (0, import_react19.useState)("");
-    const [currentPageIndex, setCurrentPageIndex] = (0, import_react19.useState)(0);
-    const [pageSearch, setPageSearch] = (0, import_react19.useState)("");
+    const measureContainerRef = (0, import_react21.useRef)(null);
+    const [pages, setPages] = (0, import_react21.useState)([]);
+    const [isMeasuring, setIsMeasuring] = (0, import_react21.useState)(true);
+    const [globalFilter, setGlobalFilter] = (0, import_react21.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react21.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react21.useState)("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4172,20 +4794,20 @@ var useA4StatementView = ({
     const columnsWithFooters = columns.filter(
       (col) => col.renderFooter && !col.hide
     );
-    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "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__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsxs)(
             "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__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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
@@ -4201,7 +4823,7 @@ var useA4StatementView = ({
         renderFooter: c.renderFooter ? c.renderFooter.toString() : ""
       }))
     });
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4216,7 +4838,7 @@ var useA4StatementView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    (0, import_react19.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4272,28 +4894,28 @@ var useA4StatementView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("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__ */ (0, import_jsx_runtime28.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: store.email })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("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__ */ (0, import_jsx_runtime31.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       InfoGrid,
       {
         className: "mb-4",
@@ -4301,29 +4923,29 @@ var useA4StatementView = ({
         isLoading: isActuallyLoading
       }
     ) }) : null;
-    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "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__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.RefreshCw, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "div",
             {
               ref: measureContainerRef,
@@ -4331,9 +4953,9 @@ var useA4StatementView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     SimpleTable,
                     {
                       columns,
@@ -4351,52 +4973,52 @@ var useA4StatementView = ({
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
                   headers,
-                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       "button",
                       {
                         onClick: async () => await getData(),
                         disabled: isLoading,
                         className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                            import_lucide_react12.RefreshCw,
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            import_lucide_react13.RefreshCw,
                             {
                               size: 16,
                               className: isLoading ? "animate-spin" : ""
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                       "button",
                       {
                         onClick: () => reactToPrintFn(),
                         className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Printer, { size: 16 }),
+                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.Printer, { size: 16 }),
                           "Print"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -4407,11 +5029,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__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ChevronLeft, { size: 18 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                           Select,
                           {
                             value: currentPageIndex + 1,
@@ -4424,9 +5046,9 @@ var useA4StatementView = ({
                             variant: "ghost",
                             containerClassName: "inline-block",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                   "input",
                                   {
                                     type: "text",
@@ -4438,17 +5060,17 @@ var useA4StatementView = ({
                                     autoFocus: true
                                   }
                                 ) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                   (p) => String(p).includes(pageSearch)
-                                ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectItem, { value: p, children: p }, p)) })
+                                ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: p, children: p }, p)) })
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -4459,7 +5081,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__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ChevronRight, { size: 18 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.ChevronRight, { size: 18 })
                         }
                       )
                     ] })
@@ -4467,10 +5089,10 @@ var useA4StatementView = ({
                 ] }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                       "input",
                       {
                         type: "text",
@@ -4481,9 +5103,9 @@ var useA4StatementView = ({
                       }
                     )
                   ] }),
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7 print:h-0" }),
-                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     SimpleTable,
                     {
                       columns,
@@ -4519,10 +5141,10 @@ var useA4StatementView = ({
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useA4CategoryView.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_react_to_print2 = require("react-to-print");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var useA4CategoryView = ({
   url,
   v = 1,
@@ -4531,7 +5153,7 @@ var useA4CategoryView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = (0, import_react20.useRef)(null);
+  const contentRef = (0, import_react22.useRef)(null);
   const reactToPrintFn = (0, import_react_to_print2.useReactToPrint)({
     contentRef
   });
@@ -4540,7 +5162,7 @@ var useA4CategoryView = ({
       await get({ url, v, params, delay });
     }
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4CategoryView = ({
@@ -4559,12 +5181,12 @@ var useA4CategoryView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = (0, import_react20.useRef)(null);
-    const [pages, setPages] = (0, import_react20.useState)([]);
-    const [isMeasuring, setIsMeasuring] = (0, import_react20.useState)(true);
-    const [globalFilter, setGlobalFilter] = (0, import_react20.useState)("");
-    const [currentPageIndex, setCurrentPageIndex] = (0, import_react20.useState)(0);
-    const [pageSearch, setPageSearch] = (0, import_react20.useState)("");
+    const measureContainerRef = (0, import_react22.useRef)(null);
+    const [pages, setPages] = (0, import_react22.useState)([]);
+    const [isMeasuring, setIsMeasuring] = (0, import_react22.useState)(true);
+    const [globalFilter, setGlobalFilter] = (0, import_react22.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react22.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react22.useState)("");
     const groups = incomingGroups ? [...incomingGroups].sort(
       (a, b) => a.title.localeCompare(b.title)
     ) : data ? [{ title: gridTitle, items: data }] : [];
@@ -4595,7 +5217,7 @@ var useA4CategoryView = ({
       gridColumns,
       globalFilter
     });
-    (0, import_react20.useEffect)(() => {
+    (0, import_react22.useEffect)(() => {
       if (flattenedNodes.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4608,7 +5230,7 @@ var useA4CategoryView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    (0, import_react20.useEffect)(() => {
+    (0, import_react22.useEffect)(() => {
       if (!isMeasuring || flattenedNodes.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4647,28 +5269,28 @@ var useA4CategoryView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
-              store?.address && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: store.email })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
+              store?.address && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       InfoGrid,
       {
         className: "mb-4",
@@ -4678,40 +5300,40 @@ var useA4CategoryView = ({
     ) }) : null;
     const renderNode = (node) => {
       if (node.type === "header") {
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           className: "grid gap-4 px-2",
           style: { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` },
-          children: node.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: renderItem(item) }, j))
+          children: node.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: renderItem(item) }, j))
         }
       );
     };
-    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
-      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "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__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "div",
             {
               ref: measureContainerRef,
@@ -4719,56 +5341,56 @@ var useA4CategoryView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
               ]
             }
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                     "button",
                     {
                       onClick: async () => await getData(),
                       disabled: isLoading,
                       className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                          import_lucide_react13.RefreshCw,
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                          import_lucide_react14.RefreshCw,
                           {
                             size: 16,
                             className: isLoading ? "animate-spin" : ""
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                     "button",
                     {
                       onClick: () => reactToPrintFn(),
                       className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Printer, { size: 16 }),
+                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.Printer, { size: 16 }),
                         "Print"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -4779,11 +5401,11 @@ var useA4CategoryView = ({
                         },
                         disabled: currentPageIndex === 0,
                         className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronLeft, { size: 18 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.ChevronLeft, { size: 18 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                         Select,
                         {
                           value: currentPageIndex + 1,
@@ -4796,9 +5418,9 @@ var useA4CategoryView = ({
                           variant: "ghost",
                           containerClassName: "inline-block",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -4810,17 +5432,17 @@ var useA4CategoryView = ({
                                   autoFocus: true
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                 (p) => String(p).includes(pageSearch)
-                              ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectItem, { value: p, children: p }, p)) })
+                              ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectItem, { value: p, children: p }, p)) })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -4831,15 +5453,15 @@ var useA4CategoryView = ({
                         },
                         disabled: currentPageIndex === pages.length - 1,
                         className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronRight, { size: 18 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.ChevronRight, { size: 18 })
                       }
                     )
                   ] })
                 ] }) }) }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "input",
                     {
                       type: "text",
@@ -4849,8 +5471,8 @@ var useA4CategoryView = ({
                       className: "block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
                     }
                   ) }),
-                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-14 print:h-14" }),
-                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: renderNode(node) }, i)) })
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-14 print:h-14" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: renderNode(node) }, i)) })
                 ] })
               ] })
             },
@@ -4872,10 +5494,10 @@ var useA4CategoryView = ({
 var useA4CategoryView_default = useA4CategoryView;
 
 // src/hooks/Fetches/useTransaction.tsx
-var import_react21 = require("react");
-var import_lucide_react14 = require("lucide-react");
+var import_react23 = require("react");
+var import_lucide_react15 = require("lucide-react");
 var import_moment = __toESM(require("moment"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var useTransaction = ({
   url,
   v = 1,
@@ -4883,7 +5505,7 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = (0, import_react21.useState)(
+  const [date, setDate] = (0, import_react23.useState)(
     (0, import_moment.default)().format("DD/MM/YYYY")
   );
   const dateObj = {};
@@ -4900,7 +5522,7 @@ var useTransaction = ({
       delay
     });
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -4927,21 +5549,21 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-          url && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+          error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "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__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.RefreshCw, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.RefreshCw, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -4949,14 +5571,14 @@ var useTransaction = ({
         ] })
       }
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Title, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Title, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Fields_default.DateInput,
             {
               value: date,
@@ -4966,20 +5588,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Plus, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.Plus, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         DataTable,
         {
           columns,
@@ -5196,15 +5818,15 @@ var storage = {
 };
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 
 // ../../node_modules/@ant-design/icons/es/components/Context.js
-var import_react22 = require("react");
-var IconContext = /* @__PURE__ */ (0, import_react22.createContext)({});
+var import_react24 = require("react");
+var IconContext = /* @__PURE__ */ (0, import_react24.createContext)({});
 var Context_default = IconContext;
 
 // ../../node_modules/@ant-design/icons/es/components/AntdIcon.js
-var React14 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_clsx2 = require("clsx");
 
 // ../../node_modules/@ant-design/fast-color/es/presetColors.js
@@ -6051,7 +6673,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // ../../node_modules/@ant-design/icons/es/components/IconBase.js
-var React13 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 
 // ../../node_modules/@rc-component/util/es/Dom/canUseDom.js
 function canUseDom() {
@@ -6207,17 +6829,17 @@ var preWarningFns = [];
 var preMessage = (fn) => {
   preWarningFns.push(fn);
 };
-function warning(valid, message) {
+function warning(valid, message2) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "warning"), message);
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "warning"), message2);
     if (finalMessage) {
       console.error(`Warning: ${finalMessage}`);
     }
   }
 }
-function note(valid, message) {
+function note(valid, message2) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "note"), message);
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "note"), message2);
     if (finalMessage) {
       console.warn(`Note: ${finalMessage}`);
     }
@@ -6226,29 +6848,29 @@ function note(valid, message) {
 function resetWarned() {
   warned = {};
 }
-function call(method, valid, message) {
-  if (!valid && !warned[message]) {
-    method(false, message);
-    warned[message] = true;
+function call(method, valid, message2) {
+  if (!valid && !warned[message2]) {
+    method(false, message2);
+    warned[message2] = true;
   }
 }
-function warningOnce(valid, message) {
-  call(warning, valid, message);
+function warningOnce(valid, message2) {
+  call(warning, valid, message2);
 }
-function noteOnce(valid, message) {
-  call(note, valid, message);
+function noteOnce(valid, message2) {
+  call(note, valid, message2);
 }
 warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
 // ../../node_modules/@ant-design/icons/es/utils.js
-var import_react23 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 function camelCase(input) {
   return input.replace(/-(.)/g, (match, g) => g.toUpperCase());
 }
-function warning2(valid, message) {
-  warningOnce(valid, `[@ant-design/icons] ${message}`);
+function warning2(valid, message2) {
+  warningOnce(valid, `[@ant-design/icons] ${message2}`);
 }
 function isIconDefinition(target) {
   return typeof target === "object" && typeof target.name === "string" && typeof target.theme === "string" && (typeof target.icon === "object" || typeof target.icon === "function");
@@ -6270,12 +6892,12 @@ function normalizeAttrs(attrs = {}) {
 }
 function generate2(node, key, rootProps) {
   if (!rootProps) {
-    return /* @__PURE__ */ import_react23.default.createElement(node.tag, {
+    return /* @__PURE__ */ import_react25.default.createElement(node.tag, {
       key,
       ...normalizeAttrs(node.attrs)
     }, (node.children || []).map((child, index) => generate2(child, `${key}-${node.tag}-${index}`)));
   }
-  return /* @__PURE__ */ import_react23.default.createElement(node.tag, {
+  return /* @__PURE__ */ import_react25.default.createElement(node.tag, {
     key,
     ...normalizeAttrs(node.attrs),
     ...rootProps
@@ -6352,7 +6974,7 @@ var useInsertStyles = (eleRef) => {
     csp,
     prefixCls,
     layer
-  } = (0, import_react23.useContext)(Context_default);
+  } = (0, import_react25.useContext)(Context_default);
   let mergedStyleStr = iconStyles;
   if (prefixCls) {
     mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
@@ -6362,7 +6984,7 @@ var useInsertStyles = (eleRef) => {
 ${mergedStyleStr}
 }`;
   }
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);
     updateCSS(mergedStyleStr, "@ant-design-icons", {
@@ -6402,7 +7024,7 @@ var IconBase = (props) => {
     secondaryColor,
     ...restProps
   } = props;
-  const svgRef = React13.useRef(null);
+  const svgRef = React15.useRef(null);
   let colors = twoToneColorPalette;
   if (primaryColor) {
     colors = {
@@ -6472,7 +7094,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 setTwoToneColor(blue.primary);
-var Icon = /* @__PURE__ */ React14.forwardRef((props, ref) => {
+var Icon = /* @__PURE__ */ React16.forwardRef((props, ref) => {
   const {
     // affect outter <i>...</i>
     className,
@@ -6489,7 +7111,7 @@ var Icon = /* @__PURE__ */ React14.forwardRef((props, ref) => {
   const {
     prefixCls = "anticon",
     rootClassName
-  } = React14.useContext(Context_default);
+  } = React16.useContext(Context_default);
   const classString = (0, import_clsx2.clsx)(rootClassName, prefixCls, {
     [`${prefixCls}-${icon.name}`]: !!icon.name,
     [`${prefixCls}-spin`]: !!spin || icon.name === "loading"
@@ -6503,7 +7125,7 @@ var Icon = /* @__PURE__ */ React14.forwardRef((props, ref) => {
     transform: `rotate(${rotate}deg)`
   } : void 0;
   const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
-  return /* @__PURE__ */ React14.createElement("span", _extends({
+  return /* @__PURE__ */ React16.createElement("span", _extends({
     role: "img",
     "aria-label": icon.name
   }, restProps, {
@@ -6511,7 +7133,7 @@ var Icon = /* @__PURE__ */ React14.forwardRef((props, ref) => {
     tabIndex: iconTabIndex,
     onClick,
     className: classString
-  }), /* @__PURE__ */ React14.createElement(IconBase_default, {
+  }), /* @__PURE__ */ React16.createElement(IconBase_default, {
     icon,
     primaryColor,
     secondaryColor,
@@ -6526,7 +7148,7 @@ if (process.env.NODE_ENV !== "production") {
 var AntdIcon_default = Icon;
 
 // ../../node_modules/@ant-design/icons/es/icons/PlusOutlined.js
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 
 // ../../node_modules/@ant-design/icons-svg/es/asn/PlusOutlined.js
 var PlusOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" } }, { "tag": "path", "attrs": { "d": "M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z" } }] }, "name": "plus", "theme": "outlined" };
@@ -6547,11 +7169,11 @@ function _extends2() {
   };
   return _extends2.apply(this, arguments);
 }
-var PlusOutlined2 = (props, ref) => /* @__PURE__ */ React15.createElement(AntdIcon_default, _extends2({}, props, {
+var PlusOutlined2 = (props, ref) => /* @__PURE__ */ React17.createElement(AntdIcon_default, _extends2({}, props, {
   ref,
   icon: PlusOutlined_default
 }));
-var RefIcon = /* @__PURE__ */ React15.forwardRef(PlusOutlined2);
+var RefIcon = /* @__PURE__ */ React17.forwardRef(PlusOutlined2);
 if (process.env.NODE_ENV !== "production") {
   RefIcon.displayName = "PlusOutlined";
 }
@@ -6559,7 +7181,7 @@ var PlusOutlined_default2 = RefIcon;
 
 // src/hooks/uploads/useAntdImageUpload.tsx
 var import_antd2 = require("antd");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var getBase64 = (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
@@ -6567,9 +7189,9 @@ var getBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 var useAntdImageUpload = ({ length = 1 }) => {
-  const [fileList, setFileList] = (0, import_react24.useState)([]);
-  const [previewOpen, setPreviewOpen] = (0, import_react24.useState)(false);
-  const [previewImage, setPreviewImage] = (0, import_react24.useState)("");
+  const [fileList, setFileList] = (0, import_react26.useState)([]);
+  const [previewOpen, setPreviewOpen] = (0, import_react26.useState)(false);
+  const [previewImage, setPreviewImage] = (0, import_react26.useState)("");
   const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
@@ -6586,8 +7208,8 @@ var useAntdImageUpload = ({ length = 1 }) => {
       }))
     );
   };
-  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_antd2.Upload,
       {
         listType: "picture-card",
@@ -6595,13 +7217,13 @@ var useAntdImageUpload = ({ length = 1 }) => {
         onPreview: handlePreview,
         onChange: handleChange,
         beforeUpload: () => false,
-        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PlusOutlined_default2, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
+        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PlusOutlined_default2, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
         ] })
       }
     ),
-    previewImage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    previewImage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_antd2.Image,
       {
         style: { display: "none" },
@@ -6619,10 +7241,10 @@ var useAntdImageUpload = ({ length = 1 }) => {
 var useAntdImageUpload_default = useAntdImageUpload;
 
 // src/components/Views/CategoryView.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var CategoryCard = ({ item }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "img",
       {
         src: item.image,
@@ -6630,7 +7252,7 @@ var CategoryCard = ({ item }) => {
         className: "w-full h-full object-cover"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
   ] });
 };
 var CategoryView = ({
@@ -6638,20 +7260,20 @@ var CategoryView = ({
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "max-w-7xl mx-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CategoryCard, { item }, item.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CategoryCard, { item }, item.id)) })
   ] }) });
 };
 var CategoryView_default = CategoryView;
 
 // src/components/Views/Transaction.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Transaction = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: "Transaction" });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: "Transaction" });
 };
 var Transaction_default = Transaction;
 
@@ -6662,8 +7284,152 @@ var Views = {
   CategoryCard
 };
 var Views_default = Views;
+
+// src/components/Guard.tsx
+var import_react27 = require("react");
+var import_react_router_dom3 = require("react-router-dom");
+var import_antd3 = require("antd");
+
+// src/store/useAuthStore.ts
+var import_zustand = require("zustand");
+var useAuthStore = (0, import_zustand.create)((set, get) => ({
+  auth: null,
+  account: null,
+  isLoggedIn: false,
+  isFetched: false,
+  setAuth: (auth, account) => set({
+    auth,
+    account,
+    isLoggedIn: true
+  }),
+  setIsLoggedIn: (isLoggedIn) => set({ isLoggedIn }),
+  setIsFetched: (isFetched) => set({ isFetched }),
+  logout: () => set({
+    auth: null,
+    account: null,
+    isLoggedIn: false,
+    isFetched: true
+  }),
+  updateAuth: (data) => set((state) => ({
+    auth: state.auth ? { ...state.auth, ...data } : state.auth
+  })),
+  updateAccount: (data) => set((state) => ({
+    account: state.account ? { ...state.account, ...data } : state.account
+  })),
+  hasPermission: (key) => !!get().auth?.permissions?.[key]
+}));
+
+// src/hooks/useAuth.ts
+var useAuth = () => {
+  const auth = useAuthStore((state) => state.auth);
+  const account = useAuthStore((state) => state.account);
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const isFetched = useAuthStore((state) => state.isFetched);
+  const setIsLoggedIn = useAuthStore((state) => state.setIsLoggedIn);
+  const setIsFetched = useAuthStore((state) => state.setIsFetched);
+  const logout = useAuthStore((state) => state.logout);
+  const setAuth = useAuthStore((state) => state.setAuth);
+  const updateAuth = useAuthStore((state) => state.updateAuth);
+  const updateAccount = useAuthStore((state) => state.updateAccount);
+  const hasPermission = useAuthStore((state) => state.hasPermission);
+  return {
+    // ----- State -----
+    auth,
+    user: auth,
+    // Alias for 'auth'
+    account,
+    isLoggedIn,
+    isFetched,
+    // ----- Shorthand Accessors -----
+    role: auth?.role,
+    userId: auth?._id,
+    accountId: account?._id,
+    userName: account?.name,
+    userEmail: auth?.email || account?.email,
+    permissions: auth?.permissions || {},
+    // ----- Derived Flags -----
+    isAdmin: auth?.role === "admin",
+    isActive: auth?.isActive ?? false,
+    isVerified: !!(auth?.isEmailVerified || auth?.isPhoneVerified),
+    isEmailVerified: auth?.isEmailVerified ?? false,
+    isPhoneVerified: auth?.isPhoneVerified ?? false,
+    // ----- Actions -----
+    logout,
+    setIsLoggedIn,
+    setIsFetched,
+    setAuth,
+    login: (data) => {
+      if (data?.auth && data?.account) {
+        setAuth(data.auth, data.account);
+      } else if (data?.user && data?.account) {
+        setAuth(data.user, data.account);
+      } else {
+        setAuth(data, data?.account || data);
+      }
+    },
+    updateAuth,
+    updateUser: updateAuth,
+    // Alias for 'updateAuth'
+    updateAccount,
+    // ----- Helper Functions -----
+    hasPermission,
+    can: (key) => hasPermission(key)
+    // Shorthand for 'hasPermission'
+  };
+};
+var useAuth_default = useAuth;
+
+// src/components/Guard.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Guard = () => {
+  const { get } = useApis_default();
+  const location = (0, import_react_router_dom3.useLocation)();
+  const { login, setIsLoggedIn, setIsFetched, isFetched } = useAuth();
+  (0, import_react27.useLayoutEffect)(() => {
+    const fetchProfile = async () => {
+      try {
+        const res = await get({
+          url: "/users/me",
+          v: 1
+        });
+        console.log("res", res);
+        login(res?.data);
+        setIsLoggedIn(true);
+        setIsFetched(true);
+      } catch (error) {
+        console.log(error);
+        setIsFetched(true);
+        setIsLoggedIn(false);
+      }
+    };
+    fetchProfile();
+  }, [location.pathname]);
+  if (!isFetched) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoadingSpin, { size: "lg" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {});
+};
+var ProtectedRoute = () => {
+  const { isLoggedIn } = useAuth();
+  const location = (0, import_react_router_dom3.useLocation)();
+  return isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: "/login", state: { from: location }, replace: true });
+};
+var UnProtectedRoute = () => {
+  const { isLoggedIn, user } = useAuth();
+  return !isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: user?.homePath || "/", replace: true });
+};
+var AdminProtectedRoute = () => {
+  const { role } = useAuth();
+  (0, import_react27.useEffect)(() => {
+    if (role && !["admin"].includes(role)) {
+      import_antd3.message.error("Only admin can access this page");
+    }
+  }, [role]);
+  return role && ["admin"].includes(role) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: "/", replace: true });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AdminProtectedRoute,
   Badge,
   Branding,
   Button,
@@ -6680,6 +7446,7 @@ var Views_default = Views;
   DataTable,
   DateInput,
   Fields,
+  Guard,
   InfoGrid,
   Input,
   LoadingBox,
@@ -6690,6 +7457,8 @@ var Views_default = Views;
   PageHeader,
   PhoneInput,
   PostTable,
+  ProfileDropdown,
+  ProtectedRoute,
   SearchApi,
   SearchApiContent,
   SearchApiInput,
@@ -6703,6 +7472,8 @@ var Views_default = Views;
   Textarea,
   ThemeProvider,
   ThemeToggle,
+  ThemedLogin,
+  UnProtectedRoute,
   Views,
   WarqadProvider,
   generatePdf,
@@ -6711,6 +7482,9 @@ var Views_default = Views;
   useA4StatementView,
   useAntdImageUpload,
   useApi,
+  useAuth,
+  useAuthStore,
+  useLogin,
   useModal,
   useSearchApiContext,
   useSelectContext,