Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle4.jsx

@@ -4,6 +4,17 @@ import {
     GlobalPritdummyData,
     changeReprintDataFound,
     GlobalprinttermsAndConditions,
+    GlobalSelectedPrintHeaderColor,
+    GlobalSelectedPrintHeaderFontColor,
+    GlobalSelectedTableHeaderColor,
+    GlobalSelectedTableHeaderFontColor,
+    GlobalSelectedTableBodyColor,
+    GlobalSelectedTableBodyFontColor,
+    GlobalRowType,
+    GlobalSelectedFooterColor,
+    GlobalSelectedFooterFontColor,
+    GlobalSelectedNetAmountColor,
+    GlobalSelectedNetAmountFontColor,
 } from "../../../Features/ThemeChange/ThemeChange";
 import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss"
 import { extractLastNumber } from "../../../Services/Others";
@@ -28,11 +39,20 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
     const Rate = FieldDetails?.["Rate"];
     const Amount = FieldDetails?.["Amount"];
     const HsnCode = FieldDetails?.["HsnCode"];
-
-
     const GlobaldummyData = useSelector(GlobalPritdummyData);
     const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
-
+//
+     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);
     
     let TermsAndConditions = printDatas?.TermsandConditions
     let SignatureImg = printDatas?.Signature
@@ -42,7 +62,13 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
     let PageSize = printDatas?.PageSize
     const Signature = FieldDetails?.["signature"];
     const TermsnAdCondition = FieldDetails?.["terms&conditions"];
-
+    //
+ 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 keysLength = Object.keys(table2Data ?? {}).length;
 
@@ -58,19 +84,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
     const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;
 
     const TakeawayData = table2Data?.[0]?.ProductDetails
-    console.log(TakeawayData, "TakeawayData")
-
-
-
-
-
     let TotalOfferAmount = 0;
-
-    // Calculate SalesWiseOffers total amount
-
-
-
-
     const chunkSize = PageSize == "A5" ? 11 : 16;
 
     let dataSource = table2Data?.[0]?.ProductDetails;
@@ -85,6 +99,52 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
     }
     const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
+//
+     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 (
         <>
             {FormatTheme ?
@@ -95,7 +155,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
 
                             {/* <div className="header" style={{ position:  "fixed", top: 0, width: "100%" }}> */}
                             <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
-                                <div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column' }}>
+                                <div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column',...headerStyle, }}>
                                     <div style={{ fontSize: '20px', fontWeight: '600', width: '100%', textAlign: 'center' }}>{table2Data?.[0]?.BrName}</div>
                                     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 600 }}>
                                         {
@@ -129,20 +189,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                             <table className="PrintStyle4-print-table">
                                                 <thead>
                                                     <tr>
-                                                        {SLNO && <th style={{ width: '10px' }}>S.No</th>}
+                                                        {SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>}
-                                                        {Item && <th>Item</th>}
+                                                        {Item && <th style={{...tableHeaderStyle}}>Item</th>}
-                                                        {Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>}
+                                                        {Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>}
-                                                        {HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>}
+                                                        {HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>}
-                                                        {MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>}
+                                                        {MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>}
-                                                        {Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>}
+                                                        {Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>}
-                                                        {Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>}
+                                                        {Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>}
-                                                        {Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>}
+                                                        {Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>}
                                                     </tr>
                                                 </thead>
                                                 <tbody>
                                                     {dataChunk?.map((item, index) => {
                                                         return (
-                                                            <tr key={index}>
+                                                            <tr key={index}
+                                                             style={
+                                                                    index % 2 !== 1 && rowtypeStyle === "even"
+                                                                        ? {
+                                                                            ...tableBodyStyle
+                                                                        }
+                                                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                                                            ? {
+                                                                                ...tableBodyStyle
+                                                                            }
+                                                                            : {}
+                                                                }>
                                                                 {SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
                                                                 {Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}>
                                                                     <div>{item?.ProdName}</div>
@@ -196,7 +267,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                 <>
 
 
-                                    <div className='PrintStyle4-ThirdDivMaster'>
+                                    <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
                                         <div className='PrintStyle4-ThirdP'>
                                             <div>
                                                 <div style={{ fontWeight: '600' }}>Items </div>
@@ -365,6 +436,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                             pageBreakBefore: "avoid",
                                             pageBreakInside: "avoid",
                                             minHeight: "auto",
+                                            ...footerColorStyle
                                         }}
                                     >
                                         {
@@ -425,7 +497,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                 <>
 
 
-                                    <div className='PrintStyle4-ThirdDivMaster'>
+                                    <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
                                         <div className='PrintStyle4-ThirdP'>
                                             <div>
                                                 <div style={{ fontWeight: '600' }}>Items </div>
@@ -592,6 +664,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                             pageBreakBefore: "avoid",
                                             pageBreakInside: "avoid",
                                             minHeight: "auto",
+                                            ...footerColorStyle
                                         }}
                                     >
                                         {
@@ -657,20 +730,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                                 <table className="PrintStyle4-print-table">
                                     <thead>
                                         <tr>
-                                            {SLNO && <th style={{ width: '10px' }}>S.No</th>}
+                                            {SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>}
-                                            {Item && <th>Item</th>}
+                                            {Item && <th style={{...tableHeaderStyle}}>Item</th>}
-                                            {Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>}
+                                            {Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>}
-                                            {HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>}
+                                            {HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>}
-                                            {MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>}
+                                            {MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>}
-                                            {Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>}
+                                            {Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>}
-                                            {Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>}
+                                            {Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>}
-                                            {Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>}
+                                            {Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>}
                                         </tr>
                                     </thead>
                                     <tbody>
                                         {(GlobaldummyData ? products : TakeawayData)?.map((item, index) => {
                                             return (
-                                                <tr key={index}>
+                                                <tr key={index}
+                                                 style={
+                                                                    index % 2 !== 1 && rowtypeStyle === "even"
+                                                                        ? {
+                                                                            ...tableBodyStyle
+                                                                        }
+                                                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                                                            ? {
+                                                                                ...tableBodyStyle
+                                                                            }
+                                                                            : {}
+                                                                }>
                                                     {SLNO && <td>{index + 1}</td>}
                                                     {Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}>
                                                         <div>{item?.ProdName}</div>
@@ -716,7 +800,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                     }
 
 
-                    <div className='PrintStyle4-ThirdDivMaster'>
+                    <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}>
                         <div className='PrintStyle4-ThirdP'>
                             <div>
                                 <div style={{ fontWeight: '600' }}>Items </div>
@@ -883,6 +967,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie
                             pageBreakBefore: "avoid",
                             pageBreakInside: "avoid",
                             minHeight: "auto",
+                            ...footerColorStyle
                         }}
                     >
                         {