skeleton check loading
This commit is contained in:
hamid zarghami
@@ -14,6 +14,7 @@ import { clx } from '../../helpers/utils'
|
||||
import Button from '../../components/Button'
|
||||
import ApproveInvoice from './components/ApproveInvoice'
|
||||
import PayInvoice from './components/PayInvoice'
|
||||
import Input from '../../components/Input'
|
||||
|
||||
const ReceiptsDetail: FC = () => {
|
||||
|
||||
@@ -24,10 +25,30 @@ const ReceiptsDetail: FC = () => {
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex gap-6 items-center'>
|
||||
<div>{t('receip.detail_account')}</div>
|
||||
<div className='flex xl:flex-row flex-col gap-4 items-center'>
|
||||
<div className='flex gap-6 items-center'>
|
||||
<div className='whitespace-nowrap'>{t('receip.detail_account')}</div>
|
||||
|
||||
<ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
|
||||
<ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
|
||||
</div>
|
||||
|
||||
{
|
||||
getInvoce.data?.data?.invoice?.status === 'PENDING' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ?
|
||||
<div className='flex gap-2 items-center w-full'>
|
||||
<div className='w-full xl:w-fit'>
|
||||
<Input
|
||||
className='bg-transparent border border-border xl:max-w-40'
|
||||
placeholder={t('receip.discount_code')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
label={t('receip.apply')}
|
||||
className='bg-transparent text-black border border-black mt-1 px-5 w-fit'
|
||||
/>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
@@ -58,7 +58,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<Button
|
||||
isLoading={approveInvoce.isPending || requestApprove.isPending}
|
||||
disabled={approveInvoce.isPending || requestApprove.isPending}
|
||||
onClick={() => status === 'PENDING' ? handleShowModal() : null}
|
||||
className={clx(
|
||||
'px-9 w-fit bg-white bg-opacity-70 text-description',
|
||||
@@ -70,7 +70,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
|
||||
size={20}
|
||||
color={status === 'PENDING' ? '#888888' : '#00BA4B'}
|
||||
/>
|
||||
<div>
|
||||
<div className='whitespace-nowrap'>
|
||||
{
|
||||
status === 'APPROVED' ?
|
||||
t('receip.accepted')
|
||||
@@ -85,7 +85,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
|
||||
open={showModal}
|
||||
close={() => setShowModal(false)}
|
||||
isHeader
|
||||
title_header={t('profile.confrim_email')}
|
||||
title_header={t('profile.confrim')}
|
||||
>
|
||||
<div className='mt-7'>
|
||||
<div className='text-xs text-center'>
|
||||
@@ -121,6 +121,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
|
||||
className='w-[150px] text-xs'
|
||||
onClick={handleConfrim}
|
||||
disabled={code.length !== 5}
|
||||
isLoading={approveInvoce.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/ReceiptService";
|
||||
import {
|
||||
ApplyDiscountType,
|
||||
ApproveInvoiceType,
|
||||
RequestApproveInvoiceType,
|
||||
} from "../types/ReceiptTypes";
|
||||
@@ -39,3 +40,9 @@ export const useRequestApprove = () => {
|
||||
api.requestApprove(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useApplyDiscount = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: ApplyDiscountType) => api.applyDiscount(variables),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import axios from "../../../config/axios";
|
||||
import {
|
||||
ApplyDiscountType,
|
||||
ApproveInvoiceType,
|
||||
RequestApproveInvoiceType,
|
||||
} from "../types/ReceiptTypes";
|
||||
@@ -31,3 +32,11 @@ export const payInvoice = async (id: string) => {
|
||||
const { data } = await axios.post(`/invoices/${id}/pay`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const applyDiscount = async (params: ApplyDiscountType) => {
|
||||
const { data } = await axios.post(
|
||||
`/invoices/${params.id}/apply-discount`,
|
||||
params
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -40,3 +40,8 @@ export type ApproveInvoiceType = {
|
||||
code: string;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type ApplyDiscountType = {
|
||||
id: string;
|
||||
discountCode: string;
|
||||
};
|
||||
|
||||
@@ -4,11 +4,12 @@ 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'
|
||||
import BoxSekeleton from './skeleton/BoxSekeleton'
|
||||
import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
|
||||
|
||||
const TransactionList: FC = () => {
|
||||
|
||||
@@ -22,12 +23,14 @@ const TransactionList: FC = () => {
|
||||
{t('transaction.transaction')}
|
||||
</div>
|
||||
|
||||
{
|
||||
getTransactions.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
|
||||
<Fragment>
|
||||
{
|
||||
getTransactions.isPending ?
|
||||
<BoxSekeleton />
|
||||
:
|
||||
<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'>
|
||||
@@ -86,48 +89,52 @@ const TransactionList: FC = () => {
|
||||
</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('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={NumberFormat(+item.amount)} />
|
||||
<Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
|
||||
<Td text={''}>
|
||||
<Detail />
|
||||
</Td>
|
||||
</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.isPending &&
|
||||
<DefaultTableSkeleton tdCount={5} />
|
||||
}
|
||||
{
|
||||
getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
|
||||
return (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={item.numericId + ''} />
|
||||
<Td text={item.description} />
|
||||
<Td text={NumberFormat(+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>
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getTransactions.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</Fragment>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { FC } from 'react'
|
||||
import Skeleton from 'react-loading-skeleton'
|
||||
|
||||
const BoxSekeleton: FC = () => {
|
||||
return (
|
||||
<div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
|
||||
<Skeleton
|
||||
containerClassName='flex-1 xl:p-6 py-2 px-4 xl:max-w-[253px]'
|
||||
className='h-[111px] !rounded-2xl'
|
||||
baseColor='#D9D9D9'
|
||||
/>
|
||||
<Skeleton
|
||||
containerClassName='flex-1 xl:p-6 py-2 px-4 xl:max-w-[253px]'
|
||||
className='h-[111px] !rounded-2xl'
|
||||
baseColor='#D9D9D9'
|
||||
/>
|
||||
<Skeleton
|
||||
containerClassName='flex-1 xl:p-6 py-2 px-4 xl:max-w-[253px]'
|
||||
className='h-[111px] !rounded-2xl'
|
||||
baseColor='#D9D9D9'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BoxSekeleton
|
||||
Reference in New Issue
Block a user