Implement dynamic header and table color functionality

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoiceA4Standard.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }) => {
@@ -19,7 +19,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
     } = invoiceData;
     console.log(invoiceData, "invoiceData")
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -48,6 +48,33 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -67,6 +94,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                 CustMobile={CustMobile}
                 CustName={CustName}
                 VehicleNo={VehicleNo}
+                 headerStyle={headerStyle} 
             />
         </>
     );
@@ -86,7 +114,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                         <hr />
                     </div>}
                     {termsAndConditions && termsAndConditionsData?.length > 0 && (
-                        <div className="termsAndConditions">
+                        <div className="termsAndConditions" style={{...footerColorStyle}}>
                             <p className="termsAndConditionsHead">Terms & Conditions</p>
                             <ol className="termsAndConditionsList">
                                 {termsAndConditionsData.map((item, idx) => (
@@ -131,8 +159,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
-                                {isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />}
+                                {isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>}
                                 {!formatTheme && isFinalFooterPage && renderFooter()}
                             </div>
                             {formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@@ -142,8 +170,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
-                    <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
+                    <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
                     {renderFooter()}
                 </div>
             )}
@@ -155,9 +183,9 @@ export default PrintStyleDCToInvoiceA4Standard;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch,headerStyle }) => (
     <>
-        <div className="header">
+        <div className="header" style={{...headerStyle}}>
             {/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
             <div className="headerText">
                 <div className="companyName">{branch.CompName}</div>
@@ -227,7 +255,7 @@ const InvoiceAmountWords = ({ amount }) => {
     );
 };
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%" },
         { label: "Product", key: "ProdName", width: "20%" },
@@ -241,7 +269,7 @@ const ProductTable = ({ data }) => {
     return (
         <table className="productTable">
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
                     ))}
@@ -249,7 +277,18 @@ const ProductTable = ({ data }) => {
             </thead>
             <tbody>
                 {data.map((prod, index) => (
-                    <tr key={prod.UniqueId}>
+                    <tr key={prod.UniqueId}
+                    style={
+                                      index % 2 !== 1 && rowtypeStyle === "even"
+                                        ? {
+                                          ...tableBodyStyle
+                                        }
+                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                          ? {
+                                            ...tableBodyStyle
+                                          }
+                                          : {}
+                                    }>
                         <td>{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td>{prod.ProdVariantName}</td>
@@ -264,9 +303,9 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
     <>
-        <div className="summary">
+        <div className="summary" style={{...netAmountStyle}}> 
             <div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
             <div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
             <div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>