Implement dynamic header and table color functionality

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,
@@ -17,7 +17,7 @@ const TaxInvoicePrint = ({
   printDatas,
   BankDetails
 }) => {
-  const GlobaldummyData = useSelector(GlobalPritdummyData);
+  const GlobaldummyData = useSelector(GloabalDCtoInvoiceFieldDetails);
   let BillName = printDatas?.PrintHdrName
   // Function to convert number to words
   const numberToWords = (num) => {
@@ -88,14 +88,35 @@ const TaxInvoicePrint = ({
     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;
@@ -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>
@@ -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>