Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintA4Standard.jsx

@@ -23,6 +23,17 @@ import {
     Globalnotes,
     GlobalthemeFormat,
     GlobalBillName,
+      GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from "../../../Features/ThemeChange/ThemeChange";
 import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss";
 import QRCode from "react-qr-code";
@@ -63,6 +74,12 @@ const PurPrintA4Standard = ({ index,
     const Amount = FieldDetails?.["Amount"];
     const HsnCode = FieldDetails?.["HsnCode"];
     const Qrcodet = FieldDetails?.["Qrcode"];
+     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 GlobalSlNo = useSelector(GlobalprintSlNo);
     const GlobalItem = useSelector(GlobalprintItem);
     const GlobalMRP = useSelector(GlobalprintMRP);
@@ -79,6 +96,17 @@ const PurPrintA4Standard = ({ index,
     const GlobalIsnotes = useSelector(Globalnotes);
     const GlobalthemeFormatr = useSelector(GlobalthemeFormat)
     const GlobalBilltext = useSelector(GlobalBillName)
+     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 keysLength = Object.keys(table2Data ?? {}).length;
     console.log(GlobalDiscount, Discount, "Discount");
 
@@ -118,10 +146,6 @@ const PurPrintA4Standard = ({ index,
 
     const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
 
-    const TakeawayData = table2Data?.productDetails?.filter(
-        (item) => item.BookingTypeName?.toLowerCase() === "takeaway"
-
-    );
     const productsData = table2Data?.[0]?.ProductDetails || [];
     const offers = table2Data?.OrderOfferDetails || [];
 
@@ -209,7 +233,51 @@ const PurPrintA4Standard = ({ index,
         );
     };
 
-   ;
+    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 (
@@ -565,18 +633,17 @@ const PurPrintA4Standard = ({ index,
                                 <div className={`invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "auto" : "275mm") : "", pageBreakInside: "avoid", }} key={chunkIndex}>
 
                                     {/* <div className="invoice-wrapper"> */}
-                                    {/* Header */}
+                                   
 
                                     {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
-                                        <div className="header" style={{ position: "relative", width: "100%" }}>
+                                        <div className="header" style={{ position: "relative", width: "100%", }}>
-                                        <div className="header-section">
+                                        <div className="header-section" style={{...headerStyle}}>
                                             <h1 className="company-name">{companyName}</h1>
                                             <p>{ table2Data?.customerAddress}</p>
                                             <div>Phone: {table2Data?.customerMobile}</div>
                                             <div>Email: {companyEmail}</div>
                                             {(companyGSTIN) && <div style={{ fontSize: "16px", fontWeight: "600" }}>GSTIN: {companyGSTIN}</div>}
                                         </div>
-
                                         {/* Invoice Title */}
                                         <div className="invoice-title">
 
@@ -594,9 +661,6 @@ const PurPrintA4Standard = ({ index,
                                                 </div>
                                             )}
                                         </div>
-
-
-                          
                                         {table2Data?.CustomerDetails?.length > 0 && <div className="billing-grid">
                                             <div className="billing-left">
                                                 <h3 className="section-title">Details of Receiver | Billed to</h3>
@@ -631,31 +695,39 @@ const PurPrintA4Standard = ({ index,
                                                 <thead>
                                                     <tr className="table-header">
                                                         {
-                                                            SLNO == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
+                                                            SLNO == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>}
-
                                                         {
-                                                            Item == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>Item</th>}
+                                                            Item == true && <th className="table-header-cell" style={{...tableHeaderStyle, fontFamily: "sans-serif" }}>Item</th>}
-
-
                                                         {
-                                                            HsnCode == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>HSN </th>}
+                                                            HsnCode == true && <th className="table-header-cell" style={{ ...tableHeaderStyle,fontFamily: "sans-serif" }}>HSN </th>}
 
-                                                        { Quantity == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
+                                                        { Quantity == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>}
 
-                                                        { MRP == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
+                                                        { MRP == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>}
 
-                                                        { Rate == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
+                                                        { Rate == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>}
 
-                                                        { Discount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
+                                                        { Discount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>}
 
-                                                        { Amount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
+                                                        { Amount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>}
 
                                                     </tr>
 
                                                 </thead>
                                                 <tbody>
                                                     {(dataChunk || []).map((item, idx) => (
-                                                        <tr key={idx} className="table-row">
+                                                        <tr key={idx} className="table-row"
+                                                        style={
+                                idx % 2 !== 1 && rowtypeStyle === "even"
+                                  ? {
+                                    ...tableBodyStyle
+                                  }
+                                  : idx % 2 === 1 && rowtypeStyle === "odd"
+                                    ? {
+                                      ...tableBodyStyle
+                                    }
+                                    : {}
+                              }>
                                                             {SLNO == true && (
                                                                 <td className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>
                                                                     {chunkIndex * chunkSize + idx + 1}
@@ -1223,7 +1295,7 @@ const PurPrintA4Standard = ({ index,
                     <div id={`SQA4Standard`} className="invoice-container">
                         <div className="invoice-wrapper">
                             {/* Header */}
-                            <div className="header-section">
+                            <div className="header-section" style={{...headerStyle}}>
                                 <h1 className="company-name">{GlobaldummyData ? "Company Name" : companyName}</h1>
                                 <p>{companyAddress}</p>
                                 <div>Phone: {GlobaldummyData ? "999999XXXX" : companyPhone}</div>
@@ -1340,62 +1412,52 @@ const PurPrintA4Standard = ({ index,
                                         <tr className="table-header">
                                             {GlobaldummyData
                                                 ? GlobalSlNo && <th className="table-header-cell">S.No</th> :
-                                                SLNO == true && <th className="table-header-cell">S.No</th>}
+                                                SLNO == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">S.No</th>}
 
                                             {GlobaldummyData
                                                 ? GlobalItem && <th className="table-header-cell">Item</th> :
-                                                Item == true && <th className="table-header-cell">Item</th>}
+                                                Item == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">Item</th>}
-
-
                                             {GlobaldummyData
                                                 ? GlobalHsnCode && <th className="table-header-cell">HSN </th> :
-                                                HsnCode == true && <th className="table-header-cell">HSN </th>}
+                                                HsnCode == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">HSN </th>}
-
                                             {GlobaldummyData
                                                 ? GlobalQuantity && <th className="table-header-cell">Qty</th>
-                                                : Quantity == true && <th className="table-header-cell">Qty</th>}
+                                                : Quantity == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Qty</th>}
 
                                             {/* <th className="table-header-cell">UOM</th>
                   <th className="table-header-cell">UOM</th> */}
-
                                             {GlobaldummyData
                                                 ? GlobalMRP && <th className="table-header-cell">MRP</th>
-                                                : MRP == true && <th className="table-header-cell">MRP</th>}
+                                                : MRP == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">MRP</th>}
 
                                             {GlobaldummyData
                                                 ? GlobalRate && <th className="table-header-cell">Rate</th>
-                                                : Rate == true && <th className="table-header-cell">Rate</th>}
+                                                : Rate == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Rate</th>}
 
                                             {GlobaldummyData
                                                 ? GlobalDiscount && <th className="table-header-cell">Dis</th>
-                                                : Discount == true && <th className="table-header-cell">Dis</th>}
+                                                : Discount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Dis</th>}
 
                                             {GlobaldummyData
                                                 ? GlobalAmount && <th className="table-header-cell">Amount</th>
-                                                : Amount == true && <th className="table-header-cell">Amount</th>}
+                                                : Amount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Amount</th>}
-
-                                            {/* <th className="table-header-cell">Taxable</th>
-                  <th className="table-header-cell-center" colSpan="2">IGST</th>
-                  <th className="table-header-cell-last">Total</th> */}
                                         </tr>
-                                        {/* <tr className="table-header">
+                                     
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell"></th>
-                  <th className="table-header-cell-center">Rate</th>
-                  <th className="table-header-cell-center">Amount</th>
-                  <th className="table-header-cell-last"></th>
-                </tr> */}
                                     </thead>
                                     <tbody>
                                         {((GlobaldummyData ? products : productsData) || []).map((item, idx) => (
-                                            <tr key={idx} className="table-row">
+                                            <tr key={idx} className="table-row"
+                                            style={
+                                idx % 2 !== 1 && rowtypeStyle === "even"
+                                  ? {
+                                    ...tableBodyStyle
+                                  }
+                                  : idx % 2 === 1 && rowtypeStyle === "odd"
+                                    ? {
+                                      ...tableBodyStyle
+                                    }
+                                    : {}
+                              }>
                                                 {GlobaldummyData
                                                     ? GlobalSlNo && (
                                                         <td className="table-header-cell" style={{ textAlign: "center" }}>
@@ -1513,6 +1575,7 @@ const PurPrintA4Standard = ({ index,
                                     fontSize: "10px",
                                     flexWrap: "wrap",
                                     gap: "2px",
+                                    ...netAmountStyle
                                 }}
                             >
                                 <div
@@ -1537,20 +1600,13 @@ const PurPrintA4Standard = ({ index,
                                     {" "}
                                     Qty:{GlobaldummyData ? "9" : totalQuantity}
                                 </div>
-                                {/* {ExtraChargeTotal > 0 && <p style={{ margin: 0, padding: 0, fontSize: "12px" }}> Extra Charges:{ExtraChargeTotal}</p>} */}
-
-
-                                {/* {(TotalOfferAmount > 0 || table2Data?.OverallDisc > 0) && (
-                                    <p style={{ margin: 0, padding: 0, fontSize: "10px", fontWeight: "600" }}>
-                                        Off :{(Number(TotalOfferAmount || 0) + Number(table2Data?.OverallDisc || 0)).toFixed(2)}
-                                    </p>
-                                )} */}
                                 <div
                                     style={{
                                         margin: 0,
                                         padding: 0,
                                         fontSize: "10px",
                                         fontWeight: "600",
+                                        
                                     }}
                                 >
                                     Amount :₹