transaction and charge wallet online
This commit is contained in:
hamid zarghami
+113
-101
@@ -1,12 +1,20 @@
|
||||
import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Td from '../../components/Td'
|
||||
import Detail from './components/Detail'
|
||||
import { useGetTransactions } from './hooks/useTransactionData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import { TransactionItemType } from './types/TransactionTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import { NumberFormat } from '../../config/func'
|
||||
import Pagination from '../../components/Pagination'
|
||||
|
||||
const TransactionList: FC = () => {
|
||||
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const { t } = useTranslation('global')
|
||||
const getTransactions = useGetTransactions(page)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -14,109 +22,113 @@ const TransactionList: FC = () => {
|
||||
{t('transaction.transaction')}
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
|
||||
<MoneySend size={18} color='black' />
|
||||
{
|
||||
getTransactions.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
<div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
|
||||
<MoneySend size={18} color='black' />
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.totao_deposit')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
{NumberFormat(getTransactions.data?.data?.totalDeposits)} {t('toman')}
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
|
||||
<ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
|
||||
<MoneyRecive size={18} color='black' />
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.total_withdrawal')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
{NumberFormat(getTransactions.data?.data?.totalWithdrawals)} {t('toman')}
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
|
||||
<ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex xl:flex-row flex-col justify-center items-center'>
|
||||
<MoneyRecive size={18} color='black' />
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.balance')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
{NumberFormat(getTransactions.data?.data?.balance)} {t('toman')}
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
|
||||
<ArrowRight size={12} color='red' className='rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.totao_deposit')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
۱۴۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
|
||||
<ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
|
||||
<MoneyRecive size={18} color='black' />
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.total_withdrawal')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
۱۴۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
|
||||
<ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
|
||||
<div className='flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='size-8 bg-[#EEF0F7] rounded-full flex xl:flex-row flex-col justify-center items-center'>
|
||||
<MoneyRecive size={18} color='black' />
|
||||
</div>
|
||||
<div className='xl:text-xs text-[10px] text-[#101828]'>
|
||||
{t('transaction.balance')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
|
||||
<div className='text-[#101828] xl:text-xs text-[10px]'>
|
||||
۱۴۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
<div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
|
||||
<ArrowRight size={12} color='red' className='rotate-45' />
|
||||
<div>۳۰٪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('ticket.title')} />
|
||||
<Td text={t('ticket.team')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('ticket.title')} />
|
||||
<Td text={t('ticket.team')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''}>
|
||||
<Detail
|
||||
/>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('ticket.title')} />
|
||||
<Td text={t('ticket.team')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.status')} />
|
||||
<Td text={t('ticket.priority')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('ticket.number')} />
|
||||
<Td text={t('transaction.description')} />
|
||||
<Td text={t('transaction.amount')} />
|
||||
<Td text={t('ticket.date')} />
|
||||
<Td text={t('ticket.detail')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
|
||||
return (
|
||||
<tr key={item.id}>
|
||||
<Td text={item.numericId + ''} />
|
||||
<Td text={item.description} />
|
||||
<Td text={item.amount} />
|
||||
<Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
|
||||
<Td text={''}>
|
||||
<Detail />
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getTransactions.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import * as api from "../service/TransactionService";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const useGetTransactions = (page: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["transactions", page],
|
||||
queryFn: () => api.getTransactions(page),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
import axios from "../../../config/axios";
|
||||
|
||||
export const getTransactions = async (page: number) => {
|
||||
const { data } = await axios.get(`/wallets/transactions?page=${page}`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,7 @@
|
||||
export type TransactionItemType = {
|
||||
amount: string;
|
||||
description: string;
|
||||
numericId: number;
|
||||
id: string;
|
||||
createdAt: string;
|
||||
};
|
||||
Reference in New Issue
Block a user