Implement dynamic header and table color functionality

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

@@ -27,7 +27,17 @@ import {
   GlobalprintCashierName,
   GlobalprintLogo,
   GlobalprintTax,
-  GlobalSelectedPrintHeaderColor,
+    GlobalSelectedPrintHeaderColor,
+     GlobalSelectedPrintHeaderFontColor,
+      GlobalSelectedTableHeaderColor,
+      GlobalSelectedTableHeaderFontColor,
+      GlobalSelectedTableBodyFontColor,
+      GlobalSelectedTableBodyColor,
+      GlobalRowType,
+      GlobalSelectedFooterColor,
+      GlobalSelectedFooterFontColor,
+      GlobalSelectedNetAmountColor,
+      GlobalSelectedNetAmountFontColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss';
 import QRCode from 'react-qr-code';
@@ -110,8 +120,23 @@ const InvoiceTemplate = ({
     )?.SettingValue === 'Y';
   const keysLength = Object.keys(table2Data ?? {}).length;
   console.log(GlobalDiscount, Discount, 'Discount');
-
+const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
-  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;
 
   let BankDetails = table2Data?.BankDetails;
   let TermsAndConditions = printDatas?.TermsandConditions;
@@ -491,6 +516,51 @@ const InvoiceTemplate = ({
     },
   ];
 
+    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 (
     <>
       <style>
@@ -882,7 +952,7 @@ const InvoiceTemplate = ({
                     {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                       ''
                     ) : (
-                      <div className="header-section">
+                      <div className="header-section" style={{...headerStyle}}>
                         <div>
                           <div
                             style={{ display: 'flex', alignItems: 'center' }}
@@ -1090,7 +1160,7 @@ const InvoiceTemplate = ({
                         }}
                       >
                         <thead>
-                          <tr className="table-header">
+                          <tr className="table-header" style={{...tableHeaderStyle}}>
                             {GlobaldummyData
                               ? GlobalSlNo && (
                                 <th className="table-header-cell">S.No</th>
@@ -1238,7 +1308,18 @@ const InvoiceTemplate = ({
                         <tbody>
                           {((GlobaldummyData ? products : 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
+                                          }
+                                          : {}
+                                    }>
                                 {GlobaldummyData
                                   ? GlobalSlNo && (
                                     <td
@@ -1562,13 +1643,14 @@ const InvoiceTemplate = ({
                               display: 'flex',
                               flexDirection: 'column',
                               justifyContent: 'flex-start',
-                              width: '95%',
+                              width: '100%',
                               whiteSpace: 'nowrap',
                               fontSize: '10px',
                               flexWrap: 'wrap',
                               alignItems: 'flex-end',
                               gap: '2px',
                               marginBottom: '0.5rem',
+                              ...netAmountStyle
                             }}
                           >
                             <div style={{ display: 'flex' }}>
@@ -1906,7 +1988,7 @@ const InvoiceTemplate = ({
                           </div>
 
                           {/* Footer */}
-                          <div className="footer-grid">
+                          <div className="footer-grid" style={{...footerColorStyle}}>
                             <div className="footer-left">
                               {BankDetails?.length > 0 && (
                                 <>
@@ -2168,11 +2250,14 @@ const InvoiceTemplate = ({
                         flexDirection: 'column',
                         alignItems: 'flex-end',
                         justifyContent: 'space-around',
-                        width: '95%',
+                        width: '100%',
+                         padding: '0 10px',
+                        padding: '0 10px',
                         whiteSpace: 'nowrap',
                         fontSize: '10px',
                         flexWrap: 'wrap',
                         gap: '2px',
+                        ...netAmountStyle
                       }}
                     >
                       <div style={{ display: 'flex' }}>
@@ -2466,7 +2551,7 @@ const InvoiceTemplate = ({
                     </div>
 
                     {/* Footer */}
-                    <div className="footer-grid">
+                    <div className="footer-grid" style={{...footerColorStyle}}>
                       <div className="footer-left">
                         {BankDetails?.length > 0 && (
                           <>
@@ -2688,7 +2773,7 @@ const InvoiceTemplate = ({
               {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                 ''
               ) : (
-                <div className="header-section">
+                <div className="header-section" style={{...headerStyle}}>
                   <div>
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                       {GlobalLogo && GlobaldummyData && (
@@ -2719,14 +2804,11 @@ const InvoiceTemplate = ({
                       ) : null}
                       <h1
                         className="company-name"
-                        style={{
-                          color: SelectedHeaderColor,
-                        }}
                       >
                         {GlobaldummyData ? 'Company Name' : companyName}
                       </h1>
                     </div>
-                    <p>{companyAddress}</p>
+                    <p>{GlobaldummyData ? 'Hosur Dharga tamil Nadu 653105' : companyAddress}</p>
                     {(companyPhone || GlobaldummyData) && (
                       <div>
                         Phone: {GlobaldummyData ? '999999XXXX' : companyPhone}
@@ -2854,7 +2936,7 @@ const InvoiceTemplate = ({
                   style={{ borderTop: '1px solid black' }}
                 >
                   <thead>
-                    <tr className="table-header">
+                    <tr className="table-header" style={{...tableHeaderStyle}}>
                       {GlobaldummyData
                         ? GlobalSlNo && (
                           <th className="table-header-cell">S.No</th>
@@ -2964,7 +3046,18 @@ const InvoiceTemplate = ({
                   <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
@@ -3185,11 +3278,13 @@ const InvoiceTemplate = ({
                   flexDirection: 'column',
                   alignItems: 'flex-start',
                   justifyContent: 'space-around',
-                  width: '95%',
+                  width: '100%',
+                   padding: '0 10px',
                   whiteSpace: 'nowrap',
                   fontSize: '10px',
                   flexWrap: 'wrap',
                   gap: '2px',
+                  ...netAmountStyle
                 }}
               >
                 <div
@@ -3444,7 +3539,7 @@ const InvoiceTemplate = ({
               </div>
 
               {/* Footer */}
-              <div className="footer-grid">
+              <div className="footer-grid" style={{...footerColorStyle}}>
                 <div className="footer-left">
                   {(BankDetails?.length > 0 || GlobaldummyData) && (
                     <>