From 12509a49fd6738cacfce0b3098c6ca2972189dec Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Tue, 3 Mar 2026 19:56:39 +0530
Subject: [PATCH] Implement dynamic header and table color functionality

---
 .../PurchasePrintTemplate/PurPrintstyle7.jsx  | 292 +++++++++++-------
 1 file changed, 177 insertions(+), 115 deletions(-)

diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx
index 2780b01..1513837 100644
--- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx
+++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx
@@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
 import {
     GlobalPritdummyData,
     changeReprintDataFound,
-    GlobalprinttermsAndConditions
+    GlobalprinttermsAndConditions,
+    GlobalSelectedPrintHeaderColor,
+    GlobalSelectedPrintHeaderFontColor,
+    GlobalSelectedTableHeaderColor,
+    GlobalSelectedTableHeaderFontColor,
+    GlobalSelectedTableBodyColor,
+    GlobalSelectedTableBodyFontColor,
+    GlobalRowType,
+    GlobalSelectedFooterColor,
+    GlobalSelectedFooterFontColor,
+    GlobalSelectedNetAmountColor,
+    GlobalSelectedNetAmountFontColor,
 } from '../../../Features/ThemeChange/ThemeChange';
 import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.scss"
 import { extractLastNumber } from "../../../Services/Others";
@@ -16,10 +27,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
 
     const dispatch = useDispatch();
 
-  const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
-    acc[item.ConfigName] = true;
-    return acc;
-  }, {});
+    const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
+        acc[item.ConfigName] = true;
+        return acc;
+    }, {});
 
     const SLNO = FieldDetails?.["Sl.No"];
     const Item = FieldDetails?.["Item"];
@@ -29,12 +40,27 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
     const Rate = FieldDetails?.["Rate"];
     const Amount = FieldDetails?.["Amount"];
     const HsnCode = FieldDetails?.["HsnCode"];
-
-
+    let printColors = printDatas?.PrintColors;
+    const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
+    const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
+    const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
+    const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
+    const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
     const GlobaldummyData = useSelector(GlobalPritdummyData);
     const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
+    const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+    const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
+    const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
+    const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
+    const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
+    const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
+    const SelectedRowType = useSelector(GlobalRowType);
+    const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
+    const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
+    const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
+    const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
+
 
-    
     let TermsAndConditions = printDatas?.TermsandConditions
     let SignatureImg = printDatas?.Signature
     let Notestext = printDatas?.Notes
@@ -43,41 +69,66 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
     let PageSize = printDatas?.PageSize
     const Signature = FieldDetails?.["signature"];
     const TermsnAdCondition = FieldDetails?.["terms&conditions"];
-
-
     const keysLength = Object.keys(table2Data ?? {}).length;
     if (keysLength > 0) {
         dispatch(changeReprintDataFound(true));
     }
-
-
-  const TakeawayData = table2Data?.[0]?.ProductDetails
-  console.log(TakeawayData, "TakeawayData", table2Data)
-
-
-   
-
-
+    const TakeawayData = table2Data?.[0]?.ProductDetails
     let TotalOfferAmount = 0;
-
-
-
-
-
     const chunkSize = PageSize == "A5" ? 8 : 11;
     let dataSource = table2Data?.[0]?.ProductDetails;
-
-
-
     // Paginate the data
     const paginatedChunks = [];
-  for (let i = 0; i < dataSource?.length; i += chunkSize) {
-    paginatedChunks.push(dataSource?.slice(i, i + chunkSize));
+    for (let i = 0; i < dataSource?.length; i += chunkSize) {
+        paginatedChunks.push(dataSource?.slice(i, i + chunkSize));
     }
     const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
-  { console.log(TakeawayData, "TakeawayDataTakeawayData") }
+    const headerStyle = {
+        backgroundColor: GlobaldummyData
+            ? SelectedHeaderColor
+            : headerColor?.background,
 
+        color: GlobaldummyData
+            ? SelectedHeaderFontColor
+            : headerColor?.font,
+    }
+    const tableHeaderStyle = {
+        backgroundColor: GlobaldummyData
+            ? SelectedTableHeaderColor
+            : tableHeaderColor?.background,
+
+        color: GlobaldummyData
+            ? SelectedTableHeaderFontColor
+            : tableHeaderColor?.font,
+    }
+    const tableBodyStyle = {
+        backgroundColor: GlobaldummyData
+            ? SelectedTableBodyColor
+            : tableBodyColor?.background,
+        color: GlobaldummyData
+            ? SelectedTableBodyFontColor
+            : tableBodyColor?.font,
+    }
+    const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
+    const footerColorStyle = {
+        backgroundColor: GlobaldummyData
+            ? SelectedTableFooterColor
+            : footerColor?.background,
+
+        color: GlobaldummyData
+            ? SelectedTableFooterFontColor
+            : footerColor?.font,
+    }
+    const netAmountStyle = {
+        backgroundColor: GlobaldummyData
+            ? SelectedNetAmountColor
+            : netAmtColor?.background,
+
+        color: GlobaldummyData
+            ? SelectedNetAmountFontColor
+            : netAmtColor?.font,
+    }
 
     return (
         <>
@@ -87,15 +138,15 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                         <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}>
 
 
-                          <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
+                            <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
                                 <hr class="star-line" />
-                                <div className="PrintStyle7-print">
-                                    <div style={{ fontSize: '16px', fontWeight: '600' }}> { table2Data?.[0]?.BrName}</div>
+                                <div className="PrintStyle7-print"  style={{...headerStyle}}>
+                                    <div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div>
                                     <div style={{ fontSize: '10px', fontWeight: '600' }} >{GlobaldummyData ?
                                         'BranchAddress, Town- 635XXX City - State' :
                                         (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')}
                                     </div>
-                                    { <div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>}
+                                    {<div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>}
                                 </div>
 
                                 <hr className="PrintStyle7-print-dottline" />
@@ -115,7 +166,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                             <div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body">
                                 <div className="PrintStyle7-print-table" >
 
-                                    {(TakeawayData?.length > 0 ) &&
+                                    {(TakeawayData?.length > 0) &&
                                         <>
                                             <div className="PrintStyle7-print-tableMaster">
 
@@ -123,30 +174,41 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                                 <table className="PrintStyle7-print-table">
                                                     <thead>
                                                         <tr>
-                                                            { SLNO == true && <th style={{ width: '10px', }}>S</th>}
-                                                            { Item == true && <th>Item</th>}
-                                                            { HsnCode == true && <th style={{ width: '10px', }}>HSN</th>}
-                                                            { Quantity == true && <th style={{ width: '10px', }}>Qty</th>}
-                                                            {GlobaldummyData ? GlobalMRP && <th style={{ width: '10px' }}>MRP</th> : MRP == true && <th style={{ width: '10px' }}>MRP</th>}
-                                                            {GlobaldummyData ? GlobalRate && <th style={{ width: '10px' }}>Rate</th> : Rate == true && <th style={{ width: '10px' }}>Rate</th>}
-                                                            { Discount == true && <th style={{ width: '10px' }}>Dis </th>}
-                                                            { Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
+                                                            {SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>}
+                                                            {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
+                                                            {HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>}
+                                                            {Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>}
+                                                            {GlobaldummyData ? GlobalMRP && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th> : MRP == true && <th style={{...tableHeaderStyle, width: '10px' }}>MRP</th>}
+                                                            {GlobaldummyData ? GlobalRate && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th> : Rate == true && <th style={{...tableHeaderStyle, width: '10px' }}>Rate</th>}
+                                                            {Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>}
+                                                            {Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>}
                                                         </tr>
                                                     </thead>
                                                     <tbody>
                                                         {dataChunk?.map((item, index) => (
-                                                            <tr key={index} >
-                                                                { SLNO == true && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>}
-                                                                { Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
-                                                                        <div>{item?.ProdName}</div>
-                                                                        <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div>
-                                                                    </td>}
-                                                                { HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>}
-                                                                { Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>}
-                                                                { MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
+                                                            <tr key={index}
+                                                                style={
+                                                                    index % 2 !== 1 && rowtypeStyle === "even"
+                                                                        ? {
+                                                                            ...tableBodyStyle
+                                                                        }
+                                                                        : index % 2 === 1 && rowtypeStyle === "odd"
+                                                                            ? {
+                                                                                ...tableBodyStyle
+                                                                            }
+                                                                            : {}
+                                                                }>
+                                                                {SLNO == true && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>}
+                                                                {Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
+                                                                    <div>{item?.ProdName}</div>
+                                                                    <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div>
+                                                                </td>}
+                                                                {HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>}
+                                                                {Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>}
+                                                                {MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
                                                                 {Rate == true && <td style={{ textAlign: 'right' }}>{item?.Price}</td>}
-                                                                { Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
-                                                                { Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
+                                                                {Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
+                                                                {Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
                                                             </tr>
                                                         ))}
                                                     </tbody>
@@ -161,10 +223,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                             {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
                                 <>
                                     <div className='PrintStyle7-SecondDiv3'>
-                                        <div className='PrintStyle7-SecondDivMaster'>
-                                            <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div>
-                                            <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div>
-                                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
+                                        <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
+                                            <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
+                                            <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
+                                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
                                         </div>
                                         <div style={{ display: 'flex', justifyContent: 'center' }}>
                                             <div>
@@ -294,11 +356,11 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                         <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
                                     </div>
 
-                                  
-                                    
 
-                                    
-                                    
+
+
+
+
                                     {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData &&
                                         <div>
                                             <div style={{ marginLeft: '13px', padding: 0, fontSize: "8px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</div>
@@ -315,6 +377,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                             pageBreakBefore: "avoid",
                                             pageBreakInside: "avoid",
                                             minHeight: "auto",
+                                            ...footerColorStyle
                                         }}
                                     >
                                         {
@@ -339,7 +402,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                                 </div>)
                                             }
 
-                                            { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                                            {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
                                                 <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
                                                 <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
                                             </div>)}
@@ -349,7 +412,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
 
 
 
-                                   
+
                                 </>
                             }
                         </div>
@@ -376,10 +439,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                             >
                                 <>
                                     <div className='PrintStyle7-SecondDiv3'>
-                                        <div className='PrintStyle7-SecondDivMaster'>
-                                            <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div>
-                                            <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div>
-                                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
+                                        <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
+                                            <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
+                                            <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
+                                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
                                         </div>
                                         <div style={{ display: 'flex', justifyContent: 'center' }}>
                                             <div>
@@ -506,36 +569,28 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                             </div>
                                         </div>
 
-                                        <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
+                                        <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
                                     </div>
 
-                                    
 
 
 
-                                   
+
+
                                     {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData &&
                                         <div>
                                             <div style={{ marginLeft: '13px', padding: 0, fontSize: "8px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</div>
                                         </div>
                                     }
-
-
-
-
-
-
                                     <div className="page-footerA4Style11"
                                         style={{
                                             marginTop: "auto",
                                             pageBreakBefore: "avoid",
                                             pageBreakInside: "avoid",
                                             minHeight: "auto",
+                                            ...footerColorStyle
                                         }}
                                     >
-                                       
-
-
                                         <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}>
                                             {
                                                 (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
@@ -549,32 +604,27 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                                 </div>)
                                             }
 
-                                            { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                                            {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
                                                 <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
                                                 <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
                                             </div>)}
 
                                         </div>
                                     </div>
-
-
-
                                 </>
                             </div>
                         </div>
                     }
                 </div>
-
-
                 :
                 <div className="PrintStyle7MasterDiv" id={`SQPrintStyle7`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
                     <hr class="star-line" />
-                    <div className="PrintStyle7-print">
-                        <div style={{ fontSize: '16px', fontWeight: '600' }}> { table2Data?.[0]?.BrName}</div>
+                    <div className="PrintStyle7-print"  style={{...headerStyle}}>
+                        <div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div>
                         <div style={{ fontSize: '10px', fontWeight: '600' }} >{
                             (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')}
                         </div>
-                        { <div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>}
+                        {<div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>}
                     </div>
 
                     <hr className="PrintStyle7-print-dottline" />
@@ -582,7 +632,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                     <div className='PrintStyle7-SecondDivMaster'>
                         <div className='PrintStyle7-SecondDiv'>
                             <div className='PrintStyle7-SecondDiv-wordings' style={{ fontSize: "10px", fontWeight: "600" }} >Bill No :{
-                            table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)
+                                table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)
                             }</div>
                         </div>
                         <div className='PrintStyle7-SecondDiv2'>
@@ -604,30 +654,41 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                     <table className="PrintStyle7-print-table">
                                         <thead>
                                             <tr>
-                                                { SLNO == true && <th style={{ width: '10px', }}>S</th>}
-                                                { Item == true && <th>Item</th>}
-                                                { HsnCode == true && <th style={{ width: '10px', }}>HSN</th>}
-                                                { Quantity == true && <th style={{ width: '10px', }}>Qty</th>}
-                                                { MRP == true && <th style={{ width: '10px' }}>MRP</th>}
-                                                { Rate == true && <th style={{ width: '10px' }}>Rate</th>}
-                                                { Discount == true && <th style={{ width: '10px' }}>Dis </th>}
-                                                { Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
+                                                {SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>}
+                                                {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>}
+                                                {HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>}
+                                                {Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>}
+                                                {MRP == true && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th>}
+                                                {Rate == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th>}
+                                                {Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>}
+                                                {Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>}
                                             </tr>
                                         </thead>
                                         <tbody>
                                             {(GlobaldummyData ? products : TakeawayData)?.map((item, index) => (
-                                                <tr key={index} >
-                                                    { SLNO == true && <td style={{ textAlign: 'center' }}>{index + 1}</td>}
-                                                    { Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
-                                                            <div>{item?.ProdName}</div>
-                                                            <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div>
-                                                        </td>}
-                                                    { HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>}
-                                                    { Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>}
-                                                    { MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
+                                                <tr key={index}
+                                                    style={
+                                                        index % 2 !== 1 && rowtypeStyle === "even"
+                                                            ? {
+                                                                ...tableBodyStyle
+                                                            }
+                                                            : index % 2 === 1 && rowtypeStyle === "odd"
+                                                                ? {
+                                                                    ...tableBodyStyle
+                                                                }
+                                                                : {}
+                                                    }>
+                                                    {SLNO == true && <td style={{ textAlign: 'center' }}>{index + 1}</td>}
+                                                    {Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}>
+                                                        <div>{item?.ProdName}</div>
+                                                        <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div>
+                                                    </td>}
+                                                    {HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>}
+                                                    {Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>}
+                                                    {MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
                                                     {Rate == true && <td style={{ textAlign: 'right' }}>{item?.Price}</td>}
-                                                    { Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
-                                                    { Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
+                                                    {Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
+                                                    {Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
                                                 </tr>
                                             ))}
                                         </tbody>
@@ -638,10 +699,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                     </div>
 
                     <div className='PrintStyle7-SecondDiv3'>
-                        <div className='PrintStyle7-SecondDivMaster'>
-                            <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div>
-                            <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div>
-                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
+                        <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}>
+                            <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div>
+                            <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div>
+                            {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>}
                         </div>
                         <div style={{ display: 'flex', justifyContent: 'center' }}>
                             <div>
@@ -768,10 +829,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                             </div>
                         </div>
 
-                        <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
+                        <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
                     </div>
 
-                   
+
 
 
 
@@ -791,6 +852,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                             pageBreakBefore: "avoid",
                             pageBreakInside: "avoid",
                             minHeight: "auto",
+                            ...footerColorStyle
                         }}
                     >
                         {