@opexa/portal-components 0.0.567 → 0.0.569

package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-bg-tertiary);
-  --second: var(--color-bg-quaternary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-bg-primary-alt);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-bg-quaternary);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-bg-tertiary);
+  --second: var(--color-bg-quaternary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-bg-primary-alt);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-quaternary);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

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

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

package/dist/components/TransactionRecords/DepositRecordsTable.js

@@ -2,6 +2,7 @@
 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 { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useReducer } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -20,7 +21,7 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { Empty } from '../shared/Empty.js';
 import { TableFilters } from './TableFilters.js';
 import { useTransactionPropsContext } from './TransactionContext.js';
-export function DepositRecordsTable() {
+export function DepositRecordsTable(props) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -68,6 +69,9 @@ export function DepositRecordsTable() {
             }),
         },
     });
+    const classNames = isString(props.className)
+        ? { scrollbarThumb: props.className }
+        : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
                     timestamp: state.timestamp,
                     depositType: state.type,
@@ -89,7 +93,7 @@ export function DepositRecordsTable() {
                     depositStatus: true,
                 } }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
                     ? 'Fetching latest deposit records...'
-                    : 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_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: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent lg:rounded-t-xl", 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, {
+                    : '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, {
                                                     delimiter: capitalize.delimiters.UNDERSCORE,
                                                 }) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
                                                     currency: localeInfo.currency.code,

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

@@ -1,7 +1,19 @@
 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;
+    className?: string | ClassNameEntries;
     enabledDepositTypes?: DepositType[];
     enabledWithdrawalTypes?: WithdrawalType[];
 }
 export declare function TransactionRecords__suspense(props: TransactionRecordsProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -25,5 +25,13 @@ export function TransactionRecords__suspense(props) {
         newSearchParams.delete('id');
         router.push(`${pathname}?${newSearchParams.toString()}`);
     };
-    return (_jsx(TransactionPropsContext, { value: props, children: _jsxs("div", { className: props.className, 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, {}) }), _jsx(Tabs.Content, { value: "deposits", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(DepositRecordsTable, {}) }) }), _jsx(Tabs.Content, { value: "withdrawals", className: "mt-xl", children: _jsx(Suspense, { fallback: null, children: _jsx(WithdrawalRecordsTable, {}) }) })] })] }) }));
+    // 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/components/TransactionRecords/TransactionRecordsTable.d.ts

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

package/dist/components/TransactionRecords/TransactionRecordsTable.js

@@ -2,6 +2,7 @@
 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';
@@ -17,7 +18,7 @@ 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() {
+export function TransactionRecordsTable(props) {
     const [state, setState] = useReducer((prev, next) => ({
         ...prev,
         ...next,
@@ -42,6 +43,9 @@ export function TransactionRecordsTable() {
             }),
         },
     });
+    const classNames = isString(props.className)
+        ? { scrollbarThumb: props.className }
+        : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
                     timestamp: state.timestamp,
                     transactionType: state.type,
@@ -55,7 +59,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-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: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent 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: "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, {
+                    : '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),

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

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

package/dist/components/TransactionRecords/WithdrawalRecordsTable.js

@@ -2,6 +2,7 @@
 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 { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useReducer } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -20,7 +21,7 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { Empty } from '../shared/Empty.js';
 import { TableFilters } from './TableFilters.js';
 import { useTransactionPropsContext } from './TransactionContext.js';
-export function WithdrawalRecordsTable() {
+export function WithdrawalRecordsTable(props) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -68,6 +69,9 @@ export function WithdrawalRecordsTable() {
             }),
         },
     });
+    const classNames = isString(props.className)
+        ? { scrollbarThumb: props.className }
+        : (props.className ?? {});
     return (_jsxs(_Fragment, { children: [_jsx(TableFilters, { value: {
                     timestamp: state.timestamp,
                     withdrawalType: state.type,
@@ -89,7 +93,7 @@ export function WithdrawalRecordsTable() {
                     withdrawalStatus: true,
                 } }), 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-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: "scrollbar:h-2 overflow-hidden overflow-x-auto rounded-none scrollbar-thumb:rounded-full border-border-secondary border-b scrollbar-thumb:bg-bg-quaternary scrollbar-track:bg-transparent 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 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' ||
+                    : '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' ||
                                                     (data.type === 'PISO_PAY_REMITTANCE' && data.accountName)
                                                     ? data.accountName
                                                     : '' }), _jsx(Table.Cell, { className: "!py-1 text-right", children: capitalize(data.type, {

package/dist/handlers/index.d.ts

@@ -6,26 +6,26 @@ interface Context {
     params: Promise<Params>;
 }
 export declare const GET: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
-    ok: true;
-    data?: never;
-} | {
     ok: false;
     message: string;
     __error?: unknown;
+} | {
+    ok: true;
+    data: import("../types").Session;
 }> | NextResponse<{
+    ok: true;
+    data?: never;
+} | {
     ok: false;
     message: string;
     __error?: unknown;
-} | {
-    ok: true;
-    data: Record<string, unknown>;
 }> | NextResponse<{
     ok: false;
     message: string;
     __error?: unknown;
 } | {
     ok: true;
-    data: import("../types").Session;
+    data: Record<string, unknown>;
 }>>;
 export declare const DELETE: (req: NextRequest, { params }: Context) => Promise<NextResponse<{
     ok: true;

package/dist/icons/LinkBrokenIcon.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentPropsWithRef } from 'react';
+export declare function LinkBrokenIcon(props: ComponentPropsWithRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/LinkBrokenIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LinkBrokenIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, children: _jsx("path", { d: "M8.5 15.5L15.5 8.49998M9 4V2M15 20V22M4 9H2M20 15H22M4.91421 4.91421L3.5 3.5M19.0858 19.0857L20.5 20.4999M12 17.6568L9.87871 19.7781C8.31662 21.3402 5.78396 21.3402 4.22186 19.7781C2.65976 18.216 2.65976 15.6833 4.22186 14.1212L6.34318 11.9999M17.6569 11.9999L19.7782 9.87859C21.3403 8.31649 21.3403 5.78383 19.7782 4.22174C18.2161 2.65964 15.6835 2.65964 14.1214 4.22174L12 6.34306", stroke: "#FEDF89", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}