From 83fe92d412923521bce5e8c2561265a088ca624b Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Tue, 3 Mar 2026 19:59:06 +0530
Subject: [PATCH] Implement dynamic header and table color functionality

---
 .../PurchasePrintTemplate/PurPrintStyleA5.jsx | 331 +++++++++++-------
 1 file changed, 206 insertions(+), 125 deletions(-)

diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx
index 9f184f6..97e6aea 100644
--- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx
+++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx
@@ -10,7 +10,21 @@ import { printDiv } from "../../../Services/Others";
 // import HpyImg from "../../../Images/happyemoji.png"
 import '../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss'
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails, GlobalBillName, Globalnotes, GlobalprintAmount, GlobalprintDiscount, GlobalprintHsnCode, GlobalprintItem, GlobalprintMRP, GlobalprintQrcodet, GlobalprintQuantity, GlobalprintRate, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat } from '../../../Features/ThemeChange/ThemeChange';
+import {
+  Globalnotes, GlobalprintRate, GlobalprintSignature, GlobalprinttermsAndConditions, GlobalSignatureImage, GlobalthemeFormat,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
+  GlobalPritdummyData,
+} from '../../../Features/ThemeChange/ThemeChange';
 import signature from "../../../Images/signatureimage.jpg"
 import QRCode from 'react-qr-code';
 import { isMobile } from 'react-device-detect';
@@ -21,13 +35,24 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
   const GlobalSignature = useSelector(GlobalprintSignature);
   const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
   // const FieldDetails = useSelector(GloabalFieldDetails);
-     const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
-        acc[item.ConfigName] = true;
-        return acc;
-    }, {});
+  const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
+    acc[item.ConfigName] = true;
+    return acc;
+  }, {});
   const GlobalIsnotes = useSelector(Globalnotes);
   const GlobalSignatureImages = useSelector(GlobalSignatureImage);
-  console.log(FieldDetails, "FieldDetails")
+  const GlobaldummyData = useSelector(GlobalPritdummyData);
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+  const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
+  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
+  const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
+  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
+  const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
+  const SelectedRowType = useSelector(GlobalRowType);
+  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
+  const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
+  const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
+  const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
   const SLNO = FieldDetails?.["Sl.No"];
   const Item = FieldDetails?.["Item"];
   const MRP = FieldDetails?.["MRP"];
@@ -40,6 +65,12 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
   const Signature = FieldDetails?.["signature"];
   const TermsnAdCondition = FieldDetails?.["terms&conditions"];
   const isNotes = FieldDetails?.["Notes"];
+  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 currentDate = new Date();
   console.log(FieldDetails, "FieldDetails")
@@ -88,7 +119,51 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
   }
   const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
   const shouldFooterBeOnNewPage = lastChunkRows > 6;
+  const headerStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedHeaderColor
+      : headerColor?.background,
 
+    color: GlobaldummyData
+      ? SelectedHeaderFontColor
+      : headerColor?.font,
+  }
+  const tableHeaderStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableHeaderColor
+      : tableHeaderColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedTableHeaderFontColor
+      : tableHeaderColor?.font,
+  }
+  const tableBodyStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableBodyColor
+      : tableBodyColor?.background,
+    color: GlobaldummyData
+      ? SelectedTableBodyFontColor
+      : tableBodyColor?.font,
+  }
+  const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
+  const footerColorStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableFooterColor
+      : footerColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedTableFooterFontColor
+      : footerColor?.font,
+  }
+  const netAmountStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedNetAmountColor
+      : netAmtColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedNetAmountFontColor
+      : netAmtColor?.font,
+  }
   return (
 
     <div style={{
@@ -100,10 +175,10 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
 
       <div className="PrintA4Style11-MasterDiv" style={{ position: "relative", width: "100%", minHeight: isMobile ? '297mm' : "257mm" }} id={`SQPrintStyleA5`}>
         {paginatedChunks.map((dataChunk, chunkIndex) => (
-          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height:isMobile ? (FormatTheme ? "297mm" : "") : '257mm' }} className="print-page" key={chunkIndex}>
+          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: isMobile ? (FormatTheme ? "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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', ...headerStyle }}>
 
                 <div style={{
                   display: 'flex',
@@ -113,20 +188,20 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                   borderBottom: '1px solid black'
                 }}>
                   {/* Logo Image */}
-                  {/* {base64Image && (
-                        <div style={{ marginRight: '20px' }}>
-                          <img
-                            className='PrintA4Style11-BrandImage'
-                            src={base64Image}
-                            alt='Brand Logo'
-                            style={{
-                              width: '100px',
-                              height: 'auto',
-                              objectFit: 'contain'
-                            }}
-                          />
-                        </div>
-                      )} */}
+                  {base64Image && (
+                    <div style={{ marginRight: '20px' }}>
+                      <img
+                        className='PrintA4Style11-BrandImage'
+                        src={base64Image}
+                        alt='Brand Logo'
+                        style={{
+                          width: '100px',
+                          height: 'auto',
+                          objectFit: 'contain'
+                        }}
+                      />
+                    </div>
+                  )}
 
                   {/* Store Info */}
                   <div style={{
@@ -139,7 +214,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                       fontSize: 'clamp(1.5rem, 2.5vw, 2rem)',
                       marginBottom: '4px'
                     }}>
-                    {table2Data?.[0]?.BranchName}
+                      {table2Data?.[0]?.BranchName}
                     </div>
 
                     {/* Address */}
@@ -157,7 +232,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                         return <div key={index}>{parts}</div>;
                       })}
                       <br />
-                       Mobile: +91 {table2Data?.customerMobile}
+                      Mobile: +91 {table2Data?.customerMobile}
                     </div>
 
                     {/* Order Type */}
@@ -167,19 +242,6 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                   </div>
                 </div>
 
-
-                {/* <div >
-                  <div style={{ marginTop: '4px', fontSize: '13px', fontWeight: 600 }}>
-                    {table2Data?.OrderType === "E"
-                      ? "Estimate"
-                      : (GlobaldummyData
-                        ? "Cash"
-                        : PaymentStatusSuccess?.length === 1
-                          ? PaymentStatusSuccess?.[0]?.PaymentTypeName
-                          : "") + table2Data?.OrderId && "Cash: " + extractLastNumberOrderId(table2Data?.OrderId, table2Data?.FYStatus)} {GlobaldummyData && "685"}
-                  </div>
-                </div> */}
-
               </div>
 
 
@@ -211,7 +273,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
 
                   </div>
 
-                  <table className="A4TableStyle11" style={{ width: '100%',marginTop:"2rem" }}>
+                  <table className="A4TableStyle11" style={{ width: '100%', marginTop: "2rem" }}>
                     <thead>
                       <tr>
                         <td>
@@ -229,21 +291,21 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                             <table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'>
                               <thead>
                                 <tr style={{ background: '#373B44', color: '#fff', }}>
-                                  {SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>}
-                                  {Item == true && <th>Item</th>}
+                                  {SLNO == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>S.No</th>}
+                                  {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
                                   {HsnCode == true && (
-                                    <th style={{ width: '10%', textAlign: "center" }}>HSN</th>
+                                    <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>HSN</th>
                                   )}
                                   {Quantity == true && (
-                                    <th style={{ width: '10%', textAlign: "center" }}>Qty</th>
+                                    <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Qty</th>
                                   )}
-                                  {MRP == true && <th style={{ width: '10%', textAlign: "center" }}>MRP</th>}
-                                  {Rate == true && <th style={{ width: '10%', textAlign: "center" }}>Rate</th>}
+                                  {MRP == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>MRP</th>}
+                                  {Rate == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Rate</th>}
                                   {Discount == true && (
-                                    <th style={{ width: '10%', textAlign: "center" }}>Dis </th>
+                                    <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Dis </th>
                                   )}
                                   {Amount == true && (
-                                    <th style={{ width: '10%', textAlign: "center", textAlign: "right" }}>
+                                    <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center", textAlign: "right" }}>
                                       Amt
                                     </th>
                                   )}
@@ -252,7 +314,18 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
 
                               <tbody>
                                 {dataChunk?.map((item, index) => (
-                                  <tr key={index}>
+                                  <tr key={index}
+                                    style={
+                                      index % 2 !== 1 && rowtypeStyle === "even"
+                                        ? {
+                                          ...tableBodyStyle
+                                        }
+                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                          ? {
+                                            ...tableBodyStyle
+                                          }
+                                          : {}
+                                    }>
                                     {SLNO == true && (
                                       <td style={{ textAlign: "center" }}>
                                         {chunkIndex * chunkSize + index + 1}
@@ -357,7 +430,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                                         {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                                       </div>
                                     </div>
-                                    <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
+                                    <div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
                                   </div>
                                 </div>
 
@@ -428,33 +501,36 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                                   <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
                                 </div>
                               </>
-                              {Notestext && (
-                                <div>
-                                  <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
-                                  <hr className="PrintA4Style11-print-dottline" />
+                              <div style={{ ...footerColorStyle }}>
+                                {Notestext && (
+                                  <div>
+                                    <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
+                                    <hr className="PrintA4Style11-print-dottline" />
+                                  </div>
+                                )}
+
+
+                                <div style={{ 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>
+                                      <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
+                                        {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
+                                      </ol>
+                                    </div>
+                                  )}
+                                  {Signature == true && (
+                                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                                      <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
+                                      <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
+                                    </div>
+                                  )}
+
                                 </div>
-                              )}
-
-
-                              <div style={{ 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>
-                                    <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                                      {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
-                                    </ol>
-                                  </div>
-                                )}
-                                {Signature == true && (
-                                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
-                                    <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
-                                    <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
-                                  </div>
-                                )}
-
                               </div>
+
                             </div>}
 
                             <hr className="PrintA4Style11-print-dottline" />
@@ -509,7 +585,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                           {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                         </div>
                       </div>
-                      <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
+                      <div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px",  textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div>
                     </div>
                   </div>
 
@@ -580,32 +656,34 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                     <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
                   </div>
                 </>
-                {Notestext && (
-                  <div>
-                    <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
-                    <hr className="PrintA4Style11-print-dottline" />
+                <div style={{ ...footerColorStyle }}>
+                  {Notestext && (
+                    <div>
+                      <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
+                      <hr className="PrintA4Style11-print-dottline" />
+                    </div>
+                  )}
+
+
+                  <div style={{ 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>
+                        <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
+                          {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
+                        </ol>
+                      </div>
+                    )}
+                    {Signature == true && (
+                      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                        <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
+                        <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
+                      </div>
+                    )}
+
                   </div>
-                )}
-
-
-                <div style={{ 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>
-                      <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                        {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
-                      </ol>
-                    </div>
-                  )}
-                  {Signature == true && (
-                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
-                      <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
-                      <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
-                    </div>
-                  )}
-
                 </div>
               </div>
             )}
@@ -648,7 +726,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                         {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                       </div>
                     </div>
-                    <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div>
+                    <div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div>
                   </div>
                 </div>
 
@@ -719,33 +797,36 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t
                   <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div>
                 </div>
               </>
-              {Notestext && (
-                <div>
-                  <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
-                  <hr className="PrintA4Style11-print-dottline" />
+              <div style={{ ...footerColorStyle }}>
+                {Notestext && (
+                  <div>
+                    <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p>
+                    <hr className="PrintA4Style11-print-dottline" />
+                  </div>
+                )}
+
+
+                <div style={{ 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>
+                      <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
+                        {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
+                      </ol>
+                    </div>
+                  )}
+                  {Signature == true && (
+                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                      <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
+                      <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
+                    </div>
+                  )}
+
                 </div>
-              )}
-
-
-              <div style={{ 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>
-                    <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}>
-                      {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))}
-                    </ol>
-                  </div>
-                )}
-                {Signature == true && (
-                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
-                    <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
-                    <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
-                  </div>
-                )}
-
               </div>
+
             </div>
           </div>
         )}