payment
This commit is contained in:
hamid zarghami
@@ -0,0 +1,178 @@
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import { Cards, Money3, MoneyRecive } from 'iconsax-react'
|
||||
import { useGetGateWayPayment, useGetPayments } from './hooks/usePaymentData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Td from '../../components/Td'
|
||||
import { PaymentGatewayType, PaymentItemsType, PaymentStatusType } from './types/PaymentTypes'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import moment from 'moment-jalaali'
|
||||
import Accept from './components/Accept'
|
||||
import Reject from './components/Reject'
|
||||
|
||||
const PaymentList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [pageGateWay, setPageGateWay] = useState<number>(1)
|
||||
const [activeTab, setActiveTab] = useState<PaymentStatusType>('GATEWAY')
|
||||
const getGateWayPayment = useGetGateWayPayment(pageGateWay)
|
||||
const getPayments = useGetPayments(page, activeTab)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='mt-8 flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Tabs
|
||||
active={activeTab}
|
||||
items={[
|
||||
{
|
||||
label: t('wallet.online_pay'),
|
||||
value: 'GATEWAY',
|
||||
icon: <MoneyRecive color={activeTab === 'GATEWAY' ? 'black' : '#8C90A3'} size={22} />
|
||||
},
|
||||
{
|
||||
icon: <Cards color={activeTab === 'CARD_TO_CARD' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.card_to_card'),
|
||||
value: 'CARD_TO_CARD'
|
||||
},
|
||||
{
|
||||
icon: <Money3 color={activeTab === 'SHEBA' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.sheba'),
|
||||
value: 'SHEBA'
|
||||
},
|
||||
]}
|
||||
onChange={(value) => setActiveTab(value as PaymentStatusType)}
|
||||
/>
|
||||
|
||||
{
|
||||
getPayments.isFetching || getGateWayPayment.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
{
|
||||
activeTab === 'GATEWAY' &&
|
||||
<Fragment>
|
||||
<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('payment.user')} />
|
||||
<Td text={t('payment.amount')} />
|
||||
<Td text={t('payment.date')} />
|
||||
<Td text={t('payment.status_payment')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getGateWayPayment.data?.data?.payments?.map((item: PaymentGatewayType) => {
|
||||
return (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={`${item.user.firstName} ${item.user.lastName}`} />
|
||||
<Td text={item.amount.toLocaleString()} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={t(`payment.${item.status}`)} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={pageGateWay}
|
||||
totalPages={getGateWayPayment.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPageGateWay}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
}
|
||||
{
|
||||
activeTab !== 'GATEWAY' &&
|
||||
<Fragment>
|
||||
<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('payment.receip_image')} />
|
||||
<Td text={t('payment.user')} />
|
||||
<Td text={t('payment.card_number')} />
|
||||
<Td text={t('payment.sheba_number')} />
|
||||
<Td text={t('payment.amount')} />
|
||||
<Td text={t('payment.date')} />
|
||||
<Td text={t('payment.payment_type')} />
|
||||
<Td text={t('payment.status_payment')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getPayments.data?.data?.depositRequests?.map((item: PaymentItemsType) => {
|
||||
return (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={''}>
|
||||
<a href={item.receiptUrl} target='_blank'>
|
||||
<img
|
||||
src={item.receiptUrl}
|
||||
className='w-16 h-16 rounded-lg'
|
||||
/>
|
||||
</a>
|
||||
</Td>
|
||||
<Td text={`${item.user.firstName} ${item.user.lastName}`} />
|
||||
<Td text={item.bankAccount.cardNumber} />
|
||||
<Td text={item.bankAccount.IBan} />
|
||||
<Td text={item.amount.toLocaleString()} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={item.type === 'CARD_TO_CARD' ? t('wallet.card_to_card') : t('wallet.bank_transfer')} />
|
||||
<Td text={t(`payment.${item.status}`)} />
|
||||
<Td text={''}>
|
||||
{
|
||||
item.status === 'PENDING' &&
|
||||
<Fragment>
|
||||
<div className='flex gap-2'>
|
||||
<Accept
|
||||
id={item.id}
|
||||
/>
|
||||
<Reject id={item.id} />
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getPayments.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentList
|
||||
@@ -0,0 +1,51 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { useApproveTransfer } from '../hooks/usePaymentData'
|
||||
import ModalConfrim from '../../../components/ModalConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const Accept: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
|
||||
const approveTransfer = useApproveTransfer()
|
||||
|
||||
const handleApproveTransfer = () => {
|
||||
approveTransfer.mutate(props.id, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
setOpenConfrimModal(false)
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error?.response?.data?.error?.message[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
label={t('payment.aceept')}
|
||||
className='px-4 bg-green-50 text-green-500 font-semibold'
|
||||
onClick={() => setOpenConfrimModal(true)}
|
||||
/>
|
||||
|
||||
<ModalConfrim
|
||||
isOpen={openConfrimModal}
|
||||
close={() => setOpenConfrimModal(false)}
|
||||
onConfrim={handleApproveTransfer}
|
||||
isLoading={approveTransfer.isPending}
|
||||
label={t('payment.accept_confrim')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accept
|
||||
@@ -0,0 +1,56 @@
|
||||
import { FC, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRejectTransfer } from '../hooks/usePaymentData'
|
||||
import ModalConfrim from '../../../components/ModalConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const Reject: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
|
||||
const rejectTransfer = useRejectTransfer()
|
||||
|
||||
const handleRejectTransfer = (text?: string) => {
|
||||
if (text && text.length > 0) {
|
||||
rejectTransfer.mutate({ id: props.id, comment: text }, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
setOpenConfrimModal(false)
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error?.response?.data?.error?.message[0])
|
||||
},
|
||||
})
|
||||
} else {
|
||||
toast.error(t('payment.reject_comment_error'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
label={t('payment.reject')}
|
||||
className='px-4 w-fit bg-red-50 text-red-500 font-semibold'
|
||||
onClick={() => setOpenConfrimModal(true)}
|
||||
/>
|
||||
|
||||
<ModalConfrim
|
||||
isOpen={openConfrimModal}
|
||||
close={() => setOpenConfrimModal(false)}
|
||||
onConfrim={handleRejectTransfer}
|
||||
isLoading={rejectTransfer.isPending}
|
||||
label={t('payment.accept_confrim')}
|
||||
isHasDescription
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Reject
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/PaymentService";
|
||||
import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
|
||||
|
||||
export const useGetPayments = (page: number, type: PaymentStatusType) => {
|
||||
return useQuery({
|
||||
queryKey: ["payments", page, type],
|
||||
queryFn: () => api.getPayments(page, type),
|
||||
enabled: type !== "GATEWAY",
|
||||
});
|
||||
};
|
||||
|
||||
export const useApproveTransfer = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: string) => api.approveTransfer(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useRejectTransfer = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: RejectPaymentType) => api.rejectTransfer(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetGateWayPayment = (page: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["gateway-payments", page],
|
||||
queryFn: () => api.getPaymentGateways(page),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
|
||||
|
||||
export const getPayments = async (page: number, type: PaymentStatusType) => {
|
||||
const { data } = await axios.get(
|
||||
`/payments/deposit/transfer?page=${page}&type=${type}`
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const approveTransfer = async (id: string) => {
|
||||
const { data } = await axios.post(`/payments/deposit/transfer/approve/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const rejectTransfer = async (params: RejectPaymentType) => {
|
||||
const { data } = await axios.post(
|
||||
`/payments/deposit/transfer/reject/${params.id}`,
|
||||
params
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getPaymentGateways = async (page: number) => {
|
||||
const { data } = await axios.get(`/payments/deposit/gateway?page=${page}`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
export type PaymentType = {
|
||||
id: string;
|
||||
amount: number;
|
||||
createdAt: string;
|
||||
reference: string;
|
||||
status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
|
||||
transactionId: string | null;
|
||||
type: "CARD_TO_CARD" | "BANK_TRANSFER";
|
||||
};
|
||||
|
||||
export type PaymentItemsType = {
|
||||
id: string;
|
||||
amount: number;
|
||||
bankAccount: {
|
||||
IBan: string;
|
||||
cardNumber: string;
|
||||
accountOwnerName: string;
|
||||
};
|
||||
comment?: string;
|
||||
createdAt: string;
|
||||
receiptUrl: string;
|
||||
status: "PENDING" | "APPROVED" | "REJECTED";
|
||||
user: {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
phone: string;
|
||||
};
|
||||
type: PaymentStatusType;
|
||||
};
|
||||
|
||||
export type PaymentStatusType = "CARD_TO_CARD" | "GATEWAY" | "SHEBA";
|
||||
|
||||
export type PaymentGatewayType = {
|
||||
amount: string;
|
||||
id: string;
|
||||
createdAt: string;
|
||||
reference: string;
|
||||
status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
|
||||
paymentGateway: {
|
||||
id: string;
|
||||
name: string;
|
||||
nameFa: string;
|
||||
description: string;
|
||||
};
|
||||
user: {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
phone: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type RejectPaymentType = {
|
||||
id: string;
|
||||
comment?: string;
|
||||
};
|
||||
+81
-100
@@ -1,12 +1,23 @@
|
||||
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 Pagination from '../../components/Pagination'
|
||||
import Input from '../../components/Input'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
|
||||
const TransactionList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [userSearch, setUserSearch] = useState<string>('')
|
||||
const [dateSearch, setDateSearch] = useState<string>('')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const getTransactions = useGetTransactions(page, userSearch, dateSearch, search)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -14,109 +25,79 @@ 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' />
|
||||
</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 className='flex justify-between items-center mt-12'>
|
||||
<div className='flex gap-4 items-center'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('transaction.user_search')}
|
||||
className='bg-white border border-border'
|
||||
onChangeSearchFinal={(value) => setUserSearch(value)}
|
||||
/>
|
||||
<DatePickerComponent
|
||||
placeholder={t('ticket.date')}
|
||||
className='w-36'
|
||||
onChange={(date) => setDateSearch(date)}
|
||||
defaulValue={dateSearch}
|
||||
/>
|
||||
</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>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('search')}
|
||||
className='bg-white border border-border'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</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>
|
||||
{
|
||||
getTransactions.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
|
||||
</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 className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getTransactions.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import * as api from "../service/TransactionService";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const useGetTransactions = (
|
||||
page: number,
|
||||
userSearch: string,
|
||||
dateSearch: string,
|
||||
search: string
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ["transactions", page, userSearch, dateSearch, search],
|
||||
queryFn: () => api.getTransactions(page, userSearch, dateSearch, search),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import moment from "moment-jalaali";
|
||||
import axios from "../../../config/axios";
|
||||
|
||||
export const getTransactions = async (
|
||||
page: number,
|
||||
userSearch: string,
|
||||
dateSearch: string,
|
||||
search: string
|
||||
) => {
|
||||
let query = `?page=${page}`;
|
||||
if (userSearch) {
|
||||
query += `&user=${userSearch}`;
|
||||
}
|
||||
if (dateSearch) {
|
||||
query += `&date=${moment(dateSearch, "jYYYY-jMM-jDD").format(
|
||||
"YYYY-MM-DD"
|
||||
)}`;
|
||||
}
|
||||
if (search) {
|
||||
query += `&q=${search}`;
|
||||
}
|
||||
const { data } = await axios.get(`/payments/transactions${query}`);
|
||||
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