Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
08af88cddf
commit
a23737615f
|
|
@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
|
|||
import { isMobile } from 'react-device-detect';
|
||||
import { extractLastNumberOrderId } from '../../../Services/Others';
|
||||
import moment from 'moment';
|
||||
import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
|
||||
import { GloabalDCtoInvoiceFieldDetails, GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
|
||||
|
||||
const TaxInvoicePrint = ({
|
||||
index,
|
||||
|
|
@ -16,8 +16,8 @@ const TaxInvoicePrint = ({
|
|||
BranchData,
|
||||
printDatas,
|
||||
BankDetails
|
||||
}) => {
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
}) => {
|
||||
const GlobaldummyData = useSelector(GloabalDCtoInvoiceFieldDetails);
|
||||
let BillName = printDatas?.PrintHdrName
|
||||
// Function to convert number to words
|
||||
const numberToWords = (num) => {
|
||||
|
|
@ -52,9 +52,9 @@ const TaxInvoicePrint = ({
|
|||
city: table2Data?.AddressDetails?.[0]?.City || "",
|
||||
state: table2Data?.AddressDetails?.[0]?.State || "",
|
||||
zip: table2Data?.AddressDetails?.[0]?.Zip || ""
|
||||
},
|
||||
},
|
||||
companyGSTIN: table2Data?.AddressDetails?.[0]?.CompGSTIN || BranchData?.BrGSTIN || "",
|
||||
companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail || BranchData?.companyEmail ||"",
|
||||
companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail || BranchData?.companyEmail || "",
|
||||
companyMobile: table2Data?.AddressDetails?.[0]?.BrMobile || "",
|
||||
companyMobile2: table2Data?.AddressDetails?.[0]?.BrMobile2 || "",
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ const TaxInvoicePrint = ({
|
|||
|
||||
// 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: {
|
||||
|
|
@ -82,20 +82,41 @@ const TaxInvoicePrint = ({
|
|||
// Totals - mapped from A4Standard
|
||||
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmount || 0),
|
||||
taxAmount: Number(OrderDetailGST || ''),
|
||||
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0),
|
||||
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
|
||||
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.GrandTotal || 0),
|
||||
// Bank Details - mapped from A4Standard
|
||||
bankDetails: BankDetails?.[0] || ""
|
||||
};
|
||||
|
||||
console.log(table2Data, "Date1Date1", invoiceData, )
|
||||
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 headerStyle = {
|
||||
backgroundColor: headerColor?.background,
|
||||
color: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: tableHeaderColor?.background,
|
||||
color: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: tableBodyColor?.background,
|
||||
color: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: footerColor?.background,
|
||||
color: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: netAmtColor?.background,
|
||||
color: netAmtColor?.font,
|
||||
}
|
||||
|
||||
let PageSize = printDatas?.PageSize
|
||||
|
||||
const TakeawayData = table2Data?.productDetails
|
||||
|
||||
const DineInData = table2Data?.productDetails
|
||||
|
||||
const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
|
||||
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
|
||||
: 0;
|
||||
|
|
@ -135,7 +156,7 @@ const TaxInvoicePrint = ({
|
|||
dataSource = [];
|
||||
}
|
||||
|
||||
console.log("Final DataSource:", table2Data, );
|
||||
console.log("Final DataSource:", table2Data,);
|
||||
|
||||
const paginatedChunks = [];
|
||||
|
||||
|
|
@ -206,7 +227,7 @@ const TaxInvoicePrint = ({
|
|||
{/* Header - Only on first page */}
|
||||
{isFirstPage && (
|
||||
<>
|
||||
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", ...headerStyle }}>
|
||||
<div></div>
|
||||
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
|
||||
<div>
|
||||
|
|
@ -233,10 +254,10 @@ const TaxInvoicePrint = ({
|
|||
textAlign: 'left'
|
||||
}}>
|
||||
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', }}>
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', color: headerColor?.font }}>
|
||||
{invoiceData.companyName}
|
||||
</div>
|
||||
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</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>
|
||||
|
|
@ -376,6 +397,7 @@ const TaxInvoicePrint = ({
|
|||
// 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>
|
||||
|
|
@ -394,6 +416,11 @@ const TaxInvoicePrint = ({
|
|||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
...(index % 2 === 0 && rowtypeStyle === "even"
|
||||
? tableBodyStyle
|
||||
: index % 2 === 1 && rowtypeStyle === "odd"
|
||||
? tableBodyStyle
|
||||
: {})
|
||||
|
||||
}}>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
|
||||
|
|
@ -432,7 +459,7 @@ const TaxInvoicePrint = ({
|
|||
</div>
|
||||
</div>
|
||||
{/* CGST */}
|
||||
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
|
||||
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -447,13 +474,13 @@ const TaxInvoicePrint = ({
|
|||
<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
|
||||
{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 && OrderDetailGST.length > 0 && <div style={{
|
||||
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -474,7 +501,7 @@ const TaxInvoicePrint = ({
|
|||
</div>
|
||||
</div>}
|
||||
{/* IGST */}
|
||||
{ OrderDetailGST && OrderDetailGST.length > 0 && (
|
||||
{OrderDetailGST && OrderDetailGST.length > 0 && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
|
|
@ -557,7 +584,7 @@ const TaxInvoicePrint = ({
|
|||
</div>
|
||||
<div style={{ borderRight: '1px solid #000' }}></div>
|
||||
<div style={{ borderRight: '1px solid #000' }}></div>
|
||||
<div style={{ padding: '8px 6px', textAlign: 'right', }}>
|
||||
<div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
|
||||
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -804,6 +831,7 @@ const TaxInvoicePrint = ({
|
|||
textAlign: 'center',
|
||||
fontSize: '10px',
|
||||
padding: '8px',
|
||||
...footerColorStyle
|
||||
}}>
|
||||
<div>This is a Computer Generated Invoice</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue