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

Purchase Return Color Printer

This commit is contained in:
Your Name 2026-03-04 18:47:19 +05:30
parent 85cd9cd141
commit 3c84cd38eb
17 changed files with 3777 additions and 1218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/A4Standard.jsx
View File

@ -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 && (
<>

120
src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintA4Style11.jsx
View File

@ -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',
}}
>
{' '}

120
src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PrintStyleA5.jsx
View File

@ -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',
}}
>
{' '}

1851
src/Pages/PurchaseReturn/PrintReturn/A4purchaseReturn/PurchaseTaxInvoice.jsx
View File

File diff suppressed because it is too large Load Diff

149
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle1.jsx
View File

@ -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,7 +162,9 @@ 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) => {
@ -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> */}

128
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle10.jsx
View File

@ -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',
@ -377,17 +454,15 @@ 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> */}

149
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle11.jsx
View File

@ -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}
@ -339,29 +421,29 @@ 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> */}

125
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle12.jsx
View File

@ -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>
)}
@ -352,8 +425,8 @@ 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)}

155
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle2.jsx
View File

@ -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 = ({
@ -38,19 +49,19 @@ const PrintStyle2PurchaseReturn = ({
// 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,7 +275,9 @@ 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) => {
@ -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> */}

143
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle3.jsx
View File

@ -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,7 +259,9 @@ 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) => {
@ -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}
@ -313,8 +399,8 @@ 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> */}

136
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle4.jsx
View File

@ -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}
@ -315,8 +400,8 @@ 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> */}

143
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle5.jsx
View File

@ -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()}
@ -339,8 +425,8 @@ 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%' },
@ -401,7 +491,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}
@ -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> */}

142
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle6.jsx
View File

@ -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}
@ -330,17 +415,15 @@ 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> */}

159
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle7.jsx
View File

@ -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}
@ -330,17 +415,15 @@ 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>

123
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle8.jsx
View File

@ -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}
@ -349,8 +429,8 @@ 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> */}

142
src/Pages/PurchaseReturn/PrintReturn/ThermalPrinterPurchaseReturn/PrintStyle9.jsx
View File

@ -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}
@ -345,8 +431,8 @@ 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%' },
@ -408,7 +497,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}
@ -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> */}

59
src/Pages/PurchaseReturn/purchasereturnPrint.jsx
View File

@ -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:&nbsp;{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>
))} */}
</>
);
};