@opexa/portal-components 0.0.99 → 0.0.100

package/dist/components/BetRecords/BetRecords.client.js

@@ -0,0 +1,189 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createListCollection, parseDate, Portal } from '@ark-ui/react';
+import { tz, TZDateMini } from '@date-fns/tz';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useReducer, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { useBetRecordsQuery } from '../../client/hooks/useBetRecordsQuery.js';
+import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { GAME_PROVIDER_DATA, GAME_TYPE_DATA, GAME_TYPES, } from '../../constants/index.js';
+import { CheckIcon } from '../../icons/CheckIcon.js';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { File02Icon } from '../../icons/File02Icon.js';
+import { SpinnerIcon } from '../../icons/SpinnerIcon.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { DatePicker } from '../../ui/DatePicker/index.js';
+import { IconButton } from '../../ui/IconButton/index.js';
+import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
+import { Select } from '../../ui/Select/index.js';
+import { Table } from '../../ui/Table/index.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { Empty } from '../Empty.js';
+export function BetRecords__client(props) {
+    const [tab, setTab] = useState('all');
+    const gameTypes = props.gameTypes.map((type) => GAME_TYPE_DATA[type]);
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const [state, setState] = useReducer((prev, next) => ({
+        ...prev,
+        ...next,
+    }), {
+        page: 1,
+        pageSize: 10,
+        type: null,
+    });
+    const localeInfo = useLocaleInfo();
+    const providerCollection = createListCollection({
+        items: gameProviders,
+        itemToValue: (item) => item.id,
+        itemToString: (item) => item.name,
+    });
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
+        filter: {
+            ...(state.type && {
+                game__type: {
+                    equal: state.type,
+                },
+            }),
+            ...(state.provider && {
+                game__provider: {
+                    equal: state.provider,
+                },
+            }),
+            ...(state.status && {
+                status: {
+                    equal: state.status,
+                },
+            }),
+            ...(state.timestamp && {
+                dateTimeCreated: {
+                    ...(state.timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(state.timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
+                        firstPage();
+                        setState({
+                            type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
+                        });
+                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
+                            .filter(Boolean)
+                            .map((d) => parseDate(d)), onValueChange: (details) => {
+                            firstPage();
+                            setState({
+                                timestamp: {
+                                    start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
+                                    end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
+                                },
+                            });
+                        }, onOpenChange: (details) => {
+                            if (details.open)
+                                return;
+                            if (state.timestamp)
+                                return;
+                            setTab('all');
+                        }, selectionMode: "range", closeOnSelect: false, positioning: {
+                            gutter: 20,
+                            placement: 'bottom',
+                        }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
+                                    const value = TabDefinition.parse(details.value);
+                                    if (value === 'today') {
+                                        const now = new Date();
+                                        setState({
+                                            timestamp: {
+                                                start: startOfDay(now),
+                                                end: endOfDay(now),
+                                            },
+                                        });
+                                    }
+                                    else {
+                                        setState({
+                                            timestamp: null,
+                                        });
+                                    }
+                                    firstPage();
+                                    setTab(value);
+                                }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), _jsxs(Select.Root, { collection: providerCollection, value: state.provider ? [state.provider] : [], onValueChange: (details) => {
+                            const value = z
+                                .enum((props.gameProviders ?? []))
+                                .safeParse(details.value.at(0)).data;
+                            firstPage();
+                            setState({
+                                provider: value ?? null,
+                            });
+                        }, lazyMount: true, deselectable: true, positioning: {
+                            sameWidth: true,
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                        e.stopPropagation();
+                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: provider.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider.id))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
+                            const value = z
+                                .enum(BET_RECORD_STATUSES)
+                                .safeParse(details.value.at(0)).data;
+                            firstPage();
+                            setState({
+                                status: value ?? null,
+                            });
+                        }, lazyMount: true, deselectable: true, positioning: {
+                            sameWidth: true,
+                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
+                                                        e.stopPropagation();
+                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: statusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
+                    ? 'Fetching latest bet records...'
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
+                                                            in: tz(localeInfo.timezone),
+                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: !!data.dateTimeSettled && (_jsxs(_Fragment, { children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeSettled, 'MM/dd/yyyy', {
+                                                                in: tz(localeInfo.timezone),
+                                                            }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeSettled, 'hh:mm a', {
+                                                                in: tz(localeInfo.timezone),
+                                                            }) })] })) }), _jsx(Table.Cell, { className: "!py-1", children: data?.betContent || '/' }), _jsx(Table.Cell, { className: "!py-1", children: data.metadata?.odds || '/' }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.bet, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.validBet, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.payout, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotContribution, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotPayout, {
+                                                    currency: localeInfo.currency.code,
+                                                    minDecimalPlaces: 2,
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: _jsx(Badge.Root, { colorScheme: data.status === 'SETTLED'
+                                                        ? 'success'
+                                                        : data.status === 'STARTED'
+                                                            ? 'blue'
+                                                            : 'danger', children: _jsx(Badge.Label, { children: capitalize(data.status, {
+                                                            delimiter: capitalize.delimiters.UNDERSCORE,
+                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+}
+const BET_RECORD_STATUSES = [
+    'CANCELLED',
+    'SETTLED',
+    'STARTED',
+];
+const statusCollection = createListCollection({
+    items: BET_RECORD_STATUSES,
+    itemToValue: (item) => item,
+    itemToString: (item) => capitalize(item, {
+        delimiter: capitalize.delimiters.UNDERSCORE,
+    }),
+});
+const TabDefinition = z.enum(['all', 'today', 'custom']);
+const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/components/BetRecords/BetRecords.d.ts

@@ -1,7 +1,3 @@
-import type { GameProvider, GameType } from '../../types';
-export interface BetRecordsProps {
-    gameTypes: GameType[];
-    gameProviders: GameProvider[];
-    className?: string;
-}
-export declare function BetRecords(props: BetRecordsProps): import("react/jsx-runtime").JSX.Element;
+import { type BetRecordsProps } from './BetRecords.client';
+export declare function BetRecords(props: BetRecordsProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { BetRecordsProps };

package/dist/components/BetRecords/BetRecords.js

@@ -1,176 +1,10 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection, parseDate, Portal } from '@ark-ui/react';
-import { tz, TZDateMini } from '@date-fns/tz';
-import { endOfDay, format, startOfDay } from 'date-fns';
-import { useReducer, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
-import { useBetRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks/index.js';
-import { GAME_PROVIDER_DATA, GAME_TYPE_DATA, GAME_TYPES, } from '../../constants/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { Badge, DatePicker, IconButton, SegmentGroup, Select, Table, } from '../../ui/index.js';
-import { capitalize, formatNumber } from '../../utils/index.js';
-import { Empty } from '../Empty.js';
-export function BetRecords(props) {
-    const [tab, setTab] = useState('all');
-    const gameTypes = props.gameTypes.map((type) => GAME_TYPE_DATA[type]);
-    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
-    const [state, setState] = useReducer((prev, next) => ({
-        ...prev,
-        ...next,
-    }), {
-        page: 1,
-        pageSize: 10,
-        type: null,
+import { jsx as _jsx } from "react/jsx-runtime";
+import { prefetchBetRecordsQuery } from '../../server/utils/prefetchBetRecordsQuery.js';
+import { BetRecords__client } from './BetRecords.client.js';
+export async function BetRecords(props) {
+    await prefetchBetRecordsQuery({
+        first: 10,
+        filter: {},
     });
-    const localeInfo = useLocaleInfo();
-    const providerCollection = createListCollection({
-        items: gameProviders,
-        itemToValue: (item) => item.id,
-        itemToString: (item) => item.name,
-    });
-    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useBetRecordsQuery, {
-        filter: {
-            ...(state.type && {
-                game__type: {
-                    equal: state.type,
-                },
-            }),
-            ...(state.provider && {
-                game__provider: {
-                    equal: state.provider,
-                },
-            }),
-            ...(state.status && {
-                status: {
-                    equal: state.status,
-                },
-            }),
-            ...(state.timestamp && {
-                dateTimeCreated: {
-                    ...(state.timestamp.start && {
-                        greaterThanOrEqual: new TZDateMini(startOfDay(state.timestamp.start), localeInfo.timezone).toISOString(),
-                    }),
-                    ...(state.timestamp.end && {
-                        lesserThanOrEqual: new TZDateMini(endOfDay(state.timestamp.end), localeInfo.timezone).toISOString(),
-                    }),
-                },
-            }),
-        },
-    });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-sm font-semibold leading-tight lg:text-lg", children: "Bet Records" }), _jsx("p", { className: "text-text-tertiary-600 mt-xs text-sm leading-tight", children: "Review your betting history" }), _jsx("div", { className: "mt-lg lg:mt-2xl", children: _jsxs(SegmentGroup.Root, { value: state.type ?? 'all', onValueChange: (details) => {
-                        firstPage();
-                        setState({
-                            type: z.enum(GAME_TYPES).safeParse(details.value).data ?? null,
-                        });
-                    }, className: "w-full overflow-x-auto lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), gameTypes.map((type) => (_jsxs(SegmentGroup.Item, { value: type.id, children: [_jsx(SegmentGroup.ItemText, { children: type.name }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }, type.id))), _jsx(SegmentGroup.Indicator, {})] }) }), _jsx("div", { className: "border-border-secondary mt-2xl hidden border-t lg:block" }), _jsx("h3", { className: "text-text-secondary-700 mt-3xl text-sm font-semibold", children: "Table" }), _jsxs("div", { className: "mt-xl flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [state.timestamp?.start, state.timestamp?.end]
-                            .filter(Boolean)
-                            .map((d) => parseDate(d)), onValueChange: (details) => {
-                            firstPage();
-                            setState({
-                                timestamp: {
-                                    start: details.value.at(0)?.toDate(DEVICE_TIMEZONE),
-                                    end: details.value.at(1)?.toDate(DEVICE_TIMEZONE),
-                                },
-                            });
-                        }, onOpenChange: (details) => {
-                            if (details.open)
-                                return;
-                            if (state.timestamp)
-                                return;
-                            setTab('all');
-                        }, selectionMode: "range", closeOnSelect: false, positioning: {
-                            gutter: 20,
-                            placement: 'bottom',
-                        }, children: [_jsxs(SegmentGroup.Root, { value: tab, onValueChange: (details) => {
-                                    const value = TabDefinition.parse(details.value);
-                                    if (value === 'today') {
-                                        const now = new Date();
-                                        setState({
-                                            timestamp: {
-                                                start: startOfDay(now),
-                                                end: endOfDay(now),
-                                            },
-                                        });
-                                    }
-                                    else {
-                                        setState({
-                                            timestamp: null,
-                                        });
-                                    }
-                                    firstPage();
-                                    setTab(value);
-                                }, className: "w-full lg:w-fit", children: [_jsxs(SegmentGroup.Item, { value: "all", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "All" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsxs(SegmentGroup.Item, { value: "today", className: "w-full lg:w-auto", children: [_jsx(SegmentGroup.ItemText, { children: "Today" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(DatePicker.Context, { children: (api) => (_jsx(SegmentGroup.Item, { value: "custom", onClick: () => api.setOpen(true), className: "w-full lg:w-auto", children: _jsxs(DatePicker.Control, { children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }) })) }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { children: _jsx(DatePicker.View, { view: "day", children: _jsx(DatePicker.Context, { children: (api) => (_jsxs(_Fragment, { children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx(DatePicker.ViewTrigger, { children: _jsx(DatePicker.RangeText, {}) }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: api.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.substring(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: api.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] })) }) }) }) }) })] }), _jsx("div", { className: "hidden grow lg:block" }), _jsxs(Select.Root, { collection: providerCollection, value: state.provider ? [state.provider] : [], onValueChange: (details) => {
-                            const value = z
-                                .enum((props.gameProviders ?? []))
-                                .safeParse(details.value.at(0)).data;
-                            firstPage();
-                            setState({
-                                provider: value ?? null,
-                            });
-                        }, lazyMount: true, deselectable: true, positioning: {
-                            sameWidth: true,
-                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Game Vendor" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
-                                                        e.stopPropagation();
-                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: providerCollection.items.map((provider) => (_jsxs(Select.Item, { item: provider, children: [_jsx(Select.ItemText, { children: provider.name }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, provider.id))) }) }) }) })] }), _jsxs(Select.Root, { collection: statusCollection, value: state.status ? [state.status] : [], onValueChange: (details) => {
-                            const value = z
-                                .enum(BET_RECORD_STATUSES)
-                                .safeParse(details.value.at(0)).data;
-                            firstPage();
-                            setState({
-                                status: value ?? null,
-                            });
-                        }, lazyMount: true, deselectable: true, positioning: {
-                            sameWidth: true,
-                        }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Status" }), _jsx(Select.Context, { children: (api) => (_jsx(_Fragment, { children: api.value.length ? (_jsx(Select.ClearTrigger, { asChild: true, children: _jsx("span", { onClick: (e) => {
-                                                        e.stopPropagation();
-                                                    }, children: "Clear" }) })) : (_jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })) })) })] }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: _jsx(Select.ItemGroup, { children: statusCollection.items.map((status) => (_jsxs(Select.Item, { item: status, children: [_jsx(Select.ItemText, { children: capitalize(status, {
-                                                            delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
-                    ? 'Fetching latest bet records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'bleed', 'lg:not-bleed', 'lg:mt-3xl', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
-                                                            in: tz(localeInfo.timezone),
-                                                        }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
-                                                            in: tz(localeInfo.timezone),
-                                                        }) })] }), _jsx(Table.Cell, { className: "!py-1", children: !!data.dateTimeSettled && (_jsxs(_Fragment, { children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeSettled, 'MM/dd/yyyy', {
-                                                                in: tz(localeInfo.timezone),
-                                                            }) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeSettled, 'hh:mm a', {
-                                                                in: tz(localeInfo.timezone),
-                                                            }) })] })) }), _jsx(Table.Cell, { className: "!py-1", children: data?.betContent || '/' }), _jsx(Table.Cell, { className: "!py-1", children: data.metadata?.odds || '/' }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.bet, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.validBet, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.payout, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotContribution, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.jackpotPayout, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: _jsx(Badge.Root, { colorScheme: data.status === 'SETTLED'
-                                                        ? 'success'
-                                                        : data.status === 'STARTED'
-                                                            ? 'blue'
-                                                            : 'danger', children: _jsx(Badge.Label, { children: capitalize(data.status, {
-                                                            delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) }), _jsx(Table.Cell, { className: "!py-1", children: data.game.name }), _jsx(Table.Cell, { className: "!py-1", children: data.vendorRoundId })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center justify-between gap-lg px-4 py-3", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasPrevPage || loading, onClick: () => prev(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsxs("p", { className: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
+    return _jsx(BetRecords__client, { ...props });
 }
-const BET_RECORD_STATUSES = [
-    'CANCELLED',
-    'SETTLED',
-    'STARTED',
-];
-const statusCollection = createListCollection({
-    items: BET_RECORD_STATUSES,
-    itemToValue: (item) => item,
-    itemToString: (item) => capitalize(item, {
-        delimiter: capitalize.delimiters.UNDERSCORE,
-    }),
-});
-const TabDefinition = z.enum(['all', 'today', 'custom']);
-const DEVICE_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;

package/dist/components/Bonus/Bonus.client.d.ts

@@ -1,2 +1,10 @@
-import type { BonusProps } from './Bonus';
+export interface BonusProps {
+    id: string;
+    className?: string;
+    /**
+     * @description URL for the bonuses details page
+     * @default "/rewards"
+     */
+    viewAllUrl?: string;
+}
 export declare function Bonus__client(props: BonusProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Bonus/Bonus.client.js

@@ -3,11 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clamp } from 'lodash-es';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useBonusQuery, useLocaleInfo, useRemainingTime, } from '../../client/hooks/index.js';
-import { ChevronLeftIcon, ChevronRightIcon, StopWatchIcon } from '../../icons/index.js';
+import { useBonusQuery } from '../../client/hooks/useBonusQuery.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
+import { StopWatchIcon } from '../../icons/StopWatchIcon.js';
 import piggyBank from '../../images/piggy-bank.png';
-import { Badge, Collapsible, Progress, Prose } from '../../ui/index.js';
-import { capitalize, formatNumber, parseDecimal } from '../../utils/index.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Collapsible } from '../../ui/Collapsible/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { Prose } from '../../ui/Prose.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
 export function Bonus__client(props) {
     const bonusQuery = useBonusQuery(props.id);
     const bonus = bonusQuery.data;

package/dist/components/Bonus/Bonus.d.ts

@@ -1,10 +1,3 @@
-export interface BonusProps {
-    id: string;
-    className?: string;
-    /**
-     * @description URL for the bonuses details page
-     * @default "/rewards"
-     */
-    viewAllUrl?: string;
-}
+import { type BonusProps } from './Bonus.client';
 export declare function Bonus(props: BonusProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { BonusProps };

package/dist/components/Bonus/Bonus.js

@@ -1,12 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { notFound } from 'next/navigation';
-import { prefetchBonusQuery } from '../../server/utils/index.js';
-import { getBonusQueryKey, getQueryClient } from '../../utils/index.js';
+import { getSession } from '../../server/services/getSession.js';
+import { prefetchBonusQuery } from '../../server/utils/prefetchBonusQuery.js';
+import { getBonus } from '../../services/wallet.js';
 import { Bonus__client } from './Bonus.client.js';
+async function fetchBonus(id) {
+    const session = await getSession();
+    if (session.status === 'unauthenticated')
+        return null;
+    return await getBonus(id, {
+        headers: {
+            Authorization: `Bearer ${session.token}`,
+        },
+    });
+}
 export async function Bonus(props) {
-    await prefetchBonusQuery(props.id);
-    const bonus = getQueryClient().getQueryData(getBonusQueryKey(props.id));
-    if (!bonus)
+    const [result] = await Promise.allSettled([
+        fetchBonus(props.id),
+        prefetchBonusQuery(props.id),
+    ]);
+    if (result.status === 'fulfilled' && result.value) {
+        return _jsx(Bonus__client, { ...props });
+    }
+    else {
         return notFound();
-    return _jsx(Bonus__client, { ...props });
+    }
 }

package/dist/components/Bonuses/Bonuses.client.d.ts

@@ -1,2 +1,10 @@
-import type { BonusesProps } from './Bonuses';
+export interface BonusesProps {
+    heading?: string;
+    className?: string;
+    /**
+     * @description base URL for the bonus details page
+     * @default "/rewards"
+     */
+    viewBonusDetailsUrl?: string;
+}
 export declare function Bonuses__client(props: BonusesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Bonuses/Bonuses.client.js

@@ -6,12 +6,22 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { z } from 'zod';
-import { useBonusesQuery, useCashbackBonusesQuery, useClaimCashbackBonusMutation, useLocaleInfo, useRemainingTime, } from '../../client/hooks/index.js';
-import { Gift01Icon, StopWatchIcon } from '../../icons/index.js';
+import { useBonusesQuery } from '../../client/hooks/useBonusesQuery.js';
+import { useCashbackBonusesQuery } from '../../client/hooks/useCashbackBonusesQuery.js';
+import { useClaimCashbackBonusMutation } from '../../client/hooks/useClaimCashbackBonusMutation.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
+import { StopWatchIcon } from '../../icons/StopWatchIcon.js';
 import moneyOnHand from '../../images/money-on-hand.png';
 import piggyBank from '../../images/piggy-bank.png';
-import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
-import { capitalize, formatNumber, parseDecimal } from '../../utils/index.js';
+import { Badge } from '../../ui/Badge/index.js';
+import { Button } from '../../ui/Button/index.js';
+import { Progress } from '../../ui/Progress/index.js';
+import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
+import { capitalize } from '../../utils/capitalize.js';
+import { formatNumber } from '../../utils/formatNumber.js';
+import { parseDecimal } from '../../utils/parseDecimal.js';
 import { Empty } from '../Empty.js';
 const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
 export function Bonuses__client(props) {

package/dist/components/Bonuses/Bonuses.d.ts

@@ -1,10 +1,3 @@
-export interface BonusesProps {
-    heading?: string;
-    className?: string;
-    /**
-     * @description base URL for the bonus details page
-     * @default "/rewards"
-     */
-    viewBonusDetailsUrl?: string;
-}
+import { type BonusesProps } from './Bonuses.client';
 export declare function Bonuses(props: BonusesProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export type { BonusesProps };

package/dist/components/Bonuses/Bonuses.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { prefetchBonusesQuery, prefetchCashbacksQuery, } from '../../server/utils/index.js';
+import { prefetchBonusesQuery } from '../../server/utils/prefetchBonusesQuery.js';
+import { prefetchCashbacksQuery } from '../../server/utils/prefetchCashbacksQuery.js';
 import { Bonuses__client } from './Bonuses.client.js';
 export async function Bonuses(props) {
-    await Promise.all([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
+    await Promise.allSettled([prefetchBonusesQuery(), prefetchCashbacksQuery()]);
     return _jsx(Bonuses__client, { ...props });
 }

package/dist/components/Bonuses/BonusesTrigger.js

@@ -2,18 +2,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
-import { useBonusesQuery, useCashbackBonusesQuery } from '../../client/hooks/index.js';
-import { Gift01Icon } from '../../icons/index.js';
+import { useBonusesCountQuery } from '../../client/hooks/useBonusesCountQuery.js';
+import { useCashbackBonusesCountQuery } from '../../client/hooks/useCashbackBonusesCountQuery.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.js';
 import { iconButtonRecipe } from '../../ui/IconButton/iconButton.recipe.js';
 export function BonusesTrigger({ children, className, ...props }) {
-    const bonusesQuery = useBonusesQuery({
+    const bonusesCountQuery = useBonusesCountQuery({
         refetchInterval: 10000,
     });
-    const cashbackBonusesQuery = useCashbackBonusesQuery({
+    const cashbackBonusesCountQuery = useCashbackBonusesCountQuery({
         refetchInterval: 10000,
     });
-    const bonusesCount = bonusesQuery.data?.length ?? 0;
-    const cashbackBonusesCount = cashbackBonusesQuery.data?.length ?? 0;
+    const bonusesCount = bonusesCountQuery.data ?? 0;
+    const cashbackBonusesCount = cashbackBonusesCountQuery.data ?? 0;
     const totalCount = bonusesCount + cashbackBonusesCount;
     return (_jsx(Link, { "aria-label": "View Rewards", "data-count": totalCount, ...props, href: props.href ?? '/rewards', className: iconButtonRecipe({
             size: 'sm',

package/dist/components/Cashback/Cashback.client.d.ts

@@ -1,2 +1,7 @@
-import type { CashbackProps } from './Cashback';
+export interface CashbackProps {
+    id: string;
+    /** @default '/promos' */
+    viewAllPromosUrl?: string;
+    className?: string;
+}
 export declare function Cashback__client(props: CashbackProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Cashback/Cashback.client.js

@@ -5,9 +5,13 @@ import { format } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useShallow } from 'zustand/shallow';
-import { useAvailablePromosQuery, useCashbackQuery, useGlobalStore, useLocaleInfo, } from '../../client/hooks/index.js';
-import { ChevronLeftIcon } from '../../icons/index.js';
-import { Button, Prose } from '../../ui/index.js';
+import { useAvailablePromosQuery } from '../../client/hooks/useAvailablePromosQuery.js';
+import { useCashbackQuery } from '../../client/hooks/useCashbackQuery.js';
+import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
+import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Prose } from '../../ui/Prose.js';
 export function Cashback__client(props) {
     const availablePromosQuery = useAvailablePromosQuery();
     const cashbackQuery = useCashbackQuery(props.id);