warqadui 0.0.48 → 0.0.50

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
+  CategoryCard: () => CategoryCard,
   ClassicSpin: () => ClassicSpin,
   CodeBlock: () => CodeBlock,
   DashboardLayout: () => DashboardLayout,
@@ -68,9 +69,11 @@ __export(index_exports, {
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   ThemeToggle: () => ThemeToggle,
+  Views: () => Views_default,
   WarqadProvider: () => WarqadProvider,
   generatePdf: () => generatePdf,
   storage: () => storage,
+  useA4CategoryView: () => useA4CategoryView_default,
   useA4StatementView: () => useA4DataView_default,
   useAntdImageUpload: () => useAntdImageUpload_default,
   useApi: () => useApis_default,
@@ -4515,11 +4518,364 @@ var useA4StatementView = ({
 };
 var useA4DataView_default = useA4StatementView;
 
-// src/hooks/Fetches/useTransaction.tsx
+// src/hooks/Fetches/useA4CategoryView.tsx
 var import_react20 = require("react");
+var import_react_to_print2 = require("react-to-print");
 var import_lucide_react13 = require("lucide-react");
-var import_moment = __toESM(require("moment"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
+var useA4CategoryView = ({
+  url,
+  v = 1,
+  delay,
+  params,
+  startPage = 1
+} = {}) => {
+  const { data: apiData, isLoading, get, error: apiError } = useApis_default();
+  const contentRef = (0, import_react20.useRef)(null);
+  const reactToPrintFn = (0, import_react_to_print2.useReactToPrint)({
+    contentRef
+  });
+  const getData = async () => {
+    if (url) {
+      await get({ url, v, params, delay });
+    }
+  };
+  (0, import_react20.useEffect)(() => {
+    getData();
+  }, [url, v, JSON.stringify(params), delay]);
+  const A4CategoryView = ({
+    data,
+    groups: incomingGroups,
+    error = apiError,
+    info,
+    title = "Inventory Report",
+    subtitle = "Official Category List",
+    printable = true,
+    gridTitle = "Items List",
+    startPage: componentStartPage = startPage,
+    isLoading: externalLoading,
+    renderItem,
+    gridColumns = 4
+  }) => {
+    const { store } = useWarqadConfig();
+    const isActuallyLoading = externalLoading ?? isLoading;
+    const measureContainerRef = (0, import_react20.useRef)(null);
+    const [pages, setPages] = (0, import_react20.useState)([]);
+    const [isMeasuring, setIsMeasuring] = (0, import_react20.useState)(true);
+    const [globalFilter, setGlobalFilter] = (0, import_react20.useState)("");
+    const [currentPageIndex, setCurrentPageIndex] = (0, import_react20.useState)(0);
+    const [pageSearch, setPageSearch] = (0, import_react20.useState)("");
+    const groups = incomingGroups ? [...incomingGroups].sort(
+      (a, b) => a.title.localeCompare(b.title)
+    ) : data ? [{ title: gridTitle, items: data }] : [];
+    const flattenedNodes = groups.map((group) => {
+      const sortedItems = [...group.items].sort(
+        (a, b) => String(a.name).localeCompare(String(b.name))
+      );
+      const filteredItems = sortedItems.filter((row) => {
+        if (!globalFilter) return true;
+        const lowerFilter = globalFilter.toLowerCase();
+        return Object.values(row).some(
+          (val) => String(val).toLowerCase().includes(lowerFilter)
+        );
+      });
+      if (filteredItems.length === 0) return [];
+      const nodes = [{ type: "header", title: group.title }];
+      const rows = Array.from(
+        { length: Math.ceil(filteredItems.length / gridColumns) },
+        (_, i) => filteredItems.slice(i * gridColumns, i * gridColumns + gridColumns)
+      );
+      rows.forEach((rowItems) => {
+        nodes.push({ type: "row", items: rowItems });
+      });
+      return nodes;
+    }).flat();
+    const depsString = JSON.stringify({
+      nodeCount: flattenedNodes.length,
+      gridColumns,
+      globalFilter
+    });
+    (0, import_react20.useEffect)(() => {
+      if (flattenedNodes.length > 0) {
+        setIsMeasuring(true);
+        setPages((prev) => prev.length === 0 ? [[]] : prev);
+        if (componentStartPage !== -1) {
+          setCurrentPageIndex(Math.max(0, componentStartPage - 1));
+        }
+      } else {
+        setIsMeasuring(false);
+        setPages([[]]);
+        setCurrentPageIndex(0);
+      }
+    }, [depsString]);
+    (0, import_react20.useEffect)(() => {
+      if (!isMeasuring || flattenedNodes.length === 0) return;
+      const timer = setTimeout(() => {
+        if (!measureContainerRef.current) return;
+        const container = measureContainerRef.current;
+        const headerEl = container.querySelector("#a4-header-section");
+        const infoGridEl = container.querySelector("#a4-info-grid");
+        const nodeEls = container.querySelectorAll(".a4-measure-node");
+        const getH = (el) => el ? el.offsetHeight : 0;
+        const headerHeight = getH(headerEl);
+        const infoGridHeight = getH(infoGridEl);
+        let currentChunks = [];
+        let currentChunk = [];
+        let currentHeight = headerHeight + infoGridHeight + 20;
+        Array.from(nodeEls).forEach((node, i) => {
+          const nodeHeight = getH(node);
+          const currentPageLimit = currentChunks.length === 0 ? 940 : 980;
+          if (currentHeight + nodeHeight > currentPageLimit) {
+            if (currentChunk.length > 0) {
+              currentChunks.push([...currentChunk]);
+              currentChunk = [];
+              currentHeight = 80;
+            }
+          }
+          currentChunk.push(flattenedNodes[i]);
+          currentHeight += nodeHeight + 4;
+        });
+        if (currentChunk.length > 0) {
+          currentChunks.push([...currentChunk]);
+        }
+        const finalPages = currentChunks.length > 0 ? currentChunks : [[]];
+        setPages(finalPages);
+        if (componentStartPage === -1) {
+          setCurrentPageIndex(finalPages.length - 1);
+        }
+        setIsMeasuring(false);
+      }, 150);
+      return () => clearTimeout(timer);
+    }, [isMeasuring, depsString]);
+    const HeaderEl = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "div",
+      {
+        className: "flex justify-between items-start mb-5 px-8 pt-8",
+        id: "a4-header-section",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
+          ] }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
+              store?.address && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: store.email })
+            ] })
+          ] })
+        ]
+      }
+    );
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      InfoGrid,
+      {
+        className: "mb-4",
+        items: info,
+        isLoading: isActuallyLoading
+      }
+    ) }) : null;
+    const renderNode = (node) => {
+      if (node.type === "header") {
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          className: "grid gap-4 px-2",
+          style: { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` },
+          children: node.items.map((item, j) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: renderItem(item) }, j))
+        }
+      );
+    };
+    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ClassicSpin, {}) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
+      url && !isActuallyLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "button",
+        {
+          onClick: () => getData(),
+          className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
+            "Try Again"
+          ]
+        }
+      )
+    ] }) }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          style: { width: "210mm", boxSizing: "border-box" },
+          className: "bg-white",
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "div",
+            {
+              ref: measureContainerRef,
+              className: "flex flex-col w-full h-full",
+              children: [
+                HeaderEl,
+                DisplayInfoGridEl,
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
+              ]
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            PageA4,
+            {
+              className: "w-full",
+              pageNumber: pageIndex + 1,
+              totalPages: pages.length,
+              isLastPage: pageIndex === pages.length - 1,
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    "button",
+                    {
+                      onClick: async () => await getData(),
+                      disabled: isLoading,
+                      className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                          import_lucide_react13.RefreshCw,
+                          {
+                            size: 16,
+                            className: isLoading ? "animate-spin" : ""
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs font-semibold", children: "Reload" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                    "button",
+                    {
+                      onClick: () => reactToPrintFn(),
+                      className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Printer, { size: 16 }),
+                        "Print"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setCurrentPageIndex(
+                            (p) => Math.max(0, p - 1)
+                          );
+                        },
+                        disabled: currentPageIndex === 0,
+                        className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronLeft, { size: 18 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+                        Select,
+                        {
+                          value: currentPageIndex + 1,
+                          onChange: (val) => {
+                            const num = Number(val);
+                            if (!isNaN(num)) {
+                              setCurrentPageIndex(num - 1);
+                            }
+                          },
+                          variant: "ghost",
+                          containerClassName: "inline-block",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                                "input",
+                                {
+                                  type: "text",
+                                  placeholder: "Page...",
+                                  className: "w-full px-2 py-1 text-[11px] border rounded bg-gray-50 dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 outline-none focus:ring-1 focus:ring-blue-500 text-gray-900 dark:text-white",
+                                  value: pageSearch,
+                                  onChange: (e) => setPageSearch(e.target.value),
+                                  onKeyDown: (e) => e.stopPropagation(),
+                                  autoFocus: true
+                                }
+                              ) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                (p) => String(p).includes(pageSearch)
+                              ).map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectItem, { value: p, children: p }, p)) })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setCurrentPageIndex(
+                            (p) => Math.min(pages.length - 1, p + 1)
+                          );
+                        },
+                        disabled: currentPageIndex === pages.length - 1,
+                        className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 disabled:opacity-30 transition-colors text-gray-600 dark:text-gray-400",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronRight, { size: 18 })
+                      }
+                    )
+                  ] })
+                ] }) }) }),
+                pageIndex === 0 && HeaderEl,
+                pageIndex === 0 && DisplayInfoGridEl,
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    "input",
+                    {
+                      type: "text",
+                      value: globalFilter,
+                      onChange: (e) => setGlobalFilter(e.target.value),
+                      placeholder: "Global Search...",
+                      className: "block w-full max-w-xs px-3 py-2 border border-gray-300 rounded-md text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
+                    }
+                  ) }),
+                  pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-14 print:h-14" }),
+                  statusOverlay ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: renderNode(node) }, i)) })
+                ] })
+              ] })
+            },
+            pageIndex
+          )
+        },
+        pageIndex
+      )) }) })
+    ] });
+  };
+  return {
+    A4CategoryView,
+    data: apiData,
+    isLoading,
+    get,
+    reactToPrintFn
+  };
+};
+var useA4CategoryView_default = useA4CategoryView;
+
+// src/hooks/Fetches/useTransaction.tsx
+var import_react21 = require("react");
+var import_lucide_react14 = require("lucide-react");
+var import_moment = __toESM(require("moment"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var useTransaction = ({
   url,
   v = 1,
@@ -4527,14 +4883,13 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = (0, import_react20.useState)(
+  const [date, setDate] = (0, import_react21.useState)(
     (0, import_moment.default)().format("DD/MM/YYYY")
   );
   const dateObj = {};
   if (date && dateFilter) dateObj.date = date;
   const { data: apiData, isLoading, get, error: apiError } = useApis_default();
   const getData = () => {
-    console.log(dateObj);
     get({
       url,
       v,
@@ -4545,7 +4900,7 @@ var useTransaction = ({
       delay
     });
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -4572,21 +4927,21 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
         className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: 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_runtime29.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+          error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.AlertCircle, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.FileX, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             "button",
             {
               onClick: () => getData(),
               className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.RefreshCw, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.RefreshCw, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -4594,14 +4949,14 @@ var useTransaction = ({
         ] })
       }
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Title, { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Title, { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Fields_default.DateInput,
             {
               value: date,
@@ -4611,20 +4966,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Plus, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Plus, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         DataTable,
         {
           columns,
@@ -4841,11 +5196,11 @@ var storage = {
 };
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // ../../node_modules/@ant-design/icons/es/components/Context.js
-var import_react21 = require("react");
-var IconContext = /* @__PURE__ */ (0, import_react21.createContext)({});
+var import_react22 = require("react");
+var IconContext = /* @__PURE__ */ (0, import_react22.createContext)({});
 var Context_default = IconContext;
 
 // ../../node_modules/@ant-design/icons/es/components/AntdIcon.js
@@ -5888,7 +6243,7 @@ warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
 // ../../node_modules/@ant-design/icons/es/utils.js
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 function camelCase(input) {
   return input.replace(/-(.)/g, (match, g) => g.toUpperCase());
 }
@@ -5915,12 +6270,12 @@ function normalizeAttrs(attrs = {}) {
 }
 function generate2(node, key, rootProps) {
   if (!rootProps) {
-    return /* @__PURE__ */ import_react22.default.createElement(node.tag, {
+    return /* @__PURE__ */ import_react23.default.createElement(node.tag, {
       key,
       ...normalizeAttrs(node.attrs)
     }, (node.children || []).map((child, index) => generate2(child, `${key}-${node.tag}-${index}`)));
   }
-  return /* @__PURE__ */ import_react22.default.createElement(node.tag, {
+  return /* @__PURE__ */ import_react23.default.createElement(node.tag, {
     key,
     ...normalizeAttrs(node.attrs),
     ...rootProps
@@ -5997,7 +6352,7 @@ var useInsertStyles = (eleRef) => {
     csp,
     prefixCls,
     layer
-  } = (0, import_react22.useContext)(Context_default);
+  } = (0, import_react23.useContext)(Context_default);
   let mergedStyleStr = iconStyles;
   if (prefixCls) {
     mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
@@ -6007,7 +6362,7 @@ var useInsertStyles = (eleRef) => {
 ${mergedStyleStr}
 }`;
   }
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);
     updateCSS(mergedStyleStr, "@ant-design-icons", {
@@ -6204,7 +6559,7 @@ var PlusOutlined_default2 = RefIcon;
 
 // src/hooks/uploads/useAntdImageUpload.tsx
 var import_antd2 = require("antd");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var getBase64 = (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
@@ -6212,9 +6567,9 @@ var getBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 var useAntdImageUpload = ({ length = 1 }) => {
-  const [fileList, setFileList] = (0, import_react23.useState)([]);
-  const [previewOpen, setPreviewOpen] = (0, import_react23.useState)(false);
-  const [previewImage, setPreviewImage] = (0, import_react23.useState)("");
+  const [fileList, setFileList] = (0, import_react24.useState)([]);
+  const [previewOpen, setPreviewOpen] = (0, import_react24.useState)(false);
+  const [previewImage, setPreviewImage] = (0, import_react24.useState)("");
   const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
@@ -6231,8 +6586,8 @@ var useAntdImageUpload = ({ length = 1 }) => {
       }))
     );
   };
-  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const ImageBox = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       import_antd2.Upload,
       {
         listType: "picture-card",
@@ -6240,13 +6595,13 @@ var useAntdImageUpload = ({ length = 1 }) => {
         onPreview: handlePreview,
         onChange: handleChange,
         beforeUpload: () => false,
-        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlusOutlined_default2, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
+        children: fileList.length >= length ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { style: { border: 0, background: "none" }, type: "button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PlusOutlined_default2, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: { marginTop: 8 }, children: "Upload" })
         ] })
       }
     ),
-    previewImage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    previewImage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       import_antd2.Image,
       {
         style: { display: "none" },
@@ -6262,6 +6617,51 @@ var useAntdImageUpload = ({ length = 1 }) => {
   return { ImageBox, fileList, setFileList };
 };
 var useAntdImageUpload_default = useAntdImageUpload;
+
+// src/components/Views/CategoryView.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var CategoryCard = ({ item }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "img",
+      {
+        src: item.image,
+        alt: item.name,
+        className: "w-full h-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
+  ] });
+};
+var CategoryView = ({
+  categoryName,
+  items,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CategoryCard, { item }, item.id)) })
+  ] }) });
+};
+var CategoryView_default = CategoryView;
+
+// src/components/Views/Transaction.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Transaction = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: "Transaction" });
+};
+var Transaction_default = Transaction;
+
+// src/components/Views/index.tsx
+var Views = {
+  Transaction: Transaction_default,
+  CategoryView: CategoryView_default,
+  CategoryCard
+};
+var Views_default = Views;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -6273,6 +6673,7 @@ var useAntdImageUpload_default = useAntdImageUpload;
   CardFooter,
   CardHeader,
   CardTitle,
+  CategoryCard,
   ClassicSpin,
   CodeBlock,
   DashboardLayout,
@@ -6302,9 +6703,11 @@ var useAntdImageUpload_default = useAntdImageUpload;
   Textarea,
   ThemeProvider,
   ThemeToggle,
+  Views,
   WarqadProvider,
   generatePdf,
   storage,
+  useA4CategoryView,
   useA4StatementView,
   useAntdImageUpload,
   useApi,