Implement dynamic header and table color functionality

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice7.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -53,8 +53,35 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
         maxHeight: "98vh"
     });
 
+     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 renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -95,6 +122,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+            headerStyle={headerStyle} 
         />
     );
 
@@ -245,13 +273,14 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                                 {isLastPage && (
                                     <>
                                         <Summary
                                             TotalAmount={TotalAmount}
                                             TaxAmount={TaxAmount}
                                             GrandTotal={GrandTotal}
+                                            netAmountStyle={netAmountStyle}
                                         />
                                         <hr className="footer-dotted-line" />
                                         <CustomerDetails
@@ -269,11 +298,12 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@@ -288,12 +318,12 @@ export default PrintStyleDCToInvoice7;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
-    <div className="header-section">
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
+    <div className="header-section" >
         <div style={{ letterSpacing: '5px', fontSize: '14px' }}>
             ********************************************************
         </div>
-        <div className="header-section-wrapper">
+        <div className="header-section-wrapper" style={{...headerStyle}}>
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
             <div>Mobile : {branch?.BrMobile}</div>
@@ -316,7 +346,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -328,9 +358,10 @@ const ProductTable = ({ data }) => {
     ];
 
     return (
-        <table className="product-table">
+        // <table className="product-table" >
+        <table>
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -338,7 +369,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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -353,8 +395,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
-    <div className="summary">
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="total-and-tax">
             <div><strong>Subtotal: ₹ {TotalAmount.toFixed(2)}</strong></div>
             <div><strong>Tax Amount: ₹ {TaxAmount.toFixed(2)}</strong></div>