Merge pull request 'print-colors-sq' (#237) from print-colors-sq into main

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

src/Features/ThemeChange/ThemeChange.js

@@ -544,11 +544,13 @@ const initialState = {
   PrintTemplate: null,
   DCPrintTemplate: null,
   PrintFieldDetails: null,
+  DCtoInvoicePrintFieldDetails: null,
   PricingAppPricingName: null,
   FeatureAddonData: [],
   SessionData: [],
   ThemeCreation: {},
   printDatas: {},
+  DCtoInvoice: {},
   DefaultTheme: [],
   OthersTheme: [],
   SelectedTheme: {},
@@ -2407,12 +2409,16 @@ const ThemeSlice = createSlice({
                     item.SetasDefault == 'Y' &&
                     item.PrintTypeName === 'Delivery Chalan'
                 )?.StyleName;
-
               state.printDatas =
                 action?.payload?.data?.data?.[0]?.ComponentDetails.find(
                   (item) =>
                     item.SetasDefault == 'Y' && item.PrintTypeName === 'Sales'
                 );
+              state.DCtoInvoice =
+                action?.payload?.data?.data?.[0]?.ComponentDetails.find(
+                  (item) =>
+                    item.SetasDefault == 'Y' && item.PrintTypeName === 'DC to Invoice'
+                );
               state.PrintFieldDetails =
                 action?.payload?.data?.data?.[0]?.ComponentDetails?.find(
                   (item) =>
@@ -2421,6 +2427,14 @@ const ThemeSlice = createSlice({
                   acc[item.ConfigName] = true;
                   return acc;
                 }, {});
+              state.DCtoInvoicePrintFieldDetails =
+                action?.payload?.data?.data?.[0]?.ComponentDetails?.find(
+                  (item) =>
+                    item.SetasDefault == 'Y' && item.PrintTypeName === 'DC to Invoice'
+                )?.FieldDetails?.reduce((acc, item) => {
+                  acc[item.ConfigName] = true;
+                  return acc;
+                }, {});
             
           } else if (action?.payload?.data?.statusCode == 0) {
             state.PrintTemplate = undefined;
@@ -2755,6 +2769,7 @@ export const GlobalPricingAppPricingName = (state) =>
   state?.theme?.PricingAppPricingName;
 export const SelectedPrintTemplate = (state) => state?.theme?.PrintTemplate;
 export const GloabalFieldDetails = (state) => state?.theme?.PrintFieldDetails;
+export const GloabalDCtoInvoiceFieldDetails = (state) => state?.theme?.DCtoInvoicePrintFieldDetails;
 export const GlobalReprintDataFound = (state) => state.theme?.ReprintDataFound;
 export const GlobalPritdummyData = (state) => state.theme?.PrintdummyData;
 export const GlobalprintSize = (state) => state.theme?.printSize;
@@ -2865,6 +2880,7 @@ export const SelectedGlobalSubCatgFont = (state) =>
   state.theme.SelectedSubCatgFont;
 export const StoredSessionData = (state) => state.theme.SessionData;
 export const GlobalprintDatas = (state) => state.theme.printDatas;
+export const GlobalDCtoInvoicePrint = (state) => state.theme.DCtoInvoice;
 export const GlobalDefaultTheme = (state) => state.theme.DefaultTheme;
 export const GlobalOthersTheme = (state) => state.theme.OthersTheme;
 export const GlobalSelectedTheme = (state) => state.theme.SelectedTheme;

src/Pages/DeliveryChallanToInvoice/DeliveryChallanToInvoiceList.jsx

@@ -23,7 +23,7 @@ import { Emailsend } from "../../Features/PurchaseOrder/PurchaseOrder";
 import './DeliveryChallanToInvoice.scss'
 import { settingDataSelector } from "../../Features/PreferenceMaster/PreferenceMaster";
 import { getBranchDetail } from "../../Features/BrachLogin/BranchLogin";
-import { getPrintSelectionComponentData, GlobalprintDatas, SelectedPrintTemplate } from "../../Features/ThemeChange/ThemeChange";
+import { getPrintSelectionComponentData, GlobalDCtoInvoicePrint, GlobalprintDatas, SelectedPrintTemplate } from "../../Features/ThemeChange/ThemeChange";
 import { printDCToInvoiceStyles } from "./PrintTemplates/printDCToInvoiceStyles";
 import { isMobile } from "react-device-detect";
 import { DCMobilePdfPrint } from "./PrintTemplates/DCMobilePdfPrint";
@@ -48,7 +48,7 @@ const DeliveryChallanToInvoiceList = () => {
     const UserType = getSession("UserType");
     const SettingDataSelector = useSelector(PreferenceData);
     const printerTemplateStyle = useSelector(SelectedPrintTemplate);
-    const printDatas = useSelector(GlobalprintDatas);
+    const printDatas = useSelector(GlobalDCtoInvoicePrint);
     const [page, setPage] = useState(1);
     const [empData, setEmpData] = useState();
     const [addnewAccess, setaddnewAccess] = useState(true);

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice1.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
@@ -17,8 +17,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
     CustName,
     VehicleNo
   } = invoiceData;
-
+  const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
-  const fieldDetails = useSelector(GloabalFieldDetails);
   const signature = fieldDetails?.["signature"];
   const termsAndConditions = fieldDetails?.["terms&conditions"];
   const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -28,7 +27,6 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
   const pageSize = printDatas?.PageSize;
   const branch = AddressDetails[0];
   const logo = branch?.CompLogo;
-
   const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
     (i) => i.SettingIdName === 'PrintGreetings'
   );
@@ -54,9 +52,37 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
     maxHeight: "97vh"
   });
 
+  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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
+
   const HeaderSection = () => (
     <>
-      <Header logo={logo} branch={branch} />
+      <Header logo={logo} branch={branch} headerStyle={headerStyle} />
       <hr className="dotted-line" />
       <InvoiceMeta
         InvoiceNo={InvoiceNo}
@@ -73,10 +99,11 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
   const renderFooter = () => (
     <>
       <hr className="dotted-line" />
-      <Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
+      <Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
       {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
         <>
-          <hr className="dotted-line" />
+         <div style={{...footerColorStyle}}>
+           <hr className="dotted-line" />
           {notesText && <p className="notesText">{notesText}</p>}
           <div className="termsAndSignature">
             {termsAndConditions && termsAndConditionsData?.length > 0 && (
@@ -99,6 +126,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
           {printGreeting?.SettingValue === "Y" && (
             <div className="printGreeting">Thank You Visit Again</div>
           )}
+         </div>
         </>
       )}
     </>
@@ -119,7 +147,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
             >
               <div>
                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                <ProductTable data={dataChunk} />
+                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
                 {!formatTheme && isFinalFooterPage && renderFooter()}
               </div>
               {formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@@ -129,7 +157,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
       ) : (
         <div className="container">
           <HeaderSection />
-          <ProductTable data={ProductDetails} />
+          <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
           {renderFooter()}
         </div>
       )}
@@ -141,8 +169,8 @@ export default PrintStyleDCToInvoice1;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch, headerStyle }) => (
-  <div className="header">
+  <div className="header" style={{ ...headerStyle }}>
     {/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
     <div className="headerText">
       <div className="companyName">{branch.CompName}</div>
@@ -172,7 +200,7 @@ const InvoiceMeta = ({ InvoiceNo, DCNo, InvoiceDate, CustMobile, VehicleNo, Cust
   </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%" },
@@ -186,7 +214,7 @@ const ProductTable = ({ data }) => {
   return (
     <table className="productTable">
       <thead>
-        <tr>
+        <tr style={{ ...tableHeaderStyle }}>
           {columns.map(col => (
             <th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
           ))}
@@ -194,7 +222,18 @@ 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>
@@ -209,8 +248,8 @@ const ProductTable = ({ data }) => {
   );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-  <div className="summary">
+  <div className="summary" style={{...netAmountStyle}}>
     <div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
     <div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
     <div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice10.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
     VehicleNo
   } = invoiceData;
 
-  const fieldDetails = useSelector(GloabalFieldDetails);
+  const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
   const signature = fieldDetails?.["signature"];
   const termsAndConditions = fieldDetails?.["terms&conditions"];
   const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -52,9 +52,36 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
     height: pageSize === "A5" ? "170mm" : "98vh",
     maxHeight: "98vh"
   });
+   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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
   const renderFooter = () => (
-    <div className="footer-section">
+    <div className="footer-section" style={{...footerColorStyle}}>
       {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
         <>
           {notesText && <p className="footer-notes">{notesText}</p>}
@@ -95,6 +122,7 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
       DCNo={DCNo}
       InvoiceDate={InvoiceDate}
       VehicleNo={VehicleNo}
+      headerStyle={headerStyle} 
     />
   );
 
@@ -113,13 +141,14 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
             >
               <div>
                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                <ProductTable data={dataChunk} />
+                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                 {isLastPage && (
                   <>
                     <Summary
                       TotalAmount={TotalAmount}
                       TaxAmount={TaxAmount}
                       GrandTotal={GrandTotal}
+                      netAmountStyle={netAmountStyle}
                     />
                     <CustomerDetails
                       CustMobile={CustMobile}
@@ -136,11 +165,12 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
       ) : (
         <div className="container">
           <HeaderSection />
-          <ProductTable data={ProductDetails} />
+          <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
           <Summary
             TotalAmount={TotalAmount}
             TaxAmount={TaxAmount}
             GrandTotal={GrandTotal}
+            netAmountStyle={netAmountStyle}
           />
           <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
           {renderFooter()}
@@ -154,8 +184,8 @@ export default PrintStyleDCToInvoice10;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-  <div className="header-section">
+  <div className="header-section" style={{...headerStyle}}>
     <div className="header-section-wrapper">
       <div className="header-company">{branch?.CompName}</div>
       <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -176,7 +206,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
   const columns = [
     { label: "S.No", key: "sno", width: "5%", align: 'center' },
     { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -188,9 +218,9 @@ const ProductTable = ({ data }) => {
   ];
 
   return (
-    <table className="product-table">
+    <table className="product-table" >
       <thead>
-        <tr>
+        <tr style={{...tableHeaderStyle}}>
           {columns.map(col => (
             <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
           ))}
@@ -198,7 +228,18 @@ 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 className="text-center">{index + 1}</td>
             <td>{prod.ProdName}</td>
             <td className="text-center">{prod.ProdVariantName}</td>
@@ -213,8 +254,8 @@ const ProductTable = ({ data }) => {
   );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-  <div className="summary">
+  <div className="summary" style={{...netAmountStyle}}>
     <div className="summarydiv">
       <div className="text-left">Subtotal :</div>
       <div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice11.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 
@@ -19,7 +19,7 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -53,9 +53,36 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
         height: pageSize === "A5" ? "170mm" : "98vh",
         maxHeight: "98vh"
     });
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -94,6 +121,7 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
             branch={branch}
             InvoiceNo={InvoiceNo}
             DCNo={DCNo}
+            headerStyle={headerStyle} 
         />
     );
 
@@ -112,13 +140,14 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && (
                                     <>
                                         <Summary
                                             TotalAmount={TotalAmount}
                                             TaxAmount={TaxAmount}
                                             GrandTotal={GrandTotal}
+                                            netAmountStyle={netAmountStyle}
                                         />
                                         <CustomerDetails
                                             CustMobile={CustMobile}
@@ -137,11 +166,12 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <CustomerDetails
                         CustMobile={CustMobile}
@@ -159,9 +189,9 @@ export default PrintStyleDCToInvoice11;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" >
-        <div className="header-section-wrapper">
+        <div className="header-section-wrapper" style={{...headerStyle}}> 
             <div className="header-company">{branch?.CompName}</div>
             <div className="footer-dotted-line" />
             <div className="branch-address">
@@ -181,7 +211,7 @@ const Header = ({ branch, InvoiceNo, DCNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -193,9 +223,9 @@ const ProductTable = ({ data }) => {
     ];
 
     return (
-        <table className="product-table">
+        <table className="product-table" >
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -203,7 +233,17 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -218,8 +258,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <div className="text-left">Subtotal</div>
             <div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice12.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -45,6 +45,33 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -55,7 +82,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
     });
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -99,6 +126,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+            headerStyle={headerStyle} 
         />
     );
 
@@ -117,7 +145,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && (
                                     <>
                                         <hr className="footer-dashed-line" />
@@ -125,6 +153,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
                                             TotalAmount={TotalAmount}
                                             TaxAmount={TaxAmount}
                                             GrandTotal={GrandTotal}
+                                            netAmountStyle={netAmountStyle}
                                         />
                                         <hr className="footer-dashed-line" />
                                     </>
@@ -138,12 +167,13 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <hr className="footer-dashed-line" />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dashed-line" />
                     {renderFooter()}
@@ -157,8 +187,8 @@ export default PrintStyleDCToInvoice12;
 
 // COMPONENTS
 
-const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company-dtls">
                 <div className="header-company">{branch?.CompName}</div>
@@ -184,7 +214,7 @@ const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDa
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -196,9 +226,9 @@ const ProductTable = ({ data }) => {
     ];
 
     return (
-        <table className="product-table">
+        <table className="product-table" >
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -206,7 +236,17 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -221,8 +261,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <div>
                 <div className="text-left">Subtotal</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice2.jsx

@@ -1,8 +1,9 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 import { isMobile } from "react-device-detect";
+import { style } from "../../Product/Printstyles";
 
 const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
     const {
@@ -19,7 +20,7 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -46,6 +47,33 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -64,12 +92,13 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
                 DCNo={DCNo}
                 InvoiceDate={InvoiceDate}
                 VehicleNo={VehicleNo}
+                headerStyle={headerStyle} 
             />
         </>
     );
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     <hr className="dotted-line" />
@@ -115,13 +144,14 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                                 {isLastPage && <>
                                     <hr className="footer-dotted-line" />
                                     <Summary
                                         TotalAmount={TotalAmount}
                                         TaxAmount={TaxAmount}
                                         GrandTotal={GrandTotal}
+                                        netAmountStyle={netAmountStyle}
                                     />
                                     <CustomerDetails
                                         CustMobile={CustMobile}
@@ -137,12 +167,13 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                     <hr className="footer-dotted-line" />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <CustomerDetails
                         CustMobile={CustMobile}
@@ -159,8 +190,8 @@ export default PrintStyleDCToInvoice2;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             {logo && <img src={logo} alt="Company Logo" className="header-logo" width={!isMobile ? '60px' : 'auto'} />}
             <div>
@@ -184,7 +215,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </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%" },
@@ -199,7 +230,7 @@ const ProductTable = ({ data }) => {
         <>
             <table className="product-table">
                 <thead>
-                    <tr>
+                    <tr style={{...tableHeaderStyle}}> 
                         {columns.map(col => (
                             <th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
                         ))}
@@ -207,7 +238,18 @@ 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>
@@ -223,8 +265,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <strong>Subtotal</strong>
             <span>:</span>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice3.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -45,6 +45,34 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
+
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -63,12 +91,13 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
                 DCNo={DCNo}
                 InvoiceDate={InvoiceDate}
                 VehicleNo={VehicleNo}
+                headerStyle={headerStyle} 
             />
         </>
     );
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -114,13 +143,14 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && <>
                                     <hr className="footer-dotted-line" />
                                     <Summary
                                         TotalAmount={TotalAmount}
                                         TaxAmount={TaxAmount}
                                         GrandTotal={GrandTotal}
+                                         netAmountStyle={netAmountStyle}
                                     />
                                     <CustomerDetails
                                         CustMobile={CustMobile}
@@ -136,12 +166,13 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <hr className="footer-dotted-line" />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                         netAmountStyle={netAmountStyle}
                     />
                     <CustomerDetails
                         CustMobile={CustMobile}
@@ -158,8 +189,8 @@ export default PrintStyleDCToInvoice3;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -181,7 +212,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "20%" },
@@ -196,7 +227,7 @@ const ProductTable = ({ data }) => {
         <>
             <table className="product-table">
                 <thead>
-                    <tr>
+                    <tr style={{...tableHeaderStyle}}>
                         {columns.map(col => (
                             <th key={col.key} style={{ width: col.width, textAlign: col.align }} scope="col">{col.label}</th>
                         ))}
@@ -204,7 +235,18 @@ 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 className="text-center">{index + 1}</td>
                             <td>{prod.ProdName}</td>
                             <td>{prod.ProdVariantName}</td>
@@ -220,8 +262,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <strong>Subtotal:</strong>
             <div> ₹ {TotalAmount.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice4.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -54,6 +54,35 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
         maxHeight: "97vh"
     });
 
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
+
+
     const HeaderSection = () => (
         <>
             <Header
@@ -63,12 +92,13 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
                 DCNo={DCNo}
                 InvoiceDate={InvoiceDate}
                 VehicleNo={VehicleNo}
+                headerStyle={headerStyle} 
             />
         </>
     );
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -114,13 +144,14 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && <>
                                     <hr className="footer-dotted-line" />
                                     <Summary
                                         TotalAmount={TotalAmount}
                                         TaxAmount={TaxAmount}
                                         GrandTotal={GrandTotal}
+                                         netAmountStyle={netAmountStyle}
                                     />
                                     <hr className="footer-dotted-line" />
                                     <CustomerDetails
@@ -137,12 +168,13 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <hr className="footer-dotted-line" />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                         netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails
@@ -160,8 +192,8 @@ export default PrintStyleDCToInvoice4;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -182,7 +214,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </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%", align: 'center' },
@@ -197,7 +229,7 @@ const ProductTable = ({ data }) => {
         <>
             <table className="product-table">
                 <thead>
-                    <tr>
+                    <tr style={{...tableHeaderStyle}}>
                         {columns.map(col => (
                             <th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
                         ))}
@@ -205,7 +237,17 @@ 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 className="text-center">{prod.ProdVariantName}</td>
@@ -221,8 +263,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <strong>Subtotal</strong>
             <span>:</span>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice5.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -45,6 +45,34 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
 
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
+
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
         flexDirection: "column",
@@ -61,12 +89,13 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
                 DCNo={DCNo}
                 InvoiceDate={InvoiceDate}
                 VehicleNo={VehicleNo}
+                headerStyle={headerStyle} 
             />
         </>
     );
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -112,12 +141,13 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && <>
                                     <Summary
                                         TotalAmount={TotalAmount}
                                         TaxAmount={TaxAmount}
                                         GrandTotal={GrandTotal}
+                                         netAmountStyle={netAmountStyle}
                                     />
                                     <div className="footer-ruler" />
                                     <CustomerDetails
@@ -134,11 +164,12 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                         netAmountStyle={netAmountStyle}
                     />
                     <div className="footer-ruler" />
                     <CustomerDetails
@@ -156,8 +187,8 @@ export default PrintStyleDCToInvoice5;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -179,7 +210,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -194,7 +225,7 @@ const ProductTable = ({ data }) => {
         <>
             <table className="product-table">
                 <thead>
-                    <tr>
+                    <tr style={{...tableHeaderStyle}}>
                         {columns.map(col => (
                             <th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
                         ))}
@@ -202,7 +233,17 @@ 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 className="text-center">{index + 1}</td>
                             <td>{prod.ProdName}</td>
                             <td className="text-center">{prod.ProdVariantName}</td>
@@ -218,8 +259,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="total-and-tax">
             <div>Subtotal:</div>
             <div> ₹ {TotalAmount.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice6.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -44,6 +44,34 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
+
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -61,12 +89,13 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
                 DCNo={DCNo}
                 InvoiceDate={InvoiceDate}
                 VehicleNo={VehicleNo}
+                headerStyle={headerStyle} 
             />
         </>
     );
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -112,13 +141,14 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && <>
                                     <div className="footer-ruler" />
                                     <Summary
                                         TotalAmount={TotalAmount}
                                         TaxAmount={TaxAmount}
                                         GrandTotal={GrandTotal}
+                                         netAmountStyle={netAmountStyle}
                                     />
                                     <div className="footer-ruler" />
                                     <CustomerDetails
@@ -136,12 +166,13 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <div className="footer-ruler" />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                         netAmountStyle={netAmountStyle}
                     />
                     <div className="footer-ruler" />
                     <CustomerDetails
@@ -160,8 +191,8 @@ export default PrintStyleDCToInvoice6;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -182,7 +213,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -197,7 +228,7 @@ const ProductTable = ({ data }) => {
         <>
             <table className="product-table">
                 <thead>
-                    <tr>
+                    <tr style={{...tableHeaderStyle}}>
                         {columns.map(col => (
                             <th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
                         ))}
@@ -205,7 +236,17 @@ 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 className="text-center">{index + 1}</td>
                             <td>{prod.ProdName}</td>
                             <td className="text-center">{prod.ProdVariantName}</td>
@@ -221,8 +262,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="total-and-tax">
             <div><strong>Subtotal: ₹ {TotalAmount.toFixed(2)}</strong></div>
             <div><strong>Tax Amount: ₹ {TaxAmount.toFixed(2)}</strong></div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice7.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -53,8 +53,35 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
         maxHeight: "98vh"
     });
 
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -95,6 +122,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+            headerStyle={headerStyle} 
         />
     );
 
@@ -245,13 +273,14 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                                 {isLastPage && (
                                     <>
                                         <Summary
                                             TotalAmount={TotalAmount}
                                             TaxAmount={TaxAmount}
                                             GrandTotal={GrandTotal}
+                                            netAmountStyle={netAmountStyle}
                                         />
                                         <hr className="footer-dotted-line" />
                                         <CustomerDetails
@@ -269,11 +298,12 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@@ -288,12 +318,12 @@ export default PrintStyleDCToInvoice7;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" >
         <div style={{ letterSpacing: '5px', fontSize: '14px' }}>
             ********************************************************
         </div>
-        <div className="header-section-wrapper">
+        <div className="header-section-wrapper" style={{...headerStyle}}>
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
             <div>Mobile : {branch?.BrMobile}</div>
@@ -316,7 +346,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -328,9 +358,10 @@ const ProductTable = ({ data }) => {
     ];
 
     return (
-        <table className="product-table">
+        // <table className="product-table" >
+        <table>
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -338,7 +369,18 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -353,8 +395,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="total-and-tax">
             <div><strong>Subtotal: ₹ {TotalAmount.toFixed(2)}</strong></div>
             <div><strong>Tax Amount: ₹ {TaxAmount.toFixed(2)}</strong></div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
     VehicleNo
   } = invoiceData;
 
-  const fieldDetails = useSelector(GloabalFieldDetails);
+  const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
   const signature = fieldDetails?.["signature"];
   const termsAndConditions = fieldDetails?.["terms&conditions"];
   const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -52,9 +52,36 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
     height: pageSize === "A5" ? "170mm" : "98vh",
     maxHeight: "98vh"
   });
+   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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
   const renderFooter = () => (
-    <div className="footer-section">
+    <div className="footer-section" style={{...footerColorStyle}}>
       {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
         <>
           {notesText && <p className="footer-notes">{notesText}</p>}
@@ -92,6 +119,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
       DCNo={DCNo}
       InvoiceDate={InvoiceDate}
       VehicleNo={VehicleNo}
+      headerStyle={headerStyle} 
     />
   );
 
@@ -110,7 +138,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
             >
               <div>
                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                <ProductTable data={dataChunk} />
+                <ProductTable data={dataChunk}  tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                 {isLastPage && (
                   <>
                     <hr className="footer-dotted-line" />
@@ -118,6 +146,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
                       TotalAmount={TotalAmount}
                       TaxAmount={TaxAmount}
                       GrandTotal={GrandTotal}
+                      netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails
@@ -135,12 +164,13 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
       ) : (
         <div className="container">
           <HeaderSection />
-          <ProductTable data={ProductDetails} />
+          <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
           <hr className="footer-dotted-line" />
           <Summary
             TotalAmount={TotalAmount}
             TaxAmount={TaxAmount}
             GrandTotal={GrandTotal}
+            netAmountStyle={netAmountStyle}
           />
           <hr className="footer-dotted-line" />
           <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@@ -155,8 +185,8 @@ export default PrintStyleDCToInvoice8;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-  <div className="header-section">
+  <div className="header-section" style={{...headerStyle}}>
     <div className="header-section-wrapper">
       <div className="header-company">{branch?.CompName}</div>
       <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -177,7 +207,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
   </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
   const columns = [
     { label: "S.No", key: "sno", width: "5%", align: 'center' },
     { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -189,9 +219,9 @@ const ProductTable = ({ data }) => {
   ];
 
   return (
-    <table className="product-table">
+    <table className="product-table" >
       <thead>
-        <tr>
+        <tr style={{...tableHeaderStyle}}>
           {columns.map(col => (
             <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
           ))}
@@ -199,7 +229,18 @@ 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 className="text-center">{index + 1}</td>
             <td>{prod.ProdName}</td>
             <td className="text-center">{prod.ProdVariantName}</td>
@@ -214,8 +255,8 @@ const ProductTable = ({ data }) => {
   );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-  <div className="summary">
+  <div className="summary" style={{...netAmountStyle}}>
     <div className="summarydiv">
       <div>Subtotal</div>
       <span>:</span>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice9.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -52,9 +52,36 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
         height: pageSize === "A5" ? "170mm" : "98vh",
         maxHeight: "98vh"
     });
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const renderFooter = () => (
-        <div className="footer-section">
+        <div className="footer-section" style={{...footerColorStyle}}>
             {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                 <>
                     {notesText && <p className="footer-notes">{notesText}</p>}
@@ -101,6 +128,7 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+            headerStyle={headerStyle} 
         />
     );
 
@@ -119,13 +147,14 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 {isLastPage && (
                                     <>
                                         <Summary
                                             TotalAmount={TotalAmount}
                                             TaxAmount={TaxAmount}
                                             GrandTotal={GrandTotal}
+                                            netAmountStyle={netAmountStyle}
                                         />
                                         <hr className="footer-dotted-line" />
                                         <CustomerDetails
@@ -144,11 +173,12 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <Summary
                         TotalAmount={TotalAmount}
                         TaxAmount={TaxAmount}
                         GrandTotal={GrandTotal}
+                        netAmountStyle={netAmountStyle}
                     />
                     <hr className="footer-dotted-line" />
                     <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@@ -164,8 +194,8 @@ export default PrintStyleDCToInvoice9;
 
 // COMPONENTS
 
-const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company">{branch?.CompName}</div>
             <div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@@ -186,7 +216,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -198,9 +228,9 @@ const ProductTable = ({ data }) => {
     ];
 
     return (
-        <table className="product-table">
+        <table className="product-table" >
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -208,7 +238,18 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -223,8 +264,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
-    <div className="summary">
+    <div className="summary" style={{...netAmountStyle}}>
         <div className="summarydiv">
             <div className="text-left">Subtotal :</div>
             <div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoiceA4.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -45,6 +45,33 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -60,9 +87,10 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
                 TotalAmount={TotalAmount}
                 TaxAmount={TaxAmount}
                 GrandTotal={GrandTotal}
+                netAmountStyle={netAmountStyle}
             />
             <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
-            <div className="footer-section">
+            <div className="footer-section" style={{...footerColorStyle}}>
                 {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                     <>
                         {notesText && (<>
@@ -108,6 +136,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+             headerStyle={headerStyle} 
         />
     );
 
@@ -126,7 +155,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div className="background-print-color">
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
                                 <hr className="footer-dashed-line" />
                                 {!formatTheme && isFinalFooterPage && renderFooter()}
                             </div>
@@ -137,7 +166,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <hr className="footer-dashed-line" />
                     {renderFooter()}
                 </div>
@@ -150,8 +179,8 @@ export default PrintStyleDCToInvoiceA4;
 
 // COMPONENTS
 
-const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company-dtls">
                 <div className="header-company">{branch?.CompName}</div>
@@ -177,7 +206,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -191,7 +220,7 @@ const ProductTable = ({ data }) => {
     return (
         <table className="product-table">
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -199,7 +228,18 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -214,8 +254,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
-    <div className="summary">
+    <div className="summary" >
         <div className="summarydiv">
             <div className="text-left">Subtotal : </div>
             <div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>
@@ -224,7 +264,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
             <div className="text-left">Tax Amount : </div>
             <div className="text-right"> ₹ {TaxAmount.toFixed(2)} </div>
         </div>
-        <div className="summarydiv-total">
+        <div className="summarydiv-total" style={{...netAmountStyle}}>
             <div className="text-left">Grand Total : </div>
             <div className="text-right"> ₹ {GrandTotal.toFixed(2)}</div>
         </div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoiceA4Standard.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }) => {
@@ -19,7 +19,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
     } = invoiceData;
     console.log(invoiceData, "invoiceData")
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -48,6 +48,33 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -67,6 +94,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                 CustMobile={CustMobile}
                 CustName={CustName}
                 VehicleNo={VehicleNo}
+                 headerStyle={headerStyle} 
             />
         </>
     );
@@ -86,7 +114,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                         <hr />
                     </div>}
                     {termsAndConditions && termsAndConditionsData?.length > 0 && (
-                        <div className="termsAndConditions">
+                        <div className="termsAndConditions" style={{...footerColorStyle}}>
                             <p className="termsAndConditionsHead">Terms & Conditions</p>
                             <ol className="termsAndConditionsList">
                                 {termsAndConditionsData.map((item, idx) => (
@@ -131,8 +159,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
                         >
                             <div>
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
-                                {isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />}
+                                {isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>}
                                 {!formatTheme && isFinalFooterPage && renderFooter()}
                             </div>
                             {formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@@ -142,8 +170,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
-                    <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
+                    <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
                     {renderFooter()}
                 </div>
             )}
@@ -155,9 +183,9 @@ export default PrintStyleDCToInvoiceA4Standard;
 
 // -------------------- COMPONENTS --------------------
 
-const Header = ({ logo, branch }) => (
+const Header = ({ logo, branch,headerStyle }) => (
     <>
-        <div className="header">
+        <div className="header" style={{...headerStyle}}>
             {/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
             <div className="headerText">
                 <div className="companyName">{branch.CompName}</div>
@@ -227,7 +255,7 @@ const InvoiceAmountWords = ({ amount }) => {
     );
 };
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%" },
         { label: "Product", key: "ProdName", width: "20%" },
@@ -241,7 +269,7 @@ const ProductTable = ({ data }) => {
     return (
         <table className="productTable">
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
                     ))}
@@ -249,7 +277,18 @@ 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>
@@ -264,9 +303,9 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
     <>
-        <div className="summary">
+        <div className="summary" style={{...netAmountStyle}}> 
             <div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
             <div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
             <div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoiceA5.jsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
-import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
+import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
 import { dateFormatChange1 } from "../../../Services/Others";
 
 const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
@@ -18,7 +18,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
         VehicleNo
     } = invoiceData;
 
-    const fieldDetails = useSelector(GloabalFieldDetails);
+    const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
     const signature = fieldDetails?.["signature"];
     const termsAndConditions = fieldDetails?.["terms&conditions"];
     const termsAndConditionsData = printDatas?.TermsandConditions;
@@ -45,6 +45,33 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
 
     const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
     const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
+     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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
     const getPageStyle = (isFinalFooterPage) => ({
         display: "flex",
@@ -60,10 +87,11 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
                 TotalAmount={TotalAmount}
                 TaxAmount={TaxAmount}
                 GrandTotal={GrandTotal}
+                netAmountStyle={netAmountStyle}
             />
             <CustomerDetails CustMobile={CustMobile} CustName={CustName} />
             <hr className="footer-dashed-line" />
-            <div className="footer-section">
+            <div className="footer-section" style={{...footerColorStyle}}>
                 {(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
                     <>
                         {notesText && <p className="footer-notes">{notesText}</p>}
@@ -106,6 +134,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
             DCNo={DCNo}
             InvoiceDate={InvoiceDate}
             VehicleNo={VehicleNo}
+             headerStyle={headerStyle} 
         />
     );
 
@@ -124,7 +153,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
                         >
                             <div className="background-print-color">
                                 {(chunkIndex === 0 || formatTheme) && <HeaderSection />}
-                                <ProductTable data={dataChunk} />
+                                <ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                                 <hr className="footer-dashed-line" />
                                 {!formatTheme && isFinalFooterPage && renderFooter()}
                             </div>
@@ -135,7 +164,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
             ) : (
                 <div className="container">
                     <HeaderSection />
-                    <ProductTable data={ProductDetails} />
+                    <ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
                     <hr className="footer-dashed-line" />
                     {renderFooter()}
                 </div>
@@ -148,8 +177,8 @@ export default PrintStyleDCToInvoiceA5;
 
 // COMPONENTS
 
-const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
+const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
-    <div className="header-section">
+    <div className="header-section" style={{...headerStyle}}>
         <div className="header-section-wrapper">
             <div className="header-company-dtls">
                 <div className="header-company">{branch?.CompName}</div>
@@ -175,7 +204,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
     </div>
 );
 
-const ProductTable = ({ data }) => {
+const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
     const columns = [
         { label: "S.No", key: "sno", width: "5%", align: 'center' },
         { label: "Product", key: "ProdName", width: "35%", align: 'center' },
@@ -189,7 +218,7 @@ const ProductTable = ({ data }) => {
     return (
         <table className="product-table">
             <thead>
-                <tr>
+                <tr style={{...tableHeaderStyle}}>
                     {columns.map(col => (
                         <th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
                     ))}
@@ -197,7 +226,18 @@ 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 className="text-center">{index + 1}</td>
                         <td>{prod.ProdName}</td>
                         <td className="text-center">{prod.ProdVariantName}</td>
@@ -212,8 +252,8 @@ const ProductTable = ({ data }) => {
     );
 };
 
-const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
+const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
-    <div className="summary">
+    <div className="summary" >
         <div className="summarydiv">
             <div className="text-left">Subtotal : </div>
             <div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>
@@ -222,7 +262,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
             <div className="text-left">Tax Amount : </div>
             <div className="text-right"> ₹ {TaxAmount.toFixed(2)} </div>
         </div>
-        <div className="summarydiv-total">
+        <div className="summarydiv-total" style={{...netAmountStyle}}>
             <div className="text-left">Grand Total : </div>
             <div className="text-right"> ₹ {GrandTotal.toFixed(2)}</div>
         </div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { isMobile } from 'react-device-detect';
 import { extractLastNumberOrderId } from '../../../Services/Others';
 import moment from 'moment';
-import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
+import { GloabalDCtoInvoiceFieldDetails, GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
 
 const TaxInvoicePrint = ({
   index,
@@ -16,8 +16,8 @@ const TaxInvoicePrint = ({
   BranchData,
   printDatas,
   BankDetails
-}) => { 
+}) => {
-  const GlobaldummyData = useSelector(GlobalPritdummyData);
+  const GlobaldummyData = useSelector(GloabalDCtoInvoiceFieldDetails);
   let BillName = printDatas?.PrintHdrName
   // Function to convert number to words
   const numberToWords = (num) => {
@@ -52,9 +52,9 @@ const TaxInvoicePrint = ({
       city: table2Data?.AddressDetails?.[0]?.City || "",
       state: table2Data?.AddressDetails?.[0]?.State || "",
       zip: table2Data?.AddressDetails?.[0]?.Zip || ""
-    }, 
+    },
     companyGSTIN: table2Data?.AddressDetails?.[0]?.CompGSTIN || BranchData?.BrGSTIN || "",
-    companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail ||  BranchData?.companyEmail ||"",
+    companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail || BranchData?.companyEmail || "",
     companyMobile: table2Data?.AddressDetails?.[0]?.BrMobile || "",
     companyMobile2: table2Data?.AddressDetails?.[0]?.BrMobile2 || "",
 
@@ -67,7 +67,7 @@ const TaxInvoicePrint = ({
 
     // Customer Details - mapped from A4Standard CustomerDetails array
     customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustName
-     || "",
+      || "",
     customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.CustMobile || "",
     customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
     customerAddress: {
@@ -82,20 +82,41 @@ const TaxInvoicePrint = ({
     // Totals - mapped from A4Standard
     totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmount || 0),
     taxAmount: Number(OrderDetailGST || ''),
-    grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0),
+    grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
     totalBillAmount: Number(table2Data?.BillAmount || table2Data?.GrandTotal || 0),
     // Bank Details - mapped from A4Standard
     bankDetails: BankDetails?.[0] || ""
   };
 
-  console.log(table2Data, "Date1Date1", invoiceData, )
+  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 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 netAmountStyle = {
+    backgroundColor: netAmtColor?.background,
+    color: netAmtColor?.font,
+  }
 
   let PageSize = printDatas?.PageSize
-
-  const TakeawayData = table2Data?.productDetails
-
-  const DineInData = table2Data?.productDetails
-
   const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
     ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
     : 0;
@@ -135,7 +156,7 @@ const TaxInvoicePrint = ({
     dataSource = [];
   }
 
-  console.log("Final DataSource:",  table2Data, );
+  console.log("Final DataSource:", table2Data,);
 
   const paginatedChunks = [];
 
@@ -206,7 +227,7 @@ const TaxInvoicePrint = ({
         {/* Header - Only on first page */}
         {isFirstPage && (
           <>
-            <div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
+            <div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", ...headerStyle }}>
               <div></div>
               <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
               <div>
@@ -233,10 +254,10 @@ const TaxInvoicePrint = ({
                   textAlign: 'left'
                 }}>
 
-                  <div style={{ fontWeight: '700', fontSize: '15px', }}>
+                  <div style={{ fontWeight: '700', fontSize: '15px', color: headerColor?.font }}>
                     {invoiceData.companyName}
                   </div>
-                  <div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
+                  <div style={{ fontWeight: '700', fontSize: '12px' }}>{invoiceData.companyspecname}</div>
                   <div >{invoiceData.companyAddress.address1}</div>
                   <div>{invoiceData.companyAddress.address2}</div>
                   <div>{invoiceData.companyAddress.city}  {invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}</div>
@@ -376,6 +397,7 @@ const TaxInvoicePrint = ({
                 // borderRight: '1px solid #000',
                 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>
@@ -394,6 +416,11 @@ const TaxInvoicePrint = ({
                       display: 'grid',
                       gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                       // borderRight: '1px solid #000',
+                      ...(index % 2 === 0 && 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>
@@ -432,7 +459,7 @@ const TaxInvoicePrint = ({
                           </div>
                         </div>
                         {/* CGST */}
-                       {OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
+                        {OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
                           display: 'grid',
                           gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                           // borderRight: '1px solid #000',
@@ -447,13 +474,13 @@ const TaxInvoicePrint = ({
                           <div style={{ borderRight: '1px solid #000' }}></div>
                           <div style={{ borderRight: '1px solid #000' }}></div>
                           {<div style={{ padding: '6px 6px', textAlign: 'right', }}>
-                            { OrderDetailGST && OrderDetailGST.length > 0
+                            {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>}
                         {/* SGST */}
-                       { OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
+                        {OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
                           display: 'grid',
                           gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
                           // borderRight: '1px solid #000',
@@ -474,7 +501,7 @@ const TaxInvoicePrint = ({
                           </div>
                         </div>}
                         {/* IGST */}
-                        { OrderDetailGST && OrderDetailGST.length > 0 &&  (
+                        {OrderDetailGST && OrderDetailGST.length > 0 && (
                           <div style={{
                             display: 'grid',
                             gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
@@ -557,7 +584,7 @@ const TaxInvoicePrint = ({
                           </div>
                           <div style={{ borderRight: '1px solid #000' }}></div>
                           <div style={{ borderRight: '1px solid #000' }}></div>
-                          <div style={{ padding: '8px 6px', textAlign: 'right', }}>
+                          <div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
                             ₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                           </div>
                         </div>
@@ -804,6 +831,7 @@ const TaxInvoicePrint = ({
             textAlign: 'center',
             fontSize: '10px',
             padding: '8px',
+            ...footerColorStyle
           }}>
             <div>This is a Computer Generated Invoice</div>
           </div>

src/Pages/DeliveryChallanToInvoice/PrintTemplates/printDCToInvoiceStyles.js

@@ -293,7 +293,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         }
         .header-section-wrapper {
             padding: 5px 0px;
-            background: #f3f3f3;
+            // background: #f3f3f3;
             border-radius: 1%;
             display: flex;
             flex-direction: column;
@@ -435,7 +435,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .invoice-head{
             font-weight: light;
             font-size: 18px;
-            color: #5e5e5e;
+            // color: #5e5e5e;
         }
         .meta-info {
             margin-top: 1rem;
@@ -453,7 +453,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
                 border-spacing: 0px 5px;
         }
         .product-table th {
-            background: #ebebebff;
+            // background: #ebebebff;
             padding: 4px;
             text-align: left;
         }
@@ -583,7 +583,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .invoice-head{
             font-weight: light;
             font-size: 16px;
-            color: #5e5e5e;
+            // color: #5e5e5e;
         }
         .meta-info {
             display: flex;
@@ -888,7 +888,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
           text-align: center;
         }
         .header-section-wrapper {
-          background: #ccccccff;
+          // background: #ccccccff;
           font-size: 15px;
           font-weight: bold;
           display: flex;
@@ -928,7 +928,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .product-table th {
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
         }
         .product-table td {
           padding: 4px;
@@ -1057,7 +1057,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
           font-weight: bold;
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
         }
         .product-table td {
           padding: 4px;
@@ -1153,7 +1153,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         }
         .header-section {
           text-align: center;
-          background: #dbdbdb;
+          // background: #dbdbdb;
           padding: 1px 8px;
         }
         .header-section-wrapper {
@@ -1192,7 +1192,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .product-table th {
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
         }
         .product-table td {
           padding: 4px;
@@ -1297,7 +1297,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
           margin-bottom: 8px;
               align-items: center;
               font-weight: 500;
-              background: #dbdbdb;
+              // background: #dbdbdb;
         }
         .header-company {
           font-size: 20px;
@@ -1327,7 +1327,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .product-table th {
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
         }
         .product-table td {
           padding: 4px;
@@ -1436,7 +1436,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
             width: 100%;
             font-size: 20px;
             font-weight: 600;
-            background: #dbdbdb;
+            // background: #dbdbdb;
         }
         .branch-address {
             margin: 5px 0px;
@@ -1463,7 +1463,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .product-table th {
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
         }
         .product-table td {
           padding: 4px;
@@ -1621,7 +1621,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         font-weight: bold;
           padding: 4px;
           text-align: left;
-          background: #ccccccff;
+          // background: #ccccccff;
               border-bottom: 2px dashed #000;
         }
         .product-table td {
@@ -1808,8 +1808,8 @@ export const printDCToInvoiceStyles = (printStyle) => {
           padding: 4px;
           text-align: left;
            border: 2px solid #fff;
-          background: rgb(55, 59, 68);
+          // background: rgb(55, 59, 68);
-          color:rgb(255, 255, 255);
+          // color:rgb(255, 255, 255);
         }
           .product-table tr:nth-child(even) {
             background-color: #E8E8E8;
@@ -1899,7 +1899,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
             font-size: 20px;
             padding: 10px 0;
             font-weight: 600;
-            background: rgb(253, 199, 22);
+            // background: rgb(253, 199, 22);
             width: 100%;
                     display : flex;
                     justify-content :center;
@@ -1988,11 +1988,11 @@ export const printDCToInvoiceStyles = (printStyle) => {
           padding: 4px;
           text-align: left;
            border: 2px solid #fff;
-          background: rgb(55, 59, 68);
+          // background: rgb(55, 59, 68);
-          color:rgb(255, 255, 255);
+          // color:rgb(255, 255, 255);
         }
           .product-table tr:nth-child(even) {
-            background-color: #E8E8E8;
+            // background-color: #E8E8E8;
             }
         .product-table td {
           padding: 4px;
@@ -2018,7 +2018,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
         .footer-notes {
         font-size: 17px;
           text-align: left;
-          color: #5e5e5e;
+          // color: #5e5e5e;
           font-weight: bold;
         }
         .greeting-section {
@@ -2079,7 +2079,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
             font-size: 20px;
             padding: 10px 0;
             font-weight: 600;
-            background: rgb(253, 199, 22);
+            // background: rgb(253, 199, 22);
             width: 100%;
                     display : flex;
                     justify-content :center;