Implement dynamic header and table color functionality

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

@@ -3,6 +3,16 @@ import { useSelector } from 'react-redux';
 import {
   GlobalPritdummyData,
   GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import { isMobile } from 'react-device-detect';
 import { extractLastNumberOrderId } from '../../../../Services/Others';
@@ -40,6 +50,22 @@ const TaxInvoice = ({
   let companyColour = printDatas?.PrintHdrColor ?? '#00000';
 
   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;
   // Function to convert number to words
   const numberToWords = (num) => {
     const a = [
@@ -364,6 +390,51 @@ const TaxInvoice = ({
       `Page ${chunkIndex + 1}: isFirstPage=${isFirstPage}, isLastPage=${isLastPage}, isFooterOnlyPage=${isFooterOnlyPage},datachunkslength=${dataChunk.length}`
     );
 
+    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 (
       <>
         {/* Header - Only on first page */}
@@ -376,6 +447,7 @@ const TaxInvoice = ({
                 display: 'flex',
                 justifyContent: 'space-between',
                 alignItems: 'center',
+                ...headerStyle
               }}
             >
               <div></div>
@@ -732,6 +804,7 @@ const TaxInvoice = ({
                   // borderRight: '1px solid #000',
                   borderBottom: '1px solid #000',
                   borderTop: '1px solid #000',
+                  ...tableHeaderStyle
                 }}
               >
                 <div
@@ -795,6 +868,11 @@ const TaxInvoice = ({
                         display: 'grid',
                         gridTemplateColumns: '5% 40% 12% 11% 16% 16%',
                         // borderRight: '1px solid #000',
+                        ...(index % 2 === 0 && rowtypeStyle === "even"
+                          ? tableBodyStyle
+                          : index % 2 === 1 && rowtypeStyle === "odd"
+                            ? tableBodyStyle
+                            : {})
                       }}
                     >
                       <div
@@ -1274,6 +1352,7 @@ const TaxInvoice = ({
                             textAlign: 'right',
                             fontWeight: '700',
                             fontSize: '15px',
+                            ...netAmountStyle
                           }}
                         >
                           ₹{' '}
@@ -2437,6 +2516,7 @@ const TaxInvoice = ({
               textAlign: 'center',
               fontSize: '10px',
               padding: '8px',
+              ...footerColorStyle
             }}
           >
             <div>This is a Computer Generated Invoice</div>