@opexa/portal-components 0.0.51 → 0.0.53
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/BetRecords/BetRecords.js +1 -1
- package/dist/components/GamesSearch/GamesSearch.js +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.d.ts +1 -1
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuest.js +9 -9
- package/dist/components/Quests/DailyCheckInQuest/DailyCheckInQuestModal.js +1 -1
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.d.ts +4 -0
- package/dist/components/Quests/OnboardingQuest/OnboardingQuest.js +4 -0
- package/dist/components/Quests/Quests.d.ts +6 -1
- package/dist/components/Quests/Quests.js +7 -10
- package/dist/components/Quests/WageringQuest/WageringQuest.d.ts +1 -1
- package/dist/components/Quests/WageringQuest/WageringQuest.js +5 -4
- package/dist/components/Quests/WageringQuest/WageringQuestModal.js +1 -1
- package/dist/components/TransactionRecords/DepositRecordsTable.js +1 -1
- package/dist/components/TransactionRecords/TransactionRecordsTable.js +1 -1
- package/dist/components/TransactionRecords/WithdrawalRecordsTable.js +1 -1
- package/dist/styles/theme.css +18 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -134,7 +134,7 @@ export function BetRecords(props) {
|
|
|
134
134
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
135
135
|
}) }), _jsx(Select.ItemIndicator, { asChild: true, children: _jsx(CheckIcon, {}) })] }, status))) }) }) }) })] })] }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
136
136
|
? 'Fetching latest bet records...'
|
|
137
|
-
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', '
|
|
137
|
+
: '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: "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: "Bet Time" }), _jsx(Table.Heading, { children: "Settlement Time" }), _jsx(Table.Heading, { children: "Bet Content" }), _jsx(Table.Heading, { children: "Odds" }), _jsx(Table.Heading, { children: "Bet Amount" }), _jsx(Table.Heading, { children: "Valid Bet" }), _jsx(Table.Heading, { children: "Settled Amount" }), _jsx(Table.Heading, { children: "Jackpot Contribution" }), _jsx(Table.Heading, { children: "Jackpot Payout" }), _jsx(Table.Heading, { children: "Bet Status" }), _jsx(Table.Heading, { children: "Game Name" }), _jsx(Table.Heading, { children: "Vendor Round ID" })] }) }), _jsx(Table.Body, { children: rows.map((data) => (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
|
|
138
138
|
in: tz(localeInfo.timezone),
|
|
139
139
|
}) }), _jsx("div", { className: "text-text-tertiary-600 leading-tight", children: format(data.dateTimeCreated, 'hh:mm a', {
|
|
140
140
|
in: tz(localeInfo.timezone),
|
|
@@ -29,7 +29,7 @@ export function GamesSearch(props) {
|
|
|
29
29
|
placement: 'bottom',
|
|
30
30
|
}, inputValue: search, onInputValueChange: (details) => {
|
|
31
31
|
setSearch(details.inputValue);
|
|
32
|
-
}, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { children: [_jsx(Combobox.Input, {}), _jsx(Combobox.Context, { children: (api) => {
|
|
32
|
+
}, selectionBehavior: "preserve", allowCustomValue: true, children: [_jsxs(Combobox.Control, { children: [_jsx(Combobox.Input, { placeholder: "Search" }), _jsx(Combobox.Context, { children: (api) => {
|
|
33
33
|
if (api.inputValue.length <= 0)
|
|
34
34
|
return null;
|
|
35
35
|
return (_jsx("span", { className: "text-text-secondary-700 px-3.5 font-semibold", tabIndex: 0, onClick: () => {
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { addDays, isEqual, startOfDay } from 'date-fns';
|
|
3
4
|
import { useState } from 'react';
|
|
4
5
|
import { twMerge } from 'tailwind-merge';
|
|
5
|
-
import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
|
|
6
|
-
import { Button } from '../../../ui/index.js';
|
|
7
|
-
import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
|
|
8
|
-
import CountdownTimer from '../CountdownTimer.js';
|
|
9
|
-
import { addDays, isEqual, startOfDay } from 'date-fns';
|
|
10
|
-
import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
|
|
11
6
|
import { useCheckInDailyCheckInQuestMutation } from '../../../client/hooks/index.js';
|
|
12
7
|
import { toaster } from '../../../client/utils/index.js';
|
|
13
|
-
|
|
8
|
+
import { CalendarIcon, CheckIcon, ClockStopWatchIcon, InfoCircleIcon, } from '../../../icons/index.js';
|
|
9
|
+
import { Badge, Button } from '../../../ui/index.js';
|
|
10
|
+
import { getAvailableQuestsQueryKey, getQueryClient } from '../../../utils/index.js';
|
|
11
|
+
import CountdownTimer from '../CountdownTimer.js';
|
|
12
|
+
import { DailyCheckInQuestModal } from './DailyCheckInQuestModal.js';
|
|
13
|
+
export function DailyCheckInQuest({ quest }) {
|
|
14
14
|
const queryClient = getQueryClient();
|
|
15
15
|
const [showRules, setShowRules] = useState(false);
|
|
16
16
|
const [isExpired, setIsExpired] = useState(false);
|
|
@@ -52,7 +52,7 @@ export default function DailyCheckInQuest({ quest }) {
|
|
|
52
52
|
return (_jsxs(_Fragment, { children: [_jsx(DailyCheckInQuestModal, { modalState: {
|
|
53
53
|
isOpen: showRules,
|
|
54
54
|
setIsOpen: setShowRules,
|
|
55
|
-
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full
|
|
55
|
+
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsx("div", { className: "grid grid-cols-7", children: dailyCheckedInData.map((item) => {
|
|
56
56
|
const reward = item.reward ? `+₱${item.reward}` : '-';
|
|
57
57
|
return (_jsx("div", { className: twMerge('flex items-center justify-center', item.day <= (checkInStreak || 0)
|
|
58
58
|
? 'text-brand-400'
|
|
@@ -69,5 +69,5 @@ export default function DailyCheckInQuest({ quest }) {
|
|
|
69
69
|
function CalendarWithDayNumber({ day, currentCheckedInDays, }) {
|
|
70
70
|
return (_jsxs("div", { className: twMerge('group relative h-fit w-fit', day <= currentCheckedInDays
|
|
71
71
|
? 'text-brand-400'
|
|
72
|
-
: 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-
|
|
72
|
+
: 'text-text-secondary-700'), children: [_jsx(CalendarIcon, {}), _jsx("div", { className: "absolute inset-0 mt-1 flex items-center justify-center text-2xs lg:mt-[2px]", children: _jsx("p", { className: "text-center", children: day }) })] }));
|
|
73
73
|
}
|
|
@@ -4,5 +4,5 @@ import { Portal } from '@ark-ui/react';
|
|
|
4
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
5
|
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function DailyCheckInQuestModal(props) {
|
|
7
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-
|
|
7
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: "Daily Check-In Rules" }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn rewards just for checking in each day!" }), _jsx("li", { children: "Stay consistent to unlock special rewards on the 3rd, 5th, and 7th day." }), _jsx("li", { children: "Missing a day will reset your streak, starting again from Day 1." }), _jsx("li", { children: "Each check-in unlocks the next one on the following day." }), _jsx("li", { children: "Successfully check in for 7 consecutive days to complete the quest and reset the cycle." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|
|
@@ -1 +1,6 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface QuestsProps {
|
|
2
|
+
/** @default "Quests" */
|
|
3
|
+
heading?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function Quests(props: QuestsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,26 +4,23 @@ import Image from 'next/image';
|
|
|
4
4
|
import { useAvailableQuestsQuery } from '../../client/hooks/index.js';
|
|
5
5
|
import { SpinnerIcon } from '../../icons/index.js';
|
|
6
6
|
import closeChest from '../../images/close-chest.png';
|
|
7
|
-
import DailyCheckInQuest from './DailyCheckInQuest/DailyCheckInQuest.js';
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
console.log('OnboardingQuest not implemented', props.quest);
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
7
|
+
import { DailyCheckInQuest } from './DailyCheckInQuest/DailyCheckInQuest.js';
|
|
8
|
+
import { OnboardingQuest } from './OnboardingQuest/OnboardingQuest.js';
|
|
9
|
+
import { WageringQuest } from './WageringQuest/WageringQuest.js';
|
|
13
10
|
const QUEST_COMPONENT_MAP = {
|
|
14
11
|
DAILY_CHECKIN: DailyCheckInQuest,
|
|
15
12
|
ONBOARDING: OnboardingQuest,
|
|
16
13
|
WAGERING: WageringQuest,
|
|
17
14
|
};
|
|
18
|
-
export function Quests() {
|
|
15
|
+
export function Quests(props) {
|
|
19
16
|
const query = useAvailableQuestsQuery();
|
|
20
17
|
if (query.isLoading) {
|
|
21
|
-
return (_jsxs("div", { className:
|
|
18
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx(SpinnerIcon, { className: "mx-auto size-5 h-[50vh]" })] }));
|
|
22
19
|
}
|
|
23
20
|
if (!query.data?.length) {
|
|
24
|
-
return (_jsxs("div", { className:
|
|
21
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsxs("div", { className: "mt-11 flex flex-col items-center justify-center", children: [_jsx(Image, { src: closeChest, width: 100, height: 100, alt: "No Quests Available", className: "mix-blend-luminosity", quality: 100 }), _jsx("div", { className: "text-text-primary-900 mt-4 text-base font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "text-text-tertiary-600 mt-1 text-center text-sm", children: "No available quests. Please check back later!" })] })] }));
|
|
25
22
|
}
|
|
26
|
-
return (_jsxs("div", { className:
|
|
23
|
+
return (_jsxs("div", { className: props.className, children: [_jsx("h3", { className: "mb-3 text-lg font-semibold", children: props.heading ?? 'Quests' }), _jsx("div", { className: "grid grid-cols-1 gap-3xl lg:grid-cols-3", children: query.data.map((quest, index) => {
|
|
27
24
|
const QuestComponent = QUEST_COMPONENT_MAP[quest.type];
|
|
28
25
|
return _jsx(QuestComponent, { quest: quest }, index);
|
|
29
26
|
}) })] }));
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
5
|
import { ClockStopWatchIcon, InfoCircleIcon } from '../../../icons/index.js';
|
|
5
|
-
import {
|
|
6
|
+
import { Badge } from '../../../ui/index.js';
|
|
6
7
|
import CountdownTimer from '../CountdownTimer.js';
|
|
7
|
-
import {
|
|
8
|
-
export
|
|
8
|
+
import { WageringQuestModal } from './WageringQuestModal.js';
|
|
9
|
+
export function WageringQuest({ quest }) {
|
|
9
10
|
const [showRules, setShowRules] = useState(false);
|
|
10
11
|
const [isExpired, setIsExpired] = useState(false);
|
|
11
12
|
const { progressPercentage, turnover, targetTurnover, name, description, endDateTime, bonus, status, } = quest;
|
|
12
13
|
return (_jsxs(_Fragment, { children: [_jsx(WageringQuestModal, { questName: name, modalState: {
|
|
13
14
|
isOpen: showRules,
|
|
14
15
|
setIsOpen: setShowRules,
|
|
15
|
-
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full
|
|
16
|
+
} }), _jsxs("div", { className: "border-border-primary bg-bg-tertiary flex h-full w-full flex-col space-y-6 rounded-2xl border px-4 pb-6 pt-5", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsxs("div", { className: "flex max-h-7.5 items-start justify-between", children: [_jsx(CountdownTimer, { endDateTime: endDateTime, renderAction: (timeLeft) => (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsxs(Badge.Label, { children: [timeLeft.days, "d:", timeLeft.hours, "h:", timeLeft.minutes, "m:", timeLeft.seconds, "s"] })] })), onEnd: () => setIsExpired(true) }), _jsx("div", { role: "button", className: "bg-bg-primary border-border-secondary flex size-9 cursor-pointer items-center justify-center rounded-md border", onClick: () => setShowRules((prev) => !prev), children: _jsx(InfoCircleIcon, { className: "text-text-disabled size-5" }) })] }), _jsx("p", { className: "text-xl font-semibold", children: name }), _jsx("p", { className: "text-text-secondary-700 text-wrap text-sm font-normal", dangerouslySetInnerHTML: { __html: description } })] }), _jsxs("div", { className: "flex w-full flex-col space-y-2", children: [_jsxs("div", { className: "text-text-primary-brand group flex items-center justify-between", children: [_jsxs("p", { children: ["Progress ", parseInt(progressPercentage).toFixed(2), "%"] }), _jsxs("p", { children: [turnover, _jsxs("span", { className: "text-text-quarterary-brand", children: ["/", targetTurnover, " PHP"] })] })] }), _jsx("div", { className: "bg-bg-primary h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "bg-utility-brand-600 h-full rounded-full transition-all duration-300", style: { width: `${progressPercentage}%` } }) })] }), _jsx("div", { className: "flex h-full items-end", children: _jsx("div", { className: "bg-button-secondary-bg border-bg-primary-hover w-full rounded-md border px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { className: twMerge(isExpired || status === 'COMPLETED' || status === 'FAILED'
|
|
16
17
|
? ['opacity-50 grayscale']
|
|
17
18
|
: ''), children: ["Complete to get ", _jsxs("span", { className: "text-brand-400", children: ["\u20B1", bonus] }), ' ', "bonus!"] }) }) })] })] }));
|
|
18
19
|
}
|
|
@@ -4,5 +4,5 @@ import { Portal } from '@ark-ui/react';
|
|
|
4
4
|
import { XIcon } from '../../../icons/index.js';
|
|
5
5
|
import { Button, Dialog } from '../../../ui/index.js';
|
|
6
6
|
export function WageringQuestModal(props) {
|
|
7
|
-
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-
|
|
7
|
+
return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: props.modalState.isOpen, onOpenChange: ({ open }) => props.modalState.setIsOpen(open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "min-h-auto mx-auto max-w-[343px] rounded-xl px-4 pb-0 pt-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "flex flex-col space-y-5", children: [_jsx("p", { className: "text-text-primary-900 text-lg font-semibold", children: props.questName }), _jsxs("ul", { className: "text-text-tertiary-600 group list-disc text-wrap pl-4 text-sm font-normal", children: [_jsx("li", { children: "Earn extra rewards just by playing Slots, every bet counts, win or lose!" }), _jsx("li", { children: "Reach the wagering requirement in bets to complete the quest and claim your reward." })] })] }), _jsx("div", { className: "pb-4 pt-6", children: _jsx(Button, { onClick: () => props.modalState.setIsOpen(false), children: "Ok" }) })] }) })] }) }));
|
|
8
8
|
}
|
|
@@ -44,7 +44,7 @@ export function DepositRecordsTable() {
|
|
|
44
44
|
setDepositStatus(value.depositStatus);
|
|
45
45
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
46
46
|
? 'Fetching latest deposit records...'
|
|
47
|
-
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', '
|
|
47
|
+
: '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: "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: "Deposit No." }), _jsx(Table.Heading, { children: "Reference" }), _jsx(Table.Heading, { children: "Deposit Method" }), _jsx(Table.Heading, { children: "Applied Amount" }), _jsx(Table.Heading, { children: "Recieved Amount" }), _jsx(Table.Heading, { children: "Transaction Fee" }), _jsx(Table.Heading, { children: "Deposit Time" }), _jsx(Table.Heading, { children: "Recieved 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, {
|
|
48
48
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
49
49
|
}) }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
|
|
50
50
|
currency: localeInfo.currency.code,
|
|
@@ -35,7 +35,7 @@ export function TransactionRecordsTable() {
|
|
|
35
35
|
transactionType: true,
|
|
36
36
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
37
37
|
? 'Fetching latest transaction records...'
|
|
38
|
-
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', '
|
|
38
|
+
: '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: "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, {
|
|
39
39
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
40
40
|
}) }), _jsxs(Table.Cell, { className: "!py-1", children: [_jsx("div", { className: "leading-tight", children: format(data.dateTimeCreated, 'MM/dd/yyyy', {
|
|
41
41
|
in: tz(localeInfo.timezone),
|
|
@@ -43,7 +43,7 @@ export function WithdrawalRecordsTable() {
|
|
|
43
43
|
setWithdrawalStatus(value.withdrawalStatus);
|
|
44
44
|
} }), rows.length <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : File02Icon, title: loading ? 'Just a moment' : 'No data', message: loading
|
|
45
45
|
? 'Fetching latest withdrawal records...'
|
|
46
|
-
: 'No data is currently available.', className: "mt-5xl" })), rows.length >= 1 && (_jsxs("div", { className: twMerge('mt-xl', 'border-y', 'border-border-secondary', '
|
|
46
|
+
: '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: "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, {
|
|
47
47
|
delimiter: capitalize.delimiters.UNDERSCORE,
|
|
48
48
|
}) }), _jsx(Table.Cell, { className: "!py-1", children: data.recipientMobileNumber }), _jsx(Table.Cell, { className: "!py-1", children: formatNumber(data.amount, {
|
|
49
49
|
currency: localeInfo.currency.code,
|
package/dist/styles/theme.css
CHANGED
|
@@ -668,6 +668,24 @@
|
|
|
668
668
|
--arrow-size: --value([\*]);
|
|
669
669
|
}
|
|
670
670
|
|
|
671
|
+
@utility bleed {
|
|
672
|
+
position: relative;
|
|
673
|
+
width: 100dvw;
|
|
674
|
+
left: 50%;
|
|
675
|
+
right: 50%;
|
|
676
|
+
margin-left: -50dvw;
|
|
677
|
+
margin-right: -50dvw;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
@utility not-bleed {
|
|
681
|
+
position: relative;
|
|
682
|
+
width: auto;
|
|
683
|
+
left: auto;
|
|
684
|
+
right: auto;
|
|
685
|
+
margin-left: 0;
|
|
686
|
+
margin-right: 0;
|
|
687
|
+
}
|
|
688
|
+
|
|
671
689
|
@custom-variant icon (& svg);
|
|
672
690
|
@custom-variant tr (& tr);
|
|
673
691
|
@custom-variant td (& td);
|