Implement dynamic header and table color functionality

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice1.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 PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
@@ -17,8 +17,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
     CustName,
     VehicleNo
   } = invoiceData;
-
+  const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
-  const fieldDetails = useSelector(GloabalFieldDetails);
   const signature = fieldDetails?.["signature"];
   const termsAndConditions = fieldDetails?.["terms&conditions"];
   const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -28,7 +27,6 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
   const pageSize = printDatas?.PageSize;
   const branch = AddressDetails[0];
   const logo = branch?.CompLogo;
-
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
   );
@@ -54,9 +52,37 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
     maxHeight: "97vh"
   });
 
+  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 HeaderSection = () => (
     <>
-      <Header logo={logo} branch={branch} />
+      <Header logo={logo} branch={branch} headerStyle={headerStyle} />
       <hr className="dotted-line" />
       <InvoiceMeta
         InvoiceNo={InvoiceNo}
@@ -73,10 +99,11 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
   const renderFooter = () => (
     <>
       <hr className="dotted-line" />
-      <Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
+      <Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
       {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
         <>
-          <hr className="dotted-line" />
+         <div style={{...footerColorStyle}}>
+           <hr className="dotted-line" />
           {notesText && <p className="notesText">{notesText}</p>}
           <div className="termsAndSignature">
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
@@ -99,6 +126,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
           {printGreeting?.SettingValue === "Y" && (
             <div className="printGreeting">Thank You Visit Again</div>
           )}
+         </div>
         </>
       )}
     </>
@@ -119,7 +147,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
             >
               <div>
                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                <ProductTable data={dataChunk} />
+                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
                 {!formatTheme && isFinalFooterPage && renderFooter()}
               </div>
               {formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@@ -129,7 +157,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
       ) : (
         <div className="container">
           <HeaderSection />
-          <ProductTable data={ProductDetails} />
+          <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
           {renderFooter()}
         </div>
       )}
@@ -141,8 +169,8 @@ export default PrintStyleDCToInvoice1;
 
 // -------------------- 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>
@@ -172,7 +200,7 @@ const InvoiceMeta = ({ InvoiceNo, DCNo, InvoiceDate, CustMobile, VehicleNo, Cust
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data, tableHeaderStyle, tableBodyStyle, rowtypeStyle }) => {
   const columns = [
     { label: "S.No", key: "sno", width: "5%" },
     { label: "Product", key: "ProdName", width: "20%" },
@@ -186,7 +214,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>
           ))}
@@ -194,7 +222,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>
@@ -209,8 +248,8 @@ const ProductTable = ({ data }) => {
   );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ 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>