Merge pull request 'Purchase Return Color Printer' (#235) from OptimUpdate into main

Reviewed-on: Pozomind/pozo-retail-app#235

src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/A4Standard.jsx

@@ -1,3 +1,16 @@
+import { useSelector } from 'react-redux';
+import {
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
+
 const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
   const {
     InvoiceNo,
@@ -50,7 +63,8 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
     0
   );
   const totalAmountBeforeTax = ProductDetails?.reduce(
-    (sum, item) => sum + Math.floor((Number(item?.NetAmount-item?.TaxAmount))|| 0),
+    (sum, item) =>
+      sum + Math.floor(Number(item?.NetAmount - item?.TaxAmount) || 0),
     0
   );
   const totalAmountAfterTax = ProductDetails?.reduce(
@@ -117,6 +131,59 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
       );
     return num;
   }
+
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   return (
     <>
       <style>{`
@@ -279,7 +346,7 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
       `}</style>
       <div id="A4Standard-purchaseReturn">
         <div className="invoice-a4">
-          <div className="header">
+          <div className="header" style={{ ...headerStyle }}>
             <div className="company-name">{branch.CompName}</div>
             <div>
               {' '}
@@ -313,27 +380,32 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
           </div>
           <table className="items-table">
             <thead>
-              {/* 
+              <tr style={{ ...tableHeaderStyle }}>
-                  { label: 'S.No', key: 'sno', width: '5%' },
+                <th style={{ ...tableHeaderStyle }}>S.No</th>
-    { label: 'Product', key: 'ProdName', width: '20%' },
+                <th style={{ ...tableHeaderStyle }}>Product</th>
-    { label: 'Purchased Qty', key: 'Qty', width: '10%' },
+                <th style={{ ...tableHeaderStyle }}>Purchased Qty</th>
-    { label: 'Returned Qty', key: 'ReturnedQty', width: '10%' },
+                <th style={{ ...tableHeaderStyle }}>Returned Qty</th>
-    { label: 'Rate', key: 'ProductRate', width: '10%' },
+                <th style={{ ...tableHeaderStyle }}>Rate</th>
-    { label: 'Tax', key: 'TaxAmount', width: '10%' },
+                <th style={{ ...tableHeaderStyle }}>Tax</th>
-    { label: 'Total', key: 'TotalAmount', width: '15%' }, */}
+                <th style={{ ...tableHeaderStyle }}>Total</th>
-              <tr>
-                <th>S.No</th>
-                <th>Product</th>
-                <th>Purchased Qty</th>
-                <th>Returned Qty</th>
-                <th>Rate</th>
-                <th>Tax</th>
-                <th>Total</th>
               </tr>
             </thead>
             <tbody>
               {ProductDetails?.map((e, index) => (
-                <tr key={index}>
+                <tr
+                  key={index}
+                  style={{
+                    ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                      ? {
+                          ...tableBodyStyle,
+                        }
+                      : index % 2 === 1 && rowtypeStyle === 'odd'
+                        ? {
+                            ...tableBodyStyle,
+                          }
+                        : {}),
+                  }}
+                >
                   <td>{index + 1}</td>
                   <td>{e?.ProdName}</td>
                   <td>{e?.PurQty}</td>
@@ -343,11 +415,6 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
                   <td>{e?.NetAmount}</td>
                 </tr>
               ))}
-              {/* <tr><td>1</td><td>ITEM 1</td><td>01</td><td>2</td><td>100</td><td>88</td><td>0</td></tr>
-              <tr><td>2</td><td>ITEM 2</td><td>02</td><td>1</td><td>350</td><td>300</td><td>0</td><td>300</td></tr>
-              <tr><td>3</td><td>ITEM 3</td><td>03</td><td>1</td><td>250</td><td>200</td><td>0</td><td>200</td></tr>
-              <tr><td>4</td><td>ITEM 4</td><td>04</td><td>1</td><td>50</td><td>30</td><td>0</td><td>30</td></tr>
-              <tr><td>5</td><td>ITEM 5</td><td>05</td><td>1</td><td>50</td><td>30</td><td>0</td><td>30</td></tr> */}
             </tbody>
           </table>
           <div className="item-summary">
@@ -412,7 +479,7 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
               </tr>
             </tbody>
           </table>
-          <div className="footer-section">
+          <div className="footer-section" style={{ ...footerColorStyle }}>
             <div className="footer-left">
               {bank?.AccountNo && (
                 <>

src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintA4Style11.jsx

@@ -1,5 +1,16 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 
 const PrintStyleDCToInvoice1 = ({
   invoiceData,
@@ -49,6 +60,58 @@ const PrintStyleDCToInvoice1 = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -60,7 +123,10 @@ const PrintStyleDCToInvoice1 = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -261,6 +327,7 @@ const PrintStyleDCToInvoice1 = ({
                         branch={branch}
                         CustName={CustName}
                         SupplierNo={SupplierNo}
+                        headerStyle={headerStyle}
                       />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
@@ -276,7 +343,12 @@ const PrintStyleDCToInvoice1 = ({
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -329,6 +401,7 @@ const PrintStyleDCToInvoice1 = ({
               branch={branch}
               CustName={CustName}
               SupplierNo={SupplierNo}
+              headerStyle={headerStyle}
             />
 
             {/* <hr className="dotted-line" /> */}
@@ -342,7 +415,12 @@ const PrintStyleDCToInvoice1 = ({
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -362,8 +440,8 @@ export default PrintStyleDCToInvoice1;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch, CustName, SupplierNo }) => (
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     <div className="headerText">
       <div
         className="companyName"
@@ -425,7 +503,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
@@ -440,7 +523,11 @@ const ProductTable = ({ data }) => {
     <table className="productTable">
       <thead style={{ backgroundColor: '#f2f2f2' }}>
         <tr
-          style={{ background: 'rgb(55, 59, 68)', color: 'rgb(255, 255, 255)' }}
+          style={{
+            background: 'rgb(55, 59, 68)',
+            color: 'rgb(255, 255, 255)',
+            ...tableHeaderStyle,
+          }}
         >
           {columns.map((col) => (
             <th
@@ -461,7 +548,18 @@ const ProductTable = ({ data }) => {
         {data.map((prod, index) => (
           <tr
             key={prod.UniqueId}
-            style={{ backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8' }} // even rows get background
+            style={{
+              backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8',
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }} // even rows get background
           >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
@@ -486,7 +584,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         width: '100%',
         flexDirection: 'row-reverse',
         backgroundColor: '#999999',
-        marginTop:"10px"
+        marginTop: '10px',
       }}
     >
       <div className="summary">
@@ -527,7 +625,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         padding: '10px',
         backgroundColor: 'rgb(253, 199, 22)',
         textAlign: 'center',
-       borderBottom: "1px dashed black"
+        borderBottom: '1px dashed black',
       }}
     >
       {' '}

src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintStyleA5.jsx

@@ -1,5 +1,16 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 
 const PrintStyleDCToInvoice1 = ({
   invoiceData,
@@ -49,6 +60,58 @@ const PrintStyleDCToInvoice1 = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -60,7 +123,10 @@ const PrintStyleDCToInvoice1 = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -261,6 +327,7 @@ const PrintStyleDCToInvoice1 = ({
                         branch={branch}
                         CustName={CustName}
                         SupplierNo={SupplierNo}
+                        headerStyle={headerStyle}
                       />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
@@ -276,7 +343,12 @@ const PrintStyleDCToInvoice1 = ({
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -329,6 +401,7 @@ const PrintStyleDCToInvoice1 = ({
               branch={branch}
               CustName={CustName}
               SupplierNo={SupplierNo}
+              headerStyle={headerStyle}
             />
 
             {/* <hr className="dotted-line" /> */}
@@ -342,7 +415,12 @@ const PrintStyleDCToInvoice1 = ({
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -362,8 +440,8 @@ export default PrintStyleDCToInvoice1;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch, CustName, SupplierNo }) => (
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     <div className="headerText">
       <div
         className="companyName"
@@ -425,7 +503,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  tableBodyStyle,
+  rowtypeStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
@@ -440,7 +523,11 @@ const ProductTable = ({ data }) => {
     <table className="productTable">
       <thead style={{ backgroundColor: '#f2f2f2' }}>
         <tr
-          style={{ background: 'rgb(55, 59, 68)', color: 'rgb(255, 255, 255)' }}
+          style={{
+            background: 'rgb(55, 59, 68)',
+            color: 'rgb(255, 255, 255)',
+            ...tableHeaderStyle,
+          }}
         >
           {columns.map((col) => (
             <th
@@ -461,7 +548,18 @@ const ProductTable = ({ data }) => {
         {data.map((prod, index) => (
           <tr
             key={prod.UniqueId}
-            style={{ backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8' }} // even rows get background
+            style={{
+              backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8',
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }} // even rows get background
           >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
@@ -486,7 +584,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         width: '100%',
         flexDirection: 'row-reverse',
         backgroundColor: '#999999',
-        marginTop:"10px"
+        marginTop: '10px',
       }}
     >
       <div className="summary">
@@ -527,7 +625,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         padding: '10px',
         backgroundColor: 'rgb(253, 199, 22)',
         textAlign: 'center',
-         borderBottom: "1px dashed black"
+        borderBottom: '1px dashed black',
       }}
     >
       {' '}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle1.jsx

@@ -1,8 +1,24 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDetails}) => {
+const PrintStylePurchaseReturn = ({
+  invoiceData,
+  preference,
+  printDatas,
+  FieldDetails,
+}) => {
   const {
     InvoiceNo,
     SupplierNo,
@@ -19,7 +35,9 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
   } = invoiceData;
 
   // const fieldDetails = useSelector(GloabalFieldDetails);
-  const signature = FieldDetails?.FieldDetails?.some((e) => e?.ConfigName == "signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
 
   // const termsAndConditions = fieldDetails?.['terms&conditions'];
 
@@ -29,8 +47,10 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
 
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
@@ -45,6 +65,60 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       <hr className="dotted-line" />
@@ -60,7 +134,7 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div className="termsAndSignature" style={{ ...footerColorStyle }}>
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -88,8 +162,10 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
 
   return (
     <>
-      <div id="PrintStyle1-purchaseReturn"style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      <div
->
+        id="PrintStyle1-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
@@ -116,7 +192,11 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       <hr className="dotted-line" />
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -131,7 +211,12 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    rowtypeStyle={rowtypeStyle}
+                    tableBodyStyle={tableBodyStyle}
+                  />
                   {!formatTheme && isFinalFooterPage && renderFooter()}
                 </div>
                 {formatTheme && isFinalFooterPage && (
@@ -142,7 +227,7 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             <hr className="dotted-line" />
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -154,7 +239,12 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              rowtypeStyle={rowtypeStyle}
+              tableBodyStyle={tableBodyStyle}
+            />
             {renderFooter()}
           </div>
         )}
@@ -167,8 +257,8 @@ export default PrintStylePurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -178,7 +268,7 @@ const Header = ({ logo, branch }) => (
       <div>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-        <div className='PurchaseReturnPrintName'>
+      <div className="PurchaseReturnPrintName">
         <strong>Purchase Return</strong>
       </div>
     </div>
@@ -202,8 +292,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-          {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -218,16 +307,21 @@ const InvoiceMeta = ({
           <strong>Supplier Name:</strong> {CustName}
         </div>
       )}
-       {SupplierNo &&
+      {SupplierNo && (
-               <div>
+        <div>
-                <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
+          <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
-              </div>
+        </div>
-            }
+      )}
     </div>
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -241,7 +335,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns?.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -251,7 +345,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data?.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}
@@ -276,7 +383,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       <strong>Tax Amount: ₹ {TaxAmount?.toFixed(2)}</strong>
     </div>
     <div className="bold">
-      <strong>Grand Total:  ₹ {GrandTotal?.toFixed(2)}</strong>
+      <strong>Grand Total: ₹ {GrandTotal?.toFixed(2)}</strong>
     </div>
   </div>
 );

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle10PurchaseReturn  = ({
+const PrintStyle10PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -50,6 +61,58 @@ const PrintStyle10PurchaseReturn  = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -66,7 +129,7 @@ const PrintStyle10PurchaseReturn  = ({
             }}
           />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div className="termsAndSignature" style={{ ...footerColorStyle }}>
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -257,7 +320,11 @@ padding-top: 10px;
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       <hr
                         style={{
                           border: '1.5px solid #8f8f8f',
@@ -277,7 +344,12 @@ padding-top: 10px;
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   <hr
                     style={{
                       border: '1.5px solid #8f8f8f',
@@ -319,7 +391,7 @@ padding-top: 10px;
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             <hr
               style={{
                 border: '1.5px solid #8f8f8f',
@@ -336,7 +408,12 @@ padding-top: 10px;
               SupplierNo={SupplierNo}
             />
             {/* <hr className="dotted-line" /> */}
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
             <hr
               style={{
                 border: '1.5px solid #8f8f8f',
@@ -373,21 +450,19 @@ padding-top: 10px;
   );
 };
 
-export default PrintStyle10PurchaseReturn ;
+export default PrintStyle10PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
       <div>
         {branch.Address1}-{branch.City}-{branch?.Zip}
       </div>
-     {branch.BrMobile && <div>
+      {branch.BrMobile && <div>Mobile: +91 {branch.BrMobile}</div>}
-        Mobile: +91 {branch.BrMobile}
-      </div>}
 
       <div className="PurchaseReturnPrintName">
         <strong>Purchase Return</strong>
@@ -413,8 +488,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                  {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -426,10 +500,15 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
-    { label: 'Product', key: 'ProdName', width: '30%' ,},
+    { label: 'Product', key: 'ProdName', width: '30%' },
     { label: 'Purchased Qty', key: 'Qty', width: '10%' },
     { label: 'Returned Qty', key: 'ReturnedQty', width: '10%' },
     { label: 'Rate', key: 'ProductRate', width: '10%' },
@@ -440,9 +519,9 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle, padding: '0 5px' }}>
           {columns.map((col) => (
-            <th key={col.key} style={{ width: col.width ,textWrap:"wrap"}}>
+            <th key={col.key} style={{ width: col.width, textWrap: 'wrap' }}>
               {col.label}
             </th>
           ))}
@@ -450,7 +529,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle11PurchaseReturn  = ({
+const PrintStyle11PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -65,6 +76,58 @@ const PrintStyle11PurchaseReturn  = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 9);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -76,7 +139,10 @@ const PrintStyle11PurchaseReturn  = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -215,8 +281,10 @@ const PrintStyle11PurchaseReturn  = ({
   
         `}
       </style>
-      <div id="PrintStyle11-purchaseReturn" 
+      <div
-       style={{ fontFamily: "'Courier New', Courier, monospace" }}>
+        id="PrintStyle11-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
@@ -243,7 +311,11 @@ const PrintStyle11PurchaseReturn  = ({
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -258,7 +330,12 @@ const PrintStyle11PurchaseReturn  = ({
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -294,7 +371,7 @@ const PrintStyle11PurchaseReturn  = ({
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -306,7 +383,12 @@ const PrintStyle11PurchaseReturn  = ({
               SupplierNo={SupplierNo}
             />
             {/* <hr className="dotted-line" /> */}
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -335,33 +417,33 @@ const PrintStyle11PurchaseReturn  = ({
   );
 };
 
-export default PrintStyle11PurchaseReturn ;
+export default PrintStyle11PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header" style={{fontWeight:"600"}}>
+  <div className="header" style={{ fontWeight: '600', ...headerStyle }}>
     {/* {logo && <img src={logo} alt="logo" className="logo" />} */}
     <div className="headerText">
-    
-        
       <div className="companyName">{branch.CompName}</div>
-        <hr style=
+      <hr
-        {{
+        style={{
           border: '0.5px solid #8f8f8f',
           height: 0,
-        }} />
+        }}
-      <div style={{paddingTop:"10px"}}>
+      />
+      <div style={{ paddingTop: '10px' }}>
         {branch.Address1}-{branch.City}-{branch?.Zip}
       </div>
-      <div style={{paddingBottom:"10px"}}>
+      <div style={{ paddingBottom: '10px' }}>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-       <hr style=
+      <hr
-        {{
+        style={{
           border: '0.5px solid #8f8f8f',
           height: 0,
-        }} />
+        }}
+      />
       <div
         style={{
           paddingTop: '5px',
@@ -392,8 +474,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                 {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -405,7 +486,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -419,7 +505,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -429,7 +515,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle12PurchaseReturn  = ({
+const PrintStyle12PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -50,6 +61,58 @@ const PrintStyle12PurchaseReturn  = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -61,7 +124,7 @@ const PrintStyle12PurchaseReturn  = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div className="termsAndSignature" style={{ ...footerColorStyle }}>
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -261,6 +324,7 @@ const PrintStyle12PurchaseReturn  = ({
                         branch={branch}
                         CustName={CustName}
                         SupplierNo={SupplierNo}
+                        headerStyle={headerStyle}
                       />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
@@ -276,7 +340,12 @@ const PrintStyle12PurchaseReturn  = ({
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -312,12 +381,12 @@ const PrintStyle12PurchaseReturn  = ({
           })
         ) : (
           <div className="container">
-            {/* <Header logo={logo} branch={branch} /> */}
             <Header
               logo={logo}
               branch={branch}
               CustName={CustName}
               SupplierNo={SupplierNo}
+              headerStyle={headerStyle}
             />
 
             {/* <hr className="dotted-line" /> */}
@@ -331,7 +400,12 @@ const PrintStyle12PurchaseReturn  = ({
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -339,7 +413,6 @@ const PrintStyle12PurchaseReturn  = ({
               GrandTotal={GrandTotal}
             />
 
-
             {renderFooter()}
           </div>
         )}
@@ -348,22 +421,22 @@ const PrintStyle12PurchaseReturn  = ({
   );
 };
 
-export default PrintStyle12PurchaseReturn ;
+export default PrintStyle12PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch, CustName, SupplierNo }) => (
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
       <div>
         {branch.Address1}-{branch.City}-{branch?.Zip}
       </div>
       {branch?.BrMobile && <div>Mobile: +91 {branch?.BrMobile}</div>}
-           <div className="customer-section">
+      <div className="customer-section">
         {CustName && (
           <div>
-            <strong>Supplier Name:  {CustName} </strong> 
+            <strong>Supplier Name: {CustName} </strong>
           </div>
         )}
         {SupplierNo && (
@@ -375,7 +448,6 @@ const Header = ({ logo, branch, CustName, SupplierNo }) => (
       <div className="PurchaseReturnPrintName">
         <strong>Purchase Return</strong>
       </div>
- 
     </div>
     {logo && <img src={logo} alt="logo" className="logo" />}
   </div>
@@ -398,8 +470,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-          {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -411,7 +482,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
@@ -425,7 +501,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead style={{ backgroundColor: '#f2f2f2' }}>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th
               key={col.key}
@@ -438,7 +514,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}
@@ -458,9 +547,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
   <div style={{ display: 'flex', width: '100%', flexDirection: 'row-reverse' }}>
     <div className="summary">
       <div className="SummaryColumn">
-        <div className="Subtotal">
+        <div className="Subtotal">Subtotal</div>
-         Subtotal
-        </div>
         <div>:</div>
 
         <div style={{ width: '25%', textAlign: 'right' }}>
@@ -468,15 +555,13 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         </div>
       </div>
       <div className="SummaryColumn">
-        <div className="TaxAmt">
+        <div className="TaxAmt">Tax Amount</div>
-          Tax Amount
-        </div>
         <div>:</div>
         <div style={{ width: '25%', textAlign: 'right' }}>
           ₹ {TaxAmount.toFixed(2)}
         </div>
       </div>
-            <hr className="dotted-line" />
+      <hr className="dotted-line" />
       <div className="SummaryColumn">
         <div className="Grandtotal">
           <strong>Grand Total</strong>
@@ -488,7 +573,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         </div>
       </div>
 
-            <hr className="dotted-line"  />
+      <hr className="dotted-line" />
     </div>
   </div>
 );

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle2.jsx

@@ -1,5 +1,16 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
 const PrintStyle2PurchaseReturn = ({
@@ -27,30 +38,30 @@ const PrintStyle2PurchaseReturn = ({
   // const signature = fieldDetails?.['signature'];
   // const termsAndConditions = fieldDetails?.['terms&conditions'];
   // const termsAndConditionsData = FieldDetails?.TermsandConditions;
-//    let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  //    let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
-//  let termsAndConditionsData=FieldDetails?.TermsandConditions
+  //  let termsAndConditionsData=FieldDetails?.TermsandConditions
 
-//   const signatureImg = printDatas?.Signature;
+  //   const signatureImg = printDatas?.Signature;
-//   const notesText = printDatas?.Notes;
+  //   const notesText = printDatas?.Notes;
-//   const formatTheme = printDatas?.PrintType !== 'S';
+  //   const formatTheme = printDatas?.PrintType !== 'S';
-//   const pageSize = printDatas?.PageSize;
+  //   const pageSize = printDatas?.PageSize;
-//   const branch = AddressDetails?.[0];
+  //   const branch = AddressDetails?.[0];
-//   const logo = branch?.CompLogo;
+  //   const logo = branch?.CompLogo;
 
-    // const fieldDetails = useSelector(GloabalFieldDetails);
+  // const fieldDetails = useSelector(GloabalFieldDetails);
-  const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
-
+  );
-
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
-
-
 
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
@@ -65,6 +76,60 @@ const PrintStyle2PurchaseReturn = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -76,7 +141,10 @@ const PrintStyle2PurchaseReturn = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '6px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -207,8 +275,10 @@ const PrintStyle2PurchaseReturn = ({
   
         `}
       </style>
-      <div id="PrintStyle2-purchaseReturn"         style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      <div
->
+        id="PrintStyle2-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
@@ -235,7 +305,11 @@ const PrintStyle2PurchaseReturn = ({
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -250,7 +324,12 @@ const PrintStyle2PurchaseReturn = ({
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -286,7 +365,7 @@ const PrintStyle2PurchaseReturn = ({
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -298,7 +377,12 @@ const PrintStyle2PurchaseReturn = ({
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -331,8 +415,8 @@ export default PrintStyle2PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -342,11 +426,13 @@ const Header = ({ logo, branch }) => (
       <div>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-      <div   style={{
+      <div
-    paddingTop: "5px",
+        style={{
-    fontSize: "18px",
+          paddingTop: '5px',
-    fontWeight: 800
+          fontSize: '18px',
-  }}>
+          fontWeight: 800,
+        }}
+      >
         <strong>Purchase Return</strong>
       </div>
     </div>
@@ -370,8 +456,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-          {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -383,7 +468,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -397,7 +487,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -407,7 +497,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}
@@ -432,7 +535,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       <div>:</div>
 
       <div style={{ width: '15%', textAlign: 'right' }}>
-          <strong>₹ {TotalAmount.toFixed(2)}  </strong> 
+        <strong>₹ {TotalAmount.toFixed(2)} </strong>
       </div>
     </div>
     <div className="SummaryColumn">
@@ -441,7 +544,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       </div>
       <div>:</div>
       <div style={{ width: '15%', textAlign: 'right' }}>
-       <strong>₹ {TaxAmount.toFixed(2)}  </strong>  
+        <strong>₹ {TaxAmount.toFixed(2)} </strong>
       </div>
     </div>
     <div className="SummaryColumn">
@@ -451,7 +554,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       <div>:</div>
       <div style={{ width: '15%', textAlign: 'right' }}>
         {' '}
-         <strong> ₹ {GrandTotal.toFixed(2)}   </strong> 
+        <strong> ₹ {GrandTotal.toFixed(2)} </strong>
       </div>
     </div>
   </div>

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle3.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle3PurchaseReturn  = ({
+const PrintStyle3PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -28,17 +39,19 @@ const PrintStyle3PurchaseReturn  = ({
   // const termsAndConditions = fieldDetails?.['terms&conditions'];
   // const termsAndConditionsData = FieldDetails?.TermsandConditions;
 
-
+  const signature = FieldDetails?.FieldDetails?.some(
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
-
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
 
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
@@ -53,6 +66,60 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -64,7 +131,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -189,8 +259,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
 }
         `}
       </style>
-      <div id="PrintStyle3-purchaseReturn"  style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      <div
->
+        id="PrintStyle3-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
@@ -217,7 +289,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -232,7 +308,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    rowtypeStyle={rowtypeStyle}
+                    tableBodyStyle={tableBodyStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -266,7 +347,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -278,7 +359,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              rowtypeStyle={rowtypeStyle}
+              tableBodyStyle={tableBodyStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -309,12 +395,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   );
 };
 
-export default PrintStyle3PurchaseReturn ;
+export default PrintStyle3PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -324,7 +410,7 @@ const Header = ({ logo, branch }) => (
       <div>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-        <div className='PurchaseReturnPrintName'>
+      <div className="PurchaseReturnPrintName">
         <strong>Purchase Return</strong>
       </div>
     </div>
@@ -348,8 +434,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                   {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -361,7 +446,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -375,7 +465,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -385,7 +475,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle4.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle4PurchaseReturn  = ({
+const PrintStyle4PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -24,15 +35,19 @@ const PrintStyle4PurchaseReturn  = ({
   } = invoiceData;
   console.log(printDatas, 'printDatas');
   const fieldDetails = useSelector(GloabalFieldDetails);
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
   );
@@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -189,6 +259,7 @@ padding-top: 10px;
 }
         `}
       </style>
+
       <div
         id="PrintStyle4-purchaseReturn"
         style={{ fontFamily: "'Courier New', Courier, monospace" }}
@@ -219,7 +290,11 @@ padding-top: 10px;
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -234,7 +309,12 @@ padding-top: 10px;
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -268,7 +348,7 @@ padding-top: 10px;
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -280,7 +360,12 @@ padding-top: 10px;
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -311,12 +396,12 @@ padding-top: 10px;
   );
 };
 
-export default PrintStyle4PurchaseReturn ;
+export default PrintStyle4PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -326,7 +411,7 @@ const Header = ({ logo, branch }) => (
       <div>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-      <div className='PurchaseReturnPrintName'>
+      <div className="PurchaseReturnPrintName">
         <strong>Purchase Return</strong>
       </div>
     </div>
@@ -350,8 +435,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                   {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -363,7 +447,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -377,7 +466,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead style={{ backgroundColor: '#f2f2f2' }}>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -387,7 +476,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle5.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle5PurchaseReturn  = ({
+const PrintStyle5PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -25,15 +36,19 @@ const PrintStyle5PurchaseReturn  = ({
 
   console.log(printDatas, 'printDatas');
   const fieldDetails = useSelector(GloabalFieldDetails);
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
   );
@@ -47,6 +62,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -58,7 +125,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -215,13 +285,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
     }
         `}
       </style>
-      <div id="PrintStyle5-purchaseReturn"   style={{ fontFamily: "'Courier New', Courier, monospace" }}>
+      <div
+        id="PrintStyle5-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
             const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
 
-
             return (
               <div
                 key={chunkIndex}
@@ -243,7 +315,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       <hr className="dotted-line" />
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -258,7 +334,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -292,7 +373,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             <hr className="dotted-line" />
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -304,13 +385,18 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
-             <Summary
+            <Summary
-                        TotalAmount={TotalAmount}
+              TotalAmount={TotalAmount}
-                        TaxAmount={TaxAmount}
+              TaxAmount={TaxAmount}
-                        GrandTotal={GrandTotal}
+              GrandTotal={GrandTotal}
-                      />
+            />
 
             {/* <hr className="dotted-line" /> */}
 
@@ -320,11 +406,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                   <strong>Supplier Name:</strong> {CustName}
                 </div>
               )}
-              {SupplierNo &&
+              {SupplierNo && (
-               <div>
+                <div>
-                <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
+                  <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
-              </div>
+                </div>
-            }
+              )}
             </div>
 
             {renderFooter()}
@@ -335,12 +421,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   );
 };
 
-export default PrintStyle5PurchaseReturn ;
+export default PrintStyle5PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -374,8 +460,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                    {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -387,7 +472,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  tableBodyStyle,
+  rowtypeStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -400,8 +490,8 @@ const ProductTable = ({ data }) => {
 
   return (
     <table className="productTable">
-      <thead   >
+      <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -411,7 +501,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle6.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle6PurchaseReturn  = ({
+const PrintStyle6PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -23,15 +34,19 @@ const PrintStyle6PurchaseReturn  = ({
     VehicleNo,
   } = invoiceData;
   console.log(printDatas, 'printDatas');
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
 
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
@@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -205,14 +275,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
     }
         `}
       </style>
-      <div id="PrintStyle6-purchaseReturn"         style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      <div
->
+        id="PrintStyle6-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
             const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
 
-
             return (
               <div
                 key={chunkIndex}
@@ -234,7 +305,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -249,7 +324,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -283,7 +363,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -295,7 +375,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -326,21 +411,19 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   );
 };
 
-export default PrintStyle6PurchaseReturn ;
+export default PrintStyle6PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
       <div>
         {branch.Address1}-{branch.City}-{branch?.Zip}
       </div>
-      <div>
+      <div>Mobile: +91 {branch.BrMobile}</div>
-        Mobile: +91 {branch.BrMobile}
-      </div>
       <div>
         <strong>Purchase Return</strong>
       </div>
@@ -365,8 +448,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                   {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -378,7 +460,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -392,7 +479,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -402,7 +489,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle7.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle7PurchaseReturn  = ({
+const PrintStyle7PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -23,15 +34,19 @@ const PrintStyle7PurchaseReturn  = ({
     VehicleNo,
   } = invoiceData;
   console.log(printDatas, 'printDatas');
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
 
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
@@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -205,14 +275,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
       
         `}
       </style>
-      <div id="PrintStyle7-purchaseReturn"         style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      <div
->
+        id="PrintStyle7-purchaseReturn"
+        style={{ fontFamily: "'Courier New', Courier, monospace" }}
+      >
         {formatTheme ? (
           paginatedChunks.map((dataChunk, chunkIndex) => {
             const isLastPage = chunkIndex === paginatedChunks.length - 1;
             const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
 
-
             return (
               <div
                 key={chunkIndex}
@@ -234,7 +305,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       <hr className="dotted-line" />
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -249,7 +324,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -283,7 +363,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             <hr className="dotted-line" />
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -295,7 +375,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -326,21 +411,19 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   );
 };
 
-export default PrintStyle7PurchaseReturn ;
+export default PrintStyle7PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
       <div>
         {branch.Address1}-{branch.City}-{branch?.Zip}
       </div>
-      <div>
+      <div>Mobile: +91 {branch.BrMobile}</div>
-        Mobile: +91 {branch.BrMobile}
-      </div>
       <div>
         <strong>Purchase Return</strong>
       </div>
@@ -365,8 +448,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                  {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -378,7 +460,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -392,7 +479,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle, rowtypeStyle, tableBodyStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -402,7 +489,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}
@@ -437,17 +537,20 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       </div>
     </div>
 
-    <div className="SummaryColumn" style={{
+    <div
-    display: "flex",
+      className="SummaryColumn"
-    justifyContent: "center",
+      style={{
-    padding: "0px 110px",
+        display: 'flex',
-    fontSize:"15px"
+        justifyContent: 'center',
-  }}>
+        padding: '0px 110px',
+        fontSize: '15px',
+      }}
+    >
       <div className="Grandtotal">
         <strong>Grand Total</strong>
       </div>
       <div>:</div>
-      <div style={{ width: '15%', textAlign: 'right', fontWeight: "900"}}>
+      <div style={{ width: '15%', textAlign: 'right', fontWeight: '900' }}>
         {' '}
         ₹ {GrandTotal.toFixed(2)}
       </div>

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle8.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle8PurchaseReturn  = ({
+const PrintStyle8PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -50,6 +61,58 @@ const PrintStyle8PurchaseReturn  = ({
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -61,7 +124,10 @@ const PrintStyle8PurchaseReturn  = ({
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -251,7 +317,11 @@ padding-top: 10px;
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -266,7 +336,12 @@ padding-top: 10px;
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    tableBodyStyle={tableBodyStyle}
+                    rowtypeStyle={rowtypeStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -302,7 +377,7 @@ padding-top: 10px;
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -314,7 +389,12 @@ padding-top: 10px;
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              tableBodyStyle={tableBodyStyle}
+              rowtypeStyle={rowtypeStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -345,12 +425,12 @@ padding-top: 10px;
   );
 };
 
-export default PrintStyle8PurchaseReturn ;
+export default PrintStyle8PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {logo && <img src={logo} alt="logo" className="logo" />}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -382,8 +462,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-            {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -395,7 +474,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  rowtypeStyle,
+  tableBodyStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
@@ -409,7 +493,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead style={{ backgroundColor: '#f2f2f2' }}>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th
               key={col.key}
@@ -422,7 +506,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9.jsx

@@ -1,8 +1,19 @@
 import { useSelector } from 'react-redux';
-import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GloabalFieldDetails,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { dateFormatChange1 } from '../../../../Services/Others';
 
-const PrintStyle9PurchaseReturn  = ({
+const PrintStyle9PurchaseReturn = ({
   invoiceData,
   preference,
   printDatas,
@@ -24,15 +35,19 @@ const PrintStyle9PurchaseReturn  = ({
   } = invoiceData;
   console.log(printDatas, 'printDatas');
   const fieldDetails = useSelector(GloabalFieldDetails);
-const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  const signature = FieldDetails?.FieldDetails?.some(
+    (e) => e?.ConfigName == 'signature'
+  );
   const signatureImg = FieldDetails?.Signature;
   const notesText = FieldDetails?.Notes;
   const formatTheme = FieldDetails?.PrintType == 'S';
   const pageSize = FieldDetails?.PageSize;
   const branch = AddressDetails?.[0];
   const logo = branch?.CompLogo;
- let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
- let termsAndConditionsData=FieldDetails?.TermsandConditions
+    (e) => e?.ConfigName == 'terms&conditions'
+  );
+  let termsAndConditionsData = FieldDetails?.TermsandConditions;
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
   );
@@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
   const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
 
+  //
+  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
+  );
+
+  //
+  let printColors = FieldDetails?.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 headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
+
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
+
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
   const renderFooter = () => (
     <>
       {/* <hr className="dotted-line" /> */}
@@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
         <>
           <hr className="dotted-line" />
           {/* {notesText && <p className="notesText">{notesText}</p>} */}
-          <div className="termsAndSignature">
+          <div
+            className="termsAndSignature"
+            style={{ ...footerColorStyle, padding: '0 5px' }}
+          >
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
               <div className="termsAndConditions">
                 <p className="termsAndConditionsHead">Terms & Conditions</p>
@@ -249,7 +319,11 @@ padding-top: 10px;
                 <div>
                   {formatTheme || chunkIndex === 0 ? (
                     <>
-                      <Header logo={logo} branch={branch} />
+                      <Header
+                        logo={logo}
+                        branch={branch}
+                        headerStyle={headerStyle}
+                      />
                       {/* <hr className="dotted-line" /> */}
                       <InvoiceMeta
                         InvoiceNo={InvoiceNo}
@@ -264,7 +338,12 @@ padding-top: 10px;
                     </>
                   ) : null}
 
-                  <ProductTable data={dataChunk} />
+                  <ProductTable
+                    data={dataChunk}
+                    tableHeaderStyle={tableHeaderStyle}
+                    rowtypeStyle={rowtypeStyle}
+                    tableBodyStyle={tableBodyStyle}
+                  />
                   {isLastPage && (
                     <>
                       {/* <hr className="dotted-line" /> */}
@@ -281,10 +360,12 @@ padding-top: 10px;
                             <strong>Supplier Name:</strong> {CustName}
                           </div>
                         )}
-                        {SupplierNo&&<div>
+                        {SupplierNo && (
-                          <strong>Supplier Mobile No:</strong>{' '}
+                          <div>
-                          {SupplierNo || '-'}
+                            <strong>Supplier Mobile No:</strong>{' '}
-                        </div>}
+                            {SupplierNo || '-'}
+                          </div>
+                        )}
                       </div>
                     </>
                   )}
@@ -298,7 +379,7 @@ padding-top: 10px;
           })
         ) : (
           <div className="container">
-            <Header logo={logo} branch={branch} />
+            <Header logo={logo} branch={branch} headerStyle={headerStyle} />
             {/* <hr className="dotted-line" /> */}
             <InvoiceMeta
               InvoiceNo={InvoiceNo}
@@ -310,7 +391,12 @@ padding-top: 10px;
               SupplierNo={SupplierNo}
             />
             <hr className="dotted-line" />
-            <ProductTable data={ProductDetails} />
+            <ProductTable
+              data={ProductDetails}
+              tableHeaderStyle={tableHeaderStyle}
+              rowtypeStyle={rowtypeStyle}
+              tableBodyStyle={tableBodyStyle}
+            />
 
             <Summary
               TotalAmount={TotalAmount}
@@ -341,12 +427,12 @@ padding-top: 10px;
   );
 };
 
-export default PrintStyle9PurchaseReturn ;
+export default PrintStyle9PurchaseReturn;
 
 // --- Subcomponents ---
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {/* {logo && <img src={logo} alt="logo" className="logo" />} */}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -356,11 +442,10 @@ const Header = ({ logo, branch }) => (
       <div>
         <strong>Mobile:</strong> +91 {branch.BrMobile}
       </div>
-     
     </div>
-     <div className='PurchaseReturnPrintName'>
+    <div className="PurchaseReturnPrintName">
-        <strong>Purchase Return</strong>
+      <strong>Purchase Return</strong>
-      </div>
+    </div>
   </div>
 );
 
@@ -381,8 +466,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
-                   {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -394,7 +478,12 @@ const InvoiceMeta = ({
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({
+  data,
+  tableHeaderStyle,
+  tableBodyStyle,
+  rowtypeStyle,
+}) => {
   const columns = [
     { label: 'S.No', key: 'sno', width: '5%' },
     { label: 'Product', key: 'ProdName', width: '20%' },
@@ -407,8 +496,8 @@ const ProductTable = ({ data }) => {
 
   return (
     <table className="productTable">
-      <thead >
+      <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map((col) => (
             <th key={col.key} style={{ width: col.width }}>
               {col.label}
@@ -418,7 +507,20 @@ const ProductTable = ({ data }) => {
       </thead>
       <tbody>
         {data.map((prod, index) => (
-          <tr key={prod.UniqueId}>
+          <tr
+            key={prod.UniqueId}
+            style={{
+              ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                ? {
+                    ...tableBodyStyle,
+                  }
+                : index % 2 === 1 && rowtypeStyle === 'odd'
+                  ? {
+                      ...tableBodyStyle,
+                    }
+                  : {}),
+            }}
+          >
             <td>{index + 1}</td>
             <td>{prod.ProdName}</td>
             {/* <td>{prod.ProdVariantName}</td> */}

src/Pages/PurchaseReturn/purchasereturnPrint.jsx

@@ -19,7 +19,6 @@ import PrintStyle9 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9'
 import PrintStyle10 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10';
 import PrintStyle11 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11';
 import PrintStyle12 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12';
-import { SelectedPrintTemplate } from '../../Features/ThemeChange/ThemeChange';
 import PrintA4Style11 from './PrintReturn/A4purchaseReturn/PrintA4Style11';
 import PrintA5Style11 from './PrintReturn/A4purchaseReturn/PrintStyleA5';
 import A4Standard from './PrintReturn/A4purchaseReturn/A4Standard';
@@ -63,8 +62,6 @@ const PaymentPdfReturn = ({
   const [BranchZip, setBranchZip] = useState();
   const CashierName = getSession('userName');
   const [BrDtl, setBrDtl] = useState();
-  // const selectedStyle = useSelector(SelectedPrintTemplate);
-  // const TotalCal= singleData2?.map((item) =>(item.Price))
   const productsData = table2Data?.productDetails || [];
   const offers = table2Data?.OrderOfferDetails || [];
 
@@ -362,62 +359,6 @@ const PaymentPdfReturn = ({
           )}
         </div>
       )}
-
-      {/* Token print */}
-      {/* {Object.entries(
-        singleData2?.reduce((acc, item, idx) => {
-          if (item.TokenAvailable === 'Y') {
-            if (!item.CounterName) {
-              // For null or empty CounterName, print each item individually
-              acc[`individual-${idx}`] = [item];
-            } else {
-              if (!acc[item.CounterName]) {
-                acc[item.CounterName] = [];
-              }
-              acc[item.CounterName].push(item); // Group by CounterName
-            }
-          }
-          return acc;
-        }, {})
-      ).map(([counterName, items], index) => (
-        <div style={{ display: 'none' }} key={index}>
-          <div
-            className="Reprint-body"
-            id={`TakeawayToken${index}-${counterName}`}
-          >
-            <div className="Re-print-top">
-              <p className="Re-print-title">{items[0]?.BrName}</p>
-              <p className="Re-print-title">Token</p>
-            </div>
-            <div className="Re-print-top2">
-              <p className="Re-print-bold">BillNo:&nbsp;{orderId}</p>
-              <p className="Re-print-bold">{Date1}</p>
-            </div>
-            <table className="Re-print-Table">
-              <thead className="Re-print-th">
-                <tr>
-                  <th className="Re-print-td">S.No</th>
-                  <th className="Re-print-td">Item</th>
-                  <th className="Re-print-td">Qty</th>
-                  <th className="Re-print-td">Rate</th>
-                  <th className="Re-print-td">Price</th>
-                </tr>
-              </thead>
-              <tbody>
-                {items.map((item, idx) => (
-                  <tr className="Re-print-body-Tr" key={idx}>
-                    <td className="Re-print-td">{idx + 1}</td>
-                    <td className="Re-print-body-Product">{item.ProdName}</td>
-                    <td className="Re-print-body-Rate">{item.SalesQty}</td>
-                    <td className="Re-print-body-Rate">{item.Rate}</td>
-                    <td className="Re-print-body-Rate">{item.TotalAmt}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ))} */}
     </>
   );
 };