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

Merge pull request 'print-colors-sq' (#237) from print-colors-sq into main 

Reviewed-on: Pozomind/pozo-retail-app#237
This commit is contained in:
karthikalakshmi 2026-03-05 13:48:06 +05:30
parent 75c156b7b8 e16cd5b9a7
commit 2282c6a7b7
19 changed files with 898 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/Features/ThemeChange/ThemeChange.js
View File

@ -544,11 +544,13 @@ const initialState = {
PrintTemplate: null,
DCPrintTemplate: null,
PrintFieldDetails: null,
DCtoInvoicePrintFieldDetails: null,
PricingAppPricingName: null,
FeatureAddonData: [],
SessionData: [],
ThemeCreation: {},
printDatas: {},
DCtoInvoice: {},
DefaultTheme: [],
OthersTheme: [],
SelectedTheme: {},
@ -2407,12 +2409,16 @@ const ThemeSlice = createSlice({
item.SetasDefault == 'Y' &&
item.PrintTypeName === 'Delivery Chalan'
)?.StyleName;
state.printDatas =
action?.payload?.data?.data?.[0]?.ComponentDetails.find(
(item) =>
item.SetasDefault == 'Y' && item.PrintTypeName === 'Sales'
);
state.DCtoInvoice =
action?.payload?.data?.data?.[0]?.ComponentDetails.find(
(item) =>
item.SetasDefault == 'Y' && item.PrintTypeName === 'DC to Invoice'
);
state.PrintFieldDetails =
action?.payload?.data?.data?.[0]?.ComponentDetails?.find(
(item) =>
@ -2421,6 +2427,14 @@ const ThemeSlice = createSlice({
acc[item.ConfigName] = true;
return acc;
}, {});
state.DCtoInvoicePrintFieldDetails =
action?.payload?.data?.data?.[0]?.ComponentDetails?.find(
(item) =>
item.SetasDefault == 'Y' && item.PrintTypeName === 'DC to Invoice'
)?.FieldDetails?.reduce((acc, item) => {
acc[item.ConfigName] = true;
return acc;
}, {});
} else if (action?.payload?.data?.statusCode == 0) {
state.PrintTemplate = undefined;
@ -2755,6 +2769,7 @@ export const GlobalPricingAppPricingName = (state) =>
state?.theme?.PricingAppPricingName;
export const SelectedPrintTemplate = (state) => state?.theme?.PrintTemplate;
export const GloabalFieldDetails = (state) => state?.theme?.PrintFieldDetails;
export const GloabalDCtoInvoiceFieldDetails = (state) => state?.theme?.DCtoInvoicePrintFieldDetails;
export const GlobalReprintDataFound = (state) => state.theme?.ReprintDataFound;
export const GlobalPritdummyData = (state) => state.theme?.PrintdummyData;
export const GlobalprintSize = (state) => state.theme?.printSize;
@ -2865,6 +2880,7 @@ export const SelectedGlobalSubCatgFont = (state) =>
state.theme.SelectedSubCatgFont;
export const StoredSessionData = (state) => state.theme.SessionData;
export const GlobalprintDatas = (state) => state.theme.printDatas;
export const GlobalDCtoInvoicePrint = (state) => state.theme.DCtoInvoice;
export const GlobalDefaultTheme = (state) => state.theme.DefaultTheme;
export const GlobalOthersTheme = (state) => state.theme.OthersTheme;
export const GlobalSelectedTheme = (state) => state.theme.SelectedTheme;

4
src/Pages/DeliveryChallanToInvoice/DeliveryChallanToInvoiceList.jsx
View File

@ -23,7 +23,7 @@ import { Emailsend } from "../../Features/PurchaseOrder/PurchaseOrder";
import './DeliveryChallanToInvoice.scss'
import { settingDataSelector } from "../../Features/PreferenceMaster/PreferenceMaster";
import { getBranchDetail } from "../../Features/BrachLogin/BranchLogin";
import { getPrintSelectionComponentData, GlobalprintDatas, SelectedPrintTemplate } from "../../Features/ThemeChange/ThemeChange";
import { getPrintSelectionComponentData, GlobalDCtoInvoicePrint, GlobalprintDatas, SelectedPrintTemplate } from "../../Features/ThemeChange/ThemeChange";
import { printDCToInvoiceStyles } from "./PrintTemplates/printDCToInvoiceStyles";
import { isMobile } from "react-device-detect";
import { DCMobilePdfPrint } from "./PrintTemplates/DCMobilePdfPrint";
@ -48,7 +48,7 @@ const DeliveryChallanToInvoiceList = () => {
const UserType = getSession("UserType");
const SettingDataSelector = useSelector(PreferenceData);
const printerTemplateStyle = useSelector(SelectedPrintTemplate);
const printDatas = useSelector(GlobalprintDatas);
const printDatas = useSelector(GlobalDCtoInvoicePrint);
const [page, setPage] = useState(1);
const [empData, setEmpData] = useState();
const [addnewAccess, setaddnewAccess] = useState(true);

71
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice1.jsx
View File

@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
@ -17,8 +17,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
CustName,
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -28,7 +27,6 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
const pageSize = printDatas?.PageSize;
const branch = AddressDetails[0];
const logo = branch?.CompLogo;
const printGreeting = preference?.[0]?.SettingDtlDetails?.find(
(i) => i.SettingIdName === 'PrintGreetings'
);
@ -54,9 +52,37 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
maxHeight: "97vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const HeaderSection = () => (
<>
<Header logo={logo} branch={branch} />
<Header logo={logo} branch={branch} headerStyle={headerStyle} />
<hr className="dotted-line" />
<InvoiceMeta
InvoiceNo={InvoiceNo}
@ -73,10 +99,11 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
const renderFooter = () => (
<>
<hr className="dotted-line" />
<Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
<Summary TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
<hr className="dotted-line" />
<div style={{...footerColorStyle}}>
<hr className="dotted-line" />
{notesText && <p className="notesText">{notesText}</p>}
<div className="termsAndSignature">
{termsAndConditions && termsAndConditionsData?.length > 0 && (
@ -99,6 +126,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
{printGreeting?.SettingValue === "Y" && (
<div className="printGreeting">Thank You Visit Again</div>
)}
</div>
</>
)}
</>
@ -119,7 +147,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
{!formatTheme && isFinalFooterPage && renderFooter()}
</div>
{formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@ -129,7 +157,7 @@ const PrintStyleDCToInvoice1 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle} rowtypeStyle={rowtypeStyle} />
{renderFooter()}
</div>
)}
@ -141,8 +169,8 @@ export default PrintStyleDCToInvoice1;
// -------------------- COMPONENTS --------------------
const Header = ({ logo, branch }) => (
<div className="header">
const Header = ({ logo, branch, headerStyle }) => (
<div className="header" style={{ ...headerStyle }}>
{/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
<div className="headerText">
<div className="companyName">{branch.CompName}</div>
@ -172,7 +200,7 @@ const InvoiceMeta = ({ InvoiceNo, DCNo, InvoiceDate, CustMobile, VehicleNo, Cust
</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%" },
@ -186,7 +214,7 @@ const ProductTable = ({ data }) => {
return (
<table className="productTable">
<thead>
<tr>
<tr style={{ ...tableHeaderStyle }}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
))}
@ -194,7 +222,18 @@ 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>
@ -209,8 +248,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
<div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
<div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>

67
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice10.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -52,9 +52,36 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
height: pageSize === "A5" ? "170mm" : "98vh",
maxHeight: "98vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -95,6 +122,7 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -113,13 +141,14 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && (
<>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -136,11 +165,12 @@ const PrintStyleDCToInvoice10 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
{renderFooter()}
@ -154,8 +184,8 @@ export default PrintStyleDCToInvoice10;
// COMPONENTS
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -176,7 +206,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -188,9 +218,9 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
<table className="product-table" >
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -198,7 +228,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -213,8 +254,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div className="text-left">Subtotal :</div>
<div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

68
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice11.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
@ -19,7 +19,7 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -53,9 +53,36 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
height: pageSize === "A5" ? "170mm" : "98vh",
maxHeight: "98vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -94,6 +121,7 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
branch={branch}
InvoiceNo={InvoiceNo}
DCNo={DCNo}
headerStyle={headerStyle}
/>
);
@ -112,13 +140,14 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && (
<>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -137,11 +166,12 @@ const PrintStyleDCToInvoice11 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -159,9 +189,9 @@ export default PrintStyleDCToInvoice11;
// COMPONENTS
const Header = ({ branch, InvoiceNo, DCNo }) => (
<div className="header-section">
<div className="header-section-wrapper">
const Header = ({ branch, InvoiceNo, DCNo,headerStyle }) => (
<div className="header-section" >
<div className="header-section-wrapper" style={{...headerStyle}}>
<div className="header-company">{branch?.CompName}</div>
<div className="footer-dotted-line" />
<div className="branch-address">
@ -181,7 +211,7 @@ const Header = ({ branch, InvoiceNo, DCNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -193,9 +223,9 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
<table className="product-table" >
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -203,7 +233,17 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId} style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -218,8 +258,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div className="text-left">Subtotal</div>
<div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

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

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -45,6 +45,33 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -55,7 +82,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
});
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -99,6 +126,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -117,7 +145,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && (
<>
<hr className="footer-dashed-line" />
@ -125,6 +153,7 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dashed-line" />
</>
@ -138,12 +167,13 @@ const PrintStyleDCToInvoice12 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dashed-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dashed-line" />
{renderFooter()}
@ -157,8 +187,8 @@ export default PrintStyleDCToInvoice12;
// COMPONENTS
const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company-dtls">
<div className="header-company">{branch?.CompName}</div>
@ -184,7 +214,7 @@ const Header = ({ CustMobile, CustName, logo, branch, InvoiceNo, DCNo, InvoiceDa
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -196,9 +226,9 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
<table className="product-table" >
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -206,7 +236,17 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId} style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -221,8 +261,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div>
<div className="text-left">Subtotal</div>

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

@ -1,8 +1,9 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
import { isMobile } from "react-device-detect";
import { style } from "../../Product/Printstyles";
const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
const {
@ -19,7 +20,7 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -46,6 +47,33 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -64,12 +92,13 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
<hr className="dotted-line" />
@ -115,13 +144,14 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
{isLastPage && <>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -137,12 +167,13 @@ const PrintStyleDCToInvoice2 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -159,8 +190,8 @@ export default PrintStyleDCToInvoice2;
// -------------------- COMPONENTS --------------------
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
{logo && <img src={logo} alt="Company Logo" className="header-logo" width={!isMobile ? '60px' : 'auto'} />}
<div>
@ -184,7 +215,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</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%" },
@ -199,7 +230,7 @@ const ProductTable = ({ data }) => {
<>
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
))}
@ -207,7 +238,18 @@ 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>
@ -223,8 +265,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<strong>Subtotal</strong>
<span>:</span>

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

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -45,6 +45,34 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -63,12 +91,13 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -114,13 +143,14 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && <>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -136,12 +166,13 @@ const PrintStyleDCToInvoice3 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails
CustMobile={CustMobile}
@ -158,8 +189,8 @@ export default PrintStyleDCToInvoice3;
// -------------------- COMPONENTS --------------------
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -181,7 +212,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "20%" },
@ -196,7 +227,7 @@ const ProductTable = ({ data }) => {
<>
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }} scope="col">{col.label}</th>
))}
@ -204,7 +235,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td>{prod.ProdVariantName}</td>
@ -220,8 +262,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<strong>Subtotal:</strong>
<div> ₹ {TotalAmount.toFixed(2)}</div>

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

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -54,6 +54,35 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
maxHeight: "97vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const HeaderSection = () => (
<>
<Header
@ -63,12 +92,13 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -114,13 +144,14 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && <>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails
@ -137,12 +168,13 @@ const PrintStyleDCToInvoice4 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails
@ -160,8 +192,8 @@ export default PrintStyleDCToInvoice4;
// -------------------- COMPONENTS --------------------
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -182,7 +214,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</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%", align: 'center' },
@ -197,7 +229,7 @@ const ProductTable = ({ data }) => {
<>
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
))}
@ -205,7 +237,17 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId} style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td>{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -221,8 +263,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<strong>Subtotal</strong>
<span>:</span>

65
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice5.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -45,6 +45,34 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
flexDirection: "column",
@ -61,12 +89,13 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -112,12 +141,13 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && <>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<div className="footer-ruler" />
<CustomerDetails
@ -134,11 +164,12 @@ const PrintStyleDCToInvoice5 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<div className="footer-ruler" />
<CustomerDetails
@ -156,8 +187,8 @@ export default PrintStyleDCToInvoice5;
// -------------------- COMPONENTS --------------------
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -179,7 +210,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -194,7 +225,7 @@ const ProductTable = ({ data }) => {
<>
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
))}
@ -202,7 +233,17 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId} style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -218,8 +259,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="total-and-tax">
<div>Subtotal:</div>
<div> ₹ {TotalAmount.toFixed(2)}</div>

65
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice6.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -44,6 +44,34 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -61,12 +89,13 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -112,13 +141,14 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && <>
<div className="footer-ruler" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<div className="footer-ruler" />
<CustomerDetails
@ -136,12 +166,13 @@ const PrintStyleDCToInvoice6 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<div className="footer-ruler" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<div className="footer-ruler" />
<CustomerDetails
@ -160,8 +191,8 @@ export default PrintStyleDCToInvoice6;
// -------------------- COMPONENTS --------------------
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -182,7 +213,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -197,7 +228,7 @@ const ProductTable = ({ data }) => {
<>
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align, }} scope="col">{col.label}</th>
))}
@ -205,7 +236,17 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId} style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -221,8 +262,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="total-and-tax">
<div><strong>Subtotal: ₹ {TotalAmount.toFixed(2)}</strong></div>
<div><strong>Tax Amount: ₹ {TaxAmount.toFixed(2)}</strong></div>

70
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice7.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -53,8 +53,35 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
maxHeight: "98vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -95,6 +122,7 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -245,13 +273,14 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
{isLastPage && (
<>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails
@ -269,11 +298,12 @@ const PrintStyleDCToInvoice7 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@ -288,12 +318,12 @@ export default PrintStyleDCToInvoice7;
// COMPONENTS
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" >
<div style={{ letterSpacing: '5px', fontSize: '14px' }}>
********************************************************
</div>
<div className="header-section-wrapper">
<div className="header-section-wrapper" style={{...headerStyle}}>
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
<div>Mobile : {branch?.BrMobile}</div>
@ -316,7 +346,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -328,9 +358,10 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
// <table className="product-table" >
<table>
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -338,7 +369,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -353,8 +395,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="total-and-tax">
<div><strong>Subtotal: ₹ {TotalAmount.toFixed(2)}</strong></div>
<div><strong>Tax Amount: ₹ {TaxAmount.toFixed(2)}</strong></div>

67
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice8.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -52,9 +52,36 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
height: pageSize === "A5" ? "170mm" : "98vh",
maxHeight: "98vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -92,6 +119,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -110,7 +138,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && (
<>
<hr className="footer-dotted-line" />
@ -118,6 +146,7 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails
@ -135,12 +164,13 @@ const PrintStyleDCToInvoice8 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dotted-line" />
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@ -155,8 +185,8 @@ export default PrintStyleDCToInvoice8;
// COMPONENTS
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -177,7 +207,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -189,9 +219,9 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
<table className="product-table" >
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -199,7 +229,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -214,8 +255,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div>Subtotal</div>
<span>:</span>

67
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoice9.jsx
View File

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange"; // Fix typo if needed
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -52,9 +52,36 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
height: pageSize === "A5" ? "170mm" : "98vh",
maxHeight: "98vh"
});
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const renderFooter = () => (
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -101,6 +128,7 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -119,13 +147,14 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && (
<>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails
@ -144,11 +173,12 @@ const PrintStyleDCToInvoice9 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<Summary
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<hr className="footer-dotted-line" />
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
@ -164,8 +194,8 @@ export default PrintStyleDCToInvoice9;
// COMPONENTS
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo,headerStyle }) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company">{branch?.CompName}</div>
<div>{branch?.Address1}-{branch?.City}-{branch?.Zip}</div>
@ -186,7 +216,7 @@ const Header = ({ branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data,tableHeaderStyle,tableBodyStyle,rowtypeStyle }) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -198,9 +228,9 @@ const ProductTable = ({ data }) => {
];
return (
<table className="product-table">
<table className="product-table" >
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -208,7 +238,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -223,8 +264,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<div className="summary" style={{...netAmountStyle}}>
<div className="summarydiv">
<div className="text-left">Subtotal :</div>
<div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>

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

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -45,6 +45,33 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -60,9 +87,10 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && (<>
@ -108,6 +136,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -126,7 +155,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
>
<div className="background-print-color">
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle} />
<hr className="footer-dashed-line" />
{!formatTheme && isFinalFooterPage && renderFooter()}
</div>
@ -137,7 +166,7 @@ const PrintStyleDCToInvoiceA4 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dashed-line" />
{renderFooter()}
</div>
@ -150,8 +179,8 @@ export default PrintStyleDCToInvoiceA4;
// COMPONENTS
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company-dtls">
<div className="header-company">{branch?.CompName}</div>
@ -177,7 +206,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -191,7 +220,7 @@ const ProductTable = ({ data }) => {
return (
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -199,7 +228,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -214,8 +254,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal,netAmountStyle }) => (
<div className="summary" >
<div className="summarydiv">
<div className="text-left">Subtotal : </div>
<div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>
@ -224,7 +264,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="text-left">Tax Amount : </div>
<div className="text-right"> ₹ {TaxAmount.toFixed(2)} </div>
</div>
<div className="summarydiv-total">
<div className="summarydiv-total" style={{...netAmountStyle}}>
<div className="text-left">Grand Total : </div>
<div className="text-right"> ₹ {GrandTotal.toFixed(2)}</div>
</div>

67
src/Pages/DeliveryChallanToInvoice/PrintTemplates/PrintStyleDCToInvoiceA4Standard.jsx
View File

@ -1,6 +1,6 @@
import React, { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }) => {
@ -19,7 +19,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
} = invoiceData;
console.log(invoiceData, "invoiceData")
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -48,6 +48,33 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -67,6 +94,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
CustMobile={CustMobile}
CustName={CustName}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
</>
);
@ -86,7 +114,7 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
<hr />
</div>}
{termsAndConditions && termsAndConditionsData?.length > 0 && (
<div className="termsAndConditions">
<div className="termsAndConditions" style={{...footerColorStyle}}>
<p className="termsAndConditionsHead">Terms & Conditions</p>
<ol className="termsAndConditionsList">
{termsAndConditionsData.map((item, idx) => (
@ -131,8 +159,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
>
<div>
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
{isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />}
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
{isLastPage && <Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>}
{!formatTheme && isFinalFooterPage && renderFooter()}
</div>
{formatTheme && isFinalFooterPage && <div>{renderFooter()}</div>}
@ -142,8 +170,8 @@ const PrintStyleDCToInvoiceA4Standard = ({ invoiceData, preference, printDatas }
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<Summary bankDetails={bankDetails} TotalAmount={TotalAmount} TaxAmount={TaxAmount} GrandTotal={GrandTotal} netAmountStyle={netAmountStyle}/>
{renderFooter()}
</div>
)}
@ -155,9 +183,9 @@ export default PrintStyleDCToInvoiceA4Standard;
// -------------------- COMPONENTS --------------------
const Header = ({ logo, branch }) => (
const Header = ({ logo, branch,headerStyle }) => (
<>
<div className="header">
<div className="header" style={{...headerStyle}}>
{/* {logo && <img src={logo} alt={`${branch?.CompName} Logo`} className="logo" />} */}
<div className="headerText">
<div className="companyName">{branch.CompName}</div>
@ -227,7 +255,7 @@ const InvoiceAmountWords = ({ amount }) => {
);
};
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%" },
{ label: "Product", key: "ProdName", width: "20%" },
@ -241,7 +269,7 @@ const ProductTable = ({ data }) => {
return (
<table className="productTable">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width }} scope="col">{col.label}</th>
))}
@ -249,7 +277,18 @@ 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>
@ -264,9 +303,9 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal }) => (
const Summary = ({ bankDetails, TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<>
<div className="summary">
<div className="summary" style={{...netAmountStyle}}>
<div><strong>Subtotal:</strong> ₹ {TotalAmount.toFixed(2)}</div>
<div><strong>Tax Amount:</strong> ₹ {TaxAmount.toFixed(2)}</div>
<div className="bold"><strong>Grand Total:</strong> ₹ {GrandTotal.toFixed(2)}</div>

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

@ -1,6 +1,6 @@
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { GloabalDCtoInvoiceFieldDetails, GloabalFieldDetails } from "../../../Features/ThemeChange/ThemeChange";
import { dateFormatChange1 } from "../../../Services/Others";
const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
@ -18,7 +18,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
VehicleNo
} = invoiceData;
const fieldDetails = useSelector(GloabalFieldDetails);
const fieldDetails = useSelector(GloabalDCtoInvoiceFieldDetails);
const signature = fieldDetails?.["signature"];
const termsAndConditions = fieldDetails?.["terms&conditions"];
const termsAndConditionsData = printDatas?.TermsandConditions;
@ -45,6 +45,33 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
const lastChunkRows = paginatedChunks.at(-1)?.length || 0;
const shouldFooterBeOnNewPage = lastChunkRows > (pageSize === "A5" ? 5 : 10);
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
const getPageStyle = (isFinalFooterPage) => ({
display: "flex",
@ -60,10 +87,11 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
TotalAmount={TotalAmount}
TaxAmount={TaxAmount}
GrandTotal={GrandTotal}
netAmountStyle={netAmountStyle}
/>
<CustomerDetails CustMobile={CustMobile} CustName={CustName} />
<hr className="footer-dashed-line" />
<div className="footer-section">
<div className="footer-section" style={{...footerColorStyle}}>
{(notesText || termsAndConditions || signature || printGreeting?.SettingValue === "Y") && (
<>
{notesText && <p className="footer-notes">{notesText}</p>}
@ -106,6 +134,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
DCNo={DCNo}
InvoiceDate={InvoiceDate}
VehicleNo={VehicleNo}
headerStyle={headerStyle}
/>
);
@ -124,7 +153,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
>
<div className="background-print-color">
{(chunkIndex === 0 || formatTheme) && <HeaderSection />}
<ProductTable data={dataChunk} />
<ProductTable data={dataChunk} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dashed-line" />
{!formatTheme && isFinalFooterPage && renderFooter()}
</div>
@ -135,7 +164,7 @@ const PrintStyleDCToInvoiceA5 = ({ invoiceData, preference, printDatas }) => {
) : (
<div className="container">
<HeaderSection />
<ProductTable data={ProductDetails} />
<ProductTable data={ProductDetails} tableHeaderStyle={tableHeaderStyle} tableBodyStyle={tableBodyStyle}rowtypeStyle={rowtypeStyle}/>
<hr className="footer-dashed-line" />
{renderFooter()}
</div>
@ -148,8 +177,8 @@ export default PrintStyleDCToInvoiceA5;
// COMPONENTS
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
<div className="header-section">
const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo ,headerStyle}) => (
<div className="header-section" style={{...headerStyle}}>
<div className="header-section-wrapper">
<div className="header-company-dtls">
<div className="header-company">{branch?.CompName}</div>
@ -175,7 +204,7 @@ const Header = ({ logo, branch, InvoiceNo, DCNo, InvoiceDate, VehicleNo }) => (
</div>
);
const ProductTable = ({ data }) => {
const ProductTable = ({ data ,tableHeaderStyle,tableBodyStyle,rowtypeStyle}) => {
const columns = [
{ label: "S.No", key: "sno", width: "5%", align: 'center' },
{ label: "Product", key: "ProdName", width: "35%", align: 'center' },
@ -189,7 +218,7 @@ const ProductTable = ({ data }) => {
return (
<table className="product-table">
<thead>
<tr>
<tr style={{...tableHeaderStyle}}>
{columns.map(col => (
<th key={col.key} style={{ width: col.width, textAlign: col.align }}>{col.label}</th>
))}
@ -197,7 +226,18 @@ const ProductTable = ({ data }) => {
</thead>
<tbody>
{data.map((prod, index) => (
<tr key={prod.UniqueId}>
<tr key={prod.UniqueId}
style={
index % 2 !== 1 && rowtypeStyle === "even"
? {
...tableBodyStyle
}
: index % 2 === 1 && rowtypeStyle === "odd"
? {
...tableBodyStyle
}
: {}
}>
<td className="text-center">{index + 1}</td>
<td>{prod.ProdName}</td>
<td className="text-center">{prod.ProdVariantName}</td>
@ -212,8 +252,8 @@ const ProductTable = ({ data }) => {
);
};
const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="summary">
const Summary = ({ TotalAmount, TaxAmount, GrandTotal ,netAmountStyle}) => (
<div className="summary" >
<div className="summarydiv">
<div className="text-left">Subtotal : </div>
<div className="text-right"> ₹ {TotalAmount.toFixed(2)}</div>
@ -222,7 +262,7 @@ const Summary = ({ TotalAmount, TaxAmount, GrandTotal }) => (
<div className="text-left">Tax Amount : </div>
<div className="text-right"> ₹ {TaxAmount.toFixed(2)} </div>
</div>
<div className="summarydiv-total">
<div className="summarydiv-total" style={{...netAmountStyle}}>
<div className="text-left">Grand Total : </div>
<div className="text-right"> ₹ {GrandTotal.toFixed(2)}</div>
</div>

72
src/Pages/DeliveryChallanToInvoice/PrintTemplates/TaxInvoicePrint.jsx
View File

@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import { isMobile } from 'react-device-detect';
import { extractLastNumberOrderId } from '../../../Services/Others';
import moment from 'moment';
import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
import { GloabalDCtoInvoiceFieldDetails, GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange';
const TaxInvoicePrint = ({
index,
@ -16,8 +16,8 @@ const TaxInvoicePrint = ({
BranchData,
printDatas,
BankDetails
}) => {
const GlobaldummyData = useSelector(GlobalPritdummyData);
}) => {
const GlobaldummyData = useSelector(GloabalDCtoInvoiceFieldDetails);
let BillName = printDatas?.PrintHdrName
// Function to convert number to words
const numberToWords = (num) => {
@ -52,9 +52,9 @@ const TaxInvoicePrint = ({
city: table2Data?.AddressDetails?.[0]?.City || "",
state: table2Data?.AddressDetails?.[0]?.State || "",
zip: table2Data?.AddressDetails?.[0]?.Zip || ""
},
},
companyGSTIN: table2Data?.AddressDetails?.[0]?.CompGSTIN || BranchData?.BrGSTIN || "",
companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail || BranchData?.companyEmail ||"",
companyEmail: table2Data?.AddressDetails?.[0]?.companyEmail || BranchData?.companyEmail || "",
companyMobile: table2Data?.AddressDetails?.[0]?.BrMobile || "",
companyMobile2: table2Data?.AddressDetails?.[0]?.BrMobile2 || "",
@ -67,7 +67,7 @@ const TaxInvoicePrint = ({
// Customer Details - mapped from A4Standard CustomerDetails array
customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustName
|| "",
|| "",
customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.CustMobile || "",
customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "",
customerAddress: {
@ -82,20 +82,41 @@ const TaxInvoicePrint = ({
// Totals - mapped from A4Standard
totalAmount: Number(table2Data?.BillAmount || table2Data?.TotalAmount || 0),
taxAmount: Number(OrderDetailGST || ''),
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal|| 0),
grandTotal: Number(table2Data?.NetAmount || table2Data?.GrandTotal || 0),
totalBillAmount: Number(table2Data?.BillAmount || table2Data?.GrandTotal || 0),
// Bank Details - mapped from A4Standard
bankDetails: BankDetails?.[0] || ""
};
console.log(table2Data, "Date1Date1", invoiceData, )
let printColors = printDatas?.PrintColors;
const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
const headerStyle = {
backgroundColor: headerColor?.background,
color: headerColor?.font,
}
const tableHeaderStyle = {
backgroundColor: tableHeaderColor?.background,
color: tableHeaderColor?.font,
}
const tableBodyStyle = {
backgroundColor: tableBodyColor?.background,
color: tableBodyColor?.font,
}
const rowtypeStyle = tableBodyColor?.rowType;
const footerColorStyle = {
backgroundColor: footerColor?.background,
color: footerColor?.font,
}
const netAmountStyle = {
backgroundColor: netAmtColor?.background,
color: netAmtColor?.font,
}
let PageSize = printDatas?.PageSize
const TakeawayData = table2Data?.productDetails
const DineInData = table2Data?.productDetails
const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2)
: 0;
@ -135,7 +156,7 @@ const TaxInvoicePrint = ({
dataSource = [];
}
console.log("Final DataSource:", table2Data, );
console.log("Final DataSource:", table2Data,);
const paginatedChunks = [];
@ -206,7 +227,7 @@ const TaxInvoicePrint = ({
{/* Header - Only on first page */}
{isFirstPage && (
<>
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}>
<div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", ...headerStyle }}>
<div></div>
<h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2>
<div>
@ -233,10 +254,10 @@ const TaxInvoicePrint = ({
textAlign: 'left'
}}>
<div style={{ fontWeight: '700', fontSize: '15px', }}>
<div style={{ fontWeight: '700', fontSize: '15px', color: headerColor?.font }}>
{invoiceData.companyName}
</div>
<div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div>
<div style={{ fontWeight: '700', fontSize: '12px' }}>{invoiceData.companyspecname}</div>
<div >{invoiceData.companyAddress.address1}</div>
<div>{invoiceData.companyAddress.address2}</div>
<div>{invoiceData.companyAddress.city} {invoiceData.companyAddress.zip ? ` - ${invoiceData.companyAddress.zip}` : ""}</div>
@ -376,6 +397,7 @@ const TaxInvoicePrint = ({
// borderRight: '1px solid #000',
borderBottom: '1px solid #000',
borderTop: '1px solid #000',
...tableHeaderStyle
}}>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Sl.No</div>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div>
@ -394,6 +416,11 @@ const TaxInvoicePrint = ({
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
...(index % 2 === 0 && rowtypeStyle === "even"
? tableBodyStyle
: index % 2 === 1 && rowtypeStyle === "odd"
? tableBodyStyle
: {})
}}>
<div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div>
@ -432,7 +459,7 @@ const TaxInvoicePrint = ({
</div>
</div>
{/* CGST */}
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
@ -447,13 +474,13 @@ const TaxInvoicePrint = ({
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div>
{<div style={{ padding: '6px 6px', textAlign: 'right', }}>
{ OrderDetailGST && OrderDetailGST.length > 0
{OrderDetailGST && OrderDetailGST.length > 0
? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
: "0.00"}
</div>}
</div>}
{/* SGST */}
{ OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
{OrderDetailGST && OrderDetailGST.length > 0 && <div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
// borderRight: '1px solid #000',
@ -474,7 +501,7 @@ const TaxInvoicePrint = ({
</div>
</div>}
{/* IGST */}
{ OrderDetailGST && OrderDetailGST.length > 0 && (
{OrderDetailGST && OrderDetailGST.length > 0 && (
<div style={{
display: 'grid',
gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%',
@ -557,7 +584,7 @@ const TaxInvoicePrint = ({
</div>
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ borderRight: '1px solid #000' }}></div>
<div style={{ padding: '8px 6px', textAlign: 'right', }}>
<div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}>
₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</div>
</div>
@ -804,6 +831,7 @@ const TaxInvoicePrint = ({
textAlign: 'center',
fontSize: '10px',
padding: '8px',
...footerColorStyle
}}>
<div>This is a Computer Generated Invoice</div>
</div>

44
src/Pages/DeliveryChallanToInvoice/PrintTemplates/printDCToInvoiceStyles.js
View File

@ -293,7 +293,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
}
.header-section-wrapper {
padding: 5px 0px;
background: #f3f3f3;
// background: #f3f3f3;
border-radius: 1%;
display: flex;
flex-direction: column;
@ -435,7 +435,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.invoice-head{
font-weight: light;
font-size: 18px;
color: #5e5e5e;
// color: #5e5e5e;
}
.meta-info {
margin-top: 1rem;
@ -453,7 +453,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
border-spacing: 0px 5px;
}
.product-table th {
background: #ebebebff;
// background: #ebebebff;
padding: 4px;
text-align: left;
}
@ -583,7 +583,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.invoice-head{
font-weight: light;
font-size: 16px;
color: #5e5e5e;
// color: #5e5e5e;
}
.meta-info {
display: flex;
@ -888,7 +888,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
text-align: center;
}
.header-section-wrapper {
background: #ccccccff;
// background: #ccccccff;
font-size: 15px;
font-weight: bold;
display: flex;
@ -928,7 +928,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th {
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
}
.product-table td {
padding: 4px;
@ -1057,7 +1057,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-weight: bold;
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
}
.product-table td {
padding: 4px;
@ -1153,7 +1153,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
}
.header-section {
text-align: center;
background: #dbdbdb;
// background: #dbdbdb;
padding: 1px 8px;
}
.header-section-wrapper {
@ -1192,7 +1192,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th {
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
}
.product-table td {
padding: 4px;
@ -1297,7 +1297,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
margin-bottom: 8px;
align-items: center;
font-weight: 500;
background: #dbdbdb;
// background: #dbdbdb;
}
.header-company {
font-size: 20px;
@ -1327,7 +1327,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th {
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
}
.product-table td {
padding: 4px;
@ -1436,7 +1436,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
width: 100%;
font-size: 20px;
font-weight: 600;
background: #dbdbdb;
// background: #dbdbdb;
}
.branch-address {
margin: 5px 0px;
@ -1463,7 +1463,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.product-table th {
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
}
.product-table td {
padding: 4px;
@ -1621,7 +1621,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-weight: bold;
padding: 4px;
text-align: left;
background: #ccccccff;
// background: #ccccccff;
border-bottom: 2px dashed #000;
}
.product-table td {
@ -1808,8 +1808,8 @@ export const printDCToInvoiceStyles = (printStyle) => {
padding: 4px;
text-align: left;
border: 2px solid #fff;
background: rgb(55, 59, 68);
color:rgb(255, 255, 255);
// background: rgb(55, 59, 68);
// color:rgb(255, 255, 255);
}
.product-table tr:nth-child(even) {
background-color: #E8E8E8;
@ -1899,7 +1899,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-size: 20px;
padding: 10px 0;
font-weight: 600;
background: rgb(253, 199, 22);
// background: rgb(253, 199, 22);
width: 100%;
display : flex;
justify-content :center;
@ -1988,11 +1988,11 @@ export const printDCToInvoiceStyles = (printStyle) => {
padding: 4px;
text-align: left;
border: 2px solid #fff;
background: rgb(55, 59, 68);
color:rgb(255, 255, 255);
// background: rgb(55, 59, 68);
// color:rgb(255, 255, 255);
}
.product-table tr:nth-child(even) {
background-color: #E8E8E8;
// background-color: #E8E8E8;
}
.product-table td {
padding: 4px;
@ -2018,7 +2018,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
.footer-notes {
font-size: 17px;
text-align: left;
color: #5e5e5e;
// color: #5e5e5e;
font-weight: bold;
}
.greeting-section {
@ -2079,7 +2079,7 @@ export const printDCToInvoiceStyles = (printStyle) => {
font-size: 20px;
padding: 10px 0;
font-weight: 600;
background: rgb(253, 199, 22);
// background: rgb(253, 199, 22);
width: 100%;
display : flex;
justify-content :center;