From b63567aa91e8ca6b444e5998a942fefe3386c57a Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Tue, 3 Mar 2026 19:59:22 +0530
Subject: [PATCH] Implement dynamic header and table color functionality

---
 .../PurPrintstyleInvoice.jsx                  | 103 +++++++++++++++---
 1 file changed, 89 insertions(+), 14 deletions(-)

diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx
index a83cdb9..6bd681e 100644
--- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx
+++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx
@@ -1,6 +1,19 @@
 
 import { useSelector } from 'react-redux';
-import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
+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';
@@ -18,6 +31,17 @@ const PurPrintstyleInvoice = ({
 }) => {
 
   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) => {
@@ -67,7 +91,7 @@ const PurPrintstyleInvoice = ({
 
     // 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: {
@@ -88,13 +112,16 @@ const PurPrintstyleInvoice = ({
     bankDetails: BankDetails?.[0] || null
   };
 
-  console.log(table2Data, "Date1Date1", invoiceData, )
+  console.log(table2Data, "Date1Date1", invoiceData,)
 
   let PageSize = printDatas?.PageSize
 
-  const TakeawayData = table2Data?.ProductDetails
-
-  const DineInData = table2Data?.ProductDetails
+  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)
@@ -135,7 +162,7 @@ const PurPrintstyleInvoice = ({
     dataSource = [];
   }
 
-  console.log("Final DataSource:",  table2Data, );
+  console.log("Final DataSource:", table2Data,);
 
   const paginatedChunks = [];
 
@@ -158,7 +185,51 @@ const PurPrintstyleInvoice = ({
   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={{
@@ -207,7 +278,7 @@ const PurPrintstyleInvoice = ({
           <>
             <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>
+              <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>
@@ -232,7 +303,7 @@ const PurPrintstyleInvoice = ({
                   textAlign: 'left'
                 }}>
 
-                  <div style={{ fontWeight: '700', fontSize: '15px', }}>
+                  <div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}>
                     {invoiceData.companyName}
                   </div>
                   <div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
@@ -374,6 +445,7 @@ const PurPrintstyleInvoice = ({
                 // 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>
@@ -392,6 +464,9 @@ const PurPrintstyleInvoice = ({
                       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>
@@ -430,7 +505,7 @@ const PurPrintstyleInvoice = ({
                           </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',
@@ -445,13 +520,13 @@ const PurPrintstyleInvoice = ({
                           <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',
@@ -472,7 +547,7 @@ const PurPrintstyleInvoice = ({
                           </div>
                         </div>}
                         {/* IGST */}
-                        { OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
+                        {OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
                           <div style={{
                             display: 'grid',
                             gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
@@ -555,7 +630,7 @@ const PurPrintstyleInvoice = ({
                           </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>