From 1f28743676a5bbe38d2696c6e77cb4568d795f65 Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Thu, 5 Mar 2026 13:53:57 +0530
Subject: [PATCH] Implement dynamic header and table color functionality

---
 .../PurchaseOrdPrintA4.jsx                    | 91 ++++++++++---------
 1 file changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/Pages/PurchaseOrder/PurchsasePrintStyle/PurchaseOrdPrintA4.jsx b/src/Pages/PurchaseOrder/PurchsasePrintStyle/PurchaseOrdPrintA4.jsx
index f6f5797..efbf0dc 100644
--- a/src/Pages/PurchaseOrder/PurchsasePrintStyle/PurchaseOrdPrintA4.jsx
+++ b/src/Pages/PurchaseOrder/PurchsasePrintStyle/PurchaseOrdPrintA4.jsx
@@ -153,7 +153,34 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
   const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
   const shouldFooterBeOnNewPage = lastChunkRows > 6;
 
- 
+  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,
+  }
 
   return (
 
@@ -169,7 +196,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
           <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: FormatTheme ? (isMobile ? "297mm" : "257mm") : "", }} className="print-page" key={chunkIndex}>
             <div className="page-headerA4Style11" style={{ textAlign: "center" }}>
 
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
+              <div style={{...headerStyle, display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
 
                 <div style={{
                   display: 'flex',
@@ -274,7 +301,7 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
                           <div className={FormatTheme ? "page" : ""} style={{ lineHeight: "1", fontSize: "13px" }}>
                             <table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
                               <thead>
-                                <tr style={{ background: '#373B44', color: '#fff', }}>
+                                <tr style={{ ...tableHeaderStyle}}>
                                   {GlobaldummyData
                                     ? GlobalSlNo && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>
                                     : SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
@@ -321,7 +348,18 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
 
                               <tbody>
                                 {dataChunk?.map((item, index) => (
-                                  <tr key={index}>
+                                  <tr key={index} 
+                                  style={
+                                      index % 2 !== 1 && rowtypeStyle === "even"
+                                        ? {
+                                          ...tableBodyStyle
+                                        }
+                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                          ? {
+                                            ...tableBodyStyle
+                                          }
+                                          : {}
+                                    }>
                                     {GlobaldummyData
                                       ? GlobalSlNo && (
                                         <td style={{ textAlign: "center" }}>
@@ -594,19 +632,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
                               }
 
 
-                              <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
-                                {GlobaldummyData ? GlobaltermsAndConditions &&
-                                  (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
-                                    <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
-                                      Terms & Conditions
-                                    </p>
-                                    <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                                      <li>Once goods are sold, they are not exchangeable or refundable.</li>
-                                      <li>Please check the product before leaving the counter.</li>
-                                    </ol>
-                                  </div>)
-                                  :
-                                  (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                              <div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
+                                {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                                     <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
                                       Terms & Conditions
                                     </p>
@@ -768,19 +795,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
                 }
 
 
-                <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
-                  {GlobaldummyData ? GlobaltermsAndConditions &&
-                    (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
-                      <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
-                        Terms & Conditions
-                      </p>
-                      <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                        <li>Once goods are sold, they are not exchangeable or refundable.</li>
-                        <li>Please check the product before leaving the counter.</li>
-                      </ol>
-                    </div>)
-                    :
-                    (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+                <div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
+                  {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                       <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
                         Terms & Conditions
                       </p>
@@ -932,19 +948,8 @@ const PurchaseOrdPrintA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image
               }
 
 
-              <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
-                {GlobaldummyData ? GlobaltermsAndConditions &&
-                  (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}>
-                    <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
-                      Terms & Conditions
-                    </p>
-                    <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                      <li>Once goods are sold, they are not exchangeable or refundable.</li>
-                      <li>Please check the product before leaving the counter.</li>
-                    </ol>
-                  </div>)
-                  :
-                  (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+              <div style={{...footerColorStyle, display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
+                {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                     <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>
                       Terms & Conditions
                     </p>