hamid zarghami
280 lines
16 KiB
TypeScript
280 lines
16 KiB
TypeScript
import { useEffect } from 'react';
|
||
import './Invoice.css';
|
||
import { useParams } from 'react-router-dom';
|
||
import { useGetInvoiceDetail } from '../pages/receipts/hooks/useReceiptData';
|
||
import { useGetProfile } from '../pages/profile/hooks/useProfileData';
|
||
import moment from 'moment-jalaali';
|
||
import { NumberFormat } from '../config/func';
|
||
import { ReceiptDetailItemType } from '../pages/receipts/types/ReceiptTypes';
|
||
import SignImage from '../assets/images/sign.png'
|
||
import { useTranslation } from 'react-i18next';
|
||
import Button from './Button';
|
||
import { Printer } from 'iconsax-react';
|
||
|
||
const Invoice = () => {
|
||
const { t } = useTranslation('global')
|
||
const { id } = useParams();
|
||
const getInvoice = useGetInvoiceDetail(id ? id : '');
|
||
const getProfile = useGetProfile();
|
||
|
||
useEffect(() => {
|
||
const handleResize = () => {
|
||
try {
|
||
const mvp = document.getElementById('vp');
|
||
if (!mvp) return;
|
||
|
||
if (screen.width >= 300 && screen.width < 500) {
|
||
mvp.setAttribute('content', 'initial-scale=0.35,width=device-width');
|
||
} else if (screen.width > 500 && screen.width < 600) {
|
||
mvp.setAttribute('content', 'initial-scale=0.6,width=device-width');
|
||
} else if (screen.width > 600 && screen.width < 700) {
|
||
mvp.setAttribute('content', 'initial-scale=0.7,width=device-width');
|
||
}
|
||
} catch (e) {
|
||
console.error('Error setting viewport:', e);
|
||
}
|
||
};
|
||
|
||
handleResize();
|
||
window.addEventListener('resize', handleResize);
|
||
|
||
return () => {
|
||
window.removeEventListener('resize', handleResize);
|
||
};
|
||
}, []);
|
||
|
||
const handlePrint = () => {
|
||
// Add print-specific styles before printing
|
||
const style = document.createElement('style');
|
||
style.innerHTML = `
|
||
@media print {
|
||
@page {
|
||
margin: 0;
|
||
}
|
||
body * {
|
||
visibility: hidden;
|
||
}
|
||
.invoice-container, .invoice-container * {
|
||
visibility: visible;
|
||
}
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
window.print();
|
||
document.head.removeChild(style);
|
||
};
|
||
|
||
if (getInvoice.isPending || getProfile.isPending) {
|
||
return <div></div>;
|
||
}
|
||
|
||
const invoice = getInvoice.data?.data?.invoice;
|
||
const profile = getProfile.data?.data?.user;
|
||
|
||
return (
|
||
<div className="invoice-container">
|
||
<meta
|
||
id="vp"
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0"
|
||
/>
|
||
<Button
|
||
className='w-fit px-7 print-button mb-4'
|
||
onClick={handlePrint}
|
||
>
|
||
<div className='flex gap-2'>
|
||
<Printer size={20} color='white' />
|
||
<div>چاپ</div>
|
||
</div>
|
||
</Button>
|
||
|
||
<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>
|
||
<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>
|
||
<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: '2.3cm' }}>مبلغ واحد (ریال)</th>
|
||
<th style={{ width: '2.3cm' }}>مبلغ کل (ریال)</th>
|
||
<th style={{ width: '2.0cm' }}>تخفیف (درصد)</th>
|
||
<th style={{ width: "1.8cm" }}>جریمه دیرکرد</th>
|
||
<th style={{ width: '2.3cm' }}>مبلغ کل پس از تخفیف (ریال)</th>
|
||
<th style={{ width: '2.3cm' }}>جمع مالیات و عوارض ارزش افزوده (ریال)</th>
|
||
<th style={{ width: '2.5cm' }}>جمع کل پس از تخفیف و مالیات و عوارض (ریال)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{invoice?.items?.map((item: ReceiptDetailItemType, index: number) => (
|
||
<tr key={item.id}>
|
||
<td>{index + 1}</td>
|
||
<td>2720000114542</td>
|
||
<td>{item.name}</td>
|
||
<td>{item.count}</td>
|
||
<td>{NumberFormat(Number(item.unitPrice) * 10)}</td>
|
||
<td>{NumberFormat(Number(item.unitPrice) * Number(item.count) * 10)}</td>
|
||
<td>{NumberFormat(Number(item.discount))}</td>
|
||
<td>{NumberFormat(Number(invoice?.lateFee) * 10)}</td>
|
||
<td>{NumberFormat(Number(item.totalPrice) * 10)}</td>
|
||
<td>{NumberFormat(Number(item.totalPrice) * 0.1 * 10)}</td>
|
||
<td>{NumberFormat(Number(item.totalPrice) * 0.1 * 10 + Number(item.totalPrice) * 10)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colSpan={6}></td>
|
||
<td colSpan={4} className="font-small">
|
||
جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (ریال):
|
||
</td>
|
||
<td><span className="ltr">{NumberFormat(Number(invoice?.totalPrice) * 10)}</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="170px" src={SignImage} />
|
||
</div>
|
||
<div style={{ width: '40%', textAlign: 'right', paddingTop: '10px' }}>
|
||
{invoice?.paidAt ? moment(invoice?.paidAt).format('jYYYY/jMM/jDD') : '-'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Invoice;
|