Implement dynamic header and table color functionality
This commit is contained in:
Srinath
parent
83fe92d412
commit
b63567aa91
|
|
@ -1,6 +1,19 @@
|
|||
|
||||
import { useSelector } from 'react-redux';
|
||||
import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GlobalPritdummyData,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedNetAmountColor,
|
||||
GlobalSelectedNetAmountFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
} from '../../../Features/ThemeChange/ThemeChange';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { extractLastNumberOrderId } from '../../../Services/Others';
|
||||
import moment from 'moment';
|
||||
|
|
@ -18,6 +31,17 @@ const PurPrintstyleInvoice = ({
|
|||
}) => {
|
||||
|
||||
const GlobaldummyData = useSelector(GlobalPritdummyData);
|
||||
const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
|
||||
const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
|
||||
const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
|
||||
const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
|
||||
const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
|
||||
const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
|
||||
const SelectedRowType = useSelector(GlobalRowType);
|
||||
const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
|
||||
const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
|
||||
const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
|
||||
const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
|
||||
let BillName = printDatas?.PrintHdrName
|
||||
// Function to convert number to words
|
||||
const numberToWords = (num) => {
|
||||
|
|
@ -67,7 +91,7 @@ const PurPrintstyleInvoice = ({
|
|||
|
||||
// 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: {
|
||||
|
|
@ -88,13 +112,16 @@ const PurPrintstyleInvoice = ({
|
|||
bankDetails: BankDetails?.[0] || null
|
||||
};
|
||||
|
||||
console.log(table2Data, "Date1Date1", invoiceData, )
|
||||
console.log(table2Data, "Date1Date1", invoiceData,)
|
||||
|
||||
let PageSize = printDatas?.PageSize
|
||||
|
||||
const TakeawayData = table2Data?.ProductDetails
|
||||
|
||||
const DineInData = table2Data?.ProductDetails
|
||||
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 cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
|
||||
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
|
||||
|
|
@ -135,7 +162,7 @@ const PurPrintstyleInvoice = ({
|
|||
dataSource = [];
|
||||
}
|
||||
|
||||
console.log("Final DataSource:", table2Data, );
|
||||
console.log("Final DataSource:", table2Data,);
|
||||
|
||||
const paginatedChunks = [];
|
||||
|
||||
|
|
@ -158,7 +185,51 @@ const PurPrintstyleInvoice = ({
|
|||
if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) {
|
||||
paginatedChunks.push([]); // Empty chunk for footer-only page
|
||||
}
|
||||
const headerStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedHeaderColor
|
||||
: headerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedHeaderFontColor
|
||||
: headerColor?.font,
|
||||
}
|
||||
const tableHeaderStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableHeaderColor
|
||||
: tableHeaderColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableHeaderFontColor
|
||||
: tableHeaderColor?.font,
|
||||
}
|
||||
const tableBodyStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableBodyColor
|
||||
: tableBodyColor?.background,
|
||||
color: GlobaldummyData
|
||||
? SelectedTableBodyFontColor
|
||||
: tableBodyColor?.font,
|
||||
}
|
||||
const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
|
||||
const footerColorStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedTableFooterColor
|
||||
: footerColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedTableFooterFontColor
|
||||
: footerColor?.font,
|
||||
}
|
||||
const netAmountStyle = {
|
||||
backgroundColor: GlobaldummyData
|
||||
? SelectedNetAmountColor
|
||||
: netAmtColor?.background,
|
||||
|
||||
color: GlobaldummyData
|
||||
? SelectedNetAmountFontColor
|
||||
: netAmtColor?.font,
|
||||
}
|
||||
|
||||
return (
|
||||
<div id={`TaxInvoice`} style={{
|
||||
|
|
@ -207,7 +278,7 @@ const PurPrintstyleInvoice = ({
|
|||
<>
|
||||
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
|
||||
<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 style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div>
|
||||
</div>
|
||||
|
|
@ -232,7 +303,7 @@ const PurPrintstyleInvoice = ({
|
|||
textAlign: 'left'
|
||||
}}>
|
||||
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', }}>
|
||||
<div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}>
|
||||
{invoiceData.companyName}
|
||||
</div>
|
||||
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
|
||||
|
|
@ -374,6 +445,7 @@ const PurPrintstyleInvoice = ({
|
|||
// 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>
|
||||
|
|
@ -392,6 +464,9 @@ const PurPrintstyleInvoice = ({
|
|||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")
|
||||
? tableBodyStyle
|
||||
: {}),
|
||||
|
||||
}}>
|
||||
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
|
||||
|
|
@ -430,7 +505,7 @@ const PurPrintstyleInvoice = ({
|
|||
</div>
|
||||
</div>
|
||||
{/* CGST */}
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -445,13 +520,13 @@ const PurPrintstyleInvoice = ({
|
|||
<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[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
// borderRight: '1px solid #000',
|
||||
|
|
@ -472,7 +547,7 @@ const PurPrintstyleInvoice = ({
|
|||
</div>
|
||||
</div>}
|
||||
{/* IGST */}
|
||||
{ OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
|
||||
{OrderDetailGST[0]?.TaxTypeName === "WithTax" && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
|
||||
|
|
@ -555,7 +630,7 @@ const PurPrintstyleInvoice = ({
|
|||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue