@opexa/portal-components 0.0.45 → 0.0.47

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { twMerge } from 'tailwind-merge';
 import { useInfiniteQueryHelper, useLocaleInfo, useTransactionRecordsQuery, } from '../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { IconButton, Select, Table } from '../../ui/index.js';
+import { ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { IconButton, Table } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 import { TableFilters } from './TableFilters.js';
 export function TransactionRecordsTable() {
     const [timestamp, setTimestamp] = useState();
     const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useTransactionRecordsQuery, {
         filter: {
             ...(timestamp && {
                 dateTimeCreated: {
@@ -36,7 +35,7 @@ export function TransactionRecordsTable() {
                     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-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("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-b-none border-b lg:rounded-xl", 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: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { className: "!py-1", children: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", 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: "Amount" }), _jsx(Table.Heading, { children: "Current Balance" }), _jsx(Table.Heading, { children: "Reference Number" }), _jsx(Table.Heading, { children: "Content" })] }) }), _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),
@@ -48,16 +47,5 @@ export function TransactionRecordsTable() {
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.currentBalance, {
                                                     currency: localeInfo.currency.code,
                                                     minDecimalPlaces: 2,
-                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.content || '/' })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(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: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(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(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                }) }), _jsx(Table.Cell, { className: "!py-1", children: data.referenceNumber }), _jsx(Table.Cell, { className: "!py-1", children: data.content || '/' })] }, 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: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 { twMerge } from 'tailwind-merge';
 import { useInfiniteQueryHelper, useLocaleInfo, useWithdrawalRecordsQuery, } from '../../client/hooks/index.js';
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
-import { Badge, IconButton, Select, Table } from '../../ui/index.js';
+import { ChevronLeftIcon, ChevronRightIcon, File02Icon, SpinnerIcon, } from '../../icons/index.js';
+import { Badge, IconButton, Table } from '../../ui/index.js';
 import { capitalize, formatNumber } from '../../utils/index.js';
 import { Empty } from '../Empty.js';
 import { TableFilters } from './TableFilters.js';
@@ -14,7 +13,7 @@ export function WithdrawalRecordsTable() {
     const [timestamp, setTimestamp] = useState();
     const [withdrawalStatus, setWithdrawalStatus] = useState();
     const localeInfo = useLocaleInfo();
-    const { page, pageSize, hasNextPage, hasPrevPage, next, prev, rows, setPageSize, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
+    const { page, hasNextPage, hasPrevPage, next, prev, rows, totalPages, loading, firstPage, } = useInfiniteQueryHelper(useWithdrawalRecordsQuery, {
         filter: {
             ...(withdrawalStatus && {
                 status: {
@@ -44,7 +43,7 @@ export function WithdrawalRecordsTable() {
                     setWithdrawalStatus(value.withdrawalStatus);
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest withdrawal records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-3xl', 'border-y', 'border-border-primary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("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", 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" }), _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: capitalize(data.type, {
+                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', 'relative', 'left-1/2', 'right-1/2', '-mx-[50dvw]', 'w-dvw', 'lg:mt-3xl', 'lg:-mx-0', 'lg:-ml-0', 'lg:left-0', 'lg:right-0', 'lg:w-full', 'lg:rounded-xl', 'lg:border-x'), children: [_jsx("div", { className: "border-border-secondary scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent scrollbar:h-2 scrollbar-thumb:rounded-full overflow-hidden overflow-x-auto rounded-none border-b lg:rounded-t-xl", 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" }), _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: capitalize(data.type, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,
@@ -67,16 +66,5 @@ export function WithdrawalRecordsTable() {
                                                             ? 'warning'
                                                             : 'success', children: _jsx(Badge.Label, { children: capitalize(data.status, {
                                                             delimiter: capitalize.delimiters.UNDERSCORE,
-                                                        }) }) }) })] }, data.id))) })] }) }), _jsxs("div", { className: "flex items-center gap-lg px-4 py-3", children: [_jsxs("p", { className: "text-text-secondary-700 order-2 grow text-center text-sm font-medium lg:order-none lg:grow-0", children: ["Page ", page, " of ", totalPages] }), _jsx("div", { className: "hidden grow lg:block" }), _jsx(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: true, className: "hidden lg:block", positioning: {
-                                    sameWidth: true,
-                                }, children: _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) }), _jsx(Portal, { children: _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: pageSizeCollection.items.map((item) => (_jsxs(Select.Item, { item: item, children: [_jsx(Select.ItemText, { children: pageSizeCollection.stringifyItem(item) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, item))) }) }) })] }) }), _jsxs("div", { className: "contents lg:flex", children: [_jsx(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(), children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "sm", variant: "outline", colorScheme: "gray", className: "order-3 lg:order-none lg:rounded-l-none", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] })] }))] }));
+                                                        }) }) }) })] }, 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: "text-text-secondary-700 text-sm font-medium", children: ["Page ", page, " of ", totalPages] }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: !hasNextPage || loading, onClick: () => next(), children: _jsx(ChevronRightIcon, { className: "size-5" }) })] })] }))] }));
 }
-const pageSizeCollection = createListCollection({
-    items: useInfiniteQueryHelper.config.pageSizes,
-    itemToValue: (item) => item.toString(),
-    itemToString: (item) => `${item} items per page`,
-});

package/dist/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './Account';
 export * from './AccountInfo';
-export * from './AccountPaymentMethods';
 export * from './AccountSecurity';
 export * from './AccountVerification';
 export * from './Banner';

package/dist/components/index.js

@@ -1,6 +1,5 @@
 export * from './Account/index.js';
 export * from './AccountInfo/index.js';
-export * from './AccountPaymentMethods/index.js';
 export * from './AccountSecurity/index.js';
 export * from './AccountVerification/index.js';
 export * from './Banner/index.js';

package/dist/styles/theme.css

@@ -35,8 +35,7 @@
   input::-webkit-search-cancel-button,
   input::-webkit-search-decoration,
   input::-webkit-search-results-button,
-  input::-webkit-search-results-decoration,
-  input::-webkit-calendar-picker-indicator {
+  input::-webkit-search-results-decoration {
     display: none;
   }
 
@@ -212,6 +211,7 @@
   --color-bg-brand-secondary: #ca8504;
   --color-bg-brand-secondary-alt: #22262f;
   --color-bg-secondary: #13161b;
+  --color-bg-secondary-alt: #0c0e12;
   --color-bg-tertiary: #22262f;
   --color-bg-quaternary: #373a41;
   --color-bg-active: #22262f;