transactions
This commit is contained in:
@@ -1,17 +1,55 @@
|
||||
import { DataTableDemo } from '@/components/ui/datatable'
|
||||
'use client';
|
||||
import { ef } from '@/lib/helpers/utfNumbers'
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
MoneyRecive,
|
||||
MoneySend,
|
||||
Wallet
|
||||
} from 'iconsax-react'
|
||||
import React from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useGetTransactions, useGetUserWallet } from './hooks/useTransactionData';
|
||||
import { Transaction } from './types/Types';
|
||||
import { TransactionsTable } from './components/TransactionsTable';
|
||||
import LoadingOverlay from '@/components/overlays/LoadingOverlay';
|
||||
|
||||
function TransactionsReviewIndex() {
|
||||
const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();
|
||||
const { data: walletResponse, isLoading: isLoadingWallet } = useGetUserWallet();
|
||||
|
||||
const transactions = transactionsResponse?.data || [];
|
||||
const walletAmount = walletResponse?.data?.wallet || 0;
|
||||
|
||||
const stats = useMemo(() => {
|
||||
if (!transactions.length) {
|
||||
return {
|
||||
totalDeposits: 0,
|
||||
totalWithdrawals: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const deposits = transactions
|
||||
.filter((t: Transaction) => t.status === 'SUCCESS' && t.amount > 0)
|
||||
.reduce((sum: number, t: Transaction) => sum + t.amount, 0);
|
||||
|
||||
const withdrawals = transactions
|
||||
.filter((t: Transaction) => t.status === 'SUCCESS' && t.amount < 0)
|
||||
.reduce((sum: number, t: Transaction) => sum + Math.abs(t.amount), 0);
|
||||
|
||||
return {
|
||||
totalDeposits: deposits,
|
||||
totalWithdrawals: withdrawals,
|
||||
};
|
||||
}, [transactions]);
|
||||
|
||||
const formatPrice = (amount: number) => {
|
||||
return ef(amount.toLocaleString('fa-IR'));
|
||||
};
|
||||
|
||||
const isLoading = isLoadingTransactions || isLoadingWallet;
|
||||
|
||||
return (
|
||||
<section className='flex flex-col h-full pb-10 pt-6 gap-4'>
|
||||
<section className='flex flex-col h-full pb-10 pt-6 gap-4 relative'>
|
||||
{isLoading && <LoadingOverlay />}
|
||||
|
||||
<h1 className='font-medium text-base'>لیست تراکنش ها</h1>
|
||||
|
||||
<div className='grid grid-cols-3 gap-2 h-28'>
|
||||
@@ -24,17 +62,10 @@ function TransactionsReviewIndex() {
|
||||
</div>
|
||||
<span className='text-xs2 pt-1'>مجموع واریز ها</span>
|
||||
<span className='text-xs font-medium mt-1 mb-0.5'>
|
||||
{ef('140,000,000 ریال')}
|
||||
</span>
|
||||
<span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
|
||||
<ArrowRight
|
||||
size={10}
|
||||
className='stroke-green-600 mb-0.5 -rotate-z-45'
|
||||
/>
|
||||
<span className='mt-0.5'>{ef('30%')}</span>
|
||||
{formatPrice(stats.totalDeposits)} ریال
|
||||
</span>
|
||||
</div>
|
||||
<div className='w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl'>
|
||||
<div className='w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl'>
|
||||
<div className='size-8 bg-background rounded-full grid items-center'>
|
||||
<MoneyRecive
|
||||
className='stroke-primary justify-self-center dark:stroke-neutral-200'
|
||||
@@ -43,17 +74,10 @@ function TransactionsReviewIndex() {
|
||||
</div>
|
||||
<span className='text-xs2 pt-1'>مجموع برداشت ها</span>
|
||||
<span className='text-xs font-medium mt-1 mb-0.5'>
|
||||
{ef('140,000,000 ریال')}
|
||||
</span>
|
||||
<span className='text-xs2 text-green-600 mt-0.5 bg-green-100 dark:bg-transparent dark:border dark:border-green-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-0.5'>
|
||||
<ArrowRight
|
||||
size={10}
|
||||
className='stroke-green-600 mb-0.5 -rotate-z-45'
|
||||
/>
|
||||
<span className='mt-0.5'>{ef('30%')}</span>
|
||||
{formatPrice(stats.totalWithdrawals)} ریال
|
||||
</span>
|
||||
</div>
|
||||
<div className='w-full h-full flex flex-col items-center justify-between p-2.5 text-center bg-container rounded-xl'>
|
||||
<div className='w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl'>
|
||||
<div className='size-8 bg-background rounded-full grid items-center'>
|
||||
<Wallet
|
||||
className='stroke-primary justify-self-center dark:stroke-neutral-200'
|
||||
@@ -62,20 +86,13 @@ function TransactionsReviewIndex() {
|
||||
</div>
|
||||
<span className='text-xs2 pt-1'>موجودی کیف پول</span>
|
||||
<span className='text-xs font-medium mt-1 mb-0.5'>
|
||||
{ef('140,000,000 ریال')}
|
||||
</span>
|
||||
<span className='text-xs2 text-red-600 mt-0.5 bg-red-100 dark:bg-transparent dark:border dark:border-red-400 w-min px-1 py-px items-center justify-between rounded-md flex gap-1'>
|
||||
<ArrowLeft
|
||||
size={10}
|
||||
className='stroke-red-600 mb-0.5 -rotate-z-45'
|
||||
/>
|
||||
<span className='mt-0.5'>{ef('30%')}</span>
|
||||
{formatPrice(walletAmount)} ریال
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='w-full h-full bg-container rounded-3xl mt-0'>
|
||||
<DataTableDemo />
|
||||
<TransactionsTable transactions={transactions} />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user