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 13:53:30 +05:30
parent e16cd5b9a7
commit 0103a3c77e
1 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/Pages/PurchaseOrder/PurchsasePrintStyle/PurchaseOrdInvoice.jsx
View File

@ -16,7 +16,7 @@ const PurchaseOrdInvoice = ({
BranchData, BranchData,
printDatas, printDatas,
BankDetails BankDetails
}) => { }) => {
const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaldummyData = useSelector(GlobalPritdummyData);
let BillName = printDatas?.PrintHdrName let BillName = printDatas?.PrintHdrName
// Function to convert number to words // Function to convert number to words
@ -52,9 +52,9 @@ const PurchaseOrdInvoice = ({
city: BranchData?.City || "", city: BranchData?.City || "",
state: BranchData?.State || "", state: BranchData?.State || "",
zip: BranchData?.Zip || "" zip: BranchData?.Zip || ""
}, },
companyGSTIN: BranchData?.CompGSTIN || BranchData?.BrGSTIN || "", companyGSTIN: BranchData?.CompGSTIN || BranchData?.BrGSTIN || "",
companyEmail: BranchData?.companyEmail || BranchData?.companyEmail ||"", companyEmail: BranchData?.companyEmail || BranchData?.companyEmail || "",
companyMobile: BranchData?.BrMobile || "", companyMobile: BranchData?.BrMobile || "",
companyMobile2: BranchData?.BrMobile2 || "", companyMobile2: BranchData?.BrMobile2 || "",
@ -67,7 +67,7 @@ const PurchaseOrdInvoice = ({
// Customer Details - mapped from A4Standard CustomerDetails array // Customer Details - mapped from A4Standard CustomerDetails array
customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustSuppName customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustSuppName
|| "", || "",
customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.BrMobile || "", customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.BrMobile || "",
customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "", customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
customerAddress: { customerAddress: {
@ -82,13 +82,13 @@ const PurchaseOrdInvoice = ({
// Totals - mapped from A4Standard // Totals - mapped from A4Standard
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt || 0), totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmt || 0),
taxAmount: Number(OrderDetailGST), taxAmount: Number(OrderDetailGST),
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0), grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0), totalBillAmount: Number(table2Data?.BillAmount || table2Data?.NetAmount || 0),
// Bank Details - mapped from A4Standard // Bank Details - mapped from A4Standard
bankDetails: BankDetails?.[0] || "" bankDetails: BankDetails?.[0] || ""
}; };
console.log(printDatas, "Date1Date1", invoiceData, ) console.log(printDatas, "Date1Date1", invoiceData,)
let PageSize = printDatas?.PageSize let PageSize = printDatas?.PageSize
@ -135,7 +135,7 @@ const PurchaseOrdInvoice = ({
dataSource = []; dataSource = [];
} }
console.log("Final DataSource:", table2Data, ); console.log("Final DataSource:", table2Data,);
const paginatedChunks = []; const paginatedChunks = [];
@ -159,6 +159,36 @@ const PurchaseOrdInvoice = ({
paginatedChunks.push([]); // Empty chunk for footer-only page paginatedChunks.push([]); // Empty chunk for footer-only page
} }
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,
}
return ( return (
<div id={`TaxInvoice`} style={{ <div id={`TaxInvoice`} style={{
@ -205,7 +235,7 @@ const PurchaseOrdInvoice = ({
{/* Header - Only on first page */} {/* Header - Only on first page */}
{isFirstPage && ( {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> <div></div>
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2> <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
<div> <div>
@ -232,7 +262,7 @@ const PurchaseOrdInvoice = ({
textAlign: 'left' textAlign: 'left'
}}> }}>
<div style={{ fontWeight: '700', fontSize: '15px', }}> <div style={{ fontWeight: '700', fontSize: '15px', color:headerColor?.font||''}}>
{invoiceData.companyName} {invoiceData.companyName}
</div> </div>
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div> <div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
@ -375,6 +405,7 @@ const PurchaseOrdInvoice = ({
// borderRight: '1px solid #000', // borderRight: '1px solid #000',
borderBottom: '1px solid #000', borderBottom: '1px solid #000',
borderTop: '1px solid #000', borderTop: '1px solid #000',
...tableHeaderStyle
}}> }}>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SI.No</div> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SI.No</div>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
@ -393,6 +424,11 @@ const PurchaseOrdInvoice = ({
display: 'grid', display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000', // 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> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
@ -431,7 +467,7 @@ const PurchaseOrdInvoice = ({
</div> </div>
</div> </div>
{/* CGST */} {/* CGST */}
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000', // borderRight: '1px solid #000',
@ -446,13 +482,13 @@ const PurchaseOrdInvoice = ({
<div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div>
{<div style={{ padding: '6px 6px', textAlign: 'right', }}> {<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 }) ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
: "0.00"} : "0.00"}
</div>} </div>}
</div>} </div>}
{/* SGST */} {/* SGST */}
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000', // borderRight: '1px solid #000',
@ -473,7 +509,7 @@ const PurchaseOrdInvoice = ({
</div> </div>
</div>} </div>}
{/* IGST */} {/* IGST */}
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && ( {OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
@ -556,7 +592,7 @@ const PurchaseOrdInvoice = ({
</div> </div>
<div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ padding: '8px 6px', textAlign: 'right', }}> <div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</div> </div>
</div> </div>
@ -803,6 +839,7 @@ const PurchaseOrdInvoice = ({
textAlign: 'center', textAlign: 'center',
fontSize: '10px', fontSize: '10px',
padding: '8px', padding: '8px',
...footerColorStyle
}}> }}>
<div>This is a Computer Generated Invoice</div> <div>This is a Computer Generated Invoice</div>
</div> </div>