@opexa/portal-components 0.0.17 → 0.0.19

package/dist/components/BetRecords/BetRecords.mjs

@@ -1,417 +1,473 @@
 "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 g } from "react/jsx-runtime";
+import { createListCollection as $, Portal as y, parseDate as fe } from "@ark-ui/react";
+import { TZDateMini as H, tz as f } from "@date-fns/tz";
+import { endOfDay as j, startOfDay as F, format as v } from "date-fns";
+import { useState as ve, useReducer as Ce } from "react";
+import { twMerge as Ne } from "tailwind-merge";
+import { z as x } 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 { 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 "../../client/services/getSession.mjs";
+import { useBetRecordsQuery as Te } 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 ne } from "../../client/hooks/useInfiniteQueryHelper.mjs";
+import { useLocaleInfo as be } 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 { CheckIcon as w } from "../../icons/CheckIcon.mjs";
+import { ChevronDownIcon as R } from "../../icons/ChevronDownIcon.mjs";
+import { ChevronLeftIcon as G } from "../../icons/ChevronLeftIcon.mjs";
+import { ChevronRightIcon as J } from "../../icons/ChevronRightIcon.mjs";
+import { File02Icon as xe } from "../../icons/File02Icon.mjs";
 import { SpinnerIcon as Se } from "../../icons/SpinnerIcon.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
 import "../../ui/Avatar/Avatar.mjs";
-import "../../ui/Badge/Badge.mjs";
+import { Root as we, Label as Re } 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 "../../ui/Combobox/Combobox.mjs";
+import { Root as Ie, Context as W, Control as Ee, Positioner as De, Content as Pe, View as ze, ViewControl as Oe, PrevTrigger as Ve, ViewTrigger as ke, RangeText as Be, NextTrigger as Me, Table as $e, TableHead as Le, TableRow as Z, TableHeader as Ae, TableBody as Ue, TableCell as _e, TableCellTrigger as qe } 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 Q } 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 K, Item as C, ItemText as N, ItemControl as T, ItemHiddenInput as b, Indicator as X } from "../../ui/SegmentGroup/SegmentGroup.mjs";
+import { Root as I, Trigger as E, ValueText as D, Context as Y, ClearTrigger as ee, Indicator as P, Positioner as z, Content as O, ItemGroup as te, Item as V, ItemText as k, ItemIndicator as B } from "../../ui/Select/Select.mjs";
+import { Root as He, Header as je, Row as re, Heading as o, Body as Fe, 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 Ge } from "../Empty.mjs";
+function Wt(n) {
+  var U, _;
+  const [ae, L] = ve("all"), [i, d] = Ce(
+    (t, l) => ({
       ...t,
-      ...i
+      ...l
     }),
     {
       page: 1,
       pageSize: 10,
-      type: l.gameTypes[0]
+      type: n.gameTypes[0]
     }
-  ), d = Ce(), V = w({
-    items: l.gameProviders,
+  ), m = be(), A = $({
+    items: n.gameProviders,
     itemToValue: (t) => t,
     itemToString: (t) => c(t, {
       delimiter: c.delimiters.UNDERSCORE
     })
   }), {
-    page: le,
-    pageSize: oe,
-    hasNextPage: ae,
-    hasPrevPage: me,
-    next: ce,
-    prev: de,
+    page: ce,
+    pageSize: me,
+    hasNextPage: se,
+    hasPrevPage: de,
+    next: he,
+    prev: ue,
     rows: S,
-    setPageSize: se,
-    totalPages: he,
+    setPageSize: pe,
+    totalPages: ge,
     loading: h,
     firstPage: u
-  } = re(fe, {
+  } = ne(Te, {
     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 H(
+              F(i.timestamp.start),
+              m.timezone
             ).toISOString()
           },
-          ...n.timestamp.end && {
-            lesserThanOrEqual: new $(
-              A(n.timestamp.end),
-              d.timezone
+          ...i.timestamp.end && {
+            lesserThanOrEqual: new H(
+              j(i.timestamp.end),
+              m.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: Ne("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(
+      K,
       {
-        value: n.type,
+        value: i.type,
         onValueChange: (t) => {
-          u(), s({
-            type: T.enum(l.gameTypes ?? []).safeParse(t.value).data ?? null
+          u(), d({
+            type: x.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, {
+          n.gameTypes.map((t) => /* @__PURE__ */ r(C, { value: t, children: [
+            /* @__PURE__ */ e(N, { children: c(t, {
               delimiter: c.delimiters.UNDERSCORE
             }) }),
-            /* @__PURE__ */ e(f, {}),
-            /* @__PURE__ */ e(C, {})
+            /* @__PURE__ */ e(T, {}),
+            /* @__PURE__ */ e(b, {})
           ] }, t)),
-          /* @__PURE__ */ e(Q, {})
+          /* @__PURE__ */ e(X, {})
         ]
       }
     ) }),
-    /* @__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)
+    /* @__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(
+        Ie,
+        {
+          lazyMount: !0,
+          unmountOnExit: !0,
+          value: [(U = i.timestamp) == null ? void 0 : U.start, (_ = i.timestamp) == null ? void 0 : _.end].filter(Boolean).map((t) => fe(t)),
+          onValueChange: (t) => {
+            var l, s;
+            u(), d({
+              timestamp: {
+                start: (l = t.value.at(0)) == null ? void 0 : l.toDate(ie),
+                end: (s = t.value.at(1)) == null ? void 0 : s.toDate(ie)
+              }
+            });
+          },
+          onOpenChange: (t) => {
+            t.open || i.timestamp || L("all");
+          },
+          selectionMode: "range",
+          closeOnSelect: !1,
+          positioning: {
+            gutter: 20,
+            placement: "bottom"
+          },
+          children: [
+            /* @__PURE__ */ r(
+              K,
+              {
+                value: ae,
+                onValueChange: (t) => {
+                  const l = Je.parse(t.value);
+                  if (l === "today") {
+                    const s = /* @__PURE__ */ new Date();
+                    d({
+                      timestamp: {
+                        start: F(s),
+                        end: j(s)
+                      }
+                    });
+                  } else
+                    d({
+                      timestamp: null
+                    });
+                  u(), L(l);
+                },
+                className: "w-full lg:w-fit",
+                children: [
+                  /* @__PURE__ */ r(C, { value: "all", className: "w-full lg:w-auto", children: [
+                    /* @__PURE__ */ e(N, { children: "All" }),
+                    /* @__PURE__ */ e(T, {}),
+                    /* @__PURE__ */ e(b, {})
+                  ] }),
+                  /* @__PURE__ */ r(C, { value: "today", className: "w-full lg:w-auto", children: [
+                    /* @__PURE__ */ e(N, { children: "Today" }),
+                    /* @__PURE__ */ e(T, {}),
+                    /* @__PURE__ */ e(b, {})
+                  ] }),
+                  /* @__PURE__ */ e(W, { children: (t) => /* @__PURE__ */ e(
+                    C,
+                    {
+                      value: "custom",
+                      onClick: () => t.setOpen(!0),
+                      className: "w-full lg:w-auto",
+                      children: /* @__PURE__ */ r(Ee, { children: [
+                        /* @__PURE__ */ e(N, { children: "Custom" }),
+                        /* @__PURE__ */ e(T, {}),
+                        /* @__PURE__ */ e(b, {})
+                      ] })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(X, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(Pe, { children: /* @__PURE__ */ e(ze, { view: "day", children: /* @__PURE__ */ e(W, { children: (t) => /* @__PURE__ */ r(g, { children: [
+              /* @__PURE__ */ r(Oe, { children: [
+                /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(G, {}) }),
+                /* @__PURE__ */ e(ke, { children: /* @__PURE__ */ e(Be, {}) }),
+                /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(J, {}) })
+              ] }),
+              /* @__PURE__ */ r($e, { children: [
+                /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e(Z, { children: t.weekDays.map((l, s) => /* @__PURE__ */ e(Ae, { children: l.short.substring(0, 2) }, s)) }) }),
+                /* @__PURE__ */ e(Ue, { children: t.weeks.map((l, s) => /* @__PURE__ */ e(Z, { children: l.map((q, ye) => /* @__PURE__ */ e(_e, { value: q, children: /* @__PURE__ */ e(qe, { children: q.day }) }, ye)) }, s)) })
+              ] })
+            ] }) }) }) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "hidden grow lg:block" }),
+      /* @__PURE__ */ r(
+        I,
+        {
+          collection: A,
+          value: i.provider ? [i.provider] : [],
+          onValueChange: (t) => {
+            const l = x.enum(n.gameProviders ?? []).safeParse(t.value.at(0)).data;
+            u(), d({
+              provider: l ?? null
+            });
+          },
+          lazyMount: !0,
+          deselectable: !0,
+          positioning: {
+            sameWidth: !0
+          },
+          children: [
+            /* @__PURE__ */ r(E, { className: "w-full lg:w-[14rem]", children: [
+              /* @__PURE__ */ e(D, { placeholder: "Game Vendor" }),
+              /* @__PURE__ */ e(Y, { children: (t) => /* @__PURE__ */ e(g, { children: t.value.length ? /* @__PURE__ */ e(ee, { asChild: !0, children: /* @__PURE__ */ e(
+                "span",
+                {
+                  onClick: (l) => {
+                    l.stopPropagation();
+                  },
+                  children: "Clear"
                 }
-              });
-            },
-            onOpenChange: (t) => {
-              t.open || n.timestamp || O("all");
-            },
-            selectionMode: "range",
-            closeOnSelect: !1,
-            positioning: {
-              gutter: 20,
-              placement: "bottom"
-            },
-            children: [
-              /* @__PURE__ */ r(
-                Z,
+              ) }) : /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(R, {}) }) }) })
+            ] }),
+            /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(te, { children: A.items.map((t) => /* @__PURE__ */ r(V, { item: t, children: [
+              /* @__PURE__ */ e(k, { children: c(t, {
+                delimiter: c.delimiters.UNDERSCORE
+              }) }),
+              /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(w, {}) })
+            ] }, t)) }) }) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        I,
+        {
+          collection: le,
+          value: i.status ? [i.status] : [],
+          onValueChange: (t) => {
+            const l = x.enum(oe).safeParse(t.value.at(0)).data;
+            u(), d({
+              status: l ?? null
+            });
+          },
+          lazyMount: !0,
+          deselectable: !0,
+          positioning: {
+            sameWidth: !0
+          },
+          children: [
+            /* @__PURE__ */ r(E, { className: "w-full lg:w-[14rem]", children: [
+              /* @__PURE__ */ e(D, { placeholder: "Status" }),
+              /* @__PURE__ */ e(Y, { children: (t) => /* @__PURE__ */ e(g, { children: t.value.length ? /* @__PURE__ */ e(ee, { asChild: !0, children: /* @__PURE__ */ e(
+                "span",
                 {
-                  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);
+                  onClick: (l) => {
+                    l.stopPropagation();
                   },
-                  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(Q, {})
-                  ]
+                  children: "Clear"
                 }
-              ),
-              /* @__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, {
+              ) }) : /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(R, {}) }) }) })
+            ] }),
+            /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(te, { children: le.items.map((t) => /* @__PURE__ */ r(V, { item: t, children: [
+              /* @__PURE__ */ e(k, { children: c(t, {
+                delimiter: c.delimiters.UNDERSCORE
+              }) }),
+              /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(w, {}) })
+            ] }, t)) }) }) }) })
+          ]
+        }
+      )
+    ] }),
+    S.length <= 0 && /* @__PURE__ */ e(
+      Ge,
+      {
+        icon: h ? Se : xe,
+        title: h ? "Just a moment" : "No data",
+        message: h ? "Fetching latest bet records..." : "No data is currently available.",
+        className: "mt-5xl"
+      }
+    ),
+    S.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(He, { className: "border-0", children: [
+        /* @__PURE__ */ e(je, { children: /* @__PURE__ */ r(re, { 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(Fe, { children: S.map((t) => {
+          var l;
+          return /* @__PURE__ */ r(re, { children: [
+            /* @__PURE__ */ r(a, { className: "!py-1", children: [
+              /* @__PURE__ */ e("div", { className: "leading-tight", children: v(t.dateTimeCreated, "MM/dd/yyyy", {
+                in: f(m.timezone)
+              }) }),
+              /* @__PURE__ */ e("div", { className: "text-text-tertiary-600 leading-tight", children: v(t.dateTimeCreated, "hh:mm a", {
+                in: f(m.timezone)
+              }) })
+            ] }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: !!t.dateTimeSettled && /* @__PURE__ */ r(g, { children: [
+              /* @__PURE__ */ e("div", { className: "leading-tight", children: v(t.dateTimeSettled, "MM/dd/yyyy", {
+                in: f(m.timezone)
+              }) }),
+              /* @__PURE__ */ e("div", { className: "text-text-tertiary-600 leading-tight", children: v(t.dateTimeSettled, "hh:mm a", {
+                in: f(m.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: m.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.validBet, {
+              currency: m.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.payout, {
+              currency: m.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.jackpotContribution, {
+              currency: m.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: p(t.jackpotPayout, {
+              currency: m.currency.code,
+              minDecimalPlaces: 2
+            }) }),
+            /* @__PURE__ */ e(a, { className: "!py-1", children: /* @__PURE__ */ e(
+              we,
+              {
+                colorScheme: t.status === "SETTLED" ? "success" : t.status === "STARTED" ? "blue" : "danger",
+                children: /* @__PURE__ */ e(Re, { children: c(t.status, {
                   delimiter: c.delimiters.UNDERSCORE
-                }) }),
-                /* @__PURE__ */ e(X, { asChild: !0, children: /* @__PURE__ */ e(U, {}) })
-              ] }, t)) }) }) }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ r(
-          b,
+                }) })
+              }
+            ) }),
+            /* @__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 ",
+          ce,
+          " of ",
+          ge
+        ] }),
+        /* @__PURE__ */ e("div", { className: "hidden grow lg:block" }),
+        /* @__PURE__ */ e(
+          I,
           {
-            collection: ee,
-            value: n.status ? [n.status] : [],
+            size: "sm",
+            value: [me.toString()],
             onValueChange: (t) => {
-              const i = T.enum(ie).safeParse(t.value.at(0)).data;
-              u(), s({
-                status: i ?? null
-              });
+              const l = parseInt(t.value[0]), s = isNaN(l) ? 10 : l;
+              pe(s);
             },
+            collection: M,
             lazyMount: !0,
-            deselectable: !0,
-            children: [
-              /* @__PURE__ */ r(N, { children: [
-                /* @__PURE__ */ e(R, { placeholder: "Status" }),
-                /* @__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: 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)) }) }) }) })
-            ]
+            className: "hidden lg:block",
+            positioning: {
+              sameWidth: !0
+            },
+            children: /* @__PURE__ */ r(E, { children: [
+              /* @__PURE__ */ e(D, {}),
+              /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(R, {}) }),
+              /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(O, { children: M.items.map((t) => /* @__PURE__ */ r(V, { item: t, children: [
+                /* @__PURE__ */ e(k, { children: M.stringifyItem(t) }),
+                /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(w, {}) })
+              ] }, 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"
-        }
-      ),
-      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(a, { children: t.validBet }),
-              /* @__PURE__ */ e(a, { children: g(t.payout, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
-              }) }),
-              /* @__PURE__ */ e(a, { children: g(t.jackpotContribution, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
-              }) }),
-              /* @__PURE__ */ e(a, { children: g(t.jackpotPayout, {
-                currency: d.currency.code,
-                minDecimalPlaces: 2
-              }) }),
-              /* @__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__ */ r("div", { className: "contents lg:flex", children: [
           /* @__PURE__ */ e(
-            b,
+            Q,
             {
               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: !de || h,
+              onClick: () => ue(),
+              children: /* @__PURE__ */ e(G, { 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(
+            Q,
+            {
+              size: "sm",
+              variant: "outline",
+              colorScheme: "gray",
+              className: "order-3 lg:order-none lg:rounded-l-none",
+              disabled: !se || h,
+              onClick: () => he(),
+              children: /* @__PURE__ */ e(J, { className: "size-5" })
+            }
+          )
         ] })
       ] })
     ] })
   ] });
 }
-const ie = [
+const oe = [
   "CANCELLED",
   "SETTLED",
   "STARTED"
-], z = w({
-  items: re.config.pageSizes,
-  itemToValue: (l) => l.toString(),
-  itemToString: (l) => `${l} items per page`
-}), ee = w({
-  items: ie,
-  itemToValue: (l) => l,
-  itemToString: (l) => c(l, {
+], M = $({
+  items: ne.config.pageSizes,
+  itemToValue: (n) => n.toString(),
+  itemToString: (n) => `${n} items per page`
+}), le = $({
+  items: oe,
+  itemToValue: (n) => n,
+  itemToString: (n) => c(n, {
     delimiter: c.delimiters.UNDERSCORE
   })
-}), Ue = T.enum(["all", "today", "custom"]), te = Intl.DateTimeFormat().resolvedOptions().timeZone;
+}), Je = x.enum(["all", "today", "custom"]), ie = Intl.DateTimeFormat().resolvedOptions().timeZone;
 export {
-  _t as BetRecords
+  Wt as BetRecords
 };