@opexa/portal-components 0.0.2 → 0.0.3

package/dist/components/TransactionRecords/TableFilters.jsx

@@ -0,0 +1,359 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 '../../hooks/useControllableState';
+import { CheckIcon } from '../../icons/CheckIcon';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon';
+import { DatePicker, SegmentGroup, Select } from '../../ui';
+import { capitalize } from '../../utils/capitalize';
+var TabDefinition = z.enum(['all', 'today', 'custom']).catch('all');
+var DEPOSIT_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+var WITHDRAWAL_STATUSES = [
+    'ACCEPTED',
+    'APPROVED',
+    'CANCELLED',
+    'CONFIRMED',
+    'FAILED',
+    'PENDING',
+    'REJECTED',
+];
+var deviceTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+export function TableFilters(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var gameTypeCollection = createListCollection({
+        items: (_a = props.gameTypeOptions) !== null && _a !== void 0 ? _a : [],
+        itemToValue: function (item) { return item; },
+        itemToString: function (item) {
+            return capitalize(item, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            });
+        },
+    });
+    var gameProviderCollection = createListCollection({
+        items: (_b = props.gameProviderOptions) !== null && _b !== void 0 ? _b : [],
+        itemToValue: function (item) { return item; },
+        itemToString: function (item) {
+            return capitalize(item, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            });
+        },
+    });
+    var depositStatusCollection = createListCollection({
+        items: DEPOSIT_STATUSES,
+        itemToValue: function (item) { return item; },
+        itemToString: function (item) {
+            return capitalize(item, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            });
+        },
+    });
+    var withdrawalStatusCollection = createListCollection({
+        items: WITHDRAWAL_STATUSES,
+        itemToValue: function (item) { return item; },
+        itemToString: function (item) {
+            return capitalize(item, {
+                delimiter: capitalize.delimiters.UNDERSCORE,
+            });
+        },
+    });
+    var _x = useState('all'), tab = _x[0], setTab = _x[1];
+    var handleChange = function (next) {
+        var _a;
+        var prev = {
+            timestamp: timestamp,
+            gameType: gameType,
+            gameProvider: gameProvider,
+            depositStatus: depositStatus,
+            withdrawalStatus: withdrawalStatus,
+        };
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, prev), next));
+    };
+    var _y = useControllableState({
+        value: (_c = props.value) === null || _c === void 0 ? void 0 : _c.timestamp,
+        defaultValue: (_e = (_d = props.defaultValue) === null || _d === void 0 ? void 0 : _d.timestamp) !== null && _e !== void 0 ? _e : null,
+        onChange: function (timestamp) {
+            handleChange({ timestamp: timestamp });
+        },
+    }), timestamp = _y[0], setTimestamp = _y[1];
+    var _z = useControllableState({
+        value: (_f = props.value) === null || _f === void 0 ? void 0 : _f.gameType,
+        defaultValue: (_h = (_g = props.defaultValue) === null || _g === void 0 ? void 0 : _g.gameType) !== null && _h !== void 0 ? _h : null,
+        onChange: function (gameType) {
+            handleChange({ gameType: gameType });
+        },
+    }), gameType = _z[0], setGameType = _z[1];
+    var _0 = useControllableState({
+        value: (_j = props.value) === null || _j === void 0 ? void 0 : _j.gameProvider,
+        defaultValue: (_l = (_k = props.defaultValue) === null || _k === void 0 ? void 0 : _k.gameProvider) !== null && _l !== void 0 ? _l : null,
+        onChange: function (gameProvider) {
+            handleChange({ gameProvider: gameProvider });
+        },
+    }), gameProvider = _0[0], setGameProvider = _0[1];
+    var _1 = useControllableState({
+        value: (_m = props.value) === null || _m === void 0 ? void 0 : _m.depositStatus,
+        defaultValue: (_p = (_o = props.defaultValue) === null || _o === void 0 ? void 0 : _o.depositStatus) !== null && _p !== void 0 ? _p : null,
+        onChange: function (depositStatus) {
+            handleChange({ depositStatus: depositStatus });
+        },
+    }), depositStatus = _1[0], setDepositStatus = _1[1];
+    var _2 = useControllableState({
+        value: (_q = props.value) === null || _q === void 0 ? void 0 : _q.withdrawalStatus,
+        defaultValue: (_s = (_r = props.defaultValue) === null || _r === void 0 ? void 0 : _r.withdrawalStatus) !== null && _s !== void 0 ? _s : null,
+        onChange: function (withdrawalStatus) {
+            handleChange({ withdrawalStatus: withdrawalStatus });
+        },
+    }), withdrawalStatus = _2[0], setWithdrawalStatus = _2[1];
+    return (<div className="flex items-center gap-lg">
+      <DatePicker.Root lazyMount unmountOnExit value={[timestamp === null || timestamp === void 0 ? void 0 : timestamp.start, timestamp === null || timestamp === void 0 ? void 0 : timestamp.end]
+            .filter(Boolean)
+            .map(function (d) { return parseDate(d); })} onValueChange={function (details) {
+            var _a, _b;
+            setTimestamp({
+                start: (_a = details.value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate(deviceTimezone),
+                end: (_b = details.value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate(deviceTimezone),
+            });
+        }} onOpenChange={function (details) {
+            if (details.open)
+                return;
+            if (timestamp)
+                return;
+            setTab('all');
+        }} selectionMode="range" closeOnSelect={false} positioning={{
+            gutter: 20,
+            placement: 'bottom',
+        }}>
+        <SegmentGroup.Root value={tab} onValueChange={function (details) {
+            var value = TabDefinition.parse(details.value);
+            if (value === 'today') {
+                var now = new Date();
+                setTimestamp({
+                    start: startOfDay(now),
+                    end: endOfDay(now),
+                });
+            }
+            else {
+                setTimestamp(null);
+            }
+            setTab(value);
+        }}>
+          <SegmentGroup.Item value="all">
+            <SegmentGroup.ItemText>All</SegmentGroup.ItemText>
+            <SegmentGroup.ItemControl />
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+          <SegmentGroup.Item value="today">
+            <SegmentGroup.ItemText>Today</SegmentGroup.ItemText>
+            <SegmentGroup.ItemControl />
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+
+          <DatePicker.Context>
+            {function (api) { return (<SegmentGroup.Item value="custom" onClick={function () { return api.setOpen(true); }}>
+                <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>
+                  {function (api) { return (<>
+                      <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(function (weekDay, id) { return (<DatePicker.TableHeader key={id}>
+                                {weekDay.short.substring(0, 2)}
+                              </DatePicker.TableHeader>); })}
+                          </DatePicker.TableRow>
+                        </DatePicker.TableHead>
+                        <DatePicker.TableBody>
+                          {api.weeks.map(function (week, id) { return (<DatePicker.TableRow key={id}>
+                              {week.map(function (day, id) { return (<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="grow"/>
+
+      {((_t = props.enabledFilters) === null || _t === void 0 ? void 0 : _t.gameType) && (<Select.Root collection={gameTypeCollection} value={gameType ? [gameType] : []} onValueChange={function (details) {
+                var _a;
+                var value = z
+                    .enum(((_a = props.gameTypeOptions) !== null && _a !== void 0 ? _a : []))
+                    .safeParse(details.value.at(0)).data;
+                setGameType(value !== null && value !== void 0 ? value : null);
+            }} lazyMount deselectable>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Game Type"/>
+            <Select.Indicator asChild>
+              <ChevronDownIcon />
+            </Select.Indicator>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {gameTypeCollection.items.map(function (type) { return (<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>)}
+
+      {((_u = props.enabledFilters) === null || _u === void 0 ? void 0 : _u.gameProvider) && (<Select.Root collection={gameProviderCollection} value={gameProvider ? [gameProvider] : []} onValueChange={function (details) {
+                var _a;
+                var value = z
+                    .enum(((_a = props.gameProviderOptions) !== null && _a !== void 0 ? _a : []))
+                    .safeParse(details.value.at(0)).data;
+                setGameProvider(value !== null && value !== void 0 ? value : null);
+            }} lazyMount deselectable>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Game Vendor"/>
+            <Select.Indicator asChild>
+              <ChevronDownIcon />
+            </Select.Indicator>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {gameProviderCollection.items.map(function (provider) { return (<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>)}
+
+      {((_v = props.enabledFilters) === null || _v === void 0 ? void 0 : _v.depositStatus) && (<Select.Root collection={depositStatusCollection} value={depositStatus ? [depositStatus] : []} onValueChange={function (details) {
+                var value = z
+                    .enum(DEPOSIT_STATUSES)
+                    .safeParse(details.value.at(0)).data;
+                setDepositStatus(value !== null && value !== void 0 ? value : null);
+            }} lazyMount deselectable>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Status"/>
+            <Select.Indicator asChild>
+              <ChevronDownIcon />
+            </Select.Indicator>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {withdrawalStatusCollection.items.map(function (status) { return (<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>)}
+
+      {((_w = props.enabledFilters) === null || _w === void 0 ? void 0 : _w.withdrawalStatus) && (<Select.Root collection={withdrawalStatusCollection} value={withdrawalStatus ? [withdrawalStatus] : []} onValueChange={function (details) {
+                var value = z
+                    .enum(WITHDRAWAL_STATUSES)
+                    .safeParse(details.value.at(0)).data;
+                setWithdrawalStatus(value !== null && value !== void 0 ? value : null);
+            }} lazyMount deselectable>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Status"/>
+            <Select.Indicator asChild>
+              <ChevronDownIcon />
+            </Select.Indicator>
+          </Select.Trigger>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content>
+                <Select.ItemGroup>
+                  {depositStatusCollection.items.map(function (status) { return (<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>)}
+    </div>);
+}

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

@@ -0,0 +1,7 @@
+import type { GameProvider, GameType } from '@opexa/portal-sdk-core';
+export interface TransactionRecordsProps {
+    gameTypes: GameType[];
+    gameProviders: GameProvider[];
+    className?: string;
+}
+export declare function TransactionRecords(props: TransactionRecordsProps): import("react").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecords.jsx

@@ -0,0 +1,33 @@
+import { Tabs } from '../../ui';
+import { DepositRecordsTable } from './DepositRecordsTable';
+import { TransactionRecordsTable } from './TransactionRecordsTable';
+import { WithdrawalRecordsTable } from './WithdrawalRecordsTable';
+export function TransactionRecords(props) {
+    return (<div className={props.className}>
+      <h2 className="text-lg font-semibold">Transaction Records</h2>
+      <p className="text-gray-600 mt-xs text-xs">
+        View your transaction records
+      </p>
+
+      <Tabs.Root className="mt-2xl" defaultValue="transactions" lazyMount unmountOnExit>
+        <div className="pb-2xl">
+          <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>
+        </div>
+
+        <Tabs.Content value="transactions" className="mt-4xl">
+          <TransactionRecordsTable />
+        </Tabs.Content>
+        <Tabs.Content value="deposits" className="mt-4xl">
+          <DepositRecordsTable />
+        </Tabs.Content>
+        <Tabs.Content value="withdrawals" className="mt-4xl">
+          <WithdrawalRecordsTable />
+        </Tabs.Content>
+      </Tabs.Root>
+    </div>);
+}

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

@@ -0,0 +1 @@
+export declare function TransactionRecordsTable(): import("react").JSX.Element;

package/dist/components/TransactionRecords/TransactionRecordsTable.jsx

@@ -0,0 +1,141 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 } from '../../hooks/useInfiniteQueryHelper';
+import { useLocaleInfo } from '../../hooks/useLocaleInfo';
+import { useTransactionRecordsQuery } from '../../hooks/useTransactionRecordsQuery/useTransactionRecordsQuery';
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon';
+import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon';
+import { File02Icon } from '../../icons/File02Icon';
+import { SpinnerIcon } from '../../icons/SpinnerIcon';
+import { IconButton, Select, Table } from '../../ui';
+import { capitalize } from '../../utils/capitalize';
+import { formatNumber } from '../../utils/formatNumber';
+import { Empty } from '../Empty';
+import { TableFilters } from './TableFilters';
+export function TransactionRecordsTable() {
+    var _a = useState(), timestamp = _a[0], setTimestamp = _a[1];
+    var localeInfo = useLocaleInfo();
+    var _b = useInfiniteQueryHelper(useTransactionRecordsQuery, {
+        filter: __assign({}, (timestamp && {
+            dateTimeCreated: __assign(__assign({}, (timestamp.start && {
+                greaterThanOrEqual: new TZDateMini(startOfDay(timestamp.start), localeInfo.timezone).toISOString(),
+            })), (timestamp.end && {
+                lesserThanOrEqual: new TZDateMini(endOfDay(timestamp.end), localeInfo.timezone).toISOString(),
+            })),
+        })),
+    }), page = _b.page, pageSize = _b.pageSize, hasNextPage = _b.hasNextPage, hasPrevPage = _b.hasPrevPage, next = _b.next, prev = _b.prev, rows = _b.rows, setPageSize = _b.setPageSize, totalPages = _b.totalPages, loading = _b.loading, firstPage = _b.firstPage;
+    return (<>
+      <TableFilters value={{
+            timestamp: timestamp,
+        }} onChange={function (value) {
+            setTimestamp(value.timestamp);
+            firstPage();
+        }}/>
+
+      {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-8 lg:mt-16"/>)}
+
+      {rows.length >= 1 && (<div className="border-gray-200 mt-lg rounded-xl border">
+          <div className="border-gray-200 overflow-hidden overflow-x-auto rounded-xl 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(function (data) { return (<Table.Row key={data.id}>
+                    <Table.Cell>
+                      {capitalize(data.type, {
+                    delimiter: capitalize.delimiters.UNDERSCORE,
+                })}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {format(data.dateTimeCreated, 'yyyy MMM dd hh:mma', {
+                    in: tz(localeInfo.timezone),
+                })}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {formatNumber(data.amount, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {formatNumber(data.currentBalance, {
+                    currency: localeInfo.currency.code,
+                    minDecimalPlaces: 2,
+                })}
+                    </Table.Cell>
+                    <Table.Cell>{data.referenceNumber}</Table.Cell>
+                    <Table.Cell>{data.content}</Table.Cell>
+                  </Table.Row>); })}
+              </Table.Body>
+            </Table.Root>
+          </div>
+
+          <div className="flex items-center gap-lg px-4 py-3">
+            <p>
+              Page {page} of {totalPages}
+            </p>
+            <div className="grow"></div>
+            <Select.Root size="sm" value={[pageSize.toString()]} onValueChange={function (details) {
+                var n = parseInt(details.value[0]);
+                var v = isNaN(n) ? 10 : n;
+                setPageSize(v);
+            }} collection={pageSizeCollection} lazyMount>
+              <Select.Trigger>
+                <Select.ValueText />
+                <Select.Indicator asChild>
+                  <ChevronDownIcon />
+                </Select.Indicator>
+                <Portal>
+                  <Select.Positioner>
+                    <Select.Content>
+                      {pageSizeCollection.items.map(function (item) { return (<Select.Item key={item} item={item}>
+                          {pageSizeCollection.stringifyItem(item)}
+                        </Select.Item>); })}
+                    </Select.Content>
+                  </Select.Positioner>
+                </Portal>
+              </Select.Trigger>
+            </Select.Root>
+            <div>
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" disabled={!hasPrevPage || loading} onClick={function () { return prev(); }}>
+                <ChevronLeftIcon className="size-5"/>
+              </IconButton>
+              <IconButton size="sm" variant="outline" colorScheme="gray" className="rounded-l-none" disabled={!hasNextPage || loading} onClick={function () { return next(); }}>
+                <ChevronRightIcon className="size-5"/>
+              </IconButton>
+            </div>
+          </div>
+        </div>)}
+    </>);
+}
+var pageSizeCollection = createListCollection({
+    items: useInfiniteQueryHelper.config.pageSizes,
+    itemToValue: function (item) { return item.toString(); },
+    itemToString: function (item) { return "".concat(item, " items per page"); },
+});

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

@@ -0,0 +1 @@
+export declare function WithdrawalRecordsTable(): import("react").JSX.Element;