karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement dynamic header and table color functionality

This commit is contained in:
Srinath 2026-03-05 12:12:12 +05:30
parent 14ace51dc7
commit 658b2b345f
1 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice12.jsx
View File

@ -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 }) => (
<div className="header-section">
const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<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 }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div>
<div className="text-left">Subtotal</div>