From cace8e092e22207b9d31f24968a79966dac3d799 Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Thu, 5 Mar 2026 12:09:58 +0530
Subject: [PATCH] Implement dynamic header and table color functionality

---
 .../PrintTemplates/PrintStyleDCToInvoice8.jsx | 67 +++++++++++++++----
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.jsx b/src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.jsx
index df615aa..6b02227 100644
--- a/src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.jsx
+++ b/src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.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 PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice8 = ({ 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;
@@ -52,9 +52,36 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
     height: pageSize === "A5" ? "170mm" : "98vh",
     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>}
@@ -92,6 +119,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
       DCNo={DCNo}
       InvoiceDate={InvoiceDate}
       VehicleNo={VehicleNo}
+      headerStyle={headerStyle} 
     />
   );
 
@@ -110,7 +138,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
             >
               <div>
                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                <ProductTable data={dataChunk} />
+                <ProductTable data={dataChunk}  tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                 {isLastPage && (
                   <>
                     <hr className="footer-dotted-line" />
@@ -118,6 +146,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
                       TotalAmount={TotalAmount}
                       TaxAmount={TaxAmount}
                       GrandTotal={GrandTotal}
+                      netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails
@@ -135,12 +164,13 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
       ) : (
         <div className="container">
           <HeaderSection />
-          <ProductTable data={ProductDetails} />
+          <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
           <hr className="footer-dotted-line" />
           <Summary
             TotalAmount={TotalAmount}
             TaxAmount={TaxAmount}
             GrandTotal={GrandTotal}
+            netAmountStyle={netAmountStyle}
           />
           <hr className="footer-dotted-line" />
           <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@@ -155,8 +185,8 @@ export default PrintStyleDCToInvoice8;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
-  <div className="header-section">
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
+  <div className="header-section" style={{...headerStyle}}>
     <div className="header-section-wrapper">
       <div className="header-company">{branch?.CompName}</div>
       <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -177,7 +207,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' },
@@ -189,9 +219,9 @@ const ProductTable = ({ data }) => {
   ];
 
   return (
-    <table className="product-table">
+    <table className="product-table" >
       <thead>
-        <tr>
+        <tr style={{...tableHeaderStyle}}>
           {columns.map(col => (
             <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
           ))}
@@ -199,7 +229,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>
@@ -214,8 +255,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="summarydiv">
       <div>Subtotal</div>
       <span>:</span>