warqadui 0.0.48 → 0.0.50

package/dist/index.mjs

@@ -4497,11 +4497,371 @@ var useA4StatementView = ({
 };
 var useA4DataView_default = useA4StatementView;
 
+// src/hooks/Fetches/useA4CategoryView.tsx
+import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
+import { useReactToPrint as useReactToPrint2 } from "react-to-print";
+import {
+  RefreshCw as RefreshCw2,
+  Printer as Printer2,
+  AlertCircle as AlertCircle2,
+  FileX as FileX2,
+  ChevronLeft as ChevronLeft2,
+  ChevronRight as ChevronRight3
+} from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var useA4CategoryView = ({
+  url,
+  v = 1,
+  delay,
+  params,
+  startPage = 1
+} = {}) => {
+  const { data: apiData, isLoading, get, error: apiError } = useApis_default();
+  const contentRef = useRef7(null);
+  const reactToPrintFn = useReactToPrint2({
+    contentRef
+  });
+  const getData = async () => {
+    if (url) {
+      await get({ url, v, params, delay });
+    }
+  };
+  useEffect12(() => {
+    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 = useRef7(null);
+    const [pages, setPages] = useState17([]);
+    const [isMeasuring, setIsMeasuring] = useState17(true);
+    const [globalFilter, setGlobalFilter] = useState17("");
+    const [currentPageIndex, setCurrentPageIndex] = useState17(0);
+    const [pageSearch, setPageSearch] = useState17("");
+    const 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
+    });
+    useEffect12(() => {
+      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]);
+    useEffect12(() => {
+      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__ */ jsxs21(
+      "div",
+      {
+        className: "flex justify-between items-start mb-5 px-8 pt-8",
+        id: "a4-header-section",
+        children: [
+          /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs21("section", { children: [
+            /* @__PURE__ */ jsx29("h1", { className: "text-4xl font-black text-black dark:text-white print:text-black tracking-tighter uppercase", children: title }),
+            /* @__PURE__ */ jsx29("p", { className: "text-gray-600 dark:text-gray-400 print:text-gray-600 mt-1 uppercase text-xs font-bold tracking-widest", children: subtitle })
+          ] }) }) }),
+          /* @__PURE__ */ jsxs21("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx29("h2", { className: "text-lg font-black text-black dark:text-white print:text-black uppercase tracking-tight", children: store?.name }),
+            /* @__PURE__ */ jsxs21("div", { className: "text-sm text-gray-600 dark:text-gray-400 print:text-gray-600 leading-relaxed text-right flex flex-col items-end font-medium", children: [
+              store?.address && /* @__PURE__ */ jsx29("span", { className: "whitespace-pre-line", children: store.address }),
+              store?.phone && /* @__PURE__ */ jsx29("span", { children: store.phone }),
+              store?.email && /* @__PURE__ */ jsx29("span", { children: store.email })
+            ] })
+          ] })
+        ]
+      }
+    );
+    const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ jsx29("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ jsx29(
+      InfoGrid,
+      {
+        className: "mb-4",
+        items: info,
+        isLoading: isActuallyLoading
+      }
+    ) }) : null;
+    const renderNode = (node) => {
+      if (node.type === "header") {
+        return /* @__PURE__ */ jsx29("div", { className: "mb-4 border-b border-black print:border-black pb-2 flex items-center gap-2 justify-between px-2 mt-4", children: /* @__PURE__ */ jsx29("h3", { className: "text-sm font-black text-black dark:text-white print:text-black uppercase tracking-[0.2em]", children: node.title }) });
+      }
+      return /* @__PURE__ */ jsx29(
+        "div",
+        {
+          className: "grid gap-4 px-2",
+          style: { gridTemplateColumns: `repeat(${gridColumns}, 1fr)` },
+          children: node.items.map((item, j) => /* @__PURE__ */ jsx29("div", { children: renderItem(item) }, j))
+        }
+      );
+    };
+    const statusOverlay = isActuallyLoading || error || flattenedNodes.length === 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-col relative w-full items-center justify-center py-12 min-h-[400px]", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+      isActuallyLoading ? /* @__PURE__ */ jsx29("div", { className: "mb-4", children: /* @__PURE__ */ jsx29(ClassicSpin, {}) }) : error ? /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+      /* @__PURE__ */ jsx29("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: isActuallyLoading ? "Loading data..." : error ? "Failed to Load Report" : "No Records Found" }),
+      /* @__PURE__ */ jsx29("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: isActuallyLoading ? "Please wait while we prepare your report." : error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no items available in this requested report." }),
+      url && !isActuallyLoading && /* @__PURE__ */ jsxs21(
+        "button",
+        {
+          onClick: () => getData(),
+          className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
+          children: [
+            /* @__PURE__ */ jsx29(RefreshCw2, { size: 14 }),
+            "Try Again"
+          ]
+        }
+      )
+    ] }) }) : null;
+    return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col relative w-full items-center", children: [
+      isMeasuring && flattenedNodes.length > 0 && /* @__PURE__ */ jsx29("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ jsx29(
+        "div",
+        {
+          style: { width: "210mm", boxSizing: "border-box" },
+          className: "bg-white",
+          children: /* @__PURE__ */ jsxs21(
+            "div",
+            {
+              ref: measureContainerRef,
+              className: "flex flex-col w-full h-full",
+              children: [
+                HeaderEl,
+                DisplayInfoGridEl,
+                /* @__PURE__ */ jsx29("div", { className: "grow w-full px-8 pb-8", children: /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: flattenedNodes.map((node, i) => /* @__PURE__ */ jsx29("div", { className: "a4-measure-node", children: renderNode(node) }, i)) }) })
+              ]
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx29("div", { className: "py-2 px-0 md:px-4 w-full", ref: contentRef, children: /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-8 print:block print:gap-0 w-full items-center", children: pages.map((pageNodes, pageIndex) => /* @__PURE__ */ jsx29(
+        "div",
+        {
+          className: pageIndex === currentPageIndex ? "w-full" : "hidden print:block w-full",
+          children: /* @__PURE__ */ jsx29(
+            PageA4,
+            {
+              className: "w-full",
+              pageNumber: pageIndex + 1,
+              totalPages: pages.length,
+              isLastPage: pageIndex === pages.length - 1,
+              children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full grow w-full", children: [
+                /* @__PURE__ */ jsx29("header", { className: "flex justify-between gap-2 items-center px-8 pt-4 print:hidden", children: printable && pageIndex === currentPageIndex && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs21(
+                    "button",
+                    {
+                      onClick: async () => await getData(),
+                      disabled: isLoading,
+                      className: "flex items-center gap-2 px-3 py-1.5 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all disabled:opacity-50",
+                      children: [
+                        /* @__PURE__ */ jsx29(
+                          RefreshCw2,
+                          {
+                            size: 16,
+                            className: isLoading ? "animate-spin" : ""
+                          }
+                        ),
+                        /* @__PURE__ */ jsx29("span", { className: "text-xs font-semibold", children: "Reload" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs21(
+                    "button",
+                    {
+                      onClick: () => reactToPrintFn(),
+                      className: "flex items-center gap-2 px-4 py-1.5 bg-black dark:bg-zinc-800 text-white rounded-md text-xs font-bold shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-700 transition-all active:scale-95",
+                      children: [
+                        /* @__PURE__ */ jsx29(Printer2, { size: 16 }),
+                        "Print"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-zinc-700", children: [
+                    /* @__PURE__ */ jsx29(
+                      "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__ */ jsx29(ChevronLeft2, { size: 18 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1 text-[11px] font-bold tabular-nums", children: [
+                      /* @__PURE__ */ jsxs21(
+                        Select,
+                        {
+                          value: currentPageIndex + 1,
+                          onChange: (val) => {
+                            const num = Number(val);
+                            if (!isNaN(num)) {
+                              setCurrentPageIndex(num - 1);
+                            }
+                          },
+                          variant: "ghost",
+                          containerClassName: "inline-block",
+                          children: [
+                            /* @__PURE__ */ jsx29(SelectTrigger, { className: "h-7 px-2 min-w-[40px] border border-gray-200 dark:border-zinc-700 rounded flex items-center justify-center bg-white dark:bg-zinc-900 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors", children: /* @__PURE__ */ jsx29("span", { className: "text-gray-900 dark:text-white", children: currentPageIndex + 1 }) }),
+                            /* @__PURE__ */ jsxs21(SelectContent, { className: "min-w-[100px] max-h-64 overflow-y-auto p-0", children: [
+                              /* @__PURE__ */ jsx29("div", { className: "p-2 border-b border-gray-100 dark:border-zinc-800 sticky top-0 bg-white dark:bg-zinc-950 z-10", children: /* @__PURE__ */ jsx29(
+                                "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__ */ jsx29("div", { className: "p-1", children: pages.map((_, i) => i + 1).filter(
+                                (p) => String(p).includes(pageSearch)
+                              ).map((p) => /* @__PURE__ */ jsx29(SelectItem, { value: p, children: p }, p)) })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx29("span", { className: "text-gray-400 mx-0.5", children: "/" }),
+                      /* @__PURE__ */ jsx29("span", { className: "text-gray-600 dark:text-gray-400", children: pages.length })
+                    ] }),
+                    /* @__PURE__ */ jsx29(
+                      "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__ */ jsx29(ChevronRight3, { size: 18 })
+                      }
+                    )
+                  ] })
+                ] }) }) }),
+                pageIndex === 0 && HeaderEl,
+                pageIndex === 0 && DisplayInfoGridEl,
+                /* @__PURE__ */ jsxs21("div", { className: "grow w-full px-8 pb-8", children: [
+                  pageIndex === 0 && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end px-2 mt-2 print:hidden mb-4", children: /* @__PURE__ */ jsx29(
+                    "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__ */ jsx29("div", { className: "h-14 print:h-14" }),
+                  statusOverlay ? /* @__PURE__ */ jsx29("div", { className: "px-8 pb-8", children: statusOverlay }) : /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-2", children: pageNodes.map((node, i) => /* @__PURE__ */ jsx29("div", { children: renderNode(node) }, i)) })
+                ] })
+              ] })
+            },
+            pageIndex
+          )
+        },
+        pageIndex
+      )) }) })
+    ] });
+  };
+  return {
+    A4CategoryView,
+    data: apiData,
+    isLoading,
+    get,
+    reactToPrintFn
+  };
+};
+var useA4CategoryView_default = useA4CategoryView;
+
 // src/hooks/Fetches/useTransaction.tsx
-import { useEffect as useEffect12, useState as useState17 } from "react";
-import { AlertCircle as AlertCircle2, FileX as FileX2, Plus as Plus2, RefreshCw as RefreshCw2 } from "lucide-react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
+import { AlertCircle as AlertCircle3, FileX as FileX3, Plus as Plus2, RefreshCw as RefreshCw3 } from "lucide-react";
 import moment from "moment";
-import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
 var useTransaction = ({
   url,
   v = 1,
@@ -4509,14 +4869,13 @@ var useTransaction = ({
   params = {},
   dateFilter = true
 }) => {
-  const [date, setDate] = useState17(
+  const [date, setDate] = useState18(
     moment().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,
@@ -4527,7 +4886,7 @@ var useTransaction = ({
       delay
     });
   };
-  useEffect12(() => {
+  useEffect13(() => {
     getData();
   }, [url, v, JSON.stringify(params), delay, date]);
   const TransactionViewComponent = ({
@@ -4554,21 +4913,21 @@ var useTransaction = ({
     createTitle = "Add New",
     ...rest
   }) => {
-    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx29(
+    const emptyState = !isLoading && (error || !data || data.length === 0) ? /* @__PURE__ */ jsx30(
       "div",
       {
         className: `flex flex-col relative w-full items-center justify-center py-12 min-h-[300px] ${className}`,
-        children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
-          error ? /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(AlertCircle2, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx29("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx29(FileX2, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
-          /* @__PURE__ */ jsx29("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
-          /* @__PURE__ */ jsx29("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
-          url && /* @__PURE__ */ jsxs21(
+        children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center justify-center p-8 bg-gray-50/50 dark:bg-zinc-900/30 rounded-2xl border border-dashed border-gray-300 dark:border-zinc-700 w-full max-w-lg text-center shadow-sm", children: [
+          error ? /* @__PURE__ */ jsx30("div", { className: "w-14 h-14 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx30(AlertCircle3, { className: "w-7 h-7 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ jsx30("div", { className: "w-14 h-14 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx30(FileX3, { className: "w-7 h-7 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsx30("h3", { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),
+          /* @__PURE__ */ jsx30("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-6 leading-relaxed", children: error ? typeof error === "string" ? error : "An unexpected error occurred while fetching the data." : "There are no transactions or records available to display here." }),
+          url && /* @__PURE__ */ jsxs22(
             "button",
             {
               onClick: () => getData(),
               className: "flex items-center gap-2 px-5 py-2 bg-black dark:bg-white text-white dark:text-black font-semibold rounded-lg shadow-md hover:bg-gray-800 dark:hover:bg-gray-100 transition-all active:scale-95 text-sm",
               children: [
-                /* @__PURE__ */ jsx29(RefreshCw2, { size: 14 }),
+                /* @__PURE__ */ jsx30(RefreshCw3, { size: 14 }),
                 "Try Again"
               ]
             }
@@ -4576,14 +4935,14 @@ var useTransaction = ({
         ] })
       }
     ) : void 0;
-    return /* @__PURE__ */ jsxs21(Card, { children: [
-      /* @__PURE__ */ jsx29(Card.Header, { children: /* @__PURE__ */ jsxs21("header", { className: "flex items-center justify-between gap-4 py-2", children: [
-        /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx29(Card.Title, { children: title }),
-          /* @__PURE__ */ jsx29(Card.Description, { children: description })
+    return /* @__PURE__ */ jsxs22(Card, { children: [
+      /* @__PURE__ */ jsx30(Card.Header, { children: /* @__PURE__ */ jsxs22("header", { className: "flex items-center justify-between gap-4 py-2", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx30(Card.Title, { children: title }),
+          /* @__PURE__ */ jsx30(Card.Description, { children: description })
         ] }),
-        /* @__PURE__ */ jsxs21("section", { className: "flex gap-2 items-center", children: [
-          dateFilter && /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsxs22("section", { className: "flex gap-2 items-center", children: [
+          dateFilter && /* @__PURE__ */ jsx30(
             Fields_default.DateInput,
             {
               value: date,
@@ -4593,20 +4952,20 @@ var useTransaction = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             Button,
             {
               size: "sm",
               className: "rounded-md!",
               onClick: onCreate,
               variant: "primary",
-              icon: /* @__PURE__ */ jsx29(Plus2, {}),
+              icon: /* @__PURE__ */ jsx30(Plus2, {}),
               children: createTitle
             }
           )
         ] })
       ] }) }),
-      /* @__PURE__ */ jsx29(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx29("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(Card.Content, { className: "space-y-6", children: /* @__PURE__ */ jsx30("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx30(
         DataTable,
         {
           columns,
@@ -4823,7 +5182,7 @@ var storage = {
 };
 
 // src/hooks/uploads/useAntdImageUpload.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 
 // ../../node_modules/@ant-design/icons/es/components/Context.js
 import { createContext as createContext5 } from "react";
@@ -5870,7 +6229,7 @@ warningOnce.resetWarned = resetWarned;
 warningOnce.noteOnce = noteOnce;
 
 // ../../node_modules/@ant-design/icons/es/utils.js
-import React12, { useContext as useContext5, useEffect as useEffect13 } from "react";
+import React12, { useContext as useContext5, useEffect as useEffect14 } from "react";
 function camelCase(input) {
   return input.replace(/-(.)/g, (match, g) => g.toUpperCase());
 }
@@ -5989,7 +6348,7 @@ var useInsertStyles = (eleRef) => {
 ${mergedStyleStr}
 }`;
   }
-  useEffect13(() => {
+  useEffect14(() => {
     const ele = eleRef.current;
     const shadowRoot = getShadowRoot(ele);
     updateCSS(mergedStyleStr, "@ant-design-icons", {
@@ -6186,7 +6545,7 @@ var PlusOutlined_default2 = RefIcon;
 
 // src/hooks/uploads/useAntdImageUpload.tsx
 import { Image, Upload } from "antd";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
 var getBase64 = (file) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.readAsDataURL(file);
@@ -6194,9 +6553,9 @@ var getBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 var useAntdImageUpload = ({ length = 1 }) => {
-  const [fileList, setFileList] = useState18([]);
-  const [previewOpen, setPreviewOpen] = useState18(false);
-  const [previewImage, setPreviewImage] = useState18("");
+  const [fileList, setFileList] = useState19([]);
+  const [previewOpen, setPreviewOpen] = useState19(false);
+  const [previewImage, setPreviewImage] = useState19("");
   const handlePreview = async (file) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj);
@@ -6213,8 +6572,8 @@ var useAntdImageUpload = ({ length = 1 }) => {
       }))
     );
   };
-  const ImageBox = () => /* @__PURE__ */ jsxs22(Fragment7, { children: [
-    /* @__PURE__ */ jsx30(
+  const ImageBox = () => /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    /* @__PURE__ */ jsx31(
       Upload,
       {
         listType: "picture-card",
@@ -6222,13 +6581,13 @@ var useAntdImageUpload = ({ length = 1 }) => {
         onPreview: handlePreview,
         onChange: handleChange,
         beforeUpload: () => false,
-        children: fileList.length >= length ? null : /* @__PURE__ */ jsxs22("button", { style: { border: 0, background: "none" }, type: "button", children: [
-          /* @__PURE__ */ jsx30(PlusOutlined_default2, {}),
-          /* @__PURE__ */ jsx30("div", { style: { marginTop: 8 }, children: "Upload" })
+        children: fileList.length >= length ? null : /* @__PURE__ */ jsxs23("button", { style: { border: 0, background: "none" }, type: "button", children: [
+          /* @__PURE__ */ jsx31(PlusOutlined_default2, {}),
+          /* @__PURE__ */ jsx31("div", { style: { marginTop: 8 }, children: "Upload" })
         ] })
       }
     ),
-    previewImage && /* @__PURE__ */ jsx30(
+    previewImage && /* @__PURE__ */ jsx31(
       Image,
       {
         style: { display: "none" },
@@ -6244,6 +6603,51 @@ var useAntdImageUpload = ({ length = 1 }) => {
   return { ImageBox, fileList, setFileList };
 };
 var useAntdImageUpload_default = useAntdImageUpload;
+
+// src/components/Views/CategoryView.tsx
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+var CategoryCard = ({ item }) => {
+  return /* @__PURE__ */ jsxs24("div", { className: "group bg-white rounded-md overflow-hidden border border-black/80 flex flex-col h-full print:border-black transition-all duration-300", children: [
+    /* @__PURE__ */ jsx32("div", { className: "relative aspect-square w-full overflow-hidden bg-gray-50 flex-shrink-0 border-b border-black/10", children: /* @__PURE__ */ jsx32(
+      "img",
+      {
+        src: item.image,
+        alt: item.name,
+        className: "w-full h-full object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsx32("div", { className: "p-1.5 flex flex-col justify-center flex-grow", children: /* @__PURE__ */ jsx32("h3", { className: "text-[10px] font-bold text-black line-clamp-2 leading-tight text-center", children: item.name }) })
+  ] });
+};
+var CategoryView = ({
+  categoryName,
+  items,
+  className
+}) => {
+  return /* @__PURE__ */ jsx32("div", { className: cn("p-6 bg-gray-50 min-h-full", className), children: /* @__PURE__ */ jsxs24("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx32("h2", { className: "text-2xl md:text-3xl font-bold text-gray-900 tracking-tight", children: categoryName }),
+      /* @__PURE__ */ jsx32("div", { className: "mt-2 h-1.5 w-16 bg-green-500 rounded-full" })
+    ] }),
+    /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", children: items.map((item) => /* @__PURE__ */ jsx32(CategoryCard, { item }, item.id)) })
+  ] }) });
+};
+var CategoryView_default = CategoryView;
+
+// src/components/Views/Transaction.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var Transaction = () => {
+  return /* @__PURE__ */ jsx33("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;
 export {
   Badge,
   Branding,
@@ -6254,6 +6658,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CategoryCard,
   ClassicSpin,
   CodeBlock,
   DashboardLayout,
@@ -6283,9 +6688,11 @@ export {
   Textarea,
   ThemeProvider,
   ThemeToggle,
+  Views_default as Views,
   WarqadProvider,
   generatePdf,
   storage,
+  useA4CategoryView_default as useA4CategoryView,
   useA4DataView_default as useA4StatementView,
   useAntdImageUpload_default as useAntdImageUpload,
   useApis_default as useApi,