diff --git a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/A4Standard.jsx b/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/A4Standard.jsx
index bd5dd5e..3699853 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/A4Standard.jsx
+++ b/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>
-              {/* 
-                  { label: 'S.No', key: 'sno', width: '5%' },
-    { label: 'Product', key: 'ProdName', width: '20%' },
-    { label: 'Purchased Qty', key: 'Qty', width: '10%' },
-    { label: 'Returned Qty', key: 'ReturnedQty', width: '10%' },
-    { label: 'Rate', key: 'ProductRate', width: '10%' },
-    { label: 'Tax', key: 'TaxAmount', width: '10%' },
-    { label: 'Total', key: 'TotalAmount', width: '15%' }, */}
-              <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 style={{ ...tableHeaderStyle }}>
+                <th style={{ ...tableHeaderStyle }}>S.No</th>
+                <th style={{ ...tableHeaderStyle }}>Product</th>
+                <th style={{ ...tableHeaderStyle }}>Purchased Qty</th>
+                <th style={{ ...tableHeaderStyle }}>Returned Qty</th>
+                <th style={{ ...tableHeaderStyle }}>Rate</th>
+                <th style={{ ...tableHeaderStyle }}>Tax</th>
+                <th style={{ ...tableHeaderStyle }}>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 && (
                 <>
diff --git a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintA4Style11.jsx b/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintA4Style11.jsx
index 1891eb0..41ffd54 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintA4Style11.jsx
+++ b/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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
+  <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',
       }}
     >
       {' '}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintStyleA5.jsx b/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintStyleA5.jsx
index 9105cbe..b3430bf 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintStyleA5.jsx
+++ b/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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
+  <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',
       }}
     >
       {' '}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PurchaseTaxInvoice.jsx b/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PurchaseTaxInvoice.jsx
index f34af78..c0a99ae 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PurchaseTaxInvoice.jsx
+++ b/src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PurchaseTaxInvoice.jsx
@@ -2,859 +2,2018 @@ import { useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 
 import moment from 'moment';
-import { GlobalPritdummyData } from '../../../../Features/ThemeChange/ThemeChange';
+import {
+  GlobalPritdummyData,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+} from '../../../../Features/ThemeChange/ThemeChange';
 import { extractLastNumberOrderId } from '../../../../Services/Others';
 
 const PurchaseTaxInvoice = ({
-    index,
-    table2Data,
-    Date1,
-    totalQuantity,
-    OrderDetailGST,
-    OrderDetailIGST,
-    PaymentStatus,
-    BranchData,
-    printDatas,
-    PurchaseInvoiceData,
-    BankDetails,
+  index,
+  table2Data,
+  Date1,
+  totalQuantity,
+  OrderDetailGST,
+  OrderDetailIGST,
+  PaymentStatus,
+  BranchData,
+  printDatas,
+  PurchaseInvoiceData,
+  BankDetails,
 }) => {
+  const GlobaldummyData = useSelector(GlobalPritdummyData);
+  let BillName = printDatas?.PrintHdrName;
 
-    const GlobaldummyData = useSelector(GlobalPritdummyData);
-    let BillName = printDatas?.PrintHdrName;
+  // Function to convert number to words
+  const numberToWords = (num) => {
+    const a = [
+      '',
+      'One',
+      'Two',
+      'Three',
+      'Four',
+      'Five',
+      'Six',
+      'Seven',
+      'Eight',
+      'Nine',
+      'Ten',
+      'Eleven',
+      'Twelve',
+      'Thirteen',
+      'Fourteen',
+      'Fifteen',
+      'Sixteen',
+      'Seventeen',
+      'Eighteen',
+      'Nineteen',
+    ];
+    const b = [
+      '',
+      '',
+      'Twenty',
+      'Thirty',
+      'Forty',
+      'Fifty',
+      'Sixty',
+      'Seventy',
+      'Eighty',
+      'Ninety',
+    ];
 
-    // Function to convert number to words
-    const numberToWords = (num) => {
-        const a = [
-            "", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten",
-            "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen",
-            "Eighteen", "Nineteen"
-        ];
-        const b = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
+    if (num === 0) return 'Zero';
+    if (num < 20) return a[num];
+    if (num < 100)
+      return b[Math.floor(num / 10)] + (num % 10 ? ' ' + a[num % 10] : '');
+    if (num < 1000)
+      return (
+        a[Math.floor(num / 100)] +
+        ' Hundred' +
+        (num % 100 ? ' and ' + numberToWords(num % 100) : '')
+      );
+    if (num < 100000)
+      return (
+        numberToWords(Math.floor(num / 1000)) +
+        ' Thousand' +
+        (num % 1000 ? ' ' + numberToWords(num % 1000) : '')
+      );
+    if (num < 10000000)
+      return (
+        numberToWords(Math.floor(num / 100000)) +
+        ' Lakh' +
+        (num % 100000 ? ' ' + numberToWords(num % 100000) : '')
+      );
+    if (num < 1000000000)
+      return (
+        numberToWords(Math.floor(num / 10000000)) +
+        ' Crore' +
+        (num % 10000000 ? ' ' + numberToWords(num % 10000000) : '')
+      );
 
-        if (num === 0) return "Zero";
-        if (num < 20) return a[num];
-        if (num < 100) return b[Math.floor(num / 10)] + (num % 10 ? " " + a[num % 10] : "");
-        if (num < 1000)
-            return a[Math.floor(num / 100)] + " Hundred" + (num % 100 ? " and " + numberToWords(num % 100) : "");
-        if (num < 100000)
-            return numberToWords(Math.floor(num / 1000)) + " Thousand" + (num % 1000 ? " " + numberToWords(num % 1000) : "");
-        if (num < 10000000)
-            return numberToWords(Math.floor(num / 100000)) + " Lakh" + (num % 100000 ? " " + numberToWords(num % 100000) : "");
-        if (num < 1000000000)
-            return numberToWords(Math.floor(num / 10000000)) + " Crore" + (num % 10000000 ? " " + numberToWords(num % 10000000) : "");
+    return 'Number too large';
+  };
 
-        return "Number too large";
-    };
+  // Fixed data mapping with proper fallbacks
+  const invoiceData = {
+    // Company Details - with proper fallbacks
+    companyName:
+      printDatas?.companyName ||
+      PurchaseInvoiceData?.AddressDetails?.[0]?.CompName ||
+      BranchData?.BrName ||
+      table2Data?.BrName ||
+      'Company Name',
+    companyspecname:
+      printDatas?.companyspecname || table2Data?.AppSpecificName || '',
+    companyAddress: {
+      address1:
+        printDatas?.companyAddress?.address1 ||
+        PurchaseInvoiceData?.AddressDetails?.[0]?.Address1 ||
+        BranchData?.Address1 ||
+        '',
+      address2:
+        printDatas?.companyAddress?.address2 ||
+        PurchaseInvoiceData?.AddressDetails?.[0]?.Address2 ||
+        BranchData?.Address2 ||
+        '',
+      city:
+        printDatas?.companyAddress?.city ||
+        PurchaseInvoiceData?.AddressDetails?.[0]?.City ||
+        BranchData?.City ||
+        '',
+      state:
+        printDatas?.companyAddress?.state ||
+        PurchaseInvoiceData?.AddressDetails?.[0]?.State ||
+        BranchData?.State ||
+        '',
+      zip:
+        printDatas?.companyAddress?.zip ||
+        PurchaseInvoiceData?.AddressDetails?.[0]?.Zip ||
+        BranchData?.Zip ||
+        '',
+    },
+    companyGSTIN:
+      PurchaseInvoiceData?.AddressDetails?.[0]?.BrGSTIN ||
+      BranchData?.BrGSTIN ||
+      BranchData?.GSTIN ||
+      '',
+    companyEmail:
+      PurchaseInvoiceData?.AddressDetails?.[0]?.BrEmail ||
+      BranchData?.BrEmail ||
+      BranchData?.Email ||
+      '',
+    companyMobile:
+      PurchaseInvoiceData?.AddressDetails?.[0]?.BrMobile ||
+      BranchData?.BrMobile ||
+      BranchData?.Mobile ||
+      '',
+    companyMobile2:
+      PurchaseInvoiceData?.AddressDetails?.[0]?.BrMobile2 ||
+      BranchData?.BrMobile2 ||
+      '',
 
-    // Fixed data mapping with proper fallbacks
-    const invoiceData = {
-        // Company Details - with proper fallbacks
-        companyName: printDatas?.companyName ||
-            PurchaseInvoiceData?.AddressDetails?.[0]?.CompName ||
-            BranchData?.BrName ||
-            table2Data?.BrName ||
-            "Company Name",
-        companyspecname: printDatas?.companyspecname ||
-            table2Data?.AppSpecificName || "",
-        companyAddress: {
-            address1: printDatas?.companyAddress?.address1 ||
-                PurchaseInvoiceData?.AddressDetails?.[0]?.Address1 ||
-                BranchData?.Address1 || "",
-            address2: printDatas?.companyAddress?.address2 ||
-                PurchaseInvoiceData?.AddressDetails?.[0]?.Address2 ||
-                BranchData?.Address2 || "",
-            city: printDatas?.companyAddress?.city ||
-                PurchaseInvoiceData?.AddressDetails?.[0]?.City ||
-                BranchData?.City || "",
-            state: printDatas?.companyAddress?.state ||
-                PurchaseInvoiceData?.AddressDetails?.[0]?.State ||
-                BranchData?.State || "",
-            zip: printDatas?.companyAddress?.zip ||
-                PurchaseInvoiceData?.AddressDetails?.[0]?.Zip ||
-                BranchData?.Zip || ""
-        },
-        companyGSTIN: PurchaseInvoiceData?.AddressDetails?.[0]?.BrGSTIN ||
-            BranchData?.BrGSTIN ||
-            BranchData?.GSTIN || "",
-        companyEmail: PurchaseInvoiceData?.AddressDetails?.[0]?.BrEmail ||
-            BranchData?.BrEmail ||
-            BranchData?.Email || "",
-        companyMobile: PurchaseInvoiceData?.AddressDetails?.[0]?.BrMobile ||
-            BranchData?.BrMobile ||
-            BranchData?.Mobile || "",
-        companyMobile2: PurchaseInvoiceData?.AddressDetails?.[0]?.BrMobile2 ||
-            BranchData?.BrMobile2 || "",
+    // Invoice Details - with proper fallbacks
+    invoiceNo: PurchaseInvoiceData?.InvoiceNo
+      ? extractLastNumberOrderId(PurchaseInvoiceData.InvoiceNo)
+      : PurchaseInvoiceData?.PurReturnId
+        ? extractLastNumberOrderId(PurchaseInvoiceData.PurReturnId)
+        : '',
+    invoiceDate: PurchaseInvoiceData?.InvoiceDate
+      ? moment(PurchaseInvoiceData.InvoiceDate).format('DD-MM-YYYY')
+      : moment().format('DD-MM-YYYY'),
 
-        // Invoice Details - with proper fallbacks
-        invoiceNo: PurchaseInvoiceData?.InvoiceNo ?
-            extractLastNumberOrderId(PurchaseInvoiceData.InvoiceNo) :
-            (PurchaseInvoiceData?.PurReturnId ?
-                extractLastNumberOrderId(PurchaseInvoiceData.PurReturnId) : ""),
-        invoiceDate: PurchaseInvoiceData?.InvoiceDate ?
-            moment(PurchaseInvoiceData.InvoiceDate).format('DD-MM-YYYY') :
-            moment().format('DD-MM-YYYY'),
+    // Customer Details - with proper fallbacks
+    customerName:
+      PurchaseInvoiceData?.CustomerDetails?.[0]?.CustSuppName ||
+      PurchaseInvoiceData?.CustName ||
+      PurchaseInvoiceData?.SupplierName ||
+      'Customer Name',
+    customerMobile:
+      PurchaseInvoiceData?.CustomerDetails?.[0]?.MobileNo ||
+      PurchaseInvoiceData?.CustMobile ||
+      PurchaseInvoiceData?.SupplierMobile ||
+      '',
+    customerGSTIN:
+      PurchaseInvoiceData?.CustomerDetails?.[0]?.CustGSTNo ||
+      PurchaseInvoiceData?.CustGSTIN ||
+      PurchaseInvoiceData?.SupplierGSTIN ||
+      '',
+    customerAddress: {
+      address1:
+        PurchaseInvoiceData?.AddressDetail?.[0]?.Address1 ||
+        PurchaseInvoiceData?.CustomerDetails?.[0]?.Address1 ||
+        '',
+      address2:
+        PurchaseInvoiceData?.AddressDetail?.[0]?.City ||
+        PurchaseInvoiceData?.CustomerDetails?.[0]?.City ||
+        '',
+      state:
+        PurchaseInvoiceData?.AddressDetail?.[0]?.State ||
+        PurchaseInvoiceData?.CustomerDetails?.[0]?.State ||
+        '',
+    },
 
-        // Customer Details - with proper fallbacks
-        customerName: PurchaseInvoiceData?.CustomerDetails?.[0]?.CustSuppName ||
-            PurchaseInvoiceData?.CustName ||
-            PurchaseInvoiceData?.SupplierName ||
-            "Customer Name",
-        customerMobile: PurchaseInvoiceData?.CustomerDetails?.[0]?.MobileNo ||
-            PurchaseInvoiceData?.CustMobile ||
-            PurchaseInvoiceData?.SupplierMobile || "",
-        customerGSTIN: PurchaseInvoiceData?.CustomerDetails?.[0]?.CustGSTNo ||
-            PurchaseInvoiceData?.CustGSTIN ||
-            PurchaseInvoiceData?.SupplierGSTIN || "",
-        customerAddress: {
-            address1: PurchaseInvoiceData?.AddressDetail?.[0]?.Address1 ||
-                PurchaseInvoiceData?.CustomerDetails?.[0]?.Address1 || "",
-            address2: PurchaseInvoiceData?.AddressDetail?.[0]?.City ||
-                PurchaseInvoiceData?.CustomerDetails?.[0]?.City || "",
-            state: PurchaseInvoiceData?.AddressDetail?.[0]?.State ||
-                PurchaseInvoiceData?.CustomerDetails?.[0]?.State || ""
-        },
+    // Product Details - using the correct data source
+    productDetails:
+      PurchaseInvoiceData?.ProductDetails || table2Data?.ProductDetails || [],
 
-        // Product Details - using the correct data source
-        productDetails: PurchaseInvoiceData?.ProductDetails || table2Data?.ProductDetails || [],
+    // Totals - with proper calculations and fallbacks
+    totalAmount: Number(
+      PurchaseInvoiceData?.BillAmount ||
+        PurchaseInvoiceData?.TotalAmount ||
+        PurchaseInvoiceData?.NetAmount ||
+        0
+    ),
+    taxAmount: Number(
+      PurchaseInvoiceData?.TaxAmount ||
+        OrderDetailGST?.reduce(
+          (sum, item) => sum + (item.CGST || 0) + (item.SGST || 0),
+          0
+        ) ||
+        OrderDetailIGST?.reduce((sum, item) => sum + (item.IGST || 0), 0) ||
+        0
+    ),
+    grandTotal: Number(
+      PurchaseInvoiceData?.NetAmount ||
+        PurchaseInvoiceData?.GrandTotal ||
+        PurchaseInvoiceData?.TotalAmount ||
+        0
+    ),
+    totalBillAmount: Number(
+      PurchaseInvoiceData?.BillAmount ||
+        PurchaseInvoiceData?.GrandTotal ||
+        PurchaseInvoiceData?.SubTotal ||
+        0
+    ),
 
-        // Totals - with proper calculations and fallbacks
-        totalAmount: Number(PurchaseInvoiceData?.BillAmount ||
-            PurchaseInvoiceData?.TotalAmount ||
-            PurchaseInvoiceData?.NetAmount || 0),
-        taxAmount: Number(PurchaseInvoiceData?.TaxAmount ||
-            (OrderDetailGST?.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0), 0)) ||
-            (OrderDetailIGST?.reduce((sum, item) => sum + (item.IGST || 0), 0)) || 0),
-        grandTotal: Number(PurchaseInvoiceData?.NetAmount ||
-            PurchaseInvoiceData?.GrandTotal ||
-            PurchaseInvoiceData?.TotalAmount || 0),
-        totalBillAmount: Number(PurchaseInvoiceData?.BillAmount ||
-            PurchaseInvoiceData?.GrandTotal ||
-            PurchaseInvoiceData?.SubTotal || 0),
+    // Bank Details - with proper fallback
+    bankDetails:
+      (Array.isArray(BankDetails) ? BankDetails[0] : BankDetails) || {},
+  };
 
-        // Bank Details - with proper fallback
-        bankDetails: (Array.isArray(BankDetails) ? BankDetails[0] : BankDetails) || {}
-    };
+  let PageSize = printDatas?.PageSize || 'A4';
 
+  // Calculate GST totals with proper fallbacks
+  const cgstTotal =
+    OrderDetailGST && OrderDetailGST.length > 0
+      ? Number(
+          OrderDetailGST.reduce(
+            (sum, item) => sum + (Number(item.CGST) || 0),
+            0
+          )
+        )?.toFixed(2)
+      : '0.00';
 
-    let PageSize = printDatas?.PageSize || "A4";
+  const sgstTotal =
+    OrderDetailGST && OrderDetailGST.length > 0
+      ? Number(
+          OrderDetailGST.reduce(
+            (sum, item) => sum + (Number(item.SGST) || 0),
+            0
+          )
+        )?.toFixed(2)
+      : '0.00';
 
-    // Calculate GST totals with proper fallbacks
-    const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
-        ? Number(OrderDetailGST.reduce((sum, item) => sum + (Number(item.CGST) || 0), 0))?.toFixed(2)
-        : "0.00";
+  const igstTotal =
+    OrderDetailIGST && OrderDetailIGST.length > 0
+      ? Number(
+          OrderDetailIGST.reduce(
+            (sum, item) => sum + (Number(item.IGST) || 0),
+            0
+          )
+        )?.toFixed(2)
+      : '0.00';
 
-    const sgstTotal = OrderDetailGST && OrderDetailGST.length > 0
-        ? Number(OrderDetailGST.reduce((sum, item) => sum + (Number(item.SGST) || 0), 0))?.toFixed(2)
-        : "0.00";
+  // Calculate round off value with proper validation
+  const roundOffValue =
+    Number(invoiceData.grandTotal) -
+    (Number(invoiceData.totalBillAmount) +
+      Number(cgstTotal) +
+      Number(sgstTotal) +
+      Number(igstTotal));
 
-    const igstTotal = OrderDetailIGST && OrderDetailIGST.length > 0
-        ? Number(OrderDetailIGST.reduce((sum, item) => sum + (Number(item.IGST) || 0), 0))?.toFixed(2)
-        : "0.00";
+  console.log('Tax Calculations:', {
+    totalBillAmount: Number(invoiceData.totalBillAmount),
+    cgstTotal,
+    sgstTotal,
+    igstTotal,
+    roundOffValue,
+  });
 
-    // Calculate round off value with proper validation
-    const roundOffValue = Number(invoiceData.grandTotal) - (
-        Number(invoiceData.totalBillAmount) +
-        Number(cgstTotal) +
-        Number(sgstTotal) +
-        Number(igstTotal)
+  function RoundOffFun(amount) {
+    if (isNaN(amount)) return '0.00';
+    const roundedAmount = Math.round(amount);
+    const roundOffValue = parseFloat((roundedAmount - amount).toFixed(2));
+    console.log(
+      'Rounded Amount:',
+      roundedAmount,
+      'Round Off Value:',
+      roundOffValue
     );
+    return `${roundOffValue.toFixed(2)}`;
+  }
 
-    console.log("Tax Calculations:", {
-        totalBillAmount: Number(invoiceData.totalBillAmount),
-        cgstTotal,
-        sgstTotal,
-        igstTotal,
-        roundOffValue
-    });
+  // Allow up to 10 items per page
+  const chunkSize = isMobile ? 7 : PageSize === 'A5' ? 9 : 8;
+  let dataSource = [];
 
-    function RoundOffFun(amount) {
-        if (isNaN(amount)) return "0.00";
-        const roundedAmount = Math.round(amount);
-        const roundOffValue = parseFloat((roundedAmount - amount).toFixed(2));
-        console.log("Rounded Amount:", roundedAmount, "Round Off Value:", roundOffValue);
-        return `${roundOffValue.toFixed(2)}`;
+  // Fixed data source logic - use ProductDetails from PurchaseInvoiceData
+  dataSource = PurchaseInvoiceData?.ProductDetails || [];
+
+  // Ensure dataSource is always an array
+  if (!Array.isArray(dataSource)) {
+    dataSource = [];
+  }
+
+  const paginatedChunks = [];
+
+  // Always create at least one chunk, even if empty
+  if (dataSource.length === 0) {
+    paginatedChunks.push([]);
+  } else {
+    // Split data into chunks
+    for (let i = 0; i < dataSource.length; i += chunkSize) {
+      const chunk = dataSource.slice(i, i + chunkSize);
+      paginatedChunks.push(chunk);
     }
+  }
 
-    // Allow up to 10 items per page
-    const chunkSize = isMobile ? 7 : PageSize === "A5" ? 9 : 8;
-    let dataSource = [];
+  const lastChunkRows =
+    paginatedChunks.length > 0
+      ? paginatedChunks[paginatedChunks.length - 1].length
+      : 0;
+  // If last page has more than 6 items, move footer to new page
+  const shouldFooterBeOnNewPage = lastChunkRows === chunkSize;
 
-    // Fixed data source logic - use ProductDetails from PurchaseInvoiceData
-    dataSource = PurchaseInvoiceData?.ProductDetails || [];
+  // If footer should be on new page, add an empty chunk for footer-only page
+  if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
+    paginatedChunks.push([]); // Empty chunk for footer-only page
+  }
 
-    // Ensure dataSource is always an array
-    if (!Array.isArray(dataSource)) {
-        dataSource = [];
-    }
+  //
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+  const SelectedHeaderFontColor = useSelector(
+    GlobalSelectedPrintHeaderFontColor
+  );
+  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
+  const SelectedTableHeaderFontColor = useSelector(
+    GlobalSelectedTableHeaderFontColor
+  );
+  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
+  const SelectedTableBodyFontColor = useSelector(
+    GlobalSelectedTableBodyFontColor
+  );
+  const SelectedRowType = useSelector(GlobalRowType);
+  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
+  const SelectedTableFooterFontColor = useSelector(
+    GlobalSelectedFooterFontColor
+  );
 
-    const paginatedChunks = [];
+  //
+  let printColors = printDatas?.PrintColors;
+  const headerColor = printColors?.find((obj) => obj.headerColor)?.headerColor;
+  const tableHeaderColor = printColors?.find(
+    (obj) => obj.tableHeaderColor
+  )?.tableHeaderColor;
+  const tableBodyColor = printColors?.find(
+    (obj) => obj.tableBodyColor
+  )?.tableBodyColor;
+  const footerColor = printColors?.find((obj) => obj.footerColor)?.footerColor;
 
-    // Always create at least one chunk, even if empty
-    if (dataSource.length === 0) {
-        paginatedChunks.push([]);
-    } else {
-        // Split data into chunks
-        for (let i = 0; i < dataSource.length; i += chunkSize) {
-            const chunk = dataSource.slice(i, i + chunkSize);
-            paginatedChunks.push(chunk);
-        }
-    }
+  //
+  const headerStyle = {
+    backgroundColor: headerColor?.background,
+    color: headerColor?.font,
+  };
+  const tableHeaderStyle = {
+    backgroundColor: tableHeaderColor?.background,
+    color: tableHeaderColor?.font,
+  };
 
-    const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
-    // If last page has more than 6 items, move footer to new page
-    const shouldFooterBeOnNewPage = lastChunkRows === chunkSize;
+  const tableBodyStyle = {
+    backgroundColor: tableBodyColor?.background,
+    color: tableBodyColor?.font,
+  };
 
-    // If footer should be on new page, add an empty chunk for footer-only page
-    if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
-        paginatedChunks.push([]); // Empty chunk for footer-only page
-    }
+  const rowtypeStyle = tableBodyColor?.rowType;
+
+  const footerColorStyle = {
+    backgroundColor: footerColor?.background,
+    color: footerColor?.font,
+  };
+
+  return (
+    <div
+      id={`TaxInvoice`}
+      style={{
+        fontFamily: 'Arial, sans-serif',
+        fontSize: '12px',
+        fontWeight: 'bold',
+        lineHeight: '1.2',
+        color: '#000',
+        maxWidth: '210mm',
+        margin: '0 auto',
+        padding: '10mm',
+        backgroundColor: 'white',
+      }}
+    >
+      {paginatedChunks.map((dataChunk, chunkIndex) => (
+        <div
+          key={chunkIndex}
+          className={
+            isMobile
+              ? `invoice-wrapper container pdf-page`
+              : `invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`
+          }
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            height: isMobile ? '275mm' : PageSize === 'A5' ? '130mm' : '245mm',
+            marginBottom: '0',
+            pageBreakAfter:
+              chunkIndex < paginatedChunks.length - 1 ? 'always' : 'auto',
+          }}
+        >
+          {renderInvoiceContent(dataChunk, chunkIndex)}
+        </div>
+      ))}
+    </div>
+  );
+
+  function renderInvoiceContent(dataChunk, chunkIndex) {
+    const isFirstPage = chunkIndex === 0;
+    const isLastPage = chunkIndex === paginatedChunks.length - 1;
+    const isFooterOnlyPage =
+      isLastPage && dataChunk.length === 0 && shouldFooterBeOnNewPage;
 
     return (
-        <div id={`TaxInvoice`} style={{
-            fontFamily: 'Arial, sans-serif',
-            fontSize: '12px',
-            fontWeight: 'bold',
-            lineHeight: '1.2',
-            color: '#000',
-            maxWidth: '210mm',
-            margin: '0 auto',
-            padding: '10mm',
-            backgroundColor: 'white'
-        }}>
-            {paginatedChunks.map((dataChunk, chunkIndex) => (
+      <>
+        {/* Header - Only on first page */}
+        {isFirstPage && (
+          <div
+            style={{
+              textAlign: 'center',
+              marginBottom: '10px',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              ...headerStyle,
+            }}
+          >
+            <div></div>
+            <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>
+              {BillName || 'Purchase Return Invoice'}
+            </h2>
+            <div>
+              <div style={{ fontSize: '10px', marginTop: '2px' }}>
+                (ORIGINAL FOR RECIPIENT)
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Main Container - Always show */}
+        <div style={{ border: '1px solid #000' }}>
+          {/* Top Section - Company and Invoice Details - Only on first page */}
+          {isFirstPage && (
+            <div style={{ display: 'flex', width: '100%' }}>
+              {/* Left - Company Details */}
+              <div
+                style={{
+                  width: '50%',
+                  borderRight: '1px solid #000',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
                 <div
-                    key={chunkIndex}
-                    className={isMobile ? `invoice-wrapper container pdf-page` : `invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`}
-                    style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        height: isMobile ? "275mm" : PageSize === "A5" ? '130mm' : "245mm",
-                        marginBottom: "0",
-                        pageBreakAfter: chunkIndex < paginatedChunks.length - 1 ? 'always' : 'auto'
-                    }}
+                  style={{
+                    padding: '10px',
+                    fontSize: '11px',
+                    textAlign: 'left',
+                    // ...headerStyle,
+                  }}
                 >
-                    {renderInvoiceContent(dataChunk, chunkIndex)}
-                </div>
-            ))}
-        </div>
-    );
-
-    function renderInvoiceContent(dataChunk, chunkIndex) {
-        const isFirstPage = chunkIndex === 0;
-        const isLastPage = chunkIndex === paginatedChunks.length - 1;
-        const isFooterOnlyPage = isLastPage && dataChunk.length === 0 && shouldFooterBeOnNewPage;
-
-        return (
-            <>
-                {/* Header - Only on first page */}
-                {isFirstPage && (
-                    <div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                        <div></div>
-                        <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>
-                            {BillName || "Purchase Return Invoice"}
-                        </h2>
-                        <div>
-                            <div style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div>
-                        </div>
+    
+                  <div style={{ fontWeight: '700', fontSize: '15px', color: headerColor?.font, }}>
+                    {invoiceData.companyName}
+                  </div>
+                  {invoiceData.companyspecname && (
+                    <div style={{ fontWeight: '700', fontSize: '12px' }}>
+                      {invoiceData.companyspecname}
                     </div>
-                )}
+                  )}
+                  <div>{invoiceData.companyAddress.address1}</div>
+                  {invoiceData.companyAddress.address2 && (
+                    <div>{invoiceData.companyAddress.address2}</div>
+                  )}
+                  <div>
+                    {invoiceData.companyAddress.city}
+                    {invoiceData.companyAddress.zip
+                      ? ` - ${invoiceData.companyAddress.zip}`
+                      : ''}
+                  </div>
+                  {invoiceData.companyAddress.state && (
+                    <div>{invoiceData.companyAddress.state}</div>
+                  )}
+                  {invoiceData.companyGSTIN && (
+                    <div>GSTIN/UIN: {invoiceData.companyGSTIN}</div>
+                  )}
+                  {invoiceData.companyEmail && (
+                    <div>E-Mail: {invoiceData.companyEmail}</div>
+                  )}
+                  {invoiceData.companyMobile && (
+                    <div>
+                      Mobile: +91 {invoiceData.companyMobile}
+                      {invoiceData.companyMobile2
+                        ? `, ${invoiceData.companyMobile2}`
+                        : ''}
+                    </div>
+                  )}
+                </div>
 
-                {/* Main Container - Always show */}
-                <div style={{ border: '1px solid #000' }}>
+                {/* Customer Details */}
+                <div
+                  style={{
+                    padding: '10px',
+                    borderTop: '1px solid #000',
+                    fontSize: '11px',
+                    minHeight: '60px',
+                    textAlign: 'left',
+                  }}
+                >
+                  <div style={{ fontWeight: '700', marginBottom: '5px' }}>
+                    Customer Details:
+                  </div>
+                  <div style={{ fontWeight: '700' }}>
+                    {invoiceData.customerName}
+                  </div>
+                  {invoiceData.customerAddress.address1 && (
+                    <div>{invoiceData.customerAddress.address1}</div>
+                  )}
+                  {invoiceData.customerAddress.address2 && (
+                    <div>{invoiceData.customerAddress.address2}</div>
+                  )}
+                  {invoiceData.customerMobile && (
+                    <div>Mobile: {invoiceData.customerMobile}</div>
+                  )}
+                  {invoiceData.customerGSTIN && (
+                    <div>GSTIN/UIN: {invoiceData.customerGSTIN}</div>
+                  )}
+                  {invoiceData.customerAddress.state && (
+                    <div>State Name: {invoiceData.customerAddress.state}</div>
+                  )}
+                </div>
+              </div>
 
-                    {/* Top Section - Company and Invoice Details - Only on first page */}
-                    {isFirstPage && (
-                        <div style={{ display: 'flex', width: "100%" }}>
+              {/* Right - Invoice Details */}
+              <div style={{ flex: '1', fontSize: '10px' }}>
+                {/* Invoice No and Date */}
+                <div
+                  style={{ display: 'flex', borderBottom: '1px solid #000' }}
+                >
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'left',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Invoice No.
+                    </div>
+                    <div style={{ fontWeight: '700', fontSize: '15px' }}>
+                      {invoiceData.invoiceNo}
+                    </div>
+                  </div>
+                  <div
+                    style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}
+                  >
+                    <div>Dated</div>
+                    <div style={{ fontWeight: '700', fontSize: '15px' }}>
+                      {invoiceData.invoiceDate}
+                    </div>
+                  </div>
+                </div>
 
-                            {/* Left - Company Details */}
-                            <div style={{ width: "50%", borderRight: '1px solid #000', display: 'flex', flexDirection: 'column' }}>
-                                <div style={{
-                                    padding: '10px',
-                                    fontSize: '11px',
-                                    textAlign: 'left'
-                                }}>
-                                    <div style={{ fontWeight: '700', fontSize: '15px' }}>
-                                        {invoiceData.companyName}
-                                    </div>
-                                    {invoiceData.companyspecname && (
-                                        <div style={{ fontWeight: '700', fontSize: '12px' }}>{invoiceData.companyspecname}</div>
-                                    )}
-                                    <div>{invoiceData.companyAddress.address1}</div>
-                                    {invoiceData.companyAddress.address2 && <div>{invoiceData.companyAddress.address2}</div>}
-                                    <div>{invoiceData.companyAddress.city}{invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}</div>
-                                    {invoiceData.companyAddress.state && <div>{invoiceData.companyAddress.state}</div>}
-                                    {invoiceData.companyGSTIN && <div>GSTIN/UIN: {invoiceData.companyGSTIN}</div>}
-                                    {invoiceData.companyEmail && <div>E-Mail: {invoiceData.companyEmail}</div>}
-                                    {invoiceData.companyMobile && (
-                                        <div>Mobile: +91 {invoiceData.companyMobile}{invoiceData.companyMobile2 ? `, ${invoiceData.companyMobile2}` : ""}</div>
-                                    )}
-                                </div>
+                {/* Delivery Note and Payment Terms */}
+                <div
+                  style={{
+                    display: 'flex',
+                    borderBottom: '1px solid #000',
+                    textAlign: 'left',
+                    minHeight: '25px',
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderRight: '1px solid #000',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Delivery Note
+                    </div>
+                    <div></div>
+                  </div>
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      textAlign: 'left',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Mode/Terms of Payment
+                    </div>
+                    <div></div>
+                  </div>
+                </div>
 
-                                {/* Customer Details */}
-                                <div style={{
-                                    padding: '10px',
-                                    borderTop: '1px solid #000',
-                                    fontSize: '11px',
-                                    minHeight: '60px',
-                                    textAlign: 'left'
-                                }}>
-                                    <div style={{ fontWeight: '700', marginBottom: '5px' }}>Customer Details:</div>
-                                    <div style={{ fontWeight: '700' }}>{invoiceData.customerName}</div>
-                                    {invoiceData.customerAddress.address1 && <div>{invoiceData.customerAddress.address1}</div>}
-                                    {invoiceData.customerAddress.address2 && <div>{invoiceData.customerAddress.address2}</div>}
-                                    {invoiceData.customerMobile && <div>Mobile: {invoiceData.customerMobile}</div>}
-                                    {invoiceData.customerGSTIN && <div>GSTIN/UIN: {invoiceData.customerGSTIN}</div>}
-                                    {invoiceData.customerAddress.state && <div>State Name: {invoiceData.customerAddress.state}</div>}
-                                </div>
-                            </div>
+                {/* Reference and Other References */}
+                <div
+                  style={{
+                    display: 'flex',
+                    borderBottom: '1px solid #000',
+                    textAlign: 'left',
+                    minHeight: '25px',
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderRight: '1px solid #000',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Reference No. & Date
+                    </div>
+                    <div></div>
+                  </div>
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      textAlign: 'left',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Other References
+                    </div>
+                    <div></div>
+                  </div>
+                </div>
 
-                            {/* Right - Invoice Details */}
-                            <div style={{ flex: '1', fontSize: '10px' }}>
-                                {/* Invoice No and Date */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Invoice No.</div>
-                                        <div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceNo}</div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}>
-                                        <div>Dated</div>
-                                        <div style={{ fontWeight: '700', fontSize: '15px' }}>{invoiceData.invoiceDate}</div>
-                                    </div>
-                                </div>
+                {/* Buyer's Order */}
+                <div
+                  style={{
+                    display: 'flex',
+                    borderBottom: '1px solid #000',
+                    textAlign: 'left',
+                    minHeight: '25px',
+                  }}
+                >
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderRight: '1px solid #000',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Buyer's Order No.
+                    </div>
+                    <div></div>
+                  </div>
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      textAlign: 'left',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Dated
+                    </div>
+                    <div></div>
+                  </div>
+                </div>
 
-                                {/* Delivery Note and Payment Terms */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note</div>
-                                        <div></div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Mode/Terms of Payment</div>
-                                        <div></div>
-                                    </div>
-                                </div>
+                {/* Dispatch Details */}
+                <div
+                  style={{ display: 'flex', borderBottom: '1px solid #000' }}
+                >
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'left',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Dispatch Doc No.
+                    </div>
+                    <div></div>
+                  </div>
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      textAlign: 'left',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Delivery Note Date
+                    </div>
+                    <div></div>
+                  </div>
+                </div>
 
-                                {/* Reference and Other References */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Reference No. & Date</div>
-                                        <div></div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Other References</div>
-                                        <div></div>
-                                    </div>
-                                </div>
+                {/* Dispatched through and Destination */}
+                <div
+                  style={{
+                    display: 'flex',
+                    borderBottom: '1px solid #000',
+                    minHeight: '25px',
+                  }}
+                >
+                  <div
+                    style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}
+                  >
+                    <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                      Dispatched through
+                    </div>
+                    <div></div>
+                  </div>
+                  <div
+                    style={{
+                      flex: '1',
+                      paddingLeft: '3px',
+                      borderLeft: '1px solid #000',
+                      minHeight: '25px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontWeight: '700',
+                        fontSize: '9px',
+                        textAlign: 'left',
+                      }}
+                    >
+                      Destination
+                    </div>
+                    <div></div>
+                  </div>
+                </div>
 
-                                {/* Buyer's Order */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Buyer's Order No.</div>
-                                        <div></div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Dated</div>
-                                        <div></div>
-                                    </div>
-                                </div>
+                {/* Terms of Delivery */}
+                <div
+                  style={{
+                    padding: '8px 6px',
+                    textAlign: 'left',
+                    minHeight: '35px',
+                  }}
+                >
+                  <div style={{ fontWeight: '700', fontSize: '9px' }}>
+                    Terms of Delivery
+                  </div>
+                  <div></div>
+                </div>
+              </div>
+            </div>
+          )}
 
-                                {/* Dispatch Details */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderRight: '1px solid #000', textAlign: 'left', minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatch Doc No.</div>
-                                        <div></div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left', minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Delivery Note Date</div>
-                                        <div></div>
-                                    </div>
-                                </div>
+          {/* Continuation header for non-first pages */}
+          {!isFirstPage && (
+            <div
+              style={{
+                textAlign: 'center',
+                marginBottom: '10px',
+                padding: '5px',
+              }}
+            >
+              <h3 style={{ margin: '0', fontSize: '16px', fontWeight: '700' }}>
+                {BillName || 'Purchase Return Invoice'}
+              </h3>
+              <div style={{ fontSize: '10px' }}>
+                Invoice No: {invoiceData.invoiceNo}
+              </div>
+            </div>
+          )}
 
-                                {/* Dispatched through and Destination */}
-                                <div style={{ display: 'flex', borderBottom: '1px solid #000', minHeight: '25px' }}>
-                                    <div style={{ flex: '1', paddingLeft: '3px', textAlign: 'left' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px' }}>Dispatched through</div>
-                                        <div></div>
-                                    </div>
-                                    <div style={{ flex: '1', paddingLeft: '3px', borderLeft: "1px solid #000", minHeight: '25px' }}>
-                                        <div style={{ fontWeight: '700', fontSize: '9px', textAlign: 'left' }}>Destination</div>
-                                        <div></div>
-                                    </div>
-                                </div>
+          {/* Items Table */}
+          {(dataChunk.length > 0 || !isFooterOnlyPage) && (
+            <div style={{ minHeight: '250px' }}>
+              {/* Table Header */}
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                  fontSize: '10px',
+                  borderBottom: '1px solid #000',
+                  borderTop: '1px solid #000',
+                  ...tableHeaderStyle,
+                }}
+              >
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  Sl.No
+                </div>
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  Description of Goods
+                </div>
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  HSN/SAC
+                </div>
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  Quantity
+                </div>
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  Return Qty
+                </div>
+                <div
+                  style={{
+                    padding: '8px 4px',
+                    borderRight: '1px solid #000',
+                    textAlign: 'center',
+                  }}
+                >
+                  Rate
+                </div>
+                <div style={{ padding: '8px 4px', textAlign: 'center' }}>
+                  Amount
+                </div>
+              </div>
 
-                                {/* Terms of Delivery */}
-                                <div style={{ padding: '8px 6px', textAlign: 'left', minHeight: '35px' }}>
-                                    <div style={{ fontWeight: '700', fontSize: '9px' }}>Terms of Delivery</div>
-                                    <div></div>
-                                </div>
-                            </div>
+              {/* Table Rows - Dynamic data from dataChunk */}
+              {dataChunk && dataChunk.length > 0 ? (
+                <>
+                  {dataChunk?.map((item, index) => (
+                    <div
+                      key={index}
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                        ...(index % 2 !== 1 && rowtypeStyle === 'even'
+                          ? {
+                              ...tableBodyStyle,
+                            }
+                          : index % 2 === 1 && rowtypeStyle === 'odd'
+                            ? {
+                                ...tableBodyStyle,
+                              }
+                            : {}),
+                      }}
+                    >
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                          fontWeight: '700',
+                        }}
+                      >
+                        {chunkIndex * chunkSize + index + 1}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontWeight: '700',
+                            marginBottom: '2px',
+                            textAlign: 'left',
+                            fontSize: '15px',
+                          }}
+                        >
+                          {item.ProdName || 'Product Name'}
                         </div>
-                    )}
+                        {item.BrandName && (
+                          <div
+                            style={{
+                              fontSize: '9px',
+                              color: '#666',
+                              textAlign: 'left',
+                            }}
+                          >
+                            {item.BrandName}
+                          </div>
+                        )}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                        }}
+                      >
+                        {item.HSN || ''}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                          fontWeight: '700',
+                          fontSize: '15px',
+                        }}
+                      >
+                        {item.PurQty || 0} {'NOS'}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                          fontWeight: '700',
+                          fontSize: '15px',
+                        }}
+                      >
+                        {item.ReturnQty || 0} {'NOS'}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'right',
+                        }}
+                      >
+                        {Number(item.RatePerUnit || 0)?.toLocaleString(
+                          'en-IN',
+                          { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+                        )}
+                      </div>
+                      <div
+                        style={{
+                          padding: '8px 4px',
+                          textAlign: 'right',
+                          fontWeight: '700',
+                          fontSize: '15px',
+                        }}
+                      >
+                        {Number(item.NetAmount || 0)?.toLocaleString('en-IN', {
+                          minimumFractionDigits: 2,
+                          maximumFractionDigits: 2,
+                        })}
+                      </div>
+                    </div>
+                  ))}
 
-                    {/* Continuation header for non-first pages */}
-                    {!isFirstPage && (
-                        <div style={{ textAlign: 'center', marginBottom: '10px', padding: '5px' }}>
-                            <h3 style={{ margin: '0', fontSize: '16px', fontWeight: '700' }}>
-                                {BillName || "Purchase Return Invoice"}
-                            </h3>
-                            <div style={{ fontSize: '10px' }}>Invoice No: {invoiceData.invoiceNo}</div>
+                  {/* Tax summary on last page */}
+                  {isLastPage && (
+                    <>
+                      {/* Total without tax amount */}
+                      <div
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                          fontSize: '11px',
+                          fontWeight: '700',
+                          minHeight: '22px',
+                        }}
+                      >
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div
+                          style={{
+                            padding: '6px 6px',
+                            textAlign: 'right',
+                            borderRight: '1px solid #000',
+                          }}
+                        >
+                          Subtotal
                         </div>
-                    )}
-
-                    {/* Items Table */}
-                    {(dataChunk.length > 0 || !isFooterOnlyPage) && (
-                        <div style={{ minHeight: '250px' }}>
-                            {/* Table Header */}
-                            <div style={{
-                                display: 'grid',
-                                gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                fontSize: '10px',
-                                borderBottom: '1px solid #000',
-                                borderTop: '1px solid #000',
-                            }}>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Sl.No</div>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Quantity</div>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Return Qty</div>
-                                <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
-                                <div style={{ padding: '8px 4px', textAlign: 'center' }}>Amount</div>
-                            </div>
-
-                            {/* Table Rows - Dynamic data from dataChunk */}
-                            {(dataChunk && dataChunk.length > 0) ? (
-                                <>
-                                    {dataChunk?.map((item, index) => (
-                                        <div key={index} style={{
-                                            display: 'grid',
-                                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                        }}>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>
-                                                {chunkIndex * chunkSize + index + 1}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}>
-                                                <div style={{ fontWeight: '700', marginBottom: '2px', textAlign: 'left', fontSize: '15px' }}>
-                                                    {item.ProdName || 'Product Name'}
-                                                </div>
-                                                {item.BrandName && <div style={{ fontSize: '9px', color: '#666', textAlign: 'left' }}>{item.BrandName}</div>}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>
-                                                {item.HSN || ''}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700', fontSize: '15px' }}>
-                                                {item.PurQty || 0} {'NOS'}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700', fontSize: '15px' }}>
-                                                {item.ReturnQty || 0} {'NOS'}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
-                                                {Number(item.RatePerUnit || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                            </div>
-                                            <div style={{ padding: '8px 4px', textAlign: 'right', fontWeight: '700', fontSize: '15px' }}>
-                                                {Number(item.NetAmount || 0)?.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                            </div>
-                                        </div>
-                                    ))}
-
-                                    {/* Tax summary on last page */}
-                                    {isLastPage && (
-                                        <>
-                                            {/* Total without tax amount */}
-                                            <div style={{
-                                                display: 'grid',
-                                                gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                fontSize: '11px',
-                                                fontWeight: '700',
-                                                minHeight: '22px'
-                                            }}>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000' }}>Subtotal</div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '6px 6px', textAlign: 'right', borderTop: '1px solid #000' }}>
-                                                    ₹ {Number(invoiceData?.totalBillAmount).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                                </div>
-                                            </div>
-
-                                            {/* CGST */}
-                                            {OrderDetailGST && OrderDetailGST.length > 0 && (
-                                                <div style={{
-                                                    display: 'grid',
-                                                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                    fontSize: '11px',
-                                                    fontWeight: '700',
-                                                    minHeight: '22px'
-                                                }}>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000' }}>CGST</div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right' }}>₹ {cgstTotal}</div>
-                                                </div>
-                                            )}
-
-                                            {/* SGST */}
-                                            {OrderDetailGST && OrderDetailGST.length > 0 && (
-                                                <div style={{
-                                                    display: 'grid',
-                                                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                    fontSize: '11px',
-                                                    fontWeight: '700',
-                                                    minHeight: '22px'
-                                                }}>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000' }}>SGST</div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right' }}>₹ {sgstTotal}</div>
-                                                </div>
-                                            )}
-
-
-                                            {/* IGST */}
-                                            {OrderDetailGST && OrderDetailGST.length > 0 && (
-                                                <div style={{
-                                                    display: 'grid',
-                                                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                    // borderRight: '1px solid #000',
-                                                    fontSize: '11px',
-                                                    fontWeight: '700',
-                                                    minHeight: '22px'
-                                                }}>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>IGST</div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-                                                    <div style={{ borderRight: '1px solid #000' }}></div>
-
-                                                    <div style={{ padding: '6px 6px', textAlign: 'right', }}>
-                                                        {OrderDetailIGST && OrderDetailIGST.length > 0
-                                                            ? Number(OrderDetailIGST.reduce((sum, item) => sum + (item.IGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                                                            : "0.00"}
-                                                    </div>
-                                                </div>
-                                            )}
-                                            {/* Rounding Off */}
-                                            <div style={{
-                                                display: 'grid',
-                                                gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                // borderRight: '1px solid #000',
-                                                // borderBottom: '1px solid #000', 
-                                                fontSize: '11px',
-                                                fontWeight: '700',
-                                                minHeight: '22px'
-                                            }}>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '6px 6px', textAlign: 'right', borderRight: '1px solid #000', }}>ROUNDING OFF</div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-
-                                                <div style={{ padding: '6px 6px', textAlign: 'right', }}>
-                                                    {RoundOffFun(roundOffValue)}
-                                                </div>
-                                            </div>
-                                            {Array.from({ length: chunkSize - dataChunk.length })?.map((_, idx) => (
-                                                <div key={`empty-${idx}`} style={{
-                                                    display: 'grid',
-                                                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                    // borderRight: '1px solid #000',
-
-                                                    minHeight: '32px', // Adjust height as needed for your design
-                                                    fontSize: '10px'
-                                                }}>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>&nbsp;</div>
-                                                    <div style={{ padding: '8px 4px', textAlign: 'right' }}>&nbsp;</div>
-                                                </div>
-                                            ))}
-                                            {/* Total */}
-                                            <div style={{
-                                                display: 'grid',
-                                                gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                                // borderRight: '1px solid #000',
-                                                borderBottom: '1px solid #000',
-                                                borderTop: '1px solid #000',
-
-                                                fontWeight: '700',
-                                                minHeight: '30px'
-                                            }}>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '8px 6px', textAlign: 'right', fontSize: '12px', borderRight: '1px solid #000' }}>Total</div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '8px 3px', textAlign: 'center', borderRight: '1px solid #000' }}>
-                                                    {totalQuantity ||
-                                                        (invoiceData.productDetails?.reduce((sum, item) => sum + (item.PurQty || 0), 0)) ||
-                                                        0} NOS
-                                                </div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ borderRight: '1px solid #000' }}></div>
-                                                <div style={{ padding: '8px 6px', textAlign: 'right', }}>
-                                                    ₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-                                                </div>
-                                            </div>
-                                        </>
-                                    )}
-                                </>
-                            ) : (
-
-                                // Show empty row when no data
-                                <div style={{
-                                    display: 'grid',
-                                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
-                                    // borderBottom: '1px solid #000',
-                                    borderLeft: '1px solid #000',
-                                    borderRight: '1px solid #000',
-                                    fontSize: '10px',
-                                    minHeight: '40px'
-                                }}>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>No items to display</div>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
-                                    <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>-</div>
-                                    <div style={{ padding: '8px 4px', textAlign: 'center' }}>-</div>
-                                </div>
-                            )}
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div
+                          style={{
+                            padding: '6px 6px',
+                            textAlign: 'right',
+                            borderTop: '1px solid #000',
+                          }}
+                        >
+                          ₹{' '}
+                          {Number(invoiceData?.totalBillAmount).toLocaleString(
+                            'en-IN',
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
                         </div>
+                      </div>
+
+                      {/* CGST */}
+                      {OrderDetailGST && OrderDetailGST.length > 0 && (
+                        <div
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                            fontSize: '11px',
+                            fontWeight: '700',
+                            minHeight: '22px',
+                          }}
+                        >
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div
+                            style={{
+                              padding: '6px 6px',
+                              textAlign: 'right',
+                              borderRight: '1px solid #000',
+                            }}
+                          >
+                            CGST
+                          </div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div
+                            style={{ padding: '6px 6px', textAlign: 'right' }}
+                          >
+                            ₹ {cgstTotal}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* SGST */}
+                      {OrderDetailGST && OrderDetailGST.length > 0 && (
+                        <div
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                            fontSize: '11px',
+                            fontWeight: '700',
+                            minHeight: '22px',
+                          }}
+                        >
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div
+                            style={{
+                              padding: '6px 6px',
+                              textAlign: 'right',
+                              borderRight: '1px solid #000',
+                            }}
+                          >
+                            SGST
+                          </div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div
+                            style={{ padding: '6px 6px', textAlign: 'right' }}
+                          >
+                            ₹ {sgstTotal}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* IGST */}
+                      {OrderDetailGST && OrderDetailGST.length > 0 && (
+                        <div
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                            // borderRight: '1px solid #000',
+                            fontSize: '11px',
+                            fontWeight: '700',
+                            minHeight: '22px',
+                          }}
+                        >
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div
+                            style={{
+                              padding: '6px 6px',
+                              textAlign: 'right',
+                              borderRight: '1px solid #000',
+                            }}
+                          >
+                            IGST
+                          </div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+                          <div style={{ borderRight: '1px solid #000' }}></div>
+
+                          <div
+                            style={{ padding: '6px 6px', textAlign: 'right' }}
+                          >
+                            {OrderDetailIGST && OrderDetailIGST.length > 0
+                              ? Number(
+                                  OrderDetailIGST.reduce(
+                                    (sum, item) => sum + (item.IGST || 0),
+                                    0
+                                  )
+                                ).toLocaleString('en-IN', {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                                })
+                              : '0.00'}
+                          </div>
+                        </div>
+                      )}
+                      {/* Rounding Off */}
+                      <div
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                          // borderRight: '1px solid #000',
+                          // borderBottom: '1px solid #000',
+                          fontSize: '11px',
+                          fontWeight: '700',
+                          minHeight: '22px',
+                        }}
+                      >
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div
+                          style={{
+                            padding: '6px 6px',
+                            textAlign: 'right',
+                            borderRight: '1px solid #000',
+                          }}
+                        >
+                          ROUNDING OFF
+                        </div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+
+                        <div style={{ padding: '6px 6px', textAlign: 'right' }}>
+                          {RoundOffFun(roundOffValue)}
+                        </div>
+                      </div>
+                      {Array.from({
+                        length: chunkSize - dataChunk.length,
+                      })?.map((_, idx) => (
+                        <div
+                          key={`empty-${idx}`}
+                          style={{
+                            display: 'grid',
+                            gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                            // borderRight: '1px solid #000',
+
+                            minHeight: '32px', // Adjust height as needed for your design
+                            fontSize: '10px',
+                          }}
+                        >
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                              textAlign: 'center',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                              textAlign: 'center',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                              textAlign: 'center',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                              textAlign: 'right',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{
+                              padding: '8px 4px',
+                              borderRight: '1px solid #000',
+                              textAlign: 'center',
+                            }}
+                          >
+                            &nbsp;
+                          </div>
+                          <div
+                            style={{ padding: '8px 4px', textAlign: 'right' }}
+                          >
+                            &nbsp;
+                          </div>
+                        </div>
+                      ))}
+                      {/* Total */}
+                      <div
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                          // borderRight: '1px solid #000',
+                          borderBottom: '1px solid #000',
+                          borderTop: '1px solid #000',
+
+                          fontWeight: '700',
+                          minHeight: '30px',
+                        }}
+                      >
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div
+                          style={{
+                            padding: '8px 6px',
+                            textAlign: 'right',
+                            fontSize: '12px',
+                            borderRight: '1px solid #000',
+                          }}
+                        >
+                          Total
+                        </div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div
+                          style={{
+                            padding: '8px 3px',
+                            textAlign: 'center',
+                            borderRight: '1px solid #000',
+                          }}
+                        >
+                          {totalQuantity ||
+                            invoiceData.productDetails?.reduce(
+                              (sum, item) => sum + (item.PurQty || 0),
+                              0
+                            ) ||
+                            0}{' '}
+                          NOS
+                        </div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ borderRight: '1px solid #000' }}></div>
+                        <div style={{ padding: '8px 6px', textAlign: 'right' }}>
+                          ₹{' '}
+                          {Number(invoiceData.grandTotal).toLocaleString(
+                            'en-IN',
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </>
+              ) : (
+                // Show empty row when no data
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
+                    // borderBottom: '1px solid #000',
+                    borderLeft: '1px solid #000',
+                    borderRight: '1px solid #000',
+                    fontSize: '10px',
+                    minHeight: '40px',
+                  }}
+                >
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                      fontWeight: '700',
+                    }}
+                  >
+                    -
+                  </div>
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                    }}
+                  >
+                    No items to display
+                  </div>
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                    }}
+                  >
+                    -
+                  </div>
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                    }}
+                  >
+                    -
+                  </div>
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                    }}
+                  >
+                    -
+                  </div>
+                  <div
+                    style={{
+                      padding: '8px 4px',
+                      borderRight: '1px solid #000',
+                      textAlign: 'center',
+                    }}
+                  >
+                    -
+                  </div>
+                  <div style={{ padding: '8px 4px', textAlign: 'center' }}>
+                    -
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {/* Tax summary - Only on last page */}
+
+          {/* Footer content - Only on last page */}
+          {isLastPage && (
+            <>
+              {/* Amount in Words */}
+              <div
+                style={{
+                  padding: '8px 10px',
+                  borderBottom: '1px solid #000',
+                  fontSize: '11px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <div style={{ fontWeight: '700', marginBottom: '3px' }}>
+                    Amount Chargeable (in words)
+                  </div>
+                  <div style={{ fontWeight: '700', fontSize: '16px' }}>
+                    INR {numberToWords(Math.floor(invoiceData.grandTotal))} Only
+                  </div>
+                </div>
+                <p>E. & O.E</p>
+              </div>
+
+              {/* Tax Breakdown Table */}
+              {OrderDetailGST && OrderDetailGST.length > 0 && (
+                <div style={{ borderBottom: '1px solid #000' }}>
+                  {/* Tax Table Header - Main Headers */}
+                  <div
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '12% 15% 18% 18% 15% 22%',
+                      borderBottom: '1px solid #000',
+                      fontSize: '9px',
+                      fontWeight: '700',
+                    }}
+                  >
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      HSN/SAC
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Taxable Value
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      CGST
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      SGST/UTGST
+                    </div>
+                    <div style={{ padding: '6px 4px', textAlign: 'center' }}>
+                      Tax Amount
+                    </div>
+                  </div>
+
+                  {/* Tax Table Sub-Headers */}
+                  <div
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
+                      borderBottom: '1px solid #000',
+                      fontSize: '8px',
+                      fontWeight: '700',
+                    }}
+                  >
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    ></div>
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    ></div>
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Rate
+                    </div>
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Amount
+                    </div>
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Rate
+                    </div>
+                    <div
+                      style={{
+                        padding: '4px 2px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Amount
+                    </div>
+                    <div
+                      style={{ padding: '4px 2px', textAlign: 'center' }}
+                    ></div>
+                  </div>
+
+                  {/* Tax Table Rows - Dynamic from OrderDetailGST */}
+                  {OrderDetailGST && OrderDetailGST.length > 0 ? (
+                    OrderDetailGST?.map((taxItem, index) => (
+                      <div
+                        key={index}
+                        style={{
+                          display: 'grid',
+                          gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
+                          borderBottom: '1px solid #000',
+                          fontSize: '9px',
+                          minHeight: '20px',
+                        }}
+                      >
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'center',
+                            fontWeight: '700',
+                          }}
+                        >
+                          {taxItem.HSN || ''}
+                        </div>
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'right',
+                          }}
+                        >
+                          {Number(taxItem.WithOutTaxAmount || 0).toLocaleString(
+                            'en-IN',
+                            {
+                              minimumFractionDigits: 2,
+                              maximumFractionDigits: 2,
+                            }
+                          )}
+                        </div>
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'center',
+                          }}
+                        >
+                          {taxItem.TaxPercentage
+                            ? taxItem.TaxPercentage / 2 + '%'
+                            : '0%'}
+                        </div>
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'right',
+                          }}
+                        >
+                          {Number(taxItem.CGST || 0).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}
+                        </div>
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'center',
+                          }}
+                        >
+                          {taxItem.TaxPercentage
+                            ? taxItem.TaxPercentage / 2 + '%'
+                            : '0%'}
+                        </div>
+                        <div
+                          style={{
+                            padding: '4px',
+                            borderRight: '1px solid #000',
+                            textAlign: 'right',
+                          }}
+                        >
+                          {Number(taxItem.SGST || 0).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}
+                        </div>
+                        <div style={{ padding: '4px', textAlign: 'right' }}>
+                          {Number(
+                            (taxItem.CGST || 0) + (taxItem.SGST || 0)
+                          ).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    // Show 0 values when no GST data
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
+                        borderBottom: '1px solid #000',
+                        fontSize: '9px',
+                        minHeight: '20px',
+                      }}
+                    >
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                          fontWeight: '700',
+                        }}
+                      >
+                        -
+                      </div>
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'right',
+                        }}
+                      >
+                        0.00
+                      </div>
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                        }}
+                      >
+                        0%
+                      </div>
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'right',
+                        }}
+                      >
+                        0.00
+                      </div>
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'center',
+                        }}
+                      >
+                        0%
+                      </div>
+                      <div
+                        style={{
+                          padding: '4px',
+                          borderRight: '1px solid #000',
+                          textAlign: 'right',
+                        }}
+                      >
+                        0.00
+                      </div>
+                      <div style={{ padding: '4px', textAlign: 'right' }}>
+                        0.00
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Tax Table Total */}
+                  <div
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
+                      fontSize: '9px',
+                      fontWeight: '700',
+                      minHeight: '22px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    >
+                      Total
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'right',
+                      }}
+                    >
+                      {OrderDetailGST && OrderDetailGST.length > 0
+                        ? Number(
+                            OrderDetailGST.reduce(
+                              (sum, item) => sum + (item.WithoutTaxRate || 0),
+                              0
+                            )
+                          ).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })
+                        : '0.00'}
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    ></div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'right',
+                      }}
+                    >
+                      {OrderDetailGST && OrderDetailGST.length > 0
+                        ? Number(
+                            OrderDetailGST.reduce(
+                              (sum, item) => sum + (item.CGST || 0),
+                              0
+                            )
+                          ).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })
+                        : '0.00'}
+                    </div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'center',
+                      }}
+                    ></div>
+                    <div
+                      style={{
+                        padding: '6px 4px',
+                        borderRight: '1px solid #000',
+                        textAlign: 'right',
+                      }}
+                    >
+                      {OrderDetailGST && OrderDetailGST.length > 0
+                        ? Number(
+                            OrderDetailGST.reduce(
+                              (sum, item) => sum + (item.SGST || 0),
+                              0
+                            )
+                          ).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })
+                        : '0.00'}
+                    </div>
+                    <div style={{ padding: '6px 4px', textAlign: 'right' }}>
+                      {OrderDetailGST && OrderDetailGST.length > 0
+                        ? Number(
+                            OrderDetailGST.reduce(
+                              (sum, item) =>
+                                sum +
+                                (item.CGST || 0) +
+                                (item.SGST || 0) +
+                                (item.WithoutTaxRate || 0),
+                              0
+                            )
+                          ).toLocaleString('en-IN', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })
+                        : '0.00'}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Tax Amount in Words */}
+              {OrderDetailGST && OrderDetailGST.length > 0 && (
+                <div
+                  style={{
+                    padding: '3px 5px',
+                    fontSize: '11px',
+                  }}
+                >
+                  <div style={{ fontWeight: '700' }}>
+                    Tax Amount (in words): INR{' '}
+                    {numberToWords(
+                      Math.floor(
+                        invoiceData.taxAmount ||
+                          OrderDetailGST?.reduce(
+                            (sum, item) =>
+                              sum + (item.CGST || 0) + (item.SGST || 0),
+                            0
+                          ) ||
+                          0
+                      )
+                    )}{' '}
+                    Only
+                  </div>
+                </div>
+              )}
+
+              {/* Bank Details and Signature */}
+              <div
+                style={{
+                  display: 'flex',
+                  minHeight: '120px',
+                  width: '100%',
+                //   ...footerColorStyle,
+                }}
+              >
+                {/* Declaration */}
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'flex-end',
+                    width: '50%',
+                  }}
+                >
+                  <div
+                    style={{
+                      padding: '8px 10px',
+                      fontSize: '11px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontWeight: '700',
+                        marginBottom: '3px',
+                        fontSize: '12px',
+                        borderBottom: '1px solid #000',
+                        width: 'max-content',
+                      }}
+                    >
+                      Declaration
+                    </div>
+                    <div>
+                      We declare that this invoice shows the actual price of the
+                      goods described and that all particulars are true and
+                      correct.
+                    </div>
+                  </div>
+                </div>
+
+                {/* Signature Section */}
+                <div
+                  style={{
+                    flex: '1',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    width: '50%',
+                  }}
+                >
+                  {/* Bank Details */}
+                  <div
+                    style={{
+                      flex: '1',
+                      padding: '5px',
+                      fontSize: '11px',
+                      textAlign: 'left',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontWeight: '700',
+                        marginBottom: '3px',
+                        fontSize: '12px',
+                      }}
+                    >
+                      Company's Bank Details
+                    </div>
+                    <div>
+                      <span style={{ fontWeight: '700' }}>
+                        A/c Holder's Name:
+                      </span>{' '}
+                      {invoiceData.companyName}
+                    </div>
+                    <div>
+                      <span style={{ fontWeight: '700' }}>Bank Name:</span>{' '}
+                      {invoiceData.bankDetails?.BankName || ''}
+                    </div>
+                    <div>
+                      <span style={{ fontWeight: '700' }}>A/c No.:</span>{' '}
+                      {invoiceData.bankDetails?.AccountNo || ''}
+                    </div>
+                    <div>
+                      <span style={{ fontWeight: '700' }}>
+                        Branch & IFS Code:
+                      </span>{' '}
+                      {invoiceData.bankDetails?.BankBranch || ''} &{' '}
+                      {invoiceData.bankDetails?.IFSCCode || ''}
+                    </div>
+                    {invoiceData.bankDetails?.SWIFTCode && (
+                      <div>
+                        <span style={{ fontWeight: '700' }}>SWIFT Code:</span>{' '}
+                        {invoiceData.bankDetails?.SWIFTCode || ''}
+                      </div>
                     )}
-                    {/* Tax summary - Only on last page */}
-
-                    {/* Footer content - Only on last page */}
-                    {isLastPage && (
-                        <>
-                            {/* Amount in Words */}
-                            <div style={{
-                                padding: '8px 10px',
-                                borderBottom: '1px solid #000',
-                                fontSize: '11px',
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                            }}>
-                                <div style={{
-
-                                    display: 'flex',
-                                    justifyContent: 'flex-start',
-                                    flexDirection: 'column',
-                                }}>
-                                    <div style={{ fontWeight: '700', marginBottom: '3px' }}>Amount Chargeable (in words)</div>
-                                    <div style={{ fontWeight: '700', fontSize: '16px' }}>INR {numberToWords(Math.floor(invoiceData.grandTotal))} Only</div>
-                                </div>
-                                <p>E. & O.E</p>
-                            </div>
-
-
-                            {/* Tax Breakdown Table */}
-                            {OrderDetailGST && OrderDetailGST.length > 0 && <div style={{ borderBottom: '1px solid #000' }}>
-
-                                {/* Tax Table Header - Main Headers */}
-                                <div style={{
-                                    display: 'grid',
-                                    gridTemplateColumns: '12% 15% 18% 18% 15% 22%',
-                                    borderBottom: '1px solid #000',
-                                    fontSize: '9px',
-                                    fontWeight: '700',
-                                }}>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>HSN/SAC</div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Taxable Value</div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>CGST</div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SGST/UTGST</div>
-                                    <div style={{ padding: '6px 4px', textAlign: 'center' }}>Tax Amount</div>
-                                </div>
-
-                                {/* Tax Table Sub-Headers */}
-                                <div style={{
-                                    display: 'grid',
-                                    gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
-                                    borderBottom: '1px solid #000',
-                                    fontSize: '8px',
-                                    fontWeight: '700',
-                                }}>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Rate</div>
-                                    <div style={{ padding: '4px 2px', borderRight: '1px solid #000', textAlign: 'center' }}>Amount</div>
-                                    <div style={{ padding: '4px 2px', textAlign: 'center' }}></div>
-                                </div>
-
-                                {/* Tax Table Rows - Dynamic from OrderDetailGST */}
-                                {OrderDetailGST && OrderDetailGST.length > 0 ? (
-                                    OrderDetailGST?.map((taxItem, index) => (
-                                        <div key={index} style={{
-                                            display: 'grid',
-                                            gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
-                                            borderBottom: '1px solid #000',
-                                            fontSize: '9px',
-                                            minHeight: '20px'
-                                        }}>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{taxItem.HSN || ''}</div>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.WithOutTaxAmount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.CGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>{taxItem.TaxPercentage ? (taxItem.TaxPercentage / 2) + '%' : '0%'}</div>
-                                            <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>{Number(taxItem.SGST || 0).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
-                                            <div style={{ padding: '4px', textAlign: 'right' }}>{Number((taxItem.CGST || 0) + (taxItem.SGST || 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
-                                        </div>
-                                    ))
-                                ) : (
-                                    // Show 0 values when no GST data
-                                    <div style={{
-                                        display: 'grid',
-                                        gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
-                                        borderBottom: '1px solid #000',
-                                        fontSize: '9px',
-                                        minHeight: '20px'
-                                    }}>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>-</div>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'center' }}>0%</div>
-                                        <div style={{ padding: '4px', borderRight: '1px solid #000', textAlign: 'right' }}>0.00</div>
-                                        <div style={{ padding: '4px', textAlign: 'right' }}>0.00</div>
-                                    </div>
-                                )}
-
-                                {/* Tax Table Total */}
-                                <div style={{
-                                    display: 'grid',
-                                    gridTemplateColumns: '12% 15% 9% 9% 9% 9% 15% 22%',
-                                    fontSize: '9px',
-                                    fontWeight: '700',
-                                    minHeight: '22px',
-                                }}>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Total</div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
-                                        {OrderDetailGST && OrderDetailGST.length > 0
-                                            ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                                            : "0.00"
-                                        }
-                                    </div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
-                                        {OrderDetailGST && OrderDetailGST.length > 0
-                                            ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                                            : "0.00"
-                                        }
-                                    </div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'center' }}></div>
-                                    <div style={{ padding: '6px 4px', borderRight: '1px solid #000', textAlign: 'right' }}>
-                                        {OrderDetailGST && OrderDetailGST.length > 0
-                                            ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.SGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                                            : "0.00"
-                                        }
-                                    </div>
-                                    <div style={{ padding: '6px 4px', textAlign: 'right' }}>
-                                        {OrderDetailGST && OrderDetailGST.length > 0
-                                            ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0) + (item.WithoutTaxRate || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
-                                            : "0.00"
-                                        }
-                                    </div>
-                                </div>
-                            </div>}
-
-                            {/* Tax Amount in Words */}
-                            {OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
-                                padding: '3px 5px',
-                                fontSize: '11px'
-                            }}>
-                                <div style={{ fontWeight: '700' }}>
-                                    Tax Amount (in words): INR {numberToWords(Math.floor(invoiceData.taxAmount || (OrderDetailGST?.reduce((sum, item) => sum + (item.CGST || 0) + (item.SGST || 0), 0) || 0)))} Only
-                                </div>
-                            </div>}
-
-                            {/* Bank Details and Signature */}
-                            <div style={{ display: 'flex', minHeight: '120px', width: "100%" }}>
-                                {/* Declaration */}
-                                <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end", width: "50%" }}>
-                                    <div style={{
-                                        padding: '8px 10px',
-                                        fontSize: '11px'
-                                    }}>
-                                        <div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px', borderBottom: "1px solid #000", width: "max-content" }}>Declaration</div>
-                                        <div>We declare that this invoice shows the actual price of the goods described and that all particulars are true and correct.</div>
-                                    </div>
-                                </div>
-
-
-                                {/* Signature Section */}
-                                <div style={{
-                                    flex: '1',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'flex-start',
-                                    width: "50%",
-                                }}>
-                                    {/* Bank Details */}
-                                    <div style={{
-                                        flex: '1',
-                                        padding: '5px',
-                                        fontSize: '11px',
-                                        textAlign: "left"
-                                    }}>
-                                        <div style={{ fontWeight: '700', marginBottom: '3px', fontSize: '12px' }}>Company's Bank Details</div>
-                                        <div><span style={{ fontWeight: '700' }}>A/c Holder's Name:</span> {invoiceData.companyName}</div>
-                                        <div><span style={{ fontWeight: '700' }}>Bank Name:</span> {invoiceData.bankDetails?.BankName || ""}</div>
-                                        <div><span style={{ fontWeight: '700' }}>A/c No.:</span> {invoiceData.bankDetails?.AccountNo || ""}</div>
-                                        <div><span style={{ fontWeight: '700' }}>Branch & IFS Code:</span> {invoiceData.bankDetails?.BankBranch || ""} & {invoiceData.bankDetails?.IFSCCode || ""}</div>
-                                        {invoiceData.bankDetails?.SWIFTCode && <div><span style={{ fontWeight: '700' }}>SWIFT Code:</span> {invoiceData.bankDetails?.SWIFTCode || ""}</div>}
-                                    </div>
-                                    <div style={{ borderTop: "1px solid #000", borderLeft: "1px solid #000", width: isMobile ? "100%" : "92%", padding: "15px" }}>
-                                        <div style={{ fontSize: '11px', fontWeight: '700', marginBottom: '10px', textAlign: "right" }}>for {invoiceData.companyName}</div>
-                                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'right', marginBottom: '10px' }}>
-                                            <div style={{
-                                                width: '70px',
-                                                height: '30px',
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                marginBottom: '5px',
-                                            }}>
-                                                <div style={{ fontSize: '8px', textAlign: 'center', fontWeight: '700', lineHeight: '1.1' }}>
-                                                    {/* <div>DD</div>
+                  </div>
+                  <div
+                    style={{
+                      borderTop: '1px solid #000',
+                      borderLeft: '1px solid #000',
+                      width: isMobile ? '100%' : '92%',
+                      padding: '15px',
+                    }}
+                  >
+                    <div
+                      style={{
+                        fontSize: '11px',
+                        fontWeight: '700',
+                        marginBottom: '10px',
+                        textAlign: 'right',
+                      }}
+                    >
+                      for {invoiceData.companyName}
+                    </div>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'right',
+                        marginBottom: '10px',
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: '70px',
+                          height: '30px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          marginBottom: '5px',
+                        }}
+                      >
+                        <div
+                          style={{
+                            fontSize: '8px',
+                            textAlign: 'center',
+                            fontWeight: '700',
+                            lineHeight: '1.1',
+                          }}
+                        >
+                          {/* <div>DD</div>
                   <div>TECHNOLOGIES</div>
                   <div>ELECTRONICS</div> */}
-                                                </div>
-                                            </div>
-                                            <div style={{ fontSize: '10px', textAlign: 'right', fontWeight: '700' }}>Authorised Signatory</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </>
-                    )}
-
-                </div>
-
-                {/* Footer - Only on last page */}
-                {isLastPage && (
-                    <div style={{
-                        textAlign: 'center',
-                        fontSize: '10px',
-                        padding: '8px',
-                    }}>
-                        <div>This is a Computer Generated Invoice</div>
+                        </div>
+                      </div>
+                      <div
+                        style={{
+                          fontSize: '10px',
+                          textAlign: 'right',
+                          fontWeight: '700',
+                        }}
+                      >
+                        Authorised Signatory
+                      </div>
                     </div>
-                )}
+                  </div>
+                </div>
+              </div>
             </>
-        );
-    }
+          )}
+        </div>
+
+        {/* Footer - Only on last page */}
+        {isLastPage && (
+          <div
+            style={{
+              textAlign: 'center',
+              fontSize: '10px',
+              padding: '8px',
+              ...footerColorStyle
+            }}
+          >
+            <div>This is a Computer Generated Invoice</div>
+          </div>
+        )}
+      </>
+    );
+  }
 };
 
 export default PurchaseTaxInvoice;
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle1.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle1.jsx
index 84c6217..b0f604e 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle1.jsx
+++ b/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,8 +35,10 @@ 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'];
 
   const signatureImg = FieldDetails?.Signature;
@@ -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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-          {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
         </div>
         {VehicleNo && (
           <div>
@@ -218,16 +307,21 @@ const InvoiceMeta = ({
           <strong>Supplier Name:</strong> {CustName}
         </div>
       )}
-       {SupplierNo &&
-               <div>
-                <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
-              </div>
-            }
+      {SupplierNo && (
+        <div>
+          <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
+        </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> */}
@@ -270,13 +377,13 @@ const ProductTable = ({ data }) => {
 const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
   <div className="summary">
     <div>
-      <strong>Subtotal: ₹ {TotalAmount?.toFixed(2)}</strong> 
+      <strong>Subtotal: ₹ {TotalAmount?.toFixed(2)}</strong>
     </div>
     <div>
-      <strong>Tax Amount: ₹ {TaxAmount?.toFixed(2)}</strong> 
+      <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>
 );
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10.jsx
index 6b7a431..993093c 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10.jsx
+++ b/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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>
-        Mobile: +91 {branch.BrMobile}
-      </div>}
+      {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>{' '}
-                  {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11.jsx
index 45952e5..c68ec2e 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11.jsx
+++ b/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" 
-       style={{ fontFamily: "'Courier New', Courier, monospace" }}>
+      <div
+        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 }) => (
-  <div className="header" style={{fontWeight:"600"}}>
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-                 {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12.jsx
index 3bc6b6d..c576455 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12.jsx
+++ b/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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
+  <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>{' '}
-          {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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">
-         Subtotal
-        </div>
+        <div className="Subtotal">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">
-          Tax Amount
-        </div>
+        <div className="TaxAmt">Tax Amount</div>
         <div>:</div>
         <div style={{ width: '25%', textAlign: 'right' }}>
           ₹ {TaxAmount.toFixed(2)}
         </div>
-      </div>      
-            <hr className="dotted-line" />
+      </div>
+      <hr className="dotted-line" />
       <div className="SummaryColumn">
         <div className="Grandtotal">
           <strong>Grand Total</strong>
@@ -484,11 +569,11 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
         <div>:</div>
         <div style={{ width: '25%', textAlign: 'right' }}>
           {' '}
-          <strong> ₹ {GrandTotal.toFixed(2)}</strong>  
+          <strong> ₹ {GrandTotal.toFixed(2)}</strong>
         </div>
       </div>
-     
-            <hr className="dotted-line"  />
+
+      <hr className="dotted-line" />
     </div>
   </div>
 );
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle2.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle2.jsx
index 0ea43d2..6b1acdc 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle2.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  //    let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
+  //  let termsAndConditionsData=FieldDetails?.TermsandConditions
 
-//   const signatureImg = printDatas?.Signature;
-//   const notesText = printDatas?.Notes;
-//   const formatTheme = printDatas?.PrintType !== 'S';
-//   const pageSize = printDatas?.PageSize;
-//   const branch = AddressDetails?.[0];
-//   const logo = branch?.CompLogo;
+  //   const signatureImg = printDatas?.Signature;
+  //   const notesText = printDatas?.Notes;
+  //   const formatTheme = printDatas?.PrintType !== 'S';
+  //   const pageSize = printDatas?.PageSize;
+  //   const branch = AddressDetails?.[0];
+  //   const logo = branch?.CompLogo;
 
-    // const fieldDetails = useSelector(GloabalFieldDetails);
-  const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
+  // const fieldDetails = useSelector(GloabalFieldDetails);
+  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 termsAndConditionsData=FieldDetails?.TermsandConditions
-
-
-
-
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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={{
-    paddingTop: "5px",
-    fontSize: "18px",
-    fontWeight: 800
-  }}>
+      <div
+        style={{
+          paddingTop: '5px',
+          fontSize: '18px',
+          fontWeight: 800,
+        }}
+      >
         <strong>Purchase Return</strong>
       </div>
     </div>
@@ -370,8 +456,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
-          {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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>
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle3.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle3.jsx
index 7ccbfac..1d18921 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle3.jsx
+++ b/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((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 termsAndConditionsData=FieldDetails?.TermsandConditions
-
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-                   {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle4.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle4.jsx
index afc26fb..53b4253 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle4.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-                   {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle5.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle5.jsx
index 52e92ab..98e0c5e 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle5.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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
-                        TotalAmount={TotalAmount}
-                        TaxAmount={TaxAmount}
-                        GrandTotal={GrandTotal}
-                      />
+            <Summary
+              TotalAmount={TotalAmount}
+              TaxAmount={TaxAmount}
+              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 &&
-               <div>
-                <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
-              </div>
-            }
+              {SupplierNo && (
+                <div>
+                  <strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
+                </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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-                    {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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   >
-        <tr>
+      <thead>
+        <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> */}
@@ -460,4 +563,4 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
       </div>
     </div>
   </div>
-);
\ No newline at end of file
+);
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle6.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle6.jsx
index aaffe8a..edfc118 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle6.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>
-        Mobile: +91 {branch.BrMobile}
-      </div>
+      <div>Mobile: +91 {branch.BrMobile}</div>
       <div>
         <strong>Purchase Return</strong>
       </div>
@@ -365,8 +448,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
-                   {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle7.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle7.jsx
index a3fdc30..b59f822 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle7.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>
-        Mobile: +91 {branch.BrMobile}
-      </div>
+      <div>Mobile: +91 {branch.BrMobile}</div>
       <div>
         <strong>Purchase Return</strong>
       </div>
@@ -365,8 +448,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
-                  {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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={{
-    display: "flex",
-    justifyContent: "center",
-    padding: "0px 110px",
-    fontSize:"15px"
-  }}>
+    <div
+      className="SummaryColumn"
+      style={{
+        display: 'flex',
+        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>
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle8.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle8.jsx
index 94584f6..2a1e93a 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle8.jsx
+++ b/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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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>{' '}
-            {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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> */}
diff --git a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9.jsx b/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9.jsx
index e0ef8f9..23b8126 100644
--- a/src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9.jsx
+++ b/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 termsAndConditionsData=FieldDetails?.TermsandConditions
+  let termsAndConditions = FieldDetails?.FieldDetails?.some(
+    (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>
-                          <strong>Supplier Mobile No:</strong>{' '}
-                          {SupplierNo || '-'}
-                        </div>}
+                        {SupplierNo && (
+                          <div>
+                            <strong>Supplier Mobile No:</strong>{' '}
+                            {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 }) => (
-  <div className="header">
+const Header = ({ logo, branch, headerStyle }) => (
+  <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'>
-        <strong>Purchase Return</strong>
-      </div>
+    <div className="PurchaseReturnPrintName">
+      <strong>Purchase Return</strong>
+    </div>
   </div>
 );
 
@@ -381,8 +466,7 @@ const InvoiceMeta = ({
       </div>
       <div>
         <div>
-          <strong>Date:</strong>{' '}
-                   {dateFormatChange1(InvoiceDate)}
+          <strong>Date:</strong> {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 >
-        <tr>
+      <thead>
+        <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> */}
diff --git a/src/Pages/PurchaseReturn/purchasereturnPrint.jsx b/src/Pages/PurchaseReturn/purchasereturnPrint.jsx
index 24c6d2c..c2edfa0 100644
--- a/src/Pages/PurchaseReturn/purchasereturnPrint.jsx
+++ b/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>
-      ))} */}
     </>
   );
 };