@opexa/portal-components 0.0.567 → 0.0.568
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/TransactionRecords/DepositRecordsTable.d.ts +8 -1
- package/dist/components/TransactionRecords/DepositRecordsTable.js +6 -2
- package/dist/components/TransactionRecords/TransactionRecords.suspense.d.ts +13 -1
- package/dist/components/TransactionRecords/TransactionRecords.suspense.js +9 -1
- package/dist/components/TransactionRecords/TransactionRecordsTable.d.ts +8 -1
- package/dist/components/TransactionRecords/TransactionRecordsTable.js +6 -2
- package/dist/components/TransactionRecords/WithdrawalRecordsTable.d.ts +8 -1
- package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +6 -2
- package/package.json +1 -1
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
interface ClassNameEntries {
|
|
2
|
+
scrollbarThumb?: string;
|
|
3
|
+
}
|
|
4
|
+
interface DepositRecordsTableProps {
|
|
5
|
+
className?: string | ClassNameEntries;
|
|
6
|
+
}
|
|
7
|
+
export declare function DepositRecordsTable(props: DepositRecordsTableProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { TZDateMini, tz } from '@date-fns/tz';
|
|
4
4
|
import { endOfDay, format, startOfDay } from 'date-fns';
|
|
5
|
+
import { isString } from 'lodash-es';
|
|
5
6
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
|
6
7
|
import { useReducer } from 'react';
|
|
7
8
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -20,7 +21,7 @@ import { formatNumber } from '../../utils/formatNumber.js';
|
|
|
20
21
|
import { Empty } from '../shared/Empty.js';
|
|
21
22
|
import { TableFilters } from './TableFilters.js';
|
|
22
23
|
import { useTransactionPropsContext } from './TransactionContext.js';
|
|
23
|
-
export function DepositRecordsTable() {
|
|
24
|
+
export function DepositRecordsTable(props) {
|
|
24
25
|
const router = useRouter();
|
|
25
26
|
const pathname = usePathname();
|
|
26
27
|
const searchParams = useSearchParams();
|
|
@@ -68,6 +69,9 @@ export function DepositRecordsTable() {
|
|
|
68
69
|
}),
|
|
69
70
|
},
|
|
70
71
|
});
|
|
72
|
+
const classNames = isString(props.className)
|
|
73
|
+
? { scrollbarThumb: props.className }
|
|
74
|
+
: (props.className ?? {});
|
|
71
75
|
return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
|
|
72
76
|
timestamp: state.timestamp,
|
|
73
77
|
depositType: state.type,
|
|
@@ -89,7 +93,7 @@ export function DepositRecordsTable() {
|
|
|
89
93
|
depositStatus: true,
|
|
90
94
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
91
95
|
? 'Fetching latest deposit records...'
|
|
92
|
-
: '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:
|
|
96
|
+
: '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: "Deposit No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Received Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Received Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.depositNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
|
|
93
97
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
94
98
|
}) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
|
|
95
99
|
currency: localeInfo.currency.code,
|
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
import type { DepositType, WithdrawalType } from '../../types';
|
|
2
|
+
interface ClassNameEntries {
|
|
3
|
+
transactionRecordsTable?: string | {
|
|
4
|
+
scrollbarThumb?: string;
|
|
5
|
+
};
|
|
6
|
+
depositRecordsTable?: string | {
|
|
7
|
+
scrollbarThumb?: string;
|
|
8
|
+
};
|
|
9
|
+
withdrawalRecordsTable?: string | {
|
|
10
|
+
scrollbarThumb?: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
2
13
|
export interface TransactionRecordsProps {
|
|
3
|
-
className?: string;
|
|
14
|
+
className?: string | ClassNameEntries;
|
|
4
15
|
enabledDepositTypes?: DepositType[];
|
|
5
16
|
enabledWithdrawalTypes?: WithdrawalType[];
|
|
6
17
|
}
|
|
7
18
|
export declare function TransactionRecords__suspense(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -25,5 +25,13 @@ export function TransactionRecords__suspense(props) {
|
|
|
25
25
|
newSearchParams.delete('id');
|
|
26
26
|
router.push(`${pathname}?${newSearchParams.toString()}`);
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
// Extract className props for individual tables
|
|
29
|
+
const classNames = typeof props.className === 'string'
|
|
30
|
+
? {
|
|
31
|
+
transactionRecordsTable: props.className,
|
|
32
|
+
depositRecordsTable: props.className,
|
|
33
|
+
withdrawalRecordsTable: props.className
|
|
34
|
+
}
|
|
35
|
+
: (props.className ?? {});
|
|
36
|
+
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 }) }) })] })] }) }));
|
|
29
37
|
}
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
interface ClassNameEntries {
|
|
2
|
+
scrollbarThumb?: string;
|
|
3
|
+
}
|
|
4
|
+
interface TransactionRecordsTableProps {
|
|
5
|
+
className?: string | ClassNameEntries;
|
|
6
|
+
}
|
|
7
|
+
export declare function TransactionRecordsTable(props: TransactionRecordsTableProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { TZDateMini, tz } from '@date-fns/tz';
|
|
4
4
|
import { endOfDay, format, startOfDay } from 'date-fns';
|
|
5
|
+
import { isString } from 'lodash-es';
|
|
5
6
|
import { useReducer } from 'react';
|
|
6
7
|
import { twMerge } from 'tailwind-merge';
|
|
7
8
|
import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
|
|
@@ -17,7 +18,7 @@ import { capitalize } from '../../utils/capitalize.js';
|
|
|
17
18
|
import { formatNumber } from '../../utils/formatNumber.js';
|
|
18
19
|
import { Empty } from '../shared/Empty.js';
|
|
19
20
|
import { TableFilters } from './TableFilters.js';
|
|
20
|
-
export function TransactionRecordsTable() {
|
|
21
|
+
export function TransactionRecordsTable(props) {
|
|
21
22
|
const [state, setState] = useReducer((prev, next) => ({
|
|
22
23
|
...prev,
|
|
23
24
|
...next,
|
|
@@ -42,6 +43,9 @@ export function TransactionRecordsTable() {
|
|
|
42
43
|
}),
|
|
43
44
|
},
|
|
44
45
|
});
|
|
46
|
+
const classNames = isString(props.className)
|
|
47
|
+
? { scrollbarThumb: props.className }
|
|
48
|
+
: (props.className ?? {});
|
|
45
49
|
return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
|
|
46
50
|
timestamp: state.timestamp,
|
|
47
51
|
transactionType: state.type,
|
|
@@ -55,7 +59,7 @@ export function TransactionRecordsTable() {
|
|
|
55
59
|
transactionType: true,
|
|
56
60
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
57
61
|
? 'Fetching latest transaction records...'
|
|
58
|
-
: '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:
|
|
62
|
+
: '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, {
|
|
59
63
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
60
64
|
}) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
|
|
61
65
|
in: tz(localeInfo.timezone),
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
interface ClassNameEntries {
|
|
2
|
+
scrollbarThumb?: string;
|
|
3
|
+
}
|
|
4
|
+
interface WithdrawalRecordsTableProps {
|
|
5
|
+
className?: string | ClassNameEntries;
|
|
6
|
+
}
|
|
7
|
+
export declare function WithdrawalRecordsTable(props: WithdrawalRecordsTableProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { TZDateMini, tz } from '@date-fns/tz';
|
|
4
4
|
import { endOfDay, format, startOfDay } from 'date-fns';
|
|
5
|
+
import { isString } from 'lodash-es';
|
|
5
6
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
|
|
6
7
|
import { useReducer } from 'react';
|
|
7
8
|
import { twMerge } from 'tailwind-merge';
|
|
@@ -20,7 +21,7 @@ import { formatNumber } from '../../utils/formatNumber.js';
|
|
|
20
21
|
import { Empty } from '../shared/Empty.js';
|
|
21
22
|
import { TableFilters } from './TableFilters.js';
|
|
22
23
|
import { useTransactionPropsContext } from './TransactionContext.js';
|
|
23
|
-
export function WithdrawalRecordsTable() {
|
|
24
|
+
export function WithdrawalRecordsTable(props) {
|
|
24
25
|
const router = useRouter();
|
|
25
26
|
const pathname = usePathname();
|
|
26
27
|
const searchParams = useSearchParams();
|
|
@@ -68,6 +69,9 @@ export function WithdrawalRecordsTable() {
|
|
|
68
69
|
}),
|
|
69
70
|
},
|
|
70
71
|
});
|
|
72
|
+
const classNames = isString(props.className)
|
|
73
|
+
? { scrollbarThumb: props.className }
|
|
74
|
+
: (props.className ?? {});
|
|
71
75
|
return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
|
|
72
76
|
timestamp: state.timestamp,
|
|
73
77
|
withdrawalType: state.type,
|
|
@@ -89,7 +93,7 @@ export function WithdrawalRecordsTable() {
|
|
|
89
93
|
withdrawalStatus: true,
|
|
90
94
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
91
95
|
? 'Fetching latest withdrawal records...'
|
|
92
|
-
: '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:
|
|
96
|
+
: '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: "Withdrawal No." }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Account Name" }), _jsx(Table.Heading, { children: "Withdrawal Method" }), _jsx(Table.Heading, { children: "Mobile Number" }), _jsx(Table.Heading, { children: "Withdrawal Amount" }), _jsx(Table.Heading, { children: "Net Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Bank Name" }), _jsx(Table.Heading, { children: "Withdrawal Time" }), _jsx(Table.Heading, { children: "Status" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: data.withdrawalNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.reference }), _jsx(Table.Cell, { className: "!py-1", children: data.type === 'INSTAPAY' ||
|
|
93
97
|
(data.type === 'PISO_PAY_REMITTANCE' && data.accountName)
|
|
94
98
|
? data.accountName
|
|
95
99
|
: '' }), _jsx(Table.Cell, { className: "!py-1 text-right", children: capitalize(data.type, {
|