@opexa/portal-components 0.0.16 → 0.0.18

package/dist/components/BetRecords/BetRecords.mjs

@@ -1,397 +1,429 @@
 "use client";
-import { jsxs as r, jsx as e, Fragment as pe } from "react/jsx-runtime";
-import { createListCollection as w, Portal as p, parseDate as ge } from "@ark-ui/react";
-import { TZDateMini as $, tz as _ } from "@date-fns/tz";
-import { endOfDay as A, startOfDay as H, format as L } from "date-fns";
-import { useState as ve, useReducer as ye } from "react";
-import { z as T } from "zod";
+import { jsxs as r, jsx as e, Fragment as A } from "react/jsx-runtime";
+import { createListCollection as V, Portal as g, parseDate as ge } from "@ark-ui/react";
+import { TZDateMini as U, tz as y } from "@date-fns/tz";
+import { endOfDay as _, startOfDay as q, format as f } from "date-fns";
+import { useState as ye, useReducer as fe } from "react";
+import { twMerge as ve } from "tailwind-merge";
+import { z as C } from "zod";
 import "@opexa/portal-sdk-core";
 import "@tanstack/react-query";
 import "tiny-invariant";
 import "../../constants/index.mjs";
-import { capitalize as c } from "../../utils/capitalize.mjs";
-import { formatNumber as g } from "../../utils/formatNumber.mjs";
+import { capitalize as m } from "../../utils/capitalize.mjs";
+import { formatNumber as p } from "../../utils/formatNumber.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
 import "../../utils/parseDecimal.mjs";
-import { useBetRecordsQuery as fe } from "../../client/hooks/useBetRecordsQuery.mjs";
+import { useBetRecordsQuery as Ne } from "../../client/hooks/useBetRecordsQuery.mjs";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
 import "../../client/hooks/useGlobalStore.mjs";
-import { useInfiniteQueryHelper as re } from "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as Ce } from "../../client/hooks/useLocaleInfo.mjs";
+import { useInfiniteQueryHelper as le } from "../../client/hooks/useInfiniteQueryHelper.mjs";
+import { useLocaleInfo as Te } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
-import { CheckIcon as U } from "../../icons/CheckIcon.mjs";
-import { ChevronDownIcon as I } from "../../icons/ChevronDownIcon.mjs";
-import { ChevronLeftIcon as q } from "../../icons/ChevronLeftIcon.mjs";
-import { ChevronRightIcon as j } from "../../icons/ChevronRightIcon.mjs";
-import { File02Icon as Te } from "../../icons/File02Icon.mjs";
-import { SpinnerIcon as Se } from "../../icons/SpinnerIcon.mjs";
+import { CheckIcon as H } from "../../icons/CheckIcon.mjs";
+import { ChevronDownIcon as S } from "../../icons/ChevronDownIcon.mjs";
+import { ChevronLeftIcon as j } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as F } from "../../icons/ChevronRightIcon.mjs";
+import { File02Icon as be } from "../../icons/File02Icon.mjs";
+import { SpinnerIcon as Ce } from "../../icons/SpinnerIcon.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
-import "../../ui/Badge/Badge.mjs";
+import { Root as xe, Label as Se } from "../../ui/Badge/Badge.mjs";
 import "../../ui/Button/button.recipe.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
-import { Root as Ie, Context as F, Control as be, Positioner as Ne, Content as Re, View as xe, ViewControl as De, PrevTrigger as Ee, ViewTrigger as Pe, RangeText as ze, NextTrigger as we, Table as Oe, TableHead as Ve, TableRow as G, TableHeader as Be, TableBody as Me, TableCell as ke, TableCellTrigger as $e } from "../../ui/DatePicker/DatePicker.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
+import { Root as we, Context as G, Control as Re, Positioner as Ie, Content as Ee, View as De, ViewControl as Pe, PrevTrigger as ze, ViewTrigger as Oe, RangeText as Ve, NextTrigger as ke, Table as Be, TableHead as Me, TableRow as J, TableHeader as $e, TableBody as Le, TableCell as Ae, TableCellTrigger as Ue } from "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
 import "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
-import { IconButton as J } from "../../ui/IconButton/IconButton.mjs";
+import { IconButton as Z } from "../../ui/IconButton/IconButton.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
 import "../../ui/Popover/Popover.mjs";
-import "tailwind-merge";
-import { Root as Z, Item as v, ItemText as y, ItemControl as f, ItemHiddenInput as C, Indicator as Q } from "../../ui/SegmentGroup/SegmentGroup.mjs";
-import { Root as b, Trigger as N, ValueText as R, Indicator as x, Positioner as D, Content as E, ItemGroup as K, Item as P, ItemText as W, ItemIndicator as X } from "../../ui/Select/Select.mjs";
-import { Root as _e, Header as Ae, Row as Y, Heading as o, Body as He, Cell as a } from "../../ui/Table/Table.mjs";
+import "../../ui/Progress/Progress.mjs";
+import { Root as Q, Item as v, ItemText as N, ItemControl as T, ItemHiddenInput as b, Indicator as W } from "../../ui/SegmentGroup/SegmentGroup.mjs";
+import { Root as w, Trigger as R, ValueText as I, Indicator as E, Positioner as D, Content as P, ItemGroup as K, Item as z, ItemText as X, ItemIndicator as Y } from "../../ui/Select/Select.mjs";
+import { Root as _e, Header as qe, Row as ee, Heading as o, Body as He, Cell as a } from "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-import { Empty as Le } from "../Empty/Empty.mjs";
-function _t(l) {
-  var B, M;
-  const [ne, O] = ve("all"), [n, s] = ye(
-    (t, i) => ({
+import { Empty as je } from "../Empty/Empty.mjs";
+function jt(n) {
+  var M, $;
+  const [ne, k] = ye("all"), [i, d] = fe(
+    (t, l) => ({
       ...t,
-      ...i
+      ...l
     }),
     {
       page: 1,
       pageSize: 10,
-      type: l.gameTypes[0]
+      type: n.gameTypes[0]
     }
-  ), d = Ce(), V = w({
-    items: l.gameProviders,
+  ), c = Te(), B = V({
+    items: n.gameProviders,
     itemToValue: (t) => t,
-    itemToString: (t) => c(t, {
-      delimiter: c.delimiters.UNDERSCORE
+    itemToString: (t) => m(t, {
+      delimiter: m.delimiters.UNDERSCORE
     })
   }), {
-    page: le,
-    pageSize: oe,
-    hasNextPage: ae,
-    hasPrevPage: me,
-    next: ce,
+    page: oe,
+    pageSize: ae,
+    hasNextPage: me,
+    hasPrevPage: ce,
+    next: se,
     prev: de,
-    rows: S,
-    setPageSize: se,
-    totalPages: he,
+    rows: x,
+    setPageSize: he,
+    totalPages: ue,
     loading: h,
     firstPage: u
-  } = re(fe, {
+  } = le(Ne, {
     filter: {
-      ...n.type && {
+      ...i.type && {
         game__type: {
-          equal: n.type
+          equal: i.type
         }
       },
-      ...n.provider && {
+      ...i.provider && {
         game__provider: {
-          equal: n.provider
+          equal: i.provider
         }
       },
-      ...n.status && {
+      ...i.status && {
         status: {
-          equal: n.status
+          equal: i.status
         }
       },
-      ...n.timestamp && {
+      ...i.timestamp && {
         dateTimeCreated: {
-          ...n.timestamp.start && {
-            greaterThanOrEqual: new $(
-              H(n.timestamp.start),
-              d.timezone
+          ...i.timestamp.start && {
+            greaterThanOrEqual: new U(
+              q(i.timestamp.start),
+              c.timezone
             ).toISOString()
           },
-          ...n.timestamp.end && {
-            lesserThanOrEqual: new $(
-              A(n.timestamp.end),
-              d.timezone
+          ...i.timestamp.end && {
+            lesserThanOrEqual: new U(
+              _(i.timestamp.end),
+              c.timezone
             ).toISOString()
           }
         }
       }
     }
   });
-  return /* @__PURE__ */ r("div", { className: l.className, children: [
-    /* @__PURE__ */ e("h2", { className: "text-lg font-semibold", children: "Bet Records" }),
-    /* @__PURE__ */ e("p", { className: "text-gray-600 mt-xs text-xs", children: "View your bet records" }),
-    /* @__PURE__ */ e("div", { className: "mt-2xl pb-2xl", children: /* @__PURE__ */ r(
-      Z,
+  return /* @__PURE__ */ r("div", { className: ve("px-4 pb-3xl pt-4", n.className), children: [
+    /* @__PURE__ */ e("h2", { className: "text-text-secondary-700 text-sm font-semibold leading-tight", children: "Bet Records" }),
+    /* @__PURE__ */ e("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }),
+    /* @__PURE__ */ e("div", { className: "mt-lg", children: /* @__PURE__ */ r(
+      Q,
       {
-        value: n.type,
+        value: i.type,
         onValueChange: (t) => {
-          u(), s({
-            type: T.enum(l.gameTypes ?? []).safeParse(t.value).data ?? null
+          u(), d({
+            type: C.enum(n.gameTypes ?? []).safeParse(t.value).data ?? null
           });
         },
         children: [
-          l.gameTypes.map((t) => /* @__PURE__ */ r(v, { value: t, children: [
-            /* @__PURE__ */ e(y, { children: c(t, {
-              delimiter: c.delimiters.UNDERSCORE
+          n.gameTypes.map((t) => /* @__PURE__ */ r(v, { value: t, children: [
+            /* @__PURE__ */ e(N, { children: m(t, {
+              delimiter: m.delimiters.UNDERSCORE
             }) }),
-            /* @__PURE__ */ e(f, {}),
-            /* @__PURE__ */ e(C, {})
+            /* @__PURE__ */ e(T, {}),
+            /* @__PURE__ */ e(b, {})
           ] }, t)),
-          /* @__PURE__ */ e(Q, {})
+          /* @__PURE__ */ e(W, {})
         ]
       }
     ) }),
-    /* @__PURE__ */ r("div", { className: "mt-4xl", children: [
-      /* @__PURE__ */ r("div", { className: "flex items-center gap-lg", children: [
-        /* @__PURE__ */ r(
-          Ie,
-          {
-            lazyMount: !0,
-            unmountOnExit: !0,
-            value: [(B = n.timestamp) == null ? void 0 : B.start, (M = n.timestamp) == null ? void 0 : M.end].filter(Boolean).map((t) => ge(t)),
-            onValueChange: (t) => {
-              var i, m;
-              u(), s({
-                timestamp: {
-                  start: (i = t.value.at(0)) == null ? void 0 : i.toDate(te),
-                  end: (m = t.value.at(1)) == null ? void 0 : m.toDate(te)
-                }
-              });
-            },
-            onOpenChange: (t) => {
-              t.open || n.timestamp || O("all");
-            },
-            selectionMode: "range",
-            closeOnSelect: !1,
-            positioning: {
-              gutter: 20,
-              placement: "bottom"
-            },
-            children: [
-              /* @__PURE__ */ r(
-                Z,
-                {
-                  value: ne,
-                  onValueChange: (t) => {
-                    const i = Ue.parse(t.value);
-                    if (i === "today") {
-                      const m = /* @__PURE__ */ new Date();
-                      s({
-                        timestamp: {
-                          start: H(m),
-                          end: A(m)
-                        }
-                      });
-                    } else
-                      s({
-                        timestamp: null
-                      });
-                    u(), O(i);
-                  },
-                  children: [
-                    /* @__PURE__ */ r(v, { value: "all", children: [
-                      /* @__PURE__ */ e(y, { children: "All" }),
-                      /* @__PURE__ */ e(f, {}),
-                      /* @__PURE__ */ e(C, {})
-                    ] }),
-                    /* @__PURE__ */ r(v, { value: "today", children: [
-                      /* @__PURE__ */ e(y, { children: "Today" }),
-                      /* @__PURE__ */ e(f, {}),
-                      /* @__PURE__ */ e(C, {})
-                    ] }),
-                    /* @__PURE__ */ e(F, { children: (t) => /* @__PURE__ */ e(
-                      v,
-                      {
-                        value: "custom",
-                        onClick: () => t.setOpen(!0),
-                        children: /* @__PURE__ */ r(be, { children: [
-                          /* @__PURE__ */ e(y, { children: "Custom" }),
-                          /* @__PURE__ */ e(f, {}),
-                          /* @__PURE__ */ e(C, {})
-                        ] })
+    /* @__PURE__ */ e("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }),
+    /* @__PURE__ */ r("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [
+      /* @__PURE__ */ r(
+        we,
+        {
+          lazyMount: !0,
+          unmountOnExit: !0,
+          value: [(M = i.timestamp) == null ? void 0 : M.start, ($ = i.timestamp) == null ? void 0 : $.end].filter(Boolean).map((t) => ge(t)),
+          onValueChange: (t) => {
+            var l, s;
+            u(), d({
+              timestamp: {
+                start: (l = t.value.at(0)) == null ? void 0 : l.toDate(re),
+                end: (s = t.value.at(1)) == null ? void 0 : s.toDate(re)
+              }
+            });
+          },
+          onOpenChange: (t) => {
+            t.open || i.timestamp || k("all");
+          },
+          selectionMode: "range",
+          closeOnSelect: !1,
+          positioning: {
+            gutter: 20,
+            placement: "bottom"
+          },
+          children: [
+            /* @__PURE__ */ r(
+              Q,
+              {
+                value: ne,
+                onValueChange: (t) => {
+                  const l = Fe.parse(t.value);
+                  if (l === "today") {
+                    const s = /* @__PURE__ */ new Date();
+                    d({
+                      timestamp: {
+                        start: q(s),
+                        end: _(s)
                       }
-                    ) }),
-                    /* @__PURE__ */ e(Q, {})
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(Re, { children: /* @__PURE__ */ e(xe, { view: "day", children: /* @__PURE__ */ e(F, { children: (t) => /* @__PURE__ */ r(pe, { children: [
-                /* @__PURE__ */ r(De, { children: [
-                  /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(q, {}) }),
-                  /* @__PURE__ */ e(Pe, { children: /* @__PURE__ */ e(ze, {}) }),
-                  /* @__PURE__ */ e(we, { children: /* @__PURE__ */ e(j, {}) })
-                ] }),
-                /* @__PURE__ */ r(Oe, { children: [
-                  /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(G, { children: t.weekDays.map((i, m) => /* @__PURE__ */ e(Be, { children: i.short.substring(0, 2) }, m)) }) }),
-                  /* @__PURE__ */ e(Me, { children: t.weeks.map((i, m) => /* @__PURE__ */ e(G, { children: i.map((k, ue) => /* @__PURE__ */ e(ke, { value: k, children: /* @__PURE__ */ e($e, { children: k.day }) }, ue)) }, m)) })
-                ] })
-              ] }) }) }) }) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "grow" }),
-        /* @__PURE__ */ r(
-          b,
-          {
-            collection: V,
-            value: n.provider ? [n.provider] : [],
-            onValueChange: (t) => {
-              const i = T.enum(l.gameProviders ?? []).safeParse(t.value.at(0)).data;
-              u(), s({
-                provider: i ?? null
-              });
-            },
-            lazyMount: !0,
-            deselectable: !0,
-            children: [
-              /* @__PURE__ */ r(N, { children: [
-                /* @__PURE__ */ e(R, { placeholder: "Game Vendor" }),
-                /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(I, {}) })
-              ] }),
-              /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(K, { children: V.items.map((t) => /* @__PURE__ */ r(P, { item: t, children: [
-                /* @__PURE__ */ e(W, { children: c(t, {
-                  delimiter: c.delimiters.UNDERSCORE
-                }) }),
-                /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(U, {}) })
-              ] }, t)) }) }) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ r(
-          b,
-          {
-            collection: ee,
-            value: n.status ? [n.status] : [],
-            onValueChange: (t) => {
-              const i = T.enum(ie).safeParse(t.value.at(0)).data;
-              u(), s({
-                status: i ?? null
-              });
-            },
-            lazyMount: !0,
-            deselectable: !0,
-            children: [
-              /* @__PURE__ */ r(N, { children: [
-                /* @__PURE__ */ e(R, { placeholder: "Status" }),
-                /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(I, {}) })
+                    });
+                  } else
+                    d({
+                      timestamp: null
+                    });
+                  u(), k(l);
+                },
+                className: "w-full lg:w-fit",
+                children: [
+                  /* @__PURE__ */ r(v, { value: "all", className: "w-full lg:w-auto", children: [
+                    /* @__PURE__ */ e(N, { children: "All" }),
+                    /* @__PURE__ */ e(T, {}),
+                    /* @__PURE__ */ e(b, {})
+                  ] }),
+                  /* @__PURE__ */ r(v, { value: "today", className: "w-full lg:w-auto", children: [
+                    /* @__PURE__ */ e(N, { children: "Today" }),
+                    /* @__PURE__ */ e(T, {}),
+                    /* @__PURE__ */ e(b, {})
+                  ] }),
+                  /* @__PURE__ */ e(G, { children: (t) => /* @__PURE__ */ e(
+                    v,
+                    {
+                      value: "custom",
+                      onClick: () => t.setOpen(!0),
+                      className: "w-full lg:w-auto",
+                      children: /* @__PURE__ */ r(Re, { children: [
+                        /* @__PURE__ */ e(N, { children: "Custom" }),
+                        /* @__PURE__ */ e(T, {}),
+                        /* @__PURE__ */ e(b, {})
+                      ] })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(W, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(Ie, { children: /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(De, { view: "day", children: /* @__PURE__ */ e(G, { children: (t) => /* @__PURE__ */ r(A, { children: [
+              /* @__PURE__ */ r(Pe, { children: [
+                /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e(j, {}) }),
+                /* @__PURE__ */ e(Oe, { children: /* @__PURE__ */ e(Ve, {}) }),
+                /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(F, {}) })
               ] }),
-              /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(K, { children: ee.items.map((t) => /* @__PURE__ */ r(P, { item: t, children: [
-                /* @__PURE__ */ e(W, { children: c(t, {
-                  delimiter: c.delimiters.UNDERSCORE
-                }) }),
-                /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(U, {}) })
-              ] }, t)) }) }) }) })
-            ]
-          }
-        )
-      ] }),
-      S.length <= 0 && /* @__PURE__ */ e(
-        Le,
-        {
-          icon: h ? Se : Te,
-          title: h ? "Just a moment" : "No data",
-          message: h ? "Fetching latest bet records..." : "No data is currently available.",
-          className: "mt-8 lg:mt-16"
+              /* @__PURE__ */ r(Be, { children: [
+                /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(J, { children: t.weekDays.map((l, s) => /* @__PURE__ */ e($e, { children: l.short.substring(0, 2) }, s)) }) }),
+                /* @__PURE__ */ e(Le, { children: t.weeks.map((l, s) => /* @__PURE__ */ e(J, { children: l.map((L, pe) => /* @__PURE__ */ e(Ae, { value: L, children: /* @__PURE__ */ e(Ue, { children: L.day }) }, pe)) }, s)) })
+              ] })
+            ] }) }) }) }) }) })
+          ]
         }
       ),
-      S.length >= 1 && /* @__PURE__ */ r("div", { className: "border-gray-200 mt-lg rounded-xl border", children: [
-        /* @__PURE__ */ e("div", { className: "border-gray-200 overflow-hidden overflow-x-auto rounded-xl border-b", children: /* @__PURE__ */ r(_e, { className: "border-0", children: [
-          /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ r(Y, { children: [
-            /* @__PURE__ */ e(o, { children: "Bet Time" }),
-            /* @__PURE__ */ e(o, { children: "Settlement Time" }),
-            /* @__PURE__ */ e(o, { children: "Bet Content" }),
-            /* @__PURE__ */ e(o, { children: "Odds" }),
-            /* @__PURE__ */ e(o, { children: "Bet Amount" }),
-            /* @__PURE__ */ e(o, { children: "Valid Bet" }),
-            /* @__PURE__ */ e(o, { children: "Settled Amount" }),
-            /* @__PURE__ */ e(o, { children: "Jackpot Contribution" }),
-            /* @__PURE__ */ e(o, { children: "Jackpot Payout" }),
-            /* @__PURE__ */ e(o, { children: "Bet Status" }),
-            /* @__PURE__ */ e(o, { children: "Game Name" }),
-            /* @__PURE__ */ e(o, { children: "Vendor Round ID" })
-          ] }) }),
-          /* @__PURE__ */ e(He, { children: S.map((t) => {
-            var i;
-            return /* @__PURE__ */ r(Y, { children: [
-              /* @__PURE__ */ e(a, { children: L(t.dateTimeCreated, "yyyy MMM dd hh:mma", {
-                in: _(d.timezone)
-              }) }),
-              /* @__PURE__ */ e(a, { children: !!t.dateTimeSettled && L(t.dateTimeSettled, "yyyy MMM dd hh:mma", {
-                in: _(d.timezone)
-              }) }),
-              /* @__PURE__ */ e(a, { children: t == null ? void 0 : t.betContent }),
-              /* @__PURE__ */ e(a, { children: (i = t.metadata) == null ? void 0 : i.odds }),
-              /* @__PURE__ */ e(a, { children: g(t.bet, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
+      /* @__PURE__ */ e("div", { className: "hidden grow lg:block" }),
+      /* @__PURE__ */ r(
+        w,
+        {
+          collection: B,
+          value: i.provider ? [i.provider] : [],
+          onValueChange: (t) => {
+            const l = C.enum(n.gameProviders ?? []).safeParse(t.value.at(0)).data;
+            u(), d({
+              provider: l ?? null
+            });
+          },
+          lazyMount: !0,
+          deselectable: !0,
+          positioning: {
+            sameWidth: !0
+          },
+          children: [
+            /* @__PURE__ */ r(R, { className: "w-full lg:w-[14rem]", children: [
+              /* @__PURE__ */ e(I, { placeholder: "Game Vendor" }),
+              /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(S, {}) })
+            ] }),
+            /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(K, { children: B.items.map((t) => /* @__PURE__ */ r(z, { item: t, children: [
+              /* @__PURE__ */ e(X, { children: m(t, {
+                delimiter: m.delimiters.UNDERSCORE
               }) }),
-              /* @__PURE__ */ e(a, { children: t.validBet }),
-              /* @__PURE__ */ e(a, { children: g(t.payout, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
+              /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(H, {}) })
+            ] }, t)) }) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        w,
+        {
+          collection: te,
+          value: i.status ? [i.status] : [],
+          onValueChange: (t) => {
+            const l = C.enum(ie).safeParse(t.value.at(0)).data;
+            u(), d({
+              status: l ?? null
+            });
+          },
+          lazyMount: !0,
+          deselectable: !0,
+          positioning: {
+            sameWidth: !0
+          },
+          children: [
+            /* @__PURE__ */ r(R, { className: "w-full lg:w-[14rem]", children: [
+              /* @__PURE__ */ e(I, { placeholder: "Status" }),
+              /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(S, {}) })
+            ] }),
+            /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(K, { children: te.items.map((t) => /* @__PURE__ */ r(z, { item: t, children: [
+              /* @__PURE__ */ e(X, { children: m(t, {
+                delimiter: m.delimiters.UNDERSCORE
               }) }),
-              /* @__PURE__ */ e(a, { children: g(t.jackpotContribution, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
+              /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(H, {}) })
+            ] }, t)) }) }) }) })
+          ]
+        }
+      )
+    ] }),
+    x.length <= 0 && /* @__PURE__ */ e(
+      je,
+      {
+        icon: h ? Ce : be,
+        title: h ? "Just a moment" : "No data",
+        message: h ? "Fetching latest bet records..." : "No data is currently available.",
+        className: "mt-5xl"
+      }
+    ),
+    x.length >= 1 && /* @__PURE__ */ r("div", { className: "border-border-primary -ml-4 mt-3xl w-dvw border-y lg:-ml-0 lg:w-full lg:rounded-xl lg:border-x", children: [
+      /* @__PURE__ */ e("div", { className: "border-border-primary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-xl rounded-b-none border-b", children: /* @__PURE__ */ r(_e, { className: "border-0", children: [
+        /* @__PURE__ */ e(qe, { children: /* @__PURE__ */ r(ee, { children: [
+          /* @__PURE__ */ e(o, { children: "Bet Time" }),
+          /* @__PURE__ */ e(o, { children: "Settlement Time" }),
+          /* @__PURE__ */ e(o, { children: "Bet Content" }),
+          /* @__PURE__ */ e(o, { children: "Odds" }),
+          /* @__PURE__ */ e(o, { children: "Bet Amount" }),
+          /* @__PURE__ */ e(o, { children: "Valid Bet" }),
+          /* @__PURE__ */ e(o, { children: "Settled Amount" }),
+          /* @__PURE__ */ e(o, { children: "Jackpot Contribution" }),
+          /* @__PURE__ */ e(o, { children: "Jackpot Payout" }),
+          /* @__PURE__ */ e(o, { children: "Bet Status" }),
+          /* @__PURE__ */ e(o, { children: "Game Name" }),
+          /* @__PURE__ */ e(o, { children: "Vendor Round ID" })
+        ] }) }),
+        /* @__PURE__ */ e(He, { children: x.map((t) => {
+          var l;
+          return /* @__PURE__ */ r(ee, { children: [
+            /* @__PURE__ */ r(a, { className: "!py-1", children: [
+              /* @__PURE__ */ e("div", { className: "leading-tight", children: f(t.dateTimeCreated, "MM/dd/yyyy", {
+                in: y(c.timezone)
               }) }),
-              /* @__PURE__ */ e(a, { children: g(t.jackpotPayout, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
+              /* @__PURE__ */ e("div", { className: "text-text-tertiary-600 leading-tight", children: f(t.dateTimeCreated, "hh:mm a", {
+                in: y(c.timezone)
+              }) })
+            ] }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: !!t.dateTimeSettled && /* @__PURE__ */ r(A, { children: [
+              /* @__PURE__ */ e("div", { className: "leading-tight", children: f(t.dateTimeSettled, "MM/dd/yyyy", {
+                in: y(c.timezone)
               }) }),
-              /* @__PURE__ */ e(a, { children: t.status }),
-              /* @__PURE__ */ e(a, { children: t.game.name }),
-              /* @__PURE__ */ e(a, { children: t.vendorRoundId })
-            ] }, t.id);
-          }) })
-        ] }) }),
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-lg px-4 py-3", children: [
-          /* @__PURE__ */ r("p", { children: [
-            "Page ",
-            le,
-            " of ",
-            he
-          ] }),
-          /* @__PURE__ */ e("div", { className: "grow" }),
+              /* @__PURE__ */ e("div", { className: "text-text-tertiary-600 leading-tight", children: f(t.dateTimeSettled, "hh:mm a", {
+                in: y(c.timezone)
+              }) })
+            ] }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: (t == null ? void 0 : t.betContent) || "/" }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: ((l = t.metadata) == null ? void 0 : l.odds) || "/" }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.bet, {
+              currency: c.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.validBet, {
+              currency: c.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.payout, {
+              currency: c.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.jackpotContribution, {
+              currency: c.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.jackpotPayout, {
+              currency: c.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: /* @__PURE__ */ e(
+              xe,
+              {
+                colorScheme: t.status === "SETTLED" ? "success" : t.status === "STARTED" ? "blue" : "danger",
+                children: /* @__PURE__ */ e(Se, { children: m(t.status, {
+                  delimiter: m.delimiters.UNDERSCORE
+                }) })
+              }
+            ) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: t.game.name }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: t.vendorRoundId })
+          ] }, t.id);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-lg px-4 py-3", children: [
+        /* @__PURE__ */ r("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: [
+          "Page ",
+          oe,
+          " of ",
+          ue
+        ] }),
+        /* @__PURE__ */ e("div", { className: "hidden grow lg:block" }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            size: "sm",
+            value: [ae.toString()],
+            onValueChange: (t) => {
+              const l = parseInt(t.value[0]), s = isNaN(l) ? 10 : l;
+              he(s);
+            },
+            collection: O,
+            lazyMount: !0,
+            className: "hidden lg:block",
+            children: /* @__PURE__ */ r(R, { children: [
+              /* @__PURE__ */ e(I, {}),
+              /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(S, {}) }),
+              /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(P, { children: O.items.map((t) => /* @__PURE__ */ e(z, { item: t, children: O.stringifyItem(t) }, t)) }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "contents lg:flex", children: [
           /* @__PURE__ */ e(
-            b,
+            Z,
             {
               size: "sm",
-              value: [oe.toString()],
-              onValueChange: (t) => {
-                const i = parseInt(t.value[0]), m = isNaN(i) ? 10 : i;
-                se(m);
-              },
-              collection: z,
-              lazyMount: !0,
-              children: /* @__PURE__ */ r(N, { children: [
-                /* @__PURE__ */ e(R, {}),
-                /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(I, {}) }),
-                /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { children: z.items.map((t) => /* @__PURE__ */ e(P, { item: t, children: z.stringifyItem(t) }, t)) }) }) })
-              ] })
+              variant: "outline",
+              colorScheme: "gray",
+              className: "order-1 lg:order-none lg:rounded-r-none lg:border-r-0",
+              disabled: !ce || h,
+              onClick: () => de(),
+              children: /* @__PURE__ */ e(j, { className: "size-5" })
             }
           ),
-          /* @__PURE__ */ r("div", { children: [
-            /* @__PURE__ */ e(
-              J,
-              {
-                size: "sm",
-                variant: "outline",
-                colorScheme: "gray",
-                className: "rounded-r-none border-r-0",
-                disabled: !me || h,
-                onClick: () => de(),
-                children: /* @__PURE__ */ e(q, { className: "size-5" })
-              }
-            ),
-            /* @__PURE__ */ e(
-              J,
-              {
-                size: "sm",
-                variant: "outline",
-                colorScheme: "gray",
-                className: "rounded-l-none",
-                disabled: !ae || h,
-                onClick: () => ce(),
-                children: /* @__PURE__ */ e(j, { className: "size-5" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ e(
+            Z,
+            {
+              size: "sm",
+              variant: "outline",
+              colorScheme: "gray",
+              className: "order-3 lg:order-none lg:rounded-l-none",
+              disabled: !me || h,
+              onClick: () => se(),
+              children: /* @__PURE__ */ e(F, { className: "size-5" })
+            }
+          )
         ] })
       ] })
     ] })
@@ -401,17 +433,17 @@ const ie = [
   "CANCELLED",
   "SETTLED",
   "STARTED"
-], z = w({
-  items: re.config.pageSizes,
-  itemToValue: (l) => l.toString(),
-  itemToString: (l) => `${l} items per page`
-}), ee = w({
+], O = V({
+  items: le.config.pageSizes,
+  itemToValue: (n) => n.toString(),
+  itemToString: (n) => `${n} items per page`
+}), te = V({
   items: ie,
-  itemToValue: (l) => l,
-  itemToString: (l) => c(l, {
-    delimiter: c.delimiters.UNDERSCORE
+  itemToValue: (n) => n,
+  itemToString: (n) => m(n, {
+    delimiter: m.delimiters.UNDERSCORE
   })
-}), Ue = T.enum(["all", "today", "custom"]), te = Intl.DateTimeFormat().resolvedOptions().timeZone;
+}), Fe = C.enum(["all", "today", "custom"]), re = Intl.DateTimeFormat().resolvedOptions().timeZone;
 export {
-  _t as BetRecords
+  jt as BetRecords
 };