Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
e16cd5b9a7
commit
0103a3c77e
|
|
@ -16,7 +16,7 @@ const PurchaseOrdInvoice = ({
|
|||
BranchData,
|
||||
printDatas,
|
||||
BankDetails
|
||||
}) => {
|
||||
}) => {
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
let BillName = printDatas?.PrintHdrName
|
||||
// Function to convert number to words
|
||||
|
|
@ -52,9 +52,9 @@ const PurchaseOrdInvoice = ({
|
|||
city: BranchData?.City || "",
|
||||
state: BranchData?.State || "",
|
||||
zip: BranchData?.Zip || ""
|
||||
},
|
||||
},
|
||||
companyGSTIN: BranchData?.CompGSTIN || BranchData?.BrGSTIN || "",
|
||||
companyEmail: BranchData?.companyEmail || BranchData?.companyEmail ||"",
|
||||
companyEmail: BranchData?.companyEmail || BranchData?.companyEmail || "",
|
||||
companyMobile: BranchData?.BrMobile || "",
|
||||
companyMobile2: BranchData?.BrMobile2 || "",
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ const PurchaseOrdInvoice = ({
|
|||
|
||||
// Customer Details - mapped from A4Standard CustomerDetails array
|
||||
customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustSuppName
|
||||
|| "",
|
||||
|| "",
|
||||
customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.BrMobile || "",
|
||||
customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
|
||||
customerAddress: {
|
||||
|
|
@ -82,13 +82,13 @@ const PurchaseOrdInvoice = ({
|
|||
// Totals - mapped from A4Standard
|
||||
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt || 0),
|
||||
taxAmount: Number(OrderDetailGST),
|
||||
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0),
|
||||
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
|
||||
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0),
|
||||
// Bank Details - mapped from A4Standard
|
||||
bankDetails: BankDetails?.[0] || ""
|
||||
};
|
||||
|
||||
console.log(printDatas, "Date1Date1", invoiceData, )
|
||||
console.log(printDatas, "Date1Date1", invoiceData,)
|
||||
|
||||
let PageSize = printDatas?.PageSize
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ const PurchaseOrdInvoice = ({
|
|||
dataSource = [];
|
||||
}
|
||||
|
||||
console.log("Final DataSource:", table2Data, );
|
||||
console.log("Final DataSource:", table2Data,);
|
||||
|
||||
const paginatedChunks = [];
|
||||
|
||||
|
|
@ -159,6 +159,36 @@ const PurchaseOrdInvoice = ({
|
|||
paginatedChunks.push([]); // Empty chunk for footer-only page
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div id={`TaxInvoice`} style={{
|
||||
|
|
@ -205,7 +235,7 @@ const PurchaseOrdInvoice = ({
|
|||
{/* 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>
|
||||
|
|
@ -232,7 +262,7 @@ const PurchaseOrdInvoice = ({
|
|||
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>
|
||||
|
|
@ -375,6 +405,7 @@ const PurchaseOrdInvoice = ({
|
|||
// borderRight: '1px solid #000',
|
||||
borderBottom: '1px solid #000',
|
||||
borderTop: '1px solid #000',
|
||||
...tableHeaderStyle
|
||||
}}>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SI.No</div>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
|
||||
|
|
@ -393,6 +424,11 @@ const PurchaseOrdInvoice = ({
|
|||
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>
|
||||
|
|
@ -431,7 +467,7 @@ const PurchaseOrdInvoice = ({
|
|||
</div>
|
||||
</div>
|
||||
{/* CGST */}
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -446,13 +482,13 @@ const PurchaseOrdInvoice = ({
|
|||
<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[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -473,7 +509,7 @@ const PurchaseOrdInvoice = ({
|
|||
</div>
|
||||
</div>}
|
||||
{/* IGST */}
|
||||
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
|
|
@ -556,7 +592,7 @@ const PurchaseOrdInvoice = ({
|
|||
</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>
|
||||
|
|
@ -803,6 +839,7 @@ const PurchaseOrdInvoice = ({
|
|||
textAlign: 'center',
|
||||
fontSize: '10px',
|
||||
padding: '8px',
|
||||
...footerColorStyle
|
||||
}}>
|
||||
<div>This is a Computer Generated Invoice</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue