@opexa/portal-components 0.0.6 → 0.0.7

package/dist/components/TransactionRecords/DepositRecordsTable.mjs

@@ -0,0 +1,177 @@
+import { createListCollection as O, Portal as w } from "@ark-ui/react";
+import { TZDateMini as p, tz as R } from "@date-fns/tz";
+import "@opexa/portal-sdk-core";
+import { endOfDay as x, startOfDay as F, format as E } from "date-fns";
+import { useState as d } from "react";
+import "@tanstack/react-query";
+import "tiny-invariant";
+import "../../constants/index.mjs";
+import { capitalize as n } from "../../utils/capitalize.mjs";
+import { formatNumber as i } from "../../utils/formatNumber.mjs";
+import "../../utils/getLocaleInfo.mjs";
+import "../../utils/getQueryClient.mjs";
+import "../../utils/isMobile.mjs";
+import "../../utils/parseDecimal.mjs";
+import "../../utils/toaster.mjs";
+import "lodash-es";
+import "../../_virtual/index.cjs.mjs";
+import { useDepositRecordsQuery as L } from "../../hooks/useDepositRecordsQuery.mjs";
+import "../../hooks/useGlobalStore.mjs";
+import { useInfiniteQueryHelper as y } from "../../hooks/useInfiniteQueryHelper.mjs";
+import { useLocaleInfo as A } from "../../hooks/useLocaleInfo.mjs";
+import "usehooks-ts";
+import { ChevronDownIcon as k } from "../../icons/ChevronDownIcon.mjs";
+import { ChevronLeftIcon as V } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as q } from "../../icons/ChevronRightIcon.mjs";
+import { File02Icon as H } from "../../icons/File02Icon.mjs";
+import { SpinnerIcon as U } from "../../icons/SpinnerIcon.mjs";
+import "../../ui/AlertDialog/AlertDialog.mjs";
+import "../../ui/Avatar/Avatar.mjs";
+import { Root as $, Label as B } from "../../ui/Badge/Badge.mjs";
+import "../../ui/Button/button.recipe.mjs";
+import "../../ui/Checkbox/Checkbox.mjs";
+import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/DatePicker/DatePicker.mjs";
+import "../../ui/Dialog/Dialog.mjs";
+import "../../ui/Drawer/Drawer.mjs";
+import "../../ui/Field/Field.mjs";
+import { IconButton as g } from "../../ui/IconButton/IconButton.mjs";
+import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PinInput/PinInput.mjs";
+import "../../ui/Popover/Popover.mjs";
+import "tailwind-merge";
+import "../../ui/SegmentGroup/SegmentGroup.mjs";
+import { Root as J, Trigger as Q, ValueText as G, Indicator as Z, Positioner as j, Content as K, Item as W } from "../../ui/Select/Select.mjs";
+import { Root as X, Header as Y, Row as f, Heading as r, Body as _, Cell as a } from "../../ui/Table/Table.mjs";
+import "../../ui/Tabs/Tabs.mjs";
+import { Empty as ee } from "../Empty/Empty.mjs";
+import { TableFilters as te } from "./TableFilters.mjs";
+function We() {
+  const [t, N] = d(), [m, h] = d(), l = A(), {
+    page: S,
+    pageSize: v,
+    hasNextPage: D,
+    hasPrevPage: C,
+    next: I,
+    prev: b,
+    rows: c,
+    setPageSize: T,
+    totalPages: z,
+    loading: o,
+    firstPage: P
+  } = y(L, {
+    filter: {
+      ...m && {
+        status: {
+          equal: m
+        }
+      },
+      ...t && {
+        dateTimeCreated: {
+          ...t.start && {
+            greaterThanOrEqual: new p(
+              F(t.start),
+              l.timezone
+            ).toISOString()
+          },
+          ...t.end && {
+            lesserThanOrEqual: new p(
+              x(t.end),
+              l.timezone
+            ).toISOString()
+          }
+        }
+      }
+    }
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    te,
+    {
+      enabledFilters: {
+        depositStatus: !0
+      },
+      value: {
+        timestamp: t,
+        depositStatus: m
+      },
+      onChange: (e) => {
+        P(), N(e.timestamp), h(e.depositStatus);
+      }
+    }
+  ), c.length <= 0 && /* @__PURE__ */ React.createElement(
+    ee,
+    {
+      icon: o ? U : H,
+      title: o ? "Just a moment" : "No data",
+      message: o ? "Fetching latest deposit records..." : "No data is currently available.",
+      className: "mt-8 lg:mt-16"
+    }
+  ), c.length >= 1 && /* @__PURE__ */ React.createElement("div", { className: "border-gray-200 mt-lg rounded-xl border" }, /* @__PURE__ */ React.createElement("div", { className: "border-gray-200 overflow-hidden overflow-x-auto rounded-xl border-b" }, /* @__PURE__ */ React.createElement(X, { className: "border-0" }, /* @__PURE__ */ React.createElement(Y, null, /* @__PURE__ */ React.createElement(f, null, /* @__PURE__ */ React.createElement(r, null, "Deposit No."), /* @__PURE__ */ React.createElement(r, null, "Reference"), /* @__PURE__ */ React.createElement(r, null, "Deposit Method"), /* @__PURE__ */ React.createElement(r, null, "Applied Amount"), /* @__PURE__ */ React.createElement(r, null, "Recieved Amount"), /* @__PURE__ */ React.createElement(r, null, "Transaction Fee"), /* @__PURE__ */ React.createElement(r, null, "Deposit Time"), /* @__PURE__ */ React.createElement(r, null, "Recieved Time"), /* @__PURE__ */ React.createElement(r, null, "Status"))), /* @__PURE__ */ React.createElement(_, null, c.map((e) => /* @__PURE__ */ React.createElement(f, { key: e.id }, /* @__PURE__ */ React.createElement(a, null, e.depositNumber), /* @__PURE__ */ React.createElement(a, null, e.reference), /* @__PURE__ */ React.createElement(a, null, n(e.type, {
+    delimiter: n.delimiters.UNDERSCORE
+  })), /* @__PURE__ */ React.createElement(a, null, i(e.amount, {
+    currency: l.currency.code,
+    minDecimalPlaces: 2
+  })), /* @__PURE__ */ React.createElement(a, null, i(e.netAmount, {
+    currency: l.currency.code,
+    minDecimalPlaces: 2
+  })), /* @__PURE__ */ React.createElement(a, null, i(e.fee, {
+    currency: l.currency.code,
+    minDecimalPlaces: 2
+  })), /* @__PURE__ */ React.createElement(a, null, E(e.dateTimeCreated, "yyyy MMM dd hh:mma", {
+    in: R(l.timezone)
+  })), /* @__PURE__ */ React.createElement(a, null, (e.status === "CONFIRMED" || e.status === "APPROVED") && E(e.dateTimeLastUpdated, "yyyy MMM dd hh:mma", {
+    in: R(l.timezone)
+  })), /* @__PURE__ */ React.createElement(a, null, /* @__PURE__ */ React.createElement(
+    $,
+    {
+      variant: "subtle",
+      colorScheme: e.status === "FAILED" || e.status === "REJECTED" || e.status === "CANCELLED" ? "danger" : e.status === "PENDING" ? "warning" : "success"
+    },
+    /* @__PURE__ */ React.createElement(B, null, n(e.status, {
+      delimiter: n.delimiters.UNDERSCORE
+    }))
+  ))))))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-lg px-4 py-3" }, /* @__PURE__ */ React.createElement("p", null, "Page ", S, " of ", z), /* @__PURE__ */ React.createElement("div", { className: "grow" }), /* @__PURE__ */ React.createElement(
+    J,
+    {
+      size: "sm",
+      value: [v.toString()],
+      onValueChange: (e) => {
+        const u = parseInt(e.value[0]), M = isNaN(u) ? 10 : u;
+        T(M);
+      },
+      collection: s,
+      lazyMount: !0
+    },
+    /* @__PURE__ */ React.createElement(Q, null, /* @__PURE__ */ React.createElement(G, null), /* @__PURE__ */ React.createElement(Z, { asChild: !0 }, /* @__PURE__ */ React.createElement(k, null)), /* @__PURE__ */ React.createElement(w, null, /* @__PURE__ */ React.createElement(j, null, /* @__PURE__ */ React.createElement(K, null, s.items.map((e) => /* @__PURE__ */ React.createElement(W, { key: e, item: e }, s.stringifyItem(e)))))))
+  ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    g,
+    {
+      size: "sm",
+      variant: "outline",
+      colorScheme: "gray",
+      className: "rounded-r-none border-r-0",
+      disabled: !C || o,
+      onClick: () => b()
+    },
+    /* @__PURE__ */ React.createElement(V, { className: "size-5" })
+  ), /* @__PURE__ */ React.createElement(
+    g,
+    {
+      size: "sm",
+      variant: "outline",
+      colorScheme: "gray",
+      className: "rounded-l-none",
+      disabled: !D || o,
+      onClick: () => I()
+    },
+    /* @__PURE__ */ React.createElement(q, { className: "size-5" })
+  )))));
+}
+const s = O({
+  items: y.config.pageSizes,
+  itemToValue: (t) => t.toString(),
+  itemToString: (t) => `${t} items per page`
+});
+export {
+  We as DepositRecordsTable
+};

package/dist/components/TransactionRecords/TableFilters.d.ts

@@ -1,5 +1,5 @@
-import type { DepositStatus, GameProvider, GameType, WithdrawalStatus } from '@opexa/portal-sdk-core';
-import type { DateRange } from '../../types/index.js';
+import { DepositStatus, GameProvider, GameType, WithdrawalStatus } from '@opexa/portal-sdk-core';
+import { DateRange } from '../../types';
 interface EnabledFilters {
     timestamp?: boolean;
     gameType?: boolean;
@@ -22,5 +22,5 @@ interface TableFiltersProps {
     gameTypeOptions?: GameType[];
     gameProviderOptions?: GameProvider[];
 }
-export declare function TableFilters(props: TableFiltersProps): import("react").JSX.Element;
+export declare function TableFilters(props: TableFiltersProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TransactionRecords/TableFilters.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@ark-ui/react"),U=require("date-fns"),K=require("react"),R=require("zod");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");const r=require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/toaster.js");const E=require("../../hooks/useControllableState.js");require("lodash-es");require("../../_virtual/index.cjs.js");require("../../hooks/useGlobalStore.js");require("../../hooks/useInfiniteQueryHelper.js");require("usehooks-ts");const s=require("../../icons/CheckIcon.js"),d=require("../../icons/ChevronDownIcon.js"),Q=require("../../icons/ChevronLeftIcon.js"),X=require("../../icons/ChevronRightIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");require("../../ui/Button/button.recipe.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");const l=require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");const c=require("../../ui/SegmentGroup/SegmentGroup.js"),t=require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");const Y=R.z.enum(["all","today","custom"]).catch("all"),M=["ACCEPTED","APPROVED","CANCELLED","CONFIRMED","FAILED","PENDING","REJECTED"],H=["ACCEPTED","APPROVED","CANCELLED","CONFIRMED","FAILED","PENDING","REJECTED"],W=Intl.DateTimeFormat().resolvedOptions().timeZone;function ee(a){var b,y,V,w,z,f,O,p,N,x,k,A,F,L;const h=u.createListCollection({items:a.gameTypeOptions??[],itemToValue:e=>e,itemToString:e=>r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})}),S=u.createListCollection({items:a.gameProviderOptions??[],itemToValue:e=>e,itemToString:e=>r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})}),q=u.createListCollection({items:M,itemToValue:e=>e,itemToString:e=>r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})}),D=u.createListCollection({items:H,itemToValue:e=>e,itemToString:e=>r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})}),[B,P]=K.useState("all"),m=e=>{var i;const n={timestamp:o,gameType:T,gameProvider:g,depositStatus:I,withdrawalStatus:v};(i=a.onChange)==null||i.call(a,{...n,...e})},[o,C]=E.useControllableState({value:(b=a.value)==null?void 0:b.timestamp,defaultValue:((y=a.defaultValue)==null?void 0:y.timestamp)??null,onChange(e){m({timestamp:e})}}),[T,J]=E.useControllableState({value:(V=a.value)==null?void 0:V.gameType,defaultValue:((w=a.defaultValue)==null?void 0:w.gameType)??null,onChange(e){m({gameType:e})}}),[g,_]=E.useControllableState({value:(z=a.value)==null?void 0:z.gameProvider,defaultValue:((f=a.defaultValue)==null?void 0:f.gameProvider)??null,onChange(e){m({gameProvider:e})}}),[I,j]=E.useControllableState({value:(O=a.value)==null?void 0:O.depositStatus,defaultValue:((p=a.defaultValue)==null?void 0:p.depositStatus)??null,onChange(e){m({depositStatus:e})}}),[v,Z]=E.useControllableState({value:(N=a.value)==null?void 0:N.withdrawalStatus,defaultValue:((x=a.defaultValue)==null?void 0:x.withdrawalStatus)??null,onChange(e){m({withdrawalStatus:e})}});return React.createElement("div",{className:"flex items-center gap-lg"},React.createElement(l.Root,{lazyMount:!0,unmountOnExit:!0,value:[o==null?void 0:o.start,o==null?void 0:o.end].filter(Boolean).map(e=>u.parseDate(e)),onValueChange:e=>{var n,i;C({start:(n=e.value.at(0))==null?void 0:n.toDate(W),end:(i=e.value.at(1))==null?void 0:i.toDate(W)})},onOpenChange:e=>{e.open||o||P("all")},selectionMode:"range",closeOnSelect:!1,positioning:{gutter:20,placement:"bottom"}},React.createElement(c.Root,{value:B,onValueChange:e=>{const n=Y.parse(e.value);if(n==="today"){const i=new Date;C({start:U.startOfDay(i),end:U.endOfDay(i)})}else C(null);P(n)}},React.createElement(c.Item,{value:"all"},React.createElement(c.ItemText,null,"All"),React.createElement(c.ItemControl,null),React.createElement(c.ItemHiddenInput,null)),React.createElement(c.Item,{value:"today"},React.createElement(c.ItemText,null,"Today"),React.createElement(c.ItemControl,null),React.createElement(c.ItemHiddenInput,null)),React.createElement(l.Context,null,e=>React.createElement(c.Item,{value:"custom",onClick:()=>e.setOpen(!0)},React.createElement(l.Control,null,React.createElement(c.ItemText,null,"Custom"),React.createElement(c.ItemControl,null),React.createElement(c.ItemHiddenInput,null)))),React.createElement(c.Indicator,null)),React.createElement(u.Portal,null,React.createElement(l.Positioner,null,React.createElement(l.Content,null,React.createElement(l.View,{view:"day"},React.createElement(l.Context,null,e=>React.createElement(React.Fragment,null,React.createElement(l.ViewControl,null,React.createElement(l.PrevTrigger,null,React.createElement(Q.ChevronLeftIcon,null)),React.createElement(l.ViewTrigger,null,React.createElement(l.RangeText,null)),React.createElement(l.NextTrigger,null,React.createElement(X.ChevronRightIcon,null))),React.createElement(l.Table,null,React.createElement(l.TableHead,null,React.createElement(l.TableRow,null,e.weekDays.map((n,i)=>React.createElement(l.TableHeader,{key:i},n.short.substring(0,2))))),React.createElement(l.TableBody,null,e.weeks.map((n,i)=>React.createElement(l.TableRow,{key:i},n.map((G,$)=>React.createElement(l.TableCell,{key:$,value:G},React.createElement(l.TableCellTrigger,null,G.day)))))))))))))),React.createElement("div",{className:"grow"}),((k=a.enabledFilters)==null?void 0:k.gameType)&&React.createElement(t.Root,{collection:h,value:T?[T]:[],onValueChange:e=>{const n=R.z.enum(a.gameTypeOptions??[]).safeParse(e.value.at(0)).data;J(n??null)},lazyMount:!0,deselectable:!0},React.createElement(t.Trigger,null,React.createElement(t.ValueText,{placeholder:"Game Type"}),React.createElement(t.Indicator,{asChild:!0},React.createElement(d.ChevronDownIcon,null))),React.createElement(u.Portal,null,React.createElement(t.Positioner,null,React.createElement(t.Content,null,React.createElement(t.ItemGroup,null,h.items.map(e=>React.createElement(t.Item,{key:e,item:e},React.createElement(t.ItemText,null,r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})),React.createElement(t.ItemIndicator,{asChild:!0},React.createElement(s.CheckIcon,null))))))))),((A=a.enabledFilters)==null?void 0:A.gameProvider)&&React.createElement(t.Root,{collection:S,value:g?[g]:[],onValueChange:e=>{const n=R.z.enum(a.gameProviderOptions??[]).safeParse(e.value.at(0)).data;_(n??null)},lazyMount:!0,deselectable:!0},React.createElement(t.Trigger,null,React.createElement(t.ValueText,{placeholder:"Game Vendor"}),React.createElement(t.Indicator,{asChild:!0},React.createElement(d.ChevronDownIcon,null))),React.createElement(u.Portal,null,React.createElement(t.Positioner,null,React.createElement(t.Content,null,React.createElement(t.ItemGroup,null,S.items.map(e=>React.createElement(t.Item,{key:e,item:e},React.createElement(t.ItemText,null,r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})),React.createElement(t.ItemIndicator,{asChild:!0},React.createElement(s.CheckIcon,null))))))))),((F=a.enabledFilters)==null?void 0:F.depositStatus)&&React.createElement(t.Root,{collection:q,value:I?[I]:[],onValueChange:e=>{const n=R.z.enum(M).safeParse(e.value.at(0)).data;j(n??null)},lazyMount:!0,deselectable:!0},React.createElement(t.Trigger,null,React.createElement(t.ValueText,{placeholder:"Status"}),React.createElement(t.Indicator,{asChild:!0},React.createElement(d.ChevronDownIcon,null))),React.createElement(u.Portal,null,React.createElement(t.Positioner,null,React.createElement(t.Content,null,React.createElement(t.ItemGroup,null,D.items.map(e=>React.createElement(t.Item,{key:e,item:e},React.createElement(t.ItemText,null,r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})),React.createElement(t.ItemIndicator,{asChild:!0},React.createElement(s.CheckIcon,null))))))))),((L=a.enabledFilters)==null?void 0:L.withdrawalStatus)&&React.createElement(t.Root,{collection:D,value:v?[v]:[],onValueChange:e=>{const n=R.z.enum(H).safeParse(e.value.at(0)).data;Z(n??null)},lazyMount:!0,deselectable:!0},React.createElement(t.Trigger,null,React.createElement(t.ValueText,{placeholder:"Status"}),React.createElement(t.Indicator,{asChild:!0},React.createElement(d.ChevronDownIcon,null))),React.createElement(u.Portal,null,React.createElement(t.Positioner,null,React.createElement(t.Content,null,React.createElement(t.ItemGroup,null,q.items.map(e=>React.createElement(t.Item,{key:e,item:e},React.createElement(t.ItemText,null,r.capitalize(e,{delimiter:r.capitalize.delimiters.UNDERSCORE})),React.createElement(t.ItemIndicator,{asChild:!0},React.createElement(s.CheckIcon,null))))))))))}exports.TableFilters=ee;

package/dist/components/TransactionRecords/TableFilters.mjs

@@ -0,0 +1,252 @@
+import { createListCollection as u, parseDate as ie, Portal as m } from "@ark-ui/react";
+import { endOfDay as ue, startOfDay as Ee } from "date-fns";
+import { useState as Re } from "react";
+import { z as i } from "zod";
+import "@opexa/portal-sdk-core";
+import "@tanstack/react-query";
+import "tiny-invariant";
+import "../../constants/index.mjs";
+import { capitalize as l } from "../../utils/capitalize.mjs";
+import "../../utils/parseDecimal.mjs";
+import "../../utils/getLocaleInfo.mjs";
+import "../../utils/getQueryClient.mjs";
+import "../../utils/isMobile.mjs";
+import "../../utils/toaster.mjs";
+import { useControllableState as o } from "../../hooks/useControllableState.mjs";
+import "lodash-es";
+import "../../_virtual/index.cjs.mjs";
+import "../../hooks/useGlobalStore.mjs";
+import "../../hooks/useInfiniteQueryHelper.mjs";
+import "usehooks-ts";
+import { CheckIcon as E } from "../../icons/CheckIcon.mjs";
+import { ChevronDownIcon as R } from "../../icons/ChevronDownIcon.mjs";
+import { ChevronLeftIcon as se } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as de } from "../../icons/ChevronRightIcon.mjs";
+import "../../ui/AlertDialog/AlertDialog.mjs";
+import "../../ui/Avatar/Avatar.mjs";
+import "../../ui/Badge/Badge.mjs";
+import "../../ui/Button/button.recipe.mjs";
+import "../../ui/Checkbox/Checkbox.mjs";
+import "../../ui/Clipboard/Clipboard.mjs";
+import { Root as Ce, Context as X, Control as ge, Positioner as Te, Content as ve, View as pe, ViewControl as he, PrevTrigger as fe, ViewTrigger as Se, RangeText as De, NextTrigger as ye, Table as Ie, TableHead as Pe, TableRow as Y, TableHeader as Ve, TableBody as we, TableCell as Oe, TableCellTrigger as be } from "../../ui/DatePicker/DatePicker.mjs";
+import "../../ui/Dialog/Dialog.mjs";
+import "../../ui/Drawer/Drawer.mjs";
+import "../../ui/Field/Field.mjs";
+import "../../ui/IconButton/iconButton.recipe.mjs";
+import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PinInput/PinInput.mjs";
+import "../../ui/Popover/Popover.mjs";
+import "tailwind-merge";
+import { Root as Ne, Item as w, ItemText as O, ItemControl as b, ItemHiddenInput as N, Indicator as Ae } from "../../ui/SegmentGroup/SegmentGroup.mjs";
+import { Root as s, Trigger as d, ValueText as C, Indicator as g, Positioner as T, Content as v, ItemGroup as p, Item as h, ItemText as f, ItemIndicator as S } from "../../ui/Select/Select.mjs";
+import "../../ui/Table/Table.mjs";
+import "../../ui/Tabs/Tabs.mjs";
+const ke = i.enum(["all", "today", "custom"]).catch("all"), ee = [
+  "ACCEPTED",
+  "APPROVED",
+  "CANCELLED",
+  "CONFIRMED",
+  "FAILED",
+  "PENDING",
+  "REJECTED"
+], te = [
+  "ACCEPTED",
+  "APPROVED",
+  "CANCELLED",
+  "CONFIRMED",
+  "FAILED",
+  "PENDING",
+  "REJECTED"
+], ae = Intl.DateTimeFormat().resolvedOptions().timeZone;
+function Dt(t) {
+  var L, z, M, G, $, H, W, B, J, _, Z, j, q, K;
+  const A = u({
+    items: t.gameTypeOptions ?? [],
+    itemToValue: (e) => e,
+    itemToString: (e) => l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })
+  }), k = u({
+    items: t.gameProviderOptions ?? [],
+    itemToValue: (e) => e,
+    itemToString: (e) => l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })
+  }), F = u({
+    items: ee,
+    itemToValue: (e) => e,
+    itemToString: (e) => l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })
+  }), x = u({
+    items: te,
+    itemToValue: (e) => e,
+    itemToString: (e) => l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })
+  }), [le, U] = Re("all"), r = (e) => {
+    var n;
+    const a = {
+      timestamp: c,
+      gameType: y,
+      gameProvider: I,
+      depositStatus: P,
+      withdrawalStatus: V
+    };
+    (n = t.onChange) == null || n.call(t, {
+      ...a,
+      ...e
+    });
+  }, [c, D] = o({
+    value: (L = t.value) == null ? void 0 : L.timestamp,
+    defaultValue: ((z = t.defaultValue) == null ? void 0 : z.timestamp) ?? null,
+    onChange(e) {
+      r({ timestamp: e });
+    }
+  }), [y, ne] = o({
+    value: (M = t.value) == null ? void 0 : M.gameType,
+    defaultValue: ((G = t.defaultValue) == null ? void 0 : G.gameType) ?? null,
+    onChange(e) {
+      r({ gameType: e });
+    }
+  }), [I, ce] = o({
+    value: ($ = t.value) == null ? void 0 : $.gameProvider,
+    defaultValue: ((H = t.defaultValue) == null ? void 0 : H.gameProvider) ?? null,
+    onChange(e) {
+      r({ gameProvider: e });
+    }
+  }), [P, re] = o({
+    value: (W = t.value) == null ? void 0 : W.depositStatus,
+    defaultValue: ((B = t.defaultValue) == null ? void 0 : B.depositStatus) ?? null,
+    onChange(e) {
+      r({ depositStatus: e });
+    }
+  }), [V, me] = o({
+    value: (J = t.value) == null ? void 0 : J.withdrawalStatus,
+    defaultValue: ((_ = t.defaultValue) == null ? void 0 : _.withdrawalStatus) ?? null,
+    onChange(e) {
+      r({ withdrawalStatus: e });
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-lg" }, /* @__PURE__ */ React.createElement(
+    Ce,
+    {
+      lazyMount: !0,
+      unmountOnExit: !0,
+      value: [c == null ? void 0 : c.start, c == null ? void 0 : c.end].filter(Boolean).map((e) => ie(e)),
+      onValueChange: (e) => {
+        var a, n;
+        D({
+          start: (a = e.value.at(0)) == null ? void 0 : a.toDate(ae),
+          end: (n = e.value.at(1)) == null ? void 0 : n.toDate(ae)
+        });
+      },
+      onOpenChange: (e) => {
+        e.open || c || U("all");
+      },
+      selectionMode: "range",
+      closeOnSelect: !1,
+      positioning: {
+        gutter: 20,
+        placement: "bottom"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Ne,
+      {
+        value: le,
+        onValueChange: (e) => {
+          const a = ke.parse(e.value);
+          if (a === "today") {
+            const n = /* @__PURE__ */ new Date();
+            D({
+              start: Ee(n),
+              end: ue(n)
+            });
+          } else
+            D(null);
+          U(a);
+        }
+      },
+      /* @__PURE__ */ React.createElement(w, { value: "all" }, /* @__PURE__ */ React.createElement(O, null, "All"), /* @__PURE__ */ React.createElement(b, null), /* @__PURE__ */ React.createElement(N, null)),
+      /* @__PURE__ */ React.createElement(w, { value: "today" }, /* @__PURE__ */ React.createElement(O, null, "Today"), /* @__PURE__ */ React.createElement(b, null), /* @__PURE__ */ React.createElement(N, null)),
+      /* @__PURE__ */ React.createElement(X, null, (e) => /* @__PURE__ */ React.createElement(
+        w,
+        {
+          value: "custom",
+          onClick: () => e.setOpen(!0)
+        },
+        /* @__PURE__ */ React.createElement(ge, null, /* @__PURE__ */ React.createElement(O, null, "Custom"), /* @__PURE__ */ React.createElement(b, null), /* @__PURE__ */ React.createElement(N, null))
+      )),
+      /* @__PURE__ */ React.createElement(Ae, null)
+    ),
+    /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(Te, null, /* @__PURE__ */ React.createElement(ve, null, /* @__PURE__ */ React.createElement(pe, { view: "day" }, /* @__PURE__ */ React.createElement(X, null, (e) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(he, null, /* @__PURE__ */ React.createElement(fe, null, /* @__PURE__ */ React.createElement(se, null)), /* @__PURE__ */ React.createElement(Se, null, /* @__PURE__ */ React.createElement(De, null)), /* @__PURE__ */ React.createElement(ye, null, /* @__PURE__ */ React.createElement(de, null))), /* @__PURE__ */ React.createElement(Ie, null, /* @__PURE__ */ React.createElement(Pe, null, /* @__PURE__ */ React.createElement(Y, null, e.weekDays.map((a, n) => /* @__PURE__ */ React.createElement(Ve, { key: n }, a.short.substring(0, 2))))), /* @__PURE__ */ React.createElement(we, null, e.weeks.map((a, n) => /* @__PURE__ */ React.createElement(Y, { key: n }, a.map((Q, oe) => /* @__PURE__ */ React.createElement(Oe, { key: oe, value: Q }, /* @__PURE__ */ React.createElement(be, null, Q.day)))))))))))))
+  ), /* @__PURE__ */ React.createElement("div", { className: "grow" }), ((Z = t.enabledFilters) == null ? void 0 : Z.gameType) && /* @__PURE__ */ React.createElement(
+    s,
+    {
+      collection: A,
+      value: y ? [y] : [],
+      onValueChange: (e) => {
+        const a = i.enum(t.gameTypeOptions ?? []).safeParse(e.value.at(0)).data;
+        ne(a ?? null);
+      },
+      lazyMount: !0,
+      deselectable: !0
+    },
+    /* @__PURE__ */ React.createElement(d, null, /* @__PURE__ */ React.createElement(C, { placeholder: "Game Type" }), /* @__PURE__ */ React.createElement(g, { asChild: !0 }, /* @__PURE__ */ React.createElement(R, null))),
+    /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(v, null, /* @__PURE__ */ React.createElement(p, null, A.items.map((e) => /* @__PURE__ */ React.createElement(h, { key: e, item: e }, /* @__PURE__ */ React.createElement(f, null, l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })), /* @__PURE__ */ React.createElement(S, { asChild: !0 }, /* @__PURE__ */ React.createElement(E, null))))))))
+  ), ((j = t.enabledFilters) == null ? void 0 : j.gameProvider) && /* @__PURE__ */ React.createElement(
+    s,
+    {
+      collection: k,
+      value: I ? [I] : [],
+      onValueChange: (e) => {
+        const a = i.enum(t.gameProviderOptions ?? []).safeParse(e.value.at(0)).data;
+        ce(a ?? null);
+      },
+      lazyMount: !0,
+      deselectable: !0
+    },
+    /* @__PURE__ */ React.createElement(d, null, /* @__PURE__ */ React.createElement(C, { placeholder: "Game Vendor" }), /* @__PURE__ */ React.createElement(g, { asChild: !0 }, /* @__PURE__ */ React.createElement(R, null))),
+    /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(v, null, /* @__PURE__ */ React.createElement(p, null, k.items.map((e) => /* @__PURE__ */ React.createElement(h, { key: e, item: e }, /* @__PURE__ */ React.createElement(f, null, l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })), /* @__PURE__ */ React.createElement(S, { asChild: !0 }, /* @__PURE__ */ React.createElement(E, null))))))))
+  ), ((q = t.enabledFilters) == null ? void 0 : q.depositStatus) && /* @__PURE__ */ React.createElement(
+    s,
+    {
+      collection: F,
+      value: P ? [P] : [],
+      onValueChange: (e) => {
+        const a = i.enum(ee).safeParse(e.value.at(0)).data;
+        re(a ?? null);
+      },
+      lazyMount: !0,
+      deselectable: !0
+    },
+    /* @__PURE__ */ React.createElement(d, null, /* @__PURE__ */ React.createElement(C, { placeholder: "Status" }), /* @__PURE__ */ React.createElement(g, { asChild: !0 }, /* @__PURE__ */ React.createElement(R, null))),
+    /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(v, null, /* @__PURE__ */ React.createElement(p, null, x.items.map((e) => /* @__PURE__ */ React.createElement(h, { key: e, item: e }, /* @__PURE__ */ React.createElement(f, null, l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })), /* @__PURE__ */ React.createElement(S, { asChild: !0 }, /* @__PURE__ */ React.createElement(E, null))))))))
+  ), ((K = t.enabledFilters) == null ? void 0 : K.withdrawalStatus) && /* @__PURE__ */ React.createElement(
+    s,
+    {
+      collection: x,
+      value: V ? [V] : [],
+      onValueChange: (e) => {
+        const a = i.enum(te).safeParse(e.value.at(0)).data;
+        me(a ?? null);
+      },
+      lazyMount: !0,
+      deselectable: !0
+    },
+    /* @__PURE__ */ React.createElement(d, null, /* @__PURE__ */ React.createElement(C, { placeholder: "Status" }), /* @__PURE__ */ React.createElement(g, { asChild: !0 }, /* @__PURE__ */ React.createElement(R, null))),
+    /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(T, null, /* @__PURE__ */ React.createElement(v, null, /* @__PURE__ */ React.createElement(p, null, F.items.map((e) => /* @__PURE__ */ React.createElement(h, { key: e, item: e }, /* @__PURE__ */ React.createElement(f, null, l(e, {
+      delimiter: l.delimiters.UNDERSCORE
+    })), /* @__PURE__ */ React.createElement(S, { asChild: !0 }, /* @__PURE__ */ React.createElement(E, null))))))))
+  ));
+}
+export {
+  Dt as TableFilters
+};

package/dist/components/TransactionRecords/TransactionRecords.d.ts

@@ -1,7 +1,7 @@
-import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
+import { GameProvider, GameType } from '@opexa/portal-sdk-core';
 export interface TransactionRecordsProps {
     gameTypes: GameType[];
     gameProviders: GameProvider[];
     className?: string;
 }
-export declare function TransactionRecords(props: TransactionRecordsProps): import("react").JSX.Element;
+export declare function TransactionRecords(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecords.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");require("@ark-ui/react");require("../../utils/capitalize.js");require("react");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/toaster.js");require("../../ui/Button/button.recipe.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");const e=require("../../ui/Tabs/Tabs.js"),t=require("./DepositRecordsTable.js"),a=require("./TransactionRecordsTable.js"),c=require("./WithdrawalRecordsTable.js");function i(r){return React.createElement("div",{className:r.className},React.createElement("h2",{className:"text-lg font-semibold"},"Transaction Records"),React.createElement("p",{className:"text-gray-600 mt-xs text-xs"},"View your transaction records"),React.createElement(e.Root,{className:"mt-2xl",defaultValue:"transactions",lazyMount:!0,unmountOnExit:!0},React.createElement("div",{className:"pb-2xl"},React.createElement(e.List,null,React.createElement(e.Trigger,{value:"transactions"},"Transactions"),React.createElement(e.Trigger,{value:"deposits"},"Deposits"),React.createElement(e.Trigger,{value:"withdrawals"},"Withdrawals"),React.createElement(e.Indicator,null))),React.createElement(e.Content,{value:"transactions",className:"mt-4xl"},React.createElement(a.TransactionRecordsTable,null)),React.createElement(e.Content,{value:"deposits",className:"mt-4xl"},React.createElement(t.DepositRecordsTable,null)),React.createElement(e.Content,{value:"withdrawals",className:"mt-4xl"},React.createElement(c.WithdrawalRecordsTable,null))))}exports.TransactionRecords=i;

package/dist/components/TransactionRecords/TransactionRecords.mjs

@@ -0,0 +1,50 @@
+"use client";
+import "../../ui/AlertDialog/AlertDialog.mjs";
+import "../../ui/Avatar/Avatar.mjs";
+import "../../ui/Badge/Badge.mjs";
+import "@ark-ui/react";
+import "../../utils/capitalize.mjs";
+import "react";
+import "../../utils/parseDecimal.mjs";
+import "../../constants/index.mjs";
+import "../../utils/getLocaleInfo.mjs";
+import "../../utils/getQueryClient.mjs";
+import "../../utils/isMobile.mjs";
+import "../../utils/toaster.mjs";
+import "../../ui/Button/button.recipe.mjs";
+import "../../ui/Checkbox/Checkbox.mjs";
+import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/DatePicker/DatePicker.mjs";
+import "../../ui/Dialog/Dialog.mjs";
+import "../../ui/Drawer/Drawer.mjs";
+import "../../ui/Field/Field.mjs";
+import "../../ui/IconButton/iconButton.recipe.mjs";
+import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PinInput/PinInput.mjs";
+import "../../ui/Popover/Popover.mjs";
+import "tailwind-merge";
+import "../../ui/SegmentGroup/SegmentGroup.mjs";
+import "../../ui/Select/Select.mjs";
+import "../../ui/Table/Table.mjs";
+import { Root as r, List as m, Trigger as t, Indicator as o, Content as e } from "../../ui/Tabs/Tabs.mjs";
+import { DepositRecordsTable as l } from "./DepositRecordsTable.mjs";
+import { TransactionRecordsTable as c } from "./TransactionRecordsTable.mjs";
+import { WithdrawalRecordsTable as i } from "./WithdrawalRecordsTable.mjs";
+function F(a) {
+  return /* @__PURE__ */ React.createElement("div", { className: a.className }, /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-semibold" }, "Transaction Records"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 mt-xs text-xs" }, "View your transaction records"), /* @__PURE__ */ React.createElement(
+    r,
+    {
+      className: "mt-2xl",
+      defaultValue: "transactions",
+      lazyMount: !0,
+      unmountOnExit: !0
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "pb-2xl" }, /* @__PURE__ */ React.createElement(m, null, /* @__PURE__ */ React.createElement(t, { value: "transactions" }, "Transactions"), /* @__PURE__ */ React.createElement(t, { value: "deposits" }, "Deposits"), /* @__PURE__ */ React.createElement(t, { value: "withdrawals" }, "Withdrawals"), /* @__PURE__ */ React.createElement(o, null))),
+    /* @__PURE__ */ React.createElement(e, { value: "transactions", className: "mt-4xl" }, /* @__PURE__ */ React.createElement(c, null)),
+    /* @__PURE__ */ React.createElement(e, { value: "deposits", className: "mt-4xl" }, /* @__PURE__ */ React.createElement(l, null)),
+    /* @__PURE__ */ React.createElement(e, { value: "withdrawals", className: "mt-4xl" }, /* @__PURE__ */ React.createElement(i, null))
+  ));
+}
+export {
+  F as TransactionRecords
+};

package/dist/components/TransactionRecords/TransactionRecordsTable.d.ts

@@ -1 +1 @@
-export declare function TransactionRecordsTable(): import("react").JSX.Element;
+export declare function TransactionRecordsTable(): import("react/jsx-runtime").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("@ark-ui/react"),i=require("@date-fns/tz"),o=require("date-fns"),S=require("react");require("@opexa/portal-sdk-core");require("@tanstack/react-query");require("tiny-invariant");require("../../constants/index.js");const m=require("../../utils/capitalize.js"),d=require("../../utils/formatNumber.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/parseDecimal.js");require("../../utils/toaster.js");require("lodash-es");require("../../_virtual/index.cjs.js");require("../../hooks/useGlobalStore.js");const g=require("../../hooks/useInfiniteQueryHelper.js"),z=require("../../hooks/useLocaleInfo.js");require("usehooks-ts");const P=require("../../hooks/useTransactionRecordsQuery.js"),w=require("../../icons/ChevronDownIcon.js"),H=require("../../icons/ChevronLeftIcon.js"),D=require("../../icons/ChevronRightIcon.js"),x=require("../../icons/File02Icon.js"),O=require("../../icons/SpinnerIcon.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");require("../../ui/Button/button.recipe.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");const R=require("../../ui/IconButton/IconButton.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/SegmentGroup/SegmentGroup.js");const n=require("../../ui/Select/Select.js"),e=require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");const F=require("../Empty/Empty.js"),M=require("./TableFilters.js");function B(){const[r,E]=S.useState(),a=z.useLocaleInfo(),{page:y,pageSize:p,hasNextPage:f,hasPrevPage:C,next:I,prev:T,rows:l,setPageSize:h,totalPages:v,loading:c,firstPage:b}=g.useInfiniteQueryHelper(P.useTransactionRecordsQuery,{filter:{...r&&{dateTimeCreated:{...r.start&&{greaterThanOrEqual:new i.TZDateMini(o.startOfDay(r.start),a.timezone).toISOString()},...r.end&&{lesserThanOrEqual:new i.TZDateMini(o.endOfDay(r.end),a.timezone).toISOString()}}}}});return React.createElement(React.Fragment,null,React.createElement(M.TableFilters,{value:{timestamp:r},onChange:t=>{E(t.timestamp),b()}}),l.length<=0&&React.createElement(F.Empty,{icon:c?O.SpinnerIcon:x.File02Icon,title:c?"Just a moment":"No data",message:c?"Fetching latest transaction records...":"No data is currently available.",className:"mt-8 lg:mt-16"}),l.length>=1&&React.createElement("div",{className:"border-gray-200 mt-lg rounded-xl border"},React.createElement("div",{className:"border-gray-200 overflow-hidden overflow-x-auto rounded-xl border-b"},React.createElement(e.Root,{className:"border-0"},React.createElement(e.Header,null,React.createElement(e.Row,null,React.createElement(e.Heading,null,"Transaction Type"),React.createElement(e.Heading,null,"Transaction Time"),React.createElement(e.Heading,null,"Amount"),React.createElement(e.Heading,null,"Current Balance"),React.createElement(e.Heading,null,"Reference Number"),React.createElement(e.Heading,null,"Content"))),React.createElement(e.Body,null,l.map(t=>React.createElement(e.Row,{key:t.id},React.createElement(e.Cell,null,m.capitalize(t.type,{delimiter:m.capitalize.delimiters.UNDERSCORE})),React.createElement(e.Cell,null,o.format(t.dateTimeCreated,"yyyy MMM dd hh:mma",{in:i.tz(a.timezone)})),React.createElement(e.Cell,null,d.formatNumber(t.amount,{currency:a.currency.code,minDecimalPlaces:2})),React.createElement(e.Cell,null,d.formatNumber(t.currentBalance,{currency:a.currency.code,minDecimalPlaces:2})),React.createElement(e.Cell,null,t.referenceNumber),React.createElement(e.Cell,null,t.content)))))),React.createElement("div",{className:"flex items-center gap-lg px-4 py-3"},React.createElement("p",null,"Page ",y," of ",v),React.createElement("div",{className:"grow"}),React.createElement(n.Root,{size:"sm",value:[p.toString()],onValueChange:t=>{const s=parseInt(t.value[0]),N=isNaN(s)?10:s;h(N)},collection:u,lazyMount:!0},React.createElement(n.Trigger,null,React.createElement(n.ValueText,null),React.createElement(n.Indicator,{asChild:!0},React.createElement(w.ChevronDownIcon,null)),React.createElement(q.Portal,null,React.createElement(n.Positioner,null,React.createElement(n.Content,null,u.items.map(t=>React.createElement(n.Item,{key:t,item:t},u.stringifyItem(t)))))))),React.createElement("div",null,React.createElement(R.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",className:"rounded-r-none border-r-0",disabled:!C||c,onClick:()=>T()},React.createElement(H.ChevronLeftIcon,{className:"size-5"})),React.createElement(R.IconButton,{size:"sm",variant:"outline",colorScheme:"gray",className:"rounded-l-none",disabled:!f||c,onClick:()=>I()},React.createElement(D.ChevronRightIcon,{className:"size-5"}))))))}const u=q.createListCollection({items:g.useInfiniteQueryHelper.config.pageSizes,itemToValue:r=>r.toString(),itemToString:r=>`${r} items per page`});exports.TransactionRecordsTable=B;