warqadui 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +58 -47
  4. package/dist/index.mjs +58 -47
  5. package/dist/styles.js +1 -1
  6. package/dist/styles.mjs +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -480,7 +480,7 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
480
480
  delay?: number;
481
481
  params?: Record<string, any>;
482
482
  }) => {
483
- A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, headers, }: {
483
+ A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, }: {
484
484
  columns?: SimpleTableColumn<any>[];
485
485
  data?: any[];
486
486
  error?: string | null;
@@ -490,6 +490,7 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
490
490
  subtitle?: string;
491
491
  printable?: boolean;
492
492
  rowPadding?: string;
493
+ verticalLines?: boolean;
493
494
  headers?: React.ReactNode;
494
495
  }) => react_jsx_runtime.JSX.Element;
495
496
  data: any;
package/dist/index.d.ts CHANGED
@@ -480,7 +480,7 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
480
480
  delay?: number;
481
481
  params?: Record<string, any>;
482
482
  }) => {
483
- A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, headers, }: {
483
+ A4DataView: ({ columns, data, error, info, index, title, subtitle, printable, rowPadding, verticalLines, headers, }: {
484
484
  columns?: SimpleTableColumn<any>[];
485
485
  data?: any[];
486
486
  error?: string | null;
@@ -490,6 +490,7 @@ declare const useA4StatementView: ({ url, v, delay, params, }?: {
490
490
  subtitle?: string;
491
491
  printable?: boolean;
492
492
  rowPadding?: string;
493
+ verticalLines?: boolean;
493
494
  headers?: React.ReactNode;
494
495
  }) => react_jsx_runtime.JSX.Element;
495
496
  data: any;
package/dist/index.js CHANGED
@@ -92,17 +92,17 @@ var Button = ({
92
92
  ...props
93
93
  }) => {
94
94
  const variants = {
95
- primary: "bg-[#007AFF] text-white hover:bg-[#0071e3] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#007AFF]",
96
- secondary: "bg-[#F5F5F7] text-[#1D1D1F] hover:bg-[#E8E8ED] dark:bg-[#FFFFFF]/10 dark:text-[#F5F5F7] dark:hover:bg-[#FFFFFF]/15 active:scale-[0.98] focus:ring-gray-400",
97
- outline: "border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/50 backdrop-blur-md text-[#1D1D1F] dark:text-white hover:bg-gray-50 dark:hover:bg-gray-900 active:scale-[0.98] focus:ring-gray-400",
98
- ghost: "bg-transparent text-[#007AFF] hover:bg-[#007AFF]/10 active:scale-[0.98] focus:ring-[#007AFF]",
99
- danger: "bg-[#FF3B30] text-white hover:bg-[#E03126] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF3B30]",
100
- warning: "bg-[#FF9500] text-white hover:bg-[#E68600] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF9500]"
95
+ primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 active:scale-95 active:opacity-90 shadow-sm focus:ring-blue-500",
96
+ secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-white/10 dark:text-gray-100 dark:hover:bg-white/20 active:scale-95 focus:ring-gray-400",
97
+ outline: "border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/50 backdrop-blur-md text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-900 active:scale-95 focus:ring-gray-400",
98
+ ghost: "bg-transparent text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 active:scale-95 focus:ring-blue-500",
99
+ danger: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 active:scale-95 active:opacity-90 shadow-sm focus:ring-red-500",
100
+ warning: "bg-yellow-500 text-white hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-500 active:scale-95 active:opacity-90 shadow-sm focus:ring-yellow-500"
101
101
  };
102
102
  const sizes = {
103
- sm: "px-3 py-1.5 text-sm rounded-[10px] gap-1.5 font-medium",
104
- md: "px-5 py-2.5 rounded-[12px] gap-2 font-medium tracking-tight",
105
- lg: "px-7 py-3.5 text-lg rounded-[16px] font-semibold tracking-tight gap-2.5"
103
+ sm: "px-3 py-1.5 text-sm rounded-lg gap-1.5 font-medium",
104
+ md: "px-5 py-2.5 rounded-xl gap-2 font-medium tracking-tight",
105
+ lg: "px-7 py-3.5 text-lg rounded-2xl font-semibold tracking-tight gap-2.5"
106
106
  };
107
107
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
108
108
  "button",
@@ -171,7 +171,7 @@ var InfoGrid = ({
171
171
  {
172
172
  className: `grid ${colClasses[cols] || "grid-cols-3"} gap-4 p-4 bg-gray-50 rounded-lg border border-gray-100 ${className}`,
173
173
  children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
174
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block text-[10px] uppercase font-bold text-gray-400 mb-1 tracking-wider text-left", children: item.label }),
174
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "block text-xs uppercase font-bold text-gray-400 mb-1 tracking-wider text-left", children: item.label }),
175
175
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
176
176
  "span",
177
177
  {
@@ -233,7 +233,7 @@ var PageA4 = ({
233
233
  width: `${A4_WIDTH_PX * scale}px`,
234
234
  height: `${A4_HEIGHT_PX * scale}px`
235
235
  },
236
- className: "relative print:w-full! print:h-auto! print:min-h-[297mm]!",
236
+ className: "relative a4-paper-wrapper print:w-full! print:h-auto!",
237
237
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
238
238
  "div",
239
239
  {
@@ -248,7 +248,7 @@ var PageA4 = ({
248
248
  },
249
249
  children: [
250
250
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-full flex-1 overflow-hidden pb-4", children }),
251
- pageNumber !== void 0 && totalPages !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full h-[15mm] flex items-center justify-center text-xs font-medium text-gray-500 print:text-black mt-auto shrink-0 border-t border-gray-100 dark:border-zinc-800/10 dark:text-gray-400", children: [
251
+ pageNumber !== void 0 && totalPages !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "w-full h-14 flex items-center justify-center text-xs font-medium text-gray-500 print:text-black mt-auto shrink-0 border-t border-gray-100 dark:border-zinc-800/10 dark:text-gray-400", children: [
252
252
  "Page ",
253
253
  pageNumber,
254
254
  " / ",
@@ -298,6 +298,10 @@ var PageA4 = ({
298
298
  overflow: hidden !important; /* Prevent micro-spillover from text rounding! */
299
299
  }
300
300
 
301
+ .a4-paper-wrapper {
302
+ min-height: 297mm !important;
303
+ }
304
+
301
305
  .print-page-break {
302
306
  page-break-after: always !important;
303
307
  break-after: page !important;
@@ -457,7 +461,7 @@ var SidebarItem = ({
457
461
  "w-full flex items-center py-2.5 rounded-xl text-sm font-medium transition-all duration-200",
458
462
  isSidebarCollapsed ? "justify-center px-2" : "justify-between px-3",
459
463
  !shouldHighlight || item.disabled ? "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200" : "",
460
- item.disabled && "opacity-50 cursor-not-allowed grayscale-[0.5]"
464
+ item.disabled && "opacity-50 cursor-not-allowed grayscale"
461
465
  ),
462
466
  style: shouldHighlight && !item.disabled ? {
463
467
  backgroundColor: isDarkMode ? `${primaryColor}33` : `${primaryColor}1A`,
@@ -554,7 +558,7 @@ var SubItem = ({
554
558
  className: cn(
555
559
  "relative w-full flex items-center px-3 py-2 pl-6 rounded-lg text-sm transition-colors duration-200",
556
560
  isActive && !isDisabled ? "font-medium" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
557
- isDisabled && "opacity-50 cursor-not-allowed grayscale-[0.5]"
561
+ isDisabled && "opacity-50 cursor-not-allowed grayscale"
558
562
  ),
559
563
  style: isActive && !isDisabled ? {
560
564
  backgroundColor: isDarkMode ? `${primaryColor}4D` : `${primaryColor}1A`,
@@ -697,7 +701,7 @@ var DashboardLayout = ({
697
701
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
698
702
  "div",
699
703
  {
700
- className: "min-h-screen bg-gray-50 dark:bg-[#0B0F1A] text-slate-900 dark:text-slate-100 flex transition-colors duration-500 font-sans overflow-hidden",
704
+ className: "min-h-screen bg-gray-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 flex transition-colors duration-500 font-sans overflow-hidden",
701
705
  style: { fontFamily },
702
706
  children: [
703
707
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion.AnimatePresence, { children: !isDesktop && isSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -837,7 +841,7 @@ var LoadingBox = () => {
837
841
  var import_lucide_react3 = require("lucide-react");
838
842
  var import_jsx_runtime9 = require("react/jsx-runtime");
839
843
  var ClassicSpin = ({ msg = "Please wait..." }) => {
840
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/30 dark:bg-zinc-900/30 backdrop-blur-[0.5px] transition-all duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center justify-center p-6 bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-zinc-700 animate-in zoom-in-95 duration-200", children: [
844
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/30 dark:bg-zinc-900/30 backdrop-blur-sm transition-all duration-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center justify-center p-6 bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-zinc-700 animate-in zoom-in-95 duration-200", children: [
841
845
  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", children: [
842
846
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute inset-0 bg-indigo-500 blur-lg opacity-20 animate-pulse" }),
843
847
  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Loader2, { className: "h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400 relative z-10" })
@@ -848,7 +852,7 @@ var ClassicSpin = ({ msg = "Please wait..." }) => {
848
852
 
849
853
  // src/components/spins/OverlaySpin.tsx
850
854
  var import_jsx_runtime10 = require("react/jsx-runtime");
851
- var OverlaySpin = ({ msg = "Processing..." }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-[1px] z-50 flex items-center justify-center rounded-xl transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-2 bg-white dark:bg-zinc-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-zinc-700", children: [
855
+ var OverlaySpin = ({ msg = "Processing..." }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center rounded-xl transition-all duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center gap-2 bg-white dark:bg-zinc-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-zinc-700", children: [
852
856
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
853
857
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-medium text-gray-500 animate-pulse", children: msg })
854
858
  ] }) });
@@ -921,7 +925,7 @@ var CodeBlock = ({
921
925
  ),
922
926
  children: [
923
927
  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-gray-800", children: [
924
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-widest text-gray-400", children: language }),
928
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs font-bold uppercase tracking-widest text-gray-400", children: language }),
925
929
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
926
930
  "button",
927
931
  {
@@ -1010,7 +1014,7 @@ var Modal = ({
1010
1014
  isLoading = false,
1011
1015
  width = 500
1012
1016
  }) => {
1013
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion2.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4 sm:p-6", children: [
1017
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion2.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", children: [
1014
1018
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1015
1019
  import_framer_motion2.motion.div,
1016
1020
  {
@@ -1028,8 +1032,8 @@ var Modal = ({
1028
1032
  animate: { opacity: 1, scale: 1, y: 0 },
1029
1033
  exit: { opacity: 0, scale: 0.95, y: 10 },
1030
1034
  transition: { type: "spring", duration: 0.3 },
1031
- style: { maxWidth: width },
1032
- className: "w-full bg-white dark:bg-zinc-900 rounded-[2rem] shadow-2xl border border-gray-200 dark:border-white/5 overflow-hidden relative z-10 flex flex-col max-h-[90vh]",
1035
+ style: { maxWidth: width, maxHeight: "90vh" },
1036
+ className: "w-full bg-white dark:bg-zinc-900 rounded-3xl shadow-2xl border border-gray-200 dark:border-white/5 overflow-hidden relative z-10 flex flex-col",
1033
1037
  children: [
1034
1038
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "px-8 py-5 border-b border-gray-100 dark:border-white/5 flex items-center justify-between bg-white/50 dark:bg-zinc-900/50 backdrop-blur-xl sticky top-0 z-20", children: [
1035
1039
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white tracking-tight", children: title }),
@@ -1697,7 +1701,7 @@ var Textarea = (0, import_react11.forwardRef)(
1697
1701
  setIsFocused(false);
1698
1702
  onBlur?.(e);
1699
1703
  },
1700
- className: `block w-full px-2.5 py-1 rounded-xl border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border min-h-[100px] resize-none text-sm ${className}`,
1704
+ className: `block w-full px-2.5 py-1 rounded-xl border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border min-h-24 resize-none text-sm ${className}`,
1701
1705
  style: {
1702
1706
  borderColor: isFocused ? primaryColor : void 0,
1703
1707
  boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
@@ -2240,7 +2244,7 @@ var SearchApiContent = ({
2240
2244
  }
2241
2245
  )
2242
2246
  ] }),
2243
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pr-2.5 w-[60px]! flex items-center gap-1 shrink-0 min-w-[40px] justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
2247
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pr-2.5 w-16! flex items-center gap-1 shrink-0 min-w-10 justify-end", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
2244
2248
  currentValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
2245
2249
  "button",
2246
2250
  {
@@ -2654,7 +2658,7 @@ function DataTable({
2654
2658
  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2655
2659
  "th",
2656
2660
  {
2657
- className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-[1%] whitespace-nowrap" : ""}`,
2661
+ className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
2658
2662
  children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
2659
2663
  header.column.columnDef.header,
2660
2664
  header.getContext()
@@ -2695,7 +2699,7 @@ function DataTable({
2695
2699
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2696
2700
  "td",
2697
2701
  {
2698
- className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" || cell.column.id === "select" || cell.column.id === "_select" ? "w-[1%] whitespace-nowrap" : ""}`,
2702
+ className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" || cell.column.id === "select" || cell.column.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
2699
2703
  children: (0, import_react_table.flexRender)(
2700
2704
  cell.column.columnDef.cell,
2701
2705
  cell.getContext()
@@ -2727,7 +2731,7 @@ function DataTable({
2727
2731
  ) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
2728
2732
  "td",
2729
2733
  {
2730
- className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-[1%] whitespace-nowrap" : ""}`,
2734
+ className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" || header.id === "select" || header.id === "_select" ? "w-px whitespace-nowrap" : ""}`,
2731
2735
  children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
2732
2736
  header.column.columnDef.footer,
2733
2737
  header.getContext()
@@ -2949,7 +2953,7 @@ function PostTable({
2949
2953
  "button",
2950
2954
  {
2951
2955
  onClick: () => handleEdit(row.index, row.original),
2952
- className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-[var(--theme-primary)] dark:hover:text-[var(--theme-primary)] transition-colors",
2956
+ className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-(--theme-primary) dark:hover:text-(--theme-primary) transition-colors",
2953
2957
  title: "Edit",
2954
2958
  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Edit2, { size: 16 })
2955
2959
  }
@@ -3022,7 +3026,7 @@ function PostTable({
3022
3026
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3023
3027
  "th",
3024
3028
  {
3025
- className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
3029
+ className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3026
3030
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3027
3031
  header.column.columnDef.header,
3028
3032
  header.getContext()
@@ -3064,7 +3068,7 @@ function PostTable({
3064
3068
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3065
3069
  "td",
3066
3070
  {
3067
- className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
3071
+ className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3068
3072
  children: (0, import_react_table2.flexRender)(
3069
3073
  cell.column.columnDef.cell,
3070
3074
  cell.getContext()
@@ -3142,7 +3146,10 @@ function PostTable({
3142
3146
  {
3143
3147
  onClick: handleSaveField,
3144
3148
  disabled: isSavingAsync,
3145
- className: "w-full cursor-pointer h-8 flex items-center justify-center gap-1.5 rounded-lg text-white text-xs font-medium transition-all shadow-[0_1px_2px_rgba(0,0,0,0.05)] hover:shadow-md hover:-translate-y-px active:scale-[0.98] active:translate-y-0 bg-[var(--theme-primary)] hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed",
3149
+ className: "w-full cursor-pointer h-8 flex items-center justify-center gap-1.5 rounded-lg text-white text-xs font-medium transition-all shadow-sm hover:shadow-md hover:-translate-y-px active:scale-95 active:translate-y-0 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed",
3150
+ style: {
3151
+ backgroundColor: "var(--theme-primary)"
3152
+ },
3146
3153
  title: "Add Row",
3147
3154
  children: [
3148
3155
  isSavingAsync ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Plus, { size: 14, strokeWidth: 2.5 }),
@@ -3188,7 +3195,7 @@ function PostTable({
3188
3195
  "py-1! text-sm align-middle transition-colors duration-200",
3189
3196
  column.id !== "_index" ? "cursor-text" : "",
3190
3197
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3191
- column.id === "_index" ? "w-[1%] whitespace-nowrap" : "",
3198
+ column.id === "_index" ? "w-px whitespace-nowrap" : "",
3192
3199
  hasError && "ring-1 ring-inset ring-red-500"
3193
3200
  ),
3194
3201
  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -3196,7 +3203,7 @@ function PostTable({
3196
3203
  {
3197
3204
  className: cn(
3198
3205
  "flex items-center",
3199
- column.id === "_index" ? "" : "w-full min-w-[120px] h-9"
3206
+ column.id === "_index" ? "" : "w-full min-w-32 h-9"
3200
3207
  ),
3201
3208
  onKeyDown: (e) => {
3202
3209
  if (e.key === "Enter") {
@@ -3238,7 +3245,7 @@ function PostTable({
3238
3245
  ) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
3239
3246
  "td",
3240
3247
  {
3241
- className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
3248
+ className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3242
3249
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3243
3250
  header.column.columnDef.footer,
3244
3251
  header.getContext()
@@ -3314,7 +3321,7 @@ function SimpleTable({
3314
3321
  children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3315
3322
  "th",
3316
3323
  {
3317
- className: `${rowPadding} font-semibold text-gray-900 dark:text-zinc-100 text-[13px] align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
3324
+ className: `${rowPadding} font-semibold text-gray-900 dark:text-zinc-100 text-sm align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
3318
3325
  style: {
3319
3326
  width: header.column.columnDef.width !== void 0 ? header.column.columnDef.width : header.column.columnDef.flex !== void 0 ? "auto" : "1%",
3320
3327
  minWidth: header.column.columnDef.minWidth,
@@ -3337,7 +3344,7 @@ function SimpleTable({
3337
3344
  children: columns.map((col, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3338
3345
  "td",
3339
3346
  {
3340
- className: `text-[13px] ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
3347
+ className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""}`,
3341
3348
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-200 dark:bg-zinc-800 rounded-sm animate-pulse w-full" })
3342
3349
  },
3343
3350
  `skeleton-col-${colIdx}`
@@ -3358,7 +3365,7 @@ function SimpleTable({
3358
3365
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3359
3366
  "td",
3360
3367
  {
3361
- className: `text-[13px] ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${cell.column.columnDef.className || "wrap-break-word"}`,
3368
+ className: `text-sm ${rowPadding} align-top ${verticalLines ? "border-x border-black dark:border-white" : ""} ${cell.column.columnDef.className || "wrap-break-word"}`,
3362
3369
  children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
3363
3370
  },
3364
3371
  cell.id
@@ -3373,7 +3380,7 @@ function SimpleTable({
3373
3380
  children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3374
3381
  "td",
3375
3382
  {
3376
- className: `text-[13px] ${rowPadding} ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
3383
+ className: `text-sm ${rowPadding} ${verticalLines ? "border-x border-black dark:border-white" : ""} ${header.column.columnDef.className || "wrap-break-word"}`,
3377
3384
  children: header.isPlaceholder ? null : (0, import_react_table3.flexRender)(
3378
3385
  header.column.columnDef.footer,
3379
3386
  header.getContext()
@@ -3411,7 +3418,7 @@ var Badge = import_react18.default.forwardRef(
3411
3418
  success: outline ? "border border-green-600 text-green-600 dark:border-green-400 dark:text-green-400 bg-transparent" : "bg-green-600 text-white dark:bg-green-500 border border-transparent"
3412
3419
  };
3413
3420
  const sizes = {
3414
- sm: "px-2 py-0.5 text-[0.65rem] leading-none uppercase tracking-wider font-semibold",
3421
+ sm: "px-2 py-0.5 text-xs leading-none uppercase tracking-wider font-semibold",
3415
3422
  md: "px-2.5 py-1 text-xs leading-tight font-semibold",
3416
3423
  lg: "px-3 py-1.5 text-sm leading-tight font-semibold"
3417
3424
  };
@@ -3439,7 +3446,7 @@ var Branding = ({
3439
3446
  "p",
3440
3447
  {
3441
3448
  className: cn(
3442
- "text-center text-[10px] font-bold uppercase tracking-widest transition-all duration-300 font-bona",
3449
+ "text-center text-xs font-bold uppercase tracking-widest transition-all duration-300 font-bona",
3443
3450
  disabled ? "opacity-40 cursor-not-allowed" : "text-slate-900 dark:text-slate-50",
3444
3451
  className
3445
3452
  ),
@@ -3489,6 +3496,7 @@ var useA4StatementView = ({
3489
3496
  subtitle = "Official Account Statement",
3490
3497
  printable = true,
3491
3498
  rowPadding = "p-3",
3499
+ verticalLines = true,
3492
3500
  headers
3493
3501
  }) => {
3494
3502
  const { store } = useWarqadConfig();
@@ -3523,7 +3531,7 @@ var useA4StatementView = ({
3523
3531
  {
3524
3532
  className: "flex items-center gap-3 px-4 py-2 rounded-md border border-black dark:border-zinc-700 print:border-black",
3525
3533
  children: [
3526
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-black dark:text-white print:text-black font-bold uppercase tracking-widest text-[11px]", children: typeof col.header === "string" ? col.header : typeof col.key === "string" ? col.key : "Total" }),
3534
+ /* @__PURE__ */ (0, import_jsx_runtime27.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" }),
3527
3535
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-base font-bold font-sans tabular-nums text-black dark:text-white print:text-black", children: col.renderFooter(filteredDisplayData) })
3528
3536
  ]
3529
3537
  },
@@ -3622,7 +3630,7 @@ var useA4StatementView = ({
3622
3630
  );
3623
3631
  const DisplayInfoGridEl = Array.isArray(info) && info.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: "a4-info-grid", className: "px-8", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoGrid, { className: "mb-4", items: info, isLoading }) }) : null;
3624
3632
  if (!isLoading && (error || !data || data.length === 0)) {
3625
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 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-xl text-center shadow-sm", children: [
3633
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col relative w-full items-center justify-center p-8 min-h-96", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 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-xl text-center shadow-sm", children: [
3626
3634
  error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
3627
3635
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Statement" : "No Records Found" }),
3628
3636
  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400 max-w-xs mb-8 leading-relaxed", children: 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." }),
@@ -3640,7 +3648,7 @@ var useA4StatementView = ({
3640
3648
  ] }) });
3641
3649
  }
3642
3650
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col relative w-full items-center", children: [
3643
- isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-[9999px]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
3651
+ isMeasuring && filteredDisplayData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute top-0 opacity-0 pointer-events-none -left-full", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
3644
3652
  "div",
3645
3653
  {
3646
3654
  style: { width: "210mm", boxSizing: "border-box" },
@@ -3727,12 +3735,12 @@ var useA4StatementView = ({
3727
3735
  value: globalFilter,
3728
3736
  onChange: (e) => setGlobalFilter(e.target.value),
3729
3737
  placeholder: "Search...",
3730
- className: "block w-full max-w-[300px] 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"
3738
+ 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"
3731
3739
  }
3732
3740
  )
3733
3741
  ] }),
3734
3742
  pageIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)("h3", { className: "text-sm font-bold text-gray-800 print:text-gray-800 uppercase tracking-wide shrink-0", children: "Recent Transactions" }) }),
3735
- pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-[20px] print:h-0" }),
3743
+ pageIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-5 print:h-0" }),
3736
3744
  (pageData.length > 0 || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
3737
3745
  SimpleTable,
3738
3746
  {
@@ -3742,7 +3750,7 @@ var useA4StatementView = ({
3742
3750
  rowPadding,
3743
3751
  index,
3744
3752
  startIndex: pages.slice(0, pageIndex).reduce((acc, curr) => acc + curr.length, 0),
3745
- verticalLines: true,
3753
+ verticalLines,
3746
3754
  isLoading: isLoading || isMeasuring && pages.length === 1 && pages[0].length === 0
3747
3755
  }
3748
3756
  ),
@@ -3772,6 +3780,7 @@ var useA4DataView_default = useA4StatementView;
3772
3780
  // src/hooks/Fetches/useTransaction.tsx
3773
3781
  var import_react20 = require("react");
3774
3782
  var import_lucide_react13 = require("lucide-react");
3783
+ var import_moment = __toESM(require("moment"));
3775
3784
  var import_jsx_runtime28 = require("react/jsx-runtime");
3776
3785
  var useTransaction = ({
3777
3786
  url,
@@ -3779,7 +3788,9 @@ var useTransaction = ({
3779
3788
  delay,
3780
3789
  params = {}
3781
3790
  }) => {
3782
- const [date, setDate] = (0, import_react20.useState)(void 0);
3791
+ const [date, setDate] = (0, import_react20.useState)(
3792
+ (0, import_moment.default)().format("DD/MM/YYYY")
3793
+ );
3783
3794
  const dateObj = {};
3784
3795
  if (date) dateObj.date = date;
3785
3796
  const { data: apiData, isLoading, get, error: apiError } = useApis_default();
@@ -3825,7 +3836,7 @@ var useTransaction = ({
3825
3836
  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3826
3837
  "div",
3827
3838
  {
3828
- className: `flex flex-col relative w-full items-center justify-center p-8 min-h-[400px] ${className}`,
3839
+ className: `flex flex-col relative w-full items-center justify-center p-8 min-h-96 ${className}`,
3829
3840
  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center justify-center p-12 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-xl text-center shadow-sm", children: [
3830
3841
  error ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-red-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.AlertCircle, { className: "w-8 h-8 text-red-600 dark:text-red-500" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-16 h-16 bg-gray-200 dark:bg-zinc-800 rounded-full flex items-center justify-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.FileX, { className: "w-8 h-8 text-gray-500 dark:text-gray-400" }) }),
3831
3842
  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h3", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", children: error ? "Failed to Load Data" : "No Records Found" }),