warqadui 0.0.52 → 0.0.53

package/dist/index.js

@@ -58,7 +58,9 @@ __export(index_exports, {
   PageHeader: () => PageHeader,
   PhoneInput: () => PhoneInput,
   PostTable: () => PostTable,
+  ProfileCard: () => ProfileCard,
   ProfileDropdown: () => ProfileDropdown,
+  ProfileView: () => ProfileView,
   ProtectedRoute: () => ProtectedRoute,
   SearchApi: () => SearchApi,
   SearchApiContent: () => SearchApiContent,
@@ -1190,13 +1192,13 @@ var Input = (0, import_react8.forwardRef)(
         }
       }
     }, [props.value, name, form]);
-    let message2 = error;
+    let message4 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message2 = errorObj?.message;
+      message4 = errorObj?.message;
     }
     const watchedValue = form?.watch(name);
     (0, import_react8.useEffect)(() => {
@@ -1263,7 +1265,7 @@ var Input = (0, import_react8.forwardRef)(
               }
             )
           ] }),
-          message2 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
+          message4 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message4 })
         ]
       }
     );
@@ -1378,7 +1380,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
     const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    let message2 = error;
+    let message4 = error;
     if (form && name) {
       const {
         formState: { errors }
@@ -1388,7 +1390,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
       for (const part of nameParts) {
         currentError = currentError?.[part];
       }
-      message2 = currentError?.message || message2;
+      message4 = currentError?.message || message4;
     }
     const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `space-y-2 group relative ${containerClassName}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -1433,7 +1435,7 @@ var PhoneInput = (0, import_react9.forwardRef)(
           }
         )
       ] }),
-      message2 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
+      message4 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message4 })
     ] });
     if (form && name) {
       return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -1582,7 +1584,7 @@ var SelectRoot = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [fieldInternalProps]);
-  let message2 = error;
+  let message4 = error;
   if (form && name) {
     const {
       formState: { errors }
@@ -1592,7 +1594,7 @@ var SelectRoot = ({
     for (const part of nameParts) {
       currentError = currentError?.[part];
     }
-    message2 = currentError?.message || message2;
+    message4 = currentError?.message || message4;
   }
   const allOptions = initialOptions?.length ? initialOptions : registeredOptions;
   const valueCtx = {
@@ -1653,7 +1655,7 @@ var SelectRoot = ({
             String(opt.value) || index
           )) })
         ] }),
-        message2 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
+        message4 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message4 })
       ]
     }
   ) });
@@ -1887,13 +1889,13 @@ var Textarea = (0, import_react11.forwardRef)(
     const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
-    let message2 = error;
+    let message4 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message2 = errorObj?.message;
+      message4 = errorObj?.message;
     }
     const renderInput = (inputProps, ref2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `space-y-2 group w-full! relative ${containerClassName}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
@@ -1929,7 +1931,7 @@ var Textarea = (0, import_react11.forwardRef)(
           ...inputProps
         }
       ) }),
-      message2 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
+      message4 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message4 })
     ] });
     (0, import_react11.useEffect)(() => {
       if (form && name && props.value !== void 0 && props.value !== null && props.value !== "") {
@@ -2415,7 +2417,7 @@ var SearchApiRoot = ({
   const filteredOptions = options.filter(
     (option) => !filter.includes(getOptionValue(option))
   );
-  let message2 = error || errorMessage;
+  let message4 = error || errorMessage;
   if (form && name) {
     const {
       formState: { errors }
@@ -2425,7 +2427,7 @@ var SearchApiRoot = ({
     for (const part of nameParts) {
       currentError = currentError?.[part];
     }
-    message2 = currentError?.message || message2;
+    message4 = currentError?.message || message4;
   }
   const valueCtx = {
     isOpen,
@@ -2459,7 +2461,7 @@ var SearchApiRoot = ({
     form,
     name,
     obj,
-    error: message2,
+    error: message4,
     onSelect,
     onClear
   };
@@ -2814,19 +2816,19 @@ var DateInput = (0, import_react14.forwardRef)(
     const { theme } = useWarqadConfig();
     const primaryColor = theme?.primaryColor;
     const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
-    let message2 = error;
+    let message4 = error;
     if (form && name) {
       const {
         formState: { errors }
       } = form;
       const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
-      message2 = errorObj?.message;
+      message4 = 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!
-      ${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"}
+      ${message4 ? "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) => {
@@ -2854,8 +2856,8 @@ var DateInput = (0, import_react14.forwardRef)(
           needConfirm: false,
           style: {
             height: "36px",
-            borderColor: isFocused && !message2 ? primaryColor : void 0,
-            boxShadow: isFocused && !message2 ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+            borderColor: isFocused && !message4 ? primaryColor : void 0,
+            boxShadow: isFocused && !message4 ? `${primaryColor}33 0px 0px 0px 2px` : void 0
           },
           classNames: { popup: { root: "z-50" } },
           suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2876,7 +2878,7 @@ var DateInput = (0, import_react14.forwardRef)(
         {
           className: "block text-xs font-medium transition-colors duration-200",
           style: {
-            color: message2 ? "#ef4444" : isFocused ? primaryColor : void 0
+            color: message4 ? "#ef4444" : isFocused ? primaryColor : void 0
           },
           children: [
             label,
@@ -2897,7 +2899,7 @@ var DateInput = (0, import_react14.forwardRef)(
           )
         }
       ) : renderDatePicker(value, onChange, onBlur, ref),
-      message2 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message2 })
+      message4 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-red-600 dark:text-red-400", children: message4 })
     ] });
   }
 );
@@ -3066,7 +3068,7 @@ function DataTable({
         {
           placeholder: searchPlaceholder,
           value: globalFilter,
-          onChange: (e) => setGlobalFilter(e.target.value),
+          onChange: (val) => setGlobalFilter(val),
           icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Search, { size: 16 }),
           className: "h-9!"
         }
@@ -4110,16 +4112,228 @@ var Branding = ({
   );
 };
 
+// src/components/ProfileCard.tsx
+var import_react19 = require("react");
+var import_lucide_react12 = require("lucide-react");
+var import_react_router_dom2 = require("react-router-dom");
+var import_antd2 = require("antd");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ProfileCard = ({
+  name,
+  role,
+  image,
+  details,
+  backUrl,
+  className
+}) => {
+  const navigate = (0, import_react_router_dom2.useNavigate)();
+  const [copiedKey, setCopiedKey] = (0, import_react19.useState)(null);
+  const handleBack = () => {
+    if (backUrl) navigate(backUrl);
+    else navigate(-1);
+  };
+  const handleCopy = async (key, value) => {
+    try {
+      await navigator.clipboard.writeText(String(value));
+      setCopiedKey(key);
+      import_antd2.message.success(`${formatLabel(key)} copied to clipboard`);
+      setTimeout(() => setCopiedKey(null), 2e3);
+    } catch (err) {
+      import_antd2.message.error("Failed to copy");
+    }
+  };
+  const formatLabel = (label) => {
+    return label.replace(/_/g, " ").replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+  };
+  const getInitials = (userName) => {
+    return userName.split(" ").filter(Boolean).map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Card, { className: cn(
+    "overflow-hidden border-0 bg-white/70 dark:bg-zinc-950/70 backdrop-blur-xl shadow-2xl",
+    "relative group/card transition-all duration-300",
+    className
+  ), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 left-0 w-full h-32 bg-linear-to-br from-blue-600/10 via-indigo-600/5 to-purple-600/10 dark:from-blue-500/10 dark:via-indigo-500/5 dark:to-purple-500/10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 right-0 w-48 h-48 bg-blue-500/20 blur-3xl -mr-24 -mt-24 rounded-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-0 left-0 w-32 h-32 bg-indigo-500/10 blur-2xl -ml-16 -mt-16 rounded-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Card.Content, { className: "relative px-8 pt-8 pb-10 z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between items-start mb-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "button",
+          {
+            onClick: handleBack,
+            className: "p-2.5 rounded-2xl bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 shadow-sm transition-all active:scale-95 group/back",
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 20, className: "group-hover/back:-translate-x-0.5 transition-transform" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-3 py-1 rounded-full bg-blue-50/50 dark:bg-blue-500/10 text-[10px] font-bold text-blue-600 dark:text-blue-400 uppercase tracking-widest border border-blue-100/50 dark:border-blue-500/20", children: "Active Profile" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center sm:flex-row gap-8 mb-12", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative shrink-0 group/avatar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-blue-500/20 blur-xl opacity-0 group-hover/avatar:opacity-100 transition-opacity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative h-28 w-28 rounded-3xl ring-4 ring-white dark:ring-zinc-950 shadow-2xl overflow-hidden bg-gray-50 dark:bg-zinc-900 flex items-center justify-center transition-transform hover:rotate-3 duration-300", children: image ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image, alt: name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-3xl font-black text-blue-600 dark:text-blue-400 select-none", children: getInitials(name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-4 border-white dark:border-zinc-950 rounded-full shadow-lg" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center sm:items-start text-center sm:text-left gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-3xl font-black text-gray-900 dark:text-white tracking-tight leading-tight", children: name }),
+          role && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold text-gray-500 dark:text-zinc-400 capitalize", children: role }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "w-1 h-1 rounded-full bg-gray-300 dark:bg-zinc-700" }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs font-medium text-blue-600/70 dark:text-blue-400/70", children: "Verified Account" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: Object.entries(details).map(([key, value]) => {
+        if (value === void 0 || value === null || value === "") return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "div",
+          {
+            className: "group flex flex-col p-4 rounded-2xl bg-gray-50/50 dark:bg-zinc-900/30 border border-transparent hover:border-blue-100 dark:hover:border-blue-900/30 hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-zinc-500", children: formatLabel(key) }),
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "button",
+                  {
+                    onClick: () => handleCopy(key, value),
+                    className: cn(
+                      "p-1.5 rounded-lg transition-all duration-200 opacity-0 group-hover:opacity-100",
+                      copiedKey === key ? "text-green-500 bg-green-50 dark:bg-green-500/10" : "text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10"
+                    ),
+                    children: copiedKey === key ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Check, { size: 12, className: "animate-in zoom-in" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Copy, { size: 12 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-between gap-2 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-base font-bold text-gray-800 dark:text-zinc-100 truncate", children: value }) })
+            ]
+          },
+          key
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "px-8 py-4 bg-gray-50/50 dark:bg-zinc-900/30 border-t border-gray-100 dark:border-zinc-900 flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-[10px] text-gray-400 dark:text-zinc-600 font-medium italic", children: "All data is securely encrypted." }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("button", { className: "flex items-center gap-1.5 text-xs font-bold text-blue-600 dark:text-blue-400 hover:underline", children: [
+        "Edit Settings ",
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ExternalLink, { size: 12 })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/ProfileView.tsx
+var import_react20 = __toESM(require("react"));
+var import_lucide_react13 = require("lucide-react");
+var import_antd3 = require("antd");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ProfileView = ({
+  name,
+  role,
+  email,
+  imgUrl,
+  userId,
+  info = [],
+  className,
+  title = "My Profile",
+  description = "Manage your account settings and preferences"
+}) => {
+  const [copiedIndex, setCopiedIndex] = import_react20.default.useState(null);
+  const formatLabel = (label) => {
+    return label.replace(/_/g, " ").replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+  };
+  const handleCopy = async (index, label, value) => {
+    await navigator.clipboard.writeText(String(value));
+    setCopiedIndex(index);
+    import_antd3.message.success(`${formatLabel(label)} copied!`);
+    setTimeout(() => setCopiedIndex(null), 2e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: cn(
+        "max-w-5xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 pb-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h1", { className: "text-3xl font-black text-gray-900 dark:text-white tracking-tight leading-none", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-gray-500 dark:text-gray-400 mt-2 font-medium", children: description })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "bg-white dark:bg-zinc-900 rounded-[2.5rem] border border-gray-100 dark:border-zinc-800 relative overflow-hidden flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "p-8 sm:p-10 border-b border-gray-50 dark:border-zinc-800/50 relative overflow-hidden bg-gray-50/30 dark:bg-zinc-900/10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute top-0 right-0 w-64 h-64 bg-blue-50 dark:bg-blue-900/10 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative flex flex-col sm:flex-row items-center sm:items-start gap-10", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-28 h-28 sm:w-36 sm:h-36 rounded-[2rem] bg-linear-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400 ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: imgUrl ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                "img",
+                {
+                  src: imgUrl,
+                  alt: name,
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.User, { size: 56, className: "opacity-80" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-center sm:text-left space-y-4 flex-1 pt-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-3xl font-black text-gray-900 dark:text-white tracking-tight leading-none mb-3", children: name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-gray-500 dark:text-gray-400 font-semibold text-lg", children: email })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap justify-center sm:justify-start gap-2.5", children: [
+                  role && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-2xl bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 text-xs font-bold capitalize border border-blue-100 dark:border-blue-800 tracking-wide", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Shield, { size: 14 }),
+                    role
+                  ] }),
+                  userId && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-2xl bg-gray-50 text-gray-700 dark:bg-zinc-800 dark:text-gray-300 text-xs font-bold border border-gray-100 dark:border-zinc-700 tracking-wide", children: [
+                    "#",
+                    userId.slice(-6).toUpperCase()
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          info && info.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-8 sm:p-10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: info.map((item, index) => {
+            if (item.value === void 0 || item.value === null || item.value === "")
+              return null;
+            const isCopiable = item.copiable !== false;
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+              "div",
+              {
+                className: "group flex flex-col p-6 rounded-3xl bg-gray-50/50 dark:bg-zinc-800/30 border border-gray-100/50 dark:border-zinc-800/50 hover:bg-white dark:hover:bg-zinc-800 hover:border-blue-100 dark:hover:border-blue-900/30 transition-all duration-300",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between mb-2 capitalize", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-zinc-500", children: formatLabel(item.label) }),
+                    isCopiable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      "button",
+                      {
+                        onClick: () => handleCopy(index, item.label, item.value),
+                        className: cn(
+                          "p-2 rounded-xl transition-all duration-200 opacity-0 group-hover:opacity-100",
+                          copiedIndex === index ? "text-green-500 bg-green-50 dark:bg-green-500/10" : "text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-zinc-900 border border-transparent hover:border-gray-100 dark:hover:border-zinc-700"
+                        ),
+                        children: copiedIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Check, { size: 14, className: "animate-in zoom-in" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Copy, { size: 14 })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-base font-black text-gray-800 dark:text-zinc-100 truncate", children: item.value })
+                ]
+              },
+              index
+            );
+          }) }) })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/hooks/useLogin.tsx
-var import_react19 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_react_hook_form7 = require("react-hook-form");
 var import_zod = require("@hookform/resolvers/zod");
 var z = __toESM(require("zod"));
 
 // src/components/Login/ThemedLogins.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_react_router_dom2 = require("react-router-dom");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_react_router_dom3 = require("react-router-dom");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TechLogin = ({
   form,
   onSubmit,
@@ -4130,65 +4344,65 @@ var TechLogin = ({
   backUrl,
   isLoading
 }) => {
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-[#0A0B10]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex lg:w-3/5 relative overflow-hidden bg-slate-900 border-r border-slate-800", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const navigate = (0, import_react_router_dom3.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-[#0A0B10]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "hidden lg:flex lg:w-3/5 relative overflow-hidden bg-slate-900 border-r border-slate-800", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: "absolute inset-0 z-0 opacity-60 bg-cover bg-center transition-transform hover:scale-110 duration-[20s]",
           style: { backgroundImage: `url('${image || "/tech_bg.png"}')` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-[#0A0B10] via-transparent to-purple-500/10 z-10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative z-20 p-12 flex flex-col justify-between w-full h-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-10 w-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(79,70,229,0.5)]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Terminal, { className: "text-white w-6 h-6" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold text-white tracking-widest uppercase", children: brandName || "DevNode" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-[#0A0B10] via-transparent to-purple-500/10 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative z-20 p-12 flex flex-col justify-between w-full h-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-10 w-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(79,70,229,0.5)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Terminal, { className: "text-white w-6 h-6" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl font-bold text-white tracking-widest uppercase", children: brandName || "DevNode" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-5xl font-extrabold text-white mb-6 leading-tight", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "max-w-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h1", { className: "text-5xl font-extrabold text-white mb-6 leading-tight", children: [
             "Build the ",
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-indigo-400", children: "Future" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-indigo-400", children: "Future" }),
             " of Web."
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-400 text-lg leading-relaxed mb-8", children: "Join thousands of developers building scalable applications with our state-of-the-art infrastructure." })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-slate-400 text-lg leading-relaxed mb-8", children: "Join thousands of developers building scalable applications with our state-of-the-art infrastructure." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-slate-500 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "text-slate-500 text-sm", children: [
           "\xA9 2026 ",
           brandName || "DevNode",
           "."
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-2/5 p-8 lg:p-16 flex flex-col justify-center bg-white dark:bg-[#0A0B10] relative transition-colors duration-300", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
-        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full lg:w-2/5 p-8 lg:p-16 flex flex-col justify-center bg-white dark:bg-[#0A0B10] relative transition-colors duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             onClick: () => navigate(backUrl),
             disabled: isLoading,
             className: "p-2 rounded-lg text-slate-500 hover:text-indigo-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-indigo-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm", children: "Back" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm", children: "Back" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThemeToggle, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-12", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-3xl font-bold text-slate-900 dark:text-white mb-3 tracking-tight", children: title || "Welcome Back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400", children: subtitle || "Please enter your credentials to access your dashboard." })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mb-12", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "text-3xl font-bold text-slate-900 dark:text-white mb-3 tracking-tight", children: title || "Welcome Back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-slate-500 dark:text-slate-400", children: subtitle || "Please enter your credentials to access your dashboard." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "form",
           {
             onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
             className: "space-y-6",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4197,8 +4411,8 @@ var TechLogin = ({
                   type: "email",
                   disabled: isLoading,
                   placeholder: "maoo@example.com",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    import_lucide_react12.Mail,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_lucide_react14.Mail,
                     {
                       size: 18,
                       className: "text-slate-400 dark:text-slate-500"
@@ -4207,7 +4421,7 @@ var TechLogin = ({
                   className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-12"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4216,8 +4430,8 @@ var TechLogin = ({
                   type: "password",
                   disabled: isLoading,
                   placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    import_lucide_react12.Lock,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_lucide_react14.Lock,
                     {
                       size: 18,
                       className: "text-slate-400 dark:text-slate-500"
@@ -4226,8 +4440,8 @@ var TechLogin = ({
                   className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-12"
                 }
               ),
-              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-500 text-sm font-medium animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 Button,
                 {
                   type: "submit",
@@ -4235,7 +4449,7 @@ var TechLogin = ({
                   className: "w-full bg-indigo-600 hover:bg-indigo-500 text-white h-12 font-semibold flex items-center justify-center gap-2",
                   children: [
                     isLoading ? "Logging in..." : "Authenticate Now",
-                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowRight, { size: 18 })
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.ArrowRight, { size: 18 })
                   ]
                 }
               )
@@ -4256,63 +4470,63 @@ var TravelLogin = ({
   backUrl,
   isLoading
 }) => {
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-slate-950 transition-colors", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex lg:w-1/2 relative overflow-hidden bg-slate-100 border-r border-slate-100", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const navigate = (0, import_react_router_dom3.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-white dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "hidden lg:flex lg:w-1/2 relative overflow-hidden bg-slate-100 border-r border-slate-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: "absolute inset-0 z-0 bg-cover bg-center transition-transform hover:scale-105 duration-[30s]",
           style: { backgroundImage: `url('${image || "/travel_bg.png"}')` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-br from-orange-500/20 via-transparent to-black/30 z-10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative z-20 p-16 flex flex-col justify-between w-full h-full text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-10 w-10 bg-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Plane, { className: "text-white w-6 h-6 rotate-45" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold tracking-tight", children: brandName || "Wanderlust" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-0 bg-linear-to-br from-orange-500/20 via-transparent to-black/30 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "relative z-20 p-16 flex flex-col justify-between w-full h-full text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-10 w-10 bg-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Plane, { className: "text-white w-6 h-6 rotate-45" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl font-bold tracking-tight", children: brandName || "Wanderlust" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-6xl font-black mb-8 leading-[1.1]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "max-w-md", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h1", { className: "text-6xl font-black mb-8 leading-[1.1]", children: [
           "Your Next ",
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-orange-400", children: "Adventure" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-orange-400", children: "Adventure" }),
           " ",
           "Starts Now."
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-white/70 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "text-white/70 text-sm", children: [
           "Discover the world with ",
           brandName || "Wanderlust",
           "."
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-1/2 p-10 lg:p-24 flex flex-col justify-center bg-white dark:bg-slate-950 relative transition-colors", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
-        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full lg:w-1/2 p-10 lg:p-24 flex flex-col justify-center bg-white dark:bg-slate-950 relative transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             onClick: () => navigate(backUrl),
             disabled: isLoading,
             className: "p-2 rounded-lg text-slate-500 hover:text-orange-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-orange-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm", children: "Back" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm", children: "Back" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThemeToggle, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-12 text-center lg:text-left", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-4xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight", children: title || "Login to Explore" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400 text-lg", children: subtitle || "Enter your details to access your travel dashboard." })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "max-w-md w-full mx-auto relative z-10", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mb-12 text-center lg:text-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "text-4xl font-bold text-slate-900 dark:text-white mb-4 tracking-tight", children: title || "Login to Explore" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-slate-500 dark:text-slate-400 text-lg", children: subtitle || "Enter your details to access your travel dashboard." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "form",
           {
             onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
             className: "space-y-6",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4321,8 +4535,8 @@ var TravelLogin = ({
                   type: "email",
                   disabled: isLoading,
                   placeholder: "traveler@world.com",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    import_lucide_react12.Mail,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_lucide_react14.Mail,
                     {
                       size: 18,
                       className: "text-slate-400 dark:text-slate-500"
@@ -4331,7 +4545,7 @@ var TravelLogin = ({
                   className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-14 rounded-xl"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4340,8 +4554,8 @@ var TravelLogin = ({
                   type: "password",
                   disabled: isLoading,
                   placeholder: "Secret journey phrase",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    import_lucide_react12.Lock,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    import_lucide_react14.Lock,
                     {
                       size: 18,
                       className: "text-slate-400 dark:text-slate-500"
@@ -4350,8 +4564,8 @@ var TravelLogin = ({
                   className: "bg-slate-50 dark:bg-slate-900/50 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white h-14 rounded-xl"
                 }
               ),
-              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-orange-600 dark:text-orange-400 text-sm font-bold text-center lg:text-left animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-orange-600 dark:text-orange-400 text-sm font-bold text-center lg:text-left animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 Button,
                 {
                   type: "submit",
@@ -4359,7 +4573,7 @@ var TravelLogin = ({
                   className: "w-full bg-orange-500 hover:bg-orange-600 text-white h-14 rounded-xl font-bold text-lg flex items-center justify-center gap-2 transition-all",
                   children: [
                     isLoading ? "Logging in..." : "Start Journey",
-                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Plane, { size: 20, className: "rotate-45" })
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Plane, { size: 20, className: "rotate-45" })
                   ]
                 }
               )
@@ -4380,40 +4594,40 @@ var HealthcareLogin = ({
   backUrl,
   isLoading
 }) => {
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-[#F0F7FF] dark:bg-slate-950 transition-colors", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full lg:w-[450px] flex flex-col justify-center bg-white dark:bg-slate-900 shadow-2xl z-30 relative px-10 lg:px-14 transition-colors", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
-        backUrl && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const navigate = (0, import_react_router_dom3.useNavigate)();
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex h-screen w-full overflow-hidden bg-[#F0F7FF] dark:bg-slate-950 transition-colors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "w-full lg:w-[450px] flex flex-col justify-center bg-white dark:bg-slate-900 shadow-2xl z-30 relative px-10 lg:px-14 transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "absolute top-4 right-4 z-50 flex items-center gap-2", children: [
+        backUrl && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
             onClick: () => navigate(backUrl),
             disabled: isLoading,
             className: "p-2 rounded-lg text-slate-500 hover:text-blue-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-blue-400 dark:hover:bg-slate-800 transition-colors flex items-center gap-2 font-medium disabled:opacity-50",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.ArrowLeft, { size: 18 }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-sm font-semibold", children: "Back" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.ArrowLeft, { size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm font-semibold", children: "Back" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeToggle, {})
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThemeToggle, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "max-w-[340px] w-full mx-auto", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-14", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3 mb-8", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-12 w-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-md shadow-blue-200 dark:shadow-blue-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.HeartPulse, { className: "text-white w-7 h-7" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl font-bold text-slate-800 dark:text-white tracking-tight", children: brandName || "CarePoint" })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "max-w-[340px] w-full mx-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mb-14", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-3 mb-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-12 w-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-md shadow-blue-200 dark:shadow-blue-900/20", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.HeartPulse, { className: "text-white w-7 h-7" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl font-bold text-slate-800 dark:text-white tracking-tight", children: brandName || "CarePoint" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-3xl font-bold text-slate-800 dark:text-white mb-3 tracking-tight", children: title || "Clinical Login" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-slate-500 dark:text-slate-400 font-medium leading-relaxed", children: subtitle || "Secure access for staff and healthcare professionals." })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: "text-3xl font-bold text-slate-800 dark:text-white mb-3 tracking-tight", children: title || "Clinical Login" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-slate-500 dark:text-slate-400 font-medium leading-relaxed", children: subtitle || "Secure access for staff and healthcare professionals." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "form",
           {
             onSubmit: form.handleSubmit((d) => onSubmit(d, form)),
             className: "space-y-7",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4422,11 +4636,11 @@ var HealthcareLogin = ({
                   type: "email",
                   disabled: isLoading,
                   placeholder: "dr.name@carepoint.org",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Mail, { size: 18, className: "text-blue-500" }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Mail, { size: 18, className: "text-blue-500" }),
                   className: "bg-slate-50/50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white h-13 rounded-lg border-2"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Fields_default.Input,
                 {
                   form,
@@ -4435,12 +4649,12 @@ var HealthcareLogin = ({
                   type: "password",
                   disabled: isLoading,
                   placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Lock, { size: 18, className: "text-blue-500" }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Lock, { size: 18, className: "text-blue-500" }),
                   className: "bg-slate-50/50 dark:bg-slate-800/50 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-white h-13 rounded-lg border-2"
                 }
               ),
-              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-600 dark:text-red-400 text-sm font-bold animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+              form.formState.errors.root && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-600 dark:text-red-400 text-sm font-bold animate-in fade-in slide-in-from-top-1 duration-200", children: form.formState.errors.root.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
                 Button,
                 {
                   type: "submit",
@@ -4448,7 +4662,7 @@ var HealthcareLogin = ({
                   className: "w-full bg-blue-600 hover:bg-blue-700 text-white h-13 rounded-lg font-bold flex items-center justify-center gap-2 transition-all shadow-lg active:translate-y-0.5",
                   children: [
                     isLoading ? "Logging in..." : "Secure Login",
-                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.MonitorCheck, { size: 18 })
+                    !isLoading && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.MonitorCheck, { size: 18 })
                   ]
                 }
               )
@@ -4457,19 +4671,19 @@ var HealthcareLogin = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "hidden lg:flex flex-1 relative overflow-hidden bg-slate-900", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "hidden lg:flex flex-1 relative overflow-hidden bg-slate-900", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: "absolute inset-0 z-0 bg-cover bg-center brightness-110",
           style: { backgroundImage: `url('${image || "/medicine_bg.png"}')` }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute inset-0 bg-linear-to-l from-transparent via-blue-900/10 to-blue-900/40 z-10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative z-20 p-20 flex flex-col items-center justify-center w-full h-full text-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-w-2xl bg-white/20 backdrop-blur-xl border border-white/30 p-12 rounded-[40px] shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("h1", { className: "text-5xl font-black text-white mb-6 leading-tight drop-shadow-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute inset-0 bg-linear-to-l from-transparent via-blue-900/10 to-blue-900/40 z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "relative z-20 p-20 flex flex-col items-center justify-center w-full h-full text-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "max-w-2xl bg-white/20 backdrop-blur-xl border border-white/30 p-12 rounded-[40px] shadow-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("h1", { className: "text-5xl font-black text-white mb-6 leading-tight drop-shadow-sm", children: [
         "Next-Gen ",
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-blue-100", children: "Patient Management" })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-blue-100", children: "Patient Management" })
       ] }) }) })
     ] })
   ] });
@@ -4477,18 +4691,18 @@ var HealthcareLogin = ({
 var ThemedLogin = (props) => {
   switch (props.theme) {
     case "tech":
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TechLogin, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TechLogin, { ...props });
     case "travel":
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TravelLogin, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TravelLogin, { ...props });
     case "healthcare":
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HealthcareLogin, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(HealthcareLogin, { ...props });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TechLogin, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TechLogin, { ...props });
   }
 };
 
 // src/hooks/useLogin.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var defaultLoginSchema = z.object({
   email: z.string().email("Invalid email address"),
   password: z.string().min(1, "Password is required")
@@ -4501,12 +4715,12 @@ var useLogin = (props) => {
       password: ""
     }
   });
-  const propsRef = import_react19.default.useRef(props);
+  const propsRef = import_react21.default.useRef(props);
   propsRef.current = props;
-  const Login = import_react19.default.useMemo(() => {
+  const Login = import_react21.default.useMemo(() => {
     const StableLogin = () => {
       const currentProps = propsRef.current;
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ThemedLogin,
         {
           form,
@@ -4530,19 +4744,20 @@ var useLogin = (props) => {
 };
 
 // src/components/ProfileDropdown.tsx
-var import_react20 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var ProfileDropdown = ({
   name,
   image,
   items,
   className,
   triggerMode = "click",
-  size = "md"
+  size = "md",
+  role
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
-  const dropdownRef = (0, import_react20.useRef)(null);
-  const [loadingItems, setLoadingItems] = (0, import_react20.useState)({});
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const dropdownRef = (0, import_react22.useRef)(null);
+  const [loadingItems, setLoadingItems] = (0, import_react22.useState)({});
   const sizeConfigs = {
     sm: {
       avatar: "h-8 w-8",
@@ -4567,7 +4782,7 @@ var ProfileDropdown = ({
     }
   };
   const currentSize = sizeConfigs[size];
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -4603,7 +4818,7 @@ var ProfileDropdown = ({
     }
   };
   const fallbackInitial = name ? name.charAt(0).toUpperCase() : "?";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref: dropdownRef,
@@ -4611,7 +4826,7 @@ var ProfileDropdown = ({
       onMouseEnter: openDropdown,
       onMouseLeave: closeDropdown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
           "button",
           {
             type: "button",
@@ -4621,21 +4836,21 @@ var ProfileDropdown = ({
               currentSize.container
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "div",
                 {
                   className: cn(
                     "relative overflow-hidden rounded-full ring-2 ring-transparent group-hover:ring-blue-500/30 transition-all duration-300 shadow-sm border border-gray-100 dark:border-white/10 flex items-center justify-center bg-blue-50 dark:bg-blue-900/20",
                     currentSize.avatar
                   ),
-                  children: image ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: image ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "img",
                     {
                       src: image,
                       alt: name,
                       className: "h-full w-full object-cover"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "span",
                     {
                       className: cn(
@@ -4647,8 +4862,8 @@ var ProfileDropdown = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-start mr-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-start mr-1 min-w-[80px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
                     className: cn(
@@ -4658,18 +4873,18 @@ var ProfileDropdown = ({
                     children: name
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                role && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
                     className: cn(
                       "text-gray-500 dark:text-gray-400 uppercase tracking-wider font-medium",
                       currentSize.role
                     ),
-                    children: "Account"
+                    children: role
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "svg",
                 {
                   className: cn(
@@ -4679,7 +4894,7 @@ var ProfileDropdown = ({
                   fill: "none",
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -4693,9 +4908,9 @@ var ProfileDropdown = ({
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-0 top-full pt-2 w-64 origin-top-right z-50 group-data-[state=open]:animate-in group-data-[state=closed]:animate-out fade-in zoom-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "py-2", children: items.map((item, index) => {
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute right-0 top-full pt-2 w-64 origin-top-right z-50 group-data-[state=open]:animate-in group-data-[state=closed]:animate-out fade-in zoom-in duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-2xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "py-2", children: items.map((item, index) => {
           const isLoading = loadingItems[index];
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "button",
             {
               onClick: () => handleItemClick(item, index),
@@ -4707,8 +4922,8 @@ var ProfileDropdown = ({
                 item.className
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LoadingSpin, { size: "sm", className: "text-blue-500" }) : item.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "flex-grow text-left font-medium", children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-shrink-0 flex items-center justify-center w-5 h-5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoadingSpin, { size: "sm", className: "text-blue-500" }) : item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex-grow text-left font-medium", children: item.label })
               ]
             },
             index
@@ -4720,10 +4935,10 @@ var ProfileDropdown = ({
 };
 
 // src/hooks/Fetches/useA4DataView.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_react_to_print = require("react-to-print");
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var useA4StatementView = ({
   url,
   v = 1,
@@ -4732,7 +4947,7 @@ var useA4StatementView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = (0, import_react21.useRef)(null);
+  const contentRef = (0, import_react23.useRef)(null);
   const reactToPrintFn = (0, import_react_to_print.useReactToPrint)({
     contentRef
   });
@@ -4742,7 +4957,7 @@ var useA4StatementView = ({
       await get({ url, v, params, delay });
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4DataViewComponent = ({
@@ -4773,12 +4988,12 @@ var useA4StatementView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = (0, import_react21.useRef)(null);
-    const [pages, setPages] = (0, import_react21.useState)([]);
-    const [isMeasuring, setIsMeasuring] = (0, import_react21.useState)(true);
-    const [globalFilter, setGlobalFilter] = (0, import_react21.useState)("");
-    const [currentPageIndex, setCurrentPageIndex] = (0, import_react21.useState)(0);
-    const [pageSearch, setPageSearch] = (0, import_react21.useState)("");
+    const measureContainerRef = (0, import_react23.useRef)(null);
+    const [pages, setPages] = (0, import_react23.useState)([]);
+    const [isMeasuring, setIsMeasuring] = (0, import_react23.useState)(true);
+    const [globalFilter, setGlobalFilter] = (0, import_react23.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react23.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react23.useState)("");
     const displayColumnsForSearch = columns.filter((col) => !col.hide);
     const filteredDisplayData = data.filter((row) => {
       if (!globalFilter) return true;
@@ -4794,20 +5009,20 @@ var useA4StatementView = ({
     const columnsWithFooters = columns.filter(
       (col) => col.renderFooter && !col.hide
     );
-    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    const DisplayFinalTotalEl = columnsWithFooters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         id: "a4-final-total",
         className: "mt-6 flex flex-wrap justify-end items-center pt-4 border-t border-black dark:border-zinc-700 print:border-black gap-4",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
-          columnsWithFooters.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs mr-auto", children: "Grand Totals" }),
+          columnsWithFooters.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "div",
             {
               className: "flex items-center gap-3 px-4 py-2 rounded-md border border-black dark:border-zinc-700 print:border-black",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-xs", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
               ]
             },
             col.key || idx
@@ -4823,7 +5038,7 @@ var useA4StatementView = ({
         renderFooter: c.renderFooter ? c.renderFooter.toString() : ""
       }))
     });
-    (0, import_react21.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (filteredDisplayData && filteredDisplayData.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -4838,7 +5053,7 @@ var useA4StatementView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    (0, import_react21.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (!isMeasuring || filteredDisplayData.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -4894,28 +5109,28 @@ var useA4StatementView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h1", { className: "text-4xl font-bold text-blue-600 dark:text-blue-500 print:text-blue-600 tracking-tight uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-gray-500 dark:text-gray-400 print:text-gray-500 mt-1 uppercase text-xs font-semibold tracking-wider", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
-              store?.address && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: store.email })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-lg font-bold text-gray-800 dark:text-gray-100 print:text-gray-800", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "text-sm text-gray-500 dark:text-gray-400 print:text-gray-500 leading-relaxed text-right flex flex-col items-end", children: [
+              store?.address && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       InfoGrid,
       {
         className: "mb-4",
@@ -4923,29 +5138,29 @@ var useA4StatementView = ({
         isLoading: isActuallyLoading
       }
     ) }) : null;
-    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
-      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    const statusOverlay = isActuallyLoading || error || !data || data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Statement" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your statement." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the statement data." : "There are no transactions or records available in this requested statement." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "button",
         {
           onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             "div",
             {
               ref: measureContainerRef,
@@ -4953,9 +5168,9 @@ var useA4StatementView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-800 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     SimpleTable,
                     {
                       columns,
@@ -4973,52 +5188,52 @@ var useA4StatementView = ({
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageData, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: [
                   headers,
-                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-end  ", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                       "button",
                       {
                         onClick: async () => await getData(),
                         disabled: isLoading,
                         className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                            import_lucide_react13.RefreshCw,
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            import_lucide_react15.RefreshCw,
                             {
                               size: 16,
                               className: isLoading ? "animate-spin" : ""
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                       "button",
                       {
                         onClick: () => reactToPrintFn(),
                         className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.Printer, { size: 16 }),
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.Printer, { size: 16 }),
                           "Print"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -5029,11 +5244,11 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === 0,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.ChevronLeft, { size: 18 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.ChevronLeft, { size: 18 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                           Select,
                           {
                             value: currentPageIndex + 1,
@@ -5046,9 +5261,9 @@ var useA4StatementView = ({
                             variant: "ghost",
                             containerClassName: "inline-block",
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                                   "input",
                                   {
                                     type: "text",
@@ -5060,17 +5275,17 @@ var useA4StatementView = ({
                                     autoFocus: true
                                   }
                                 ) }),
-                                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                   (p) => String(p).includes(pageSearch)
-                                ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectItem, { value: p, children: p }, p)) })
+                                ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectItem, { value: p, children: p }, p)) })
                               ] })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "button",
                         {
                           onClick: (e) => {
@@ -5081,7 +5296,7 @@ var useA4StatementView = ({
                           },
                           disabled: currentPageIndex === pages.length - 1,
                           className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react13.ChevronRight, { size: 18 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.ChevronRight, { size: 18 })
                         }
                       )
                     ] })
@@ -5089,10 +5304,10 @@ var useA4StatementView = ({
                 ] }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mb-4 border-b border-gray-200 dark:border-zinc-700 print:border-gray-200 pb-2 flex items-center gap-2 justify-between px-2 mt-2 print:hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-bold text-gray-800 dark:text-gray-100 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
                         type: "text",
@@ -5103,9 +5318,9 @@ var useA4StatementView = ({
                       }
                     )
                   ] }),
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
-                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-7 print:h-0" }),
-                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "hidden print:flex mb-4 border-b border-gray-200 print:border-gray-200 pb-2 items-center gap-2 justify-between px-2 mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: tableTitle }) }),
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-7 print:h-0" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     SimpleTable,
                     {
                       columns,
@@ -5141,10 +5356,10 @@ var useA4StatementView = ({
 var useA4DataView_default = useA4StatementView;
 
 // src/hooks/Fetches/useA4CategoryView.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_react_to_print2 = require("react-to-print");
-var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var useA4CategoryView = ({
   url,
   v = 1,
@@ -5153,7 +5368,7 @@ var useA4CategoryView = ({
   startPage = 1
 } = {}) => {
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
-  const contentRef = (0, import_react22.useRef)(null);
+  const contentRef = (0, import_react24.useRef)(null);
   const reactToPrintFn = (0, import_react_to_print2.useReactToPrint)({
     contentRef
   });
@@ -5162,7 +5377,7 @@ var useA4CategoryView = ({
       await get({ url, v, params, delay });
     }
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay]);
   const A4CategoryView = ({
@@ -5181,12 +5396,12 @@ var useA4CategoryView = ({
   }) => {
     const { store } = useWarqadConfig();
     const isActuallyLoading = externalLoading ?? isLoading;
-    const measureContainerRef = (0, import_react22.useRef)(null);
-    const [pages, setPages] = (0, import_react22.useState)([]);
-    const [isMeasuring, setIsMeasuring] = (0, import_react22.useState)(true);
-    const [globalFilter, setGlobalFilter] = (0, import_react22.useState)("");
-    const [currentPageIndex, setCurrentPageIndex] = (0, import_react22.useState)(0);
-    const [pageSearch, setPageSearch] = (0, import_react22.useState)("");
+    const measureContainerRef = (0, import_react24.useRef)(null);
+    const [pages, setPages] = (0, import_react24.useState)([]);
+    const [isMeasuring, setIsMeasuring] = (0, import_react24.useState)(true);
+    const [globalFilter, setGlobalFilter] = (0, import_react24.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react24.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react24.useState)("");
     const groups = incomingGroups ? [...incomingGroups].sort(
       (a, b) => a.title.localeCompare(b.title)
     ) : data ? [{ title: gridTitle, items: data }] : [];
@@ -5217,7 +5432,7 @@ var useA4CategoryView = ({
       gridColumns,
       globalFilter
     });
-    (0, import_react22.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (flattenedNodes.length > 0) {
         setIsMeasuring(true);
         setPages((prev) => prev.length === 0 ? [[]] : prev);
@@ -5230,7 +5445,7 @@ var useA4CategoryView = ({
         setCurrentPageIndex(0);
       }
     }, [depsString]);
-    (0, import_react22.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!isMeasuring || flattenedNodes.length === 0) return;
       const timer = setTimeout(() => {
         if (!measureContainerRef.current) return;
@@ -5269,28 +5484,28 @@ var useA4CategoryView = ({
       }, 150);
       return () => clearTimeout(timer);
     }, [isMeasuring, depsString]);
-    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         className: "flex justify-between items-start mb-5 px-8 pt-8",
         id: "a4-header-section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
           ] }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "text-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
-              store?.address && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
-              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: store.phone }),
-              store?.email && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: store.email })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
+              store?.address && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: store.email })
             ] })
           ] })
         ]
       }
     );
-    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       InfoGrid,
       {
         className: "mb-4",
@@ -5300,40 +5515,40 @@ var useA4CategoryView = ({
     ) }) : null;
     const renderNode = (node) => {
       if (node.type === "header") {
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           className: "grid gap-4 px-2",
           style: { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` },
-          children: node.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: renderItem(item) }, j))
+          children: node.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: renderItem(item) }, j))
         }
       );
     };
-    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
-      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "button",
         {
           onClick: () => getData(),
           className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.RefreshCw, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.RefreshCw, { size: 14 }),
             "Try Again"
           ]
         }
       )
     ] }) }) : null;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
-      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           style: { width: "210mm", boxSizing: "border-box" },
           className: "bg-white",
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "div",
             {
               ref: measureContainerRef,
@@ -5341,56 +5556,56 @@ var useA4CategoryView = ({
               children: [
                 HeaderEl,
                 DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
               ]
             }
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             PageA4,
             {
               className: "w-full",
               pageNumber: pageIndex + 1,
               totalPages: pages.length,
               isLastPage: pageIndex === pages.length - 1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                     "button",
                     {
                       onClick: async () => await getData(),
                       disabled: isLoading,
                       className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                          import_lucide_react14.RefreshCw,
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                          import_lucide_react16.RefreshCw,
                           {
                             size: 16,
                             className: isLoading ? "animate-spin" : ""
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                     "button",
                     {
                       onClick: () => reactToPrintFn(),
                       className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.Printer, { size: 16 }),
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Printer, { size: 16 }),
                         "Print"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -5401,11 +5616,11 @@ var useA4CategoryView = ({
                         },
                         disabled: currentPageIndex === 0,
                         className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.ChevronLeft, { size: 18 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.ChevronLeft, { size: 18 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                         Select,
                         {
                           value: currentPageIndex + 1,
@@ -5418,9 +5633,9 @@ var useA4CategoryView = ({
                           variant: "ghost",
                           containerClassName: "inline-block",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                                 "input",
                                 {
                                   type: "text",
@@ -5432,17 +5647,17 @@ var useA4CategoryView = ({
                                   autoFocus: true
                                 }
                               ) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
                                 (p) => String(p).includes(pageSearch)
-                              ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectItem, { value: p, children: p }, p)) })
+                              ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectItem, { value: p, children: p }, p)) })
                             ] })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       "button",
                       {
                         onClick: (e) => {
@@ -5453,15 +5668,15 @@ var useA4CategoryView = ({
                         },
                         disabled: currentPageIndex === pages.length - 1,
                         className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react14.ChevronRight, { size: 18 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.ChevronRight, { size: 18 })
                       }
                     )
                   ] })
                 ] }) }) }),
                 pageIndex === 0 && HeaderEl,
                 pageIndex === 0 && DisplayInfoGridEl,
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
-                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "input",
                     {
                       type: "text",
@@ -5471,8 +5686,8 @@ var useA4CategoryView = ({
                       className: "block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
                     }
                   ) }),
-                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-14 print:h-14" }),
-                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: renderNode(node) }, i)) })
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-14 print:h-14" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: renderNode(node) }, i)) })
                 ] })
               ] })
             },
@@ -5494,10 +5709,10 @@ var useA4CategoryView = ({
 var useA4CategoryView_default = useA4CategoryView;
 
 // src/hooks/Fetches/useTransaction.tsx
-var import_react23 = require("react");
-var import_lucide_react15 = require("lucide-react");
+var import_react25 = require("react");
+var import_lucide_react17 = require("lucide-react");
 var import_moment = __toESM(require("moment"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var useTransaction = ({
   url,
   v = 1,
@@ -5505,7 +5720,7 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = (0, import_react23.useState)(
+  const [date, setDate] = (0, import_react25.useState)(
     (0, import_moment.default)().format("DD/MM/YYYY")
   );
   const dateObj = {};
@@ -5522,7 +5737,7 @@ var useTransaction = ({
       delay
     });
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -5545,25 +5760,26 @@ var useTransaction = ({
     className = "",
     title = "Untitled Transaction",
     description = "View your transactions",
+    showReload = true,
     onCreate,
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "div",
       {
         className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-          url && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+          error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "button",
             {
               onClick: () => getData(),
               className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.RefreshCw, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.RefreshCw, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -5571,14 +5787,14 @@ var useTransaction = ({
         ] })
       }
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Title, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card.Title, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Fields_default.DateInput,
             {
               value: date,
@@ -5588,20 +5804,31 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          showReload && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              className: "rounded-md! px-3!",
+              onClick: () => getData(),
+              isLoading,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.RefreshCw, { size: 16 })
+            }
+          ),
+          onCreate && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.Plus, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react17.Plus, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         DataTable,
         {
           columns,
@@ -5818,15 +6045,15 @@ var storage = {
 };
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 
 // ../../node_modules/@ant-design/icons/es/components/Context.js
-var import_react24 = require("react");
-var IconContext = /* @__PURE__ */ (0, import_react24.createContext)({});
+var import_react26 = require("react");
+var IconContext = /* @__PURE__ */ (0, import_react26.createContext)({});
 var Context_default = IconContext;
 
 // ../../node_modules/@ant-design/icons/es/components/AntdIcon.js
-var React16 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_clsx2 = require("clsx");
 
 // ../../node_modules/@ant-design/fast-color/es/presetColors.js
@@ -6673,7 +6900,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // ../../node_modules/@ant-design/icons/es/components/IconBase.js
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 
 // ../../node_modules/@rc-component/util/es/Dom/canUseDom.js
 function canUseDom() {
@@ -6829,17 +7056,17 @@ var preWarningFns = [];
 var preMessage = (fn) => {
   preWarningFns.push(fn);
 };
-function warning(valid, message2) {
+function warning(valid, message4) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "warning"), message2);
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "warning"), message4);
     if (finalMessage) {
       console.error(`Warning: ${finalMessage}`);
     }
   }
 }
-function note(valid, message2) {
+function note(valid, message4) {
   if (process.env.NODE_ENV !== "production" && !valid && console !== void 0) {
-    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "note"), message2);
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? "", "note"), message4);
     if (finalMessage) {
       console.warn(`Note: ${finalMessage}`);
     }
@@ -6848,29 +7075,29 @@ function note(valid, message2) {
 function resetWarned() {
   warned = {};
 }
-function call(method, valid, message2) {
-  if (!valid && !warned[message2]) {
-    method(false, message2);
-    warned[message2] = true;
+function call(method, valid, message4) {
+  if (!valid && !warned[message4]) {
+    method(false, message4);
+    warned[message4] = true;
   }
 }
-function warningOnce(valid, message2) {
-  call(warning, valid, message2);
+function warningOnce(valid, message4) {
+  call(warning, valid, message4);
 }
-function noteOnce(valid, message2) {
-  call(note, valid, message2);
+function noteOnce(valid, message4) {
+  call(note, valid, message4);
 }
 warningOnce.preMessage = preMessage;
 warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
 // ../../node_modules/@ant-design/icons/es/utils.js
-var import_react25 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 function camelCase(input) {
   return input.replace(/-(.)/g, (match, g) => g.toUpperCase());
 }
-function warning2(valid, message2) {
-  warningOnce(valid, `[@ant-design/icons] ${message2}`);
+function warning2(valid, message4) {
+  warningOnce(valid, `[@ant-design/icons] ${message4}`);
 }
 function isIconDefinition(target) {
   return typeof target === "object" && typeof target.name === "string" && typeof target.theme === "string" && (typeof target.icon === "object" || typeof target.icon === "function");
@@ -6892,12 +7119,12 @@ function normalizeAttrs(attrs = {}) {
 }
 function generate2(node, key, rootProps) {
   if (!rootProps) {
-    return /* @__PURE__ */ import_react25.default.createElement(node.tag, {
+    return /* @__PURE__ */ import_react27.default.createElement(node.tag, {
       key,
       ...normalizeAttrs(node.attrs)
     }, (node.children || []).map((child, index) => generate2(child, `${key}-${node.tag}-${index}`)));
   }
-  return /* @__PURE__ */ import_react25.default.createElement(node.tag, {
+  return /* @__PURE__ */ import_react27.default.createElement(node.tag, {
     key,
     ...normalizeAttrs(node.attrs),
     ...rootProps
@@ -6974,7 +7201,7 @@ var useInsertStyles = (eleRef) => {
     csp,
     prefixCls,
     layer
-  } = (0, import_react25.useContext)(Context_default);
+  } = (0, import_react27.useContext)(Context_default);
   let mergedStyleStr = iconStyles;
   if (prefixCls) {
     mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
@@ -6984,7 +7211,7 @@ var useInsertStyles = (eleRef) => {
 ${mergedStyleStr}
 }`;
   }
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);
     updateCSS(mergedStyleStr, "@ant-design-icons", {
@@ -7024,7 +7251,7 @@ var IconBase = (props) => {
     secondaryColor,
     ...restProps
   } = props;
-  const svgRef = React15.useRef(null);
+  const svgRef = React17.useRef(null);
   let colors = twoToneColorPalette;
   if (primaryColor) {
     colors = {
@@ -7094,7 +7321,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 setTwoToneColor(blue.primary);
-var Icon = /* @__PURE__ */ React16.forwardRef((props, ref) => {
+var Icon = /* @__PURE__ */ React18.forwardRef((props, ref) => {
   const {
     // affect outter <i>...</i>
     className,
@@ -7111,7 +7338,7 @@ var Icon = /* @__PURE__ */ React16.forwardRef((props, ref) => {
   const {
     prefixCls = "anticon",
     rootClassName
-  } = React16.useContext(Context_default);
+  } = React18.useContext(Context_default);
   const classString = (0, import_clsx2.clsx)(rootClassName, prefixCls, {
     [`${prefixCls}-${icon.name}`]: !!icon.name,
     [`${prefixCls}-spin`]: !!spin || icon.name === "loading"
@@ -7125,7 +7352,7 @@ var Icon = /* @__PURE__ */ React16.forwardRef((props, ref) => {
     transform: `rotate(${rotate}deg)`
   } : void 0;
   const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor);
-  return /* @__PURE__ */ React16.createElement("span", _extends({
+  return /* @__PURE__ */ React18.createElement("span", _extends({
     role: "img",
     "aria-label": icon.name
   }, restProps, {
@@ -7133,7 +7360,7 @@ var Icon = /* @__PURE__ */ React16.forwardRef((props, ref) => {
     tabIndex: iconTabIndex,
     onClick,
     className: classString
-  }), /* @__PURE__ */ React16.createElement(IconBase_default, {
+  }), /* @__PURE__ */ React18.createElement(IconBase_default, {
     icon,
     primaryColor,
     secondaryColor,
@@ -7148,7 +7375,7 @@ if (process.env.NODE_ENV !== "production") {
 var AntdIcon_default = Icon;
 
 // ../../node_modules/@ant-design/icons/es/icons/PlusOutlined.js
-var React17 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 
 // ../../node_modules/@ant-design/icons-svg/es/asn/PlusOutlined.js
 var PlusOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" } }, { "tag": "path", "attrs": { "d": "M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z" } }] }, "name": "plus", "theme": "outlined" };
@@ -7169,19 +7396,19 @@ function _extends2() {
   };
   return _extends2.apply(this, arguments);
 }
-var PlusOutlined2 = (props, ref) => /* @__PURE__ */ React17.createElement(AntdIcon_default, _extends2({}, props, {
+var PlusOutlined2 = (props, ref) => /* @__PURE__ */ React19.createElement(AntdIcon_default, _extends2({}, props, {
   ref,
   icon: PlusOutlined_default
 }));
-var RefIcon = /* @__PURE__ */ React17.forwardRef(PlusOutlined2);
+var RefIcon = /* @__PURE__ */ React19.forwardRef(PlusOutlined2);
 if (process.env.NODE_ENV !== "production") {
   RefIcon.displayName = "PlusOutlined";
 }
 var PlusOutlined_default2 = RefIcon;
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-var import_antd2 = require("antd");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_antd4 = require("antd");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var getBase64 = (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
@@ -7189,9 +7416,9 @@ var getBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 var useAntdImageUpload = ({ length = 1 }) => {
-  const [fileList, setFileList] = (0, import_react26.useState)([]);
-  const [previewOpen, setPreviewOpen] = (0, import_react26.useState)(false);
-  const [previewImage, setPreviewImage] = (0, import_react26.useState)("");
+  const [fileList, setFileList] = (0, import_react28.useState)([]);
+  const [previewOpen, setPreviewOpen] = (0, import_react28.useState)(false);
+  const [previewImage, setPreviewImage] = (0, import_react28.useState)("");
   const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
@@ -7208,23 +7435,23 @@ var useAntdImageUpload = ({ length = 1 }) => {
       }))
     );
   };
-  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_antd2.Upload,
+  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_antd4.Upload,
       {
         listType: "picture-card",
         fileList,
         onPreview: handlePreview,
         onChange: handleChange,
         beforeUpload: () => false,
-        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PlusOutlined_default2, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
+        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlusOutlined_default2, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
         ] })
       }
     ),
-    previewImage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_antd2.Image,
+    previewImage && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_antd4.Image,
       {
         style: { display: "none" },
         preview: {
@@ -7241,10 +7468,10 @@ var useAntdImageUpload = ({ length = 1 }) => {
 var useAntdImageUpload_default = useAntdImageUpload;
 
 // src/components/Views/CategoryView.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var CategoryCard = ({ item }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "img",
       {
         src: item.image,
@@ -7252,7 +7479,7 @@ var CategoryCard = ({ item }) => {
         className: "w-full h-full object-cover"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
   ] });
 };
 var CategoryView = ({
@@ -7260,20 +7487,20 @@ var CategoryView = ({
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "max-w-7xl mx-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mb-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CategoryCard, { item }, item.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CategoryCard, { item }, item.id)) })
   ] }) });
 };
 var CategoryView_default = CategoryView;
 
 // src/components/Views/Transaction.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Transaction = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: "Transaction" });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: "Transaction" });
 };
 var Transaction_default = Transaction;
 
@@ -7286,9 +7513,9 @@ var Views = {
 var Views_default = Views;
 
 // src/components/Guard.tsx
-var import_react27 = require("react");
-var import_react_router_dom3 = require("react-router-dom");
-var import_antd3 = require("antd");
+var import_react29 = require("react");
+var import_react_router_dom4 = require("react-router-dom");
+var import_antd5 = require("antd");
 
 // src/store/useAuthStore.ts
 var import_zustand = require("zustand");
@@ -7380,12 +7607,12 @@ var useAuth = () => {
 var useAuth_default = useAuth;
 
 // src/components/Guard.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Guard = () => {
   const { get } = useApis_default();
-  const location = (0, import_react_router_dom3.useLocation)();
+  const location = (0, import_react_router_dom4.useLocation)();
   const { login, setIsLoggedIn, setIsFetched, isFetched } = useAuth();
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     const fetchProfile = async () => {
       try {
         const res = await get({
@@ -7405,27 +7632,27 @@ var Guard = () => {
     fetchProfile();
   }, [location.pathname]);
   if (!isFetched) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoadingSpin, { size: "lg" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LoadingSpin, { size: "lg" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Outlet, {});
 };
 var ProtectedRoute = () => {
   const { isLoggedIn } = useAuth();
-  const location = (0, import_react_router_dom3.useLocation)();
-  return isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: "/login", state: { from: location }, replace: true });
+  const location = (0, import_react_router_dom4.useLocation)();
+  return isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Navigate, { to: "/login", state: { from: location }, replace: true });
 };
 var UnProtectedRoute = () => {
   const { isLoggedIn, user } = useAuth();
-  return !isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: user?.homePath || "/", replace: true });
+  return !isLoggedIn ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Navigate, { to: user?.homePath || "/", replace: true });
 };
 var AdminProtectedRoute = () => {
   const { role } = useAuth();
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (role && !["admin"].includes(role)) {
-      import_antd3.message.error("Only admin can access this page");
+      import_antd5.message.error("Only admin can access this page");
     }
   }, [role]);
-  return role && ["admin"].includes(role) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_router_dom3.Navigate, { to: "/", replace: true });
+  return role && ["admin"].includes(role) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Outlet, {}) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom4.Navigate, { to: "/", replace: true });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7457,7 +7684,9 @@ var AdminProtectedRoute = () => {
   PageHeader,
   PhoneInput,
   PostTable,
+  ProfileCard,
   ProfileDropdown,
+  ProfileView,
   ProtectedRoute,
   SearchApi,
   SearchApiContent,