@opexa/portal-components 0.1.22 → 0.1.24

package/dist/lib/components/TransactionRecords/TableFilters.js

@@ -1,335 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createListCollection } from '@ark-ui/react/collection';
-import { parseDate, useDatePickerContext } from '@ark-ui/react/date-picker';
-import { endOfDay, startOfDay } from 'date-fns';
-import { useMemo, useState } from 'react';
-import { useMediaQuery } from 'usehooks-ts';
-import { z } from 'zod';
-import { useControllableState } from '../../client/hooks/useControllableState.js';
-import { useDisclosure } from '../../client/hooks/useDisclosure.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 { DatePicker } from '../../ui/DatePicker/index.js';
-import { Portal } from '../../ui/Portal/index.js';
-import { SegmentGroup } from '../../ui/SegmentGroup/index.js';
-import { Select } from '../../ui/Select/index.js';
-import { capitalize } from '../../utils/capitalize.js';
-import { useTransactionPropsContext } from './TransactionContext.js';
-const TabDefinition = z.enum(['all', 'today', 'custom']).catch('all');
-const DEFAULT_DEPOSIT_TYPES = [
-    'BANK',
-    'GCASH',
-    'MAYA',
-    'MANUAL',
-    'ONLINE_BANK',
-    'QR_PH',
-];
-const DEPOSIT_TYPES_MAP = {
-    BANK: 'Bank',
-    GCASH: 'GCash',
-    MAYA: 'Maya',
-    MANUAL: 'Manual',
-    MAYA_APP: 'Maya App',
-    QR_PH: 'QR PH',
-    ONLINE_BANK: 'Online Bank',
-    MANUAL_BANK: 'Manual Bank',
-    MANUAL_UPI: 'Manual UPI',
-    PISO_PAY_CHECKOUT: 'Piso Pay Checkout',
-    LIBANGAN_PAY_IN: 'Libangan Pay In',
-    AIO_GCASH: 'AiO GCash',
-    AIO_PAY_MAYA: 'AiO Maya',
-    AIO_GRAB_PAY: 'AiO Grab Pay',
-    AIO_PALAWAN_PAY: 'AiO Palawan Pay',
-    AURIX_PAY_QR_PH: 'Aurix QRPH',
-    AURIX_PAY_GCASH: 'Aurix GCash',
-    AURIX_PAY_PAY_MAYA: 'Aurix Maya',
-    AURIX_PAY_GRAB_PAY: 'Aurix GrabPay',
-    MAYA_WEBPAY: 'Maya WebPay',
-    TEST: 'Test',
-};
-const DEPOSIT_STATUSES = [
-    'ACCEPTED',
-    'APPROVED',
-    'CANCELLED',
-    'CONFIRMED',
-    'FAILED',
-    'PENDING',
-    'REJECTED',
-];
-const WITHDRAWAL_TYPES = [
-    'BANK',
-    'GCASH',
-    'INSTAPAY',
-    'MAYA_APP',
-    'PISO_PAY_REMITTANCE',
-    'MANUAL',
-    'GCASH_STANDARD_CASH_IN',
-];
-const WITHDRAWAL_TYPES_MAP = {
-    BANK: 'Bank',
-    GCASH: 'GCash',
-    INSTAPAY: 'Instapay',
-    MAYA_APP: 'Maya App',
-    MANUAL: 'Manual',
-    MANUAL_UPI: 'Manual UPI',
-    VENTAJA_DISBURSEMENT: 'Ventaja Disbursement',
-    PISO_PAY_REMITTANCE: 'Piso Pay Remittance',
-    MANUAL_BANK: 'Manual Bank',
-    GCASH_STANDARD_CASH_IN: 'GCash Standard Cash In',
-};
-const WITHDRAWAL_STATUSES = [
-    'ACCEPTED',
-    'APPROVED',
-    'CANCELLED',
-    'CONFIRMED',
-    'FAILED',
-    'PENDING',
-    'REJECTED',
-];
-const TRANSACTION_TYPES = [
-    'DEPOSIT',
-    'WITHDRAWAL',
-    'BET',
-    'PAYOUT',
-    'BONUS',
-    'POINTS_TO_CASH_CONVERSION',
-    'CASHBACK_BONUS',
-    'WITHDRAWAL_REFUND',
-    'BET_REFUND',
-    'BONUS_PAYOUT',
-    'BONUS_BET',
-    'BONUS_CREATED',
-    'BONUS_CANCELLED',
-    'BONUS_CLEARED',
-    'BONUS_ZEROED_OUT',
-    'JACKPOT_PAYOUT',
-    'TOURNAMENT_PAYOUT',
-];
-const TRANSACTION_TYPES_MAP = {
-    DEPOSIT: 'Deposit',
-    WITHDRAWAL: 'Withdrawal',
-    BET: 'Bet',
-    PAYOUT: 'Win',
-    POINTS_TO_CASH_CONVERSION: 'Points to Cash Conversion',
-    BONUS: 'Bonus',
-    CASHBACK_BONUS: 'Cashback Bonus',
-    WITHDRAWAL_REFUND: 'Withdrawal Refund',
-    BET_REFUND: 'Bet Refund',
-    BONUS_PAYOUT: 'Bonus Payout',
-    BONUS_BET: 'Bonus Bet',
-    BONUS_CREATED: 'Bonus Created',
-    BONUS_CANCELLED: 'Bonus Cancelled',
-    BONUS_CLEARED: 'Bonus Cleared',
-    BONUS_ZEROED_OUT: 'Bonus Zeroed Out',
-    JACKPOT_PAYOUT: 'Jackpot Payout',
-    TOURNAMENT_PAYOUT: 'Tournament Payout',
-};
-const deviceTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-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) => TRANSACTION_TYPES_MAP[item],
-});
-export function TableFilters(props) {
-    const [tab, setTab] = useState('all');
-    const { enabledDepositTypes, enabledWithdrawalTypes } = useTransactionPropsContext();
-    const depositTypes = useMemo(() => enabledDepositTypes?.length ? enabledDepositTypes : DEFAULT_DEPOSIT_TYPES, [enabledDepositTypes]);
-    const withdrawalTypes = useMemo(() => enabledWithdrawalTypes?.length
-        ? enabledWithdrawalTypes
-        : WITHDRAWAL_TYPES, [enabledWithdrawalTypes]);
-    const depositTypeCollection = useMemo(() => createListCollection({
-        items: depositTypes,
-        itemToValue: (item) => item,
-        itemToString: (item) => DEPOSIT_TYPES_MAP[item],
-    }), [depositTypes]);
-    const withdrawalTypeCollection = createListCollection({
-        items: withdrawalTypes,
-        itemToValue: (item) => item,
-        itemToString: (item) => WITHDRAWAL_TYPES_MAP[item],
-    });
-    const handleChange = (next) => {
-        const prev = {
-            timestamp,
-            depositType,
-            depositStatus,
-            withdrawalType,
-            withdrawalStatus,
-            transactionType,
-        };
-        props.onChange?.({
-            ...prev,
-            ...next,
-        });
-    };
-    const [timestamp, setTimestamp] = useControllableState({
-        value: props.value?.timestamp,
-        defaultValue: props.defaultValue?.timestamp ?? null,
-        onChange(timestamp) {
-            handleChange({ timestamp });
-        },
-    });
-    const [depositType, setdepositType] = useControllableState({
-        value: props.value?.depositType,
-        defaultValue: props.defaultValue?.depositType ?? null,
-        onChange(depositType) {
-            handleChange({ depositType });
-        },
-    });
-    const [depositStatus, setDepositStatus] = useControllableState({
-        value: props.value?.depositStatus,
-        defaultValue: props.defaultValue?.depositStatus ?? null,
-        onChange(depositStatus) {
-            handleChange({ depositStatus });
-        },
-    });
-    const [withdrawalType, setWithdrawalType] = useControllableState({
-        value: props.value?.withdrawalType,
-        defaultValue: props.defaultValue?.withdrawalType ?? null,
-        onChange(withdrawalType) {
-            handleChange({ withdrawalType });
-        },
-    });
-    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 });
-        },
-    });
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (!open && !timestamp)
-                setTab('all');
-        },
-    });
-    return (_jsxs("div", { className: "flex flex-col gap-lg lg:flex-row lg:items-center", children: [_jsxs(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", ids: {
-                    item(value) {
-                        return `segment-group:item:${value}`;
-                    },
-                }, 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, {})] }), _jsxs(SegmentGroup.Item, { value: "custom", className: "w-full lg:w-auto", onClick: () => {
-                            disclosure.setOpen(true);
-                        }, children: [_jsx(SegmentGroup.ItemText, { children: "Custom" }), _jsx(SegmentGroup.ItemControl, {}), _jsx(SegmentGroup.ItemHiddenInput, {})] }), _jsx(SegmentGroup.Indicator, {})] }), _jsx(RangeDatePicker, { value: {
-                    start: timestamp?.start,
-                    end: timestamp?.end,
-                }, onValueChange: setTimestamp, open: disclosure.open, onOpenChange: disclosure.setOpen }), _jsx("div", { className: "hidden grow lg:block" }), props.enabledFilters?.depositType &&
-                (!enabledDepositTypes || enabledDepositTypes.length > 1) && (_jsxs(Select.Root, { collection: depositTypeCollection, value: depositType ? [depositType] : [], onValueChange: (details) => {
-                    const DepositTypeSchema = z.custom((val) => depositTypes.includes(val));
-                    const value = DepositTypeSchema.safeParse(details.value.at(0)).data;
-                    setdepositType(value ?? null);
-                }, lazyMount: true, deselectable: true, positioning: {
-                    sameWidth: true,
-                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Type" }), _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: depositTypeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: depositTypeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] })), props.enabledFilters?.depositStatus && (_jsxs(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: 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: depositStatusCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: depositStatusCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] })), props.enabledFilters?.withdrawalType &&
-                (!enabledWithdrawalTypes || enabledWithdrawalTypes.length > 1) && (_jsxs(Select.Root, { collection: withdrawalTypeCollection, value: withdrawalType ? [withdrawalType] : [], onValueChange: (details) => {
-                    const WithdrawalTypeSchema = z.custom((val) => withdrawalTypes.includes(val));
-                    const value = WithdrawalTypeSchema.safeParse(details.value.at(0)).data;
-                    setWithdrawalType(value ?? null);
-                }, lazyMount: true, deselectable: true, positioning: {
-                    sameWidth: true,
-                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Type" }), _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: withdrawalTypeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: withdrawalTypeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] })), props.enabledFilters?.withdrawalStatus && (_jsxs(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: 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: withdrawalStatusCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: withdrawalStatusCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] })), props.enabledFilters?.transactionType && (_jsxs(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: true, deselectable: true, positioning: {
-                    sameWidth: true,
-                }, children: [_jsxs(Select.Trigger, { className: "w-full lg:w-[14rem]", children: [_jsx(Select.ValueText, { placeholder: "Type" }), _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: transactionTypeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: transactionTypeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) }) })] }))] }));
-}
-function RangeDatePicker(props) {
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? null,
-        onChange: (value) => {
-            props.onValueChange?.(value);
-        },
-    });
-    const [open, setOpen] = useControllableState({
-        value: props.open,
-        defaultValue: props.defaultOpen ?? false,
-        onChange: (open) => {
-            props.onOpenChange?.(open);
-        },
-    });
-    const desktop = useMediaQuery('(min-width: 1024px)');
-    return (_jsx(DatePicker.Root, { lazyMount: true, unmountOnExit: true, value: [value?.start, value?.end]
-            .filter(Boolean)
-            .map((d) => parseDate(d)), onValueChange: (details) => {
-            setValue({
-                start: details.value.at(0)?.toDate(deviceTimezone),
-                end: details.value.at(1)?.toDate(deviceTimezone),
-            });
-        }, open: open, onOpenChange: (details) => {
-            setOpen(details.open);
-        }, selectionMode: "range", closeOnSelect: false, fixedWeeks: true, numOfMonths: desktop ? 2 : 1, positioning: {
-            gutter: 16,
-            placement: 'bottom',
-        }, ids: {
-            control: 'segment-group:item:custom',
-        }, children: _jsx(Portal, { children: _jsx(DatePicker.Positioner, { children: _jsx(DatePicker.Content, { className: "p-0", children: _jsxs("div", { className: "flex", children: [_jsx(RangeDatePickerCalendar, { monthOffset: 0 }), desktop && _jsx(RangeDatePickerCalendar, { monthOffset: 1 })] }) }) }) }) }));
-}
-function RangeDatePickerCalendar({ monthOffset }) {
-    const datePicker = useDatePickerContext();
-    const offset = datePicker.getOffset({
-        months: monthOffset,
-    });
-    return (_jsxs(DatePicker.View, { view: "day", className: "border-border-secondary px-6 py-5 lg:first:border-r", children: [_jsxs(DatePicker.ViewControl, { children: [_jsx(DatePicker.PrevTrigger, { children: _jsx(ChevronLeftIcon, {}) }), _jsx("span", { className: "font-semibold text-base text-text-secondary-700", children: offset.visibleRangeText.start }), _jsx(DatePicker.NextTrigger, { children: _jsx(ChevronRightIcon, {}) })] }), _jsxs(DatePicker.Table, { children: [_jsx(DatePicker.TableHead, { children: _jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => (_jsx(DatePicker.TableHeader, { children: weekDay.short.slice(0, 2) }, id))) }) }), _jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => (_jsx(DatePicker.TableRow, { children: week.map((day, id) => (_jsx(DatePicker.TableCell, { value: day, visibleRange: offset.visibleRange, children: _jsx(DatePicker.TableCellTrigger, { children: day.day }) }, id))) }, id))) })] })] }));
-}

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

@@ -1,6 +0,0 @@
-import type { TransactionRecordsProps } from './TransactionRecords.suspense';
-export declare const TransactionPropsContext: (props: {
-    value: TransactionRecordsProps;
-} & {
-    children?: import("react").ReactNode | undefined;
-}) => React.ReactNode, useTransactionPropsContext: () => TransactionRecordsProps;

package/dist/lib/components/TransactionRecords/TransactionContext.js

@@ -1,2 +0,0 @@
-import { createContext } from '../../client/utils/createContext.js';
-export const [TransactionPropsContext, useTransactionPropsContext] = createContext();

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

@@ -1,2 +0,0 @@
-import { type TransactionRecordsProps } from './TransactionRecords.suspense';
-export declare function TransactionRecords(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/TransactionRecords/TransactionRecords.js

@@ -1,7 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { TransactionRecords__suspense, } from './TransactionRecords.suspense.js';
-export function TransactionRecords(props) {
-    return (_jsx(Suspense, { fallback: null, children: _jsx(TransactionRecords__suspense, { ...props }) }));
-}

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

@@ -1,19 +0,0 @@
-import type { DepositType, WithdrawalType } from '../../types';
-interface ClassNameEntries {
-    transactionRecordsTable?: string | {
-        scrollbarThumb?: string;
-    };
-    depositRecordsTable?: string | {
-        scrollbarThumb?: string;
-    };
-    withdrawalRecordsTable?: string | {
-        scrollbarThumb?: string;
-    };
-}
-export interface TransactionRecordsProps {
-    className?: string | ClassNameEntries;
-    enabledDepositTypes?: DepositType[];
-    enabledWithdrawalTypes?: WithdrawalType[];
-}
-export declare function TransactionRecords__suspense(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/lib/components/TransactionRecords/TransactionRecords.suspense.js

@@ -1,37 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { Suspense } from 'react';
-import { z } from 'zod';
-import { Tabs } from '../../ui/Tabs/index.js';
-import { DepositRecordsTable } from './DepositRecordsTable.js';
-import { TransactionPropsContext } from './TransactionContext.js';
-import { TransactionRecordsTable } from './TransactionRecordsTable.js';
-import { WithdrawalRecordsTable } from './WithdrawalRecordsTable.js';
-const TabSchema = z
-    .enum(['transactions', 'deposits', 'withdrawals'])
-    .optional()
-    .nullable()
-    .catch('transactions')
-    .transform((v) => v ?? 'transactions');
-export function TransactionRecords__suspense(props) {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const tab = TabSchema.parse(searchParams.get('tab'));
-    const setTab = (value) => {
-        const newSearchParams = new URLSearchParams(searchParams);
-        newSearchParams.set('tab', value);
-        newSearchParams.delete('id');
-        router.push(`${pathname}?${newSearchParams.toString()}`);
-    };
-    // Extract className props for individual tables
-    const classNames = typeof props.className === 'string'
-        ? {
-            transactionRecordsTable: props.className,
-            depositRecordsTable: props.className,
-            withdrawalRecordsTable: props.className
-        }
-        : (props.className ?? {});
-    return (_jsx(TransactionPropsContext, { value: props, children: _jsxs("div", { className: typeof props.className === 'string' ? props.className : undefined, children: [_jsx("h2", { className: "font-semibold text-sm leading-tight lg:text-lg", children: "Transactions" }), _jsx("p", { className: "mt-xs text-sm text-text-tertiary-600 leading-tight", children: "View your transaction records" }), _jsxs(Tabs.Root, { className: "mt-lg lg:mt-2xl", value: tab, onValueChange: (details) => setTab(TabSchema.parse(details.value)), lazyMount: true, unmountOnExit: true, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "transactions", children: "All Transactions" }), _jsx(Tabs.Trigger, { value: "deposits", children: "Deposits" }), _jsx(Tabs.Trigger, { value: "withdrawals", children: "Withdrawals" }), _jsx(Tabs.Indicator, {})] }), _jsx("div", { className: "mt-2xl hidden border-[1.5px] border-border-secondary border-t lg:block" }), _jsx("h3", { className: "mt-3xl font-semibold text-sm text-text-secondary-700", children: "Table" }), _jsx(Tabs.Content, { value: "transactions", className: "mt-xl", children: _jsx(TransactionRecordsTable, { className: classNames.transactionRecordsTable }) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(DepositRecordsTable, { className: classNames.depositRecordsTable }) }) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(WithdrawalRecordsTable, { className: classNames.withdrawalRecordsTable }) }) })] })] }) }));
-}

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

@@ -1,8 +0,0 @@
-interface ClassNameEntries {
-    scrollbarThumb?: string;
-}
-interface TransactionRecordsTableProps {
-    className?: string | ClassNameEntries;
-}
-export declare function TransactionRecordsTable(props: TransactionRecordsTableProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/lib/components/TransactionRecords/TransactionRecordsTable.js

@@ -1,78 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TZDateMini, tz } from '@date-fns/tz';
-import { endOfDay, format, startOfDay } from 'date-fns';
-import { isString } from 'lodash-es';
-import { useReducer } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
-import { useLocaleInfo } from '../../client/hooks/useLocaleInfo.js';
-import { useTransactionRecordsQuery } from '../../client/hooks/useTransactionRecordsQuery.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 { IconButton } from '../../ui/IconButton/index.js';
-import { Table } from '../../ui/Table/index.js';
-import { capitalize } from '../../utils/capitalize.js';
-import { formatNumber } from '../../utils/formatNumber.js';
-import { Empty } from '../shared/Empty.js';
-import { TableFilters } from './TableFilters.js';
-export function TransactionRecordsTable(props) {
-    const [state, setState] = useReducer((prev, next) => ({
-        ...prev,
-        ...next,
-    }), {});
-    const localeInfo = useLocaleInfo();
-    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
-        filter: {
-            ...(state.type && {
-                type: {
-                    equal: state.type,
-                },
-            }),
-            ...(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(),
-                    }),
-                },
-            }),
-        },
-    });
-    const classNames = isString(props.className)
-        ? { scrollbarThumb: props.className }
-        : (props.className ?? {});
-    return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
-                    timestamp: state.timestamp,
-                    transactionType: state.type,
-                }, onChange: (value) => {
-                    setState({
-                        type: value.transactionType,
-                        timestamp: value.timestamp,
-                    });
-                    firstPage();
-                }, enabledFilters: {
-                    transactionType: true,
-                } }), rows.length <= 0 && (_jsx(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 && (_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: twMerge('scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-track:bg-transparent lg:rounded-t-xl', classNames.scrollbarThumb || 'scrollbar-thumb:bg-bg-quaternary'), children: _jsxs(Table.Root, { className: "border-0", children: [_jsx(Table.Header, { children: _jsxs(Table.Row, { children: [_jsx(Table.Heading, { children: "Transaction Type" }), _jsx(Table.Heading, { children: "Transaction Time" }), _jsx(Table.Heading, { children: "Transaction Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Bonus Balance" }), _jsx(Table.Heading, { children: "Reference Number" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
-                                                    delimiter: capitalize.delimiters.UNDERSCORE,
-                                                }) }), _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: formatNumber(data.amount, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBalance, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBonusBalance, {
-                                                    currency: localeInfo.currency.code,
-                                                    minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber })] }, 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: "font-medium text-sm text-text-secondary-700", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
-}

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

@@ -1,8 +0,0 @@
-interface ClassNameEntries {
-    scrollbarThumb?: string;
-}
-interface WithdrawalRecordsTableProps {
-    className?: string | ClassNameEntries;
-}
-export declare function WithdrawalRecordsTable(props: WithdrawalRecordsTableProps): import("react/jsx-runtime").JSX.Element;
-export {};