invoice
This commit is contained in:
hamid zarghami
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 117 KiB |
@@ -1,7 +1,7 @@
|
||||
.invoice-container {
|
||||
padding: 0;
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 29.7cm;
|
||||
-webkit-print-color-adjust: exact;
|
||||
direction: rtl;
|
||||
font: 9pt irancell;
|
||||
@@ -144,3 +144,20 @@ tfoot {
|
||||
margin-bottom: 0.5cm;
|
||||
margin-top: 0.5cm;
|
||||
}
|
||||
|
||||
.mobile-scroll-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.mobile-scroll-wrapper {
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
+178
-176
@@ -88,188 +88,190 @@ const Invoice = () => {
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<div className="page">
|
||||
<h1 className='font-bold text-lg pb-4' style={{ textAlign: 'center' }}>
|
||||
{invoice?.status === 'PAID' ? 'فاکتور (پرداخت شده)' : 'پیش فاکتور (پرداخت نشده)'}
|
||||
</h1>
|
||||
<table className="header-table" style={{ width: '100%' }}>
|
||||
<tr>
|
||||
<td style={{ width: '1.8cm', height: '2.5cm', verticalAlign: 'middle', paddingBottom: '4px' }}>
|
||||
<div className="header-item-wrapper">
|
||||
<div className="portait" style={{ margin: '5px' }}>فروشندده</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '0 4px 4px', height: '2cm' }}>
|
||||
<div className="bordered grow header-item-data">
|
||||
<table className="grow centered">
|
||||
<tr>
|
||||
<td style={{ width: '7cm' }}>
|
||||
<span className="label">فروشنده:</span> رسا نگاره داناک
|
||||
</td>
|
||||
<td style={{ width: '5cm' }}>
|
||||
<span className="label">شناسه ملی:</span> ۱۴۰۰۵۴۵۳۱۹۰
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره ثبت:</span> ۴۸۳۵۱۶
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره اقتصادی:</span> ۱۴۰۰۵۴۵۳۱۹۰
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="label">نشانی شرکت:</span>تهران - یوسف آباد - خیابان فتحی شقاقی - پلاک ۵ - واحد ۱۳
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">کدپستی:</span> ۱۴۳۳۶۳۴۴۴۶
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">تلفن و فکس:</span> ۰۲۱۹۱۶۹۳۵۳۳
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ width: '7cm', height: '2cm', padding: '0 4px 4px 0' }}>
|
||||
<div className="bordered" style={{ textAlign: 'center', height: '100%', padding: '0.4cm 0.2cm' }}>
|
||||
<div className="flex">
|
||||
<div className="font-small">شماره فاکتور:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{moment(invoice?.createdAt).format('jYYYY') + invoice?.numericId}</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div>تاریخ:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{moment(invoice?.createdAt).format('jYYYY/jMM/jDD')}</div>
|
||||
</div>
|
||||
<div className="flex" style={{ marginBottom: '4px' }}>
|
||||
<div>پیگیری:</div>
|
||||
<div className="flex-grow font-medium" style={{ textAlign: 'left' }}>{invoice?.numericId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{ width: '1.8cm', height: '2.5cm', verticalAlign: 'middle', paddingBottom: '4px' }}>
|
||||
<div className="header-item-wrapper">
|
||||
<div className="portait" style={{ margin: '5px' }}>خریدار</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '0 4px 4px', height: '2cm' }}>
|
||||
<div className="bordered grow header-item-data">
|
||||
<table className="grow centered">
|
||||
<tr>
|
||||
<td style={{ width: '7cm' }}>
|
||||
<span className="label">خریدار:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.registrationName : `${profile?.firstName} ${profile?.lastName}`}
|
||||
</td>
|
||||
<td style={{ width: '5cm' }}>
|
||||
<span className="label">شناسه ملی:</span> {profile?.nationalCode || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره ثبت:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.registrationCode : '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره اقتصادی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.economicCode : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="label">نشانی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.address?.fullAddress : profile?.address?.fullAddress || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">کدپستی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.address?.postalCode : profile?.address?.postalCode || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">تلفن:</span> {profile?.phone || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ width: '7cm', height: '2cm', padding: '0 4px 4px 0' }}>
|
||||
<div className="bordered" style={{ textAlign: 'center', height: '100%', padding: '0.4cm 0.2cm' }}>
|
||||
<div className="flex">
|
||||
<div className="font-small">نوع شخص:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{profile?.financialType === 'LEGAL' ? 'حقوقی' : 'حقیقی'}</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div>وضعیت:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{t(`receip.${invoice?.status}`)}</div>
|
||||
</div>
|
||||
<div className="flex" style={{ marginBottom: '4px' }}>
|
||||
<div>تاریخ پرداخت:</div>
|
||||
<div className="flex-grow font-medium" style={{ textAlign: 'left' }}>{invoice?.paidAt ? moment(invoice?.paidAt).format('jYYYY/jMM/jDD') : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table className="content-table">
|
||||
<thead>
|
||||
<div className="mobile-scroll-wrapper">
|
||||
<div className="page">
|
||||
<h1 className='font-bold text-lg pb-4' style={{ textAlign: 'center' }}>
|
||||
{invoice?.status === 'PAID' ? 'فاکتور (پرداخت شده)' : 'پیش فاکتور (پرداخت نشده)'}
|
||||
</h1>
|
||||
<table className="header-table" style={{ width: '100%' }}>
|
||||
<tr>
|
||||
<th>ردیف</th>
|
||||
<th>شناسه کالا یا خدمت</th>
|
||||
<th style={{ width: '30%' }}>شرح کالا یا خدمت</th>
|
||||
<th>آمر</th>
|
||||
<th>تعداد</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ واحد (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ کل (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>تخفیف (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ کل پس از تخفیف (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>جمع مالیات و عوارض ارزش افزوده (ریال)</th>
|
||||
<th style={{ width: '2.5cm' }}>جمع کل پس از تخفیف و مالیات و عوارض (ریال)</th>
|
||||
<td style={{ width: '1.8cm', height: '2.5cm', verticalAlign: 'middle', paddingBottom: '4px' }}>
|
||||
<div className="header-item-wrapper">
|
||||
<div className="portait" style={{ margin: '5px' }}>فروشندده</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '0 4px 4px', height: '2cm' }}>
|
||||
<div className="bordered grow header-item-data">
|
||||
<table className="grow centered">
|
||||
<tr>
|
||||
<td style={{ width: '7cm' }}>
|
||||
<span className="label">فروشنده:</span> رسا نگاره داناک
|
||||
</td>
|
||||
<td style={{ width: '5cm' }}>
|
||||
<span className="label">شناسه ملی:</span> ۱۴۰۰۵۴۵۳۱۹۰
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره ثبت:</span> ۴۸۳۵۱۶
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره اقتصادی:</span> ۱۴۰۰۵۴۵۳۱۹۰
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="label">نشانی شرکت:</span>تهران - یوسف آباد - خیابان فتحی شقاقی - پلاک ۵ - واحد ۱۳
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">کدپستی:</span> ۱۴۳۳۶۳۴۴۴۶
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">تلفن و فکس:</span> ۰۲۱۹۱۶۹۳۵۳۳
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ width: '7cm', height: '2cm', padding: '0 4px 4px 0' }}>
|
||||
<div className="bordered" style={{ textAlign: 'center', height: '100%', padding: '0.4cm 0.2cm' }}>
|
||||
<div className="flex">
|
||||
<div className="font-small">شماره فاکتور:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{moment(invoice?.createdAt).format('jYYYY') + invoice?.numericId}</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div>تاریخ:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{moment(invoice?.createdAt).format('jYYYY/jMM/jDD')}</div>
|
||||
</div>
|
||||
<div className="flex" style={{ marginBottom: '4px' }}>
|
||||
<div>پیگیری:</div>
|
||||
<div className="flex-grow font-medium" style={{ textAlign: 'left' }}>{invoice?.numericId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invoice?.items?.map((item: ReceiptDetailItemType, index: number) => (
|
||||
<tr key={item.id}>
|
||||
<td>{index + 1}</td>
|
||||
<td>{item.id.slice(-5)}</td>
|
||||
<td>{item.name}</td>
|
||||
<td>داناک</td>
|
||||
<td>{item.count}</td>
|
||||
<td>{NumberFormat(Number(item.unitPrice))}</td>
|
||||
<td>{NumberFormat(item.totalPrice)}</td>
|
||||
<td>{NumberFormat(Number(item.discount))}</td>
|
||||
<td>{NumberFormat(item.totalPrice - Number(item.discount))}</td>
|
||||
<td>{NumberFormat(invoice.tax)}</td>
|
||||
<td>{NumberFormat(invoice.totalPrice)}</td>
|
||||
<tr>
|
||||
<td style={{ width: '1.8cm', height: '2.5cm', verticalAlign: 'middle', paddingBottom: '4px' }}>
|
||||
<div className="header-item-wrapper">
|
||||
<div className="portait" style={{ margin: '5px' }}>خریدار</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '0 4px 4px', height: '2cm' }}>
|
||||
<div className="bordered grow header-item-data">
|
||||
<table className="grow centered">
|
||||
<tr>
|
||||
<td style={{ width: '7cm' }}>
|
||||
<span className="label">خریدار:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.registrationName : `${profile?.firstName} ${profile?.lastName}`}
|
||||
</td>
|
||||
<td style={{ width: '5cm' }}>
|
||||
<span className="label">شناسه ملی:</span> {profile?.nationalCode || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره ثبت:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.registrationCode : '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">شماره اقتصادی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.economicCode : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={2}>
|
||||
<span className="label">نشانی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.address?.fullAddress : profile?.address?.fullAddress || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">کدپستی:</span> {profile?.financialType === 'LEGAL' ? profile?.legalUser?.address?.postalCode : profile?.address?.postalCode || '-'}
|
||||
</td>
|
||||
<td>
|
||||
<span className="label">تلفن:</span> {profile?.phone || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ width: '7cm', height: '2cm', padding: '0 4px 4px 0' }}>
|
||||
<div className="bordered" style={{ textAlign: 'center', height: '100%', padding: '0.4cm 0.2cm' }}>
|
||||
<div className="flex">
|
||||
<div className="font-small">نوع شخص:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{profile?.financialType === 'LEGAL' ? 'حقوقی' : 'حقیقی'}</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div>وضعیت:</div>
|
||||
<div className="flex-grow" style={{ textAlign: 'left' }}>{t(`receip.${invoice?.status}`)}</div>
|
||||
</div>
|
||||
<div className="flex" style={{ marginBottom: '4px' }}>
|
||||
<div>تاریخ پرداخت:</div>
|
||||
<div className="flex-grow font-medium" style={{ textAlign: 'left' }}>{invoice?.paidAt ? moment(invoice?.paidAt).format('jYYYY/jMM/jDD') : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table className="content-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "1cm" }} >ردیف</th>
|
||||
<th style={{ width: '2.5cm' }}>شناسه کالا یا خدمت</th>
|
||||
<th style={{ width: '5cm' }}>شرح کالا یا خدمت</th>
|
||||
<th style={{ width: "1.5cm" }}>فروشنده</th>
|
||||
<th style={{ width: "1.5cm" }}>تعداد</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ واحد (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ کل (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>تخفیف (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>مبلغ کل پس از تخفیف (ریال)</th>
|
||||
<th style={{ width: '2.3cm' }}>جمع مالیات و عوارض ارزش افزوده (ریال)</th>
|
||||
<th style={{ width: '2.5cm' }}>جمع کل پس از تخفیف و مالیات و عوارض (ریال)</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={6}></td>
|
||||
<td colSpan={4} className="font-small">
|
||||
جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (ریال):
|
||||
</td>
|
||||
<td><span className="ltr">{NumberFormat(invoice?.totalPrice)}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
اعتبار مالیاتی قابل استفاده توسط خریدار
|
||||
</td>
|
||||
<td colSpan={7} className="font-small">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style={{ background: '#fff' }}>
|
||||
<td colSpan={11} style={{ height: '2.5cm', verticalAlign: 'top', padding: '10px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<div style={{ width: '40%', textAlign: 'right' }}>مهر و امضای فروشنده:</div>
|
||||
<div style={{ width: '40%', textAlign: 'right' }}>تاریخ خرید:</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<div style={{ width: '40%', display: 'flex', justifyContent: 'center' }}>
|
||||
<img className="footer-img" width="150px" src={SignImage} />
|
||||
</thead>
|
||||
<tbody>
|
||||
{invoice?.items?.map((item: ReceiptDetailItemType, index: number) => (
|
||||
<tr key={item.id}>
|
||||
<td>{index + 1}</td>
|
||||
<td>2330000576716</td>
|
||||
<td>{item.name}</td>
|
||||
<td>داناک</td>
|
||||
<td>{item.count}</td>
|
||||
<td>{NumberFormat(Number(item.unitPrice))}</td>
|
||||
<td>{NumberFormat(Number(item.unitPrice) * Number(item.count))}</td>
|
||||
<td>{NumberFormat(Number(item.discount))}</td>
|
||||
<td>{NumberFormat(Number(item.totalPrice))}</td>
|
||||
<td>{NumberFormat(Number(item.totalPrice) * 0.1)}</td>
|
||||
<td>{NumberFormat(Number(item.totalPrice) * 0.1 + Number(item.totalPrice))}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colSpan={6}></td>
|
||||
<td colSpan={4} className="font-small">
|
||||
جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (ریال):
|
||||
</td>
|
||||
<td><span className="ltr">{NumberFormat(invoice?.totalPrice)}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colSpan={4}>
|
||||
اعتبار مالیاتی قابل استفاده توسط خریدار
|
||||
</td>
|
||||
<td colSpan={7} className="font-small">
|
||||
</td>
|
||||
</tr>
|
||||
<tr style={{ background: '#fff' }}>
|
||||
<td colSpan={11} style={{ height: '2.5cm', verticalAlign: 'top', padding: '10px' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<div style={{ width: '40%', textAlign: 'right' }}>مهر و امضای فروشنده:</div>
|
||||
<div style={{ width: '40%', textAlign: 'right' }}>تاریخ خرید:</div>
|
||||
</div>
|
||||
<div style={{ width: '40%', textAlign: 'right', paddingTop: '10px' }}>
|
||||
{moment(invoice?.paidAt).format('jYYYY/jMM/jDD')}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<div style={{ width: '40%', display: 'flex', justifyContent: 'center' }}>
|
||||
<img className="footer-img" width="170px" src={SignImage} />
|
||||
</div>
|
||||
<div style={{ width: '40%', textAlign: 'right', paddingTop: '10px' }}>
|
||||
{invoice?.paidAt ? moment(invoice?.paidAt).format('jYYYY/jMM/jDD') : '-'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -61,7 +61,7 @@ const ServiceHeader: FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
|
||||
<div className='flex w-full flex-col justify-between xl:items-end'>
|
||||
<div className='xl:hidden flex gap-5 mt-5'>
|
||||
<div className='flex xl:!hidden gap-5 mt-5'>
|
||||
<RadioGroup
|
||||
items={data?.subscriptionPlans?.map((item) => {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user