warqadui 0.0.50 → 0.0.52

package/dist/index.mjs

@@ -280,7 +280,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__ */ jsx4(ThemeContext.Provider, { value: { isDarkMode, toggleTheme, setTheme }, children });
 };
@@ -1097,19 +1100,20 @@ var Input = 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);
     useEffect5(() => {
-      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__ */ jsxs11(
       "div",
       {
@@ -1169,7 +1173,7 @@ var Input = forwardRef(
               }
             )
           ] }),
-          message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+          message2 && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
         ]
       }
     );
@@ -1286,7 +1290,7 @@ var PhoneInput = forwardRef2(
     const [isFocused, setIsFocused] = useState8(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    let message = error;
+    let message2 = error;
     if (form && name) {
       const {
         formState: { errors }
@@ -1296,7 +1300,7 @@ var PhoneInput = forwardRef2(
       for (const part of nameParts) {
         currentError = currentError?.[part];
       }
-      message = currentError?.message || message;
+      message2 = currentError?.message || message2;
     }
     const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs12("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
       /* @__PURE__ */ jsxs12(
@@ -1341,7 +1345,7 @@ var PhoneInput = forwardRef2(
           }
         )
       ] }),
-      message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
     if (form && name) {
       return /* @__PURE__ */ jsx18(
@@ -1497,7 +1501,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 }
@@ -1507,7 +1511,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 = {
@@ -1568,7 +1572,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+        message2 && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
       ]
     }
   ) });
@@ -1804,13 +1808,13 @@ var Textarea = forwardRef4(
     const [isFocused, setIsFocused] = useState10(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__ */ jsxs14("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
       /* @__PURE__ */ jsxs14(
@@ -1846,7 +1850,7 @@ var Textarea = forwardRef4(
           ...inputProps
         }
       ) }),
-      message && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ jsx20("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
     useEffect7(() => {
       if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
@@ -2339,7 +2343,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 }
@@ -2349,7 +2353,7 @@ var SearchApiRoot = ({
     for (const part of nameParts) {
       currentError = currentError?.[part];
     }
-    message = currentError?.message || message;
+    message2 = currentError?.message || message2;
   }
   const valueCtx = {
     isOpen,
@@ -2383,7 +2387,7 @@ var SearchApiRoot = ({
     form,
     name,
     obj,
-    error: message,
+    error: message2,
     onSelect,
     onClear
   };
@@ -2740,19 +2744,19 @@ var DateInput = forwardRef6(
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     const [isFocused, setIsFocused] = useState13(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) => {
@@ -2780,8 +2784,8 @@ var DateInput = forwardRef6(
           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__ */ jsx22(
@@ -2802,7 +2806,7 @@ var DateInput = forwardRef6(
         {
           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,
@@ -2823,7 +2827,7 @@ var DateInput = forwardRef6(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message && /* @__PURE__ */ jsx22("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      message2 && /* @__PURE__ */ jsx22("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
     ] });
   }
 );
@@ -4069,8 +4073,626 @@ var Branding = ({
   );
 };
 
+// src/hooks/useLogin.tsx
+import React12 from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+
+// src/components/Login/ThemedLogins.tsx
+import {
+  Mail,
+  Lock,
+  Terminal,
+  ArrowRight,
+  Plane,
+  HeartPulse,
+  MonitorCheck,
+  ArrowLeft
+} from "lucide-react";
+import { useNavigate as useNavigate2 } from "react-router-dom";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var TechLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = useNavigate2();
+  return /* @__PURE__ */ jsxs20("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-[#0A0B10]", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "hidden lg:flex lg:w-3/5 relative overflow-hidden bg-slate-900 border-r border-slate-800", children: [
+      /* @__PURE__ */ jsx28(
+        "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__ */ jsx28("div", { className: "absolute inset-0 bg-linear-to-tr from-[#0A0B10] via-transparent to-purple-500/10 z-10" }),
+      /* @__PURE__ */ jsxs20("div", { className: "relative z-20 p-12 flex flex-col justify-between w-full h-full", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx28("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__ */ jsx28(Terminal, { className: "text-white w-6 h-6" }) }),
+          /* @__PURE__ */ jsx28("span", { className: "text-2xl font-bold text-white tracking-widest uppercase", children: brandName || "DevNode" })
+        ] }),
+        /* @__PURE__ */ jsxs20("div", { className: "max-w-md", children: [
+          /* @__PURE__ */ jsxs20("h1", { className: "text-5xl font-extrabold text-white mb-6 leading-tight", children: [
+            "Build the ",
+            /* @__PURE__ */ jsx28("span", { className: "text-indigo-400", children: "Future" }),
+            " of Web."
+          ] }),
+          /* @__PURE__ */ jsx28("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__ */ jsxs20("div", { className: "text-slate-500 text-sm", children: [
+          "\xA9 2026 ",
+          brandName || "DevNode",
+          "."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("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__ */ jsxs20("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ jsxs20(
+          "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__ */ jsx28(ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ jsx28("span", { className: "text-sm", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx28(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "mb-12", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-3xl font-bold text-slate-900 dark:text-white mb-3 tracking-tight", children: title || "Welcome Back" }),
+          /* @__PURE__ */ jsx28("p", { className: "text-slate-500 dark:text-slate-400", children: subtitle || "Please enter your credentials to access your dashboard." })
+        ] }),
+        /* @__PURE__ */ jsxs20(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ jsx28(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Email Address",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "maoo@example.com",
+                  icon: /* @__PURE__ */ jsx28(
+                    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__ */ jsx28(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "password",
+                  label: "Password",
+                  type: "password",
+                  disabled: isLoading,
+                  placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+                  icon: /* @__PURE__ */ jsx28(
+                    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__ */ jsx28("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__ */ jsxs20(
+                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__ */ jsx28(ArrowRight, { size: 18 })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var TravelLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = useNavigate2();
+  return /* @__PURE__ */ jsxs20("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "hidden lg:flex lg:w-1/2 relative overflow-hidden bg-slate-100 border-r border-slate-100", children: [
+      /* @__PURE__ */ jsx28(
+        "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__ */ jsx28("div", { className: "absolute inset-0 bg-linear-to-br from-orange-500/20 via-transparent to-black/30 z-10" }),
+      /* @__PURE__ */ jsxs20("div", { className: "relative z-20 p-16 flex flex-col justify-between w-full h-full text-white", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx28("div", { className: "h-10 w-10 bg-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ jsx28(Plane, { className: "text-white w-6 h-6 rotate-45" }) }),
+          /* @__PURE__ */ jsx28("span", { className: "text-2xl font-bold tracking-tight", children: brandName || "Wanderlust" })
+        ] }),
+        /* @__PURE__ */ jsx28("div", { className: "max-w-md", children: /* @__PURE__ */ jsxs20("h1", { className: "text-6xl font-black mb-8 leading-[1.1]", children: [
+          "Your Next ",
+          /* @__PURE__ */ jsx28("span", { className: "text-orange-400", children: "Adventure" }),
+          " ",
+          "Starts Now."
+        ] }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "text-white/70 text-sm", children: [
+          "Discover the world with ",
+          brandName || "Wanderlust",
+          "."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("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__ */ jsxs20("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ jsxs20(
+          "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__ */ jsx28(ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ jsx28("span", { className: "text-sm", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx28(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "mb-12 text-center lg:text-left", children: [
+          /* @__PURE__ */ jsx28("h2", { className: "text-4xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight", children: title || "Login to Explore" }),
+          /* @__PURE__ */ jsx28("p", { className: "text-slate-500 dark:text-slate-400 text-lg", children: subtitle || "Enter your details to access your travel dashboard." })
+        ] }),
+        /* @__PURE__ */ jsxs20(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-6",
+            children: [
+              /* @__PURE__ */ jsx28(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Email Address",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "traveler@world.com",
+                  icon: /* @__PURE__ */ jsx28(
+                    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__ */ jsx28(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "password",
+                  label: "Password",
+                  type: "password",
+                  disabled: isLoading,
+                  placeholder: "Secret journey phrase",
+                  icon: /* @__PURE__ */ jsx28(
+                    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__ */ jsx28("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__ */ jsxs20(
+                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__ */ jsx28(Plane, { size: 20, className: "rotate-45" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var HealthcareLogin = ({
+  form,
+  onSubmit,
+  image,
+  title,
+  subtitle,
+  brandName,
+  backUrl,
+  isLoading
+}) => {
+  const navigate = useNavigate2();
+  return /* @__PURE__ */ jsxs20("div", { className: "flex h-screen w-full overflow-hidden bg-[#F0F7FF] dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ jsxs20("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__ */ jsxs20("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ jsxs20(
+          "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__ */ jsx28(ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ jsx28("span", { className: "text-sm font-semibold", children: "Back" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx28(ThemeToggle, {})
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "max-w-[340px] w-full mx-auto", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "mb-14", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-3 mb-8", children: [
+            /* @__PURE__ */ jsx28("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__ */ jsx28(HeartPulse, { className: "text-white w-7 h-7" }) }),
+            /* @__PURE__ */ jsx28("span", { className: "text-2xl font-bold text-slate-800 dark:text-white tracking-tight", children: brandName || "CarePoint" })
+          ] }),
+          /* @__PURE__ */ jsx28("h2", { className: "text-3xl font-bold text-slate-800 dark:text-white mb-3 tracking-tight", children: title || "Clinical Login" }),
+          /* @__PURE__ */ jsx28("p", { className: "text-slate-500 dark:text-slate-400 font-medium leading-relaxed", children: subtitle || "Secure access for staff and healthcare professionals." })
+        ] }),
+        /* @__PURE__ */ jsxs20(
+          "form",
+          {
+            onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
+            className: "space-y-7",
+            children: [
+              /* @__PURE__ */ jsx28(
+                Fields_default.Input,
+                {
+                  form,
+                  name: "email",
+                  label: "Employee Email",
+                  type: "email",
+                  disabled: isLoading,
+                  placeholder: "dr.name@carepoint.org",
+                  icon: /* @__PURE__ */ jsx28(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__ */ jsx28(
+                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__ */ jsx28(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__ */ jsx28("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__ */ jsxs20(
+                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__ */ jsx28(MonitorCheck, { size: 18 })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "hidden lg:flex flex-1 relative overflow-hidden bg-slate-900", children: [
+      /* @__PURE__ */ jsx28(
+        "div",
+        {
+          className: "absolute inset-0 z-0 bg-cover bg-center brightness-110",
+          style: { backgroundImage: `url('${image || "/medicine_bg.png"}')` }
+        }
+      ),
+      /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 bg-linear-to-l from-transparent via-blue-900/10 to-blue-900/40 z-10" }),
+      /* @__PURE__ */ jsx28("div", { className: "relative z-20 p-20 flex flex-col items-center justify-center w-full h-full text-center", children: /* @__PURE__ */ jsx28("div", { className: "max-w-2xl bg-white/20 backdrop-blur-xl border border-white/30 p-12 rounded-[40px] shadow-2xl", children: /* @__PURE__ */ jsxs20("h1", { className: "text-5xl font-black text-white mb-6 leading-tight drop-shadow-sm", children: [
+        "Next-Gen ",
+        /* @__PURE__ */ jsx28("br", {}),
+        /* @__PURE__ */ jsx28("span", { className: "text-blue-100", children: "Patient Management" })
+      ] }) }) })
+    ] })
+  ] });
+};
+var ThemedLogin = (props) => {
+  switch (props.theme) {
+    case "tech":
+      return /* @__PURE__ */ jsx28(TechLogin, { ...props });
+    case "travel":
+      return /* @__PURE__ */ jsx28(TravelLogin, { ...props });
+    case "healthcare":
+      return /* @__PURE__ */ jsx28(HealthcareLogin, { ...props });
+    default:
+      return /* @__PURE__ */ jsx28(TechLogin, { ...props });
+  }
+};
+
+// src/hooks/useLogin.tsx
+import { jsx as jsx29 } from "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 = useForm({
+    resolver: zodResolver(props.schema || defaultLoginSchema),
+    defaultValues: props.defaultValues || {
+      email: "",
+      password: ""
+    }
+  });
+  const propsRef = React12.useRef(props);
+  propsRef.current = props;
+  const Login = React12.useMemo(() => {
+    const StableLogin = () => {
+      const currentProps = propsRef.current;
+      return /* @__PURE__ */ jsx29(
+        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
+import { useState as useState16, useRef as useRef6, useEffect as useEffect11 } from "react";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var ProfileDropdown = ({
+  name,
+  image,
+  items,
+  className,
+  triggerMode = "click",
+  size = "md"
+}) => {
+  const [isOpen, setIsOpen] = useState16(false);
+  const dropdownRef = useRef6(null);
+  const [loadingItems, setLoadingItems] = useState16({});
+  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];
+  useEffect11(() => {
+    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__ */ jsxs21(
+    "div",
+    {
+      ref: dropdownRef,
+      className: cn("relative inline-block text-left ", className),
+      onMouseEnter: openDropdown,
+      onMouseLeave: closeDropdown,
+      children: [
+        /* @__PURE__ */ jsxs21(
+          "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__ */ jsx30(
+                "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__ */ jsx30(
+                    "img",
+                    {
+                      src: image,
+                      alt: name,
+                      className: "h-full w-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx30(
+                    "span",
+                    {
+                      className: cn(
+                        "text-blue-600 dark:text-blue-400 font-semibold",
+                        currentSize.initials
+                      ),
+                      children: fallbackInitial
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start mr-1", children: [
+                /* @__PURE__ */ jsx30(
+                  "span",
+                  {
+                    className: cn(
+                      "font-semibold text-gray-700 dark:text-gray-200 leading-tight",
+                      currentSize.name
+                    ),
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ jsx30(
+                  "span",
+                  {
+                    className: cn(
+                      "text-gray-500 dark:text-gray-400 uppercase tracking-wider font-medium",
+                      currentSize.role
+                    ),
+                    children: "Account"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx30(
+                "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__ */ jsx30(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx30("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__ */ jsx30("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__ */ jsx30("div", { className: "py-2", children: items.map((item, index) => {
+          const isLoading = loadingItems[index];
+          return /* @__PURE__ */ jsxs21(
+            "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__ */ jsx30("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ jsx30(LoadingSpin, { size: "sm", className: "text-blue-500" }) : item.icon }),
+                /* @__PURE__ */ jsx30("span", { className: "flex-grow text-left font-medium", children: item.label })
+              ]
+            },
+            index
+          );
+        }) }) }) })
+      ]
+    }
+  );
+};
+
 // src/hooks/Fetches/useA4DataView.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState16 } from "react";
+import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
 import { useReactToPrint } from "react-to-print";
 import {
   RefreshCw,
@@ -4080,7 +4702,7 @@ import {
   ChevronLeft,
   ChevronRight as ChevronRight2
 } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
 var useA4StatementView = ({
   url,
   v = 1,
@@ -4089,7 +4711,7 @@ var useA4StatementView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = useRef6(null);
+  const contentRef = useRef7(null);
   const reactToPrintFn = useReactToPrint({
     contentRef
   });
@@ -4099,7 +4721,7 @@ var useA4StatementView = ({
       await get({ url, v, params, delay });
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4DataViewComponent = ({
@@ -4130,12 +4752,12 @@ var useA4StatementView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = useRef6(null);
-    const [pages, setPages] = useState16([]);
-    const [isMeasuring, setIsMeasuring] = useState16(true);
-    const [globalFilter, setGlobalFilter] = useState16("");
-    const [currentPageIndex, setCurrentPageIndex] = useState16(0);
-    const [pageSearch, setPageSearch] = useState16("");
+    const measureContainerRef = useRef7(null);
+    const [pages, setPages] = useState17([]);
+    const [isMeasuring, setIsMeasuring] = useState17(true);
+    const [globalFilter, setGlobalFilter] = useState17("");
+    const [currentPageIndex, setCurrentPageIndex] = useState17(0);
+    const [pageSearch, setPageSearch] = useState17("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4151,20 +4773,20 @@ var useA4StatementView = ({
     const columnsWithFooters = columns.filter(
       (col) => col.renderFooter && !col.hide
     );
-    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ jsxs20(
+    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ jsxs22(
       "div",
       {
         id: "a4-final-total",
         className: "mt-6 flex flex-wrap justify-end items-center pt-4 border-t border-black dark:border-zinc-700 print:border-black gap-4",
         children: [
-          /* @__PURE__ */ jsx28("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
-          columnsWithFooters.map((col, idx) => /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsx31("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__ */ jsxs22(
             "div",
             {
               className: "flex items-center gap-3 px-4 py-2 rounded-md border border-black dark:border-zinc-700 print:border-black",
               children: [
-                /* @__PURE__ */ jsx28("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
-                /* @__PURE__ */ jsx28("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
+                /* @__PURE__ */ jsx31("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__ */ jsx31("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
@@ -4180,7 +4802,7 @@ var useA4StatementView = ({
         renderFooter: c.renderFooter ? c.renderFooter.toString() : ""
       }))
     });
-    useEffect11(() => {
+    useEffect12(() => {
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4195,7 +4817,7 @@ var useA4StatementView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    useEffect11(() => {
+    useEffect12(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4251,28 +4873,28 @@ var useA4StatementView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ jsxs20(
+    const HeaderEl = /* @__PURE__ */ jsxs22(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs20("section", { children: [
-            /* @__PURE__ */ jsx28("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
-            /* @__PURE__ */ jsx28("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
+          /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx31("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs22("section", { children: [
+            /* @__PURE__ */ jsx31("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
+            /* @__PURE__ */ jsx31("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ jsxs20("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx28("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
-            /* @__PURE__ */ jsxs20("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
-              store?.address && /* @__PURE__ */ jsx28("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ jsx28("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ jsx28("span", { children: store.email })
+          /* @__PURE__ */ jsxs22("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx31("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
+            /* @__PURE__ */ jsxs22("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__ */ jsx31("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ jsx31("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ jsx31("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx28("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx28(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx31("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx31(
       InfoGrid,
       {
         className: "mb-4",
@@ -4280,29 +4902,29 @@ var useA4StatementView = ({
         isLoading: isActuallyLoading
       }
     ) }) : null;
-    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ jsx28("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ jsx28("div", { className: "mb-4", children: /* @__PURE__ */ jsx28(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx28("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx28(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ jsx28("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ jsx28("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-      url && !isActuallyLoading && /* @__PURE__ */ jsxs20(
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ jsx31("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ jsx31("div", { className: "mb-4", children: /* @__PURE__ */ jsx31(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx31("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__ */ jsx31(AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx31("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx31(FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsxs22(
         "button",
         {
           onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
-            /* @__PURE__ */ jsx28(RefreshCw, { size: 14 }),
+            /* @__PURE__ */ jsx31(RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx28("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ jsx31("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx31(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ jsxs20(
+          children: /* @__PURE__ */ jsxs22(
             "div",
             {
               ref: measureContainerRef,
@@ -4310,9 +4932,9 @@ var useA4StatementView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
-                  /* @__PURE__ */ jsx28("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsxs22("div", { className: "grow w-full px-8 pb-8", children: [
+                  /* @__PURE__ */ jsx31("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__ */ jsx31("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__ */ jsx31(
                     SimpleTable,
                     {
                       columns,
@@ -4330,52 +4952,52 @@ var useA4StatementView = ({
           )
         }
       ) }),
-      /* @__PURE__ */ jsx28("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx31("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ jsx31(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ jsx28(
+          children: /* @__PURE__ */ jsx31(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ jsxs20("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+              children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ jsxs22("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
                   headers,
-                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs20(
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs22(
                       "button",
                       {
                         onClick: async () => await getData(),
                         disabled: isLoading,
                         className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                         children: [
-                          /* @__PURE__ */ jsx28(
+                          /* @__PURE__ */ jsx31(
                             RefreshCw,
                             {
                               size: 16,
                               className: isLoading ? "animate-spin" : ""
                             }
                           ),
-                          /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold", children: "Reload" })
+                          /* @__PURE__ */ jsx31("span", { className: "text-xs font-semibold", children: "Reload" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs20(
+                    /* @__PURE__ */ jsxs22(
                       "button",
                       {
                         onClick: () => reactToPrintFn(),
                         className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                         children: [
-                          /* @__PURE__ */ jsx28(Printer, { size: 16 }),
+                          /* @__PURE__ */ jsx31(Printer, { size: 16 }),
                           "Print"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                      /* @__PURE__ */ jsx28(
+                    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                      /* @__PURE__ */ jsx31(
                         "button",
                         {
                           onClick: (e) => {
@@ -4386,11 +5008,11 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === 0,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ jsx28(ChevronLeft, { size: 18 })
+                          children: /* @__PURE__ */ jsx31(ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                        /* @__PURE__ */ jsxs20(
+                      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ jsxs22(
                           Select,
                           {
                             value: currentPageIndex + 1,
@@ -4403,9 +5025,9 @@ var useA4StatementView = ({
                             variant: "ghost",
                             containerClassName: "inline-block",
                             children: [
-                              /* @__PURE__ */ jsx28(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ jsx28("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                              /* @__PURE__ */ jsxs20(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                                /* @__PURE__ */ jsx28("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ jsx28(
+                              /* @__PURE__ */ jsx31(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__ */ jsx31("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ jsxs22(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ jsx31("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__ */ jsx31(
                                   "input",
                                   {
                                     type: "text",
@@ -4417,17 +5039,17 @@ var useA4StatementView = ({
                                     autoFocus: true
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx28("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                /* @__PURE__ */ jsx31("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                   (p) => String(p).includes(pageSearch)
-                                ).map((p) => /* @__PURE__ */ jsx28(SelectItem, { value: p, children: p }, p)) })
+                                ).map((p) => /* @__PURE__ */ jsx31(SelectItem, { value: p, children: p }, p)) })
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx28("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                        /* @__PURE__ */ jsx28("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                        /* @__PURE__ */ jsx31("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ jsx31("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                       ] }),
-                      /* @__PURE__ */ jsx28(
+                      /* @__PURE__ */ jsx31(
                         "button",
                         {
                           onClick: (e) => {
@@ -4438,7 +5060,7 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === pages.length - 1,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ jsx28(ChevronRight2, { size: 18 })
+                          children: /* @__PURE__ */ jsx31(ChevronRight2, { size: 18 })
                         }
                       )
                     ] })
@@ -4446,10 +5068,10 @@ var useA4StatementView = ({
                 ] }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ jsxs20("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ jsxs20("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                    /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
-                    /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsxs22("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ jsxs22("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__ */ jsx31("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__ */ jsx31(
                       "input",
                       {
                         type: "text",
@@ -4460,9 +5082,9 @@ var useA4StatementView = ({
                       }
                     )
                   ] }),
-                  pageIndex === 0 && /* @__PURE__ */ jsx28("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ jsx28("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  pageIndex > 0 && /* @__PURE__ */ jsx28("div", { className: "h-7 print:h-0" }),
-                  statusOverlay ? /* @__PURE__ */ jsx28("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx28(
+                  pageIndex === 0 && /* @__PURE__ */ jsx31("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__ */ jsx31("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ jsx31("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ jsx31("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx31(
                     SimpleTable,
                     {
                       columns,
@@ -4498,7 +5120,7 @@ var useA4StatementView = ({
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useA4CategoryView.tsx
-import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
+import { useEffect as useEffect13, useRef as useRef8, useState as useState18 } from "react";
 import { useReactToPrint as useReactToPrint2 } from "react-to-print";
 import {
   RefreshCw as RefreshCw2,
@@ -4508,7 +5130,7 @@ import {
   ChevronLeft as ChevronLeft2,
   ChevronRight as ChevronRight3
 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
 var useA4CategoryView = ({
   url,
   v = 1,
@@ -4517,7 +5139,7 @@ var useA4CategoryView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = useRef7(null);
+  const contentRef = useRef8(null);
   const reactToPrintFn = useReactToPrint2({
     contentRef
   });
@@ -4526,7 +5148,7 @@ var useA4CategoryView = ({
       await get({ url, v, params, delay });
     }
   };
-  useEffect12(() => {
+  useEffect13(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4CategoryView = ({
@@ -4545,12 +5167,12 @@ var useA4CategoryView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = useRef7(null);
-    const [pages, setPages] = useState17([]);
-    const [isMeasuring, setIsMeasuring] = useState17(true);
-    const [globalFilter, setGlobalFilter] = useState17("");
-    const [currentPageIndex, setCurrentPageIndex] = useState17(0);
-    const [pageSearch, setPageSearch] = useState17("");
+    const measureContainerRef = useRef8(null);
+    const [pages, setPages] = useState18([]);
+    const [isMeasuring, setIsMeasuring] = useState18(true);
+    const [globalFilter, setGlobalFilter] = useState18("");
+    const [currentPageIndex, setCurrentPageIndex] = useState18(0);
+    const [pageSearch, setPageSearch] = useState18("");
     const groups = incomingGroups ? [...incomingGroups].sort(
       (a, b) => a.title.localeCompare(b.title)
     ) : data ? [{ title: gridTitle, items: data }] : [];
@@ -4581,7 +5203,7 @@ var useA4CategoryView = ({
       gridColumns,
       globalFilter
     });
-    useEffect12(() => {
+    useEffect13(() => {
       if (flattenedNodes.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4594,7 +5216,7 @@ var useA4CategoryView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    useEffect12(() => {
+    useEffect13(() => {
       if (!isMeasuring || flattenedNodes.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4633,28 +5255,28 @@ var useA4CategoryView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ jsxs21(
+    const HeaderEl = /* @__PURE__ */ jsxs23(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs21("section", { children: [
-            /* @__PURE__ */ jsx29("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
-            /* @__PURE__ */ jsx29("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__ */ jsx32("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs23("section", { children: [
+            /* @__PURE__ */ jsx32("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
+            /* @__PURE__ */ jsx32("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__ */ jsxs21("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsx29("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
-            /* @__PURE__ */ jsxs21("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__ */ jsx29("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ jsx29("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ jsx29("span", { children: store.email })
+          /* @__PURE__ */ jsxs23("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx32("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
+            /* @__PURE__ */ jsxs23("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__ */ jsx32("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ jsx32("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ jsx32("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx29("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx29(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx32("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx32(
       InfoGrid,
       {
         className: "mb-4",
@@ -4664,40 +5286,40 @@ var useA4CategoryView = ({
     ) }) : null;
     const renderNode = (node) => {
       if (node.type === "header") {
-        return /* @__PURE__ */ jsx29("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__ */ jsx29("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
+        return /* @__PURE__ */ jsx32("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__ */ jsx32("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
       }
-      return /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx32(
         "div",
         {
           className: "grid gap-4 px-2",
           style: { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` },
-          children: node.items.map((item, j) => /* @__PURE__ */ jsx29("div", { children: renderItem(item) }, j))
+          children: node.items.map((item, j) => /* @__PURE__ */ jsx32("div", { children: renderItem(item) }, j))
         }
       );
     };
-    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ jsx29("div", { className: "mb-4", children: /* @__PURE__ */ jsx29(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ jsx29("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
-      /* @__PURE__ */ jsx29("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your 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__ */ jsxs21(
+    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ jsx32("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs23("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__ */ jsx32("div", { className: "mb-4", children: /* @__PURE__ */ jsx32(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx32("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__ */ jsx32(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx32("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx32(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ jsx32("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__ */ jsx32("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__ */ jsxs23(
         "button",
         {
           onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
-            /* @__PURE__ */ jsx29(RefreshCw2, { size: 14 }),
+            /* @__PURE__ */ jsx32(RefreshCw2, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ jsx29("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ jsx32("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx32(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ jsxs21(
+          children: /* @__PURE__ */ jsxs23(
             "div",
             {
               ref: measureContainerRef,
@@ -4705,56 +5327,56 @@ var useA4CategoryView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ jsx29("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ jsx29("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
+                /* @__PURE__ */ jsx32("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ jsx32("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
               ]
             }
           )
         }
       ) }),
-      /* @__PURE__ */ jsx29("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx32("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ jsx32(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ jsx29(
+          children: /* @__PURE__ */ jsx32(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ jsx29("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxs21(
+              children: /* @__PURE__ */ jsxs23("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ jsx32("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs23(
                     "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__ */ jsx29(
+                        /* @__PURE__ */ jsx32(
                           RefreshCw2,
                           {
                             size: 16,
                             className: isLoading ? "animate-spin" : ""
                           }
                         ),
-                        /* @__PURE__ */ jsx29("span", { className: "text-xs font-semibold", children: "Reload" })
+                        /* @__PURE__ */ jsx32("span", { className: "text-xs font-semibold", children: "Reload" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs21(
+                  /* @__PURE__ */ jsxs23(
                     "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__ */ jsx29(Printer2, { size: 16 }),
+                        /* @__PURE__ */ jsx32(Printer2, { size: 16 }),
                         "Print"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                    /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                    /* @__PURE__ */ jsx32(
                       "button",
                       {
                         onClick: (e) => {
@@ -4765,11 +5387,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__ */ jsx29(ChevronLeft2, { size: 18 })
+                        children: /* @__PURE__ */ jsx32(ChevronLeft2, { size: 18 })
                       }
                     ),
-                    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                      /* @__PURE__ */ jsxs21(
+                    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                      /* @__PURE__ */ jsxs23(
                         Select,
                         {
                           value: currentPageIndex + 1,
@@ -4782,9 +5404,9 @@ var useA4CategoryView = ({
                           variant: "ghost",
                           containerClassName: "inline-block",
                           children: [
-                            /* @__PURE__ */ jsx29(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ jsx29("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                            /* @__PURE__ */ jsxs21(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                              /* @__PURE__ */ jsx29("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ jsx29(
+                            /* @__PURE__ */ jsx32(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__ */ jsx32("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                            /* @__PURE__ */ jsxs23(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                              /* @__PURE__ */ jsx32("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__ */ jsx32(
                                 "input",
                                 {
                                   type: "text",
@@ -4796,17 +5418,17 @@ var useA4CategoryView = ({
                                   autoFocus: true
                                 }
                               ) }),
-                              /* @__PURE__ */ jsx29("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                              /* @__PURE__ */ jsx32("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                 (p) => String(p).includes(pageSearch)
-                              ).map((p) => /* @__PURE__ */ jsx29(SelectItem, { value: p, children: p }, p)) })
+                              ).map((p) => /* @__PURE__ */ jsx32(SelectItem, { value: p, children: p }, p)) })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx29("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                      /* @__PURE__ */ jsx29("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                      /* @__PURE__ */ jsx32("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                      /* @__PURE__ */ jsx32("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                     ] }),
-                    /* @__PURE__ */ jsx29(
+                    /* @__PURE__ */ jsx32(
                       "button",
                       {
                         onClick: (e) => {
@@ -4817,15 +5439,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__ */ jsx29(ChevronRight3, { size: 18 })
+                        children: /* @__PURE__ */ jsx32(ChevronRight3, { size: 18 })
                       }
                     )
                   ] })
                 ] }) }) }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ jsxs21("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ jsx29(
+                /* @__PURE__ */ jsxs23("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ jsx32("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ jsx32(
                     "input",
                     {
                       type: "text",
@@ -4835,8 +5457,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__ */ jsx29("div", { className: "h-14 print:h-14" }),
-                  statusOverlay ? /* @__PURE__ */ jsx29("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ jsx29("div", { children: renderNode(node) }, i)) })
+                  pageIndex > 0 && /* @__PURE__ */ jsx32("div", { className: "h-14 print:h-14" }),
+                  statusOverlay ? /* @__PURE__ */ jsx32("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ jsx32("div", { children: renderNode(node) }, i)) })
                 ] })
               ] })
             },
@@ -4858,10 +5480,10 @@ var useA4CategoryView = ({
 var useA4CategoryView_default = useA4CategoryView;
 
 // src/hooks/Fetches/useTransaction.tsx
-import { useEffect as useEffect13, useState as useState18 } from "react";
+import { useEffect as useEffect14, useState as useState19 } from "react";
 import { AlertCircle as AlertCircle3, FileX as FileX3, Plus as Plus2, RefreshCw as RefreshCw3 } from "lucide-react";
 import moment from "moment";
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 var useTransaction = ({
   url,
   v = 1,
@@ -4869,7 +5491,7 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = useState18(
+  const [date, setDate] = useState19(
     moment().format("DD/MM/YYYY")
   );
   const dateObj = {};
@@ -4886,7 +5508,7 @@ var useTransaction = ({
       delay
     });
   };
-  useEffect13(() => {
+  useEffect14(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -4913,21 +5535,21 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx30(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx33(
       "div",
       {
         className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
-        children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-          error ? /* @__PURE__ */ jsx30("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx30(AlertCircle3, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx30("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx30(FileX3, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-          /* @__PURE__ */ jsx30("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-          /* @__PURE__ */ jsx30("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-          url && /* @__PURE__ */ jsxs22(
+        children: /* @__PURE__ */ jsxs24("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__ */ jsx33("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__ */ jsx33(AlertCircle3, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx33("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx33(FileX3, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsx33("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ jsx33("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__ */ jsxs24(
             "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__ */ jsx30(RefreshCw3, { size: 14 }),
+                /* @__PURE__ */ jsx33(RefreshCw3, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -4935,14 +5557,14 @@ var useTransaction = ({
         ] })
       }
     ) : void 0;
-    return /* @__PURE__ */ jsxs22(Card, { children: [
-      /* @__PURE__ */ jsx30(Card.Header, { children: /* @__PURE__ */ jsxs22("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx30(Card.Title, { children: title }),
-          /* @__PURE__ */ jsx30(Card.Description, { children: description })
+    return /* @__PURE__ */ jsxs24(Card, { children: [
+      /* @__PURE__ */ jsx33(Card.Header, { children: /* @__PURE__ */ jsxs24("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx33(Card.Title, { children: title }),
+          /* @__PURE__ */ jsx33(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ jsxs22("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsxs24("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ jsx33(
             Fields_default.DateInput,
             {
               value: date,
@@ -4952,20 +5574,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx33(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ jsx30(Plus2, {}),
+              icon: /* @__PURE__ */ jsx33(Plus2, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx30(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx30("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx33("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx33(
         DataTable,
         {
           columns,
@@ -5182,7 +5804,7 @@ var storage = {
 };
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 
 // ../../node_modules/@ant-design/icons/es/components/Context.js
 import { createContext as createContext5 } from "react";
@@ -5190,7 +5812,7 @@ var IconContext = /* @__PURE__ */ createContext5({});
 var Context_default = IconContext;
 
 // ../../node_modules/@ant-design/icons/es/components/AntdIcon.js
-import * as React14 from "react";
+import * as React16 from "react";
 import { clsx as clsx2 } from "clsx";
 
 // ../../node_modules/@ant-design/fast-color/es/presetColors.js
@@ -6037,7 +6659,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // ../../node_modules/@ant-design/icons/es/components/IconBase.js
-import * as React13 from "react";
+import * as React15 from "react";
 
 // ../../node_modules/@rc-component/util/es/Dom/canUseDom.js
 function canUseDom() {
@@ -6193,17 +6815,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}`);
     }
@@ -6212,29 +6834,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
-import React12, { useContext as useContext5, useEffect as useEffect14 } from "react";
+import React14, { useContext as useContext5, useEffect as useEffect15 } from "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");
@@ -6256,12 +6878,12 @@ function normalizeAttrs(attrs = {}) {
 }
 function generate2(node, key, rootProps) {
   if (!rootProps) {
-    return /* @__PURE__ */ React12.createElement(node.tag, {
+    return /* @__PURE__ */ React14.createElement(node.tag, {
       key,
       ...normalizeAttrs(node.attrs)
     }, (node.children || []).map((child, index) => generate2(child, `${key}-${node.tag}-${index}`)));
   }
-  return /* @__PURE__ */ React12.createElement(node.tag, {
+  return /* @__PURE__ */ React14.createElement(node.tag, {
     key,
     ...normalizeAttrs(node.attrs),
     ...rootProps
@@ -6348,7 +6970,7 @@ var useInsertStyles = (eleRef) => {
 ${mergedStyleStr}
 }`;
   }
-  useEffect14(() => {
+  useEffect15(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);
     updateCSS(mergedStyleStr, "@ant-design-icons", {
@@ -6388,7 +7010,7 @@ var IconBase = (props) => {
     secondaryColor,
     ...restProps
   } = props;
-  const svgRef = React13.useRef(null);
+  const svgRef = React15.useRef(null);
   let colors = twoToneColorPalette;
   if (primaryColor) {
     colors = {
@@ -6458,7 +7080,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,
@@ -6475,7 +7097,7 @@ var Icon = /* @__PURE__ */ React14.forwardRef((props, ref) => {
   const {
     prefixCls = "anticon",
     rootClassName
-  } = React14.useContext(Context_default);
+  } = React16.useContext(Context_default);
   const classString = clsx2(rootClassName, prefixCls, {
     [`${prefixCls}-${icon.name}`]: !!icon.name,
     [`${prefixCls}-spin`]: !!spin || icon.name === "loading"
@@ -6489,7 +7111,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, {
@@ -6497,7 +7119,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,
@@ -6512,7 +7134,7 @@ if (process.env.NODE_ENV !== "production") {
 var AntdIcon_default = Icon;
 
 // ../../node_modules/@ant-design/icons/es/icons/PlusOutlined.js
-import * as React15 from "react";
+import * as React17 from "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" };
@@ -6533,11 +7155,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";
 }
@@ -6545,7 +7167,7 @@ var PlusOutlined_default2 = RefIcon;
 
 // src/hooks/uploads/useAntdImageUpload.tsx
 import { Image, Upload } from "antd";
-import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 var getBase64 = (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
@@ -6553,9 +7175,9 @@ var getBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 var useAntdImageUpload = ({ length = 1 }) => {
-  const [fileList, setFileList] = useState19([]);
-  const [previewOpen, setPreviewOpen] = useState19(false);
-  const [previewImage, setPreviewImage] = useState19("");
+  const [fileList, setFileList] = useState20([]);
+  const [previewOpen, setPreviewOpen] = useState20(false);
+  const [previewImage, setPreviewImage] = useState20("");
   const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
@@ -6572,8 +7194,8 @@ var useAntdImageUpload = ({ length = 1 }) => {
       }))
     );
   };
-  const ImageBox = () => /* @__PURE__ */ jsxs23(Fragment7, { children: [
-    /* @__PURE__ */ jsx31(
+  const ImageBox = () => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+    /* @__PURE__ */ jsx34(
       Upload,
       {
         listType: "picture-card",
@@ -6581,13 +7203,13 @@ var useAntdImageUpload = ({ length = 1 }) => {
         onPreview: handlePreview,
         onChange: handleChange,
         beforeUpload: () => false,
-        children: fileList.length >= length ? null : /* @__PURE__ */ jsxs23("button", { style: { border: 0, background: "none" }, type: "button", children: [
-          /* @__PURE__ */ jsx31(PlusOutlined_default2, {}),
-          /* @__PURE__ */ jsx31("div", { style: { marginTop: 8 }, children: "Upload" })
+        children: fileList.length >= length ? null : /* @__PURE__ */ jsxs25("button", { style: { border: 0, background: "none" }, type: "button", children: [
+          /* @__PURE__ */ jsx34(PlusOutlined_default2, {}),
+          /* @__PURE__ */ jsx34("div", { style: { marginTop: 8 }, children: "Upload" })
         ] })
       }
     ),
-    previewImage && /* @__PURE__ */ jsx31(
+    previewImage && /* @__PURE__ */ jsx34(
       Image,
       {
         style: { display: "none" },
@@ -6605,10 +7227,10 @@ var useAntdImageUpload = ({ length = 1 }) => {
 var useAntdImageUpload_default = useAntdImageUpload;
 
 // src/components/Views/CategoryView.tsx
-import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 var CategoryCard = ({ item }) => {
-  return /* @__PURE__ */ jsxs24("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__ */ jsx32("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs26("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__ */ jsx35("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ jsx35(
       "img",
       {
         src: item.image,
@@ -6616,7 +7238,7 @@ var CategoryCard = ({ item }) => {
         className: "w-full h-full object-cover"
       }
     ) }),
-    /* @__PURE__ */ jsx32("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ jsx32("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
+    /* @__PURE__ */ jsx35("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ jsx35("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
   ] });
 };
 var CategoryView = ({
@@ -6624,20 +7246,20 @@ var CategoryView = ({
   items,
   className
 }) => {
-  return /* @__PURE__ */ jsx32("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ jsxs24("div", { className: "max-w-7xl mx-auto", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "mb-8", children: [
-      /* @__PURE__ */ jsx32("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
-      /* @__PURE__ */ jsx32("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
+  return /* @__PURE__ */ jsx35("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ jsxs26("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx35("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
+      /* @__PURE__ */ jsx35("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
     ] }),
-    /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ jsx32(CategoryCard, { item }, item.id)) })
+    /* @__PURE__ */ jsx35("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ jsx35(CategoryCard, { item }, item.id)) })
   ] }) });
 };
 var CategoryView_default = CategoryView;
 
 // src/components/Views/Transaction.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Transaction = () => {
-  return /* @__PURE__ */ jsx33("div", { children: "Transaction" });
+  return /* @__PURE__ */ jsx36("div", { children: "Transaction" });
 };
 var Transaction_default = Transaction;
 
@@ -6648,7 +7270,151 @@ var Views = {
   CategoryCard
 };
 var Views_default = Views;
+
+// src/components/Guard.tsx
+import { useEffect as useEffect16, useLayoutEffect } from "react";
+import { Navigate, Outlet, useLocation as useLocation2 } from "react-router-dom";
+import { message } from "antd";
+
+// src/store/useAuthStore.ts
+import { create } from "zustand";
+var useAuthStore = 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
+import { jsx as jsx37 } from "react/jsx-runtime";
+var Guard = () => {
+  const { get } = useApis_default();
+  const location = useLocation2();
+  const { login, setIsLoggedIn, setIsFetched, isFetched } = useAuth();
+  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__ */ jsx37("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ jsx37(LoadingSpin, { size: "lg" }) });
+  }
+  return /* @__PURE__ */ jsx37(Outlet, {});
+};
+var ProtectedRoute = () => {
+  const { isLoggedIn } = useAuth();
+  const location = useLocation2();
+  return isLoggedIn ? /* @__PURE__ */ jsx37(Outlet, {}) : /* @__PURE__ */ jsx37(Navigate, { to: "/login", state: { from: location }, replace: true });
+};
+var UnProtectedRoute = () => {
+  const { isLoggedIn, user } = useAuth();
+  return !isLoggedIn ? /* @__PURE__ */ jsx37(Outlet, {}) : /* @__PURE__ */ jsx37(Navigate, { to: user?.homePath || "/", replace: true });
+};
+var AdminProtectedRoute = () => {
+  const { role } = useAuth();
+  useEffect16(() => {
+    if (role && !["admin"].includes(role)) {
+      message.error("Only admin can access this page");
+    }
+  }, [role]);
+  return role && ["admin"].includes(role) ? /* @__PURE__ */ jsx37(Outlet, {}) : /* @__PURE__ */ jsx37(Navigate, { to: "/", replace: true });
+};
 export {
+  AdminProtectedRoute,
   Badge,
   Branding,
   Button,
@@ -6665,6 +7431,7 @@ export {
   DataTable,
   DateInput,
   Fields_default as Fields,
+  Guard,
   InfoGrid,
   Input,
   LoadingBox,
@@ -6675,6 +7442,8 @@ export {
   PageHeader,
   PhoneInput,
   PostTable,
+  ProfileDropdown,
+  ProtectedRoute,
   SearchApi,
   SearchApiContent,
   SearchApiInput,
@@ -6688,6 +7457,8 @@ export {
   Textarea,
   ThemeProvider,
   ThemeToggle,
+  ThemedLogin,
+  UnProtectedRoute,
   Views_default as Views,
   WarqadProvider,
   generatePdf,
@@ -6696,6 +7467,9 @@ export {
   useA4DataView_default as useA4StatementView,
   useAntdImageUpload_default as useAntdImageUpload,
   useApis_default as useApi,
+  useAuth_default as useAuth,
+  useAuthStore,
+  useLogin,
   useModal,
   useSearchApiContext,
   useSelectContext,