Implement dynamic header and table color functionality

src/Pages/BookingScreen/PrintTemplates/A4/PrintStyleA5.jsx

@@ -32,6 +32,17 @@ import {
   GlobalPritdummyData,
   GlobalSignatureImage,
   GlobalthemeFormat,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import signature from '../../../../Images/signatureimage.jpg';
 import Logo from '../../../../Images/Logo.jpg';
@@ -102,6 +113,23 @@ const PrintA5Style11 = ({
   const GlobalLogo = useSelector(GlobalprintLogo);
   const GlobalCredit = useSelector(GlobalprintCredit);
   const SettingData = useSelector(PreferenceData);
+  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 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 estimatePrintHeader =
     SettingData?.[0]?.SettingDtlDetails?.find(
       (setting) =>
@@ -276,6 +304,51 @@ const PrintA5Style11 = ({
       : 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={{
@@ -314,6 +387,7 @@ const PrintA5Style11 = ({
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     textAlign: 'left',
+                    ...headerStyle
                   }}
                 >
                   <div
@@ -508,6 +582,7 @@ const PrintA5Style11 = ({
                                   style={{
                                     background: '#373B44',
                                     color: '#fff',
+                                    ...tableHeaderStyle,
                                   }}
                                 >
                                   {GlobaldummyData
@@ -688,7 +763,18 @@ const PrintA5Style11 = ({
 
                               <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' }}>
@@ -931,7 +1017,8 @@ const PrintA5Style11 = ({
                                             fontSize: '25px',
                                             fontWeight: '600',
                                             padding: '10px',
-                                            backgroundColor: '#fdc716',
+                                            // backgroundColor: '#fdc716',
+                                            ...netAmountStyle,
                                             textAlign: 'center',
                                           }}
                                         >
@@ -1249,6 +1336,7 @@ const PrintA5Style11 = ({
                                     >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                                   )}
 
+                                  <div style={{ ...footerColorStyle }}>
                                     {GlobaldummyData
                                       ? GlobalIsnotes && (
                                         <div>
@@ -1432,6 +1520,7 @@ const PrintA5Style11 = ({
                                         )}
                                     </div>
                                   </div>
+                                </div>
                               )}
 
                             <hr className="PrintA4Style11-print-dottline" />
@@ -1494,6 +1583,7 @@ const PrintA5Style11 = ({
                                   style={{
                                     background: '#373B44',
                                     color: '#fff',
+                                    ...tableHeaderStyle
                                   }}
                                 >
                                   {GlobaldummyData
@@ -1674,7 +1764,18 @@ const PrintA5Style11 = ({
 
                               <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' }}>
@@ -1893,7 +1994,8 @@ const PrintA5Style11 = ({
                                             fontSize: '25px',
                                             fontWeight: '600',
                                             padding: '10px',
-                                            backgroundColor: '#fdc716',
+                                            // backgroundColor: '#fdc716',
+                                            ...netAmountStyle,
                                             textAlign: 'center',
                                           }}
                                         >
@@ -2209,6 +2311,7 @@ const PrintA5Style11 = ({
                                     >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                                   )}
 
+                                  <div style={{ ...footerColorStyle }}>
                                     {GlobaldummyData
                                       ? GlobalIsnotes && (
                                         <div>
@@ -2392,6 +2495,7 @@ const PrintA5Style11 = ({
                                         )}
                                     </div>
                                   </div>
+                                </div>
                               )}
                           </div>
                         </td>
@@ -2488,7 +2592,8 @@ const PrintA5Style11 = ({
                             fontSize: '25px',
                             fontWeight: '600',
                             padding: '10px',
-                            backgroundColor: '#fdc716',
+                            // backgroundColor: '#fdc716',
+                            ...netAmountStyle,
                             textAlign: 'center',
                           }}
                         >
@@ -2824,6 +2929,7 @@ const PrintA5Style11 = ({
                     >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                   )}
 
+                <div style={{...footerColorStyle}}>
                     {GlobaldummyData
                     ? GlobalIsnotes && (
                       <div>
@@ -2995,6 +3101,7 @@ const PrintA5Style11 = ({
                       )}
                   </div>
                 </div>
+                </div>
               )}
           </div>
         ))}
@@ -3077,7 +3184,8 @@ const PrintA5Style11 = ({
                         fontSize: '25px',
                         fontWeight: '600',
                         padding: '10px',
-                        backgroundColor: '#fdc716',
+                        // backgroundColor: '#fdc716',
+                        ...netAmountStyle,
                         textAlign: 'center',
                       }}
                     >
@@ -3407,6 +3515,7 @@ const PrintA5Style11 = ({
                 >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
               )}
 
+            <div style={{...footerColorStyle}}>
                 {GlobaldummyData
                 ? GlobalIsnotes && (
                   <div>
@@ -3573,6 +3682,7 @@ const PrintA5Style11 = ({
               </div>
             </div>
             </div>
+          </div>
         )}
       </div>
     </div>