@opexa/portal-components 0.0.27 → 0.0.28

package/dist/components/TransactionRecords/TableFilters.jsx

@@ -0,0 +1,446 @@
+import { createListCollection, parseDate, Portal } from '@ark-ui/react';
+import { endOfDay, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { z } from 'zod';
+import { useControllableState } from '../../client/hooks';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from '../../icons';
+import { DatePicker, SegmentGroup, Select } from '../../ui';
+import { capitalize } from '../../utils';
+const TabDefinition = z.enum(['all', 'today', 'custom']).catch('all');
+const DEPOSIT_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+const WITHDRAWAL_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+const TRANSACTION_TYPES = [
+    'DEPOSIT',
+    'WITHDRAWAL',
+    'BET',
+];
+const deviceTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+export function TableFilters(props) {
+    const gameTypeCollection = createListCollection({
+        items: props.gameTypeOptions ?? [],
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const gameProviderCollection = createListCollection({
+        items: props.gameProviderOptions ?? [],
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const depositStatusCollection = createListCollection({
+        items: DEPOSIT_STATUSES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const withdrawalStatusCollection = createListCollection({
+        items: WITHDRAWAL_STATUSES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const transactionTypeCollection = createListCollection({
+        items: TRANSACTION_TYPES,
+        itemToValue: (item) => item,
+        itemToString: (item) => capitalize(item, {
+            delimiter: capitalize.delimiters.UNDERSCORE,
+        }),
+    });
+    const [tab, setTab] = useState('all');
+    const handleChange = (next) => {
+        const prev = {
+            timestamp,
+            gameType,
+            gameProvider,
+            depositStatus,
+            withdrawalStatus,
+        };
+        props.onChange?.({
+            ...prev,
+            ...next,
+        });
+    };
+    const [timestamp, setTimestamp] = useControllableState({
+        value: props.value?.timestamp,
+        defaultValue: props.defaultValue?.timestamp ?? null,
+        onChange(timestamp) {
+            handleChange({ timestamp });
+        },
+    });
+    const [gameType, setGameType] = useControllableState({
+        value: props.value?.gameType,
+        defaultValue: props.defaultValue?.gameType ?? null,
+        onChange(gameType) {
+            handleChange({ gameType });
+        },
+    });
+    const [gameProvider, setGameProvider] = useControllableState({
+        value: props.value?.gameProvider,
+        defaultValue: props.defaultValue?.gameProvider ?? null,
+        onChange(gameProvider) {
+            handleChange({ gameProvider });
+        },
+    });
+    const [depositStatus, setDepositStatus] = useControllableState({
+        value: props.value?.depositStatus,
+        defaultValue: props.defaultValue?.depositStatus ?? null,
+        onChange(depositStatus) {
+            handleChange({ depositStatus });
+        },
+    });
+    const [withdrawalStatus, setWithdrawalStatus] = useControllableState({
+        value: props.value?.withdrawalStatus,
+        defaultValue: props.defaultValue?.withdrawalStatus ?? null,
+        onChange(withdrawalStatus) {
+            handleChange({ withdrawalStatus });
+        },
+    });
+    const [transactionType, setTransactionType] = useControllableState({
+        value: props.value?.transactionType,
+        defaultValue: props.defaultValue?.transactionType ?? null,
+        onChange(transactionType) {
+            handleChange({ transactionType });
+        },
+    });
+    return (<div className="flex flex-col gap-lg lg:flex-row lg:items-center">
+      <DatePicker.Root lazyMount unmountOnExit value={[timestamp?.start, timestamp?.end]
+            .filter(Boolean)
+            .map((d) => parseDate(d))} onValueChange={(details) => {
+            setTimestamp({
+                start: details.value.at(0)?.toDate(deviceTimezone),
+                end: details.value.at(1)?.toDate(deviceTimezone),
+            });
+        }} onOpenChange={(details) => {
+            if (details.open)
+                return;
+            if (timestamp)
+                return;
+            setTab('all');
+        }} selectionMode="range" closeOnSelect={false} positioning={{
+            gutter: 20,
+            placement: 'bottom',
+        }}>
+        <SegmentGroup.Root value={tab} onValueChange={(details) => {
+            const value = TabDefinition.parse(details.value);
+            if (value === 'today') {
+                const now = new Date();
+                setTimestamp({
+                    start: startOfDay(now),
+                    end: endOfDay(now),
+                });
+            }
+            else {
+                setTimestamp(null);
+            }
+            setTab(value);
+        }} className="w-full lg:w-fit">
+          <SegmentGroup.Item value="all" className="w-full lg:w-auto">
+            <SegmentGroup.ItemText>All</SegmentGroup.ItemText>
+            <SegmentGroup.ItemControl />
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+          <SegmentGroup.Item value="today" className="w-full lg:w-auto">
+            <SegmentGroup.ItemText>Today</SegmentGroup.ItemText>
+            <SegmentGroup.ItemControl />
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+
+          <DatePicker.Context>
+            {(api) => (<SegmentGroup.Item value="custom" onClick={() => api.setOpen(true)} className="w-full lg:w-auto">
+                <DatePicker.Control>
+                  <SegmentGroup.ItemText>Custom</SegmentGroup.ItemText>
+                  <SegmentGroup.ItemControl />
+                  <SegmentGroup.ItemHiddenInput />
+                </DatePicker.Control>
+              </SegmentGroup.Item>)}
+          </DatePicker.Context>
+
+          <SegmentGroup.Indicator />
+        </SegmentGroup.Root>
+        <Portal>
+          <DatePicker.Positioner>
+            <DatePicker.Content>
+              <DatePicker.View view="day">
+                <DatePicker.Context>
+                  {(api) => (<>
+                      <DatePicker.ViewControl>
+                        <DatePicker.PrevTrigger>
+                          <ChevronLeftIcon />
+                        </DatePicker.PrevTrigger>
+                        <DatePicker.ViewTrigger>
+                          <DatePicker.RangeText />
+                        </DatePicker.ViewTrigger>
+                        <DatePicker.NextTrigger>
+                          <ChevronRightIcon />
+                        </DatePicker.NextTrigger>
+                      </DatePicker.ViewControl>
+                      <DatePicker.Table>
+                        <DatePicker.TableHead>
+                          <DatePicker.TableRow>
+                            {api.weekDays.map((weekDay, id) => (<DatePicker.TableHeader key={id}>
+                                {weekDay.short.substring(0, 2)}
+                              </DatePicker.TableHeader>))}
+                          </DatePicker.TableRow>
+                        </DatePicker.TableHead>
+                        <DatePicker.TableBody>
+                          {api.weeks.map((week, id) => (<DatePicker.TableRow key={id}>
+                              {week.map((day, id) => (<DatePicker.TableCell key={id} value={day}>
+                                  <DatePicker.TableCellTrigger>
+                                    {day.day}
+                                  </DatePicker.TableCellTrigger>
+                                </DatePicker.TableCell>))}
+                            </DatePicker.TableRow>))}
+                        </DatePicker.TableBody>
+                      </DatePicker.Table>
+                    </>)}
+                </DatePicker.Context>
+              </DatePicker.View>
+            </DatePicker.Content>
+          </DatePicker.Positioner>
+        </Portal>
+      </DatePicker.Root>
+
+      <div className="hidden grow lg:block"/>
+
+      {props.enabledFilters?.gameType && (<Select.Root collection={gameTypeCollection} value={gameType ? [gameType] : []} onValueChange={(details) => {
+                const value = z
+                    .enum((props.gameTypeOptions ?? []))
+                    .safeParse(details.value.at(0)).data;
+                setGameType(value ?? null);
+            }} lazyMount deselectable positioning={{
+                sameWidth: true,
+            }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Game Type"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                        e.stopPropagation();
+                    }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {gameTypeCollection.items.map((type) => (<Select.Item key={type} item={type}>
+                      <Select.ItemText>
+                        {capitalize(type, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>)}
+
+      {props.enabledFilters?.gameProvider && (<Select.Root collection={gameProviderCollection} value={gameProvider ? [gameProvider] : []} onValueChange={(details) => {
+                const value = z
+                    .enum((props.gameProviderOptions ?? []))
+                    .safeParse(details.value.at(0)).data;
+                setGameProvider(value ?? null);
+            }} lazyMount deselectable positioning={{
+                sameWidth: true,
+            }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Game Vendor"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                        e.stopPropagation();
+                    }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {gameProviderCollection.items.map((provider) => (<Select.Item key={provider} item={provider}>
+                      <Select.ItemText>
+                        {capitalize(provider, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>)}
+
+      {props.enabledFilters?.depositStatus && (<Select.Root collection={depositStatusCollection} value={depositStatus ? [depositStatus] : []} onValueChange={(details) => {
+                const value = z
+                    .enum(DEPOSIT_STATUSES)
+                    .safeParse(details.value.at(0)).data;
+                setDepositStatus(value ?? null);
+            }} lazyMount deselectable positioning={{
+                sameWidth: true,
+            }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Status"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                        e.stopPropagation();
+                    }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {withdrawalStatusCollection.items.map((status) => (<Select.Item key={status} item={status}>
+                      <Select.ItemText>
+                        {capitalize(status, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>)}
+
+      {props.enabledFilters?.withdrawalStatus && (<Select.Root collection={withdrawalStatusCollection} value={withdrawalStatus ? [withdrawalStatus] : []} onValueChange={(details) => {
+                const value = z
+                    .enum(WITHDRAWAL_STATUSES)
+                    .safeParse(details.value.at(0)).data;
+                setWithdrawalStatus(value ?? null);
+            }} lazyMount deselectable positioning={{
+                sameWidth: true,
+            }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Status"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                        e.stopPropagation();
+                    }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {depositStatusCollection.items.map((status) => (<Select.Item key={status} item={status}>
+                      <Select.ItemText>
+                        {capitalize(status, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>)}
+
+      {props.enabledFilters?.transactionType && (<Select.Root collection={transactionTypeCollection} value={transactionType ? [transactionType] : []} onValueChange={(details) => {
+                const value = z
+                    .enum(TRANSACTION_TYPES)
+                    .safeParse(details.value.at(0)).data;
+                setTransactionType(value ?? null);
+            }} lazyMount deselectable positioning={{
+                sameWidth: true,
+            }}>
+          <Select.Trigger className="w-full lg:w-[14rem]">
+            <Select.ValueText placeholder="Type"/>
+            <Select.Context>
+              {(api) => (<>
+                  {api.value.length ? (<Select.ClearTrigger asChild>
+                      <span onClick={(e) => {
+                        e.stopPropagation();
+                    }}>
+                        Clear
+                      </span>
+                    </Select.ClearTrigger>) : (<Select.Indicator asChild>
+                      <ChevronDownIcon />
+                    </Select.Indicator>)}
+                </>)}
+            </Select.Context>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {transactionTypeCollection.items.map((type) => (<Select.Item key={type} item={type}>
+                      <Select.ItemText>
+                        {capitalize(type, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                      </Select.ItemText>
+                      <Select.ItemIndicator asChild>
+                        <CheckIcon />
+                      </Select.ItemIndicator>
+                    </Select.Item>))}
+                </Select.ItemGroup>
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>)}
+    </div>);
+}

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

@@ -1,4 +1,4 @@
-import { GameProvider, GameType } from '@opexa/portal-sdk-core';
+import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
 export interface TransactionRecordsProps {
     gameTypes: GameType[];
     gameProviders: GameProvider[];

package/dist/components/TransactionRecords/TransactionRecords.jsx

@@ -0,0 +1,39 @@
+'use client';
+import { twMerge } from 'tailwind-merge';
+import { Tabs } from '../../ui';
+import { DepositRecordsTable } from './DepositRecordsTable';
+import { TransactionRecordsTable } from './TransactionRecordsTable';
+import { WithdrawalRecordsTable } from './WithdrawalRecordsTable';
+export function TransactionRecords(props) {
+    return (<div className={twMerge('px-4 pb-3xl pt-4', props.className)}>
+      <h2 className="text-text-secondary-700 text-sm font-semibold leading-tight">
+        Transaction Records
+      </h2>
+      <p className="text-text-tertiary-600 mt-xs text-sm leading-tight">
+        View your transaction records
+      </p>
+
+      <Tabs.Root className="mt-lg" defaultValue="transactions" lazyMount unmountOnExit>
+        <Tabs.List>
+          <Tabs.Trigger value="transactions">Transactions</Tabs.Trigger>
+          <Tabs.Trigger value="deposits">Deposits</Tabs.Trigger>
+          <Tabs.Trigger value="withdrawals">Withdrawals</Tabs.Trigger>
+          <Tabs.Indicator />
+        </Tabs.List>
+
+        <h3 className="text-text-secondary-700 mt-3xl text-sm font-semibold">
+          Table
+        </h3>
+
+        <Tabs.Content value="transactions" className="mt-xl">
+          <TransactionRecordsTable />
+        </Tabs.Content>
+        <Tabs.Content value="deposits" className="mt-xl">
+          <DepositRecordsTable />
+        </Tabs.Content>
+        <Tabs.Content value="withdrawals" className="mt-xl">
+          <WithdrawalRecordsTable />
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>);
+}

package/dist/components/TransactionRecords/TransactionRecordsTable.jsx

@@ -0,0 +1,147 @@
+import { createListCollection, Portal } from '@ark-ui/react';
+import { tz, TZDateMini } from '@date-fns/tz';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { useInfiniteQueryHelper, useLocaleInfo, useTransactionRecordsQuery, } from '../../client/hooks';
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons';
+import { IconButton, Select, Table } from '../../ui';
+import { capitalize, formatNumber } from '../../utils';
+import { Empty } from '../Empty';
+import { TableFilters } from './TableFilters';
+export function TransactionRecordsTable() {
+    const [timestamp, setTimestamp] = useState();
+    const localeInfo = useLocaleInfo();
+    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
+        filter: {
+            ...(timestamp && {
+                dateTimeCreated: {
+                    ...(timestamp.start && {
+                        greaterThanOrEqual: new TZDateMini(startOfDay(timestamp.start), localeInfo.timezone).toISOString(),
+                    }),
+                    ...(timestamp.end && {
+                        lesserThanOrEqual: new TZDateMini(endOfDay(timestamp.end), localeInfo.timezone).toISOString(),
+                    }),
+                },
+            }),
+        },
+    });
+    return (<>
+      <TableFilters value={{
+            timestamp,
+        }} onChange={(value) => {
+            setTimestamp(value.timestamp);
+            firstPage();
+        }} enabledFilters={{
+            transactionType: true,
+        }}/>
+
+      {rows.length <= 0 && (<Empty icon={loading ? SpinnerIcon : File02Icon} title={loading ? 'Just a moment' : 'No data'} message={loading
+                ? 'Fetching latest transaction records...'
+                : 'No data is currently available.'} className="mt-5xl"/>)}
+
+      {rows.length >= 1 && (<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">
+          <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">
+            <Table.Root className="border-0">
+              <Table.Header>
+                <Table.Row>
+                  <Table.Heading>Transaction Type</Table.Heading>
+                  <Table.Heading>Transaction Time</Table.Heading>
+                  <Table.Heading>Amount</Table.Heading>
+                  <Table.Heading>Current Balance</Table.Heading>
+                  <Table.Heading>Reference Number</Table.Heading>
+                  <Table.Heading>Content</Table.Heading>
+                </Table.Row>
+              </Table.Header>
+
+              <Table.Body>
+                {rows.map((data) => (<Table.Row key={data.id}>
+                    <Table.Cell className="!py-1">
+                      {capitalize(data.type, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      <div className="leading-tight">
+                        {format(data.dateTimeCreated, 'MM/dd/yyyy', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                      <div className="text-text-tertiary-600 leading-tight">
+                        {format(data.dateTimeCreated, 'hh:mm a', {
+                    in: tz(localeInfo.timezone),
+                })}
+                      </div>
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.amount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {formatNumber(data.currentBalance, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {data.referenceNumber}
+                    </Table.Cell>
+                    <Table.Cell className="!py-1">
+                      {data.content || '/'}
+                    </Table.Cell>
+                  </Table.Row>))}
+              </Table.Body>
+            </Table.Root>
+          </div>
+
+          <div className="flex items-center gap-lg px-4 py-3">
+            <p className="text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0">
+              Page {page} of {totalPages}
+            </p>
+            <div className="hidden grow lg:block"></div>
+            <Select.Root size="sm" value={[pageSize.toString()]} onValueChange={(details) => {
+                const n = parseInt(details.value[0]);
+                const v = isNaN(n) ? 10 : n;
+                setPageSize(v);
+            }} collection={pageSizeCollection} lazyMount className="hidden lg:block" positioning={{
+                sameWidth: true,
+            }}>
+              <Select.Trigger>
+                <Select.ValueText />
+                <Select.Indicator asChild>
+                  <ChevronDownIcon />
+                </Select.Indicator>
+                <Portal>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {pageSizeCollection.items.map((item) => (<Select.Item key={item} item={item}>
+                          <Select.ItemText>
+                            {pageSizeCollection.stringifyItem(item)}
+                          </Select.ItemText>
+                          <Select.ItemIndicator asChild>
+                            <CheckIcon />
+                          </Select.ItemIndicator>
+                        </Select.Item>))}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Portal>
+              </Select.Trigger>
+            </Select.Root>
+            <div className="contents lg:flex">
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-1 lg:order-none lg:rounded-r-none lg:border-r-0" disabled={!hasPrevPage || loading} onClick={() => prev()}>
+                <ChevronLeftIcon className="size-5"/>
+              </IconButton>
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="order-3 lg:order-none lg:rounded-l-none" disabled={!hasNextPage || loading} onClick={() => next()}>
+                <ChevronRightIcon className="size-5"/>
+              </IconButton>
+            </div>
+          </div>
+        </div>)}
+    </>);
+}
+const pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: (item) => item.toString(),
+    itemToString: (item) => `${item} items per page`,
+});