From a23737615fd16c7e8cc278b6c0f93db5e4617f2b Mon Sep 17 00:00:00 2001 From: Srinath Date: Thu, 5 Mar 2026 12:13:30 +0530 Subject: [PATCH] Implement dynamic header and table color functionality --- .../PrintTemplates/TaxInvoicePrint.jsx | 72 +++++++++++++------ 1 file changed, 50 insertions(+), 22 deletions(-) diff --git a/src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx b/src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx index 99efee3..a8b0c3a 100644 --- a/src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx +++ b/src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx @@ -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 && ( <> -
+

{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}

@@ -233,10 +254,10 @@ const TaxInvoicePrint = ({ textAlign: 'left' }}> -
+
{invoiceData.companyName}
-
{invoiceData.companyspecname}
+
{invoiceData.companyspecname}
{invoiceData.companyAddress.address1}
{invoiceData.companyAddress.address2}
{invoiceData.companyAddress.city} {invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}
@@ -376,6 +397,7 @@ const TaxInvoicePrint = ({ // borderRight: '1px solid #000', borderBottom: '1px solid #000', borderTop: '1px solid #000', + ...tableHeaderStyle }}>
Sl.No
Description of Goods
@@ -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 + : {}) }}>
{chunkIndex * chunkSize + index + 1}
@@ -432,7 +459,7 @@ const TaxInvoicePrint = ({
{/* CGST */} - {OrderDetailGST && OrderDetailGST.length > 0 &&
0 &&
{
- { 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"}
}
} {/* SGST */} - { OrderDetailGST && OrderDetailGST.length > 0 &&
0 &&
} {/* IGST */} - { OrderDetailGST && OrderDetailGST.length > 0 && ( + {OrderDetailGST && OrderDetailGST.length > 0 && (
-
+
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
@@ -804,6 +831,7 @@ const TaxInvoicePrint = ({ textAlign: 'center', fontSize: '10px', padding: '8px', + ...footerColorStyle }}>
This is a Computer Generated Invoice