Merge pull request 'Purchase Return Color Printer' (#235) from OptimUpdate into main
Reviewed-on: Pozomind/pozo-retail-app#235
This commit is contained in:
commit
87d9d228be
|
|
@ -1,3 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
|
||||
const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
||||
const {
|
||||
InvoiceNo,
|
||||
|
|
@ -50,7 +63,8 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
0
|
||||
);
|
||||
const totalAmountBeforeTax = ProductDetails?.reduce(
|
||||
(sum, item) => sum + Math.floor((Number(item?.NetAmount-item?.TaxAmount))|| 0),
|
||||
(sum, item) =>
|
||||
sum + Math.floor(Number(item?.NetAmount - item?.TaxAmount) || 0),
|
||||
0
|
||||
);
|
||||
const totalAmountAfterTax = ProductDetails?.reduce(
|
||||
|
|
@ -117,6 +131,59 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
);
|
||||
return num;
|
||||
}
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>{`
|
||||
|
|
@ -279,7 +346,7 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
`}</style>
|
||||
<div id="A4Standard-purchaseReturn">
|
||||
<div className="invoice-a4">
|
||||
<div className="header">
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
<div className="company-name">{branch.CompName}</div>
|
||||
<div>
|
||||
{' '}
|
||||
|
|
@ -313,27 +380,32 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
</div>
|
||||
<table className="items-table">
|
||||
<thead>
|
||||
{/*
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
{ label: 'Purchased Qty', key: 'Qty', width: '10%' },
|
||||
{ label: 'Returned Qty', key: 'ReturnedQty', width: '10%' },
|
||||
{ label: 'Rate', key: 'ProductRate', width: '10%' },
|
||||
{ label: 'Tax', key: 'TaxAmount', width: '10%' },
|
||||
{ label: 'Total', key: 'TotalAmount', width: '15%' }, */}
|
||||
<tr>
|
||||
<th>S.No</th>
|
||||
<th>Product</th>
|
||||
<th>Purchased Qty</th>
|
||||
<th>Returned Qty</th>
|
||||
<th>Rate</th>
|
||||
<th>Tax</th>
|
||||
<th>Total</th>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
<th style={{ ...tableHeaderStyle }}>S.No</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Product</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Purchased Qty</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Returned Qty</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Rate</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Tax</th>
|
||||
<th style={{ ...tableHeaderStyle }}>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ProductDetails?.map((e, index) => (
|
||||
<tr key={index}>
|
||||
<tr
|
||||
key={index}
|
||||
style={{
|
||||
...(index % 2 !== 1 && rowtypeStyle === 'even'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === 'odd'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: {}),
|
||||
}}
|
||||
>
|
||||
<td>{index + 1}</td>
|
||||
<td>{e?.ProdName}</td>
|
||||
<td>{e?.PurQty}</td>
|
||||
|
|
@ -343,11 +415,6 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
<td>{e?.NetAmount}</td>
|
||||
</tr>
|
||||
))}
|
||||
{/* <tr><td>1</td><td>ITEM 1</td><td>01</td><td>2</td><td>100</td><td>88</td><td>0</td></tr>
|
||||
<tr><td>2</td><td>ITEM 2</td><td>02</td><td>1</td><td>350</td><td>300</td><td>0</td><td>300</td></tr>
|
||||
<tr><td>3</td><td>ITEM 3</td><td>03</td><td>1</td><td>250</td><td>200</td><td>0</td><td>200</td></tr>
|
||||
<tr><td>4</td><td>ITEM 4</td><td>04</td><td>1</td><td>50</td><td>30</td><td>0</td><td>30</td></tr>
|
||||
<tr><td>5</td><td>ITEM 5</td><td>05</td><td>1</td><td>50</td><td>30</td><td>0</td><td>30</td></tr> */}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="item-summary">
|
||||
|
|
@ -412,7 +479,7 @@ const A4Standard = ({ invoiceData, preference, printDatas, FieldDetails }) => {
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="footer-section">
|
||||
<div className="footer-section" style={{ ...footerColorStyle }}>
|
||||
<div className="footer-left">
|
||||
{bank?.AccountNo && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
|
||||
const PrintStyleDCToInvoice1 = ({
|
||||
invoiceData,
|
||||
|
|
@ -49,6 +60,58 @@ const PrintStyleDCToInvoice1 = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -60,7 +123,10 @@ const PrintStyleDCToInvoice1 = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -261,6 +327,7 @@ const PrintStyleDCToInvoice1 = ({
|
|||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
|
|
@ -276,7 +343,12 @@ const PrintStyleDCToInvoice1 = ({
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -329,6 +401,7 @@ const PrintStyleDCToInvoice1 = ({
|
|||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -342,7 +415,12 @@ const PrintStyleDCToInvoice1 = ({
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -362,8 +440,8 @@ export default PrintStyleDCToInvoice1;
|
|||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch, CustName, SupplierNo }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
<div className="headerText">
|
||||
<div
|
||||
className="companyName"
|
||||
|
|
@ -425,7 +503,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
|
||||
|
|
@ -440,7 +523,11 @@ const ProductTable = ({ data }) => {
|
|||
<table className="productTable">
|
||||
<thead style={{ backgroundColor: '#f2f2f2' }}>
|
||||
<tr
|
||||
style={{ background: 'rgb(55, 59, 68)', color: 'rgb(255, 255, 255)' }}
|
||||
style={{
|
||||
background: 'rgb(55, 59, 68)',
|
||||
color: 'rgb(255, 255, 255)',
|
||||
...tableHeaderStyle,
|
||||
}}
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
|
|
@ -461,7 +548,18 @@ const ProductTable = ({ data }) => {
|
|||
{data.map((prod, index) => (
|
||||
<tr
|
||||
key={prod.UniqueId}
|
||||
style={{ backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8' }} // even rows get background
|
||||
style={{
|
||||
backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8',
|
||||
...(index % 2 !== 1 && rowtypeStyle === 'even'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === 'odd'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: {}),
|
||||
}} // even rows get background
|
||||
>
|
||||
<td>{index + 1}</td>
|
||||
<td>{prod.ProdName}</td>
|
||||
|
|
@ -486,7 +584,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
width: '100%',
|
||||
flexDirection: 'row-reverse',
|
||||
backgroundColor: '#999999',
|
||||
marginTop:"10px"
|
||||
marginTop: '10px',
|
||||
}}
|
||||
>
|
||||
<div className="summary">
|
||||
|
|
@ -527,7 +625,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
padding: '10px',
|
||||
backgroundColor: 'rgb(253, 199, 22)',
|
||||
textAlign: 'center',
|
||||
borderBottom: "1px dashed black"
|
||||
borderBottom: '1px dashed black',
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
|
||||
const PrintStyleDCToInvoice1 = ({
|
||||
invoiceData,
|
||||
|
|
@ -49,6 +60,58 @@ const PrintStyleDCToInvoice1 = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -60,7 +123,10 @@ const PrintStyleDCToInvoice1 = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -261,6 +327,7 @@ const PrintStyleDCToInvoice1 = ({
|
|||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
|
|
@ -276,7 +343,12 @@ const PrintStyleDCToInvoice1 = ({
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -329,6 +401,7 @@ const PrintStyleDCToInvoice1 = ({
|
|||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -342,7 +415,12 @@ const PrintStyleDCToInvoice1 = ({
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -362,8 +440,8 @@ export default PrintStyleDCToInvoice1;
|
|||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch, CustName, SupplierNo }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
<div className="headerText">
|
||||
<div
|
||||
className="companyName"
|
||||
|
|
@ -425,7 +503,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
tableBodyStyle,
|
||||
rowtypeStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
|
||||
|
|
@ -440,7 +523,11 @@ const ProductTable = ({ data }) => {
|
|||
<table className="productTable">
|
||||
<thead style={{ backgroundColor: '#f2f2f2' }}>
|
||||
<tr
|
||||
style={{ background: 'rgb(55, 59, 68)', color: 'rgb(255, 255, 255)' }}
|
||||
style={{
|
||||
background: 'rgb(55, 59, 68)',
|
||||
color: 'rgb(255, 255, 255)',
|
||||
...tableHeaderStyle,
|
||||
}}
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
|
|
@ -461,7 +548,18 @@ const ProductTable = ({ data }) => {
|
|||
{data.map((prod, index) => (
|
||||
<tr
|
||||
key={prod.UniqueId}
|
||||
style={{ backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8' }} // even rows get background
|
||||
style={{
|
||||
backgroundColor: index % 2 === 0 ? 'white' : '#e8e8e8',
|
||||
...(index % 2 !== 1 && rowtypeStyle === 'even'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: index % 2 === 1 && rowtypeStyle === 'odd'
|
||||
? {
|
||||
...tableBodyStyle,
|
||||
}
|
||||
: {}),
|
||||
}} // even rows get background
|
||||
>
|
||||
<td>{index + 1}</td>
|
||||
<td>{prod.ProdName}</td>
|
||||
|
|
@ -486,7 +584,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
width: '100%',
|
||||
flexDirection: 'row-reverse',
|
||||
backgroundColor: '#999999',
|
||||
marginTop:"10px"
|
||||
marginTop: '10px',
|
||||
}}
|
||||
>
|
||||
<div className="summary">
|
||||
|
|
@ -527,7 +625,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
padding: '10px',
|
||||
backgroundColor: 'rgb(253, 199, 22)',
|
||||
textAlign: 'center',
|
||||
borderBottom: "1px dashed black"
|
||||
borderBottom: '1px dashed black',
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,8 +1,24 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDetails}) => {
|
||||
const PrintStylePurchaseReturn = ({
|
||||
invoiceData,
|
||||
preference,
|
||||
printDatas,
|
||||
FieldDetails,
|
||||
}) => {
|
||||
const {
|
||||
InvoiceNo,
|
||||
SupplierNo,
|
||||
|
|
@ -19,7 +35,9 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
} = invoiceData;
|
||||
|
||||
// const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const signature = FieldDetails?.FieldDetails?.some((e) => e?.ConfigName == "signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
|
||||
// const termsAndConditions = fieldDetails?.['terms&conditions'];
|
||||
|
||||
|
|
@ -29,8 +47,10 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
|
|
@ -45,6 +65,60 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
<hr className="dotted-line" />
|
||||
|
|
@ -60,7 +134,7 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div className="termsAndSignature" style={{ ...footerColorStyle }}>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -88,8 +162,10 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
|
||||
return (
|
||||
<>
|
||||
<div id="PrintStyle1-purchaseReturn"style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div
|
||||
id="PrintStyle1-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
|
|
@ -116,7 +192,11 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -131,7 +211,12 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
{!formatTheme && isFinalFooterPage && renderFooter()}
|
||||
</div>
|
||||
{formatTheme && isFinalFooterPage && (
|
||||
|
|
@ -142,7 +227,7 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -154,7 +239,12 @@ const PrintStylePurchaseReturn = ({ invoiceData, preference, printDatas,FieldDet
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
{renderFooter()}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -167,8 +257,8 @@ export default PrintStylePurchaseReturn;
|
|||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -178,7 +268,7 @@ const Header = ({ logo, branch }) => (
|
|||
<div>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div className='PurchaseReturnPrintName'>
|
||||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -202,8 +292,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -218,16 +307,21 @@ const InvoiceMeta = ({
|
|||
<strong>Supplier Name:</strong> {CustName}
|
||||
</div>
|
||||
)}
|
||||
{SupplierNo &&
|
||||
{SupplierNo && (
|
||||
<div>
|
||||
<strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -241,7 +335,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns?.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -251,7 +345,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle10PurchaseReturn = ({
|
||||
|
|
@ -50,6 +61,58 @@ const PrintStyle10PurchaseReturn = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -66,7 +129,7 @@ const PrintStyle10PurchaseReturn = ({
|
|||
}}
|
||||
/>
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div className="termsAndSignature" style={{ ...footerColorStyle }}>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -257,7 +320,11 @@ padding-top: 10px;
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
<hr
|
||||
style={{
|
||||
border: '1.5px solid #8f8f8f',
|
||||
|
|
@ -277,7 +344,12 @@ padding-top: 10px;
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
<hr
|
||||
style={{
|
||||
border: '1.5px solid #8f8f8f',
|
||||
|
|
@ -319,7 +391,7 @@ padding-top: 10px;
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
<hr
|
||||
style={{
|
||||
border: '1.5px solid #8f8f8f',
|
||||
|
|
@ -336,7 +408,12 @@ padding-top: 10px;
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
<hr
|
||||
style={{
|
||||
border: '1.5px solid #8f8f8f',
|
||||
|
|
@ -373,21 +450,19 @@ padding-top: 10px;
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle10PurchaseReturn ;
|
||||
export default PrintStyle10PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
<div>
|
||||
{branch.Address1}-{branch.City}-{branch?.Zip}
|
||||
</div>
|
||||
{branch.BrMobile && <div>
|
||||
Mobile: +91 {branch.BrMobile}
|
||||
</div>}
|
||||
{branch.BrMobile && <div>Mobile: +91 {branch.BrMobile}</div>}
|
||||
|
||||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
|
|
@ -413,8 +488,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -426,10 +500,15 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '30%' ,},
|
||||
{ label: 'Product', key: 'ProdName', width: '30%' },
|
||||
{ label: 'Purchased Qty', key: 'Qty', width: '10%' },
|
||||
{ label: 'Returned Qty', key: 'ReturnedQty', width: '10%' },
|
||||
{ label: 'Rate', key: 'ProductRate', width: '10%' },
|
||||
|
|
@ -440,9 +519,9 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle, padding: '0 5px' }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width ,textWrap:"wrap"}}>
|
||||
<th key={col.key} style={{ width: col.width, textWrap: 'wrap' }}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
|
|
@ -450,7 +529,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle11PurchaseReturn = ({
|
||||
|
|
@ -65,6 +76,58 @@ const PrintStyle11PurchaseReturn = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 9);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -76,7 +139,10 @@ const PrintStyle11PurchaseReturn = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -215,8 +281,10 @@ const PrintStyle11PurchaseReturn = ({
|
|||
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle11-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<div
|
||||
id="PrintStyle11-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
|
|
@ -243,7 +311,11 @@ const PrintStyle11PurchaseReturn = ({
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -258,7 +330,12 @@ const PrintStyle11PurchaseReturn = ({
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -294,7 +371,7 @@ const PrintStyle11PurchaseReturn = ({
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -306,7 +383,12 @@ const PrintStyle11PurchaseReturn = ({
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -335,33 +417,33 @@ const PrintStyle11PurchaseReturn = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle11PurchaseReturn ;
|
||||
export default PrintStyle11PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header" style={{fontWeight:"600"}}>
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ fontWeight: '600', ...headerStyle }}>
|
||||
{/* {logo && <img src={logo} alt="logo" className="logo" />} */}
|
||||
<div className="headerText">
|
||||
|
||||
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
<hr style=
|
||||
{{
|
||||
<hr
|
||||
style={{
|
||||
border: '0.5px solid #8f8f8f',
|
||||
height: 0,
|
||||
}} />
|
||||
<div style={{paddingTop:"10px"}}>
|
||||
}}
|
||||
/>
|
||||
<div style={{ paddingTop: '10px' }}>
|
||||
{branch.Address1}-{branch.City}-{branch?.Zip}
|
||||
</div>
|
||||
<div style={{paddingBottom:"10px"}}>
|
||||
<div style={{ paddingBottom: '10px' }}>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
<hr style=
|
||||
{{
|
||||
<hr
|
||||
style={{
|
||||
border: '0.5px solid #8f8f8f',
|
||||
height: 0,
|
||||
}} />
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
paddingTop: '5px',
|
||||
|
|
@ -392,8 +474,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -405,7 +486,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -419,7 +505,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -429,7 +515,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle12PurchaseReturn = ({
|
||||
|
|
@ -50,6 +61,58 @@ const PrintStyle12PurchaseReturn = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -61,7 +124,7 @@ const PrintStyle12PurchaseReturn = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div className="termsAndSignature" style={{ ...footerColorStyle }}>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -261,6 +324,7 @@ const PrintStyle12PurchaseReturn = ({
|
|||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
|
|
@ -276,7 +340,12 @@ const PrintStyle12PurchaseReturn = ({
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -312,12 +381,12 @@ const PrintStyle12PurchaseReturn = ({
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
{/* <Header logo={logo} branch={branch} /> */}
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
CustName={CustName}
|
||||
SupplierNo={SupplierNo}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -331,7 +400,12 @@ const PrintStyle12PurchaseReturn = ({
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -339,7 +413,6 @@ const PrintStyle12PurchaseReturn = ({
|
|||
GrandTotal={GrandTotal}
|
||||
/>
|
||||
|
||||
|
||||
{renderFooter()}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -348,12 +421,12 @@ const PrintStyle12PurchaseReturn = ({
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle12PurchaseReturn ;
|
||||
export default PrintStyle12PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch, CustName, SupplierNo }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, CustName, SupplierNo, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
<div>
|
||||
|
|
@ -375,7 +448,6 @@ const Header = ({ logo, branch, CustName, SupplierNo }) => (
|
|||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
</div>
|
||||
|
|
@ -398,8 +470,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -411,7 +482,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
|
||||
|
|
@ -425,7 +501,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead style={{ backgroundColor: '#f2f2f2' }}>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
|
|
@ -438,7 +514,20 @@ 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> */}
|
||||
|
|
@ -458,9 +547,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
<div style={{ display: 'flex', width: '100%', flexDirection: 'row-reverse' }}>
|
||||
<div className="summary">
|
||||
<div className="SummaryColumn">
|
||||
<div className="Subtotal">
|
||||
Subtotal
|
||||
</div>
|
||||
<div className="Subtotal">Subtotal</div>
|
||||
<div>:</div>
|
||||
|
||||
<div style={{ width: '25%', textAlign: 'right' }}>
|
||||
|
|
@ -468,9 +555,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
</div>
|
||||
</div>
|
||||
<div className="SummaryColumn">
|
||||
<div className="TaxAmt">
|
||||
Tax Amount
|
||||
</div>
|
||||
<div className="TaxAmt">Tax Amount</div>
|
||||
<div>:</div>
|
||||
<div style={{ width: '25%', textAlign: 'right' }}>
|
||||
₹ {TaxAmount.toFixed(2)}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle2PurchaseReturn = ({
|
||||
|
|
@ -27,30 +38,30 @@ const PrintStyle2PurchaseReturn = ({
|
|||
// const signature = fieldDetails?.['signature'];
|
||||
// const termsAndConditions = fieldDetails?.['terms&conditions'];
|
||||
// const termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
// let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
// let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
// let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
// let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
|
||||
// const signatureImg = printDatas?.Signature;
|
||||
// const notesText = printDatas?.Notes;
|
||||
// const formatTheme = printDatas?.PrintType !== 'S';
|
||||
// const pageSize = printDatas?.PageSize;
|
||||
// const branch = AddressDetails?.[0];
|
||||
// const logo = branch?.CompLogo;
|
||||
// const signatureImg = printDatas?.Signature;
|
||||
// const notesText = printDatas?.Notes;
|
||||
// const formatTheme = printDatas?.PrintType !== 'S';
|
||||
// const pageSize = printDatas?.PageSize;
|
||||
// const branch = AddressDetails?.[0];
|
||||
// const logo = branch?.CompLogo;
|
||||
|
||||
// const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
|
||||
|
||||
|
||||
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
|
|
@ -65,6 +76,60 @@ const PrintStyle2PurchaseReturn = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -76,7 +141,10 @@ const PrintStyle2PurchaseReturn = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '6px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -207,8 +275,10 @@ const PrintStyle2PurchaseReturn = ({
|
|||
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle2-purchaseReturn" style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div
|
||||
id="PrintStyle2-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
|
|
@ -235,7 +305,11 @@ const PrintStyle2PurchaseReturn = ({
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -250,7 +324,12 @@ const PrintStyle2PurchaseReturn = ({
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -286,7 +365,7 @@ const PrintStyle2PurchaseReturn = ({
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -298,7 +377,12 @@ const PrintStyle2PurchaseReturn = ({
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -331,8 +415,8 @@ export default PrintStyle2PurchaseReturn;
|
|||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -342,11 +426,13 @@ const Header = ({ logo, branch }) => (
|
|||
<div>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div style={{
|
||||
paddingTop: "5px",
|
||||
fontSize: "18px",
|
||||
fontWeight: 800
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
paddingTop: '5px',
|
||||
fontSize: '18px',
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -370,8 +456,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -383,7 +468,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -397,7 +487,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -407,7 +497,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle3PurchaseReturn = ({
|
||||
|
|
@ -28,17 +39,19 @@ const PrintStyle3PurchaseReturn = ({
|
|||
// const termsAndConditions = fieldDetails?.['terms&conditions'];
|
||||
// const termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
|
|
@ -53,6 +66,60 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -64,7 +131,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -189,8 +259,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
}
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle3-purchaseReturn" style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div
|
||||
id="PrintStyle3-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
|
|
@ -217,7 +289,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -232,7 +308,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -266,7 +347,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -278,7 +359,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -309,12 +395,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle3PurchaseReturn ;
|
||||
export default PrintStyle3PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -324,7 +410,7 @@ const Header = ({ logo, branch }) => (
|
|||
<div>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div className='PurchaseReturnPrintName'>
|
||||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -348,8 +434,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -361,7 +446,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -375,7 +465,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -385,7 +475,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle4PurchaseReturn = ({
|
||||
|
|
@ -24,15 +35,19 @@ const PrintStyle4PurchaseReturn = ({
|
|||
} = invoiceData;
|
||||
console.log(printDatas, 'printDatas');
|
||||
const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
);
|
||||
|
|
@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -189,6 +259,7 @@ padding-top: 10px;
|
|||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div
|
||||
id="PrintStyle4-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
|
|
@ -219,7 +290,11 @@ padding-top: 10px;
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -234,7 +309,12 @@ padding-top: 10px;
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -268,7 +348,7 @@ padding-top: 10px;
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -280,7 +360,12 @@ padding-top: 10px;
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -311,12 +396,12 @@ padding-top: 10px;
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle4PurchaseReturn ;
|
||||
export default PrintStyle4PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -326,7 +411,7 @@ const Header = ({ logo, branch }) => (
|
|||
<div>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div className='PurchaseReturnPrintName'>
|
||||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -350,8 +435,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -363,7 +447,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -377,7 +466,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead style={{ backgroundColor: '#f2f2f2' }}>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -387,7 +476,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle5PurchaseReturn = ({
|
||||
|
|
@ -25,15 +36,19 @@ const PrintStyle5PurchaseReturn = ({
|
|||
|
||||
console.log(printDatas, 'printDatas');
|
||||
const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
);
|
||||
|
|
@ -47,6 +62,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -58,7 +125,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -215,13 +285,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
}
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle5-purchaseReturn" style={{ fontFamily: "'Courier New', Courier, monospace" }}>
|
||||
<div
|
||||
id="PrintStyle5-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
key={chunkIndex}
|
||||
|
|
@ -243,7 +315,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -258,7 +334,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -292,7 +373,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -304,7 +385,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -320,11 +406,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<strong>Supplier Name:</strong> {CustName}
|
||||
</div>
|
||||
)}
|
||||
{SupplierNo &&
|
||||
{SupplierNo && (
|
||||
<div>
|
||||
<strong>Supplier Mobile No:</strong> {SupplierNo || '-'}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{renderFooter()}
|
||||
|
|
@ -335,12 +421,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle5PurchaseReturn ;
|
||||
export default PrintStyle5PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -374,8 +460,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -387,7 +472,12 @@ const InvoiceMeta = ({
|
|||
</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%' },
|
||||
|
|
@ -400,8 +490,8 @@ const ProductTable = ({ data }) => {
|
|||
|
||||
return (
|
||||
<table className="productTable">
|
||||
<thead >
|
||||
<tr>
|
||||
<thead>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -411,7 +501,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle6PurchaseReturn = ({
|
||||
|
|
@ -23,15 +34,19 @@ const PrintStyle6PurchaseReturn = ({
|
|||
VehicleNo,
|
||||
} = invoiceData;
|
||||
console.log(printDatas, 'printDatas');
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
|
|
@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -205,14 +275,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
}
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle6-purchaseReturn" style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div
|
||||
id="PrintStyle6-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
key={chunkIndex}
|
||||
|
|
@ -234,7 +305,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -249,7 +324,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -283,7 +363,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -295,7 +375,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -326,21 +411,19 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle6PurchaseReturn ;
|
||||
export default PrintStyle6PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
<div>
|
||||
{branch.Address1}-{branch.City}-{branch?.Zip}
|
||||
</div>
|
||||
<div>
|
||||
Mobile: +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div>Mobile: +91 {branch.BrMobile}</div>
|
||||
<div>
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
|
|
@ -365,8 +448,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -378,7 +460,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -392,7 +479,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -402,7 +489,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle7PurchaseReturn = ({
|
||||
|
|
@ -23,15 +34,19 @@ const PrintStyle7PurchaseReturn = ({
|
|||
VehicleNo,
|
||||
} = invoiceData;
|
||||
console.log(printDatas, 'printDatas');
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
|
|
@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -205,14 +275,15 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
|
||||
`}
|
||||
</style>
|
||||
<div id="PrintStyle7-purchaseReturn" style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
<div
|
||||
id="PrintStyle7-purchaseReturn"
|
||||
style={{ fontFamily: "'Courier New', Courier, monospace" }}
|
||||
>
|
||||
{formatTheme ? (
|
||||
paginatedChunks.map((dataChunk, chunkIndex) => {
|
||||
const isLastPage = chunkIndex === paginatedChunks.length - 1;
|
||||
const isFinalFooterPage = isLastPage && !shouldFooterBeOnNewPage;
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
key={chunkIndex}
|
||||
|
|
@ -234,7 +305,11 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -249,7 +324,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -283,7 +363,7 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
<hr className="dotted-line" />
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -295,7 +375,12 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -326,21 +411,19 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle7PurchaseReturn ;
|
||||
export default PrintStyle7PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
<div>
|
||||
{branch.Address1}-{branch.City}-{branch?.Zip}
|
||||
</div>
|
||||
<div>
|
||||
Mobile: +91 {branch.BrMobile}
|
||||
</div>
|
||||
<div>Mobile: +91 {branch.BrMobile}</div>
|
||||
<div>
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
|
|
@ -365,8 +448,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -378,7 +460,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '20%' },
|
||||
|
|
@ -392,7 +479,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle, rowtypeStyle, tableBodyStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -402,7 +489,20 @@ 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> */}
|
||||
|
|
@ -437,17 +537,20 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="SummaryColumn" style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: "0px 110px",
|
||||
fontSize:"15px"
|
||||
}}>
|
||||
<div
|
||||
className="SummaryColumn"
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
padding: '0px 110px',
|
||||
fontSize: '15px',
|
||||
}}
|
||||
>
|
||||
<div className="Grandtotal">
|
||||
<strong>Grand Total</strong>
|
||||
</div>
|
||||
<div>:</div>
|
||||
<div style={{ width: '15%', textAlign: 'right', fontWeight: "900"}}>
|
||||
<div style={{ width: '15%', textAlign: 'right', fontWeight: '900' }}>
|
||||
{' '}
|
||||
₹ {GrandTotal.toFixed(2)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle8PurchaseReturn = ({
|
||||
|
|
@ -50,6 +61,58 @@ const PrintStyle8PurchaseReturn = ({
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -61,7 +124,10 @@ const PrintStyle8PurchaseReturn = ({
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -251,7 +317,11 @@ padding-top: 10px;
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -266,7 +336,12 @@ padding-top: 10px;
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -302,7 +377,7 @@ padding-top: 10px;
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -314,7 +389,12 @@ padding-top: 10px;
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -345,12 +425,12 @@ padding-top: 10px;
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle8PurchaseReturn ;
|
||||
export default PrintStyle8PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{logo && <img src={logo} alt="logo" className="logo" />}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -382,8 +462,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -395,7 +474,12 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
const ProductTable = ({ data }) => {
|
||||
const ProductTable = ({
|
||||
data,
|
||||
tableHeaderStyle,
|
||||
rowtypeStyle,
|
||||
tableBodyStyle,
|
||||
}) => {
|
||||
const columns = [
|
||||
{ label: 'S.No', key: 'sno', width: '5%' },
|
||||
{ label: 'Product', key: 'ProdName', width: '30%', align: 'left' },
|
||||
|
|
@ -409,7 +493,7 @@ const ProductTable = ({ data }) => {
|
|||
return (
|
||||
<table className="productTable">
|
||||
<thead style={{ backgroundColor: '#f2f2f2' }}>
|
||||
<tr>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
|
|
@ -422,7 +506,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import { useSelector } from 'react-redux';
|
||||
import { GloabalFieldDetails } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import {
|
||||
GloabalFieldDetails,
|
||||
GlobalRowType,
|
||||
GlobalSelectedFooterColor,
|
||||
GlobalSelectedFooterFontColor,
|
||||
GlobalSelectedPrintHeaderColor,
|
||||
GlobalSelectedPrintHeaderFontColor,
|
||||
GlobalSelectedTableBodyColor,
|
||||
GlobalSelectedTableBodyFontColor,
|
||||
GlobalSelectedTableHeaderColor,
|
||||
GlobalSelectedTableHeaderFontColor,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { dateFormatChange1 } from '../../../../Services/Others';
|
||||
|
||||
const PrintStyle9PurchaseReturn = ({
|
||||
|
|
@ -24,15 +35,19 @@ const PrintStyle9PurchaseReturn = ({
|
|||
} = invoiceData;
|
||||
console.log(printDatas, 'printDatas');
|
||||
const fieldDetails = useSelector(GloabalFieldDetails);
|
||||
const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signature");
|
||||
const signature = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'signature'
|
||||
);
|
||||
const signatureImg = FieldDetails?.Signature;
|
||||
const notesText = FieldDetails?.Notes;
|
||||
const formatTheme = FieldDetails?.PrintType == 'S';
|
||||
const pageSize = FieldDetails?.PageSize;
|
||||
const branch = AddressDetails?.[0];
|
||||
const logo = branch?.CompLogo;
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="terms&conditions")
|
||||
let termsAndConditionsData=FieldDetails?.TermsandConditions
|
||||
let termsAndConditions = FieldDetails?.FieldDetails?.some(
|
||||
(e) => e?.ConfigName == 'terms&conditions'
|
||||
);
|
||||
let termsAndConditionsData = FieldDetails?.TermsandConditions;
|
||||
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
|
||||
(i) => i.SettingIdName === 'PrintGreetings'
|
||||
);
|
||||
|
|
@ -46,6 +61,58 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
|
||||
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === 'A5' ? 5 : 10);
|
||||
|
||||
//
|
||||
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
|
||||
);
|
||||
|
||||
//
|
||||
let printColors = FieldDetails?.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 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 renderFooter = () => (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -57,7 +124,10 @@ const signature = FieldDetails?.FieldDetails?.some((e)=>e?.ConfigName=="signatur
|
|||
<>
|
||||
<hr className="dotted-line" />
|
||||
{/* {notesText && <p className="notesText">{notesText}</p>} */}
|
||||
<div className="termsAndSignature">
|
||||
<div
|
||||
className="termsAndSignature"
|
||||
style={{ ...footerColorStyle, padding: '0 5px' }}
|
||||
>
|
||||
{termsAndConditions && termsAndConditionsData?.length > 0 && (
|
||||
<div className="termsAndConditions">
|
||||
<p className="termsAndConditionsHead">Terms & Conditions</p>
|
||||
|
|
@ -249,7 +319,11 @@ padding-top: 10px;
|
|||
<div>
|
||||
{formatTheme || chunkIndex === 0 ? (
|
||||
<>
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header
|
||||
logo={logo}
|
||||
branch={branch}
|
||||
headerStyle={headerStyle}
|
||||
/>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -264,7 +338,12 @@ padding-top: 10px;
|
|||
</>
|
||||
) : null}
|
||||
|
||||
<ProductTable data={dataChunk} />
|
||||
<ProductTable
|
||||
data={dataChunk}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
{isLastPage && (
|
||||
<>
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
|
|
@ -281,10 +360,12 @@ padding-top: 10px;
|
|||
<strong>Supplier Name:</strong> {CustName}
|
||||
</div>
|
||||
)}
|
||||
{SupplierNo&&<div>
|
||||
{SupplierNo && (
|
||||
<div>
|
||||
<strong>Supplier Mobile No:</strong>{' '}
|
||||
{SupplierNo || '-'}
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -298,7 +379,7 @@ padding-top: 10px;
|
|||
})
|
||||
) : (
|
||||
<div className="container">
|
||||
<Header logo={logo} branch={branch} />
|
||||
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
|
||||
{/* <hr className="dotted-line" /> */}
|
||||
<InvoiceMeta
|
||||
InvoiceNo={InvoiceNo}
|
||||
|
|
@ -310,7 +391,12 @@ padding-top: 10px;
|
|||
SupplierNo={SupplierNo}
|
||||
/>
|
||||
<hr className="dotted-line" />
|
||||
<ProductTable data={ProductDetails} />
|
||||
<ProductTable
|
||||
data={ProductDetails}
|
||||
tableHeaderStyle={tableHeaderStyle}
|
||||
rowtypeStyle={rowtypeStyle}
|
||||
tableBodyStyle={tableBodyStyle}
|
||||
/>
|
||||
|
||||
<Summary
|
||||
TotalAmount={TotalAmount}
|
||||
|
|
@ -341,12 +427,12 @@ padding-top: 10px;
|
|||
);
|
||||
};
|
||||
|
||||
export default PrintStyle9PurchaseReturn ;
|
||||
export default PrintStyle9PurchaseReturn;
|
||||
|
||||
// --- Subcomponents ---
|
||||
|
||||
const Header = ({ logo, branch }) => (
|
||||
<div className="header">
|
||||
const Header = ({ logo, branch, headerStyle }) => (
|
||||
<div className="header" style={{ ...headerStyle }}>
|
||||
{/* {logo && <img src={logo} alt="logo" className="logo" />} */}
|
||||
<div className="headerText">
|
||||
<div className="companyName">{branch.CompName}</div>
|
||||
|
|
@ -356,9 +442,8 @@ const Header = ({ logo, branch }) => (
|
|||
<div>
|
||||
<strong>Mobile:</strong> +91 {branch.BrMobile}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='PurchaseReturnPrintName'>
|
||||
<div className="PurchaseReturnPrintName">
|
||||
<strong>Purchase Return</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -381,8 +466,7 @@ const InvoiceMeta = ({
|
|||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>Date:</strong>{' '}
|
||||
{dateFormatChange1(InvoiceDate)}
|
||||
<strong>Date:</strong> {dateFormatChange1(InvoiceDate)}
|
||||
</div>
|
||||
{VehicleNo && (
|
||||
<div>
|
||||
|
|
@ -394,7 +478,12 @@ const InvoiceMeta = ({
|
|||
</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%' },
|
||||
|
|
@ -407,8 +496,8 @@ const ProductTable = ({ data }) => {
|
|||
|
||||
return (
|
||||
<table className="productTable">
|
||||
<thead >
|
||||
<tr>
|
||||
<thead>
|
||||
<tr style={{ ...tableHeaderStyle }}>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} style={{ width: col.width }}>
|
||||
{col.label}
|
||||
|
|
@ -418,7 +507,20 @@ 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> */}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ import PrintStyle9 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9'
|
|||
import PrintStyle10 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10';
|
||||
import PrintStyle11 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11';
|
||||
import PrintStyle12 from './PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12';
|
||||
import { SelectedPrintTemplate } from '../../Features/ThemeChange/ThemeChange';
|
||||
import PrintA4Style11 from './PrintReturn/A4purchaseReturn/PrintA4Style11';
|
||||
import PrintA5Style11 from './PrintReturn/A4purchaseReturn/PrintStyleA5';
|
||||
import A4Standard from './PrintReturn/A4purchaseReturn/A4Standard';
|
||||
|
|
@ -63,8 +62,6 @@ const PaymentPdfReturn = ({
|
|||
const [BranchZip, setBranchZip] = useState();
|
||||
const CashierName = getSession('userName');
|
||||
const [BrDtl, setBrDtl] = useState();
|
||||
// const selectedStyle = useSelector(SelectedPrintTemplate);
|
||||
// const TotalCal= singleData2?.map((item) =>(item.Price))
|
||||
const productsData = table2Data?.productDetails || [];
|
||||
const offers = table2Data?.OrderOfferDetails || [];
|
||||
|
||||
|
|
@ -362,62 +359,6 @@ const PaymentPdfReturn = ({
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Token print */}
|
||||
{/* {Object.entries(
|
||||
singleData2?.reduce((acc, item, idx) => {
|
||||
if (item.TokenAvailable === 'Y') {
|
||||
if (!item.CounterName) {
|
||||
// For null or empty CounterName, print each item individually
|
||||
acc[`individual-${idx}`] = [item];
|
||||
} else {
|
||||
if (!acc[item.CounterName]) {
|
||||
acc[item.CounterName] = [];
|
||||
}
|
||||
acc[item.CounterName].push(item); // Group by CounterName
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {})
|
||||
).map(([counterName, items], index) => (
|
||||
<div style={{ display: 'none' }} key={index}>
|
||||
<div
|
||||
className="Reprint-body"
|
||||
id={`TakeawayToken${index}-${counterName}`}
|
||||
>
|
||||
<div className="Re-print-top">
|
||||
<p className="Re-print-title">{items[0]?.BrName}</p>
|
||||
<p className="Re-print-title">Token</p>
|
||||
</div>
|
||||
<div className="Re-print-top2">
|
||||
<p className="Re-print-bold">BillNo: {orderId}</p>
|
||||
<p className="Re-print-bold">{Date1}</p>
|
||||
</div>
|
||||
<table className="Re-print-Table">
|
||||
<thead className="Re-print-th">
|
||||
<tr>
|
||||
<th className="Re-print-td">S.No</th>
|
||||
<th className="Re-print-td">Item</th>
|
||||
<th className="Re-print-td">Qty</th>
|
||||
<th className="Re-print-td">Rate</th>
|
||||
<th className="Re-print-td">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item, idx) => (
|
||||
<tr className="Re-print-body-Tr" key={idx}>
|
||||
<td className="Re-print-td">{idx + 1}</td>
|
||||
<td className="Re-print-body-Product">{item.ProdName}</td>
|
||||
<td className="Re-print-body-Rate">{item.SalesQty}</td>
|
||||
<td className="Re-print-body-Rate">{item.Rate}</td>
|
||||
<td className="Re-print-body-Rate">{item.TotalAmt}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))} */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue