890 lines
46 KiB
JavaScript
890 lines
46 KiB
JavaScript
|
|
import { useSelector } from 'react-redux';
|
|
import {
|
|
GlobalPritdummyData,
|
|
GlobalSelectedPrintHeaderFontColor,
|
|
GlobalSelectedTableHeaderColor,
|
|
GlobalSelectedTableHeaderFontColor,
|
|
GlobalSelectedTableBodyColor,
|
|
GlobalSelectedTableBodyFontColor,
|
|
GlobalRowType,
|
|
GlobalSelectedFooterColor,
|
|
GlobalSelectedFooterFontColor,
|
|
GlobalSelectedNetAmountColor,
|
|
GlobalSelectedNetAmountFontColor,
|
|
GlobalSelectedPrintHeaderColor,
|
|
} from '../../../Features/ThemeChange/ThemeChange';
|
|
import { isMobile } from 'react-device-detect';
|
|
import { extractLastNumberOrderId } from '../../../Services/Others';
|
|
import moment from 'moment';
|
|
|
|
const PurPrintstyleInvoice = ({
|
|
index,
|
|
table2Data,
|
|
Date1,
|
|
totalQuantity,
|
|
OrderDetailGST,
|
|
OrderDetailIGST,
|
|
PaymentStatus,
|
|
printDatas,
|
|
BankDetails
|
|
}) => {
|
|
|
|
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
|
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
|
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
|
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
|
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
|
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
|
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
|
const SelectedRowType = useSelector(GlobalRowType);
|
|
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
|
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
|
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
|
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
|
let BillName = printDatas?.PrintHdrName
|
|
// Function to convert number to words
|
|
const numberToWords = (num) => {
|
|
const a = [
|
|
"", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten",
|
|
"Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen",
|
|
"Eighteen", "Nineteen"
|
|
];
|
|
const b = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
|
|
|
|
if (num === 0) return "Zero";
|
|
if (num < 20) return a[num];
|
|
if (num < 100) return b[Math.floor(num / 10)] + (num % 10 ? " " + a[num % 10] : "");
|
|
if (num < 1000)
|
|
return a[Math.floor(num / 100)] + " Hundred" + (num % 100 ? " and " + numberToWords(num % 100) : "");
|
|
if (num < 100000)
|
|
return numberToWords(Math.floor(num / 1000)) + " Thousand" + (num % 1000 ? " " + numberToWords(num % 1000) : "");
|
|
if (num < 10000000)
|
|
return numberToWords(Math.floor(num / 100000)) + " Lakh" + (num % 100000 ? " " + numberToWords(num % 100000) : "");
|
|
if (num < 1000000000)
|
|
return numberToWords(Math.floor(num / 10000000)) + " Crore" + (num % 10000000 ? " " + numberToWords(num % 10000000) : "");
|
|
|
|
return "Number too large";
|
|
};
|
|
const invoiceData = {
|
|
// Company Details - mapped from A4Standard
|
|
companyName: table2Data?.CompName || table2Data?.BranchName || "",
|
|
companyspecname: table2Data?.AppSpecificName || "",
|
|
companyAddress: {
|
|
address1: table2Data?.AddressDetails?.[0]?.Address1 || "",
|
|
address2: table2Data?.AddressDetails?.[0]?.Address2 || "",
|
|
city: table2Data?.AddressDetails?.[0]?.City || "",
|
|
state: table2Data?.AddressDetails?.[0]?.State || "",
|
|
zip: table2Data?.AddressDetails?.[0]?.Zip || ""
|
|
},
|
|
companyGSTIN: table2Data?.CompGSTIN || table2Data?.GSTIN || "",
|
|
companyEmail: table2Data?.CompanyEmail || table2Data?.BrEmail || "",
|
|
companyMobile: table2Data?.BrMobile || "",
|
|
companyMobile2: table2Data?.BrMobile2 || "",
|
|
|
|
// Invoice Details - mapped from A4Standard
|
|
invoiceNo: table2Data?.QuotationNo ?
|
|
extractLastNumberOrderId(
|
|
table2Data?.QuotationNo,
|
|
) : "",
|
|
invoiceDate: moment(Date1).format('DD-MM-YYYY') || "",
|
|
|
|
// Customer Details - mapped from A4Standard CustomerDetails array
|
|
customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustName
|
|
|| "",
|
|
customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.CustMobile || "",
|
|
customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
|
|
customerAddress: {
|
|
address1: table2Data?.CustomerDetails?.[0]?.Address1 || "",
|
|
address2: table2Data?.CustomerDetails?.[0]?.Address2 || "",
|
|
state: table2Data?.CustomerDetails?.[0]?.State || ""
|
|
},
|
|
|
|
// Product Details - mapped from A4Standard productDetails
|
|
productDetails: table2Data?.ProductDetails || [],
|
|
|
|
// Totals - mapped from A4Standard
|
|
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt),
|
|
taxAmount: Number(OrderDetailGST),
|
|
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal),
|
|
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0),
|
|
// Bank Details - mapped from A4Standard
|
|
bankDetails: BankDetails?.[0] || null
|
|
};
|
|
|
|
console.log(table2Data, "Date1Date1", invoiceData,)
|
|
|
|
let PageSize = printDatas?.PageSize
|
|
|
|
let printColors = printDatas?.PrintColors;
|
|
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
|
|
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
|
|
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
|
|
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
|
|
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
|
|
|
|
const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
|
|
: 0;
|
|
const sgstTotal = OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0))?.toFixed(2)
|
|
: 0;
|
|
const igstTotal = OrderDetailIGST && OrderDetailIGST.length > 0
|
|
? Number(OrderDetailIGST.reduce((sum, item) => sum + (item.IGST || 0), 0))?.toFixed(2)
|
|
: 0;
|
|
|
|
// Calculate round off value
|
|
const roundOffValue = Number(invoiceData.grandTotal) - (
|
|
Number(invoiceData.totalBillAmount) +
|
|
Number(cgstTotal) +
|
|
Number(sgstTotal) +
|
|
Number(igstTotal)
|
|
);
|
|
console.log(Number(invoiceData.totalBillAmount), cgstTotal, sgstTotal, igstTotal, "roundoff vaules")
|
|
function RoundOffFun(amount) {
|
|
const roundedAmount = Math.round(amount);
|
|
const roundOffValue = parseFloat((roundedAmount - amount).toFixed(2));
|
|
// const symbol = roundOffValue > 0 ? '+' : ''; // Add "+" symbol for positive values ${symbol}
|
|
console.log("Rounded Amount:", roundedAmount, "Round Off Value:", roundOffValue);
|
|
return `${roundOffValue.toFixed(2)}`;
|
|
|
|
}
|
|
|
|
// Allow up to 10 items per page
|
|
const chunkSize = isMobile ? 7 : PageSize == "A5" ? 9 : 8;
|
|
let dataSource = [];
|
|
|
|
// Simplified data source logic - always use all product details
|
|
dataSource = table2Data?.ProductDetails || [];
|
|
|
|
// Ensure dataSource is always an array
|
|
if (!Array.isArray(dataSource)) {
|
|
dataSource = [];
|
|
}
|
|
|
|
console.log("Final DataSource:", table2Data,);
|
|
|
|
const paginatedChunks = [];
|
|
|
|
// Always create at least one chunk, even if empty
|
|
if (dataSource.length === 0) {
|
|
paginatedChunks.push([]);
|
|
} else {
|
|
// Split data into chunks
|
|
for (let i = 0; i < dataSource.length; i += chunkSize) {
|
|
const chunk = dataSource.slice(i, i + chunkSize);
|
|
paginatedChunks.push(chunk);
|
|
}
|
|
}
|
|
|
|
const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
|
|
// If last page has more than 6 items, move footer to new page
|
|
const shouldFooterBeOnNewPage = lastChunkRows === chunkSize;
|
|
|
|
// If footer should be on new page, add an empty chunk for footer-only page
|
|
if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
|
|
paginatedChunks.push([]); // Empty chunk for footer-only page
|
|
}
|
|
const headerStyle = {
|
|
backgroundColor: GlobaldummyData
|
|
? SelectedHeaderColor
|
|
: headerColor?.background,
|
|
|
|
color: GlobaldummyData
|
|
? SelectedHeaderFontColor
|
|
: headerColor?.font,
|
|
}
|
|
const tableHeaderStyle = {
|
|
backgroundColor: GlobaldummyData
|
|
? SelectedTableHeaderColor
|
|
: tableHeaderColor?.background,
|
|
|
|
color: GlobaldummyData
|
|
? SelectedTableHeaderFontColor
|
|
: tableHeaderColor?.font,
|
|
}
|
|
const tableBodyStyle = {
|
|
backgroundColor: GlobaldummyData
|
|
? SelectedTableBodyColor
|
|
: tableBodyColor?.background,
|
|
color: GlobaldummyData
|
|
? SelectedTableBodyFontColor
|
|
: tableBodyColor?.font,
|
|
}
|
|
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
|
const footerColorStyle = {
|
|
backgroundColor: GlobaldummyData
|
|
? SelectedTableFooterColor
|
|
: footerColor?.background,
|
|
|
|
color: GlobaldummyData
|
|
? SelectedTableFooterFontColor
|
|
: footerColor?.font,
|
|
}
|
|
const netAmountStyle = {
|
|
backgroundColor: GlobaldummyData
|
|
? SelectedNetAmountColor
|
|
: netAmtColor?.background,
|
|
|
|
color: GlobaldummyData
|
|
? SelectedNetAmountFontColor
|
|
: netAmtColor?.font,
|
|
}
|
|
|
|
return (
|
|
<div id={`TaxInvoice`} style={{
|
|
fontFamily: 'Arial, sans-serif',
|
|
fontSize: '12px',
|
|
fontWeight: 'bold',
|
|
lineHeight: '1.2',
|
|
color: '#000',
|
|
maxWidth: '210mm',
|
|
margin: '0 auto',
|
|
padding: '10mm',
|
|
backgroundColor: 'white'
|
|
}}>
|
|
{paginatedChunks.map((dataChunk, chunkIndex) => (
|
|
<div
|
|
key={chunkIndex}
|
|
className={isMobile ? `invoice-wrapper container pdf-page` : `invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`}
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
// justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) ? "space-between" : "",
|
|
height: isMobile ? "275mm" : PageSize == "A5" ? '130mm' : "245mm",
|
|
marginBottom: "0",
|
|
pageBreakAfter: chunkIndex < paginatedChunks.length - 1 ? 'always' : 'auto'
|
|
}}
|
|
>
|
|
{renderInvoiceContent(dataChunk, chunkIndex)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
function renderInvoiceContent(dataChunk, chunkIndex) {
|
|
console.log(`Rendering page ${chunkIndex + 1}, chunk has ${dataChunk.length} items:`, dataChunk);
|
|
|
|
const isFirstPage = chunkIndex === 0;
|
|
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
|
const isFooterOnlyPage = isLastPage && dataChunk.length === 0 && shouldFooterBeOnNewPage;
|
|
|
|
console.log(`Page ${chunkIndex + 1}: isFirstPage=${isFirstPage}, isLastPage=${isLastPage}, isFooterOnlyPage=${isFooterOnlyPage}`);
|
|
|
|
return (
|
|
<>
|
|
{/* Header - Only on first page */}
|
|
{isFirstPage && (
|
|
<>
|
|
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
|
|
<div></div>
|
|
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700', }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
|
|
<div>
|
|
<div style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Main Container - Always show */}
|
|
<div style={{ border: '1px solid #000' }}>
|
|
|
|
{/* Top Section - Company and Invoice Details - Only on first page */}
|
|
{isFirstPage && (
|
|
<div style={{ display: 'flex', width: "100%", }}>
|
|
|
|
{/* Left - Company Details */}
|
|
<div style={{ width: "50%", borderRight: '1px solid #000', display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{
|
|
// flex: '1',
|
|
padding: '10px',
|
|
|
|
fontSize: '11px',
|
|
textAlign: 'left'
|
|
}}>
|
|
|
|
<div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}>
|
|
{invoiceData.companyName}
|
|
</div>
|
|
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
|
|
<div >{invoiceData.companyAddress.address1}</div>
|
|
<div>{invoiceData.companyAddress.address2}</div>
|
|
<div>{invoiceData.companyAddress.city} {invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}</div>
|
|
<div>{invoiceData.companyAddress.state}</div>
|
|
<div>GSTIN/UIN: {invoiceData.companyGSTIN}</div>
|
|
{/* <div>State Name: Tamil Nadu, Code: 33</div> */}
|
|
{invoiceData.companyEmail && <div>E-Mail: {invoiceData.companyEmail}</div>}
|
|
{invoiceData.companyMobile && <div>Mobile: +91 {invoiceData.companyMobile}{invoiceData.companyMobile2 ? `, ${invoiceData.companyMobile2}` : ""}</div>}
|
|
</div>
|
|
{/* Buyer Details */}
|
|
<div style={{
|
|
padding: '10px',
|
|
borderTop: '1px solid #000',
|
|
|
|
fontSize: '11px',
|
|
minHeight: '60px',
|
|
textAlign: 'left'
|
|
}}>
|
|
<div style={{ fontWeight: '700', marginBottom: '5px' }}>Buyer (Bill to)</div>
|
|
<div style={{ fontWeight: '700' }}>{invoiceData.customerName}</div>
|
|
{invoiceData.customerAddress.address1 && <div>{invoiceData.customerAddress.address1}</div>}
|
|
{invoiceData.customerAddress.address2 && <div>{invoiceData.customerAddress.address2}</div>}
|
|
{invoiceData.customerMobile && <div>Mobile: {invoiceData.customerMobile}</div>}
|
|
{invoiceData.customerGSTIN && <div>GSTIN/UIN: {invoiceData.customerGSTIN}</div>}
|
|
{invoiceData.customerAddress.state && <div>State Name: {invoiceData.customerAddress.state}</div>}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Right - Invoice Details */}
|
|
<div style={{ flex: '1', fontSize: '10px' }}>
|
|
|
|
{/* Invoice No and Date */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000' }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Invoice No.</div>
|
|
<div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceNo}</div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }} >
|
|
<div>Dated</div>
|
|
<div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceDate}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delivery Note and Payment Terms */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note</div>
|
|
<div></div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Mode/Terms of Payment</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reference and Other References */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Reference No. & Date</div>
|
|
<div></div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Other References</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Buyer's Order */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Buyer's Order No.</div>
|
|
<div></div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Dated</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dispatch Details */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000', borderLeft: GlobaldummyData ? '1px solid #000' : "" }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatch Doc No.</div>
|
|
<div></div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note Date</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dispatched through and Destination */}
|
|
<div style={{ display: 'flex', borderBottom: '1px solid #000', minHeight: '25px' }}>
|
|
<div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatched through</div>
|
|
<div></div>
|
|
</div>
|
|
<div style={{ flex: '1', paddingLeft: '3px', borderLeft: "1px solid #000", minHeight: '25px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px', textAlign: 'left' }}>Destination</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Terms of Delivery */}
|
|
<div style={{ padding: '8px 6px', textAlign: 'left', minHeight: '35px' }}>
|
|
<div style={{ fontWeight: '700', fontSize: '9px' }}>Terms of Delivery</div>
|
|
<div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Continuation header for non-first pages */}
|
|
{!isFirstPage && (
|
|
<div style={{ textAlign: 'center', marginBottom: '10px', padding: '5px' }}>
|
|
<h3 style={{ margin: '0', fontSize: '16px', fontWeight: '700' }}>
|
|
{isFooterOnlyPage ? 'Tax Invoice' : 'Tax Invoice '}
|
|
</h3>
|
|
<div style={{ fontSize: '10px' }}>Invoice No: {invoiceData.invoiceNo}</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Items Table - Show only if there are items or not a footer-only page */}
|
|
{(dataChunk.length > 0 || !isFooterOnlyPage) && (
|
|
<div style={{
|
|
// borderBottom: isLastPage ? '1px solid #000' : 'none',
|
|
minHeight: '250px'
|
|
}}>
|
|
{/* Table Header */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
fontSize: '10px',
|
|
// borderRight: '1px solid #000',
|
|
borderBottom: '1px solid #000',
|
|
borderTop: '1px solid #000',
|
|
...tableHeaderStyle
|
|
}}>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SL.No</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Quantity</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>per</div>
|
|
<div style={{ padding: '8px 4px', textAlign: 'center' }}>Amount</div>
|
|
</div>
|
|
|
|
{/* Table Rows - Dynamic data from dataChunk */}
|
|
{(dataChunk && dataChunk.length > 0) ? (
|
|
<>
|
|
{dataChunk?.map((item, index) => (
|
|
<div key={index} style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")
|
|
? tableBodyStyle
|
|
: {}),
|
|
|
|
}}>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}>
|
|
<div style={{ fontWeight: '700', marginBottom: '2px', textAlign: 'left', fontSize: '15px' }}>{item.ProdName || 'Product Name'}</div>
|
|
{item.BrandName && <div style={{ fontSize: '9px', color: '#666', textAlign: 'left' }}>{item.BrandName}</div>}
|
|
</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>{item.HSN || ''}</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700', fontSize: '15px' }}>{item.Qty || 0} {item.UomName || 'NOS'}</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(item.Price || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>{item.UomName || 'NOS'}</div>
|
|
<div style={{ padding: '8px 4px', textAlign: 'right', fontWeight: '700', fontSize: '15px' }}>{Number(item.WithoutTaxRate || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
</div>
|
|
))}
|
|
{/* Tax summary */}
|
|
{isLastPage &&
|
|
(
|
|
<>
|
|
{/* Total without tax amount */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
fontSize: '11px',
|
|
fontWeight: '700',
|
|
minHeight: '22px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderTop: '1px solid #000' }}>
|
|
₹ {Number(invoiceData?.totalBillAmount).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</div>
|
|
</div>
|
|
{/* CGST */}
|
|
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
fontSize: '11px',
|
|
fontWeight: '700',
|
|
minHeight: '22px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>CGST</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
{<div style={{ padding: '6px 6px', textAlign: 'right', }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"}
|
|
</div>}
|
|
</div>}
|
|
{/* SGST */}
|
|
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
fontSize: '11px',
|
|
fontWeight: '700',
|
|
minHeight: '22px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>SGST</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }} ></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"}
|
|
</div>
|
|
</div>}
|
|
{/* IGST */}
|
|
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
fontSize: '11px',
|
|
fontWeight: '700',
|
|
minHeight: '22px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>IGST</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', }}>
|
|
{OrderDetailIGST && OrderDetailIGST.length > 0
|
|
? Number(OrderDetailIGST.reduce((sum, item) => sum + (item.IGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Rounding Off */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
// borderBottom: '1px solid #000',
|
|
fontSize: '11px',
|
|
fontWeight: '700',
|
|
minHeight: '22px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>ROUNDING OFF</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
|
|
<div style={{ padding: '6px 6px', textAlign: 'right', }}>
|
|
{RoundOffFun(roundOffValue)}
|
|
</div>
|
|
</div>
|
|
{Array.from({ length: chunkSize - dataChunk.length })?.map((_, idx) => (
|
|
<div key={`empty-${idx}`} style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
|
|
minHeight: '32px', // Adjust height as needed for your design
|
|
fontSize: '10px'
|
|
}}>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}> </div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}> </div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}> </div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}> </div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}> </div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}> </div>
|
|
<div style={{ padding: '8px 4px', textAlign: 'right' }}> </div>
|
|
</div>
|
|
))}
|
|
{/* Total */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderRight: '1px solid #000',
|
|
borderBottom: '1px solid #000',
|
|
borderTop: '1px solid #000',
|
|
|
|
fontWeight: '700',
|
|
minHeight: '30px'
|
|
}}>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '8px 6px', textAlign: 'right', fontSize: '12px', borderRight: '1px solid #000' }}>Total</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '8px 3px', textAlign: 'center', borderRight: '1px solid #000' }}>
|
|
{totalQuantity ||
|
|
(invoiceData.productDetails?.reduce((sum, item) => sum + (item.SalesQty || 0), 0)) ||
|
|
0} NOS
|
|
</div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
|
<div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
|
|
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
|
|
// Show empty row when no data
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
|
// borderBottom: '1px solid #000',
|
|
borderLeft: '1px solid #000',
|
|
borderRight: '1px solid #000',
|
|
fontSize: '10px',
|
|
minHeight: '40px'
|
|
}}>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>No items to display</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
|
|
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
|
|
<div style={{ padding: '8px 4px', textAlign: 'center' }}>-</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{/* Tax summary - Only on last page */}
|
|
|
|
{/* Footer content - Only on last page */}
|
|
{isLastPage && (
|
|
<>
|
|
{/* Amount in Words */}
|
|
<div style={{
|
|
padding: '8px 10px',
|
|
borderBottom: '1px solid #000',
|
|
fontSize: '11px',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div style={{
|
|
|
|
display: 'flex',
|
|
justifyContent: 'flex-start',
|
|
flexDirection: 'column',
|
|
}}>
|
|
<div style={{ fontWeight: '700', marginBottom: '3px' }}>Amount Chargeable (in words)</div>
|
|
<div style={{ fontWeight: '700', fontSize: '16px' }}>INR {numberToWords(Math.floor(invoiceData.grandTotal))} Only</div>
|
|
</div>
|
|
<p>E. & O.E</p>
|
|
</div>
|
|
|
|
|
|
{/* Tax Breakdown Table */}
|
|
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ borderBottom: '1px solid #000' }}>
|
|
|
|
{/* Tax Table Header - Main Headers */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '12% 15% 18% 18% 15% 22%',
|
|
borderBottom: '1px solid #000',
|
|
fontSize: '9px',
|
|
fontWeight: '700',
|
|
}}>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Taxable Value</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>CGST</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SGST/UTGST</div>
|
|
<div style={{ padding: '6px 4px', textAlign: 'center' }}>Tax Amount</div>
|
|
</div>
|
|
|
|
{/* Tax Table Sub-Headers */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
|
|
borderBottom: '1px solid #000',
|
|
fontSize: '8px',
|
|
fontWeight: '700',
|
|
}}>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
|
|
<div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
|
|
<div style={{ padding: '4px 2px', textAlign: 'center' }}></div>
|
|
</div>
|
|
|
|
{/* Tax Table Rows - Dynamic from OrderDetailGST */}
|
|
{OrderDetailGST && OrderDetailGST.length > 0 ? (
|
|
OrderDetailGST?.map((taxItem, index) => (
|
|
<div key={index} style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
|
|
borderBottom: '1px solid #000',
|
|
fontSize: '9px',
|
|
minHeight: '20px'
|
|
}}>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{taxItem.HSN || ''}</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.WithoutTaxRate || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.CGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.SGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
<div style={{ padding: '4px', textAlign: 'right' }}>{Number((taxItem.CGST || 0) + (taxItem.SGST || 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
// Show 0 values when no GST data
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
|
|
borderBottom: '1px solid #000',
|
|
fontSize: '9px',
|
|
minHeight: '20px'
|
|
}}>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
|
|
<div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
|
|
<div style={{ padding: '4px', textAlign: 'right' }}>0.00</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tax Table Total */}
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
|
|
fontSize: '9px',
|
|
fontWeight: '700',
|
|
minHeight: '22px',
|
|
}}>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Total</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"
|
|
}
|
|
</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"
|
|
}
|
|
</div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
|
|
<div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"
|
|
}
|
|
</div>
|
|
<div style={{ padding: '6px 4px', textAlign: 'right' }}>
|
|
{OrderDetailGST && OrderDetailGST.length > 0
|
|
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0) + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
: "0.00"
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
|
|
{/* Tax Amount in Words */}
|
|
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
|
padding: '3px 5px',
|
|
fontSize: '11px'
|
|
}}>
|
|
<div style={{ fontWeight: '700' }}>
|
|
Tax Amount (in words): INR {numberToWords(Math.floor(invoiceData.taxAmount || (OrderDetailGST?.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0), 0) || 0)))} Only
|
|
</div>
|
|
</div>}
|
|
|
|
{/* Bank Details and Signature */}
|
|
<div style={{ display: 'flex', minHeight: '120px', width: "100%" }}>
|
|
{/* Declaration */}
|
|
<div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", width: "50%" }}>
|
|
<div style={{
|
|
padding: '8px 10px',
|
|
fontSize: '11px'
|
|
}}>
|
|
<div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px', borderBottom: "1px solid #000", width: "max-content" }}>Declaration</div>
|
|
<div>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* Signature Section */}
|
|
<div style={{
|
|
flex: '1',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
width: "50%",
|
|
}}>
|
|
{/* Bank Details */}
|
|
<div style={{
|
|
flex: '1',
|
|
padding: '5px',
|
|
fontSize: '11px',
|
|
textAlign: "left"
|
|
}}>
|
|
<div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px' }}>Company's Bank Details</div>
|
|
<div><span style={{ fontWeight: '700' }}>A/c Holder's Name:</span> {invoiceData.companyName}</div>
|
|
<div><span style={{ fontWeight: '700' }}>Bank Name:</span> {invoiceData.bankDetails?.BankName || ""}</div>
|
|
<div><span style={{ fontWeight: '700' }}>A/c No.:</span> {invoiceData.bankDetails?.AccountNo || ""}</div>
|
|
<div><span style={{ fontWeight: '700' }}>Branch & IFS Code:</span> {invoiceData.bankDetails?.BankBranch || ""} & {invoiceData.bankDetails?.IFSCCode || ""}</div>
|
|
{invoiceData.bankDetails?.SWIFTCode && <div><span style={{ fontWeight: '700' }}>SWIFT Code:</span> {invoiceData.bankDetails?.SWIFTCode || ""}</div>}
|
|
</div>
|
|
<div style={{ borderTop: "1px solid #000", borderLeft: "1px solid #000", width: isMobile ? "100%" : "92%", padding: "15px" }}>
|
|
<div style={{ fontSize: '11px', fontWeight: '700', marginBottom: '10px', textAlign: "right" }}>for {invoiceData.companyName}</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'right', marginBottom: '10px' }}>
|
|
<div style={{
|
|
width: '70px',
|
|
height: '30px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: '5px',
|
|
}}>
|
|
<div style={{ fontSize: '8px', textAlign: 'center', fontWeight: '700', lineHeight: '1.1' }}>
|
|
{/* <div>DD</div>
|
|
<div>TECHNOLOGIES</div>
|
|
<div>ELECTRONICS</div> */}
|
|
</div>
|
|
</div>
|
|
<div style={{ fontSize: '10px', textAlign: 'right', fontWeight: '700' }}>Authorised Signatory</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
|
|
{/* Footer - Only on last page */}
|
|
{isLastPage && (
|
|
<div style={{
|
|
textAlign: 'center',
|
|
fontSize: '10px',
|
|
padding: '8px',
|
|
}}>
|
|
<div>This is a Computer Generated Invoice</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default PurPrintstyleInvoice;
|