transactions

This commit is contained in:
hamid zarghami
2025-12-14 14:14:52 +03:30
parent 8e49baab30
commit 1797063f34
6 changed files with 400 additions and 33 deletions
+49 -32
View File
@@ -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>
)