@opexa/portal-components 0.0.28 → 0.0.30

package/dist/components/TransactionRecords/DepositRecordsTable.jsx

@@ -1,193 +0,0 @@
-import { createListCollection, Portal } from '@ark-ui/react';
-import { tz, TZDateMini } from '@date-fns/tz';
-import {} from '@opexa/portal-sdk-core';
-import { endOfDay, format, startOfDay } from 'date-fns';
-import { useState } from 'react';
-import { useDepositRecordsQuery, useInfiniteQueryHelper, useLocaleInfo, } from '../../client/hooks';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons';
-import { Badge, IconButton, Select, Table } from '../../ui';
-import { capitalize, formatNumber } from '../../utils';
-import { Empty } from '../Empty';
-import { TableFilters } from './TableFilters';
-export function DepositRecordsTable() {
-    const [timestamp, setTimestamp] = useState();
-    const [depositStatus, setDepositStatus] = useState();
-    const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useDepositRecordsQuery, {
-        filter: {
-            ...(depositStatus && {
-                status: {
-                    equal: depositStatus,
-                },
-            }),
-            ...(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 enabledFilters={{
-            depositStatus: true,
-        }} value={{
-            timestamp,
-            depositStatus,
-        }} onChange={(value) => {
-            firstPage();
-            setTimestamp(value.timestamp);
-            setDepositStatus(value.depositStatus);
-        }}/>
-
-      {rows.length <= 0 && (<Empty icon={loading ? SpinnerIcon : File02Icon} title={loading ? 'Just a moment' : 'No data'} message={loading
-                ? 'Fetching latest deposit 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>Deposit No.</Table.Heading>
-                  <Table.Heading>Reference</Table.Heading>
-                  <Table.Heading>Deposit Method</Table.Heading>
-                  <Table.Heading>Applied Amount</Table.Heading>
-                  <Table.Heading>Recieved Amount</Table.Heading>
-                  <Table.Heading>Transaction Fee</Table.Heading>
-                  <Table.Heading>Deposit Time</Table.Heading>
-                  <Table.Heading>Recieved Time</Table.Heading>
-                  <Table.Heading>Status</Table.Heading>
-                </Table.Row>
-              </Table.Header>
-
-              <Table.Body>
-                {rows.map((data) => (<Table.Row key={data.id}>
-                    <Table.Cell className="!py-1">
-                      {data.depositNumber}
-                    </Table.Cell>
-                    <Table.Cell className="!py-1">{data.reference}</Table.Cell>
-                    <Table.Cell className="!py-1">
-                      {capitalize(data.type, {
-                    delimiter: capitalize.delimiters.UNDERSCORE,
-                })}
-                    </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.netAmount, {
-                    currency: localeInfo.currency.code,
-                    minDecimalPlaces: 2,
-                })}
-                    </Table.Cell>
-                    <Table.Cell className="!py-1">
-                      {formatNumber(data.fee, {
-                    currency: localeInfo.currency.code,
-                    minDecimalPlaces: 2,
-                })}
-                    </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">
-                      {(data.status === 'CONFIRMED' ||
-                    data.status === 'APPROVED') && (<>
-                          <div className="leading-tight">
-                            {format(data.dateTimeLastUpdated, 'MM/dd/yyyy', {
-                        in: tz(localeInfo.timezone),
-                    })}
-                          </div>
-                          <div className="text-text-tertiary-600 leading-tight">
-                            {format(data.dateTimeLastUpdated, 'hh:mm a', {
-                        in: tz(localeInfo.timezone),
-                    })}
-                          </div>
-                        </>)}
-                    </Table.Cell>
-                    <Table.Cell className="!py-1">
-                      <Badge.Root variant="subtle" colorScheme={data.status === 'FAILED' ||
-                    data.status === 'REJECTED' ||
-                    data.status === 'CANCELLED'
-                    ? 'danger'
-                    : data.status === 'PENDING'
-                        ? 'warning'
-                        : 'success'}>
-                        <Badge.Label>
-                          {capitalize(data.status, {
-                    delimiter: capitalize.delimiters.UNDERSCORE,
-                })}
-                        </Badge.Label>
-                      </Badge.Root>
-                    </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`,
-});

package/dist/components/TransactionRecords/TableFilters.jsx

@@ -1,446 +0,0 @@
-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.jsx

@@ -1,39 +0,0 @@
-'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>);
-}