ticket and annoncement
This commit is contained in:
hamid zarghami
+226
-218
@@ -1,15 +1,20 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Edit } from 'iconsax-react'
|
||||
import StatusCircle from '../../components/StatusCircle'
|
||||
import SamanImage from '../../assets/images/saman.png'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useGetInvoiceDetail } from './hooks/useReceiptData'
|
||||
import { useGetFinancialInfo } from '../financial/hooks/useFinancialData'
|
||||
import { ReceiptDetailItemType } from './types/ReceiptTypes'
|
||||
import { NumberFormat } from '../../config/func'
|
||||
import moment from 'moment-jalaali'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
|
||||
const ReceiptsDetail: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { t } = useTranslation('global')
|
||||
const getProfile = useGetFinancialInfo()
|
||||
const getInvoce = useGetInvoiceDetail(id ? id : '')
|
||||
|
||||
return (
|
||||
@@ -19,241 +24,244 @@ const ReceiptsDetail: FC = () => {
|
||||
۱۲۳۱۲
|
||||
</div>
|
||||
|
||||
<div className='flex xl:flex-row flex-col mt-8 gap-6'>
|
||||
<div className='flex-1'>
|
||||
<div className='w-full bg-white rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.personal_information')}
|
||||
{
|
||||
getInvoce.isPending || getProfile.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='flex xl:flex-row flex-col mt-8 gap-6'>
|
||||
<div className='flex-1'>
|
||||
<div className='w-full bg-white rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.personal_information')}
|
||||
</div>
|
||||
<div className='flex gap-1 items-center text-xs text-[#0047FF]'>
|
||||
<Edit size={16} color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.type_person')}
|
||||
</div>
|
||||
<div>
|
||||
{t('receip.company')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.representativeـname')}
|
||||
</div>
|
||||
<div>
|
||||
مهرداد مظفری
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.company_name')}
|
||||
</div>
|
||||
<div>
|
||||
داناک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.registration_number')}
|
||||
</div>
|
||||
<div>
|
||||
۱۲۳۴
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.tel_company')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.national_code')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.postal_code')}
|
||||
</div>
|
||||
<div>
|
||||
۳۸۲۱۳۵۸۸۹۲
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.city')}
|
||||
</div>
|
||||
<div>
|
||||
اراک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.address')}
|
||||
</div>
|
||||
<div>
|
||||
اراک -خیابان شریعتی-خیابان جنت
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex gap-1 items-center text-xs text-[#0047FF]'>
|
||||
<Edit size={16} color='#0047FF' />
|
||||
<div>
|
||||
{t('edit')}
|
||||
|
||||
<div className='w-full bg-white rounded-3xl mt-8 p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.detail_receip')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-7 text-sm'>
|
||||
<div className='flex justify-between items-center text-description h-14'>
|
||||
<div>
|
||||
{t('receip.description')}
|
||||
</div>
|
||||
<div>
|
||||
{t('receip.price')}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
getInvoce.data?.data?.invoice?.items?.map((item: ReceiptDetailItemType) => {
|
||||
return (
|
||||
<div key={item.id} className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div className='flex gap-0.5'>
|
||||
<span>{item.name}</span>
|
||||
<span>{item.count}</span>
|
||||
<span>عدد</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{NumberFormat(item.totalPrice)}</span> ریال
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
۱۰٪ ارزش افزوده
|
||||
</div>
|
||||
<div>
|
||||
<span>{NumberFormat(getInvoce.data?.data?.invoice?.tax)}</span> ریال
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
جمع کل
|
||||
</div>
|
||||
<div>
|
||||
<span>{NumberFormat(getInvoce.data?.data?.invoice?.totalPrice)}</span> ریال
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.type_person')}
|
||||
</div>
|
||||
<div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.company')}
|
||||
{t('receip.receip_information')}
|
||||
</div>
|
||||
<div className='border border-orange-400 text-orange-400 rounded-lg text-[9px] h-6 flex items-center px-1'>
|
||||
<div>پرداخت نشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.representativeـname')}
|
||||
<div className='mt-6 text-xs font-extralight'>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.date_factor')}
|
||||
</div>
|
||||
<div>
|
||||
{moment(getInvoce.data?.data?.invoice?.createdAt).format('jYYYY-jMM-jDD')}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
مهرداد مظفری
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.due_date')}
|
||||
</div>
|
||||
<div>
|
||||
{moment(getInvoce.data?.data?.invoice?.dueDate).format('jYYYY-jMM-jDD')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.factor_number')}
|
||||
</div>
|
||||
<div>
|
||||
{getInvoce.data?.data?.invoice.id}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.status_factor')}
|
||||
</div>
|
||||
<div>
|
||||
{t(`receip.${getInvoce.data?.data?.invoice?.status}`)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.company_name')}
|
||||
<div className='mt-5 flex justify-center gap-2'>
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
داناک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.registration_number')}
|
||||
</div>
|
||||
<div>
|
||||
۱۲۳۴
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.tel_company')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.national_code')}
|
||||
</div>
|
||||
<div>
|
||||
۰۰۱۲۳۴۵۶۷۸
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.postal_code')}
|
||||
</div>
|
||||
<div>
|
||||
۳۸۲۱۳۵۸۸۹۲
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.state')}
|
||||
</div>
|
||||
<div>
|
||||
مرکزی
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.city')}
|
||||
</div>
|
||||
<div>
|
||||
اراک
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
{t('receip.address')}
|
||||
</div>
|
||||
<div>
|
||||
اراک -خیابان شریعتی-خیابان جنت
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='w-full bg-white rounded-3xl mt-8 p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.detail_receip')}
|
||||
</div>
|
||||
<div className='flex gap-2 text-xs items-center'>
|
||||
<StatusCircle
|
||||
color='#FF7B00'
|
||||
/>
|
||||
<div>
|
||||
{t('receip.not_paid')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-7 text-sm'>
|
||||
<div className='flex justify-between items-center text-description h-14'>
|
||||
<div>
|
||||
{t('receip.description')}
|
||||
</div>
|
||||
<div>
|
||||
{t('receip.price')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
اکانت یکساله با دسترسی
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
۱۰٪ ارزش افزوده
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
|
||||
<div>
|
||||
جمع کل
|
||||
</div>
|
||||
<div>
|
||||
۱۰,۰۰۰,۰۰۰ ریال
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('receip.receip_information')}
|
||||
</div>
|
||||
<div className='flex gap-2 text-xs items-center'>
|
||||
<StatusCircle
|
||||
color='#FF7B00'
|
||||
/>
|
||||
<div>پرداخت نشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 text-xs font-extralight'>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.date_factor')}
|
||||
</div>
|
||||
<div>
|
||||
۱۴۰۲/۱۰/۰۴
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.due_date')}
|
||||
</div>
|
||||
<div>
|
||||
۱۴۰۲/۱۰/۰۴
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.factor_number')}
|
||||
</div>
|
||||
<div>
|
||||
۱۲۳۱
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between h-12 border-b items-center'>
|
||||
<div className='text-description'>
|
||||
{t('receip.status_factor')}
|
||||
</div>
|
||||
<div>
|
||||
تایید شده
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex justify-center gap-2'>
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
<div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
|
||||
<img src={SamanImage} alt='saman' className='w-8 h-8' />
|
||||
<div className='mt-2'>
|
||||
بانک سامان
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user